@font-face {
  font-family: averiaLibre-bold;
  src: url("../fuentes/Averia_Libre/AveriaLibre-Bold.ttf");
}

@font-face {
  font-family: averiaLibre-boldItalic;
  src: url("../fuentes/Averia_Libre/AveriaLibre-BoldItalic.ttf");
}

@font-face {
  font-family: roboto-black;
  src: url("../fuentes/Roboto/Roboto-Black.ttf");
}

@font-face {
  font-family: roboto-regular;
  src: url("../fuentes/Roboto/Roboto-Regular.ttf");
}


* {
  padding: 0px;
  margin: 0px;

}



.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  /* background: url('../images/pageloader.gif') 50% 50% no-repeat rgb(249,249,249); */

  background-color: rgb(249, 249, 249);
  background-image: url('../images/pageloader.gif');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  opacity: .8;
  display: none;
}

.textoLoader {
  background-color: white;
  color: black;
  text-align: center;
  /* margin-top: 41%; */
  width: 100%;
  font-size: 4vh;
  position: absolute;
  bottom: 4vh;
}

body {

  font-family: roboto-regular, sans-serif;

}

.styleBoton {

  font-family: averiaLibre-boldItalic;

}

/* PORTADA */

/*MENU HORIZONTAL*/

#datoTelefonoHeader {

  color: white;
  display: flex;
  justify-content: end;
  z-index: 9999;
}

#iconWhatsapp {
    width: 4%;
    height: fit-content;
}

#iconFace {
    width: 100%;
    height: fit-content;
}

#iconInsta {
    width: 100%;
    height: fit-content;
}

.iconoRedSocial{
width: 5%;
text-align: center;
margin-left: 2%;
}

#imagenCabecera {
  /* background-color: white; */
  /* width: 10%; */

}

#datoTelefonoHeader p {

  margin: 2% 0% 0% 1%;

}

#carritoTienda {
  /* background-color: white; */
  /* width: 10%; */
  /* margin-top: 1% 1%; */
  display: flex;
  padding: 1% 2%;
}

#imgCarrito {
  /* background-color: white; */
	width: 20%;
	float: right;
	position: relative;
    z-index: 9999;
}


ul {
  list-style: none;
}

a {
  color: white;
  text-decoration: none;
}

.menu {
  display: flex;
  justify-content: center;
  font-family: averiaLibre-bold;
  padding: 1% 0%;
  font-size: 2.5vh;
}

.menu li {
  margin-right: 85px;
  margin-left: 50px;
  z-index: 9999;
}

.menu a {
  position: relative;
  display: block;
  padding: 5px;


}

#carritoTienda a {

  cursor: pointer;

}

#menuHorizontal {
  display: flex;
  justify-content: space-between;
  /* background-color:black; */

  /* padding: 1% 2%; */
  position: absolute;
  width: 100%;
  top:85px;
}

/* .menu a::before { */
/* content: ''; */
/* position: absolute; */
/* bottom: 0; */
/* left: 0; */
/* width: 100%; */
/* height: 2px; */
/* background: linear-gradient(to right, white, white, white); */
/* z-index: 1; */
/* transform: scaleX(0); */
/* transform-origin: left; */
/* transition: transform 0.5s ease-in-out; */
/* } */

/* .menu a:hover::before { */
/* transform: scaleX(1); */
/* } */

/* .menu[data-animation="center"] a::before { */
/* transform-origin: center; */
/* } */

/* WEB INFORMATIVA (Página principal) */

/* PORTADA */

#portada {

  /* background-color:red; */
  width: 100%;
  /* height:81vh; */
  background-color: black;
  position: relative;
  top: -85px;
  
}



#imagenPortada {

  width: 100%;
  display: block;
  position: relative;
  /* bottom:0px; */
}

#botonPortada {

  padding: 0px 11px;
  padding-bottom: 7px;
  border: solid;
  border-radius: 10px;
  background-color: black;
  position: absolute;
  bottom: 17%;
  left: 137px;
  font-size: 2.6vw;
  cursor: pointer;

}

/* FIN - PORTADA */

/* INFO RESUMEN */

