@import "font-awesome/css/font-awesome.min.css";
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900&display=swap');

/*! HTML5 Boilerplate v4.3.0 - INICIO */
html, button, input, select, textarea {
	color: #222
}

html {
	font-size: 1em;
	line-height: 1.4
}

::-moz-selection, ::selection {
	background: #b3d4fc;
	text-shadow: none
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0
}

audio, canvas, img, video {
	vertical-align: middle
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0
}

textarea {
	resize: vertical
}



/* ==========================================================================
   Site
   ========================================================================== */

html {
	font-size: 10px;
}

body {
	font: 100% "Roboto", Arial, Helvetica, sans-serif;
	background: #fff;
	font-size: inherit;
	line-height: 1.4em;
	color: #333;
}

a {
	color: inherit;
	outline: none !important;
	text-decoration: none;
}

	a:hover {
		color: inherit;
		text-decoration: none;
	}

	a:active,
	a:focus {
		color: inherit;
		text-decoration: none;
	}

a, button, input {
	outline: none !important;
}

/* a, button, input { transition: color 0.2s, border-color 0.2s, background-color 0.2s, opacity 0.2s; } /* transição leve em hovers básicos */

ul, li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	display: block;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
}

p {
	margin: 0 0 1.4em 0;
}

	p:last-child {
		margin-bottom: 0 !important;
	}

/* *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* usar se não incluir o bootstrap */

.container {
	position: relative;
}

.form-group {
	margin: 0 0 10px 0;
}

.form-control {
	border: solid 1px #ccc;
	padding: 0.5em 1em;
	line-height: 1.3em;
	font-size: inherit;
	width: 100%;
	background: #fff;
}

textarea.form-control {
	resize: none;
}

.vtop {
	vertical-align: top !important;
}

.vbottom {
	vertical-align: bottom !important;
}

.vaflex {
	display: flex;
	align-items: center;
}

.vtflex {
	display: flex;
	align-items: top;
}

.vbflex {
	display: flex;
	align-items: bottom;
}

.tbl {
	display: table;
	width: 100%;
	vertical-align: middle;
}

	.tbl .trow {
		display: table-row;
		vertical-align: inherit;
	}

	.tbl .tcol {
		display: table-cell;
		vertical-align: inherit;
	}

		.tbl .tcol.um, .tbl .tcol.one {
			width: 1%;
		}

	.tbl.grid > .tcol, .tbl.grid > .trow > .tcol {
		padding-right: 15px !important;
		padding-left: 15px !important;
	}

	.tbl.grid.grid10 > .tcol, .tbl.grid.grid10 > .trow > .tcol.grid10 {
		padding-right: 5px !important;
		padding-left: 5px !important;
	}

	.tbl.grid.grid20 > .tcol, .tbl.grid.grid20 > .trow > .tcol.grid20 {
		padding-right: 10px !important;
		padding-left: 10px !important;
	}

	.tbl.grid > .tcol:first-child, .tbl.grid > .trow > .tcol:first-child {
		padding-left: 0px !important;
	}

	.tbl.grid > .tcol:last-child, .tbl.grid > .trow > .tcol:last-child {
		padding-right: 0px !important;
	}

	.tbl.tbl2 > .tcol {
		width: 50%;
	}

	.tbl.tbl3 > .tcol {
		width: 33.33%;
	}

	.tbl.tbl4 > .tcol {
		width: 25%;
	}

	.tbl.tbl5 > .tcol {
		width: 20%;
	}

.u, .hu:hover {
	text-decoration: underline;
}

	.hu, .u:hover {
		text-decoration: none;
	}

.nw {
	white-space: nowrap;
}

.mg0 {
	margin-bottom: 0px !important;
}

.mg0q {
	margin-bottom: 0.25em !important;
}

.mg0h {
	margin-bottom: 0.5em !important;
}

.mg0hq {
	margin-bottom: 0.75em !important;
}

.mg1 {
	margin-bottom: 1em !important;
}

.mg1q {
	margin-bottom: 1.25em !important;
}

.mg1h {
	margin-bottom: 1.5em !important;
}

.mg1hq {
	margin-bottom: 1.75em !important;
}

.mg2 {
	margin-bottom: 2em !important;
}

.mg2q {
	margin-bottom: 2.25em !important;
}

