/*-------------------------------------------------------------------------
LAYOUT - SIA (modern browsers)

Version:    1.0 - 2013
author:     Burocratik (alexandre r. gomes)
email:      alex@burocratik.com
website:    http://www.burocratik.com
-------------------------------------------------------------------------*/
@import url(body.css);

/*-----------------------------------------------------------------------*/
html,
body {
  background: #ede8df url(../imgs/bg-main-dark.png) repeat;
}
#headerBg .bg {
  background: #000000 url(../imgs/products-header-bg.jpg) no-repeat center top;
}
#wrapperFooter {
  background: none;
  margin-top: 0;
  padding-top: 100px;
  height: 150px;
}
.mobile #wrapperFooter {
  z-index: 600;
}

/*-------------------------------------------------------------------------
=INFO
-------------------------------------------------------------------------*/
#info {
  position: relative;
  width: 100%;
  min-height: 130px;
  z-index: 600;
  padding: 0;
  background: transparent url(../imgs/bg-main-top.png) repeat-x left top;
}
#info .bolas {
  position: absolute;
  top: -84px;
  text-align: center;
  display: table;
  width: 100%;
  z-index: 50;
}
#info .bolas div {
  height: 208px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
#info p {
  display: inline-block;
  z-index: 10;
  -webkit-transition: margin 0.3s ease;
  transition: margin 0.3s ease;
}
#info p.grey {
  margin-left: -30px;
  z-index: 8;
}
#info .bolaTop:hover {
  margin: auto 40px auto auto;
}
#info .bolaTop.grey:hover {
  margin: auto 40px auto 10px;
}

/*-------------------------------------------------------------------------
=clients
-------------------------------------------------------------------------*/
#clients {
  position: relative;
  background: #ede8df url(../imgs/bg-main.png) repeat;
  padding-bottom: 100px;
  -webkit-backface-visibility: hidden; /* BUG webkit fliquers before animation + 3d accelaration */
}
#clients h2 {
  padding-top: 61px;
}

#clients .clientsIds {
  display: block;
  position: relative; /*float: left;*/
  width: 1100px;
  height: 260px;
  margin: 70px 0 70px -40px;
}
@media only screen and (max-width: 1100px) {
  #clients .clientsIds {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
  }
}

#clients .clientsIds li {
  display: block;
  position: relative;
  float: left;
  height: 80px;
  text-indent: -5555px;
  margin-bottom: 50px;
  background: url(../imgs/products-logotipos-clientes.png) no-repeat left top;
  background-size: 217px auto;
}
#clients .clientsIds li.continente {
  width: 217px;
  background-position: 0 0;
  margin-right: 87px;
}
#clients .clientsIds li.pdoce {
  width: 161px;
  background-position: 0 -80px;
  margin-right: 76px;
}
#clients .clientsIds li.inter {
  width: 215px;
  background-position: 0 -160px;
  margin-right: 78px;
}
#clients .clientsIds li.mini {
  width: 86px;
  background-position: 0 -240px;
  margin-right: 55px;
}
#clients .clientsIds li.dia {
  width: 91px;
  background-position: 0 -320px;
  margin-right: 0px;
}
#clients .clientsIds li.elec {
  width: 217px;
  background-position: 0 -400px;
  margin-right: 103px;
  margin-left: 93px;
}
#clients .clientsIds li.makro {
  width: 124px;
  background-position: 0 -480px;
  margin-right: 134px;
}
#clients .clientsIds li.lidl {
  width: 80px;
  background-position: 0 -560px;
  margin-right: 92px;
}
#clients .clientsIds li.netto {
  width: 107px;
  background-position: 0 -640px;
  margin-right: 81px;
}
#clients .clientsIds li.auchan {
  width: 132px;
  background-position: 0 -720px;
  margin-right: 0px;
}

/*-------------------------------------------------------------------------
=BRANDS
-------------------------------------------------------------------------*/
#brands {
  background: url(../imgs/bg-main-dark-top-products.png) repeat-x;
  -webkit-backface-visibility: hidden; /* BUG webkit fliquers before animation + 3d accelaration */
}
#brands .new {
  display: table;
  position: absolute;
  left: 50%;
  top: 0;
  width: 150px;
  height: 150px;
  text-align: center;
  margin: 10px 0 0 86px;
  font: normal 600 15px/19px "Idlewild A", "Idlewild B", Helvetica, Arial,
    sans-serif;
  color: #fff;

  display: none;
}
#brands .new strong {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table-cell;
  color: #fff;
  z-index: 5;
  vertical-align: middle;
}
#brands .new span.bg {
  display: block;
  position: absolute;
  width: 150px;
  height: 150px;
  top: 0;
  left: 0;
  z-index: 1;
  border-radius: 214px;
  background: #fa040d;
}

