*{margin:0;padding: 0;}

body{
	background: #0C94B6; /*Fondo Total*/
}


 
/*Aqui empieza header */
header{
	width: 100%;
	overflow: hidden; /*Como se van a desplazar algunos elementos a Izq y der esto impide q haya un error*/
	background: #252932;
	margin-bottom: 5px;
	opacity: 0.5;
	position: absolute; /*sin esto no funciona z-index ademas no permitia al header y al slider estar uno detras de otro sino q el header desplaza al slider hacia abajo*/
	z-index: 100;
}
.wrapper{
	width: 90%;
	max-width: 1500px;
	margin:auto;		/*sirve para Centrar 07:50*/
	overflow: hidden;
	
}
header .logo img{
	height: 50px; /*ancho de todo el header*/
	float:left;

	/*text-align: center; sirve para Centrar*/
	/*margin-top: 10px;*/
	/*margin:auto;*/
	/*display: flex; Para centrar el h1 // basta esto para centrar el logo*/
	/*justify-content: center; Centra el h1 en arriba horizontalmente*/
	/*align-items: center; Centra el h1 en el medio verticalmente*/
	/*font-size: 15px;*/
}

header nav{
	float: right;
	line-height: 40px;
}

header nav a{
	display:inline-block;
	color: #fff;
	text-decoration: none;
	padding: 10px 15px;
	line-height: normal; /*Resetea el alto de la linea xq arriba menciona 80px, entonces se puede hacer click en todo el alto y con "NORMAL" solo se hace click en la letra ejem "INICIO" y asi se consigue su efecto de rectangulo a bordeado 11:45*/
	font-size: 20px;
	font-weight: bold;
	-webkit-transition:all 800ms ease; /*escribes -transition y tab*/
	-o-transition:all 800ms ease;
	transition:all 800ms ease;
	
}

header nav a:hover {
	background: #f56f3a;
	border-radius: 50px;
}

.topnj{
	text-align: right;
	color: #fff;
	padding: 5px 15px 0px;
	font-size: 13px;
	font-weight: bold;

}

.header2{
	position: fixed;
	height: 75px;
	opacity: 0.9;
	/*margin-top: 5px; separa todo el header un poco hacia abajo al hacer scroll*/

}

.contenido p{
	margin-bottom: 1em; /*es igual a 16px*/
	padding-top: 2em;
}

.header2 .logo{
	line-height: 80px;
	margin-top: 5px;
}

.header2 nav{
	line-height: 50px;
}

/*slider*/

.nico {
	width:95%;
	margin:auto;
	overflow: hidden;
	padding-top: 15px;

}

.nico ul {
	display: flex;
	padding: 0;
	width: 400%;

	animation: cambio 20s infinite alternate linear;
}

.nico li {
	width: 100%;
	list-style:none;
}
.nico img {
	width: 100%;
}

@keyframes cambio {
	0% { margin-left: 0; }
	20% { margin-left: 0; }

	25% { margin-left: -100%; }
	45% { margin-left: -100%; }

	50% { margin-left: -200%; }
	70% { margin-left: -200%; }

	75% { margin-left: -300%; }
	100% { margin-left: -300%; }
}

/*Fin slider*/


/*Creacion de clases para aplicar uno sola clase a varios lugares*/
h1{
	color: orange;
}
h3{
	color: #19EBB2;
}
p{
	color: black;
}
.bigger{
	font-size: 29px;
}


/*comienza fotos */
.fotos  { /*EN MENU - TAB 2 encierra fotos de comidas y bebidas*/
  width:1200px;	
  max-width: 90%;
  background: #FFFFFF;
  display: flex; /*gira listas de vertical horizontal*/
  margin:auto;
  border-radius: 1em;
  }

.izq  { /*TAB 2 Toda la columna de fotos de la Izq*/
  float: left;
  width: 50%;
  padding: 10px;
  display: table-column;
  /*background: #fff;*/
  margin-left: 8px;
   border-radius: 1em;
   }
 
.der { /*TAB2 Toda la columna de fotos de la derecha*/
  float: right;
  width: 50%;
  margin-left:5px;
  padding: 10px;
  /*background: #fff;*/
  display: table-column;
  }
  .der, .izq, .red{
  border-radius: 2em;
  }

/*FIn fotos*/

/*servicios*/

#serv img {
	width: 100%;
	height: 60px;
}
.lista ul li{
	 margin-left: 25px;
	 
}


/*FIn servicios*/

/*comm-section seleccionas de Izq a Der y tab*/

/*=============================================
=            Section comment block            =
=============================================*/

/*              17:20 MEdia query  			*/

/*=====  End of Section comment block  ======*/




@media screen and (max-width:720px){

	.fotos, .izq , .der, img{
	flex-wrap: wrap; /*las fotos se ordenan uno encima de otro*/
	/*justify-content: space-between; /*y luego se centran*/*/
	display: block;;
	text-align: center; /*Para centrar una img en css*/
	width: 100%;
	height: 100%;
	}
	img .ig{
		width: 85%;
		height: 100vh;
	}
	header{
		max-height:95px;
	}
	.nico img{
		width: 160%;
	}
	
	header .logo,
	header nav{
		width: 100%;
		text-align: center;
		line-height: 70px;
	}

	header .logo img{
		    position: relative;
		    left: 120px;
		    max-width: 35%;
		    height: 30px;
		    padding: 0px;
	}
	.header2{
		height: auto;
	}
	.header2 .logo,
	.header2 nav{
		line-height: 70px;
	}

	#serv img {
	width: 100%;
	height: 95px;
	}
}
@media screen and (max-width:520px){
	header nav{
		line-height: 18px;
	}
	.header2 nav{
		line-height: 18px;
	}
	header nav a{
		font-size: 15px;
		font-weight: bold;
		padding: 0 5px 0px 5px;
		
	}
	header .logo img{
		padding: 0px;
		margin: 0px;
		height: 30px;
		
	}
	.nico img{
		width: 210%;
	}
	img .ig{
		width: 85%;
		height: 100vh;
	}
	#serv img {
	width: 100%;
	height: 50px;
}
	
}
/*fin MEdia query y empieza JS 20:11; */

/*Aqui termina Header*/