@font-face{
	font-family: Raleway;
    src: url(../fonts/Raleway-Regular.woff2),
         url(../fonts/Raleway-Regular.woff),
	     url(../fonts/Raleway-Regular.ttf);
    font-weight: 400; font-display: swap;}
@font-face{
	font-family: Raleway;
    src: url(../fonts/Raleway-SemiBold.woff2),
         url(../fonts/Raleway-SemiBold.woff),
	     url(../fonts/Raleway-SemiBold.ttf);
    font-weight: 600; font-display: swap;}
*{
	margin: 0; padding: 0;}
body{
	font-family: 'Raleway', sans-serif;	font-weight: 400; line-height: 1.6em;}
img a, a, a img{
	text-decoration: none;}
.neg{
	font-weight: bold;}
.noneg strong{
	font-weight: normal;}
p{
	margin: 8px 0;}
#menu ul li{
	list-style-type: none;}
#menu ul li a{
	color: #000; display: block; font-weight: 400;}
#imagen img{
	width: 100%; height: auto;}
.banda{
	background: #0090cf; color: #fff; }
address{
	font-style: normal; display: inline;}	
.borra{
	clear: both;}
h1{
	color: #0090cf; }
h2{
	color: #0090cf; }
.tit{
	color: #0090cf; }
.bloque-a h3, .ssip{
	font-size: 15px; margin: 8px 0 20px 0; color: #0090cf; }
#particulares #circulo a{
	width: 180px; border-radius: 100px; display: block;  
	text-align: center; padding: 40px 0 0 0; height: 140px; 
	color: #fff; background: #F60; font-size: 22px; font-weight: 700;}
#restaurantes #circulo a{
	width: 180px; border-radius: 100px;  display: block; float: right;
	text-align: center; padding: 40px 0 0 0; height: 140px; 
	color: #fff; background: #0090cf; font-size: 20px; font-weight: 700;}
#particulares #circulo a:hover{
	-webkit-box-shadow: 0px 6px 10px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 6px 10px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 6px 10px 0px rgba(50, 50, 50, 0.75);
	color: #F60; background: #fff; }
#restaurantes #circulo a:hover{
	-webkit-box-shadow: 0px 6px 10px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 6px 10px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 6px 10px 0px rgba(50, 50, 50, 0.75);
	color: #0090cf; background: #fff; }
.galeria{
	margin: 60px 0 0 0;}
.galeria h2{
	font-weight: 400; border-bottom: 1px solid #ccc; padding: 0 0 10px 0;}
#cocedero{
	border: #f60 1px solid; text-align: center;}
#cocedero h4{
	color: #f60; margin: 20px 20px 0 20px; font-size: 25px; }
#cocedero p{
	margin: 10px 30px 20px 30px; font-size: 1.1em;}
#contactod h2{
	margin: 100px 0 10px 0; color: #f60;}
.tel a{
	color: #000; padding: 10px 0; display: block; font-size: 30px;}
.mail{
	display: block; margin-top: 10px;}
.mail a{
	display: block; padding: 0 0 10px 0; color: #0090cf;}
#faldon{
	border-top: #ccc 1px solid; padding: 20px 0; color: #0090cf;}
#fcent a{
	color: #0090cf; padding: 10px 0; display: block;}
#subfaldon{
	background: #0090cf; color: #fff; padding: 10px 0;}
#aviso{ 
	font-size: 0.7em; }
#aviso a{
	color: #fff; display: inline-block; padding: 5px 0;}
iframe{
	border: none; width: 100%; margin-bottom: 100px;}
.pedidos{
	padding: 30px; background: #f60; opacity: 0.9; margin-top: 40px; text-align: center;}
.pedidos h3{
	color: #fff; font-size: 27px; line-height: 40px;}
.pedidos h4{
	font-size: 25px; line-height: 40px;}
.pedidos h5{
	font-size: 26px; font-weight: normal; margin-top: 20px;}
.pedidos a{
	background: #C30; display: inline-block; padding: 6px 15px; color: #fff; font-size: 1em;}
.pedidos a:hover{
	background: #fff; color: #c30;}
.pedidos span{
	display: block;}
.con-pedidos{
	position: relative;}
.con-pedidos #slider{
	position: relative; z-index: 1;}
#imagen .pedidos{
	position: absolute; z-index: 2;}
.b-tienda a{
	width: 180px; display: block; color: #fff; padding: 20px 20px 20px 65px; margin-top: 20px;
	color: #fff; background: #F60 url(../imagenes/carrito01.png) no-repeat 20px center; 
	font-size: 22px; font-weight: 700; border: 4px solid #fff; background-size: 30px auto;}
.b-tienda a:hover{
	background: #fff url(../imagenes/carrito02.jpg) no-repeat 20px center; 
	border: 4px solid #f60; color: #F60; background-size: 30px auto;}
.online a{
	display: block; padding: 5px 10px 5px 35px;  
	background: #fff url(../imagenes/carrito02.jpg) no-repeat 7px center; color: #0090cf; 
	background-size: 20px auto; position: absolute; top: 0; right: 50px; font-size: 13px;}
.online a:hover{
	font-weight: bold;}
.mapa .boton a{color: #222; border: #222 1px solid; padding: 15px; display: block; margin: 100px 0; width: 200px; text-align: center;}


@media only screen 
and (max-width : 520px){
body{
	text-align: center;}
.foto{
	width: 100%; height: auto;}
#cabecera{
	margin: 40px 0 0 0;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 20px;}
section{
	padding: 40px 0;}
.logo{
	margin: 20px auto 10px auto;}
#faldon .logo{
	margin: 20px auto 0 auto;}
.logo img{
	width: 90%; height: auto; max-width: 250px;}
#menu{
	width: 100%; font-size: 15px; margin: 20px 0 0 0;}
#menu ul li a{
	padding: 16px 0; }
.pant, #slider1{
	display: none;}
.banda{
	font-size: 1.1em; line-height: 1.4em;}
h1, .tit{
	font-size: 30px; line-height: 35px;}
.bloque-a{
	width: 100%;}
.bloque-b{
	width: 100%;}
.bloque-a h2{
	margin: 30px 0 0 0;}
.bloque-a h3, .ssip{
	font-size: 14px;}
#vivero{
	padding: 85% 0 0 0; margin: 0 0 50px 0; 
	background: url(../imagenes/fondo-vivero-m.jpg) no-repeat top center; background-size: 100% auto;}
#vivero h2{
	font-size: 16px; margin: 0 0 0 0;}
.movil{
	margin: 40px 0 0 0;}
#slider0{
	margin: 30px 0 0 0;}
#fizdo{
	font-size: 16px; margin: 5px 0 30px 0; font-size: 0.9em;	}
#fcent{
	margin: 10px 0 0 0; font-size: 30px;}
#fdcho{
	margin: 25px 0 0 0;}
.guion{
	display: none;}
.block{
	display: block;}
#mapa{
	margin: 30px 0 0 0;}
