/* FONT FACE
-------------------------------------------------- */

@font-face {
  font-family: 'DIN Next LT Pro Condensed Bold';
  src: url('../fonts/din/DINNextLTPro-BoldCondensed.woff2') format('woff2'),
      url('../fonts/din/DINNextLTPro-BoldCondensed.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DIN Next LT Pro Condensed';
  src: url('../fonts/din/DINNextLTPro-Condensed.woff2') format('woff2'),
      url('../fonts/din/DINNextLTPro-Condensed.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

::selection {
  background: #84c341;
  color: #FFF;
}

::-moz-selection {
  background: #84c341;
  color: #FFF;
}

body {
  font-family: 'DIN Next LT Pro Condensed';

  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  text-rendering: optimizeLegibility;

  background: url(../images/cocoa_pattern.jpg) repeat;
  background-size: 250px 307px;
}

a {
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;

  outline: none !important;
}

p {
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .08em;
  line-height: 15px;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'DIN Next LT Pro Condensed Bold';
  color: #84c341; /*verde chor*/
}

h3 {
  letter-spacing: .06em;
  /*font-size: 30px;*/
   font-size: 16px;
}

.title {
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .2em;
}

.lead {
  font-size: 15px;
  line-height: 25px;
  margin-bottom: 25px;
}

.copy {
  font-family: 'DIN Next LT Pro Condensed Bold';
  color: #5c3917; /*marrom chor*/
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .3em;
}

button {
  font-family: 'DIN Next LT Pro Condensed Bold';
  border: none !important;
}

/* ANIMATION
-------------------------------------------------- */

.animation {
  visibility: hidden;
}

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-compact-wrapper .navbar-static-top {
  display: block;
}

.navbar-compact-wrapper {
  font-family: 'DIN Next LT Pro Condensed' !important;
  font-size: 20px;
  text-transform: uppercase;
}

.navbar-compact-wrapper .navbar {
  margin-bottom: -2px;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-compact-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-compact-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}

.navbar-compact-wrapper .navbar-header .navbar-brand {
  background: url(../images/chor_header.svg) no-repeat;
  background-position: center center;
  background-size: 80px auto;
  width: 110px;
  height: 60px;
}

.navbar-compact-wrapper .navbar-fixed-top {
  display: block;
}

header {
  display: none;
  text-transform: uppercase;
}

header #menu .menu-center {
  text-align: center;
}

header #menu ul a {
  color: #5c3917; /*marrom chor*/
}

header #menu ul a:hover {
  color: #84c341; /*verde chor*/
}

header #menu ul {
  margin: 0;
  padding: 0;
  display: inline-block;
  list-style: none;
  font-family: 'DIN Next LT Pro Condensed Bold';
  text-align: center;
}

header #menu ul li {
  float: left;
}

header #menu ul li a:hover {
  text-decoration: none;
}

header #menu .space {
  height: 1px;
  color: #84c341; /*verde chor*/
}

/* STRUCTURE
-------------------------------------------------- */

.div-table {
  width: 100%;
  display: table;
  height: 100%;
}

.cell {
  display: table-cell;
  vertical-align: middle;
}

.separator {
  width: 100px;
  height: 1px;
  background: rgba(202,158,103,1); /*marrom claro chor*/
  margin: 26px auto 30px auto;
  text-align: center;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 350px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 350px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 350px;
}

.carousel h1 {
  font-size: 22px;
  letter-spacing: .1em;
  color: #FFF;
  padding: 10px 0px;
  border-top: 2px solid #ca9e67;
  border-bottom: 2px solid #ca9e67;
}

.carousel p {
  display: none; /*invisivel*/
}

.carousel .container {
}

.carousel .carousel-caption {
  position: relative;
  display: inline-block;
  text-align: center;
}

.carousel .col-md-12 {
  height: 310px;
  text-align: center;
  padding-left: 0px;
}

.carousel .item {
  background-size: cover !important;
  background-position: center center !important;
}


/* GLOBAL SECTIONS
-------------------------------------------------- */

