/*
Theme Name: AFID Inscrições Online
Author: ESTREIA New Media
Author URI: https://estreia.net
Description: Custom theme for AFID, Apr.2020
Version: 1.0
License: Proprietary
License URI: https://estreia.net
*/

/*--------------------------------------------------------------
1.0 Normalize
Styles based on Normalize v5.0.0 @link https://github.com/necolas/normalize.css
--------------------------------------------------------------*/

html {
	height: 100%;
	font-size: 62.5%;
	-ms-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow: auto;
	margin: 0 auto;
}

body {
	height: 100%;
	background-image: url('media/bg.jpg');
	background-position: right top;
	background-size: 50% auto;
	background-repeat: no-repeat;
	background-color: #40505f;
	font-family: 'Work Sans', Verdana, sans-serif;
	font-size: 1.7rem; /* 17px */
	color: #40505f;
	text-align: center;
	transition: all 1s;
	-webkit-animation: fadein 1s;
	animation: fadein 1s;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 0 auto;
	padding: 0;
}

/* Mobile */
@media ( max-width: 767px ) {
	body {
		background-size: 70% auto;
	}
}

/* -- body fade transition -- */
@-webkit-keyframes fadein { from {opacity:0} to {opacity:1} }
@keyframes fadein { from {opacity:0} to {opacity:1} }

article,
aside,
footer,
header,
nav,
section,
main {
	display: block;
}

hr {
	height: 0;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	overflow: visible;
}

b,
strong {
	font-weight: 600;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

img {
	border-style: none;
	display: inline-block;
}

p {
	margin: 0 0 2rem;
	padding: 0;
}

em,
i {
	font-style: italic;
}

:focus {
	outline: none;
}





/*--------------------------------------------------------------
LINKS
--------------------------------------------------------------*/

a {
	background-color: transparent;
	color: #40505f;
    text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	color: #40505f;
	outline-width: 0;
	outline: 0;
}






/*--------------------------------------------------------------
MISCELANEA
--------------------------------------------------------------*/

/* Accessibility style for text readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

/* Force pointer cursor on hover */
.handCursor:hover {
	cursor: pointer !important;
}

/* Rulers */
hr {
	height: 1px;
	background-color: #ffffff;
	border: 0;
	margin: 0.8vw 0 0.8vw 0;
}

[hidden] {
	display: none;
}




/*--------------------------------------------------------------
FORMS
--------------------------------------------------------------*/

form {
	display: inline-block;
}

.formSeparator {
	text-align: left;
	padding: 0.3vw 1vw;
	display: block;
	clear: both;
}

@media (max-width: 767px) {
	.formSeparator {
		padding: 1vw 0.3vw;
	}
}

.formSeparatorLegal {
	text-align: center;
	padding: 1vw;
	display: block;
	clear: both;
}

.formSeparatorLegal a {
	color: #40505f;
	text-decoration: underline;
}

.formSeparatorSubmit {
	text-align: center;
	display: block;
	clear: both;
}

.admin .formSeparatorSubmit {
	padding-top: 1vw;
}

@media (max-width: 767px) {
	.formSeparatorSubmit {
		padding: 2vw 0;
	}
}

label {
	width: calc(50% - 0.4vw);
	color: #40505f;
	font-size: 1.2vw;
	text-align: right;
	vertical-align: middle;
	padding: 5px 0.5vw 5px 0;
    margin: 0;
    display: inline-block;
}

@media (max-width: 1366px) {
	label {
		font-size: 1.5vw;
	}
}

@media (max-width: 1023px) {
	label {
		font-size: 1.8vw;
	}
}

@media (max-width: 767px) {
	label {
    	width: 44% !important;
		font-size: 3vw;
		padding: 5px 2vw 5px 0;
	}
}

/* SENIOR */
.senior label {
	width: calc(43% - 0.4vw);
}

/* COLABORADORES */
.colaboradores label {
	width: calc(40% - 0.4vw);
}

/* VOLUNTARIADO */
.voluntariado label {
	width: calc(35% - 0.4vw);
}

@media (max-width: 767px) {
	.voluntariado #labelAreas {
		width: auto !important;
		text-align: center;
		display: block;
	}
}

/* ADMIN */
.login label {
	width: 80px;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	opacity: 1;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

[type="checkbox"],
[type="radio"] {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	width: 50%;
	height: 40px;
	background-color: #ffffff;
	font-family: inherit; /* reset style from jQuery UI */
	font-size: 1.2vw;
	font-weight: 400;
	color: #40505f;
	/*color: #5e5e5e;*/
	line-height: 40px;
	text-align: left;
	vertical-align: middle;
	padding: 0 1vw;
    margin: 0;
	border: 0;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important; /* reset browser default styles */
	border-radius: 20px;
	display: inline-block;
	overflow: hidden;
}

@media (max-width: 1366px) {
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="range"],
	input[type="date"],
	input[type="month"],
	input[type="week"],
	input[type="time"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="color"],
	textarea {
		font-size: 1.5vw;
	}
}

@media (max-width: 1023px) {
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="range"],
	input[type="date"],
	input[type="month"],
	input[type="week"],
	input[type="time"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="color"],
	textarea {
		height: 30px;
		font-size: 1.8vw;
		line-height: 30px;
		padding: 0 2vw;
		border-radius: 15px;
	}
}

@media (max-width: 767px) {
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="range"],
	input[type="date"],
	input[type="month"],
	input[type="week"],
	input[type="time"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="color"],
	textarea {
		font-size: 3vw;
		padding: 0 3vw;
	}
}

input[type="date"] {
	padding: 7px 1vw;
}

@media (max-width: 767px) {
	input[type="date"] {
		padding: 0 2.5vw;
	}
}

/* Admin - Login */
#formLogin input[type="email"],
#formLogin input[type="password"] {
	width: 300px;
}

textarea {
	height: 120px;
	line-height: initial;
	padding: 0.8vw 1vw;
	overflow: auto;
}

@media (max-width: 767px) {
	textarea {
		padding: 2vw 3vw;
	}
}

select {
	max-width: 50%;
	height: 40px;
	background-color: #ffffff;
	background-image: url('media/icon_select.png');
	background-position: right center;
	background-repeat: no-repeat;
	font-family: inherit; /* reset style from jQuery UI */
	font-size: 1.2vw;
	font-weight: 400;
	color: #40505f;
	/*color: #5e5e5e;*/
	line-height: 40px;
	text-align: left;
	vertical-align: middle;
	padding: 0 60px 0 1vw;
    margin: 0;
	border: 0;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important; /* reset browser default styles */
	border-radius: 20px;
	display: inline-block;
}

@media (max-width: 1366px) {
	select {
		font-size: 1.5vw;
	}
}

@media (max-width: 1023px) {
	select {
		height: 30px;
		font-size: 1.8vw;
		background-position: calc(100% + 5px) center;
		background-size: 5vw;
		line-height: 30px;
		border-radius: 15px;
	}
}

@media (max-width: 767px) {
	select {
		background-position: calc(100% + 5px) center;
		background-size: initial;
		font-size: 3vw;
		padding: 0 40px 0 3vw;
	}
}

select:hover {
	cursor: pointer;
}

header select {
	color: #40505f;
}

#servico {
	max-width: 100%;
}

/* IE */
.ie select {
	background-image: none;
	padding: 10px 1vw;
}

.ie header select {
	width: 300px;
}

/* Upload */
input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

