/* 
=============================================================================
=============================================================================
   <480px
============================================================================= 
============================================================================= 
*/
@media only screen and (max-width: 480px) {
    .section01{ background-size:auto 100%!important;}    
    .section04{ background-size:auto 100%!important;}
    #the .button-france{ width:35% !important;} 
	#sblogo{position:relative; top:0px; left:20px; margin-left:0; height:auto; margin-top:5px}
	#sblogo h2{font-size:1.1em}

	.gallinas .section01, .gallinas .section01.reverse, .vacas .section01, .vacas .section01.reverse, .cerdas .section01.reverse, .cerdas .section01{
	background-image: url('../images/sectionbg_white.jpg')
}
.white p, .white h2, .white span{color:#444 !important}

.hero_wrapper h1{top:20%; width:100%; margin-top:220px}

.hero_center img{width:100%}

.spiceslist{margin-top:20vh}
.selspice{display:block !important; width:100% !important; margin-bottom:2em}
.selspice a{display:inline-block; vertical-align: middle; width:150px; padding:0.5em 1em}
.selspice img{width:100px; margin-right:2em}
}







/* 
=============================================================================
=============================================================================
   480px
============================================================================= 
============================================================================= 
*/

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



/* --------------- header -------------------*/

#logo img, 
#header.sticky-header:not(.static-sticky):not(.sticky-style-2):not(.sticky-style-3) #logo img {
    height:93px;
	width:296px!important;
	}




/* --------------- Section 01 -------------------*/
.section01{ background-size:auto 100%;}    

.section01 .orn_bigf {
    background-position: center 84%;
    background-size:300px;
    }

/* --------------- Section 02 -------------------*/

.section02 h2.section_title {
    text-align:left;
    }

.section02 h2.section_title:after {
    left:0;
    }

.section02 .item .counter {
    float:left;
    text-align:right!important;
    width:140px;
    }

.section02 .item p {
    float:left;
    text-align:left;
    width:270px;
    padding:8px 0 0 20px;
    }


/* --------------- Section 03 -------------------*/

.section03 .badges p {
    padding:0;
    }

.experts .year_label h3 {
    font-size:26px;
    }

.experts .year_label .label {
    top:50px;
    }

.experts .oc-item {
    padding:0 50px;
    }

.owl-carousel .owl-nav [class*=owl-] {
    left:0;
    margin-top: -30px;
    width: 60px;
    height: 60px;
    line-height: 56px;
    font-size: 30px;
    }

.owl-carousel  .owl-nav .owl-next {
    left: auto;
    right: 0;
    }

/* --------------- Section 04 -------------------*/

    .section04{ background-size:auto cover;}
.section04 img {
    max-width:260px;
    margin-top:0;
  
    }

/* --------------- Section 05 -------------------*/

.section05 .feat_box .wrapper .tabs {
    padding: 20px 40px 0 40px;
    }

.section05 a.bot_masinfo {
     bottom:20px;
    }

.section05 .tab-content {
    padding-left:20px;
	padding-top:30px
    }

/* --------------- Section 06 -------------------*/

.section06 .bottle_module .bottle img {
    max-width:30%;
    }

/* --------------- Section 08 -------------------*/

.section08 .text p {
    padding-top:40px;
    font-size:24px;
    }


/* Modal +18 */

#the{position:fixed; width:100%; height:100vh; z-index:9999; top:0;background:rgba(255,255,255,0.6); display:block}
#the >div{width:80%;  background:#fff; margin:30vh auto; border:2px solid #a0824d; box-shadow:2px 2px 20px rgba(0,0,0,0.2); display:table}
#the >div > div{display:table-cell; padding:3em 1em 0.5em 1em; vertical-align:bottom; text-align:center}
#the p#alertas{color:#333333; text-align:center; font-size:1em; padding:0!important; margin-bottom: 0!important}
#the .buttoned{background:#a0824d;display:inline-block !important;padding:1em; font-size:0.9em; color:#333333; width:20% !important; margin:1em;font-weight:600; text-align:center; cursor:pointer}
#the .buttoned:hover{background:#333333; color:#a0824d}
#the .button-france{ width:25% !important;}    

} /* === End 480px === */

/* 
=============================================================================
=============================================================================
   768px
============================================================================= 
============================================================================= 
*/

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




/* --------------- Section 01 -------------------*/

.section01 .orn_bigf {
    background-position: center 80%;
    background-size:331px;
    }

.section01 img {
    padding:0;
    
    }

/* --------------- Section 02 -------------------*/

.section02 {
    padding: 0;
    }

