.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;

    /*font-weight: 300;*/

    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: #019796;

    -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: #019796;

    border-width: 1px;

    border-style: solid;



}

.contentswap-effect .swap-button button.button-2:hover{

    background: #04bbb6;

    -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: #04bbb6;

}





.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;

}



/* ----- Effects ----- */

.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;

}



/*Reset*/

.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);

}