#labelCV {
	width: 50%;
	height: 40px;
	background-color: #ffffff;
	background-image: url('media/icon_upload.png');
	background-position: right top;
	background-repeat: no-repeat;
	font-family: inherit; /* reset style from jQuery UI */
	font-size: 1.2vw;
	font-weight: 400;
	color: #40505f;
	/*color: #5e5e5e;*/
	line-height: 40px;
	text-align: left;
	vertical-align: middle;
	padding: 0 1vw;
    margin: 0;
	border: 0;
	border-radius: 20px;
	transition: all 0.3s;
	display: inline-block;
	overflow: hidden;
}

@media (max-width: 1366px) {
	#labelCV {
		font-size: 1.5vw;
	}
}

@media (max-width: 1023px) {
	#labelCV {
		height: 30px;
		font-size: 1.8vw;
		background-size: 7.5vw;
		line-height: 30px;
		border-radius: 15px;
	}
}

@media (max-width: 767px) {
	#labelCV {
		font-size: 3vw;
		padding: 0 3vw;
	}
}

#labelCV:hover {
	background-position: right bottom;
	color: #999999;
	cursor: pointer;
}		

button,
input[type="button"],
input[type="submit"] {
	position: relative;
	height: 40px;
	background-color: #ffffff;
	font-size: 1.2vw;
	font-weight: 400;
	color: #40505f;
	line-height: 40px;
	white-space: nowrap;
	text-align: center;
	padding: 0 25px;
	margin: 0 1vw;
	border: 0;
	border-radius: 20px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
	display: inline-block;
	cursor: pointer;
}

@media (max-width: 1366px) {
	button,
	input[type="button"],
	input[type="submit"] {
		font-size: 1.5vw;
	}
}

@media (max-width: 1023px) {
	button,
	input[type="button"],
	input[type="submit"] {
		font-size: 1.8vw;
	}
}

@media (max-width: 767px) {
	button,
	input[type="button"],
	input[type="submit"] {
		font-size: 4vw;
	}
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
	background-color: #40505f;
	color: #ffffff;
}

button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
	outline: 0;
}

/* Reset */
input.reset {
	background-color: #ffffff;
	color: #40505f;
}

input.reset:hover {
	background-color: #40505f;
	color: #ffffff;
}

/* Submit */
input[type="submit"] {
	background-color: #40505f;
	color: #ffffff;
	background-position: calc(100% + 5px) -5px;
	background-repeat: no-repeat;
    text-align: left;
	padding-right: 50px;
}

input[type="submit"]:hover {
	background-position: calc(100% + 5px) -55px;
}

/* Submit Generic */
.generic input[type="submit"] {
	background-image: url('media/icon_submit_generic.png');
}

/* Submit Senior */
.senior input[type="submit"] {
	background-image: url('media/icon_senior.png');
}

/* Submit Kids */
.kids input[type="submit"] {
	background-image: url('media/icon_kids.png');
}

/* Submit Reab */
.reab input[type="submit"] {
	background-image: url('media/icon_reab.png');
}

/* Submit Formação */
.formacao input[type="submit"] {
	background-image: url('media/icon_formacao.png');
}

/* Submit Colaboradores */
.colaboradores input[type="submit"] {
	background-image: url('media/icon_colaboradores.png');
}

/* Submit Voluntariado */
.voluntariado input[type="submit"] {
	background-image: url('media/icon_voluntariado.png');
}

/* Submit Login */
.login input[type="submit"] {
	background-image: url('media/icon_colaboradores.png');
}

/* Codigo Postal */
#cp1, #cp12 {
	width: 30%;
	margin-right: 0.5vw;
}

#cp2, #cp22 {
	width: 18%;
}

/* Conheceu a AFID - outra fonte */
#formOutraFonte {
	display: none;
}

/* REAB - Lar/CAO */
#divAgregado,
#divFrequencia,
#divRendimento {
	display: none;
}

/* REAB - UADI Serviço Infantil */
#divNascimento,
#divServicoInfantil {
	display: none;
}

/* Notas */
.note {
	font-size: 1.2vw;
	font-weight: 300;
	padding-left: 0.5vw;
	display: inline-block;
}

@media (max-width: 1366px) {
	.note {
		font-size: 1.5vw;
	}
}

@media (max-width: 767px) {
	.note {
		font-size: 3vw;
	}
}

.dim {
	color: #999999;
}

/* CHECKBOX styles */

input[type="checkbox"] {
	margin-right: 0.5em;
}

.checkboxLabel {
	position: relative;
	width: auto !important;
	font-size: 1.2vw;
	font-weight: 400;
	text-align: left;
	padding: 5px 0 5px 30px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	display: inline-block;
	cursor: pointer;
}

@media (max-width: 1366px) {
	.checkboxLabel {
		font-size: 1.5vw;
	}
}

@media (max-width: 1023px) {
	.checkboxLabel {
		font-size: 1.8vw;
	}
}

@media (max-width: 767px) {
	.checkboxLabel {
		font-size: 3vw;
	}
}

/* Hide the browser's default checkbox */
.checkboxLabel input[type="checkbox"] {
	position: absolute;
	top: 0;
    left: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0;
	z-index: 900;
}

/* Create a custom checkbox */
.customCheckbox {
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: #ffffff;
	border: 0;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
	transform: translateY(-50%);
	border-radius: 3px;
	z-index: 1000;
}

/* When the checkbox is checked, add a background */
label input:checked ~ .customCheckbox {
	background-color: #ffffff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.customCheckbox:after {
	position: absolute;
	content: "";
	display: none;
}

/* Show the checkmark when checked */
label input:checked ~ .customCheckbox:after {
	display: block;
}

/* Style the checkmark/indicator */
label .customCheckbox:after {
	top: 4px;
	left: 6px;
	width: 7px;
	height: 12px;
	border: solid #40505f;
	border-width: 0 4px 4px 0 !important;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* RADIO BUTTON custom styles */
input[type="radio"] {
	vertical-align: middle;
	margin-right: 0.5em;
}

.radioLabel {
	position: relative;
	font-size: 1.2vw;
	font-weight: 400;
	padding-left: 30px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	display: inline;
	cursor: pointer;
}

@media (max-width: 1366px) {
	.radioLabel {
		font-size: 1.5vw;
	}
}

@media (max-width: 1023px) {
	.radioLabel {
		font-size: 1.8vw;
	}
}

@media (max-width: 767px) {
	.radioLabel {
		font-size: 3vw;
	}
}

/* Hide the browser's default Radio button */
.radioLabel input[type="radio"] {
	position: absolute;
	top: 0;
    left: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0;
	z-index: 900;
}

/* Create a custom Radio button */
.customRadio {
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: #ffffff;
	border: 0;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
	transform: translateY(-50%);
	border-radius: 50%;
	z-index: 1000;
}

/* On mouse-over, add a dark background color */
.radioLabel:hover input ~ .customRadio {
	background-color: #ffffff;
}

/* When the Radio button is checked, add a background */
label input:checked ~ .customRadio {
	background-color: #ffffff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.customRadio:after {
	position: absolute;
	content: "";
	display: none;
}

/* Show the Radio button when checked */
label input:checked ~ .customRadio:after {
	display: block;
}

/* Style the checkmark/indicator */
label .customRadio:after {
	top: 4px;
	left: 4px;
	width: 12px;
	height: 12px;
	background-color: #40505f;
	border-radius: 50%;
}

/* Autofill - force transparent bg on input fields */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: background-color 0s 5000s;
}

