/* Efeitos Parallax */
@keyframes mousepadHeader {
  from { margin-left: -10vw; }
  to { margin-left: -1vw; }
}

@-webkit-keyframes textAnimateIn {
	0% {
		opacity: 0;
		-webkit-transform: translateY(100px);
		transform: translateY(100px)
	}
	to {
		opacity: 1;
		-webkit-transform: translateY(50%);
		transform: translateY(50%)
	}
}

@keyframes textAnimateIn {
	0% {
		opacity: 0;
		-webkit-transform: translateY(100px);
		transform: translateY(100px)
	}
	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@-webkit-keyframes ctaAnimateIn {
	0% {
		opacity: 0;
		-webkit-transform: skewX(30deg);
		transform: skewX(30deg);
		-webkit-transform-origin: "center bottom";
		transform-origin: "center bottom"
	}
	to {
		opacity: 1;
		-webkit-transform: skewX(0);
		transform: skewX(0)
	}
}

@keyframes ctaAnimateIn {
	0% {
		opacity: 0;
		-webkit-transform: skewX(30deg);
		transform: skewX(30deg);
		-webkit-transform-origin: "center bottom";
		transform-origin: "center bottom"
	}
	to {
		opacity: 1;
		-webkit-transform: skewX(0);
		transform: skewX(0)
	}
}


@font-face {
   font-family: fontTit;
   src: url('burbank-small-black-italic.otf');
}

@font-face {
   font-family: fontText;
   src: url('burbank-big-regular-bold.otf');
}

*{
  text-align: center;
  font-family: fontText;
}

body{
  width: 100vw;
  height: auto;
  overflow-x: hidden;
  margin: 0px;
}

.boxHeader{
  width: 100vw;
  height: 100vh;
	background: url('../img/fundoHeader.jpg') center center no-repeat;
  background-size: 100% 100%;
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0);
}

.imgPadHeader{
  position: relative;
  float: left;
  width: 60vw;
  height: auto;
}.imgPadHeader > img{
  width: 100%;
  margin-top: -10vh;
  margin-left: -1vw;
  animation: 3s mousepadHeader cubic-bezier(0.5,0.1,0.1,1.5);
}

