.testimonial-main {
background:url(../images/highlight-bg.jpg);
padding:2vw;

}
.testim {
width: 100%;
position: relative;
}
.testim .wrap {
position: relative;
width: 100%;
max-width: 1020px;
margin: auto;
}

.testim .wrap h2 {
font-family: Rubik,sans-serif!important;
    font-size: 2.8rem!important;
    color: #353535!important;
    font-weight: 300!important;
    letter-spacing: -1px!important;
    line-height: 1.2em!important;
    text-align: center!important;
    text-transform: none!important;
    font-style: normal!important;
	margin-bottom:20px;
}


.testim .arrow {
display: block;
position: absolute;
color: #000;
cursor: pointer;
font-size: 2em;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
padding: 5px;
z-index: 22222222;
}
.testim .arrow:before {
cursor: pointer;
}
.testim .arrow:hover {
color: #000;
}
.testim .arrow.left {
left: 10px;
}
.testim .arrow.right {
right: 10px;
}
.testim .dots {
text-align: center;
position: absolute;
width: 100%;
bottom: 60px;
left: 0;
display: block;
z-index: 3333;
height: 12px;
}
.testim .dots .dot {
list-style-type: none;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #000;
margin: 0 10px;
cursor: pointer;
-webkit-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
position: relative;
display: none!important;
}
.testim .dots .dot.active, .testim .dots .dot:hover {
background: #000;
border-color: #000;
}
.testim .dots .dot.active {
-webkit-animation: testim-scale .5s ease-in-out forwards;
-moz-animation: testim-scale .5s ease-in-out forwards;
-ms-animation: testim-scale .5s ease-in-out forwards;
-o-animation: testim-scale .5s ease-in-out forwards;
animation: testim-scale .5s ease-in-out forwards;
}
.testim .cont {
position: relative;
overflow: hidden;
}
.testim .cont > div {
text-align: center;
position: absolute;
top: 0;
left: 0;
padding: 0 0 70px 0;
opacity: 0;
}
.testim .cont > div.inactive {
opacity: 1;
}
.testim .cont > div.active {
position: relative;
opacity: 1;
}
.testim .cont div .img img {
display: block;
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
}
.testim .cont div h2 {
font-family: Rubik,sans-serif!important;
    font-size: 1.4rem!important;
    color: #353535!important;
    font-weight: 500!important;
    letter-spacing: -1px!important;
    line-height: 1.2em!important;
    text-align: center!important;
    text-transform: none!important;
    font-style: normal!important;
	margin-top:20px;
}

.testim .cont div h3 {
color: #000!important;
font-size: 16px!important;
margin: 15px 0;
font-weight:300!important;
}


.testim .cont div p {
font-size: 19px;
font-weight:300!important;
color: #000;
width: 80%;
margin: auto;
margin-top:40px;
line-height:35px;
}
.testim .cont div.active .img img {
-webkit-animation: testim-show .5s ease-in-out forwards;
-moz-animation: testim-show .5s ease-in-out forwards;
-ms-animation: testim-show .5s ease-in-out forwards;
-o-animation: testim-show .5s ease-in-out forwards;
animation: testim-show .5s ease-in-out forwards;
}
.testim .cont div.active h2 {
-webkit-animation: testim-content-in .4s ease-in-out forwards;
-moz-animation: testim-content-in .4s ease-in-out forwards;
-ms-animation: testim-content-in .4s ease-in-out forwards;
-o-animation: testim-content-in .4s ease-in-out forwards;
animation: testim-content-in .4s ease-in-out forwards;
}
.testim .cont div.active p {
-webkit-animation: testim-content-in .5s ease-in-out forwards;
-moz-animation: testim-content-in .5s ease-in-out forwards;
-ms-animation: testim-content-in .5s ease-in-out forwards;
-o-animation: testim-content-in .5s ease-in-out forwards;
animation: testim-content-in .5s ease-in-out forwards;
}
.testim .cont div.inactive .img img {
-webkit-animation: testim-hide .5s ease-in-out forwards;
-moz-animation: testim-hide .5s ease-in-out forwards;
-ms-animation: testim-hide .5s ease-in-out forwards;
-o-animation: testim-hide .5s ease-in-out forwards;
animation: testim-hide .5s ease-in-out forwards;
}
.testim .cont div.inactive h2 {
-webkit-animation: testim-content-out .4s ease-in-out forwards;
-moz-animation: testim-content-out .4s ease-in-out forwards;
-ms-animation: testim-content-out .4s ease-in-out forwards;
-o-animation: testim-content-out .4s ease-in-out forwards;
animation: testim-content-out .4s ease-in-out forwards;
}
.testim .cont div.inactive p {
color: #9e9e9e!important;
-webkit-animation: testim-content-out .5s ease-in-out forwards;
-moz-animation: testim-content-out .5s ease-in-out forwards;
-ms-animation: testim-content-out .5s ease-in-out forwards;
-o-animation: testim-content-out .5s ease-in-out forwards;
animation: testim-content-out .5s ease-in-out forwards;
}
@-webkit-keyframes testim-scale {
0% {
-webkit-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-webkit-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-webkit-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-webkit-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@-moz-keyframes testim-scale {
0% {
-moz-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-moz-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-moz-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-moz-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@-ms-keyframes testim-scale {
0% {
-ms-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-ms-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-ms-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-ms-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@-o-keyframes testim-scale {
0% {
-o-box-shadow: 0px 0px 0px 0px #eee;
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
-o-box-shadow: 0px 0px 10px 5px #eee;
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
-o-box-shadow: 0px 0px 10px 5px #ea830e;
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
-o-box-shadow: 0px 0px 0px 0px #ea830e;
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@keyframes testim-scale {
0% {
box-shadow: 0px 0px 0px 0px #eee;
}
35% {
box-shadow: 0px 0px 10px 5px #eee;
}
70% {
box-shadow: 0px 0px 10px 5px #ea830e;
}
100% {
box-shadow: 0px 0px 0px 0px #ea830e;
}
}
@-webkit-keyframes testim-content-in {
from {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-moz-keyframes testim-content-in {
from {
opacity: 0;
-moz-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-moz-transform: translateY(0);
transform: translateY(0);
}
}
@-ms-keyframes testim-content-in {
from {
opacity: 0;
-ms-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-o-keyframes testim-content-in {
from {
opacity: 0;
-o-transform: translateY(100%);
transform: translateY(100%);
}
to {
opacity: 1;
-o-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes testim-content-in {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@-webkit-keyframes testim-content-out {
from {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-moz-keyframes testim-content-out {
from {
opacity: 1;
-moz-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-ms-keyframes testim-content-out {
from {
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-o-keyframes testim-content-out {
from {
opacity: 1;
-o-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes testim-content-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);
}
}
@-webkit-keyframes testim-show {
from {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes testim-show {
from {
opacity: 0;
-moz-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-moz-transform: scale(1);
transform: scale(1);
}
}
@-ms-keyframes testim-show {
from {
opacity: 0;
-ms-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-ms-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes testim-show {
from {
opacity: 0;
-o-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
-o-transform: scale(1);
transform: scale(1);
}
}
@keyframes testim-show {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes testim-hide {
from {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
}
@-moz-keyframes testim-hide {
from {
opacity: 1;
-moz-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-moz-transform: scale(0);
transform: scale(0);
}
}
@-ms-keyframes testim-hide {
from {
opacity: 1;
-ms-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-ms-transform: scale(0);
transform: scale(0);
}
}
@-o-keyframes testim-hide {
from {
opacity: 1;
-o-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-o-transform: scale(0);
transform: scale(0);
}
}
@keyframes testim-hide {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0);
}
}