@import url(https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext);

* {
  margin:0;
  padding:0;
}



.wrapperes {
  width:100%;
  height:100%;
  background:#ffffff;
  margin-top: 230px;
}

/* slide module wrapper */
.testimonial {
  top:50%;
  transform:translateY(-50%);
  position:relative;    
}

.testimonial .testimonial-ul {
  height:250px;
  list-style:none;
  margin:0 auto;
  width:50%;    
  position:relative;
  /* border-top:5px solid #ffffff; */
  border-bottom:2px solid #000;
  overflow:hidden;
}

/* slides */
.testimonial-slide {
  width: 100%;
  height:100%;
  margin:0 auto;
  position:absolute;  
  right: 0;
  left: 0;
  opacity: 0;
  z-index:1;
}

.testimonial-slide.active {
  z-index: 2;
  opacity: 1;
  transition:opacity 1s ease-in-out;
  -webkit-backface-visibility:hidden;
}

/******* text  ***/
.testimonial p {
  font-family:'lato';
  text-align:center;
  font-size:2em;
  padding:15px 0;
  top:50%;
  position:relative;
  transform:translateY(-50%);
}

/******* quotes  ***/
.testimonial:before {
  content:'\201C';
  display:block;
  font-size:150px;
  line-height:0;
  text-align:center;
  position: absolute;
  left:0;
  top:35px;
  right:0;
  margin:0 auto;
  z-index:2;
}

.top-left {
  position:absolute;
  top:0;
  left:0;
  display:block;
  height:2px;
  width:44%;
  background:#000;
  margin-right:10px;
}

.top-right {
  position:absolute;
  top:0;
  right:0;
  display:block;
  height:2px;
  width:44%;
  background:#000;
  margin-left:10px;
}

/********* dots */
.dots-wrapper {
  margin-top:20px;
  width:100%;
  display:inline-block;
  list-style:none;
  text-align:center;  
}

.dots-wrapper li {
  position:relative;
  width:14px;
  height:14px;
  background:#000;
  border-radius:100%;
  display:inline-block;
  margin-right:7px;
  cursor:pointer;  
  overflow:hidden;  
}

.dots-wrapper li:last-child {
  margin-right:0;
}

.dots-wrapper li:hover {
  background:#000;
}

.dots-wrapper li:after {
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  border-radius:100%;
  background:#fff;
  top:0;
  left:0;
  /*opacity:0;
  transition: all .15s ease-in-out;*/
  /*zoom in*/
  /*
  transform:scale(0);
  transition:all .3s ease-in-out;
  */
  /*slide up*/
  transform:translateY(15px);
   transition:all .1s ease-out;
  -webkit-backface-visibility:hidden;
}

.dots-wrapper li.active:after {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  /*opacity:1;*/
  /*zoom in*/
  /*transform:scale(1);*/
  /*slide up*/
  transform:translateY(0px);
}

/******* transitions */
.js-reset-left{
  left:auto
}

.testimonial-slide.left{
	left:-100%;
	right:auto;
}

.testimonial-slide.right{
	right:-100%;
	left: auto;
}

.transition .testimonial-slide.left{
  left:0%;
}
.transition .testimonial-slide.right{
  right:0%;
}

.transition .testimonial-slide.shift-right{
  right: 100%;
  left:auto;
}
.transition .testimonial-slide.shift-left{
  left: 100%;
  right:auto;
}

.transition .testimonial-slide{
	transition-property: right, left, margin;
}

/********* media queries ******/

/***** mobile */
@media only screen and (min-width: 320px) and (max-width: 480px) {
  .testimonial p {
    font-size:1.5em;    
  }  
  .testimonial .testimonial-ul {
    width:80%;
  }  
  .top-left {
    width:30%;
  }
  .top-right {
    width:30%;
  }
  
}

/***** tablet */
@media only screen and (min-width: 481px) and (max-width: 1024px) {
  .testimonial p {
    font-size:1.8em;
  }
  .testimonial .testimonial-ul {
    width:70%;
  }  
  .top-left {
    width:40%;
  }
  .top-right {
    width:40%;
  }
  .testimonial:before { 
    font-size:150px;
  }
}