@charset "UTF-8";
/* CSS Document */


/*  
Version: 1.0.0
Author: Roberto CG
Author URI: http://www.raiderslight.com
*/

/************************************ RESET neutralizar algunos de los estilos de los navegadores ************************************************/
* {margin: 0; padding: 0; border: 0; outline: 0;}
header, nav, section, article, aside, footer {display: block;}
img {max-width: 100% !important;}
@media \0screen {img { width: auto;}}


/************************************ GENERAL STYLE ************************************************/
body {font: 1em Arial, Helvetica, sans-serif; background: url("olas.png") bottom repeat-x scroll;color: #666666;}
h1 {margin: 0px;}
h2 {font-size: 22px; color: #007aac; margin-bottom: 20px; margin-top: 40px; padding-top: 20px; text-align: center;}
h3 {font-size: 17px; margin-bottom: 5px; margin-top: 80px; background-color:#FC0; border-radius: 8px; clear: both; color: #FFFFFF; font-size: 17px; padding: 5px 10px;}
h4 {font-size: 15px; margin-left:10px; margin-bottom:20px; color:#CCCCCC;}
hr {margin: 30px 0; border-top: 3px dotted #ccc;}

p {margin: 0 0 20px 0;	padding: 0;text-align: justify;}




/************************************ STRUCTURE ************************************************/

body {
    background-color:#FFFFFF;
    font-family: Tahoma,Geneva,sans-serif;
	margin: 0 auto;
    max-width: 950px;
	min-width: 280px;

}

.titulomovil {
	display: none;
}

.logotipo {
	float: left;
}

.imagenlogo {
	width:170px;	
}

.imagenlogo2 {
	width:100px;	
	margin-right: 100px;
	transition: all 1s;
  	-moz-transition: all 1s; /* Firefox 4 */
 	-webkit-transition: all 1s; /* Safari and Chrome */
  	-o-transition: all 1s; /* Opera */
}

.barracolor {
	position: fixed;
	margin: 0 auto;
	background-color: #0141a5;
	height: 10px;
	left: 0;
	top: 80px;
	width: 100%;
	display: block;
	z-index: -1;
	border-bottom: 5px solid #efeeee;	
}

.contentmenu {
	position: fixed;
	margin: 0 auto;
	background-color: #0141a5;
    height: 80px;
    left: 0;
    top: 0;
    width: 100%;
	display: block;
}

.menu {
    max-width: 950px;
	color:#FFF;
	margin: 0 auto;
}

.menu ul {
	padding-top: 12px;
	padding-left: 0px;
	list-style: none;
	margin: 0;
	min-width: 50%;
}

.menu li {
	display: inline-block;
    font-size: 90%;
	margin-right: -2px;
}

.menu li a {
	color:#FFFFFF;
	border-bottom:5px solid #FFFFFF;
	padding-left: 12px;
	padding-right: 12px;
	padding-bottom:10px;
	text-decoration: none;
}

.menu li a:hover {
	color:#FFFFFF;
	border-bottom:5px solid #b18500;
	padding-left: 12px;
	padding-right: 12px;
	padding-bottom:10px;
	text-decoration: none;
}

.tlf {
	text-align: center;
	color:#67a9e3;
}

.fotoportada2 {
			display:none;	
		}


#destacado2 {
	width: 450px;
	height: 100px;
	float: left;
	background-color:#CCCCCC;
	margin-right: 20px;
}

#destacado3 {
	width: 450px;
	height: 100px;
	float: left;
	background-color:#CCCCCC;
}

.contenido {
	max-width: 910px;
	min-width: 90%;
 	margin-top: 50px;
	margin-left: 10px;
	margin-right: 10px;
	padding: 20px;
	float: left;
}

.contenido2 {
	max-width: 910px;
	min-width: 90%;
 	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	padding: 20px;
	float: left;
}

.hometexto {
	max-width: 650px;
	margin: 0 auto;
	padding-top: 40px;
	padding-bottom: 40px;
	font-size: 1.1em;
	text-align: justify;	
}

.titular {
	font-size: 28px;
	text-align: center;
	color: #003366;
	margin-bottom: 40px;
	margin-top: 70px;	
}

.categorias {
	margin-top: 70px;
	margin-bottom: 80px;
	text-align: center;
	color: #003366;	
	font-size: 14px
}

.categorias a {
	color: #003366;
	text-decoration: none;
	border-bottom: 2px solid;
	padding-bottom: 10px;
}

.categorias a:hover {
	padding-bottom: 7px;	
	color: #b18500;
}

.categorias a:active {
	color: #003366;
	text-decoration: none;
	border-bottom: 2px solid;
	padding-bottom: 10px;
}

a.contacto:link {
	color: #666666;
	text-decoration: none;
}

a.contacto:hover {
	color: #0141a5;
	text-decoration: none;
}

.english {
	text-decoration: none;
	font-size: 14px;
	text-align: right;
	color: #0141a5;
	margin-right: 146px;
	margin-top: -60px;
	
}
.english a {
	text-decoration: none;
	font-size: 14px;
	text-align: left;
	color: #0141a5;
	
}
.english a:hover {
	text-decoration: underline;
	font-size: 14px;
	text-align: left;
	color: #0141a5;
	
}

#banner {
	text-align: center;
	width: 500px;
	float: left;
	position: absolute;
}

.columnaizquierda{
	max-width: 45%;
	float: left;
	letter-spacing: 0.5pt;
}

.columnaderecha {
	width: 45%;
	margin-left: 20px;
	margin-right: 0px;
	padding-top: 0px;
	padding-left: 15px;
	float: left;
	letter-spacing: 0.5pt;
}

.botonllamar {
	border: solid 1px #000000;
	margin: 10px;
	padding: 6px;
	border-radius: 5px;
	background-color: #0141a5;
	color: #FFFFFF;
}

.top0 {
	opacity: 0;
}

.top {
	background-color: #003366;
    font-size: 2em;
    bottom: 0;
    right: 0;
    margin: 5px;
    padding: 5px;
    position: fixed;
    z-index: 200;
	opacity: 0.7;
	width: 30px;
	text-align: center;
}

.top a {
	text-decoration:none;
	color: #FFFFFF;
}

.fotorestaurante {
		display: block;
}

.fotorestaurante2 {
		display: none;
}

.galeria {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 10px;
	border: solid 1px #efeeee;
}

.noticia {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: solid 1px #efeeee;	
}

/*************************** ADAPTADOR DE VIDEOS EXTERNOS youtube etc *****************************************/


.delimitadorvideo{
	width: 90%;	/* Ancho máximo */
	margin: auto;	/* Centramos el vídeo */
}
/* El contenedor con el padding-top crea el tamaño del vídeo */
.contenedorvideo{
	height: 0px;
	width: 100%;
	padding-top: 56.25%; /* Relación: 16/9 = 56.25% */
	position: relative;
}
/* El iframe se adapta al tamaño del contenedor */
.contenedorvideo iframe{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
}



/************************************ FOOTER ************************************************/

.footer {
    margin: 0 auto;
    padding: 30px 0px 160px;
	float: left;
	width: 100%;
	text-align: center;
}

.h6 {
	font-size: 12px;
	text-align: center;
}

.h7 {
	font-size: 12px;
	text-align: center;
	display:none;
}

.botonllamar2 {
	display:none;
}


/**************************** MENU APP ******************************************/
.toggle {
  display: none;
  position: fixed;
  top: 20px;
  right: 0;
  bottom: 0;
  left: 20px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  z-index: 1;
  font-size: 30px;
  color: #FFFFFF; 
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.toggle:hover { color: #FFFFFF; }

.sidebar {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  position: fixed;
  top: 0px;
  right: 0;
  bottom: 0px;
  left: -290px;
  width: 220px;
  padding: 30px;
  background: #0141a5;
  color: white;
  z-index: 0;
}

.sidebar ul {
  list-style-type: none;
  margin: 0;
  margin-top: 10px;
  padding: 0;
  line-height: 0;
 
}

.sidebar li {
  font-size: 1.2em;
  margin-bottom: 20%;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.sidebar li:hover {
  opacity: 1;
  color: #29D4E8;
}

#sidebartoggler { display: none; }

#sidebartoggler:checked + .page-wrapper .sidebar { left: 0px; }

#sidebartoggler:checked + .page-wrapper .toggle { left: 280px;
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
  }


#sidebartoggler:checked + .page-wrapper .page-content { padding-left: 200px; }


.menuapp:link {
	color: #FFFFFF;
	text-decoration: none;
}

.menuapp:visited {
	color: #FFFFFF;
	text-decoration: none;
}

.menuapp:hover{
	color:#b18500;
	text-decoration: none;
}

img.img {
	background-color: #0141a5;
	padding-right: 10px;
	padding-bottom: 5px;	
}

/************************************ MEDIA QUERIES ************************************************/


@media screen and (max-width:1020px) {
		.contentmenu {
			height: 120px;
			text-align: center;
		}
		.menu ul {
			padding-top: 27px;
			padding-left: 0px;
			list-style: none;
			margin: 0;
			min-width: 50%;
		}
		.menu li {
			line-height: 35px;
		}
		
		li.tlf {
			display:none;
		}
		
		.imagenlogo {
			width:150px;	
		}
		.categorias {
		margin-top: 70px;
		}
		.categorias a {
		line-height: 40px;	
		}
		.barracolor {
			top: 120px;
		}
}

@media screen and (max-width:768px) {
		#top {
			background-color: #003366;
 		    font-size: 2em;
 		    bottom: 0;
 		    left: 0;
 		    margin: 15px;
  		    padding: 15px;
  		    position: fixed;
  		    z-index: 200;
		    opacity: 0.7;
			width: 30px;
			text-align: center;
		}
		#linknoticias ul {
			margin-top: 48px;
			float: left;
			margin-right: 15px;
			margin-bottom: 25px;
			font-size: 80%;	
			margin-left: 10px;
		}
		.menu ul {
			padding-top: 27px;
			padding-left: 0px;
			list-style: none;
			margin: 0;
			min-width: 50%;
		}
		
		.english {
			margin-right: 40px;
	
		}
		
		li.tlf {
			display:none;
		}
}

@media screen and (max-width:568px) {
	
		body {
			background: url("olas-largo.png") bottom no-repeat scroll;
		}
		
		.fotoportada {
			display:none;	
		}
		.fotoportada2 {
			display:block;	
		}
		
		img.noticia {
			width: 96%;	
		}
		
		.titulomovil {
			text-align:right;
			color:#FFFFFF;
			background-color:#0141a5;
			height: 40px;
			font-size: 18px;
			padding-top: 20px;
			padding-right: 20px;
			display: block;
}

		.toggle {
			display:block;	
		}
		.contentmenu {
			height: 70px;
			text-align: center;
			position: fixed;
		}
		
		.barracolor {
			top: 60px;	
		}
		
		.categorias {
			margin-top: 50px;
			margin-bottom: 50px;
			color: #003366;	
			font-size: 14px;
			text-align: center;
		}

		.categorias a {
			line-height: 60px;
			color: #FFFFFF;
			background-color: #003366;
			padding: 10px;
		}
		
		.columnaizquierda {
			width: 100%;
			max-width: 100%;
			margin-left: 0px;
		}
		.logotipo {
			display: none;
		}
		.imagenlogo {
			width:100px;	
		}
		.menu  {
			display: none;
		}
		.titular {
			font-size: 21px;
			text-align: center;
			color: #003366;
			margin-bottom: 0px;
			margin-top: 80px;	
		}
		
		.english {
			margin-right: 5px;
			margin-top: -18px;	
		}
		
		#destacados {
			display: none;
		}
		.contenido {
			margin-top: 10px;
			margin-left: 0px;
			margin-right: 0px;
			padding: 10px;
		}
		.contenido2 {
			margin-top: 10px;
			margin-left: 0px;
			padding: 10px;
		}
		.columnaderecha {
			width: 100%;
			max-width: 100%;
			margin-left: -15px;
			padding-top: 40px;
		}
		
			#top {
			background-color: #003366;
 		    font-size: 2em;
 		    bottom: 0;
 		    left: 0;
 		    margin: 5px;
  		    padding: 5px;
  		    position: fixed;
  		    z-index: 200;
		    opacity: 0.7;
			width: 30px;
			text-align: center;
		}
		
		#linknoticias ul {
			margin-top: 48px;
			float: left;
			margin-right: 15px;
			margin-bottom: 25px;
			font-size: 80%;	
			margin-left: 10px;
		}
		.h6 {
			font-size: 12px;
			text-align: center;
			line-height: 50px;	
			display:none;
		}
		
		.h6 a {
			font-size: 24px;	
		}
		
		.h7 {
			font-size: 12px;
			text-align: center;
			line-height: 50px;	
			display:block;
		}
		
		.h7 a {
			font-size: 24px;	
		}
		
		.botonllamar {
			border: solid 1px #000000;
			margin: 10px;
			padding: 6px;
			padding-left: 50px;
			padding-right: 50px;	
			background-color: #003366;
			color: #FFFFFF;
			display:none;
		}		

		.botonllamar2 {
			display:block;
			border: solid 1px #000000;
			margin: 10px;
			padding: 6px;
			text-align: center;
			background-color: #003366;
			color: #FFFFFF;
		}
		
		.mapa {
			height:300px;	
		}

		.fotorestaurante {
			display: none;
		}

		.fotorestaurante2 {
			display: block;
		}
		.listadocarta {
			margin-left: 40px;
		}

}