/*------------- INSTRUCCIONES GENERALES----------*/
/*reset de margenes y paddings*/
*{
	margin:0;
	padding:0;
	
}
/*cambiamos el tipo de fuente para toda la pagina*/
body{
	font-family:"Trebuchet MS", Arial;
}


/*quitamos los puntos a todas las listas de la pagina*/
ul{
	list-style-type: none;
}


ul li a span{
	text-transform:uppercase;
}

ul li#HOME{
	background-color:#8C72B0;
	line-height:150px;
}
ul li#OFRECEMOS{
	background-color:#EE7727;
	line-height:150px;
}
ul li#CREACIONES{
	background-color:#812277;
	height:150px;
}
ul li#ABOUT a, ul li#visual a{
	padding-top:50px;
	height:100px;
}
ul li#CONTACTO{
	background-color:#CC033D;
	height:150px;
}

/*ul#menu1:hover li{
	opacity:0.5;
	transition: all 0.5s ease;
}

ul#menu1 li#HOME:hover{
	opacity:1;
	transform:scale(1.05);
}
ul#menu1 li#OFRECEMOS:hover{
	opacity:1;
	transform:scale(1.05);
}
ul#menu1 li#CREACIONES:hover{
	opacity:1;
	transform:scale(1.05);
}
ul#menu1 li#ABOUT:hover{
	opacity:1;
	transform:scale(1.05);
}
ul#menu1 li#CONTACTO:hover{
	opacity:1;
	transform:scale(1.05);*/
}
/*para quitar los recuadros azules (en el navegador Internet explorer) en las imagenes insertadas en el html aplicamos la instrucción outline*/

img{
	border:none;
}

.tabulado{
	text-indent:20px;
}

.subrayado{
	text-decoration:underline;
}

/*------------- FIN ----- INSTRUCCIONES GENERALES----------*/


@media screen and (min-width:1290px){

/*------------- HEADER ----------*/
/* #logo img{
margin: 20px auto;
padding:50;
} */

header{
	/*aplicamos fondo negro a la cabecera repitiendo la imagen horizontalmente y le damos un alto de 160px*/
	background-image:url(../images/bg.jpg);
	background-repeat:repeat-x;
	height:160px;
}

/*al div cabecera le asignamos un ancho y lo centramos*/
header div#cabecera{
	width:1240px;
	margin:0 auto;
}

/*ubicamos la imagen del logotipo con los margenes y la flotamos a la izquierda para poder posicionar luego el menu*/
header div#cabecera div#titulo{
	margin:11px 150px 10px 0;
	float:left;	
	width:350px;
	width:35%;
}
/*creamos la parte superior del logotipo o titulo. Le aplicamos color de letra y tamaño de letra*/
header div#cabecera div#titulo h1{
	color:black;
	font-size:58px;
	line-height:35px;
	/* text-shadow:1px 1px 2px #5A9A07; */
}
/*creamos la parte inferior del logotipo o titulo. Le aplicamos color de letra y tamaño de letra*/
header div#cabecera div#titulo h1 span{
	color:#FCBE14;
	font-size:32px;
	/* padding-left:30px; */
	text-shadow:;
}


/* ----------- MENU --------*/
/*flotamos el nav a la izquierda para colorcarlo en la parte superior alineado con el logotipo*/
header div#cabecera nav{
	float: left;
}

header div#cabecera nav ul{
	padding-top:50px;
}
/*ponemos la lista en horizontal flotando los elementos de la lista a la izquierda, separamos los elementos del menú 70px, le damos un alto de 75px a cada elemento del menú , le decimos que la imagen no se repita para que solo nos la muestre una vez y con el background-position la desplazamos (con la 1a coordenada 50%), es decir centrada, y con la 2a coordenada al 100% la desplazamos verticalmente abajo del todo.*/
header div#cabecera nav ul li{
	float:left;
	margin-right: 40px;
	height:75px;
	background-repeat:no-repeat;
	background-position:50% 100%;
}

/*quitamos el subrrayado a los enlaces del menu, aplicamos el color de la letra, cambiamos el tamaño de la letra y aplicamos negrita, hacemos que ocupe todo el ancho y alto del elemento li*/
header div#cabecera nav ul#menu1:hover li{
	opacity:0.5;
	transform:scale(1);
	transition: all 0.5s ease;
}

header div#cabecera nav ul li#index:hover{
	opacity:1;
	transform:scale(1.05);
}
header div#cabecera nav ul li#ofrecemos:hover{
	opacity:1;
	transform:scale(1.05);
}
header div#cabecera nav ul li#creaciones:hover{
	opacity:1;
	transform:scale(1.05);
}
header div#cabecera nav ul li#blog:hover{
	opacity:1;
	transform:scale(1.05);
}
header div#cabecera nav ul li#contacto:hover{
	opacity:1;
	transform:scale(1.05);
}
header div#cabecera nav ul li a{
	text-decoration:none;
	color:#BBBBBB;
	/*tamaño de fuente*/
	font-size:20px;
	/*negrita*/
	font-weight:bold;
	display:block;
	height:75px;
}
/*al pasar por encima del enlace le cambiamos el color de la letra a amarillo indio*/
header div#cabecera nav ul li a:hover{
	color:#FCBE14;
}
header div#cabecera nav ul li a:hover i{
	color:#DF0101;
}
header div#cabecera nav ul li.activo a:hover i{
	color:#ED1C24;
}
/*al texto de principal del enlace que indica cual es la pagina activa le aplico el color amarillo indio*/
header div#cabecera nav ul li.activo a{
	color:#FCBE14;
}

header div#cabecera nav ul li a i{
	padding-top:10px;
	display:block;
	text-align:center;
}
header div#cabecera nav ul li a i.tamano{
	font-size:34px;
}


/*posicionamos el texto pequeño de cada elemento del menú, le cambiamos el tamaño de letra y lo alineamos al centro*/
header div#cabecera nav ul li a span{
	display:block;
	font-size:12px;
	color:#666;
	text-align:center;
}
/*al pasar por encima del elemento del menú le cambiamos el color de la letra pequeña del menú*/
header div#cabecera nav ul li a:hover span{
	color:#DF0101;
	/*quitamos la negrita*/
	font-weight:normal;
}
/*aplicamos color de letra para el texto pequeño del menu que indique cual es la pagina activa*/
header div#cabecera nav ul li.activo a span{
	color:#DF0101;
	/*quitamos la negrita*/
	font-weight:normal;
}

/* ----------- FIN ------ MENU --------*/

header div#cabecera div#banderas{
	float:right;
	padding-top:8px;
	padding-right:30px;
}
/*seccion NUEVA estilo Colley Porter Bell*/

/*------------- FIN HEADER ----------*/

/*------------- INICIO SLIDER ----------*/

div#contenedor_slider{
	background-image:url(../images/bg_slider.gif);
	background-repeat:repeat-x;
	height:423px;
}
div#contenedor_slider div#slider_centrado{
	width:940px;
	margin:0 auto;
	position:relative;
}


/* ---- APLICAMOS POSICIONAMIENTO Y VISULIZACION DE LAS CAPAS DEL SLIDER---*/
/* cambia el posicionamiento a absoluto, lo ubica con la propiedad top y con el z-index la coloca como capa visible */
div.slider{top:0px;position:absolute;z-index:1}

/*oculta la lista*/
div.slider ul.items{display:none}

/*--------------AQUI TRABAJAMOS LOS BOTONES DEL SLIDER-------*/
/*cambio el posicionamiento, con el z-index:2 lo pone como la capa visible y con bottom y left coloca la capa */ 
.slider .pagination{position:absolute;z-index:2;bottom:47px;left:432px}
.slider .pagination li{float:left;padding-right:4px}
.slider .pagination a{display:block;width:16px;height:16px;text-indent:-9999px;background:url(../images/buttons.png) right 0 no-repeat}
.slider  .pagination a:hover, .slider  .pagination .current a{background-position:left}
/*--------------FIN DE BOTONES DEL SLIDER-------*/

/* ----FIN POSICIONAMIENTO Y VISULIZACION DE LAS CAPAS DEL SLIDER---*/

/*------------- FIN SLIDER ----------*/


/* ----------- SECTION 1-------------------*/

section{
	width:1240px;
	margin: 0 auto;
	padding-top:50px;
	
}

section article p, section article figcaption {
	text-align:justify;
	line-height:23px;
	color:#6D7B93;
}

section#superior article, section#inferior article#menut {
	width:270px;
	float: left;
	margin-right:30px;
	height:220px;
}

