html {
	height: -webkit-fill-available;
}	

	body {
		margin-top: 0px;
		/* min-height: 100vh; */
		/* mobile viewport bug fix */
		min-height: -webkit-fill-available;
	}

div[class^="col-"]{
	background-color: aliceblue ;
	border-radius: 5px;
	padding: 1px;
}

#cadena,
#imagenFinal{
	display: none;
}

#contenido{
	width: 100%;
  padding: 5px;
  min-height: 100vh;
  transition: all 1s;
  position: absolute;
  top: 0;
  right: 0;
}

/* ---------------------------------------------------
    CONFIGURADOR
----------------------------------------------------- */
#configurador{
	/* margin-top:10px; */
	/* margin-bottom:10px; */
	border: 1px solid gray;
	border-radius: 10px;
	width: 100%;
	padding: 5px 20px;
	min-height: 100vh;
	transition: all 0.3s;
	top: 0;
	right: 0;
}

#wrapper-lienzo{
	border: 1px solid grey;
	border-radius: 5px;
	margin: 0px;
	padding: 1px;
	width: 100%;
	height: auto;
}

#lienzo{
width: 100%;
margin: 0;
padding: 1px;
}

#wrapper-seleccion{
	border: 1px solid grey;
	border-radius: 5px;
	width: 100%;
	margin: 0px;
	padding: 1px;
	height: 100%;
}

#wrapper-logo{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	padding: 0x;
}

#logo{
	margin:2px 0;
	padding:1px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#logo img{
	max-width: 40px;
}

#wrapper-prendas{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	align-content: space-around;
	margin-top: 1px;
	padding: 0x;
}

.prenda{
	margin:2px 0;
	padding:1px;
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	cursor: pointer;
	border: 1px solid aliceblue;
	background: lavender;
	border-radius: 5px;
}

.prenda img{
	max-width: 35px;
}

@media (min-width: 576px) and (max-width:767px) {
	#wrapper-seleccion{
		border: 1px solid grey;
		border-radius: 5px;
		width: 100%;
		margin-left: 0px;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	
	#wrapper-logo{
		display: flex;
		justify-content: center;
	}
	
	#logo{
	 width: 65px;
	}
		
	.prenda{
		margin:0;
		padding:0;
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.prenda img{
		max-width: 50px;
	}
}

@media (min-width:768px){
	#wrapper-seleccion{
		border: 1px solid grey;
		border-radius: 5px;
		width: 100%;
		margin-left: 0px;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	
	#wrapper-logo{
		display: flex;
		justify-content: center;
	}
	
	#logo{
	 width: 85px;
	}
	
	
	.prenda{
		margin:0;
		padding:0;
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.prenda img{
		max-width: 70px;
	}
}


hr.divisor{
	border: 1px solid white;
}


/*FORMULARIO*/
#wrapper-form{
border: 1px solid grey;
border-radius: 5px;
}

#form{
	padding: 10px;
}

.form-group{
	text-align: left;
	padding: 0px 3px 0;
	margin: 5px 0;
}

.form-group label{
	padding: 2px 3px 0;
}

.form-group label#label-confirma,
.form-group label#label-terminos,
.form-group label#label-nota{
	font-size: .8em;
}

.form-group label#label-terminos{
	margin-left: 2em;
	text-indent: -2em;
}






#confirma,
#terminos{
	width: 20px !important;
	height: 20px !important;
}




#envio{
	margin-top: 10px;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
#sidebar,
#sidebar-visor,
#sidebar-shirt,
#sidebar-t-shirt,
#sidebar-trousers,
#sidebar-socks,
#sidebar-belt,
#sidebar-spikes,
#sidebar-shirtLines,
#sidebar-trousersLines {
	width: 140px;
	top: 0;
	right: -140px; negativo esconde a la derecha
	height: 100vh;
	background:#7386d5;
	color:#fff;
	transition:all .5s;
	overflow-y: scroll;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px){
	#sidebar,
	#sidebar-visor,
	#sidebar-shirt,
	#sidebar-t-shirt,
	#sidebar-trousers,
	#sidebar-socks,
	#sidebar-belt,
	#sidebar-spikes,
	#sidebar-shirtLines,
	#sidebar-trousersLines {
		width: 300px;
		top: 0;
		right: -300px; negativo esconde a la derecha
		height: 100vh;
		background:#7386d5;
		color:#fff;
		transition:all .5s;
		overflow-y: scroll;
		box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	}
}

@media (min-width:992px){
	#sidebar,
	#sidebar-visor,
	#sidebar-shirt,
	#sidebar-t-shirt,
	#sidebar-trousers,
	#sidebar-socks,
	#sidebar-belt,
	#sidebar-spikes,
	#sidebar-shirtLines,
	#sidebar-trousersLines {
		width: 630px;
		top: 0;
		right: -630px; negativo esconde a la derecha
		height: 100vh;
		background: #7386d5;
		color:#fff;
		transition:all .5s;
		overflow-y: scroll;
		box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	}
}

