.slide-right-half {
    position: absolute;
    width: 50vw;
    -webkit-animation: slide-right-half 1s  .5s cubic-bezier(0.600, -0.280, 0.735, 0.045) reverse both;
    animation: slide-right-half 1s .5s cubic-bezier(0.600, -0.280, 0.735, 0.045) reverse both;
    background-image: url("../uploads/landing.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 2;
}

@-webkit-keyframes slide-right-half {
    0% {
        left: 50vw;
        opacity: 1;
    }
    100% {
        left: 0vw;
        opacity: 0;
    }
}

@keyframes slide-right-half {
    0% {
        left: 50vw;
        opacity: 1;
    }
    100% {
        left: 0vw;
        opacity: 0;
    }
}

@media (max-width: 1300px) {
    
    .mobile-image{position: absolute;
        width: 50vw;
        -webkit-animation: slide-right-half 1s  .5s cubic-bezier(0.600, -0.280, 0.735, 0.045) reverse both;
        animation: slide-right-half 1s .5s cubic-bezier(0.600, -0.280, 0.735, 0.045) reverse both;
        background-image: url("../uploads/landing.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 2;
    }
}


.expand-down {
    -webkit-animation: expand-down 1s 2.5sforwards;
    animation: expand-down 1s 2.5s forwards;
}

@-webkit-keyframes expand-down {
    0% {}
    100% {
        height: 20vh;
        opacity: 1;
    }
}

@keyframes expand-down {
    0% {}
    100% {
        height: 20vh;
        opacity: 1;
    }
}

#right .main-image {
    background-image: url("../uploads/landing.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.slide-rotate-ver-l-bck {
    -webkit-animation: slide-rotate-ver-l-bck 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) reverse both;
    animation: slide-rotate-ver-l-bck 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) reverse both;
}

@-webkit-keyframes slide-rotate-ver-l-bck {
    0% {
        -webkit-transform: translateX(0) translateZ(0) rotateY(0);
        transform: translateX(0) translateZ(0) rotateY(0);
        -webkit-transform-origin: center left;
        transform-origin: center left;
        opacity: 1;
    }
    70% {
        opacity: .5;
    }
    100% {
        -webkit-transform: translateX(-150px) translateZ(-230px) rotateY(90deg);
        transform: translateX(-150px) translateZ(-230px) rotateY(90deg);
        -webkit-transform-origin: center left;
        transform-origin: center left;
        opacity: 0;
    }
}

@keyframes slide-rotate-ver-l-bck {
    0% {
        -webkit-transform: translateX(0) translateZ(0) rotateY(0);
        transform: translateX(0) translateZ(0) rotateY(0);
        -webkit-transform-origin: center left;
        transform-origin: center left;
        opacity: 1;
    }
    70% {
        opacity: .5;
    }
    100% {
        -webkit-transform: translateX(-150px) translateZ(-230px) rotateY(90deg);
        transform: translateX(-150px) translateZ(-230px) rotateY(90deg);
        -webkit-transform-origin: center left;
        transform-origin: center left;
        opacity: 0;
    }
}

.to-opaque {
    transition: opacity 0.2s ease-in;
    -webkit-transition: opacity 0.2s ease-in;
    -moz-transition: opacity 0.2s ease-in;
    -ms-transition: opacity 0.2s ease-in;
    -o-transition: opacity 0.2s ease-in;
}

.to-transparent {
    transition: opacity 0.2s ease-in;
    -webkit-transition: opacity 0.2s ease-in;
    -moz-transition: opacity 0.2s ease-in;
    -ms-transition: opacity 0.2s ease-in;
    -o-transition: opacity 0.2s ease-in;
    opacity: 0;
}