*{
	padding: 0;
	margin: 0;
}

html,body{
	height: 100%;
}
/* PREVENTIVO CLIC*/
.clic{
	position: fixed;
	left: 150px;
	margin-top:-34px; 
  -webkit-animation-duration: 9s;
  -webkit-animation-name: titulo;
  -moz-animation-duration: 9s;
  -moz-animation-name: titulo;
  -ms-animation-duration: 9s;
  -ms-animation-name: titulo;
  animation-duration: 9s;
  animation-name: titulo;
	
}
@-webkit-keyframes titulo {
	0%{margin-left: 5%; }
	20%{margin-left: -10%; }
	50%{margin-left: 5%; }
	70%{margin-left: -10%;}
	90%{margin-left: 5%; }
	100%{margin-left: -10%;}
	
}
@-moz-keyframes titulo {
	0%{margin-left: 5%; }
	20%{margin-left: -10%; }
	50%{margin-left: 5%; }
	70%{margin-left: -10%;}
	90%{margin-left: 5%; }
	100%{margin-left: -10%;}
	
}
@-ms-keyframes titulo {
	0%{margin-left: 5%; }
	20%{margin-left: -10%; }
	50%{margin-left: 5%; }
	70%{margin-left: -10%;}
	90%{margin-left: 5%; }
	100%{margin-left: -10%;}
	
}







.cuadro{width: 150px;
	height: 150px;
	background-size:cover;
	float:left;
}


.contenedor{
	width:450px;
	height:450px;
	background-color:black;

}

.uno{background-image:url(../img/cuadro/clic_01.jpg);}
.dos{background-image:url(../img/cuadro/clic_02.jpg);}
.tres{background-image:url(../img/cuadro/clic_03.jpg);}
.cuatro{background-image:url(../img/cuadro/clic_04.jpg);}
.cinco{background-image:url(../img/cuadro/clic_05.jpg);}
.seis{background-image:url(../img/cuadro/clic_06.jpg);}
.siete{background-image:url(../img/cuadro/clic_07.jpg);}
.ocho{background-image:url(../img/cuadro/clic_08.jpg);}
.nueve{background-image:url(../img/cuadro/clic_09.jpg);}



.unoPlus{background-image:url(../img/cuadro/thanos_01.jpg);}
.dosPlus{background-image:url(../img/cuadro/thanos_02.jpg);}
.tresPlus{background-image:url(../img/cuadro/thanos_03.jpg);}
.cuatroPlus{background-image:url(../img/cuadro/thanos_04.jpg);}
.cincoPlus{background-image:url(../img/cuadro/thanos_05.jpg);}
.seisPlus{background-image:url(../img/cuadro/thanos_06.jpg);}
.sietePlus{background-image:url(../img/cuadro/thanos_07.jpg);}
.ochoPlus{background-image:url(../img/cuadro/thanos_08.jpg);}
.nuevePlus{background-image:url(../img/cuadro/thanos_09.jpg);}

























.margin-nav{margin-top: 99px;}

.bg-uno{background-image: url(../img/bg-uno.jpg);}
.bg-dos{background-image: url(../img/bg-dos.jpg);}
.bg-tres{background-image: url(../img/bg-tres.jpg);}
.bg-cuatro{background-image: url(../img/bg-cuatro.jpg);}
.bg-cinco{background-image: url(../img/bg-cinco.jpg);}	
.bg-seis{background-image: url(../img/bg-seis.jpg);}
.bg-siete{background-image: url(../img/bg-siete.jpg);}
.bg-ocho{background-image: url(../img/bg-ocho.jpg);}

.bg-uno, .bg-dos,.bg-tres, .bg-cuatro,.bg-cinco,.bg-seis,.bg-siete,.bg-ocho{
	background-size: cover;
	background-repeat: no-repeat;
}