#sidebar{
	z-index: 10;
}
#sidebar-visor{
	z-index: 11;
}

#sidebar-shirt{
	z-index: 12;
}

#sidebar-t-shirt{
	z-index: 13;
}

#sidebar-trousers{
	z-index: 14;
}

#sidebar-socks{
	z-index: 15;
}

#sidebar-belt{
	z-index: 16;
}
#sidebar-spikes{
	z-index: 17;
}

#sidebar-shirtLines{
	z-index: 18;
}

#sidebar-trousersLines{
	z-index: 19;
}

#sidebar.active,
#sidebar-visor.active,
#sidebar-shirt.active,
#sidebar-t-shirt.active,
#sidebar-trousers.active,
#sidebar-socks.active,
#sidebar-belt.active,
#sidebar-spikes.active,
#sidebar-shirtLines.active,
#sidebar-trousersLines.active {
	right: 0;
}

#dismiss {
	margin-top: 20px;
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	background: #7386D5;
	position: absolute;
	top: -18px;
	left: 10px;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

#dismiss:hover {
	background: #fff;
	color: #7386D5;
}

.overlay {
	display: none;
	right:0px;
	width: 45vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.3);
	z-index: 9;
	opacity: 0;
	transition: all 0.5s ease-in-out;
}

.overlay.active {
	display: block;
	opacity: .5;
}

@media (min-width:992px){

	.overlay {
		display: none;
		right:0px;
		width: 65vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.3);
		z-index: 9;
		opacity: 0;
		transition: all 0.5s ease-in-out;
	}
	
	.overlay.active {
		display: block;
		opacity: .5;
	}

}

/* ---------------------------
ELEMENTOS DE MENU DEL SIDEBAR
----------------------------- */
#sidebar .sidebar-header,
#sidebar-visor .sidebar-header,
#sidebar-shirt .sidebar-header,
#sidebar-t-shirt .sidebar-header,
#sidebar-trousers .sidebar-header,
#sidebar-socks .sidebar-header,
#sidebar-belt .sidebar-header,
#sidebar-spikes .sidebar-header,
#sidebar-shirtLines .sidebar-header,
#sidebar-trousersLines .sidebar-header {
	width: 200px;
	padding: 20px 10px;
	background: #6d7fcc;
}

#sidebar div#controlCap,
#sidebar-visor div#controlVisor,
#sidebar-shirt div#controlShirt,
#sidebar-t-shirt div#controlTShirt,
#sidebar-trousers div#controlTrousers,
#sidebar-socks div#controlSocks,
#sidebar-belt div#controlBelt,
#sidebar-spikes div#controlSpikes,
#sidebar-shirtLines div#controlShirtLines,
#sidebar-trousersLines div#controlShirtLines {
	padding: 20px 15px;
	border-bottom: 1px solid #47748b;
}

#sidebar div p,
#sidebar-visor div p,
#sidebar-shirt div p,
#sidebar-t-shirt div p,
#sidebar-trousers div p,
#sidebar-socks div p,
#sidebar-belt div p,
#sidebar-spikes div p,
#sidebar-shirtLines div p,
#sidebar-trousersLines div p {
	color: #fff;
	padding: 10px 10px;
}

#sidebar div button,
#sidebar-visor div button,
#sidebar-shirt div button,
#sidebar-t-shirt div button,
#sidebar-trousers div button,
#sidebar-socks div button,
#sidebar-belt div button,
#sidebar-spikes div button,
#sidebar-shirtLines div button,
#sidebar-trousersLines div button {/*Se hace rectangular ?*/
	padding: 10px;
	font-size: .5em;
	display: block;
	color: black;
}

#sidebar div.button:hover,
#sidebar-visor div.button:hover,
#sidebar-shirt div.button:hover,
#sidebar-t-shirt div.button:hover,
#sidebar-trousers div.button:hover,
#sidebar-socks div.button:hover,
#sidebar-belt div.button:hover,
#sidebar-spikes div.button:hover,
#sidebar-shirtLines div.button:hover,
#sidebar-trousersLines div.button:hover {
	color: #7386D5;
}

/* ------------------------------------
TERMINAN ELEMENTOS DE MENU DEL SIDEBAR 
------------------------------------ */
.botones{
display: flex;
flex-wrap: wrap;
}

.btn-secondary{
	
}

/*Guinda IPN*/
.btn-guinda{
	background-color: #800040;/*Guinda IPN*/
	transition-property: transform;
	transition-duration: 0.5;
}

.btn-guinda:hover{
	background-color: #800040;
	transform: scale(1.2);
}

.btn-guinda:active,
.btn-guinda:focus{
	background-color: #800040 !important;
	transform: scale(1.3);
}

.btn-rojo{
	background-color: #e21e22; /*Rojo Diablos Rohjos*/
	transition-property: transform;
	transition-duration: 0.5;
}

.btn-rojo:hover{
	background-color: #e21e22;
	transform: scale(1.3);
}

