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; }

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

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

/* === padding left === */
.pl20 { padding-left:20px; }
.pl30 { padding-left:30px; }
.pl40 { padding-left:40px; }
.pl50 { padding-left:50px; }
.pl60 { padding-left:60px; }

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

/* === padding left = right === */
.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; }

/* === padding top + bottom === */
.py5 { padding-top:5px;padding-bottom:5px; }
.py10 { padding-top:10px;padding-bottom:10px; }
.py20 { padding-top:20px;padding-bottom:20px; }
.py30 { padding-top:30px;padding-bottom:30px; }
.py40 { padding-top:40px;padding-bottom:40px; }

/* === padding bottom === */
.pb0 { padding-bottom:0; }
.pb10 { padding-bottom:10px; }
.pb20 { padding-bottom:20px; }
.pb30 { padding-bottom:30px; }
.pb40 { padding-bottom:40px; }
.pb80 { padding-bottom:80px; }
.pb120 { padding-bottom:120px; }

/* === padding top === */
.pt0 { padding-top:0; }
.pt10 { padding-top:10px; }
.pt20 { padding-top:20px; }
.pt30 { padding-top:30px; }
.pt40 { padding-top:40px; }
.pt80 { padding-top:80px; }
.pt120 { padding-top:120px; }

/* === medium screen and up === */
@media screen and (min-width:768px) {
.m-p20 { padding:20px;}
.m-p30 { padding:30px;}
.m-p40 { padding:40px;}
}
/* === large screen and up === */
@media screen and (min-width:1024px) {
.l-p20 { padding:20px;}
.l-p30 { padding:30px;}
.l-p40 { padding:40px;}
}
/* === small screens only === */
@media screen and (max-width:768px) {
.s-p20 { padding:20px;}
.s-p30 { padding:30px;}
.s-p40 { padding:40px;}
}

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

/* ==== margin top ======= */
.mt5 { margin-top:5px; }
.mt10 { margin-top:10px; }
.mt20 { margin-top:20px; }
.mt30 { margin-top:30px; }
.mt40 { margin-top:40px; }
.mt50 { margin-top:50px; }

/* ==== margin bottom ======= */
.mb5 { margin-bottom:5px; }
.mb10 { margin-bottom:10px; }
.mb20 { margin-bottom:20px; }
.mb30 { margin-bottom:30px; }
.mb40 { margin-bottom:40px; }
.mb50 { margin-bottom:50px; }
.mb60 { margin-bottom:50px; }

/* ==== margin right ======= */
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.mr40 { margin-right: 40px; }
.mr50 { margin-right: 50px; }

/* ==== margin left ======= */
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.ml50 { margin-left: 50px; }

/* ==== margin left and right ======= */
.mx20 { margin-left:20px; margin-right: 20px; }

/* ==== margin top and bottom ======= */
.my20 { margin-top:20px; margin-bottom: 20px; }

/* ==== margin centered ======= */
.mxAuto { margin-left:auto; margin-right:auto; }


/* === small screens only === */
@media screen and (max-width:768px) {
.s-mxAuto {  margin-left:auto; margin-right:auto; }
.s-mb10 {  margin-bottom:10px; }
}


/* === heights ===== */
.h100 { height:100px; }
.h200 { height:300px; }
.h300 { height:400px; }
.h400 { height:400px; }
.h600 { height:600px; }

.fullHeight { height:100%; }

/* === small screens only === */
@media screen and (max-width:767px) {
    .s-h100 { height:100px; }
    .s-h150 { height:150px; }
    .s-h200 { height:200px; }
    .s-h300 { height:300px; }
}

/* === extra small screens only === */
@media screen and (max-width:479px) {
    .xs-h100 { height:100px; }
    .xs-h150 { height:150px; }
    .xs-h200 { height:200px; }
    .xs-h300 { height:300px; }
}

/* === floats ==== */
.floatLeft { float:left; }
.floatRight { float:right; }

/* ==== widths ======= */
.mw10 { max-width: 10px;}
.mw14 { max-width: 14px;}
.mw20 { max-width: 20px;}
.mw60 { max-width: 60px;}
.mw80 { max-width: 80px;}
.mw100 { max-width: 100px;}
.mw140 { max-width: 140px;}
.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%;}

/* == medum screens ad up === */
@media screen and (min-width:768px) {
    .m-wHalf { width:50%;}
    .l-fullHeight { height:100%; }
    .m-mw140 { max-width: 140px;}
    .m-mw160 { max-width: 160px;}
}

/* === text === */
.textCenter { text-align:center; }
.textLeft { text-align:left; }
.h1 { font-size:40px; }
.h2 { font-size:36px; }
.h3 { font-size:28px; }
.h4 { font-size:18px; }
.h5 { font-size:16px; }
p { font-size: 14px; line-height: 150%; }

