/* Cores
Azul: #363c86;
Azul hoover: #6a6fb6;
Azul button: #424f9e;
*/


/*  Geral
----------------------------------------------------------------------------------------------------*/
body {
	background: #ffffff url(../images/faixaHeader.jpg) repeat-x;
	font: normal 100% Verdana, Geneva, sans-serif;
	color: #333333;
}
a {
	text-decoration: none;
	color: #363c86;
	font-weight: bold;
}
a:hover {
	color: #6a6fb6;
}



/* Elementos de diagramação e formatação
----------------------------------------------------------------------------------------------------*/
/*Espaçamento*/
.spacerXG {
	padding-top: 8em;
	clear: both;
}
.spacerG {
	padding-top: 4em;
	clear: both;
}
.spacerM {
	padding-top: 3em;
}
.spacerP {
	padding-top: 1em;
}
.resize-image {
	max-width: 100%;
	height: auto;
}
.pad-top {
	margin-top: 18px;
}
/*Alinhamento*/
.esq {
	float: left;
}
.dir {
	float: right;
}
.texto-direita {
	text-align: right;
}
.texto-centro {
	text-align:center;
}
.clear {
	clear: both;
}
/*Estilo*/
.forte {
	font-weight: bold;
}
.italizado {
	font-style: italic;
}
.sublinha {
	clear: both;
	border-bottom: 2px solid #363c86;
	padding-bottom: 1em;
}
/*.aside {
	padding: 1.3em 0;
	border-top: 2px solid #ffe59a;
	border-bottom: 2px solid #ffe59a;
}*/
.capitular-azul:first-letter { 
	font-size:300%;
	float:left;
	color:#215294;
	font-weight:bold;
}
.capitular-verde:first-letter { 
	font-size:300%;
	float:left;
	color:#b9dc76;
	font-weight:bold;
}
.capitular-laranja:first-letter { 
	font-size:300%;
	float:left;
	color:#e47c0b;
	font-weight:bold;
}
/*Cores*/
.sepia {
	color: #b05e49;
}
.laranja {
	color: #e47c0b;
}
.azulclaro {
	color: #84a8d4;
}
.verde {
	color: #b9dc76;
}
.rosa {
	color: #b86ac0;
}
.azul {
	color: #215294;
}
.vinho {
	color: #822524;
}



/* Articles
----------------------------------------------------------------------------------------------------*/
p {
	font: 100%/200% 'Open Sans', sans-serif;
	margin-bottom: 1em;
}
h2 {
	font: 1.8em/1.25em 'Open Sans', sans-serif;
	font-weight: bold;
	padding-bottom: 0.2em;
	border-bottom: 2px solid #363c86;;
	margin-bottom: 1em;
}
h3 {
	font: 2.2em/1.5em 'Open Sans', sans-serif;
}
h4 {
	font: 1.5em/1.5em 'Open-Sans', sans-serif;
	font-style:italic;
}
h5 {
	font: 1.5em/1.5em 'Open-Sans', sans-serif;
	font-weight:bold;
}
h6 {
	font: 1.2em/1.6em 'Open Sans', sans-serif;
	font-weight:bold;
	padding-top:1em;
}
article ul li {
	font: 0.9em/1.8em 'Open Sans', sans-serif;
	padding-top:.9em;
	/*line-height: 1.5em;*/
	margin-left: 1.2em;
}
#related a:hover img { 
	opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */ 
}
.teia { background: #ffffff url(../images/teia.png) no-repeat; }



/* Header
----------------------------------------------------------------------------------------------------*/
header h1 {
	font: 2.8em/0.9em 'Open Sans', sans-serif;
	color: #363c86;
	margin-top:1em;
}
header h2 {
	font: 2em 'Open Sans', sans-serif;
	color: #4A463B;
	border-bottom: 0;
	margin-bottom: 0;
}
header { 
	position: relative; 
}



/* Faixa e posicionamento da busca
----------------------------------------------------------------------------------------------------*/
#busca {
	width: auto;
	height: 2.75em;
	background-color: #363c86;
	position: relative;
}
#busca .search {
	margin-top: 0.45em;
	width: auto;
	float: right;
}