#infoResumen {

  background-color: white;
  width: 100%;
  position: relative;
  /* height:100vh; */


}

#galeriaInfo {
  display: flex;
  justify-content: space-around;
  /* flex-wrap: wrap; */
  /* width: 60%; */
  padding: 3% 19%;
}

#contenedorIzquierdo h1 {

  width: 85%;
  margin-bottom: 2%;
  color: white;
  margin-top: 4%;
  font-family: averiaLibre-bold;
  font-size: 1.5vw;
}

.contenedorImagenInfo {

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: roboto-black;

}

.contenedorImagenInfo p {

  width: 50%;
  text-align: center;
  margin: -6% 0% 0% 0%;
  font-size: 1vw;

}

.imagenInfo {

  width: 75%;


}

#bannerInfo {

  width: 100%;
  display: block;

}

#contenedorTextoBanner {
  width: 58%;
  position: absolute;
  bottom: 7%;
  right: 5%;
  display: flex;
  flex-wrap: nowrap;
  font-family: roboto-black;
}


#contenedorTextoBanner p {
  margin: 1%;
  width: 72%;
  font-size: 2.4vh;
  color: white;
  text-align: justify;
}

#botonBanner {
  text-align: center;
  padding: 0px 11px;
  padding-bottom: 7px;
  border-radius: 10px;
  background-color: black;
  font-size: 2vw;
  cursor: pointer;
  width: 82%;
  margin-top: 2%;
  padding: 1% 1% 2% 1%;
  background-color: #9affe4;
  color: black;

}

#botonBanner a {

  color: black;
  font-size: 2vw;
}

/* FIN - INFO RESUMEN */

/* BlOQUE INFORMATIVO */

#contenedorBloqueInformativo {

  background-color: white;
  width: 100%;
  /* height:100vh; */
  position: relative;
  text-align: center;

}

#bordeTransparente {

  position: absolute;
  top: 35px;
  width: 100%;
  /* z-index:-4; */
  display: block;

}

#tituloBloqueInformativo {

  width: 75%;
  display: inline-block;
  margin-top: 2%;
  font-size: 2.9vw;
  font-family: averiaLibre-bold;

}

#textoContenido {
  width: 66%;
  display: inline-block;
  margin-top: 125px;
  font-size: 1.1vw;
  text-align: justify;
  font-family: roboto-regular;

}

.columnaBloque {

  column-count: 2;
  column-gap: 50px;

}

#botonBloqueInformativo {
  padding: 0px 11px;
  padding-bottom: 7px;
  border: solid;
  border-radius: 10px;
  background-color: black;
  font-size: 2.6vw;
  cursor: pointer;
  width: 16%;
  margin-left: 42%;
  margin-top: 6%;
  transform: rotate(-6deg);
  position: relative;
  z-index: 99;

}

#botonBloqueInformativo a {
  transform: rotate(6deg);
  display: block;

}

#contenedorImangenInformativa {

  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: 4%;

}

.contenidoInformativo {

  width: 15%;
  margin: 0% 6%;
}

.imagenInformativa {

  width: 60%;

}

.contenidoInformativo p {

  font-family: roboto-regular;
}


/* FIN - BlOQUE INFORMATIVO */


/* ** -- FIN -- ** WEB INFORMATIVA (Página principal) */


/* Web customizar camiseta */

#contenedorCustom {

  display: flex;
  flex-wrap: nowrap;
  align-items: center;

  padding: 3%;

}

#vistaModelo {

  padding: 1%;
  /* margin: -1%; */
  font-size: 173%;

}

.botonVista {

  border: solid thin;



}

/* FIN - Web customizar camiseta */

/* WEB CARRITO */

#contenedorWebCarrito {

  background-color: white;
  /* height:100vh; */


}

#contenedorVolver {

  width: 15%;
  display: block;
  color: black;

}

#flechaVolver {

  width: 7%;
  margin: 4% 2% 0% 3%;

}

/* ------------------------------------------- CARRITO TIENDA ARIA ------------------------------------------- */

#numeroProductosCarrito {
  display: none;
  background-color: green;
  border-radius: 20px;
  /* width: 5px; */
  /* padding: 2% 12%; */
  padding: 1px 8px;
  /* height: 10px; */
  position: absolute;
  top: 54%;
  font-size: 116%;
  right: 1.3%;
}

