/*variaveis globais */
:root {
	--typo-family: 'Rawline', arial;
	--typo-weight-light: 400;
	--typo-weight-bold: 700;

	--typo-size-t-lg: 1.4rem;
	--typo-size-t-md: 1.5rem;
	--typo-size-t-sm: 1.25rem;
	--typo-p-sm: 0.75rem;
	--typo-p-md: 0.875rem;
	--typo-p-lg: 1rem;

	--color-danger: #DC3545;
	--color-warning: #FFC107;
	--color-success: #28A745;

	--color-black: #1A1A1A;
	--color-white: #fff;
}


h1 {
	font-size: var(--typo-size-t-lg);
	font-weight: 6	00;
	border-bottom: 1px solid #ccc;
	padding-bottom: 16px;
	margin-bottom: 24px;

}

.skip {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 100%;
	height: 1px;
	overflow: hidden;
}

.skip:focus {
	position: static;
	width: 100%;
	height: 100px;
	text-align: center;

	background-color: cornflowerblue;
	color: #fff;
}


html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: var(--typo-family);
	font-size: 16px;
}



label {

	font-weight: bold;
}

/*controle de posicionamento rodapé*/

#wrapper-hs {
	min-height: 100%;
	position: relative;
}

.main-hs {

	padding-bottom: 380px;
}

/*topo*/

.header-hs {
	background: var(--color-primary);
}


.header-hs .logo {
	float: left;
	background-repeat: no-repeat;
	width: 107px;
	height: 48px;

}


.header-hs .nome-hotsite {
	font-size: var(--typo-size-t-md);
	font-weight: var(--typo-weight-light);

}

.header-hs .frase-descritiva {
	margin-top: 8px;
}


.login  {
	background-color: #28A745;
	padding: 4px 64px 8px 64px;
	-webkit-border-bottom-right-radius: 24px;
	-webkit-border-bottom-left-radius: 24px;
	-moz-border-radius-bottomright: 24px;
	-moz-border-radius-bottomleft: 24px;
	border-bottom-right-radius: 24px;
	border-bottom-left-radius: 24px;
	font-size:13px;
	color: #fff;
	position: absolute;
	top: 65px;
	right: 64px;

}


.login a,
.login span {
	text-decoration:none;
	font-weight:bold;
	letter-spacing: 1px;
	font-size:13px;
	color: #fff;


}

.login a:hover,
.login span:hover{
	text-decoration:underline;
	color: #fff;
}


/*nav principal*/

.nav {
	background: var(--color-menu);
}

.nav .dropdown-menu {
	background: var(--color-white);
}

.nav .navbar {
	padding-right: 0px;
	padding-left: 0px;
}


.nav a {
	display: block;

}

.active {
	border-bottom: 2px solid;
}

/*sidemenu*/


.sidemenu .nav-link {
	border: 1px solid #DDDDDD;
}


.conteudo {
	width: 740px;
	margin-left: 18px;
}

/*destaques*/

.emphasis .box {
	border-radius: 4px;
	border: solid 1px #ccc;
	background-color: #fff;

}

.emphasis .box .title {
	font-size: var(--typo-p-lg);
	margin-right: -24px;
	margin-left: -24px;
	margin-top: -24px;
	padding: 16px 24px 16px 32px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	background-repeat: no-repeat;
	background-position: 18px 20px;
}




.bg-1 {
	background-color: var(--color-1);
}

.bg-2 {
	background-color: var(--color-2);
}


.bg-3 {
	background-color: var(--color-3);
}




/*botoes*/
.btn {
	border-radius: 50px;
}

.btn-eventos {
	background-color: #29649F;
	color: #fff;
}

.btn-eventos:hover {
	background-color: #235485;
	color: #fff;
}

/*rodape*/

.footer-hs {
	background: var(--color-footer);
	font-size: var(--typo-p-sm);
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}


.footer-hs img {
	margin-right: 1.5rem;
	margin-left: 1.5rem;
	display: inline-block;
}

/*botao de ir ao topo*/

.scrollToTop {
	position: fixed;
	bottom: 200px;
	right: 40px;
	z-index: 1000;
	padding: 8px;
	border-radius: 4px;
	color: var(--color-white);
	background: var(--color-primary);
	display: none;
}

