/* 
  La clase .tabDispAvatar sera generada por js,
	definiendo via iConf.p_carritoProdBC, el color
	de fondo de las imagenes de producto que seran
	mostradas en el carrito.
*/

/* genericos  */
body {
  background-color: #efefef;
  font-family: Verdana, Helvetica, Arial, sans-serif;
	margin: 0 auto;
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer */
  -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/       
}

div {
	box-sizing: border-box;
}
.fl { float: left;}
.fr { float: right;}
.hid{ visibility : hidden;}
#appBox {
	background-color: white;
	visibility:hidden
	height: 100%;
	max-height: 100%;
	max-width: 100%;
}
.panelApp{
	position: absolute;
	left: 0;
	top: 0;
	width : 100%;
	height: 100%;
	min-height: 100%;
	background-color: white;
	visibility: hidden;
	overflow: hidden;
}

.panel {
  background-color: rgba(40, 43, 68, 1);
	width : 60%; 
	max-width : 60%;
	padding: 5% 20% 5% 20%;
}
.boxTitulo {
	float:right;
	margin-right:5vw;
	margin-left:0;
	width:70vw;
	text-align: center;
}

.boxTitulo h3 {
	color: #bbb;
	font-weight: normal;
}

/* kk -> boton cerrar panel */
.kk{
	font-size:2em;
}
#panPrincipal{
	width : 100%;
	height: 100%;
	background-color: white;
	overflow: hidden;
/*	display: none; */
	visibility: hidden;
}
#panelBody {
	width : 100%;
	height: 100%;	
}

button {
	outline: none;
}
.btn {
	background-color:#transparent;
	border: 3px solid transparent;
	border-radius:50%;
	cursor:pointer;
}
.btn:hover {
	background-color:black;
	border: 3px solid black;
}
.btn:active { border: 3px solid #52aaff;}

.topWidth {
	width : 100%;
	height: 15%;
}
.lstv{
	list-style: none;
}
.lstMenuHor {
	list-style: none;
	width: 100%;
}
.lstMenuHor li {
	width: 15%;
	height: 15%;
	display: inline-block;
	margin: auto;
	opacity: 0.7;
}
.lstMenuHor li:hover {
	opacity: 1;
}
.lstMenuHor li img {
	width: 40px;
	height: 40px;
	border: 3px solid #fb0;
}
.menuTop{
	background-color: yellow;
	text-align: center;
	width: 100%;
	height: 10%;
}
.menuBottom{
	background-color: green;
	text-align: center;
	width: 100%;
	height: 10%;
	top:0;
}

.hid {
	visibility: hidden;
}
.atTop {
	position: absolute;
	left:0;
	top:0;
}
.atBottom {
	position: absolute;
	left:0;
	bottom:0;
}

#menuHamb {
	position: absolute;
	left: 20%;
	top: 0;
	width: 60px;
	height: 60px;
}
#itemMenuHamb {
	width: 40px;
	height: 7px;
	max-height: 10px;
	border-radius: 10px;
	background-color : rgba(0, 98, 242, 255);
	margin: 10px 10px 0 0;
	position: relative;
	top: 30px;
}

.botCerrar{
	font-size: 3em;
	font-family: Comic Sans MS;
	font-weight: bold;
	position: absolute;
	right:10px;
	top:10px;
	cursor: pointer;
}

#imglogoEmpresa {
	border-radius: 10%;
	position: absolute;
	left: 4.2%;
	top: 1.4vh;
	height: 5vh;
}

#imgImago {
/*
	position:relative;
	margin-left: 3.1ch;
	margin-top: 0.55vh;
	height:5vh;
*/
	position: absolute;
	left: 4.2%;
	top: 1.4vh;
	height: 5vh;
}
.spnCabecera {
	width: 100%;
	height: 8vh;
	background-color: #000;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: nowrap;
}
.tabCabecera{
	width: 50%;
	height: 100%;
}
#spnCabBotDer, #spnCabBotDerCarr, #spnCabBotDerInf {
	position:absolute;
	width: 50%;
	height:8vh;
	right:0;
}

