@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Bad+Script);

*{
	margin:0;
	padding:0;
	}

body{
	/*font-family: 'Pacifico', cursive;*/
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	/*font-family: 'Bad Script', cursive;*/
	line-height:1.3em; /*interlineado */
	font-size:1em;
	background:#fffffa;
	text-align:center;
	color:#666;
	}

header{
	width:100%;
	padding-top:1em;
	padding-bottom:1em;
	
	}

header img{ /*logo*/
	width:80%;
	max-width:350px;
		
	}
aside img{
	width:60px;}

#nube{
	display:none;
	}
	
#nube2{
	display:none;
	}
	
#nube3{
	display:none;
	}
	
.facebook_arriba{
	display:none;
	}
	
/* MENU*/

/* FIN MENU */

	
/* INICIO PREGUNTAS FRECUENTES ARTICLE */

/*article h1 este está en formulario*/

article h2{
	font-size:1.2em;
	color:#666;
	/*font-weight:lighter;*/
	/*text-shadow:2px 2px 5px #000; /* horizontal, vertical, radio, color */
	margin:1em auto;
	
	}
	
p{
	margin:1em auto;
}

/*FIN PREGUNTAS FRECUENTES*/

/* INICIO FORMULARIO*/
.gracias{
	background:#F2F2ED;
	border:1px solid #666;
	width:100%;
	padding:10px; /*para que no se quede tan pegado*/
	box-sizing:border-box;
	}
	
.texto_contacto{
	line-height:2em;
	}
	
.texto_contacto a:link, a:visited,footer a:visited{
	color:#666;	
	}
	
.texto_contacto a:hover{
	text-decoration:none;
	}

	
.primer_formulario{
	width:100%;
	background:#F2F2ED;
	padding:30px; /*para que no se quede tan pegado*/
	box-sizing:border-box; /*para que incluya en paddin xq al haberle dado un max-width al container no funcionaba bien con el padding de aqui y dejaba un margen fijo a la izquierda */
	border:1px solid #666;
	}
	
.primer_formulario label{
	display:block;
	margin:0px 0px 5px;
	}

.primer_formulario label>span {
	float:left;
	margin-top:10px;
	color:#666;	
	}

.primer_formulario input[type="text"], .primer_formulario input[type="email"], .primer_formulario select, .primer_formulario textarea{
	color:#666;
	height:30px;
	width:100%;
	/*border:none;  para quitar el recuadro que aparece por defecto*/
	border:1px solid #666;
	background:none;
	}
	
h1{
	font-size:1.4em;
	color:#666;
	/*font-weight:lighter;*/
	/*text-shadow:2px 2px 5px #000; /* horizontal, vertical, radio, color */
	margin:1em auto;
	}

.primer_formulario textarea{
	height:100px;}

.primer_formulario input[type="submit"]{
	background:none;
	border:1px solid #666;
	color:#666;
	padding:5px 10px;
	margin-top:10px;
	}

.primer_formulario input[type="submit"]:hover{
	color:#fff;
	border: 1px solid #fff;
	background:#666;

	}

.primer_formulario input[type="checkbox"]{
	height:1.3em;
	margin-right:10px;
	}
/* FIN FORMULARIO*/

/* CATEGORÍAS */

.portadas{
	width:95%;
	margin:0.3em auto;
	box-sizing:border-box; /*para que todo lo de dentro del article no ocupe más del 95% */
	}
	
.portadas img{
	width:95%; /*en responsive hay que ponerlo siempre, para que se ajuste al tamaño del article*/
	}

.precios{
	text-align:left;
	}
	
.extras{
	font-size:.8em;
	color:#b4b4b4b;
	}
/*FIN DE CATEGORÍAS */



/* TABLAS */
table{
	border:1px solid #333; /*borde exterior para la tabla*/
	width:100%;
	max-width:1024px;
	margin:1em auto; /*para que se centre hay que darle un width anteriormente */
	text-align:center;
	border-collapse:collapse; /* para que el relleno del th llegue hasta los bordes de la tabla */
	}

th{
	background:#b3b3b3;
	margin:50px auto;
	} 

tr{
	background:#fff;
	}


/*FIN DE TABLAS */



/* FOOTER */

