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

* { box-sizing: border-box; font-size: 0; }

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

h1, h2, h3, h4, h5, h6, p, div.text, a, input, label, textarea, span, select, table, tr, th, td, ::placeholder { font-family: 'Open Sans', sans-serif; font-size: 1em; line-height: 1.5em; font-weight: 400; color: #2d2d52; padding: 0; margin: 0; }

.font2 { font-family: 'Teko', sans-serif; }

.light { font-weight: 300; }
.regular { font-weight: 400; }
.semi-bold { font-weight: 600; }
.bold { font-weight: 700; }

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

html, body	{ position: relative; margin: 0; padding: 0; width: 100%; height: 100%; font-size: 16px; overflow-x: hidden; background-color: #ececec; }

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

.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 { 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; }
*,
*:after,
.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; }

/* ================================================================================================================== */
/* 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; padding: 0 150px; background-color: #ececec; }
	div#principal_container div#principal_header { display: table-row; position: relative; width: 100%; height: 57px; }
	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; }

div#rotate_container { display: block; position: relative; width: 100%; height: 100%; transform-origin: bottom left; }
div#rotate_container[data-status="opened"] { transform: rotate(0deg); }
div#rotate_container[data-status="closed"] { transform: rotate(90deg); }

@media all and ( max-width: 1200px ) {
	div#rotate_container[data-status="opened"] { transform: rotate(0deg); }
	div#rotate_container[data-status="closed"] { transform: rotate(0deg); }
}
@media all and ( max-height: 775px ), all and ( max-width: 800px ) {
	div#principal_container { padding: 0; }
}

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

div#header { display: block; position: fixed; top: 0; left: 0; width: 150px; height: 100vh; z-index: 500; background-color: #ececec; }
div#header a.logo { display: block; position: absolute; top: 170px; left: 34px; width: 82px; height: 400px; background: transparent url(../images/logo.png) no-repeat center center; background-size: contain; }

div#header span.responsive_icon { display: block; position: absolute; width: 32px; height: 24px; top: 73px; left: 63px; background-color: transparent; cursor: pointer; margin: 0; }
	div#header span.responsive_icon span { display: block; position: absolute; left: 0; width: 100%; height: 3px; background-color: #1e1d38; }
	div#header span.responsive_icon span:nth-child(1) { top: 0; }
	div#header span.responsive_icon span:nth-child(2) { top: 10px; }
	div#header span.responsive_icon span:nth-child(3) { bottom: 0; }

	div#header span.responsive_icon:hover span:nth-child(1) { width: 84%; }
	div#header span.responsive_icon:hover span:nth-child(2) { width: 60%; }

div#header a.icons { display: block; position: absolute; left: 58px; width: 34px; height: 34px; background: transparent url(../images/icons.png) no-repeat; }
div#header a.icons:hover { background-position-y: -34px; }
div#header a.icons.facebook { bottom: 100px; background-position-x: -34px; }
div#header a.icons.talktous { bottom: 150px; background-position-x: 0; }

@media all and ( max-width: 1200px ) {
	div#header { width: 50px; }
		div#header a.logo { left: 9px; width: 32px; height: 250px; top: 50px; }

		div#header span.responsive_icon { top: 25px; left: 9px; }

		div#header a.icons { left: 8px; }
}

@media all and ( max-height: 775px ), all and ( max-width: 800px ) {
	div#header { height: 50px; width: 100%; }
		div#header span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; opacity: 0.2; }
		div#header span.responsive_icon { top: 13px; left: auto; right: 10px; }
		div#header a.logo { display: none; }

		div#header a.icons { top: 8px; bottom: auto; }
		div#header a.icons.facebook { left: 55px; }
		div#header a.icons.talktous { left: 10px; }
}

/* ================================================================================================================== */
/* menu */
/* ================================================================================================================== */

div#menu { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 501; padding: 75px 150px; background-color: #1e1d38; transform-origin: bottom left; overflow: hidden; }
div#menu[data-status="opened"] { transform: rotate(0); }
div#menu[data-status="closed"] { transform: rotate(-90deg); }

	div#menu p.label { display: block; position: absolute; top: 200px; right: 80px; width: auto; height: 32px; color: #3ec5f3; font-size: 2.5em; transform-origin: bottom right; transform: rotate(90deg); }
	div#menu span.responsive_icon { display: block; position: absolute; width: 32px; height: 32px; top: 75px; right: 59px; cursor: pointer; margin: 0; z-index: 10; }
		div#menu span.responsive_icon span { display: block; position: absolute; left: 0; width: 100%; height: 3px; background-color: #3ec5f3; }
		div#menu span.responsive_icon span:nth-child(1) { top: 14px; transform: rotate(45deg); }
		div#menu span.responsive_icon span:nth-child(2) { top: 14px; transform: rotate(-45deg); }

		div#menu span.responsive_icon:hover span { background-color: #ffffff; }

	div#menu div.container { display: block; position: relative; width: 100%; }
		div#menu div.container a.logo { display: block; position: relative; width: 400px; height: 81px; background: transparent url(../images/logo_menu.png) no-repeat center center; background-size: contain; margin-bottom: 100px; }
		div#menu div.container div.col { display: inline-block; position: relative; height: auto; vertical-align: top; overflow: hidden; }
		div#menu div.container div.col[data-status="closed"] { width: 0; }
		div#menu div.container div.col[data-status="opened"] { width: 50%; }
		div#menu div.container div.col.padding { padding: 0 0 0 200px; }
		div#menu div.container div.col.middle { vertical-align: middle; }
			div#menu div.container div.col p.description { display: block; position: relative; font-size: 1.5em; color: #3ec5f3; }
			div#menu div.container div.col div.contacts { display: block; position: relative; margin-top: 100px; }
				div#menu div.container div.col div.contacts h3 { display: block; position: relative; color: #00aced; }
				div#menu div.container div.col div.contacts p { display: block; position: relative; color: #00aced; margin-top: 5px; }
			div#menu div.container div.col a.bigmenu { display: block; position: relative; font-size: 2.5em; line-height: 1.2em; color: #ffffff; text-decoration: none; }
			div#menu div.container div.col a.bigmenu.selected,
			div#menu div.container div.col a.bigmenu:hover { color: #3ec5f3; }
			div#menu div.container div.col a.menu { display: block; position: relative; font-size: 5.625em; line-height: 1.2em; color: #3ec5f3; text-decoration: none; }
			div#menu div.container div.col a.menu:hover,
			div#menu div.container div.col a.menu[data-status="open"],
			div#menu div.container div.col a.menu.selected { color: #ffffff; }
		div#menu div.container div.languages { display: block; position: relative; margin-top: 50px; }
			div#menu div.container div.languages a,
			div#menu div.container div.languages p { display: inline-block; position: relative; font-size: 2.5em; color: #919396; text-decoration: none; }
			div#menu div.container div.languages p { margin: 0 5px; }
			div#menu div.container div.languages a:hover,
			div#menu div.container div.languages a.selected { color: #ffffff; }
			div#menu div.container div.languages p:last-child { display: none; }

@media all and ( max-width: 1200px ) {
	div#menu { padding: 25px; }
	div#menu[data-status="opened"] { display: block; transform: rotate(0); }
	div#menu[data-status="closed"] { display: none; transform: rotate(0); }

		div#menu p.label { top: 100px; right: 50px; }
		div#menu span.responsive_icon { top: 25px; right: 25px; }
}
@media all and ( max-width: 1000px ) {
	div#menu div.container div.col[data-works-left] { display: none; }
	div#menu div.container div.col[data-status="opened"] { width: auto; }
	div#menu div.container div.col.padding { padding: 0; }
		div#menu div.col[data-works-right] { margin-top: 125px; margin-left: 25px; }
}
@media all and ( max-width: 650px ) {
	div#menu { min-width: 100%; width: auto; overflow: auto; }
		div#menu div.container { text-align: center; }
			div#menu div.container div.col { text-align: center; }
				div#menu div.container div.col a.menu { font-size: 4em; }
			div#menu div.col[data-works-right] { display: block; margin-top: 25px; margin-left: 0; }

		div#menu div.container div.languages { margin-top: 25px; }

		div#menu p.label { top: 90px; right: 53px; }
		div#menu div.container a.logo { width: 200px; height: 50px; margin-bottom: 50px; }
}

/* ================================================================================================================== */
/* menu */
/* ================================================================================================================== */

div#budget { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 502; padding: 0; }
div#budget[data-status="closed"] { left: -100%;  }
div#budget[data-status="opened"] { left: 0; }
	div#budget span.close { display: inline-block; position: relative; width: 50%; height: 100%; background-color: #ececec; opacity: 0.5; vertical-align: top; }
	div#budget[data-status="closed"] span.close { width: 0; opacity: 1; }
	div#budget[data-status="opened"] span.close { width: 50%; opacity: 0.5; }
	div#budget div.form { display: inline-block; position: relative; width: 50%; height: 100%; background-color: #1e1d38; vertical-align: top; padding: 150px 200px; }
		div#budget div.form h1 { display: block; position: relative; color: #ffffff; font-size: 2.5em; }
		div#budget div.form p.description { display: block; position: relative; color: #ffffff; margin-bottom: 25px; }
		div#budget div.form label { display: block; position: relative; width: auto; margin: 0 0 15px 0; color: #ffffff; }
			div#budget div.form label p { display: block; position: relative; color: #ffffff; }
			div#budget div.form label input[type="text"] { display: block; position: relative; background: none; border: none; border-bottom: 1px solid #ffffff; width: 100%; color: #ffffff; font-size: 0.75em; padding: 0 3px; line-height: 25px; }
			div#budget div.form label textarea { display: block; position: relative; border: none; border-bottom: 2px solid #a6a8ab; width: 100%; line-height: 25px; height: 30px; color: #a6a8ab; font-size: 0.75em; background: none; padding: 0 3px; resize: vertical; }

			div#budget div.form p.terms { display: block; position: relative; font-size: 0.625em; margin: 25px 0; text-align: left; vertical-align: middle; color: #ffffff; }
				div#budget div.form p.terms a { display: inline-block; position: relative; font-size: 1em; text-decoration: none; color: #ffffff; }
				div#budget div.form p.terms a:hover { color: #3ec5f3; }

			div#budget div.form input[type="submit"] { display: inline-block; position: relative; font-size: 0.875em; line-height: 40px; border: 1px solid #3ec5f3; background-color: #1e1d38; color: #3ec5f3; padding: 0 50px; margin: 0; text-decoration: none; cursor: pointer; vertical-align: middle; }
			div#budget div.form input[type="submit"]:hover { background-color: #3ec5f3; color: #ffffff; }

@media all and ( max-width: 1200px ) {
	div#budget div.form { padding: 50px; }

	div#budget div.form span.button_close { display: block; position: absolute; width: 32px; height: 32px; top: 10px; right: 15px; cursor: pointer; margin: 0; z-index: 10; }
		div#budget div.form span.button_close span { display: block; position: absolute; left: 0; width: 100%; height: 3px; background-color: #ffffff; }
		div#budget div.form span.button_close span:nth-child(1) { top: 14px; transform: rotate(45deg); }
		div#budget div.form span.button_close span:nth-child(2) { top: 14px; transform: rotate(-45deg); }

		div#budget div.form span.button_close:hover span { background-color: #3ec5f3; }
}
@media all and ( max-width: 900px ) {
	div#budget div.form { width: 80%; }
	div#budget span.close { width: 20%; }
}
@media all and ( max-width: 450px ) {
	div#budget div.form { width: 100%; padding: 35px 15px 15px 15px; }
	div#budget span.close { width: 0; }
}

/* ================================================================================================================== */
/* 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; text-align: center; width: auto; height: auto; padding: 20px 0; z-index: 1; margin: 0; }
	div#footer div.menu { display: block; position: relative; width: auto; }
		div#footer div.menu a.menu { display: inline-block; position: relative; font-size: 2.5em; line-height: 1.2em; color: #a5a7aa; text-decoration: none; margin: 0 50px 0 0; }
		div#footer div.menu a.menu:last-child { margin: 0; }
		div#footer div.menu a.menu:hover,
		div#footer div.menu a.menu.selected { color: #1e1d38; }
	div#footer div.container { display: block; position: relative; width: auto; border-top: 2px solid #1e1d38; padding: 20px; text-align: right; }
		div#footer div.container div.col { display: inline-block; position: relative; width: auto; vertical-align: middle; margin-left: 20px; }

		div#footer p { display: block; position: relative; color: #a5a7aa; font-size: 0.75em; }
		div#footer a.idstudies { display: block; position: relative; width: 99px; height: 27px; background: transparent url(../images/idstudies.png) no-repeat; }
		div#footer a.idstudies:hover { background-position-y: -27px; }

@media all and ( max-width: 950px ) {
	div#footer { margin: 0; }
		div#footer div.menu { display: none; }
		div#footer div.container { text-align: center; }
}

/* ================================================================================================================== */
/* google badge */
/* ================================================================================================================== */

.grecaptcha-badge { display: none; }

/* ================================================================================================================== */
/* 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: #000000; opacity: 0.8; }
	div#popup div.container { display: inline-block; position: relative; max-width: 90%; max-height: 90%; vertical-align: middle; background-color: #2d2d52; box-sizing: border-box; padding: 20px 35px; text-align: center; }
		div#popup div.container span.close { display: inline-block; position: relative; font-size: 0.75em; line-height: 40px; border: 2px solid #ffffff; background-color: transparent; color: #ffffff; padding: 0 50px; margin: 15px 0 0 0; text-decoration: none; cursor: pointer; }
		div#popup div.container span.close:hover { background-color: #ffffff; color: #2d2d52; }
		div#popup div.container p { margin: 5px 0; color: #ffffff; }