html,body,div,span,applet,object,iframe,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}article,aside,details,figcaption,figure,dialog,footer,header,hgroup,menu,nav,section{display:block;}a img{border:none;}

* { box-sizing: border-box; }
h1,h2,h3,h4,h5,h6 { font-weight:400; margin-top:0; }
strong { font-weight:700; }
html,body { height:100%; }

/* === show breakpoints for dev ==== 
body::after {  content: "320px"; position: fixed; left: 0; top: 0;text-align: center;padding: 10px; display: block; opacity: 0.3; width: 100px; z-index: 9999; background: rgba(0,0,0,0.2); }
@media screen and (min-width:480px) {    body::after { content: "480px"; } }
@media screen and (min-width:768px) {    body::after { content: "768px"; } }
@media screen and (min-width:1024px) {    body::after { content: "1024px"; } }
@media screen and (min-width:1400px) {    body::after { content: "1400px"; } }

 */

/* === breakpoints =====
xs :    320px //default
s  :    480px
m  :    768px
l  :    1024px
xl :    1400px
 ======================= */



/* ==== padding  ======= */

.p8040 { padding:80px 40px; }

.p10 { padding:10px; }
.p20 { padding:20px; }
.p30 { padding:30px; }
.p40 { padding:40px; }

.pl20 { padding-left:20px; }
.pl30 { padding-left:30px; }
.pl40 { padding-left:40px; }

.pr20 { padding-right:20px; }
.pr30 { padding-right:30px; }
.pr40 { padding-right:40px; }
.pr50 { padding-right:50px; }
.pr60 { padding-right:60px; }

.px0 { padding-left:0;padding-right:0; }
.px5 { padding-left:5px;padding-right:5px; }
.px10 { padding-left:10px;padding-right:10px; }
.px20 { padding-left:20px;padding-right:20px; }
.px30 { padding-left:30px;padding-right:30px; }
.px40 { padding-left:40px;padding-right:40px; }

.py20 { padding-top:20px;padding-bottom:20px; }
.py30 { padding-top:30px;padding-bottom:30px; }
.py40 { padding-top:40px;padding-bottom:40px; }

.pb0 { padding-bottom:0; }
.pb10 { padding-bottom:10px; }
.pb20 { padding-bottom:20px; }
.pb30 { padding-bottom:30px; }
.pb40 { padding-bottom:40px; }

.pt10 { padding-top:10px; }
.pt20 { padding-top:20px; }
.pt30 { padding-top:30px; }
.pt40 { padding-top:40px; }
.pt120 { padding-top:120px; }
.pt140 { padding-top:140px; }

@media screen and (min-width:768px) {
.m-p10 { padding:10px;}
.m-p20 { padding:20px;}
.m-pl20 { padding-left:20px; }
.m-pt120 { padding-top:120px;}
.m-pr20 { padding-right:20px; }
}

@media screen and (min-width:1024px) {
.p40-l { padding:40px;}
}
@media screen and (max-width:480px) {
.p20-m { padding:20px;}
}

/* === position ===== */

.left10 { left:10px; }
.left20 { left:20px; }
.left30 { left:30px; }
.left40 { left:40px; }

.bottom10 { bottom:10px; }
.bottom20 { bottom:20px; }
.bottom30 { bottom:30px; }
.bottom40 { bottom:40px; }

@media screen and (min-width:768px) {

.m-bottom10 { bottom:10px; }
.m-bottom20 { bottom:20px; }
.m-bottom30 { bottom:30px; }
.m-bottom40 { bottom:40px; }

.m-left10 { left:10px; }
.m-left20 { left:20px; }
.m-left30 { left:30px; }
.m-left40 { left:40px; }
}

/* ==== margin ======= */

.m10 { margin:10px; }
.m20 { margin:20px; }
.m30 { margin:30px; }
.m40 { margin:40px; }

.mt20 { margin-top:20px; }

.mx20 { margin-left:20px; margin-right: 20px; }
.my20 { margin-top:20px; margin-bottom: 20px; }
.mxAuto { margin-left:auto; margin-right:auto; }
.mb5 { margin-bottom:5px; }
.mb10 { margin-bottom:10px; }
.mb20 { margin-bottom:20px; }
.mb30 { margin-bottom:30px; }
.mb40 { margin-bottom:40px; }
.mb60 { margin-bottom:60px; }

@media screen and (max-width:768px) {
.s-mxAuto {  margin-left:auto; margin-right:auto; }
}

/* === heights ===== */

.h100 { height:100px; }
.fullHeight { height:100%; }
/* ==== widths ======= */
:root { --unit : 1; }

.mw60 { max-width: 60px;}
.mw100 { max-width: 100px;}
.mw200 { max-width: 200px;}
.mw240 { max-width: 240px;}
.mw300 { max-width: 300px;}
.mw400 { max-width: 400px;}
.mw500 { max-width: 500px;}
.mw600 { max-width: 600px;}
.mw700 { max-width: 700px;}
.mw800 { max-width: 800px; }
.mw840 { max-width: 840px; }
.mw900 { max-width: 900px; }
.mw1000 { max-width: 1000px; }
.mw1100 { max-width: 1100px; }
.mw1200 { max-width: 1200px; }
.fit { width:100%; }
.wHalf { width:50%;}


