body{
    background: rgb(255, 166, 0);
    padding: 0;
    margin: 0;
    overflow: hidden;  
    font-family: 'Comic Sans MS';
    text-align: center;
    margin-top: 2vw; 
}

h1{
    top: 3vw;
    margin-bottom: 0vw; 
    font-size: 2.5vw;
}

/*The main holder of everything, along with code for the boxes within the container*/
.main-container{
    display: flex;
    position: relative;
    margin: 0 auto; 

    top:1vw;
    height:50vw;
    width:70vw;
    padding-top:3vw;

    border: 2px solid red;
    background:red;  
}

#character-box{ /*Box that holds the vertical column of buttons*/
    display: flex;
    position: absolute;
    top:5vw;
    right:5vw;
    flex-direction: column;
    gap: 2vw; 
    width: 7vw;       
}

#finished{
    position: absolute;
    top:32vw; 
    left:51%;
    transform: translateX(-50%);
}

#image-box{ /*The box that holds the images*/
    display: flex;
    justify-content: center;
    align-items: center; 
    position: absolute; 
    top:2vw;

    left:50%;
    transform: translateX(-50%);
    width:35vw;
    height:28vw;

    background-color: rgb(255, 255, 255);
}

/*Little gimicks that make life easier*/

button{
    font-family: 'Comic Sans MS';
    font-size: 1.5vw; 
    border-radius: 1vw;
    background-color: #6559cc;
    color: white;
    border: 0vw;
    transition: background-color 0.3s ease;
}

button:hover{
    background-color: rgb(218, 74, 182);
}

/*Audio button*/
.music-button{
    padding: 0.5vw; 
    position: absolute; 
    top: 21vw;
    left: 20%;
}
/*Stuff involving the slideshow (the build your character stuff)*/

    /*base-slideshow*/

    .base-slideshow{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        z-index:2; 
    }

    .base-slideshow img{
        margin: 0 auto; 
        max-height:30vw;
        max-width:28vw; 
        min-height:12vw;
        min-width:10vw;
        object-fit:contain; 
        display: block;
    }

    .base-slideshow .slide{
        display:none;
    }

    .base-slideshow .slide.active{
        display:block;
    }

    /*hat-slideshow*/

    .hat-slideshow{
        position: absolute;
        top:20%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index:3; 
    }
    .hat-slideshow img{
        margin:0 auto; 
        max-height: 6vw; 
        max-width: 9vw; 
        object-fit: contain; 
        display:block; 
    }

    .hat-slideshow .slide{
        display: none; 
    }

    .hat-slideshow .slide.active{
        display:block; 
    }

    /*Clothes slideshow*/
    .clothes-slideshow-one{
        position: absolute; 
        top: 20%;
        left: 50%;
        transform: translate(-50%, 50%);
        z-index: 4; 
    }

    .clothes-slideshow-one img{
        margin:0 auto;
        max-height:10vw;
        max-width: 10vw; 
        object-fit: contain;
        display:block;
    }

    .clothes-slideshow-one .slide{
        display:none;
    }

    .clothes-slideshow-one .slide.active{
        display:block; 
    }

    
    /*Face Slideshow*/
    .face-slideshow{
        position: absolute; 
        top: 20%;
        left: 50%;
        transform: translate(-50%, 50%);
        z-index:5;
    }

    .face-slideshow img{
        margin:0 auto;
        max-height:5vw;
        max-width: 7vw; 
        object-fit: contain;
        display:block;
    }

    .face-slideshow .slide{
        display:none;
    }

    .face-slideshow .slide.active{
        display:block; 
    }

    /*Shoes --> Two legged slideshow*/
    .shoes-slideshow-two{
        position: absolute; 
        top: 20%;
        left: 50%;
        transform: translate(-50%, 50%);
        z-index: 6; 
    }

    .shoes-slideshow-two img{
        margin:0 auto;
        max-height:10vw;
        max-width: 10vw; 
        object-fit: contain;
        display:block;
        z-index: 6; 
    }

    .shoes-slideshow-two .slide{
        display:none;
    }

    .shoes-slideshow-two .slide.active{
        display:block; 
    }


/*Sizing the Bases*/
.flamingo {
    width: 12vw;
    height: auto;
}

.panda {
    width: 19vw;
    height: auto;
    transform: translateY(-0.6vw);
}
.tiger {
    width: 17vw;
    height: auto;
    transform: translateX(0vw) translateY(-0.2vw);
}

