/*ANIMACOES*/

/* A função de jQuery adiciona a classe animar, mudando a opacidade para 1 e resetando o transform translate para 0px, 0px. A animação só ocorre de forma suave devido ao transition adicionado a classe .box */
/*.box {
	opacity: 0;
	transform: translate(-50px, 0px);
	transition: .3s all ease;
}*/
.texto-Giro1{
	font-size: 250%;
}
.texto-Giro2{
	font-size: 200%;
}
#pulsohj{
	font-family: Montserrat; 
	font-weight: 900; 
	font-size: 600%;
}

#canvas-container-div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
}

#canvas {
  position: relative;
  top: 35%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
}

#restart-button-div {
  position: absolute;
  bottom: 25px;
  right: 25px;
  width: 50px;
  height: 50Px;
  /*background: white;*/
  opacity: 0;
  cursor: pointer;
  border-radius: 100%;
}

#restart-icon {
  position: absolute;
  top: 50%;
  left: 47%;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 45px;
}

.pulse {
  animation: pulse 0.7s infinite;
  margin: 0 auto;
  display: table;
  margin-top: 50px;
  animation-direction: alternate;
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.2);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
.LogoFornecedor{
	width: 100%;
}
.divFornecedor{
	height: 200px;
}
#popupZap{
  width: 8%;
  position: fixed;
  bottom: 0px;
  right: 25px;
  z-index: 3;
  animation: go-back 3s infinite;
}
@keyframes go-back {
    0% {
        transform: translateY(0px);
    }
    25% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-40px);
    }
     75% {
        transform: translateY(0px);
    }
     100% {
        transform: translateY(0px);
    }
}
 /* label focus color */
   .input-field input[type=text]:focus + label {
     color: #6a1b9a !important;
}
/* label underline focus color */
   .input-field input[type=text]:focus {
     border-bottom: 1px solid #6a1b9a !important;
     box-shadow: 0 1px 0 0 #6a1b9a !important;
   }

 /* label focus color */
   .input-field input[type=number]:focus + label {
     color: #6a1b9a !important;
}
/* label underline focus color */
   .input-field input[type=number]:focus {
     border-bottom: 1px solid #6a1b9a !important;
     box-shadow: 0 1px 0 0 #6a1b9a !important;
   }


[type="radio"]:checked + span:after,
 
[type="radio"].with-gap:checked + span:before,
 
[type="radio"].with-gap:checked + span:after {
 
  border: 2px solid #6a1b9a;
 
}
 
[type="radio"]:checked + span:after,
 
[type="radio"].with-gap:checked + span:after {
 
  background-color: #6a1b9a;
 
}
.titForm{
	font-size: 150%;
	font-family: 'Montserrat', sans-serif;
}
@keyframes ZOOM {
  0% {
  	opacity: 0;
    transform: translate(0px, 0px) scale(0.5);
  }
  100% {
  	opacity: 1;
    transform: translate(0px, 0px) scale(1);
  }
}

@keyframes logo {
	0% {
		opacity: 0;
		transform: translate(0px, 0px) scale(0.5);
	}
	100% {
		opacity: 1;
		transform: translate(0px, 0px) scale(1);
	}
}
@keyframes riscoEsq{
	0%{
		opacity: 0;
		transform: translate(-150px, 0px);
	}
	100%{
		opacity: 1;
		transform: translate(0px, 0px);
	}
}
@keyframes riscoDir{
	0%{
		opacity: 0;
		transform: translate(150px, 0px);
	}
	100%{
		opacity: 1;
		transform: translate(0px, 0px);
	}
}

.riscoDir{
	animation: 0.5s ease-out 0s 1 riscoDir;
}
.riscoEsq{
	animation: 0.5s ease-out 0s 1 riscoEsq;
}
.logo{
	animation: 0.5s ease-out 0s 1 logo;
}
.CAVI {  
 	/* This section calls the slideInFromLeft animation we defined above */
	animation: 0.5s ease-out 0s 1 ZOOM;
}
.contagem{
	animation: 0.5s ease-out 0s 1 ZOOM;
}
/*.riscoEsq{
	opacity: 0;
	transform: translate(-150px, 0px);
	transition: .5s all ease;
}
*/
/*.riscoDir{
	opacity: 0;
	transform: translate(150px, 0px);
	transition: .5s all ease;
}*/
/*.logo{
	opacity: 0;
	transform: translate(0px, 0px) scale(0.5);
	transition: .5s all ease;
}*/
.program{
	opacity: 0;
	transform: translate(-100px, 0px) scale(0.5);
	transition: .5s all ease;
}
.tabela1, .tabela2, .tabela3, .tabela4, .tabela5, .tabela6 {
	opacity: 0;
	transform: translate(0px, 0px) scale(0.5);
	transition: .5s all ease;
}
.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, 
.logo7, .logo8, .logo9, .logo10, .logo11, .logo12, 
.logo13, .logo14, .logo15, .logo16, .logo17, .logo18, 
.logo19, .logo20, .logo21, .logo22, .logo23, .logo24,
.logo25, .logo26, .logo27, .logo28{
	opacity: 0;
	transform: translate(0px, 0px) scale(0);
	transition: .5s all ease;
}
.logo1:hover, .logo2:hover, .logo3:hover, 
.logo4:hover, .logo5:hover, .logo6:hover, 
.logo7:hover, .logo8:hover, .logo9:hover, 
.logo10:hover, .logo11:hover, .logo12:hover, 
.logo13:hover, .logo14:hover, .logo15:hover, 
.logo15:hover, .logo16:hover, .logo17:hover, 
.logo18:hover, .logo19:hover, .logo20:hover,
.logo21:hover, .logo22:hover, .logo23:hover,
.logo24:hover, .logo25:hover, .logo26:hover, 
.logo27:hover, .logo28:hover{
	transform: translate(0px, 0px) scale(1.3);
	z-index: 999;
}
.riscoMeio{
	opacity: 0;
	transform: translate(-700px, 0px);
	transition: .5s all ease;
}
/* A função de jQuery adiciona a classe animar, mudando a opacidade para 1 e resetando o transform translate para 0px, 0px. A animação só ocorre de forma suave devido ao transition adicionado a classe .box */
.animar {
	opacity: 1;
	transform: translate(0px, 0px);
}