.fs12 { font-size: 12px; }
.fs14 { font-size: 14px; }
.bold { font-weight: 700; }
.italic { font-style: italic; }
.uppercase { text-transform: uppercase;}

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

.ls2 { letter-spacing: 2px; }
.ls3 { letter-spacing: 3px; }

.td0 { text-decoration: none; }

.textList { list-style: disc; padding-left: 18px; }

/* === tiny screens only === */
@media screen and (max-width:468px) {
    .xs-fs10 { font-size: 10px; }
}
/* === medium screens and up === */
@media screen and (min-width:768px) {
    .h1 { font-size:60px; }
    .h2 { font-size:48px; }
    .h3 { font-size:36px; }
    .h4 { font-size:24px; }
    .h5 { font-size:18px; }
    p { font-size: 16px; }
    .m-textCenter { text-align:center; }
    .m-textLeft { text-align:left; }
}

/* ==== shadows ====== */
.ts1 { text-shadow: 0 0 10px rgba(0,0,0,0.5); }
.bs1 { box-shadow: 0 0 10px rgba(0,0,0,0.2); }
.bs2 { box-shadow: 0 0 10px rgba(0,0,0,0.5); }

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

.alignSelfCenter { align-self: center; }

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

/* === small screens only ==== */
@media screen and (max-width:767px) {
    .s-column { flex-direction: column; }
}
/* === medium screens and up === */
@media screen and (min-width:768px) {
    .m-flexRow { flex-direction: row; }
    .m-flexRowReverse { flex-direction: row-reverse; }
    .m-justifyEnd { justify-content: flex-end;  }
    .m-justifyCenter { justify-content: center;  }
    .m-itemsCenter { align-items:center; }
    .m-itemsEnd { align-items:flex-end; }
}

/* === columns === */

/* === tiny screens only === */
@media screen and (max-width:479px)
    .xs-col3 { width:22%; }
    .xs-col4 { width:30%; }
    .xs-col4 { width:30%; }
    .xs-col6 { width:48%; }
    .xs-col9 { width:74%; }
    .xs-col12 { width:100% }
}

/* === small screens and up === */
@media screen and (min-width:480px) {
.s-flex { display: flex; }
.s-col3 { width:22%; }
.s-col4 { width:30%; }
.s-col6 { width:48%; }
.s-col9 { width:74%; }
.s-col12 { width:100% }
}

/* === medium screens and up === */
@media screen and (min-width:768px) {
.m-flex { display: flex; }
.m-col3 { width:22%; }
.m-col4 { width:30%; }
.m-col6 { width:48%; }
.m-col7 { width:56%; }
.m-col8 { width:65%; }
.m-col9 { width:74%; }
.m-col12 { width:100% }
}

/* === large screens and up === */
@media screen and (min-width:1024px) {
    .l-flex { display: flex; }
}

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


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

/* ==== position ======= */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* === display === */
.center { margin-left:auto; margin-right:auto; }
.block { display:block;}
.inlineBlock { display:inline-block;}
.inline { display: inline; }

/* == medium screens and up ==== */
@media screen and (min-width:768px) {
    .m-absolute{ position: absolute; }
    .m-right40 {right:40px; }
    .m-left40 {left:40px; }
}

/* == large screens and up ==== */
@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;}
.z200 { z-index: 200;}
.z300 { z-index: 300;}

/* === hide/show === */

.hide { display:none; }

/* == tiny screens only ==== */
@media screen and (max-width:479px) {
    .xs-show { display: inline; }
    .xs-hide { display:none; }
}
/* == small screens only ==== */
@media screen and (max-width:767px) {
    .s-show { display: inline; }
}

/* == small screens and medium screens ==== */
@media screen and (min-width:480px) and (max-width:767px) {
    .s-hide { display:none; }
}
/* == medium screens only ==== */
@media screen and (min-width:768px) and (max-width:1023px) {
    .m-hide { display:none; }
}

/* == large screens only ==== */
@media screen and (min-width:1024px) and (max-width:1399px) {
    .l-hide { display:none; }
}

/* == extra large screens only ==== */
@media screen and (min-width:1400px) {
    .xl-hide { display:none; }
}


/* === 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%; height:auto; }

/* ==== buttons  ======= */

 :root {
            --size:1;
            --primaryColour:#DC453A;
            --textColour:grey;
        }
        .btn {}
        .btn-sm { --size : 0.7 }
        .btn-lg { --size : 2 }


.btn { position: relative; border-radius: 60px; font-size:16px;display:inline-block;color:#fff; text-decoration: none; border:none; cursor: pointer;
padding:calc(var(--size) * 10px) calc(var(--size) * 20px); background:var(--primaryColour); }
.btn:hover { top:5px; }



/* ==== colors ======= */
.primaryColour {color: var(--primaryColour); }
.textWhite { color:#fff; }
.bgPrimary { background: var(--primaryColour); }
.bgSecondary { background: var(--secondaryColour); }
/* === shadows ==== */

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