.wolf {
    width: 18vw;
    height: auto;
}

.eagle {
    width: 23vw;
    height: auto;
}
/*Scaling of the hats based on the Base*/

    /*Flamingo*/
    .flamingo-active .hat-slideshow img{
        transform: scale(0.8)translateX(-3.8vw)translateY(-0.7vw);
    }
    .flamingo-active .hat-slideshow img.top{
        transform: scale(0.8)translateX(-3.6vw)translateY(-1.2vw);
    }
    .flamingo-active .hat-slideshow img.asian{
        transform: scale(0.8)scaleY(0.7)translateX(-3.8vw)translateY(-1vw);
    }
    .flamingo-active .hat-slideshow img.sombrero{
        transform: scale(0.9)translateX(-3.3vw)translateY(-0.8vw);
    }

    /*Panda*/
    .panda-active .hat-slideshow img{
        transform: scale(1.5)translateX(-0.2vw)translateY(0vw);
    }
    .panda-active .hat-slideshow img.top{
        transform: scale(1.5)translateX(-0.1vw)translateY(-0.5vw);
    }
    .panda-active .hat-slideshow img.asian{
        transform: scale(1.5)scaleY(0.7)translateY(0.5vw);
    }

    /*Tiger*/
    .tiger-active .hat-slideshow img{
        transform: scale(1.5)translateX(-1.7vw)translateY(1vw);
    }
    .tiger-active .hat-slideshow img.top{
        transform: scale(1.5)translateX(-1.6vw)translateY(0vw);
    }
    .tiger-active .hat-slideshow img.sombrero{
        transform: scale(1.5)translateX(-1.7vw)translateY(0.6vw);
    }
    .tiger-active .hat-slideshow img.asian{
        transform: scale(1.5)scaleY(0.5)translateX(-1.7vw)translateY(2.7vw);
    }

    /*Wolf*/
    .wolf-active .hat-slideshow img{
        transform: scale(1.5)translateX(-0.1vw)translateY(0.9vw); 
    }
    .wolf-active .hat-slideshow img.asian{
        transform: scale(1.5)scaleY(0.5)translateX(-0.1vw)translateY(2vw);
    }
    .wolf-active .hat-slideshow img.sombrero{
        transform: scale(1.5)translateX(-0.1vw)translateY(0.7vw);
    }
    .wolf-active .hat-slideshow img.top{
        transform: scale(1.5)translateX(0.1vw)translateY(0.5vw);
    }

    /*Eagle*/
    .eagle-active .hat-slideshow img{
        transform: scale(1.8);
    }
    .eagle-active .hat-slideshow img.cowboy{
        transform: scale(1.5)scaleX(1.2)translateX(0.1vw);
    }
    .eagle-active .hat-slideshow img.asian{
        transform: scale(1.5)scaleY(0.7);
    }
    .eagle-active .hat-slideshow img.top{
        transform: scale(1.5)scaleX(1.3)translateY(-0.9vw);
    }
    .eagle-active .hat-slideshow img.sombrero{
        transform: scale(1.5)scaleX(1.2)translateY(-0.7vw);
    }

