#hero{background: var(--text-color);}

#hero .grid > div{min-height: calc(50vh - 20px);
    display: flex;
  align-items: center;
  justify-content: space-between;
}

#hero .grid  > div:nth-child(2), #deck_2 .grid  > div{
    display: flex;
  align-items: center;
  justify-content: center;
}

.grid_1_1 .text_padding{max-width: calc(100% - 60px);}

.dark{color: white; background: #151515;}

#deck_2{
    background: var(--primary-color);
    padding: 7vh 0;
}

#hero h1{text-decoration: underline;}

#deck_3{
    position: relative;
    background: #EEE;
}

#deck_3::before{
    content: "";
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%;
    background: #FFF url(images/backgrounds/slash-grid.svg) no-repeat;
    background-size: 3000px 3000px;
    background-position: center!important;
    opacity: 0.1;
}   

#deck_3 .webwrapper{position: relative;}

#deck_3 .flex_box{
    padding: 1em 0;
    display: flex;
    gap: 10px;
    justify-content: space-between;

}

@media(max-width: 640px){
    #deck_3 .flex_box{
        display: grid; 
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px 40px;
        width: calc(100% - 30px);
    }
}

#deck_3 .flex_box .item{
    width: 100%;
    height: 300px;
background: white; 
    border-radius: 20px;
    padding: 15px;
    position: relative;
}

#deck_3 .flex_box .item .imgwrapper{
    width: 100%; height: 150px; 
    background-size: cover!important; 
    background-position: center!important;
    border-radius: 10px;
}

#deck_3 .flex_box .item .imgavatar{
    width: 50px; height: 50px; 
    border-radius: 50%; 
    position: absolute;
    top: 135px; right: 20px; 
    border: 2px solid white; 
    background: var(--text-color);
}

#deck_3 .flex_box .item .textwrapper{
    padding-top: 1.5em;
}

#deck_3 .flex_box .item .textwrapper p.title{
    font-size: 12px; opacity: 0.5;
    font-style: italic;
}

#deck_3 .flex_box .item .textwrapper a.button{
    position: absolute; 
    bottom: 15px; left: 15px;
}

#deck_3 .adapt_masters{
    display: inline-block; 
    width: 250px; 
    height: 60px; 
    background: url(images/brand/adapt-masters-master-dark.svg) no-repeat; 
    background-size: contain; 
    background-position: center left;
}

#deck_3 .deck_head{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#deck_4{
    background: var(--secondary-color);
}

#deck_4 .grid{align-items: top;}

#deck_4 .grid > div{position: relative; padding-bottom: 2em;}

#deck_4 .grid > div:before{
    content: "";
    position: absolute; 
    width: 100%; height: calc(100% + 15vh); 
    top: 50%; left: 50%; 
    transform: translateX(-50%) translateY(-50%) skew(-20deg);
    background: var(--text-color);
}

#deck_4 .grid > div:nth-child(1) .textwrapper{color: white; background: transparent;}

#deck_4 .grid > div:nth-child(2):before{background: white;}

#deck_4 .grid > div .textwrapper{
    padding: 6vw;
    height: calc(100% - 12vw);
    position: relative;

    
    

}

#deck_4 .grid > div a{position: absolute; bottom: 3vw; left: 6vw;}

@media(min-width: 840px){
    #hero .grid > div{min-height: 50vh;}

    #hero .grid{
        height: calc(100vh - 100px);
        max-height: 800px;
        
    }

    .grid_1_1 .text_padding{max-width: calc(100% - 150px);}

    #deck_2, #deck_3, #deck_4{
        padding: 7vh 0;
    }

}

#editorial_cover .img_wrapper iframe{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    pointer-events: none;
}