#botonComprarCarrito {
  height: 6%;
  width: 25%;
  padding: 10px;
  border-radius: 10px;
  margin-left: 69%;
  background-color: black;
  color: white;
  font-family: Myriad_Pro_Regular;
  font-size: 183%;
  cursor: pointer;
  text-decoration: none;

}

#botonComprarCarrito:hover {

  border: solid 5px black;

}


/* SECCION LISTA PRODUCTOS */


#seccionListaProductosCarrito {
  /* background-image: url(../recursos/img/fondocompracorrecta.png); */
  /* background-size: 100%; */
  /* background-position: bottom; */
  /* background-repeat: no-repeat; */
  padding: 2% 0% 3% 0%;
  min-height: 59vh;
}

#contenedorListaProductosCarrito {}

#parametrosListaProductosCarrito {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  padding: 0% 18% 0% 18%;
  font-size: 155%;
  color: black;
  border-bottom: solid 2px black;
}

.contenidoListaCarrito {
  padding: 0.5% 0% 0% 0%;
  text-align: center;
  width: 12%;

}

.productoCarrito {

  display: flex;
  flex-wrap: nowrap;
  padding: 0.5% 23% 0.5% 19%;
  font-size: 155%;
  color: black;
  border-bottom: solid 2px black;


}


.imagenArticuloCarrito {
  background-color: black;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0px 0px 6.4px black;
  border-radius: 12px;
  width: 70px;
  height: 70px;
  margin-left: 10%;
}

.imagenArticuloCarritoEnvio {
  background-size: cover;
  background-repeat: no-repeat;
  width: 70px;
  height: 70px;
  margin-left: 3%;
}


.modeloArticuloCarrito {

  margin-left: 7.4%;
  padding: 1.9% 0% 0% 0%;
}

.tallaArticuloCarrito {

  margin-left: 9%;
  margin-top: 1%;
}

.unidadesArticuloCarrito {

  margin-left: 8.7%;
  margin-top: 1.2%;

}

.contenedorCantidadArticulo {

  display: flex;
  flex-wrap: nowrap;
  justify-content: center;

}

.unidadesArticuloCarrito div {

  width: 50%;

}



.valorCantidadArticulo {
  width: 39px;
  /* height: 32px; */
  text-align: center;
  font-size: 81%;
  border: solid 2px black;
  margin: 0% 10% 0% 10%;
}

.suma {

  width: 50%;
  cursor: pointer;

}

.resta {

  transform: scaleX(-1);
  width: 50%;
  cursor: pointer;
}

.eliminarArticuloCarrito {

  margin: 2% 0% 0% 23%;
  cursor: pointer;
}

.precioArticuloCarrito {

  margin-left: 10.8%;
  margin-top: 1.4%;
  width: 26px;

}

#precioTotalCarrito {
  margin: 1% 0% 2% 70.2%;
  font-size: 150%;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}


/* WEB DATOS COMPRADOR */


#seccionDatosComprador {

  width: 100%;

  position: relative;


}

#migasDePanDatosComprador {
  color: black;
  /* position: absolute; */
  /* margin: 3% 0% 0% 5%; */
  text-align: left;
  font-size: 180%;
  width: 72%;
  padding: 7% 0% 1% 6%;
}

#migasDePanDatosComprador a {

  color: black;
  text-decoration: none;
}

#tituloDatosComprador {
  display: flex;
  padding: 1% 0% 1% 0%;
  /* height: 5%; */
  width: 100%;
  justify-content: center;
  /* padding: 5% 0% 0% 0%; */
  font-family: arial_bold_italic;
  background-color: black;
  color: white;
  font-size: 327%;
  /* color: #A000C8; */
}

#textoSubTituloDatosComprador {
  font-size: 185%;
  text-align: center;
  margin-top: 1%;
}


#formularioDatosComprador {

  display: block;
  padding: 1% 0% 5% 0%;
  text-align: center;
  font-size: 1vw;
}