footer{
	width:100%;
	clear:both; /* lo ponemos para que rompa las flotaduras anteiores y baje, es como darle al intro */
	text-align:center;
	margin:1.5em 0;
	font-size:0.8em;
}

footer p{
	color:#666;
	}
	
footer a:link,footer a:visited{
	color:#666;	
	}
	
footer a:hover{
	text-decoration:none;
	}



/* HASTA AQUI LO MIO */


/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

/* Mobile Layout: 480px and below. */
  
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 89.3%;
	padding-left: 2.35%;
	padding-right: 2.35%;
	clear: none;
	float: none;
}
#div1 {
}
.zeroMargin_mobile {
    margin-left: 0;
}
.hide_mobile {
    display: none;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

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

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.zeroMargin_tablet {
    margin-left: 0;
}
.hide_tablet {
    display: none;
}

/* mio*/

#nube{
	display:none;
	}
	
#nube2{
	display:none;
	}
	
#nube3{
	display:none;
	}
	
}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

/*@media only screen and (min-width: 769px) */
@media all and (min-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (min-width: 1024px), only screen and (max-resolution: 192dpi) and (min-width: 1024px), only screen and (max-resolution: 2dppx) and (min-width: 1024px){

.gridContainer {
	width: 88.5%;
	max-width: 1232px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.zeroMargin_desktop {
    margin-left: 0;
}
.hide_desktop {
    display: none;
}



/*ahora lo mío*/

header img{
	
	}

aside{
	right:10%;
	top:3em;
	position:fixed;
	}
aside img{
	width:60px;}
	
.facebook_arriba{
	display:block;}
.facebook_abajo{
	display:none;
}

body{
	line-height:1.3em; /*interlineado */
	}

#nube, #nube2, #nube3{
	position:absolute;
	display:block;
	transition:all .3s linear;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	rotation: 0deg;
	animation-duration:1.5s;
	animation-iteration-count:infinite;
	z-index:1000;
	box-sizing:border-box;
	}

#nube{
	top:.5em;
	left:-6em;
	width:6.3em;
}

#nube2{
	top:0em;
	right:-1em;
	width:7em;
}

#nube3{
	top:0em;
	left:0em;
	width:5em;
	
}
	
#nube2:hover, #nube3:hover, #nube:hover{
	animation-name:hover_nube;
	cursor:pointer;
	}

@keyframes hover_nube{
	
	
0%{
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	rotation: 0deg;
		
	}

30%{
	-webkit-transform: rotate(-15deg);
	-moz-transform: rotate(-15deg);
	rotation: -15deg;
		
	}
		
50%{
	-webkit-transform: rotate(15deg);
	-moz-transform: rotate(15deg);
	rotation: 15deg;
	}
	
75%{
	-webkit-transform: rotate(-15deg);
	-moz-transform: rotate(-15deg);
	rotation: -15deg;
	}
	
100%{
	-webkit-transform: rotate(15deg);
	-moz-transform: rotate(15deg);
	rotation: 15deg;
		}
	
	}


.imagen_menu{
	background:url(../images/fondo%20menu.jpg);
	/*background:#ccc;*/
	height:10em;
	width:100%;
	position:absolute;
	top:9em;
	z-index:-1;
	}

.menu{
	max-width:1024px; /*el ancho se suele hacer como máximo de 1024px */
	margin:0 auto;
	}
	
.container{
	max-width:1024px; /*el ancho se suele hacer como máximo de 1024px */
	margin:0 auto;
	padding-bottom:0.5em; /*para que le footer no se le pegue abajo*/
	padding-top:.5em;
	position:relative;	
	}

section{
	background:#fffffa;
	margin:1em auto;
	width:100%;
	max-width:830px;

	
	}

article{
	padding:.8em;
	}

article img{/*modifica a las del slider tmb */
	width:100%;
	max-width:1000px;
	
	}
	

#yo{
	float:right;
	max-width:500px;
	width:100%;
	margin:0 0 1em 1.5em;
	max-width:300px;
	}
	
/* CATEGORÍAS */

.portadas{
	width:48%;
	margin:0.3em auto;
	box-sizing:border-box; /*para que todo lo de dentro del article no ocupe más del 95% */
	float:left;
	
	}
	

/*FIN DE CATEGORÍAS */
	
}