p {
	line-height: 1.5em;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: 100;
}

.uno {
	background: #ccc;
	height: 10em;
}

.dos {
	background: #ddd;
	height: 10em;
}

.tres {
	background: #eee;
	height: 10em;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
}

.l-box {
	padding: 1em;
}

/* IMAGEN PRINCIPAL */

.imagen-principal {
	width: 100%;
	height: auto;
/*	background: #d6d6d6;*/
}

/* IMAGEN DE FONDO DEL HEADER */

.bg-header { 
  background: url('../img/bg-header-03.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*TÍTULO H1 HEADER*/

h1 {
	margin: 0;
}

h1.titulo-header {
	color: #fff;
	font-size: 2em;
	font-weight: 200;
}

.fondo-h1-header {
/*	background: rgba(0,0,0,0.5);*/
	background: #006666;
	padding: 0.5em 1em;
	display: inline-block;
	margin-top: 2em;
}

h2.subtitulo-header {
	color: #fff;
	font-size: 1.5em;
	font-weight: 100;
	padding: 5px 10px
}

/* TÍTULO DE CADA SECCIÓN */
.titulo-seccion {
	color: #fff;
	text-align: center;
	background: #006666;
	padding: 5px 0px;
}

.bg-titulo-bebederos {
	background: url('../img/bg-bebederos.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
	padding: 3em;
}

.bg-titulo-picaflores {
	background: url('../img/bg-picaflores.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
	padding: 3em;
}

.bg-titulo-instructivos {
	background: url('../img/bg-instructivos.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
	padding: 3em;
}

.bg-titulo-fotos {
	background: url('../img/bg-fotos.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
	padding: 3em;
}

.bg-titulo-dondecomprar {
	background: url('../img/bg-dondecomprar.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
	padding: 3em;
}

.bg-titulo-contacto {
	background: url('../img/bg-contacto.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
	padding: 3em;
}

.bg-titulo-gracias {
	background: url('../img/bg-gracias.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
	padding: 3em;
}

.bg-general {
	background: url('../img/bg-general.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
	padding: 3em;
}

/*VIDEO*/

.video {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
	border: 0.7em solid #006666;
/*	margin-top: 180px;*/
/*	margin-bottom: 2em;*/
	
}

.video iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*SEPARADOR BAJO HEADER*/
.separador-bajo-header {
	background: #006666;
	padding: 3em;
	color: #fff;
}

.buscamos {
	float: left;
}

.espacio {
	margin-top: 1.5em;
}

.button-xlarge {
	font-size: 125%;
}

 .button-secondary {
            color: #fff;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

.button-contacto {
	color: #fff;
  background: #003030;
	text-transform: uppercase;
	font-size: 16px;
/*	padding: 20px 20px 10px 20px;*/
  }

.buscamos {
/*	margin-top: 4px;*/
}

.buscamos {
	float:none;
	display: block;
}

/*MARGIN*/

.margin-top {
	margin-top: 2em;
}

.margin-bottom {
	margin-bottom: 2em;
}

.margin-top4 {
	margin-top: 4em;
}

.margin-bottom4 {
	margin-bottom: 4em;
}

.margin-bottom-video, .margin-bottom-h1-header {
	margin-bottom: 2em;
}
	
.margin-top-video, .margin-top-h1-header {
	margin-top: 1em;
}

/*PADDING*/

.padding-top {
	padding-top: 1em;
}

.padding-bottom {
	padding-bottom: 1em;
}

/* COLOR DEL BOTÓN DEL FORMULARIO DE CONTACTO */
.pure-button-primary {
	background-color: #003030;
}

/* BOTÓN IR ARRIBA DEL FOOTER */

.go-top {
	position: fixed;
	bottom: 4em;
	right: 2em;
	text-decoration: none;
	color: #fff;
/*    background: #FF100D;*/
    background-image: url(../img/gototop.png);
	/*background-color: rgba(0, 0, 0, 0.5);*/
	background-repeat:no-repeat;
	font-size: 1em;
/*	padding: 0.05em;*/
/*
	padding-bottom: 0em;
	padding-left: 0.05em;
	padding-right: 0.05em;
*/
	display: none;
  border-radius:50%;
}

.go-top:hover {
	background-image: url(../img/gototop2.png);
	/*background-color: rgba(0, 0, 0, 0.5);*/
	background-repeat:no-repeat;
/*    background: #ff4e00;*/
    color: #fff;
	/*background-color: rgba(0, 0, 0, 0.6);*/
}

/* Centrar texto */

.centrar-texto {
	text-align: center;
}

.img-centrada {
	display: block;
	margin: 0 auto;
}

.centrar {
	margin: 0 auto;
}

/* REDUCIR EL ANCHO DE COLUMNA */

.ancho-reducido {
	max-width: 50%;
}

/* CONTENIDO FOOTER */

.contenido-footer {
	background: #003030;
	color: #fff;
	padding: 2em;
}

p.copyright {
	margin-bottom: 1em;
}

a.mgdisenoweb {
	color: #fff;
	text-decoration: none;
}

a.mgdisenoweb:hover {
	color: #003030;
	background: #fff;
	padding: 0.4em;
	text-decoration: none;
}

/* FORMULARIO DE CONTACTO */

fieldset {
	border:0;
}

label {
    display:block;
    margin-top:20px;
    letter-spacing:1px;
}
 
form {
    margin:0 auto;
/*    max-width:400px;*/
    max-width:100%;
}
 
input, textarea {
    width:100%;
    height:40px;
    background:#fff;
    border:2px solid #666;
/*    padding:10px;*/
    margin-top:5px;
    font-size:14px;
    color:#000;
}
 
textarea {
    height:150px;
}

.form-group {
	margin-bottom: 1em;
}
 
/*
#submit {
    width:85px;
    height:35px;
    border:none;
    margin-top:20px;
    cursor:pointer;
}
*/

/* BORDE EN IMÁGENES*/

.borde-bebederos {
	border: 0.7em solid #006666;
}

/*IMAGEN RESPONSIVE*/
.img-responsive {
	max-width: 100%;
	height: auto;
}


/* MAPA RESPONSIVE */

.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;

}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

/* Menú */

*{
    margin: 0;
    padding: 0;
}
body{
    background: #f4efe5;
    
}
header, nav{
  display: block;
	font: bold 14px 'Open Sans', sans-serif;
}

.header-full-width {
	background: #ccffff;
  height:60px;
	width: 100%;
}

/* Definimos un ancho 100% y una altura fija para nuestro menú */
header{
    background: #ccffff;
    height:60px;
    position: relative;
    width: 100%;
    z-index: 2
}

/* El logo sera flotado a la izquierda */
#logo{
    background: url('../img/logo2.png') no-repeat 0 0;
    display: block;
    float: left;
    margin: 6px 10px 0;
    width: 108px;
    height: 46px;
    text-indent: -9999px
}

/* Nuestro nav con id #menu lo flotaremos a la derecha*/
#menu{float: right;}   

    /* Quitamos estilos por defecto de el tag UL */
    #menu ul{
        list-style: none;
        font-size: 14px;
    }
        
        /* Centramos y ponemos los textos en mayuscula */
        #menu li{
           display: block;
           float: left;
           text-transform: uppercase;
           text-align: center;
        }
            
            /* Damos estilo a nuestros enlaces */
            #menu li a{
                display: block;
                color: #003030;
                text-decoration: none;
                height: 60px;
                line-height: 60px;
                padding: 0 16px;
/*                padding: 0 26px;*/
            }
            #menu li a:hover{
                background: #003030;
                color: #ccffff;
            }
    
    /* Estilos #nav-mobile y lo ocultamos */
    #nav-mobile{
        display: none;
        background: url('../img/nav3.png') no-repeat center center;
        float: right;
        width: 60px;
        height: 60px;
        position: absolute;
        right: 0;
        top:0;
        opacity: .6;

    }   
        /* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
        #nav-mobile.nav-active{
            opacity: 1;
        }

/* Content */
#content{
    width: 100%;
    margin-top: 0px;
/*    margin: 60px 10%;*/
/*    text-align: center;*/
    overflow: hidden;
}
/*
    h2{
        font-size: 50px;
        font-weight: 600;
        text-transform: uppercase;
        color: #624c3f;
    }
*/


/*
    MEDIA QUERY
*/

@media only screen and (max-width: 1024px) {
/*@media only screen and (max-width: 767px) {*/
        
/*    h2{font-size: 40px;}*/
    
    /* mostramos #nav-mobile */
    #nav-mobile{ display: block; }

    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #menu{
        width: 100%;
        float: none;
        padding-top: 60px;
    }
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            box-shadow: 0 1px 2px rgba(0,0,0,.5);
            max-height: 0;
            overflow: hidden;
        }
            /* estilos para los LI del menu */
            #menu li{
/*                background: #33363b;*/
                background: #006666;
                border-bottom: 1px solid #282b30;
                float: none;
            }

            /* Quitamos el borde del ultimo item del menú */
            #menu li:last-child{ border-bottom: 0;}
                #menu li a{
                    padding: 15px 0;
                    height: auto;
                    line-height: normal;
										color: #ccffff;
                }
                #menu li a:hover{background:#003030}

        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{
            max-height: 400px;
            -webkit-transition: max-height .4s;
            -moz-transition: max-height .4s;
            -ms-transition: max-height .4s;
            -o-transition: max-height .4s;
            transition: max-height .4s;
        }
}

/* DESAPARECE EL PICAFLOR DE FONDO EN EL HEADER EN TAMAÑOS MOBILES */
@media only screen and (min-width: 768px) {
	
.bg-picaflor { 
  background: url('../img/picaflor-min.png') no-repeat bottom center;
}

h1.titulo-header {
	color: #fff;
	font-size: 1.5em;
	font-weight: 200;
}
	
.margin-top-video, .margin-top-h1-header {
	margin-top: 2em;
}
	
}

@media only screen and (min-width: 1024px) {
	
	h1.titulo-header {
	color: #fff;
	font-size: 2em;
	font-weight: 200;
}
	
.bg-picaflor { 
  background: url('../img/picaflor-min.png') no-repeat center center;
}

.texto-boton {
		display: block;
	}	
	
.buscamos {
	float:left;
}
	
.espacio {
	margin-left: 1.5em;
	margin-top: 0;
}
	
.video {
	margin-top:2em;
}
	
.margin-bottom-video, .margin-bottom-h1-header {
	margin-bottom: 4em;
}
	
.margin-top-video, .margin-top-h1-header {
	margin-bottom: 4em;
}
	
}

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