﻿
/* GERAL
-------------------------------------------------------------------------*/

body {
	background: url(../images/bg-fundo.jpg) no-repeat top center;
	font-size: 13px;
	color: #000;
	padding-bottom: 100px;
	min-width: 798px;
}

div.voltarTopo {
	display: none;
	background: rgb(37,79,103);
    bottom: 0 !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: bold;
    width: 150px;
    padding: 8px;
	position: fixed;
	right: 30px;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}

.img-full {
	width: 100%;
	height: auto;
}


/* HEADER MENU 
------------------------------------------------------------------------- */

.header-logos {
	height: 109px;
	position: relative;
}

.header-logos .logo-genoma {
	position: absolute;
	top: 9px;
	left: 70px;
}

.header-logos .logo-ib {
	position: absolute;
	top: 36px;
	left: 335px;
}

.header-logos .logo-apoio {
	display: none;
}

.header-menu {
	position: relative;
	margin-top: 3px;
	height: 40px;
	background: rgb(37,79,103);
	position: relative;
}

.header-menu ul {
	margin: 0;
	padding: 0;
}

.header-menu li {
	display:inline;
	list-style: none; 
	margin: 0 0 0 0;
	padding: 0;
}

.header-menu .menu-link {
	background: rgb(37,79,103);
	font-size: 26px;
	color: #fff;
	padding: 7px 20px 2px 20px;
	line-height: 1.8em;
	transition: background, color 0.3s ease-in-out;
	-webkit-transition: background, color 0.3s ease-in-out;
}

.header-menu .menu-item:hover .menu-link {
	background: rgb(136,180,184);
	color: black;
	text-decoration: none;
}

.submenu {
	position: absolute;
	z-index: 2;
	top: 40px;
	left: 70px;
	display: none;
	width: auto;
}


.header-menu .menu-item:hover .submenu {
	display: block;
}

/* SUBMENU e MENU INFERIOR */

.nav-aks {
	margin: 0;
	padding: 0;
	width: 103%;
}

.nav-aks li {
	margin: 0 0 2px 0;
	padding: 0;
	list-style: none;
}

.nav-aks a {
	font-family: 'PT Sans', sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #fff;
	display: block;
	padding: 3px 1px;
}

.nav-aks .glyphicon {
	margin-right: 5px;
}

.bg-azul1 { background: rgb(16,182,235); }
.bg-azul2 { background: rgb(43,147,209); }
.bg-azul3 { background: rgb(0,112,142); }
.bg-laranja { background: rgb(249,166,27); }
.bg-laranja2 { background: rgb(220,135,38); }
.bg-vermelho { background: rgb(227,31,38); }
.bg-verde1 { background: rgb(141,198,63); }
.bg-verde2 { background: rgb(12,155,74); }

/* QUANDO NO SUBMENU */

.submenu.nav-aks {
	width: auto;
}

.submenu.nav-aks .glyphicon {
	display: none;
}

.submenu.nav-aks a {
	padding: 3px 20px 3px 5px;
}



/* HOME
------------------------------------------------------------------------- */

.content-home {

}

.barra-laranja {
	background: rgb(249,166,27);
	height: 8px;
	margin-top: 4px;
}

.bloco-vermelho{
	background: rgb(227,31,38);
	padding-bottom: 15px;
	margin-bottom: 4px;
}

.chamada {
	font-family: 'PT Sans', sans-serif;
	font-size: 48px;
	font-weight: bold;
	padding-bottom: 5px;
	background: rgb(227,31,38);
	color: #fff;
	text-align: center;
}

.subchamada {
	margin: 1px 0;
	background: #fff url(../images/grupo.jpg) no-repeat bottom left;
	width: 680px;
	height: 184px;
	float: left;
	padding: 15px 0 15px 240px;
}

.subchamada p {
	font-family: 'PT Sans', sans-serif;
	font-size: 18px;
	line-height: 1.2em;
	font-weight: bold;
	text-align: center;
	margin: 0;
	padding: 0;
}

.subimagens {
	float: left;
	width: 86px;
	margin-left: 2px;
}

.subimagens img {
	margin: 1px 0;
}