#seccionDatosComprador label {
  display: inline-block;
  width: 14%;
  color: black;
  padding: 10px;
  text-align: right;

}

.inputCampoFormulario {

  width: 20%;
  padding: 0.7% 1% 0.7% 1%;
  font-size: 71%;
  text-align: center;
  margin: 1% 0% 0% 0%;
}


.tituloformulario {
  font-weight: bold;
  width: 33%;
  color: black;
  text-align: left;
  margin: 2% 0% 1% 46.5%;
}

#contenedorConfirmacionFacturacion {

  width: 100%;
  text-align: center;

}


#preguntaFacturacion {
  font-size: 138%;
  font-weight: bold;
  margin-top: 3%;
}

input[type="radio"] {
  -ms-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  margin: 0% 1% 0% 0.5%;
  vertical-align: middle;
}

#contenedorDatosFacturacion {

  display: none;


}

#contenedorDatosFacturacion label {

  color: black;


}


#imagenInferiorIzqForm {

  position: absolute;

  bottom: 0;
  left: 0;
  width: 40%;

}

#imagenInferiorDrcForm {

  position: absolute;

  bottom: 0;
  right: 0;
  transform: scaleX(-1);
  width: 40%;
}

/* Sección: CONTACTA */


/* CONTACTA EVENTO */

#seccionContacta {

  position: relative;

  color: black;
  /* height:100vh; */
  width: 100%;
  /* height:50vh; */
  background-image: url("../recursos/img/imgcontacta.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;

  padding: 1px 0px;
}

#seccionContacta h1 {

  /* margin: 7% 1% 1% 24%; */
  font-size: 258%;

}

#seccionContacta h3 {

  margin-left: 51.4%;

}

#tituloTextArea {
  margin-left: 51.3%;
  font-size: 195%;
  margin-bottom: 0%;
}

#seccionContacta form {

  margin: auto;
  display: flex;
  /* padding: 0% 0% 0% 26%; */
  width: 60%;

}



.contenidoFormulario {

  width: 33%;
  padding: 0% 3%;

}

#contenedorPrivacidad {


  width: 127%;
  font-size: 14px;
  padding: 0%;
  text-align: justify;

}


.camposForm {

  padding: 3%;
  margin: 3% 0%;
  width: 100%;

  font-family: Myriad_Pro_Regular;
  background-color: black;
  color: white;
}

.camposForm::placeholder {
  color: black;
  font-size: 150%;
}

.enviarFormulario {

  display: block;
  margin: 4% 0% 4% 96%;
  border: none;
  background: none;
  background-image: url("../recursos/img/boton.png");
  background-size: contain;
  background-repeat: no-repeat;

  font-family: olivier_regular;
  font-size: 141%;

  width: 27%;
  height: 9%;
  padding: 0% 0% 4% 0%;


}

.enviarFormulario:hover {

  opacity: 0.75;
  cursor: pointer;
}



.estiloTextArea {

  padding: 3%;
  margin: 3% 0%;
  height: 22vh;
  width: 121%;

  font-family: Myriad_Pro_Regular;
  background-color: black;
  color: white;

}

.estiloTextArea::placeholder {
  font-family: Myriad_Pro_Regular;
  background-color: black;
  color: white;
}

#seccionContacta form p {

  text-align: justify;
  width: 127%;

}

#seccionContacta form p a {}

/* FIN: CONTACTA EVENTO */

/* WEB DATOS COMPRADOR */


#seccionDatosComprador {

  width: 100%;


}

#migasDePanDatosComprador {
  color: black;
  /* position: absolute; */
  /* margin: 3% 0% 0% 5%; */
  text-align: left;
  font-size: 180%;
  width: 72%;
  padding: 3% 0% 1% 6%;
}

#migasDePanDatosComprador a {

  color: black;
  text-decoration: none;
}

#tituloDatosComprador {
  display: flex;
  padding: 1% 0% 1% 0%;
  /* height: 5%; */
  width: 100%;
  justify-content: center;
  /* padding: 5% 0% 0% 0%; */
  font-family: arial_bold_italic;
  background-color: black;
  color: white;
  font-size: 327%;
  /* color: #A000C8; */
}

