.content .mask{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(0, 0, 0);
    animation: cover 1s linear 0s 1 normal backwards running;
    position: absolute;
}
@keyframes cover {
    0%{
        opacity: 0;
    }
}
.content .mask .slider{
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
}
.content .mask .slider.transition{
    transition: 0.3s ease all;
}
.content .mask .title{
    font-size: 7px;
    text-transform: uppercase;
    position: fixed;
    top: 20%;
    width: 90%;
    right: 0;
    left: 0;
    z-index: 30;
}
.content .mask .title h1{
    width: 50%;
    text-align: center;
    transition: all 0.5s ease;
    margin-left: 25%;
    margin-right: 25%;
}
.content .title h1.centered{
    margin-left: 10%;
}
.content .progress-bar-container{
    width: 30vw;
    position: absolute;
    left: 0;
    bottom: 5vh;
    right: 0;
    z-index: 50;
    height: 50px;
    padding: 5px;
}
.content .progress-bar-box{
    display: flex;
    flex-flow: row wrap;
    position: relative;
}
.content .progress-bar-box .n-scene{
    width: 100%;
}
.content .progress-bar-box .n-scene ul{
    color: white;
    display: flex;
    flex-flow: row nowrap;
}

.content .mask.firstOn + .progress-bar-container .n-scene ul li:first-child,
.content .mask.secondOn + .progress-bar-container .n-scene ul li:nth-child(2),
.content .mask.thirdOn + .progress-bar-container .n-scene ul li:nth-child(3){
    opacity: 1;
}
.content .progress-bar-box .n-scene ul li{
    display: block;
    width: 20px;
    opacity: 0;
    transition: 0.3s ease;
}
.content .progress-bar-box .n-scene ul li:last-child{
    opacity: 1;
    position: absolute;
    bottom: -100%;
    right: 0;
}
.content .mask.firstOn + .progress-bar-container #prev, .content .mask.fourthOn + .progress-bar-container #next{
    opacity: 0;
    visibility: hidden;
}
.content .progress-bar{
    background-color: white;
    width: 100%;
    height: 2px;
    
}
.content .progress-bar-box #prev,.content .progress-bar-box #next{
    position: absolute;
    top: 0;
    font-size: 30px;
    cursor: pointer;
    transition: 0.3s ease;
}
.content .progress-bar-box #prev{
    left: -100% ;
    content: '\f053';
}
.content .progress-bar-box #next{
    right: -100%;
}
.content .progress-bar .brick{
    height: 5px;
    width: 20px;
    position: relative;
    top: -50%;
    background-color: white;
    margin-left: 0;
    transition: 0.3s ease;
}
.content .mask .slider .scene{
    height: 100%;
    overflow: hidden;
    width: 100vw;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    position: relative;
    float: left;
}

/* content scene */
.content .mask .slider .scene .button{
    z-index: 25;
    transition: 1s ease all;
    transform: translateX(200%);
    opacity: 0;
}
.content .mask.firstOn .scene#first .button,
.content .mask.secondOn .scene#second .button,
.content .mask.thirdOn .scene#third .button,
.content .mask.fourthOn .scene#fourth .button{
    transform: translateY(0);
    opacity: 1;
}
@keyframes bump {
    0%{
        transform: translateY(20%);
        opacity: 0;
    }
}
.content .mask .slider .scene#first .car{
    z-index: 21;
    position: absolute;
    width: 95%;
    top: 60%;
}
.content .mask .slider .scene#first .text{
    z-index: 20;
    animation: bump 1.2s cubic-bezier(0.61, 0.57, 0.34, 1.4) 0s 1 normal none;
    position: absolute;
    opacity: 1;
    top: 30%;
    width: 90%;
}
.content .mask .slider .scene#first .button{
    position: absolute;
    bottom: 30%;
}


.content .mask .slider .scene#second .doggo,
.content .mask .slider .scene#third .ego,
.content .mask .slider .scene#fourth .chairs{
    position: absolute;
    width: 100%;
    z-index: 20;

}
.content .mask .slider .scene#second .desc,
.content .mask .slider .scene#third .desc,
.content .mask .slider .scene#fourth .desc{
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    width: 90%;
    z-index: 21;
    align-items: center;
    justify-content: left;
    top: 25%;
}

.content .mask .slider .scene#second .logo {
    width: 100%;
    margin-left: 0;
}
.content .mask .slider .scene#second .text,
.content .mask .slider .scene#third .text,
.content .mask .slider .scene#fourth .text{
    width: 60%;
    margin-left: 0;
    margin-top: 20px;
}
.content .mask .slider .scene#second .button,
.content .mask .slider .scene#third .button,
.content .mask .slider .scene#fourth .button{
    margin-top: 20px;
    margin-left: 0;
}
.content .mask .slider .scene#third .logo,
.content .mask .slider .scene#fourth .logo{
    margin-left: 0;
    width: 60%;
}
@media screen and (orientation: landscape){
    .content .mask .title{
        left: 10%;
        width: max-content;
        text-align: left;
        font-size: 9px;
    }
    .content .mask .slider.transition{
        transition: 1s ease all;
    }
    .content .mask .slider .scene#first .car{
        top: 50%;
    }
    .content .mask .slider .scene#first .text{
        bottom: 50%;
    }
    .content .mask .slider .scene#first .button{
        bottom: 40%;
        right: 20%;
    }
    @keyframes bump {
        0%{
            transform: translateY(20%);
        }
    }
    .content .mask .slider .scene .desc{
        left: 10%;
        width: 30%!important;
    }
    .content .mask .slider .scene#second .text{
        width: 100%;
    }
    .content .mask .slider .scene#second .button,
    .content .mask .slider .scene#third .button,
    .content .mask .slider .scene#fourth .button{
        margin-right: 0;
        margin-left: auto;
    }
    .content .mask .slider .scene#second .doggo{
        position: absolute;
        width: auto;
        height: 100%;
        right: 0;
    }
    .content .mask .title{
        font-size: 7px;
        text-transform: uppercase;
        position: absolute;
        top: 20%;
        text-align: center;
        width: 100%;
        z-index: 30;
    }
    .content .mask .title h1{
        width: 50%;
        text-align: left;
        transition: all 0.5s ease;
        margin-left: 0%;
        margin-right: 25%;
    }
    .content .mask .title h1.centered{
        margin-left: inherit;
    }
    .content .mask .slider .scene#third .logo, 
    .content .mask .slider .scene#third .text,
    .content .mask .slider .scene#fourth .logo,
    .content .mask .slider .scene#fourth .text{
        width: 100%;
    }
    .content .mask .slider .scene#fourth .chairs{
        position: absolute;
        width: auto;
        height: 100%;
        left: 40%;
    }
    .content .mask .slider .scene#fourth .desc{
        top: 35%;
    
    }
}