section#superior article h2, section#superior h2  {
	line-height:60px;
	margin-bottom:10px;
}

section#superior article h2 p, section#superior h2 p{
	width:40px;
	line-height:40px;
	background-color:#FCBE14;
	border-radius:0px;
	text-align:center;
	color:white;
	font-size:36px;
	float:left;
	margin:0 15px -15px 0px;
	
}
/* a los enlaces de leer mas... le aplicamos color amarillo indio*/
section#superior article a{
	color:#FCBE14;
}
/* al pasar por encima de los enlaces la quitamos el subrayado*/
section#superior article a:hover{
	text-decoration:none;
}

/* ----------- FIN SECTION 1-------------------*/

/* ----------- SECTION 2-------------------*/
section#inferior article#grande{
	width:870px;
	margin-right:30px;
	float:left;
}
/*cambiamos el tamaño del titulo de bienvenidos a TILDE*/
section#inferior article#grande h3, section#inferior article#menut h3, section#contacto article#formulario h3, section#contacto article#mapa h3 {
	font-size:36px;
	font-weight:normal;
	border-bottom:1px solid #bbb;
	padding-bottom:15px;
}

/*separamos la imagen del texto*/
section#inferior article#grande img{
		margin:30px 25px 25px 0;
		float:left;
}

section#inferior article#grande p{
	padding-top:20px;
}

/* section#inferior article#menut {
	height:370px;
} */

section#inferior article#menut{
	height:150px;
}

section#inferior article#menut ul{
	list-style-type:square;
	color:#FCBE14;
	padding-top:20px;
	padding-left:20px;
}
section#inferior article#menut ul li{
	padding-bottom:7px;
}

section#inferior article#menut ul li span{
	color:#6D7B93;
}
/* ----------- FIN SECTION 2-------------------*/

/* ------------- FOOTER -------------*/
footer{
	/*aplicamos fondo negro a la cabecera repitiendo la imagen horizontalmente y le damos un alto de 160px*/
	clear:both;
	background-image:url(../images/bg.jpg);
	background-repeat:repeat-x;
	height:350px;
}

footer div#pie{
	width:1240px;
	margin:0 auto;

}

footer div#pie div h4{
	color:#BBBBBB;
	font-size:30px;
	font-weight:normal;
	padding-bottom:15px;
}

footer div#pie div{
	float:left;
	width:380px;
	margin-right:30px;
	padding-top:20px;
}

footer div#pie ul{
	color:white;
}

footer div#pie div ul li{
	line-height:35px;
	border-top:1px solid #e9e8e8;
	color:#BBBBBB;
}

footer div#pie div ul li span{
	width:90px;
	display:block;
	float:left;
}

/* aplicamos estilos al segundo div del footer que contiene el Horario*/
footer div#pie > div + div{
	width:460px;
}

footer div#pie > div + div ul li span{
	width:160px;
}
/* aplicamos estilos al tercer div del footer que contiene el Síguenos*/
footer div#pie > div + div + div{
	width:300px;
}


footer div#pie > div + div+ div  ul li span{
	width:40px;
}

footer a{
	color:#bbb;
	text-decoration:none;
}
footer a:hover{
	text-decoration:underline;
	color:#497E04;
}
footer div#pie > p{
	clear:both;
	color:#BBBBBB;
	text-align:center;
	padding:20px 0;
}

/* ------------- FIN FOOTER -------------*/


/*-------------- PAGINA CONTACTO ------------*/
div#barra_verde{
	width:1240px;
	margin:0 auto;
	height: 10px;
	background-color:#FCBE14;	
}

div#barra_verde2{
	width:1240px;
	margin:0 auto;
	height: 10px;
	background-color:#FCBE14;
	display:none;
}

section#contacto{
	height:500px;
}

section#contacto article#formulario{
	width:590px;
	margin-right:30px;
	float:left;
}

section#contacto article#formulario ul{
	padding-top:20px;
}

section#contacto article#formulario ul#form_texto{ 
	width:80px;
	float:left;
}

section#contacto article#formulario ul li{
	line-height:35px;
	color:#696969;
}

section#contacto article#formulario ul li input{
	width:300px;
	height:25px;
	border:1px solid #E5E5E5;
	padding:0 5px;
}

section#contacto article#formulario ul li textarea{
	width:495px;
	height:200px;
	border:1px solid #E5E5E5;
	padding:5px;
	margin-top:8px;
	resize:none;
}

section#contacto article#formulario ul li input[name="borrar"],section#contacto article#formulario ul li input[name="enviar"] {
	width:60px;
	height:30px;
	background-color:#FCBE14;;
	font-weight:bold;
	color:white;
	margin-left:8px;
	float:right;
}
section#contacto article#formulario ul li input[name="borrar"]:hover,section#contacto article#formulario ul li input[name="enviar"]:hover{
	background-color:black;
	
}

section#contacto article#mapa{
	width:590px;
	float:left;
}

section#contacto article#mapa iframe{
	margin:20px 0;
}

/*-------------- FIN PAGINA CONTACTO ------------*/

/*-------------- INICIO PAGINA PRODUCTOS ------------*/
section#superior article.productos{
	height:310px;
}

section#superior article.productos figcaption{
	width:250px;
}

section#superior article.productos img{
	border-radius:0px;
	border:1px solid #BBBBBB;
}

/*-------------- FIN PAGINA PRODUCTOS ------------*/

/*-------------- INICIO PAGINA TRABAJOS ------------*/
section#superior article.trabajos{
	width:100%;
	/* margin-left:4%; */
	height:960px;
}
section#superior article.trabajos li{
	float:left;
	width:250px;
	height:150px;
	margin:25px 35px 25px 0;
	border-radius:0px;
	border:1px solid #bbbbbb;
}
section#superior article.trabajos li img{
	border-radius:1px;
}


/*-------------- FIN PAGINA TRABAJOS ------------*/

/*-------------- PAGINA CESPED ARTIFICIAL ------------*/

section#superior article.izquierda, section#superior article.derecha{
	width:600px;
	margin-right:20px;
	float:left;
	height:450px;
	margin-bottom:20px;
} 
section#superior p.cesped{
	font-size:20px;
	text-align:justify;
	width:1240px;
	padding-bottom:20px;
	color:#6D7B93;
}

section#superior article.izquierda img, section#superior article.derecha img{
	border: 1px solid #BBBBBB;
	border-radius: 0px;
}

/*-------------- FIN -- PAGINA CESPED ARTIFICIAL ------------*/

}

@media screen and (max-width:1289px) and (min-width:1024px){

	/*------------- HEADER ----------*/

header{
	/*aplicamos fondo negro a la cabecera repitiendo la imagen horizontalmente y le damos un alto de 160px*/
	background-image:url(../images/bg.jpg);
	background-repeat:repeat-x;
	height:160px;
}

/*al div cabecera le asignamos un ancho y lo centramos*/
header div#cabecera{
	/* width:90%; */
	width:940px;
	margin:0 auto;
}

/*ubicamos la imagen del logotipo con los margenes y la flotamos a la izquierda para poder posicionar luego el menu*/
header div#cabecera div#titulo{
	margin:12px 0 0 0;
	float:left;	
	width:35%;
}
/*creamos la parte superior del logotipo o titulo. Le aplicamos color de letra y tamaño de letra*/
header div#cabecera div#titulo h1{
	color:#497E04;
	font-size:58px;
	line-height:35px;
	/* text-shadow:1px 1px 2px #5A9A07; */
}
/*creamos la parte inferior del logotipo o titulo. Le aplicamos color de letra y tamaño de letra*/
header div#cabecera div#titulo h1 span{
	color:#bbb;
	font-size:32px;
	padding-left:30px;
	text-shadow:1px 1px 2px #959595;
}


/* ----------- MENU --------*/

/*flotamos el nav a la izquierda para colorcarlo en la parte superior alineado con el logotipo*/
header div#cabecera nav{
	float: left;
	width:63.8%;
	
}

header div#cabecera nav ul{
	padding-top:50px;
	
	
}
header div#cabecera nav ul#menu1:hover li{
	opacity:0.5;
	transform:scale(1);
	transition: all 0.5s ease;
}

