* {
  box-sizing: border-box;
}

/* start styles rezise img */
.covered_close{
    position: relative;
    width: 100%;
    height: 100%;
}
.back_box_rezise{
    background-color: rgba(54, 53, 53, 0.445);
    width:30px;
    height: 100% !important;
    z-index: 100006;
}

.back_rezise{
    cursor: pointer;
    text-decoration: none;
    z-index: 10006;
}
.forward_box_rezise{
    background-color: rgba(54, 53, 53, 0.445);
    width:30px;
    height: 100% !important;
    z-index: 100006;
    display: flex;
    align-items: center;
}

.forward_rezise{
    cursor: pointer;
    text-decoration: none;
    z-index: 10006;
}


.img-container {
    display: flex;
    align-items: center;
    width: 1000px;
    height: 750px;
    flex-direction: row;
    position: absolute;
}

.back_box_rezise{
    background-color: rgba(54, 53, 53, 0.445);
    width: 30px;
    height: 100%;
    z-index: 100006;
    display: flex;
    align-items: center;
}

.img_middle{
    width: 100% !important;
    z-index: 10005;
    height: 100% !important;
}

.img_middle_box {
    position: relative;
    width: 1000px;
    height: 750px;
    overflow: hidden;
}

.full-height {
    width:100%;
    height:100%;
    background: #434a5448 ;
    position:fixed;
    top:0;
    left:0;
    z-index:90000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* end styles resize img */

.badge {
    position: absolute;
    background-color: #ff6464;
    top: 9%;
    right: 10%;
    color: white;
    font-size: 7pt;
    margin-left: 6px;
    margin-top: 5px;
    text-align: center;
    border-radius: 10px;
    height: 1rem;
    width: 2rem;
}

.badge_movil {
    background-color: #ff6464;
    color: white;
    top: 2%;
    right: 38%;
    font-size: 7pt;
    margin-left: 59%;
    margin-top: -6.5%;
    margin-bottom: 3%;
    border-radius: 10px;
    height: .9rem;
    width: 1.8rem;
    z-index: 1000;
}

.gallery-text {
  font-weight: bold;
  font-size: 20pt;
  color: #aab2bd;
}

.gallery-text-movil{
    font-weight: bold;
    font-size: 20pt;
    color: #434a54;
  }

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* Make the images invisible by default */
.Containers {
  display: none;
}

.Containers img {
    width: 48%;
}

/* forward & Back buttons */
.forward {
  cursor: pointer;
  position: absolute;
  right:22%;
  top: 40%;
  color: white;
  height: 100%;
  transition: 0.4s ease;
  border-radius: 10%;
  text-decoration: none;
}

.Back {
  cursor: pointer;
  position: absolute;
  left: 20.5%;
  top: 40%;
  height: 8%;
  padding: 10px;
  color: white;
  transition: 0.4s ease;
  border-radius: 50%;
  text-decoration: none;
}

.icon-gallery {
  font-size: 40pt;
  height: 25px;
  width: 18px;
  padding-left: -50px;
  padding-top: -20px;
  margin-top: -5px;
  color: white;
}

/* Place the "forward button" to the right */

/*when the user hovers,add a black background with some little opacity */
.Back:hover,
.forward:hover,
.forward_scaled:hover,
.forward_rezise:hover, 
.back_rezise:hover {
  color: white;
} 

/* Caption Info */
.Info {
  color: #e3e3e3;
  font-size: 16px;
  padding: 10px 14px;
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

/* Worknumbering (1/3 etc) */
.MessageInfo {
  color: #f2f2f3;
  font-size: 14px;
  padding: 10px 14px;
  position: absolute;
  top: 0;
}

/* The circles or bullets and indicators */
.dots {
  cursor: pointer;
  height: 16px;
  width: 16px;
  margin: 0 3px;
  background-color: #aab2bd;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.5s ease;
}

.enable,
.dots:hover {
  background-color: #434a54;
}


@media (max-width: 500px) {
    .Containers img {
        width: 100%;
    }
    .Back {
        left: 0;
        top: 30%;
    }
    .forward {
        right: 7%;
        top: 34%;
    }
}