/* Placeholder text styles -- selectors need to be separate to work. */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	font-size: 1.2vw;
	font-weight: 300;
	color: #bebebe !important;
	/*color: #b3bac7 !important;*/
    opacity: 1; /* Firefox */
}

@media (max-width: 1366px) {
	::placeholder {
		font-size: 1.5vw;
	}
}

@media (max-width: 1023px) {
	::placeholder {
		font-size: 1.8vw;
	}
}

@media (max-width: 767px) {
	::placeholder {
		font-size: 3vw;
	}
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	font-size: 1.2vw;
	font-weight: 300;
	color: #bebebe !important;
	/*color: #b3bac7 !important;*/
}

@media (max-width: 1366px) {
	:-ms-input-placeholder {
		font-size: 1.5vw;
	}
}

@media (max-width: 1023px) {
	:-ms-input-placeholder {
		font-size: 1.8vw;
	}
}

@media (max-width: 767px) {
	:-ms-input-placeholder {
		font-size: 3vw;
	}
}

::-ms-input-placeholder { /* Microsoft Edge */
	font-size: 1.2vw;
	font-weight: 300;
	color: #bebebe !important;
	/*color: #b3bac7 !important;*/
}

@media (max-width: 1366px) {
	::-ms-input-placeholder {
		font-size: 1.5vw;
	}
}

@media (max-width: 1023px) {
	::-ms-input-placeholder {
		font-size: 1.8vw;
	}
}

@media (max-width: 767px) {
	::-ms-input-placeholder {
		font-size: 3vw;
	}
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	font-size: 1.2vw;
	font-weight: 300;
	color: #bebebe !important;
	/*color: #b3bac7 !important;*/
}

@media (max-width: 1366px) {
	::-webkit-input-placeholder {
		font-size: 1.5vw;
	}
}

@media (max-width: 1023px) {
	::-webkit-input-placeholder {
		font-size: 1.8vw;
	}
}

@media (max-width: 767px) {
	::-webkit-input-placeholder {
		font-size: 3vw;
	}
}

::-moz-placeholder { /* Firefox 19+ */
	font-size: 1.2vw;
	font-weight: 300;
	color: #bebebe !important;
	/*color: #b3bac7 !important;*/
	opacity: 1; /* by default, placeholders in Firefox have an opacity value applied to them, so lets clear that  */
}

@media (max-width: 1366px) {
	::-moz-placeholder {
		font-size: 1.5vw;
	}
}

@media (max-width: 1023px) {
	::-moz-placeholder {
		font-size: 1.8vw;
	}
}

@media (max-width: 767px) {
	::-moz-placeholder {
		font-size: 3vw;
	}
}

:-moz-placeholder { /* Firefox 18- */
	font-size: 1.2vw;
	font-weight: 300;
	color: #bebebe !important;
	/*color: #b3bac7 !important;*/
	opacity: 1; /* by default, placeholders in Firefox have an opacity value applied to them, so lets clear that  */
}

@media (max-width: 1366px) {
	:-moz-placeholder {
		font-size: 1.5vw;
	}
}

@media (max-width: 1023px) {
	:-moz-placeholder {
		font-size: 1.8vw;
	}
}

@media (max-width: 767px) {
	:-moz-placeholder {
		font-size: 3vw;
	}
}

:-ms-input-placeholder { /* IE 10+ */
	font-size: 1.5rem;
	font-weight: 300;
	color: #bebebe !important;
	/*color: #b3bac7 !important;*/
}

@media (max-width: 1366px) {
	:-ms-input-placeholder { /* IE 10+ */
		font-size: 1.5vw;
	}
}

@media (max-width: 1023px) {
	:-ms-input-placeholder { /* IE 10+ */
		font-size: 1.8vw;
	}
}

@media (max-width: 767px) {
	:-ms-input-placeholder { /* IE 10+ */
		font-size: 3vw;
	}
}






/*--------------------------------------------------------------
ADMIN - resultados
--------------------------------------------------------------*/

.formSeparator .bdContent {
	width: 50%;
	min-height: 40px;
	background-color: transparent;
	font-size: 1.2vw;
	font-weight: 400;
	color: #40505f;
	line-height: 20px;
	text-align: left;
	vertical-align: middle;
	padding: 10px 1vw;
    margin: 0;
	border: 2px solid #ffffff;
	border-radius: 20px;
	display: inline-block;
}

@media (max-width: 1366px) {
	.formSeparator .bdContent {
		font-size: 1.5vw;
	}
}

@media (max-width: 1023px) {
	.formSeparator .bdContent {
		min-height: 30px;
		font-size: 1.8vw;
		padding: 5px 2vw;
		border-radius: 15px;
	}
}

@media (max-width: 767px) {
	.formSeparator .bdContent {
		font-size: 3vw;
		padding: 5px 3vw;
	}
}





/*--------------------------------------------------------------
ALIGNMENTS
--------------------------------------------------------------*/

.clear {
	clear: both;
}

.alignleft {
	float: left;
	margin-right: 2rem;
}

.alignright {
	float: right;
	margin-left: 2rem;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}





/*--------------------------------------------------------------
BUTTONS
--------------------------------------------------------------*/
a.button {
	position: relative;
	height: 2.2vw;
	background-color: #ffffff;
	font-size: 1.2vw;
	font-weight: 400;
	color: #40505f;
	font-weight: 300;
	line-height: 2.3vw;
	text-align: center;
	white-space: nowrap;
    padding: 0 1.4vw;
	border-radius: 1.1vw;
    transition: all 0.3s;
	display: inline-block;
}

@media (max-width: 1366px) {
	a.button {
		height: 2.8vw;
		font-size: 1.5vw;
		line-height: 2.9vw;
		padding: 0 1.8vw;
		border-radius: 1.4vw;
	}
}

@media (max-width: 1023px) {
	a.button {
		height: 3.1vw;
		font-size: 1.8vw;
		line-height: 3.1vw;
	}
}

@media (max-width: 767px) {
	a.button {
		height: 6vw;
		font-size: 4vw;
		line-height: 6vw;
	}
}

a.button:hover {
	background-color: #e3eaf5 !important;
}

a.button:focus {
	outline: 0;
}





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

header {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 160px;
	transition: all 0.4s;
	z-index: 2000;
}

/* Mobile */
@media ( max-width: 767px ) {
	header {
		height: calc(100px + 10vw);
	}
}

#logo {
	position: absolute;
	top: 33px;
	left: 3vw;
	color: #ffffff;
	font-size: 2vw;
    font-weight: 300;
	line-height: 3vw;
	transition: all 0.2s;
	display: block;
	z-index: 1100;
}

@media (max-width: 1366px) {
	#logo {
		font-size: 2.8vw;
	}
}

@media (max-width: 767px) {
	#logo {
		top: 15px;
	}
}

#logo img {
	width: 185px;
	height: 94px;
	margin-right: 1.5vw;
	transition: all 0.2s;
	vertical-align: middle;
	display: inline-block;
}

/* Mobile */
@media (max-width: 767px) {
	#logo img {
		width: auto;
		height: 65px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	#logo span {
		display: none;
	}
}

/* Websites select */
header form {
	position: absolute;
	top: 55px;
	right: 3vw;
	z-index: 2000;
}

/* Mobile */
@media (max-width: 767px) {
	header form {
		top: 35px;
	}
}

