@font-face {
    font-family: 'Robinson Press';
    src: url('Webfont/Robinson Press.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {background: #0460F2; height:100%;}

body {
    font-family: "Exo", sans-serif;
    line-height: 1.6;
    padding:20px 0; font-weight:300;

}


header {
    padding:20px 0; text-align:center; margin-bottom: -80px;
}

.hero p {font-size:70px; font-weight:300; line-height:70px; color:#fff; text-align:center;}

.mascot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: calc(100% - 40px); width: 960px; margin:0 auto; gap: 30px;
}

.mascot-left img.desktop {width: 100%; height: auto;}
.mascot-left img.mobile {display: none;}
.mascot-right img {width: 100%; height: auto;}

.mascot:before{content: ''; position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; background: #fff; z-index: -1; background: url('img/brush-bg.jpg') no-repeat center center #0460F2; transform: translate(-50%, -50%);}

.mascot h1 { font-size: 190px; line-height: 150px; color:#1CB63E; text-align:center; font-weight:300;    font-family: 'Robinson Press', 'Arial', sans-serif;}
.mascot h2 { font-size: 60px; line-height: 70px; color:#fff; text-align:center; font-weight:300;    font-family: 'Robinson Press', 'Arial', sans-serif;}


footer {background:#fff; text-align:center; max-width: calc(100% - 40px); width: 1012px; margin: -10px auto 40px; border-radius: 10px; padding:20px; position: relative; z-index: 1; box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.6); -webkit-box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.6); -moz-box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.6);}
footer p {font-size: 16px; line-height: 26px; color:#193370; text-align:center; font-weight:400; text-transform: uppercase;}
footer p:first-child {font-weight: 700; font-size: 18px; line-height: 28px;}
footer .range {display: flex; justify-content: space-between; align-items: center; margin:15px auto; max-width: 800px; gap: 20px; flex-wrap: wrap;}
footer .range img {max-width: calc(33.333% - 13.333px); height: auto;}
footer .range p {font-size: 46px; line-height: 40px; color:#193370; text-align:center;    font-family: 'Robinson Press', 'Arial', sans-serif;}
footer .range .highlight {color:#127FBE;}

@media (max-width: 900px) {
    header{margin-bottom: -50px;}
}

@media (max-width: 600px) {
    header{margin-bottom: 0px; padding-top: 0;}
    header img{width: 110px; height: auto;}
    footer .range {justify-content: center;}
    footer .range img {max-width: calc(50% - 10px); height: auto;}
    footer p{font-size: 16px; line-height: 22px;}
    footer p:first-child {font-size: 16px; line-height: 22px;}
    .mascot{flex-wrap: wrap; justify-content: center;}
    .mascot-left img.desktop {display: none;}
    .mascot-left img.mobile {display: block;}
    .mascot-right img {width: 75%; margin: 0 auto; display: block; height: auto;}

    .mascot:before{background: url('img/brush-bg-mob.jpg') no-repeat center center #0460F2;}
}