header div#cabecera nav ul li#index:hover{
	opacity:1;
	transform:scale(1.05);
}
header div#cabecera nav ul li#ofrecemos:hover{
	opacity:1;
	transform:scale(1.05);
}
header div#cabecera nav ul li#creaciones:hover{
	opacity:1;
	transform:scale(1.05);
}
header div#cabecera nav ul li#blog:hover{
	opacity:1;
	transform:scale(1.05);
}
header div#cabecera nav ul li#contacto:hover{
	opacity:1;
	transform:scale(1.05);
}
/*ponemos la lista en horizontal flotando los elementos de la lista a la izquierda, separamos los elementos del menú 70px, le damos un alto de 75px a cada elemento del menú , le decimos que la imagen no se repita para que solo nos la muestre una vez y con el background-position la desplazamos (con la 1a coordenada 50%), es decir centrada, y con la 2a coordenada al 100% la desplazamos verticalmente abajo del todo.*/
header div#cabecera nav ul li{
	float:left;
	margin-right: 4%;
	height:75px;
	background-repeat:no-repeat;
	background-position:50% 100%;
	
}

/*quitamos el subrrayado a los enlaces del menu, aplicamos el color de la letra, cambiamos el tamaño de la letra y aplicamos negrita, hacemos que ocupe todo el ancho y alto del elemento li*/
header div#cabecera nav ul li a{
	text-decoration:none;
	color:#BBBBBB;
	/*tamaño de fuente*/
	font-size:18px;
	/*negrita*/
	font-weight:bold;
	display:block;
	height:75px;
}
/*al pasar por encima del enlace le cambiamos el color de la letra a amarillo indio*/
header div#cabecera nav ul li a:hover{
	color:#FCBE14;
}
header div#cabecera nav ul li a:hover i{
	color:#ED1C24;
}
header div#cabecera nav ul li.activo a:hover i{
	color:#ED1C24;
}
/*al texto de principal del enlace que indica cual es la pagina activa le aplico el color amarillo indio*/
header div#cabecera nav ul li.activo a{
	color:#FCBE14;
}

header div#cabecera nav ul li a i{
	padding-top:10px;
	display:block;
	text-align:center;
}
header div#cabecera nav ul li a i.tamano{
	font-size:28px;
}


/*posicionamos el texto pequeño de cada elemento del menú, le cambiamos el tamaño de letra y lo alineamos al centro*/
header div#cabecera nav ul li a span{
	display:block;
	font-size:12px;
	color:#666;
	text-align:center;
}
/*al pasar por encima del elemento del menú le cambiamos el color de la letra pequeña del menú*/
header div#cabecera nav ul li a:hover span{
	color:white;
	/*quitamos la negrita*/
	font-weight:normal;
}
/*aplicamos color de letra para el texto pequeño del menu que indique cual es la pagina activa*/
header div#cabecera nav ul li.activo a span{
	color:white;
	/*quitamos la negrita*/
	font-weight:normal;
}

/* ----------- FIN ------ MENU --------*/

header div#cabecera div#banderas{
	float:right;
	padding-top:8px;
	padding-right:30px;
}

/*------------- FIN HEADER ----------*/

/*------------- INICIO SLIDER ----------*/

div#contenedor_slider{
	background-image:url(../images/bg_slider.gif);
	background-repeat:repeat-x;
	height:423px;
}
div#contenedor_slider div#slider_centrado{
	width:940px;
	margin:0 auto;
	position:relative;
}


/* ---- APLICAMOS POSICIONAMIENTO Y VISULIZACION DE LAS CAPAS DEL SLIDER---*/
/* cambia el posicionamiento a absoluto, lo ubica con la propiedad top y con el z-index la coloca como capa visible */
div.slider{top:0px;position:absolute;z-index:1}

/*oculta la lista*/
div.slider ul.items{display:none}

/*--------------AQUI TRABAJAMOS LOS BOTONES DEL SLIDER-------*/
/*cambio el posicionamiento, con el z-index:2 lo pone como la capa visible y con bottom y left coloca la capa */ 
.slider .pagination{position:absolute;z-index:2;bottom:47px;left:432px}
.slider .pagination li{float:left;padding-right:4px}
.slider .pagination a{display:block;width:16px;height:16px;text-indent:-9999px;background:url(../images/buttons.png) right 0 no-repeat}
.slider  .pagination a:hover, .slider  .pagination .current a{background-position:left}
/*--------------FIN DE BOTONES DEL SLIDER-------*/

/* ----FIN POSICIONAMIENTO Y VISULIZACION DE LAS CAPAS DEL SLIDER---*/

/*------------- FIN SLIDER ----------*/


/* ----------- SECTION 1-------------------*/

section{
	width:940px;
	margin:0 auto;
	padding-top:50px;
}

section article p, section article figcaption {
	text-align:justify;
	line-height:23px;
	color:#6D7B93;
}

section#superior article, section#inferior article#menut {
	width:22.22%;
	float: left;
	margin-right:2.78%;
	height:220px;
}

section#superior article h2, section#superior h2  {
	line-height:60px;
	margin-bottom:10px;
	font-size:20px;
}

section#superior article h2 p, section#superior h2 p{
	width:60px;
	line-height:60px;
	background-color:#FCBE14;
	border-radius:0px;
	text-align:center;
	color:white;
	font-size:36px;
	float:left;
	margin:0 15px 0px 0;
	
}
/* a los enlaces de leer mas... le aplicamos color amarillo indio*/
section#superior article a{
	color:#FCBE14;
}
/* al pasar por encima de los enlaces la quitamos el subrrayado*/
section#superior article a:hover{
	text-decoration:none;
}

/* ----------- FIN SECTION 1-------------------*/

/* ----------- SECTION 2-------------------*/
section#inferior article#grande{
	width:70%;
	margin-right:30px;
	float:left;
}
/*cambiamos el tamaño del titulo de bienvenidos a Tilde*/
section#inferior article#grande h3, section#inferior article#menut h3, section#contacto article#formulario h3, section#contacto article#mapa h3 {
	font-size:36px;
	font-weight:normal;
	border-bottom:1px solid #bbb;
	padding-bottom:15px;
}

/*separamos la imagen del texto*/
section#inferior article#grande img{
		margin:30px 25px 60px 0;
		float:left;
}

section#inferior article#grande p{
	padding-top:20px;
}

section#inferior article#menut{
	height:400px;
}

section#inferior article#menut ul{
	list-style-type:square;
	color:#FCBE14;
	padding-top:20px;
	padding-left:20px;
}
section#inferior article#menut ul li{
	padding-bottom:7px;
}

section#inferior article#menut ul li span{
	color:#6D7B93;
}
/* ----------- FIN SECTION 2-------------------*/

/* ------------- FOOTER -------------*/
footer{
	/*aplicamos fondo negro a la cabecera repitiendo la imagen horizontalmente y le damos un alto de 160px*/
	clear:both;
	background-image:url(../images/bg.jpg);
	background-repeat:repeat;
	height:420px;
}

footer div#pie{
	/* width:90%; */
	width:940px;
	margin:0 auto;
}

footer div#pie div h4{
	color:#BBBBBB;
	font-size:30px;
	font-weight:normal;
	padding-bottom:15px;
}


footer div#pie div{
	float:left;
	width:33%;
	margin-right:1%;
	padding-top:20px;
}

footer div#pie ul{
	color:white;
}

footer div#pie div ul li{
	line-height:35px;
	border-top:1px solid #303030;
	color:#BBBBBB;
}

footer div#pie div ul li span{
	width:90px;
	display:block;
	float:left;
}

/* aplicamos estilos al segundo div del footer que contiene el Horario*/
footer div#pie > div + div{
	width:41%;
}

footer div#pie > div + div ul li span{
	width:160px;
}
/* aplicamos estilos al tercer div del footer que contiene el Síguenos*/
footer div#pie > div + div + div{
	width:23%;
}

footer div#pie > div + div+ div  ul li span{
	width:40px;
}

footer a{
	color:#bbb;
	text-decoration:none;
}
footer a:hover{
	text-decoration:underline;
	color:#497E04;
}
footer div#pie > p{
	clear:both;
	color:#BBBBBB;
	text-align:center;
	padding:20px 0;
}

.tabulado{
	text-indent:0px;
}

/* ------------- FIN FOOTER -------------*/


/*-------------- PAGINA CONTACTO ------------*/
div#barra_verde{
	width:940px;
	margin:0 auto;
	height: 10px;
	/* background-image: url(../images/bg_top_img.jpg); */
	background-color:#FCBE14;
}

div#barra_verde2{
	width:940px;
	margin:0 auto;
	height: 10px;
	background-color:#FCBE14;
	display:none;
}

section#contacto{
	height:600px;
}

section#contacto article#formulario{
	width:450px;
	margin-right:30px;
	float:left;
}

section#contacto article#formulario ul{
	padding-top:20px;
}

section#contacto article#formulario ul#form_texto{ 
	width:80px;
	float:left;
}