/*FIM ANIMACOES*/


/* config fundo */


/* =============================================================================
   My CSS
   ========================================================================== */

/* ---- stats.js ---- */
#stats,
.count-particles{
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}

#stats{
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles{
  border-radius: 0 0 3px 3px;
}


/* ---- particles.js container ---- */

#particles-js{
  width: 100%;
  min-height: 100% !important;
  background-color: #b61924;
  background-size: cover;
  position: fixed;
  z-index: -2;
}


/* fim config fundo */
#conteudo{
	position: absolute;
}

body{
	overflow-x: hidden;
	/*background-image: url('../img/bg.png');*/
	width: 100%;
}
#logo{
	width: 80%;
}
#logoGiro{
	width: 80%;
}
.divider-logo{
	margin-top: 5%;
}
#programacao{
	font-size: 400%;
	font-family: 'Montserrat', sans-serif;
	font-weight: 900; 
	text-decoration: underline;
}
.tabelasDIV{
	border-radius: 25px; 
	background: #4a148c;
	margin: 5px 3%;
	padding-bottom: 30px !important; 
	padding-left: 15px; 
	padding-right: 15px;
}

.tabelas{
	/*border: solid #33691e 1px;
	border-bottom: solid #ff9800 2px;*/
}

.nomeCont{
	margin-bottom: 1500px;
}
#relogioMenor{
	margin-left: 30px;
}
#titPT1{
	font-family: 'Montserrat', sans-serif;
	font-weight: 100;
	color: #f57c00;
	line-height: 15px;
	letter-spacing: 5px;
	text-align: center;
}
#titPT2{
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	color: #f57c00;
	line-height: 15px;
	text-align: center;
}
#titPT3{
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	color: #f57c00;
	line-height: 15px;
	text-align: center;
}
.parallax-container {
  min-height: 600px;
  line-height: 0;
  height: auto;
  color: rgba(255,255,255,.9);
}
.parallax-container .section {
    width: 100%;
}

/* FORM CAMISAS */

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  /*padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;*/
  left: 25px !important;
  position: fixed;
  bottom: 23px;
  width: 280px;
}

/* The popup form - hidden by default */
/* FIM FORM CAMISAS */
.sidenav{
	width: 30%;
	padding: 30px !important;
}
@media only screen and (max-width : 992px) {
	.texto-Giro1{
		margin-top: 375px;
		font-size: 250%;
	}
	.texto-Giro2{
		font-size: 200%;
	}
	#pulsohj{
		font-size: 400%;
	}
	#popupZap{
	  width: 20%;
	  position: fixed;
	  bottom: 5px;
	  right: 25px;
	  z-index: 3;
	}
	.sidenav{
		width: 80%;
		padding: 20px !important;
	}
	#particles-js{
	  width: 500%;
	  min-height: 100% !important;
	  background-color: #b61924;
	  background-size: cover;
	  position: fixed;
	  z-index: -2;
	}
	.divider-logo{
		margin-top: 10%;
	}
	#logo{
		width: 80%;
	}
	#logoGiro{
		width: 80%;
	}
	.parallax-container .section {
	    position: absolute;
	    top: 40%;
	}
	#index-banner .section {
    	top: 10%;
	}
	.tabelasDIV{
		border-radius: 25px; 
		background: #4a148c;
		margin: 5px 5px;
		padding-bottom: 30px !important; 
		padding-left: 15px; 
		padding-right: 15px;
	}
	#programacao{
		text-align: center;
		font-size: 250%;
		margin-left: -15%;
		font-family: 'Montserrat', sans-serif;
		font-weight: 900; 
		text-decoration: underline;
	}
}
@media only screen and (max-width : 600px) {
	.texto-Giro1{
		margin-top: 375px;
		font-size: 200%;
	}
	.texto-Giro2{
		font-size: 150%;
	}
	#pulsohj{
		font-size: 350%;
	}
	#popupZap{
	  width: 20%;
	  position: fixed;
	  bottom: 5px;
	  right: 25px;
	  z-index: 3;
	}
	.sidenav{
		width: 90%;
		padding: 20px !important;
	}
	.open-button {
		  background-color: #555;
		  color: white;
		  /*padding: 16px 20px;
		  border: none;
		  cursor: pointer;
		  opacity: 0.8;*/
		  text-align: center;
		  bottom: 23px;
		  width: 280px;
		}
	#particles-js{
	  width: 500%;
	  min-height: 100% !important;
	  background-color: #b61924;
	  background-size: cover;
	  position: fixed;
	  z-index: -2;
	}
	.divider-logo{
		margin-top: 20%;
	}
	#logo{
		width: 80%;
	}
	#logoGiro{
		width: 80%;
	}
	#programacao{
		text-align: center;
		font-size: 250%;
		margin-left: 0%;
		font-family: 'Montserrat', sans-serif;
		font-weight: 900; 
		text-decoration: underline;
	}
	.tabelasDIV{
		border-radius: 25px; 
		background: #4a148c;
		margin: 5px 0px;
		padding-bottom: 30px !important; 
		padding-left: 15px; 
		padding-right: 15px;
	}
}