@charset "UTF-8";
@charset "UTF-8";
.ich-prefix {    }
.ich-prefix *,
.ich-prefix *:after,
.ich-prefix *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ich-prefix body {
margin: 0px;
}
.ich-prefix [class*='col-'] {
float: left;
padding-right: 20px; }
.ich-prefix .grid {
width: 100%;
margin: 0 auto;
overflow: visible;
}
.ich-prefix .grid:after {
content: "";
display: table;
clear: both;
}
.ich-prefix .grid-pad {
padding-top: 20px;
padding-left: 20px; padding-right: 0px; }
.ich-prefix .push-right {
float: right;
}
.ich-prefix .col-1-1 {
width: 100%;
}
.ich-prefix .col-2-3,
.ich-prefix .col-8-12 {
width: 66.66%;
}
.ich-prefix .col-1-2,
.ich-prefix .col-6-12 {
width: 50%;
}
.ich-prefix .col-1-3,
.ich-prefix .col-4-12 {
width: 33.33%;
}
.ich-prefix .col-1-4,
.ich-prefix .col-3-12 {
width: 25%;
}
.ich-prefix .col-1-5 {
width: 20%;
}
.ich-prefix .col-1-6,
.ich-prefix .col-2-12 {
width: 16.667%;
}
.ich-prefix .col-1-7 {
width: 14.28%;
}
.ich-prefix .col-1-8 {
width: 12.5%;
}
.ich-prefix .col-1-9 {
width: 11.1%;
}
.ich-prefix .col-1-10 {
width: 10%;
}
.ich-prefix .col-1-11 {
width: 9.09%;
}
.ich-prefix .col-1-12 {
width: 8.33%;
}
.ich-prefix .col-11-12 {
width: 91.66%;
}
.ich-prefix .col-10-12 {
width: 83.333%;
}
.ich-prefix .col-9-12 {
width: 75%;
}
.ich-prefix .col-5-12 {
width: 41.66%;
}
.ich-prefix .col-7-12 {
width: 58.33%;
}
.ich-prefix .push-2-3,
.ich-prefix .push-8-12 {
margin-left: 66.66%;
}
.ich-prefix .push-1-2,
.ich-prefix .push-6-12 {
margin-left: 50%;
}
.ich-prefix .push-1-3,
.ich-prefix .push-4-12 {
margin-left: 33.33%;
}
.ich-prefix .push-1-4,
.ich-prefix .push-3-12 {
margin-left: 25%;
}
.ich-prefix .push-1-5 {
margin-left: 20%;
}
.ich-prefix .push-1-6,
.ich-prefix .push-2-12 {
margin-left: 16.667%;
}
.ich-prefix .push-1-7 {
margin-left: 14.28%;
}
.ich-prefix .push-1-8 {
margin-left: 12.5%;
}
.ich-prefix .push-1-9 {
margin-left: 11.1%;
}
.ich-prefix .push-1-10 {
margin-left: 10%;
}
.ich-prefix .push-1-11 {
margin-left: 9.09%;
}
.ich-prefix .push-1-12 {
margin-left: 8.33%;
}
@media handheld, only screen and (max-width: 767px) {
.ich-prefix {  }
.ich-prefix .grid {
width: 100%;
min-width: 0;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px; padding-right: 10px; }
.ich-prefix [class*='col-'] {
width: auto;
float: none;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 0px;
padding-right: 10px; }
.ich-prefix [class*='mobile-col-'] {
float: left;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 10px;
padding-left: 0px;
padding-right: 10px; padding-bottom: 0px;
}
.ich-prefix .mobile-col-1-1 {
width: 100%;
}
.ich-prefix .mobile-col-2-3,
.ich-prefix .mobile-col-8-12 {
width: 66.66%;
}
.ich-prefix .mobile-col-1-2,
.ich-prefix .mobile-col-6-12 {
width: 50%;
}
.ich-prefix .mobile-col-1-3,
.ich-prefix .mobile-col-4-12 {
width: 33.33%;
}
.ich-prefix .mobile-col-1-4,
.ich-prefix .mobile-col-3-12 {
width: 25%;
}
.ich-prefix .mobile-col-1-5 {
width: 20%;
}
.ich-prefix .mobile-col-1-6,
.ich-prefix .mobile-col-2-12 {
width: 16.667%;
}
.ich-prefix .mobile-col-1-7 {
width: 14.28%;
}
.ich-prefix .mobile-col-1-8 {
width: 12.5%;
}
.ich-prefix .mobile-col-1-9 {
width: 11.1%;
}
.ich-prefix .mobile-col-1-10 {
width: 10%;
}
.ich-prefix .mobile-col-1-11 {
width: 9.09%;
}
.ich-prefix .mobile-col-1-12 {
width: 8.33%;
}
.ich-prefix .mobile-col-11-12 {
width: 91.66%;
}
.ich-prefix .mobile-col-10-12 {
width: 83.333%;
}
.ich-prefix .mobile-col-9-12 {
width: 75%;
}
.ich-prefix .mobile-col-5-12 {
width: 41.66%;
}
.ich-prefix .mobile-col-7-12 {
width: 58.33%;
}
.ich-prefix .hide-on-mobile {
display: none !important;
width: 0;
height: 0;
}
}.wcp-caption-plugin {
margin: 0;
}
.wcp-caption-plugin .image-caption-box {   
cursor: pointer;
position: relative;  
overflow: hidden;
width: 100%; }
.centered-text {
display: table-cell !important;
vertical-align: middle !important;
}
.centered-text p, .wcp-caption-image {
margin: 0;
}
.wcp-caption-plugin .image-caption-box img {  
position: relative;
-webkit-transition: all 1s ease-out;  
-moz-transition: all 1s ease-out;  
-o-transition: all 1s ease-out;  
-ms-transition: all 1s ease-out;  
transition: all 1s ease-out;
max-width: 100% !important;
vertical-align: -webkit-baseline-middle;
display: block;
} 
.wcp-caption-image {
width: 100%;
margin: 0;
padding: 0;
}
.wcp-caption-plugin .image-caption-box .caption {  
background-color: rgba(0,0,0,0.5);  
position: absolute;  
color: #fff;  
z-index: 2;
-webkit-transition: all 1s ease-out;  
-moz-transition: all 1s ease-out;  
-o-transition: all 1s ease-out;  
-ms-transition: all 1s ease-out;  
transition: all 1s ease-out;
width: 100%;
height: 100%;
} 
.wcp-caption-plugin .image-caption-box .captionna {  
pointer-events: none !important;
} .wcp-caption-plugin .image-caption-box .slide-top-to-bottom {  
display: block;  
bottom: -100%;   
}
.wcp-caption-plugin .image-caption-box:hover .slide-top-to-bottom {  
-moz-transform: translateY(-100%);  
-o-transform: translateY(-100%);  
-webkit-transform: translateY(-100%);  
transform: translateY(-100%);  
} .wcp-caption-plugin .image-caption-box .no-effect {  
display: block;  
top: 0;
visibility: hidden;
-webkit-transition: none;
transition: none;
}
.wcp-caption-plugin .image-caption-box:hover .no-effect {  
visibility: visible;   
} .wcp-caption-plugin .image-caption-box .slide-bottom-to-top {  
display: block;
top: -100%;
}
.wcp-caption-plugin .image-caption-box:hover .slide-bottom-to-top {  
-moz-transform: translateY(100%);  
-o-transform: translateY(100%);  
-webkit-transform: translateY(100%);  
transform: translateY(100%);  
} .wcp-caption-plugin .image-caption-box .slide-left-to-right {  
display: block;
left: -100%;
}
.wcp-caption-plugin .image-caption-box:hover .slide-left-to-right {  
-moz-transform: translateX(100%);  
-o-transform: translateX(100%);  
-webkit-transform: translateX(100%);  
transform: translateX(100%);  
} .wcp-caption-plugin .image-caption-box .slide-right-to-left {  
display: block;
right: -100%;
}
.wcp-caption-plugin .image-caption-box:hover .slide-right-to-left {  
-moz-transform: translateX(-100%);  
-o-transform: translateX(-100%);  
-webkit-transform: translateX(-100%);  
transform: translateX(-100%);  
} .wcp-caption-plugin .image-caption-box .image-flip-up {  
display: block;
top: 0;
z-index: 0;
}
.wcp-caption-plugin .image-caption-box .image-flip-up ~ img {  
z-index: 101;
}
.wcp-caption-plugin .image-caption-box:hover .image-flip-up ~ img {  
-moz-transform: translateY(-100%);  
-o-transform: translateY(-100%);  
-webkit-transform: translateY(-100%);  
transform: translateY(-100%);  
} .wcp-caption-plugin .image-caption-box .image-flip-down {  
display: block;
top: 0;
z-index: 0;
}
.wcp-caption-plugin .image-caption-box .image-flip-down ~ img {  
z-index: 101;
}
.wcp-caption-plugin .image-caption-box:hover .image-flip-down ~ img {  
-moz-transform: translateY(100%);  
-o-transform: translateY(100%);  
-webkit-transform: translateY(100%);  
transform: translateY(100%);  
} .wcp-caption-plugin .image-caption-box .image-flip-right {  
display: block;
top: 0;
z-index: 0;
}
.wcp-caption-plugin .image-caption-box .image-flip-right ~ img {  
z-index: 101;
}
.wcp-caption-plugin .image-caption-box:hover .image-flip-right ~ img {  
-moz-transform: translateX(100%);  
-o-transform: translateX(100%);  
-webkit-transform: translateX(100%);  
transform: translateX(100%);  
} .wcp-caption-plugin .image-caption-box .image-flip-left {  
display: block;
top: 0;
z-index: 0;
}
.wcp-caption-plugin .image-caption-box .image-flip-left ~ img {  
z-index: 101;
}
.wcp-caption-plugin .image-caption-box:hover .image-flip-left ~ img {  
-moz-transform: translateX(-100%);  
-o-transform: translateX(-100%);  
-webkit-transform: translateX(-100%);  
transform: translateX(-100%);  
} .wcp-caption-plugin .image-caption-box .rotate-image-down {  
display: block;
top: 0;
z-index: 0;
}
.wcp-caption-plugin .image-caption-box .rotate-image-down ~ img {  
z-index: 2;
transform-origin: bottom right;
-ms-transform-origin: bottom right;
-webkit-transform-origin: bottom right;
}
.wcp-caption-plugin .image-caption-box:hover .rotate-image-down ~ img {  
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
} .wcp-caption-plugin .image-caption-box .image-turn-around {  
display: block;
top: 0; -webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.wcp-caption-plugin .image-caption-box .image-turn-around ~ img { backface-visibility:hidden;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.wcp-caption-plugin .image-caption-box:hover .image-turn-around ~ img {  
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.wcp-caption-plugin .image-caption-box:hover .image-turn-around {  
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;  
} .wcp-caption-plugin .image-caption-box .zoom-and-pan {  
display: block;
top: 0;
z-index: 3;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s 
-webkit-transform:scale(0.01);
-moz-transform:scale(0.01);
transform:scale(0.01); 
}
.wcp-caption-plugin .image-caption-box .zoom-and-pan ~ img {  
z-index: 2;
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s    
}
.wcp-caption-plugin .image-caption-box:hover .zoom-and-pan ~ img {  
-webkit-transform:scale(10);
-moz-transform:scale(10);
transform:scale(10);    
}
.wcp-caption-plugin .image-caption-box:hover .zoom-and-pan {  
-webkit-transform:scale(1);
-moz-transform:scale(1);
transform:scale(1); 
} .wcp-caption-plugin .image-caption-box .tilt-image {  
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
transform: scale(0.01);
}
.wcp-caption-plugin .image-caption-box .tilt-image ~ img {  
z-index: 2;
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s;   
}
.wcp-caption-plugin .image-caption-box:hover .tilt-image ~ img {  
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.wcp-caption-plugin .image-caption-box:hover .tilt-image {
transform: scale(1);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
} .wcp-caption-plugin .image-caption-box .morph {  
display: block;
z-index: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);  
}
.wcp-caption-plugin .image-caption-box .morph ~ img {  
z-index: 2;
backface-visibility:hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;  
}
.wcp-caption-plugin .image-caption-box:hover .morph ~ img {  
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.wcp-caption-plugin .image-caption-box:hover .morph {
z-index: 3;
border-radius: 0;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);    
} .wcp-caption-plugin .image-caption-box .move-image-right {  
display: block;
z-index: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
-ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); 
}
.wcp-caption-plugin .image-caption-box .move-image-right ~ img {  
z-index: 2;
backface-visibility:hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;  
}
.wcp-caption-plugin .image-caption-box:hover .move-image-right ~ img {  
-ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%);
}
.wcp-caption-plugin .image-caption-box:hover .move-image-right {
-ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0);
} .wcp-caption-plugin .image-caption-box .move-image-left {  
display: block;
z-index: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
-ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); 
}
.wcp-caption-plugin .image-caption-box .move-image-left ~ img {  
z-index: 2;
backface-visibility:hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;  
}
.wcp-caption-plugin .image-caption-box:hover .move-image-left ~ img {  
-ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%);
}
.wcp-caption-plugin .image-caption-box:hover .move-image-left {
-ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0);
} .wcp-caption-plugin .image-caption-box .move-image-top {  
display: block;
z-index: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
-ms-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); 
}
.wcp-caption-plugin .image-caption-box .move-image-top ~ img {  
z-index: 2;
backface-visibility:hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;  
}
.wcp-caption-plugin .image-caption-box:hover .move-image-top ~ img {  
-ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%);
}
.wcp-caption-plugin .image-caption-box:hover .move-image-top {
-ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0);
} .wcp-caption-plugin .image-caption-box .move-image-bottom {  
display: block;
z-index: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
-ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); 
}
.wcp-caption-plugin .image-caption-box .move-image-bottom ~ img {  
z-index: 2;
backface-visibility:hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;  
}
.wcp-caption-plugin .image-caption-box:hover .move-image-bottom ~ img {  
-ms-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%);
}
.wcp-caption-plugin .image-caption-box:hover .move-image-bottom {
-ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0);
} .wcp-caption-plugin .image-caption-box .image-squeez-right {  
display: block;
z-index: 0;
}
.wcp-caption-plugin .image-caption-box .image-squeez-right ~ img {  
transform-origin: right;
z-index: 2;
backface-visibility:hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;  
}
.wcp-caption-plugin .image-caption-box:hover .image-squeez-right ~ img {  
transform-origin: right;
-ms-transform: scaleX(0); -moz-transform: scaleX(0); -webkit-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0);
} .wcp-caption-plugin .image-caption-box .image-squeez-left {  
display: block;
z-index: 0;
}
.wcp-caption-plugin .image-caption-box .image-squeez-left ~ img {  
transform-origin: left;
z-index: 2;
backface-visibility:hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;  
}
.wcp-caption-plugin .image-caption-box:hover .image-squeez-left ~ img {  
transform-origin: left;
-ms-transform: scaleX(0); -moz-transform: scaleX(0); -webkit-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0);
} .wcp-caption-plugin .image-caption-box .image-squeez-top {  
display: block;
z-index: 0;
}
.wcp-caption-plugin .image-caption-box .image-squeez-top ~ img {  
transform-origin: top;
z-index: 2;
backface-visibility:hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;  
}
.wcp-caption-plugin .image-caption-box:hover .image-squeez-top ~ img {  
transform-origin: top;
-ms-transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0);
} .wcp-caption-plugin .image-caption-box .image-squeez-bottom {  
display: block;
z-index: 0;
}
.wcp-caption-plugin .image-caption-box .image-squeez-bottom ~ img {  
transform-origin: bottom;
z-index: 2;
backface-visibility:hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;  
}
.wcp-caption-plugin .image-caption-box:hover .image-squeez-bottom ~ img {  
transform-origin: bottom;
-ms-transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0);
} .wcp-caption-plugin .image-caption-box .zoom-in {  
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0
}
.wcp-caption-plugin .image-caption-box .zoom-in ~ img {
display: block;
z-index: 0;
}
.wcp-caption-plugin .image-caption-box:hover .zoom-in {  
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1
} .wcp-caption-plugin .image-caption-box .zoom-out {  
-webkit-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
opacity: 0
}
.wcp-caption-plugin .image-caption-box .zoom-out ~ img {
display: block;
z-index: 0;
}
.wcp-caption-plugin .image-caption-box:hover .zoom-out {  
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1
} .wcp-caption-plugin .image-caption-box .zoom-in-twist {
-webkit-transform: scale(0) rotateZ(-720deg);
transform: scale(0) rotateZ(-720deg);
opacity: 0    
}
.wcp-caption-plugin .image-caption-box .zoom-in-twist ~ img {
display: block;
z-index: 0;
}
.wcp-caption-plugin .image-caption-box:hover .zoom-in-twist {  
-webkit-transform: scale(1) rotateZ(0);
-ms-transform: scale(1) rotateZ(0);
transform: scale(1) rotateZ(0);
opacity: 1
} .wcp-caption-plugin .image-caption-box .zoom-out-twist {
-webkit-transform: scale(5) rotateZ(720deg);
transform: scale(5) rotateZ(720deg);
opacity: 0
}
.wcp-caption-plugin .image-caption-box .zoom-out-twist ~ img {
display: block;
z-index: 0;
}
.wcp-caption-plugin .image-caption-box:hover .zoom-out-twist {  
-webkit-transform: scale(1) rotateZ(0);
-ms-transform: scale(1) rotateZ(0);
transform: scale(1) rotateZ(0);
opacity: 1;
} .wcp-caption-plugin .image-caption-box .zoom-caption-in-image-out {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.wcp-caption-plugin .image-caption-box .zoom-caption-in-image-out ~ img {
display: block;
z-index: 0;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);    
}
.wcp-caption-plugin .image-caption-box:hover .zoom-caption-in-image-out {  
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1
}
.wcp-caption-plugin .image-caption-box:hover .zoom-caption-in-image-out ~ img {  
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
} .wcp-caption-plugin .image-caption-box .zoom-caption-out-image-in {
-webkit-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
opacity: 0;
}
.wcp-caption-plugin .image-caption-box .zoom-caption-out-image-in ~ img {
display: block;
z-index: 0;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);   
}
.wcp-caption-plugin .image-caption-box:hover .zoom-caption-out-image-in {  
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.wcp-caption-plugin .image-caption-box:hover .zoom-caption-out-image-in ~ img {  
-webkit-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
opacity: 0;
} .wcp-caption-plugin .image-caption-box .zoom-image-out-caption-twist {
-webkit-transform: scale(0) rotateZ(-720deg);
transform: scale(0) rotateZ(-720deg);
opacity: 0;   
}
.wcp-caption-plugin .image-caption-box .zoom-image-out-caption-twist ~ img {
display: block;
z-index: 0;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wcp-caption-plugin .image-caption-box:hover .zoom-image-out-caption-twist {  
-webkit-transform: scale(1) rotateZ(0);
-ms-transform: scale(1) rotateZ(0);
transform: scale(1) rotateZ(0);
opacity: 1;
}
.wcp-caption-plugin .image-caption-box:hover .zoom-image-out-caption-twist ~ img {  
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
} .wcp-caption-plugin .image-caption-box .zoom-image-in-caption-twist {
-webkit-transform: scale(5) rotateZ(720deg);
transform: scale(5) rotateZ(720deg);
opacity: 0
}
.wcp-caption-plugin .image-caption-box .zoom-image-in-caption-twist ~ img {
display: block;
z-index: 0;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);    
}
.wcp-caption-plugin .image-caption-box:hover .zoom-image-in-caption-twist {  
-webkit-transform: scale(1) rotateZ(0);
-ms-transform: scale(1) rotateZ(0);
transform: scale(1) rotateZ(0);
opacity: 1;
}
.wcp-caption-plugin .image-caption-box:hover .zoom-image-in-caption-twist ~ img {  
-webkit-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
opacity: 0;
}
.no-hover-still-caption {
}
.scroll-image-bottom-caption .caption {
height: auto !important;
bottom: 0 !important;
}
.wcp-caption-plugin .image-caption-box.scroll-image-bottom-caption:hover {  
background-position: center 100% !important;
}
.scroll-image-top-caption .caption {
height: auto !important;
top: 0 !important;
}
.wcp-caption-plugin .image-caption-box.scroll-image-top-caption:hover {  
background-position: center 100% !important;
}.ih-item {
position: relative;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
margin-bottom: 0;
}
.ih-item,
.ih-item * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ih-item a {
color: #333;
cursor: pointer;
}
.ih-item .wcp-ih-inner:hover {
text-decoration: none;
}
.ih-item img {
width: 100%;
height: 100%;
display: block;
}
.ih-item.circle {
position: relative;  border-radius: 50%;
}
.ih-item.circle .img {
position: relative;  border-radius: 50%;
}
.ih-item.circle .img:before {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle .img img {
border-radius: 50%;
}
.ih-item.circle .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
border-radius: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ih-item.square {
position: relative;  border: 8px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.ih-item.square .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ih-item.circle.effect1 .spinner {
width: 230px;
height: 230px;
border: 10px solid #ecab18;
border-right-color: #1ad280;
border-bottom-color: #1ad280;
border-radius: 50%;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .img {
position: absolute;
top: 10px;
bottom: 0;
left: 10px;
right: 0;
width: auto;
height: auto;
}
.ih-item.circle.effect1 .img:before {
display: none;
}
.ih-item.circle.effect1.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6);
}
.ih-item.circle.effect1 .info {
top: 10px;
bottom: 0;
left: 10px;
right: 0;
background: #333333;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.ih-item.circle.effect1 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect1 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect1 .wcp-ih-inner:hover .spinner {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.ih-item.circle.effect1 .wcp-ih-inner:hover .info {
opacity: 1;
}
.ih-item.circle.effect2 .img {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect2.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6);
}
.ih-item.circle.effect2 .info {
background: #333333;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect2 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect2 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect2.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.ih-item.circle.effect2.left_to_right .wcp-ih-inner:hover .img {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.ih-item.circle.effect2.left_to_right .wcp-ih-inner:hover .info {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect2.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.ih-item.circle.effect2.right_to_left .wcp-ih-inner:hover .img {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.ih-item.circle.effect2.right_to_left .wcp-ih-inner:hover .info {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect2.top_to_bottom .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.circle.effect2.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.ih-item.circle.effect2.top_to_bottom .wcp-ih-inner:hover .info {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect2.bottom_to_top .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.circle.effect2.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.ih-item.circle.effect2.bottom_to_top .wcp-ih-inner:hover .info {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect3 .img {
z-index: 5;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect3.colored .info {
background: #1a4a72;
}
.ih-item.circle.effect3 .info {
background: #333333;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect3 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect3 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect3.left_to_right .img {
-webkit-transform: scale(1) translateX(0);
-moz-transform: scale(1) translateX(0);
-ms-transform: scale(1) translateX(0);
-o-transform: scale(1) translateX(0);
transform: scale(1) translateX(0);
}
.ih-item.circle.effect3.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.ih-item.circle.effect3.left_to_right .wcp-ih-inner:hover .img {
-webkit-transform: scale(0.5) translateX(100%);
-moz-transform: scale(0.5) translateX(100%);
-ms-transform: scale(0.5) translateX(100%);
-o-transform: scale(0.5) translateX(100%);
transform: scale(0.5) translateX(100%);
}
.ih-item.circle.effect3.left_to_right .wcp-ih-inner:hover .info {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect3.right_to_left .img {
-webkit-transform: scale(1) translateX(0);
-moz-transform: scale(1) translateX(0);
-ms-transform: scale(1) translateX(0);
-o-transform: scale(1) translateX(0);
transform: scale(1) translateX(0);
}
.ih-item.circle.effect3.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.ih-item.circle.effect3.right_to_left .wcp-ih-inner:hover .img {
-webkit-transform: scale(0.5) translateX(-100%);
-moz-transform: scale(0.5) translateX(-100%);
-ms-transform: scale(0.5) translateX(-100%);
-o-transform: scale(0.5) translateX(-100%);
transform: scale(0.5) translateX(-100%);
}
.ih-item.circle.effect3.right_to_left .wcp-ih-inner:hover .info {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect3.top_to_bottom .img {
-webkit-transform: scale(1) translateY(0);
-moz-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
-o-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
.ih-item.circle.effect3.top_to_bottom .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.circle.effect3.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: scale(0.5) translateY(100%);
-moz-transform: scale(0.5) translateY(100%);
-ms-transform: scale(0.5) translateY(100%);
-o-transform: scale(0.5) translateY(100%);
transform: scale(0.5) translateY(100%);
}
.ih-item.circle.effect3.top_to_bottom .wcp-ih-inner:hover .info {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect3.bottom_to_top .img {
-webkit-transform: scale(1) translateY(0);
-moz-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
-o-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
.ih-item.circle.effect3.bottom_to_top .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.circle.effect3.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: scale(0.5) translateY(-100%);
-moz-transform: scale(0.5) translateY(-100%);
-ms-transform: scale(0.5) translateY(-100%);
-o-transform: scale(0.5) translateY(-100%);
transform: scale(0.5) translateY(-100%);
}
.ih-item.circle.effect3.bottom_to_top .wcp-ih-inner:hover .info {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect4 .img {
opacity: 1;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.ih-item.circle.effect4.colored .info {
background: #1a4a72;
}
.ih-item.circle.effect4 .info {
background: #333333;
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.ih-item.circle.effect4 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect4 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect4 .wcp-ih-inner:hover .img {
opacity: 0;
pointer-events: none;
}
.ih-item.circle.effect4 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
}
.ih-item.circle.effect4.left_to_right .img {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect4.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.ih-item.circle.effect4.left_to_right .wcp-ih-inner:hover .img {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.ih-item.circle.effect4.left_to_right .wcp-ih-inner:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect4.right_to_left .img {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect4.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.ih-item.circle.effect4.right_to_left .wcp-ih-inner:hover .img {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.ih-item.circle.effect4.right_to_left .wcp-ih-inner:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect4.top_to_bottom .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect4.top_to_bottom .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.circle.effect4.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.circle.effect4.top_to_bottom .wcp-ih-inner:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect4.bottom_to_top .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect4.bottom_to_top .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.circle.effect4.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.circle.effect4.bottom_to_top .wcp-ih-inner:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect5 {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px;
}
.ih-item.circle.effect5 .info {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ih-item.circle.effect5 .info .info-back {
visibility: hidden;
border-radius: 50%;
width: 100%;
height: 100%;
background: #333333;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: rotate3d(0, 1, 0, 180deg);
-moz-transform: rotate3d(0, 1, 0, 180deg);
-ms-transform: rotate3d(0, 1, 0, 180deg);
-o-transform: rotate3d(0, 1, 0, 180deg);
transform: rotate3d(0, 1, 0, 180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ih-item.circle.effect5 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect5 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect5 .wcp-ih-inner:hover .info {
-webkit-transform: rotate3d(0, 1, 0, -180deg);
-moz-transform: rotate3d(0, 1, 0, -180deg);
-ms-transform: rotate3d(0, 1, 0, -180deg);
-o-transform: rotate3d(0, 1, 0, -180deg);
transform: rotate3d(0, 1, 0, -180deg);
}
.ih-item.circle.effect5 .wcp-ih-inner:hover .info .info-back {
visibility: visible;
}
.ih-item.circle.effect6 .img {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect6.colored .info {
background: #1a4a72;
}
.ih-item.circle.effect6 .info {
background: #333333;
opacity: 0;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect6 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect6 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect6.scale_up .info {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
.ih-item.circle.effect6.scale_up .wcp-ih-inner:hover .img {
opacity: 0;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
.ih-item.circle.effect6.scale_up .wcp-ih-inner:hover .info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.circle.effect6.scale_down .info {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
.ih-item.circle.effect6.scale_down .wcp-ih-inner:hover .img {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
.ih-item.circle.effect6.scale_down .wcp-ih-inner:hover .info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.circle.effect6.scale_down_up .info {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.35s ease-in-out 0.2s;
-moz-transition: all 0.35s ease-in-out 0.2s;
transition: all 0.35s ease-in-out 0.2s;
}
.ih-item.circle.effect6.scale_down_up .wcp-ih-inner:hover .img {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
.ih-item.circle.effect6.scale_down_up .wcp-ih-inner:hover .info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.circle.effect7 .img {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.35s ease-out;
-moz-transition: all 0.35s ease-out;
transition: all 0.35s ease-out;
}
.ih-item.circle.effect7.colored .info {
background: #1a4a72;
}
.ih-item.circle.effect7 .info {
background: #333333;
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transition: all 0.35s ease 0.2s;
-moz-transition: all 0.35s ease 0.2s;
transition: all 0.35s ease 0.2s;
}
.ih-item.circle.effect7 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect7 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect7 .wcp-ih-inner:hover .img {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
.ih-item.circle.effect7 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
}
.ih-item.circle.effect7.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.ih-item.circle.effect7.left_to_right .wcp-ih-inner:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect7.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.ih-item.circle.effect7.right_to_left .wcp-ih-inner:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect7.top_to_bottom .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.circle.effect7.top_to_bottom .wcp-ih-inner:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect7.bottom_to_top .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.circle.effect7.bottom_to_top .wcp-ih-inner:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect8.colored .info {
background: #1a4a72;
}
.ih-item.circle.effect8 .img-container {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ih-item.circle.effect8 .img-container .img {
opacity: 1;
-webkit-transition: all 0.3s ease-in-out 0.3s;
-moz-transition: all 0.3s ease-in-out 0.3s;
transition: all 0.3s ease-in-out 0.3s;
}
.ih-item.circle.effect8 .info-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
border-radius: 50%;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s ease-in-out 0.3s;
-moz-transition: all 0.3s ease-in-out 0.3s;
transition: all 0.3s ease-in-out 0.3s;
}
.ih-item.circle.effect8 .info {
width: 100%;
height: 100%;
background: #333333;
pointer-events: none;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.35s ease-in-out 0.6s;
-moz-transition: all 0.35s ease-in-out 0.6s;
transition: all 0.35s ease-in-out 0.6s;
}
.ih-item.circle.effect8 .info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 140px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect8 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect8 .wcp-ih-inner:hover .img-container {
pointer-events: none;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
.ih-item.circle.effect8 .wcp-ih-inner:hover .img-container .img {
opacity: 0;
pointer-events: none;
}
.ih-item.circle.effect8 .wcp-ih-inner:hover .info-container {
opacity: 1;
}
.ih-item.circle.effect8 .wcp-ih-inner:hover .info-container .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.circle.effect8.left_to_right .img-container .img {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect8.left_to_right .info-container {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.ih-item.circle.effect8.left_to_right .wcp-ih-inner:hover .img-container .img {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.ih-item.circle.effect8.left_to_right .wcp-ih-inner:hover .info-container {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect8.right_to_left .img-container .img {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect8.right_to_left .info-container {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.ih-item.circle.effect8.right_to_left .wcp-ih-inner:hover .img-container .img {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.ih-item.circle.effect8.right_to_left .wcp-ih-inner:hover .info-container {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect8.top_to_bottom .img-container .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect8.top_to_bottom .info-container {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.circle.effect8.top_to_bottom .wcp-ih-inner:hover .img-container .img {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.circle.effect8.top_to_bottom .wcp-ih-inner:hover .info-container {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect8.bottom_to_top .img-container .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect8.bottom_to_top .info-container {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.circle.effect8.bottom_to_top .wcp-ih-inner:hover .img-container .img {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.circle.effect8.bottom_to_top .wcp-ih-inner:hover .info-container {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect9 .img {
opacity: 1;
-webkit-transition: all 0.35s ease-out;
-moz-transition: all 0.35s ease-out;
transition: all 0.35s ease-out;
}
.ih-item.circle.effect9.colored .info {
background: #1a4a72;
}
.ih-item.circle.effect9 .info {
background: #333333;
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.35s ease 0.2s;
-moz-transition: all 0.35s ease 0.2s;
transition: all 0.35s ease 0.2s;
}
.ih-item.circle.effect9 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect9 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect9 .wcp-ih-inner:hover .img {
opacity: 0;
pointer-events: none;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
.ih-item.circle.effect9 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.circle.effect9.left_to_right .img {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0);
}
.ih-item.circle.effect9.left_to_right .wcp-ih-inner:hover .img {
-webkit-transform: translateX(100%) rotate(180deg);
-moz-transform: translateX(100%) rotate(180deg);
-ms-transform: translateX(100%) rotate(180deg);
-o-transform: translateX(100%) rotate(180deg);
transform: translateX(100%) rotate(180deg);
}
.ih-item.circle.effect9.right_to_left .img {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0);
}
.ih-item.circle.effect9.right_to_left .wcp-ih-inner:hover .img {
-webkit-transform: translateX(-100%) rotate(-180deg);
-moz-transform: translateX(-100%) rotate(-180deg);
-ms-transform: translateX(-100%) rotate(-180deg);
-o-transform: translateX(-100%) rotate(-180deg);
transform: translateX(-100%) rotate(-180deg);
}
.ih-item.circle.effect9.top_to_bottom .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect9.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.circle.effect9.bottom_to_top .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect9.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.circle.effect10 .img {
z-index: 11;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect10.colored .info {
background: #1a4a72;
}
.ih-item.circle.effect10 .info {
background: #333333;
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect10 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect10 .info .bottom-caption {
color: #bbb;
font-style: italic;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect10 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.circle.effect10.top_to_bottom .info h3 {
margin: 0 30px;
padding: 25px 0 0 0;
height: 78px;
}
.ih-item.circle.effect10.top_to_bottom .info .bottom-caption {
margin: 0 30px;
padding: 5px;
}
.ih-item.circle.effect10.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: translateY(50px) scale(0.5);
-moz-transform: translateY(50px) scale(0.5);
-ms-transform: translateY(50px) scale(0.5);
-o-transform: translateY(50px) scale(0.5);
transform: translateY(50px) scale(0.5);
}
.ih-item.circle.effect10.bottom_to_top .info h3 {
margin: 95px 30px 0;
padding: 25px 0 0 0;
height: 78px;
}
.ih-item.circle.effect10.bottom_to_top .info .bottom-caption {
margin: 0 30px;
padding: 5px;
}
.ih-item.circle.effect10.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: translateY(-50px) scale(0.5);
-moz-transform: translateY(-50px) scale(0.5);
-ms-transform: translateY(-50px) scale(0.5);
-o-transform: translateY(-50px) scale(0.5);
transform: translateY(-50px) scale(0.5);
}
.ih-item.circle.effect11 {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px;
}
.ih-item.circle.effect11 .img {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect11.colored .info {
background: #1a4a72;
}
.ih-item.circle.effect11 .info {
background: #333333;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.35s ease 0.35s;
-moz-transition: all 0.35s ease 0.35s;
transition: all 0.35s ease 0.35s;
}
.ih-item.circle.effect11 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect11 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect11 .wcp-ih-inner:hover .img {
opacity: 0;
}
.ih-item.circle.effect11 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
}
.ih-item.circle.effect11.left_to_right .img {
-webkit-transform: translateZ(0) rotateY(0);
-moz-transform: translateZ(0) rotateY(0);
-ms-transform: translateZ(0) rotateY(0);
-o-transform: translateZ(0) rotateY(0);
transform: translateZ(0) rotateY(0);
}
.ih-item.circle.effect11.left_to_right .info {
-webkit-transform: translateZ(-1000px) rotateY(-90deg);
-moz-transform: translateZ(-1000px) rotateY(-90deg);
-ms-transform: translateZ(-1000px) rotateY(-90deg);
-o-transform: translateZ(-1000px) rotateY(-90deg);
transform: translateZ(-1000px) rotateY(-90deg);
}
.ih-item.circle.effect11.left_to_right .wcp-ih-inner:hover .img {
-webkit-transform: translateZ(-1000px) rotateY(90deg);
-moz-transform: translateZ(-1000px) rotateY(90deg);
-ms-transform: translateZ(-1000px) rotateY(90deg);
-o-transform: translateZ(-1000px) rotateY(90deg);
transform: translateZ(-1000px) rotateY(90deg);
}
.ih-item.circle.effect11.left_to_right .wcp-ih-inner:hover .info {
-webkit-transform: translateZ(0) rotateY(0);
-moz-transform: translateZ(0) rotateY(0);
-ms-transform: translateZ(0) rotateY(0);
-o-transform: translateZ(0) rotateY(0);
transform: translateZ(0) rotateY(0);
}
.ih-item.circle.effect11.right_to_left .img {
-webkit-transform: translateZ(0) rotateY(0);
-moz-transform: translateZ(0) rotateY(0);
-ms-transform: translateZ(0) rotateY(0);
-o-transform: translateZ(0) rotateY(0);
transform: translateZ(0) rotateY(0);
}
.ih-item.circle.effect11.right_to_left .info {
-webkit-transform: translateZ(-1000px) rotateY(90deg);
-moz-transform: translateZ(-1000px) rotateY(90deg);
-ms-transform: translateZ(-1000px) rotateY(90deg);
-o-transform: translateZ(-1000px) rotateY(90deg);
transform: translateZ(-1000px) rotateY(90deg);
}
.ih-item.circle.effect11.right_to_left .wcp-ih-inner:hover .img {
-webkit-transform: translateZ(-1000px) rotateY(-90deg);
-moz-transform: translateZ(-1000px) rotateY(-90deg);
-ms-transform: translateZ(-1000px) rotateY(-90deg);
-o-transform: translateZ(-1000px) rotateY(-90deg);
transform: translateZ(-1000px) rotateY(-90deg);
}
.ih-item.circle.effect11.right_to_left .wcp-ih-inner:hover .info {
-webkit-transform: translateZ(0) rotateY(0);
-moz-transform: translateZ(0) rotateY(0);
-ms-transform: translateZ(0) rotateY(0);
-o-transform: translateZ(0) rotateY(0);
transform: translateZ(0) rotateY(0);
}
.ih-item.circle.effect11.top_to_bottom .img {
-webkit-transform: translateZ(0) rotateX(0);
-moz-transform: translateZ(0) rotateX(0);
-ms-transform: translateZ(0) rotateX(0);
-o-transform: translateZ(0) rotateX(0);
transform: translateZ(0) rotateX(0);
}
.ih-item.circle.effect11.top_to_bottom .info {
-webkit-transform: translateZ(-1000px) rotateX(90deg);
-moz-transform: translateZ(-1000px) rotateX(90deg);
-ms-transform: translateZ(-1000px) rotateX(90deg);
-o-transform: translateZ(-1000px) rotateX(90deg);
transform: translateZ(-1000px) rotateX(90deg);
}
.ih-item.circle.effect11.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: translateZ(-1000px) rotateX(-90deg);
-moz-transform: translateZ(-1000px) rotateX(-90deg);
-ms-transform: translateZ(-1000px) rotateX(-90deg);
-o-transform: translateZ(-1000px) rotateX(-90deg);
transform: translateZ(-1000px) rotateX(-90deg);
}
.ih-item.circle.effect11.top_to_bottom .wcp-ih-inner:hover .info {
-webkit-transform: translateZ(0) rotateX(0);
-moz-transform: translateZ(0) rotateX(0);
-ms-transform: translateZ(0) rotateX(0);
-o-transform: translateZ(0) rotateX(0);
transform: translateZ(0) rotateX(0);
}
.ih-item.circle.effect11.bottom_to_top .img {
-webkit-transform: translateZ(0) rotateX(0);
-moz-transform: translateZ(0) rotateX(0);
-ms-transform: translateZ(0) rotateX(0);
-o-transform: translateZ(0) rotateX(0);
transform: translateZ(0) rotateX(0);
}
.ih-item.circle.effect11.bottom_to_top .info {
-webkit-transform: translateZ(-1000px) rotateX(-90deg);
-moz-transform: translateZ(-1000px) rotateX(-90deg);
-ms-transform: translateZ(-1000px) rotateX(-90deg);
-o-transform: translateZ(-1000px) rotateX(-90deg);
transform: translateZ(-1000px) rotateX(-90deg);
}
.ih-item.circle.effect11.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: translateZ(-1000px) rotateX(90deg);
-moz-transform: translateZ(-1000px) rotateX(90deg);
-ms-transform: translateZ(-1000px) rotateX(90deg);
-o-transform: translateZ(-1000px) rotateX(90deg);
transform: translateZ(-1000px) rotateX(90deg);
}
.ih-item.circle.effect11.bottom_to_top .wcp-ih-inner:hover .info {
-webkit-transform: translateZ(0) rotateX(0);
-moz-transform: translateZ(0) rotateX(0);
-ms-transform: translateZ(0) rotateX(0);
-o-transform: translateZ(0) rotateX(0);
transform: translateZ(0) rotateX(0);
}
.ih-item.circle.effect12 .img {
opacity: 1;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect12.colored .info {
background: #1a4a72;
}
.ih-item.circle.effect12 .info {
background: #333333;
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect12 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect12 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect12 .wcp-ih-inner:hover .img {
opacity: 0;
pointer-events: none;
}
.ih-item.circle.effect12 .wcp-ih-inner:hover .info {
opacity: 1;
visibility: visible;
}
.ih-item.circle.effect12.left_to_right .img {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0);
}
.ih-item.circle.effect12.left_to_right .info {
-webkit-transform: translateX(100%) rotate(180deg);
-moz-transform: translateX(100%) rotate(180deg);
-ms-transform: translateX(100%) rotate(180deg);
-o-transform: translateX(100%) rotate(180deg);
transform: translateX(100%) rotate(180deg);
}
.ih-item.circle.effect12.left_to_right .wcp-ih-inner:hover .img {
-webkit-transform: translateX(100%) rotate(180deg);
-moz-transform: translateX(100%) rotate(180deg);
-ms-transform: translateX(100%) rotate(180deg);
-o-transform: translateX(100%) rotate(180deg);
transform: translateX(100%) rotate(180deg);
}
.ih-item.circle.effect12.left_to_right .wcp-ih-inner:hover .info {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.ih-item.circle.effect12.right_to_left .img {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0);
}
.ih-item.circle.effect12.right_to_left .info {
-webkit-transform: translateX(-100%) rotate(-180deg);
-moz-transform: translateX(-100%) rotate(-180deg);
-ms-transform: translateX(-100%) rotate(-180deg);
-o-transform: translateX(-100%) rotate(-180deg);
transform: translateX(-100%) rotate(-180deg);
}
.ih-item.circle.effect12.right_to_left .wcp-ih-inner:hover .img {
-webkit-transform: translateX(-100%) rotate(-180deg);
-moz-transform: translateX(-100%) rotate(-180deg);
-ms-transform: translateX(-100%) rotate(-180deg);
-o-transform: translateX(-100%) rotate(-180deg);
transform: translateX(-100%) rotate(-180deg);
}
.ih-item.circle.effect12.right_to_left .wcp-ih-inner:hover .info {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.ih-item.circle.effect12.top_to_bottom .img {
-webkit-transform: translateY(0) rotate(0);
-moz-transform: translateY(0) rotate(0);
-ms-transform: translateY(0) rotate(0);
-o-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
}
.ih-item.circle.effect12.top_to_bottom .info {
-webkit-transform: translateY(-100%) rotate(-180deg);
-moz-transform: translateY(-100%) rotate(-180deg);
-ms-transform: translateY(-100%) rotate(-180deg);
-o-transform: translateY(-100%) rotate(-180deg);
transform: translateY(-100%) rotate(-180deg);
}
.ih-item.circle.effect12.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: translateY(-100%) rotate(-180deg);
-moz-transform: translateY(-100%) rotate(-180deg);
-ms-transform: translateY(-100%) rotate(-180deg);
-o-transform: translateY(-100%) rotate(-180deg);
transform: translateY(-100%) rotate(-180deg);
}
.ih-item.circle.effect12.top_to_bottom .wcp-ih-inner:hover .info {
-webkit-transform: translateY(0) rotate(0);
-moz-transform: translateY(0) rotate(0);
-ms-transform: translateY(0) rotate(0);
-o-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.ih-item.circle.effect12.bottom_to_top .img {
-webkit-transform: translateY(0) rotate(0);
-moz-transform: translateY(0) rotate(0);
-ms-transform: translateY(0) rotate(0);
-o-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
}
.ih-item.circle.effect12.bottom_to_top .info {
-webkit-transform: translateY(100%) rotate(180deg);
-moz-transform: translateY(100%) rotate(180deg);
-ms-transform: translateY(100%) rotate(180deg);
-o-transform: translateY(100%) rotate(180deg);
transform: translateY(100%) rotate(180deg);
}
.ih-item.circle.effect12.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: translateY(100%) rotate(180deg);
-moz-transform: translateY(100%) rotate(180deg);
-ms-transform: translateY(100%) rotate(180deg);
-o-transform: translateY(100%) rotate(180deg);
transform: translateY(100%) rotate(180deg);
}
.ih-item.circle.effect12.bottom_to_top .wcp-ih-inner:hover .info {
-webkit-transform: translateY(0) rotate(0);
-moz-transform: translateY(0) rotate(0);
-ms-transform: translateY(0) rotate(0);
-o-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.ih-item.circle.effect13.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6);
}
.ih-item.circle.effect13 .info {
background: #333333;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect13 .info h3 {
visibility: hidden;
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect13 .info .bottom-caption {
visibility: hidden;
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect13 .wcp-ih-inner:hover .info {
opacity: 1;
}
.ih-item.circle.effect13 .wcp-ih-inner:hover h3 {
visibility: visible;
}
.ih-item.circle.effect13 .wcp-ih-inner:hover .bottom-caption {
visibility: visible;
}
.ih-item.circle.effect13.from_left_and_right .info h3 {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.ih-item.circle.effect13.from_left_and_right .info .bottom-caption {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.ih-item.circle.effect13.from_left_and_right .wcp-ih-inner:hover h3 {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect13.from_left_and_right .wcp-ih-inner:hover .bottom-caption {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.circle.effect13.top_to_bottom .info h3 {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.circle.effect13.top_to_bottom .info .bottom-caption {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.circle.effect13.top_to_bottom .wcp-ih-inner:hover h3 {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect13.top_to_bottom .wcp-ih-inner:hover .bottom-caption {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect13.bottom_to_top .info h3 {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.circle.effect13.bottom_to_top .info .bottom-caption {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.circle.effect13.bottom_to_top .wcp-ih-inner:hover h3 {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect13.bottom_to_top .wcp-ih-inner:hover .bottom-caption {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.circle.effect14 {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px;
}
.ih-item.circle.effect14 .img {
visibility: visible;
opacity: 1;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.ih-item.circle.effect14.colored .info {
background: #1a4a72;
}
.ih-item.circle.effect14 .info {
background: #333333;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.35s ease-in-out 0.3s;
-moz-transition: all 0.35s ease-in-out 0.3s;
transition: all 0.35s ease-in-out 0.3s;
}
.ih-item.circle.effect14 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect14 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect14 .wcp-ih-inner:hover .img {
opacity: 0;
visibility: hidden;
}
.ih-item.circle.effect14 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
}
.ih-item.circle.effect14.left_to_right .img {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.ih-item.circle.effect14.left_to_right .info {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.ih-item.circle.effect14.left_to_right .wcp-ih-inner:hover .img {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.ih-item.circle.effect14.left_to_right .wcp-ih-inner:hover .info {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
.ih-item.circle.effect14.right_to_left .img {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.ih-item.circle.effect14.right_to_left .info {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.ih-item.circle.effect14.right_to_left .wcp-ih-inner:hover .img {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.ih-item.circle.effect14.right_to_left .wcp-ih-inner:hover .info {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
.ih-item.circle.effect14.top_to_bottom .img {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ih-item.circle.effect14.top_to_bottom .info {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.ih-item.circle.effect14.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.ih-item.circle.effect14.top_to_bottom .wcp-ih-inner:hover .info {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
}
.ih-item.circle.effect14.bottom_to_top .img {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.ih-item.circle.effect14.bottom_to_top .info {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ih-item.circle.effect14.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.ih-item.circle.effect14.bottom_to_top .wcp-ih-inner:hover .info {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
}
.ih-item.circle.effect15 .img {
opacity: 1;
visibility: visible;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
-o-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect15.colored .info {
background: #1a4a72;
}
.ih-item.circle.effect15 .info {
background: #333333;
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.5) rotate(-720deg);
-moz-transform: scale(0.5) rotate(-720deg);
-ms-transform: scale(0.5) rotate(-720deg);
-o-transform: scale(0.5) rotate(-720deg);
transform: scale(0.5) rotate(-720deg);
-webkit-transition: all 0.35s ease-in-out 0.3s;
-moz-transition: all 0.35s ease-in-out 0.3s;
transition: all 0.35s ease-in-out 0.3s;
}
.ih-item.circle.effect15 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect15 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect15 .wcp-ih-inner:hover .img {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.5) rotate(720deg);
-moz-transform: scale(0.5) rotate(720deg);
-ms-transform: scale(0.5) rotate(720deg);
-o-transform: scale(0.5) rotate(720deg);
transform: scale(0.5) rotate(720deg);
}
.ih-item.circle.effect15 .wcp-ih-inner:hover .info {
opacity: 1;
visibility: visible;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
-o-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
.ih-item.circle.effect16 .img {
z-index: 11;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect16.colored .info {
background: #1a4a72;
}
.ih-item.circle.effect16 .info {
background: #333333;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect16 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect16 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect16.left_to_right .img {
-webkit-transform-origin: 95% 40%;
-moz-transform-origin: 95% 40%;
-ms-transform-origin: 95% 40%;
-o-transform-origin: 95% 40%;
transform-origin: 95% 40%;
}
.ih-item.circle.effect16.left_to_right .img:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
top: 40%;
left: 95%;
margin: -4px 0 0 -4px;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
}
.ih-item.circle.effect16.left_to_right .wcp-ih-inner:hover .img {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
transform: rotate(-120deg);
}
.ih-item.circle.effect16.right_to_left .img {
-webkit-transform-origin: 5% 40%;
-moz-transform-origin: 5% 40%;
-ms-transform-origin: 5% 40%;
-o-transform-origin: 5% 40%;
transform-origin: 5% 40%;
}
.ih-item.circle.effect16.right_to_left .img:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
top: 40%;
left: 5%;
margin: -4px 0 0 -4px;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
}
.ih-item.circle.effect16.right_to_left .wcp-ih-inner:hover .img {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}
.ih-item.circle.effect17 .info {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect17 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect17 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
opacity: 0;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect17 .wcp-ih-inner:hover .img:before {
box-shadow: inset 0 0 0 110px #333333, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 0 110px rgba(0, 0, 0, 0.6), inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ih-item.circle.effect17 .wcp-ih-inner:hover .info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.circle.effect17 .wcp-ih-inner:hover .info .bottom-caption {
opacity: 1;
}
.ih-item.circle.effect17.colored .wcp-ih-inner:hover .img:before {
box-shadow: inset 0 0 0 110px #1a4a72, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 0 110px rgba(26, 74, 114, 0.6), inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ih-item.circle.effect18 {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px;
}
.ih-item.circle.effect18 .img {
z-index: 11;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.ih-item.circle.effect18.colored .info .info-back {
background: #1a4a72;
}
.ih-item.circle.effect18 .info {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ih-item.circle.effect18 .info .info-back {
opacity: 1;
border-radius: 50%;
width: 100%;
height: 100%;
background: #333333;
}
.ih-item.circle.effect18 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect18 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect18.bottom_to_top .img {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.ih-item.circle.effect18.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: rotate3d(1, 0, 0, 180deg);
-moz-transform: rotate3d(1, 0, 0, 180deg);
-ms-transform: rotate3d(1, 0, 0, 180deg);
-o-transform: rotate3d(1, 0, 0, 180deg);
transform: rotate3d(1, 0, 0, 180deg);
}
.ih-item.circle.effect18.top_to_bottom .img {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ih-item.circle.effect18.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: rotate3d(1, 0, 0, -180deg);
-moz-transform: rotate3d(1, 0, 0, -180deg);
-ms-transform: rotate3d(1, 0, 0, -180deg);
-o-transform: rotate3d(1, 0, 0, -180deg);
transform: rotate3d(1, 0, 0, -180deg);
}
.ih-item.circle.effect18.left_to_right .img {
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.ih-item.circle.effect18.left_to_right .wcp-ih-inner:hover .img {
-webkit-transform: rotate3d(0, 1, 0, 180deg);
-moz-transform: rotate3d(0, 1, 0, 180deg);
-ms-transform: rotate3d(0, 1, 0, 180deg);
-o-transform: rotate3d(0, 1, 0, 180deg);
transform: rotate3d(0, 1, 0, 180deg);
}
.ih-item.circle.effect18.right_to_left .img {
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.ih-item.circle.effect18.right_to_left .wcp-ih-inner:hover .img {
-webkit-transform: rotate3d(0, 1, 0, -180deg);
-moz-transform: rotate3d(0, 1, 0, -180deg);
-ms-transform: rotate3d(0, 1, 0, -180deg);
-o-transform: rotate3d(0, 1, 0, -180deg);
transform: rotate3d(0, 1, 0, -180deg);
}
.ih-item.circle.effect19.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6);
}
.ih-item.circle.effect19 .info {
background: #333333;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect19 .info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 140px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect19 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect19 .wcp-ih-inner:hover .info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.circle.effect20 {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px;
}
.ih-item.circle.effect20 .img {
-webkit-transition: all 0.35s linear;
-moz-transition: all 0.35s linear;
transition: all 0.35s linear;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.ih-item.circle.effect20.colored .info .info-back {
background: #1a4a72;
}
.ih-item.circle.effect20 .info {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ih-item.circle.effect20 .info .info-back {
opacity: 1;
visibility: hidden;
border-radius: 50%;
width: 100%;
height: 100%;
background: #333333;
-webkit-transition: all 0.35s linear;
-moz-transition: all 0.35s linear;
transition: all 0.35s linear;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ih-item.circle.effect20 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect20 .info .bottom-caption {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ih-item.circle.effect20 .wcp-ih-inner:hover .img {
opacity: 0;
}
.ih-item.circle.effect20 .wcp-ih-inner:hover .info .info-back {
opacity: 1;
visibility: visible;
}
.ih-item.circle.effect20.top_to_bottom .info .info-back {
-webkit-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
-moz-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
-ms-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
-o-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
}
.ih-item.circle.effect20.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
-moz-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
-ms-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
-o-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
}
.ih-item.circle.effect20.top_to_bottom .wcp-ih-inner:hover .info .info-back {
-webkit-transform: rotate3d(1, 0, 0, 0deg);
-moz-transform: rotate3d(1, 0, 0, 0deg);
-ms-transform: rotate3d(1, 0, 0, 0deg);
-o-transform: rotate3d(1, 0, 0, 0deg);
transform: rotate3d(1, 0, 0, 0deg);
}
.ih-item.circle.effect20.bottom_to_top .info .info-back {
-webkit-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
-moz-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
-ms-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
-o-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg);
}
.ih-item.circle.effect20.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
-moz-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
-ms-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
-o-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg);
}
.ih-item.circle.effect20.bottom_to_top .wcp-ih-inner:hover .info .info-back {
-webkit-transform: rotate3d(1, 0, 0, 0deg);
-moz-transform: rotate3d(1, 0, 0, 0deg);
-ms-transform: rotate3d(1, 0, 0, 0deg);
-o-transform: rotate3d(1, 0, 0, 0deg);
transform: rotate3d(1, 0, 0, 0deg);
}
.ih-item.square.effect1 {
overflow: hidden;
}
.ih-item.square.effect1.colored .info {
background: #1a4a72;
}
.ih-item.square.effect1 .img {
z-index: 11;
position: relative;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.square.effect1 .info {
background: #333333;
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect1 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.square.effect1.left_and_right .info h3 {
position: absolute;
top: 12px;
left: 12px;
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
margin: 0;
}
.ih-item.square.effect1.left_and_right .info .bottom-caption {
position: absolute;
right: 12px;
bottom: 12px;
margin: 0;
font-style: italic;
font-size: 12px;
color: #bbb;
}
.ih-item.square.effect1.left_and_right .wcp-ih-inner:hover .img {
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
}
.ih-item.square.effect1.top_to_bottom .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px 10px 0 4px;
margin: 10px 0 0 0;
}
.ih-item.square.effect1.top_to_bottom .info .bottom-caption {
font-style: italic;
font-size: 12px;
color: #bbb;
padding: 5px;
text-align: center;
}
.ih-item.square.effect1.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: translateY(30px) scale(0.6);
-moz-transform: translateY(30px) scale(0.6);
-ms-transform: translateY(30px) scale(0.6);
-o-transform: translateY(30px) scale(0.6);
transform: translateY(30px) scale(0.6);
}
.ih-item.square.effect1.bottom_to_top .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px 10px 0 4px;
margin: 134px 0 0 0;
}
.ih-item.square.effect1.bottom_to_top .info .bottom-caption {
font-style: italic;
font-size: 12px;
color: #bbb;
padding: 5px;
text-align: center;
}
.ih-item.square.effect1.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: translateY(-30px) scale(0.6);
-moz-transform: translateY(-30px) scale(0.6);
-ms-transform: translateY(-30px) scale(0.6);
-o-transform: translateY(-30px) scale(0.6);
transform: translateY(-30px) scale(0.6);
}
.ih-item.square.effect2 {
overflow: hidden;
}
.ih-item.square.effect2.colored .info {
background: #1a4a72;
}
.ih-item.square.effect2.colored .info h3 {
background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect2 .img {
opacity: 1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
.ih-item.square.effect2 .info {
background: #333333;
visibility: hidden;
-webkit-transition: all 0.35s 0.3s ease-in-out;
-moz-transition: all 0.35s 0.3s ease-in-out;
transition: all 0.35s 0.3s ease-in-out;
}
.ih-item.square.effect2 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111111;
margin: 30px 0 0 0;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-ms-transform: translateY(-200px);
-o-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.35s 0.6s ease-in-out;
-moz-transition: all 0.35s 0.6s ease-in-out;
transition: all 0.35s 0.6s ease-in-out;
}
.ih-item.square.effect2 .info .bottom-caption {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 20px 20px 20px;
text-align: center;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-ms-transform: translateY(-200px);
-o-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.35s 0.5s linear;
-moz-transition: all 0.35s 0.5s linear;
transition: all 0.35s 0.5s linear;
}
.ih-item.square.effect2 .wcp-ih-inner:hover .img {
-webkit-transform: rotate(720deg) scale(0);
-moz-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
opacity: 0;
}
.ih-item.square.effect2 .wcp-ih-inner:hover .info {
visibility: visible;
}
.ih-item.square.effect2 .wcp-ih-inner:hover .info h3,
.ih-item.square.effect2 .wcp-ih-inner:hover .info .bottom-caption {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect3 {
overflow: hidden;
}
.ih-item.square.effect3.colored .info {
background: #1a4a72;
}
.ih-item.square.effect3 .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect3 .info {
height: 65px;
background: #333333;
opacity: 0;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect3 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px 10px 0 4px;
margin: 4px 0 0 0;
}
.ih-item.square.effect3 .info .bottom-caption {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 5px;
text-align: center;
}
.ih-item.square.effect3 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
}
.ih-item.square.effect3.bottom_to_top .info {
top: auto;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.square.effect3.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-o-transform: translateY(-50px);
transform: translateY(-50px);
}
.ih-item.square.effect3.bottom_to_top .wcp-ih-inner:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect3.top_to_bottom .info {
bottom: auto;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.square.effect3.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px);
}
.ih-item.square.effect3.top_to_bottom .wcp-ih-inner:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect4 {
overflow: hidden;
position: relative;
}
.ih-item.square.effect4.colored .info {
background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect4.colored .mask1,
.ih-item.square.effect4.colored .mask2 {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6);
}
.ih-item.square.effect4 .img {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect4 .mask1,
.ih-item.square.effect4 .mask2 {
position: absolute;
background: #333333;
background: rgba(0, 0, 0, 0.6);
height: 361px;
width: 361px;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect4 .mask1 {
left: auto;
right: 0;
top: 0;
-webkit-transform: rotate(56.5deg) translateX(-180px);
-moz-transform: rotate(56.5deg) translateX(-180px);
-ms-transform: rotate(56.5deg) translateX(-180px);
-o-transform: rotate(56.5deg) translateX(-180px);
transform: rotate(56.5deg) translateX(-180px);
-webkit-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
-o-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.ih-item.square.effect4 .mask2 {
top: auto;
bottom: 0;
left: 0;
-webkit-transform: rotate(56.5deg) translateX(180px);
-moz-transform: rotate(56.5deg) translateX(180px);
-ms-transform: rotate(56.5deg) translateX(180px);
-o-transform: rotate(56.5deg) translateX(180px);
transform: rotate(56.5deg) translateX(180px);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.ih-item.square.effect4 .info {
background: #111111;
height: 0;
visibility: hidden;
width: 361px;
-webkit-transform: rotate(-33.5deg) translate(-112px, 166px);
-moz-transform: rotate(-33.5deg) translate(-112px, 166px);
-ms-transform: rotate(-33.5deg) translate(-112px, 166px);
-o-transform: rotate(-33.5deg) translate(-112px, 166px);
transform: rotate(-33.5deg) translate(-112px, 166px);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transition: all 0.35s ease-in-out 0.35s;
-moz-transition: all 0.35s ease-in-out 0.35s;
transition: all 0.35s ease-in-out 0.35s;
}
.ih-item.square.effect4 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: transparent;
margin-top: 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
opacity: 0;
-webkit-transition: all 0.35s ease-in-out 0.35s;
-moz-transition: all 0.35s ease-in-out 0.35s;
transition: all 0.35s ease-in-out 0.35s;
}
.ih-item.square.effect4 .info .bottom-caption {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 20px 20px 20px;
text-align: center;
opacity: 0;
-webkit-transition: all 0.35s ease-in-out 0.35s;
-moz-transition: all 0.35s ease-in-out 0.35s;
transition: all 0.35s ease-in-out 0.35s;
}
.ih-item.square.effect4 .wcp-ih-inner:hover .mask1 {
-webkit-transform: rotate(56.5deg) translateX(1px);
-moz-transform: rotate(56.5deg) translateX(1px);
-ms-transform: rotate(56.5deg) translateX(1px);
-o-transform: rotate(56.5deg) translateX(1px);
transform: rotate(56.5deg) translateX(1px);
}
.ih-item.square.effect4 .wcp-ih-inner:hover .mask2 {
-webkit-transform: rotate(56.5deg) translateX(-1px);
-moz-transform: rotate(56.5deg) translateX(-1px);
-ms-transform: rotate(56.5deg) translateX(-1px);
-o-transform: rotate(56.5deg) translateX(-1px);
transform: rotate(56.5deg) translateX(-1px);
}
.ih-item.square.effect4 .wcp-ih-inner:hover .info {
width: 300px;
height: 120px;
visibility: visible;
top: 40px;
-webkit-transform: rotate(0deg) translate(0, 0);
-moz-transform: rotate(0deg) translate(0, 0);
-ms-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
.ih-item.square.effect4 .wcp-ih-inner:hover .info h3,
.ih-item.square.effect4 .wcp-ih-inner:hover .info .bottom-caption {
opacity: 1;
}
.ih-item.square.effect5.colored .info {
background: #1a4a72;
}
.ih-item.square.effect5.colored .info h3 {
background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect5 .img {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.square.effect5 .info {
background: #333333;
opacity: 0;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect5 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111111;
margin: 30px 0 0 0;
}
.ih-item.square.effect5 .info .bottom-caption {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 20px 20px 20px;
text-align: center;
}
.ih-item.square.effect5 .wcp-ih-inner:hover .img {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
transition-delay: 0;
}
.ih-item.square.effect5 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.ih-item.square.effect5.left_to_right .info {
-webkit-transform: scale(0) rotate(-180deg);
-moz-transform: scale(0) rotate(-180deg);
-ms-transform: scale(0) rotate(-180deg);
-o-transform: scale(0) rotate(-180deg);
transform: scale(0) rotate(-180deg);
}
.ih-item.square.effect5.right_to_left .info {
-webkit-transform: scale(0) rotate(180deg);
-moz-transform: scale(0) rotate(180deg);
-ms-transform: scale(0) rotate(180deg);
-o-transform: scale(0) rotate(180deg);
transform: scale(0) rotate(180deg);
}
.ih-item.square.effect6 {
overflow: hidden;
}
.ih-item.square.effect6.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6);
}
.ih-item.square.effect6.colored .info h3 {
background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect6 .img {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.square.effect6 .info {
background: #333333;
background: rgba(0, 0, 0, 0.6);
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect6 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111111;
margin: 30px 0 0 0;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect6 .info .bottom-caption {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 20px 20px 20px;
text-align: center;
-webkit-transition: all 0.35s 0.1s linear;
-moz-transition: all 0.35s 0.1s linear;
transition: all 0.35s 0.1s linear;
}
.ih-item.square.effect6 .wcp-ih-inner:hover .img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.ih-item.square.effect6 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
}
.ih-item.square.effect6.from_top_and_bottom .info h3 {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.square.effect6.from_top_and_bottom .info .bottom-caption {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.square.effect6.from_top_and_bottom .wcp-ih-inner:hover .info h3,
.ih-item.square.effect6.from_top_and_bottom .wcp-ih-inner:hover .info .bottom-caption {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect6.from_left_and_right .info h3 {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.ih-item.square.effect6.from_left_and_right .info .bottom-caption {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.ih-item.square.effect6.from_left_and_right .wcp-ih-inner:hover .info h3,
.ih-item.square.effect6.from_left_and_right .wcp-ih-inner:hover .info .bottom-caption {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.square.effect6.top_to_bottom .info h3 {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.square.effect6.top_to_bottom .info .bottom-caption {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.square.effect6.top_to_bottom .wcp-ih-inner:hover .info h3,
.ih-item.square.effect6.top_to_bottom .wcp-ih-inner:hover .info .bottom-caption {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect6.bottom_to_top .info h3 {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.square.effect6.bottom_to_top .info .bottom-caption {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.square.effect6.bottom_to_top .wcp-ih-inner:hover .info h3,
.ih-item.square.effect6.bottom_to_top .wcp-ih-inner:hover .info .bottom-caption {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect7 {
overflow: hidden;
}
.ih-item.square.effect7.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6);
}
.ih-item.square.effect7.colored .info h3 {
background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect7 .img {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.square.effect7 .info {
background: #333333;
background: rgba(0, 0, 0, 0.6);
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect7 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111111;
margin: 30px 0 0 0;
-webkit-transform: scale(4);
-moz-transform: scale(4);
-ms-transform: scale(4);
-o-transform: scale(4);
transform: scale(4);
-webkit-transition: all 0.35s 0.1s ease-in-out;
-moz-transition: all 0.35s 0.1s ease-in-out;
transition: all 0.35s 0.1s ease-in-out;
}
.ih-item.square.effect7 .info .bottom-caption {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 20px 20px 20px;
text-align: center;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: scale(5);
transform: scale(5);
-webkit-transition: all 0.35s 0.3s linear;
-moz-transition: all 0.35s 0.3s linear;
transition: all 0.35s 0.3s linear;
}
.ih-item.square.effect7 .wcp-ih-inner:hover .img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.ih-item.square.effect7 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
}
.ih-item.square.effect7 .wcp-ih-inner:hover .info h3,
.ih-item.square.effect7 .wcp-ih-inner:hover .info .bottom-caption {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.square.effect8 {
overflow: hidden;
}
.ih-item.square.effect8.colored .info {
background: #1a4a72;
}
.ih-item.square.effect8.colored .info h3 {
background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect8 .img {
opacity: 1;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect8 .info {
background: #333333;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect8 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111111;
margin: 30px 0 0 0;
-webkit-transition: all 0.35s 0.1s ease-in-out;
-moz-transition: all 0.35s 0.1s ease-in-out;
transition: all 0.35s 0.1s ease-in-out;
}
.ih-item.square.effect8 .info .bottom-caption {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 20px 20px 20px;
text-align: center;
-webkit-transition: all 0.35s 0.15s linear;
-moz-transition: all 0.35s 0.15s linear;
transition: all 0.35s 0.15s linear;
}
.ih-item.square.effect8 .wcp-ih-inner:hover .img {
opacity: 0;
}
.ih-item.square.effect8 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
}
.ih-item.square.effect8.scale_up .img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.square.effect8.scale_up .info {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.ih-item.square.effect8.scale_up .info h3,
.ih-item.square.effect8.scale_up .info .bottom-caption {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.ih-item.square.effect8.scale_up .wcp-ih-inner:hover .img {
-webkit-transform: scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: scale(5);
transform: scale(5);
}
.ih-item.square.effect8.scale_up .wcp-ih-inner:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.square.effect8.scale_up .wcp-ih-inner:hover .info h3,
.ih-item.square.effect8.scale_up .wcp-ih-inner:hover .info .bottom-caption {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.square.effect8.scale_down .img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.square.effect8.scale_down .info {
-webkit-transform: scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: scale(5);
transform: scale(5);
}
.ih-item.square.effect8.scale_down .info h3,
.ih-item.square.effect8.scale_down .info .bottom-caption {
-webkit-transform: scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: scale(5);
transform: scale(5);
}
.ih-item.square.effect8.scale_down .wcp-ih-inner:hover .img {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
.ih-item.square.effect8.scale_down .wcp-ih-inner:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.square.effect8.scale_down .wcp-ih-inner:hover .info h3,
.ih-item.square.effect8.scale_down .wcp-ih-inner:hover .info .bottom-caption {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.square.effect9 {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px;
}
.ih-item.square.effect9.colored .info .info-back {
background: #1a4a72;
}
.ih-item.square.effect9.colored .info h3 {
background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect9 .img {
position: relative;
z-index: 11;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.ih-item.square.effect9 .info {
z-index: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ih-item.square.effect9 .info .info-back {
opacity: 1;
width: 100%;
height: 100%;
padding-top: 30px;
background: #333333;
}
.ih-item.square.effect9 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111111;
margin: 0;
}
.ih-item.square.effect9 .info .bottom-caption {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 20px 20px 20px;
text-align: center;
}
.ih-item.square.effect9.left_to_right .img {
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.ih-item.square.effect9.left_to_right .wcp-ih-inner:hover .img {
-webkit-transform: rotate3d(0, 1, 0, 180deg);
-moz-transform: rotate3d(0, 1, 0, 180deg);
-ms-transform: rotate3d(0, 1, 0, 180deg);
-o-transform: rotate3d(0, 1, 0, 180deg);
transform: rotate3d(0, 1, 0, 180deg);
}
.ih-item.square.effect9.right_to_left .img {
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.ih-item.square.effect9.right_to_left .wcp-ih-inner:hover .img {
-webkit-transform: rotate3d(0, 1, 0, -180deg);
-moz-transform: rotate3d(0, 1, 0, -180deg);
-ms-transform: rotate3d(0, 1, 0, -180deg);
-o-transform: rotate3d(0, 1, 0, -180deg);
transform: rotate3d(0, 1, 0, -180deg);
}
.ih-item.square.effect9.top_to_bottom .img {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ih-item.square.effect9.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: rotate3d(1, 0, 0, -180deg);
-moz-transform: rotate3d(1, 0, 0, -180deg);
-ms-transform: rotate3d(1, 0, 0, -180deg);
-o-transform: rotate3d(1, 0, 0, -180deg);
transform: rotate3d(1, 0, 0, -180deg);
}
.ih-item.square.effect9.bottom_to_top .img {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.ih-item.square.effect9.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: rotate3d(1, 0, 0, 180deg);
-moz-transform: rotate3d(1, 0, 0, 180deg);
-ms-transform: rotate3d(1, 0, 0, 180deg);
-o-transform: rotate3d(1, 0, 0, 180deg);
transform: rotate3d(1, 0, 0, 180deg);
}
.ih-item.square.effect10 {
overflow: hidden;
}
.ih-item.square.effect10.colored .info {
background: #1a4a72;
}
.ih-item.square.effect10.colored .info h3 {
background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect10 .img {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect10 .info {
background: #333333;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect10 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111111;
margin: 30px 0 0 0;
}
.ih-item.square.effect10 .info .bottom-caption {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 20px 20px 20px;
text-align: center;
}
.ih-item.square.effect10 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
}
.ih-item.square.effect10.left_to_right .img {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.square.effect10.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.ih-item.square.effect10.left_to_right .wcp-ih-inner:hover .img {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.ih-item.square.effect10.left_to_right .wcp-ih-inner:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.square.effect10.right_to_left .img {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.square.effect10.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.ih-item.square.effect10.right_to_left .wcp-ih-inner:hover .img {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.ih-item.square.effect10.right_to_left .wcp-ih-inner:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.square.effect10.top_to_bottom .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect10.top_to_bottom .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.square.effect10.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.square.effect10.top_to_bottom .wcp-ih-inner:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect10.bottom_to_top .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect10.bottom_to_top .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.square.effect10.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.square.effect10.bottom_to_top .wcp-ih-inner:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect11 {
overflow: hidden;
}
.ih-item.square.effect11.colored .info {
background: #1a4a72;
}
.ih-item.square.effect11.colored .info h3 {
background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect11 .img {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect11 .info {
background: #333333;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.35s ease 0.2s;
-moz-transition: all 0.35s ease 0.2s;
transition: all 0.35s ease 0.2s;
}
.ih-item.square.effect11 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111111;
margin: 30px 0 0 0;
}
.ih-item.square.effect11 .info .bottom-caption {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 20px 20px 20px;
text-align: center;
}
.ih-item.square.effect11 .wcp-ih-inner:hover .img {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
.ih-item.square.effect11 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
}
.ih-item.square.effect11.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.ih-item.square.effect11.left_to_right .wcp-ih-inner:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.square.effect11.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.ih-item.square.effect11.right_to_left .wcp-ih-inner:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.square.effect11.top_to_bottom .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.square.effect11.top_to_bottom .wcp-ih-inner:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect11.bottom_to_top .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.square.effect11.bottom_to_top .wcp-ih-inner:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect12 {
overflow: hidden;
}
.ih-item.square.effect12.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6);
}
.ih-item.square.effect12.colored .info h3 {
background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect12 .img {
-webkit-transition: all 0.35s ease-in;
-moz-transition: all 0.35s ease-in;
transition: all 0.35s ease-in;
}
.ih-item.square.effect12 .info {
background: #333333;
background: rgba(0, 0, 0, 0.6);
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.35s ease-in;
-moz-transition: all 0.35s ease-in;
transition: all 0.35s ease-in;
}
.ih-item.square.effect12 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111111;
margin: 30px 0 0 0;
-webkit-transition: all 0.35s ease-in;
-moz-transition: all 0.35s ease-in;
transition: all 0.35s ease-in;
}
.ih-item.square.effect12 .info .bottom-caption {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 20px 20px 20px;
text-align: center;
-webkit-transition: all 0.35s ease-in;
-moz-transition: all 0.35s ease-in;
transition: all 0.35s ease-in;
}
.ih-item.square.effect12 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.ih-item.square.effect12 .wcp-ih-inner:hover .info h3 {
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.ih-item.square.effect12 .wcp-ih-inner:hover .info .bottom-caption {
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.ih-item.square.effect12.left_to_right .info {
-webkit-transform: translate(-460px, -100px) rotate(-180deg);
-moz-transform: translate(-460px, -100px) rotate(-180deg);
-ms-transform: translate(-460px, -100px) rotate(-180deg);
-o-transform: translate(-460px, -100px) rotate(-180deg);
transform: translate(-460px, -100px) rotate(-180deg);
}
.ih-item.square.effect12.left_to_right .info h3 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-ms-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform: translateY(-100px);
}
.ih-item.square.effect12.left_to_right .info .bottom-caption {
-webkit-transform: translateX(-300px) rotate(-90deg);
-moz-transform: translateX(-300px) rotate(-90deg);
-ms-transform: translateX(-300px) rotate(-90deg);
-o-transform: translateX(-300px) rotate(-90deg);
transform: translateX(-300px) rotate(-90deg);
}
.ih-item.square.effect12.left_to_right .wcp-ih-inner:hover .info {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
.ih-item.square.effect12.left_to_right .wcp-ih-inner:hover .info h3 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.ih-item.square.effect12.left_to_right .wcp-ih-inner:hover .info .bottom-caption {
-webkit-transform: translateX(0px) rotate(0deg);
-moz-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
-o-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
.ih-item.square.effect12.right_to_left .info {
-webkit-transform: translate(460px, -100px) rotate(180deg);
-moz-transform: translate(460px, -100px) rotate(180deg);
-ms-transform: translate(460px, -100px) rotate(180deg);
-o-transform: translate(460px, -100px) rotate(180deg);
transform: translate(460px, -100px) rotate(180deg);
}
.ih-item.square.effect12.right_to_left .info h3 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-ms-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform: translateY(-100px);
}
.ih-item.square.effect12.right_to_left .info .bottom-caption {
-webkit-transform: translateX(300px) rotate(90deg);
-moz-transform: translateX(300px) rotate(90deg);
-ms-transform: translateX(300px) rotate(90deg);
-o-transform: translateX(300px) rotate(90deg);
transform: translateX(300px) rotate(90deg);
}
.ih-item.square.effect12.right_to_left .wcp-ih-inner:hover .info {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
.ih-item.square.effect12.right_to_left .wcp-ih-inner:hover .info h3 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.ih-item.square.effect12.right_to_left .wcp-ih-inner:hover .info .bottom-caption {
-webkit-transform: translateX(0px) rotate(0deg);
-moz-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
-o-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
.ih-item.square.effect12.top_to_bottom .info {
-webkit-transform: translate(-265px, -145px) rotate(-45deg);
-moz-transform: translate(-265px, -145px) rotate(-45deg);
-ms-transform: translate(-265px, -145px) rotate(-45deg);
-o-transform: translate(-265px, -145px) rotate(-45deg);
transform: translate(-265px, -145px) rotate(-45deg);
}
.ih-item.square.effect12.top_to_bottom .info h3 {
-webkit-transform: translate(200px, -200px);
-moz-transform: translate(200px, -200px);
-ms-transform: translate(200px, -200px);
-o-transform: translate(200px, -200px);
transform: translate(200px, -200px);
}
.ih-item.square.effect12.top_to_bottom .info .bottom-caption {
-webkit-transform: translate(200px, -200px);
-moz-transform: translate(200px, -200px);
-ms-transform: translate(200px, -200px);
-o-transform: translate(200px, -200px);
transform: translate(200px, -200px);
}
.ih-item.square.effect12.top_to_bottom .wcp-ih-inner:hover .info {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.ih-item.square.effect12.top_to_bottom .wcp-ih-inner:hover .info h3 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.ih-item.square.effect12.top_to_bottom .wcp-ih-inner:hover .info .bottom-caption {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.ih-item.square.effect12.bottom_to_top .info {
-webkit-transform: translate(265px, 145px) rotate(45deg);
-moz-transform: translate(265px, 145px) rotate(45deg);
-ms-transform: translate(265px, 145px) rotate(45deg);
-o-transform: translate(265px, 145px) rotate(45deg);
transform: translate(265px, 145px) rotate(45deg);
}
.ih-item.square.effect12.bottom_to_top .info h3 {
-webkit-transform: translate(200px, -200px);
-moz-transform: translate(200px, -200px);
-ms-transform: translate(200px, -200px);
-o-transform: translate(200px, -200px);
transform: translate(200px, -200px);
}
.ih-item.square.effect12.bottom_to_top .info .bottom-caption {
-webkit-transform: translate(-200px, 200px);
-moz-transform: translate(-200px, 200px);
-ms-transform: translate(-200px, 200px);
-o-transform: translate(-200px, 200px);
transform: translate(-200px, 200px);
}
.ih-item.square.effect12.bottom_to_top .wcp-ih-inner:hover .info {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.ih-item.square.effect12.bottom_to_top .wcp-ih-inner:hover .info h3 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.ih-item.square.effect12.bottom_to_top .wcp-ih-inner:hover .info .bottom-caption {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.ih-item.square.effect13 {
overflow: hidden;
}
.ih-item.square.effect13.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6);
}
.ih-item.square.effect13.colored .info h3 {
background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect13 .img {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.square.effect13 .info {
background: #333333;
background: rgba(0, 0, 0, 0.6);
visibility: hidden;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect13 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111111;
margin: 30px 0 0 0;
}
.ih-item.square.effect13 .info .bottom-caption {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 20px 20px 20px;
text-align: center;
}
.ih-item.square.effect13 .wcp-ih-inner:hover .img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.ih-item.square.effect13 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
}
.ih-item.square.effect13.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.ih-item.square.effect13.left_to_right .wcp-ih-inner:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.square.effect13.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.ih-item.square.effect13.right_to_left .wcp-ih-inner:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ih-item.square.effect13.top_to_bottom .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.square.effect13.top_to_bottom .wcp-ih-inner:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect13.bottom_to_top .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.square.effect13.bottom_to_top .wcp-ih-inner:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect14.colored .info {
background: #1a4a72;
}
.ih-item.square.effect14.colored .info h3 {
background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect14 .img {
opacity: 1;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect14 .info {
background: #333333;
visibility: hidden;
opacity: 0;
pointer-events: none;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.35s ease 0.2s;
-moz-transition: all 0.35s ease 0.2s;
transition: all 0.35s ease 0.2s;
}
.ih-item.square.effect14 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111111;
margin: 30px 0 0 0;
}
.ih-item.square.effect14 .info .bottom-caption {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 20px 20px 20px;
text-align: center;
}
.ih-item.square.effect14 .wcp-ih-inner:hover .img {
opacity: 0;
pointer-events: none;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
.ih-item.square.effect14 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.ih-item.square.effect14.left_to_right .img {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0);
}
.ih-item.square.effect14.left_to_right .wcp-ih-inner:hover .img {
-webkit-transform: translateX(100%) rotate(180deg);
-moz-transform: translateX(100%) rotate(180deg);
-ms-transform: translateX(100%) rotate(180deg);
-o-transform: translateX(100%) rotate(180deg);
transform: translateX(100%) rotate(180deg);
}
.ih-item.square.effect14.right_to_left .img {
-webkit-transform: translateX(0) rotate(0);
-moz-transform: translateX(0) rotate(0);
-ms-transform: translateX(0) rotate(0);
-o-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0);
}
.ih-item.square.effect14.right_to_left .wcp-ih-inner:hover .img {
-webkit-transform: translateX(-100%) rotate(-180deg);
-moz-transform: translateX(-100%) rotate(-180deg);
-ms-transform: translateX(-100%) rotate(-180deg);
-o-transform: translateX(-100%) rotate(-180deg);
transform: translateX(-100%) rotate(-180deg);
}
.ih-item.square.effect14.top_to_bottom .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect14.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.square.effect14.bottom_to_top .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.ih-item.square.effect14.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.square.effect15 {
overflow: hidden;
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px;
}
.ih-item.square.effect15.colored .info {
background: #1a4a72;
}
.ih-item.square.effect15 .img {
opacity: 1;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.ih-item.square.effect15 .info {
background: #333333;
opacity: 0;
-webkit-transition: all 0.35s ease-in-out 0.3s;
-moz-transition: all 0.35s ease-in-out 0.3s;
transition: all 0.35s ease-in-out 0.3s;
}
.ih-item.square.effect15 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111111;
margin: 30px 0 0 0;
}
.ih-item.square.effect15 .info .bottom-caption {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 20px 20px 20px;
text-align: center;
}
.ih-item.square.effect15 .wcp-ih-inner:hover .img {
opacity: 0;
visibility: hidden;
}
.ih-item.square.effect15 .wcp-ih-inner:hover .info {
visibility: visible;
opacity: 1;
}
.ih-item.square.effect15.left_to_right .img {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.ih-item.square.effect15.left_to_right .info {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.ih-item.square.effect15.left_to_right .wcp-ih-inner:hover .img {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.ih-item.square.effect15.left_to_right .wcp-ih-inner:hover .info {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
.ih-item.square.effect15.right_to_left .img {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.ih-item.square.effect15.right_to_left .info {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.ih-item.square.effect15.right_to_left .wcp-ih-inner:hover .img {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.ih-item.square.effect15.right_to_left .wcp-ih-inner:hover .info {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
.ih-item.square.effect15.top_to_bottom .img {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ih-item.square.effect15.top_to_bottom .info {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.ih-item.square.effect15.top_to_bottom .wcp-ih-inner:hover .img {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.ih-item.square.effect15.top_to_bottom .wcp-ih-inner:hover .info {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
}
.ih-item.square.effect15.bottom_to_top .img {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.ih-item.square.effect15.bottom_to_top .info {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ih-item.square.effect15.bottom_to_top .wcp-ih-inner:hover .img {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.ih-item.square.effect15.bottom_to_top .wcp-ih-inner:hover .info {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
}.bx-wrapper {
position: relative;
margin: 0 auto 60px;
padding: 0;
*zoom: 1;
}
.bx-wrapper img,
.bx-wrapper li.slide img {
width: 100%;
max-width: 100%;
display: block;
}
.bx-wrapper .gmp_map_opts img {
max-width: none;
} .bx-wrapper .bx-viewport {       -webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
}
.bx-wrapper .bx-viewport ul {
padding: 0!important;
}
.bx-wrapper .bx-viewport li {
left: 0;
top: 0;
margin: 0;
padding: 0 !important;
}
.bx-wrapper .bx-viewport img {
border-radius: 0 !important;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
padding: 0;
width: 100%;
} .bx-wrapper .bx-loading {
min-height: 50px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/bx_loader.gif) center center no-repeat #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
} .bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-weight: bold;
color: #666;
padding-top: 10px;
}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
margin-top: 5px;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-controls-auto-item a {
box-shadow: none;
outline: none;
text-decoration: none;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
box-shadow: none;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
} .bx-wrapper .bx-prev {
left: 10px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/controls.png) no-repeat 0 -32px ;
}
.bx-wrapper .bx-next {
right: 10px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/controls.png) no-repeat -43px -32px ;
}
.bx-wrapper .bx-prev#little_arrows {
width: 23px!important;
height: 51px!important;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/black.png);
margin-top: -25px;
}
.bx-wrapper .bx-next#little_arrows {
width: 23px!important;
height: 51px!important;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/black.png) -47px 0px;
margin-top: -25px;
}
.bx-wrapper .bx-prev#standart_big {
width: 32px;
height: 32px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/arrows/thick10.png);
}
.bx-wrapper .bx-next#standart_big {
width: 32px;
height: 32px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/arrows/arrow454.png);
}
.bx-wrapper .bx-prev#standart_small {
width: 32px;
height: 32px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/arrows/arrow506.png);
}
.bx-wrapper .bx-next#standart_small {
width: 32px;
height: 32px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/arrows/arrow484.png);
}
.bx-wrapper .bx-prev#circle_little {
width: 32px;
height: 32px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/arrows/back28.png);
}
.bx-wrapper .bx-next#circle_little {
width: 32px;
height: 32px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/arrows/right127.png);
}
.bx-wrapper .bx-prev#square_big {
width: 32px;
height: 32px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/arrows/back61.png);
}
.bx-wrapper .bx-next#square_big {
width: 32px;
height: 32px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/arrows/right224.png);
}
.bx-wrapper .bx-prev#fast {
width: 32px;
height: 32px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/arrows/rewind44.png);
}
.bx-wrapper .bx-next#fast {
width: 32px;
height: 32px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/arrows/fast44.png);
}
.bx-wrapper .bx-prev#little {
width: 32px;
height: 32px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/arrows/left.png);
}
.bx-wrapper .bx-next#little {
width: 32px;
height: 32px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/arrows/forward18.png);
}
.bx-wrapper .bx-prev#go_small {
width: 32px;
height: 32px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/arrows/go10.png);
}
.bx-wrapper .bx-next#go_small {
width: 32px;
height: 32px;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/arrows/right244.png);
}
.bx-wrapper .bx-controls-direction{
opacity: 0.0;
-webkit-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-ms-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
.bx-wrapper:hover .bx-controls-direction{
opacity: 1.0;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-ms-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
.bx-next:hover{
transform: translateX(4px);
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.bx-prev:hover {
transform: translateX(-4px);
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.bx-next, .bx-prev{
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px !important;
height: 32px !important;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
z-index: 9999;
border:none;
box-shadow: none !important;
}
.bx-wrapper .thumbnails .bx-controls-direction:not(.vertical) a {
top: 40% !important;
}
.bx-wrapper .thumbnails .bx-controls-vertical:not(.vertical) a {
top: 50% !important;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
} .bx-wrapper .bx-controls-auto {
text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/controls.png) -86px -11px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url(//mdprojects.com.ec/wp-content/plugins/slider-by-supsystic/src/SupsysticSlider/Bx/assets/images/controls.png) -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
} .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
} .bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: block;
background: #666\9;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-family: Arial;
font-size: 14px;
padding: 10px;
}
.bx-wrapper .bx-caption.top {
top: 0;
bottom: inherit;
}
ul.bx-pager {
margin: 0 !important;
}
.thumbnails .bx-custom-pager {
display: block;
margin: 0 !important;
bottom: -90px !important;
position: inherit !important;
}
.thumbnails.bx-has-pager {
width: 100%;
overflow: hidden;
}
.thumbnails .bx-custom-pager li {
float: left;
padding: 0 !important;
margin-right: 1px !important;
margin-left: 0 !important;
}
.thumbs li {
cursor: pointer;
}
.bx-caption-preview {
display: block;
font-family: Arial;
padding: 10px 0;
bottom: 0;
left: 0;
position: absolute;
margin-bottom: 4px;
}
.bx-caption-preview span {
margin-left: 10px;
}
.selectedPreset, .unselectedPreset {
cursor: pointer;
}
.selectedPreset {
border-bottom: 1px solid aqua !important;
}
.unselectedPreset {
border-bottom: 1px solid gray;
}
.bx-wrapper:hover .bx-controls-preview {
opacity: 1.0;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-ms-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
.bx-wrapper .bx-controls-preview a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px !important;
height: 32px !important;
text-indent: -9999px;
z-index: 9999;
}
 .animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
@-webkit-keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
} @-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulse {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes rubberBand {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-webkit-transform: scaleX(1.25) scaleY(0.75);
transform: scaleX(1.25) scaleY(0.75);
}
40% {
-webkit-transform: scaleX(0.75) scaleY(1.25);
transform: scaleX(0.75) scaleY(1.25);
}
60% {
-webkit-transform: scaleX(1.15) scaleY(0.85);
transform: scaleX(1.15) scaleY(0.85);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes rubberBand {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
30% {
-webkit-transform: scaleX(1.25) scaleY(0.75);
-ms-transform: scaleX(1.25) scaleY(0.75);
transform: scaleX(1.25) scaleY(0.75);
}
40% {
-webkit-transform: scaleX(0.75) scaleY(1.25);
-ms-transform: scaleX(0.75) scaleY(1.25);
transform: scaleX(0.75) scaleY(1.25);
}
60% {
-webkit-transform: scaleX(1.15) scaleY(0.85);
-ms-transform: scaleX(1.15) scaleY(0.85);
transform: scaleX(1.15) scaleY(0.85);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
}
@keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
60% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
60% {
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.swing {
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
10%, 20% {
-webkit-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-webkit-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
@keyframes tada {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
10%, 20% {
-webkit-transform: scale(0.9) rotate(-3deg);
-ms-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale(1.1) rotate(3deg);
-ms-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-webkit-transform: scale(1.1) rotate(-3deg);
-ms-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
} @-webkit-keyframes wobble {
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
15% {
-webkit-transform: translateX(-25%) rotate(-5deg);
transform: translateX(-25%) rotate(-5deg);
}
30% {
-webkit-transform: translateX(20%) rotate(3deg);
transform: translateX(20%) rotate(3deg);
}
45% {
-webkit-transform: translateX(-15%) rotate(-3deg);
transform: translateX(-15%) rotate(-3deg);
}
60% {
-webkit-transform: translateX(10%) rotate(2deg);
transform: translateX(10%) rotate(2deg);
}
75% {
-webkit-transform: translateX(-5%) rotate(-1deg);
transform: translateX(-5%) rotate(-1deg);
}
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes wobble {
0% {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
15% {
-webkit-transform: translateX(-25%) rotate(-5deg);
-ms-transform: translateX(-25%) rotate(-5deg);
transform: translateX(-25%) rotate(-5deg);
}
30% {
-webkit-transform: translateX(20%) rotate(3deg);
-ms-transform: translateX(20%) rotate(3deg);
transform: translateX(20%) rotate(3deg);
}
45% {
-webkit-transform: translateX(-15%) rotate(-3deg);
-ms-transform: translateX(-15%) rotate(-3deg);
transform: translateX(-15%) rotate(-3deg);
}
60% {
-webkit-transform: translateX(10%) rotate(2deg);
-ms-transform: translateX(10%) rotate(2deg);
transform: translateX(10%) rotate(2deg);
}
75% {
-webkit-transform: translateX(-5%) rotate(-1deg);
-ms-transform: translateX(-5%) rotate(-1deg);
transform: translateX(-5%) rotate(-1deg);
}
100% {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
transform: scale(.9);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
-ms-transform: scale(.3);
transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
-ms-transform: translateX(-30px);
transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(.95);
transform: scale(.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(.3);
transform: scale(.3);
}
}
@keyframes bounceOut {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(.95);
-ms-transform: scale(.95);
transform: scale(.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(.3);
-ms-transform: scale(.3);
transform: scale(.3);
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes bounceOutLeft {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes bounceOutRight {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
@keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@keyframes fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
-ms-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
-ms-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
@-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
-ms-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
-ms-transform: perspective(400px) rotateY(-10deg);
transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
-ms-transform: perspective(400px) rotateY(10deg);
transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
-ms-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@keyframes flipOutY {
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
-ms-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
-ms-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: translateX(-20%) skewX(30deg);
transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
-webkit-transform: translateX(0%) skewX(-15deg);
transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
@keyframes lightSpeedIn {
0% {
-webkit-transform: translateX(100%) skewX(-30deg);
-ms-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: translateX(-20%) skewX(30deg);
-ms-transform: translateX(-20%) skewX(30deg);
transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
-webkit-transform: translateX(0%) skewX(-15deg);
-ms-transform: translateX(0%) skewX(-15deg);
transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(0%) skewX(0deg);
-ms-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOut {
0% {
-webkit-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
0% {
-webkit-transform: translateX(0%) skewX(0deg);
-ms-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%) skewX(-30deg);
-ms-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-200deg);
transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-200deg);
-ms-transform: rotate(-200deg);
transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(200deg);
transform: rotate(200deg);
opacity: 0;
}
}
@keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(200deg);
-ms-transform: rotate(200deg);
transform: rotate(200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes slideInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
@-webkit-keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
@-webkit-keyframes slideOutDown {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@keyframes slideOutDown {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
}
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate(80deg);
transform: rotate(80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40% {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
80% {
-webkit-transform: rotate(60deg) translateY(0);
transform: rotate(60deg) translateY(0);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
100% {
-webkit-transform: translateY(700px);
transform: translateY(700px);
opacity: 0;
}
}
@keyframes hinge {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate(80deg);
-ms-transform: rotate(80deg);
transform: rotate(80deg);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40% {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
80% {
-webkit-transform: rotate(60deg) translateY(0);
-ms-transform: rotate(60deg) translateY(0);
transform: rotate(60deg) translateY(0);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
100% {
-webkit-transform: translateY(700px);
-ms-transform: translateY(700px);
transform: translateY(700px);
opacity: 0;
}
}
.hinge {
-webkit-animation-name: hinge;
animation-name: hinge;
} @-webkit-keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
@keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
-ms-transform: translateX(-100%) rotate(-120deg);
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
} @-webkit-keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
transform: translateX(100%) rotate(120deg);
}
}
@keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
-ms-transform: translateX(100%) rotate(120deg);
transform: translateX(100%) rotate(120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}.lifted {
background:#fff;
}
.lifted:before,
.lifted:after {
content:"";
position:absolute;
z-index:-2;
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
.perspective {
background:#fff;
}
.perspective:before,
.perspective:after {
content:"";
position:absolute;
z-index:-2;
}
.perspective:before {
left:80px;
bottom:5px;
width:50%;
height:35%;
max-width:200px;
-webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
-webkit-transform:skew(40deg);
-moz-transform:skew(40deg);
-ms-transform:skew(40deg);
-o-transform:skew(40deg);
transform:skew(40deg);
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-o-transform-origin:0 100%;
transform-origin:0 100%;
}
.perspective:after {
display:none;
}
.raised {
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.raised:before,
.raised:after {
content:"";
position:absolute;
z-index:-2;
}
.curved-vt-1 {
background:#fff;
-webkit-box-shadow:0 1px 10px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 10px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 10px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.curved-vt-1:before,
.curved-vt-1:after {
content:"";
position:absolute;
z-index:-2;
}
.curved-vt-1:before {
top:10px;
bottom:10px;
left:0;
right:50%;
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-border-radius:10px / 100px;
border-radius:10px / 100px;
}
.curved-vt-2 {
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.curved-vt-2:before,
.curved-vt-2:after {
content:"";
position:absolute;
z-index:-2;
}
.curved-vt-2:before {
top:10px;
bottom:10px;
left:0;
right:0;
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-border-radius:10px / 100px;
border-radius:10px / 100px;
}
.curved-vt-2 p {
font-size:16px;
font-weight:bold;
}
.curved-hz-1 {
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.curved-hz-1:before,
.curved-hz-1:after {
content:"";
position:absolute;
z-index:-2;
}
.curved-hz-1:before {
top:50%;
bottom:0px;
left:10px;
right:10px;
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.curved-hz-1 p {
font-size:16px;
font-weight:bold;
}
.curved-hz-2 {
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.curved-hz-2:before,
.curved-hz-2:after {
content:"";
position:absolute;
z-index:-2;
}
.curved-hz-2:before {
top:0px;
bottom:0px;
left:10px;
right:10px;
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.curved-hz-2 p {
font-size:16px;
font-weight:bold;
}
 .animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
@-moz-keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
@-o-keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
@keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
.flash {
-webkit-animation-name: flash;
-moz-animation-name: flash;
-o-animation-name: flash;
animation-name: flash;
}
@-webkit-keyframes shake {
0%, 100% {-webkit-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes shake {
0%, 100% {-moz-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
@-o-keyframes shake {
0%, 100% {-o-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.shake {
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
40% {-moz-transform: translateY(-30px);}
60% {-moz-transform: translateY(-15px);}
}
@-o-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
40% {-o-transform: translateY(-30px);}
60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.bounce {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
}
@-webkit-keyframes tada {
0% {-webkit-transform: scale(1);}
10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
100% {-webkit-transform: scale(1) rotate(0);}
}
@-moz-keyframes tada {
0% {-moz-transform: scale(1);}
10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
100% {-moz-transform: scale(1) rotate(0);}
}
@-o-keyframes tada {
0% {-o-transform: scale(1);}
10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
100% {-o-transform: scale(1) rotate(0);}
}
@keyframes tada {
0% {transform: scale(1);}
10%, 20% {transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
100% {transform: scale(1) rotate(0);}
}
.tada {
-webkit-animation-name: tada;
-moz-animation-name: tada;
-o-animation-name: tada;
animation-name: tada;
}
@-webkit-keyframes swing {
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
20% { -webkit-transform: rotate(15deg); }
40% { -webkit-transform: rotate(-10deg); }
60% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-5deg); }
100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes swing {
20% { -moz-transform: rotate(15deg); }
40% { -moz-transform: rotate(-10deg); }
60% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-5deg); }
100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes swing {
20% { -o-transform: rotate(15deg); }
40% { -o-transform: rotate(-10deg); }
60% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-5deg); }
100% { -o-transform: rotate(0deg); }
}
@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.swing {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;
} @-webkit-keyframes wobble {
0% { -webkit-transform: translateX(0%); }
15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
30% { -webkit-transform: translateX(20%) rotate(3deg); }
45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
60% { -webkit-transform: translateX(10%) rotate(2deg); }
75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
100% { -webkit-transform: translateX(0%); }
}
@-moz-keyframes wobble {
0% { -moz-transform: translateX(0%); }
15% { -moz-transform: translateX(-25%) rotate(-5deg); }
30% { -moz-transform: translateX(20%) rotate(3deg); }
45% { -moz-transform: translateX(-15%) rotate(-3deg); }
60% { -moz-transform: translateX(10%) rotate(2deg); }
75% { -moz-transform: translateX(-5%) rotate(-1deg); }
100% { -moz-transform: translateX(0%); }
}
@-o-keyframes wobble {
0% { -o-transform: translateX(0%); }
15% { -o-transform: translateX(-25%) rotate(-5deg); }
30% { -o-transform: translateX(20%) rotate(3deg); }
45% { -o-transform: translateX(-15%) rotate(-3deg); }
60% { -o-transform: translateX(10%) rotate(2deg); }
75% { -o-transform: translateX(-5%) rotate(-1deg); }
100% { -o-transform: translateX(0%); }
}
@keyframes wobble {
0% { transform: translateX(0%); }
15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
100% { transform: translateX(0%); }
}
.wobble {
-webkit-animation-name: wobble;
-moz-animation-name: wobble;
-o-animation-name: wobble;
animation-name: wobble;
} @-webkit-keyframes pulse {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulse {
0% { -moz-transform: scale(1); }
50% { -moz-transform: scale(1.1); }
100% { -moz-transform: scale(1); }
}
@-o-keyframes pulse {
0% { -o-transform: scale(1); }
50% { -o-transform: scale(1.1); }
100% { -o-transform: scale(1); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.pulse {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-o-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) rotateY(0);
-webkit-animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
-webkit-animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) scale(1);
-webkit-animation-timing-function: ease-in;
}
}
@-moz-keyframes flip {
0% {
-moz-transform: perspective(400px) rotateY(0);
-moz-animation-timing-function: ease-out;
}
40% {
-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
-moz-animation-timing-function: ease-out;
}
50% {
-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-moz-animation-timing-function: ease-in;
}
80% {
-moz-transform: perspective(400px) rotateY(360deg) scale(.95);
-moz-animation-timing-function: ease-in;
}
100% {
-moz-transform: perspective(400px) scale(1);
-moz-animation-timing-function: ease-in;
}
}
@-o-keyframes flip {
0% {
-o-transform: perspective(400px) rotateY(0);
-o-animation-timing-function: ease-out;
}
40% {
-o-transform: perspective(400px) translateZ(150px) rotateY(170deg);
-o-animation-timing-function: ease-out;
}
50% {
-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-o-animation-timing-function: ease-in;
}
80% {
-o-transform: perspective(400px) rotateY(360deg) scale(.95);
-o-animation-timing-function: ease-in;
}
100% {
-o-transform: perspective(400px) scale(1);
-o-animation-timing-function: ease-in;
}
}
@keyframes flip {
0% {
transform: perspective(400px) rotateY(0);
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg);
animation-timing-function: ease-out;
}
50% {
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) rotateY(360deg) scale(.95);
animation-timing-function: ease-in;
}
100% {
transform: perspective(400px) scale(1);
animation-timing-function: ease-in;
}
}
.flip {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flip;
-moz-backface-visibility: visible !important;
-moz-animation-name: flip;
-o-backface-visibility: visible !important;
-o-animation-name: flip;
backface-visibility: visible !important;
animation-name: flip;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInX {
0% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-moz-transform: perspective(400px) rotateX(-10deg);
}
70% {
-moz-transform: perspective(400px) rotateX(10deg);
}
100% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-o-keyframes flipInX {
0% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-o-transform: perspective(400px) rotateX(-10deg);
}
70% {
-o-transform: perspective(400px) rotateX(10deg);
}
100% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateX(-10deg);
}
70% {
transform: perspective(400px) rotateX(10deg);
}
100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}
@-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@-moz-keyframes flipOutX {
0% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@-o-keyframes flipOutX {
0% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@keyframes flipOutX {
0% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
-moz-animation-name: flipOutX;
-moz-backface-visibility: visible !important;
-o-animation-name: flipOutX;
-o-backface-visibility: visible !important;
animation-name: flipOutX;
backface-visibility: visible !important;
}
@-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInY {
0% {
-moz-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-moz-transform: perspective(400px) rotateY(-10deg);
}
70% {
-moz-transform: perspective(400px) rotateY(10deg);
}
100% {
-moz-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@-o-keyframes flipInY {
0% {
-o-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-o-transform: perspective(400px) rotateY(-10deg);
}
70% {
-o-transform: perspective(400px) rotateY(10deg);
}
100% {
-o-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@keyframes flipInY {
0% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateY(-10deg);
}
70% {
transform: perspective(400px) rotateY(10deg);
}
100% {
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInY;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInY;
-o-backface-visibility: visible !important;
-o-animation-name: flipInY;
backface-visibility: visible !important;
animation-name: flipInY;
}
@-webkit-keyframes flipOutY {
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@-moz-keyframes flipOutY {
0% {
-moz-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-moz-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@-o-keyframes flipOutY {
0% {
-o-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-o-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@keyframes flipOutY {
0% {
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipOutY;
-o-backface-visibility: visible !important;
-o-animation-name: flipOutY;
backface-visibility: visible !important;
animation-name: flipOutY;
}
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-o-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInUp {
0% {
opacity: 0;
-o-transform: translateY(20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInDown {
0% {
opacity: 0;
-o-transform: translateY(-20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInLeft {
0% {
opacity: 0;
-o-transform: translateX(-20px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInRight {
0% {
opacity: 0;
-o-transform: translateX(20px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
-moz-animation-name: fadeInRight;
-o-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInUpBig {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInUpBig {
0% {
opacity: 0;
-o-transform: translateY(2000px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
transform: translateY(2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
-moz-animation-name: fadeInUpBig;
-o-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDownBig {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInDownBig {
0% {
opacity: 0;
-o-transform: translateY(-2000px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDownBig {
0% {
opacity: 0;
transform: translateY(-2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
-moz-animation-name: fadeInDownBig;
-o-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeftBig {
0% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInLeftBig {
0% {
opacity: 0;
-o-transform: translateX(-2000px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
-moz-animation-name: fadeInLeftBig;
-o-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInRightBig {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInRightBig {
0% {
opacity: 0;
-o-transform: translateX(2000px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
transform: translateX(2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
-moz-animation-name: fadeInRightBig;
-o-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@-moz-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@-o-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
-o-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
}
@-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-20px);
}
}
@-o-keyframes fadeOutUp {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
}
}
@-moz-keyframes fadeOutDown {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(20px);
}
}
@-o-keyframes fadeOutDown {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(20px);
}
}
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
-moz-animation-name: fadeOutDown;
-o-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
}
@-moz-keyframes fadeOutLeft {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(-20px);
}
}
@-o-keyframes fadeOutLeft {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(-20px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
-moz-animation-name: fadeOutLeft;
-o-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
}
}
@-moz-keyframes fadeOutRight {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(20px);
}
}
@-o-keyframes fadeOutRight {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(20px);
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
-moz-animation-name: fadeOutRight;
-o-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
}
@-moz-keyframes fadeOutUpBig {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
@-o-keyframes fadeOutUpBig {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(-2000px);
}
}
@keyframes fadeOutUpBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
-moz-animation-name: fadeOutUpBig;
-o-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
}
@-moz-keyframes fadeOutDownBig {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(2000px);
}
}
@-o-keyframes fadeOutDownBig {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(2000px);
}
}
@keyframes fadeOutDownBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
-moz-animation-name: fadeOutDownBig;
-o-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
}
@-moz-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
}
@-o-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(-2000px);
}
}
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
-moz-animation-name: fadeOutLeftBig;
-o-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
}
@-moz-keyframes fadeOutRightBig {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(2000px);
}
}
@-o-keyframes fadeOutRightBig {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(2000px);
}
}
@keyframes fadeOutRightBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(2000px);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
-moz-animation-name: fadeOutRightBig;
-o-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
70% {
-moz-transform: scale(.9);
}
100% {
-moz-transform: scale(1);
}
}
@-o-keyframes bounceIn {
0% {
opacity: 0;
-o-transform: scale(.3);
}
50% {
opacity: 1;
-o-transform: scale(1.05);
}
70% {
-o-transform: scale(.9);
}
100% {
-o-transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
}
}
@-o-keyframes bounceInUp {
0% {
opacity: 0;
-o-transform: translateY(2000px);
}
60% {
opacity: 1;
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px);
}
100% {
-o-transform: translateY(0);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(2000px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
}
}
@-o-keyframes bounceInDown {
0% {
opacity: 0;
-o-transform: translateY(-2000px);
}
60% {
opacity: 1;
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px);
}
100% {
-o-transform: translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(30px);
}
80% {
-moz-transform: translateX(-10px);
}
100% {
-moz-transform: translateX(0);
}
}
@-o-keyframes bounceInLeft {
0% {
opacity: 0;
-o-transform: translateX(-2000px);
}
60% {
opacity: 1;
-o-transform: translateX(30px);
}
80% {
-o-transform: translateX(-10px);
}
100% {
-o-transform: translateX(0);
}
}
@keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
-moz-animation-name: bounceInLeft;
-o-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes bounceInRight {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(-30px);
}
80% {
-moz-transform: translateX(10px);
}
100% {
-moz-transform: translateX(0);
}
}
@-o-keyframes bounceInRight {
0% {
opacity: 0;
-o-transform: translateX(2000px);
}
60% {
opacity: 1;
-o-transform: translateX(-30px);
}
80% {
-o-transform: translateX(10px);
}
100% {
-o-transform: translateX(0);
}
}
@keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
-moz-animation-name: bounceInRight;
-o-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceOut {
0% {
-webkit-transform: scale(1);
}
25% {
-webkit-transform: scale(.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(.3);
}
}
@-moz-keyframes bounceOut {
0% {
-moz-transform: scale(1);
}
25% {
-moz-transform: scale(.95);
}
50% {
opacity: 1;
-moz-transform: scale(1.1);
}
100% {
opacity: 0;
-moz-transform: scale(.3);
}
}
@-o-keyframes bounceOut {
0% {
-o-transform: scale(1);
}
25% {
-o-transform: scale(.95);
}
50% {
opacity: 1;
-o-transform: scale(1.1);
}
100% {
opacity: 0;
-o-transform: scale(.3);
}
}
@keyframes bounceOut {
0% {
transform: scale(1);
}
25% {
transform: scale(.95);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(.3);
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
-moz-animation-name: bounceOut;
-o-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
}
@-moz-keyframes bounceOutUp {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(20px);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
@-o-keyframes bounceOutUp {
0% {
-o-transform: translateY(0);
}
20% {
opacity: 1;
-o-transform: translateY(20px);
}
100% {
opacity: 0;
-o-transform: translateY(-2000px);
}
}
@keyframes bounceOutUp {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(20px);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
-moz-animation-name: bounceOutUp;
-o-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
}
@-moz-keyframes bounceOutDown {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(-20px);
}
100% {
opacity: 0;
-moz-transform: translateY(2000px);
}
}
@-o-keyframes bounceOutDown {
0% {
-o-transform: translateY(0);
}
20% {
opacity: 1;
-o-transform: translateY(-20px);
}
100% {
opacity: 0;
-o-transform: translateY(2000px);
}
}
@keyframes bounceOutDown {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(-20px);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
-moz-animation-name: bounceOutDown;
-o-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
0% {
-webkit-transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
}
@-moz-keyframes bounceOutLeft {
0% {
-moz-transform: translateX(0);
}
20% {
opacity: 1;
-moz-transform: translateX(20px);
}
100% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
}
@-o-keyframes bounceOutLeft {
0% {
-o-transform: translateX(0);
}
20% {
opacity: 1;
-o-transform: translateX(20px);
}
100% {
opacity: 0;
-o-transform: translateX(-2000px);
}
}
@keyframes bounceOutLeft {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(20px);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
-moz-animation-name: bounceOutLeft;
-o-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
0% {
-webkit-transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
}
@-moz-keyframes bounceOutRight {
0% {
-moz-transform: translateX(0);
}
20% {
opacity: 1;
-moz-transform: translateX(-20px);
}
100% {
opacity: 0;
-moz-transform: translateX(2000px);
}
}
@-o-keyframes bounceOutRight {
0% {
-o-transform: translateX(0);
}
20% {
opacity: 1;
-o-transform: translateX(-20px);
}
100% {
opacity: 0;
-o-transform: translateX(2000px);
}
}
@keyframes bounceOutRight {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(-20px);
}
100% {
opacity: 0;
transform: translateX(2000px);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
-moz-animation-name: bounceOutRight;
-o-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateIn {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(-200deg);
opacity: 0;
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-o-keyframes rotateIn {
0% {
-o-transform-origin: center center;
-o-transform: rotate(-200deg);
opacity: 0;
}
100% {
-o-transform-origin: center center;
-o-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateIn {
0% {
transform-origin: center center;
transform: rotate(-200deg);
opacity: 0;
}
100% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
-moz-animation-name: rotateIn;
-o-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInUpLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-o-keyframes rotateInUpLeft {
0% {
-o-transform-origin: left bottom;
-o-transform: rotate(90deg);
opacity: 0;
}
100% {
-o-transform-origin: left bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
0% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
-moz-animation-name: rotateInUpLeft;
-o-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInDownLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-o-keyframes rotateInDownLeft {
0% {
-o-transform-origin: left bottom;
-o-transform: rotate(-90deg);
opacity: 0;
}
100% {
-o-transform-origin: left bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
-moz-animation-name: rotateInDownLeft;
-o-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInUpRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-o-keyframes rotateInUpRight {
0% {
-o-transform-origin: right bottom;
-o-transform: rotate(-90deg);
opacity: 0;
}
100% {
-o-transform-origin: right bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
0% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
-moz-animation-name: rotateInUpRight;
-o-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInDownRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-o-keyframes rotateInDownRight {
0% {
-o-transform-origin: right bottom;
-o-transform: rotate(90deg);
opacity: 0;
}
100% {
-o-transform-origin: right bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
0% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
-moz-animation-name: rotateInDownRight;
-o-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(200deg);
opacity: 0;
}
}
@-moz-keyframes rotateOut {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(200deg);
opacity: 0;
}
}
@-o-keyframes rotateOut {
0% {
-o-transform-origin: center center;
-o-transform: rotate(0);
opacity: 1;
}
100% {
-o-transform-origin: center center;
-o-transform: rotate(200deg);
opacity: 0;
}
}
@keyframes rotateOut {
0% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: center center;
transform: rotate(200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
-moz-animation-name: rotateOut;
-o-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutUpLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
}
@-o-keyframes rotateOutUpLeft {
0% {
-o-transform-origin: left bottom;
-o-transform: rotate(0);
opacity: 1;
}
100% {
-o-transform-origin: left bottom;
-o-transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
-moz-animation-name: rotateOutUpLeft;
-o-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutDownLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
}
@-o-keyframes rotateOutDownLeft {
0% {
-o-transform-origin: left bottom;
-o-transform: rotate(0);
opacity: 1;
}
100% {
-o-transform-origin: left bottom;
-o-transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
-moz-animation-name: rotateOutDownLeft;
-o-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutUpRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
}
@-o-keyframes rotateOutUpRight {
0% {
-o-transform-origin: right bottom;
-o-transform: rotate(0);
opacity: 1;
}
100% {
-o-transform-origin: right bottom;
-o-transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
-moz-animation-name: rotateOutUpRight;
-o-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutDownRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
}
@-o-keyframes rotateOutDownRight {
0% {
-o-transform-origin: right bottom;
-o-transform: rotate(0);
opacity: 1;
}
100% {
-o-transform-origin: right bottom;
-o-transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
-moz-animation-name: rotateOutDownRight;
-o-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes hinge {
0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
100% { -webkit-transform: translateY(700px); opacity: 0; }
}
@-moz-keyframes hinge {
0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
100% { -moz-transform: translateY(700px); opacity: 0; }
}
@-o-keyframes hinge {
0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
100% { -o-transform: translateY(700px); opacity: 0; }
}
@keyframes hinge {
0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
100% { transform: translateY(700px); opacity: 0; }
}
.hinge {
-webkit-animation-name: hinge;
-moz-animation-name: hinge;
-o-animation-name: hinge;
animation-name: hinge;
} @-webkit-keyframes rollIn {
0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}
@-moz-keyframes rollIn {
0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
}
@-o-keyframes rollIn {
0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
}
@keyframes rollIn {
0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}
.rollIn {
-webkit-animation-name: rollIn;
-moz-animation-name: rollIn;
-o-animation-name: rollIn;
animation-name: rollIn;
} @-webkit-keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
}
}
@-moz-keyframes rollOut {
0% {
opacity: 1;
-moz-transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-moz-transform: translateX(100%) rotate(120deg);
}
}
@-o-keyframes rollOut {
0% {
opacity: 1;
-o-transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-o-transform: translateX(100%) rotate(120deg);
}
}
@keyframes rollOut {
0% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
transform: translateX(100%) rotate(120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
-moz-animation-name: rollOut;
-o-animation-name: rollOut;
animation-name: rollOut;
} @-webkit-keyframes lightSpeedIn {
0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@-moz-keyframes lightSpeedIn {
0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@-o-keyframes lightSpeedIn {
0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@keyframes lightSpeedIn {
0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
-moz-animation-name: lightSpeedIn;
-o-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
.animated.lightSpeedIn {
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
} @-webkit-keyframes lightSpeedOut {
0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
}
@-moz-keyframes lightSpeedOut {
0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
}
@-o-keyframes lightSpeedOut {
0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
}
@keyframes lightSpeedOut {
0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
-moz-animation-name: lightSpeedOut;
-o-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
.animated.lightSpeedOut {
-webkit-animation-duration: 0.25s;
-moz-animation-duration: 0.25s;
-o-animation-duration: 0.25s;
animation-duration: 0.25s;
} @-webkit-keyframes wiggle {
0% { -webkit-transform: skewX(9deg); }
10% { -webkit-transform: skewX(-8deg); }
20% { -webkit-transform: skewX(7deg); }
30% { -webkit-transform: skewX(-6deg); }
40% { -webkit-transform: skewX(5deg); }
50% { -webkit-transform: skewX(-4deg); }
60% { -webkit-transform: skewX(3deg); }
70% { -webkit-transform: skewX(-2deg); }
80% { -webkit-transform: skewX(1deg); }
90% { -webkit-transform: skewX(0deg); }
100% { -webkit-transform: skewX(0deg); }
}
@-moz-keyframes wiggle {
0% { -moz-transform: skewX(9deg); }
10% { -moz-transform: skewX(-8deg); }
20% { -moz-transform: skewX(7deg); }
30% { -moz-transform: skewX(-6deg); }
40% { -moz-transform: skewX(5deg); }
50% { -moz-transform: skewX(-4deg); }
60% { -moz-transform: skewX(3deg); }
70% { -moz-transform: skewX(-2deg); }
80% { -moz-transform: skewX(1deg); }
90% { -moz-transform: skewX(0deg); }
100% { -moz-transform: skewX(0deg); }
}
@-o-keyframes wiggle {
0% { -o-transform: skewX(9deg); }
10% { -o-transform: skewX(-8deg); }
20% { -o-transform: skewX(7deg); }
30% { -o-transform: skewX(-6deg); }
40% { -o-transform: skewX(5deg); }
50% { -o-transform: skewX(-4deg); }
60% { -o-transform: skewX(3deg); }
70% { -o-transform: skewX(-2deg); }
80% { -o-transform: skewX(1deg); }
90% { -o-transform: skewX(0deg); }
100% { -o-transform: skewX(0deg); }
}
@keyframes wiggle {
0% { transform: skewX(9deg); }
10% { transform: skewX(-8deg); }
20% { transform: skewX(7deg); }
30% { transform: skewX(-6deg); }
40% { transform: skewX(5deg); }
50% { transform: skewX(-4deg); }
60% { transform: skewX(3deg); }
70% { transform: skewX(-2deg); }
80% { transform: skewX(1deg); }
90% { transform: skewX(0deg); }
100% { transform: skewX(0deg); }
}
.wiggle {
-webkit-animation-name: wiggle;
-moz-animation-name: wiggle;
-o-animation-name: wiggle;
animation-name: wiggle;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
.animated.wiggle {
-webkit-animation-duration: 0.75s;
-moz-animation-duration: 0.75s;
-o-animation-duration: 0.75s;
animation-duration: 0.75s;
} .slider-sharing-bottom {
clear: both;
}
.supsystic-slider-image-sharing {
position: absolute;
}
.supsystic-slider-wrapper .slider-sharing-top .supsystic-social-sharing, .supsystic-slider-wrapper .slider-sharing-bottom .supsystic-social-sharing {
text-align: center;
}
.supsystic-slider-image-sharing .supsystic-social-sharing .social-sharing-button{
margin-top: 0;
margin-bottom: 0;
}
.supsystic-slider-image-sharing.top{
top: 0;
margin-top: 5px;
}
.supsystic-slider-image-sharing.middle{
top: 50%;
transform: translateY(-50%);
}
.supsystic-slider-image-sharing.bottom{
bottom: 0;
margin-bottom: 5px;
}
.supsystic-slider-image-sharing.left{
left: 0;
margin-left: 5px;
} .supsystic-slider-image-sharing.right{
right: 0;
margin-right: 5px;
}
.supsystic-slider-image-sharing.top.center{
left: 50%;
top: 0;
transform: translateX(-50%);
}
.supsystic-slider-image-sharing.middle.center{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.supsystic-slider-image-sharing.bottom.center{
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.supsystic-slider-image-sharing.middle.center{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.supsystic-slider .slide .supsystic-slider-image-sharing{
visibility: hidden;
opacity: 1;
transition: visibility 0s, opacity 0.5s linear;
-webkit-transition: visibility 0s, opacity 0.5s linear;
-moz-transition: visibility 0s, opacity 0.5s linear;
-o-transition: visibility 0s, opacity 0.5s linear;
}
.supsystic-slider .slide:hover .supsystic-slider-image-sharing{
visibility: visible;
opacity: 1;
}
.supsystic-slider-image-sharing div[data-animation]{
opacity: 1!important;
}