/* `Menu desktop
----------------------------------------------------------------------------------------------------*/

.nav-desktop {
	list-style: none;
	float: left;
	position: relative;
	z-index: 20;
}
.nav-desktop a {
	font-weight: normal;
}
.nav-desktop li {
	position: relative;
	float: left;
	text-transform:uppercase;
}
.nav-desktop li a {
	color: #CCC;
	padding: 0.75em 0.93em;
	display: block;
}
.nav-desktop li a:hover {
	background: #6a6fb6;
	color: #fff;
}

/* ******Segundo nível ****** */
.nav-desktop li ul {
	position: absolute;
	top: 2.7em;
	left: 0;
	background-color: #363c86;
	display: none;
}
.nav-desktop li:hover ul, .nav-desktop li.over ul {
	display: block;
}
.nav-desktop li ul li {
	border-bottom: 2px solid #6a6fb6;
	display: block;
	width: 15em;
	text-transform:none;
}

/* ******Terceiroo nível ****** */
.nav-desktop li ul li ul {
	position: absolute;
	display: none !important;
	left: 15em;
	top: -1.8em;
	z-index: 999;
}
.nav-desktop li ul li:hover ul {
	display: block !important;
	margin: 30px 0 0 0;
}
.nav-desktop li ul li ul li {
	float: left;
	width: 15em;
	display: block;
}
.nav-desktop li ul li ul li a {
	display: block;
	margin: 0 !important;
}



/* Slider
----------------------------------------------------------------------------------------------------*/
#rotate-slides{
	position: relative;
}
.container-slider {
	width:auto;
	margin: 0 auto;
	position: relative;
}
#slider_content1, #slider_content2, #slider_content3, #slider_content4, #slider_content5, #slider_content6 {
	width:460px;
	position:absolute;
	top:25%;
	left:55%;
	display:none;
	/*z-index:10;*/
}
#slider_content1 {
	display:block;
}
#slider_content1 h3, #slider_content2 h3, #slider_content3 h3, #slider_content4 h3, #slider_content5 h3, #slider_content6 h3 {
	color:#fff;
	font: 1.5em/1.5em 'Yanone Kaffeesatz', sans-serif;
	font-weight:bold;
	background-color:#CC3300;
	padding:10px 15px;
	border-radius: 15px 0 15px 0;
	display:inline-block;
}


/* Setas direcionais
----------------------------------------------------------------------------------------------------*/
.direcional a{
	font: 'Open Sans', sans-serif;
	font-weight:normal;
	font-style: italic;
	}
.direcional .fa { vertical-align: middle;}

.anterior { float:left; }

.proximo {  float:right;  }


/* Formulários 
----------------------------------------------------------------------------------------------------*/

optgroup[label]{
	font-size: 130%;
	background-color:	#363c86;
	color:#fff;
}
option{
	background-color:	#fff;
	color:#333;
}


/* Botão
----------------------------------------------------------------------------------------------------*/
.button {
	padding: 0.4em 1em;
	background-color: #424f9e;
	color: #fff;
	text-decoration: none;
	border-radius: 8px;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
}
.button:hover {
	background:none #6a6fb6;
	text-shadow:none;
	color: #4A463B;
}
.go-top {
	position: fixed;
	bottom: 2em;
	right: 2em;
	display: none;
}