.centerY{
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.boxTextHeader{
  position: relative;
  float: left;
  width: 40vw;
  height: auto;
}.titSecao{
  width: 100%;
  height: 12vh;
  margin-top: 13vh;
  position: relative;
  font-size: 3vw;
  opacity: 0;
  -webkit-transform: translateY(100px);
  transform: translateY(100px)
}.titSecao > .centerY{
  font-family: fontTit;
}.titHeader{
  height: 25vh;
  margin-top: 0px;
}.titHeader > div{
  padding-top: 10vh;
}.titNomePad{
  width: 100%;
  height: 30vh;
  position: relative;
  font-size: 7.5vw;
  line-height: 0.8;
  opacity: 0;
  -webkit-transform: translateY(100px);
  transform: translateY(100px)
}.titNomePad > div{
  text-shadow: 0 0 4px rgba(0,0,0), 0 0 40px rgba(0,231,255,.8), 0 5px 8px rgba(0,231,255,.3);
}.textSecao{
  width: 100%;
  height: 20vh;
  position: relative;
  font-size: 2.7vw;
  opacity: 0;
  -webkit-transform: translateY(100px);
  transform: translateY(100px)
}.logoLeet{
  width: 100%;
  height: 10vh;
  margin-top: 4vh;
  opacity: 0;
  -webkit-transform: translateY(100px);
  transform: translateY(100px)
}.logoLeet > img{
  width: 20%;
  margin: 0 auto;
}

.transicao1{
  width: 100%;
}.transicao1 > img{
  position: static;
  width: 100%;
  margin-top: -16vh;
}

.boxUnboxing{
  width: 100vw;
  height: 55vh;
	background: #fff;
}.boxTextUnboxing{
  width: 38vw;
  height: 100%;
  margin-left: 10vw;
  position: relative;
  float: left;
}.boxVideoUnboxing{
  width: 42vw;
  height: 100%;
  margin-right: 10vw;
  position: relative;
  float: left;
  opacity: 0;
  -webkit-transform: translateY(100px);
  transform: translateY(100px)
}.boxVideoUnboxing > iframe{
  height: 45vh;
  width: 80vh;
  box-shadow: 0 0 25px rgba(0,0,0);
  margin-top: 1px;
  margin-left: 1px;
}.titUn{
  height: 5vh;
  font-size: 5vw;
  margin-top: 12vh;
}.textUn{
  height: 5vh;
  margin-top: 6vh;
  position: relative;
  font-size: 2.7vw;
}

.transicao2{
  width: 100%;
  height: 1px;
  position: absolute;
  z-index: 10000;
}.transicao2 > img{
  position: static;
  width: 100vw;
  margin-top: -3vh;
}

.boxCostura{
  width: 100vw;
  height: 100vh;
	background: #C9C9D3;
  overflow: hidden;
}.boxTextCostura{
  width: 37vw;
  height: 100%;
  margin-top: 10vh;
  margin-left: 3vw;
  position: relative;
  float: left;
}.titCos{
  height: 10vh;
  font-size: 3vw;
  margin-top: 24vh;
}.textCos{
  height: 25vh;
  font-size: 2vw;
}.boxImgsCostura{
  width: 60vw;
  height: 100%;
  margin-top: 10vh;
  position: relative;
  float: left;
}.imgCos1, .imgCos2, .imgCos3{
  position: absolute;
}.imgCos1{
  z-index: 1;
}.imgCos1 > img{
  margin-top: -50vh;
}.imgCos2{
  z-index: 2;
}.imgCos2 > img{
  margin-top: -50vh;
  margin-left: 20vw;
}.imgCos3{
  z-index: 3;
}.imgCos3 > img{
  margin-top: -50vh;
  margin-left: 40vw;
}


.boxPresicao{
  position: absolute;
  width: 100vw;
  height: 100vh;
  margin-top: -5vh;
  overflow: hidden;
	background: url('../img/fundoSessao3.png') center center no-repeat;
  background-size: 100% 100%;
  color: #fff;
  z-index: 10000;
  text-shadow: 0 0 6px rgba(0,0,0);
}.boxImgPresicao{
  width: 50vw;
  height: 83vh;
  margin-top: 10vh;
  position: relative;
  float: left;
}.boxImgPresicao > img{
  height: 100%;
}.boxTextPresicao{
  width: 45vw;
  height: 100%;
  margin-top: 10vh;
  position: relative;
  float: left;
}.titPre{
  height: 10vh;
  font-size: 2.5vw;
  margin-top: 24vh;
}.textPre{
  height: 25vh;
  font-size: 2vw;
}


.boxConforto{
  width: 100vw;
  height: 90vh;
  margin-top: 80vh;
	background: #989699;
  overflow: hidden;
  z-index: 1;
}.boxTextConforto{
  width: 47vw;
  height: 100%;
  margin-left: 3vw;
  margin-top: 10vh;
  position: relative;
  float: left;
}.titCon{
  height: 10vh;
  font-size: 3vw;
  margin-top: 20vh;
}.textCon{
  height: 25vh;
  font-size: 1.8vw;
}.boxImgConforto{
  width: 50vw;
  height: 83vh;
  margin-top: 10vh;
  position: relative;
  float: left;
}.boxImgConforto > img{
  position: absolute;
  width: 65vw;
  margin-top: -50vh;
  margin-left: -32vw;
}

.transicao3{
  width: 100%;
  height: 1px;
}.transicao3 > img{
  position: static;
  width: 100%;
  margin-top: -10vh;
}

.boxOferta{
  width: 100vw;
  height: 120vh;
  margin-top: -5vh;
	background: url('../img/fundoOferta2.jpg') center center no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  z-index: 1;
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0);
}.boxTextOferta{
  width: 30vw;
  height: 50%;
  margin-left: 24vw;
  margin-top: 4vh;
  position: relative;
  float: left;
}.titOfe{
  height: 10vh;
  font-size: 3vw;
  margin-top: 20vh;
}.textOfe{
  height: 25vh;
  font-size: 2.3vw;
}.imgPadOferta{
  width: 40vw;
  height: 50%;
  margin-top: 4vh;
  position: relative;
  float: left;
}.imgOfe1, .imgOfe2, .textTamanho{
  position: absolute;
  width: 100%;
}.imgOfe1{
  z-index: 1;
}.imgOfe1 > img{
  margin-top: -5vh;
  width: 75%
}.imgOfe2{
  z-index: 2;
}.imgOfe2 > img{
  margin-top: 5vh;
  margin-left: 10vw;
  width: 75%
}.boxTextPreco{
  width: 50vw;
  margin-left: 25vw;
  position: relative;
  float: left;
}.textTamanho{
  width: 100%;
  text-align: center;
  padding-top: 61vh;
  padding-left: 4vw;
  font-size: 1.6vw;
}.titPreco{
  height: 8vh;
  margin-top: 1vh;
  font-size: 2.4vw;
  position: relative;
  opacity: 0;
  -webkit-transform: translateY(100px);
  transform: translateY(100px)
}.textPreco{
  height: 20vh;
  font-size: 10vw;
  position: relative;
  text-shadow: 0 0 4px rgba(0,0,0), 0 0 40px rgba(255,0,0,.8), 0 5px 8px rgba(255,0,0,.3);
  opacity: 0;
  -webkit-transform: translateY(100px);
  transform: translateY(100px)
}.textFrete{
  font-size: 1.8vw;
  position: absolute;
  width: 100%;
  opacity: 0;
  margin-top: 2vh;
  -webkit-transform: translateY(100px);
  transform: translateY(100px)
}.btnComprar{
  width: 100%;
	clip-path: polygon(2% 0,98% 0,98% 100%,2% 100%);
  background-color: #ff0;
  color: #000;
  font-size: 3vw;
  padding: 25px 0px 15px 0px;
  margin-top: 2vh;
  cursor: pointer;
  display: block;
  -webkit-align-self: baseline;
  -ms-flex-item-align: baseline;
  align-self: baseline;
  color: #000;
  transition: all .3s ease-in-out;
  text-shadow: 0 0 3px rgba(200,200,200);

		opacity: 0;
		-webkit-transform: skewX(30deg);
		transform: skewX(30deg);
		-webkit-transform-origin: "center bottom";
		transform-origin: "center bottom"
}.btnComprar:hover{
  clip-path: polygon(4% 0,100% 0,98% 100%,2% 100%);
}.btnComprar > span{
  transition: all .3s ease-in-out;
}.btnComprar:hover > span{
  padding-left: 3%
}

footer{
  width: 100%;
  position: relative;
  float: left;
}.logoFooter{
  width: 100%;
  margin-top: 5vh;
  text-align: center;
}.logoFooter > img{
  height: 2.5vh;
  text-align: center;
}.textCopy{
  margin-top: 1vh;
  font-family: fontTit;
  color: #ccc;
}