@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
    @font-face {
        font-family: 'Futura PT';
        src: local('Futura PT Cond ExtraBold'), local('Futura-PT-Cond-ExtraBold'), url('FuturaPTCond-ExtraBold.woff2') format('woff2'), url('FuturaPTCond-ExtraBold.woff') format('woff'), url('FuturaPTCond-ExtraBold.ttf') format('truetype');
        font-weight: 800;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'Futura PT';
        font-style: normal;
        font-weight: 300;
        src: local('Futura PT'), url('Futura Condensed.ttf') format('truetype');
    }
    
    @font-face {
        font-family: 'Futura PT';
        font-style: normal;
        font-weight: 600;
        src: local('Futura PT'), url('futura-bold-condensed.otf') format('woff');
    }
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    a {
        transition: all 0.2s ease;
    }
    
    html {
        scroll-behavior: smooth;
    }
    
    .arrowBottom {
        position: absolute;
        bottom: 30px;
        left: 30px;
        z-index: 99;
        border: 1px solid #000;
        border-radius: 5px;
        background-color: #000;
    }
    
    .arrowBottom img {
        width: 40px;
        display: block;
    }
    /*GENERAL*/
    
    body {
        font-family: 'Futura PT';
        color: #fff;
        font-size: 21px;
        font-weight: 600;
        background: #FFDE01 url(../img/bg-1.jpg) top center / 100% 100vh;
        background-size: 100% 100%
    }
    
    body.homepage {
        background-size: 100% 100vh
    }
    
    .warning {
        background-color: #fff;
        font-size: 16px;
        padding: 10px 20px;
        color: #000;
        font-family: "Open Sans", sans-serif;
        text-align: center
    }
    
    main {}
    
    a {
        color: #000;
    }
    
    .smallLink {
        padding: 5px 9px;
        border-radius: 7px;
        border: 1px solid #000;
        background: #FFDE01;
        font-size: 17px;
        line-height: 36px;
        text-transform: uppercase;
        text-decoration: none;
    }
    
    .smallLink:hover {
        background: #000;
        color: #FFDE01;
    }
    
    ul,
    li {
        list-style: none;
    }
    
    .wrapper {
        padding: 0 50px;
        margin: 0 auto;
        max-width: 1600px;
        position: relative;
    }
    /* HEADER */
    
    header {
        display: flex;
        justify-content: space-between;
        padding: 30px 30px 0 30px;
        z-index: 2;
        position: relative;
        width: 100%;
    }
    
    header a {
        text-decoration: none;
    }
    
    header #navigation ul li {
        display: inline-block;
    }
    
    header #navigation ul li a {
        font-size: 24px;
        color: #D20A30;
        text-transform: uppercase;
        border: 1px solid #D20A30;
        border-radius: 5px;
        padding: 4px 8px;
        margin: 0 10px;
        display: block;
        background-color: #FFDE01;
    }
    
    header #navigation ul li a.active,
    header #navigation ul li a:hover {
        color: #FFDE01;
        background-color: #000;
    }
    
    header nav {
        display: flex;
    }
    
    header nav #navigation {
        margin-right: 30px;
    }
    
    header .lang {
        z-index: 10;
        position: relative;
    }
    
    select {
        -webkit-appearance: none;
    }
    
    header .lang button {
        cursor: pointer;
        font-size: 20px;
        text-transform: uppercase;
        border: 1px solid #D20A30;
        border-radius: 5px;
        padding: 4px 8px;
        margin: 0 10px;
        display: block;
        font-family: 'Futura PT';
        background-color: #FFDE01;
        color: #D20A30;
        -webkit-appearance: none;
    }
    
    header .lang .hiddenLang {
        display: none;
        position: absolute;
        width: 100%;
    }
    
    header .lang:hover .hiddenLang,
    header .lange:active .hiddenLang {
        display: block;
    }
    
    header .lang .hiddenLang a {
        display: block;
        width: 60px;
        text-align: center;
        padding: 5px;
    }
    /* FOOTER */
    
    footer {
        background-color: #fff;
        position: relative;
    }
    
    .foot-logo img {
        width: 100px;
    }
    
    footer .inside {
        padding: 30px;
        display: flex;
        justify-content: space-between
    }
    
    footer p {
        font-size: 16px;
        color: #000
    }
    
    footer .inside>div {
        align-self: center;
    }
    
    .foot-links ul {
        margin-bottom: 15px;
    }
    
    .foot-links li {
        display: inline-block;
        margin-right: 10px;
    }
    
    .foot-socials {
        text-align: right;
    }
    
    .foot-socials li {
        display: inline-block;
    }
    /* HOMEPAGE */
    
    .container {
        /* background: #FFDE01 url(../img/bg-1.jpg) center -200px / 100% 108vh;*/
    }
    
    .allGordiesResults {
        display: flex;
        flex-wrap: wrap;
    }
    
    .allGordiesResults .gordieResult {
        width: 20%;
        text-align: center;
        padding: 20px 15px;
    }
    
    .allGordiesResults .gordieResult .gordieName {
        margin-bottom: 10px;
    }
    
    .gordieName p {
        padding-left: 20px;
        background: url(../img/loupe.png) no-repeat left center;
        font-size: 17px;
        line-height: 16px;
        display: inline;
    }
    
    .gordieName h4 {
        font-size: 24px;
    }
    
    .beerName {
        border-radius: 10px;
        border: 1px solid #D20A30;
        background: #FFDE01;
        padding: 40px 0 14px 0;
        position: relative;
        margin-top: -38px;
        z-index: 0;
        text-transform: uppercase;
        transform: rotate(4.237deg);
        color: #000;
    }
    
    .wrapbeerAndCounter {
        display: flex;
        justify-content: center;
        z-index: 1;
        position: relative;
    }
    /* HOMEPAGE > hp-find-gordies */
    
    #hp-find-gordies {
        position: relative;
        background: url(../img/bg-2.jpg) no-repeat top center / cover
    }
    
    #hp-find-gordies .wrapper {
        position: relative;
        z-index: 3;
    }
    
    #hp-find-gordies h2 {
        text-align: center;
        margin-bottom: 30px;
        text-transform: uppercase;
    }
    
    #hp-find-gordies #cup {
        position: absolute;
        top: 30px;
        right: 30px;
        z-index: 99;
    }
    
    #hp-find-gordies #cup img {
        width: 20px;
    }
    
    .counter {
        height: 270px;
        width: 20px;
        position: relative;
        border-radius: 5px;
        border: 1px solid #BCBCBC;
        background: linear-gradient(180deg, #F1F1F1 0%, #6A6A6A 100%);
        margin-right: 20px;
    }
    
    .counter .fill {
        position: absolute;
        bottom: 0;
        width: 100%;
        background: linear-gradient(0deg, #FFDD23 0%, #D70C2B 100%);
    }
    
    #hp-intro {
        overflow: hidden;
        position: relative;
        padding-top: 50px;
    }
    
    #hp-intro .wrapIntro {
        display: flex;
        padding-bottom: 150px;
    }
    
    #hp-intro .wrapIntro img {
        max-width: 100%;
    }
    
    #hp-intro .wrapIntro .mainVisual {
        align-self: center;
        width: 50%;
        text-align: center;
        padding: 0 30px
    }
    
    #hp-intro .wrapIntro .mainContent {
        text-align: center;
        align-self: center;
        width: 50%;
    }
    
    #hp-intro .wrapIntro .mainContent p {
        font-size: 20px;
    }
    
    #hp-intro .wrapIntro .mainContent h1,
    .h1 {
        font-size: 35px;
        margin-bottom: 40px;
        text-transform: uppercase;
    }
    
    #hp-intro .wrapIntro .mainContent h1 b,
    .h1 b {
        border: 1px solid #D20A30;
        display: inline-block;
        color: #D20A30;
        background-color: #FFDE01;
        border-radius: 5px;
        padding: 0 15px;
    }
    
    .season2h1 b {
        padding: 20px;
        border-radius: 15px;
        position: relative;
    }
    
    .season2h1 .decorations {
        top: -150px;
        left: 50%;
        margin-left: -120px;
        position: absolute
    }
    
    .season2h1 .decorations img {
        width: 200px;
    }
    
    #hp-intro .wrapIntro {
        overflow: hidden;
    }
    
    #hp-video {
        background-color: #6A6A6A;
        z-index: 2;
        position: relative;
    }
    
    #hp-video video {
        display: block;
        width: 100%;
    }
    
    .mainCans {
        position: absolute;
        /* bottom: -100px; */
        right: 0;
        width: 50%;
    }
    
    .mainCans .beer3 {
        transform: rotate(-35deg);
        right: -30px;
        bottom: -120px;
        width: 148px;
    }
    
    .mainCans .beer2 {
        z-index: 3;
        width: 138px;
        right: 100%;
        bottom: -110px;
        transform: rotate(25deg);
    }
    
    .mainCans .beer1 {
        transform: rotate(-5deg);
        right: 50%;
        bottom: -160px;
    }
    
    .mainCans>div {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    
    .mainCans>div img {
        display: block;
        width: 100%;
    }
    
    .moreInfoOnInsta {
        text-align: center;
        padding: 200px 0 0 0;
    }
    
    .moreInfoOnInsta .cta {
        position: relative;
    }
    
    .moreInfoOnInsta .cta img {
        position: absolute;
        bottom: 50px;
        right: 0;
    }
    
    #hp-find-gordies {
        padding: 100px 0;
    }
    /* CONTEST */
    
    fieldset {
        border: none;
        width: 100%;
    }
    
    #contestPage {
        position: relative;
    }
    
    #contestPage h1 {
        text-align: center;
        margin-bottom: 30px;
        text-transform: uppercase;
        line-height: 40px;
        font-size: 40px;
        padding: 0 20px;
    }
    
    .form .alert {
        padding: 20px;
        border: 2px solid red;
        margin-bottom: 30px;
        border-radius: 10px;
    }
    
    .formIntro {
        text-align: center;
        margin-bottom: 50px;
        max-width: 800px;
        margin: 0 auto 50px auto;
    }
    
    .formIntro p {
        font-size: 20px;
        margin-bottom: 30px;
        color: #000;
    }
    
    .formIntro h6 {
        color: #000;
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 800;
        line-height: 30px;
        /* 166.667% */
        text-transform: uppercase;
    }
    
    .row {
        display: flex;
        margin-bottom: 30px;
        justify-content: space-between;
    }
    
    .row .col {
        width: 48%;
    }
    
    .line {
        margin-bottom: 30px;
    }
    
    fieldset label {
        display: block;
        margin-bottom: 5px;
        text-transform: uppercase;
        color: #000
    }
    
    form {
        color: #000;
    }
    
    fieldset input,
    fieldset select {
        width: 100%;
        font-size: 15px;
        padding: 10px;
    }
    
    .cta {
        border-radius: 21px;
        border: 3px solid #D20A30;
        background: #FFDE01;
        color: #D20A30;
        text-align: center;
        font-size: 26px;
        font-weight: 600;
        line-height: normal;
        font-family: 'Futura PT';
        text-transform: uppercase;
        padding: 15px 70px;
        margin-top: 10px;
        text-decoration: none;
        cursor: pointer;
    }
    
    .cta:hover {
        scale: 1.1;
    }
    
    .checkbox {
        margin-bottom: 10px;
        display: block;
    }
    /* SIMPLE CONTENT PAGE ( LEGALS, ... )*/
    
    .simpleContentPage {
        padding: 0;
        position: relative;
    }
    
    .simpleContentPage .fromWYSIWYG p,
    .simpleContentPage .fromWYSIWYG ul,
    .simpleContentPage .fromWYSIWYG li {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 28px;
    }
    
    .simpleContentPage h1 {
        text-align: center;
        margin-bottom: 30px;
        text-transform: uppercase;
    }
    
    .yellowBox {
        border: 1px solid #000;
        padding: 40px 40px 80px 40px;
        margin-bottom: 30px;
        background-color: #FFF;
        position: relative;
        color: #000
    }
    
    .yellowBox img.absoBR {
        width: 200px;
        display: block;
        position: absolute;
        bottom: -10px;
        right: 0;
    }
    
    .yellowBox img.absoTL {
        display: block;
        position: absolute;
        top: 30px;
        left: -34px;
        width: 43px;
    }
    /* ABOUT PAGE */
    
    .aboutPage {
        position: relative;
    }
    
    .aboutPage .wrapper {
        padding-bottom: 100px;
        display: flex;
        justify-content: space-between;
    }
    
    .aboutPage .visual {
        width: 48%;
        align-self: center;
        text-align: center;
    }
    
    .aboutPage .visual img {
        max-width: 100%;
    }
    
    .aboutPage .content {
        width: 48%;
        text-align: center;
        align-self: center;
    }
    
    .aboutPage .content h1 {
        text-transform: uppercase;
        margin-bottom: 20px;
        font-size: 40px;
    }
    /* POPUPS */
    
    .popupWrapper {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 104;
        display: block
    }
    
    .popupWrapper .blur {
        width: 100vw;
        height: 100vh;
        position: absolute;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background-color: #0000002b;
    }
    
    .popupWrapper .wrapInside {
        z-index: 12;
        display: flex;
        position: relative;
        height: 100vh;
        width: 100vw;
    }
    
    .popupWrapper .insidePopup {
        background-color: #fff;
        width: 80%;
        align-self: center;
        margin: 0 auto;
        padding: 100px 40px;
        text-align: center;
        border-radius: 5px;
        position: relative;
    }
    
    .popupWrapper .insidePopup h3 {
        font-size: 40px;
        text-transform: uppercase;
    }
    
    .popupWrapper .insidePopup h4 {
        font-size: 30px;
        text-transform: uppercase;
        margin: 10px 0 40px 0;
        color: #000;
    }
    
    .popupWrapper .insidePopup p {
        font-size: 20px;
    }
    
    .popupWrapper .insidePopup .close {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer
    }
    /* PALMS AND DECORATIONS */
    
    .decorations .deco {
        position: absolute;
    }
    
    .decorations .deco img {
        display: block;
    }
    
    .decorations .deco1 {
        top: 150px;
        left: 0;
    }
    
    .decorations .deco1 img {
        width: 150px;
    }
    
    .decorations .deco2 {
        top: 40%;
        left: 0;
    }
    
    .decorations .deco2 img {
        width: 150px;
    }
    
    .decorations .deco3 {
        top: 0px;
        right: 0;
    }
    
    .decorations .deco3 img {
        width: 150px;
    }
    
    @media (max-width: 950px) {
        .mainCans .beer2 {
            width: 96px;
            right: 110%;
            bottom: -80px;
        }
        .mainCans .beer3 {
            right: -30px;
            bottom: -70px;
            width: 95px;
        }
        .mainCans .beer1 {
            right: 50%;
            bottom: -110px;
            width: 72px;
        }
        #hp-intro .wrapIntro {
            display: block;
        }
        #hp-intro .wrapIntro .mainVisual,
        #hp-intro .wrapIntro .mainContent {
            width: 100%;
        }
        .allGordiesResults .gordieResult {
            width: 25%;
        }
        footer .inside {
            display: block;
            text-align: center;
        }
        .foot-socials {
            text-align: center;
            margin-top: 20px;
        }
        .row {
            display: block;
            margin-bottom: 0;
        }
        .row .col {
            width: 100%;
            margin-bottom: 20px;
        }
        .aboutPage .wrapper {
            display: block;
        }
        .aboutPage .visual,
        .aboutPage .content {
            width: 100%;
        }
        .cta {
            font-size: 22px;
            padding: 4px 10px;
            display: block;
        }
        /*.warning {
        display: block;
        background-color: #FFDE01;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        left: 0;
        z-index: 5;
    }*/
        #hp-intro .wrapIntro {
            padding-bottom: 250px;
        }
        body.homepage {
            background-size: 100% 150vh;
        }
    }
    
    @media (max-width: 800px) {
        header #navigation ul li a {
            margin: 0;
        }
        .allGordiesResults .gordieResult {
            width: 33%;
        }
        #hp-intro .wrapIntro {
            padding-bottom: 200px;
        }
        #logo img {
            width: 80px;
            font-size: 20px;
            margin-right: 20px;
        }
        header {
            padding: 10px;
        }
        #hp-intro .wrapIntro .mainContent h1,
        .h1,
        .simpleContentPage h1 {
            font-size: 25px;
        }
        .wrapper {
            padding: 0 20px;
        }
        #contestPage h1 {
            line-height: 30px;
            font-size: 30px;
        }
        .yellowBox {
            padding: 40px 20px 80px 20px
        }
    }
    
    @media (max-width: 700px) {
        .allGordiesResults .gordieResult {
            width: 50%;
        }
        header #navigation ul li a,
        header .lang button {
            padding: 1px 5px;
            font-size: 20px;
            margin-bottom: 5px;
        }
        header .lang .hiddenLang a {
            width: 47px;
        }
        header .lang span {
            font-size: 20px;
        }
       
    }
    
    .fromWYSIWYG {}
    
    .fromWYSIWYG h1,
    .fromWYSIWYG h2,
    .fromWYSIWYG h3,
    .fromWYSIWYG h4 {
        margin-bottom: 20px;
    }
    
    .fromWYSIWYG p {
        margin-bottom: 15px;
        font-size: 18px;
        font-weight: 500;
    }
    
    .fromWYSIWYG ul,
    .fromWYSIWYG ol {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 600;
    }
    
    .fromWYSIWYG ul li,
    .fromWYSIWYG ol li {
        list-style: circle;
        margin-bottom: 10px;
        list-style-position: inside;
    }
    
    .fromWYSIWYG a {
        text-decoration: underline;
    }
    
    .fromWYSIWYG tr td {
        border-bottom: 1px solid hsl(0, 1%, 31%);
        padding: 10px;
    }