section#contacto article#formulario ul li{
	line-height:35px;
	color:#696969;
}

section#contacto article#formulario ul li input{
	width:300px;
	height:25px;
	border:1px solid #E5E5E5;
	padding:0 5px;
}

section#contacto article#formulario ul li textarea{
	width:300px;
	height:200px;
	border:1px solid #E5E5E5;
	padding:5px;
	margin-top:8px;
	resize:none;
}

section#contacto article#formulario ul li input[name="borrar"],section#contacto article#formulario ul li input[name="enviar"] {
	width:60px;
	height:30px;
	background-color:#FCBE14;;
	font-weight:bold;
	color:white;
	margin-left:8px;
	float:right;
}
section#contacto article#formulario ul li input[name="borrar"]:hover,section#contacto article#formulario ul li input[name="enviar"]:hover{
	background-color:black;
	
}

section#contacto article#mapa{
	width:450px;
	float:left;
}

section#contacto article#mapa iframe{
	margin:20px 0;
	width:450px;
}

/*-------------- FIN PAGINA CONTACTO ------------*/

/*-------------- INICIO PAGINA PRODUCTOS ------------*/
section#superior article.productos{
	width:30%;
	/* margin-right:3.2%; */
	/* padding-left:3%; */
	height:310px;
}

section#superior article.productos figcaption{
	width:250px;
}

section#superior article.productos img{
	border-radius:0px;
	border:1px solid #bbbbbb;
}

/*-------------- FIN PAGINA PRODUCTOS ------------*/

/*-------------- INICIO PAGINA TRABAJOS ------------*/
section#superior article.trabajos{
	width:100%;
	/* margin-left:5%; */
	height:1340px;
}
section#superior article.trabajos li{
	float:left;
	width:250px;
	height:150px;
	margin:25px 45px 25px 0;
	border-radius:0px;
	border:1px solid #bbbbbb;
	
}
section#superior article.trabajos li img{
	
	border-radius:1px;

}

section#superior article.trabajos h2{
	font-size:32px;
}
/*-------------- FIN PAGINA TRABAJOS ------------*/

/*-------------- PAGINA CESPED ARTIFICIAL ------------*/

section#superior article.izquierda, section#superior article.derecha{
	width:100%;
	height:450px;
	margin-bottom:40px;
	/* border:1px solid blue; */
} 
section#superior p.cesped{
	font-size:20px;
	text-align:justify;
	width:940px;
	padding-bottom:20px;
	color:#6D7B93;
}

section#superior article.izquierda img, section#superior article.derecha img{
	border: 1px solid #BBBBBB;
	border-radius: 0px;
	width:600px;
	margin:0 auto;
	display:block;
}

/*-------------- FIN -- PAGINA CESPED ARTIFICIAL ------------*/
}


@media screen and (max-width:1023px) and (min-width:768px){
	
header{
	/*aplicamos fondo negro a la cabecera repitiendo la imagen horizontalmente y le damos un alto de 160px*/
	background-image:url(../images/bg.jpg);
	background-repeat:repeat-x;
	height:180px;
}

/*al div cabecera le asignamos un ancho y lo centramos*/
header div#cabecera{
	width:750px;
	margin:0 auto;
}

/*ubicamos la imagen del logotipo con los margenes y la flotamos a la izquierda para poder posicionar luego el menu*/
header div#cabecera div#titulo{
	margin: 13px 0 12px 0;
	float: left;
}
/*creamos la parte superior del logotipo o titulo. Le aplicamos color de letra y tamaño de letra*/
header div#cabecera div#titulo h1{
	color: BLACK;
	font-size: 58px;
	line-height: 25px;	/* text-shadow:1px 1px 2px #5A9A07; */
}
/*creamos la parte inferior del logotipo o titulo. Le aplicamos color de letra y tamaño de letra*/
header div#cabecera div#titulo h1 span{
	color: #FCBE14;
	font-size: 32px;
	padding-left: 30px;
	text-shadow: 1px 1px 2px #959595;
}


/* ----------- MENU --------*/
header div#cabecera nav ul#menu1:hover li{
	opacity:0.5;
	transform:scale(1);
	transition: all 0.5s ease;
}

header div#cabecera nav ul li#index:hover{
	opacity:1;
	transform:scale(1.05);
}
header div#cabecera nav ul li#ofrecemos:hover{
	opacity:1;
	transform:scale(1.05);
}
header div#cabecera nav ul li#creaciones:hover{
	opacity:1;
	transform:scale(1.05);
}
header div#cabecera nav ul li#blog:hover{
	opacity:1;
	transform:scale(1.05);
}
header div#cabecera nav ul li#contacto:hover{
	opacity:1;
	transform:scale(1.05);
}
/*flotamos el nav a la izquierda para colorcarlo en la parte superior alineado con el logotipo*/
header div#cabecera nav{
	position:relative;
	width:75%;
	float:left;
	margin-top:13px;
	margin-left:3%;
}

header div#cabecera nav ul{
	padding-top:50px;	
}
/*ponemos la lista en horizontal flotando los elementos de la lista a la izquierda, separamos los elementos del menú 70px, le damos un alto de 75px a cada elemento del menú , le decimos que la imagen no se repita para que solo nos la muestre una vez y con el background-position la desplazamos (con la 1a coordenada 50%), es decir centrada, y con la 2a coordenada al 100% la desplazamos verticalmente abajo del todo.*/
header div#cabecera nav ul li{
	float:left;
	margin-right:6%;
	height:75px;
	background-repeat:no-repeat;
	background-position:50% 100%;
}

/*quitamos el subrrayado a los enlaces del menu, aplicamos el color de la letra, cambiamos el tamaño de la letra y aplicamos negrita, hacemos que ocupe todo el ancho y alto del elemento li*/
header div#cabecera nav ul li a{
	text-decoration:none;
	color:#BBBBBB;
	/*tamaño de fuente*/
	font-size:18px;
	/*negrita*/
	font-weight:bold;
	display:block;
	height:75px;
}
/*al pasar por encima del enlace le cambiamos el color de la letra a verde*/
header div#cabecera nav ul li a:hover{
	color:#FCBE14;
}
header div#cabecera nav ul li a:hover i{
	color:#ED1C24;
}
header div#cabecera nav ul li.activo a:hover i{
	color:#ED1C24;
}
/*al texto de principal del enlace que indica cual es la pagina activa le aplico el color amarillo indio*/
header div#cabecera nav ul li.activo a{
	color:#FCBE14;
}

header div#cabecera nav ul li a i{
	padding-top:5px;
	display:block;
	text-align:center;
}
header div#cabecera nav ul li a i.tamano{
	font-size:28px;
}


/*posicionamos el texto pequeño de cada elemento del menú, le cambiamos el tamaño de letra y lo alineamos al centro*/
header div#cabecera nav ul li a span{
	display:block;
	font-size:12px;
	color:#666;
	text-align:center;
}
/*al pasar por encima del elemento del menú le cambiamos el color de la letra pequeña del menú*/
header div#cabecera nav ul li a:hover span{
	color:white;
	/*quitamos la negrita*/
	font-weight:normal;
}
/*aplicamos color de letra para el texto pequeño del menu que indique cual es la pagina activa*/
header div#cabecera nav ul li.activo a span{
	color:white;
	/*quitamos la negrita*/
	font-weight:normal;
}

/* ----------- FIN ------ MENU --------*/

header div#cabecera div#banderas{
	position:absolute;
	top:5px;
	right:0px;
	/* float:right;
	padding-top:8px;
	padding-right:30px; */
}

/*------------- FIN HEADER ----------*/

/*------------- INICIO SLIDER ----------*/

div#contenedor_slider{
	background-image:url(../images/bg_slider.gif);
	background-repeat:repeat-x;
	height:423px;
	display:none;
}
div#contenedor_slider div#slider_centrado{
	width:940px;
	margin:0 auto;
	position:relative;
	display:none;
	
}


/* ---- APLICAMOS POSICIONAMIENTO Y VISULIZACION DE LAS CAPAS DEL SLIDER---*/
/* cambia el posicionamiento a absoluto, lo ubica con la propiedad top y con el z-index la coloca como capa visible */
div.slider{top:0px;position:absolute;z-index:1}

/*oculta la lista*/
div.slider ul.items{display:none}