.btn-rojo:active,
.btn-rojo:focus{
	background-color: #e21e22 !important;
	transform: scale(1.2);
}

.btn-naranja{
	background-color: #eb6e1f; /*Rojo Diablos Rohjos*/
	transition-property: transform;
	transition-duration: 0.5;
}

.btn-naranja:hover{
	background-color: #eb6e1f;
	transform: scale(1.3);
}

.btn-naranja:active,
.btn-naranja:focus{
	background-color: #eb6e1f !important;
	transform: scale(1.2);
}

.btn-oro{
	background-color: #d59f0f; /*Rojo Diablos Rohjos*/
	transition-property: transform;
	transition-duration: 0.5;
}

.btn-oro:hover{
	background-color: #d59f0f;
	transform: scale(1.3);
}

.btn-oro:active,
.btn-oro:focus{
	background-color: #d59f0f !important;
	transform: scale(1.2);
}

.btn-amarillo{
	background-color: #fdb827; /*Rojo Diablos Rohjos*/
	transition-property: transform;
	transition-duration: 0.5;
}

.btn-amarillo:hover{
	background-color: #fdb827;
	transform: scale(1.3);
}

.btn-amarillo:active,
.btn-amarillo:focus{
	background-color: #fdb827 !important;
	transform: scale(1.2);
}

.btn-verde1{
	background-color: #097C4A;
	transition-property: transform;
	transition-duration: 0.5;
}

.btn-verde1:hover{
	background-color: #097C4A;
	transform: scale(1.3);
}

.btn-verde1:active,
.btn-verde1:focus{
	background-color: #097C4A !important;
	transform: scale(1.2);
}

.btn-verde2{
	background-color: #003831;
	transition-property: transform;
	transition-duration: 0.5;
}

.btn-verde2:hover{
	background-color: #003831;
	transform: scale(1.3);
}

.btn-verde2:active,
.btn-verde2:focus{
	background-color: #003831 !important;
	transform: scale(1.2);
}


.btn-azul1{
	background-color: #90bce4;
	transition-property: transform;
	transition-duration: 0.5;
}

.btn-azul1:hover{
	background-color: #90bce4;
	transform: scale(1.3);
}

.btn-azul1:active,
.btn-azul1:focus{
	background-color: #90bce4 !important;
	transform: scale(1.2);
}

.btn-azul2{
	background-color: #005A9C;
	transition-property: transform;
	transition-duration: 0.5;
}

.btn-azul2:hover{
	background-color: #005A9C ;
	transform: scale(1.3);
}

.btn-azul2:active,
.btn-azul2:focus{
	background-color: #005A9C !important;
	transform: scale(1.2);
}

.btn-marino{
	background-color: #0C2340;
	transition-property: transform;
	transition-duration: 0.5;
}

.btn-marino:hover{
	background-color: #0C2340 ;
	transform: scale(1.3);
}

.btn-marino:active,
.btn-marino:focus{
	background-color: #0C2340 !important;
	transform: scale(1.2);
}

.btn-purpura{
	background-color: #24135F;
	transition-property: transform;
	transition-duration: 0.5;
}

.btn-purpura:hover{
	background-color: #24135F ;
	transform: scale(1.3);
}

.btn-purpura:active,
.btn-purpura:focus{
	background-color: #24135F !important;
	transform: scale(1.2);
}

.btn-negro{
	background-color: #000;
	transition-property: transform;
	transition-duration: 0.5;
}

.btn-negro:hover{
	background-color: #000 ;
	transform: scale(1.3);
}

.btn-negro:active,
.btn-negro:focus{
	background-color: #000 !important;
	transform: scale(1.2);
}

.btn-gris{
	background-color: #909D9C;
	transition-property: transform;
	transition-duration: 0.5;
}

.btn-gris:hover{
	background-color: #909D9C ;
	transform: scale(1.3);
}

.btn-gris:active,
.btn-gris:focus{
	background-color: #909D9C !important;
	transform: scale(1.2);
}

.btn-blanco{
	background-color: #fff;
	transition-property: transform;
	transition-duration: 0.5;
}

.btn-blanco:hover{
	background-color: #fff ;
	transform: scale(1.3);
}

.btn-blanco:active,
.btn-blanco:focus{
	background-color: #fff !important;
	transform: scale(1.2);
}

.btn-no{
	background-color: lavender;
	transition-property: transform;
	transition-duration: 0.5;
}

.btn-no:hover{
	background-color: lavender ;
	transform: scale(1.3);
}

.btn-no:active,
.btn-no:focus{
	background-color: lavender !important;
	transform: scale(1.2);
}


/*

 azul UNAM rgb
 0-61-121
 #002B7A

Oro unam rgb
 213-159-15
 #D59F0F

Naranja Astros
 #EB6E1F
 
 Azul Dodgers
 #005A9C

 Azul Yankees
 #0C2340

 Púrpura Rookies
 #37226A
 #24135F
 #37246b

 */