/**
*
* Animate.css
* From : http://daneden.me/animate/
*
**/
.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s; }

.animated.hinge {
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s; }

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3); }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05); }

  70% {
    -webkit-transform: scale(0.9); }

  100% {
    -webkit-transform: scale(1); } }

@-moz-keyframes bounceIn {
  0% {
    opacity: 0;
    -moz-transform: scale(0.3); }

  50% {
    opacity: 1;
    -moz-transform: scale(1.05); }

  70% {
    -moz-transform: scale(0.9); }

  100% {
    -moz-transform: scale(1); } }

@-o-keyframes bounceIn {
  0% {
    opacity: 0;
    -o-transform: scale(0.3); }

  50% {
    opacity: 1;
    -o-transform: scale(1.05); }

  70% {
    -o-transform: scale(0.9); }

  100% {
    -o-transform: scale(1); } }

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3); }

  50% {
    opacity: 1;
    transform: scale(1.05); }

  70% {
    transform: scale(0.9); }

  100% {
    transform: scale(1); } }

.bounceIn {
  -webkit-animation-name: bounceIn;
  -moz-animation-name: bounceIn;
  -o-animation-name: bounceIn;
  animation-name: bounceIn; }

@-webkit-keyframes bounceInU.flip-stitle {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px); }

  80% {
    -webkit-transform: translateY(10px); }

  100% {
    -webkit-transform: translateY(0); } }

@-moz-keyframes bounceInU.flip-stitle {
  0% {
    opacity: 0;
    -moz-transform: translateY(2000px); }

  60% {
    opacity: 1;
    -moz-transform: translateY(-30px); }

  80% {
    -moz-transform: translateY(10px); }

  100% {
    -moz-transform: translateY(0); } }

@-o-keyframes bounceInU.flip-stitle {
  0% {
    opacity: 0;
    -o-transform: translateY(2000px); }

  60% {
    opacity: 1;
    -o-transform: translateY(-30px); }

  80% {
    -o-transform: translateY(10px); }

  100% {
    -o-transform: translateY(0); } }

@keyframes bounceInU.flip-stitle {
  0% {
    opacity: 0;
    transform: translateY(2000px); }

  60% {
    opacity: 1;
    transform: translateY(-30px); }

  80% {
    transform: translateY(10px); }

  100% {
    transform: translateY(0); } }

.bounceInU.flip-stitle {
  -webkit-animation-name: bounceInUp;
  -moz-animation-name: bounceInUp;
  -o-animation-name: bounceInUp;
  animation-name: bounceInUp; }

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px); }

  80% {
    -webkit-transform: translateY(-10px); }

  100% {
    -webkit-transform: translateY(0); } }

@-moz-keyframes bounceInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-2000px); }

  60% {
    opacity: 1;
    -moz-transform: translateY(30px); }

  80% {
    -moz-transform: translateY(-10px); }

  100% {
    -moz-transform: translateY(0); } }

@-o-keyframes bounceInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-2000px); }

  60% {
    opacity: 1;
    -o-transform: translateY(30px); }

  80% {
    -o-transform: translateY(-10px); }

  100% {
    -o-transform: translateY(0); } }

@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px); }

  60% {
    opacity: 1;
    transform: translateY(30px); }

  80% {
    transform: translateY(-10px); }

  100% {
    transform: translateY(0); } }

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  -moz-animation-name: bounceInDown;
  -o-animation-name: bounceInDown;
  animation-name: bounceInDown; }

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px); }

  80% {
    -webkit-transform: translateX(-10px); }

  100% {
    -webkit-transform: translateX(0); } }

@-moz-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-2000px); }

  60% {
    opacity: 1;
    -moz-transform: translateX(30px); }

  80% {
    -moz-transform: translateX(-10px); }

  100% {
    -moz-transform: translateX(0); } }

@-o-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(-2000px); }

  60% {
    opacity: 1;
    -o-transform: translateX(30px); }

  80% {
    -o-transform: translateX(-10px); }

  100% {
    -o-transform: translateX(0); } }

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px); }

  60% {
    opacity: 1;
    transform: translateX(30px); }

  80% {
    transform: translateX(-10px); }

  100% {
    transform: translateX(0); } }

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  -moz-animation-name: bounceInLeft;
  -o-animation-name: bounceInLeft;
  animation-name: bounceInLeft; }

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px); }

  80% {
    -webkit-transform: translateX(10px); }

  100% {
    -webkit-transform: translateX(0); } }

