@font-face {
    font-family: 'Merriwheather-Bold';
    src: url(/static/fonts/Merriweather-Bold.ttf) format('truetype');
}
@font-face {
    font-family: 'Merriwheather-Regular';
    src: url(/static/fonts/Merriweather-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'Merriwheather-Light';
    src: url(/static/fonts/Merriweather-Light.ttf) format('truetype');
}
@font-face {
    font-family: 'Roboto-Bold';
    src: url(/static/fonts/Roboto-Bold.ttf) format('truetype');
}
@font-face {
    font-family: 'Roboto-Regular';
    src: url(/static/fonts/Roboto-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'Roboto-Light';
    src: url(/static/fonts/Roboto-Light.ttf) format('truetype');
}
@font-face {
    font-family: "Dax W01 Bold";
    src: url("/static/fonts/cdf95fd0-9d1f-4daa-82ea-b25dbd236444.woff2") format("woff2"),url("/static/fonts/a7bdb1d5-35e0-4e9a-a581-75a95390fdf6.woff") format("woff");
}
@font-face {
    font-family: "Dax W01 Xbold";
    src: url("/static/fonts/fe92d3d5-c003-4ba9-b697-cdf3c5aa7b6d.woff2") format("woff2"),url("/static/fonts/88611036-0800-43a9-8bde-f48d72c1e39c.woff") format("woff");
}

section.nav {
    background: #fff6ef;
}

section.nav,
section.content {
    position: relative;
}

section.nav:before, section.content:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/img/magoh/tropical-bg.jpg');
    background-repeat: repeat;
    background-size: 35%;
}

section.nav:before {
    opacity: .03;
}

section.content:before {
    opacity: .05;
    z-index: -1;
}

html,
body {
    height: 100%;
    color: #45413a;
    font-family: 'Roboto-Regular', sans-serif;
}

/* primary */
.black {
    color: #000000;
}

.grey {
    color: #F4F4F3;
}

.grey-bg {
    background: #F4F4F3;
}

.darkgrey-bg {
    background: #929189;
}

.white-bg {
    background: #ffffff;
}

footer {
    background: #fff;
    box-shadow: 0 0 30px #00000014;
    padding: 50px 0;
}

footer ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

nav .btn,
nav .btn:hover,
nav .btn:active,
nav .btn:focus,
nav .btn:hover:active,
nav .btn:hover:focus {
    background-color: transparent !important;
    border: none;
    border-radius: 0;
    color: #7A8B27 !important;
    box-shadow: none !important;
    padding: 0;
    font-size: 19px;
}

nav .btn:hover,
nav .btn:hover:active,
nav .btn:hover:focus {
    color: #57631C !important;
}

nav.btn:hover {
    background: transparent;
}

.btn-primary {
    background-color: #7A8B27;
    border: none;
    box-shadow: 3px 3px 5px #322f2a80;
    padding: 12px 20px;
    border-radius: 0;
    color: #fff;
    font-family: "Dax W01 Bold";
    font-size: 21px;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover:active,
.btn-primary:hover:focus,
.social .fa-paper-plane:hover,
.keyvisual .counter > a:hover {
    background-color: #57631C !important;
    text-decoration: none;
}

footer {
    text-align: center;    
}

a {
    transition: 0.1s ease-in-out !important;
}

a,
a:hover {
    color: #7A8B27;
}

svg, img, video {
    max-width: 100%;
}

section.teaser {
    position: relative;
    color: #fff6ef;
}


section.teaser video {
    width: 100%;
}

section.teaser .row {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 15px;
    right: 15px;
    display: flex;
    align-content: center;
    text-align: center;
}

.container-fluid {
    padding: 50px 15px;
}

.img-fluid {
    width: 100%;
}

.img-wrapper {
    padding-bottom: 66%;
    background-position: center;
    background-size: cover;
}

/*
/* Light: 300
/* Medium: 500
/* Semi-Bold: 600
/* Extra-Bold: 800
*/

b, strong {
    font-family: 'Roboto-Bold';
    font-weight: normal;
}

body {
    font-size: 19px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Merriwheather-Regular';
}

h1 {
    font-size: 30px;
    margin-bottom: 20px;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 20px;
}

h4 {
    font-size: 18px;
}

form > .form-group:last-child {
    margin-bottom: 0;
}

.lead {
    font-family: 'Merriwheather-Bold';
    font-size: 17px;
}

/* Custom Validation */

.custom-control-input.is-valid ~ .custom-control-label,
.was-validated .custom-control-input:valid ~ .custom-control-label {
    color: inherit;
}

.custom-control-input.is-valid:checked ~ .custom-control-label::before,
.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before,
.custom-control-input.is-valid ~ .custom-control-label::before,
.was-validated .custom-control-input:valid ~ .custom-control-label::before {
    border-color: #929189;
    background-color: #fff;
    box-shadow: none;
}

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: #929189 !important;
    background: none;
    box-shadow: none !important;
}


/* carousel */
.carousel-control-next,
.carousel-control-prev {
    width: 120px;
    opacity: 1;
    z-index: 0;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    background-image: url('/static/img/arrow-next.svg');
    width: 20px;
    height: 40px;
}

a[class*='carousel-control']:hover > span {
    /* prepend: brightness(0) saturate(100%) if svg is white */
    filter: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(19%) hue-rotate(22deg) brightness(91%) contrast(98%);
}

.carousel-control-prev-icon {
    transform: rotate(180deg);
}

.carousel-teaser {
    margin: 0;
}

.carousel-teaser .carousel-control-prev,
.carousel-teaser .carousel-control-next {
    width: 70px;
}

/* padding + margin */
.pb-5, .py-5 {
    padding-bottom: 120px !important;
}
.pt-5, .py-5 {
    padding-top: 120px !important;
}
.mb-5, .my-5 {
    margin-bottom: 120px !important;
}
.mt-5, .my-5 {
    margin-top: 120px !important;
}

.pb-4, .py-4 {
    padding-bottom: 60px !important;
}
.pt-4, .py-4 {
    padding-top: 60px !important;
}
.mb-4, .my-4 {
    margin-bottom: 60px !important;
}
.mt-4, .my-4 {
    margin-top: 60px !important;
}

.pb-3, .py-3 {
    padding-bottom: 30px !important;
}
.pt-3, .py-3 {
    padding-top: 30px !important;
}
.mb-3, .my-3 {
    margin-bottom: 30px !important;
}
.mt-3, .my-3 {
    margin-top: 30px !important;
}

.cc-window {
    background: #312E29 !important;
}

.cc-message {
    margin: 0 !important;
    padding: 8px 12px;
}

.cc-link {
    padding: 0 !important;
}

.cc-btn {
    background: #BDBDB8 !important;
    color: #312E29 !important;
    padding: 8px !important;
}

.cc-btn:hover {
    text-decoration: none;
    background: #cfcfcf !important;
}

.cc-window {
    flex-direction: column !important;
    align-items: stretch;
}

.cc-compliance {
    width: 100%;
}

/* nav */
.navbar {
    font-family: 'Merriwheather-Bold';
    padding: 15px 0;
}

footer a {
    color: #57631C;
}

.navbar a:hover,
.news-result a:hover,
.nav-item.selected a,
a.fas {
    text-decoration: none;
    color: #57631C;
}

.lang-switcher .dropdown-menu {
    border: 0;
}

.lang-switcher .dropdown-menu a {
    color: #7A8B27;
    padding: 8px 20px;
}

.lang-switcher .dropdown-menu a:hover {
    color: #57631C;
    background: #fff6ef;
}

.logo {
    height: 70px;
}

.social .col:first-child {
    padding-right: 0;
}

.social .col:last-child {
    padding-left: 0;
}

.social .fa-paper-plane {
    border-radius: 5px;
    padding: 6px 18px;
    max-height: 29px;
    background: #f8f833;
    color: #312E29;
    box-shadow: 3px 3px 5px #322f2a80;
}

.modal-content {
    border: none;
    border-radius: 5px;
}

.img-shadow {
    box-shadow: 8px 8px 12px #322f2a33;
}

.supporter {
    display: none;
}

.contact-plus {
    display: flex;
    flex-wrap: wrap;
}


@media (min-width: 1400px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 992px) {
}

@media (max-width: 991px) {
    /* padding + margin */
    .pb-5, .py-5 {
        padding-bottom: 50px !important;
    }
    .pt-5, .py-5 {
        padding-top: 50px !important;
    }
    .mb-5, .my-5 {
        margin-bottom: 50px !important;
    }
    .mt-5, .my-5 {
        margin-top: 50px !important;
    }

    .pb-4, .py-4 {
        padding-bottom: 40px !important;
    }
    .pt-4, .py-4 {
        padding-top: 40px !important;
    }
    .mb-4, .my-4 {
        margin-bottom: 40px !important;
    }
    .mt-4, .my-4 {
        margin-top: 40px !important;
    }

    .pb-3, .py-3 {
        padding-bottom: 20px !important;
    }
    .pt-3, .py-3 {
        padding-top: 20px !important;
    }
    .mb-3, .my-3 {
        margin-bottom: 20px !important;
    }
    .mt-3, .my-3 {
        margin-top: 20px !important;
    }

}

@media (max-width: 767px) {
    h2 {
        line-height:1.5em;
        margin-bottom:15px;
    }
    
    .btn-primary {
        width:100%;
        margin:10px auto 30px;
    } 

    .teaser .btn-primary {
        margin:10px 0 0;
    }
    
    .carousel {
        margin-bottom: 50px;
    }
    .navbar-collapse {
        order: 1;
    }
    
    .menu-handler {
        display: flex;
        align-items: center;
    }
    
    .navbar-toggler {
        font-size: 32px;
        border: none;
        padding: 0;
        margin-left: 20px;
        margin-right: 5px;
        color: #7A8B27;
    }

    nav .nav {
        flex-direction: column;
        margin-top: 20px;
    }

    nav .nav-item > a {
        padding: 7px 0;
        display: flex;
    }

    .contact-plus {
        margin-bottom: 40px;
    }

    .form-group {
        width: 100%;
    }

    .news-result .img-wrapper {
        margin-bottom: 30px;
    }

}
    

@media (min-width: 768px) {
    .container-fluid {
        padding: 100px 50px;
    }
    
    section.teaser .btn {
        margin-top: 50px;
    }

    section.teaser h1 {
        font-size: 48px;
    }
    
    h1 {
        font-size: 38px;
        line-height: 50px;
        margin-bottom: 20px;
    }
   
    h2 {
        font-size: 30px;
        line-height: 1.4;
    }
   
    h3 {
        font-size: 22px;
    }
   
    h4 {
        font-size: 20px;
    }

    .logo {
        height: 130px;
    }
   
    .cc-window {
        flex-direction: row !important;
    }

    .cc-compliance {
        width: auto;
    }

    .btn-skew {
        transform: rotate(-5deg);
    }

    nav .nav-item {
        margin-left: 35px;
    }

    .form-group {
        width: 50%;
        padding-right: 15px;
        padding-left: 15px;
    }
   
    .form-group:nth-child(2n+1) {
        padding-left: 0;
    }
   
    .form-group:nth-child(2n+2) {
        padding-right: 0;
    }
   
    .form-group:nth-child(10),
    .form-group:nth-child(11),
    .form-group:nth-child(12) {
        width: 100%;
        padding: 0;
    }
   
    .form-group:first-of-type {
        width: 50%;
        margin-right: 50%;
        padding-left: 0;
        padding-right: 15px;
    }

    .lead {
        font-size: 19px;
    }

}


@media (min-width: 576px) {
    .modal-dialog {
        max-width: 66%;
    }

}

@media (max-width: 575px) {
    body {
        overflow-wrap: break-word;
    }

}