@font-face {
  font-family: "FuturaMC";
  src: url(../fonts/FuturaMC.ttf) format("truetype");
}

@font-face {
  font-family: "Anton";
  src: url(../fonts/Anton.ttf) format("truetype");
}

h1 { font-family: "Kimberley", sans-serif }

body {
    font-family:FuturaMC;
    font-size:16px;
    color:#222222;
    padding:0px;
    margin:0px;
}

div {
    box-sizing:border-box;
}

.footer {
    display:flex;
    align-items: center;
    max-width:2560px;
    width:100%;
    height:190px;
    gap:10px;
    background-image:url(../gfx/footerbg.png);
    background-repeat:repeat-x;
    background-position: 0px 0px;
    background-size:contain;
}

.footer .footcontainer {
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:80px;
    padding-top:100px;
    padding-left:190px;
    padding-right:190px;
}

.navbar {
    display:flex;
    align-items: normal;
    max-width:2560px;
    width:100%;
    height:190px;
    gap:10px;
    background-image:url(../gfx/headbg.png);
    background-repeat:repeat-x;
    background-position: 0px 0px;
    background-size:contain;
}

.navbar.sticky {
    left:50%;
    position:fixed;
    top:0;
    transform:translate(-50%);
    z-index:2000;
}

.navbar .navcontainer {
    display:flex;
    justify-content: space-between;
    align-items: normal;
    width:100%;
    height:80px;
    padding-top:6px;
    padding-left:190px;
    padding-right:190px;
}

.navbar .logo {
    padding-left:2.5%;
}

.navbar .logo img {
    padding-top:5%;
    height:90%;
    width:auto;
}

.navbar .logo a {
    display:block !important;
}

.navbar .play {
    padding-right: 2.5%;
}

.navbar .play img {
    padding-top:2.5%;
    height:90%;
    width:auto;
}

.navbar .menu, .footer .menu {
    display:flex;
    gap:44px;
}

.navbar .menu a, .footer .menu a, .footer .menu span {
    display:flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    font-family:FuturaMC;
    font-size:24px;
    text-transform:uppercase;
    color:white;
}

.navbar .leftgroup, .navbar .rightgroup {
    /* */
}

.navpad {
    height:110px;
    width:1px;
    display:block;
}

.hash {
    position:absolute;
    margin-top:-80px;
}

.leftgroup {
    display:flex;
    padding-left:10px;
    gap:10px;
}

.rightgroup {
    display:flex;
    text-align:right;
    padding-right:10px;
}

.top_graphic {
    position:relative;
    display:block;
    width:100%;
    height:auto;
    margin-top:80px;
}

.top_graphic .leftarea {
    flex-direction:column;
    position:absolute;
    z-index:1000;
    text-align:center;
    display:flex;
    gap:10px;
    height:100%;
    width:50%;
    justify-content: center;
    align-items: center;
}

.leftarea .logo {
    display:flex;
    width:75%;
}

.leftarea .headline {
    display:flex;
    font-size:40px;
    text-shadow: 2px 2px 4px #5f0000;
    color:white;
}

.leftarea .play {
    display:flex;
    width:50%;
}

.group {
    display:flex;
    gap:10px;
    justify-content: center;
    align-items:center;
}

.group.col2 {
    flex-direction: row;
    width:100%;
}

.group.col1 {
    flex-direction: row;
    width:100%;
}

.group.row2 {
    flex-direction: column;
    width:100%;
}

.group .column {
    display:flex;
}

.group.col2 .column {
    width:50%;
}

.group.col1 .column {
    width:100%;
}

.group.col3 .column {
    width:33%;
}

.group.col3 .column.c1_hide {
}

.carousel_left {
    display:none;
    width:10%;
    text-align:right;
}

.carousel_right {
    display:none;
    width:10%;
    text-align:left;
}

.column .headline {
    display:flex;
    font-family:Anton;
    font-size:36px;
    text-align:left;
}

p.headline {
    display:block !important;
    font-size:30px !important;
    margin-bottom:0px;
}

.headline.center {
    text-align:center;
    display:inline-block;
}

.ai_top {
    align-items:initial;
}

.column .copy {
    display:flex;
    font-family:FuturaMC;
    font-size:24px;
}

.column .btn {
    margin-bottom:4px;
}

.copy p {

}

.pad10 {
    padding:10px;
}

.pad20 {
    padding:20px;
}

.pad20t {
    padding-top:20px;
}

.w100p {
    width:100%;
}

.mw1024px {
    max-width:1024px;
}

.groupbg {
    background-image:url(../gfx/sectionbg.png);
    background-size:cover;
    background-repeat:repeat-x;
    background-position:top left;
}

.groupbg .copy, .groupbg .headline {
    color:white;
}

.pointer {
    cursor:pointer;
}

.hide {
    display:none;
}

.lazy_webp {
    /* Apply a blur effect to the low-res image */
    filter: blur(6px);
    transition: filter 0.3s ease-out;
}

.lazy_webp.loaded {
    /* Remove blur when the high-res image is loaded */
    filter: blur(0);
}

@media only screen and (max-width: 1600px) {
    .navcontainer {
        padding-left:36px !important;
        padding-right:36px !important;
    }

    .footcontainer {
        padding-left:36px !important;
        padding-right:36px !important;
    }

    .top_graphic .headline {
        font-size:30px;
    }
}

@media only screen and (max-width: 1024px) {
    .navbar { 
        height:95px;
    }

    .footer {
        height:95px;
    }

    .navcontainer {
        padding-left:16px !important;
        padding-right:16px !important;
        height:40px !important;
    }

    .footcontainer {
        padding-left:16px !important;
        padding-right:16px !important;
        height:40px !important;
        padding-top:40px !important;
    }

    .navbar .menu a, .footer .menu a, .footer .menu span { 
        font-size: 16px; 
    }

    .menu {
        gap:10px !important;
    }

    .top_graphic {
        margin-top:40px;
    }

    .top_graphic .headline {
        font-size:24px;
    }

    .group.col2 {
        flex-direction: column;
    }

    .group.col3:not(.carousel) {
        flex-direction: column;
    }

    .group.col2 .column {
        width:80%;
    }

    .group.col3 .column {
        width:80%;
    }

    .group:is(.carousel) {
        gap:0px !important;
    }

    .group.col3 .column.c1_hide {
        display:none;
    }

    .carousel_left {
        display:flex;
    }

    .carousel_right {
        display:flex;
    }

    .navbar .menu a {
        /*display:none;*/
    }

    .copyfull {
        display:none !important;
    }
}

@media only screen and (max-width: 580px) {
    .navbar .menu a {
        display:none;
    }

    .footer .menu a, .footer .menu span { 
        font-size: 10px; 
    }

    .top_graphic .headline {
        font-size:20px;
    }

    .column .headline {
        font-size:24px;
    }

    p.headline {
        font-size:18px !important;
    }

    .column .copy {
        font-size:16px;
    }

    .column .btn {
        max-height:40px;
    }

    .pad20 {
        padding:16px;
    }

    .pad10 {
        padding:8px;
    }
}