/* Footer
----------------------------------------------------------------------------------------------------*/
footer {
	background: #363c86;
	padding: 3em;
	color: #CCC;
	
}
footer h3 {
	font: 1.2em 'Open Sans', sans-serif;
	font-weight:bold;
	color:#fff;
	padding-bottom: 0.6em;
}
footer p {
	font: 100%/180% 'Open Sans', sans-serif;
}
footer a {
	color: #ffe59a;
}
footer a:hover {
	color: #fff;
}
#footer-secundario {
	background: #ffffff url(../images/faixaHeader.jpg) repeat-x;
	padding: 1.6em;
}
.redes-sociais { 
	width:30px;
	padding-top: 5px;
	padding-right: 10px;
	float:left}




/* Galerias
----------------------------------------------------------------------------------------------------*/
.img-item {
	float: left;
	margin-bottom: 15px;
	margin-right: 15px;
}
.img-item a {
	position: relative;
	display: block;
}
.thumb-screen {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	background: #000 url(../../images/busca0.png) center center no-repeat;
	z-index:30;
	opacity: 0;
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE 8 */
  	filter: alpha(opacity=30); /* IE 5-7 */
 	transition: opacity .5s ease;
}

.thumb-screen:hover {
	opacity:0.5;
	/* IE 8 */
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	/* IE 5-7 */
  filter: alpha(opacity=50);
}
.ts150 {
	height:150px;
}
.ts140 {
	height:140px;
}




/* Icones
----------------------------------------------------------------------------------------------------*/
.icones {
	float: right;
	padding-top: 0.5em;
	font-weight: normal;
}
.icone a {
	font-weight: normal;
}
a.tooltip {
	position:relative; /*this is the key*/
	z-index:12;
	color:#363c86;
	text-decoration:none;
	padding: 0 0.3em;
}
a.tooltip:hover {
	z-index:13;
	color: #6a6fb6;
}
a.tooltip span {
	display: none
}
a.tooltip:hover span { /*the span will display just on :hover state*/
	display:block;
	position:absolute;
	top:1.5em;
	left:1.5em;
	float:right;
	font: 12px 'Open Sans', sans-serif;
	padding:0.3em;
	border-radius: 5px;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
	background-color: #6a6fb6;
	color:#fff;
	text-align: center;
}

/*.meio-icone {
	margin-top: 1em;
}*/







/* MEDIA QUERIES
----------------------------------------------------------------------------------------------------*/



/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.nav-desktop { padding-top: 0.5em; }
	.nav-desktop li { font-size:90%; }
	.nav-desktop li a { padding: 0.5em 0.60em; }
	.nav-desktop li ul { top: 2em; }
	.meio-icone { margin-top: 0.5em; margin-left: 0.5em; }
	h2 { font: 1.6em/1.2em 'Open Sans', sans-serif;  }
	h3 { font: 1.7em/2em 'Open Sans', sans-serif; font-weight:bold; }
	h4 { font: 1.5em/2em 'Open Sans', sans-serif;font-style:italic;  }  
	h5 { font: 1.3em/2em 'Open Sans', sans-serif;  } 
	h6 { font: 1.0em/1.6em 'Open Sans', sans-serif; font-weight:bold; }
	.ts150 { height:124px;}
}