.section02 .text {
    padding: 70px 0 0 0;
    }

.section02 .item   {
    clear:both;
    }

.section02 .item .counter {
    width:140px;
    }

.section02 .item p {
    width:280px;
    }

.section02 .feat_box {
    background-color:rgba(0,0,0,0.7);
    border:none;
    border-left:solid 15px rgba(0,0,0,0.3);
    border-right:solid 15px rgba(0,0,0,0.3);
    }

.section02 .feat_box .wrapper {
    border:none;
    border-left:dashed 1px #847d76;
    border-right:dashed 1px #847d76;
    padding:240px 20px 200px;
    }

/* --------------- Section 03 -------------------*/

.section03 .badges p { 
    padding:0 12px;
    }

.experts img {
    max-width:300px!important;
    margin-top:70px;
    }

/* --------------- Section 04 -------------------*/

.section04 img {
    padding:0;
    max-width:270px;
    margin-top:30%;
    }

/* --------------- Section 05 -------------------*/

.section05 .parallax {
    padding:0;
    }

.section05 .feat_box h2 {
    margin-bottom:10px;
    }

.section05 .feat_box {
    border:none;
    border-left:solid 15px rgba(0,0,0,0.3);
    border-right:solid 15px rgba(0,0,0,0.3);
    margin-left:30px;
    }

.section05 .feat_box .wrapper {
    border:none;
    border-left:dashed 1px #847d76;
    border-right:dashed 1px #847d76;
    padding:50px 20px 20px 20px;
    }

.section05 .feat_box .wrapper .tabs {
    padding: 20px 20px 0 10px;
    }

.section05 .legend {
    margin:280px 30px 30px;
    }

/* --------------- Section 06 -------------------*/

.section06 .bottle_module .bottle img {
    max-width:100%;
    margin-top:140px;
    }

/* --------------- Section 08 -------------------*/

.section08 .text p {
    padding:110px 0 0 20px;
    font-size:24px;
    }



/* --------------- Footer -------------------*/

#footer .logo_footer {
    text-align:left;
    }

#footer .logo_footer img {
    margin:0;
    }

#footer .legal_footer {
    text-align:right;
    margin-top:10px;
    }

#footer .social_footer {
    margin:110px 0 0;
    float:right;
    }

/* Modal +18 */

/*#the{position:fixed; width:100%; height:100vh; z-index:9999; top:0;background:rgba(255,255,255,0.6); display:block}
#the >div{width:30%;  background:#fff; margin:30vh auto; border:2px solid #a0824d; box-shadow:2px 2px 20px rgba(0,0,0,0.2); display:table}
#the >div > div{display:table-cell; padding:3em 1em 0.5em 1em; vertical-align:bottom; text-align:center}
#the p#alertas{color:#333333; text-align:center; font-size:1em}
#the .buttoned{background:#a0824d;display:inline-block !important;padding:1em; font-size:0.9em; color:#333333; width:20% !important; margin:1em;font-weight:600; text-align:center; cursor:pointer}
#the .buttoned:hover{background:#333333; color:#a0824d}*/


} /* === End 768px === */

/* 
=============================================================================
=============================================================================
   992px
============================================================================= 
============================================================================= 
*/








@media only screen and (min-width: 992px) {
/* 
=============================================================================
   Imagenes de Fondos
============================================================================= 
*/







/* --------------- header -------------------*/

body.stretched #header.full-header .container {
	width:970px!important;
	}

#logo img {
    margin:0 auto;
    }

/* --------------- Hero -------------------*/

.hero img {
    max-width:270px;
    }


/* --------------- Section 01 -------------------*/

.section01 .orn_bigf {
    background-position: center center;
    background-size:300px;
    }

.section01 .text {
    padding: 0 0 0 40px;
    }

/* --------------- Section 02 -------------------*/

.section02 .item p {
    width:500px; text-align:justify
    }

.section02 .feat_box {
    
    }

.section02 .feat_box .wrapper {
   
    }

.section02 img {

    }

/* --------------- Section 03 -------------------*/

.section03 .badges img {
    max-width:85%;
    }

.section03 .badges p { 
    padding:0;
    }

.experts img {
    margin-top:20px;
    }

/* --------------- Section 04 -------------------*/

.section04 .text {
    padding: 0 0 0 40px;
    }

/* --------------- Section 05 -------------------*/

.section05 .legend {
    margin:350px 90px 30px;
    }

/* --------------- Section 06 -------------------*/

.section06 .bottle_module .bottle img {
    max-width:90%;
    margin-top:80px;
    }