header form select {
	width: 180px;
	max-width: initial;
	height: 40px;
	background-image: url('media/icon_select.png');
	background-position: right center;
	font-size: 1.7rem;
	font-weight: 400;
	line-height: 40px;
	border-radius: 20px;
	padding: 0 60px 0 20px;
	margin: 0;
}

/* Mobile */
@media (max-width: 767px) {
	header form select {
		width: 150px;
		height: 30px;
		background-position: calc(100% + 5px) center;
		background-size: initial;
		line-height: 30px;
		border-radius: 15px;
		padding: 0 40px 0 20px;
	}
}







/*--------------------------------------------------------------
MAIN
--------------------------------------------------------------*/
main {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	padding-bottom: 0.5vw;
	z-index: 100;
}






/*--------------------------------------------------------------
TOP content
--------------------------------------------------------------*/

#topContent {
	position: relative;
	top: 0;
	width: 94vw;
	background-color: #ffffff;
	text-align: left;
	border-radius: 5px 5px 0 0;
	padding: 1vw 2vw;
	margin: 0 auto;
	z-index: 500;
}

/* Mobile */
@media (max-width: 767px) {
	#topContent {
		width: 100vw;
		text-align: center;
		border-radius: 0;
		padding: 3vw;
	}
}

@media (max-width: 767px) {
	#topContent > article {
		padding-top: 25px;
	}
}

/* ADMIN */
.admin #topContent {
	padding: 2vw 2vw 1vw 2vw;
}

.admin.logged #topContent {
	border-top-right-radius: 0;
}

#topContent h1 {
	position: relative;
	width: 65vw;
	font-size: 3.4vw;
    font-weight: 300;
	padding: 0.5vw 0 0 0;
	margin: 0;
}

/* Mobile */
@media (max-width: 767px) {
	#topContent h1 {
		width: auto;
		font-size: 10vw;
		line-height: 100%;
		padding: 0.5vw 0 3vw 0;
	}
}

.admin #topContent h1 {
	padding: 0;
}

/* ADMIN mobile */
@media (max-width: 767px) {
	.admin #topContent h1 {
		width: 85vw;
		font-size: 6vw;
		text-align: left;
		padding: 0.5vw 0 3vw 0;
	}
}

.mainContent h4 {
	font-size: 2vw;
	font-weight: 500;
	color: #40505f;
	margin: 0;
}

@media (max-width: 1366px) {
	.mainContent h4 {
		font-size: 2.4vw;
	}
}

#topContent h2 {
	position: relative;
	width: 65vw;
	font-size: 1.2vw;
	font-weight: 400;
	margin: 0 0 1vw 0;
	padding: 0;
}

@media (max-width: 1366px) {
	#topContent h2 {
		font-size: 1.5vw;
	}
}

/* Mobile */
@media (max-width: 767px) {
	#topContent h2 {
		width: auto;
		font-size: 4vw;
		text-align: justify;
	}
}

#topContent h2 a {
    font-weight: 500;
    text-decoration: underline;
}

/* Login mobile */
.adminHome #topContent h2 {
	font-size: 1.7rem;
}

/* Button back */
a.btBack {
	width: 40px;
	height: 40px;
	background-color: #e3eaf5;
	background-image: url("media/icon_back.png");
	background-position: center center;
	background-repeat: no-repeat;
	vertical-align: middle;
	border-radius: 50%;
	border: 1px solid #e3eaf5;
	overflow: hidden;
	display: inline-block;
}

a.btBack:hover {
	background-color: #ffffff;
}

/* Button Ver Todas */
a.btTodas {
	width: 100%;
	height: 40px;
	background-color: #ffffff;
	color: #40505f;
	line-height: 40px;
	text-decoration: none !important;
	border-radius: 5px;
	border-top: 1px solid #e3eaf5;
	display: block;
}

a.btTodas:hover {
	font-weight: 600;
}








/*--------------------------------------------------------------
CONTACTS
--------------------------------------------------------------*/

#contacts {
	position: absolute;
	bottom: 2vw;
	right: 2vw;
	background-color: #ffffff;
	font-size: 1.2vw;
	text-align: right;
	box-shadow: 0px 0px 5px 0px #c1d0de;
	border-radius: 5px;
	overflow: hidden;
	display: block;
}

@media (max-width: 1366px) {
	#contacts {
		font-size: 1.5vw;
	}
}

@media (max-width: 767px) {
	#contacts {
		position: absolute;
		top: 0;
		bottom: initial;
		left: 0;
		right: 0;
		width: 100vw;
		background-color: #e3eaf5;
		font-size: 4vw;
		text-align: center;
		box-shadow: none;
		border-radius: 0;
	}
}

#contacts a {
	position: relative;
	color: #40505f;
	padding: 1vw 1vw 1vw 4vw;
    transition: all 0.4s;
	display: block;
	z-index: 600;
}

@media (max-width: 767px) {
	#contacts a {
		padding: 1vw !important;
		display: inline-block;
	}
}

#contacts a:first-of-type {
	padding-bottom: 0.3vw;
}

#contacts a:last-of-type {
	padding-top: 0.3vw;
}

#contacts a:hover {
	background-color: #e4eaf3;
}

#contacts img {
	position: absolute;
	top: 50%;
	left: 0px;
	width: auto;
	height: 100%;
	transform: translateY(-50%);
	z-index: 700;
}

@media (max-width: 767px) {
	#contacts img {
		display: none;
	}
}








/*--------------------------------------------------------------
SETTINGS
--------------------------------------------------------------*/

#settings {
	position: absolute;
	bottom: 1.5vw;
	right: 2vw;
	width: 40px;
	height: 40px;
	background-image: url('media/icon_settings.png');
	background-position: center top;
	background-repeat: no-repeat;
    transition: all 0.3s;
	display: block;
}

@media (max-width: 767px) {
	#settings {
		bottom: 4.5vw;
		right: 3vw;
	}
}

#settings:hover {
	background-position: center bottom;
}






/*--------------------------------------------------------------
MAIN content
--------------------------------------------------------------*/

.mainContent {
	position: relative;
	top: 0px;
	width: 96vw;
	background-color: #ffffff;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;	
	-ms-align-items: stretch;
	-webkit-align-items: stretch;
	align-items: stretch;
	-ms-align-content: flex-start;
	-webkit-align-content: flex-start;
	align-content: flex-start;
	-ms-justify-content: center;
	-webkit-justify-content: center;
	justify-content: center;
	text-align: center;
	border-radius: 5px;
	margin: 0 auto;
	z-index: 1000;
}

@media (max-width: 767px) {
	.mainContent {
		width: 100vw;
		display: block !important;
		border-radius: 0;
	}
}

.mainContent article {
	position: relative;
    -ms-flex-shrink: 0;
    -webkit-flex-shrink: 0;
	flex-shrink: 0;
	background-color: #e3eaf5;
	color: #40505f;
	border-radius: 5px;
	margin: 0 0.5vw;
}

/* Mobile */
@media (max-width: 767px) {
	.mainContent article {
		border-radius: 0;
		padding: 4vw !important;
		margin: 0;
	}
}

/* Senior */
.senior .mainContent article {
	background-color: #e3eaf5;
}

/* Kids */
.kids .mainContent article {
	background-color: #f3e5f0;
}

/* Reab */
.reab .mainContent article {
	background-color: #ddece0;
}

/* Formação */
.formacao .mainContent article {
	background-color: #f5ece3;
}

/* Colaboradores */
.colaboradores .mainContent article {
	background-color: #f5efd9;
}