.subPanCab_bot{
/*	background-color: 86838a; */
	background-color: transparent;
	color: #bbb;
	padding: 0 0.5em 0 0.5em;
	border-radius: 0.5rem;
	font-family: Verdana;
	letter-spacing: 3px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 2vh;
}
#tabcolor {
	height: 100%;
	width: 100%;
}
#sldCor, #sldSat, #sldLuz {
	padding:1px;
	cursor: pointer;
}
.vvertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#subPanelColor {
	z-index: 2; /* evitar que pelotillas interfieran durante arrastre del slider */
	width: 100%;
	background-color: #ddd;
	border-bottom : 1px solid rgba(0,0,0,0.25);
	border-top : 1px solid rgba(0,0,0,0.25);
	text-align: center;
	margin: 0 auto;
  position: relative;
}
#boxColor {
	height: 100%;
}
#lstColor {
/* ojo: este ancho debiera ser cambiado tras resize */
	width:100%;
	margin-left: -5%;
	list-style-type: none;
}
/*
#lstColor li {
	padding: 3px;
	min-height: 80%;
}
#lstColor li div {
	padding: 5px;
	height: 100%;
}
*/
.inputColor{
	position:relative;
	top: -8px;
	height: 75%;
	width: 9vw;
    max-width: 75px;	
}
#lstColor > li > input[type=number]{
	font-family: Verdana;
	font-size: 14px;
	border: 0;
	border-radius: 3px;
	background-color: transparent;
	border-bottom: 1px solid #555;
}
/* #mascDcha, #mascIzq{ */
.avatar{
	width: 90%;
	width: 100%;
	height: 100%;
/*
	transition-property : width;
	transition-duration : 0.7s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
*/
	left: 0px;
	position: absolute;
/*	transform: scale(-1, 1); */
}
/* #box_masc01Izq, #box_masc01Dcha { */
.box_avatar {
	border: 1px solid ##efefef;
	/*
	transition-duration : 0.7s;
	*/
	transition-property : left, width;
-webkit-backface-visibility: hidden;
webkit-transform:translate3d(0,0,0);
-webkit-transform: translateZ(0);
	-webkit-transition-duration: 0.7s;
	-moz-transition-duration: 0.7s;
	-o-transition-duration: 0.7s;
	transition-duration: 0.7s;
	position: absolute;
/*	background-color: rgba(250, 180, 0, 0.3); */
	width: 0;
	height: 100%;
}

#enmascaraIzq, enmascaraDcha{
	position: absolute;
	left: 0px;
	width: 100%;
	height: 100%;
	visibility: hidden;
	z-index: 1;
}

/*
#maskNorte {
	background-color: white;
}
#maskSur {
	background-color: black;
}
#maskEste {
	background-color: red;
}
#maskOeste {
	background-color: blue;
}
*/
#allSpace {
	position:absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
}
.maskOeste, .maskEste {
	top: 0;
	width: 50%;
	height:100%;
}
.maskNorte, .maskSur {
	left: 0;
	width: 100%;
	height: 50%;
}
.mask {
/*	visibility: hidden; */
	position: absolute;
	background-color: #eaeaea;
/*	background-color: #fff; */
}

#mascarator {
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	background-color: #dadada;
	border: 10px solid red;
	opacity: 0.5;
	visibility: hidden;
}

#subPanelSelLadoCor {
	position: relative;
	top: 1%;
	margin: auto;
	width: 100%;
	height: 100%;
	z-index: 1;
}
#bloqueSelLadoCor {
	width: 50%;
	margin-left: 25%;
	margin-right: 25%;
}
#cSelCor{
	border: 10px solid red;
}
 #cSelCorIzq, #cSelCorMed, #cSelCorDer{
		opacity: 0;
		-ms-transform: rotate(45deg); /* IE 9 */
		transform: rotate(45deg);
		width: 3vh;
		height: 3vh;
		padding: 0.3vh;
		background-color: #999;
		border: 1px solid rgba(50,50,50,0.1);
    border-radius: 100%;
    border-top-left-radius: 0;
    box-shadow: inset rgba(191, 235, 255, 0.8) 0 0 12px;
		-webkit-transition: opacity 0.3s ease 0.2s;
		-moz-transition: opacity 0.3s ease 0.2s;
		-o-transition: opacity 0.3s ease 0.2s;
		transition: opacity 0.3s ease 0.2s;
}
#cSelCorTex{
		-webkit-tap-highlight-color: transparent;
    -webkit-transition: opacity 0.3s ease 0.2s;
		-moz-transition: opacity 0.3s ease 0.2s;
		-o-transition: opacity 0.3s ease 0.2s;
		transition: opacity 0.3s ease 0.2s;    
}

