/* ----------------------------------*/
/* ------------ PROJECTS ------------*/
/* ----------------------------------*/

#container{
    width: 100%;
    height: 100%;
    margin: 0;
    overflow-y:hidden;
    overflow-x:scroll;
    opacity: 0;
    
    animation-name: projectsAnimation;
    animation-duration: 0s;
    animation-fill-mode: forwards;
    animation-direction: alternate;
    animation-delay: 2s;
}

@keyframes projectsAnimation {
    from {
        opacity: 0;
    }
    
    to {
        opacity: 100%;
    }
}

#container-home{
    width: 100%;
    height: 100%;
    margin: 0;
    overflow-y:hidden;
    overflow-x:scroll;
}

.projects{
    /*width: 3840px;*/
    width: calc((100vw / 3) * 8);
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.projects .project{
    /*width: 480px;*/
    width: calc(100vw / 3);
    height: 100%;
    padding: 50px;
    float: left;
    overflow: hidden;
}

@media only screen and (max-width: 1023px) and (min-width: 480px) {
    .projects .project{
        width: calc(100vw / 2);
    }
    .projects{
    width: calc((100vw / 2) * 8);
    }
}


@media only screen and (max-width: 479px) {
    .projects .project{
        width: 100vw;
    }
    .projects{
    width: calc(100vw * 8);
    }
}

.projects .title{
    position: relative;
    top: calc(100vh - 300px);
    width: 100%;
    text-overflow: clip;
    white-space: nowrap;
}

.project .last{
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0;
    width: 100%;
}

.projects .first{
    background: url(../img/home/home-riot_2x.png) no-repeat center, radial-gradient(#0C1C3E 0%, #030F29 60%);
    background-size: 100%;
    transition: all 0.3s;
}

.projects .second{
    background: url(../img/home/home-taxi_2x.png) no-repeat center, radial-gradient(#FFD97F 0%, #FEC12F 60%);
    background-size: 100%;
    transition: all 0.3s;
}


.projects .third{
    background: url(../img/home/home-tajawal_2x.png) no-repeat center, radial-gradient(#F49688 0%, #E7412A 60%);
    background-size: 100%;
    transition: all 0.3s;
}

.projects .fourth{
    background: url(../img/home/home-kawa_2x.png) no-repeat center, radial-gradient(#A4DDF0 0%, #20A6D9 60%);
    background-size: 100%;
    transition: all 0.3s;
}

.projects .fifth{
    background: url(../img/home/home-pitstop_2x.png) no-repeat center, radial-gradient(#DFFF90 0%, #8ED108 60%);
    background-size: 100%;
    transition: all 0.3s;
}

.projects .sixth{
    background: url(../img/home/home-iba_2x.png) no-repeat center, radial-gradient(#F06293 0%, #E11059 60%);
    background-size: 100%;
    transition: all 0.3s;
}

.projects .seventh{
    background: url(../img/home/home-motorola_2x.png) no-repeat center, radial-gradient(#72F6B4 0%, #31E58B 60%);
    background-size: 100%;
    transition: all 0.3s;
}

.projects .eight{
    background-color: #0F0F10;
}


.me-home{
    z-index: 1111;
    background-color: #0F0F10;
    width: 0%;
    height: 0%;
    position: absolute;
    display: flex;
    align-items: center;
    vertical-align: middle;
    
    animation-name: homeAnimation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-direction: alternate;
    animation-delay: 0s;
    animation-iteration-count: 2;
}

@keyframes homeAnimation {
    0% {
        width: 0%;
        height: 100%;
    }
    
    100% {
        width: 100%;
        height: 100%;
        
    }
}