/* Voluntariado */
.voluntariado .mainContent article {
	background-color: #ede6f3;
}

.mainContent h3 {
	font-size: 1.5vw;
	font-weight: 600;
	color: #40505f;
}

@media (max-width: 1366px) {
	.mainContent h3 {
		font-size: 1.7vw;
	}
}

@media (max-width: 767px) {
	.mainContent h3 {
		font-size: 5vw;
		margin: 0 0 1vw 0;
	}
}

.mainContent h4 {
	font-size: 2vw;
	font-weight: 500;
	color: #40505f;
	margin: 0;
}

@media (max-width: 1366px) {
	.mainContent h4 {
		font-size: 2.4vw;
	}
}

.mainContent h5 {
	font-size: 1.2vw;
	font-weight: 400;
	margin-top: 0.5vw;
}

@media (max-width: 1366px) {
	.mainContent h5 {
		font-size: 1.5vw;
	}
}

.mainContent a {
	color: #40505f;
	text-decoration: underline;
}

/* 2 COLS content (Senior / Kids / Reab / Formacao) */
.senior .mainContent article:first-of-type,
.kids .mainContent article:first-of-type,
.reab .mainContent article:first-of-type,
.formacao .mainContent article:first-of-type {
    -ms-flex-basis: calc(55% - 0.5vw);
    -webkit-flex-basis: calc(55% - 0.5vw);
    flex-basis: calc(55% - 0.5vw);
	padding-bottom: 1.5vw;
	margin-right: 0.5vw;
}

/* Mobile */
@media (max-width: 767px) {
	.senior .mainContent article:first-of-type,
	.kids .mainContent article:first-of-type,
	.reab .mainContent article:first-of-type,
	.formacao .mainContent article:first-of-type {
		-ms-flex-basis: initial;
		-webkit-flex-basis: initial;
		flex-basis: initial;
		border-radius: 0;
		margin: 0;
	}
}

.senior .mainContent article:last-of-type,
.kids .mainContent article:last-of-type,
.reab .mainContent article:last-of-type,
.formacao .mainContent article:last-of-type {
    -ms-flex-basis: calc(45% - 0.5vw);
    -webkit-flex-basis: calc(45% - 0.5vw);
    flex-basis: calc(45% - 0.5vw);
	padding-bottom: 1.5vw;
	margin-left: 0.5vw;
}

/* Internet Explorer */
.ie .senior .mainContent article:last-of-type,
.ie .kids .mainContent article:last-of-type,
.ie .reab .mainContent article:last-of-type,
.ie .formacao .mainContent article:last-of-type {
	margin-left: 0vw;
}

/* Mobile */
@media (max-width: 767px) {
	.senior .mainContent article:last-of-type,
	.kids .mainContent article:last-of-type,
	.reab .mainContent article:last-of-type,
	.formacao .mainContent article:last-of-type {
		-ms-flex-basis: initial;
		-webkit-flex-basis: initial;
		flex-basis: initial;
		border-top: 5px solid #ffffff;
		border-radius: 0;
		margin: 0;
	}
}

/* 2 COLS content (Admin) */
.adminHome .mainContent {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
	flex-wrap: wrap;	
}

.adminHome .mainContent article {
    -ms-flex-basis: calc(50% - 0.5vw);
    -webkit-flex-basis: calc(50% - 0.5vw);
    flex-basis: calc(50% - 0.5vw);
	padding-bottom: 1.5vw;
	overflow: hidden;
}

.adminHome .mainContent article:nth-child(odd) {
    margin: 0 0.5vw 1vw 0;
}

.adminHome .mainContent article:nth-child(even) {
    margin: 0 0 1vw 0.5vw;
}

/* Mobile */
@media (max-width: 767px) {
	.adminHome .mainContent article {
		-ms-flex-basis: initial;
		-webkit-flex-basis: initial;
		flex-basis: initial;
		border-radius: 0;
		margin: 0 0 1vw 0 !important;
	}
}

/* FULL content */
.mainContent.full {
	text-align: center;
	margin: 0 auto;
	z-index: 2000;
}

.mainContent article.full {
    -ms-flex-basis: 100% !important;
    -webkit-flex-basis: 100% !important;
    flex-basis: 100% !important;
	margin: 0;
}

.mainContent.full article.full .formSeparator {
	text-align: center;
}

/* ADMIN */
.admin.colaboradores .mainContent.full article.full .formSeparator,
.admin.voluntariado .mainContent.full article.full .formSeparator {
	text-align: left;
}

/* ADMIN */
.admin .mainContent article.full {
	padding: 0 3vw 3vw 3vw;
	margin: 0 !important;
}

.adminHome .mainContent article.full {
	padding: 0 3vw;
}

/* SEMI content */
.mainContent article.full.semi {
	padding: 0 22.5vw 1.5vw 22.5vw;
}

/* SEMI Voluntariado */
.mainContent article.full.semi {
	padding: 0 15vw 1.5vw 16vw;
}

/* IE - reset */
.ie .mainContent article.full.semi {
	padding: 0 3vw 3vw 3vw;
}

/* 1 COL content (Colaboradores / Voluntariado) */
.colaboradores .mainContent article.full,
.voluntariado .mainContent article.full {
	padding-bottom: 1.5vw;
}

/* Formação */
.formacao .mainContent article.full {
	padding-bottom: 2.5vw;
}

.optionsGroup {
	width: auto;
	text-align: left;
	vertical-align: top;
	display: inline-block;
}

@media (max-width: 767px) {
	.optionsGroup {
		display: block;
	}
}

@media (max-width: 767px) {
	.admin .optionsGroup {
		display: inline-block;
	}
}

/* Voluntariado */

@media (max-width: 767px) {
	.voluntariado .optionsGroup {
		width: 49%;
		display: inline-block;
	}
}

@media (max-width: 767px) {
	.voluntariado .optionsGroup:first-of-type {
		padding-left: 5%;
	}
}

/* Separador branco */

.whiteRule {
    position: relative;
    top: 0;
	width: 94vw;
	height: 1vw;
    background-color: #ffffff;
    margin: 0 auto;
    z-index: 500;
}

@media (max-width: 767px) {
	.whiteRule {
		width: 100vw;
	}
}





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

@media (max-width: 767px) {
	.home .mainContent article {
		padding-bottom: 2vw;
	}
}

.home .mainContent article:first-of-type {
    -ms-flex-basis: calc(50% - 1vw);
    -webkit-flex-basis: calc(50% - 1vw);
    flex-basis: calc(50% - 1vw);
	margin-right: 0.5vw;
}

@media (max-width: 767px) {
	.home .mainContent article:first-of-type {
		-ms-flex-basis: initial;
		-webkit-flex-basis: initial;
		flex-basis: initial;
		margin: 0;
	}
}

.home .mainContent article:nth-of-type(2) {
    -ms-flex-basis: calc(25% - 0.5vw);
    -webkit-flex-basis: calc(25% - 0.5vw);
    flex-basis: calc(25% - 0.5vw);
	margin: 0 0.5vw;
}

@media (max-width: 767px) {
	.home .mainContent article:nth-of-type(2) {
		-ms-flex-basis: initial;
		-webkit-flex-basis: initial;
		flex-basis: initial;
		border-top: 5px solid #ffffff;
		margin: 0;
	}
}

.home .mainContent article:last-of-type {
    -ms-flex-basis: calc(25% - 0.5vw);
    -webkit-flex-basis: calc(25% - 0.5vw);
    flex-basis: calc(25% - 0.5vw);
	margin-left: 0.5vw;
}