.selCorBall {
	position: relative;
	left: 0.05vh;
	top: 0.05vh;
	cursor: pointer;
		width: 1.8vh;
		height: 1.8vh;
		border: 0.1vh solid rgba(0,0,0,0.3);
    border-radius: 100%;
}

#cSelCorIzq{
	float: left;
	margin-left: -10px;
  margin-top: -8vh;
}
#cSelCorMed {
	position:relative;
	left: 51%;
	bottom: 4.5vh;
}
#cSelCorDer {
	float: right;
  margin-top: -8vh;
}
#selCorTex {
	background-color: #000;
}
#selCorIzq {
	background-color: #f00;
}
#selCorMed {
	background-color: #0f0;
}
#selCorDer {
	background-color: #00f;
}
.selCorLado {
	cursor: pointer;
}
#subPanelAvatar{
	overflow: hidden;
	position: relative;
	background-color: #efefef;
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
/*
  padding: 4% auto 2% auto;
*/
}
.rSelCor {
	background-color: #ddd;
	box-shadow: 5px 10px 15px rgba(0,0,0, 0.5);
	position: absolute;
	width: 150%;
	height: 150%;
	left: -33%;
	top: -33%;
	border-radius: 50%;
	opacity: 1;
	border: 1px solid rgba(0,0,0,0.4);
	visibility: hidden;
	z-index: 1;
	transition-property : width, height;
	transition-duration : 1s;
}
.hand {
	cursor: pointer;
}

#boxAvatar {
	position: relative;
	/*
	left:4%;
	top:4%;
	width:98%;
	height:92%;
	*/
	left:0;
	top:0;
	width:100%;
	height:100%;}

.cordel {
	z-index: 1;
	opacity: 0;
	background-color: #99a;
	width: 1px;
	min-width: 1px;
	max-width: 1px;
	height: 8.2%;
	position: absolute;
	transition-property : opacity;
	transition-duration : 1s;
}
/* ----------------------------------------------------
 * subPanelSelAvatar
*/
.pc5 {
	width: 5%; max-width: 5%;
}
.pc10 {
	width: 10%; max-width: 10%;
}
.pc12 {
	width: 12.5%; max-width: 12.5%;
}
.pc15 {
	width: 15%; max-width: 15%;
}
#subPanelSelAvatar{
	width: 100%;
	vertical-align: middle;
	text-align: center;
	border-bottom : 1px solid #bababa;
	background-color: #ddd;
}
#tablaSup {
	width: 100%;
	position: absolute;
	top: 8%;
/*	padding: 7px; */
	padding: 0 auto;
}
#simeIcon, #simeFillIcon {
	height: 3.5vh;
	width: 4.5vh;
	cursor:pointer;
	padding : 2px;
	border-radius : 15%;
	border : 1px solid #bbb;
	background-color : #fff;
	border-top:5px solid #52aaff;
}
#botViewDcha {
	float: left;
}
#botViewIzq, #botViewDcha {
	z-index: 1;
	width: 5.5vh;
	height: 5vh;
	cursor: pointer;
}
#simetrue, #simefalse{
	float: right;
}
#tablasup{
	position:absolute;
	top: 20%;
	width: 100%;
}
.botSup {
	text-align: center;
	position: absolute;
	top: 10%;
	left: 35%;
	width: 30%;
}
.botVivCor {
	cursor: pointer;
	width: 7vh;
	height: 4.5vh;
	border-radius: 5px;
	font-family: Verdana;
	font-size: 20px;
	display: inline-block;
}

.botVivCor :hover {
	opacity: 1;
}