/*--------------AQUI TRABAJAMOS LOS BOTONES DEL SLIDER-------*/
/*cambio el posicionamiento, con el z-index:2 lo pone como la capa visible y con bottom y left coloca la capa */ 
.slider .pagination{position:absolute;z-index:2;bottom:47px;left:432px}
.slider .pagination li{float:left;padding-right:4px}
.slider .pagination a{display:block;width:16px;height:16px;text-indent:-9999px;background:url(../images/buttons.png) right 0 no-repeat}
.slider  .pagination a:hover, .slider  .pagination .current a{background-position:left}
/*--------------FIN DE BOTONES DEL SLIDER-------*/

/* ----FIN POSICIONAMIENTO Y VISULIZACION DE LAS CAPAS DEL SLIDER---*/

/*------------- FIN SLIDER ----------*/


/* ----------- SECTION 1-------------------*/

section{
	width:750px;
	margin:0 auto;	
	padding-top:50px;

}

section article p, section article figcaption {
	text-align:justify;
	line-height:23px;
	color:#6D7B93;
}

section#superior article {
	width:45.22%;
	float: left;
	margin-right:2.78%;
	height:220px;
}

section#superior article h2, section#superior h2  {
	line-height:60px;
	margin-bottom:10px;
	font-size:20px;
}

section#superior article h2 p, section#superior h2 p{
	width: 60px;
	line-height: 60px;
	background-color: #FCBE14;
	border-radius: 0px;
	text-align: center;
	color: white;
	font-size: 36px;
	float: left;
	margin: 0 15px 0px 0;	
}
/* a los enlaces de leer mas... le aplicamos color amarillo indio*/
section#superior article a{
	color:#FCBE14;
}
/* al pasar por encima de los enlaces la quitamos el subrrayado*/
section#superior article a:hover{
	text-decoration:none;
}

/* ----------- FIN SECTION 1-------------------*/

/* ----------- SECTION 2-------------------*/

section#inferior article#grande{
	width:93%;
	margin-right:30px;
	float:left;
}
/*cambiamos el tamaño del titulo de bienvenidos a TILDE*/
section#inferior article#grande h3, section#inferior article#menut h3, section#contacto article#formulario h3, section#contacto article#mapa h3 {
	font-size:36px;
	font-weight:normal;
	border-bottom:1px solid #bbb;
	padding-bottom:15px;
}

/*separamos la imagen del texto*/
section#inferior article#grande img{
		margin:30px 25px 60px 0;
		float:left;
}

section#inferior article#grande p{
	padding-top:20px;
}

section#inferior article#menut{
	width:95%;
	height:230px;
	clear:both;
}

section#inferior article#menut ul{
	list-style-type:square;
	color:#60B000;
	padding-top:20px;
	padding-left:20px;
	/* height:150px; */
}
section#inferior article#menut ul li{
	padding-bottom:7px;
	float:left;
	width:45%;
	margin-right:3%; 
}

section#inferior article#menut ul li span{
	color:#6D7B93;
}
/* ----------- FIN SECTION 2-------------------*/

/* ------------- FOOTER -------------*/
footer{
	/*aplicamos fondo negro a la cabecera repitiendo la imagen horizontalmente y le damos un alto de 160px*/
	clear:both;
	background-image:url(../images/bg.jpg);
	background-repeat:repeat;
	height:440px;
}

footer div#pie{
	width:768px;
	margin:0 auto;
}

footer div#pie div h4{
	color:#BBBBBB;
	font-size:30px;
	font-weight:normal;
	padding-bottom:15px;
}

footer div#pie div{
	float:left;
	width:31%;
	margin-right:1%;
	padding-top:20px;
}

footer div#pie ul{
	color:white;
}

footer div#pie div ul li{
	line-height:35px;
	border-top:1px solid #303030;
	color:#BBBBBB;
}

footer div#pie div ul li span{
	width:90px;
	display:block;
	/* float:left; */
}

/* aplicamos estilos al segundo div del footer que contiene el Horario*/
footer div#pie > div + div{
	width:41%;
}

footer div#pie > div + div ul li span{
	width:160px;
}
/* aplicamos estilos al tercer div del footer que contiene el Síguenos*/
footer div#pie > div + div + div{
	width:22%;
}


footer div#pie > div + div + div ul li span{
	width:40px;
	float:left;
}

footer a{
	color:#bbb;
	text-decoration:none;
}
footer a:hover{
	text-decoration:underline;
	color:#497E04;
}
footer div#pie > p{
	clear:both;
	color:#BBBBBB;
	text-align:center;
	padding:10px 0;
}

.tabulado{
	text-indent:0px;
	padding-left:20px;
}

footer div#pie > div + div ul li.alineado span{
	float:left;
	width:80px;
}

/* ------------- FIN FOOTER -------------*/


/*-------------- PAGINA CONTACTO ------------*/
div#barra_verde{
	width:750px;
	margin:0 auto;
	height: 10px;
	/* background-image: url(../images/bg_top_img.jpg); */
	background-color:#FCBE14;
}

div#barra_verde2{
	width:750px;
	margin:0 auto;
	height: 10px;
	background-color:#FCBE14;
}

section#contacto{
	height:1100px;
}

section#contacto article#formulario{
	width:64%;
	margin:0 auto;
	margin-bottom:50px;
}

section#contacto article#formulario ul{
	padding-top:20px;
}

section#contacto article#formulario ul#form_texto{ 
	width:80px;
	float:left;
}

section#contacto article#formulario ul li{
	line-height:35px;
	color:#696969;
}

section#contacto article#formulario ul li input{
	width:300px;
	height:25px;
	border:1px solid #E5E5E5;
	padding:0 5px;
}

section#contacto article#formulario ul li textarea{
	width:470px;
	height:200px;
	border:1px solid #E5E5E5;
	padding:5px;
	margin-top:5px;
	resize:none;
}

section#contacto article#formulario ul li input[name="borrar"],section#contacto article#formulario ul li input[name="enviar"] {
	width: 60px;
	height: 30px;
	background-color: #FCBE14;
	;
	font-weight: bold;
	color: white;
	margin-left: 8px;
	float: right;
}
section#contacto article#formulario ul li input[name="borrar"]:hover,section#contacto article#formulario ul li input[name="enviar"]:hover{
	background-color:black;
	
}

section#contacto article#mapa{
	width:64%;
	margin:0 auto;
}

section#contacto article#mapa iframe{
	width:100%;
	margin:20px 0;
	
}

/*-------------- FIN PAGINA CONTACTO ------------*/

/*-------------- INICIO PAGINA PRODUCTOS ------------*/
section#superior article.productos{
	width:40.22%;
	margin-right:2.78%;
	padding-left:5%;
	height:370px;
}

section#superior article.productos figcaption{
	width:300px;
}


section#superior article.productos img{
	border-radius:0px;
	border:1px solid #ebebeb;
	width:300px;
	height:180px;
}
section#superior article.productos h2{
	font-size:24px;
}

/*-------------- FIN PAGINA PRODUCTOS ------------*/

/*-------------- INICIO PAGINA TRABAJOS ------------*/
section#superior article.trabajos{
	width:100%;
	height:1720px;
	/* min-width:1000px; */
}
section#superior article.trabajos li{
	float: left;
	width: 250px;
	height: 150px;
	margin: 25px;
	border-radius: 18px;
	border: 1px solid #bbbbbb;
}
section#superior article.trabajos li img{
	border-radius:15px;
}
section#superior article.trabajos h2{
	font-size:28px;
}

/*-------------- FIN PAGINA TRABAJOS ------------*/

/*-------------- PAGINA CESPED ARTIFICIAL ------------*/

section#superior article.izquierda, section#superior article.derecha{
	width:100%;
	/* margin-right:20px; */
	/* float:left; */
	height:450px;
	margin-bottom:20px;
} 
section#superior p.cesped{
	font-size:20px;
	text-align:justify;
	width:750px;
	padding-bottom:20px;
	color:#6D7B93;
}

section#superior article.izquierda img, section#superior article.derecha img{
	border: 1px solid #BBBBBB;
	border-radius: 5px;
	width:600px;
	margin:0 auto;
	display:block;
}

}

@media screen and (max-width:7px) and (min-width:7px){
/* @media screen and (max-width:767px) and (min-width:481px){ */
	
header{
	/*aplicamos fondo negro a la cabecera repitiendo la imagen horizontalmente y le damos un alto de 160px*/
	background-image:url(../images/bg.jpg);
	background-repeat:repeat-x;
	height:230px;
}

/*al div cabecera le asignamos un ancho y lo centramos*/
header div#cabecera, footer div#pie{
	width:90%;
	margin:0 auto;
	
}