section {
  padding: 60px 0px;

  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  
  /*background-image: -moz-linear-gradient( 90deg, rgba(150,106,57, 1) 0%, rgba(235,216,191, 0) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgba(150,106,57, 1) 0%, rgba(235,216,191, 0) 100%);
  background-image: -ms-linear-gradient( 90deg, rgba(150,106,57, 1) 0%, rgba(235,216,191, 0) 100%);*/
}

#wa_btn {
  display: none;
}


/* CHOCOLATE DE ORIGEM
-------------------------------------------------- */

section#origem {
  background: url(../images/origem_bg.jpg);
  background-attachment: initial !important;
}

section#origem p.lead {
  color: #fff;
}

section#origem p.lead:last-child {
  margin-bottom: 0px;
}

/* BARRAS
-------------------------------------------------- */

section#barras,
section#barras * {
  padding: 0 !important;
}

section#barras img {
  width: 100%;
  height: auto;
}

/* CATÁLOGO
-------------------------------------------------- */

section#catalogo .container {
  padding-left: 25px;
  padding-right: 25px;
}

section#catalogo button {
  width: 100%;
  display: block;
  margin: 0 auto !important;
}

section#catalogo .col-xs-12 {
  padding-left: 10px;
  padding-right: 15px;
}

section#catalogo img {
  width: 100% !important;
  height: auto;
}

section#catalogo .choco-wrapper {
  margin-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
}


section#catalogo .choco .choco-separator {
  width: 30px;
  height: 1px;
  background: rgba(202,158,103,1); /*marrom claro chor*/
  margin: 10px 0 12px 0;
  text-align: center;
}

section#catalogo .choco .desc .choco-name {
    margin: 0;
    padding: 0;
}

section#catalogo .choco p {
  margin: 0;
}

section#catalogo .choco {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
  color: #FFF;
}

section#catalogo .choco .desc {
  padding: 13px;
  background: rgba(67,42,24,1);
  min-height: 150px; /*mesma altura para todos*/
}

/* SPECIAL SECTIONS
  -------------------------------------------------- */

section.special {
  position: relative;
  height: auto;
  background-position: left bottom !important;
}

section.special img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 200px;
  height: auto;
}

section.special .btn {
  position: relative;
  z-index: 2;
  margin-top: 50px;
  width: 100%;
  max-width: 200px;
  height: auto;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 12px 16px 10px 16px;
}

section.special .gradient {
  position: absolute; z-index: auto;
  top: 0; right: 0; left: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%);
}

/* bgs */
section#sj { background: url(../catalogo/sj/bg.png) no-repeat; }
section#bts { background: url(../catalogo/bts/bg.png) no-repeat; }
section#sc { background: url(../catalogo/sc/bg.png) no-repeat; }
section#oro { background: url(../catalogo/oro/bg.png) no-repeat; }
section#btf { background: url(../catalogo/btf/bg.png) no-repeat; }

/* DELIVERY
-------------------------------------------------- */

section#delivery {
  background: url(../images/delivery_city_bg.svg) center center no-repeat #f0e5da !important;
  background-size: contain !important;
}

section#delivery .container { max-width: 350px; }
section#delivery #delivery_text { max-width: 250px; }
section#delivery #delivery_btn { max-width: 200px; }

/* CONTATO
-------------------------------------------------- */

section#contato {
  background: url(../images/contato_bg.jpg);
  background-attachment: initial !important;
}

section#contato .separator {
  background: #FFF;
}

section#contato .title,
section#contato .lead {
  color: #5c3917; /*marrom chor*/
}

section#contato a {
  color: #5c3917; /*marrom chor*/ 
}

section#contato a:hover {
  color: #FFF;
  text-decoration: none;
}

section#contato #social {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: inline-block;
  margin: 0 auto;
}

section#contato #social li {
  float: left;
}

section#contato #social li a {
  text-align: center;
  display: block;
  width: 45px;
  height: 45px;
}

section#contato #social .icon {
  background: url(../images/social_sprite_.svg) no-repeat;
  background-size: 135px 90px;
}

