/* educational */

   #gif1d{
position: absolute;
width: 20%;
height: auto;
left: 0%;
top: 40%;
}

#main4:hover{opacity: 0.7;}

#gif2d {
    z-index: 1; /*Sit on top*/
    left: 0%;
    bottom: -95px;
    width: 54%; /* Full width */
    height: 54%; /* Full height */
    overflow: none; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.0); 
    transition: 2.3s;  
    position: relative; 
}

#sub4 {
 position: relative;
    -webkit-animation-name: popup; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes popup {
 0%   {left:0%; top:90%;}
 100% {left:40%; top:280%;}
}


/* shopping */

#gif1b {
 position: absolute;
width: 20%;
height: auto;
left: 20%;
top: 40%;
}

#gif1b:hover {opacity: 0.7;}

#gif2b {
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 20%;
    bottom: -90px;
    width: 54%; /* Full width */
    height: 54%; /* Full height */
    overflow: none; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.0); 
    position: relative;
    transition: 2.3s;
}

#sub2 {
 position: relative;
    -webkit-animation-name: popup; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes popup {
    0%   {left:0px; top:0px;}
    100% {left:40px; top:80px;}