#msgInfoBox{
	position : absolute;
	right : 0;
	top: 0;
	width : 100%;
	height : 0;
	text-align: center;
	background: linear-gradient(180deg, rgba(130,255,0,0.95) 0%, rgba(65,127,0,0.95) 100%);
	padding : auto;
	transition-property : height;
	transition-duration : 0.3s;
	overflow : hidden;
}
#msgInfoTag{
	font-family : Verdana;
	font-size : 16px;
	color : #000;
	margin-bottom : 40ch;
}
/* subPanelPie ---------------------------------------------------- */
/*
		.subPanelPie_lsH{
			list-style-type: none;
			display: inline-block;
			width: 100%;
			text-align: center;
			padding: 0;
		}
		.subPanelPie_lsH li {
			display: inline;
			padding: 0 10px 0 10px;
		}
*/
		.subPanelPie_bot:hover {
			color: #dddd00;
		}
		.subPanelPie_bot:active, .subPanCab_bot:active {
			border-radius: 1.5ch;
			color: #ffbb00;
		}
		.subPanelPie_bot{
			background-color: #000;
			color: #fff;
			padding: 1vh 2vh 1vh;
			border: 0;
			border-radius: 1ch;
			font-family: Verdana;
			font-size: 2.5vh;
			letter-spacing: 3px;
			height: 7vh;
		}
		#subPanelPie{
			background-color: #000;
			border-bottom: 1px solid #999;
			background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
			width: 100%;
			padding: 5px;
		}
		#botImagen {
			background-image : url('../iarq/img/addImg70x30.svg');
			background-repeat: no-repeat;
			background-position:center center;
			background-size: auto 80%;
			transition-property : opacity;
			transition-duration : 1s;
			cursor: pointer;
		}

.msgIni {
	background-color : #fff;
	position : relative;
	left : 0;
	top : 0;
	width: 100%;
	height : 100%;
	text-align: center;
/*
	transition-property : background-color;
	transition-duration : 1s;
*/
  transition: opacity 1s, background-color 1s;
}
#msgIniCaption {
	position: relative;
	top: 33%;
	vertical-align:middle;
	font-family : Verdana;
	color: white;
	font-size: 30px;
	opacity: 0;
	transition-property : opacity;
	transition-duration : 0.8s;
/*  transition: opacity 0.8s, color 2s; */
}

[class*="col-"] {
	width: 100%;
	display: block;
}
	.col-25 {
		float:left;
	}
	.col-70 {
		float:right;
	}

#spnGalImg {
	height: 100vh;
}		

/* -------------------- */
/* @media only screen and (max-width: 600px) { */

@media only screen and (min-width: 768px) and (max-width: 1000px) {
	.boxForm {
		width:70%;
		margin:0 15%;
	}
	#galSelImg, #spnGalImg {
		width:64%;
		margin-left:18%;
	}
	.imgExtGalItemW, .imgExtGalItemH {
		margin: 0.5%;	
	}
	.lstHor > .itemLstHor >a {
		font-size: 16px;
	}
}
@media only screen and (min-width: 1000px) {
	.boxForm {
		width: 50%;
		margin:0 25%;
	}
	#frmContact select,
	#frmContact input,
	#frmContact textarea {
		width: 95%;
	}
	#galSelImg  {
		width: 60%;
		margin-left: 20%;
	}
	#spnGalImg {
		width:46%;
		margin-left:27%;
	}		
	.imgExtGalItemW, .imgExtGalItemH {
		margin: 0.5%;	
	}	
	.lstHor > .itemLstHor >a {
		font-size: 20px;
	}
}

/*
.col-25 {
  float: left;
  width: 20%;
	margin-left: 5%;
  margin-top: 6px;
}

.col-70 {
  float: left;
  width: 70%;
	margin-right: 5%;
  margin-top: 6px;
}
*/



/* { panCarrito panContacto **************************************************** */
#panCarrito, #panDatosCliente, #panContacto {
	overflow: hidden;
}
#panCarrito{
	transition-property : opacity;
	transition-duration : 0.9s;
}
.btnBack {
	cursor: pointer;
	position:absolute; left:3ch; top:1ch;
	padding: 1ch;
	width: 5ch;
	height: 5ch;
	border-radius: 50%;
	background-color: black;
	opacity: 0.75;
}
#btnBackPrinc {
	top:0.5vh;
}
.saeta {
  border: solid white;
  border-width: 0 0.7ch 0.7ch 0;
  display: inline-block;  padding: 0.7ch;
	position: relative;
	top: -1.2ch;
	left: 0.5ch;
  border-radius : 15%;
}
#edProd {
	max-width: 80%;
}
.rota270 {
  -webkit-transform: rotate(135deg);	
  transform: rotate(45deg);
}
.cabPanel {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 8%;
	display: -webkit-box;
	display: -ms-flexbox;
	display:  flex;
	flex-wrap:  nowrap;
}
.centrado {
	text-align: center;
}
#boxForm h3 {
  display: block;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 10px;
}
#tabTallas {
	width: 100%;
}
#tabBotCarrito {
	margin: 0 auto;
}
.flecha {
	background-color: #000;
	color: #fff;
}
.botoneraInf {
	position: fixed;
	left: 0;
	bottom: 0;
	height: 12vh;
/*	background-color: rgb(200,200,200); */
	background-color: transparent;
	width: 100%;
	padding-top:2vh;
}
.botonCarrito {
	background-color: #000;
	color: #fff;
	font-size: 2rem;
	border-radius: 8px;
	font-size: 2rem;
	cursor: pointer;
/*	padding: 2vh 3vh; */
	padding: 1.5vh 2.5vh;
	border: 0.5vh solid transparent;
}
.botonCarrito:hover {
	border-color: #000;
}
.botonCarrito:active {
	border-color: #52aaff;
}
.pad5 {
  padding: 5px;
}
.padV9 {
	padding-top: 9px;
	padding-bottom: 9px;
}