@media (max-width: 767px) {
	.home .mainContent article:last-of-type {
		-ms-flex-basis: initial;
		-webkit-flex-basis: initial;
		flex-basis: initial;
		border-top: 5px solid #ffffff;
		margin: 0;
	}
}

.home .mainContent article > div {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
	-ms-align-items: stretch;
	-webkit-align-items: stretch;
	align-items: stretch;
	-ms-align-content: flex-start;
	-webkit-align-content: flex-start;
	align-content: flex-start;
	-ms-justify-content: center;
	-webkit-justify-content: center;
	justify-content: center;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
	flex-wrap: wrap;
    font-size: 1.2vw;
	padding-bottom: 0.5vw;
}

@media (max-width: 1366px) {
	.home .mainContent article > div {
		font-size: 1.5vw;
	}
}

@media (max-width: 767px) {
	.home .mainContent article > div {
		display: block !important;
		font-size: 3.5vw;
		padding-bottom: 2vw;
	}
}

.home .mainContent article > div > div {
    -ms-flex-basis: 100%;
    -webkit-flex-basis: 100%;
	flex-basis: 100%;
    -ms-flex-shrink: 0;
    -webkit-flex-shrink: 0;
	flex-shrink: 0;
	padding: 0 1vw 1.5vw 1vw;
}

@media (max-width: 767px) {
	.home .mainContent article > div > div {
		padding: 2vw 0;
	}
}

.home .mainContent article > div:first-of-type > div {
    -ms-flex-basis: 50%;
    -webkit-flex-basis: 50%;
	flex-basis: 50%;
}

/* Internet Explorer */
.ie .home .mainContent article > div:first-of-type > div {
	padding: 0 0 1.5vw 0;
}

@media (max-width: 767px) {
	.home .mainContent article > div:first-of-type > div {
		-ms-flex-basis: initial;
		-webkit-flex-basis: initial;
		flex-basis: initial;
	}
}

.home .mainContent article button {
	height: 50px;
	background-position: right top;
	background-repeat: no-repeat;
	font-size: 1.2vw;
	line-height: 50px;
	text-align: left;
	border-radius: 25px;
	padding-right: 50px;
	margin-bottom: 1vw;
}

@media (max-width: 1366px) {
	.home .mainContent article button {
		height: 40px;
		background-position: calc(100% + 5px) -5px;
		font-size: 1.5vw;
		line-height: 40px;
		border-radius: 20px;
	}
}

@media (max-width: 767px) {
	.home .mainContent article button {
		font-size: 4vw;
	}
}

.home .mainContent article button:hover {
	background-color: #40505f;
	background-position: right bottom;
	color: #ffffff;
}

@media (max-width: 1366px) {
	.home .mainContent article button:hover{
		background-position: calc(100% + 5px) -55px;
	}
}

/* SENIOR */
.home .mainContent article #senior button  {
	background-image: url('media/icon_senior.png');
}

/* KIDS */
.home .mainContent article #kids button  {
	background-image: url('media/icon_kids.png');
}

/* REAB */
.home .mainContent article #reab button  {
	background-image: url('media/icon_reab.png');
}

/* FORMAÇÃO */
.home .mainContent article #formacao button  {
	background-image: url('media/icon_formacao.png');
}

/* COLABORADORES */
.home .mainContent article #colaboradores button  {
	background-image: url('media/icon_colaboradores.png');
}

/* VOLUNTARIOS */
.home .mainContent article #voluntariado button  {
	background-image: url('media/icon_voluntariado.png');
}







/*--------------------------------------------------------------
ICONS - tables
--------------------------------------------------------------*/

a.btTabela {
	position: relative;
	left: -10px;
	width: 40px;
	height: 40px;
	background-position: center 0px;
	background-repeat: no-repeat;
	vertical-align: middle;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	display: inline-block;
}

a.btTabela:hover {
	background-position: center -40px;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}
a.btTabela:focus {
	outline: 0;
}

/* VIEW Button */

.tabulator a.btTabela.ver {
	background-image: url('media/icon_view.png');
}

/* DELETE Button */

.tabulator a.btTabela.apagar {
	background-image: url('media/icon_delete.png');
}







/*--------------------------------------------------------------
Cursos + Funções
--------------------------------------------------------------*/

.mainContent article span a {
	color: #5080cc;
	font-weight: 600;
	text-decoration: none;
}
	
#cursosContainer,
#funcoesContainer {
	width: 100%;
	min-height: 50px;
	background-color: #ffffff;
	line-height: 50px;
	text-align: left;
	vertical-align: top;
	padding: 0;
	margin: 0;
	border-radius: 25px;
	white-space: normal !important;
	display: inline-block;
}

#cursosContainer input[type="text"],
#funcoesContainer input[type="text"] {
	width: 15vw !important;
	background-color: transparent !important;
	border-radius: 0px !important;
	white-space: normal !important;
	padding: 0 5px !important;
	margin-left: 10px;
}

@media (max-width: 1365px) {
	#cursosContainer input[type="text"],
	#funcoesContainer input[type="text"] {
		width: 19vw !important;
	}
}

@media (max-width: 767px) {
	#cursosContainer input[type="text"],
	#funcoesContainer input[type="text"] {
		width: 38vw !important;
	}
}

#cursosContainer input[type="text"]:focus,
#funcoesContainer input[type="text"]:focus {
	outline-width: 2px !important;
}

.botoesCursos,
.botoesFuncoes {
	background-color: #40505f;
	background-image: url('media/icon_close_tag.png');
	background-position: right center;
	background-repeat: no-repeat;
	font-size: 1.5rem;
	line-height: 22px;
	color: #ffffff !important;
	vertical-align: top;
	padding: 10px 40px 10px 15px;
	margin: 4px 0px 0px 4px;
	border-radius: 21px;
	transition: all 0.2s;	
	display: inline-block;
}

.botoesCursos:hover,
.botoesFuncoes:hover {
	background-color: #ff4400;
	cursor: pointer;
}





/*--------------------------------------------------------------
BOXES
--------------------------------------------------------------*/