/*Scaling Faces*/
    /*Flamingo*/
    .flamingo-active .face-slideshow img{
        transform: scale(0.7)translateX(-5.5vw)translateY(-5.2vw);
    }
    .flamingo-active .face-slideshow img.oldman{
        transform: scale(1)translateX(-4.5vw)translateY(-1.5vw);
    }
    .flamingo-active .face-slideshow img.viking{
        transform: scale(1)translateX(-3vw)translateY(-1.5vw);
    }
    .flamingo-active .face-slideshow img.monocle{
        transform: scale(0.5)translateX(-5.5vw)translateY(-7.2vw);
    }

    /*Panda*/
    .panda-active .face-slideshow img{
        transform: scale(2);
    }
    .panda-active .face-slideshow img.oldman{
        transform: scale(2)scaleX(1.3)scaleY(0.9)translateY(2.2vw);
    }
    .panda-active .face-slideshow img.viking{
        transform: scale(2)scaleX(1.75)translateY(2.2vw);
    }
    .panda-active .face-slideshow img.monocle{
        transform: scale(1)translateX(2.1vw)translateY(0.5vw);
    }

    /*Tiger*/
    .tiger-active .face-slideshow img{
        transform: scale(1.7)translateX(-1.4vw)translateY(0.15vw);
    }
    .tiger-active .face-slideshow img.oldman{
        transform: scale(1.7)scaleX(1.5)translateX(-1vw)translateY(2.6vw);
    }
    .tiger-active .face-slideshow img.viking{
        transform: scale(1.7)scaleX(1.7)translateX(-0.80vw)translateY(2.5vw);
    }
    .tiger-active .face-slideshow img.monocle{
        transform: scale(1)translateX(-0.1vw)translateY(1vw);
    }

    /*Wolf*/
    .wolf-active .face-slideshow img{
        transform: scale(1)translateX(0.1vw)translateY(-1.8vw);
    }

    .wolf-active .face-slideshow img.oldman{
        transform:scale(1.7)scaleX(1.5)translateY(1vw);
    }

    .wolf-active .face-slideshow img.viking{
        transform: scale(2)scaleX(1.2)scaleY(0.6)translateY(1.3vw);
    }

    .wolf-active .face-slideshow img.monocle{
        transform: scale(0.9)translateX(1.4vw)translateY(-1.6vw);
    }

    /*Eagle*/
    .eagle-active .face-slideshow img{
        transform: scale(1.5)translateX(0.1vw)translateY(-1vw);
    }
    .eagle-active .face-slideshow img.oldman{
        transform: scale(2)scaleX(1.5)translateX(-0.05vw)translateY(1.2vw);
    }
    .eagle-active .face-slideshow img.viking{
        transform: scale(2)scaleX(1.3)translateX(0.05vw)translateY(1.5vw);
    }
    .eagle-active .face-slideshow img.monocle{
        transform: scale(1)translateX(1.7vw)translateX(0.2vw)translateY(-1vw);
    }

