/* KLAPP NAV */
.fade-out {
    opacity:0 !important;
     -webkit-transition: 0.3s ease-in all;
    -moz-transition: 0.3s ease-in all;
    -o-transition: 0.3s ease-in all;
    transition: 0.3s ease-in all;
    }

.move-bg {
    margin-top: -150px;
    opacity:0;
    }
    
   

.nav-text {
    width:100%;
    font-size:1.6em;
    color:#fff;
    font-weight:300;
    text-align:center;
    padding-top:35%;  
    text-transform: uppercase;
   
    }
    
.nav-text-2 {
    width:100%;
    font-size:1.6em;
    color:#fff;
    font-weight:300;
    text-align:center;
    padding-top:43%;  
    text-transform: uppercase;
    
    }    

#nav-container {
  width: 100%;
  height: auto;
  perspective: 1500px;
  margin-top:3px;
  overflow:hidden;
}

.square-01 {
  width: 228px;
  height: 228px;
  background-color:#f4001a;
  background-image: url('../img/nav/nav-01.jpg');
  background-size:cover;
  border-right: 3px solid #fff;
  z-index:11;
  opacity:1;
  cursor:pointer;
  -webkit-transition: 0.3s ease-in all;
    -moz-transition: 0.3s ease-in all;
    -o-transition: 0.3s ease-in all;
    transition: 0.3s ease-in all;
    
}


.square-02 {
  position:absolute;
  left:228px;
  top:0px;
  width: 228px;
  height: 228px;
  background-image: url('../img/nav/nav-03.jpg');
  background-size:cover;
  border-right: 3px solid #fff;
  z-index:12;
  opacity:1;
  cursor:pointer;
  -webkit-transition: 0.3s ease-in all;
    -moz-transition: 0.3s ease-in all;
    -o-transition: 0.3s ease-in all;
    transition: 0.3s ease-in all;
}



.square-03 {
  position:absolute;
  left:456px;
  top:0px;
  width: 228px;
  height: 228px;
  background-image: url('../img/nav/nav-04.jpg');
  background-size:cover;
  border-right: 3px solid #fff;
  opacity:1;
  cursor:pointer;
  -webkit-transition: 0.3s ease-in all;
    -moz-transition: 0.3s ease-in all;
    -o-transition: 0.3s ease-in all;
    transition: 0.3s ease-in all;
}

.square-04 {
  position:absolute;
  left:684px;
  top:0px;
  width: 228px;
  height: 228px;
  background-image: url('../img/nav/nav-08.jpg');
  background-size:cover;
  border-right: 3px solid #fff;
  opacity:1;
  cursor:pointer;
  -webkit-transition: 0.3s ease-in all;
    -moz-transition: 0.3s ease-in all;
    -o-transition: 0.3s ease-in all;
    transition: 0.3s ease-in all;
}

.square-05 {
  position:absolute;
  left:912px;
  top:0px;
  width: 228px;
  height: 228px;
  background-image: url('../img/nav/nav-10.jpg');
  background-size:cover;
  opacity:1;
  cursor:pointer;
  -webkit-transition: 0.3s ease-in all;
    -moz-transition: 0.3s ease-in all;
    -o-transition: 0.3s ease-in all;
    transition: 0.3s ease-in all;  
}

.square-06 {
  width: 228px;
  height: 228px;
  background-image: url('../img/nav/nav-06.jpg');
  background-size:cover;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
 opacity:1;
 cursor:pointer;
  -webkit-transition: 0.3s ease-in all;
    -moz-transition: 0.3s ease-in all;
    -o-transition: 0.3s ease-in all;
    transition: 0.3s ease-in all;
}

.square-07 {
  position:absolute;
  left:228px;
  top:228px;
  width: 228px;
  height: 228px;
  background-image: url('../img/nav/nav-07.jpg');
  background-size:cover;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  opacity:1;
  cursor:pointer;
  -webkit-transition: 0.3s ease-in all;
    -moz-transition: 0.3s ease-in all;
    -o-transition: 0.3s ease-in all;
    transition: 0.3s ease-in all;
}

.square-08 {
  position:absolute;
  left:456px;
  top:228px;
  width: 228px;
  height: 228px;
  background-image: url('../img/nav/nav-08.jpg');
  background-size:cover;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  opacity:1;
  cursor:pointer;
  -webkit-transition: 0.3s ease-in all;
    -moz-transition: 0.3s ease-in all;
    -o-transition: 0.3s ease-in all;
    transition: 0.3s ease-in all;
}

.square-09 {
  position:absolute;
  left:684px;
  top:228px;
  width: 228px;
  height: 228px;
  background-image: url('../img/nav/nav-09.jpg');
  background-size:cover;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  opacity:1;
  cursor:pointer;
  -webkit-transition: 0.3s ease-in all;
    -moz-transition: 0.3s ease-in all;
    -o-transition: 0.3s ease-in all;
    transition: 0.3s ease-in all;
}