.bg-red{background-color: #ef4035;}



.bg-right{background-position: 250px 0px;}
.bg-left{background-position: -250px 0px;}
.bg-black{background-color: black;}	
.color-white{color: white;}
.color-red{color: #ef4035;}
.color-limon{color:#a3d105;}



.ancho-total{width: 100%;}
.alto-total{height: 100%;}

.left{float: left;}
.inline{display:inline-block;}
.block{display: block;}

.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}
.text-justify{text-align: justify;}

.contenedor-izquierda{margin-left: 10%;}
.contenedor-centro{margin:auto;}
.contenedor-derecha{margin-left: 45%}

.contenedor-izquierda,.contenedor-centro,.contenedor-derecha{
	padding-top: 120px;
}

.gill{font-family:gill sans;}
.big-title{font-size:250%}
.sub-title{font-size:180%}
.title{font-size:120%}

.sombra {text-shadow: 0px 3px 4px #000;
	 }


.arrowDown{
	width: 100px;
}


.separador{
	width: 70%;
	height: 2px;
	background-color: red;
	margin: auto;
}




/******************************MENU LATERAL***************************/
/******************************MENU LATERAL***************************/
.menu-lateral{
	width:auto;
	height: auto;
	position: fixed;
	margin-top: 30px;
	margin-left: 10px;
}

.contenedor-btn{
	width: 100%;
	height: 50px;
	margin: 10px;
}	
.btn-der{
	width: 50px;
	height: 50px;
	background-image: url(../img/numeros.png);
	background-size: 300px;
}

.btn-der:hover{transition:.5s;}

.btn1{background-position: 0px  0px;}
.btn2{background-position: 0px -50px;}
.btn3{background-position: 0px -100px;}
.btn4{background-position: 0px -150px;}
.btn5{background-position: 0px -200px;}
.btn6{background-position: 0px -250px;}
.btn7{background-position: 0px -300px;}
.btn8{background-position: 0px -350px;}

.btn1:hover, .btn1:visited {background-position: -50px 0px;}
.btn2:hover, .btn2:visited {background-position: -50px -50px;}
.btn3:hover, .btn3:visited {background-position: -50px -100px;}
.btn4:hover, .btn4:visited {background-position: -50px -150px;}
.btn5:hover, .btn5:visited {background-position: -50px -200px;}
.btn6:hover, .btn6:visited {background-position: -50px -250px;}
.btn7:hover, .btn7:visited {background-position: -50px -300px;}
.btn8:hover, .btn7:visited {background-position: -50px -350px;}

.txt-izq{
	width: 200px;
	height: 50px;
	background-image: url(../img/numeros.png);
	background-size: 300px;
	background-position: 200px 0px;
}

.texto2{background-position: 200px -50px;}
.texto3{background-position: 200px -100px;}
.texto4{background-position: 200px -150px;}
.texto5{background-position: 200px -200px;}
.texto6{background-position: 200px -250px;}
.texto7{background-position: 200px -300px;}
.texto8{background-position: 200px -350px;}
/******************************MENU LATERAL***************************/
/******************************MENU LATERAL***************************/

.audio{width: 200px; margin:10px 0px;}
.marco{width: 300px;}
.contenedor-texto{width: 45%;}



@media screen and (max-width: 980px) {
.alto-total{height: 60%;}
.bg-right{background-position: 20px 0px;}
.bg-left{background-position: -400px 0px;}
.contenedor-btn{margin: 5px;}	
}


@media screen and (max-width: 800px) {
	.alto-total{height: 55%;}
	.contenedor-texto{width: 40%;}
	.bg-right{background-position: -50px 0px;}
    .bg-left{background-position: -400px 0px;}
    .marco{width: 250px;}
}

@media screen and (max-width: 768px) {
	.alto-total{height: 100%;}
	.contenedor-texto{width: 70%;}
    .contenedor-derecha{margin-left: 10%}
    .big-title{font-size:200%}
    .sub-title{font-size:130%}
    .title{font-size:100%}
    .marco{width: 200px;}
    .contenedor-izquierda,.contenedor-centro,.contenedor-derecha{
	padding-top: 10px;}
	.menu-lateral{
		display: none;
	}

}

@media screen and (max-width: 768px) {
	.alto-total{height: auto; padding-bottom: 30px;}
	.margin-nav{margin-top: 130px;}
	.big-title{font-size:150%}
    .sub-title{font-size:130%}
    .title{font-size:120%}
    .contenedor-texto{width: 80%;}
    .bg-right{background-position: 100px 0px;}
    .bg-left{background-position: -400px 0px;}

}