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

* { 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: 'Raleway', sans-serif; font-size: 16px; font-weight: 500; color: #323a47; padding: 0; margin: 0; line-height: 23px; }

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

.font-title { font-size: 30px; line-height: 36px; font-weight: 700; }

.regular { font-weight: 400; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }
.extra-bold { font-weight: 800; }

@media all and ( max-width: 899px ) {
	h1, h2, h3, h4, h5, h6, p, div.text, a, input, label, textarea, span, select, table, tr, th, td, ::placeholder { font-size: 14px; line-height: 20px; }
}

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

html, body	{ position: relative; margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }
*		{ transition-property: all; -webkit-transition-property: all; -moz-transition-property: all; transition-duration: 400ms; -webkit-transition-duration: 400ms; -moz-transition-duration: 400ms; }
.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-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; }

/* ================================================================================================================== */
/* 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; }

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

div#header { display: block; position: fixed; top: 0; left: 0; height: 100px; width: 100%; background-color: #ffffff; z-index: 500; }
div#header[data-responsive="closed"] {  }
div#header[data-responsive="opened"] {  }
	div#header div.container { display: flex; position: relative; justify-content: space-between; align-items: center; width: auto; margin: 0 100px; height: 100%; }
		div#header div.container a.logo { display: inline-block; position: relative; width: 195px; height: 60px; background: transparent url(../images/logo.png) no-repeat center center; background-size: contain; vertical-align: middle; }
		div#header div.container div.contents { display: inline-block; position: relative; width: auto; height: 25px; vertical-align: middle; }
			div#header div.container div.contents a.icons { display: inline-block; position: relative; width: 21px; height: 25px; background: transparent url(../images/header_icons.png) no-repeat; vertical-align: middle; font-size: 0; margin: 0 25px 0 0; }
			div#header div.container div.contents a.icons:hover { background-position-y: -25px; }
			div#header div.container div.contents a.icons.shopping_cart { background-position-x: -21px; }
			div#header div.container div.contents a.icons.reserved { background-position-x: 0; }
			div#header div.container div.contents a.language { display: inline-block; position: relative; font-size: 15px; line-height: 25px; vertical-align: middle; text-decoration: none; margin: 0 0 0 8px; color: #cfd2d3; }
			div#header div.container div.contents a.language:hover,
			div#header div.container div.contents a.language.selected { color: #323a47; }

		div#header div.container span.responsive_icon { display: none; }

@media all and ( max-width: 899px ) {
	div#header { height: 50px; }
		div#header div.container a.logo { width: 150px; height: 35px; }
		div#header div.container div.contents { display: none; }
			div#header div.container div.menu a.language { margin: 10px 5px 0 5px; }
			div#header div.container div.menu a.menu { display: block; margin: 5px 10px; text-align: center; }
			div#header div.container div.menu a.menu.selected:after { display: none; }
			div#header div.container div.menu a.menu.selected:before { display: none; }
}

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

div#menu { display: block; position: fixed; top: 0; left: 0; height: 100%; background-color: #ffffff; z-index: 501; overflow: hidden; }
div#menu[data-status="closed"] { width: 100px; }
div#menu[data-status="opened"] { width: 100%; }
	div#menu div.button { display: block; position: absolute; top: 0; width: 100px; height: 100%; cursor: pointer; z-index: 2; }
	div#menu[data-status="closed"] div.button { left: 0; }
	div#menu[data-status="opened"] div.button { left: -100px; }
		div#menu div.button div.content { display: block; position: absolute; top: 50%; left: 50%; width: 60px; height: 30px; margin: -15px 0 0 -30px; background-color: transparent; }
			div#menu div.button div.content h1 { display: block; position: absolute; top: -40px; left: -5px; white-space: nowrap; font-size: 25px; line-height: 60px; color: #bbbdbf; transform: rotate(-90deg); transform-origin: left top 0; }
			div#menu div.button div.content span { display: block; position: absolute; height: 3px; background-color: #323a47; }
			div#menu div.button div.content span.line1 { width: 40px; left: 0; top: 0; }
			div#menu div.button div.content span.line2 { width: 25px; left: 15px; top: 13px; }
			div#menu div.button:hover div.content span.line2 { width: 40px; left: 0; }
			div#menu div.button div.content span.line3 { width: 35px; left: 5px; bottom: 0; }
			div#menu div.button:hover div.content span.line3 { width: 40px; left: 0; }
			div#menu div.button div.content p { display: block; position: absolute; right: -10px; top: 9px; text-align: center; font-size: 10px; line-height: 12px; transform: rotate(-90deg); }

	div#menu div.container { display: block; position: relative; width: 100vw; height: 100%; margin: 0; padding: 50px 100px; font-size: 0; z-index: 1; }
	div#menu[data-status="closed"] div.container { left: -100vw; }
	div#menu[data-status="opened"] div.container { left: 0; }
		div#menu div.container div.inside { display: block; position: relative; width: 100%; height: 100%; }
		div#menu div.container div.close { display: inline-block; position: relative; width: 35px; height: 35px; vertical-align: top; cursor: pointer; margin: 0 100px 0 0; }
			div#menu div.container div.close span { display: block; position: absolute; left: 2px; width: 47px; height: 3px; background-color: #323a47; }
			div#menu div.container div.close:hover span { background-color: #59bad5; }
			div#menu div.container div.close span:nth-child(1) { top: 0; transform: rotate(45deg); transform-origin: left top 0; }
			div#menu div.container div.close span:nth-child(2) { bottom: 0; transform: rotate(-45deg); transform-origin: left bottom 0; }

		div#menu div.container div.content { display: inline-block; position: relative; width: 450px; height: 100%; vertical-align: middle; margin: 0; overflow: auto; }
			div#menu div.container div.content a.logo { display: block; position: relative; width: 195px; height: 50px; background: transparent url(../images/logo.png) no-repeat center center; background-size: contain; vertical-align: middle; margin: 0 0 50px 0; }
			div#menu div.container div.content div.menu { display: block; position: relative; width: auto; }
				div#menu div.container div.content div.menu a { display: block; position: relative; width: auto; font-size: 36px; line-height: 40px; text-decoration: none; margin: 10px 0; }
				div#menu div.container div.content div.menu a:hover,
				div#menu div.container div.content div.menu a.selected { color: #59bad5; }
			div#menu div.container div.content div.reserved { display: block; position: relative; width: auto; margin: 50px 0 0 0; }
				div#menu div.container div.content div.reserved a.icons { display: block; position: relative; text-decoration: none; margin: 10px 0; }
					div#menu div.container div.content div.reserved a.icons span { display: inline-block; position: relative; width: 21px; height: 25px; background: transparent url(../images/header_icons.png) no-repeat; vertical-align: top; font-size: 0; margin: 0 10px 0 0; }
					div#menu div.container div.content div.reserved a.icons:hover span { background-position-y: -25px; }
					div#menu div.container div.content div.reserved a.icons.shopping_cart span { background-position-x: -21px; }
					div#menu div.container div.content div.reserved a.icons.reserved span { background-position-x: 0; }
					div#menu div.container div.content div.reserved a.icons p { display: inline-block; position: relative; font-size: 11px; line-height: 25px; vertical-align: top; margin: 0; color: #bbbdbf; }
					div#menu div.container div.content div.reserved a.icons:hover p { color: #59bad5; }
			div#menu div.container div.content img.support { display: block; position: relative; width: 90%; height: auto; margin: 25px 0 0 0; max-width: 400px; }
			div#menu div.container div.content div.languages { display: block; position: relative; width: auto; margin: 50px 0 0 0; }
				div#menu div.container div.content div.languages a.language { display: inline-block; position: relative; font-size: 15px; line-height: 25px; vertical-align: middle; text-decoration: none; margin: 0 8px 0 0; color: #cfd2d3; }
				div#menu div.container div.content div.languages a.language:hover,
				div#menu div.container div.content div.languages a.language.selected { color: #323a47; }
			div#menu div.container div.content div.address { display: block; position: relative; width: auto; margin: 50px 0 0 0; white-space: nowrap; }
				div#menu div.container div.content div.address p { display: inline-block; position: relative; color: #bbbdbf; vertical-align: bottom; }
				div#menu div.container div.content div.address p:nth-child(2) { margin: 0 0 0 25px; }

		div#menu div.container div.photo { display: inline-block; position: relative; min-width: 150px; height: 100%; vertical-align: middle; margin: 0 0 0 100px; overflow: auto; background: transparent url(../images/menu_bg.jpg) no-repeat top center; background-size: contain; }
		div#menu div.container div.photo
		{
			width: auto;
			width: -webkit-calc(100% - 100px - 100px - 35px - 450px);
			width:    -moz-calc(100% - 100px - 100px - 35px - 450px);
			width:         calc(100% - 100px - 100px - 35px - 450px);
		}

@media all and ( max-width: 899px ) {
	div#menu[data-status="closed"] { width: 65px; }
		div#menu div.button { width: 65px; }
		div#menu div.button div.content h1 { display: none; }
		div#menu[data-status="opened"] div.button { left: -65px; }

		div#menu div.container { padding: 25px 25px; }
			div#menu div.container div.close { margin: 0 0 0 0; }
			div#menu div.container div.photo { display: none; }
			div#menu div.container span.trick_align_middle { display: none; }
			div#menu div.container div.content { display: block; width: 100%; vertical-align: top; padding: 25px 0; }
				div#menu div.container div.content a.logo { display: none; }
					div#menu div.container div.content div.menu a { font-size: 24px; line-height: 30px; }
					div#menu div.container div.content div.address { display: none; }
}

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

div#principal_container { display: table; position: relative; width: 100%; min-height: 100%; margin: 0 auto; overflow: hidden; }
	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: 100px; }

@media all and ( max-width: 899px ) {
	div#principal_container { display: block; min-height: auto; }
		div#principal_container div#principal_header { display: block; height: 50px; }
		div#principal_container div#principal_body { display: block; }
		div#principal_container div#principal_footer { display: block; height: auto; }
}

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

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

@media all and ( max-width: 899px ) {
	div#body { margin: 0 0 0 65px; }
}

/* ================================================================================================================== */
/* paginacao */
/* ================================================================================================================== */