.mg2h {
	margin-bottom: 2.5em !important;
}

.mg2hq {
	margin-bottom: 2.75em !important;
}

.mg3 {
	margin-bottom: 3em !important;
}

.mg3q {
	margin-bottom: 3.25em !important;
}

.mg3h {
	margin-bottom: 3.5em !important;
}

.mg3hq {
	margin-bottom: 3.75em !important;
}

.mg4 {
	margin-bottom: 4em !important;
}

.mg4q {
	margin-bottom: 4.25em !important;
}

.mg4h {
	margin-bottom: 4.5em !important;
}

.mg4hq {
	margin-bottom: 4.75em !important;
}

.mg5 {
	margin-bottom: 5em !important;
}

.mg6 {
	margin-bottom: 6em !important;
}

.mg7 {
	margin-bottom: 7em !important;
}

.mg8 {
	margin-bottom: 8em !important;
}

.b100 {
	display: block;
	width: 100%;
	text-align: center;
}

.txtl {
	text-align: left !important;
}

.txtr {
	text-align: right !important;
}

.txtc {
	text-align: center !important;
}

.color1, .color1h:hover {
	color: #ff0000;
}

.bg1, bg1h:hover {
	background-color: #ff0000;
}

.brd1, .brd1h:hover {
	border-color: #ff0000;
}

.base16-9, .base-wide {
	position: relative;
	width: 100%;
	padding: 56.25% 0 0 0;
	display: block;
}

.base9-16 {
	position: relative;
	width: 100%;
	padding: 178% 0 0 0;
	display: block;
}

.base4-3, .base-tv {
	position: relative;
	width: 100%;
	padding: 75% 0 0 0;
	display: block;
}

.base3-4 {
	position: relative;
	width: 100%;
	padding: 133% 0 0 0;
	display: block;
}

.base1-1, .base-sq {
	position: relative;
	width: 100%;
	padding: 100% 0 0 0;
	display: block;
}

.imgbg {
	background: center center no-repeat;
	background-size: cover;
	display: block;
	overflow: hidden;
}

.fit {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.clickscale:active {
	transform: scale(0.9);
}

.z500 {
	z-index: 500;
}

.z1000 {
	z-index: 1000;
}

.z2000 {
	z-index: 2000;
}

.z3000 {
	z-index: 3000;
}

.z4000 {
	z-index: 4000;
}

.z5000 {
	z-index: 5000;
}

.extend-bg, .extend-bg-r, .extend-bg-l {
	position: relative;
}

	.extend-bg:before,
	.extend-bg:after,
	.extend-bg-r:after,
	.extend-bg-l:before {
		content: "";
		position: absolute;
		height: 100%;
		background: inherit;
		width: 3000px;
		z-index: 0;
		top: 0;
	}

	.extend-bg:before,
	.extend-bg-l:before {
		left: -3000px;
	}

	.extend-bg:after,
	.extend-bg-r:after {
		right: -3000px;
	}



#wrapper {
	position: relative;
	width: 100%;
	max-width: 4000px;
	margin: auto;
	overflow: hidden;
}