@-moz-keyframes bounceInRight {
  0% {
    opacity: 0;
    -moz-transform: translateX(2000px); }

  60% {
    opacity: 1;
    -moz-transform: translateX(-30px); }

  80% {
    -moz-transform: translateX(10px); }

  100% {
    -moz-transform: translateX(0); } }

@-o-keyframes bounceInRight {
  0% {
    opacity: 0;
    -o-transform: translateX(2000px); }

  60% {
    opacity: 1;
    -o-transform: translateX(-30px); }

  80% {
    -o-transform: translateX(10px); }

  100% {
    -o-transform: translateX(0); } }

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px); }

  60% {
    opacity: 1;
    transform: translateX(-30px); }

  80% {
    transform: translateX(10px); }

  100% {
    transform: translateX(0); } }

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  -moz-animation-name: bounceInRight;
  -o-animation-name: bounceInRight;
  animation-name: bounceInRight; }

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@-moz-keyframes rotateIn {
  0% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(-200deg);
    opacity: 0; }

  100% {
    -moz-transform-origin: center center;
    -moz-transform: rotate(0);
    opacity: 1; } }

@-o-keyframes rotateIn {
  0% {
    -o-transform-origin: center center;
    -o-transform: rotate(-200deg);
    opacity: 0; }

  100% {
    -o-transform-origin: center center;
    -o-transform: rotate(0);
    opacity: 1; } }

@keyframes rotateIn {
  0% {
    transform-origin: center center;
    transform: rotate(-200deg);
    opacity: 0; }

  100% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1; } }

.rotateIn {
  -webkit-animation-name: rotateIn;
  -moz-animation-name: rotateIn;
  -o-animation-name: rotateIn;
  animation-name: rotateIn; }

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@-moz-keyframes rotateInUpLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(90deg);
    opacity: 0; }

  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1; } }

@-o-keyframes rotateInUpLeft {
  0% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(90deg);
    opacity: 0; }

  100% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  -moz-animation-name: rotateInUpLeft;
  -o-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft; }

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@-moz-keyframes rotateInDownLeft {
  0% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -moz-transform-origin: left bottom;
    -moz-transform: rotate(0);
    opacity: 1; } }

@-o-keyframes rotateInDownLeft {
  0% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -o-transform-origin: left bottom;
    -o-transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  -moz-animation-name: rotateInDownLeft;
  -o-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft; }

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@-moz-keyframes rotateInUpRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1; } }

@-o-keyframes rotateInUpRight {
  0% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  -moz-animation-name: rotateInUpRight;
  -o-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight; }

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@-moz-keyframes rotateInDownRight {
  0% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(90deg);
    opacity: 0; }

  100% {
    -moz-transform-origin: right bottom;
    -moz-transform: rotate(0);
    opacity: 1; } }

@-o-keyframes rotateInDownRight {
  0% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(90deg);
    opacity: 0; }

  100% {
    -o-transform-origin: right bottom;
    -o-transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  -moz-animation-name: rotateInDownRight;
  -o-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight; }

/**
*
* Responsive list
*
**/
.responsive {
  width: 100%;
  height: 100%;
  background: #fff;
  color: #434343;
  font-family: 'natura', sans-serif !important;
}
ul.flip-content , ol.flip-content{
  list-style: none;
  margin: 0;
  padding: 0;
}

