.carousel-indicators li {
  width: 8px !important; 
  height: 8px !important; 
  border-radius: 100%;
  z-index: 0;
  cursor:pointer;
  background-color: #dcdcdc;
}

.carousel-inner > .item {
  position: relative;
  display: none;
  -webkit-transition: 3s ease-in-out left;
  -moz-transition: 3s ease-in-out left;
  -o-transition: 3s ease-in-out left;
  transition: 3s ease-in-out left;
}


.carousel-indicators .active {
  background-color: #000000;
}

#carouselMain .carousel-indicators {
  bottom: -30px;
}
  
.active{
 font-weight: bold;
}

.over-div {
  position:absolute;
  width: 500px;
}

.experience{
  margin-top:2px; 
  margin-top: -100px;
  height: 100px;
  font-weight: 100;
  color: #000000;
  position: relative;
  z-index: 20;
}

.experience-bkg{
  background-color: white !important;
  position: relative;
  top: -100px;
  opacity: 0.65;
  height: 100px;
  z-index: 0;
}

#carouselExp2 .carousel-indicators li {
  width: 8 !important; 
  height: 8px !important; 
  border-radius: 100%;
  z-index: 0;
  cursor:pointer;
}

#carouselExp2 .carousel-indicators {
  bottom: 70px;
}



.acompanyar-te-background{
    background-color: #f2f5f4;
}

.acompanyar-te-title{
    font-size:2rem;
    line-height:2rem;
    color: #212529;    
}

.background-white{
  background-color: #ffffff;
}

.text-caption-entrada{
  font-size: 4rem;
  line-height: 4rem;
  color: #ffffff;
}

.text-entrada{
  font-size: 2rem;
  line-height: 2rem;
  color: #ffffff;
  text-align: center;
}

.banner-ulleres-text{
  font-size:3rem;
  line-height:3rem;
  color: #212529; 
}

#qui {
  height: calc(100vh - 55px) !important;
}

/* X Small devices ( phones, 376px and 576pc)*/
@media (min-width: 300px) and (max-width: 575.98px) {

  .experience{
    margin-top: -130px !important;
    height: 130px !important;
  }
  
  .experience-bkg{
    top: -130px !important;
    height: 130px !important;
  }

  .acompanyar-te-title{
    font-size:2rem;
    line-height:2rem;
    color: #212529; 
  }
  .acompanyar-te-text{
    color: #212529;
    font-size:1rem;
    
  }

  .banner-ulleres-text{
    font-size:1.2rem;
    line-height:0.5rem;
    color: #212529; 
    margin-bottom: 0px;
  }

  .over-div {
    position:absolute;
    width: 200px;
    margin-top: -35px;
    margin-left: 13px;
  }

  .text-caption-entrada{
    font-size: 3rem;
    line-height:3rem;
    color: #ffffff;
  }
  
  .text-entrada{
    font-size: 1.8rem;
    line-height: 1.8rem;
    color: #ffffff;
    text-align: center;
  }

  #qui-caption{
    height: 250px;
  }
  
  #qui .carousel-caption {
    top: 50%;
    transform: translateY(-50%);
  }

  #fotoQui {
    border-style: solid;
    border-width: 0.4rem;
    border-color: #ffffff;
    height: 287px !important;
    width: 291px !important;
    position: relative;
  }

  #passio .title{
    font-size:2.5rem;
    line-height:2.5rem;
  }

  #experience .title{
    font-size:2.5rem;
    line-height:2.5rem;
  }

  #experience .subtitle {
    font-size:2.5rem;
    line-height:2.5rem;
  }

  #carouselExp2 {
    width: 350px;
  }  

}


