h1 {
  font-size: 1.5em;
  text-align: center;
  margin: 1.2em 0;

}


/*Carousel*/
.carrousel {
  background: #ffffff;
  text-align: center;
  
  height: 400px;
  max-width: 750px;
  margin: auto;
  position: relative;
  overflow: hidden;
}

.carrousel .slides {
  width: 700%; /***very important to changge the percentage based on number of                slides also check the li lenght to change similary **/
  left: 0;
  padding-left: 0;
  padding-top: 1em;
  overflow: hidden;
  list-style: none;
  position: relative;

  -webkit-transition: transform .5s;
  -moz-transition: transform .5s;
  -o-transition: transform .5s;
  transition: transform .5s;
}
.slide ul{
    width:100%;
    float:left;
}


.carrousel .slides li {
  width: 15%;/***very important to changge the percentage based width assigned for .carrousel .slides   check .carrousel .slides similary **/
  position: relative;
  float: left;
  background-color:;
 
  height:auto;
}


.carrousel .slidesNavigation {
  display: block;
  list-style: none;
  text-align: center;
  bottom: 1em;
  /*--- Centering trick---*/
    /* Absolute positioning*/
    position: absolute; 
    /* Abosulte positioning*/
    width: auto; /*This width  is the addition of the width of all the navigations dots - So in this case is   104 because the navigation dots are 26px (width:10px and 6px marginleft + 6 px marginright) and there are 4 dots so 4x26=104 */
    left: 10%; /*Centering de element*/
    margin-left: -52px; /*adjusting the centering by applying a negative margin of half of the width*/
}
.carrousel input {
  display: none;
}
.carrousel .slidesNavigation label {
  float: left;
  margin: 6px;
  display: block;
  height: 10px;
  width: 10px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: solid 2px #2980b9;
  font-size: 0;
}
/* You have to repeat this with each slide
TODO: make it easier with SCSS
25% movement 100/slides-num

eg: for 5 slides take 100/5=20%
eg: for 6 slides take 100/6=16% or 15% based on any padding or margin added

*/
#radio-1:checked ~ .slides {
  transform: translateX(0%);
}
#radio-2:checked ~ .slides {
  transform: translateX(-15%);
}
#radio-3:checked ~ .slides {
  transform: translateX(-30%);
}
#radio-4:checked ~ .slides {
  transform: translateX(-45%);
}
#radio-5:checked ~ .slides {
  transform: translateX(-60%);
}
#radio-6:checked ~ .slides {
  transform: translateX(-75%);
}


.carrousel .slidesNavigation label:hover {
   cursor: pointer;
}
/* You have to repeat this with each slide/dot and check wwther added calculated persentage of translateX  */
.carrousel #radio-1:checked ~ .slidesNavigation label#dotForRadio-1,
.carrousel #radio-2:checked ~ .slidesNavigation label#dotForRadio-2,
.carrousel #radio-3:checked ~ .slidesNavigation label#dotForRadio-3,
.carrousel #radio-4:checked ~ .slidesNavigation label#dotForRadio-4,
.carrousel #radio-5:checked ~ .slidesNavigation label#dotForRadio-5,
.carrousel #radio-6:checked ~ .slidesNavigation label#dotForRadio-6 {
  background: #2980b9;
}


@media  (max-width: 480px) {
  .carrousel li p {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
  .carrousel li q {
      font-size: 1em;
  }
  .carrousel li img {
     width:2em;
     margin-left: -1em;
     margin-right: 0.25em;
  }
  

}

@media  (max-width: 796px) {
  .carrousel{
    height: auto;
  }
  
  
  .testimo-out{
    width:100%;
    height:auto;
    background-color:blue;
    float:left;
}
 .testimo-pho{
      width:150px;
      height:180px;
      float:left;
       background-color:lightblue;
       overflow:hidden;
        border-radius: 15px;
       
  }
  
  .testimo-pho img{
    width:100%;
    height:auto;
    
    float:left;
}

  
  
    .testimo-cont-out{
      width:100%;
      height:auto;
      background-color:pink;
      margin-top:150px;
  }
  
  
  .testimo-cont-in{
    width:90%;
    margin-left:4%;
    text-align:left;
    
    
}

.testimo-cont-in-h{
    width:100%;
    margin-top:25%;
    text-align:left;
    margin-left:140px;
    
}



}







@media  (min-width: 797px) {

.testimo-out{
    width:100%;
    height:350px;
    background-color:;
    float:left;
}
.testimo-pho{
    width:200px;
    height:250px;
    margin-top:5px;
    margin-left:5px;
    background-color:lightblue;
    float:left;
     position:absolute;
       z-index:5;
       border-radius: 15px;
      overflow:hidden;
      
        -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  
      
}

.testimo-pho img{
    width:100%;
    height:auto;
    
    float:left;
}

.testimo-cont-out{
     width:600px;
    height:250px;
    background-color:pink;
    float:right;
    margin-top:70px;
     border-radius: 20px;
     margin-right:5%;
    
    
}
.testimo-cont-in{
    width:80%;
    margin-left:15%;
    text-align:left;
    background-color:;
    
}

.testimo-cont-in-h{
    width:100%;
    margin-top:-10%;
   line-height: 0;
    
}


.testimo-cont-in-h p:first-child{
  font-size:30px;
     text-align:left;
    font-weight: bold;
    
}


.testimo-cont-in-h p:nth-child(2){
  font-size:10px;
    
}


.testimo-cont-in-p{

    margin-top:10%;

    
}

}