.square-10 {
    position:absolute;
  left:912px;
  top:228px;
  width: 228px;
  height: 228px;
  background-image: url('../img/nav/nav-10.jpg');
  background-size:cover;
  border-top: 3px solid #fff;
  background-color:#f4001a;
  opacity:1;
  cursor:pointer;
  -webkit-transition: 0.3s ease-in all;
    -moz-transition: 0.3s ease-in all;
    -o-transition: 0.3s ease-in all;
    transition: 0.3s ease-in all;
}

/*#animation {
  animation: anim 1s linear 0s infinite alternate;
  transform-origin: 50% 100%;
}

@keyframes anim {
  from {transform: rotateX(0deg);}
  to {transform: rotateX(-180deg);}
}

#animation-02 {
  animation: anim-02 1s linear 0s infinite alternate;
  transform-origin: 0% 100%;
}

@keyframes anim-02 {
  from {transform: rotateX(0deg);}
  to {transform: rotateY(-180deg);}
}

/* END KLAPP NAV */

/*  !!!!!! RESPONSIVE !!!!!!!! */

@media ( max-width: 1199px ) {
    
.nav-text {
    font-size:1.2em;  
    padding-top:35%;  
    }
    
.nav-text-2 {
    font-size:1.2em;
    padding-top:43%;  
    }    

#nav-container {
 width: 100%;
  height: auto;
}

.square-01 {
  width: 192px;
  height: 192px;
  border-right: 3px solid #fff;
  z-index:11;
}

.square-01-back {
  width:192px;
  height: 192px;
  border-right: 3px solid #fff;
  z-index:0;
}

.square-02 {
  left:192px;
  top:0px;
  width: 192px;
  height: 192px;
  border-right: 3px solid #fff;
}

.square-02-back {
  left:192px;
  top:0px;
  width: 192px;
  height: 192px;
  border-right: 3px solid #fff;
  z-index:11;
}

.square-03 {
  left:384px;
  top:0px;
  width: 192px;
  height: 192px;
  border-right: 3px solid #fff;
}

.square-04 {
  left:576px;
  top:0px;
  width: 192px;
  height: 192px;
  border-right: 3px solid #fff;
}

.square-05 {
  left:768px;
  top:0px;
  width: 192px;
  height: 192px;
  background-size:cover;
  
}

