@charset "UTF-8";
/* colors */
/* spacing & sizes */
/* breakpoints */
/* @mixins */
/* icon menu - background-position */
/* category icon in images */
/* Styles */
html, body {
  width: 100%;
  height: 100%;
  font-family: "Flama";
  font-weight: 300;
  font-size: 62.5%; }

body {
  margin: 0;
  padding: 0;
  background: #f0f0f0; }

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

a {
  color: #000;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer; }
  a:hover {
    text-decoration: underline;
    color: #009fb4; }

b, strong {
  font-weight: 500; }

p {
  font-size: 1.7rem;
  line-height: 3rem;
  margin: 0 0 3.4rem 0; }
  p a {
    text-decoration: underline; }

.main {
  width: 100%;
  max-width: 1500px;
  min-height: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  background: #fff; }
  @media (max-width: 960px) {
    .main {
      padding: 0 1rem; } }

header {
  width: 100%;
  height: 100%;
  position: relative; }
  header .top-bar {
    padding: 5px 0px;
    height: 50px;
    /*
		a.oesp-estadao:before {
			@media (max-width: $breakpoint-w3){
				content: '\f001';
			}
		}
*/ }
    header .top-bar a.oesp {
      display: inline-block;
      background: url("../img/logo-link.png") no-repeat;
      background-size: auto 35px;
      background-position: top left;
      font-size: 0rem;
      width: 100px;
      height: 35px;
      top: -5px;
      cursor: pointer; }
      header .top-bar a.oesp:hover {
        text-decoration: none; }
    header .top-bar .social-top {
      display: inline-block;
      width: 75px;
      float: right; }
      header .top-bar .social-top a {
        display: inline-block;
        padding: 8px;
        font-size: 2.4rem;
        color: #009fb4; }
        header .top-bar .social-top a:hover {
          color: #000;
          text-decoration: none; }
  header .image-slider {
    width: 100%;
    overflow: hidden;
    font-size: 0; }
    header .image-slider .slide-right {
      width: 120%;
      min-width: 920px;
      margin-left: -17%; }
      @media (max-width: 480px) {
        header .image-slider .slide-right {
          margin-left: -25%; } }
    header .image-slider .slide-left {
      width: 120%;
      min-width: 920px;
      margin-left: 0; }
    header .image-slider .tile {
      width: calc(24.5% - 4px);
      padding-bottom: calc(25% - 4px);
      display: inline-block;
      background-size: 100% 100%;
      background-blend-mode: darken;
      -webkit-transition: 1s;
      transition: 1s;
      margin: 0 4px 4px 0; }
    header .image-slider img {
      width: 25%;
      padding: 0 4px 4px 0;
      display: block;
      float: left; }
  header h1 {
    color: #fff;
    width: 50rem;
    height: 22rem;
    font-size: 5.4rem;
    display: block;
    position: absolute;
    background: #000;
    margin: 0;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -55%);
    transform: translate(-50%, -55%); }
    @media (max-width: 960px) {
      header h1 {
        width: 33rem;
        height: 14.5rem; } }
    @media (max-width: 480px) {
      header h1 {
        width: 24rem;
        height: 12rem; } }
    header h1 span {
      text-transform: lowercase;
      position: absolute;
      display: block;
      font-size: 5.4rem;
      line-height: 1em;
      font-weight: 300;
      top: 50%;
      left: 50%;
      padding: 3.5rem 4rem 4rem 4rem;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
      @media (max-width: 960px) {
        header h1 span {
          font-size: 3.4rem; } }
      header h1 span b {
        display: block;
        text-transform: uppercase;
        font-weight: 600; }
  header .cat-icons .cat-title {
    text-align: center;
    font-weight: 600;
    font-size: 1.7rem;
    text-transform: uppercase;
    margin: 3rem auto 3rem auto; }
  header .cat-icons ul {
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
    font-size: 0;
    text-align: center; }
    header .cat-icons ul li {
      font-size: 1.15rem;
      display: inline-block; }
      header .cat-icons ul li a {
        display: block;
        background: url("../img/cat_icons.png") no-repeat;
        background-size: 70px auto;
        background-position: center 0px;
        height: 54px;
        width: 70px;
        overflow: visible;
        margin: 10px;
        font-size: 1.15rem;
        text-align: center;
        position: relative;
        -webkit-transition: background-position 0.2s;
        transition: background-position 0.2s; }
        @media (max-width: 960px) {
          header .cat-icons ul li a {
            background-size: 48px auto;
            height: 37px;
            width: 48px;
            font-size: 0.95rem; } }
        @media (max-width: 480px) {
          header .cat-icons ul li a {
            background-size: 30px auto;
            height: 23px;
            width: 30px;
            font-size: 0.75rem; } }
        header .cat-icons ul li a span {
          display: none;
          position: absolute;
          width: 90px;
          height: 44px;
          padding: 10px;
          text-transform: uppercase;
          text-align: center;
          font-weight: 400;
          color: #000;
          position: absolute;
          left: 50%;
          top: 0;
          -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
          border-radius: 2px; }
          @media (max-width: 960px) {
            header .cat-icons ul li a span {
              width: 78px;
              height: 33px;
              padding: 7px; } }
        header .cat-icons ul li a:hover span {
          display: block;
          background: #fff; }
      header .cat-icons ul li a.icon-cc {
        background-size: 70px auto;
        background-position: center 0px; }
        @media (max-width: 960px) {
          header .cat-icons ul li a.icon-cc {
            background-size: 48px auto;
            background-position: center 0px; } }
        @media (max-width: 480px) {
          header .cat-icons ul li a.icon-cc {
            background-size: 30px auto;
            background-position: center 0px; } }
        header .cat-icons ul li a.icon-cc:hover {
          background-position: center -54px; }
          @media (max-width: 960px) {
            header .cat-icons ul li a.icon-cc:hover {
              background-position: center -37px; } }
          @media (max-width: 480px) {
            header .cat-icons ul li a.icon-cc:hover {
              background-position: center -23px; } }
      header .cat-icons ul li a.icon-cp {
        background-size: 70px auto;
        background-position: center -108px; }
        @media (max-width: 960px) {
          header .cat-icons ul li a.icon-cp {
            background-size: 48px auto;
            background-position: center -74px; } }
        @media (max-width: 480px) {
          header .cat-icons ul li a.icon-cp {
            background-size: 30px auto;
            background-position: center -46px; } }
        header .cat-icons ul li a.icon-cp:hover {
          background-position: center -162px; }
          @media (max-width: 960px) {
            header .cat-icons ul li a.icon-cp:hover {
              background-position: center -111px; } }
          @media (max-width: 480px) {
            header .cat-icons ul li a.icon-cp:hover {
              background-position: center -69px; } }
      header .cat-icons ul li a.icon-cd {
        background-size: 70px auto;
        background-position: center -216px; }
        @media (max-width: 960px) {
          header .cat-icons ul li a.icon-cd {
            background-size: 48px auto;
            background-position: center -148px; } }
        @media (max-width: 480px) {
          header .cat-icons ul li a.icon-cd {
            background-size: 30px auto;
            background-position: center -92px; } }
        header .cat-icons ul li a.icon-cd:hover {
          background-position: center -270px; }
          @media (max-width: 960px) {
            header .cat-icons ul li a.icon-cd:hover {
              background-position: center -185px; } }
          @media (max-width: 480px) {
            header .cat-icons ul li a.icon-cd:hover {
              background-position: center -115px; } }
      header .cat-icons ul li a.icon-g {
        background-size: 70px auto;
        background-position: center -324px; }
        @media (max-width: 960px) {
          header .cat-icons ul li a.icon-g {
            background-size: 48px auto;
            background-position: center -222px; } }
        @media (max-width: 480px) {
          header .cat-icons ul li a.icon-g {
            background-size: 30px auto;
            background-position: center -138px; } }
        header .cat-icons ul li a.icon-g:hover {
          background-position: center -378px; }
          @media (max-width: 960px) {
            header .cat-icons ul li a.icon-g:hover {
              background-position: center -259px; } }
          @media (max-width: 480px) {
            header .cat-icons ul li a.icon-g:hover {
              background-position: center -161px; } }
      header .cat-icons ul li a.icon-k {
        background-size: 70px auto;
        background-position: center -432px; }
        @media (max-width: 960px) {
          header .cat-icons ul li a.icon-k {
            background-size: 48px auto;
            background-position: center -296px; } }
        @media (max-width: 480px) {
          header .cat-icons ul li a.icon-k {
            background-size: 30px auto;
            background-position: center -184px; } }
        header .cat-icons ul li a.icon-k:hover {
          background-position: center -486px; }
          @media (max-width: 960px) {
            header .cat-icons ul li a.icon-k:hover {
              background-position: center -333px; } }
          @media (max-width: 480px) {
            header .cat-icons ul li a.icon-k:hover {
              background-position: center -207px; } }
      header .cat-icons ul li a.icon-tm {
        background-size: 70px auto;
        background-position: center -540px; }
        @media (max-width: 960px) {
          header .cat-icons ul li a.icon-tm {
            background-size: 48px auto;
            background-position: center -370px; } }
        @media (max-width: 480px) {
          header .cat-icons ul li a.icon-tm {
            background-size: 30px auto;
            background-position: center -230px; } }
        header .cat-icons ul li a.icon-tm:hover {
          background-position: center -594px; }
          @media (max-width: 960px) {
            header .cat-icons ul li a.icon-tm:hover {
              background-position: center -407px; } }
          @media (max-width: 480px) {
            header .cat-icons ul li a.icon-tm:hover {
              background-position: center -253px; } }

.content {
  width: calc( 10 + (2*(100% - 60px)/3));
  max-width: 540px;
  position: relative;
  padding: 3.4rem 0;
  margin: 0 auto;
  font-size: 1.7rem;
  /*
	@media (max-width: $breakpoint-w1){	
		width: calc( 100% - 60px );
	}
*/ }
  @media (max-width: 720px) {
    .content {
      width: 85%; } }
  @media (max-width: 480px) {
    .content {
      width: 100%; } }
  .content .intro {
    margin: 3.4rem auto; }

.centered {
  text-align: center; }

.styled-select {
  background: url(../img/arrow.png) no-repeat 96% 0;
  height: 3.4rem;
  overflow: hidden;
  width: 24rem;
  border: 1px solid #ccc;
  display: block;
  margin: 0.5rem auto;
  vertical-align: middle; }

.styled-select select {
  background: transparent;
  border: none;
  font-size: 1.7rem;
  font-family: 'Flama';
  height: 3.4rem;
  padding: 5px;
  /* If you add too much padding here, the options won't show in IE */
  width: 26.8rem; }
  .styled-select select:focus {
    outline: 1px dotted #ccc;
    -webkit-box-shadow: none;
    box-shadow: none; }

#product_list {
  width: 100%;
  overflow: hidden;
  text-align: center;
  font-size: 0;
  margin: 6.8rem auto;
  padding-top: 5rem; }
  #product_list .cat-header {
    position: relative;
    font-size: 3.2rem;
    font-weight: 300;
    text-transform: uppercase; }
  #product_list .cat-header.hidden {
    display: none; }
  #product_list .cat-header img {
    margin-top: 0.8rem;
    margin-right: 0.8rem;
    width: auto;
    height: 4rem;
    vertical-align: text-bottom; }
  #product_list .product {
    width: calc((100% - 60px)/3);
    min-width: 320px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    font-size: 1.7rem;
    margin: 0 10px 6.8rem 10px;
    -webkit-transition: background-color 1s;
    transition: background-color 1s; }
    @media (max-width: 960px) {
      #product_list .product {
        width: calc((100% - 40px)/2); } }
    @media (max-width: 720px) {
      #product_list .product {
        width: 85%;
        margin: 0 10px 6.8rem 10px; } }
    @media (max-width: 480px) {
      #product_list .product {
        width: 100%;
        min-width: 120px;
        margin: 0 0 6.8rem 0; } }
    #product_list .product.hidden {
      display: none; }
    #product_list .product.selected img {
      -webkit-animation: pulse 0.8s 4;
      animation: pulse 0.8s 4; }
    #product_list .product .social-p {
      position: absolute;
      top: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.15);
      padding: 5px;
      width: 60px;
      height: 40px;
      z-index: 100; }
      #product_list .product .social-p a {
        display: inline-block;
        padding: 5px;
        text-decoration: none; }
        #product_list .product .social-p a:hover {
          color: #fff;
          text-decoration: none; }
    #product_list .product .product_img {
      width: 100%; }
    #product_list .product p {
      width: 100%;
      margin: 0; }
    #product_list .product p.cat-icon-img {
      background: transparent;
      position: absolute;
      display: block;
      width: 40px;
      height: 30px;
      top: 7px;
      left: 3px; }
      #product_list .product p.cat-icon-img span {
        background: url("../img/cat_icons.png") no-repeat;
        background-size: 30px auto;
        background-position: center 0px;
        position: absolute;
        display: block;
        width: 30px;
        height: 23px;
        top: 0;
        left: 0; }
        #product_list .product p.cat-icon-img span.icon-cc {
          background-size: 30px auto;
          background-position: center 0px; }
        #product_list .product p.cat-icon-img span.icon-cp {
          background-size: 30px auto;
          background-position: center -46px; }
        #product_list .product p.cat-icon-img span.icon-cd {
          background-size: 30px auto;
          background-position: center -92px; }
        #product_list .product p.cat-icon-img span.icon-g {
          background-size: 30px auto;
          background-position: center -138px; }
        #product_list .product p.cat-icon-img span.icon-k {
          background-size: 30px auto;
          background-position: center -184px; }
        #product_list .product p.cat-icon-img span.icon-tm {
          background-size: 30px auto;
          background-position: center -230px; }
    #product_list .product .product_title {
      font-size: 2.1rem;
      font-weight: 600;
      margin: 1.7rem 0; }
    #product_list .product .price_tag {
      font-weight: 300;
      margin: 1.7rem 0; }
      #product_list .product .price_tag:before {
        content: "Preço: ";
        font-weight: 600;
        display: inline; }
      #product_list .product .price_tag a {
        font-weight: 600;
        text-decoration: underline; }
      #product_list .product .price_tag p {
        display: inline; }

.credits {
  background: #f3f3f3; }
  .credits p {
    display: block;
    padding: 2rem;
    font-size: 1.3rem;
    line-height: 1.7rem;
    text-align: center; }

@-webkit-keyframes "moveleft" {
  0% {
    margin-left: 0%; }
  100% {
    margin-left: -50%; } }

@keyframes "moveleft" {
  0% {
    margin-left: 0%; }
  100% {
    margin-left: -50%; } }

@-webkit-keyframes "moveright" {
  0% {
    margin-left: -50%; }
  100% {
    margin-left: 0; } }

@keyframes "moveright" {
  0% {
    margin-left: -50%; }
  100% {
    margin-left: 0; } }

@-webkit-keyframes pulse {
  0% {
    opacity: 1; }
  50% {
    opacity: 0.4; }
  100% {
    opacity: 1; } }

@keyframes pulse {
  0% {
    opacity: 1; }
  50% {
    opacity: 0.4; }
  100% {
    opacity: 1; } }