#textoSubTituloDatosComprador {
  font-size: 185%;
  text-align: center;
  margin-top: 1%;
}


#formularioDatosComprador {

  display: block;
  padding: 1% 0% 5% 0%;
  text-align: center;
  font-size: 1vw;
}

#seccionDatosComprador label {
  display: inline-block;
  width: 14%;
  color: black;
  padding: 10px;
  text-align: right;

}

.inputCampoFormulario {

  width: 20%;
  padding: 0.7% 1% 0.7% 1%;
  font-size: 71%;
  text-align: center;
  margin: 1% 0% 0% 0%;
}


.tituloformulario {
  font-weight: bold;
  width: 33%;
  color: black;
  text-align: left;
  margin: 2% 0% 1% 46.5%;
}

#contenedorConfirmacionFacturacion {

  width: 100%;
  text-align: center;

}


#preguntaFacturacion {
  font-size: 138%;
  font-weight: bold;
  margin-top: 3%;
}

input[type="radio"] {
  -ms-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  margin: 0% 1% 0% 0.5%;
  vertical-align: middle;
}

#contenedorDatosFacturacion {

  display: none;


}

#contenedorDatosFacturacion label {

  color: black;


}


#imagenInferiorIzqForm {

  position: absolute;

  bottom: 0;
  left: 0;
  width: 40%;

}

#imagenInferiorDrcForm {

  position: absolute;

  bottom: 0;
  right: 0;
  transform: scaleX(-1);
  width: 40%;
}


/* SECCION RESUMEN COMPRA */


#tituloResumenCompra {
  display: flex;
  /* height: 5%; */
  width: 100%;
  justify-content: center;
  /* padding: 5% 0% 0% 0%; */
  font-family: arial_bold_italic;
  background-color: black;
  color: white;
  font-size: 327%;
  color: white;
}

#seccionResumenCompra p {

  text-align: left;
  padding-right: 5%;
  font-family: 'arial_bold_italic';
  padding-bottom: 2%;
}

.valorCantidadArticuloResumen {
  width: 39px;
  /* height: 32px; */
  text-align: center;
  font-size: 81%;
  border: none;
  margin: 0% 10% 0% 10%;
}

.contenidoCeldaNombreTalla {
  padding: 0.5% 0% 0% 0%;
  text-align: center;
  width: 100%;
}

#TablaResumenCompra {

  width: 55%;
  margin: 2% 0% 2% 26%;
  font-size: 175%;


}

thead {

  border: solid 2px;

}

table {

  border-collapse: collapse;
}

#TablaResumenCompra th {

  padding: 1%;
  text-align: center;
  color: black;

}

#TablaResumenCompra td {

  padding: 1%;
  text-align: center;


}

#comenzarCompra {
  padding: 1%;
  margin-left: 29%;
  margin-bottom: 7%;
  text-align: center;
  background-color: black;
  border-radius: 19px;
  color: white;
  font-size: 5vw;
  font-family: 'arial_bold_italic';
}


/* SECCION MÉTODO DE PAGO */

#totalPagoComision {
  border: solid black;
  border-radius: 19px;
  width: 13%;
  margin: 0% 0% 2% 43.7%;
  padding: 0% 1%;
  font-size: 1.2vw;
  text-align: center;
  font-family: 'arial_bold_italic';
}

#comenzarCompra {
  padding: 1%;
  margin-left: 43.5%;
  margin-bottom: 7%;
  text-align: center;
  background-color: black;
  border-radius: 19px;
  color: white;
  font-size: 1.5vw;
  font-family: 'arial_bold_italic';
  cursor: pointer;
}

#tituloMetodoPago {
  display: flex;
  /* height: 5%; */
  width: 100%;
  justify-content: center;
  /* padding: 5% 0% 0% 0%; */
  font-family: arial_bold_italic;
  background-color: black;
  color: white;
  font-size: 320%;
  color: white;
}

#contenedorMetodosPago {
  position: relative;
  height: 22vh;
  display: flex;
  text-align: center;
  width: 100%;
  justify-content: center;
}

#imagenInferiorIzqMetPago {

  /* position:absolute; */

  top: 0;
  left: 0;
  width: 40%;
  transform: scaleY(-1);
}