/*ubicamos la imagen del logotipo con los margenes y la flotamos a la izquierda para poder posicionar luego el menu*/
header div#cabecera div#titulo{
	margin:53px 0 30px 0;
	float:left;	
	width:100%;
	text-align:center;
}
/*creamos la parte superior del logotipo o titulo. Le aplicamos color de letra y tamaño de letra*/
header div#cabecera div#titulo h1{
	color: Black;
	font-size: 40px;
	line-height: 35px;	/* text-shadow:1px 1px 2px #5A9A07; */
}
/*creamos la parte inferior del logotipo o titulo. Le aplicamos color de letra y tamaño de letra*/
header div#cabecera div#titulo h1 span{
	color: #FCBE14;
	font-size: 24px;
	padding-left: 15px;
	text-shadow: 1px 1px 2px #959595;
}


/* ----------- MENU --------*/
/*flotamos el nav a la izquierda para colorcarlo en la parte superior alineado con el logotipo*/
header div#cabecera nav{
	position:relative;
}

header div#cabecera nav ul{
	clear:both;	
	margin:0 auto;
	width:420px;
}

/*ponemos la lista en horizontal flotando los elementos de la lista a la izquierda, separamos los elementos del menú 70px, le damos un alto de 75px a cada elemento del menú , le decimos que la imagen no se repita para que solo nos la muestre una vez y con el background-position la desplazamos (con la 1a coordenada 50%), es decir centrada, y con la 2a coordenada al 100% la desplazamos verticalmente abajo del todo.*/
header div#cabecera nav ul li{
	float:left;
	margin-right:3%;
	height:75px;
	background-repeat:no-repeat;
	background-position:50% 100%;
}

/*quitamos el subrrayado a los enlaces del menu, aplicamos el color de la letra, cambiamos el tamaño de la letra y aplicamos negrita, hacemos que ocupe todo el ancho y alto del elemento li*/
header div#cabecera nav ul li a{
	text-decoration:none;
	color:#BBBBBB;
	/*tamaño de fuente*/
	font-size:14px;
	/*negrita*/
	font-weight:bold;
	display:block;
	height:75px;
}
/*al pasar por encima del enlace le cambiamos el color de la letra a verde*/
header div#cabecera nav ul li a:hover{
	color:#497E04;
}
header div#cabecera nav ul li a:hover i{
	color:white;
}
header div#cabecera nav ul li.activo a:hover i{
	color:#497E04;
}
/*al texto de principal del enlace que indica cual es la pagina activa le aplico el color verde*/
header div#cabecera nav ul li.activo a{
	color:#497E04;
}

header div#cabecera nav ul li a i{
	padding-top: 10px;
	display: block;
	text-align: center;
	font-size: 22px;
}
header div#cabecera nav ul li a i.tamano{
	font-size:20px;
}


/*posicionamos el texto pequeño de cada elemento del menú, le cambiamos el tamaño de letra y lo alineamos al centro*/
header div#cabecera nav ul li a span{
	display:block;
	font-size:10px;
	color:#666;
	text-align:center;
}
/*al pasar por encima del elemento del menú le cambiamos el color de la letra pequeña del menú*/
header div#cabecera nav ul li a:hover span{
	color:white;
	/*quitamos la negrita*/
	font-weight:normal;
}
/*aplicamos color de letra para el texto pequeño del menu que indique cual es la pagina activa*/
header div#cabecera nav ul li.activo a span{
	color:white;
	/*quitamos la negrita*/
	font-weight:normal;
}

/* ----------- FIN ------ MENU --------*/

header div#cabecera div#banderas{
	position:absolute;
	top:10px;
	right:0px;
	/* float:right;
	padding-top:8px;
	padding-right:30px; */
}

/*------------- FIN HEADER ----------*/

/*------------- INICIO SLIDER ----------*/

div#contenedor_slider{
	background-image:url(../images/bg_slider.gif);
	background-repeat:repeat-x;
	height:423px;
	display:none;
}
div#contenedor_slider div#slider_centrado{
	width:940px;
	margin:0 auto;
	position:relative;
}


/* ---- APLICAMOS POSICIONAMIENTO Y VISULIZACION DE LAS CAPAS DEL SLIDER---*/
/* cambia el posicionamiento a absoluto, lo ubica con la propiedad top y con el z-index la coloca como capa visible */
div.slider{top:0px;position:absolute;z-index:1}

/*oculta la lista*/
div.slider ul.items{display:none}

/*--------------AQUI TRABAJAMOS LOS BOTONES DEL SLIDER-------*/
/*cambio el posicionamiento, con el z-index:2 lo pone como la capa visible y con bottom y left coloca la capa */ 
.slider .pagination{position:absolute;z-index:2;bottom:47px;left:432px}
.slider .pagination li{float:left;padding-right:4px}
.slider .pagination a{display:block;width:16px;height:16px;text-indent:-9999px;background:url(../images/buttons.png) right 0 no-repeat}
.slider  .pagination a:hover, .slider  .pagination .current a{background-position:left}
/*--------------FIN DE BOTONES DEL SLIDER-------*/

/* ----FIN POSICIONAMIENTO Y VISULIZACION DE LAS CAPAS DEL SLIDER---*/

/*------------- FIN SLIDER ----------*/


/* ----------- SECTION 1-------------------*/

section{
	width:96%;	
	padding-top:50px;
	padding-left:4%;
	min-width:600px;
}

section article p, section article figcaption {
	text-align:justify;
	line-height:23px;
	color:#6D7B93;
}

section#superior article {
	width:45.22%;
	float: left;
	margin-right:2.78%;
	height:220px;
}

section#superior article h2, section#superior h2  {
	line-height:60px;
	margin-bottom:10px;
	font-size:20px;
}

section#superior article h2 p, section#superior h2 p{
	width: 60px;
	line-height: 60px;
	background-color: #FCBE14;
	border-radius: 55px;
	text-align: center;
	color: white;
	font-size: 36px;
	float: left;
	margin: 0 15px 0px 0;	
}
/* a los enlaces de leer mas... le aplicamos color verde*/
section#superior article a{
	color:#FCBE14;
}
/* al pasar por encima de los enlaces la quitamos el subrrayado*/
section#superior article a:hover{
	text-decoration:none;
}

/* ----------- FIN SECTION 1-------------------*/

/* ----------- SECTION 2-------------------*/

section#inferior article#grande{
	width:93%;
	margin-right:30px;
	float:left;
}
/*cambiamos el tamaño del titulo de bienvenidos a TILDE*/
section#inferior article#grande h3, section#inferior article#menut h3, section#contacto article#formulario h3, section#contacto article#mapa h3 {
	font-size:28px;
	font-weight:normal;
	border-bottom:1px solid #bbb;
	padding-bottom:15px;
	padding-top:15px;
}

/*separamos la imagen del texto*/
section#inferior article#grande img{
		margin:30px 25px 20px 0;
		float:left;
}

section#inferior article#grande p{
	padding-top:20px;
}

section#inferior article#menut{
	width:95%;
	height:230px;
	clear:both;
}

section#inferior article#menut ul{
	list-style-type:square;
	color:#60B000;
	padding-top:20px;
	padding-left:20px;
	/* height:150px; */
}
section#inferior article#menut ul li{
	padding-bottom:7px;
	float:left;
	width:45%;
	margin-right:3%; 
}

section#inferior article#menut ul li span{
	color:#6D7B93;
}
/* ----------- FIN SECTION 2-------------------*/

/* ------------- FOOTER -------------*/
footer{
	/*aplicamos fondo negro a la cabecera repitiendo la imagen horizontalmente y le damos un alto de 160px*/
	clear:both;
	background-image:url(../images/bg.jpg);
	background-repeat:repeat;
	height:400px;
	font-size:14px;
}

footer div#pie{
	margin-left:3%;
}

footer div#pie div h4{
	color:white;
	font-size:30px;
	font-weight:normal;
	padding-bottom:15px;
}

footer div#pie div{
	float:left;
	width:45%;
	margin-right:5%;
	padding-top:20px;
}

footer div#pie ul{
	color:white;
}

footer div#pie div ul li{
	line-height:35px;
	border-top:1px solid #303030;
	color:#BBBBBB;
}

footer div#pie div ul li span{
	width:90px;
	display:block;
	/* float:left; */
}

/* aplicamos estilos al segundo div del footer que contiene el Horario*/
footer div#pie > div + div{
	width:45%;
}

footer div#pie > div + div ul li span{
	width:160px;
}
/* aplicamos estilos al tercer div del footer que contiene el Síguenos*/
footer div#pie > div + div + div{
	width:22%;
	display:none;
}


footer div#pie > div + div + div ul li span{
	width:40px;
	float:left;
}

