/* ****************** */
/* Grid */
/* ****************** */


.theme-section{
    display: flex;
    min-height: calc( 100vw * 0.44 );
    width: 100%;
}

.theme-section.grid-2{
    min-height: calc( 100vw * 0.44 / 2 );
}

.theme-section.grid-1{
    min-height: calc( 100vw * 0.3 );
}

.col{
    display: flex;
    align-items: stretch;
    height: 100%;
    position: relative;
    flex-wrap: wrap;
	width: 100%;
}

.col > *{
    flex-basis: 100%;
}

.col-5-12{
    flex-basis: calc( 100% / 12 * 5 );
}

.col-7-12{
    flex-basis: calc( 100% / 12 * 7 );
}

[data-blocks='1']{
    height: 100%;
}

[data-blocks='2']{
    height: 50%;
}

.bg{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.block .bg.overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ****************** */
/* Icons */
/* ****************** */

.icon{
    display: block;
    width: 3.8vw;
    height: 3.8vw;
}


/* ****************** */
/* Blocks */
/* ****************** */


.block{
    width: 100%;
    height: 100%;
}

.header *{
    margin: 0;
}


.block{
    font-family: 'Oxanium', cursive;
    color: white;
}

.block .content{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.block .content .header{
    position: absolute;
    left: 0;
    bottom: 0;
	padding: 45px;
	z-index: 95;
	max-width: 30vw;
}

.content .title{
    font-weight: 900;
    font-size: 4vw;
    line-height: 0.9;
}

.content .subtitle{
    color: #ffc900;
    font-size: 1.1vw;
    margin-top: 10px;
}

.block .content .icons{
    position: absolute;
    right: 0;
    bottom: 0;
	z-index: 100;
	padding: 45px;
}

.block .content .icons{
    z-index: 160;
    right: 45px;
    bottom: 45px;
    padding: 0;
}

.block .content .layers{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
}

.block .content .header{
    padding: 45px;
    padding: 1.7vw;
}

.pos-h-center{
    transform: translatex(-50%);
}

.block .content .layers .layer.padding-normal{
    padding: 20px;
    padding: 1.2vw;
}

.block .content .layers > *{
    position: relative;
    height: 100%;
}

.encaser{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 150;
}

.block .content{
    z-index: 160;
}

.block{
    position: relative;
    border-top: 1px solid white;
    border-left: 1px solid white;
}

.theme-section{
    border-right: 1px solid white;
}

.block .bg.overlay:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    background-color: black;
    transition: .2s ease-in-out;
}

.block:hover .bg.overlay:after{
    opacity: 0.3;
}

/* ****************** */
/* HEADER */
/* ****************** */



.site-header{
    position: fixed;
    top: 0;
    z-index: 260;
}

.site-header.header-left{
    left: 0;
}

.site-header.header-right{
    right: 0;
}

.site-header .logo{
    max-width: 180px;
    margin: 50px;
}

.site-header .icons{
    max-width: 210px;
    margin: 50px;
    margin-top: 70px;
}

.site-header .logo{
    width: 200px;
}

.site-header .row{
    display: flex;
    justify-content: space-between;
}
.site-header .row > *{
    align-self: center;
    margin: 0;
}



/* ****************** */
/* Block Layer Controls */
/* ****************** */

.layer{
  position: absolute;
}

.layer.size-full{
    width: 100%;
    height: 100%;
}


.layer.size-1-12{
    width: calc( 100% / 12 * 1 );
}

.layer.size-2-12{
    width: calc( 100% / 12 * 2 );
}

.layer.size-3-12{
    width: calc( 100% / 12 * 3 );
}

.layer.size-4-12{
    width: calc( 100% / 12 * 4 );
}

.layer.size-5-12{
    width: calc( 100% / 12 * 5 );
}

.layer.size-6-12{
    width: calc( 100% / 12 * 6 );
}


.layer.size-7-12{
    width: calc( 100% / 12 * 7 );
}

.layer.size-8-12{
    width: calc( 100% / 12 * 8 );
}

.layer.size-9-12{
    width: calc( 100% / 12 * 9 );
}


.layer.size-10-12{
    width: calc( 100% / 12 * 10 );
}

.layer.size-11-12{
    width: calc( 100% / 12 * 11 );
}

.layer.size-12-12{
    width: calc( 100% / 12 * 12 );
}

.layer.size-13-12{
    width: calc( 100% / 12 * 13 );
}

.layer.size-14-12{
    width: calc( 100% / 12 * 14 );
}

.layer.size-15-12{
    width: calc( 100% / 12 * 15 );
}




.layer.size-out-of-bounds{
    height: 105%;
    width: 100%;
}

.pos-h-center.layer img{
    margin-left: auto;
    margin-right: auto;
}

.pos-v-middle{top: 50%; transform: translatey(-50%);}
.pos-v-bottom{top: unset; bottom: 0;}
.pos-v-top{top: 0;}

.pos-h-center{left: 50%;}
.pos-h-left{left: 0%; text-align: left;}
.pos-h-right{left: unset; right: 0; text-align: right;}

.pos-v-middle.pos-h-center{
    transform: translate(-50%,-50%);
}


.layer.padding-normal{
    padding: 30px;
    padding: 1.3vw;
}

.layer img{
    display: block;
}

@media only screen and (max-width: 900px){
    .layer.pos-mob-h-center.layer img{
        margin-left: auto;
        margin-right: auto;
    }

    .layer.pos-mob-v-middle{top: 50%; transform: translatey(-50%);}
    .layer.pos-mob-v-bottom{top: unset; bottom: 0;}
    .layer.pos-mob-v-top{top: 0;}

    .layer.pos-mob-h-center{left: 50%;}
    .layer.pos-mob-h-left{left: 0%; text-align: left;}
    .layer.pos-mob-h-right{left: unset; right: 0; text-align: right;}

    .layer.pos-mob-v-middle.pos-h-center{
        transform: translate(-50%,-50%);
    }
    .pos-mob-v-top.pos-mob-h-center,
    .pos-mob-v-middle.pos-mob-h-center,
    .pos-mob-v-bottom.pos-mob-h-center{
        transform: translatey(0) translatex(-50%);
    }
}

.layer.negmar.pos-v-top{
    margin-top: -40px;
}

.layer.negmar.pos-v-bottom{
    margin-bottom: -40px;
}

.layer.negmar.pos-h-left{
    margin-left: -40px;
}

.layer.negmar.pos-h-right{
    margin-right: -40px;
}

/* ****************** */
/* component: theme-cta-row */
/* ****************** */


.component_theme-cta-row{
    background-color: #141414;
    color: white;
}

.component_theme-cta-row .col{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
}

.component_theme-cta-row .col > *{
    align-self: center;
}


.component_theme-cta-row .icons {
    display: flex;
    justify-content: space-around;
}

.theme-section.component_theme-cta-row{
    min-height: calc( 100vw * 0.15 );
}

.component_theme-cta-row .title{
    text-transform: uppercase;
}

.component_theme-cta-row .col .content{
    padding-left: 30px;
    padding-right: 30px;
    white-space: nowrap;
}

/* ****************** */
/* component: theme-hero */
/* ****************** */

.component_theme-hero{
    background-color: #ffc900;
}

.component_theme-hero > .col{
    max-width: 1170px;
    margin: 0 auto;
    padding-top: 50px;
}

.component_theme-hero img{
    display: block;
}

.component_theme-hero .book{
    display: block;
    position: relative;
}

.component_theme-hero .cta p,
.component_theme-hero .cta{
    display: block;
    text-align: center;
    margin: 0;
}

.component_theme-hero .book{
    bottom: 0;
}

.component_theme-hero .cta{
    position: absolute;
    left: 50%;
    transform: translate( -50% , -50%);
    top: 60px;
}

.component_theme-hero .book img{
    margin-bottom: -50px;
}

.component_theme-hero .cta a{
    z-index: 50;
    position: relative;
    margin-bottom: 0;
    width: auto;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 40px;
    background: white;
    border-radius: 35px;
    color: #140a17;
    text-decoration: unset;
    font-weight: bold;
}

.component_theme-hero .headline{
    padding-left: 70px;
    padding-right: 70px;
    text-align: center;
}

.component_theme-hero .headline .description{
    font-size: 1.2vw;
}

.component_theme-hero .headline .title{
    font-size: 4vw;
    margin: 0;
    font-weight: 900;
    text-transform: uppercase;
    color: #150a18;
}

.component_theme-hero .headline .subtitle{
    font-size: 1.4vw;
    color: #ef3c2e;
    font-weight: 700;
    margin-bottom: 0;
}

.component_theme-hero .cta{
    top: 13%;
}

.component_theme-hero .book img{
    margin-bottom: -1.5%;
}

/* ****************** */
/* Contents - responsive */
/* ****************** */

@media only screen and (max-width: 1400px){
    .content .title,
    .component_theme-hero .headline .title{
        font-size: 55px;
    }
    
    .component_theme-hero .headline .subtitle{
        font-size: 18px;
    }
    .content .subtitle,
    body, button, input, select, optgroup, textarea,
    .component_theme-hero .headline .description{
        font-size: 16px;
    }
    .block .content .header{
        max-width: 100%;
    }
    .block .content .header .title{
        max-width: 360px;
    }
}

@media only screen and (max-width: 1200px){
    .block .content .layers .layer.padding-normal,
    .block .content .header,
    .block .content .icons{
        padding: 20px;
    }
}

@media only screen and (max-width: 900px){
    
    .col-5-12{
        flex-basis: calc( 100% / 1 );
    }

    .col-7-12{
        flex-basis: calc( 100% / 1 );
    }
    
    .col{
        height: unset;
        overflow: hidden;
        width: 100%;
    }
    
    .loop-post{
        height: auto;
    }
    
    .loop-post:after{
        position: relative;
        content: "";
        display: block;
        padding-bottom: 50%;
    }
    
    [data-blocks="1"] .loop-post:after{
        padding-bottom: 70%;
    }
    
    .theme-section{
        flex-wrap: wrap;
    }
    
    .component_theme-cta-row .col{
        flex-wrap: wrap;
    }
    .component_theme-cta-row .icons{
        margin-top: 20px;
        margin-bottom: 20px;
        justify-content: center;
    }
    .component_theme-cta-row .icons > *{
        margin-left: 10px;
        margin-right: 10px;
    }
    .content .title{
        margin: 00px auto;
    }
    .icon{
        width: 40px;
        height: 40px;
    }
}


/* ****************** */
/* Layers - responsive */
/* ****************** */

@media only screen and (max-width: 900px){

    .layer.size-full{
        width: 100%;
        height: 100%;
    }

    .layer.size_mobile-1-12{
        width: calc( 100% / 12 * 1 );
    }

    .layer.size_mobile-2-12{
        width: calc( 100% / 12 * 2 );
    }

    .layer.size_mobile-3-12{
        width: calc( 100% / 12 * 3 );
    }

    .layer.size_mobile-4-12{
        width: calc( 100% / 12 * 4 );
    }

    .layer.size_mobile-5-12{
        width: calc( 100% / 12 * 5 );
    }

    .layer.size_mobile-6-12{
        width: calc( 100% / 12 * 6 );
    }

    .layer.size_mobile-7-12{
        width: calc( 100% / 12 * 7 );
    }

    .layer.size_mobile-8-12{
        width: calc( 100% / 12 * 8 );
    }

    .layer.size_mobile-9-12{
        width: calc( 100% / 12 * 9 );
    }
    
    .layer.size_mobile-10-12{
        width: calc( 100% / 12 * 10 );
    }

    .layer.size_mobile-11-12{
        width: calc( 100% / 12 * 11 );
    }

    .layer.size_mobile-12-12{
        width: calc( 100% / 12 * 12 );
    }

    .layer.size_mobile-13-12{
        width: calc( 100% / 12 * 13 );
    }

    .layer.size_mobile-14-12{
        width: calc( 100% / 12 * 14 );
    }

    .layer.size_mobile-15-12{
        width: calc( 100% / 12 * 15 );
    }

}