span.verde { color: rgb(12,155,74); }
span.azul { color: rgb(16,182,235); }
span.vermelho { color: rgb(227,31,38); }
span.laranja { color: rgb(249,166,27); }

/* BLOCO EMAIL */

.bloco-mail {
	background: rgb(136,180,184);
	color: #fff;
	padding: 8px 5px;
	position: relative;
	margin-bottom: 4px;
}

.bloco-mail .glyphicon {
	color: black;
	font-size: 35px;
	position: absolute;
	left: 5px;
	top: 6px;
}

.bloco-mail h3 {
	font-family: 'PT Sans', sans-serif;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.4em;
	text-transform: uppercase;
	margin: 0 0 0 45px;
	color: #fff;
}

.bloco-mail p {
	font-family: 'PT Sans', sans-serif;
	font-size: 12px;
	line-height: 1.4em;
	margin: 0 0 0 45px;
}

.bloco-mail a {
	color: #fff;
}

/* BLOCO ENDEREÇO */

.bloco-endereco {
	background: rgb(37,79,103);
	color: #fff;
	padding: 15px 7px;
}

.bloco-endereco h3 {
	font-family: 'PT Sans', sans-serif;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.4em;
	text-transform: uppercase;
	margin: 0;
}

.bloco-endereco p {
	font-family: 'PT Sans', sans-serif;
	font-size: 12px;
	line-height: 1.4em;
	margin: 0;
}




/* GERAL
------------------------------------------------------------------------- */


.titulo {
	font-family: 'PT Sans', sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: #fff;
	display: block;
	padding: 5px;
	margin-top: 4px;
	margin-bottom: 18px;
}

.titulo .glyphicon {
	margin-right: 5px;
	font-size: 0.9em;
}

p {
	font-family: 'PT Sans', sans-serif;
	font-size: 13px;
	margin-bottom: 18px;
	line-height: 1.4em;
}

.align-center {
	margin: auto;
	display: inherit;
	margin-top: 20px;
	margin-bottom: 25px;
}


/* PAGINA - Como sequenciamos o genoma?
------------------------------------------------------------------------- */

a.lnk-genoma {
	background: url('../images/ico-video.png') no-repeat center left;
	padding: 20px 0 20px 60px;
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: rgb(0,112,142);
	margin-top: 10px;
	display: block;
}


/* PAGINA - O que faz o Centro de Pesquisa sobre o Genoma Humano e Células-Tronco?
------------------------------------------------------------------------- */

.content-oquefaz .row-images {
	margin: 0;
}

.content-oquefaz .row-images .col-xs-6 {
	margin: 0;
	padding: 0;
}

.content-oquefaz .row-images img {
	width: 100%;
}

.content-oquefaz .row-videos {
	margin-top: 30px;
}

.lnk-video {
	background: url('../images/ico-video.png') no-repeat center 30px;
	padding: 5px 5px 10px 5px;
	border: 3px solid black;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-align: center;
	color: #000;
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	display: block;
	margin: 0 20px 30px 20px;
}

.lnk-video span {
	text-align: center;
	display: block;
	margin-bottom: 50px;
}

.lnk-video:hover {
	color: #000;
}

.lnk-video.amarelo {
	background-color: rgb(255,222,23);
}
.lnk-video.laranja {
	background-color: rgb(251,176,64);
}
.lnk-video.vermelho {
	background-color: rgb(241,90,41);
}


/* PAGINA - Como posso abordar esse tema com meus alunos?
------------------------------------------------------------------------- */

.content-abordaralunos .col-images img {
	width: 100%;
	margin-bottom: 20px;
}

.content-abordaralunos h1 {
	font-family: 'PT Sans', sans-serif;
	font-size: 22px;
	font-style: italic;
	font-weight: bold;
	color: rgb(141,198,63);
}

.content-abordaralunos h1.nomargin {
	margin-top: 0;
}

.content-abordaralunos h2 {
	font-family: 'PT Sans', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: rgb(12,155,74);
}

.content-abordaralunos ul {
	margin: 20px 0;
	padding-left: 20px;
}

