/* STYLESHEET MADE BY GOTHLLY | GOTHLLY (C) 2019 TO PRESENT - ALL RIGHTS RESERVED
   Don't steal, copy, trace, edit, redistribute, make heavy references, claim as your own work, resell or revamp the design or coding of my stylesheet. You're warned! */

/* TABS */
.tab{display:inline-block;overflow:hidden;}
.tab .tab-img{opacity:0;position:absolute;top:0;left:0;transition:opacity 0.6s ease;}
.tab:hover .tab-img{opacity:1;}

.tab2{display:inline-block;overflow:hidden;}
.tab2 .tab-img{opacity:0;position:absolute;top:0;left:0;transition:opacity 1s ease;}
.tab2:hover .tab-img{opacity:1;}
.tab2{animation-name:floating;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;}
    @keyframes floating{
    from{transform:translate(0,0px);}
    65% {transform:translate(0,15px);}
    to  {transform:translate(0,-0px);}}
  
.tab3 {display:inline-block;position:relative;}
.tab3 img {opacity:1;position:absolute;transition:opacity 0.6s ease,transform 0.8s ease;transform:translateY(0);}
.tab3 img:first-child {opacity:1;}
.tab3 img:last-child {opacity:0;transform:translateY(0);}
.tab3:hover img:first-child {opacity:1;transform:translateY(-10px);}
.tab3:hover img:last-child {opacity:1;transform:translateY(-10px);}