/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
	.selo, .icones { display:none; }
	#main-nav, .submenu { /* Igual a display:none mas acessível a leitores de tela */
		position: absolute; 
		overflow: hidden; 
		clip: rect(0 0 0 0); 
		height: 1px; 
		width: 1px; 		
		margin: -1px; padding: 0; border: 0; 
 	}
	header h1 { 
		font: 2.0em/0.9em 'Open Sans', sans-serif; 
		margin: 3em 0 0 0; 
		line-height:1.2em; }
	header h2 { font: 1.5em  'Open Sans', sans-serif; }
	#slider_content1, #slider_content2, #slider_content3, #slider_content4, #slider_content5 {
		width:300px;
		top:18%;
		left:30%;
	}
	#slider_content1 h3, #slider_content2 h3, #slider_content3 h3, #slider_content4 h3, #slider_content5 h3 { font: 1.0em/1.0em 'Open Sans', sans-serif; }
	body form input.st-search-input { width: 10em; }
	#footer-principal p { font: 80%/150%  'Open Sans', sans-serif; }
	#footer-principal h3 { font: 1.0em 'Open Sans', sans-serif; padding: 0.6em 0; }
	.spacerXG { padding-top: 6em;	clear: both; }
	.spacerG {  padding-top: 2em; clear: both; }
	.spacerM {  padding-top: 2em; }
	.spacerP {  padding-top: 1em; }
	.pad-top, .pad-mobile { margin-top: 10px; }
	h2 { font: 1.5em/1.0em 'Open Sans', sans-serif; }
	h3 { font: 1.7em/1.7em 'Open Sans', sans-serif; font-weight:bold;}
	h4 { font: 1.1em/1.5em 'Open Sans', sans-serif; font-style:italic;}
	h5 { font: 1.3em/2em 'Open Sans', sans-serif; }    
	h6 { font: 1.0em/1.6em 'Open Sans', sans-serif; font-weight:bold;}
	.small { font-size:70% }
	.texto-direita { text-align: left;}
	figcaption { font-style: italic; }
	.margem-lateral { margin-left: 5px; margin-right: 5px; }
	.resize-mobile {width:30%; float: left; }
	.direcional a{
	font: 90% 'Open Sans', sans-serif;
	}
	.anterior { padding-bottom:1em; clear:both;}
}



/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */
    
@media only screen and (min-width: 480px) and (max-width: 767px) {
	

	
}





/*  #Print
================================================== */

@media print {

/* Geral*/
	@page { margin: 2cm; }
	a { color: #000; }
	a[href^=http]:after { content:" <" attr(href) "> "; } /*imprime o endereço em hiperlinks*/
	header:before { content: "Centro Cultural do Ministério da Saúde - www.ccms.saude.gov.br"; }
	
/* Cores */
	.sepia, .laranja, .azulclaro, .verde, .rosa, .azul, .vinho { color: #000; }
	
	.capitular-verde:first-letter, .capitular-laranja:first-letter, .capitular-azul:first-letter{ color:#000; }
	
/*Display:none*/	
	.nav-desktop, .selo, .icones, .submenu, .button { display:none; }
	#rotate-slide, #busca, #slides, #slider_content1 h3, #slider_content2 h3, #slider_content3 h3, #slider_content4 h3, #slider_content5 h3, #footer-principal { display:none; }
	img, figcaption, .direcional, .no-print { display:none !important; }

/*Tamanhos e larguras*/
	.container { width: 16cm; max-width: 16cm;}
     .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 16cm !important;}
	header h1 { color: #000; text-align: left; font-size: 24pt; margin-top:20pt;}
	header h2 { color: #000; text-align: left; font-size: 22pt; }
	#footer-secundario {background: #fff; padding: 0; border-bottom:none;   }

	h2 { font: 22pt "Times New Roman", Times, serif; border-bottom: 2px solid #000; }
	h3 { font: 20pt "Times New Roman", Times, serif; }
	h4 { font: 17pt "Times New Roman", Times, serif; font-style:italic;}
	h5 {	font:  110%/150% "Times New Roman", Times, serif; }
	h6 { font: 100%/150% Georgia, "Times New Roman", Times, serif; }
	p { font: 100%/180% Georgia, "Times New Roman", Times, serif; }
	article ul li { font: 100%/200% Georgia, "Times New Roman", Times, serif; content: "» "; }
	.sublinha { clear: both; border-bottom: 1px solid #000; padding-bottom: 1em; }
	.aside { padding: 1.3em 0; border-top: 1px solid #000; border-bottom: 1px solid #000; }
	.spacerXG { padding-top: 24pt; }
	.spacerG { padding-top: 18pt; }
	.spacerM { padding-top: 17pt; }
	.spacerP { padding-top: 16pt; }
	.pad-top, pad-mobile { margin-top: 16pt; }
	.texto-direita { text-align: left; }
}