.flip-content {
  float: left;
  width: 100%;
  height: 310px;
  }
  .flip-content img {
    width: 100%;
    height: 101%; }
  .flip-content li {
    float: left;
    border-bottom: 0px solid transparent;
    border-left: 0px solid transparent;
    width: 12.5%;
    height: 100%;
    position: relative;
    overflow:hidden;
    /* Colors Hover */
    }
    .flip-content li:hover {
      cursor: pointer; }
      .flip-content li:hover .card-front {
        -webkit-transform: rotateX(50deg);
        -moz-transform: rotateX(50deg);
        -ms-transform: rotateX(50deg);
        -o-transform: rotateX(50deg);
        transform: rotateX(50deg);
        -webkit-transform: perspective(1000) rotateX(50deg);
        -moz-transform: perspective(1000) rotateX(50deg);
        -ms-transform: perspective(1000) rotateX(50deg);
        -o-transform: perspective(1000) rotateX(50deg);
        transform: perspective(1000) rotateX(50deg); }
      .flip-content li:hover .card-back {
        z-index: 10;
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
        -o-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform: perspective(1000) rotateX(0deg);
        -moz-transform: perspective(1000) rotateX(0deg);
        -ms-transform: perspective(1000) rotateX(0deg);
        -o-transform: perspective(1000) rotateX(0deg);
        transform: perspective(1000) rotateX(0deg); }
        .flip-content li .card-back{
          
        }
    .flip-content #ekos-acai .card-back{
      background: url(/content/files/content/Design/img/nav-ekos/flip-img-cat-acai-hover.jpg);
      background-size: cover;
      background-position: bottom left;
    }
    .flip-content #ekos-andiroba .card-back {
      background: url(/content/files/content/Design/img/nav-ekos/flip-img-cat-andiroba-hover.jpg);
      background-size: cover;
      background-position: bottom left;      
    }
    .flip-content #ekos-buriti .card-back {
      background: url(/content/files/content/Design/img/nav-ekos/flip-img-cat-buriti-hover.jpg);
      background-size: cover;
      background-position: bottom left;
    }
    .flip-content #ekos-cacau .card-back {
      background: url(/content/files/content/Design/img/nav-ekos/flip-img-cat-cacau-hover.jpg);
      background-size: cover;
      background-position: bottom left;      
    }
    .flip-content #ekos-castanha .card-back {
      background: url(/content/files/content/Design/img/nav-ekos/flip-img-cat-castanha-hover.jpg);
      background-size: cover;
      background-position: bottom left;
    }
    .flip-content #ekos-maracuja .card-back {
      background: url(/content/files/content/Design/img/nav-ekos/flip-img-cat-maracuja-hover.jpg);
      background-size: cover;
      background-position: bottom left;
    }
    .flip-content #ekos-murumuru .card-back {
      background: url(/content/files/content/Design/img/nav-ekos/flip-img-cat-murumuru-hover.jpg);
      background-size: cover;
      background-position: bottom left;
    }
    .flip-content #ekos-pitanga .card-back {
      background: url(/content/files/content/Design/img/nav-ekos/flip-img-cat-pitanga-hover.jpg);
      background-size: cover;
      background-position: bottom left;
    }
    .flip-content li:first-child, .flip-content li:last-child {
      background-color: transparent; }
  .flip-content .card-front,
  .flip-content .card-back {
    text-align: right;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 400ms;
    -moz-transition: -moz-transform 400ms;
    -o-transition: -o-transform 400ms;
    transition: transform 400ms;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    }
  .flip-content #ekos-acai .card-front .flip-title {
    background: rgba(105,52,109,1);
  }
  .flip-content #ekos-acai .card-front .flip-stitle {  
    background: rgba(105,52,109,0.6);
  }
  .flip-content #ekos-andiroba .card-front .flip-title {
    background: rgba(154,162,57,1);
  }
  .flip-content #ekos-andiroba .card-front .flip-stitle {  
    background: rgba(154,162,57,0.6);
  }  
  .flip-content #ekos-buriti .card-front .flip-title {
    background: #fe4400;
  }
  .flip-content #ekos-buriti .card-front .flip-stitle {  
    background: rgba(254,68,0,0.6);
  }    
  .flip-content #ekos-cacau .card-front .flip-title {
    background: #763c24;
  }
  .flip-content #ekos-cacau .card-front .flip-stitle {  
    background: rgba(118,60,36,0.6);
  }  
  .flip-content #ekos-castanha .card-front .flip-title {
    background: #bb3530;
  }
  .flip-content #ekos-castanha .card-front .flip-stitle {  
    background: rgba(187,53,48,0.6);
  }  
  .flip-content #ekos-maracuja .card-front .flip-title {
    background: #9ca801;
  }
  .flip-content #ekos-maracuja .card-front .flip-stitle {  
    background: rgba(156,168,0,0.6);
  }    
  .flip-content #ekos-murumuru .card-front .flip-title {
    background: #cdb49d;
  }
  .flip-content #ekos-murumuru .card-front .flip-stitle {  
    background: rgba(205,180,157,0.6);
  }    
  .flip-content #ekos-pitanga .card-front .flip-title {
    background: #fe9f05;
  }
  .flip-content #ekos-pitanga .card-front .flip-stitle {  
    background: rgba(254,159,5,0.6);
  }                    
  .flip-content .card-front {
    -webkit-transform: perspective(1000) rotateX(0);
    -moz-transform: perspective(1000) rotateX(0);
    -ms-transform: perspective(1000) rotateX(0);
    -o-transform: perspective(1000) rotateX(0);
    transform: perspective(1000) rotateX(0);
    z-index: 9;
    }
  .flip-content .card-back {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    z-index: 8; }