.content-abordaralunos ol {
	margin: 20px 0;
	padding-left: 20px;
}

.content-abordaralunos ol li {
	padding-left: 20px;
	font-family: 'PT Sans', sans-serif;
	font-weight: bold;
	color: rgb(12,155,74);
}

.content-abordaralunos ol li p {
	color: black;
	margin-bottom: 10px;
}

a.lnk-cartas {
	background: url('../images/ico-download.png') no-repeat center left;
	padding: 20px 0 20px 80px;
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: rgb(12,155,74);
	margin-top: 10px;
	display: block;
}

.gallery {
	width: 70%;
	margin: auto;
	padding: 20px 80px;
	background: rgba(141,198,63,0.5);
}

.gallery ul {
	margin: 0;
}

.bx-wrapper .bx-prev {
	left: -45px;
}
.bx-wrapper .bx-next {
	right: -45px;
}

.bx-wrapper .bx-viewport {
	border: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	background: transparent;
	left: 0;
}



/* PAGINA - Como posso saber mais sobre esse tema?
------------------------------------------------------------------------- */

.content-sabermais .box {
	background: rgba(141,198,63,0.2) url('../images/ico-atalhos.png') no-repeat 20px 20px;
	padding: 20px 20px 20px 90px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-bottom: 10px;
	min-height: 90px;
}

.content-sabermais .box h2 {
	font-family: 'PT Sans', sans-serif;
	font-size: 17px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
}

.content-sabermais .box a {
	font-family: 'PT Sans', sans-serif;
	font-weight: bold;
	color: rgb(12,155,74);
}

.content-sabermais .box p {
	margin-bottom: 0;
}

.content-sabermais .box ul {
	padding-left: 20px;
}



/* RESPONSIVO */

@media (min-width: 818px) {
  .container {
    width: 798px;
  }
}

@media (max-width: 817px) {

	body {
		background: #fff;
		min-width: 100%;
	}

	.container {
		max-width: 479px;
	}

	.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
	  width: 100%;
	}

	.header-logos {
		height: 139px;
		position: relative;
	}

	.header-logos .logo-genoma {
		position: absolute;
		width: 60%;
		top: auto;
		bottom: 45px;
		left: 0;
	}

	.header-logos .logo-ib {
		position: absolute;
		width: 30%;
		top: auto;
		bottom: 50px;
		left: 70%;
	}

	.header-logos .logo-genoma img {
		width: 100%;
		height: auto;
	}

	.header-logos .logo-ib img {
		width: 100%;
		height: auto;
	}

	.header-logos .logo-apoio {
		display: block;
		position: absolute;
		top: 100px;
		right: 0;
		width: 90px;
		height: auto;
	}
	
	.content-oquefaz .row-images img {
		width: 100%;
	}

	.submenu {
		top: 40px;
		left: 0;
	}
	.submenu.nav-aks {
		width: 100%;
	}

	.col-xs-4,
	.col-xs-8 {
		width: 100%;
	}

	.align-center {
		width: 80%;
		height: auto;
	}

	.img-full {
		width: 100%;
		height: auto;
	}

	img {
		width: 100%;
	}

	.chamada {
		padding-top: 5px;
		font-size: 1.8em;
	}

	.subchamada {
		width: 100%;
		height: auto;
		padding-right: 10px;
		padding-left: 10px;
		background: #fff;
	}

	.subchamada p {
		font-size: 1.2em;
	}

	.subimagens {
		width: 100%;
		text-align: center;
		margin: 0;
	}

	.subimagens img {
		width: 32%;
	}

	.nav-aks {
		width: 100%;
	}


	.width50 {
		width:50%;
	}

	.width30 {
		width:30%;
	}

	.gallery {
		width: 100%;
		margin: auto;
		padding: 20px 20px;
		background: rgba(141,198,63,0.5);
	}

	.gallery ul {
		margin: 0;
	}

	.bx-wrapper .bx-prev {
		left: 10px;
	}
	.bx-wrapper .bx-next {
		right: 10px;
	}

	.bx-wrapper .bx-viewport {
		border: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		background: transparent;
		left: 0;
	}

}






