* {
    padding: 0;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.gallery {

    color: black;
    background-color: white;
    height: 600px;
    overflow: 120vh;
    position: relative;
    /* margin-top: 50px; */
}

.gallery .right-btn {
    position: absolute;
    height: 100%;
    width: 800px;
    cursor: pointer;
    top: 0;
    right: 0;
}

.gallery .left-btn {
    position: absolute;
    height: 100%;
    width: 300px;
    cursor: pointer;
    top: 0;
    left: 0;
    z-index: 3;
}

.gallery .animate {
    -webkit-animation: scale 1.6s ease-out;
    animation: scale 1.6s ease-out;
}

.gallery .instructions {
    position: absolute;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    font-size: 20px;
    top: 50vh;
    right: 20px;
    -webkit-transform: translateY(-60%);
    transform: translateY(-60%);
    opacity: 0.7;

    -webkit-transition: opacity .4s ease-in-out;

    transition: opacity .4s ease-in-out;
}

.gallery .instructions::before {
    content: "Click";
}


.gallery .instructions.remove {
    opacity: 0;
}

@-webkit-keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    30% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    30% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.gallery-container {

    height: 100%;
    width: 400vw;

}

.gallery-heading {

    font-family: bitter;
    font-size: 120px;
    position: absolute;
    font-weight: bold;
    top: 40%;
    right: 20%;

}

.layer {
    position: absolute;
    height: 100%;
    width: 200vw;
    /* transition: transform 1.6s cubic-bezier(0.54, 0.44, 0, 0.99); */
    -webkit-transition: -webkit-transform 1.6s cubic-bezier(0.24, 0.89, 0, 0.97);
    transition: -webkit-transform 1.6s cubic-bezier(0.24, 0.89, 0, 0.97);
    transition: transform 1.6s cubic-bezier(0.24, 0.89, 0, 0.97);
    transition: transform 1.6s cubic-bezier(0.24, 0.89, 0, 0.97), -webkit-transform 1.6s cubic-bezier(0.24, 0.89, 0, 0.97);
    -webkit-perspective: 1000px;
    perspective: 1000px;
    display: none;
}

.active-layer {
    display: block;
}

.below-layer {
    -webkit-transition: -webkit-transform 1.6s cubic-bezier(0.45, 0.43, 0, 0.98);
    transition: -webkit-transform 1.6s cubic-bezier(0.45, 0.43, 0, 0.98);
    transition: transform 1.6s cubic-bezier(0.45, 0.43, 0, 0.98);
    transition: transform 1.6s cubic-bezier(0.45, 0.43, 0, 0.98), -webkit-transform 1.6s cubic-bezier(0.45, 0.43, 0, 0.98);
}

.layer img {
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    box-shadow: #00000040 0px 0px 11px 10px;
}

.layer .blank-img {
    position: absolute;
    background-color: #2f2f2f;
    box-shadow: #00000040 0px 0px 11px 10px;

}

@media(max-width:600px) {
    .gallery {
        height: 850px;
        margin-top: 0;
        background-color: white;
    }

    .gallery-heading {
        font-size: 80px;
        right: 10px;
    }

    .gallery .instructions {
        font-size: 18px;
        top: 51.5%;
        right: 62px;
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb;
        -webkit-transform: none;
        transform: none;
    }

    .gallery .instructions::before {
        content: "Tap";
    }

    .gallery .left-btn {
        width: 100px;
    }
}