/* ================================================================================================================== */
/* VARIAVEIS */
/* ================================================================================================================== */

:root {
	--color1: #ffffff;
	--color2: #e2000f;
	--color3: #e6e7e8;
	--color4: #000000;
	--color5: #bbbdbf;
	--color6: #929497;

	--font1: 'Roboto', sans-serif;
	--font2: 'Oswald', sans-serif;
}

/* ================================================================================================================== */
/* */
/* ================================================================================================================== */

* { box-sizing: border-box; }

/* ================================================================================================================== */
/* fontes */
/* ================================================================================================================== */

h1, h2, h3, h4, h5, h6, p, div.text, a, input, label, textarea, span, select, table, tr, th, td, ::placeholder { font-family: var(--font1); font-size: 1em; line-height: 1.5em; font-weight: 400; color: var(--color1); padding: 0; margin: 0; }

.font-light { font-weight: 300; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }

/* ================================================================================================================== */
/* principal e animacoes de defeito */
/* ================================================================================================================== */

html, body	{ position: relative; margin: 0; padding: 0; width: 100%; height: 100%; font-size: 24px;; }
.animation-long,
.animation-long * { transition-property: all; -webkit-transition-property: all; -moz-transition-property: all; transition-duration: 800ms; -webkit-transition-duration: 800ms; -moz-transition-duration: 800ms; }
.animation-extra-long,
.animation-extra-long * { transition-property: all; -webkit-transition-property: all; -moz-transition-property: all; transition-duration: 1600ms; -webkit-transition-duration: 1600ms; -moz-transition-duration: 1600ms; }
.animation-none,
.animation-none * { transition-property: none; -webkit-transition-property: none; -moz-transition-property: none; transition-duration: 0ms; -webkit-transition-duration: 0ms; -moz-transition-duration: 0ms; }
.animation-none-hierarchy * { transition-property: none; -webkit-transition-property: none; -moz-transition-property: none; transition-duration: 0ms; -webkit-transition-duration: 0ms; -moz-transition-duration: 0ms; }
.animation-normal,
.animation-normal * { transition-property: all; -webkit-transition-property: all; -moz-transition-property: all; transition-duration: 400ms; -webkit-transition-duration: 400ms; -moz-transition-duration: 400ms; }

@media all and ( max-width: 1366px ) {
	html, body	{ font-size: 18px; }
}

@media all and ( max-width: 1200px ) {
	html, body	{ font-size: 16px; }
}

@media all and ( max-width: 750px ) {
	html, body	{ font-size: 14px; }
}


/* ================================================================================================================== */
/* limpador e truque para inline-block alinhamento */
/* ================================================================================================================== */

div.clear { clear: both; }
.trick_align_middle { display: inline-block; position: relative; width: 0; height: 100%; vertical-align: middle; background-color: transparent; }
.trick_align_top { display: inline-block; position: relative; width: 0; height: 100%; vertical-align: top; background-color: transparent; }
.trick_align_bottom { display: inline-block; position: relative; width: 0; height: 100%; vertical-align: bottom; background-color: transparent; }

/* ================================================================================================================== */
/* estrutura principal */
/* ================================================================================================================== */

div#principal_container { display: table; position: relative; width: 100%; min-height: 100%; margin: 0 auto; overflow: hidden; background-color: var(--color4) }
	div#principal_container div#principal_header { display: table-row; position: relative; width: 100%; height: 100px; }
	div#principal_container div#principal_body { display: table-row; position: relative; width: 100%; height: 100%; z-index: 10; }
	div#principal_container div#principal_footer { display: table-row; position: relative; width: 100%; height: auto; z-index: 1; }

@media all and ( max-width: 1150px ) {
	div#principal_container div#principal_footer { height: auto; }
}

@media all and ( max-width: 800px ) {
	div#principal_container div#principal_header { height: 75px; }
}

@media all and ( max-width: 320px ) {
	div#principal_container { width: 300px; }
}

/* ================================================================================================================== */
/* cabecalho */
/* ================================================================================================================== */

div#header { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 500; background-color: var(--color4); }
div#header[data-status="closed"] {  }
div#header[data-status="opened"] {  }
div#header[data-scroll="true"] {  }
div#header[data-scroll="false"] {  }
	div#header div.container { display: flex; position: relative; justify-content: space-between; width: auto; margin: 0 65px; height: 100%; padding: 25px 0; text-align: left; align-items: center; }
		div#header div.container div.col { display: inline-block; position: relative; width: auto; height: auto; vertical-align: middle; }
		div#header div.container div.col.left { text-align: left; }
		div#header div.container div.col.right { text-align: right; }

		div#header div.container a.logo { display: inline-block; position: relative; width: 377px; height: 94px; vertical-align: middle; text-decoration: none; background: transparent url(../images/logo.png) no-repeat center center; background-size: contain; }

		div#header div.container div.menu { display: inline-block; position: relative; width: auto; height: auto; vertical-align: middle; }
			div#header div.container div.menu div.social_networks { display: inline-block; position: relative; margin-left: 35px; }
			div#header div.container div.menu a.menu { display: inline-block; position: relative; width: auto; height: auto; text-decoration: none; margin: 0 0 0 50px; font-size: 0.75em; font-family: var(--font2); }
			div#header div.container div.menu a.menu:first-child { margin: 0; }
			div#header div.container div.menu a.menu:hover,
			div#header div.container div.menu a.menu.selected,
			div#header div.container div.menu a.menu[data-selected="true"] { color: var(--color2); }

		div#header div.container span.responsive_icon { display: none; position: absolute; width: 32px; height: 19px; top: 20px; right: 0; background-color: transparent; cursor: pointer; margin: 40px 0 0 0; }
			div#header div.container span.responsive_icon span { display: block; position: absolute; left: 0; width: 100%; height: 3px; background-color: var(--color1); }
			div#header div.container span.responsive_icon span:nth-child(1) { top: 0; }
			div#header div.container span.responsive_icon span:nth-child(2) { top: 8px; }
			div#header div.container span.responsive_icon span:nth-child(3) { bottom: 0; }

			div#header[data-status="opened"] div.container span.responsive_icon span:nth-child(1) { width: 84%; left: 16%; }
			div#header[data-status="opened"] div.container span.responsive_icon span:nth-child(2) { width: 60%; left: 40%; }