/* --------------- Section 08 -------------------*/

.section08 .text p {
    padding:130px 0 0 50px;
    font-size:30px;
    }

.section08 img {
    padding:0 15px;
    }

/* --------------- Footer -------------------*/

#footer .logo_footer span {
    position:absolute;
    margin:-46px 0 0 200px ;
    }

#copyrights {
    padding: 40px 0 20px;
    }

/* --------------- Modals -------------------*/

.modal-body {
    padding:40px 50px;
    }

/* Modal +18 */

#the{position:fixed; width:100%; height:100vh; z-index:9999; top:0;background:rgba(255,255,255,0.6); display:block}
#the >div{width:30%;  background:#fff; margin:30vh auto; border:2px solid #a0824d; box-shadow:2px 2px 20px rgba(0,0,0,0.2); display:table}
#the >div > div{display:table-cell; padding:3em 1em 0.5em 1em; vertical-align:bottom; text-align:center}
#the p#alertas{color:#333333; text-align:center; font-size:1em}
#the .buttoned{background:#a0824d;display:inline-block !important;padding:1em; font-size:0.9em; color:#333333; width:20% !important; margin:1em;font-weight:600; text-align:center; cursor:pointer}
#the .buttoned:hover{background:#333333; color:#a0824d}
#the .button-france{ width:28% !important;}    


} /* === End 992px === */


/* 
=============================================================================
=============================================================================
   1200px
============================================================================= 
============================================================================= 
*/

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

/* --------------- Common -------------------*/

h2.section_title {
    font-size:42px;
    line-height:44px;
    }

p {
    font-size:16px;
    }

/* --------------- header -------------------*/

body.stretched #header.full-header .container {
	width:1100px!important;
	}

/* --------------- hero -------------------*/

.hero .slider-parallax-inner {
    height:100%;
    }


/* --------------- Section 01 -------------------*/

.section01 .text {
    padding:60px 0 0 50px;
    }

.section01 h2.section_title {
    font-size:36px;
    line-height:40px;
    }

/* --------------- Section 02 -------------------*/

.section02 .feat_box .wrapper {
    }

.section02 .feat_box .counter span {
    font-size:110px;
    line-height:120px;
    }

.section02 .feat_box p span {
    font-size:40px;
    padding-bottom:15px;
    }

.section02 img {
    right:160px;
    }


/* --------------- Section 03 -------------------*/

.experts .year_label h3 {
    text-align:right;
    margin:50px 10px 10px;
    }

.experts .year_label .label {
    top:72px;
    left: 50px;
    }

/* --------------- Section 04 -------------------*/

.section04 .text {
    padding:10px 0 0 50px;
    }

/* --------------- Section 05 -------------------*/

.section05 .feat_box .wrapper .tabs {
    padding: 20px 40px 0 30px;
    }

.section05 .legend {
    margin:350px 100px 30px;
    }

/* --------------- Section 06 -------------------*/

.section06 .bottle_module .bottle img {
    max-width:90%;
    }

.section06 .lista_items {
    padding:0;
    }

/* --------------- Section 08 -------------------*/

.section08 .text p {
    font-size:36px;
    }

.section08 .text p span {
    padding-left:80px;
    }

.section08 img {
    padding:0 50px;
    }

/* --------------- Modal +18 -------------------*/

#the{position:fixed; width:100%; height:100vh; z-index:9999; top:0;background:rgba(255,255,255,0.6); display:block}
#the >div{width:30%;  background:#fff; margin:30vh auto; border:2px solid #a0824d; box-shadow:2px 2px 20px rgba(0,0,0,0.2); display:table}
#the >div > div{display:table-cell; padding:3em 1em 0.5em 1em; vertical-align:bottom; text-align:center}
#the p#alertas{color:#333333; text-align:center; font-size:1em}
#the .buttoned{background:#a0824d;display:inline-block !important;padding:1em; font-size:0.9em; color:#333333; width:20% !important; margin:1em;font-weight:600; text-align:center; cursor:pointer}
#the .buttoned:hover{background:#333333; color:#a0824d}
#the img{width:200px}

} /* === End 1200px === */

/* 
=============================================================================
=============================================================================
   1300px
============================================================================= 
============================================================================= 
*/

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


/* --------------- header -------------------*/

#logo img {
	position:absolute;
	}

body.stretched #header.full-header .container {
	width:100%!important;
	}
    
/* --------------- Hero Image -------------------*/

.hero_wrapper h1 {
    margin:-40px 0 0 0;
    }