#header {
	background: url(../img/header_bg.jpg) center bottom no-repeat;
	background-size: 192em auto;
	position: relative;
	z-index: 100;
}

	#header .header {
		height: 93em;
	}

	#header .livro {
		position: relative;
	}

		#header .livro img {
			display: block;
			position: absolute;
			bottom: 3em;
			left: -2.4em;
			width: 78.6em;
		}

	#header .col1 {
		width: 59%;
		padding-bottom: 9em;
		position: relative;
		padding-top: 20rem;
	}

	#header h2 {
		font-size: 2.4em;
		font-weight: bold;
		color: #BBE0E9;
		text-transform: uppercase;
		line-height: 1.5em;
		margin: 0 0 0.2em 0;
	}

	#header h1 {
		font-size: 5.5em;
		font-weight: normal;
		color: #fff;
		line-height: 1.055em;
		margin: 0 0 0.3em 0;
	}

		#header h1 strong {
			font-weight: 900;
			color: #F2D367;
		}

	#header p {
		font-size: 2.2em;
		font-weight: 300;
		color: #fff;
		line-height: 1.59em;
		margin: 0 0 1.4em 0;
	}

	#header .btn {
		display: inline-block;
		white-space: nowrap;
		line-height: 6.6rem;
		border-radius: 3.5rem;
		border: solid 2px transparent;
		min-width: 40.5rem;
		font-weight: bold;
		text-align: left;
		padding: 0 2rem 0 9rem;
	}

		#header .btn.amazon {
			color: #6C4504;
			font-size: 2.4em;
			background: url(../img/header_pagseguro.png) 2.2rem center no-repeat, linear-gradient(to right, #EFA529 0%,#F7D161 100%);
			background-size: 5.1rem auto, 100% auto;
			border: none;
			line-height: calc( 6.6rem + 4px );
		}

			#header .btn.amazon:hover {
				background: url(../img/header_pagseguro.png) 2.2rem center no-repeat, #F7D161;
				background-size: 5.1rem auto, 100% auto;
				box-shadow: 0.5rem 0.5rem 1.3rem rgba(239,164,41,0.4);
			}

		#header .btn.leia {
			border-color: #F6CC5A;
			color: #F6CC5A;
			font-size: 2.1rem;
			background: url(../img/header_leia.png) 3.5rem center no-repeat;
			background-size: 2.2rem auto;
		}

			#header .btn.leia:hover {
				box-shadow: 0.5rem 0.5rem 1.5rem rgba(239,164,41,0.6);
			}

label.error {
	font-size: 1.2em;
	color: red;
	margin-top: 5px;
	display: block;
}

#header .logo {
	position: absolute;
	left: 15px;
	top: 7rem;
}

	#header .logo img {
		display: block;
		width: 100%;
	}

#header .seta {
	position: absolute;
	left: 0;
	bottom: 2.5em;
	width: 100%;
	height: 0;
}

	#header .seta a {
		display: block;
		position: absolute;
		width: 9.3em;
		height: 9.3em;
		left: 0;
		top: -4em;
	}

		#header .seta a img {
			display: block;
			width: 100%;
		}



#juliana {
	position: relative;
	padding: 8.8em 0 13em 0;
}

	#juliana .header {
		padding-bottom: 2.2em;
		position: relative;
	}

		#juliana .header:after {
			content: "";
			position: absolute;
			background: #9E1E62;
			width: 4.5rem;
			height: 0.7rem;
			border-radius: 0.35rem;
			display: block;
			left: 50%;
			left: calc( 50% - 2.25rem );
			bottom: -0.35rem;
		}

		#juliana .header h1 {
			font-size: 4em;
			font-weight: 500;
			color: #663399;
			line-height: 1.3em;
			margin: 0 0 0.1em 0;
		}

		#juliana .header h2 {
			font-size: 2.4em;
			font-weight: 300;
			color: #9E1E62;
			line-height: 1.3em;
		}

	#juliana .foto {
	}

		#juliana .foto img {
			display: block;
			border-radius: 50%;
			max-width: 100%;
		}

	#juliana p {
		font-size: 1.9em;
		font-weight: 300;
		color: #7F7F7F;
		line-height: 1.579em;
		margin: 0 0 1.6em 0;
	}

	#juliana .abrath {
	}

		#juliana .abrath img {
			display: block;
			height: 10.6em;
		}

	#juliana ul {
		margin: 0 0 1.4em 0;
	}

		#juliana ul li {
			font-size: 1.9em;
			font-weight: 300;
			line-height: 1.579em;
			list-style-type: disc;
			list-style-position: inside;
			display: list-item;
			color: #7F7F7F;
		}



