/* ------------------------------
tablets APAISADO
------------------------------ */


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


section#banner {
    padding-top: 60px;
    padding-bottom: 60px;
    min-height: 500px;
    background: url(../img/bg-banner.jpg) no-repeat center right #f6f7f9;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: 60%;
}

}


@media screen and (max-width:768px) {
    .local{width: 50%;}
}

/* --tablets VERTICAL */
@media screen and (min-width:700px) and (max-width:768px) {
	section#banner {
    padding-top: 60px;
    padding-bottom: 60px;
    min-height: 500px;
    background: url(../img/bg-banner.jpg) no-repeat bottom right #f6f7f9;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: 60%;
}	

section#banner {
	min-height:450px;
}
section#emulsion {
    padding-top: 90px;
    padding-bottom: 40px;
    min-height: 455px;
    background: url(../img/bg-emulsion.jpg) no-repeat bottom right #f6f7f9;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: 50%;
}
section#emulsion .modulo {
	margin-bottom:20px;
}

#formulario {
    padding: 40px 0;
    background: url(../img/bg-contacto.jpg) no-repeat left bottom #f6f7f8;
    background-size: 80%;
}

}


/* ------------------------------
mobile APAISADO
------------------------------ */

/*iphone 5 apaisado*/
@media screen and (min-width:501px) and (max-width:568px) {


}


/*iphone 6 apaisado*/
@media screen and (min-width:569px) and (max-width:667px) {

 #hero-section {
	    margin-top: 85px;
    max-height: calc(100vh);
}
#hero-section h2,
h1 {
	font-size:30px;
}
.columna:nth-child(2) {
    border-top: 1px solid #606a70;
    border-bottom: 1px solid #606a70;
		    border-left: 0;
    border-right: 0;
}
	section#banner {
    padding-top: 60px;
    padding-bottom: 60px;
    min-height: 500px;
    background: url(../img/bg-banner.jpg) no-repeat bottom right #f6f7f9;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: 60%;
}	
#formulario {
    padding: 40px 0 340px;
    background: url(../img/bg-contacto.jpg) no-repeat right bottom #f6f7f8;
    background-size: 80%;
}

}

/*iphone 6 PLUS apaisado*/
@media screen and (min-width:668px) and (max-width:736px) {
		section#banner {
    padding-top: 60px;
    padding-bottom: 60px;
    min-height: 500px;
    background: url(../img/bg-banner.jpg) no-repeat center right #f6f7f9;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: 60%;
}

#hero-section {
	    margin-top: 85px;
    max-height: calc(100vh);
}
#hero-section h2,
h1 {
	font-size:30px;
}
.columna:nth-child(2) {
    border-top: 1px solid #606a70;
    border-bottom: 1px solid #606a70;
		    border-left: 0;
    border-right: 0;
}
.presentacion {
	margin-top:30px;
}
section#banner {
    padding-top: 40px;
    padding-bottom: 340px;
    min-height: 600px;
    background: url(../img/bg-banner.jpg) no-repeat bottom right #f6f7f9;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
}
.columna:nth-child(2) {
    border-top: 1px solid #606a70;
    border-bottom: 1px solid #606a70;
		    border-left: 0;
    border-right: 0;
}
#formulario {
    padding: 40px 0 340px;
    background: url(../img/bg-contacto.jpg) no-repeat right bottom #f6f7f8;
    background-size: 80%;
}
}

/*iphone X apaisado*/
@media screen and (min-width:737px) and (max-width:812px) {
#menu li {
    margin-left: 10px;
}
#menu li a {
	font-size:14px;
}
#hero-section h2,
h1 {
	font-size:30px;
}
#hero-section {
	    margin-top: 85px;
    max-height: calc(100vh);
}
.columna {
    padding: 30px 15px;
}
section#banner {
    padding-top: 90px;
    padding-bottom: 90px;
    min-height: 600px;
    background: url(../img/bg-banner.jpg) no-repeat center right #f6f7f9;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: 60%;
}
section#emulsion {
    padding-top: 90px;
    padding-bottom: 40px;
    min-height: 450px;
    background: url(../img/bg-emulsion.jpg) no-repeat bottom right #f6f7f9;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: 50%;
}
#formulario {
    padding: 40px 0;
    background: url(../img/bg-contacto.jpg) no-repeat left bottom #f6f7f8;
    background-size: 70%;
}
}

/* ------------------------------
mobile VERTICAL
------------------------------ */



/*mobile generico*/
@media screen and (min-width:200px) and (max-width:599px) {
#casasco {
    margin-top: 30px;
}
#hero-section {
padding: 30px 0;
	min-height: calc(100vh - 85px);
	max-height:none;
}
#hero-section h2,
h1 {
	font-size:27px;
}
h3 {
	font-size: 24px;
}
    .columna {
    padding: 20px;}
		
.columna:nth-child(2) {
    border-top: 1px solid #606a70;
    border-bottom: 1px solid #606a70;
		    border-left: 0;
    border-right: 0;
}
.presentacion {
	margin-top:30px;
}
.presentacion {
background: url(../img/aloe-presentacion.png) no-repeat 5px 20px #f1f1f1;
    padding: 150px 20px 30px 20px;
}
#formulario {
    padding: 40px 0 200px;
    background: url(../img/bg-contacto.jpg) no-repeat right bottom #f6f7f8;
    background-size: 80%;
}
section#emulsion {
    padding-bottom: 245px;
    padding-top: 40px;
    min-height: 600px;
    background: url(../img/bg-emulsion.jpg) no-repeat bottom right #f6f7f9;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: 100%;
}

section#banner {
padding-top: 10px;
    padding-bottom: 90px;
    min-height: 450px;
    background: url(../img/bg-banner.jpg) no-repeat bottom right #f6f7f9;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: 90%;
}
#contacto {
    padding: 0px 0;
    text-align: center;
}

section#aloe-vera {
    padding-top: 40px;
    padding-bottom: 20px;
}
section#avena {
    padding-top: 20px;
    padding-bottom: 40px;
}

section#emulsion .modulo {
	margin-bottom:20px;
}


.cuadro {
border: none;
}
 
.modo {
    margin-top: 20px;
}
}

@media screen and (max-width:400px) {
    .local{width: 100%;}
}