*{
    box-sizing: border-box;
}

body{background:#F4EDE6;}


/* ------------------------------------------------------------------------------------------------------------------ */

/* Reset CSS ----------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain) */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, a {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.5;
}
ol, ul {
	list-style: none;
    list-style-position: inside;
    padding-left: 5px;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	font-size: 100%;
    font: inherit;
    color: inherit;
    text-decoration: inherit;
}



/* ------------------------------------------------------------------------ RESET ------------------------------------------------------------------------ */


#panelDer{ 
width: 60px;
height: 60px;

position: fixed;
right: 20px;
margin-top:300px;}



@font-face{
    font-family: "OpenSans-Bold";
    src: url(fonts/OpenSans-Bold.ttf);
    font-weight: normal;
}

@font-face{
    font-family: "OpenSans-Regular";
    src: url(fonts/OpenSans-Regular.ttf);
    font-style: normal;
    font-weight: normal;
}

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

h1.valores{ color: #FF5000;
    position: relative}

h1{
    font-family: "OpenSans-Bold";
    font-weight: bold;
    font-size: 44px;
    color: #704D33;
    line-height: 43px;
    text-align: center;
    margin-bottom: 10px;
}

h2{
    font-family: 'OpenSans-Bold', sans-serif;
    font-size: 28px;
    color: #f5f0ed;
    line-height: 20px;
    text-align: center;
    margin: 0px auto 10px;
}


h3.nuestromejor{ 
    font-family: 'OpenSans-Bold', sans-serif ;
    font-size: 22px ;
    color: #704D33;
}

h3.valores{ 
    font-family: 'OpenSans-Bold', sans-serif;
 font-size: 28px ;
color: #704D33;
line-height: 40px}


h3{
    font-family: 'OpenSans-Bold', sans-serif;
    font-size: 24px;
    color: #f5f0ed;
    text-align: center;
}

p.nosotros{
        font-size: 20px;  
        line-height: 28px;
        position: relative;}
p.objetivos{ text-align: left;}

p{
    font-family: 'OpenSans-Regular', sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #704D33;
    line-height: 22px;
    text-align: center;
}

p.button{
    font-family: 'OpenSans', sans-serif;
    font-style: normal;
    font-size: 14px;
    color: #f5f0ed;
}

li{
    font-family: 'OpenSans-Regular', sans-serif;
    font-size: 16px;
    color:#55AF3A;
}




