/*******DEFINICAO DO TOPO**********************************************/

#topo {	
	position:fixed;
	top:0;
	left:0;
	width:100%;
	margin:0 auto;
	padding:10px auto;
	z-index:99;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;

	background-color:#004873;
	border-bottom: 2px solid #36A9E0;
}


#topo_home {	
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	margin:0 auto;
	padding:10px auto;
	z-index:99;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;

	background-color:#004873;
	/*border-bottom: 2px solid #36A9E0;*/	
}
	
	.smaller
	{
		-webkit-transition: all 0.3s;
	    -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	    -o-transition: all 0.3s;
	    transition: all 0.3s;
	}


	#topo_home .direita 
	{
		text-align:right !important;
		right: 0 !important;
	}
	


	#topo_home .esquerda .logo_esquerda
	{
		display: none;		
		margin: 20px 0 !important;
	}


	#topo_home .esquerda .seta_baixo
	{
		display: inline-block;
		margin: 20px 0 0 80% !important;
		cursor: pointer;
	}

	#topo_home .direita .logo_direita
	{
		display: inline-block;
	}

	#topo_home #dl-menu
	{
		display: none !important;
	}

	


	#topo_home.smaller .esquerda .logo_esquerda
	{
		display: inline-block;
		margin: 10px 0 !important;
	}

	#topo_home.smaller .esquerda .seta_baixo
	{
		display: none;
		margin: 10px 0 !important;
	}



	#topo_home.smaller .direita .logo_direita
	{
		display: none;
	}

	#topo_home.smaller .direita #dl-menu
	{
		display: inline-block !important;
		margin: 10px 0;
	}







	
	#logo_topo
	{
		max-height: 50px !important;
		max-width: 100%;
		margin: 8px 0 !important;
	}

#topo_home.smaller
{
	top:0;
	bottom: auto;
	background-color:#004873;
	border-bottom: 2px solid #36A9E0;
}

	#topo_home.smaller #logo_topo
	{
		max-height: 50px !important;
	}

	#topo .esquerda
	{
		text-align:left;
		margin:2px auto;
	}


	#topo .centro
	{
		text-align:center;
	}


	#topo .direita
	{
		text-align:right !important;
		right: 0 !important;
		/*float: right !important;*/
		margin:10px auto;
		font-size: 13px;
	}

	
/*******DEFINICAO DO TOPO**********************************************/




/*******DEFINICAO DO RODAPE**********************************************/
#rodape {
	z-index: 2;		
	padding: 60px 0; 
	line-height:1.8em;
	background-color: #F4F2F5;
	border-top: 2px solid #36A9E0;
}

	#rodape .rodape-bloco
	{
		margin: 20px 0;
		color: #222;
		text-align: left;
	}

		/*Títulos do rodapé*/
		#rodape .rodape-bloco h1
		{
			color: #004873;
			font-size: 20px;
		}
		

		/*Links do rodapé*/
		#rodape .rodape-bloco a, #rodape .rodape-bloco a:link {
			COLOR: #004873; 
			text-decoration:none;
			transition: all ease 0.2s;
		}
		#rodape .rodape-bloco a:visited {
			text-decoration:none;
		}
		#rodape .rodape-bloco a:hover {
			COLOR: #36A9E0; 
			TEXT-DECORATION: none;	
		}
		
		
		/*Inputs*/
		#rodape .rodape-bloco .form-group {          	
		    width: 90%;
		    margin: 8px 0;
		}


		/*Botões do rodapé*/
		#rodape .rodape-bloco .myButton {          
		    background-color:#36A9E0;    
		    color: #FFF;    
			cursor:pointer;	
			transition: all ease 0.2s;
		}
		#rodape .rodape-bloco .myButton:hover,
		#rodape .rodape-bloco .myButton:focus {
			background-color:#004873;			
			transform:translateY(-2px);
		}
		#rodape .rodape-bloco .myButton:active {
			background-color: #222;
		}





/*******EXEMPLOS CLOUD**********************************************/
.cloud {
    display: inline;
    list-style-type: none;
    width: 80% !important;
    margin: 10px 0;
    text-align: center;
}

	.cloud li {
	    list-style: none;
	    display: inline;
	}

		.cloud li:nth-of-type(3n + 1) {
		    font-size: 1.35em;
		    color: #334873;
		}
		.cloud li:nth-of-type(4n+3) {
		    font-size: 1.8em;		    
		    color: #36A9E0;
		}
		.cloud li:nth-of-type(5n - 3) {
		    font-size: 1em;		    
		    color: #666;
		}		


.tagcloud05 ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
.tagcloud05 ul li {
	display: inline-block;
	margin: 0 0 .3em 1em;
	padding: 0;
	color: #FFF !important;
}
.tagcloud05 ul li a {
	position: relative;
	display: inline-block;
	height: 30px;
	line-height: 30px;
	padding: 0 1em;
	background-color: #3498db;
	border-radius: 0 3px 3px 0;
	color: #FFF !important;
	font-size: 13px !important;
	text-decoration: none;
	-webkit-transition: .2s;
	transition: .2s;
}
.tagcloud05 ul li a::before {
	position: absolute;
	top: 0;
	left: -15px;
	content: '';
	width: 0;
	height: 0;
	color: #FFF !important;
	border-color: transparent #3498db transparent transparent;
	border-style: solid;
	border-width: 15px 15px 15px 0;
	-webkit-transition: .2s;
	transition: .2s;
}
.tagcloud05 ul li a::after {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 2;
	display: block;
	content: '';
	width: 6px;
	height: 6px;
	margin-top: -3px;
	background-color: #FFF;	
	color: #FFF !important;
	border-radius: 100%;
}
.tagcloud05 ul li span {
	display: block;
	max-width: 100px;	
	height: 30px;
	line-height: 30px;
	color: #FFF !important;
	font-size: 14px !important;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.tagcloud05 ul li a:hover {
	background-color: #555;
	color: #FFF !important;
}
.tagcloud05 ul li a:hover::before {
	border-right-color: #555;
}







#rodape_inferior {
	z-index: 2;		
	background-color:#454346;
	border-top: 4px solid #36A9E0;
	color:#FFF;
	line-height:1.8em;
}

	#rodape_inferior .esquerda{
		margin: 14px auto;
		text-align: left;
		font-size: 13px;
		color:#FFF;
	}

	#rodape_inferior .direita{
		margin: 14px auto;
		text-align: right;	
		color:#FFF;	
	}

		/*Links do rodape_inferior*/
		#rodape_inferior .direita a, #rodape_inferior .direita a:link {			
			font-size: 13px;
			color:#FFF;
		}
	





/*---------------------------------*/










/*TELAS PEQUENAS (MENORES QUE 1000px, para o qual o site está perfeitamente configurado)*/
@media screen and (max-width: 999px){
 

  #rodape {				
		padding: 15px 0;
	}

}
/*---------------------------------------------------------------------------------*/























/*Smartphones e tablets*/
@media screen and (max-width: 768px),
only screen
and (min-device-width : 320px)
and (max-device-width : 768px)
{	
	#topo_home .esquerda .seta_baixo
	{
		display: inline-block;
		margin: 20px 0 0 5% !important;
		cursor: pointer;
	}
}






/*Smartphones e tablets*/
@media screen and (max-width: 480px),
only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{
	
	#rodape_inferior .esquerda{
		text-align: center;
	}

	#rodape_inferior .direita{
		text-align: center;
	}

}
/*---------------------------------------------------------------------------------*/


.clear{clear:both;}