#bandeja{
	background: #fff url(../imagenes/fondo-almejas.jpg) right bottom no-repeat; background-size: 100% auto; padding: 0 0 55% 0;}
#percebes{
	background: #fff url(../imagenes/fondo-percebes-m.jpg) center bottom no-repeat; background-size: 100% auto; padding: 0 0 40px 0;}
.grande{
	width: 100%; height: auto; }
#particulares #circulo a, #restaurantes #circulo a{
	margin: 20px auto;}
#restaurantes #circulo a{
	float: none;}
#cocedero{
	z-index: 2; margin: 40px 0 0 0;}
.gallery{
	display: none;}
.galeria .movil img{
	width: 90%;height: auto; max-width: 250px; margin: 10px auto 0 auto;}
#mapa iframe{
	display: none;}
#mapa img{
	width: 100%; height: auto;}
.pedidos{
	opacity: 1;}
.pedidos h3{
	font-size: 26px; line-height: 38px;}
.pedidos h4{
	font-size: 24px; line-height: 35px;}
#imagen .pedidos{
	width: 240px; position: relative; text-align: center; padding: 5%; margin: 60px auto 20px auto;}
#imagen .pedidos  h3{
	font-size: 22px; line-height: 30px;}
#imagen .pedidos  h4{
	font-size: 18px; line-height: 30px;}
#imagen .pedidos  h5{
	font-size: 18px; margin-top: 20px;}
#imagen .pedidos a{ display: block; margin-top: 5px; font-size: 1.1em; padding: 10px;}
.b-tienda a{
	margin: 20px auto; font-size: 18px; padding-left: 40px;}
