/* pcss 1.0 July 2018 by Ashish Dhawan (AT) */

*, *::before, *::after {
	box-sizing: inherit;
}

	/* modal */
#capT {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}
.modal-content, #capT {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}
.close {
	position: absolute;
    top: 15px;
    right: 35px;
	cursor: pointer;
}
.modal-content, #capT {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

	/* hide elements */
.hide{display:none!important}

@media only screen and (max-width:600px) {
.hide-s{display:none!important}
	
.column {
        -webkit-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}

@media (max-width:992px) and (min-width:601px)
{.hide-m{display:none!important}
	
.column {
        -webkit-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

@media only screen and (min-width:993px) {
.hide-l{display:none!important}
}

/*@media only screen and (max-width:1200px) {
.hide-l{display:none!important}
}

@media (min-width:993px)*/

	/* quart */
.q {
	width: 16.66%;
	max-width: 100%;
	height: auto;
	cursor: pointer;
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	/*border: 1px solid;
    box-sizing: inherit;*/
}
.q:hover, .q:active {
	opacity: 0.59;
}
/* @media only screen and (orientation: landscape) 
@media (max-width:600px){
.q{
width:24.99999%;
}
} */

.qv {
	width: auto;
	max-width: 100%;
	height: auto;
	cursor: pointer;
	padding: 5px;
	-webkit-transition: 1s ease-out;
	-webkit-transition-duration: 1s ease-out;
}
.qv:hover, .qv:active {
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border: none;
	border-radius: 7px;
}

	/* mobile first */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 24.99999%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 24.99999%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
.row::after {
    content: "";
    clear: both;
    display: table;
}

	/* sidenav */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #252525;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    color:#C4302B;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

/*.row {
    display: -webkit-flexbox; 
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 4px;
}*/


.column {
    -webkit-flex: 100%; 
    flex: 100%;
    max-width: 100%;
    /*padding: 0 4px;*/
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

	/* container? why not. */
.ctn:after {
	content: "";
	display: table;
	clear: both;
}
.ctn {
	padding: 3.01em 16px;
}