/*

CC 2.0 License Iatek LLC 2018
Attribution required

*/


@media (min-width: 768px) and (max-width: 991px) {
  /* Show 4th slide on md  if col-md-4*/
    section#Experiencias .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }

}

@media (min-width: 576px) and (max-width: 768px) {
  /* Show 3rd slide on sm  if col-sm-6*/
    section#Experiencias .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }

}
@media (min-width: 576px) {
	
    .carousel-item {
        margin-right: 0;
    }

    /* show 2 items */
    section#Experiencias .carousel-inner .active + .carousel-item {
        display: block;
    }
    
    section#Experiencias .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }

    section#Experiencias.carousel-inner .carousel-item-next {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    /* left or forward direction */
    section#Experiencias .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    } 
    
    /* farthest right hidden item must be abso position for animations */
    section#Experiencias .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    section#Experiencias .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

/*MD*/
@media (min-width: 768px) {

    /* show 3rd of 3 item slide */
    section#Experiencias .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
 
    section#Experiencias .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
  
    
    section#Experiencias .carousel-inner .carousel-item-next {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    
    /* left or forward direction */
    section#Experiencias  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* right or prev direction */
    section#Experiencias .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}


/*LG */
@media (min-width: 991px) {

    /* show 4th item */
    section#Experiencias .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }
    
    section#Experiencias .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    
    /* Show 5th slide on lg if col-lg-3 */
    section#Experiencias .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    section#Experiencias .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* right or prev direction //t - previous slide direction last item animation fix */
    section#Experiencias .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

/*LG 6th  -  if you want a carousel with 6 slides */
@media (min-width: 991px) {

        /* show 5th and 6th item */
 /*   .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }

    
  
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
      transition: none;
    }
*/
    
  
  /*show 7th slide for animation when its a 6 slides carousel */
 /*      .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item  + .carousel-item {
        position: absolute;
        top: 0;
        right: -16.666666666%;
        z-index: -1;
        display: block;
        visibility: visible;
  }
  */
  
      /* forward direction > */
 /*   .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
  */
      /* prev direction < last item animation fix */
 /*   .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
*/
}

section#Experiencias .carousel-control-prev, #Experiencias .carousel-control-next {
    top: 45%;
    width: 50px;
    height: 50px;
    background-color:rgba(225,0,49,0.9) !important;
}
section#Experiencias .carouselDescripcion{
 /* background-color: rgb(0,161,138,1);*/
  background-color:rgba(225,0,49,0.9);
  position: absolute;
  top: 90%;
  width: 89%;
  height: 46rem;
  padding-top: 1rem;
  padding-right: 1rem;
  cursor: pointer;
  overflow: scroll;
}
section#Experiencias .ajax{

   top: 0% !important;

 }
section#Experiencias .carouselDescripcion::-webkit-scrollbar {
    width: 8px;     /* Tamaño del scroll en vertical */
    height: 8px;    /* Tamaño del scroll en horizontal */
    display: none;  /* Ocultar scroll */
}
/* Ponemos un color de fondo y redondeamos las esquinas del thumb */
section#Experiencias .carouselDescripcion::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
section#Experiencias .carouselDescripcion::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
/* Cambiamos el fondo cuando esté en active */
section#Experiencias .carouselDescripcion::-webkit-scrollbar-thumb:active {
    background-color: #999999;
}
/* Ponemos un color de fondo y redondeamos las esquinas del track */
section#Experiencias .carouselDescripcion::-webkit-scrollbar-track {
    background: #e1e1e1;
    border-radius: 4px;
}
/* Cambiamos el fondo cuando esté en active o hover */
section#Experiencias .carouselDescripcion::-webkit-scrollbar-track:hover,
.carouselDescripcion::-webkit-scrollbar-track:active {
  background: #d4d4d4;
}
section#Experiencias .carouselDescripcion:hover{
  top:0rem;
  transition-property: top;
    transition-duration: 0.8s;
    transition-timing-function: linear;
    transition-delay: 0.2s;
    /*overflow: scroll;*/
}
section#Experiencias .carouselDescripcion big{
  padding-left: 1rem;
  font-size: 1rem; 
  color: white;
}
section#Experiencias .carouselDescripcion hr{
  border-top: 1px white solid;
}
section#Experiencias .carouselDescripcion small{
  padding-left: 1rem;
  font-size: 0.75rem; 
  color: white;
  line-height: 1rem;
}

section#Experiencias .carouselDescripcion p{
  padding-left: 1rem;
  margin-bottom: 0rem !important;
  font-size: 0.75rem; 
  color: white;
  letter-spacing: 0;
  text-transform: initial;
}
section#Experiencias .carouselDescripcion button{
    background-color: rgb(255,255,255);
    border: none;  
    border-radius: 0.5rem;
    font-size: 1rem;
    color: rgb(2,30,107);
    letter-spacing: 0.2rem;
    padding: 1rem 1rem;
    position: absolute;
    bottom: 2rem;
    right: 2rem;

}
.btnexpccc {
    position: absolute;
    bottom: 19rem;
    right: 2rem;
    background-color: rgb(255,255,255);
    border: none;
    border-radius: 0.5rem;
    font-family: Lato !important;
    font-size: 0.75rem;
    color:white;
    letter-spacing: 0.2rem;
    padding: 1rem 1rem;
}

section#Experiencias .carousel-item img{
    display: block;
    width: 100%;
    height: 460px;
    object-fit: cover;
}
#modalexp .modal-content{
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  object-fit: cover;
  position: relative;
  padding-top: 1rem;
  padding-bottom: 4rem;
  color: rgba(225,0,49,0.1);
  background-color: rgb(255, 255, 255);
  overflow: hidden;
}
#modalexp .descexp{
  background-color: rgba(225,0,49,0.5);
  position: absolute;
  top: 0rem;
  left: 15px;
  max-width: 448px;
  height: 332px;
}
#modalexp .modal-content .descexp h1{
  font-size: 1rem; 
  color: white;
  padding-top: 2rem;
  padding-left: 2rem;
}
#modalexp .modal-content .btnexp button{
    background-color: rgba(225,0,49,1);
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    color: white;
    letter-spacing: 0.2rem;
    padding: 1rem 2rem;
}
#modalexp .modal-content .btnexp{
  margin-top: 2rem;
}
#logoexp{
  max-width: 340px;
  padding-left: 1rem;
  padding-top: 1.5rem;
}
#modalexp .modal-content big{
  font-size: 1rem; 
  color: #00a18a;
}
#modalexp .modal-content small{
  font-size: 0.75rem; 
  color: white;
}

#modalexp .modal-content p{
  padding-left: 5rem;
  padding-right: 1rem;
  margin-bottom: 0rem !important;
  font-size: 1rem; 
  color: white;
  letter-spacing: 0;
}

#resuExp h1{
  font-size: 1rem; 
  color: #000;
}
#resuExp small{
  font-size: 1rem; 
  color: #000;
  line-height: 5rem;
  margin:0;
}
#resuExp big{
  font-size: 1rem; 
  color: #000;
  line-height: 5rem;
  margin:0;
  text-align: center !important;
}
#resuExp p{
  font-size: 1rem; 
  color: #000;
  letter-spacing: 0;
}
