body #home_wrapper{
    width: 100%;
    height: 100vh;
    position: relative;
    display: grid;
    grid-template-columns: 1fr; /* 7fr 3fr; */
    grid-gap: 0;
    transform: translateX(0);
    transition: transform 1s;
    overflow: hidden;
}

body.open #home_wrapper{
    transform: translateX(360px);
    transition: transform 1s;
}

#home_wrapper .left{
    
    position: relative;
}

#home_wrapper .left .bottombox{
    width: 280px;
    height: 300px;
    position: absolute;
    bottom: 0; right: 0;
    background: white;
    z-index: 5;
}

#home_wrapper .left .bottombox .bottomboxwrapper{
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    margin: 20px;
    display: grid;
    grid-template-columns: 1fr; /* 1fr 1fr; */
    grid-gap: 40px;
}

#home_wrapper .left .bottombox .bottomboxwrapper .digit{
    position: relative;
    width: 100%; height: 100%;
    text-align: center;
}

#home_wrapper .left .bottombox .bottomboxwrapper .digit h2{font-size: 140px; padding:  0; margin: 0; line-height: 1em; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);}
#home_wrapper .left .bottombox .bottomboxwrapper .text{position: relative; display: none;}
#home_wrapper .left .bottombox .bottomboxwrapper p{position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #151515; line-height: 1.5em; padding: 0; top: calc(50% - 4px); transform: translateY(-50%); display: block; margin: 0; padding: 0;}

#home_wrapper .left .miniconsole{
    position: absolute;
    bottom: 300px;
    right: 0;
    width: 160px;
    height: 80px;
    background: #020202;
    z-index: 5;
}

#home_wrapper .left .miniconsole div:nth-child(1){background: #000 url(images/buttons/arrow-left-white.svg) no-repeat; background-size: 30px 30px; background-position: center; position: absolute; top: 0; left: 0; width: 50%; height: 100%; }
#home_wrapper .left .miniconsole div:nth-child(2){background: #000 url(images/buttons/arrow-right-white.svg) no-repeat; background-size: 30px 30px; background-position: center; position: absolute; top: 0; right: 0; width: 50%; height: 100%; }
#home_wrapper .left .miniconsole div:hover{filter: invert(100%); cursor: pointer;}
#home_wrapper .right{
    
    
    position: relative;
}
#home_wrapper > .right{
    display: none;
}

#home_wrapper .carousel{
    position: absolute; 
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}

#home_wrapper .right .carousel{height: calc(100vh - 300px); background: #000;}
.slick-slider .slick-{width: 100%;}
.slick-slider .slick-track, .slick-slider .slick-list{position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#home_wrapper .left .carousel .slide{
    position: absolute; 
    top: 0; 
    width: 100%; height: 100%;
    overflow: hidden;
    background-size: cover!important;
    background-position: center!important;
    transition: left 1.5s;
    z-index: 2;
}

#home_wrapper .right .carousel .sl{
    background-size: cover!important;
    background-position: center!important;
}

#home_wrapper .right .bottombox{
    width: 100%;
    height: 300px;
    position: absolute;
    bottom: 0; left: 0;
    background: #000;
}

#home_wrapper .right .text{width: 260px; position: absolute; top: 50%; left: calc(50% - 130px); transform: translateY(-50%);}
#home_wrapper .right .text p{color: white; font-family: Arial, Helvetica, sans-serif; margin: 0; line-height: 2em; font-size: 13px; }

#home_wrapper .right .carousel .sl{position: relative; top: initial; left: initial;}

#home_wrapper .right .carousel .sl h2{position: absolute; color: white; font-size: 60px; letter-spacing: 0.2em; margin: 0; padding: 0; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%);}

#home_wrapper  .left .carousel .slide{left: 0; z-index: 2}
#home_wrapper  .left .carousel .slide.transit{z-index: 3; }

#home_wrapper  .left .carousel .slide.left{left: -100%;}
#home_wrapper  .left .carousel .slide.left.transit{transition: left 1.5s;}

#home_wrapper  .left .carousel .slide.right{left: 100%;}
#home_wrapper  .left .carousel .slide.right.transit{transition: left 1.5s;}

#home_wrapper .left .textcarousel{
    width: calc(100% - 180px);
    height: calc(100vh - 200px);
    position: relative;
    padding: 200px 60px 0 120px;
    z-index: 4;
}

#home_wrapper .left .textslide{
    position: absolute; 
    width: calc(50%); height: 100%;
    color: white;
    display: block;
}


#home_wrapper .left .textslide.off{display: none;}


#home_wrapper .left  .textslide.translate h1{
    transition: all 0.5s;
}



#home_wrapper .left  .textslide h1{
    font-size: 120px;
    color: #84f7d2;
    margin: 60px 0 20px 0;
    line-height: 1em;
}
#home_wrapper .left .textslide.red h1{
    color: #e74d2a;
}

#home_wrapper .left  .textslide.right h1{
    transform: translateX(50%);
    opacity: 0;
}

#home_wrapper .left  .textslide.left h1{
    transform: translateX(-50%);
    opacity: 0;
}



#home_wrapper .left  .textslide p{color: white; font-size: 13px; font-family: Arial, Helvetica, sans-serif; line-height: 1em; width: 50%; display: none;}
#home_wrapper .left  .textslide.active p{display: block;}