.boxes {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.box {
	position: relative;
    -ms-flex-basis: 300px;
    -webkit-flex-basis: 300px;
	flex-basis: 300px;
	min-width: 300px;
	background-color: #e3eaf5;
	text-align: center;
	vertical-align: top;
	padding-bottom: 300px;
	margin: 0 5px 5px 0;
	border-radius: 3px;
	transition: all 0.2s;
	overflow: hidden;
}

/* Mobile */
@media ( max-width: 767px ) {
	.box {
		padding-bottom: 180px;
	}
}

.box.criar {
	background-color: #abc7ff;
}

.box:hover {
	background-color: #abc7ff;
	color: #334150;
	text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
}

div.box .pageTitle {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	padding: 0 10px;
}

div.box .pageTitle strong {
	font-size: 2.4rem;
	font-weight: 500;
}

/* BOXES - Buttons  */

a.btBox {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
	background-position: center 0px;
	background-repeat: no-repeat;
    margin: 0 8px;
    border-radius: 20px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    display: inline-block;
    cursor: pointer;
}

a.btBox:hover {
	background-position: center -40px;
}

a.btBox:focus {
    outline: 0;
}

/* CRIAR botao */
a.btBox.criar {
	width: auto;
	white-space: nowrap;
	text-decoration: none;
	line-height: 40px;
	padding: 0 15px;
}

a.btBox.criar:hover {
    background-color: #40505f;
	color: #ffffff;
	text-shadow: none;
}

/* VER botao */
a.btBox.ver {
	background-image: url('media/icon_view.png');
}

/* APAGAR botao */
a.btBox.apagar {
	background-image: url('media/icon_delete.png');
}






/*--------------------------------------------------------------
FEEDBACK
--------------------------------------------------------------*/

.feedback {
	position: relative;
	width: 96vw;
	background-color: #e3eaf5;
	color: #40505f;
	font-size: 1.2vw;
	font-weight: 400;
	text-align: center;
	border-radius: 5px;
	padding: 2vw 0;
	margin: 0 auto;
	z-index: 2000;
}

@media (max-width: 1366px) {
	.feedback {
		font-size: 1.5vw;
	}
}

@media (max-width: 767px) {
	.feedback {
		width: 100vw;
		font-size: 3.5vw;
		border-radius: 0;
		padding: 4vw;
	}
}

/* Senior */
.senior .feedback {
	background-color: #e3eaf5;
}

/* Kids */
.kids .feedback {
	background-color: #f3e5f0;
}

/* Reab */
.reab .feedback {
	background-color: #ddece0;
}

/* Formação */
.formacao .feedback {
	background-color: #f5ece3;
}

/* Colaboradores */
.colaboradores .feedback {
	background-color: #f5efd9;
}

/* Voluntariado */
.voluntariado .feedback {
	background-color: #ede6f3;
}

.feedback h4 {
	font-size: 2vw;
	font-weight: 500;
	color: #40505f;
	margin: 0 0 0.5vw 0;
}

@media (max-width: 1366px) {
	.feedback h4 {
		font-size: 2.4vw;
	}
}

@media (max-width: 767px) {
	.feedback h4 {
		font-size: 5.5vw;
		margin: 0 0 1vw 0;
	}
}

.feedback a {
	color: #40505f;
	font-weight: 500;
	text-decoration: underline;
}







/*--------------------------------------------------------------
FOOTER
--------------------------------------------------------------*/

footer {
	position: relative;
	top: -2px;
	width: 94vw;
	background-color: #ffffff;
	font-size: 1.2vw;
	font-weight: 400;
	line-height: 200%;
	text-align: center;
	border-radius: 0 0 5px 5px;
	padding: 5px 2vw;
	margin: 0 auto;
	clear: both;
	z-index: 500;
}

@media (max-width: 1366px) {
	footer {
		font-size: 1.5vw;
	}
}

@media (max-width: 767px) {
	footer {
		top: 0;
		width: auto;
		font-size: 3.5vw;
		line-height: initial;
		border-radius: 0;
		padding: 1.5vw 3vw;
	}
}

footer span {
	vertical-align: middle;
	padding-right: 0.5vw;
	display: inline-block;
}

footer a:last-of-type {
	color: #40505f;
	text-decoration: underline;
	padding-left: 0.5vw;
	vertical-align: middle;
	display: inline-block;
}

footer img {
	vertical-align: middle;
	padding: 0 0.1vw;
	display: inline-block;
}

@media (max-width: 1365px) {
	footer img {
		width: auto;
		height: 37px; /* 75% */
		padding: 0 0.2vw;
	}
}

/* CREDITS */

#credits {
	position: relative;
	padding-top: 0.5vw;
	display: inline-block;
}

@media (max-width: 767px) {
	#credits {
		padding: 2vw;
	}
}

#credits a {
	font-size: 1.5rem;
	color: #6b7b88;
	letter-spacing: 1px;
	padding: 0 15px;
	display: inline-block;
}

#credits a:hover {
	color: #7b8d9c;
}







/*--------------------------------------------------------------
SCROLL TO TOP 
--------------------------------------------------------------*/

#iconTop {
	position: fixed;
	right: 4vw;
	bottom: 3vw;
    width: 40px;
    height: 40px;
	background-color: #40505f;
	background-image: url('media/icon_scroll.png');
	background-position: center top;
	background-repeat: no-repeat;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.20);
	border-radius: 50%;
	transition: all 0.3s;
	z-index: 999999;
	display: none;
}

@media (max-width: 1023px) {
	#iconTop {
		bottom: 4.5vw;
	}
}

@media (max-width: 767px) {
	#iconTop {
		right: 3vw;
	}
}

#iconTop:hover,
#iconTop:focus {
	background-position: center bottom;
	outline: 0;
}







/*--------------------------------------------------------------
TOOLTIP 
--------------------------------------------------------------*/

/* Container */
.showTooltip {
	position: relative;
	cursor: pointer;  
}

.showTooltip:hover .tooltip {
	visibility: visible;
	opacity: 1;
}
  
/* Tooltip */
.tooltip {
	position: absolute;
	bottom: 210%;
	right: -2%;
	width: 100%;
	background-color: #40505f;
	color: #ffffff;
	font-size: 1vw;
	font-weight: 300;
	padding: 1vw;
	border-radius: 5px;
	transform: translateY(9px);
	transition: all 0.3s ease-in-out;
	visibility: hidden;
	opacity: 0.4;
	z-index: 2000;
}

@media (max-width: 1366px) {
	.tooltip {
		font-size: 1.3vw;
	}
}

@media (max-width: 767px) {
	.tooltip {
		font-size: 3vw;
	}
}
  
/* Arrow */
.tooltip::after {
	position: absolute;
	bottom: -11px;
	right: 0.9vw;
	width: 0;
	height: 0;
	content: " ";
	border-style: solid;
	border-width: 12px 12.5px 0 12.5px;
	border-color: #40505f transparent transparent transparent;
}

/* Ajuda */
.help {
	width: 1.5vw;
	height: 1.5vw;
	background-color: #40505f;
	font-family: 'Times New Roman', Times, serif;
	color: #e3eaf5;
	font-weight: 600;
	font-style: italic;
	text-align: center;
	vertical-align: top;
	border-radius: 50%;
	margin-left: 0.4vw;
	display: inline-block;
}

@media (max-width: 1366px) {
	.help {
		width: 1.8vw;
		height: 1.8vw;
	}
}

@media (max-width: 767px) {
	.help {
		width: 3.5vw;
		height: 3.5vw;
	}
}

.showTooltip:hover .help {
	color: #b0b9c1;
}







/*--------------------------------------------------------------
AREA - botoes header
--------------------------------------------------------------*/
#adminButtons {
	position: absolute;
	top: 55px;
	right: 3vw;
	z-index: 2000;
}

/* Mobile */
@media (max-width: 767px) {
	#adminButtons {
		top: 25px;
	}
}

/* Logado */
.logged #adminButtons {
	top: 30px;
	z-index: 2000;
}

/* Mobile */
@media (max-width: 767px) {
	.logged #adminButtons {
		top: 20px;
	}
}

#adminMenu {
	position: absolute;
	bottom: 0px;
	right: 3vw;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
	flex-wrap: wrap;	
	-ms-align-items: stretch;
	-webkit-align-items: stretch;
	align-items: stretch;
	-ms-align-content: flex-start;
	-webkit-align-content: flex-start;
	align-content: flex-start;
	-ms-justify-content: center;
	-webkit-justify-content: center;
	justify-content: center;
	z-index: 2000;
}

/* Mobile */
@media (max-width: 767px) {
	#adminMenu {
		bottom: 0px;
	}
}

