/*
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";
@font-face { font-family: 'menu'; src: url('../fonts/site.ttf');}
@font-face { font-family: 'caracol'; src: url('../fonts/caracol.otf');}
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@font-face { font-family: 'footer'; src: url('../fonts/footer.otf');}


::selection { background-color: #dceb84; color: #54aa1c; }
::-moz-selection { background-color: #dceb84; color: #54aa1c; }
::-o-selection { background-color: #dceb84; color: #54aa1c; }
::-ms-selection { background-color: #dceb84; color: #54aa1c; }
::-webkit-selection { background-color: #dceb84; color: #54aa1c; }

*{ margin:0; padding:0; border:0; outline:0; color:auto; font-family: "caracol", Arial, Helvetica, sans-serif; box-sizing:border-box;}
html{background-color:#06723b; background: url(../../ww.jpg); background-repeat: no-repeat; background-size: cover;background-attachment: fixed; overflow-x: hidden;}

html, body { height:100%; width: 100%; line-height: 28px;  }
body {padding-top:80px;transition: padding 0.5s ease;  }
body.truncated {padding-top:80px; width: 100%;}
body.withoutscroll {overflow:hidden;}
/* 
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { 
html {overflow-x: hidden; }}

/* #### ####  */
h1, h1 *, h2, h2 *, h3, h3 * { font-family: "menu"; text-transform: uppercase; font-weight:normal; }
h1, h1 * {font-size:60px;line-height:58px;}
h2, h2 * {font-size:40px;line-height:43px;}
h3, h3 * {font-size:32px;line-height:37px;}
h4, h4 * {font-size:28px;line-height:31px;}
h5, h5 * {font-size:22px;line-height:25px;} 
h2, h3 {margin-bottom:10px;}

h5 span	{font-size:30px;line-height:25px;}


/* #### ####  */
li {list-style:none;}
a {text-decoration:none; color: white;}
p { margin-bottom:20px;}
p:last-child {margin-bottom:0;}
img	{vertical-align:middle;}
strong {font-weight:bold; font-size: 40px;}
em {font-style:italic;}
br {display:block;height:0;}
span{font-weight:bold;}
.small {font-size: 10px; line-height: 12px; text-align: center; color: auto; margin-top:20px; padding: 5px 0px; }



/* #### ####  */
input[type="text"], input[type="email"] {width:100%;height:36px;padding:0 10px;-webkit-appearance: none; -moz-appearance: none;appearance: none;}
input[type="submit"] {background: url(../../images/media/svg/back-btn.svg); color: white; font-family: "menu"; font-size: 14px;  height:36px; text-transform:uppercase; padding:0 20px; cursor:pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition:all 0.3s ease; }
input[type="submit"]:hover {/*background-color:#00863c;*/ background: url(../../images/media/svg/back-btn.svg); color:rgba(255, 208, 64, 1);}}
textarea {height:170px;padding:10px;resize:none;}

.clearfix {clear:both;display:block;height:0;}
.wrapper {/*background-color:rgba(200,0,0,0.1);*/width:940px;padding:0 10px;margin:0 auto;}
.flex {display:flex;}

.showOnScroll { opacity: 0; filter:alpha(opacity=0); transition: all 1s ease; }
.showOnScroll.disabled { opacity: 1; filter:alpha(opacity=100); }

.db-content h4 {margin-bottom: 10px;}
.db-content a {text-decoration: underline;}


/* #################### CUSTOM SWIPER #################### 
.swiper-pagination-bullet	{background-color:transparent; width:12px;height:12px;opacity: 1; filter: alpha(opacity=100);border:solid 2px #fff;margin:0 5px;}
.swiper-pagination-bullet-active	{background-color:#fff;}

.swiper-container.vertical .swiper-button-prev {background:url(../images/swiper-arrow-up.png) no-repeat center center; width:46px; left: 50%; margin-left: -23px;right: auto; top: 30px;}
.swiper-container.vertical .swiper-button-next {background:url(../images/swiper-arrow-down.png) no-repeat center center; width:46px; left: 50%; margin-left: -23px;right: auto; top:auto; bottom: 30px;}
*/

/* ##########################################  MASONRY ########################################## 
.box-list .grid-sizer,
.box-list .item { width: 50%; padding:5px; transition: all 0.4s ease; }
.box-list .grid-sizer {padding:0;}
.box-list .item {opacity:0;filter:alpha(opacity=0);}
.box-list .item.visible {opacity:1;filter:alpha(opacity=100);}
.box-list .item.highlight {width:100%;}
.box-list .item .external {display:block;width:100%;height:100%;position:relative;overflow:hidden;}
.box-list .item .content {border:solid 1px #cbcbcb;box-shadow:0 0 3px #cbcbcb;position:relative;height:100%;display:block;overflow:hidden;}
.box-list .item .icon {background:#0f5637  url(../images/sprite-30.png) no-repeat 0 0;width:30px;height:30px;position:absolute;top:10px;left:10px;border-radius:30px;}
.box-list .item.instagram .icon {background-position:-30px 0;}
.box-list .item.youtube .icon {background-position:-60px 0;}
.box-list .item.highlight .icon,
.box-list .item.no-image .icon {display:none;}
.box-list .item .image img {width:100%;}
.box-list .item .label {background-color:#0f5637;background-color:rgba(15,86,55,0.8);color:#fff;display:block;position:absolute;left:0;bottom:-100%;width:100%;padding:10px;transition: bottom 0.5s ease; }
.box-list .item:hover .label {bottom:0;}
.box-list .item.highlight .label {display:none;}

.box-list .item.no-image .label {position:inherit;bottom:inherit;}
.box-list .item.no-image:hover .label {}
 */