a:hover{ color: #5B3E26} 



.fotos{    margin: auto;margin-top: 80px;}

.foto1{ width: 33.33%; height: 370px; float: left;}
.foto2{ width: 33.33%; height:370px; ; float: left;}
.foto3{ width: 33.33%; height: 370px;  float: left;}

.cuadros{ margin-top: 550px;}


.cajauno{   width: 50%;
    height: 300px;
     float: left ;
    margin-top: 40px;}


.logoblanco{        width: 43%;
    height: 50%;
    margin-left: 120px;
    margin-top: 68px;}



.cajados{   width: 50%;
    height: 240px;
    float: left;
 margin-top: 130px;}

.cuadro2{}

.cajatres{ width: 80%; height: 200px; margin: auto;margin-top:90px;  font-family: sans-serif;}

.redes{width: 100%; height: 100px;margin-top: 20px; }


.face{ width: 50px; height: 50px; float: left;margin-top: 10px; }













.tw{ width: 50px; height: 50px; float: left;margin-top:10px;margin-left: 10px;}

.siguenos{margin-left: 15px;}
.mail{ float: left; margin-left: 30px;margin-top: 20px; font-size: 17px; color: white;}



.cajatres p { ;text-align: left; font-size: 18px; color: white;}
.av{ font-size: 20px; color: white;}
.menu_dos{ margin-left: 80px; float: left;}

.menu_dos a{ color: white; }

.menu_dos a:hover { color:orange; }
.cuadros{ margin-top: 572px;}
.cuadro1{ width: 50%; height: 410px; background: #55AF3A; float: left; border-top:22px solid #f4ede6; }

.cuadro2{ width: 50%; height: 410px; background: #a2c854;float: left;border-top:22px solid #f4ede6;}
.footer, .footer2{
    background-color: #241d1b;
    min-height: 171px;
    padding: 76px 0px 0px 29px;
}

.footer p, .footer2 p{
    text-align: left;
}

.footer2{
    display: none;
}

.topBar{
    width: 75%;
    margin: auto;
    
    padding: 20px 24px 30px;
    overflow: hidden;
    position: relative;
}

.logo{
    margin-top: 10px;
    float: left
        ;
}

.boton{
    display: none;
    position: absolute;
    top: 80px;
    right: 60px;
    z-index: 1;
}

.menu{
     margin-right: 60px;
    position: absolute;
    font-weight: bold;
    top: 80px;
    right: 100px;
    text-decoration: none;
    z-index: 1;
}

.menu ul{
    text-align: right;
}

.menu li{
    display: inline-block;
    margin-right: 17px;
    margin-left: 0px;
}

.header{
    background-image: url(images/Fondo1.jpg);
    background-position: center;
    background-size: cover;
    min-height: 900px;
    ;
}

.contenedortitles{
    width: 50%;
    margin: 50px auto auto;
}


.separador{
    width: 88px;
    border-top: 2px solid #f5f0ed;
    margin: 10px auto 30px auto;
}




.boxes{
    overflow: hidden;
}

.leftbox{
    width: 50%;
    float: left;
    min-height: 420px;
    background-color: #A2C854;
    padding-top: 125px;
    
}

.leftbox h2, .leftbox p{
    color: white;
}

.rightbox {
    width: 50%;
    float: left;
    min-height: 420px;
    background-color: #55AF3A;
    padding-top: 30px;
    /* padding: 30px; */}

.rightbox h2, .rightbox p{
    color: white;
}

.bloqueContainer{
    margin: 0px auto 0px auto;
    width: 70%}


.bloqueContainer span{
    font-weight: bold;
}

.header2{
    
    background-size: cover;
    min-height:1140px;
    padding-top: 100px;
}


    

.verduras{ width: 80%; margin: auto;}

.contenedortitles2{
    width: 60%;
    margin: 0px auto;
    text-align: center;
    height: 360px;
}


div.button{
    border: 2px solid #f5f0ed;
    padding: 10px 20px;
    display: inline-block;
    margin-top: 30px;
}

.centralbox{
    overflow: hidden;
    padding: 85px 10px 0px 10px;
    background-color: #f5f0ed;
}

.infobox{
    float: left;
    width: 50%;
    min-height: 250px;
    overflow: hidden;
    display: inline-block;
    position: relative;
}

.infoboxImage{
    position: absolute;
    left: 20px;
}

.infoboxText{
    padding: 0px 23px 0px 215px;
    margin-bottom: 20px;
}

.infoboxText h3, .infoboxText p{
    color: #241d1b;  
    text-align: left;
}

.infoboxImage img{
    width: 100%;
}


/* Media query */

@media screen and (max-width: 801px){   
    .foto1{; width: 100%; }   
    .foto2{  width: 100%;} 
    .foto3{;width: 100%; }
    .cuadro1{ width: 100%} 
    .cuadro2{ width: 100%} }



@media screen and (max-width: 2008px){ 
    .cajauno {
    width: 43%;
    height: 90%;
    float: left;
    margin-top: 40px;
}
    .logoblanco {
    width: 43%;
    margin-left: 121px;
    margin-left: 250px;
        margin-top: 68px;}
    
    
    .cajados {
    width: 26%;
    height: 248px;
    float: left;
    margin-top: 136px;
 }


}


@media screen and (max-width: 1680px){ 
    .cajauno {
    width: 45%;
    height: 90%;
    float: left;
    margin-top: 40px;
}
    .logoblanco {
    width: 50%;
    margin-left: 121px;
    margin-left: 240px;
        margin-top: 68px;}
    
    
    .cajados {
    width: 26%;
    height: 248px;
    float: left;
    margin-top: 136px;
 }


}


@media screen and (max-width: 1600px){ 
    .cajauno {
    width: 48%;
    height: 90%;
    float: left;
    margin-top: 40px;
}
    .logoblanco {
    width: 50%;
    margin-left: 121px;
    margin-left: 240px;
        margin-top: 68px;}
    
    
    .cajados {
    width: 27%;
    height: 248px;
    float: left;
    margin-top: 136px;
 }


}


@media screen and (max-width: 1550px){ 
    .cajauno {
    width: 49%;
    height: 90%;
    float: left;
    margin-top: 40px;
}
    .logoblanco {
    width: 50%;
    margin-left: 121px;
    margin-left: 240px;
        margin-top: 68px;}
    
    
    .cajados {
    width: 28%;
    height: 248px;
    float: left;
    margin-top: 136px;
 }


}


@media screen and (max-width: 1513px){ 
 .cajados {
    width: 34%;
    height: 246px;
    float: left;
     margin-top: 136px;}
.logoblanco {
    width: 50%;
    margin-left: 121px;
    margin-left: 190px;
    margin-top: 68px;


}
.menu_dos {
    margin-left: 58px;}

}



@media screen and (max-width: 1370px){ 
 .cajados {
    width: 34%;
    height: 246px;
    float: left;
     margin-top: 136px;}
.logoblanco {
    width: 50%;
    margin-left: 160px;
 
    margin-top: 68px;


}
.menu_dos {
    margin-left: 58px;}

}



@media screen and (max-width: 1260px){ 
 .cajados {
    width: 34%;
    height: 246px;
    float: left;
     margin-top: 136px;}
.logoblanco {
    width: 50%;
    margin-left: 140px;
 
    margin-top: 68px;


}
.menu_dos {
    margin-left: 58px;}

}


@media screen and (max-width: 1150px){ 
 .cajados {
    width: 50%;
    height: 246px;
    float: left;
     margin-top: 136px;}
.logoblanco {
    width: 50%;
    margin-left: 110px;
 
    margin-top: 68px;


}
.menu_dos {
    margin-left: 58px;}

}


 @media screen and (max-width: 1020px){
    .boton{
        display: block;
    }
    .menu li{
        display: block;
        margin: 20px 0px;
        text-align: center;
    }
    .js .menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s;
    position: absolute;
    top: 115px;
    right: 50px;
    background-color: #FF5000;
}
    .js .menu a{
        padding: 5px 10px;
        color: #ded6c0;
    }
  .js .menu.menu-desplegado {
    max-height: 500px;
    margin-right: 60px;
    margin-top: 0px;
}

 }
















/* ----------- Responsive ----------- */






@media screen and (max-width: 1401px){
    .topBar{
        margin-bottom: 10px;
    }
    .header{
        min-height: 900px ;
    }
    .header2{
        min-height: 1000px;
        padding-top: 30px;
    }
    .leftbox, .rightbox, .infobox{
        float:;
    }
    
   
    
    .contenedortitles{  width: 90%;
        margin: 0px auto;
  ;}
    
     .contenedortitles2, .bloqueContainer{
        width: 90%;
        margin: 0px auto;
        padding: 10px;
    }
    h1{
        font-size: 41px;
    }
    h2{
        font-size: 24px;
    }
    
    .centralbox{
        padding: 120px 18px 0px 18px;
    }
    .infobox{
        width: 100%;
        margin-bottom: 30px;
    }
    .infoboxImage{
        width: 80px;
        position: static;
        margin: 0px auto;
    }
    .infoboxText{
        padding: 0px;
    }
    .footer{
        display: none;
    }
    .footer2{
        display: block;
    }
}

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

@media screen and (max-width: 1800px){      .fotos{ width: 100%;    }
    
@media screen and (max-width: 1541px){      .verduras{ margin-top:80px; width: 100%;}
@media screen and (max-width: 1390px){  .bloqueContainer { width: 80%;}  }
@media screen and (max-width: 1397px){  .contenedortitles{ width: 70%;}  }

@media screen and (max-width: 717px){  .contenedortitles{ width: 90%; }.bloqueContainer{   width: 100% }   .header2{min-height: 1170px; }
  }

@media screen and (max-width: 1500px){ .contenedortitles{ width:}   }
@media screen and (max-width: 1476px){      .verduras{ margin-top:90px; width: 100%;}

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

    @media screen and (max-width: 1290px){.cuadros{ margin-top: 100px;}} 
    
@media screen and (max-width: 1270px){  .leftbox, .rightbox{
        width: 100%;
        padding-top: 10px;
        min-height: 250px;
  }  
      .cuadros{ margin-top: 100px;}
  
  }

    
   
@media screen and (max-width: 1153px)  {  .cuadros{ margin-top: 300px;}} 

    
@media screen and (max-width: 1218px){      .fotos{ width: 100%;     margin-top: 30px;}
@media screen and (max-width: 1199px){      .verduras{ margin-top:200px; width: 100%;}    
    


@media screen and (max-width: 1067px){      .verduras{ margin-top:200px; width: 100%;}
@media screen and (max-width: 1047px){      .cuadros{ margin-top:500px;}

    @media screen and (max-width: 1000px){  .cuadros{ margin-top: 100px;}}   
    
    @media screen and (max-width: 1000px){ 
 .cajados {
    width: 50%;
    height: 246px;
    float: left;
     margin-top: 136px;}
.logoblanco {
    width: 50%;
    margin-left: 70px;
 
    margin-top: 68px;


}
.menu_dos {
    margin-left: 58px;}

}
    
    
    
@media screen and (max-width: 957px){      .verduras{ margin-top:300px; width: 100%;}

    
 @media screen and (max-width: 910px){ 
 .cajados {
    width: 50%;
    height: 246px;
    float: left;
     margin-top: 136px;}
.logoblanco {
    width: 50%;
    margin-left: 50px;
 
    margin-top: 68px;


}
.menu_dos {
    margin-left: 58px;}

}    
    
    
    
    
    @media screen and (max-width: 877px){      .cuadros{ margin-top:420px;}
@media screen and (max-width: 801px){
.foto1, .foto2, .foto3 {
    width: 100%;
    height: 400px;}    
    .cuadro2{ border-top: none;}
    


 .cajados {
    width: 50%;
    height: 122px;
    margin-top: 215px;
     float: none;}

.logoblanco {
    width: 50%;
    margin-left: 300px;
 
    margin-top: 0px;


}
.menu_dos {
    margin-left: 200px;
    float: none;
    text-align: center;
    width: 100%;}
    
    
    .cuadro1{ height: 400px;}
    
    .cajauno {
    height: 33%;
        width: 100%;}








}
@media screen and (max-width: 785px){      .verduras{ margin-top:300px; width: 100%;}
@media screen and (max-width: 741px){      .verduras{ margin-top: 300px; width: 100%;}
@media screen and (max-width: 672px){      .verduras{ margin-top: 450px; width: 100%;}

     
    @media screen and (max-width: 651px)  {
    
    .cajados {
    width: 42%;
    height: 122px;
    margin-top: 136px;
     float: none;}

.logoblanco {
    width: 50%;
    margin-left: 237px;
 
    margin-top: 0px;


}
.menu_dos {
    margin-left: 200px;
    float: none;
    text-align: center;
    width: 100%;}
    
    
    .cuadro1{ height: 400px;}
    
    .cajauno {
    height: 45%;
        width: 100%;}


    
    
    }
    
    
    @media screen and (max-width: 668px){  

        .fotos{width: 90%;}
        
        .cajados {
    width: 90%;
    height: 122px;
    margin-top: 136px;
     float: none;}

.logoblanco {
    width: 50%;
    margin-left: 242px;
 
    margin-top: 0px;


}
.menu_dos {
    margin-left: 50px;
    float: none;
    text-align: center;
    width: 100%;}
    
    
    .cuadro1{ height: 400px;}
    
    .cajauno {
    height: 50%;
        width: 100%;} 
    }} 

    
    
    @media screen and (max-width: 636px){      .verduras{ margin-top: 500px; width: 100%;}

    
    
   @media screen and (max-width: 567px)  {
    
    .cajados {
    width: 42%;
    height: 122px;
    margin-top: 136px;
     float: none;}

.logoblanco {
    width: 50%;
    margin-left: 190px;
 
    margin-top: 0px;


}
.menu_dos {
    margin-left: 170px;
    float: none;
    text-align: center;
    width: 100%;}
    
    
    .cuadro1{ height: 400px;}
    
    .cajauno {
    height: 50%;
        width: 100%;}


    
    
    }
    
    
    
    
    
    
    @media screen and (max-width: 615px){      .verduras{ margin-top: 500px; width: 100%;}   
@media screen and (max-width: 579px){      .verduras{ margin-top: 700px; width: 100%;}

    
    
    
    
    
    
    
    
    
    @media screen and (max-width: 444px){      .verduras{ margin-top:700px; width: 100%;}  
                                            .fotos{width: 90%;}
    
    
@media screen and (max-width: 500px){ .misiontexto, .objetivos{ font-size: 19px; text-align: justify;padding: 15px;} 
    p.nosotros{ font-size: 16px;line-height: 24px; text-align: justify; } 
    .verduras{ width: 100%; m}


} 

@media screen and (max-width: 554px){ .contenedortiles2{width: 80%;}}

        
 
        
        
        
        
        
        
        @media screen and (max-width: 435px){ .verduras{margin-top:690px; width: 100%;}
              .cajados {
    width: 42%;
    height: 122px;
    margin-top: 136px;
     float: none;}

.logoblanco {
    width: 50%;
    margin-left: 120px;
 
    margin-top: 0px;


}
.menu_dos {
    margin-left: 125px;
    float: none;
    text-align: center;
    width: 100%;}
    
    
    .cuadro1{ height: 400px;}
    
    .cajauno {
    height: 50%;
        width: 100%;}

    










}   

    
    
    
    @media screen and (max-width: 382px){ .verduras{margin-top:750px; width: 100%;}      
@media screen and (max-width: 377px){ .verduras{margin-top:750px; width: 100%;}    

 @media screen and (max-width: 375px){ .cajados {
    width: 42%;
    height: 122px;
    margin-top: 136px;
     float: none;}

.logoblanco {
    width: 50%;
    margin-left: 90px;
 
    margin-top: 0px;


}
.menu_dos {
    margin-left: 110px;
    float: none;
    text-align: center;
    width: 100%;}
    
    
    .cuadro1{ height: 400px;}
    
    .cajauno {
    height: 48%;
        width: 100%;} 
    }  }
        
    
@media screen and (max-width: 368px){ .verduras{margin-top:860px; width: 100%;}    
@media screen and (max-width: 368px){ .verduras{margin-top:860px; width: 100%;}
@media screen and (max-width: 342px){ .verduras{margin-top:910px; width: 100%;} 
    
    @media screen and (max-width: 334px){ .cajados {
    width: 42%;
    height: 122px;
    margin-top: 136px;
     float: none;}

.logoblanco {
    width: 50%;
    margin-left: 70px;
 
    margin-top: 0px;


}
.menu_dos {
    margin-left: 100px;
    float: none;
    text-align: center;
    width: 100%;}
    
    
    .cuadro1{ height: 400px;}
    
    .cajauno {
    height: 50%;
        width: 100%;} 
    }  }
    
    
    
    
    @media screen and (max-width: 332px){ .verduras{margin-top:950px; width: 100%;} 
    
    
    
    .cajados {
    width: 42%;
    height: 122px;
    margin-top: 136px;
     float: none;}

.logoblanco {
    width: 50%;
    margin-left: 60px;
 
    margin-top: 0px;


}
.menu_dos {
    margin-left: 90px;
    float: none;
    text-align: center;
    width: 100%;}
    
    
    .cuadro1{ height: 400px;}
    
    .cajauno {
    height: 50%;
        width: 100%;} 
    }
    
    
    
    
       @media screen and (max-width: 300px){ .verduras{margin-top:950px; width: 100%;} 
    
    
    
    .cajados {
    width: 60%;
    height: 122px;
    margin-top: 136px;
     float: none;}

.logoblanco {
    width: 50%;
    margin-left: 30px;
 
    margin-top: 0px;


}
.menu_dos {
    margin-left: 50px;
    float: none;
    text-align: center;
    width: 100%;}
    
    
    .cuadro1{ height: 400px;}
    
    .cajauno {
    height: 50%;
        width: 100%;} 
    }
    
    
    
    
    
/* ----------- Servicios ---------------------------------------------------------------------------- */