@charset "utf-8";

#fg {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  /*background-color:#F00;*/
  padding: 0px;
  margin: 0px;
  border: 0px;
  z-index: 100;
  box-shadow: 0px 0px 400px rgba(0,0,0,1.0) inset;
}

#bgSoundPlace{
	width: 0px;
	height: 0px;
	border: 0px;
	margin: 0px;
	padding: 0px;
	/*display: none;*/
}

#cabecalho{
	height: 10vh;
	/*background-color: rgba(127,127,127,0.5);*/
	
	padding: 0;
	border: 0;
	margin: 0;
	
	position: fixed;
  top: 0;
  left: 0;
	
  width: 100%;
	height: 14vmin;	
	z-index: 100;
	
	text-align: right;  
}

#title{
	color: rgb(0,0,0);
	/*background-color: rgb(255,0,0);*/
	opacity: 0.85;
    font-family: title;
	font-size: 9vmin;

	padding: 0;
	margin: 3vh 4.0vw 0 auto;
	border: 0;
	
	display: inline-block;
	
	vertical-align: middle;
	
	text-shadow: 0px 0px 60px #FFF, -1px -1px 1px rgba(255,255,255,1.0); 
	/*text-shadow: 0px 0px 30px #FFF, 0px 0px 60px #FFF, 1px 1px 1px rgba(0,0,0,0.8), -1px -1px 1px rgba(255,255,255,1.0);*/ 
} 

#subtitle{
	color: rgb(255,255,255);
	font-weight: normal;
	opacity: 1.0;
    font-family: title;
	font-size: 2.725vmin;
	/*background:#0F0;*/

	padding: 0;
	margin: -0.5vh 4.0vw 0 auto;
	border: 0;
	
	vertical-align: middle;

	text-shadow: 0px 0px 15px rgba(0,0,0,1.0), 0px 0px 30px rgba(0,0,0,1.0), 1px 1px 0px rgba(0,0,0,1.0); 
	/*text-shadow: 0px 0px 15px rgba(0,0,0,0.5), 0px 0px 30px rgba(0,0,0,1.0), 1px 1px 0.5px rgba(0,0,0,1.0), -1px -1px 0.5px rgba(255,255,255,0.8);*/
} 

#copyright{
	margin: 0;
	padding: 0;
	border: 0;	
	position: absolute;
	left: 2vw;
	color: rgba(191,191,191,0.4);
	font-family: "Times New Roman", Times, serif;
	vertical-align: middle; 
	border-radius: 1.1vw;;
	box-shadow: 0px 0px 4.4vw 4.4vw rgba(0,0,0,0.15), inset 0px 0px 0px 1.1vw rgba(0,0,0,0.15);
}
@media all and (orientation: landscape) {
#copyright{
	bottom: 3.3vw;
	font-size: 1.1vw;
}
}
@media all and (orientation: portrait) {
#copyright{
  bottom: 10.5vh;  
	font-size: 1.5vh;
	height: 1.5vh;
}
}

#logo{
	width: 50px;
	height: 50px;
	background-image: url("../images/copysmall.png");
	background-size: 100%;	
	display: inline-block;
	margin: 0.15vw 0;
}
@media all and (orientation: landscape) {
#logo{
	height: 1.1vw;
	width: 1.1vw;
	background-size: 100%;		
}
}
@media all and (orientation: portrait) {
#logo{
  height: 1.5vh;  
	width: 1.5vh;
	background-size: 100%;		
}
}

#copyright p{
  vertical-align: middle; 
	float: right;
	margin: 0 0 0 0.3em;
  padding: 0;
  border: 0;
	line-height: 1.5vw;
}


#barra{
	width: 100%;
	background: rgba(0,0,0,0.85);
	
	font-family: barra;
	text-align: center;
    vertical-align: middle;	
	
	z-index: 100;
	position: fixed;
    bottom: 0;
    left: 0;	
	padding: 0;
	border: 0;
	margin: 0;	
	/*overflow: hidden;*/
	
	border-top: #FFF 1.0px dotted;
	
	display: block;

}

@media all and (orientation: landscape) {
#barra{
	height: 2.2vw;
	line-height: 2.2vw;
    font-size: 0.88vw;/* estava 1.1*/
}
}
@media all and (orientation: portrait) {
#barra{
  height: 9.0vh;
  line-height: 3.0vh;;  
  font-size: 1.2vh; /* estava 1.5*/   
}
}

#menu {
	height: 100%;	
	color: #FFF;
	padding: 0;
	border: 0;
	border-right: 1px dotted #fff;
	margin: 0;
	/*overflow: hidden;*/
    -webkit-column-rule: 1px dotted #fff; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px dotted #fff; /* Firefox */
    column-rule: 1px dotted #fff;
    -webkit-column-gap: 0px; /* Chrome, Safari, Opera */
    -moz-column-gap: 0px; /* Firefox */
    column-gap: 0px;

}
@media all and (orientation: landscape) {
#menu{
	width: 95.4vw;	
    -webkit-column-count: 7; /* Chrome, Safari, Opera */
    -moz-column-count: 7; /* Firefox */
    column-count: 7;
}
}
@media all and (orientation: portrait) {
#menu {
	width: 95%;	
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
}