#frmContact select,
#frmContact input,
#frmContact textarea {
  width: 98%;
  padding: 6px;
  margin-bottom: 6px;
	font-size: 16px;
	border: 0;
  border-bottom: 1px solid #aaa;
  border-radius: 4px;
  resize: vertical;
}

select{
	background-color: rgb(202, 220, 255);
	width: 100%;
}

.centrarLista {
  position: absolute; /*a variation of an "lte ie7" hack*/
  top: 50%;
  display: table-cell;
	text-align: center;
}

.lstHor{
	list-style-type: none;
	margin: 0 auto;
    text-align: center;
    padding: unset;
}
.lstHor > .itemLstHor  {
  display: inline-block;
	margin: 2vw;
	font-size: 12px;
/*  width: 15%; */
}
.itemLstHor > a {
	text-decoration: none;
	font-weight: bold;
	color: #22224f;
}
.itemLstHor > a:visited {
	color: #be4b18;
}
/* da5904 */
/*
.inputTalla {
	width: 100%;
}

.inputTalla li {
	display: block;
}
*/
input[type="number"] {
/*  width: 30px; */
  padding: 2px;
  border: 1px solid #ccc;
  border-radius: 0.7vh;
	padding-left: 1vw;
  resize: vertical;
}
.cabezaArticulo {
	width: 100%;
}
label {
/*  padding: 12px 12px 12px 0; */
  display: inline-block;
}
.labelForm {
	color: #3a3943;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
	padding: 12px 0 4px 0;
}

.labelAsterisco {
	padding-top: 12px;
  font-family: Courier New, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #F00764;
}

/* /////
input[type=submit] {
*/
#btnOkPedido{
  background-color: rgba(30, 32, 64, 1);
	color: #fff;
	font-size: 20px;
	font-weight: bold;
  padding: 12px 20px;
  border: 2px solid rgba(0,0,0, 0.2);
  border-radius: 4px;
  cursor: pointer;
	height: 8ch;
  margin-top: 16px;
  margin-bottom: 13vh;
	letter-spacing: 3px;
	-webkit-appearance: none;
}

/* /////
input[type=submit]:hover {
*/
#btnOkPedido:hover{
  background: rgba(10, 10, 17, 1);
	color: #bb0;
  border: 2px solid rgba(0,0,0, 0.2);
}

/* /////
input[type=submit]:active {
*/
#btnOkPedido:active{
	color: #fc0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
*/
.boxForm {
  border-radius: 5px;
  /*background-color: #f2f2f2; */
  background-color: #aaa;
  padding: 1% 2%;
	height: 80vh;
	width:90%;
	margin-left: 5%;
	overflow-y: auto;
}

#frmContact {
	margin-top:8vh;
	width:94%;
	margin-left:3%;
}

/* No floats despues de las columnas */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.imax{
	position: absolute;
	cursor: pointer;
	background-color: transparent;
	z-index: 2;
	transform: rotate(8deg);
	visibility: hidden;
}
.imgProd{
	cursor: pointer;
}

/* Botones laterales de avance y retroceso
.botAvance {
	position: fixed;
	top: 50%;
	height: 300px;
	background-color: #000;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid rgb(255, 187, 0);
	transform: translateY(-50%);
}
.botFore {
	right: 0;
	border-radius: 15px 0 0 15px;
}
.botBack {
	left: 0;
	border-radius: 0px 15px 15px 0px;
}
*/
#idArtic {
	float: left;
	margin-left: 5%;
}
#imgBorrarLinea1 {
	float: right;
	margin-top: -10px;
	margin-right: -1%;
}