#acesso {
	position: relative;
	z-index: 100;
	background: url(../img/acesso_bg.jpg) center center no-repeat #000;
	background-size: cover;
}

	#acesso .row {
	}

		#acesso .row > div {
			position: relative;
		}

	#acesso .inner {
		padding: 7.5em 0;
	}

		#acesso .inner h1 {
			font-size: 6em;
			line-height: 1.083em;
			color: #fff;
			font-weight: 300;
			margin: 0 0 1.5rem 0;
			display: block;
			width: 100%;
		}

			#acesso .inner h1 strong {
				color: #F2D367;
				font-weight: bold;
			}

		#acesso .inner p {
			font-size: 2.2em;
			color: #fff;
			line-height: 1.591em;
			font-weight: 300;
		}

	#acesso .form {
		height: 100%;
		height: calc( 100% + 10em );
		margin-top: -5em;
		width: 100%;
		background: #fff;
		border-radius: 0.5rem;
		box-shadow: 0 0 1.5em rgba(0,0,0,0.1);
		padding: 19em 5em 3em 5em;
	}

		#acesso .form .livro {
			position: relative;
		}

			#acesso .form .livro img {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 26.8em;
				display: block;
				left: calc( (100% - 26.8em) / 2 );
			}

		#acesso .form h2 {
			text-align: center;
			font-size: 4em;
			color: #663399;
			line-height: 1.2em;
			font-weight: 500;
			padding: 3rem 0 0 0;
			margin: 0 0 0.7em 0;
		}

		#acesso .form .form-group {
			margin: 0 0 2em 0;
		}

		#acesso .form .form-control {
			font-size: 1.8em;
			color: #666;
			border: solid 1px #E6E6E6;
			border-radius: 0.5em;
			background: #fff;
			box-shadow: 0.3em 0.3em 0.5em rgba(0,0,0,0.1);
			line-height: 1.556em;
			padding: 0.833em 1.6em;
		}

			#acesso .form .form-control:focus {
				border-color: #ddd;
				box-shadow: 0.3em 0.3em 0.5em rgba(0,0,0,0.15);
			}

		#acesso .form .btn {
			display: inline-block;
			white-space: nowrap;
			line-height: 6rem;
			border-radius: 3rem;
			min-width: 20rem;
			font-weight: 500;
			text-transform: uppercase;
			color: #6B4605;
			font-size: 1.6em;
			background: linear-gradient(to right, #EFA529 0%,#F7D161 100%);
			border: none;
			box-shadow: 0.5rem 0.5rem 1.3rem rgba(243,185,67,0.2);
			overflow: hidden;
			position: relative;
		}

			#acesso .form .btn span {
				position: relative;
				z-index: 100;
			}

			#acesso .form .btn:hover {
				background: #F7D161;
				box-shadow: 0.5rem 0.5rem 1.3rem rgba(239,164,41,0.4);
			}




#footer {
	background: #f7f7f7;
	padding: 8em 0 4.5em 0;
	position: relative;
	z-index: 1;
	border-top: solid 0.7em #9E1E62;
}

	#footer .logo {
		margin: 0 0 1.5em 0;
	}

		#footer .logo img {
			display: block;
			margin: auto;
			height: auto;
			max-width: 95%;
		}

	#footer .sigu {
		font-weight: bold;
		font-size: 1.6em;
		line-height: 1.4em;
		color: #4C4C4C;
		text-align: center;
	}



#loading {
	position: fixed;
	right: 0;
	top: 0;
	z-index: 5000;
	width: 100%;
	height: 100%;
	width: 100vw;
	height: 100vh;
	background: url(../img/loading.gif) center center no-repeat rgba(255,255,255,0.95);
	transition: all 0.5s;
}

.still-loading #loading {
	width: 60px;
	height: 60px;
}

.loaded #loading {
	visibility: hidden;
	opacity: 0;
}



/* ==========================================================================
   Resposivo
   ========================================================================== */

/* 1920px+ */
@media (min-width: 1920px) {
	#header {
		background-size: cover;
	}
}

/* 1200px+ */
@media (min-width: 1200px) {
	.qlg {
		margin-bottom: 30px;
	}
}


/* até 1199px */
@media (max-width: 1199px) {
	html {
		font-size: 9px;
	}

	.qmd {
		margin-bottom: 30px;
	}

	.tbl .tcol.bmd, .tbl.bmd > .tcol {
		display: block;
		width: 100% !important;
	}

	.tbl.grid .tcol.bmd, .tbl.grid.bmd > .tcol {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	.txtl-md {
		text-align: left !important;
	}

	.txtr-md {
		text-align: right !important;
	}

	.txtc-md {
		text-align: center !important;
	}

	.b100-md {
		display: block;
		width: 100%;
		text-align: center;
	}

	#header {
		background-size: cover;
	}

		#header .header {
			height: 86em;
		}

		#header .logo {
			top: 3em;
		}

		#header .col1 {
			padding-top: 17rem;
		}

		#header h1 {
			font-size: 5em;
		}

		#header p {
			font-size: 2em;
		}

	#juliana .foto img {
		margin: auto;
	}
}