.weight {
  display: table;
  position: absolute;
  right: 21px;
  bottom: 77px;
  width: 53px;
  height: 53px;
  text-align: center;
  margin: 0;
  font: normal 500 16px/16px "Whitney A", "Whitney B", Helvetica, Arial,
    sans-serif;
  color: #fff;
}
.weight.bigsize {
  right: 50%;
  bottom: 25px;
  margin: 0 -168px 0 0;
}
.weight.n2 {
  bottom: 140px;
}
.weight.n3 {
  bottom: 186px;
}
.weight.bigsize.n2 {
  bottom: 70px !important;
}
#marca-main2 .weight.bigsize.n2 {
  bottom: 87px !important;
}
.list-douradas .weight {
  right: -7px;
  bottom: 42px;
}
#marca-main2 .weight.bigsize {
  bottom: 47px;
  margin: 0 -172px 0 0;
}
.list-douradas .weight.n2 {
  bottom: 85px;
}
.list-douradas .weight.n3 {
  bottom: 130px;
}
#listEnd .weight {
  right: 108px;
  bottom: 72px;
}
#listEnd .weight.n2 {
  bottom: 116px;
}
#listEnd .weight.n3 {
  bottom: 160px;
}

.weight strong {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table-cell;
  color: #fff;
  z-index: 5;
  vertical-align: middle;
  padding: 3px 0 0 1px;
}
.weight span.bg {
  display: block;
  position: absolute;
  width: 53px;
  height: 53px;
  top: 0;
  left: 0;
  z-index: 1;
  border-radius: 53px;
  background: #e19a24;
  -webkit-box-shadow: 1px 2px 0 0px rgba(229, 142, 36, 1);
  box-shadow: 1px 2px 0 0px rgba(229, 142, 36, 1);
}

/*-------------------------------------------------------------------------
=content
-------------------------------------------------------------------------*/
section h3 span.sombraBig {
  display: block;
  position: absolute;
  bottom: -50px;
  left: 50%;
  width: 380px;
  height: 43px;
  margin: 0 0 0 -193px;
  background: transparent url(../files/products-shadow-big.png) no-repeat;
}
section li span.sombra {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 262px;
  height: 35px;
  margin: 0 0 0 0;
  background: transparent url(../files/products-shadow-med.png) no-repeat;
  margin-left: -131px;
}
section h3 {
  position: relative;
  width: 100%;
  height: 560px;
  padding-top: 30px;
  margin: 60px 0;
  text-align: center;
  clear: both;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}
section h3 div {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}
section h3.sec {
  padding-top: 0;
  margin-bottom: 90px;
}
section ul.mainList {
  position: relative;
  width: 100%;
  height: auto;
  webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}
section ul.mainList li {
  position: relative;
  float: left;
  width: 33.33333%;
  height: 390px;
  text-align: center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}
section ul.mainList li:nth-child(2) {
  margin-top: 220px;
}
section ul.mainList.twoList {
  margin-top: 80px;
}
section ul.mainList.twoList li {
  width: 50%;
  margin-top: 0;
  margin-bottom: 55px;
}

section #listMed0_1 {
  top: -120px;
}
section #listMed0_1 .mRight {
  float: right;
  margin: 0;
}

