.icons {
    display: block;
}

/* everyday life */

#gif1 {
 position: absolute;
width: 20%;
height: auto;
}

#gif1:hover {opacity: 0.7;}

#gif2 {
    z-index: 2; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    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;

}

#sub {
 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;}
}


    /* entertainment */

#gif1a {
 position: absolute;
width: 20%;
height: auto;
left: 20%;
top: 0%;
z-index: 0;
}

#gif1a:hover {opacity: 0.7;}

#gif2a {
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 20%;
    top: 0px;
    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;

}

#sub1 {
 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;}