.online a{
	right: 0; font-size: 12px; background-size: 15px auto; padding-left: 25px; padding-top: 10px; padding-bottom: 8px;}
.mapa .boton a{margin: 60px auto;}}
	
@media only screen 
and (min-width : 521px)
and (max-width : 720px) {
.movil{
	display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 30px;}
section{
	padding: 50px 0;}
.logo{
	width: 250px; margin: 35px auto 10px auto;}
#menu{
	font-size: 15px; margin: 20px 0 0 0; text-align: center;}
#menu ul li{
	float: left; width: 25%; }
#menu ul .men{
	width: 18%;}
#menu ul .max{
	width: 32%;}
#menu ul li a{
	padding: 20px 0 15px 0; }
#slider1, .pant{
	display: none;}
.banda{
	font-size: 1.3em; line-height: 1.6em;}
h1, .tit{
	font-size: 35px; line-height: 36px;}
.bloque-a h2{
	margin: 30px 0 0 0;}
.foto{
	width: 100%; height: auto; max-width: 500px; margin: 0 auto; display: block;}
#vivero{
	padding: 75% 0 0 0; margin: 0 0 50px 0; font-size: 1.1em; line-height: 1.6em;
	background: url(../imagenes/fondo-vivero-t.jpg) no-repeat top center;
	background-size: 100% auto;}
#vivero h2{
	font-size: 16px;}
#fizdo{
	font-size: 16px; margin: 0; font-size: 0.8em;}
#fcent{
	margin: 10px 0 0 0; font-size: 40px;}
#fdcho{
	margin: 25px 0 0 0;}
#mapa{
	margin: 30px 0 0 0;}
#contactod h2 {
    margin: 60px 0 10px;}
#bandeja{
	background: #fff url(../imagenes/fondo-almejas.jpg) right bottom no-repeat;
	background-size: 100% auto; padding: 0 0 60% 0;}
#percebes{
	background: #fff url(../imagenes/fondo-percebes-t.jpg) center bottom no-repeat;
	background-size: 100% auto; padding: 0 0 50px 0;}
.grande{
	width: 100%; height: auto; margin: 0 0 20px 0;}
#particulares img{
	z-index: 2; }
#particulares #circulo{
	z-index: 1; position: absolute; margin: -350px 0 0 0;}
.bloque-b #slider{
	width: 400px; margin: 30px auto 0 auto;}
#faldon, #subfaldon{
	text-align: center;}
#faldon .movil{
	display: block;}
#cocedero{
	margin: 20px 0 0 0; }
.container .gallery ul{
	width: 450px; margin: 0 auto;}
.container .gallery li {
	width: 200px !important; height: 205px; margin: 10px !important;}
.container .gallery h3{
	font-size: 13px !important;}
#imagen .pedidos{
	width: 240px; top: 26%; right: 10px; opacity: 0.9; text-align: center; padding: 20px;}
#imagen .pedidos  h3{
	font-size: 24px; line-height: 30px;}
#imagen .pedidos  h4{
	font-size: 20px; line-height: 30px;}
#imagen .pedidos  h5{
	font-size: 20px; margin-top: 0;}
#imagen .pedidos a{ display: block; margin-top: 5px; font-size: 1.4em; padding: 10px;}
.online a{	right: 0; }
	}
	
@media only screen 
and (min-width : 721px)
and (max-width : 999px) {
.movil{
	display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 40px;}
section{
	padding: 50px 0 80px 0;}
.logo{
	width: 250px; margin: 35px auto 10px auto;}
#menu{
	font-size: 15px; margin: 20px auto 0 auto; text-align: center; max-width: 500px;}
#menu ul li{
	float: left; width: 25%; }
#menu ul .men{
	width: 18%;}
#menu ul .max{
	width: 32%;}
#menu ul li a{
	padding: 20px 0 15px 0; }
.tab, #slider2{
	display: none;}
.banda{
	font-size: 1.3em; line-height: 1.6em;}
h1, .tit{
	font-size: 35px; line-height: 36px;}
#vivero, #vivero .tit, #vivero h2 {
    color: #fff;}
.bloque-a h2{
	margin: 30px 0 0 0;}
.foto{
	width: 100%; height: auto; max-width: 500px; margin: 0 auto; display: block;}
