.contentswap-effect{
display: inline-block;
position: relative;
overflow: hidden;
zoom:1;
padding-top:1px;                                                   
padding-bottom:1px;     
*display:inline;
cursor: pointer;
vertical-align: top;
}
.contentswap-effect .initial-image{
display: block;
}
.contentswap-effect .overlay{
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
opacity: 0;
display:none;
margin-top:1px;
}
.contentswap-effect.hover .overlay,
.contentswap-effect.caption.hover .overlay,
.contentswap-effect:hover .overlay,
.contentswap-effect.caption:hover .overlay{
opacity: 1;
}
.contentswap-effect.caption .overlay{
position: relative;
width: 100%;
height: auto;
opacity: 1;
}
.contentswap-effect.caption:hover .overlay:after{
content:"";
}
.contentswap-effect.caption.hover .initial-image,
.contentswap-effect.caption:hover .initial-image{
opacity: 1;
display: block;
}
.contentswap-effect .swap-inner, .contentswap-effect .swap-inner-caption{
display: none;
padding-top:1px;                                                   
padding-bottom:1px;                                                   
}
.contentswap-effect .swap-title,
.contentswap-effect .swap-subtitle,
.contentswap-effect .swap-button{
margin: 20px;
text-align: center;
}
.contentswap-effect.caption .swap-inner{
position:relative;
}
.contentswap-effect.contentswap-overlay .overlay:after, .contentswap-effect.caption:hover .swap-inner:after {
content:"";
}
.contentswap-effect .swap-title{
margin: 20px 0 20px 0; text-align: center;
}
.contentswap-effect .swap-button button{
cursor: pointer;
background: #605ca8;
text-transform: uppercase;
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-decoration: none !important;
}
.contentswap-effect .swap-button button:hover{
background: #403c78;
}
.contentswap-effect .swap-button button.button-2{
background: #327BEF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition: border-color .218s 0;
-moz-transition: border-color .218s 0;
-o-transition: border-color .218s 0;
transition: border-color .218s 0;
text-shadow: 1px 0px 0px #1a378e;
border-color: #0066cc;
border-width: 1px;
border-style: solid;
}
.contentswap-effect .swap-button button.button-2:hover{
background: #2D71EE;
-webkit-box-shadow: 1px 1px rgba(255, 255, 255, 0.3);
-moz-box-shadow: 1px 1px rgba(255, 255, 255, 0.3);
box-shadow: 1px 1px rgba(255, 255, 255, 0.3);
text-shadow: 1px 1px 0px #001AA6;
border-color: #291f93;
}
.contentswap-effect .swap-button button.button-4{
background: rgb(182,214,68);
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 18px;
border-color: rgb(182,214,68);
border-bottom-style: solid;
border-right-style: solid;
}
.contentswap-effect .swap-button button.button-4:hover{
background: rgb(108,162,60); 
border-color: #000000;
border-width: 0px;
border-style: solid;
}
.contentswap-effect .swap-button button.button-6{
background: rgb(159,220,34); 
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0px -1px 0px #709A16;
padding: 10px 20px;
border-color: #7BA819;
border-width: 1px;
border-style: solid;
}
.contentswap-effect .swap-button button.button-6:hover{
background: rgb(147, 204, 30); 
-webkit-box-shadow: 0px 1px 0px 0px #A0CA4E inset;
-moz-box-shadow: 0px 1px 0px 0px #A0CA4E inset;
box-shadow: 0px 1px 0px 0px #A0CA4E inset;
text-shadow: 0px -1px 0px #628813;
}
.contentswap-effect .swap-button button.button-9{
border: 2px solid rgba(255, 255, 255, 0.80);
background: transparent;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.contentswap-effect .swap-button button.button-9:hover{
border-bottom: 10px solid rgba(255, 255, 255, 0.80);
}
.contentswap-effect .swap-button button.button-10{
color: #666666;
background: rgb(255,255,255);
}
.contentswap-effect .swap-button button.button-10:hover{
color: #ffffff;
background: rgb(69,72,77);
}
.contentswap-effect .swap-icons {
margin: 0 auto;
}
.contentswap-effect .swap-icons img{
text-align: center;
}
.contentswap-effect .swap-inner{
position: absolute;
top:0;
left:0;
background: transparent;
}
.clearfix{
clear: both;
}
.contentswap-effect .swap-inner{
opacity: 0;
}
.caption.contentswap-effect .swap-inner{
opacity:1;
} .contentswap-overlay.effect-1 .swap-inner{
-webkit-transform: perspective(500px) rotateX(70deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 200px, 0px);
-moz-transform: perspective(500px) rotateX(70deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 200px, 0px);
-o-transform: perspective(500px) rotateX(70deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 200px, 0px);
-ms-transform: perspective(500px) rotateX(70deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 200px, 0px);
transform: perspective(500px) rotateX(70deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 200px, 0px);
}
.contentswap-overlay.effect-2 .swap-inner{
-webkit-transform: translate(-50%, 0px);
-moz-transform: translate(-50%, 0px);
-o-transform: translate(-50%, 0px);
-ms-transform: translate(-50%, 0px);
transform: translate(-50%, 0px);
}
.contentswap-overlay.effect-3 .swap-inner{
-webkit-transform: translate(0px, -50%);
-moz-transform: translate(0px, -50%);
-o-transform: translate(0px, -50%);
-ms-transform: translate(0px, -50%);
transform: translate(0px, -50%);
}
.contentswap-overlay.effect-4 .swap-inner{
-webkit-transform: translate(0px, 50%);
-moz-transform: translate(0px, 50%);
-o-transform: translate(0px, 50%);
-ms-transform: translate(0px, 50%);
transform: translate(0px, 50%);
}
.contentswap-overlay.effect-5 .swap-inner{
-webkit-transform: translate(50%, 0px);
-moz-transform: translate(50%, 0px);
-o-transform: translate(50%, 0px);
-ms-transform: translate(50%, 0px);
transform: translate(50%, 0px);
}
.contentswap-overlay.effect-6 .swap-inner{
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-o-transform: scale(0.3);
-ms-transform: scale(0.3);
transform: scale(0.3);
}
.contentswap-overlay.effect-7 .swap-inner{
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
.contentswap-overlay.effect-8 .swap-inner{
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-70deg);
-moz-transform: rotateX(-70deg);
-ms-transform: rotateX(-70deg);
transform: rotateX(-70deg);
}
.contentswap-overlay.effect-9 .swap-inner{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-60deg);
-moz-transform: rotateX(-60deg);
-ms-transform: rotateX(-60deg);
transform: rotateX(-60deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.contentswap-overlay.effect-10 .swap-inner{
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(140deg) rotateZ(0deg) translate3d(0px, 50%, 0px);
-moz-transform: perspective(500px) rotateX(0deg) rotateY(140deg) rotateZ(0deg) translate3d(0px, 50%, 0px);
-o-transform: perspective(500px) rotateX(0deg) rotateY(140deg) rotateZ(0deg) translate3d(0px, 50%, 0px);
-ms-transform: perspective(500px) rotateX(0deg) rotateY(140deg) rotateZ(0deg) translate3d(0px, 50%, 0px);
transform: perspective(500px) rotateX(0deg) rotateY(140deg) rotateZ(0deg) translate3d(0px, 50%, 0px);
}
.contentswap-overlay.effect-11 .swap-inner{
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-o-transform: scale(0.1);
-ms-transform: scale(0.1);
transform: scale(0.1);
}
.contentswap-overlay.effect-12 .swap-inner{
-webkit-transform: perspective(500px) rotateX(100deg) rotateY(100deg) rotateZ(0deg) translate3d(50%, 0px, 0px) scale(.6);
-moz-transform: perspective(500px) rotateX(100deg) rotateY(100deg) rotateZ(0deg) translate3d(50%, 0px, 0px) scale(.6);
-o-transform: perspective(500px) rotateX(100deg) rotateY(100deg) rotateZ(0deg) translate3d(50%, 0px, 0px) scale(.6);
-ms-transform: perspective(500px) rotateX(100deg) rotateY(100deg) rotateZ(0deg) translate3d(50%, 0px, 0px) scale(.6);
transform: perspective(500px) rotateX(100deg) rotateY(100deg) rotateZ(0deg) translate3d(50%, 0px, 0px) scale(.6);
}
.contentswap-overlay.effect-13 .swap-inner{
-webkit-transform: rotateX(0deg) rotateY(170deg) rotateZ(0deg) translate3d(0%, -80%, 0px);
-moz-transform: rotateX(0deg) rotateY(170deg) rotateZ(0deg) translate3d(0%, -80%, 0px);
-o-transform: rotateX(0deg) rotateY(170deg) rotateZ(0deg) translate3d(0%, -80%, 0px);
-ms-transform: rotateX(0deg) rotateY(170deg) rotateZ(0deg) translate3d(0%, -80%, 0px);
transform: rotateX(0deg) rotateY(170deg) rotateZ(0deg) translate3d(0%, -80%, 0px);
}
.contentswap-overlay.effect-14 .swap-inner{
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(100deg) rotateZ(-60deg) translate3d(50%, 50%, 0px) scale(1.9);
-moz-transform: perspective(500px) rotateX(0deg) rotateY(100deg) rotateZ(-60deg) translate3d(50%, 50%, 0px) scale(1.9);
-o-transform: perspective(500px) rotateX(0deg) rotateY(100deg) rotateZ(-60deg) translate3d(50%, 50%, 0px) scale(1.9);
-ms-transform: perspective(500px) rotateX(0deg) rotateY(100deg) rotateZ(-60deg) translate3d(50%, 50%, 0px) scale(1.9);
transform: perspective(500px) rotateX(0deg) rotateY(100deg) rotateZ(-60deg) translate3d(50%, 50%, 0px) scale(1.9);
}
.contentswap-overlay.effect-15 .swap-inner{
-webkit-transform: perspective(500px) rotateX(20deg) rotateY(20deg) rotateZ(-60deg) translate3d(-50%, 50%, 0px) scale(1.1);
-moz-transform: perspective(500px) rotateX(20deg) rotateY(20deg) rotateZ(-60deg) translate3d(-50%, 50%, 0px) scale(1.1);
-o-transform: perspective(500px) rotateX(20deg) rotateY(20deg) rotateZ(-60deg) translate3d(-50%, 50%, 0px) scale(1.1);
-ms-transform: perspective(500px) rotateX(20deg) rotateY(20deg) rotateZ(-60deg) translate3d(-50%, 50%, 0px) scale(1.1);
transform: perspective(500px) rotateX(20deg) rotateY(20deg) rotateZ(-60deg) translate3d(-50%, 50%, 0px) scale(1.1);
}
.contentswap-overlay.effect-16 .swap-inner{
-webkit-transform: perspective(500px) rotateX(-20deg) rotateY(20deg) rotateZ(60deg) translate3d(-20%, 50%, 0px) scale(.1);
-moz-transform: perspective(500px) rotateX(-20deg) rotateY(20deg) rotateZ(60deg) translate3d(-20%, 50%, 0px) scale(.1);
-o-transform: perspective(500px) rotateX(-20deg) rotateY(20deg) rotateZ(60deg) translate3d(-20%, 50%, 0px) scale(.1);
-ms-transform: perspective(500px) rotateX(-20deg) rotateY(20deg) rotateZ(60deg) translate3d(-20%, 50%, 0px) scale(.1);
transform: perspective(500px) rotateX(-20deg) rotateY(20deg) rotateZ(60deg) translate3d(-20%, 50%, 0px) scale(.1);
}
.contentswap-overlay.effect-17 .swap-inner{
-webkit-transform: perspective(500px) rotateX(-60deg) rotateY(20deg) rotateZ(10deg) translate3d(20%, 50%, 70px) scale(.7);
-moz-transform: perspective(500px) rotateX(-60deg) rotateY(20deg) rotateZ(10deg) translate3d(20%, 50%, 70px) scale(.7);
-o-transform: perspective(500px) rotateX(-60deg) rotateY(20deg) rotateZ(10deg) translate3d(20%, 50%, 70px) scale(.7);
-ms-transform: perspective(500px) rotateX(-60deg) rotateY(20deg) rotateZ(10deg) translate3d(20%, 50%, 70px) scale(.7);
transform: perspective(500px) rotateX(-60deg) rotateY(20deg) rotateZ(10deg) translate3d(20%, 50%, 70px) scale(.7);
}
.contentswap-overlay.effect-18 .swap-inner{
-webkit-transform: rotateX(50deg) rotateY(20deg) rotateZ(170deg) ;
-moz-transform: rotateX(50deg) rotateY(20deg) rotateZ(170deg) ;
-o-transform: rotateX(50deg) rotateY(20deg) rotateZ(170deg) ;
-ms-transform: rotateX(50deg) rotateY(20deg) rotateZ(170deg) ;
transform: rotateX(50deg) rotateY(20deg) rotateZ(170deg) ;
}
.contentswap-overlay.effect-19 .swap-inner{
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(-10deg) rotateZ(0deg) translate3d(50%, 50%, 0px) scale(.7);
-moz-transform: perspective(500px) rotateX(0deg) rotateY(-10deg) rotateZ(0deg) translate3d(50%, 50%, 0px) scale(.7);
-o-transform: perspective(500px) rotateX(0deg) rotateY(-10deg) rotateZ(0deg) translate3d(50%, 50%, 0px) scale(.7);
-ms-transform: perspective(500px) rotateX(0deg) rotateY(-10deg) rotateZ(0deg) translate3d(50%, 50%, 0px) scale(.7);
transform: perspective(500px) rotateX(0deg) rotateY(-10deg) rotateZ(0deg) translate3d(50%, 50%, 0px) scale(.7);
}
.contentswap-overlay.effect-20 .swap-inner{
-webkit-transform: perspective(500px) scale(1.6) skew(80deg, 0deg);
-moz-transform: perspective(500px) scale(1.6) skew(80deg, 0deg);
-o-transform: perspective(500px) scale(1.6) skew(80deg, 0deg);
-ms-transform: perspective(500px) scale(1.6) skew(80deg, 0deg);
transform: perspective(500px) scale(1.6) skew(80deg, 0deg);
}
.contentswap-overlay.effect-21 .swap-inner{
-webkit-transform: perspective(500px)  skew(0deg, 80deg);
-moz-transform: perspective(500px)  skew(0deg, 80deg);
-o-transform: perspective(500px) skew(0deg, 80deg);
-ms-transform: perspective(500px)  skew(0deg, 80deg);
transform: perspective(500px) skew(0deg, 80deg);
}
.contentswap-overlay.effect-22 .swap-inner{
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(70deg) rotateZ(0deg) translate3d(-200px, 0px, 0px) scale(2);
-moz-transform: perspective(500px) rotateX(0deg) rotateY(70deg) rotateZ(0deg) translate3d(-200px, 0px, 0px) scale(2);
-o-transform: perspective(500px) rotateX(0deg) rotateY(70deg) rotateZ(0deg) translate3d(-200px, 0px, 0px) scale(2);
-ms-transform: perspective(500px) rotateX(0deg) rotateY(70deg) rotateZ(0deg) translate3d(-200px, 0px, 0px) scale(2);
transform: perspective(500px) rotateX(0deg) rotateY(70deg) rotateZ(0deg) translate3d(-200px, 0px, 0px) scale(2);
}
.contentswap-overlay.effect-23 .swap-inner{
-webkit-transform: perspective(300px) rotateX(150deg) rotateY(0deg) rotateZ(0deg) scale(2);
-moz-transform: perspective(300px) rotateX(150deg) rotateY(0deg) rotateZ(0deg) scale(2);
-o-transform: perspective(300px) rotateX(150deg) rotateY(0deg) rotateZ(0deg) scale(2);
-ms-transform: perspective(300px) rotateX(150deg) rotateY(0deg) rotateZ(0deg) scale(2);
transform: perspective(300px) rotateX(150deg) rotateY(0deg) rotateZ(0deg) scale(2);
}
.contentswap-effect.hover .swap-inner, .contentswap-effect:hover .swap-inner {
opacity: 1;
} .contentswap-overlay.contentswap-effect.hover .swap-inner,
.contentswap-overlay.contentswap-effect:hover .swap-inner{
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px) scale(1) skew(0deg);
-moz-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px) scale(1) skew(0deg);
-o-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px) scale(1) skew(0deg);
-ms-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px) scale(1) skew(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px) scale(1) skew(0deg);
}