.menu-france {padding: 39px 11px!important;}  
.menu-aleman {padding: 39px 11px!important;}  

} /* === End 1300px === */


/* 
=============================================================================
=============================================================================
   1600px
============================================================================= 
============================================================================= 
*/

@media only screen and (min-width: 1600px) {
    
/* --------------- header -------------------*/
    
.menu-france {padding: 39px 19px!important;} 
.menu-aleman {padding: 39px 11px!important;}  

    

/* --------------- Common -------------------*/

h2.section_title {
    font-size:48px;
    line-height:50px;
    }

/* --------------- Hero -------------------*/

.hero img {
	width:300px;
    max-width:400px;
    }



/* --------------- Section 01 -------------------*/

.section01 {
    padding:140px 0;
    } 

/* --------------- Section 02 -------------------*/

.section02 .feat_box .wrapper {
    padding:190px 50px 180px;
    }

.section02 .feat_box .counter span {
    font-size:130px;
    line-height:140px;
    }

.section02 .feat_box p span {
    font-size:48px;
    padding-bottom:15px;
    }

/* --------------- Section 03 -------------------*/

.section03  {
    padding:100px 0 10px;
    }

.section03 .badges {
    padding-bottom:60px;
    }

.experts {
    padding: 90px 0 80px;
    }

.experts .oc-item {
    padding:0;
    }

.owl-carousel .owl-nav [class*=owl-] {
    left:-150px;
    margin-top: -45px;
    width: 90px;
    height: 90px;
    line-height:86px;
    font-size: 100px;
    background:none;
    }

.owl-carousel  .owl-nav .owl-next {
    left: auto;
    right: -150px;
    }

.owl-carousel .owl-nav [class*=owl-]:hover {
    background:none!important;
    color:#cf9b44!important;
    }

/* --------------- Section 04 -------------------*/

.section04 {
    padding:140px 0;
    }

.section04 h2.section_title {
    font-size:42px;
    }
/* --------------- Section 05 -------------------*/

.section05 .feat_box h2 {
    font-size:40px;
    }

.section05 .feat_box .wrapper {
    padding:70px 20px 50px 20px;
    }

.section05 .legend {
    margin:410px 0px 30px 100px;
    }

/* --------------- Section 06 -------------------*/

.section06 {
    padding:30px 0;
    }

.section06 .bottle_module .bottle img {
    max-width:90%;
    margin-top:50%;
    }
    

/* --------------- Section 08 -------------------*/

.section08 {
    padding:50px 0 0px;
    }

.section08 .text p {
    padding: 165px 0 0 50px;
    }

.section08 img {
    padding:0;
    }

} /* === End 1600px === */


/* ============= High resolution display ============== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) {




}

/* 
=============================================================================
=============================================================================
   GRID 5 COLUMNAS 
=============================================================================
=============================================================================
*/

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
    }
 
.col-xs-15 {
    width: 20%;
    float: left;
    }
 
@media (min-width: 768px) {

.col-sm-15 {
    width: 20%;
    float: left;
    }
}
 
@media (min-width: 992px) {

.col-md-15 {
    width: 20%;
    float: left;
    }
}
 
@media (min-width: 1200px) {
.col-lg-15 {
    width: 20%;
    float: left;
    }
}

/* ==========================================================================
   breakpoint ms GRID =======================================================
============================================================================= */

.col-ms-1,
.col-ms-2,
.col-ms-3,
.col-ms-4,
.col-ms-5,
.col-ms-6,
.col-ms-7,
.col-ms-8,
.col-ms-9,
.col-ms-10,
.col-ms-11,
.col-ms-12 {
	position:relative; 
	padding-left:15px; 
	padding-right:15px;
	} 

@media (min-width: 480px) and (max-width: 767px) {
.mod-container {max-width:748px;} 
.col-ms-1,
.col-ms-2,
.col-ms-3,
.col-ms-4,
.col-ms-5,
.col-ms-6,
.col-ms-7,
.col-ms-8,
.col-ms-9,
.col-ms-10,
.col-ms-11 {float:left;}
.col-ms-1 {width:8.33333333%;}
.col-ms-2 {width:16.66666667%;}
.col-ms-3 {width:25%;}
.col-ms-4 {width:33.33333333%;}
.col-ms-5 {width:41.66666667%;}
.col-ms-6 {width:50%;}
.col-ms-7 {width:58.33333333%;}
.col-ms-8 {width:66.66666667%;}
.col-ms-9 {width:75%;}
.col-ms-10 {width:83.33333333%;}
.col-ms-11 {width:91.66666667%;}
.col-ms-12 {width:100%;}
}