#vivero{
	padding: 50px 30px 50px 50%; margin: 0 0 50px 0;
	font-size: 1.1em; line-height: 1.6em; color: #fff;
	background: url(../imagenes/fondo-vivero.jpg) no-repeat center center;
	background-size: 100% auto; text-shadow: 0px 0px 20px #000;}
#vivero h2{
	font-size: 16px;}
#fizdo{
	font-size: 16px; margin: 25px 0 0 0;}
#fcent{
	width: 220px; float: left; margin: 10px 0 0 0; font-size: 40px;}
#fdcho{
	width: 270px; float: right; margin: 30px 0 0 0;}
#mapa{
	margin: 30px 0 0 0;}
#bandeja{}
#percebes{
	background: #fff url(../imagenes/fondo-percebes.jpg) center bottom no-repeat;
	background-size: 100% auto; padding: 0 0 50px 0;}
.grande{
	width: 100%; height: auto; margin: 0 0 20px 0;}
#particulares img{
	z-index: 2;}
#particulares #circulo{
	z-index: 1; position: absolute; margin: -60% 0 0 0;}
.bloque-b #slider{
	width: 400px; margin: 30px auto 0 auto;}
.container .gallery li {
	height: 215px;}
#contactoi{
	width: 45%; float: left;}
#contactod{
	width: 50%; float: right;}
#coc{
	z-index: 1;}
#cocedero{
	z-index: 2; margin: -175px 0 0 30%; position: absolute; width: 55%; }
#contactod h2 {
    margin: 195px 0 10px;}
#imagen .pedidos{
	width: 260px; top: 30%; right: 30px; opacity: 0.9; text-align: center; padding: 20px;}
#imagen .pedidos  h3{
	font-size: 24px; line-height: 30px;}
#imagen .pedidos  h4{
	font-size: 20px; line-height: 30px;}
#imagen .pedidos  h5{
	font-size: 20px; margin-top: 20px;}
.online a{
	right:20px }}
	
@media only screen 
and (min-width : 1000px){
.movil{
	display: none;}
.container {
	width: 1000px; margin: 0 auto;}
.todo {
	margin: 0 50px;}
section{
	padding: 70px 0 100px 0;}
.logo{
	width: 250px; float: left; margin: 20px 0 10px 0;}
#menu{
	width: 500px; float: right; font-size: 14px; margin: 80px 0 0 0;}
#menu ul li{
	float: left; width: 25%; }
#menu ul .men{
	width: 18%;}
#menu ul .max{
	width: 32%;}
#menu ul li a{
	padding: 20px 0 10px 0; font-size: 18px;}
.tab, #slider2{
	display: none;}
.banda{
	font-size: 1.4em; line-height: 1.7em;}
h1, .tit{
	font-size: 40px; line-height: 40px;}
.bloque-a{
	width: 350px; float:left;}
.bloque-b{
	width: 500px; float:right;}
.bloque-a h2{
	margin: 30px 0 0 0;}
#vivero{
	padding: 60px 60px 60px 60%; margin: 0 0 50px 0; font-size: 1.1em; line-height: 1.6em;
	background: url(../imagenes/fondo-vivero.jpg) no-repeat center center;
	text-shadow: 0px 0px 20px #000;}
#vivero, #vivero .tit, #vivero h2{
	color: #fff;}
#vivero h2{
	font-size: 16px;}
#faldon .logo{
	display: none;}
#fizdo{
	width: 280px; float: left; font-size: 16px; margin: 25px 0 0 0;}
#fcent{
	width: 220px; float: left; margin: 10px 0 0 65px; font-size: 40px;}
#fdcho{
	width: 270px; float: right; margin: 25px 0 0 0;}
#mapa{
	margin: 30px 0 0 0;}
#bandeja{}
#percebes{
	background: #fff url(../imagenes/fondo-percebes.jpg) center bottom no-repeat;
	padding: 0 0 50px 0;}
.grande{
	width: 800px; margin: 0 0 20px 50px;}
.container .gallery li {
	height: 215px;}
#particulares img{
	z-index: 2;}
#particulares #circulo{
	z-index: 1; position: absolute; margin: -500px 0 0 0;}
#contactoi{
	width: 400px; float: left;}
#contactod{
	width: 400px; float: right;}
#coc{
	z-index: 1;}
#cocedero{
	z-index: 2; margin: -135px 0 0 335px; position: absolute; width: 500px; }
#imagen .pedidos{
	width: 350px; top: 40%; right: 50px; opacity: 0.9;}}