@keyframes init {
    0%   {transform:scale(0.5);}
    100% {transform:scale(1);}
 }

@keyframes scaleUp {
    0%   {transform:scale(1); opacity: 1;}
    25%  {transform:scale(1.1); opacity: .95;}
    50%  {transform:scale(3); opacity: .25;}
    75%  {transform:scale(6); opacity: .15;}
    100% {transform:scale(10); opacity: .0;}
 }

 iframe {
     border: none;
 }

 @media only screen and (max-width: 600px) {
    .container {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #img1 {
        height: 41%;
        animation: init .25s ease-in;
        position: absolute;
        z-index: 1000;
    }

    .zoomEffect {
        transform-style: preserve-3d;
        animation-timing-function: linear !important;
        animation: scaleUp 1.15s linear !important;
    }
}

@media only screen and (min-width: 768px) {
    .container {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #img1 {
        height: 67%;
        -drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        animation: init .5s;
    }

    .zoomEffect {
        transform-style: preserve-3d;
        animation-timing-function: linear !important;
        animation: scaleUp 1.15s linear !important;
    }
}