/*
Project: Caracol Real® / Ementa Real - Produtos Alimentares
Version: 1.0.0
Assigned to: iam-trm:Creative Studio(PT)
Primary use: Caracol Real®
*/

/* @media (min-width:320px) {  smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
/*@media (min-width:480px) { smartphones, Android phones, landscape iPhone */ 
/*@media (min-width:600px) { portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 
/*@media (min-width:800px) { tablet, landscape iPad, lo-res laptops ands desktops */ 
/*@media (min-width:1025px) { big landscape tablets, laptops, and desktops */ 
/*@media (min-width:1281px) { hi-res laptops and desktops */ 

@charset "utf-8";
@media only screen and (max-width : 1200px) {	}

@media only screen and (max-width : 992px) {
.wrapper {width:auto; padding:0 10px;}

#product-detail .header .wrapper img{width:100%}
#product-detail .header .wrapper .info {width:50%}

/* ########################################## CONTACTS ##########################################  */
    
#contacts-top {min-height:650px;} 	
#contacts-top .wrapper {height:100%;}
#form-contacts {width:100%}
#contacts-bot .wrapper {display:block;}
#contacts-bot .text-left, #contacts-bot .text-center, #contacts-bot .text-right {width:100%; text-align:center; margin-bottom:20px;}
#contacts-bot .text-right {margin-bottom:0;}
}

@media only screen and (max-width : 768px) {
	body {padding-top:75px;}
	#secbanner {height:400px;}
	.standard-page .wrapper {width:auto;}
	

header .logo img {margin-top:5px; }
header .col-right nav {display:none;}
#mobile-menu {background:#0f5637;display:block !important; left:-280px; position:fixed;top:75px; height:calc(100% - 75px);  z-index:11; width:280px; transition: all 0.5s ease;}
#mobile-menu  ul {margin-top:20px}
#mobile-menu a {color:#fff; padding:20px; text-align:center; display:block; text-transform:uppercase; border-bottom:solid 1px #0A422A}
#mobile-menu.active { left:0; }
nav span { color: darkgreen; font-size:20px; font-family: "menu"; text-transform: uppercase; line-height: 26px; text-align: left;}	
    
    
/* ########################################## MOBILE MENU ##########################################  */
header {height:75px;}
#mobile-menu-switch {background:url(../../images/toggle-menu.png) no-repeat 0 0; display:block; height:40px; width:40px; position:absolute; left:18px; top:18px; transition: all 0.5s ease; z-index:10; }
#mobile-menu-switch.active {background-position:0 bottom; }
header .logo {margin-left:50px; text-align: left; width: 2px;}
header.truncated .logo {text-align: left; }
header .logo img {margin-top:5px; margin-left: 20px; }
header .col-right nav {display:none; }
    
#mobile-menu {background:#0f5637;display:block !important; left:-280px; position:fixed; top:80px; height:calc(100vh - 5px); z-index:9; width:280px; transition: all 0.5s ease;}
#mobile-menu ul {margin-top:30px; }
#mobile-menu a {color:#fff; padding:20px; text-align:left; display:block; font-size:32px;font-family: "menu";text-transform: uppercase; border-bottom:solid 1px #0A422A}
    
    
#mobile-menu li span {color: white;font-size:18px;font-family: "menu"; text-transform: uppercase; text-align: left;}
          
#mobile-menu a:hover {color:rgba(255, 208, 64, 1); padding:20px; text-align:left; display:block; font-size:32px;font-family: "menu";text-transform: uppercase; border-bottom:solid 1px #0A422A; width: 100%;}    
#mobile-menu.active { left:0; }
	
    
/* ########################################## HOME ##########################################  */
#banner {height:400px;}
#home-container .col-right {width:50%;}
#home-products .swiper-container {height:600px;}
	
/* ########################################## PRODUCTS ##########################################  */	
#product-detail .header .wrapper {min-height:710px;}
#product-detail .header .wrapper img{width:100%;}
#product-detail .header .mask {height:300px;}
#product-detail .header {min-height:0;}
#product-detail .header .wrapper .info {height:auto; top:350px; bottom:initial}
#product-detail .header .wrapper .info .title {height:auto; text-align:center; line-height:30px;}
#product-detail .header .wrapper .info .border {padding:10px 10px 5px 10px}
#product-detail .content .top .center .subtitle {font-size:22px;}
	
/* ########################################## CONTACTS ##########################################  */		

#contacts-top {min-height:850px;}
#contacts-top .wrapper {display:inherit; padding-top:50px;}
#form-contacts {margin:0 auto; position:relative; z-index:5;}
#contacts-top .content {display:inherit;width:auto; height:auto; position:absolute; bottom:0; text-align:center;}
#contacts-bot .text-right h3 {font-size:30px;}
#contacts-top .content img {width:70%}
    
#contact-top {min-height:250px;}
#contact-top .wrapper {display:inherit; padding-top:50px;}
#info-contact {margin:0 auto; position:relative; z-index:5; margin-left: 10px;}
   
#contact-top .content {display:inherit;width:auto; height:auto; position:absolute; bottom:0; text-align:center;}
	
/* ########################################## FOOTER ##########################################  */
    
footer .wrapper {justify-content: space-between;}
footer .col-left {width:auto; margin-bottom: 10px; padding: 0;}
footer .col-right {position:inherit; text-align:center; right: 0;}}

