.hoverfx-effect{
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    position: relative;
    overflow: hidden;
    zoom:1;
    padding-top:1px;                                                   
    padding-bottom:1px;     
    *display:inline;
    cursor: pointer;
}


.hoverfx-effect .initial-image{
    display: block;
}

.hoverfx-effect .overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    opacity: 0;
    display:none;
    margin-top:1px;
}

.hoverfx-effect.hover .overlay,
.hoverfx-effect.caption.hover .overlay,
.hoverfx-effect:hover .overlay,
.hoverfx-effect.caption:hover .overlay{
    opacity: 1;
}

.hoverfx-effect.caption .overlay{
    position: relative;
    width: 100%;
    height: auto;
    opacity: 1;
}


.hoverfx-effect.caption:hover .overlay:after{
    content:"";
}

.hoverfx-effect.caption.hover .initial-image,
.hoverfx-effect.caption:hover .initial-image{
    opacity: 1;
    display: block;

}


.hoverfx-effect .swap-inner, .hoverfx-effect .swap-inner-caption{
    display: none;
    padding-top:1px;                                                   
    padding-bottom:1px;                                                   
}


.hoverfx-effect .swap-title,
.hoverfx-effect .swap-subtitle,
.hoverfx-effect .swap-button{
    margin: 20px;
    text-align: center;
}



.hoverfx-effect.caption .swap-inner{
    position:relative;

}

.hoverfx-effect.hoverfx-overlay .overlay:after, .hoverfx-effect.caption:hover .swap-inner:after {
    content:"";
}

.hoverfx-effect .swap-title{
    margin: 20px 0 20px 0;
    /*font-weight: 300;*/
    text-align: center;
    font-size: 24px;
}

.hoverfx-effect .swap-button button{
    color: #ffffff;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;;
    background: #605ca8;
    text-transform: uppercase;
    padding: 10px 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none !important;
}

.hoverfx-effect .swap-button button:hover{
    background: #403c78;
}

.hoverfx-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;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;

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


.hoverfx-effect .swap-button button.button-4{
    background: rgb(182,214,68);
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 18px;
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
    border-color: rgb(182,214,68);
    border-bottom-style: solid;
    border-right-style: solid;
}


.hoverfx-effect .swap-button button.button-4:hover{
    background: rgb(108,162,60); 
    border-color: #000000;
    border-width: 0px;
    border-style: solid;
}

.hoverfx-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;
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
}
.hoverfx-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;
}

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

.hoverfx-effect .swap-button button.button-9:hover{
    border-bottom: 10px solid rgba(255, 255, 255, 0.80);
}

.hoverfx-effect .swap-button button.button-10{
    color: #666666;
    background: rgb(255,255,255);
}

.hoverfx-effect .swap-button button.button-10:hover{
    color: #ffffff;
    background: rgb(69,72,77);
}


.hoverfx-effect .swap-icons {
    margin: 0 auto;
}
.hoverfx-effect .swap-icons img{
    text-align: center;
}



.hoverfx-effect .swap-subtitle{
    font-size: 14px;
}


.hoverfx-effect .swap-inner{
    position: absolute;
    top:0;
    left:0;
    background: transparent;
}

.clearfix{
    clear: both;
}


.hoverfx-effect .swap-inner{
    opacity: 0;
}

.caption.hoverfx-effect .swap-inner{
    opacity:1;
}

/* ----- Effects ----- */
.hoverfx-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);

}

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

.hoverfx-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%);
}

.hoverfx-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%);
}

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

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

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

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


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

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

}

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

}

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

}


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

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

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

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

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

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

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

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

}

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

}


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

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

.hoverfx-effect.hover .swap-inner, .hoverfx-effect:hover .swap-inner {
    opacity: 1;
}

/*Reset*/
.hoverfx-overlay.hoverfx-effect.hover .swap-inner,
.hoverfx-overlay.hoverfx-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);
}