@charset "utf-8";
.overlay {
     position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: visible; /* Este valor se cambió de hidden a visible */
    opacity: 1; /* Este valor se cambió de 0 a 1 */
}
#popup:target {
    visibility: hidden;
    opacity: 0;
    z-index:90000;
}
#popup {
    top:-10%;
    z-index:90000;
}
#popupBody{
    width: 48%;
    padding: 2%;
    border-radius: 15px;
    box-shadow: 0 0 5px #CCC;
    background: #FFF;
    position: relative;
    transition: all 5s ease-in-out;
    margin: 20% auto;    
}
#cerrar{
    position: absolute;
    top: -5px;
    width:10px!important;
    right: 30px;
    transition: all 200ms;
    font-size: 2vw;
    font-weight: bold;
    text-decoration: none;
    color: #8C9399;
}

.carousel-control-prev-icon2,
.carousel-control-next-icon2 {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  
}

.carousel-control-next-icon2:after
{
  content: '>';
  font-size: 40px;
  color: #ABB3BA;
   opacity:1;

}

.carousel-control-prev-icon2:after {
  content: '<';
  font-size: 40px;
  color: #ABB3BA;
}
.popupContent .carousel-control-prev,.popupContent .carousel-control-next{
    opacity:1;
}

.popupContent{
    position: relative;
    width:90%;
    left:5%;

}
#carouselpupup .carousel-control-prev{
    position: absolute;
    top:10%;
    left:-12%;
}

#carouselpupup .carousel-control-next{
     position: absolute;
     left: 97%;
     top:10%;
}

@media (max-width: 770px) {
 

  #slider1 {
    background-image: url(../img/popup/1.jpg);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 100% ;
    height:130px;
    width:255px;
  }

  #slider2 {
    background-image: url(../img/popup/2.jpg);
    background-position: center left;
     background-repeat: no-repeat;
    background-size: 100% 100%;
    height:130px;
    width:255px;
  }

  #slider3 {
    background-image: url(../img/popup/3.jpg);
    background-position: center right;
     background-repeat: no-repeat;
    background-size: 100% 100%;
     height:130px;
    width:255px;
  }
   #slider4 {
    background-image: url(../img/popup/4.jpg);
    background-position: center right;
     background-repeat: no-repeat;
    background-size: 100% 100%;
     height:130px;
    width:255px;
  }
  #popupBody{
    width: 300px;
    height:160px;
    padding: 2%;
    border-radius: 15px;
    box-shadow: 0 0 5px #CCC;
    background: #FFF;
    position: relative;
    transition: all 5s ease-in-out;
    margin: 20% auto;    
}
.popupContent{
    position: relative;
    top:10px;
}

#popupBody{
   top:30%!important; 
}
#cerrar{
    position: absolute;
    top: -5px;
    left:280px;
    width:20px!important;
    transition: all 200ms;
    font-size: 5vw;
    font-weight: bold;
    text-decoration: none;
    color: #8C9399;
}

.carousel-control-next-icon2:after
{
    content: '>';
    font-size: 20px;
    color: #ABB3BA;
    opacity:1;
    top:50%;

}
.carousel-control-prev,.carousel-control-next{
    top:50%;
}

.carousel-control-prev-icon2:after {
    content: '<';
    font-size: 20px;
    color: #ABB3BA;
}
}