@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url('../font/open-sans/open-sans-latin-ext-300-normal.woff2') format('woff2'),
       url('../font/open-sans/open-sans-latin-ext-300-normal.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../font/open-sans/open-sans-latin-ext-400-normal.woff2') format('woff2'),
       url('../font/open-sans/open-sans-latin-ext-400-normal.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../font/open-sans/open-sans-latin-ext-700-normal.woff2') format('woff2'),
       url('../font/open-sans/open-sans-latin-ext-700-normal.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../font/open-sans/open-sans-latin-ext-800-normal.woff2') format('woff2'),
       url('../font/open-sans/open-sans-latin-ext-800-normal.woff') format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,
                 U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
                 U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Caveat';
    src: url('../font/caveat/Caveat-Regular.eot');
    src: url('../font/caveat/Caveat-Regular.eot?#iefix') format('embedded-opentype'), url('../font/caveat/Caveat-Regular.woff2') format('woff2'), url('../font/caveat/Caveat-Regular.woff') format('woff'), url('../font/caveat/Caveat-Regular.ttf') format('truetype'), url('../font/caveat/Caveat-Regular.svg#Caveat') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'HVD';
    src: url('../font/hvd/hvd_bodedo-webfont.woff2') format('woff2'), url('../font/hvd/hvd_bodedo-webfont.woff') format('woff'), url('../font/hvd/hvd_bodedo-webfont.ttf') format('truetype'), url('../font/hvd/hvd_bodedo-webfont.svg#hvd_bodedoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 62.5%;
}

@media(max-width: 991px) {
    html {
        font-size: 50%;
    }
}

* {
    outline: none!important;
}

body {
    padding: 0;
    margin: 0;
    font-size: 1.7rem;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
}

a {
    text-decoration: none;
    color: #fff;
}

a:hover {
    text-decoration: underline;
    color: #fff;
}

a img {
    border: 0;
}

img,iframe {
    max-width: 100%;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.btn, input[type=submit] {
    background-color: #ed1c24;
    padding: 1.3rem 1.8rem;
    text-transform: uppercase;
    border-radius: 1.5rem;
    font-weight: 600;
    box-shadow: .3rem .4rem .5rem 0 rgba(1, 1, 1, 0.16);
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 1.6rem;
}

.btn:hover, input[type=submit]:hover {
    background-color: #d9141b;
    text-decoration: none;
}

.no-padding {
    padding: 0;
}

/* nav */
body > nav {
    padding: 1rem 0;
}

nav header img {
    width: 17rem;
}

nav header {
    padding: 2rem 0;
}

body > nav {
    position: absolute;
    top : 0;
    left: 0;
    width: 100%;
    z-index: 10;
    padding: 1rem 0;
}

@media (min-width: 992px) {
  body > nav .container {
    max-width: 85rem;
  }
}
@media (min-width: 1200px) {
  body > nav .container {
    max-width: 100rem;
  }
}
@media (min-width: 1400px) {
  body > nav .container {
    max-width: 120rem;
  }
}

nav header {
  padding: 0 0 2rem;
  text-align: center;
}
@media (min-width: 768px) {
  nav header {
    text-align: left;
  }
}
@media (min-width: 992px) {
  nav header {
    padding: 2rem 0;
  }
}
nav header img {
  width: 20rem;
}
@media (min-width: 768px) {
  nav header img {
    width: 28rem;
  }
}
@media (min-width: 992px) {
  nav header img {
    width: 28rem;
  }
}

/* homepage */
body {
    background-image: url('../img/bcg.jpg');
    background-position: top center;
    background-color: #ffd5b3;
}

section.homepage .container {
    max-width: 95rem;
}

section.homepage .banner {
    overflow: hidden;
}

section.homepage .banner figure {
    margin: 0;
    text-align: center;
}

section.homepage h1 {
    font-family: 'HVD';
    text-align: center;
    font-size: 6.2rem;
    color: #004899;
    margin: 2rem 0;
}

section.homepage h2 {
    font-family: 'Caveat';
    text-align: center;
    font-size: 6.2rem;
    color: #004899;
    margin: 2rem 0;
    font-weight: 400;
}

@media(max-width: 600px) {
    section.homepage h1 {
        font-size: 4rem;
        margin: 4rem 0;
    }

    section.homepage h2 {
        font-size: 5rem;
    }
}

section.homepage .box {
    background-image: url('../img/box-green.png');
    background-size: 100% 100%;
    padding: 4rem;
    font-size: 2rem;
    margin: 4rem 0;
}

section.homepage .box ul li {
    margin: 1rem 0;
}

@media(max-width: 600px) {
    section.homepage .box {
        padding: 2rem 2rem 2rem 0;
        font-size: 1.8rem;
    }
}

section.homepage .row {
    text-align: center;
    margin-bottom: 4rem;
}

section.homepage .row figure {
}

section.homepage .row figure img {
    max-width: 20rem;
}

section.homepage .row p {
    color: #000;
    font-size: 2.2rem;
}

section.homepage .row .rec p {
    max-width: 26rem;
    margin: 0 auto;
}

/*footer */
/* footer - social */
footer .social {
    background-color: #00b83b;
    font-size: 1.7rem;
    text-transform: uppercase;
    font-weight: 300;
    padding: 2rem 0 4rem;
    text-align: center;
    color: #fff;
    line-height: 4rem;
    position: relative;
    margin-top: 3rem;
}

footer .social:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: -2.9rem;
    width: 100%;
    height: 3rem;
    background-image: url('../img/footer_1.png');
    background-size: 100% 100%;
}

footer .social a {
    display: inline-block;
    background-color: #ffffff;
    border-radius: 50%;
    color: #49b748;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    font-size: 2.5rem;
    margin: 0 1rem;
}

footer .social a:hover {
    background-color: #008b1b;
    color: #fff;
}

footer .copyright {
    background-color: #008b1b;
    padding: 2rem 0;
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
    position: relative;
}

footer .copyright:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: -1.75rem;
    width: 100%;
    height: 3rem;
    background-image: url('../img/footer_2.png');
    background-size: 100% 100%;
}

footer .copyright a {
    color: #fff;
}

@media (max-width: 767px) {
    footer .social {
        padding: 3rem 0;
        font-size: 2.4rem;
    }

    footer .social span {
        display: block;
        margin: 0rem 1rem 2rem 1rem;
    }
}

/* footer - menu */
/* footer - cookie */
.cookie {
    display: none;
    z-index: 50000;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1em 0;
    background-color: #0154a6;
    text-align: left;
}

.cookie .cookie-message__inner {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    padding: 0 10px;
}

.cookie p {
    margin: 0;
}

.cookie p strong {
    display: inline-block;
    margin-bottom: 1em;
    font-size: 16px;
}

@media(min-width: 600px) {
    .cookie .btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 1rem;
    }

    .cookie p {
        padding-right: 15rem;
    }
}

@media(max-width: 599px) {
    .cookie .btn {
        float: right;
    }
}