footer a{
	color:#bbb;
	text-decoration:none;
}
footer a:hover{
	text-decoration:underline;
	color:#497E04;
}
footer div#pie > p{
	clear:both;
	color:white;
	text-align:center;
	padding:10px 0;
}

.tabulado{
	text-indent:0px;
	padding-left:0px;
}

footer div#pie > div + div ul li.alineado span{
	float:left;
	width:80px;
}

/* ------------- FIN FOOTER -------------*/


/*-------------- PAGINA CONTACTO ------------*/
div#barra_verde{
	height: 1px;
	background-image: url(../images/bg_top_img.jpg);
}

section#contacto{
	height:500px;
}

section#contacto article#formulario{
	width:590px;
	margin-right:30px;
	float:left;
}

section#contacto article#formulario ul{
	padding-top:20px;
}

section#contacto article#formulario ul#form_texto{ 
	width:80px;
	float:left;
}

section#contacto article#formulario ul li{
	line-height:35px;
	color:#696969;
}

section#contacto article#formulario ul li input{
	width:300px;
	height:25px;
	border:1px solid #E5E5E5;
	padding:0 5px;
}

section#contacto article#formulario ul li textarea{
	width:495px;
	height:200px;
	border:1px solid #E5E5E5;
	padding:5px;
	margin-top:8px;
	resize:none;
}

section#contacto article#formulario ul li input[name="borrar"],section#contacto article#formulario ul li input[name="enviar"] {
	width: 60px;
	height: 30px;
	background-color: #FCBE14;
	;
	font-weight: bold;
	color: white;
	margin-left: 8px;
	float: right;
}
section#contacto article#formulario ul li input[name="borrar"]:hover,section#contacto article#formulario ul li input[name="enviar"]:hover{
	background-color:black;
	
}

section#contacto article#mapa{
	width:590px;
	float:left;
}

section#contacto article#mapa iframe{
	margin:20px 0;
}

/*-------------- FIN PAGINA CONTACTO ------------*/

/*-------------- INICIO PAGINA PRODUCTOS ------------*/
section#superior article.productos{

	width:47%;
	float:left;
	height:350px;

}

section#superior article.productos figcaption{
	width:250px;
}

section#superior article.productos img{
	/* width:300px;
	height:180px; */
	border-radius: 0px;
	border: 1px solid #BBBBBB;
}
section#superior article.productos h2{
	font-size:24px;
}

/*-------------- FIN PAGINA PRODUCTOS ------------*/

/*-------------- INICIO PAGINA TRABAJOS ------------*/
section#superior article.trabajos{
	width:100%;
	height:1580px;
	min-width:610px;
}
section#superior article.trabajos li{
	float:left;
	width:290px;
}
section#superior article.trabajos li img{
	width:250px;
	height:150px;
	margin:0px 25px 25px 25px;
	border-radius:0px;
	border:1px solid #BBBBBB;
}
section#superior article.trabajos h2{
	font-size:24px;
}

/*-------------- FIN PAGINA TRABAJOS ------------*/

/*-------------- PAGINA CESPED ARTIFICIAL ------------*/

section#superior article.izquierda, section#superior article.derecha{
	width:100%;
	/* margin-right:20px;
	float:left; */
	height:450px;
	margin-bottom:20px;
} 
section#superior p.cesped{
	font-size:20px;
	text-align:justify;
	width:1220px;
	padding-bottom:20px;
	color:#6D7B93;
}

section#superior article.izquierda img, section#superior article.derecha img{
	border: 1px solid #BBBBBB;
	border-radius: 5px;
	width:300px;
	margin:0 auto;
	display:block;
}


}

/* @media screen and (max-width:480px){ */
@media screen and (max-width:767px){
	
header{
/*aplicamos fondo negro a la cabecera repitiendo la imagen horizontalmente y le damos un alto de 160px*/
background-image:url(../images/bg.jpg);
background-repeat:repeat-x;
/* height:308px; */
}

/*al div cabecera le asignamos un ancho y lo centramos*/
header div#cabecera{
	width:95%;
	height:500px;
	margin:0 auto;
}

/*ubicamos la imagen del logotipo con los margenes y la flotamos a la izquierda para poder posicionar luego el menu*/
header div#cabecera div#titulo{
	margin:53px 0 30px 0;
	float:left;	
	width:100%;
	text-align:center;
}
/*creamos la parte superior del logotipo o titulo. Le aplicamos color de letra y tamaño de letra*/
header div#cabecera div#titulo h1{
	color:#497E04;
	font-size:40px;
	line-height:35px;
	/* text-shadow:1px 1px 2px #5A9A07; */
}
/*creamos la parte inferior del logotipo o titulo. Le aplicamos color de letra y tamaño de letra*/
header div#cabecera div#titulo h1 span{
	color:#bbb;
	font-size:24px;
	padding-left:0px;
	text-shadow:1px 1px 2px #959595;
	display:block;
}


/* ----------- MENU --------*/
/*flotamos el nav a la izquierda para colorcarlo en la parte superior alineado con el logotipo*/
header div#cabecera nav{
	position:relative;
}

header div#cabecera nav ul{
	clear:both;	
	/* margin:0 auto;
	width:400px; */
}

/*ponemos la lista en horizontal flotando los elementos de la lista a la izquierda, separamos los elementos del menú 70px, le damos un alto de 75px a cada elemento del menú , le decimos que la imagen no se repita para que solo nos la muestre una vez y con el background-position la desplazamos (con la 1a coordenada 50%), es decir centrada, y con la 2a coordenada al 100% la desplazamos verticalmente abajo del todo.*/
header div#cabecera nav ul li{
	text-align:center;
	border-bottom:1px solid gray;
	line-height:50px;
}
header div#cabecera nav ul li#index{
	border-top:1px solid gray;
}

/*quitamos el subrrayado a los enlaces del menu, aplicamos el color de la letra, cambiamos el tamaño de la letra y aplicamos negrita, hacemos que ocupe todo el ancho y alto del elemento li*/
header div#cabecera nav ul li a{
	text-decoration:none;
	color:gray;
	/*tamaño de fuente*/
	font-size:14px;
	/*negrita*/
	font-weight:bold;
	display:block;
	
}
/*al pasar por encima del enlace le cambiamos el color de la letra a amarillo indio*/
header div#cabecera nav ul li a:hover{
	color:#FCBE14;
}
header div#cabecera nav ul li a:hover i{
	color:white;
}
header div#cabecera nav ul li.activo a:hover i{
	color:#497E04;
}
/*al texto de principal del enlace que indica cual es la pagina activa le aplico el color amarillo indio*/
header div#cabecera nav ul li.activo a{
	color:#FCBE14;
}

header div#cabecera nav ul li a i{
	padding-top:10px;
	display:block;
	text-align:center;
	font-size:22px;
	display:none;
}
header div#cabecera nav ul li a i.tamano{
	font-size:20px;
}


/*posicionamos el texto pequeño de cada elemento del menú, le cambiamos el tamaño de letra y lo alineamos al centro*/
header div#cabecera nav ul li a span{
	display:block;
	font-size:10px;
	color:#666;
	text-align:center;
	display:none;
}
/*al pasar por encima del elemento del menú le cambiamos el color de la letra pequeña del menú*/
header div#cabecera nav ul li a:hover span{
	color:white;
	/*quitamos la negrita*/
	font-weight:normal;
}
/*aplicamos color de letra para el texto pequeño del menu que indique cual es la pagina activa*/
header div#cabecera nav ul li.activo a span{
	color:white;
	/*quitamos la negrita*/
	font-weight:normal;
}

/* ----------- FIN ------ MENU --------*/

header div#cabecera div#banderas{
	position:absolute;
	top:10px;
	right:0px;
	/* float:right;
	padding-top:8px;
	padding-right:30px; */
}

/*------------- FIN HEADER ----------*/

/*------------- INICIO SLIDER ----------*/

div#contenedor_slider{
	background-image:url(../images/bg_slider.gif);
	background-repeat:repeat-x;
	height:423px;
	display:none;
}
div#contenedor_slider div#slider_centrado{
	width:940px;
	margin:0 auto;
	position:relative;
}


/* ---- APLICAMOS POSICIONAMIENTO Y VISULIZACION DE LAS CAPAS DEL SLIDER---*/
/* cambia el posicionamiento a absoluto, lo ubica con la propiedad top y con el z-index la coloca como capa visible */
div.slider{top:0px;position:absolute;z-index:1}

/*oculta la lista*/
div.slider ul.items{display:none}