@media all and ( max-width: 800px ) {
	div#header { height: 75px; }

	div#header div.container a.logo { width: 200px; height: 65px; }

	div#header div.container { padding: 0; align-items: center; margin: 0 10px; }

	div#header div.container div.col.right { width: 32px; height: 19px; }

	div#header div.container span.responsive_icon { display: block; margin: 0; top: 0; }
	div#header div.container div.menu { display: block; position: fixed; top: 75px; left: 0; width: 100%; height: auto; background-color: var(--color2); z-index: 10; overflow: hidden; text-align: center; border-bottom: 2px solid var(--color1); }
	div#header[data-status="opened"] div.container div.menu { height: auto; padding: 25px; }
	div#header[data-status="closed"] div.container div.menu { height: 0; padding: 0; }
		div#header div.container div.menu a.menu { display: block; margin: 0; font-size: 1.5em; }
		div#header div.container div.menu a.menu:hover,
		div#header div.container div.menu a.menu.selected,
		div#header div.container div.menu a.menu[data-selected="true"] { color: var(--color4); }

	div#header div.container div.menu div.social_networks { margin-left: 0; margin-top: 25px; }
}

/* ================================================================================================================== */
/* corpo */
/* ================================================================================================================== */

div#body { display: block; position: relative; width: auto; height: auto; margin: 0; z-index: 2; padding: 0; }

/* ================================================================================================================== */
/* rodape */
/* ================================================================================================================== */

div#footer { display: block; position: relative; bottom: 0; left: 0; width: 100%; height: 75px; background-color: var(--color3); padding: 0 65px; z-index: 1; margin: 0; }
	div#footer div.container { display: flex; position: relative; width: 100%; height: 100%; padding: 0; justify-content: space-between; align-items: center; }
	div#footer div.col { display: inline-block; position: relative; width: auto; margin: 0; }
	div#footer div.col.left { text-align: left; }
	div#footer div.col.right { text-align: right; }

		div#footer a.livroreclamacoes { display: inline-block; position: relative; width: 140px; height: 58px; background: transparent url(../images/livroreclamacoes.png) no-repeat center center; background-size: contain; }
		div#footer p.copyright { display: block; position: relative; color: var(--color4); font-size: 0.5em; }
		div#footer a.idstudies { display: inline-block; position: relative; width: 84px; height: 23px; background: transparent url(../images/fuio_by_idstudies.png) no-repeat; }
		div#footer a.idstudies:hover { background-position-y: -23px; }

@media all and ( max-width: 650px ) {
	div#footer { padding: 25px 15px; height: auto; }
		div#footer div.container { display: block; }
		div#footer div.col { display: block; margin: 20px; text-align: center; }
		div#footer div.col.left { text-align: center; }
		div#footer div.col.right { text-align: center; }
}

/* ================================================================================================================== */
/* redes sociais */
/* ================================================================================================================== */

.social_network { display: inline-block; position: relative; width: 23px; height: 23px; background: transparent url(../images/social_network_with_youtube_full.png) no-repeat; }
.social_network.white { background-position-y: -23px; }
.social_network.margin-left { margin-left: 10px; }
.social_network.facebook { background-position-x: 0; }
.social_network.instagram { background-position-x: -23px; }
.social_network.youtube { background-position-x: -52px; width: 103px; }
.social_network:hover { background-position-y: -46px; }

/* ================================================================================================================== */
/* captcha */
/* ================================================================================================================== */

.grecaptcha-badge { display: none; right: -500px; }

/* ================================================================================================================== */
/* popup */
/* ================================================================================================================== */

div#popup { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; text-align: center; overflow: auto; }
	div#popup span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color1); opacity: 0.8; }
	div#popup div.container { display: inline-block; position: relative; max-width: 90%; max-height: 90%; vertical-align: middle; background-color: var(--color2); box-sizing: border-box; padding: 35px 20px; text-align: center; }
		div#popup div.container span.close { display: inline-block; position: relative; line-height: 32px; font-size: 0.666em; border: 2px solid var(--color1); background-color: var(--color2); color: var(--color1); padding: 0 50px; margin-top: 20px; text-decoration: none; cursor: pointer; }
		div#popup div.container span.close:hover { background-color: var(--color4); }
		div#popup div.container p { margin: 5px 0; color: var(--color1); font-size: 0.666em; }