#home_wrapper .home_split{align-items: center; background: #000; display: flex; justify-content: center;}
#home_wrapper .home_split a{display: block; margin: 0 auto; width: 50%;}
#home_wrapper .home_split a img{width: 100%;}
#home_wrapper .home_split h3{color: #fff; margin: 1em 0 0; text-align: center;}



body #deck_calendar{
    background: #e74d2a; 
    color: #151515;
    padding: 0px 0;
}

body.is_home #deck_calendar{padding-top: 120px;}

#deck_calendar h2.title{font-size: 60px; padding: 0; margin: 0; display: block; position: relative;}

#deck_calendar h2.title a{color: #151515; text-decoration: underline; position: absolute; top: 5px; right: 0; font-size: 24px;}

#deck_calendar .grid{
    margin: 40px 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    
    grid-gap: 2em;
    
}

#deck_calendar .grid .item{
    
    position: relative;
    min-height: 450px;
}

#deck_calendar .grid .item::after{
    content: "";
    width: 50px;
    height: 1px;
    border-bottom: 1px solid #151515;
    position: absolute;
    bottom: 30px; right: 0;
    animation-name: softblink;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#deck_calendar .grid .item::before{
    content: "";
    width: 50px;
    height: 1px;
    border-bottom: 1px solid #151515;
    position: absolute;
    bottom: 30px; right: 60px;
    animation-name: softblink;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#deck_calendar .grid .item .bgimg{
    position: relative;
    top: 0; left: 0;
    width: 100%; height: 350px;
    background-size: cover!important;
    background-position: center!important;
}

#deck_calendar .grid .item .date{width: 60px; height: 60px; text-align: center; background: white; position: absolute; bottom: 0; left: 10px; padding: 30px; }
#deck_calendar .grid .item .date h2{font-size: 60px; color: #151515; padding: 0; margin: 0; line-height: 1em;}
#deck_calendar .grid .item .month{width: 60px; height: 40px; text-align: center; background: #151515; color: white; position: absolute; bottom: -110px; left: 10px; padding: 35px 30px;  font-family: "din-condensed", Arial, Helvetica, sans-serif; font-size: 36px; color: #FFF; text-transform: uppercase; font-weight: 200; }

#deck_calendar .grid .item .text{width: calc(100% - 170px); padding: 20px 0 20px 150px; font-size: 13px; font-family: Arial, Helvetica, sans-serif; line-height: 1.5em; color: #252525;}
#deck_calendar .grid .item .text h3{font-size: 32px; line-height: 1.2em; margin: 0; padding: 0;}
@media(max-width: 1240px){
    #home_wrapper{grid-template-columns: 5fr 3fr;}

    #home_wrapper .left .bottombox{height: 200px; }
    #home_wrapper .right .carousel{height: calc(100% - 200px);}
    #home_wrapper .right .bottombox{height: 250px; }
}

@media(max-height: 940px){
    #home_wrapper .left .bottombox{height: 250px; }
    #home_wrapper .right .carousel{height: calc(100% - 250px);}
    #home_wrapper .left .miniconsole{bottom: 250px;}
    #masthead{height: 100px;}
    #home_wrapper{grid-template-columns: 5fr 3fr;}
    #home_wrapper .right .bottombox{height: 250px; }

   

    
}

@media(max-width: 940px){
    body #home_wrapper{grid-template-columns: 1fr; overflow: initial;}
    #home_wrapper .left, #home_wrapper .right{height: 100vh; overflow: hidden;}
    #deck_calendar .grid{grid-template-columns: 1fr;}   

    #deck_calendar h2.title a{position: relative; right: initial; top: initial; padding: 0; margin: 0; display: block; line-height: 1em;}

    #deck_calendar h2.title{font-size: 40px;}

    

   
}

@media(max-height: 780px){
    #home_wrapper .left .textslide{top: initial;}
    
    #home_wrapper .left .textslide h1{font-size: 100px;}
    #home_wrapper .left .bottombox .bottomboxwrapper .digit h2{font-size: 100px;}
    #home_wrapper .left .bottombox .bottomboxwrapper .digit {margin: 30px auto;}

    
}

@media(max-width: 780px){
    #home_wrapper .left .textslide h1{font-size: 50px;}

    #home_wrapper .left .carousel{height: calc(100vh - 150px); position: relative; top: initial; left: initial;}
    #home_wrapper .left .carousel .slide{height: 100vh;}
    #home_wrapper .left .textcarousel{padding-top: 80px; position: absolute; height: 400px; top: 20px;}
    #home_wrapper .left .textslide{width: 100%;}
    #home_wrapper .left .bottombox{width: 100%; height: 150px; position: fixed; top: initial; left: initial;}
    #home_wrapper .left .bottombox .bottomboxwrapper{margin: 0;}
    #home_wrapper .left .miniconsole{bottom: 150px; position: fixed;}
    #home_wrapper .left .textcarousel{padding: 80px 20px 0 20px;}
    
    

    
}

@media(max-width: 540px){
    #deck_calendar .grid .item .bgimg{height: 250px;}
    #home_wrapper .left .textslide.translate h1{font-size: 30px;}
    #home_wrapper .left .miniconsole{bottom: 150px;}
    #deck_calendar .grid .item::after, #deck_calendar .grid .item::before{bottom: 10px;}
    #home_wrapper .left  .textslide .button.white{text-align: center; width: 150px;}
    #home_wrapper .left .bottombox .bottomboxwrapper .digit h2{font-size: 60px;}
    #home_wrapper .left .textslide.active p:nth-child(2){display: none;}
}