div.pagination { display: block; position: relative; width: auto; height: auto; padding: 25px 0; text-align: center; }
	div.pagination p,
	div.pagination a { display: inline-block; position: relative; font-size: 16px; line-height: 25px; min-width: 25px; margin: 2px; text-decoration: none; }
	div.pagination a:hover,
	div.pagination a.selected { color: #59bad5; }

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

div#footer { display: block; position: relative; width: 100%; height: auto; background-color: #ffffff; padding: 45px 0 125px 0; z-index: 1; }
	div#footer div.container { display: flex; position: relative; justify-content: space-between; align-items: start; width: auto; margin: 0 100px; }
		div#footer div.container div.col { display: inline-block; position: relative; width: auto; height: auto; vertical-align: top; }
		div#footer div.container div.col.idstudies { align-self: flex-end; }
		div#footer div.container a.logo { display: block; position: relative; width: 209px; height: 50px; background: transparent url(../images/logo_dark.png) no-repeat center center; background-size: contain; }
		div#footer div.container p.copyright { display: block; position: relative; font-size: 14px; margin: 10px 0 0 0; }
		div#footer div.container p.address { display: block; position: relative; font-size: 14px; margin: 0; }
		div#footer div.container a.terms { display: block; position: relative; font-size: 14px; margin: 0; text-decoration: none; }
		div#footer div.container a.terms:hover { color: #59bad5; }
		div#footer div.container a.idstudies { display: inline-block; position: relative; width: 114px; height: 18px; background: transparent url(../images/idstudies.png) no-repeat; }
		div#footer div.container a.idstudies:hover { background-position-y: -18px; }

@media all and ( max-width: 899px ) {
	div#footer { padding: 25px 0 25px 65px; }
		div#footer div.container { display: block; margin: 0; justify-content: normal; text-align: center; }
			div#footer div.container p.copyright { margin: 10px 0; font-size: 10px; }
			div#footer div.container a.idstudies { width: 80px; height: 12px; background-size: 100% auto; }
			div#footer div.container a.idstudies:hover { background-position-y: -12px; }
			div#footer div.container p.address { font-size: 12px; line-height: 17px; }
			div#footer div.container a.terms { font-size: 14px; line-height: 25px; }
			div#footer div.container div.col { margin: 10px; }
}

/* ================================================================================================================== */
/* separador */
/* ================================================================================================================== */

span.separator { display: block; position: relative; width: 100%; border: none; height: 0; border-top: 1px solid #dfe1e2; border-bottom: 1px solid #f1f1f2; margin: 25px 0; }

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