.flip-content .flip-title {
    font-size: 28px;
    float: right;
    width: 100%;
    margin-bottom: 10px;
    text-transform: uppercase;
    margin-right: 20px;
    margin-top: 20px;
    background: rgba(10,10,10,0.9);
    padding: 10px 5px;
    color:#fff;
    }
.flip-content .card-back .flip-title {
    font-size: 20px;
    margin-top: 100%;
    text-align: right;
    margin-right: 0;
    padding: 5px;
    margin-left: 20px;
    width: 80%;
    margin-bottom: 0;
}
    .flip-content .flip-title b {
      float: right;
      width: 55%; }
    .flip-content .flip-title a {
      color:#fff;
      text-decoration: none;
    }

.flip-content .flip-stitle {
    line-height: 1.3em;
    color: #fff;
    width: 90%;
    float: left;
    margin-left: 20px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
    text-align: left;
    padding: 5px;
}

.close {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-size: 20px;
  padding: 10px 20px; }

.responsive.active {
  width: 100% !important;
  height: 100% !important; }
  .active .all.flip-content {
    position: absolute;
    left: 10px;
    top: 20px; }
    .active .all.flip-content h1 {
      font-size: 80px;
      width: 50%; }

@media (min-width: 749px) and (max-width: 1280px) {
  .flip-content .flip-title {
    font-size: 22px; }
  .flip-content .flip-stitle {
    font-size: 13px; }
  .flip-content li {
    width: 25%;
    height: 50%;}
  .flip-content .card-back .flip-title {
      margin-top: 50%;
      width: 50%;
  }   
  .flip-content {
    height: 450px;
} 
  .flip-content .flip-stitle {
    font-size: 15px;
    width: 100%;
    padding: 5% 10%;
    margin-left: 0;
    box-sizing: border-box;
    }
    .responsive img.fr-dii {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}
  }

@media screen and (max-width: 750px) {
  ul.flip-content {
    height: 100% !important;
  }
  .flip-content li {
    width: 49.7% !important;
    height: 300px !important;
}
.responsive img.fr-dii {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}
  .flip-content .flip-stitle {
    font-size: 15px;
    width: 100%;
    padding: 5% 10%;
    margin-left: 0;
    box-sizing: border-box;
    }
}

@media (min-width: 440px) and (max-width: 750px) {
  .flip-content .flip-title {
    font-size: 22px; }
  .flip-content .flip-stitle {
    font-size: 13px; }
  .flip-content li {
    width: 49.7%;
    height:50%; }
  .flip-content .card-back .flip-title {
      margin-top: 40%;
      width: 50%;
  } 
  }
@media (max-width: 439px) {
  .flip-content .flip-title {
    font-size: 20px;
    margin-top: 10px;
    margin-right: 0;
    text-align: center;
    padding: 10px 0;
    }

  .flip-content li {
    width: 50% !important;
    height: 300px !important;
    }
  .flip-content .card-back .flip-title {
      margin-top: 0;
      width: 80%;
  }
.flip-content {
  float: left;
  height: 100%;
  margin-bottom:10% !important;
  }
 .flip-content .card-back .flip-title {
    font-size: 20px;
    margin-top: 62%;
    text-align: center;
    margin-right: 0;
    padding: 20px 0;
    margin-left: 0px;
    width: 100%;
    margin-bottom: 0;
    bottom: 50% !important;
    background-color: rgba(0,0,0,0.7);
}
.flip-content .card-front {
    /* z-index: 0; */
}


}
@media (max-height: 450px) {
  .flip-content .flip-title {

    font-size: 22px; }
    .flip-content .flip-title b {
      width: 100%; }
  .flip-content li {
    width: 25%; } }

@media screen and (min-width: 1921px) {
  ul.flip-content  {
    height: 400px !important;
}
}