/*Clothes based on base*/
    /*Skip Flamingo for now*/
    .flamingo-active .clothes-slideshow-one img.dress{
        transform: rotate(50deg)scale(1.6)translateX(0vw)translateY(-3.5vw);
    }
    .flamingo-active .clothes-slideshow-one img.poncho{
        transform: scale(0.7)translateX(-4vw)translateY(-3.5vw);
    }
    .flamingo-active .clothes-slideshow-one img.rodeo{
        transform: scale(0.7)translateX(-4vw)translateY(-2vw);
    }
    .flamingo-active .clothes-slideshow-one img.hoodie{
        transform: scale(0.6)translateX(-4.7vw);
    }
    .flamingo-active .clothes-slideshow-one img.tshirt{
        transform: rotate(15deg)scale(0.5)translateX(3.5vw)translateY(-12vw);
    }
    .flamingo-active .clothes-slideshow-one img.tux{
        transform: rotate(15deg)scaleY(-0.8)translateX(2.5vw)translateY(7.5vw);
    }
    /*Panda*/

    .panda-active .hat-slideshow img.clear{
        transform: scale(1);
    }
    .panda-active .clothes-slideshow-one img.poncho{
        transform: scale(1.5)scaleY(0.75)translateX(0vw)translateX(-0.2vw)translateY(1vw);
    }
    .panda-active .clothes-slideshow-one img.dress{
        transform: scale(3)scaleY(0.6)scaleX(1.3)translateY(1.1vw);
    }
    .panda-active .clothes-slideshow-one img.rodeo{
        transform: scale(1)scaleY(0.7)scaleX(1.4)translateX(0.1vw)translateY(2vw);
    }
    .panda-active .clothes-slideshow-one img.hoodie{
        transform: scale(1.2)scaleX(1.1)scaleY(0.8)translateY(3.5vw);
    }
    .panda-active .clothes-slideshow-one img.tshirt{
        transform: scale(1.5)scaleX(1.1)scaleY(0.5)translateX(-0.1vw)translateY(1.7vw);
    }
    .panda-active .clothes-slideshow-one img.tux{
        transform: scale(2)scaleX(1.1)scaleY(0.5)translateY(1.5vw);
    }
    
    /*Tiger*/
    .tiger-active .clothes-slideshow-one img.poncho{
        transform: scale(1)scaleY(0.9)translateX(-2.4vw)translateY(0.5vw);
    }
    .tiger-active .clothes-slideshow-one img.rodeo{
        transform: scale(0.8)scaleY(0.6)translateX(-2.4vw)translateY(1vw);
    }
    .tiger-active .clothes-slideshow-one img.hoodie{
        transform: scale(0.8)scaleY(1)scaleX(0.8)translateX(-3vw)translateY(4vw);
    }
    .tiger-active .clothes-slideshow-one img.tshirt{
        transform: scale(0.7)scaleX(1.3)scaleY(0.9)translateX(-2.2vw)translateY(0.9vw);
    }
    .tiger-active .clothes-slideshow-one img.tux{
        transform: scale(1)scaleX(1.3)scaleY(0.8)translateX(-1.7vw)translateY(1vw);
    }
    .tiger-active .clothes-slideshow-one img.dress{
        transform: scale(1.6)scaleX(1.2)scaleY(0.7)translateX(-1.2vw)translateY(0.5vw);
    }
    /*Wolf*/
    .wolf-active .clothes-slideshow-one img.dress{
        transform: scale(1.9)scaleX(2.5)translateY(0.3vw);
    }
    .wolf-active .clothes-slideshow-one img.poncho{
        transform: scale(1.5)scaleY(0.5)translateY(-2vw);
    }
    .wolf-active .clothes-slideshow-one img.rodeo{
        transform: scale(1)scaleX(1.9)scaleY(0.7)translateX(0.1vw);
    }
    .wolf-active .clothes-slideshow-one img.hoodie{
        transform: scale(1.2)scaleX(1.6)scaleY(0.8)translateY(2vw)
    }
    .wolf-active .clothes-slideshow-one img.tshirt{
        transform: scale(1.2)scaleX(1.6)scaleY(0.5)translateY(-1vw);
    }
    .wolf-active .clothes-slideshow-one img.tux{
        transform: scale(1.5)scaleX(1.7)scaleY(0.8)translateY(0.5vw);
    }
    /*Eagle*/
    .eagle-active .clothes-slideshow-one img.poncho{
        transform: scale(1.1)scaleX(1.3)translateY(0vw);
    }
    .eagle-active .clothes-slideshow-one img.rodeo{
        transform: scale(1.1)scaleY(0.6)translateX(0.2vw)translateY(0vw);
    }
    .eagle-active .clothes-slideshow-one img.hoodie{
        transform: scale(1)scaleX(1.2)translateX(0.15vw)translateY(2.3vw);
    }
    .eagle-active .clothes-slideshow-one img.tshirt{
        transform:scale(0.9)scaleX(1.6)scaleY(0.8)translateY(0.2vw)translateX(0.1vw);
    }
    .eagle-active .clothes-slideshow-one img.dress{
        transform:scale(2)scaleX(1.7)translateX(0.1vw)translateY(0.5vw);
    }
     .eagle-active .clothes-slideshow-one img.tux{
        transform: scale(1)scaleX(2.3)scaleY(0.9)translateY(0vw)translateX(0.15vw)
    }

