/*reset*/
*{
	margin: 0;
	padding: 0;
	border: 0;	
}
a{
	text-decoration:none;
	color:none;
}
a:hover{
	
}
ul,ol{
	list-style:none;
}
/*fonts*/
@font-face {
     font-family:dms;
     src: url('../fonts/dms.otf');
}
@font-face {
     font-family:arial;
     src: url('../fonts/Arial Narrow.ttf');
}
@font-face {
     font-family:arial-negrito;
     src: url('../fonts/Arial Narrow Negrito.ttf');
}
@font-face {
     font-family:arial-black;
     src: url('../fonts/arial-black.ttf');
}
@font-face {
     font-family:social;
     src: url('../fonts/social.ttf');
}
@font-face {
     font-family:chopsic;
     src: url('../fonts/Chopsic.ttf');
}
.main{
	width:100%;
	height:3000px;	
	background-color:#fff;	
	top:0;
}
.header{
	width:100%;
	height:6rem;
	margin-top:0px;
	display:flex;
	flex-direction:rows;
	justify-content:space-between;
	align-items:center;
	background-image :linear-gradient(to right, rgba(0,153,255), rgba(0,0,153),rgba(0,153,255));
}
.header > .logo{
	width:15%;
	height:4rem;
	margin-left:2rem;
	text-align:center;
	cursor:pointer;
	
}
.header > .logo img{
	width:70%;
	opacity:.8
	
}
.header > .logo img:hover{
	opacity:1
}
/*BANNER*/
.header .box-popup{
	width:40%;
	height:4rem;
	overflow: hidden;
	background:#fff;
	position: relative;	
	font-family:arial-negrito;
	text-align:center;
}
@keyframes titulo-popup {
      0% {right: -500px;}     
     100% {right:  150px;}
    /*100% {right: -150px;}*/
}

.titulo-popup{
  width: 100%;
  height: 100%;
  padding: 5px;
  color: orange;
  position: absolute;
  font-size: 2rem;
  font-weight: bold;
  top: 9px;
  right: 0;
  z-index: 1;
  text-shadow:1px 2px 2px #000;

  animation: titulo-popup 10s ease-out 0s infinite normal;
  transition-timing-function: ease-in-out;
}
@keyframes black-popup {
    0% {background: #000;}
   15% {background: #000;}
   30% {background: none;}
   40% {background: none;}
   80% {background: none;}
   90% {background: #000;}
  100% {background: #000;}
}

.black-popup{
  background:#000;
  width: 100%;
  height: 100%;
  z-index: 2;
  position: absolute;

  animation: black-popup 10s ease-in 0s normal infinite;
}

@keyframes texto-black-popup {
    0% {left:-150;opacity: 1;}
   15% {left:-150;opacity: 1;}
   20% {opacity: 0;}
   30% {opacity: 0;}
   40% {opacity: 0;}
   80% {opacity: 0;}
   90% {left:-500;opacity: 1;}
  100% {left:-500;opacity: 1;}
}

.texto-black-popup{
  color: #fff;
  opacity: 0;
  font-size: 3rem;
  font-weight: bold;
  position: absolute;
  text-align:center;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 9;
  animation: texto-black-popup 10s ease-in 0s normal infinite;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes produto-popup {
      0% {right: -500px;}     
    100% {right:  170px;}
}

.produto-popup{
  position: absolute;  
  animation: produto-popup 10s ease-out 0s infinite normal;
  width: 60px;
}

@keyframes logo-growth-popup {
      0% {right: -300px;}    
    100% {right:  80px;}
}

.logo-growth-popup{
  position: absolute;
  bottom: 20px;
  animation: logo-growth-popup 10s ease-out 0s infinite normal;
}

@keyframes botao-compra-popup {
      0% {left: -150px;}    
    100% {left: 200px;}
}

.botao-compra-growth-popup{
  position: absolute;
  bottom: 40px;
  right: 0;
  animation: botao-compra-popup 10s ease-out 0s infinite normal;
}

@keyframes texto-preco-popup {
      0% {left: -170px;}
    
    100% {left: 200px;}
}

.preco-popup{
  color: red;
  font-size: 40px;
  font-weight: bold;
  position: absolute;
  right: 20px;
  top: 20px;
  line-height: 20px;
  z-index:1;
  animation: texto-preco-popup 10s ease-out 0s infinite normal;
}

@media only screen and (max-width: 450px){
  .botao-compra-growth-popup{
    top: 160px;
    width: 150px;
  }
  .preco-popup{
    top: 100px;
  }
 @keyframes logo-growth-popup {
      0% {left: -170px;}
     30% {left:   20px;}
     40% {left:   20px;}
     50% {left:   20px;}
     90% {left:   20px;}
    100% {left: -170px;}
}
}

/*FIM DE BANNER*/

.busca{
	width:20%;
	height:4rem;	
	margin-right:2rem;
	padding-top:2rem;
}
.busca-input {
  width: 100%; 
  position: relative;  
}
label {
	display:block;
	font-family:arial;
	font-size:1.2rem;
	color:rgba(0,0,0,0.8);
}
input {
	width: 100%;
	border:1px solid rgba(0,0,0,0.6);
	
} 
input,  button {padding: 10px;}
button {
  position: absolute;   
  top: 0; 
  right: 0;
  background-color:#0098EF;
  border:1px solid rgba(0,0,0,0.6);
  color:#fff;
  font-family:arial;
  font-size:0.8rem;
  cursor:pointer;
}
button:hover{
	background-color:#0088EF;
}
::-webkit-input-placeholder  {
	font-family:arial;
	font-size:1rem;	
	color:rgba(0,0,0,0.6);
	
}
input:-moz-placeholder { 
	font-family:arial;
	font-size:1rem;	
	color:rgba(0,0,0,0.6);
	
}
.nav{
	width:100%;
	height:3rem;
	/*background-image :linear-gradient(to bottom, rgba(168,168,168,0.6), rgba(69,69,69,0.6));
	border-top: 1px solid rgba(69,69,69,0.1);*/
	background-image :linear-gradient(to bottom, rgba(0,153,255), rgba(0,0,153));
    border-top: 1px solid rgba(0,0,153,0.3);
	/*border-bottom: 2px solid transparent;	
	-moz-border-image: -moz-linear-gradient(to right,#FAAC58 0%, #B45F04 50%,#FAAC58 100%);
	-webkit-border-image: -webkit-linear-gradient(to right,#FAAC58 0%, #B45F04 50%,#FAAC58 100%);
	border-image: linear-gradient(to right,#FAAC58 0%, #B45F04 50%,#FAAC58 100%);
	border-image-slice: 1;*/
}
.nav-content{
	width:80%;
	height:3rem;
	margin:0 auto;	
	border-left:1px solid rgba(0,0,255,0.3);
	border-right:1px solid rgba(0,0,255,0.3);
	
}
.nav-content ul{
	display:block;	
	
}
.nav-content ul > li{
	display:inline;
	font-family:arial;
	font-size:1.6rem;	
	padding-left:4.5rem;
	line-height:3rem;
	
	
}
.nav-content ul > li > a{	
	color:rgba(0,0,153,0.7);
	text-shadow:0px 1px 1px rgba(250,250,250,0.8);
	transition:0.2s;
}
.nav-content ul > li > a:hover{	
	color:rgba(0,0,153);	
}