/* CSS Document */


/* codigo de video en reemplazo de sg-video...etc */
.videobox {
	position: absolute;
	top: 130px;
	left: -111px;
	width: 100%;
	z-index: 100;
}
.videobox iframe {
	position: relative;
	top: 50px;
	left: 309px;
}
.cartel {
	position: absolute;
	cursor: pointer;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	text-align: center;
	min-width: 200px;
	max-width: 760px;
	z-index: 101;
}
.titcartel {
	color: rgb(255, 255, 255);
	font-size: 1em;
	padding: 10px;
	border-radius: 10px;
	box-shadow: rgb(0, 0, 0) 0px 0px 10px;
	background: rgb(19, 26, 45);
}
.titcartel h2 {
	padding: 7px 10px 11px;
	border-radius: 7px;
	border: 3px dashed rgb(243, 236, 130);
}
/* Finaliza codigo de video */




.etabs {
	position: absolute;
	top: 92px;
	left: 30px;
	width: 100%;
	height: 43px;
	z-index: 101;
}
.tab a{
	border-radius:0px 0px 130px 130px;
	
	color:#000000;
	text-decoration:none;
	height: 225px;
	width: 87px;
	display: block;
	margin-top: -11px;
	padding-top: 8px;
}
.tabsa {
	position: absolute;
	top: 1px;
	left: 1056px;
	background-image: url(../img/pes1.png);
	width: 82px;
	height: 220px;
	text-align: center;
	padding-top: 11px;
}
.tabsb {
	position: absolute;
	top: 1px;
	left: 1138px;
	background-image: url(../img/pes2.png);
	width: 82px;
	height: 220px;
	text-align: center;
	padding-top: 11px;
}
.tabsc {
	position: absolute;
	top: 1px;
	left: 1220px;
	background-image: url(../img/pes3.png);
	width: 82px;
	height: 220px;
	text-align: center;
	padding-top: 11px;
}

img.cerrar {
	position: absolute;
	top: -12px;
	right: -17px;
	cursor:pointer;
}
li.tabsa.active {
	background-image: url(../img/pes1sobre.png);
}
li.tabsb.active {
	background-image: url(../img/pes2sobre.png);
}
li.tabsc.active {
	background-image: url(../img/pes3sobre.png);
}

input{
	position: absolute;
	height: 57px;
	font-size: 56px;
	background: none;
	border-radius: 15px;
	border: dashed 5px #eb7f26;
	text-align: center;
}

#botonera{
	width: 280px !important;
}

/****************************************************Animación1*/
.interimagen1{
	animation-name: 'aparecer1';
    animation-duration: 5s;
    animation-iteration-count: 1;
	-webkit-animation-name: 'aparecer1';
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 1;
}
@keyframes 'aparecer1' {
   0%{ opacity: 0}   
   100%{ opacity: 1;}
}
@-webkit-keyframes 'aparecer1' {
   0%{ opacity: 0}   
   100%{ opacity: 1;}
}

.flechas1{
	animation-name: 'flecha1';
    animation-duration: 5s;
    animation-iteration-count: 1;
	-webkit-animation-name: 'flecha1';
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 1;
}
@keyframes 'flecha1' {
   0%{opacity: 0; top: 150px;}
   50%{ opacity: 0; top: 150px;}   
   100%{ opacity: 1; top: 200px;}
}
@-webkit-keyframes 'flecha1' {
   0%{opacity: 0; top: 150px;}
   20%{ opacity: 0; top: 150px;}   
   100%{ opacity: 1; top: 200px;}
}

.interimagen2{
	animation-name: 'aparecer2';
    animation-duration: 10s;
    animation-iteration-count: 1;
	-webkit-animation-name: 'aparecer2';
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: 1;
}
@keyframes 'aparecer2' {
   0%{ opacity: 0} 
   50%{ opacity: 0}   
   100%{ opacity: 1;}
}
@-webkit-keyframes 'aparecer2' {
   0%{ opacity: 0}
   50%{ opacity: 0}   
   100%{ opacity: 1;}
}

.flechas2{
	animation-name: 'flecha2';
    animation-duration: 13s;
    animation-iteration-count: 1;
	-webkit-animation-name: 'flecha2';
    -webkit-animation-duration: 13s;
    -webkit-animation-iteration-count: 1;
}
@keyframes 'flecha2' {
   0%{opacity: 0; top: 400px;}
   70%{ opacity: 0; top: 400px;}   
   100%{ opacity: 1; top: 448px;}
}
@-webkit-keyframes 'flecha2' {
   0%{opacity: 0; top: 400px;}
   70%{ opacity: 0; top: 400px;}   
   100%{ opacity: 1; top: 448px;}
}

.interimagen3{
	animation-name: 'aparecer3';
    animation-duration: 17s;
    animation-iteration-count: 1;
	-webkit-animation-name: 'aparecer3';
    -webkit-animation-duration: 17s;
    -webkit-animation-iteration-count: 1;
}
@keyframes 'aparecer3' {
   0%{ opacity: 0} 
   70%{ opacity: 0}   
   100%{ opacity: 1;}
}
@-webkit-keyframes 'aparecer3' {
   0%{ opacity: 0}
   70%{ opacity: 0}   
   100%{ opacity: 1;}
}
/******************************************************/

.operaimg1{
	animation-name: 'aparecer1';
    animation-duration: 5s;
    animation-iteration-count: 1;
	-webkit-animation-name: 'aparecer1';
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 1;
}

.operaimg2{
	animation-name: 'aparecer2';
    animation-duration: 7s;
    animation-iteration-count: 1;
	-webkit-animation-name: 'aparecer2';
    -webkit-animation-duration: 7s;
    -webkit-animation-iteration-count: 1;
}

.operaimg3{
	animation-name: 'aparecer3';
    animation-duration: 10s;
    animation-iteration-count: 1;
	-webkit-animation-name: 'aparecer3';
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: 1;
}

.operaimg4{
	animation-name: 'aparecer3';
    animation-duration: 15s;
    animation-iteration-count: 1;
	-webkit-animation-name: 'aparecer3';
    -webkit-animation-duration: 15s;
    -webkit-animation-iteration-count: 1;
}

.operaimg5{
	animation-name: 'aparecer3';
    animation-duration: 20s;
    animation-iteration-count: 1;
	-webkit-animation-name: 'aparecer3';
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: 1;
}

.operaimg6{
	animation-name: 'aparecer3';
    animation-duration: 25s;
    animation-iteration-count: 1;
	-webkit-animation-name: 'aparecer3';
    -webkit-animation-duration: 25s;
    -webkit-animation-iteration-count: 1;
}
/***********************************************************/

.textocompletar{
	position:absolute;
	font-size: 50px;
	width: 376px;
}

/*********************************nuevo*/
.cuchara{
	position: absolute;
	top: 330px;
	left: 30px;
}

.verificar{
	position: absolute;
	font-size: 36px;
	background-color: #eb7f26;
	color: #fff;
	padding: 5px 10px;
	border-radius: 15px;
	bottom: 28px;
	right: 39px;
	cursor: pointer;
}
.verificar:hover{
	opacity: 0.8;
}
.verificar:active{
	bottom: 24px;
	opacity: 1;
}