/*Shoes -> TWO LEGS*/

    .flamingo-active .back-left-shoe,
    .flamingo-active .back-right-shoe,
    .flamingo-active .half,
    .panda-active .back-left-shoe,
    .panda-active .back-right-shoe,
    .panda-active .half,
    .tiger-active .back-left-shoe,
    .wolf-active .back-left-shoe,
    .wolf-active .back-right-shoe,
    .wolf-active .half,
    .eagle-active .back-left-shoe,
    .eagle-active .back-right-shoe,
    .eagle-active .half {
        display: none;
    }
    /*Flamingo*/
    .flamingo-active .shoes-slideshow-two img.jordan.front-left-shoe{ /*Codes for the right*/
        transform: scale(0.5)scaleX(-1)translateY(-18.5vw)translateX(0vw);
    }
    .flamingo-active .shoes-slideshow-two img.jordan.front-right-shoe{ /*Actually codes for the left*/
        transform: rotate(-15deg)scale(0.5)scaleX(-1)translateY(-1vw)translateX(3vw);
    }

    .flamingo-active .shoes-slideshow-two img.shrek.front-right-shoe{
        transform: scale(0.4)scaleX(-1)translateX(-0.5vw)translateY(23vw);
    }
    .flamingo-active .shoes-slideshow-two img.shrek.front-left-shoe{
        transform: rotate(-15deg)scale(0.4)scaleX(-1)translateX(6vw)translateY(10vw);
    }

    .flamingo-active .shoes-slideshow-two img.converse.front-right-shoe{
        transform: scale(0.6)scaleX(-1)translateX(0.5vw)translateY(2vw);
    }
    .flamingo-active .shoes-slideshow-two img.converse.front-left-shoe{
        transform: rotate(15deg)scale(0.6)scaleX(-1)translateX(5.8vw)translateY(-14vw)
    }

    .flamingo-active .shoes-slideshow-two img.crocs.front-right-shoe{
        transform:scale(0.6)scaleX(-1)translateX(0vw)translateY(1.8vw)
    }
    .flamingo-active .shoes-slideshow-two img.crocs.front-left-shoe{
        transform: rotate(-15deg)scale(0.6)scaleX(-1)translateX(-2.5vw)translateY(-16vw)
    }


    /*Panda*/
    .panda-active .shoes-slideshow-two img.jordan.front-left-shoe{ /*Codes for the right*/
        transform: scale(0.5)translateY(-18vw)translateX(5vw);
    }
    .panda-active .shoes-slideshow-two img.jordan.front-right-shoe{ /*Actually codes for the left*/
        transform: scale(0.5)scaleX(-1)translateY(2vw)translateX(5vw);
    }

    .panda-active .shoes-slideshow-two img.shrek.front-right-shoe{
        transform: scale(0.4)translateX(6vw)translateY(25vw);
    }
    .panda-active .shoes-slideshow-two img.shrek.front-left-shoe{
        transform: scale(0.4)scaleX(-1)translateX(5.6vw)translateY(14vw);
    }

   
    .panda-active .shoes-slideshow-two img.converse.front-right-shoe{
        transform: scale(0.8)translateX(3.8vw)translateY(3vw);
    }
    .panda-active .shoes-slideshow-two img.converse.front-left-shoe{
        transform: scale(0.8)scaleX(-1)translateX(3.8vw)translateY(-8.7vw)
    }

     .panda-active .shoes-slideshow-two img.crocs.front-right-shoe{
        transform:scale(0.7)translateX(4vw)translateY(2.8vw)
    }
    .panda-active .shoes-slideshow-two img.crocs.front-left-shoe{
        transform: scale(0.7)scaleX(-1)translateX(4vw)translateY(-11.6vw)
    }

    /*Tiger*/
    .tiger-active .shoes-slideshow-two img.jordan.front-right-shoe{
        transform: scale(0.6)scaleX(-1)translateX(7.3vw)translateY(-18vw);
    }
    .tiger-active .shoes-slideshow-two img.jordan.front-left-shoe{
        transform: scale(0.6)scaleX(-1)translateX(3vw)translateY(-34vw);
    }
    .tiger-active .shoes-slideshow-two img.jordan.back-right-shoe{ /*This actually codes for back left shoe*/
        transform: scale(0.6)scaleX(-1)translateX(-4.5vw)translateY(-68vw);
    }
    .tiger-active .shoes-slideshow-two img.jordan.half{ /*This shoe is like hovering really odd...go through with photoshop?*/
        transform: scale(1)scaleX(-1)translateX(-0.2vw)translateY(-31.5vw);
    }

    .tiger-active .shoes-slideshow-two img.converse.front-right-shoe{
        transform: scale(0.6)scaleX(-1.2)translateX(6.3vw)translateY(-15vw);
    }
    .tiger-active .shoes-slideshow-two img.converse.front-left-shoe{
        transform: scale(0.6)scaleX(-1.2)translateX(2.5vw)translateY(-30.2vw);
    }
    .tiger-active .shoes-slideshow-two img.converse.back-right-shoe{  /*This shoe is like hovering really odd...go through with photoshop?*/
        transform: scale(0.6)scaleX(-1.2)translateX(-3.5vw)translateY(-62.5vw);
    }
    .tiger-active .shoes-slideshow-two img.converse.half{ 
        transform: scale(1)scaleX(-1)scaleY(0.8)translateX(-0.9vw)translateY(-35.5vw);
    }

    .tiger-active .shoes-slideshow-two img.crocs.front-right-shoe{
        transform: scale(0.6)scaleX(-1)translateX(6vw)translateY(-17vw);
    }
    .tiger-active .shoes-slideshow-two img.crocs.front-left-shoe{
        transform: scale(0.6)scaleX(-1)translateX(2vw)translateY(-33vw);
    }
    .tiger-active .shoes-slideshow-two img.crocs.back-right-shoe{  /*This shoe is like hovering really odd...go through with photoshop?*/
        transform: scale(0.6)scaleX(-1)translateX(-5.2vw)translateY(-67vw);
    }
    .tiger-active .shoes-slideshow-two img.crocs.half{ 
        transform: rotate(2deg)scale(0.8)scaleX(-1)translateX(0.9vw)translateY(-39vw);
    }

    .tiger-active .shoes-slideshow-two img.shrek.front-right-shoe{
        transform: scale(0.45)scaleX(-1)translateX(9vw)translateY(1vw);
    }
    .tiger-active .shoes-slideshow-two img.shrek.front-left-shoe{
        transform: scale(0.45)scaleX(-1)translateX(2.5vw)translateY(-7vw);
    }
    .tiger-active .shoes-slideshow-two img.shrek.back-right-shoe{  /*This shoe is like hovering really odd...go through with photoshop?*/
        transform: scale(0.45)scaleX(-1)translateX(-7vw)translateY(-40vw);
    }
    .tiger-active .shoes-slideshow-two img.shrek.half{ 
        transform: scale(0.7)scaleX(-0.8)translateX(-0.9vw)translateY(-16.5vw);
    }
    


    /*Wolf*/
    .wolf-active .shoes-slideshow-two img.jordan.front-right-shoe{ /*This is for the shoe on the right side*/
        transform: scale(0.6)scaleX(-1)translateX(-2vw);
    }
    .wolf-active .shoes-slideshow-two img.jordan.front-left-shoe{
        transform: scale(0.6)scaleX(-1)translateX(8vw)translateY(-17vw);
    }
    
    .wolf-active .shoes-slideshow-two img.shrek.front-right-shoe{
        transform: scale(0.5)scaleX(-1)translateX(-3vw)translateY(18vw);
    }
    .wolf-active .shoes-slideshow-two img.shrek.front-left-shoe{
        transform: scale(0.5)scaleX(-1)translateX(9vw)translateY(9vw);
    }

    .wolf-active .shoes-slideshow-two img.converse.front-right-shoe{
        transform: scale(0.6)scaleX(-1)translateX(-2vw)translateY(2vw);
    }
    .wolf-active .shoes-slideshow-two img.converse.front-left-shoe{
        transform: scale(0.6)scaleX(-1)translateX(7vw)translateY(-14vw);
    }

    .wolf-active .shoes-slideshow-two img.crocs.front-right-shoe{
        transform: scale(0.6)scaleX(-1)translateX(-2vw)translateY(1vw);
    }
    .wolf-active .shoes-slideshow-two img.crocs.front-left-shoe{
        transform: scale(0.6)scaleX(-1)translateX(7vw)translateY(-16vw);
    }

    /*Eagle*/

    .eagle-active .shoes-slideshow-two img.jordan.front-right-shoe{
        transform: scale(1)scaleY(1.4)translateX(4vw)translateY(-0.35vw);
    }
    .eagle-active .shoes-slideshow-two img.jordan.front-left-shoe{
        transform: scale(1)scaleX(-1)scaleY(1.4)translateX(3.5vw)translateY(-7.5vw);
    }

    .eagle-active .shoes-slideshow-two img.shrek.front-right-shoe{
        transform: scale(0.7)scaleY(1.2)translateY(11vw)translateX(5.5vw);
    }
    .eagle-active .shoes-slideshow-two img.shrek.front-left-shoe{
        transform: scale(0.7)scaleX(-1)scaleY(1.2)translateY(5.8vw)translateX(4.5vw)
    }

    .eagle-active .shoes-slideshow-two img.converse.front-right-shoe{
        transform: scale(1)scaleX(1.2)scaleY(1)translateX(3.5vw)translateY(0.9vw)
    }
    .eagle-active .shoes-slideshow-two img.converse.front-left-shoe{
        transform: scale(1)scaleX(-1.2)scaleY(1)translateX(3.2vw)translateY(-8.4vw)
    }

    .eagle-active .shoes-slideshow-two img.crocs.front-right-shoe{
        transform: scale(1)scaleX(0.9)scaleY(1.2)translateX(3.5vw)translateY(0.8vw)
    }
    .eagle-active .shoes-slideshow-two img.crocs.front-left-shoe{
        transform: scale(1)scaleX(-0.9)scaleY(1.2)translateX(3.2vw)translateY(-7.5vw)
    }

/*Fading animation*/
.fade{
    animation-name: fade;
    animation-duration:0.35s; 
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}