@media screen and (min-width:768px) {

    .m-wHalf { width:50%;}
    .l-fullHeight { height:100%; }
    .m-mw160 { max-width: 160px;}

}

  

/* === text === */
.textCenter { text-align:center; }
.textLeft { text-align:left; }


.tinyText { font-size:14px; }
.uppercase { text-transform: uppercase;}
.letterspace { letter-spacing: 4px;}

.transition { transition:all 0.5s ease; }

.lh100 { line-height:1;}
.lh120 { line-height:1.2;}
.lh140 { line-height:1.4;}
.lh160 { line-height:1.6;}

@media screen and (max-width:767px) {

    .s-textCenter { text-align:center; }
    .s-textLeft { text-align:left; }
}

@media screen and (min-width:768px) {

    .m-textCenter { text-align:center; }
    .m-textLeft { text-align:left; }
}

/* ==== flexbox ======= */
.flex { display:flex; }
.flexWrap { flex-wrap: wrap; }
.flexColumn { flex-direction: column; }
.flexRow { flex-direction: row; }
.itemsCenter { align-items:center; }
.itemsFlexStart { align-items:flex-start; }
.itemsFlexEnd{ align-items: flex-end; }

.justifyCenter { justify-content:center; }
.justifyFlexStart { justify-content:flex-start; }
.justifyFlexEnd{ justify-content: flex-end; }
.justifySpaceBetween{ justify-content: space-between; }
.justifySpaceAround{ justify-content: space-around; }

@media screen and (max-width:767px) {
.s-flexColumn { flex-direction: column; }
}
@media screen and (min-width:768px) {
.m-flexRow { flex-direction: row; }
.m-flexRowReverse { flex-direction: row-reverse; }
.m-justifyFlexEnd { justify-content: flex-end;  }
.m-justifyFlexCenter { justify-content: center;  }
.m-itemsCenter { align-items:center; }
.m-itemsFlexEnd { align-items:flex-end; }
.m-flexColumn { flex-direction: column; }
}
/* === columns === */
.col3 { width:25%; }
.col4 { width:33.3333%; }
.col6 { width:50%; }
.col8 { width:66.6666%; }
.col9 { width:75%; }
.col12 { width:100% }

@media screen and (max-width:479px) {
.xs-col3 { width:22%; }
.xs-col4 { width:28%; }
.xs-col6 { width: 46%; }
.xs-col9 { width:74%; }
.xs-col12 { width:100% }
}
@media screen and (min-width:480px) {
.s-flex { display: flex; }
.s-col3 { width:22%; }
.s-col4 { width: 28%; }
.s-col6 { width: 46%; }
.s-col9 { width:74%; }
.s-col12 { width:100% }
}

@media screen and (min-width:768px) {
.m-flex { display: flex; }
.m-col2 { width:16%; }
.m-col3 { width:22%; }
.m-col4 { width: 32%; }
.m-col6 { width: 46%; }
.m-col9 { width:74%; }
.m-col12 { width:100% }
}

@media screen and (min-width:1024px) {
.l-flex { display: flex; }
}

/* === images ==== */

.imgFit { height:auto; max-width: 100%;}
.objectFitCover { object-fit: cover; }
.objectFitContain { object-fit: contain; }
/* ==== position ======= */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

@media screen and (min-width:768px) {
.m-absolute{ position: absolute; }
    .m-right40 {right:40px; }
    .m-left40 {left:40px; }
}
@media screen and (min-width:1024px) {
.l-absolute{ position: absolute; }
    .l-right40 {right:40px; }
    .l-left40 {left:40px; }
}
/* === z-index ==== */
.z1 { z-index: 1;}
.z5 { z-index: 5;}
.z10 { z-index: 10;}
.z50 { z-index: 50;}
.z100 { z-index: 100;}

/* === utilities === */
.overflowXAuto { overflow-x:auto; }

.hide { display:none; }
@media screen and (max-width:479px) {
.xs-show { display: inline; }
}
@media screen and (max-width:767px) {
.s-show { display: inline; }
.s-overflowXAuto { overflow-x:auto; }
}
@media screen and (max-width:479px) {
.xs-hide { display:none; }
 }
@media screen and (min-width:480px) and (max-width:767px) {
.s-hide { display:none; }
}
@media screen and (min-width:768px) and (max-width:1023px) {
.m-hide { display:none; }
}
@media screen and (min-width:1024px) and (max-width:1399px) {
.l-hide { display:none; }
}
@media screen and (min-width:1400px) {
.xl-hide { display:none; }
}
.center { margin-left:auto; margin-right:auto; }
.block { display:block;}
.inlineBlock { display:inline-block;}
.inline { display: inline; }
.overflowHidden { overflow:hidden; }
.overflowXHidden { overflow-x: hidden;}
.overflowYHidden { overflow-y: hidden;}
@media screen and (max-width:480px) {
.s-block { display:block;}
}
/* === borders === */
.border { border:1px solid #ccc; }
.border-top { border-top:1px solid #ccc; }
.border-bottom { border-bottom:1px solid #ccc; }

.rounded { border-radius: 5px; }
.lozenge { border-radius: 40px; }
.circle { border-radius: 50%; }


/* === shadows ==== */

.boxShadowLight { box-shadow: 0 0 10px rgba(0,0,0,0.2); }