#menu span{	
  display: block;	
	width: 100%;
  border: 0;		
	margin: 0;
	padding: 0;
	/*overflow: hidden;*/
	box-sizing: border-box;
	
  -webkit-transition: all 0.75s; /* For Safari 3.1 to 6.0 */
  transition: all 0.75s;	
}
@media all and (orientation: landscape) {
#menu span{	
  height: 2.2vw;
}
}
@media all and (orientation: portrait) {
#menu span{	
  height: 3.0vh;
  border-bottom: 1px dotted #fff;
}
}

#menu span:hover{
	background-color: #FFF;
	color:#000;
	cursor: pointer;	
}


#options {
	background-color: rgba(0,191,255,0.2);
	color:#FFF;
	/*font-size: 80%;
	font-weight: bold;*/
}
@media all and (orientation: landscape) {
#options{
	position: fixed;
	right: 0;
	bottom: 0%;	
	width: 4.6vw;	
	height: 2.2vw;
}
}
@media all and (orientation: portrait) {
#options {
	position: fixed;
	top: 91vh;
	left: 95%;
	bottom: 15vh;
	width: 5%;
	height: 9vh;
}
}

#options span{	
  display: block;		
	margin: 0;
	padding: 0;
	float: left;
	box-sizing: border-box;
	
  -webkit-transition: all 0.75s; // For Safari 3.1 to 6.0 
  transition: all 0.75s;
  	z-index: 110;
}
@media all and (orientation: landscape) {
#options span{
	width: 50%;
  height: 2.2vw;
  line-height: 2.2vw; 
  border 0px;
  border-right: 1px dotted #fff;	
	transition: all 0.5s;	
}
}
@media all and (orientation: portrait) {
#options span{
	float: right; 
	width: 100%;
	float: none; 
	height: 4.5vh;
	line-height: 4.5vh;  
	border: 0;
  border-right: 1px dotted #fff;
  border-bottom: 1px dotted #fff;
}
}
#options span:hover{
	background-color: #0CF;
	color:#000;
	cursor: pointer;
}



#options #volumeSlider{
    position: absolute;
    bottom: 100%;
    left: 0;
	background: rgba(0,255,255,0.25);
	border: 1px dotted #fff;	
	height: 20vh;
	z-index: 100;
	opacity: 0.0;
	border: 0;
	transition: all 0.5s;
}
@media all and (orientation: landscape) {
#options #volumeSlider{
	border-top-left-radius: 1.15vw;
  border-top-right-radius: 1.15vw;	
}
}
@media all and (orientation: portrait) {
#options #volumeSlider{
	border-top-left-radius: 2.5vw;
  border-top-right-radius: 2.5vw;	
}
}

#options #volumeHandle{
  position: relative;
  top: 0%;
  left: 25%;
	background: #FFF;
	border: 0;	
	margin: auto 0
	z-index: 1001;
	opacity: 1.0;
	transition: all 0.0s;
	border-radius: 50%;
}
@media all and (orientation: landscape) {
#options #volumeHandle{
  left: 25%;	
	height: 1.15vw;
	width: 1.15vw;
}
}
@media all and (orientation: portrait) {
#options #volumeHandle{
	height: 2.5vw;
	width: 2.5vw;
}
}

#janela{
 width: 45vw;
 position: fixed;
 top: 23vmin;
 right: 4vw;
 padding: 0 0 2vh 0;
 border: 0;
 margin: 0;
 background-color: rgba(255,255,255,0.925);
 background-image:url(../images/pattern2.png);
 border-radius: 0.5vmin;
 /*box-shadow: 0.4vmax 0.8vmax 1.0vmax rgba(0,0,0,0.25);*/
 opacity: 0;
 /*animation: janela_loop 240s infinite linear;
 -webkit-animation: janela_loop 240s infinite linear;*/
 
}

#janela h1{
 display: block;
 padding: 0.5vh 2vw 0.5vh 2vw;
 border: 0;
 margin: 0 0 2vh 0;
 background-color: rgba(0,0,0,0.9875);
 color:#FFF;
 font-family: janela_titulo;
 font-size: 2.0vmin;
 border-radius: 0.5vmin 0.5vmin 0 0; 
}

#janela p{
 display: block;
 padding: 1vh 2vw 1vh 2vw;
 border: 0;
 margin: 0;
 color:#000;
 font-family: janela_texto;
 text-align: justify;
 font-size: 2.0vmin;
}