/*--------------AQUI TRABAJAMOS LOS BOTONES DEL SLIDER-------*/
/*cambio el posicionamiento, con el z-index:2 lo pone como la capa visible y con bottom y left coloca la capa */ 
.slider .pagination{position:absolute;z-index:2;bottom:47px;left:432px}
.slider .pagination li{float:left;padding-right:4px}
.slider .pagination a{display:block;width:16px;height:16px;text-indent:-9999px;background:url(../images/buttons.png) right 0 no-repeat}
.slider  .pagination a:hover, .slider  .pagination .current a{background-position:left}
/*--------------FIN DE BOTONES DEL SLIDER-------*/

/* ----FIN POSICIONAMIENTO Y VISULIZACION DE LAS CAPAS DEL SLIDER---*/

/*------------- FIN SLIDER ----------*/


/* ----------- SECTION 1-------------------*/

section{
	width:95%;
	margin:0 auto;	
	padding-top:50px;	
}

section article p, section article figcaption {
	text-align:justify;
	line-height:23px;
	color:#6D7B93;
}

section#superior article {
	width:95%;
	margin:0 auto;
	/* float: left; */
	margin-right:2.78%;
	height:220px;
	/* border-bottom:3px solid #60B000; */
	padding-top:15px;
}

section#superior article h2, section#superior h2  {
	line-height:60px;
	margin-bottom:10px;
	font-size:32px;
	
}

section#superior article h2 p, section#superior h2 p{
	width:60px;
	line-height:60px;
	background-color:#FCBE14;
	border-radius:55px;
	text-align:center;
	color:white;
	font-size:36px;
	float:left;
	margin:0 15px 0px 0;
	
}
section#superior article p a{
	background-color:#FCBE14;
	color:white;
	width:100px;
	line-height:35px;
	display:block;
	text-align:center;
	margin:10px auto;
}
/* a los enlaces de leer mas... le aplicamos color amarillo indio*/
section#superior article a{
	color:#FCBE14;
}
/* al pasar por encima de los enlaces la quitamos el subrrayado*/
section#superior article a:hover{
	text-decoration:none;
}

/* ----------- FIN SECTION 1-------------------*/

/* ----------- SECTION 2-------------------*/

section#inferior article#grande{
	width:93%;
	margin-right:30px;
	float:left;
}
/*cambiamos el tamaño del titulo de bienvenidos a Peñisverd*/
section#inferior article#grande h3, section#inferior article#menut h3, section#contacto article#formulario h3, section#contacto article#mapa h3 {
	font-size:24px;
	font-weight:normal;
	border-bottom:1px solid #bbb;
	padding-bottom:15px;
	padding-top:15px;
}

/*separamos la imagen del texto*/
section#inferior article#grande img{
		margin:30px 25px 20px 0;
		float:left;
}

section#inferior article#grande p{
	padding-top:20px;
}

section#inferior article#menut{
	width:95%;
	height:290px;
	clear:both;
}

section#inferior article#menut ul{
	list-style-type:square;
	color:#FCBE14;
	padding-top:20px;
	padding-left:20px;
	/* height:150px; */
}
section#inferior article#menut ul li{
	padding-bottom:7px;
	/* float:left; */
	width:90%;
	margin-right:3%; 
}

section#inferior article#menut ul li span{
	color:#6D7B93;
}
/* ----------- FIN SECTION 2-------------------*/

/* ------------- FOOTER -------------*/
footer{
	/*aplicamos fondo negro a la cabecera repitiendo la imagen horizontalmente y le damos un alto de 160px*/
	clear:both;
	background-image:url(../images/bg.jpg);
	background-repeat:repeat;
	height:550px;
	font-size:14px;
}

footer div#pie{
	width:90%;
	height:600px;
	margin:0 auto;
}

footer div#pie div h4{
	color:#BBBBBB;
	font-size:30px;
	font-weight:normal;
	padding-bottom:15px;
	text-align:center;
}

footer div#pie div{
	/* float:left; */
	width:100%;
	/* margin-right:5%; */
	padding-top:20px;
}

footer div#pie ul{
	color:white;
}

footer div#pie div ul li{
	line-height:35px;
	border-top:1px solid #303030;
	color:#BBBBBB;
}

footer div#pie div ul li span{
	width:100px;
	display:block; 
	float:left; 
}

/* aplicamos estilos al segundo div del footer que contiene el Horario*/
footer div#pie > div + div{
	width:100%;
}

footer div#pie > div + div ul li span{
	width:140px;
}
/* aplicamos estilos al tercer div del footer que contiene el Síguenos*/
footer div#pie > div + div + div{
	width:22%;
	display:none;
}


footer div#pie > div + div + div ul li span{
	width:40px;
	float:left;
}

footer a{
	color:#bbb;
	text-decoration:none;
}
footer a:hover{
	text-decoration:underline;
	color:#497E04;
}
footer div#pie > p{
	clear:both;
	color:#BBBBBB;
	text-align:center;
	padding:20px 0;
}

.tabulado{
	text-indent:0px;
	padding-left:0px;
}

footer div#pie > div + div ul li.alineado span{
	float:left;
	width:140px;
}

/* ------------- FIN FOOTER -------------*/


/*-------------- PAGINA CONTACTO ------------*/
div#barra_verde{
	width:95%;
	margin:0 auto;
	height: 10px;
	/* background-image: url(../images/bg_top_img.jpg); */
	background-color:#FCBE14;
}

div#barra_verde2{
	width:95%;
	margin:0 auto;
	height: 10px;
	background-color:#FCBE14;
}

section#contacto{
	height:960px;
}

section#contacto article#formulario{
	width:90%;
	margin:0 auto;
	/* margin-right:30px; */
	/* float:left; */
}

section#contacto article#formulario ul{
	padding-top:20px;
}

section#contacto article#formulario ul#form_texto{ 
	width:22%;
	float:left;
}

section#contacto article#formulario ul li{
	line-height:35px;
	color:#696969;
	
}

section#contacto article#formulario ul li input{
	width:70%;
	height:25px;
	border:1px solid #E5E5E5;
	padding:0 5px;
}

section#contacto article#formulario ul li textarea{
	width:70%;
	height:200px;
	border:1px solid #E5E5E5;
	padding:5px;
	margin-top:8px;
	resize:none;
}

section#contacto article#formulario ul li input[name="borrar"],section#contacto article#formulario ul li input[name="enviar"] {
	width:60px;
	height:30px;
	background-color:#FCBE14;
	font-weight:bold;
	color:white;
	margin-left:8px;
	float:right;
}
section#contacto article#formulario ul li input[name="borrar"]:hover,section#contacto article#formulario ul li input[name="enviar"]:hover{
	background-color:black;
	
}

section#contacto article#mapa{
	/* width:90%; */
	margin:0 auto;
}

section#contacto article#mapa iframe{
	/* margin:20px 0; */
	width:95%;
	/* height:200px; */
	margin:0 auto;
	display:block;
}

/*-------------- FIN PAGINA CONTACTO ------------*/

/*-------------- INICIO PAGINA PRODUCTOS ------------*/
section#superior article.productos{
	width:95%;
	margin:0 auto;
	height:350px;

}

section#superior article.ultimo{
	border-bottom:none;
}

section#superior article.productos figcaption{
	width:90%;
	margin:0 auto;
}

section#superior article.productos h2{
	font-size: 22px;
	margin:0 auto;
}

section#superior article.productos img{	
	width:300px;
	margin:0 auto;
	height:180px;
	display:block;
	border-radius:0px;
	border:1px solid #FCBE14;
	
}

/*-------------- FIN PAGINA PRODUCTOS ------------*/

/*-------------- INICIO PAGINA TRABAJOS ------------*/
section#superior article.trabajos{
	width:95%;
	height:70px;

}

section#superior article.trabajos li{
	float:left;
	
}
section#superior article.trabajos li img{
	width:300px;
	height:180px;
	margin:15px;
	border-radius:0px;
	border:1px solid #BBBBBB;
}

section#superior article.trabajos h2{
	font-size:24px;
}


/*-------------- FIN PAGINA TRABAJOS ------------*/

/*-------------- PAGINA CESPED ARTIFICIAL ------------*/

section#superior article.izquierda, section#superior article.derecha{
	width:100%;
	height:100%;
	margin-bottom:20px;
} 
section#superior p.cesped{
	font-size:20px;
	text-align:justify;
	width:95%;
	padding-bottom:20px;
	color:#6D7B93;
}

section#superior article.izquierda img, section#superior article.derecha img{
	border: 1px solid #BBBBBB;
	border-radius: 0px;
	width:95%;
	height:95%;
	margin:0 auto;
	display:block;
}