*, *::before, *::after	{ box-sizing: border-box; font-family: 'Chivo', sans-serif; }
:root 					{		--size: 75px;	--clr-bg: #003278;	--clr1: #bbbb88;	--clr2: #ccc68d;	--clr3: #eedd99;	--clr4: #eec290;	--clr5: #eeaa88;	}
#videoBackground 		{ z-index:0; position: fixed; right: 0; bottom: 0; top: 0; left: 0; min-width: 100%; min-height: 100%; }
.container-fluid		{ z-index:1; position: fixed; background: url('../img/gramado-sintetico.png') no-repeat; background-position: bottom center; background-size: cover; bottom:0; top:0; }
img						{ max-width: 100%; max-height:100%; }
.logo					{ max-height: 250px; margin-top:40px; }
.loading-page			{ background: #003278; width: 100vw; height: 100vh;  }

.superior-row 			{ margin-top:100px; position: relative; z-index:5; }
.logo_row				{ margin-top: 100px; }
.selecione				{ margin-top: 40px; }
.unidades				{ zoom: 100%; }
.fogueira				{ zoom: 80%; }
.palco					{ position: relative; background: url('../img/palco.png') no-repeat; background-position: center; background-size: contain; }
.votacao				{ position: absolute; bottom:0; left:0; width:80px; height:auto; z-index:30; }
.musica					{ position: absolute; bottom:0; right:0; width:80px; height:auto; z-index:30; }
/*
.people					{ width: auto; height: 120px; position: absolute; top: 370px; left: 0; right: 0; z-index: 10; }
.displays					{ position: relative; margin-top: 10px; z-index:15; }
*/
.people, .displays		{ display: none; }
.zidx15					{ position: relative; z-index: 15; }
.zidx30					{ position: relative; z-index: 30; }
.loader 				{ position: fixed; top:0; left:0; right:0; bottom:0; display: block;  z-index:1000;  background-color: var(--clr-bg); display: grid; place-items: center; }
.spinner 				{ --animation-duration: 650ms; position: relative; width: var(--size); height: var(--size); } 
.spinner .spinner-item 	{ 
							position: absolute; width: var(--item-size); height: var(--item-size); top: calc(50% - var(--item-size) / 2); left: calc(50% - var(--item-size) / 2); 
							border: 4px solid transparent; border-left: 4px solid var(--clr-spinner); border-right: 4px solid var(--clr-spinner); border-radius: 50%;
							animation: spinner2 var(--animation-duration) linear infinite;
						}
.spinner .spinner-item:nth-of-type(1) { --item-size: var(--size); --clr-spinner: var(--clr1); border-top: 4px solid var(--clr1); }
.spinner .spinner-item:nth-of-type(2) { --item-size: calc(var(--size) - 15px); --clr-spinner: var(--clr5); border-bottom: 4px solid var(--clr5); }
.spinner .spinner-item:nth-of-type(3) { --item-size: calc(var(--size) - 30px); --clr-spinner: var(--clr3); border-top: 4px solid var(--clr3); }

.bandeirinhas			{ 
							z-index:2; position: absolute; top: 0; left: 0; right: 0; width:100vw; height:300px; opacity:90%; background: url('../img/bandeirinhas.png') no-repeat; 
							background-position: top center; background-size: contain;
						}
.balao					{ z-index:3; position: absolute; top: 0; left: 0; right: 0; width:150px; height:200px; margin: auto; background: url('../img/balao.png') no-repeat; background-size: contain; background-position: right center; }
.player 				{ z-index:3; position: absolute; top:50px; right:50px; width:70px; height:70px; overflow: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; border: 5px solid #228DFF; border-radius:40px; -webkit-animation: neon 1.5s ease-in-out infinite alternate; -moz-animation: neon 1.5s ease-in-out infinite alternate; animation: neon 1.5s ease-in-out infinite alternate; }
.playbutton 			{ margin-top: 9px; margin-left: 14px; border: 0; background: transparent; box-sizing: border-box; width: 40px; height: 40px; border-color: transparent transparent transparent #228DFF;  cursor: pointer; border-style: solid; border-width: 20px 0px 20px 40px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.playbutton.paused 		{ border-style: double; border-width: 0px 0 0px 32px; }
.playbutton:hover 		{ border-color: transparent transparent transparent #FFF; }
.slideshow 				{ margin: 0 auto; position: relative; display:flex; max-width:100%; width: 200px; height: 200px; }
.slideshow > div 		{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; }
.sponsors 				{ display: flex; position: absolute; z-index:25; bottom:0; left:0; right:0; width:100%; height:200px; align-content: center; align-items: center; }

@media (orientation:landscape) and (max-height: 670px) and (max-width: 1300px) {
	*					{ zoom: 96%; }
	.people				{ display: none; }
	.superior-row 		{ margin-top:130px; }
	.displays			{ margin-top: -20px; }
	.bandeirinhas		{ display: none; }
	.balao				{ width: 95px; height: 150px; }
	.slideshow 			{ position: absolute; bottom: 5px; left: 0; right:0; width: 170px; height: 170px; }
	.sponsors 			{ display: none; }
}

@media (orientation:landscape) and (max-height: 770px) and (max-width: 1370px) {
	*					{ zoom: 96%; }
	.superior-row 		{ margin-top:200px; }
	.people				{ top: 340px; }	
	.bandeirinhas		{ display: none; }
	.balao				{ width: 95px; height: 150px; }
	.sponsors 			{ display: none; }
	.slideshow 			{ width: 170px; height: 170px; }
}

@media (orientation:landscape) and (max-height: 670px) and (max-width: 1370px) {
	.superior-row 		{ margin-top:200px; }
	.people				{ display:flex; top: 370px; }
	.displays			{ margin-top: -20px; }
	.sponsors 			{ display: none; }
	.slideshow 			{ width: 170px; height: 170px; }
}
@media (orientation:landscape) and (max-width: 1600px) {
	.superior-row 		{ margin-top:200px; }
	.people				{ width: auto; height: 120px; position: absolute; left: 0; right: 0; z-index: 10; display: block; top: 380px; }
	.displays			{  position: relative; z-index:15; margin-top: 0px; }
	.sponsors 			{ display: none; }
	.slideshow 			{ width: 170px; height: 170px; }
}
@media (orientation:landscape) and (min-width: 1601px) {
	.superior-row 		{ margin-top:200px; }
	.people				{ width: auto; height: 120px; position: absolute; left: 0; right: 0; z-index: 10;  display: block; top: 430px;  }
	.displays			{ position: relative; margin-top: 100px; z-index:15; }
	.sponsors 			{ display: none; }
	.slideshow 			{ width: 170px; height: 170px; }
}
@media (orientation:portrait) and (min-width: 720px ) and (max-width: 900px) {
	.logo				{ margin-top:0px; }
	.player				{ zoom: 80%; top: 20px; right: 20px; }
	.balao				{ width:70px; height: 110px; }
	.selecione			{ margin: 0; }
	.unidades img 		{ zoom: 40%; }
	.unidades .btn		{ margin-bottom:5px; }
	.people				{ top: 630px; z-index:20; }	
	.bandeirinhas		{ display: none; }
	.superior-row 		{ margin-top:0px; }
	.displays			{ position: absolute; top: 670px; left:0; right: 0; width: 100%; height: auto; z-index:20; }
	.sponsors 			{ display: none; }
}

@media (orientation:portrait) and (max-width: 719px) {
	.logo				{ margin-top:0px; }
	.player				{ zoom: 80%; top: 20px; right: 20px; }
	.balao				{ display: none; }
	.selecione			{ margin: 0; }
	.unidades img 		{ zoom: 30%; }
	.unidades .btn		{ margin-bottom:5px; }
	.people				{ top: 430px; z-index:20; }	
	.bandeirinhas		{ display: none; }
	.superior-row 		{ margin-top:30px; }
	.displays			{ position: absolute; top: 560px; left:0; right: 0; width: 100%; height: auto; z-index:20; }
	.sponsors 			{ display: none; }
}

@keyframes spinner2 {
  to 					{ transform: rotate(360deg); }
}

@keyframes neon {
  from 					{ box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; }
  to 					{ box-shadow: 0 0 0px #fff, 0 0 5px #fff, 0 0 8px #fff, 0 0 10px #228DFF, 0 0 19px #228DFF, 0 0 20px #228DFF, 0 0 25px #228DFF, 0 0 40px #228DFF; }
} /* glow */

@-moz-keyframes neon {
  from 					{ box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; }
  to 					{ box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; }
} /* glow for mozilla */

@-webkit-keyframes neon {
  from 					{ box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; }
  to 					{ box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; }
} /* glow for webkit */