/* 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: 112px;
	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: 35px;
	width: 214px;
	height: 33px;
}

/*********************************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;
}

.audio {
    position: absolute;
    bottom: 60px;
    right: 80px;
    font-size: 34px;
    padding: 13px 21px;
    background-color: green;
    color: white;
    border-radius: 17px;
    cursor:pointer;
}

.audio:hover {
    transform: scale(1.2);
}

.ob_1 {
    position: absolute;
    top: 387px;
    left: 640px;
}
.ob_2 {
    position: absolute;
    top: 405px;
    left: 757px;
	
    transition: all 500ms ease;
 	
    -moz-transition: all 500ms ease; /* Firefox */
 	
    -webkit-transition: all 500ms ease; /* Chrome - Safari */
 	
    -o-transition: all 500ms ease; /* Opera */
}


.ob_3 {
    position: absolute;
    top: 447px;
    left: 843px;
	transition: all 2.5s ease;
 	-moz-transition: all 2.5s ease; /* Firefox */
 	-webkit-transition: all 2.5s ease; /* Chrome - Safari */
 	-o-transition: all 2.5s ease; /* Opera */
}
.ob_4 {
    position: absolute;
    top: 402px;
    left: 929px;
}

.ob_2:hover,.ob_3:hover {
	transform:scale(1.2,1.2);
	cursor:pointer;
	z-index:1;
	box-shadow: none;
}

.ilumina{
	box-shadow: 0px 0px 20px #F0F;
}

.iluminano{
	box-shadow: none;
}
.rotar{
	top: 347px;    
	left: 683px;
	transform : rotate(360deg);
	-moz-transform : rotate(360deg); /* Firefox */
	-webkit-transform: rotate(227deg); /* Chrome - Safari */
	-o-transform : rotate(360deg); /* Opera */
	box-shadow: none;
}
 
img.quince {
    position: absolute;
    top: 131px;
    left: 170px;
    width: 300px;
    display: none;
}

input.compruebaval {
    top: 395px;
    left: 902px;
    width: 244px;
    height: 89px;
    font-size: 58px;
}

input.comprueba {
    top: 530px;
    left: 920px;
    height: 90px;
    border: 1px solid rgb(136, 58, 19);
    background-color: rgb(235, 127, 38);
    color: white;
}

input.comprueba:hover {
    transform: scale(1.2);
}