#imagenInferiorDrcMetPago {

  /* position:absolute; */

  top: 0;
  right: 0;
  transform: scale(-1, -1);
  width: 40%;
}

#botonPayPal {
  /* position: absolute; */
  bottom: 24%;
  left: 31%;
  width: 16%;
  cursor: pointer;
}

#botonPayPal img {

  width: 100%;
  margin-top: 9%;
}


#botonTextoTarjeta {
  /* position: absolute; */
  bottom: 24%;
  right: 33%;
  font-size: 210%;
  color: black;
  font-family: 'arial_bold_italic';
  height: 50%;
  cursor: pointer;
  margin: 3% 0% 0% 6%;
}


/* COMPRA CORRECTA */

#textoCompraCorrecta {
  padding: 4%;
  font-size: 225%;
  width: 50%;
  text-align: center;
}

/*   FOOTER   */

footer {

  background-color: black;
  color: white;
  text-align: center;
  padding: 1%;

}

footer a {
  color: white;
  text-decoration: none;
  font-size: 112%;
  margin: 0% 1% 0% 1%;
}

/* FIN ARAI */



/* PABLO */

/* Sección: CONTACTA */
#seccionContacta {
  padding-top: 12vh;
}

#seccionContacta h1 {
  font-family: averiaLibre-bold;
  text-align: center;
  font-size: 258%;

}

.tituloTextArea {
  font-family: averiaLibre-bold;
  font-size: 195%;
  margin-top: 1%;
  margin-bottom: 2%;
  margin-left: 33%;
  margin-right: 33%;
  border-radius: 10px;
  box-sizing: border-box;
  text-align: center;
  background-color: black;
  color: white;
}


#seccionContacta form {
  display: flex;
  justify-content: center;
  /* padding: 0% 25% 0% 25%; */
}

.contenidoFormulario {
  width: 33%;
  padding: 0% 3%;
}


.camposForm {
  padding: 3%;
  margin: 3% 0%;
  width: 100%;
  font-family: averiaLibre-bold;
  background-color: white;
  color: black;
  border-radius: 10px;
  box-sizing: border-box;
  border: 1px solid black;
}

.camposForm::placeholder {
  /* color: black; */
  font-size: 150%;
}

.camposForm:focus {
  border-color: black;
}

.estiloTextArea {
  font-family: averiaLibre-bold;
  padding: 3%;
  margin: 3% 0%;
  height: 215px;
  width: 120%;
  box-sizing: border-box;
  border-radius: 10%;
  /* color: black; */

}

.estiloTextArea::placeholder {
  /* color: black; */
  font-size: 150%;
}


.contenidoFormulario p {
  text-align: justify;
  width: 120%;
}

.enviarFormulario {
  font-family: averiaLibre-bold;
  font-size: 120%;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: black;
  color: white;
  margin: 4% 0% 4% 90%;
  width: 30%;
  height: 6%;
  padding: 0% 0% 4% 0%;
  margin-bottom: 10vh;

}

.enviarFormulario:hover {
  opacity: 0.75;
  cursor: pointer;
}

.contenedorPrivacidad {
  width: 120%;
  font-size: 14px;
  padding: 0%;
  text-align: justify;

}

/* FIN CONTACTA  */



/* GRACIAS.PHP */

.gracias {
  font-family: averiaLibre-bold;
  text-align: center;
  padding-top: 10vh;
}

/* FIN GRACIAS  */


/* Sección: CREAR DISEÑO */



#crear {
  padding-top: 1%;
  width: 100%;
}

.contenedor1 {
  display: flex;
  justify-content: space-between;
  padding-right: 2%;
  padding-left: 2%;
}

.volver a {
  display: none;
  font-family: averiaLibre-bold;
  color: #ff9ab3;
  padding-top: 20vh;
}

.necesitas a {
  font-family: averiaLibre-bold;
  color: #ff9ab3;

  padding: 20px;
  display: flex;
  flex-direction: row-reverse;

  /* float: right; */


}