.tabCantid {
	width: 90%;
	margin-left:5%;
	text-align: center;
}
.inputMain {
	width: 64px;
	border: 1px solid #000;
	padding: 5px 0 5px 0;
	font-weight: bold;
	font-size: 1.5rem;
	text-align: center;
}
.labelCant {
	width: 64px;
	border: 1px solid #000;
	padding: 2px 0 2px 0;
	font-size: 1rem;
	text-align: center;
}

.inputTalla{
	list-style-type: none;
	margin:0 auto;
	width: 100%;
	padding: 0;
}

.labelConfirma {
  padding: 12px 4px 4px 0;
  display: inline-block;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.datoConfirma {
  padding: 12px;
  resize: vertical;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
}

.botonRetorno {
   cursor: pointer;
   width: 8vh;
}
#orderBackProgBar {
	visibility: hidden;
  background: #fff;
  color: #d3d3d3;
	cursor: pointer;
	position: absolute;
	left: 0;
	top : 0;
  width: 0;
  height: 0;
	transition-property : width;
	transition-duration : 7s;
	transition-timing-function: ease-in;
}
#imgRemLin1, #imgRemLin2, #imgRemLin3 {
	cursor: pointer;
}

/* } panCarrito y panDatosCliente **************************************************** */

/* { panDatosCliente **************************************************** */
/* } panDatosCliente **************************************************** */
/* { panIni **************************************************** */
#panIni {
	overflow: hidden;
	z-index: 2;
/*
	background-color: #eee;
  text-align: center;
  vertical-align: middle;
*/
	position:absolute;
	left:0;
	top:0;
	min-width: 100%;
	min-height: 100%;
	background: rgba(0,0,0,0.95);
	background-size: 500% 300%;
}
#hohou {
	display: none;
}
#tbc {
	width: 100%;
	height: 20%;
	margin-top:3%;
}
@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;
	}
}

.iniwrap {
  margin: 23%;
  text-align: center;
  vertical-align: middle;
}

.inicontainer {
  display: inline-block;
  width: 150px;
}

.inibox {
  border-radius: 50%;
  height: 0;
  margin: 30px auto;
  width: 0;
	margin-top: 40%;
}

#tabi {
	position: relative;
	left: 8%;
	width: 84%;
}

/* } panIni **************************************************** */
/* { panInfo **************************************************** */
#infoxanela {
	left : 1%;
	width: 98%;
	top: 15%;
	height: 82%;
	padding: 0 35px;
        line-height: 1.2em;
        text-align: justify;
        overflow-y: scroll;
        font-family: Verdana;
}
#infoxanela h1 {
	margin-top: 2rem;
	line-height: 1.4;
}
#infoxanela h2 {
    line-height: 1.4;
}
#infoxanela h3 {
    font-size: medium;
}
#infoxanela p, li {    
    font-size: 12px;
    color: #545454;
}

#infoxanela a {
    color: #545454;
}

#infoxanela figure {
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

#infoxanela table {
    margin-bottom: 2.5rem;
}

#infoxanela tr {
    text-align: left;
}

#infoxanela td {
    font-size: 14px;
    color: #545454;
    padding: 8px;
}

#cubrelnk {
	position : absolute;
	right : 0;
	top : 0;
	height : 1vh;
	width: 15vw;
}
/* } panInfo **************************************************** */
/* { panImagen **************************************************** */

/* {  **************************************************** */
.grad000_dadada {
background: linear-gradient(0deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,1) 100%);
}
#spnEditImgFoot {
	z-index: 2;
	visibility: hidden;
	position: absolute;
	width: 100%;
	background-color: #000;
	left: 0;
	bottom: 0;
	height: 31%
}

tabImgInf2 > td {
	width: 20%;
	border-radius: 20px;
}
.btnImgEdit {
	opacity: 0.75;
	padding:7px;
	border-radius: 20%;
	border: 3px solid rgba(255,255,255,0.15);
	cursor: pointer;
}
.btnImgEdit:hover {
	border-radius: 10%;
	opacity: 1;
}
.btnImgEdit:active {
	border-radius: 20%;
	border-color: rgba(255,255,255,0.35);
	opacity: 1;
}