@media only screen and (max-width : 700px) {
#banner {max-height:765px; margin: 0 auto;}
#banner .swiper-pagination-bullets {width:100%}
#home-container .flex {flex-direction:column-reverse;}
#home-container .col-left {width:100%}
#home-container .col-right {width:100%;}
#home-products {padding:10px;}
#home-products .swiper-container {height:250px;}
.box-list .item {width:100%}
	
@media only screen and (max-width : 480px) { #banner {max-height:200px; margin: 0 auto; }}
    
/* ########################################## FOOTER ##########################################  */
    
footer { padding:15px 0; } 
footer .wrapper {display:block;}
footer .col-left {width:100%;text-align:center;}    
footer .col-right {text-align:center; display:block;}
#footer-languages, #footer-social {display:inline-block; vertical-align:middle;}
body.withoutscroll footer .col-right {display:block;}
     
/* ########################################## PRODUCTS ##########################################  */
    
#products-container .swiper-slide a {background-position:center bottom; }

#products-container .swiper-slide .wrapper {height: calc(100% - 66px);}
#products-container .swiper-container-vertical>.swiper-pagination-bullets {top:calc(50% - 48px)}
#product-detail .header .mask {height:150px;}
#product-detail .header .wrapper {min-height:0;}
#product-detail .header .wrapper .info {width:auto; height:auto; position:inherit; left:0;}
#product-detail .header .wrapper .info .border {padding:20px 10px 20px 10px}
#product-detail .header .wrapper .info .title {height:auto; text-align:center; line-height:30px;}
#product-detail .header .wrapper .info .description {margin:0 10px;}
#product-detail .content .wrapper {width:auto;}
#product-detail .content .top {display:block; height:auto;}
#product-detail .content .top .left {width:100%; flex-basis:initial; text-align:center;}
#product-detail .content .top .left img {width:50%; height:auto}
#product-detail .content .top .center {margin-left:0; display:block; padding:10px; text-align:center;}
#product-detail .content .top .center .title {margin-bottom:0;}
#product-detail .content .top .right {height:auto; width:100%; padding:10px; display:block; margin-left:0;}
#product-detail .content .top .right .circle {border:none; border-radius:0; height:auto; width:auto; display:block;}
#product-detail .content .top .right .circle .title, #product-detail .content .top .right .circle .subtitle {display:inline-block; border:none; margin:0;}
#product-detail .content .top .right .circle .subtitle br {display:none;}
#product-detail .content .center {display:block;}
#product-detail .content .center .left {width:100%; padding:30px 30px 0 30px; text-align:center;}
#product-detail .content .center .right {margin:0 auto;}
    

/* ########################################## ORIGIN ##########################################  */ 
    
#secbanner {height:300px;}
.db-content img {width:100%; float:none; margin:0 0 20px 0;}
.listed-images li {width:100%}
   

/* ########################################## CHRONOLOGY ##########################################  */ 
    
#chronology-timeline .list ul {padding-top:30px;}
#chronology-timeline .list li, #chronology-timeline .list li:nth-child(2n), #chronology-timeline .list li.odd {background:#fff; width:100%; padding:0; display:block;padding-bottom:20px;}
#chronology-timeline li .info, #chronology-timeline .list li:nth-child(2n) .info, #chronology-timeline .list li.odd .info { padding:0; text-align:center;  margin-bottom:0;}
#chronology-timeline li .point {position:inherit; display:inline-block;}
#chronology-timeline li .image, #chronology-timeline .list li:nth-child(2n) .image, #chronology-timeline .list li.landscape:nth-child(2n) .image, #chronology-timeline .list li.landscape.odd .image {width:100%; text-align:center;}
#chronology-timeline .list li.video {width:250px; padding:20px; text-align:center;}

}

@media only screen and (max-width : 600px) {
#product-detail .header .wrapper {min-height:0;}
#product-detail .header .wrapper .info {width:auto; height:auto; position:inherit; left:0; top:0;}
#product-detail .header .wrapper .info .border {padding:20px 10px 20px 10px}
#product-detail .header .wrapper .info .title {height:auto; text-align:center; line-height:30px;}
#product-detail .header .wrapper .info .description {margin:0 10px;}}

@media only screen and (max-width : 480px) { 
#info-contact h1 {font-size:67px; line-height: 62px;}
}