/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {

  .experience{
    margin-top: -100px !important;
    height: 100px !important;
  }
  
  .experience-bkg{
    top: -100px !important;
    height: 100px !important;
  }
    .acompanyar-te-title{
      font-size:2rem;
      line-height:2rem;
      color: #212529; 
    }
    .acompanyar-te-text{
      color: #212529;
      font-size:1rem;
      
    }

    .banner-ulleres-text{
      font-size:2rem;
      line-height:2rem;
      color: #212529; 
    }

    .over-div {
      position:absolute;
      width: 300px;
      margin-top: -30px;
      margin-left: 10px;
    }
 
    #fotoQui {
      border-style: solid;
      border-width: 0.4rem;
      border-color: #ffffff; 
      width: 390px !important;
      height: 298px !important;
      position: relative;
    }

    #qui-caption{
      height: 250px;
    }
      
    #qui .carousel-caption {
      top: 50%;
      transform: translateY(-50%);
    }

    #passio .title{
      font-size:2.5rem;

    }
  
    #experience .title{
      font-size:3rem;
      line-height:3rem;
    }
  
    #experience .subtitle {
      font-size:3rem;
      line-height:3rem;
    }

    #carouselExp2 {
      width: 400px;
    } 


    .experience{
      margin-top: -140px;
      height: 140px;
    }
    
    .experience-bkg{
      top: -140px;
      height: 130px;
    }
      
  }


  
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) { 

  .banner-ulleres-text{
    font-size:2rem;
    line-height:2rem;
    color: #212529; 
  }
  .over-div {
    position:absolute;
    width: 300px;
    margin-top: -10px;
    margin-left: 25px;
  }
 
  .text-caption-entrada{
    font-size: 3rem;
    line-height: 3rem;
    color: #ffffff;
  }

  .text-entrada{
    width: 320px;
    font-size:1.4rem;
    line-height:1.4rem;
  }

  #fotoQui {
    border-style: solid;
    border-width: 0.4rem;
    border-color: #ffffff; 
    width: 464px  !important;
    height: 354px !important;
    position: relative;
  }

  #qui-caption{
    height: 300px;
  }

  #qui .carousel-caption {
    top: 50%;
    transform: translateY(-50%);
  }

  #passio .title{
    font-size:2.8rem;
  }

  #experience .title{
    font-size:3rem;
    line-height:3rem;
  }

  #experience .subtitle {
    font-size:3rem;
    line-height:3rem;
    width: 100%;
  }
  
  #experience .text {
    width: 500px;
  }

  #carouselExp2 {
    width: 400px;
  }
  
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) { 

  .banner-ulleres-text{
    font-size:2rem;
    line-height:2rem;
    color: #212529; 
  }
  .over-div {
    position:absolute;
    width: 800px;
    margin-top: 100px;
  }

  .text-caption-entrada{
    font-size: 3rem;
    line-height: 3rem;
    color: #ffffff;
  }

  .text-entrada{
    width: 320px;
    font-size:1.4rem;
    line-height:1.4rem;
  }
 
  #fotoQui {
    border-style: solid;
    border-width: 0.4rem;
    border-color: #ffffff; 
    width: 464px  !important;
    height: 354px !important;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
  }

  #qui .carousel-caption {
    top: 50%;
    transform: translateY(-50%);
  }

  #passio .title{
    font-size:2.8rem;
  }

  #experience .title{
    font-size:3rem;
    line-height:3rem;
  }

  #experience .subtitle {
    font-size:3rem;
    line-height:3rem;
    width: 100%;
  }
  
  #experience .text {
    width: 500px;
  }

  #carouselExp2 {
    width: 400px;
  }

  .textExp2 {
    font-size: 1.2rem !important;
  }
  

}

  
/* Extra large devices (large desktops, 1200px )*/
@media (min-width: 1200px) and (max-width: 1499.98px){ 
  .acompanyar-te-title{
    font-size:2rem;
    line-height:2rem;
    color: #212529;
  }   

  .acompanyar-te-text{
      color: #212529;
      font-size:1rem;
  }

  .banner-ulleres-text{
    font-size:2rem;
    line-height:2rem;
    color: #212529; 
  }

  .over-div {
    width: 1200px;
    position:absolute;
    margin-top: 105px;
  }

  .text-entrada{
    width: 450px;
  }

  #fotoQui {
    border-style: solid;
    border-width: 0.4rem;
    border-color: #ffffff; 
    width: 551px  !important;
    height: 420px !important;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
  }


  #qui .carousel-caption {
    top: 50%;
    transform: translateY(-50%);
  }

  #passio .title{
    font-size:2.8rem;
  }

  #experience .title{
    font-size:3rem;
    line-height:3rem;
  }

  #experience .subtitle {
    font-size:3rem;
    line-height:3rem;
    width: 100%;
  }
  
  #experience .text {
    width: 500px;
  }

  #carouselExp2 {
    width: 450px;
  }
  
  .textExp2 {
    font-size: 1.2rem !important;
  }
}



/* Extra large devices (large desktops, 1500px and up)*/
@media (min-width: 1500px) {
  
    .acompanyar-te-title{
      font-size:3rem;
      line-height:3rem;
      color: #212529;
    }   

    .acompanyar-te-text{
        color: #212529;
        font-size:1.2rem;
    }
      
    .banner-ulleres-text{
      font-size:3rem;
      line-height:3rem;
      color: #212529; 
    }

    .over-div {
      position:absolute;
      width: 1299px;
      margin-top: 155px;
    }

    .text-entrada{
      width: 500px;
    }
  
  #fotoQui {
    border-style: solid;
    border-width: 0.4rem;
    border-color: #ffffff; 
    width: 751px  !important;
    height: 571px !important;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
  }
      
  #qui .carousel-caption {
    top: 50%;
    transform: translateY(-50%);
  }

  #passio .title{
    font-size:5rem;
  }

  #experience .title{
    font-size:5rem;
    line-height:5rem;
  }

  #experience .subtitle {
    font-size:5rem;
    line-height:5rem;
    width: 100%;
  }
  
  #experience .text {
    width: 750px;
    font-size:1.5rem !important;
  }

  #carouselExp2 {
    width: 450px;
  }
  
  .textExp2 {
    font-size: 1.2rem !important;
  }
}