/* até 991px */
@media (max-width: 991px) {
	html {
		font-size: 7px;
	}

	.qsm {
		margin-bottom: 30px;
	}

	.tbl .tcol.bsm, .tbl.bsm > .tcol {
		display: block;
		width: 100% !important;
	}

	.tbl.grid .tcol.bsm, .tbl.grid.bsm > .tcol {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	.txtl-sm {
		text-align: left !important;
	}

	.txtr-sm {
		text-align: right !important;
	}

	.txtc-sm {
		text-align: center !important;
	}

	.b100-sm {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* até 767px */
@media (max-width: 767px) {
	html {
		font-size: 6px;
	}

	.qxs {
		margin-bottom: 30px;
	}

	.tbl .tcol.bxs, .tbl.bxs > .tcol {
		display: block;
		width: 100% !important;
	}

	.tbl.grid .tcol.bxs, .tbl.grid.bxs > .tcol {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	.txtl-xs {
		text-align: left !important;
	}

	.txtr-xs {
		text-align: right !important;
	}

	.txtc-xs {
		text-align: center !important;
	}

	.b100-xs {
		display: block;
		width: 100%;
		text-align: center;
	}

	#header {
		background: url(../img/header_mobile_bg.jpg) center center no-repeat;
		background-size: cover;
		position: relative;
	}

		#header > .container {
			position: relative;
			z-index: 100;
		}

		#header:after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 1;
			width: 100%;
			height: 6rem;
			border-top: solid 3rem #F4F4F4;
			background: #fff;
		}

		#header .logo {
			width: 100%;
			padding-right: 2rem;
		}

			#header .logo img {
				margin: auto;
			}

		#header .col1 {
			text-align: center;
		}

		#header .livro {
		}

			#header .livro img {
				position: relative;
				left: auto;
				bottom: auto;
				margin: auto;
				max-width: 100%;
			}

		#header .seta {
			display: none;
		}

	#juliana {
		padding: 7em 0;
	}

		#juliana p {
			text-align: center;
			font-size: 2.2em;
		}

		#juliana .abrath img {
			margin: auto;
		}

	#acesso {
		padding-bottom: 3rem;
	}

		#acesso .mh1 {
			height: auto !important;
		}

		#acesso .inner {
			text-align: center;
			margin-bottom: 7rem;
		}

			#acesso .inner h1 {
				font-size: 5em;
			}

		#acesso .form {
			height: auto !important;
		}

	#footer {
		padding: 4em 0;
	}
}

/* até 500px */
@media (max-width: 500px) {
	.tbl .tcol.bxxs, .tbl.bxxs > .tcol {
		display: block;
		width: 100% !important;
	}

	.tbl.grid .tcol.bxxs, .tbl.grid.bxxs > .tcol {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	.txtl-xxs {
		text-align: left !important;
	}

	.txtr-xxs {
		text-align: right !important;
	}

	.txtc-xxs {
		text-align: center !important;
	}

	.b100-xxs {
		display: block;
		width: 100%;
		text-align: center;
	}
}






/*! HTML5 Boilerplate v4.3.0 - FINAL */
.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
	*text-indent: -9999px
}

	.ir:before {
		content: "";
		display: block;
		width: 0;
		height: 150%
	}

.hidden {
	display: none !important;
	visibility: hidden
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px
}

	.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
		clip: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto
	}

.invisible {
	visibility: hidden
}

.clearfix:before, .clearfix:after {
	content: " ";
	display: table
}

.clearfix:after {
	clear: both
}

.clearfix {
	*zoom: 1
}

@media print {
	* {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important
	}

	a, a:visited {
		text-decoration: underline
	}

		a[href]:after {
			content: " (" attr(href) ")"
		}

	abbr[title]:after {
		content: " (" attr(title) ")"
	}

	.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
		content: ""
	}

	pre, blockquote {
		border: 1px solid #999;
		page-break-inside: avoid
	}

	thead {
		display: table-header-group
	}

	tr, img {
		page-break-inside: avoid
	}

	img {
		max-width: 100% !important
	}

	@page {
		margin: .5cm
	}

	p, h2, h3 {
		orphans: 3;
		widows: 3
	}

	h2, h3 {
		page-break-after: avoid
	}
}