.ajustarimagen{
position: relative; /* Se usa para que no se salga la imagen de la caja, ya que la imagen tiene position absolute */
width: 300px;
height: 400px;
background-color: #ddd;
}
.ajustarimagen img{
position: absolute; /* se usa en caso de este div, donde tiene la altura y el ancho definido, sin esto top, right y left no funcionarían */
width: 300px;
top: 0%; /* sirve en caso de un div como este, donde tiene una altura definida, en caso de que la altura no este definida esta edición no se pone ; */
right: 0; /* se debe usar para que margin 0 auto funcione */
left: 0; /* se debe usar para que margin 0 auto funcione */
margin: 0 auto; /* Esto lo centra */
}


.ajustarimagen div{
        position: absolute;
     top: 10%; /* sirve en caso de un div como este, donde tiene una altura definida, en caso de que la altura no este definida esta edición no se pone ; */
right:0; /* se debe usar para que margin 0 auto funcione */
left: 0; /* se debe usar para que margin 0 auto funcione */
margin: 0 auto; /* Esto lo centra */
      /*border: solid;*/
      /*  border-color: blue;  */ 

    }

 .drawing-area-final-front{ 
                position: absolute;
                top: 80px;
                left: 50px;
                z-index: 10;
                width: 200px;
                height: 330px;
                transform: rotate(4deg);
              /* border: solid;*/
               
                
            }

            .canvas-container-final-front{
                width: 200px; 
                height: 340px; 
                position: relative; 
                user-select: none;
                 opacity: 0.5; /* see the background through the hbox */

            }

            #tshirt-div-final-front{
                  width: 400px;
                height: 548px;
                position: relative;
                background-color: #fff;
            }

            #canvas-final-front{
                position: absolute;
                width: 200px;
                height: 400px; 
                left: 0px; 
                top: 0px; 
                user-select: none; 
                cursor: default;
            }

.drawing-area-final-back{ 
                position: absolute;
                top: 70px;
                left: 340px;
                z-index: 10;
                width: 200px;
                height: 330px;
                 transform: rotate(-2deg);
               /* border: solid;*/
               /* border: solid;*/
               
                
            }

            .canvas-container-final-back{
                width: 200px; 
                height: 340px; 
                position: relative; 
                user-select: none;
                 opacity: 0.5; /* see the background through the hbox */

            }

            #tshirt-div-final-back{
                  width: 400px;
                height: 548px;
                position: relative;
                background-color: #fff;
            }

            #canvas-final-back{
                position: absolute;
                width: 200px;
                height: 400px; 
                left: 0px; 
                top: 0px; 
                user-select: none; 
                cursor: default;
            }

.img-logo {
    display: block;
       
  position: absolute;
  bottom: 120px;
  right: 90px;

 opacity: 0.8;

}

.numero-whats {
  font-size: 2.8em;
  padding: 10px 0;
  font-weight: 1000;
 text-shadow: 2px 4px 3px rgba(0,0,0,0.4);
  position: absolute;
  bottom: 50px;
  right: 15px;


}
.modelo{
  object-fit: cover;
  width:100%;
  height:100%;
}



.pink {
  background: #c3195d; }

.yellow {
  background: #efd510;  }

.orange {
  background: #e94822; }
.black {
  background: #2a2438; }
.red {
  background: #ff0000; }
.red {
  background: ##FFFFFF; }

.color {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    height: 40px;
    width: 40px;
    border:1px solid #cdcdcd;
    border-radius: 2px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0px 0px 4px #ccc;
}

.size {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    padding: 4px 4px 4px 4px;
    min-width:40px;
    border-radius: 2px;
    cursor: pointer;
    background: #000;
    text-transform: UPPERCASE;
}

.size input.size-check {
    display:none;
}

.size-checked{
    text-align: center;
    line-height: 2em;
    font-size: 12px;
    font-weight: bold;
    color:#eee;
    border:3px solid transparent;
    padding:2px 4px 2px 4px;
    transition: all 0.3s;
}

input.size-check:checked.size {
    background:red;
}

.size input.size-check:checked + .size-checked {
    border:3px solid #eee;
    background:#999;
    color:#000;
}


.color input.color-check {
    display:none;
}

.color-checked{
    position: absolute;
    bottom:-50px;
    left:0;
    right:0;
    margin-left:auto;
    margin-right: auto;
    text-align: center;
    transition: all 0.3s;
    font-size: 24px;
}

.color-checked:before {
  font-family: 'themify';
 content: "\e64c";
    color: #000; 
  font-weight: bold;
}
.color input.color-check:checked + .color-checked {
    bottom:1px;
}


.btn-tel2{
    position:fixed;
    width:60px;
    height:60px;
    line-height: 63px;
    /* mover boton*/
   
 

    background:#f70202;
    color:#ffffff;
    border-radius:50px;
    text-align:center;
    font-size:35px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index:100;
   
}
.btn-tel2:hover{
    background: #ffffff;
    color:#8a1bcf;
}



        .isotope-toolbar{
      text-align: center;
      padding: 25px 0;
      }
      .isotope-toolbar button {
      display: inline-block;
     
      margin: 0px 5px;
      background-color: #fff;
      color: #000;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: all 0.5s;
      border: none;
      outline: none;
      cursor: pointer;
      border-radius: 5px;
      text-transform: uppercase;
     
      }
       .isotope-toolbar button:hover {
      outline: none;
      background-color: #000;
      color: #fff;
      }
       .isotope-toolbar button.active {
      outline: none;
      background-color: #000;
      color: #fff;
      } 

.isotope-box {  
  display: grid;
  text-align: center;
  grid-template-columns: repeat(auto-fit, 100px);
  grid-auto-rows: 100px;
  justify-content: center;
  gap: 2rem 1rem;
}



      .isotope-box{
          text-align: center;
width: 100%;
  max-width: 37.5rem;
  padding: 0.5rem;
  margin: 0 auto;
  box-sizing: border-box;
      }
  .isotope-item{  
  width: 110px;
  height: 160px;
  border-radius: 15px;
  background-color: hsl(300deg 23% 97%);
  background-image: linear-gradient(hsl(7deg 100% 64%),hsl(7deg 100% 64%)), linear-gradient(hsl(301deg 100% 15%),hsl(301deg 100% 15%));
  background-size: 50px 10px, 60px 10px;
  background-position: 20px 40px, 20px 60px;
  background-repeat: no-repeat; 
  transition: all 0.5s; 
 
  }
     
     .inputimagen{ 
       
        width: 100px;
height: 150px;
background-color: #ddd;
}