/* ##########################################  HEADER background-color:rgba(255, 208, 64, 1); ##########################################  */
.top-header { position: fixed; top: 0px; left: 0px; height: 30px; width: 100%; font-size: 12px; color: white; text-align: center; background-color:#06723b; padding-top: 0px; z-index: 9; }
.top-header a { color: white; padding: 5px 20px; }
.top-header-logo { position:relative; height: 100px; max-width: 1280px; width: 100%; background-color: none; margin: 0 auto; z-index: 999;}
.top-header-logo img {position: fixed; top: 0; margin-left: 120px; max-width: 1280px; width: 280px; margin-top: 15px;z-index: 999; }
 @media screen and (max-width: 520px) { .top-header a { padding: 5px 10px; }}

header { position: relative; background:url(../../images/media/svg/back-light.svg); height:137px; position:fixed; top:30px; left:0; width:100%; z-index:10; transition: height 0.2s ease; }
header.truncated {height:75px; background:url(../../images/media/svg/back-light.svg); opacity: 1;}
header.truncated .logo {text-align: center;}
header.truncated .logo img {margin-top:5px; }
header * {text-transform:uppercase;}
header .wrapper, 
header .flex,
header .col-left {height: 100%;}
header .flex {justify-content:space-between;align-items:center;}

header .logo {display:block;height:100%;width:181px; position:relative;text-align: center;}
header .logo img {height: 100%;width: auto; margin-top:11px; margin-left: 40px;}

header .col-right {display:flex;}
header li {height: 30px;}


nav {margin-right:30px;}
nav * { color: darkgreen; font-size:32px; font-family: "menu"; text-transform: uppercase;}

nav span { color: darkgreen; font-size:20px; font-family: "menu"; text-transform: uppercase; line-height: 26px;}
nav ul {display:flex;}
nav li { padding:0 10px;display:flex;align-items:center;}
nav li:not(:last-child) { border-right: solid 0px #0f5637;}
nav li a { display:block; line-height:18px; transition: color 0.3s ease;}
nav li a.active {color:#009844;border-bottom:solid 1px #009844;}
nav li a:hover {color:#009844;}

#header-languages { margin-right:30px;}
#header-languages * { color: #9a9a9a; font-size: 10px;}
#header-languages ul { display:flex; align-items:center; height: 0px;}
#header-languages li { height: 10px; padding:0 5px;}
#header-languages li:not(:last-child) { border-right:solid 1px #9a9a9a;}
#header-languages li a { line-height:10px; display:block;}
#header-languages li a:hover { text-decoration:underline;}

#header-social a,
#footer-social a {background:#0f5637  url(../../images/icon-facebook.png) no-repeat center center; background-size:20px 20px; display:inline-block; width:30px; height:30px;border-radius:30px;transition:all 0.3s ease;}
#header-social a:hover,
#footer-social a:hover {background-color:#00863c;}

#header-social a {background-size:30px 30px;}

#header-social a.btn-instagram,
#footer-social a.btn-instagram {background-image:url(../../images/icon-instagram.png);}


/* ########################################## BANNER ########################################## 

#banner {background-color:#1c1c1c; height:780px; max-width: 1280px; width:  100%; margin: 0 auto; left: 0px; padding-top: 50px;}
#banner .swiper-container {height:100%;}
#banner .swiper-slide {height: 100%;background-repeat:no-repeat;background-position:center center;background-size:contain;}
#banner .wrapper {position:relative;height:0;padding:0;}
#banner .swiper-pagination-bullets {bottom:40px;left: 25%;width: 400px;}

*/

/* ##########################################  HOME ##########################################  */
#home-container {margin-bottom:20px;}
#home-container .flex {justify-content:space-between;}
#home-container .col-left {width:540px;}
#home-container .col-right {width:380px;}
#home-products {background-color:#fff;width:100%;margin-top:-73px;padding:10px;position:relative;z-index:9;}

#home-products .swiper-container {height:1200px;}
#home-products .swiper-slide {height:300px;}
#home-products a {background-repeat:no-repeat;background-position:center center;background-size:cover;display:block;height:100%;}


/* ##########################################  CONTACTS ##########################################  */
#contacts-top { background-color:transparent; background-repeat:no-repeat; background-position:center center; background-size:cover; position:relative; width: 100%; max-width: 1280px; margin: 0 auto; height:600px; }


#contacts-top .base { background:#0e0c0c url(../../images/contacts-bases.png) no-repeat center bottom; background-size: cover; height:119px; position:absolute; bottom:0; width: 100%; max-width: 1280px; margin: 0 auto; z-index:1; }
#contacts-top .wrapper {height:100%;display:flex;align-items:center;position:relative;z-index:2;}

#form-contacts {width:360px;flex-grow: 0;flex-shrink: 0; flex-basis: 360px;}
#form-contacts h1, 
#form-contacts h3 {color:#fff;text-align:left; margin-bottom: 0px; line-height: normal; /*text-shadow: rgb(0, 0, 0) 0px 0px 3px;*/}

#form-contacts .box {margin-bottom:10px;}
#form-contacts .box-name {float:left;width:50%;padding-right:5px;}
#form-contacts .box-email {float:right;width:50%;padding-left:5px;}
#form-contacts .box-message textarea {width:100%; padding:10px;}

#form-contacts .name,
#form-contacts .email,
#form-contacts .message {background-color:rgba(255,255,255,0.9);}

#contacts-top .content {width:100%;height:100%;display:flex;align-items:flex-end;}
#contacts-top .content img {width:100%;}


/* #### ####  */
#contacts-bot .base { background:#0e0c0c url(../../images/contacts-bases.png) no-repeat center bottom; background-size: contain; height:120px; position:absolute; bottom:0; width: 100%; max-width: 1280px; margin: 0 auto; z-index:1; }


#contacts-bot {background-color:#00863c; padding:20px; font-family: "caracol"; width: 100%; max-width: 1280px; margin: 0 auto; background: white url(../../bottom-pattern.png); background-repeat: no-repeat;  background-position: bottom center; z-index: 99; 
/* -webkit-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); -moz-box-shadow: inset -1px -10px 5px 0px rgba(0,0,0,0.1); box-shadow: inset -1px 40px 50px 10px rgba(0,0,0,0.6);*/ }
#contacts-bot * {color:auto; }
#contacts-bot h1 {color:#fff; font-size:42px;line-height:42px; font-family: "menu";}
#contacts-bot h2 {color:#fff; font-size:42px;line-height:42px; font-family: "menu";}

#contacts-bot .wrapper {display:flex;align-items:flex-start;flex-direction:row;}
#contacts-bot .text {width:33.33%;}

#contacts-bot .text * span {font-size:80px;line-height:16px;display:block; margin-top: -10px;}

#contacts-bot .text-left { font-size:10px;line-height:13px; text-align: center; color:#fff; margin: 0;}
#contacts-bot .text-left h3 {font-size:20px;line-height:32px;font-family: "menu"; text-transform: uppercase; font-weight:normal; margin-bottom:0;}

#contacts-bot .text-center {font-size:10px; line-height:13px; color:#fff;}
#contacts-bot .text-center h3 {font-size:20px;line-height:32px;font-family: "menu"; text-transform: uppercase; font-weight:normal; margin-bottom:0;}

#contacts-bot .text-right p {font-size:15px;line-height:20px; font-family: "menu"; color:#fff; text-transform: none; font-weight:normal; margin-bottom:0;}
#contacts-bot .text-right h3 {font-size:38px;line-height:40px;font-family: "menu"; text-transform: uppercase; font-weight:normal; margin-bottom:0; color:#dceb84;}
#contacts-bot .text-right span {font-size:15px;line-height:20px; font-family: "menu"; color:#fff; text-transform: none; font-weight:normal; margin-top:120px;}


 @media screen and (max-width: 880px) { #contacts-bot { padding-top: 120px; }}



/* ########################################## FOOTER ########################################## background: url(../../bottom-pattern-1.png);*/
footer { position: relative; background-color:#126c18; height: 80px; max-width: 1280px; width: 100%; margin: 0 auto; }
footer * { font-size:9px; line-height: normal; padding: 0px 5px; }
footer .wrapper { position:relative; height:100%; display:flex; align-items:center; }
footer .col-left { width:100%; text-align:left; margin-bottom: 0px; padding: 0; }
footer .col-right { position:absolute; right:-20px; bottom: 10px; height:100%; display:flex; align-items:center; }
footer .col-right ul { display:flex; }
footer a { font-size:22px; line-height: 22px; color: white; margin-bottom: 0px; font-family: 'menu', sans-serif; text-transform: uppercase; font-weight: bold;}
footer a:hover { color: #54aa1c; }

body.withoutscroll footer { position:fixed; left:0; bottom:0; width:100%; z-index:10;}
body.withoutscroll footer .col-right { display:flex; }


.createdby-wrapper {  background-color: #126c18; position:relative; display:flex; height: 50px; align-items:center; }
.createdby-logo { position: absolute; right: 0px; opacity: 0.2; bottom: 10px; width: 110px; height:30px; display:block; background:transparent url('../../images/media/logos/brand.svg') center top no-repeat; }
.createdby-logo:hover { background-image: url('../../images/media/logos/brand.svg'); opacity: 0.7;}


@media screen and (max-width: 580px) {
footer { height: 200px; }
footer a { display: block; font-size:22px; line-height: 28px;  }     
.createdby-logo { left: 50%; bottom: 0px; transform: translate(-50%, -50%); text-align: center; }}