/*
Fade content bs-carousel with hero headers
Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com
Image credits: unsplash.com
*/

/********************************/
/*       Fade Bs-carousel       */
/********************************/

.fade-carousel .carousel-indicators > li {
    margin: 0 2px;
    background-color: #f39c12;
    border-color: #f39c12;
    opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
  width: 10px;
  height: 10px;
  opacity: 1;
}

#cari {

  position: absolute;
  top: 88%;
}
/********************************/
/*          Hero Headers        */
/********************************/
.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #377bb5;;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}
.hero h1 {
    font-size: 4em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}


.heroDer {
    position: absolute;
    top: 50%;
    left: 73%;
    z-index: 3;
    color: #377bb5;
    text-align: right;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
    -webkit-transform: translate3d(-50%,-50%,0);
    -moz-transform: translate3d(-50%,-50%,0);
    -ms-transform: translate3d(-50%,-50%,0);
    -o-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}

.heroDer h1 {
    font-size: 3em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.fade-carousel .carousel-inner .item .heroDer {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s; 
}


.fade-carousel .carousel-inner .item.active .heroDer {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s;    
}



.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s; 
}
.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s;    
}

/********************************/
/*            Overlay           */
/********************************/
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    
}


/********************************/
/*          Media Queries       */
/********************************/
@media only screen and (max-width: 1440px) {
.hero {
    position: absolute;
    top: 49%;
    left: 50%;
    z-index: 3;
    color: #377bb5;;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}


.hero h1 {
    font-size: 3em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}


.heroDer {
    position: absolute;
    top: 55%;
    left: 75%;
    z-index: 3;
    color: #377bb5;
    text-align: right;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
    -webkit-transform: translate3d(-50%,-50%,0);
    -moz-transform: translate3d(-50%,-50%,0);
    -ms-transform: translate3d(-50%,-50%,0);
    -o-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}

.heroDer h1 {
    font-size: 2em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}




}
/* Termina Pantalla (Ame)*/

@media only screen and (max-width: 1024px) {

.hero h1 {
    font-size: 2em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}

#Tmñt {

  font-size: 15px;
}



.heroDer {
    position: absolute;
    top: 60%;
    left: 77%;
    z-index: 3;
    color: #377bb5;
    text-align: right;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
    -webkit-transform: translate3d(-50%,-50%,0);
    -moz-transform: translate3d(-50%,-50%,0);
    -ms-transform: translate3d(-50%,-50%,0);
    -o-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}


.heroDer h1 {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}



}

/* Termna Pantalla laptop chicas*/



@media only screen and (max-width: 800px) {

.hero h1 {
    font-size: 20px;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}


#Tmñt {

  font-size: 12px;
}


.heroDer {
    position: absolute;
    top: 60%;
    left: 77%;
    z-index: 3;
    color: #377bb5;
    text-align: right;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
    -webkit-transform: translate3d(-50%,-50%,0);
    -moz-transform: translate3d(-50%,-50%,0);
    -ms-transform: translate3d(-50%,-50%,0);
    -o-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}



.heroDer h1{
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}


  }

  /* Termna Pantalla tablet*/


  @media only screen and (max-width: 600px) {



.hero h1 {
    font-size: 20px;
    margin: 0;
    padding: 0;
}

#Tmñt {

  font-size: 13px;
}


#Tmñc {

width: 70%;
font-size: x-small;

}

.heroDer {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #377bb5;;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}

.heroDer h1 {
    font-size: 19px;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}



}
/* Termina telefono*/