.tabImgInf2 {
	margin-left:3%;
	position: absolute;
	bottom: 0;
  width: 94%;
	height: 40%; 
  text-align: center;
}
.tabImgInf {
/*	margin-top: 1ch; */
	margin-left:1%;
  width: 98%;
	height:  30%;
  text-align: center;
}
.btnBlack {
	width: 36px;
	height: 36px;
	padding: 4px;
	cursor: pointer;
	border-radius: 15%;
	border: 2px dotted transparent;
	background-color: black;
}
.btnBlack:active {
	background-color: #2d335e;
}
.chivaFoco {
	position: absolute;
	background-color: rgba(50,70,255,0.7);
	border-radius: 18%;
	opacity: 0.65;
}

#sliderImg {
	background-color: #555;
	background-image : url('../iarq/img/fondoSlider.png');	
	background-repeat: repeat-x;
	background-position:center center;
	position:relative;
	margin-left:2%;
	margin-right:2%;
	width: 96%;
	height: 70%;
	margin-top: calc(-25vh * .2);
	cursor: pointer;
}


#botContinuar {
	background-color:#f95;
	font-weight:bold;
	color:black;
	border:2px solid rgba(0,0,0,0.5);
	cursor: pointer;
}
/* }  **************************************************** */
/* }  **************************************************** */
/* {  **************************************************** */
/* }  **************************************************** */
.opo { opacity:0.5;}

page_wrapper {
	display: none;
}

.imgExtGalItemW, .imgExtGalItemH {
	vertical-align: middle;
	border: 1vw solid transparent;
/*
	margin: 1vw;
	padding: 0.5vw;
*/
	margin: 1%;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 5px 10px 15px rgba(0,0,0, 0.5);
}
.imgExtGalItemW:hover, .imgExtGalItemH:hover {
	border: 1vw solid #000;
}
.imgExtGalItemW {
	/* width: 29%; */
	width: 27.5%;
}
.imgExtGalItemH {
	height: 19%;
}

#galSelImg {
/*	margin-top: 8vh; */
	height: 92vh;
	overflow: auto;
}

.imgGalCategH {
	width: 14%;
	height: auto;
	background-color: rgb(238, 238, 238);
	border-radius: 10%;
	border: 2px solid rgb(170, 170, 170);
	margin: 2%;
}
.imgGalCategV {
	width: 25.5%;
	height: auto;
	background-color: rgb(238, 238, 238);
	border-radius: 10%;
	border: 2px solid rgb(170, 170, 170);
	margin: 4% 2% 2%;
}
.imgGalCategX {
	width: 19%;
	height: auto;
	background-color: rgb(238, 238, 238);
	border-radius: 10%;
	border: 3px solid rgb(170, 170, 170);
	margin: 2%;
	visibility: hidden;
	cursor: pointer;
}
.imgGalCategX:hover {
	border-color: #555;
}
.imgGalCategX:active {
	border-color: #000;
}
#labelProgress {
    color: rgba(40, 43, 68, 1);
    font-size: 2vh;
    font-weight: bold;
    cursor: pointer;
    float: right;
    width: 100%;
    margin-top: -7vh;
    letter-spacing: 3px;
    text-align: center;
		visibility: hidden;
}

#Enviar2 {
	width: 8vh;
	height: 8vh;
	background-repeat: no-repeat;
	background-image: url('../iarq/img/btnBackGreen.svg');
	color: transparent;
	border: none;
	background-color: transparent;
	-webkit-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

#panTapa {
    position: absolute;
    visibility: visible;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-color: white;
    text-align: center;
		vertical-align: middle;
}

#cimgTapa {
    height: 50vh;
    margin-top: 25vh;
}

.slider {
	-webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background-color: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  border-radius: 10px;
}

.slider:hover {
  opacity: 0.5;
  background-color: #a3a3a3;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 40px;
  background: #4CAF50;
  cursor: pointer;
  border-radius: 10px;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 40px;
  background: #4CAF50;
  cursor: pointer;
}
/* ------------------------------------- */
.tooltip {
	opacity: 0;
	border-bottom: 1px dotted #000000; color: #fff; outline: none;
	cursor: help; text-decoration: none;
	position: absolute; z-index: 3;
	border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
	letter-spacing: 2px;
	font-size: 18px;
	position: absolute; left: 1em; top: 2em; z-index: 99;
	margin-left: 0;
	transition-property : opacity;
	transition-timing-function: ease-in;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 1em; 2.4em }
.info { background: #000; border: 1px solid #ccc;}