section#contato #social #instagram {
  background-position: left top;
}

section#contato #social #instagram:hover {
  background-position: left bottom;
}

section#contato #social #facebook {
  background-position: -45px top;
}

section#contato #social #facebook:hover {
  background-position: -45px bottom;
}

section#contato #social #twitter {
  background-position: -90px top;
}

section#contato #social #twitter:hover {
  background-position: -90px bottom;
}

section#contato #social li.space {
  width: 20px;
  height: 1px;
}

/* FOOTER
-------------------------------------------------- */

footer {
  padding: 50px 0 40px 0;
  text-align: center;
}

/* RESPONSIVE CSS
--------------------------------------------------
--------------------------------------------------
-------------------------------------------------- */

@media (max-width: 480px) {
  section#catalogo .col-xs-6:nth-child(2n+1){
    clear:both;
  }
}

@media (min-width: 768px) {

  #wa_btn {
    display: block;
    z-index: 99;
    width: 180px;
    height: auto;
    position: fixed;
    right: -400px;
    bottom: 100px;
    transition: ease-in-out all .8s;
  }
  
  .wa_btn_in { right: -20px !important; }
  
  #wa_btn:hover { right: -2px !important; transition: ease-in-out all .2s; }
  
  #wa_btn a { display: block; }
  #wa_btn img { box-shadow: 10px 10px 50px rgba(0,0,0,.5); }

  /* TYPE
  -------------------------------------------------- */

  h3 {
    font-size: 25px;
  }

  p {
    font-size: 18px;
    letter-spacing: .09em;
    line-height: 23px;
  }

  .title {
    font-size: 37px;
    letter-spacing: .3em;
  }

  .lead {
    font-size: 25px;
    line-height: 40px;
    margin-bottom: 30px;
    letter-spacing: .2em;
  }

  .copy {
    font-family: 'DIN Next LT Pro Condensed Bold';
    color: #5c3917; /*marrom chor*/
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: .3em;
  }

  /* HEADER
  -------------------------------------------------- */

  header {
  }

  header .col-md-5,
  header .col-md-7 {
    height: 174px;
  }

  header #logo {
    background: url(../images/chor_logo.svg) center center;
    background-size: cover;
  }

  header #logo:before {
  }

  header {
    display: block;
  }

  header #menu:before {
  }

  /* CUSTOMIZE THE NAVBAR
  -------------------------------------------------- */

  header #menu ul {
    font-size: 20px;
  }

  header #menu .space {
    width: 15px;
  }

  /* STRUCTURE
  -------------------------------------------------- */

  .separator {
    width: 200px;
    height: 2px;
    margin: 56px auto 60px auto;
  }

  /* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */

  /* Carousel base class */
  .carousel {
    height: 696px;
  }

  /* Declare heights because of positioning of img element */
  .carousel .item {
    height: 696px;
  }
  .carousel-inner > .item > img {
    height: 696px;
  }

  .carousel h1 {
  padding: 40px 0px;
  font-size: 60px;
  letter-spacing: .1em;
  }

  .carousel .col-md-12 {
    height: 696px;
  }

  /* SECTIONS
  -------------------------------------------------- */

  section {
    padding: 60px 0px;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,.1);
  }

  /* ORIGEM
  -------------------------------------------------- */

  section#origem {
    background-attachment: fixed !important;
  }

  /* CATÁLOGO
  -------------------------------------------------- */

  section#catalogo button {
    width: 500px;
    display: block;
    margin: 0 auto !important;
    font-size: 25px;
  }

  section#catalogo img {
    width: 100% !important;
    height: auto;
  }

  section#catalogo .choco {
    box-shadow: 5px 5px 20px rgba(0, 0, 0, .3);
    color: #FFF;
  }

  section#catalogo .choco-wrapper {
    margin-bottom: 33px;
    padding-left: 15px;
    padding-right: 15px;
  }

  section#catalogo .category .col-sm-4:nth-child(3n+1) {
    clear: both;
  }

  .sub-title {
    font-size: 40px;
    height: 50px;
    text-align: center;
    border-bottom: 2px solid #84c341; /*verde chor*/
    margin-bottom: 50px;
  }

  section#catalogo .choco .desc {
    padding: 32px;
    background: rgba(67,42,24,1);
    min-height: 340px; /*mesma altura para todos*/
  }

  section#catalogo .choco .choco-separator {
    margin: 20px 0 22px 0;
  }

  /* SPECIAL SECTIONS
  -------------------------------------------------- */

  section.special {
    height: auto;
    background-attachment: fixed !important;
  }

  section.special img {
    width: 100%;
    max-width: 400px;
    height: auto;
  }

  section.special .btn {
    width: 100%;
    max-width: 400px;
    height: auto;
  }

  /* DELIVERY
-------------------------------------------------- */