section ul.secList {
  position: relative;
  width: 100%;
  height: 317px;
  margin-top: 70px;
  text-align: center;
  font: 19px/30px "CorradineHandwriting", Helvetica, Arial, sans-serif;
  color: #7a7670;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}
section ul.secList li {
  position: relative; /*float: left; width: 25%;*/
  display: inline-block;
  height: 317px;
  text-align: center;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

section ul.secList.threeList li:nth-child(1) {
  margin-left: 12.5%;
}
section ul.secList li span.sombra {
  width: 236px;
  height: 35px;
  margin: 0 0 0 -118px;
  background: transparent url(../files/products-shadow-small.png) no-repeat;
}

.info {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  font: 19px/25px "CorradineHandwriting", Helvetica, Arial, sans-serif;
  color: #7a7670;
}
.first .info {
  left: 170px;
  top: 350px;
}
.first .info:last-child {
  top: 200px;
  left: auto;
  right: 170px;
}
.sec .info {
  left: 130px;
  top: 130px;
}
.sec .info.txt2 {
  top: 180px;
  left: auto;
  right: 80px;
}
.mleft .info {
  left: 30%;
  top: -100px;
}
.mleft2 .info {
  left: 22%;
  top: -120px;
}
.mCenter .info {
  left: 25%;
  top: -80px;
}
.mCenter2 .info {
  left: 18%;
  top: -110px;
}
.mRight .info {
  left: 50%;
  top: -130px;
}
.info.top {
  left: -15%;
  top: -50px;
}
.info.center {
  left: -22%;
  top: 145px;
}
.info.bottom {
  left: -17%;
  top: 260px;
}

.info .arrow {
  position: absolute;
  top: 38px;
  left: auto;
  right: -60px;
  display: block;
  width: 51px;
  height: 47px;
  background: transparent url(../imgs/products-arrow.png) no-repeat;
  background-size: 51px 47px;
}
.info .arrow.top {
  top: -45px;
  left: 50%;
  -webkit-transform: rotate(275deg);
  transform: rotate(275deg);
}
.info .arrow.top2 {
  top: -55px;
  left: 10%;
  -webkit-transform: rotate(-280deg) scaleX(-1);
  transform: rotate(-280deg) scaleX(-1);
}
.info .arrow.btleft {
  top: auto;
  left: 10%;
  -webkit-transform: rotate(-270deg);
  transform: rotate(-270deg);
}
.info .arrow.btleft2 {
  top: auto;
  bottom: -55px;
  left: 50%;
  -webkit-transform: rotate(1deg);
  transform: rotate(1deg);
}
.info .arrow.btright {
  top: auto;
  bottom: -55px;
  left: 0%;
  -webkit-transform: rotate(-15deg) scaleX(-1);
  transform: rotate(-15deg) scaleX(-1);
}
.info .arrow.btright2 {
  top: auto;
  bottom: -45px;
  left: 55%;
  -webkit-transform: rotate(-110deg) scaleX(-1);
  transform: rotate(-110deg) scaleX(-1);
}
.info .arrow.btright3 {
  top: auto;
  bottom: -23px;
  left: 105%;
  -webkit-transform: rotate(-120deg) scaleX(-1);
  transform: rotate(-120deg) scaleX(-1);
}

#yourBrand .info {
  opacity: 1;
  top: 200px;
  left: 150px;
}

/* Sr Basilio Fix */
.mainList.twoList.basilio li {
  margin-bottom: 160px;
}

.mainList.twoList.basilio .weight {
  right: 105px;
}

/* super Douradas 4 medium boxes */
#listMed1 {
  position: relative;
}
#listMed1 .mleft2 {
  position: absolute;
  top: -285px;
  left: -60px;
}
#listMed1 .mRight2 {
  position: absolute;
  top: -285px;
  left: 700px;
}
#listMed1 .mLeft1,
#listMed1 .mRight1 {
  margin: 130px 0 0 0;
}
#listMed1 .mLeft1 {
  margin: 130px 310px 0 0px;
}
#listMed1 .mDown {
  margin: -150px 0 0 320px;
}
.sec .txt3 {
  left: 370px;
  top: 690px;
}
.sec .txt4 {
  left: 415px;
  top: 1000px;
}
#listMed1 .txt3 {
  opacity: 1;
  left: 430px;
  top: 200px;
}
#listMed1 .txt4 {
  left: 305px;
  top: 150px;
}

/* anim */
.txt1,
.txt1seta {
  opacity: 0;
  -webkit-transform: translateX(-30px);
  transform: translateX(-30px);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.txt2 {
  opacity: 0;
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.txt3,
.list-douradas .txt4 {
  opacity: 0;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.first .new {
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.txt1.goAnim,
.txt2.goAnim,
.mobile .txt1,
.mobile .txt2 {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.txt3.goAnim,
.list-douradas .txt4.goAnim,
.mobile .txt3,
.mobile .list-douradas .txt4 {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.first .new.goAnim,
.mobile .first .new {
  opacity: 1;
  -webkit-transform: rotate(0);
  transform: rotate(0);
}

.txt1seta .arrow.top {
  opacity: 0;
  -webkit-transform: rotate(260deg);
  transform: rotate(265deg);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.txt1seta.goAnim,
.mobile .txt1seta {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.txt1seta.goAnim .arrow.top,
.mobile .txt1seta .arrow.top {
  opacity: 1;
  -webkit-transform: rotate(275deg);
  transform: rotate(275deg);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

/* Bola */
.newBola {
  display: table;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130px;
  height: 130px;
  text-align: center;
  margin: -76px 0 0 -60px;
  border-radius: 118px;
  background: #fa040d;
  font: normal 600 14px/18px "Idlewild A", "Idlewild B", Helvetica, Arial,
    sans-serif;
  color: #fff;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  display: none;
}
:lang(fr) .newBola,
:lang(es) .newBola {
  font: normal 600 13px/17px "Idlewild A", "Idlewild B", Helvetica, Arial,
    sans-serif;
}
.newBola strong {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table-cell;
  color: #fff;
  z-index: 5;
  vertical-align: middle;
}
.goAnim .newBola,
.newBola.goAnim,
.mobile .newBola {
  opacity: 1;
  -webkit-transform: rotate(0);
  transform: rotate(0);
}

.newBola.brands {
  top: 7%;
  left: 88%;
}

/** SUPER DOURADAS NEW **/
section h3.sec {
  padding-top: 0;
  margin-bottom: 0;
}
.bag-douradas {
  position: absolute;
  left: 0;
  top: 0;
}

.list-douradas {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 600px;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.list-douradas .lft {
  left: -20px;
  top: -180px;
}
.list-douradas .center {
  left: 50%;
  top: 200px;
  margin-left: -125px;
}
.list-douradas .rgt {
  left: auto;
  right: -20px;
  top: -180px;
}
.list-douradas .txt3,
.list-douradas .txt4 {
  left: 20px;
  top: -100px;
  text-align: center;
}
.list-douradas .txt4 {
  left: 55px;
}
section .list-douradas li span.sombra {
  bottom: -45px;
}

#list-douradas3 {
  min-height: 225px;
}
.first-row-last-list {
  padding-bottom: 50px;
}