.scrollToTop:hover {
	background: var(--color-primary);
	color: #fff;
}




/*barra fiocruz*/

#barra-fiocruz ul {
	background-image: url(../images/fio-direito.jpg);
	background-repeat: repeat-x;
	height: 40px;
	margin: 0px;
	padding: 0px;
	display: block;
}

#barra-fiocruz a span {
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}


#barra-fiocruz #barra-fluida-esquerda {
	background-image: url(../images/fio-esquerdo.jpg);
	background-repeat: repeat-x;
	height: 33px;
}


#barra-fiocruz li {
	display: inline;
}


#barra-fiocruz #barra-fluida-direita {
	background-image: url(../images/lado_direito.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	height: 33px;
}


#barra-fiocruz .a1 {
	background: url(../images/logo-fiocruz.jpg) no-repeat scroll 0 0;
	display: inline-block;
	height: 33px;
	width: 120px;
}

.navbar {
	display: block;
}

.navbar-nav .nav-link {
	display: block !important;
	width: 100%;
	margin-bottom: 12px;
	padding-left: 16px;
	color: var(--color-sidemenu-navlink);
	font-weight: 500;
	font: size 0.9rem;

}




/*celular*/

@media (max-width: 768px) {




	#barra-fiocruz .a4 {
		display: none;
	}

	.header-hs {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.headerp-hs .logo {
		margin-right: 8px;

	}

	.header-hs .nome-hotsite {
		margin-left: 8px;
		padding-top: 16px;

	}

	.header-hs .frase-descritiva {
		color: var(--color-white);

	}

	.unidade {
		margin-bottom: 16px;
		padding-top: 16px;
	}

	.emphasis {
		margin-top: -16px;
	}

	.main-hs {
		padding-bottom: 480px;
	}

	.footer-hs .logos-footer {
		width: 320px;
		margin: 0 auto;
		margin-bottom: 16px;
	}

	.w-sm-100 {
		width: 100%;
		margin-bottom: 0.5rem;
		display: block;
	}

}


/*Tablet*/

@media (min-width: 769px) and (max-width: 1198px) {

	#barra-fiocruz .a4 {
		background: rgba(0, 0, 0, 0) url(../images/logo-fiocruz-d.jpg) no-repeat scroll 0 0;
		display: inline-block;
		height: 33px;
		width: 180px;

	}

	.header-hs {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.header-hs .logo {
		margin-right: 16px;
	}


	.header-hs .texto {
		padding-top: 16px;
		padding-bottom: 16px;
		margin-left: 16px;
		margin-right: 16px;
	}

	.header-hs .frase-descritiva {
		color: var(--color-white);

	}

	.hero {
		height: 290px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: top center;

	}

	.footer-hs {
		height: 252px;
	}

	.footer-hs .logos-footer {
		width: 480px;
		margin: 0 auto;
		margin-bottom: 16px;
	}


}



/*Desktop*/
@media (min-width: 1199px) {

	#barra-fiocruz .a4 {
		background: rgba(0, 0, 0, 0) url(../images/logo-fiocruz-d.jpg) no-repeat scroll 0 0;
		display: inline-block;
		height: 33px;
		width: 180px;
	}

	.dropdown-menu {
		width: 400px;
		right: 24px !important;
	}

	.header-hs .texto {
		width: 100%;
		margin-right: 24px;
	}

	.hero img 
	{
		height:392px;
	}
}



@media (min-width: 1200px) {

	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl {
		max-width: 1180px;
	}


	.header-hs {
		min-height: 68px;
		padding-top: 16px;
		padding-bottom: 16px;

	}


	.header-hs .topo {
		min-height: 68px;
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.header-hs .frase-descritiva {
		color: var(--color-white);
	}

	.header-hs .logo {
		margin-right: 16px;
	}

	.header-hs .texto {
		width: 62%;
		margin-left: 24px;
	}

	.sidemenu {
		width: 320px;
	}


	.footer-hs {
		height: 252px;
	}

	.footer-hs .logos-footer {
		width: 594px;
		margin: 0 auto;
		margin-bottom: 16px;
	}

}