html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,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; }
strong { font-weight:700; }
html,body { height:100%; }
.fontBlack { font-weight:900; }
.colorWhite { color:#fff; }
.bgBlack { background:#000; color:#fff; }

/* === 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
 ======================= */

.content { max-width:1200px; margin:0 auto; }
.textList { list-style:disc; padding-left:20px; margin-bottom:20px; }
.textList li { margin-bottom:7px; }

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

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

.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; }
.pb60 { padding-bottom:60px; }
.pb100 { padding-bottom:100px; }

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

@media screen and (min-width:768px) {
.m-p10 { padding:10px;}
.m-p20 { padding:20px;}
.m-p40 { padding:40px;}
.m-p60 { padding:60px;}
.m-pl20 { padding-left:20px; }
.m-pt60 { padding-top:60px; }
.m-pt80 { padding-top:80px; }
.m-pt120 { padding-top:120px;}
.m-pb80 { padding-bottom:80px; }
.m-pb100 { padding-bottom:100px; }
.m-pb160 { padding-bottom:160px; }

.m-pr20 { padding-right:20px; }
}

@media screen and (min-width:1024px) {
.p40-l { padding:40px;}
}
@media screen and (max-width:480px) {
.s-p20 { padding:20px;}
.s-pt40 { padding-top:40px;}
.s-pt60 { padding-top:60px;}
.s-pt100 { padding-top:100px;}
.s-pt120 { padding-top:120px; }
.s-pb40 { padding-bottom:40px;}
.s-pb60 { padding-bottom:60px;}

}

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

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

.bottom0 { bottom:0; }
.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; }

.mt0 { margin-top:0; }
.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 (min-width:768px) {
.m-mb60 { margin-bottom:60px; }
}

@media screen and (max-width:768px) {
    .s-mb40 { margin-bottom:40px; }
    .s-mb0 { margin-bottom:0; }

.s-mxAuto {  margin-left:auto; margin-right:auto; }
}

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

.fullWidth { width:100%; }
.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; }
.mw900 { max-width: 900px; }
.mw1000 { max-width: 1000px; }
.mw1100 { max-width: 1100px; }
.fit { width:100%; }
.wHalf { width:50%;}
.wThird { width:33.3333%;}


@media screen and (min-width:768px) {
.m-wThird { width:33.3333%;}

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

}

  

/* === 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-itemsCenter { align-items:center; }

.s-flexColumn { flex-direction: column; }
.s-flexColumnReverse { flex-direction: column-reverse; }
}
@media screen and (min-width:768px) {
    .m-flex { display:flex; }

.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 === */
.col1 { 8.3333% }
.col2 { 16.6666% }
.col3 { width:25%; }
.col4 { width:33.3333%; }
.col5 { width:41.6666%; }
.col6 { width:50%; }
.col7 { 58.3333%; }
.col8 { 66.6666%; }
.col9 { width:75%; }
.col10 { 83.3333%; }
.col11 { 91.6666%; }
.col12 { width:100% }

@media screen and (max-width:479px) {
.xs-col1 { 8.3333% }
.xs-col2 { 16.6666% }
.xs-col3 { width:25%; }
.xs-col4 { width:33.3333%; }
.xs-col5 { width:41.6666%; }
.xs-col6 { width:50%; }
.xs-col7 { 58.3333%; }
.xs-col8 { 66.6666%; }
.xs-col9 { width:75%; }
.xs-col10 { 83.3333%; }
.xs-col11 { 91.6666%; }
.xs-col12 { width:100% }
}
@media screen and (min-width:480px) {
.s-flex { display: flex; }
.s-col1 { 8.3333% }
.s-col2 { 16.6666% }
.s-col3 { width:25%; }
.s-col4 { width:33.3333%; }
.s-col5 { width:41.6666%; }
.s-col6 { width:50%; }
.s-col7 { 58.3333%; }
.s-col8 { 66.6666%; }
.s-col9 { width:75%; }
.s-col10 { 83.3333%; }
.s-col11 { 91.6666%; }
.s-col12 { width:100% }
}

@media screen and (min-width:768px) {
.m-flex { display: flex; }
.m-col1 { 8.3333% }
.m-col2 { 16.6666% }
.m-col3 { width:25%; }
.m-col4 { width:33.3333%; }
.m-col5 { width:41.6666%; }
.m-col6 { width:50%; }
.m-col7 { 58.3333%; }
.m-col8 { 66.6666%; }
.m-col9 { width:75%; }
.m-col10 { 83.3333%; }
.m-col11 { 91.6666%; }
.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); }