* {
	width: 1000px;
	max-width: 1000px;
	overflow: hidden;

    margin: auto;
    padding: 10px;
	box-sizing: border-box;
	background-position: center;
}

body {
/*	font-family: 'Anton', sans-serif;*/
	font-family: 'Snowburst One', cursive;
    color: #fff;
    /*background-color: #E8C382;*/
	background-image: url('./img/fuego1.gif');
}


/*
	Se agrega animacion de Colores
*/

          /* PASO 1 KEY FRAME */
          @keyframes cambiarColor {
			0%{
				 background: #760000;
			}

			20%{
				 background: #4E3906;
			}

			40%{
				 background: #A7BA59;
			}

			60%{
				 background: #D8483D;
			}

			80%{
				 background: #4E3906;
			}

			100%{
				 background: #50596C;
			}
	   }



	   /* PASO 2 APLICAR PR0PIEDADES DE ANIMACION */
	   /*
	 - animation-name	-- Nombre a la animacion
	 - animation-duration	-- Duracion
	 - animation-timing-function	-- Movimiento
	 - animation-delay --Retraso
	 - animation-iteration-count	1 | infinite | número -- Cantidad de veces que se repite
	 - animation-direction	normal | reverse | alternate | alternate-reverse - Direccion 
	 - animation-fill-mode	none | forwards | backwards | both -- Que mostrara cuando termine
	 - animation-play-state -- Estao de reproduccion
	 */
	   .ani{
		   /*
			width: 1200px;
			height: 400px;
			*/
			width: 1500px;
			height: 550px;
	 		background: #760000;
		 	margin: auto;
			margin-top: 10px;
			animation-name: cambiarColor;
			animation-duration: 10s;  
			animation-delay: 0.5s;
			animation-iteration-count: 2;
			animation-direction: normal;
			animation-fill-mode: forwards;
			animation-play-state: paused;

			/* ATAJO -- nombre duracion timing delay iteration direction fillmode playstate
		 animation: */
			animation: cambiarColor 4s 0.5 2 normal forwards paused;

	   }

	   .ani:hover{
			animation-play-state: running;
	   }


.hero {
	/*background: #962c35;*/
	min-height: 15vh;
	display: flex;
	align-items: center;
}

.texto {
	width: 750px;
	color: transparent;
	text-align: center;
	text-transform: uppercase;
	font-size: 62px;
	font-weight: bold;

	background-image: url('./img/fondo2.jpg');
	background-size: cover;
	background-position-y: 150px;
	
	background-clip: text;
	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent;
}

.texto2 {
    font-family: 'Verdana';
    color: rgb(88, 10, 10);
	text-align: center;

/*    font-size: 4em;
    text-shadow: 2px 2px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, -1px -1px 0 #333;*/
}

.imagen {
	position: relative;
	overflow: hidden;
  
	padding: 25px 350px;
	vertical-align: top;
}

.imagen img {
	width: 200px;
	height: 230px;
	display: block;
	position: relative;
	z-index: 10;
	margin: -25px 0;
	background-position: center;
}

.imagen2 {
	position: relative;
	overflow: hidden;
  
	padding: 25px 350px;
	vertical-align: top;
}

.imagen2 img {
	width: 250px;
	height: 100px;
	display: block;
	position: relative;
	z-index: 10;
	margin: -25px 0;
	background-position: center;
}