.contenedor2 {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.crea-diseño {
  font-family: averiaLibre-bold;
  font-size: 4em;
  color: black;
}

.boton-cargar {
  font-family: averiaLibre-bold;
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 208px;
  height: 40px;
  background-color: black;
  color: white;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  border-radius: 10px;
  padding: 0 20px;
  box-sizing: border-box;
}

.contenedor-cargar-imagen {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.icono-cargar {
  display: block;
  max-width: 100%;
  height: auto;
  margin-right: 10px;
}

.boton-cargar input {
  position: absolute;
  font-size: 40px;
  opacity: 0;
  right: 0;
  top: 0;
}

#imagen-recortada {
  position: absolute;
  top: 37vh;
  left: 76vh;
  z-index: 98;
}

#imagen-recortada-contenedor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

/* .contenedor-imagen {
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: end;
  z-index: 1;
} */




#demo {
  position: relative;
}

#demo img.boton-delante {
  position: absolute;
  top: 4%;
  right: 2%;
  width: 15%;
  max-width: 90px;
  height: auto;
  z-index: 101;

  background-color: white;
  background-position: center;
  border: 3px solid black;
  border-radius: 20px;
  cursor: pointer;
}

#demo img.boton-detras {
  position: absolute;
  top: 23%;
  right: 2%;
  width: 15%;
  max-width: 90px;
  height: auto;
  z-index: 101;

  background-color: white;
  background-position: center;
  border: 3px solid black;
  border-radius: 20px;
  cursor: pointer;
}

/* 
.delante-detras {
  font-family: averiaLibre-bold;
  color: black;
  padding-right: 92px;
  padding-top: 5px;
  z-index: 101;
} */

#demo .delante-label {
  font-family: averiaLibre-bold;
  color: black;

  /* padding-right: 92px;
  padding-top: 5px; */

  position: absolute;
  text-align: center;
  top: 18%;
  right: 2%;
  width: 15%;
  max-width: 90px;
  height: auto;
  z-index: 101;
}

#demo .detras-label {
  font-family: averiaLibre-bold;
  color: black;

  /* padding-right: 92px;
  padding-top: 5px; */

  position: absolute;
  text-align: center;
  top: 37%;
  right: 2%;
  width: 15%;
  max-width: 90px;
  height: auto;
  z-index: 101;
}



.contenedor-botones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vh;
  padding-left: 15vh;
  padding-right: 15vh;
}

.boton-hombre.boton-seleccionado,
.boton-mujer.boton-seleccionado {
  background-color: white;
  color: black;
}


.contenedor-botones-derecha {
  display: flex;
  align-items: center;
  justify-content: center;
}


.boton-hombre,
.boton-mujer {
  font-family: averiaLibre-bold;
  background-color: black;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
}

.boton-blanco,
.boton-negro {
  padding: 20px 20px;
  border-radius: 10px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.boton-blanco {
  background-color: white;
  border: 3px solid black;
}

.boton-negro {
  background-color: black;
  border: 3px solid black;

}

.tallas,
.boton-carrito {
  font-family: averiaLibre-bold;
  padding: 10px 20px;
  border-radius: 10px;
  color: white;
  font-size: 16px;
}

.tallas {
  background-color: black;
  margin-left: auto;
  margin-right: 10px;
}

.medidas {
  font-family: averiaLibre-bold;
  padding: 10px 20px;
  background-color: white;
  color: black;
  border-radius: 10px;
  margin-right: 10px;
  cursor: pointer;
}

.no-seleccionado {
  border: 1px solid white;
}


.contenedor-botones-carrito {
  display: flex;
  align-items: center;
  justify-content: center;
}

.boton-carrito {
  background-color: black;
  display: inline-flex;
  cursor: pointer;
  justify-content: center;
}

.boton-carrito img {
  margin-right: 5px;
  height: 20px;
}

/* FIN: CREAR DISEÑO */




/* Sección: FOOTER */

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  padding: 2vw 3vw 2vw 3vw;
  font-size: 14px;
  color: white;
}

.footer-left {
  flex: 1;
}

.footer-right {
  display: flex;
  justify-content: flex-end;
  flex: 1;
}

.letra-footer {
  margin-right: 100px;
  font-family: averiaLibre-bold;
}

/* FIN FOOTER */