.square-06 {
  width: 192px;
  height: 192px;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.square-07 {
  left:192px;
  top:192px;
  width: 192px;
  height: 192px;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.square-08 {
  left:384px;
  top:192px;
  width: 192px;
  height: 192px;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.square-09 {
  left:576px;
  top:192px;
  width: 192px;
  height: 192px;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.square-10 {
  left:768px;
  top:192px;
  width: 192px;
  height: 192px;
  border-top: 3px solid #fff;
}

    
}     

@media ( max-width: 991px ) {
    
.nav-text {
    font-size:1.2em;  
    padding-top:35%;  
    }
    
.nav-text-2 {
    font-size:1.2em;
    padding-top:43%;  
    }    

#nav-container {
  width: 100%;
  height: auto;
}

.square-01 {
  width: 144px;
  height: 144px;
  border-right: 3px solid #fff;
  z-index:11;
}

.square-01-back {
  width:144px;
  height: 144px;
  border-right: 3px solid #fff;
  z-index:0;
}

.square-02 {
  left:144px;
  top:0px;
  width: 144px;
  height: 144px;
  border-right: 3px solid #fff;
}

.square-02-back {
  left:144px;
  top:0px;
  width: 144px;
  height: 144px;
  border-right: 3px solid #fff;
  z-index:11;
}

.square-03 {
  left:288px;
  top:0px;
  width: 144px;
  height: 144px;
  border-right: 3px solid #fff;
}

.square-04 {
  left:432px;
  top:0px;
  width: 144px;
  height: 144px;
  border-right: 3px solid #fff;
}

.square-05 {
  left:576px;
  top:0px;
  width: 144px;
  height: 144px;
  background-size:cover;
  
}

.square-06 {
  width: 144px;
  height: 144px;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.square-07 {
  left:144px;
  top:144px;
  width: 144px;
  height: 144px;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.square-08 {
  left:288px;
  top:144px;
  width: 144px;
  height: 144px;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.square-09 {
  left:432px;
  top:144px;
  width: 144px;
  height: 144px;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.square-10 {
  left:576px;
  top:144px;
  width: 144px;
  height: 144px;
  border-top: 3px solid #fff;
}    
    
}    
    
@media ( max-width: 767px ) {

.nav-text {
    font-size:1em;  
    padding-top:35%;  
    }
    
.nav-text-2 {
    font-size:1em;
    padding-top:43%;  
    }    

#nav-container {
 width: 100%;
  height: auto;
}

.square-01 {
  width: 108px;
  height: 108px;
  border-right: 3px solid #fff;
  z-index:11;
}

.square-01-back {
  width:108px;
  height: 108px;
  border-right: 3px solid #fff;
  z-index:0;
}

.square-02 {
  left:108px;
  top:0px;
  width: 108px;
  height: 108px;
  border-right: 3px solid #fff;
}

.square-02-back {
  left:108px;
  top:0px;
  width: 108px;
  height: 108px;
  border-right: 3px solid #fff;
  z-index:11;
}

.square-03 {
  left:216px;
  top:0px;
  width: 108px;
  height: 108px;
  border-right: 3px solid #fff;
}

.square-04 {
  left:324px;
  top:0px;
  width: 108px;
  height: 108px;
  border-right: 3px solid #fff;
}

.square-05 {
  left:432px;
  top:0px;
  width: 108px;
  height: 108px;
  background-size:cover;
  
}

.square-06 {
  width: 108px;
  height: 108px;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.square-07 {
  left:108px;
  top:108px;
  width: 108px;
  height: 108px;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.square-08 {
  left:216px;
  top:108px;
  width: 108px;
  height: 108px;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.square-09 {
  left:324px;
  top:108px;
  width: 108px;
  height: 108px;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
}

.square-10 {
  left:432px;
  top:108px;
  width: 108px;
  height: 108px;
  border-top: 3px solid #fff;
}     

    
}   
       

@media ( max-width: 415px ) {
    
.nav-text {
    font-size:0.7em;  
    padding-top:35%;  
    }
    
.nav-text-2 {
    font-size:0.8em;
    padding-top:43%;  
    }    

#nav-container {
   width: 100%;
  height: auto;
}

.square-01 {
  width: 20%;
  height: 85px;
  border-right: 2px solid #fff;
  z-index:11;
}

.square-01-back {
  width:20%;
  height: 85px;
  border-right: 2px solid #fff;
  z-index:0;
}

.square-02 {
  left:20%;
  top:0px;
  width:20%;
  height: 85px;
  border-right: 2px solid #fff;
}

.square-02-back {
  left:20%;
  top:0px;
  width:20%;
  height: 85px;
  border-right: 2px solid #fff;
  z-index:11;
}

.square-03 {
  left:40%;
  top:0px;
  width:20%;
  height: 85px;
  border-right: 2px solid #fff;
}

.square-04 {
  left:60%;
  top:0px;
  width:20%;
  height: 85px;
  border-right: 2px solid #fff;
}

.square-05 {
  left:80%;
  top:0px;
  width:20%;
  height: 85px;
  background-size:cover;
  
}

.square-06 {
  width:20%;
  height: 85px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}

.square-07 {
  left:20%;
  top:85px;
  width:20%;
  height: 85px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}

.square-08 {
  left:40%;
  top:85px;
  width:20%;
  height: 85px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}

.square-09 {
  left:60%;
  top:85px;
  width:20%;
  height: 85px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}

.square-10 {
  left:80%;
  top:85px;
  width:20%;
  height: 85px;
  border-top: 2px solid #fff;
} 
  
    
} 

@media ( max-width: 321px ) {
    
.nav-text {
    font-size:0.6em;  
    padding-top:30%;  
    }
    
.nav-text-2 {
    font-size:0.6em;
    padding-top:40%;  
    }    

#nav-container {
   width: 100%;
  height: auto;
}

.square-01 {
  width: 20%;
  height: 60px;
  border-right: 2px solid #fff;
  z-index:11;
}

.square-01-back {
  width:20%;
  height: 60px;
  border-right: 2px solid #fff;
  z-index:0;
}

.square-02 {
  left:20%;
  top:0px;
  width:20%;
  height: 60px;
  border-right: 2px solid #fff;
}

.square-02-back {
  left:20%;
  top:0px;
  width:20%;
  height: 60px;
  border-right: 2px solid #fff;
  z-index:11;
}

.square-03 {
  left:40%;
  top:0px;
  width:20%;
  height: 60px;
  border-right: 2px solid #fff;
}

.square-04 {
  left:60%;
  top:0px;
  width:20%;
  height: 60px;
  border-right: 2px solid #fff;
}

.square-05 {
  left:80%;
  top:0px;
  width:20%;
  height: 60px;
  background-size:cover;
  
}

.square-06 {
  width:20%;
  height: 60px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}

.square-07 {
  left:20%;
  top:60px;
  width:20%;
  height: 60px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}

.square-08 {
  left:40%;
  top:60px;
  width:20%;
  height: 60px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}

.square-09 {
  left:60%;
  top:60px;
  width:20%;
  height: 60px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}

.square-10 {
  left:80%;
  top:60px;
  width:20%;
  height: 60px;
  border-top: 2px solid #fff;
} 
  
    
} 




/* ANIMATIONS */

.swing-top-fwd {
	-webkit-animation: swing-top-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: swing-top-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.swing-bottom-right-fwd {
	-webkit-animation: swing-bottom-right-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: swing-bottom-right-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.swing-left-fwd {
	-webkit-animation: swing-left-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	-moz-animation: swing-left-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: swing-left-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.swing-top-right-fwd {
	-webkit-animation: swing-top-right-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: swing-top-right-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.swing-bottom-fwd {
	-webkit-animation: swing-bottom-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: swing-bottom-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.swing-top-left-fwd {
	-webkit-animation: swing-top-left-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: swing-top-left-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.swing-right-fwd {
	-webkit-animation: swing-right-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: swing-right-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.swing-bottom-left-fwd {
	-webkit-animation: swing-bottom-left-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: swing-bottom-left-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


/* END ANIMATIONS */



/* ----------------------------------------------
 * Generated by Animista on 2018-6-25 17:48:9
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swing-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-top-fwd {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  100% {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
@keyframes swing-top-fwd {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  100% {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}

/**
 * ----------------------------------------
 * animation swing-bottom-right-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-bottom-right-fwd {
  0% {
    -webkit-transform: rotate3d(-1, 1, 0, 0deg);
            transform: rotate3d(-1, 1, 0, 0deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
  100% {
    -webkit-transform: rotate3d(-1, 1, 0, 180deg);
            transform: rotate3d(-1, 1, 0, 180deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
}
@keyframes swing-bottom-right-fwd {
  0% {
    -webkit-transform: rotate3d(-1, 1, 0, 0deg);
            transform: rotate3d(-1, 1, 0, 0deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
  100% {
    -webkit-transform: rotate3d(-1, 1, 0, 180deg);
            transform: rotate3d(-1, 1, 0, 180deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
}

/**
 * ----------------------------------------
 * animation swing-left-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-left-fwd {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
  }
  100% {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
  }
}
@keyframes swing-left-fwd {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
  }
  100% {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
  }
}

/**
 * ----------------------------------------
 * animation swing-top-right-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-top-right-fwd {
  0% {
    -webkit-transform: rotate3d(1, 1, 0, 0deg);
            transform: rotate3d(1, 1, 0, 0deg);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
  100% {
    -webkit-transform: rotate3d(1, 1, 0, 180deg);
            transform: rotate3d(1, 1, 0, 180deg);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
}
@keyframes swing-top-right-fwd {
  0% {
    -webkit-transform: rotate3d(1, 1, 0, 0deg);
            transform: rotate3d(1, 1, 0, 0deg);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
  100% {
    -webkit-transform: rotate3d(1, 1, 0, 180deg);
            transform: rotate3d(1, 1, 0, 180deg);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
}

/**
 * ----------------------------------------
 * animation swing-bottom-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-bottom-fwd {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
}
@keyframes swing-bottom-fwd {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
}

/**
 * ----------------------------------------
 * animation swing-top-left-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-top-left-fwd {
  0% {
    -webkit-transform: rotate3d(-1, 1, 0, 0deg);
            transform: rotate3d(-1, 1, 0, 0deg);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: rotate3d(-1, 1, 0, -180deg);
            transform: rotate3d(-1, 1, 0, -180deg);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
}
@keyframes swing-top-left-fwd {
  0% {
    -webkit-transform: rotate3d(-1, 1, 0, 0deg);
            transform: rotate3d(-1, 1, 0, 0deg);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: rotate3d(-1, 1, 0, -180deg);
            transform: rotate3d(-1, 1, 0, -180deg);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
}

/**
 * ----------------------------------------
 * animation swing-right-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-right-fwd {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    -webkit-transform-origin: right;
            transform-origin: right;
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-origin: right;
            transform-origin: right;
  }
}
@keyframes swing-right-fwd {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    -webkit-transform-origin: right;
            transform-origin: right;
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-origin: right;
            transform-origin: right;
  }
}

/**
 * ----------------------------------------
 * animation swing-bottom-left-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-bottom-left-fwd {
  0% {
    -webkit-transform: rotate3d(1, 1, 0, 0deg);
            transform: rotate3d(1, 1, 0, 0deg);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
  100% {
    -webkit-transform: rotate3d(1, 1, 0, -180deg);
            transform: rotate3d(1, 1, 0, -180deg);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
}
@keyframes swing-bottom-left-fwd {
  0% {
    -webkit-transform: rotate3d(1, 1, 0, 0deg);
            transform: rotate3d(1, 1, 0, 0deg);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
  100% {
    -webkit-transform: rotate3d(1, 1, 0, -180deg);
            transform: rotate3d(1, 1, 0, -180deg);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
}