section#delivery .container { max-width: 650px; }
section#delivery #delivery_text { max-width: 400px; }
section#delivery #delivery_btn { max-width: 300px; transition: all ease-in-out .2s; }
section#delivery #delivery_btn:hover { transform: scale(1.2); }

  /* CONTATO
  -------------------------------------------------- */

  section#contato {
    background-attachment: fixed !important;
  }

  section#contato #social li a {
    text-align: center;
    display: block;
    width: 90px;
    height: 90px;
  }

  section#contato #social .icon {
    background: url(../images/social_sprite_.svg) no-repeat;
    background-size: 270px 180px;
  }

  section#contato #social #instagram {
    background-position: left top;
  }

  section#contato #social #instagram:hover {
    background-position: left bottom;
  }

  section#contato #social #facebook {
    background-position: -90px top;
  }

  section#contato #social #facebook:hover {
    background-position: -90px bottom;
  }

  section#contato #social #twitter {
  background-position: -180px top;
}

section#contato #social #twitter:hover {
  background-position: -180px bottom;
}

  section#contato #social li.space {
    width: 30px;
    height: 1px;
  }

  /* FOOTER
  -------------------------------------------------- */

  footer {
    padding: 110px 0 100px 0;
  }

  footer a {
    color: #5c3917; /*marrom chor*/
  }

  footer a:hover {
    color: #84c341; /*verde chor*/
    text-decoration: none;
  }

  /* Navbar positioning foo */
  .navbar-compact-wrapper .navbar-static-top {
    display: none;
  }
  .navbar-compact-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-compact-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }

  /* TYPE
  -------------------------------------------------- */

  h3 {
    font-size: 30px;
  }

  .title {
    font-size: 47px;
  }

  p {
    font-size: 14px;
    line-height: 26px;
  }

  /* HEADER
  -------------------------------------------------- */
  
  header .col-md-5,
  header .col-md-7 {
    height: 228px;
  }

  /* CUSTOMIZE THE NAVBAR
  -------------------------------------------------- */

  header #menu .space {
    width: 40px;
  }

  /* SECTIONS
  -------------------------------------------------- */

  section {
    padding: 120px 0px;
  }

  section#catalogo .choco .desc {
    min-height: 300px; /*mesma altura para todos*/
  }

  /* SPECIAL SECTIONS
  -------------------------------------------------- */

  section.special {
    height: auto;
    background-position: center center !important;
  }

}

@media (min-width: 1200px) {

  /* HEADER
  -------------------------------------------------- */

  header .col-md-5,
  header .col-md-7 {
    height: 240px;
  }

  /* CUSTOMIZE THE NAVBAR
  -------------------------------------------------- */

  header #menu ul {
    font-size: 25px;
  }

  header #menu ul li {
  }

  header #menu .space {
    width: 50px;
  }

  /* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */

  /* Carousel base class */
  .carousel {
    height: 800px;
  }

  /* Declare heights because of positioning of img element */
  .carousel .item {
    height: 800px;
  }
  .carousel-inner > .item > img {
    height: 800px;
  }

  .carousel .col-md-12 {
    height: 800px;
  }
  
  .carousel .carousel-caption {
    position: relative;
    display: inline-block;
    text-align: left;
  }

  .carousel .col-md-12 {
    height: 696px;
    text-align: left;
  }

}