#adminMenu a.button {
	background-color: #ffffff;
	color: #333333;
	font-weight: 400;
	border-radius: 5px 5px 0 0;
	margin: 0 0 0 1px;
}

#adminMenu a.button:hover {
	background-color: #ffffff !important;
}

/* Home */
#adminMenu .button.home {
	background-color: #e3eaf5;
}

/* Senior */
#adminMenu .button.senior {
	background-color: #a3c2ff;
}

/* Kids */
#adminMenu .button.kids {
	background-color: #ff8dbd;
}

/* Reab */
#adminMenu .button.reab {
	background-color: #6fe16d;
}

/* Formação */
#adminMenu .button.formacao {
	background-color: #ffab03;
}

/* Colaboradores */
#adminMenu .button.colaboradores {
	background-color: #ebc303;
}

/* Voluntariado */
#adminMenu .button.voluntariado {
	background-color: #afa0ff;
}

#adminMenu .button.active {
	background-color: #ffffff !important;
}







/*--------------------------------------------------------------
SCROLLBARS - above mobile
--------------------------------------------------------------*/
@media (min-width: 767px) {

	::-webkit-scrollbar {
	    width: 8px;
	}
 
	/* Track */
	::-webkit-scrollbar-track {
		margin: 1px 0;
		-webkit-box-shadow: inset 0 0 3px #40505f;
		box-shadow: inset 0 0 3px #40505f;
	}
 
	/* Handle */
	::-webkit-scrollbar-thumb {
	    -webkit-border-radius: 5px;
	    border-radius: 5px;
	    background-color: #1e2935;
	}

	::-webkit-scrollbar-thumb:window-inactive {
		background-color: #1e2935;
	}

	::-webkit-scrollbar-thumb:hover {
		background-color: rgba(229, 235, 241, 0.5);
	}
 
	/* Scrollbar on Textarea */
	textarea::-webkit-scrollbar-thumb {
	    background-color: #40505f;
	}

	textarea::-webkit-scrollbar-thumb:hover {
		background-color: #40505f;
	}

	/* Scrollbar on ColorBox */
	#cboxContent ::-webkit-scrollbar-thumb {
	    background-color: #40505f;
	}

		#cboxContent ::-webkit-scrollbar-thumb:hover {
		background-color: #40505f;
	}

}








/*--------------------------------------------------------------
COLORBOX
--------------------------------------------------------------
ColorBox Core Style: The following CSS is consistent between example themes and should not be altered */
#colorbox, #cboxOverlay, #cboxWrapper{ position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0); }
#cboxWrapper { max-width:none; }
#cboxOverlay{ position:fixed; width:100%; height:100%; }
#cboxMiddleLeft, #cboxBottomLeft{ clear:left; }
#cboxContent{ position:relative; }
#cboxLoadedContent{ overflow:auto; -webkit-overflow-scrolling: touch; }
#cboxTitle{ margin:0; }
#cboxLoadingOverlay, #cboxLoadingGraphic{ position:absolute; top:0; left:0; width:100%; height:100%; }
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{ cursor:pointer; }
.cboxPhoto{ float:left; margin:auto; border:0; display:block; max-width: none; max-height: 900px; -ms-interpolation-mode: bicubic; }
.cboxIframe{ width:100%; height:100%; display:block; border:0; padding:0; margin:0; }
#colorbox, #cboxContent, #cboxLoadedContent{ box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; }

/* User Style:
Change the following styles to modify the appearance of ColorBox.  They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
	background-color: #40505f;
	opacity: 0.8 !important;
}

#colorbox {
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
	overflow: visible;
	outline: 0;
}

#cboxWrapper {
	overflow: visible;
}

#cboxContent {
	overflow: visible;
	background-color: #edf3ff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.cboxIframe {
	background-color: transparent;
}

#cboxError {
	padding: 50px;
	border: 1px solid #ccc;
}

/* Show colorbox smoothly */
@keyframes showColorBox {
	from {opacity: 0;}
	to {opacity: 1;}
}
#cboxLoadedContent {
	background-color: #edf3ff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 0px;
	margin-bottom: 0px;
	animation-name: showColorBox;
	animation-duration: 1s;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

#cboxLoadingGraphic{}
#cboxLoadingOverlay{
	background-color: #edf3ff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

        #cboxTitle{position:absolute; bottom:10px; left:0; text-align:center; width:100%; color:#ffffff;}
        #cboxCurrent{position:absolute; bottom:10px; left:10px; color:#ffffff;}
        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
			border:0;
			padding:0;
			margin:0;
			overflow:visible;
			background: none;
		}
        #cboxSlideshow{ display: none !important;}
		/* Delay the close button, to prevent it from moving */
		@keyframes showCloseBt {
    		from {opacity: 0;}
    		to {opacity: 1;}
		}
		#cboxClose {
			position: absolute;
			top: -18px;
			right: -18px;
			width: 36px;
			height: 36px;
			background-image: url("media/colorbox_close.png");
			background-position: center top;
			background-repeat: no-repeat;
			background-color: #edf3ff;
			text-indent:-9999px;
  	  		-webkit-border-radius: 18px;
    		-moz-border-radius: 18px;
    		border-radius: 18px;
			-webkit-transition: background 0.2s;
			transition: background 0.2s;
			opacity: 0;
			animation-name: showCloseBt;
			animation-delay: 0.5s;
			animation-duration: 0.5s;
			animation-iteration-count: 1;
			animation-fill-mode: forwards;
		}	

		@media (max-width: 699px) {
			#cboxClose {
				right: -8px;
			}
		}
		#cboxClose:hover {
			background-position: center bottom;
			background-color: #40505f !important;
		}
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: 0; }
		
@media (max-width: 1023px) {
	#cboxLoadedContent{ margin: 0; }
	#cboxTitle { display: none !important; }
	#cboxCurrent { display: none !important; }
}

/* ColorBox Dialogs */

.cboxDialogs #cboxTitle {
	display: none !important;
}

.dialog {
	background-color: #edf3ff;
	color: #40505f;
	font-size: 1vw;
	text-align: center;
	padding: 0 1vw 1vw 1vw;
	border-radius: 5px;
	display: none;
}

@media (max-width: 1366px) {
	.dialog {
		font-size: 1.3vw;
	}
}

@media (max-width: 767px) {
	.dialog {
		font-size: 3vw;
	}
}

.dialog a {
	font-weight: 600;
}

#colorbox .dialog {
	display: block;
}

/* Senior */
.senior #cboxContent,
.senior #cboxLoadedContent,
.senior .dialog,
.senior #cboxClose {
	background-color: #e3eaf5;
}

/* Kids */
.kids #cboxContent,
.kids #cboxLoadedContent,
.kids .dialog,
.kids #cboxClose {
	background-color: #f3e5f0;
}

/* Reab */
.reab #cboxContent,
.reab #cboxLoadedContent,
.reab .dialog,
.reab #cboxClose {
	background-color: #ddece0;
}

/* Formação */
.formacao #cboxContent,
.formacao #cboxLoadedContent,
.formacao .dialog,
.formacao #cboxClose {
	background-color: #f5ece3;
}

/* Colaboradores */
.colaboradores #cboxContent,
.colaboradores #cboxLoadedContent,
.colaboradores .dialog,
.colaboradores #cboxClose {
	background-color: #f5efd9;
}

/* Voluntariado */
.voluntariado #cboxContent,
.voluntariado #cboxLoadedContent,
.voluntariado .dialog,
.voluntariado #cboxClose {
	background-color: #f5ece3;
}