html {
  scroll-behavior: smooth;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {

 padding-right: 0 !important; 
padding-left: 0 !important; 
}
body{
  background-color:white;
  overflow-x:hidden;
}

a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}
a:hover, a:focus {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}
#detalles{
  padding-top:4vw;
}
.image-type:hover{
    cursor:pointer;
}
.return-back:hover{
    cursor:pointer;
}
.return-back{
  position: absolute;
  top: -1.5vw; 
  right: 2vw; 
  font-size: 35px;
  z-index: 9999;
}

.x {
  font-family: "Quicksand_Light";
  position: relative;
  font-size: 20px;
}

.cerrar {
  position: absolute;
  font-size: 12px;
  bottom: -8px;
  font-family: "Quicksand_Regular";
  right: -4px;
}

.cerrar2 {
position: absolute;
font-size: 12px;
bottom: -8px;
font-family: "Quicksand_Regular";
right: -4px;
}
.return-back2{
  position: absolute;
  top: -2.5vw;
  right: 5vw;
  font-size: 35px;
  cursor: pointer;
  z-index: 1100;
}
.details-pre-title{
  font-family: "Quicksand_Regular";
  color:#2d2d2d;
  font-size:20px;
  margin-bottom: -12px;
}

.titulos-descrip{
  margin: 5px 0;
  font-family: "Quicksand_Bold";
  text-transform: uppercase;
}
.details-title{
  font-family: "Quicksand_Regular";
  color:#2d2d2d;
  font-size:55px;
  font-weight: bold;
}
.details-info{
  color:#202020;
  font-family: "Quicksand_Regular";
  font-size:12px;
  padding-bottom: 1vw;
}

.details-colors{
  margin-top: 14vh;
}
.max-img-option{
max-width: 112.5px;
}

.max-img-option2{
  max-width: 67.5px;
  }


.details-title-size{
  font-family: "Quicksand_Regular";
  text-align: left;
  font-size: 12px;
  margin-top:10px;

  min-height: 50px;
}

.details-title-size2{
  font-family: "Quicksand_Regular";
  text-align: center;
  font-size: 12px;
  margin-top:10px;

  min-height: 50px;
}

.details-colors  .details-title-size{
  text-align: center;
}
.tam{
  width: 470px;
  /* height: 470px; */
  position: relative;
  margin: 0 auto;
}

.tam2{
  width: 600px;
  height: 600px;;
  position: relative;
  margin: 0 auto;
}
.image-split{
  width: 100%;
  position: absolute;
  top:0;
  left:0;
}
.image-effect-actual{
  border-right:1px solid #b4b4b4;
}
.image-effect-aparecer{
  width: 0;
  height: max-content;
  overflow:hidden;
  transition: 2s;
}
.image-effect-aparecer2{

width: 100%;
}


.image-effect-aparecer-cubiertos2{

width: 90%;
}


.split-images{
  margin-top: 6vw;
}

.split-images-cubiertos{
  margin-top: -2vw;
}
.titulo-match-details{
    
  font-family: "Quicksand_Light";

  font-size: 59px;
  color:#2d2d2d;
  font-weight: bold;
  
  margin-top:3vw;
  margin-bottom:0;

  text-transform: uppercase;
}
.hover-images{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0004;
    opacity: 0;
    cursor: pointer;
}
.hover-images a{
  margin-bottom: -17px;
  font-size: 59px;
  padding: 0px 25.71px;
  border: 2px solid;
  margin-left: calc(50% - 46px);
  margin-top: calc(50% - 46px);
  border-radius: 60px;
  position: absolute;
  font-family: "Quicksand_Light";
}

.hover-images:hover{

    opacity: 1;
}
.collection{
    margin: 1.666%;
    height: 330px;
    max-width: 30%;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  background-color: white;
  overflow: hidden;
  outline: 0;
  padding-top: 10vh;
  

}
.modal-container {
  
  

}

.mobile{
  display: none;
}
.img-modal{
  max-width: 700px;
  margin: 0 auto;
}
@media (max-width: 1199.98px) { 
    .collection{
      margin-bottom:2vw;
      height: 300px;
  }

  .img-modal{
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 991.98px) { 
  .details-panel-info{
      padding: 25px;
      margin: 0 auto;
  }
  .titulo-match-details {
  font-size: 35px;
  margin: 0 auto;
  margin-bottom: 4vw;
}
  .collection{
      height: 350px;
      margin: 1.666%;
      max-width: 46%;
  }

  .hover-images:hover {
    opacity: 0;
    cursor: default;
}
.hover-images a{
  display: none;
}
.mobile{
  display: block;
}
.desk{
  display: none;
}
}
@media (max-width: 767.98px) { 
  .tam{
    width: 300px;
    height: 300px;
    position: relative;
    margin: 0 auto;
  }
  .tam2{
    width: 300px;
    height: 300px;
    position: relative;
    margin: 0 auto;
  }
  .collection {
      min-height: 510px;
      margin: 1.666%;
      max-width: 97%;
  }
}


@media (max-width: 575.98px) {
  .collection {
  margin-bottom: 6vw;
  min-height: 468px;

  


}

.details-title-size{
font-family: "Quicksand_Regular";
text-align: left;
font-size: 9px;
margin-top:10px;

min-height: 50px;
}
.hover-images a {
  margin-bottom: -17px;
  font-size: 59px;
  padding: 0px 25.71px;
  border: 2px solid;
  margin-left: calc(50% - 46px);
  margin-top: 40%;
  cursor: pointer;
}

.tam{width: 200px;height: 200px;position: relative;margin: 0 auto;}
.tam2{
width: 200px;
height: 200px;
position: relative;
margin: 0 auto;
}
}