/******************** JQUERY ********************/

/* Oculta Objetos */
.bt-lupa-mobile {
	display:none;
}

/* Botão subir para topo */
.jquery-up {
	display:none;
	position:fixed;
	bottom:20px;
	right:20px;
	cursor:pointer;
}

/******************** GERAL MOBILE ********************/

@font-face {
    font-family:'aileronregular';
    src:url('fontes/aileron-regular-webfont.ttf');
}

/* RESET */

* {
	margin:0;
	padding:0;
	border:none;
	font-family:'aileronregular'; 
	box-sizing:border-box; /* Impede que o padding expanda os elementos */
	outline:none; /* Remove borda do chrome */
}

html, body{
	width:100%;
	height:100%;
	background-color:#E1E1E1;
}

/******************** TOPO ********************/

header {
	width:100%;
	height:210px;
	background-color:#FFF;
	padding-bottom:15px;
	border-bottom:1.5px solid #E3E3E3;
}

header > .area {
	width:100%;
	height:210px;
	text-align:center;
}

header > .area > .logo > img {
	margin-top:30px;
	height:80px;
}

header > .area > form {
	width:90%;
	margin-left:5%;
	margin-top:25px;
	/* interno */
	display:flex;
	align-items:center;
}

header > .area > form > input[name=busca] {
	width:100%;
	height:50px;
	float:left;
	padding-left:20px;
	font-size:15px;
	color:#777;
	border-radius:25px 0 0 25px;
	background-color:#F1F1F1;
	border:1px solid #F1F1F1;
}

header > .area > form > input[name=busca]:focus {
	border:1px solid #CCC;
}

header > .area > form > .bt-lupa {
	width:60px;
	height:50px;
	float:left;
	cursor:pointer;
	border-radius:0 25px 25px 0;
	background-color:#0055A2; /* Azul */
	background-image:url(img/lupa.png);
	background-size:30px 30px;
	background-position:10px center;
	background-repeat:no-repeat;
}

/******************** SECTION ********************/

section {
	width:100%;
	display:flex;
}

section > .area {
	width:100%;
	margin:0 auto;
}

/******************** DESTAQUES ********************/

section > .area > .destaque {
	width:92%;
	float:left;
	margin-left:4%;
}

section > .area > .destaque > a {
	float:left;
	margin-top:20px;
}

section > .area > .destaque > a:last-child {
	margin-bottom:20px;
}

section > .area > .destaque > a > img {
	width:100%;
	border-radius:15px;
}

/******************** TITULOS ********************/

section > .area > .titulo {
	width:100%;
	height:40px;
	/* interno */
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:18px;
	font-weight:bold;
	color:#0055A2;
}

/******************** ATIVIDADES ********************/

section > .area > .atividade {
	width:96%;
	margin-left:2%;
	margin-top:15px;
	float:left;
}

section > .area > .atividade > .bt {
	float:left;
	width:50%;
	height:50px;
	margin-bottom:12px;
	/* interno */
	display:flex;
	align-items:center;
	justify-content:center;
}

section > .area > .atividade > .bt > a {
	width:96%;
	height:50px;
	padding-right:10px;
	background-color:#FFF;
	border-radius:10px;
	text-decoration:none;
	font-size:15px;
	color:#0055A2;
	/* interno */
	display:flex;
	align-items:center;
}

section > .area > .atividade > .bt > a > img {
	width:16px;
	height:16px;
	margin:0 10px 0 15px;
}

/******************** RODAPE ********************/

footer {
	width:100%;
	float:left;
	margin-top:10px;
	background-color:#0055A2;
	padding-top:20px;
	padding-bottom:40px;
}

footer > .texto > a {
	display:block;
	width:90%;
	height:50px;
	margin-top:18px;
	margin-left:5%;
	text-align:center;
	line-height:50px;
	font-size:15px;
	text-decoration:none;
	color:#FFF;
	background-color:#003362;
	border-radius:8px;
}

footer .texto .hide-mobile {
	display:none;
}