@import url("https://fonts.googleapis.com/css?family=Lobster");
@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
@import url("https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600");
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap');

/* Normalize */
article, figcaption, figure, footer,
header, nav, section { display: block }
s
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%
}

b, strong {
	font-family: opensans-bold, helvetica;
	font-weight: 100
}

address {
	font-size: 1.25em;
	font-style: normal
}

small { font-size: 80% }

img {
	border: 0;
	max-width: 100%
}

figure { margin: 0 }

button, input, select, textarea {
	font-family: inherit;
	font-size: 100%;
	margin: 0;
	outline: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent
}

button, input { line-height: normal }

button, select { text-transform: none }

button,
html input[type=button],
input[type=submit] {
	-webkit-appearance: button;
	cursor: pointer
}

button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0
}

textarea {
	overflow: auto;
	vertical-align: top
}

*, ::after, ::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

@font-face {
	font-family: opensans-regular;
	src: url(/font/opensans-regular.woff2) format('woff2'),
		url(/font/opensans-regular.woff) format('woff');
	font-weight: normal;
	font-style: normal
}

@font-face {
	font-family: opensans-light;
	src: url(/font/opensans-light.woff2) format('woff2'),
		url(/font/opensans-light.woff) format('woff');
	font-weight: normal;
	font-style: normal
}

@font-face {
	font-family: opensans-bold;
	src: url(/font/opensans-bold.woff2) format('woff2'),
		url(/font/opensans-bold.woff) format('woff');
	font-weight: normal;
	font-style: normal
}

@font-face {
	font-family: acens;
	src: url(/font/acens.woff) format('woff');
	font-weight: normal;
	font-style: normal
}

body {
	background: #F6F7F1;
	color: #776A6B;
	font-family: opensans-light, helvetica;
	font-size: 80%;
	line-height: 1.2;
	margin: 0;
	padding: 0
}

a {
	color: inherit;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
	text-decoration: none
}

	a:active, a:focus, a:hover { outline: 0 }

h1, h2, h3, h4, h5, h6 {
	font-family: opensans-bold, helvetica;
	font-weight: 300;
	margin: 1.25em 0
}

h1 { font-size: 1.75em }

p {
	font-size: 1.5em;
	line-height: 1.3;
	margin-bottom: .8125em
}

/* Input */
input[type=email],
input[type=tel],
input[type=text],
input[type=search],
select,
textarea {
	background: transparent;
	border: 2px solid #5D7790;
	border-radius: 4px;
	display: inline-block;
	height: 2.25em;
	margin: 0 0 .75em;
	padding: 0 .5em 0 .5em;
	width: 100%
}

	input[type=email]:focus,
	input[type=tel]:focus,
	input[type=text]:focus,
	input[type=search]:focus,
	select:focus,
	textarea:focus { outline: 0 }

textarea {
	height: auto;
	max-height: 9.875em;
	padding: .4375em
}

label {
	display: block;
	font-family: opensans-bold, helvetica;
	margin-bottom: .25em
}

/* --------------------------------- */
/*               Grid                */
/* --------------------------------- */
.container {
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	padding: 1.5em 0;
	position: relative
}

.row {
	margin: 2.25em auto 0;
	position: relative;
	width: 100%
}

	.row.squeeze {
		margin-top: 0;
		margin-bottom: 0
	}

	.row .row {
		width: auto;
		margin: 2.5em -1.5em;
		max-width: none
	}

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

	.row .row::after, .row::after { clear: both }

.col {
	padding-left: 2em;
	padding-right: 2em;
	width: 100%;
	float: left
}

.small-10 { width: 10% }

.small-20 { width: 20% }

.small-30 { width: 30% }

.small-40 { width: 40% }

.small-50 { width: 50% }

.small-60 { width: 60% }

.small-70 { width: 70% }

.small-80 { width: 80% }

.small-90 { width: 90% }

.small-100 { width: 100% }

/* --------------------------------- */
/*            Block Grid             */
/* --------------------------------- */
[class*=block-grid-] {
	display: block;
	padding: 0;
	margin: 0
}

[class*=block-grid-]::after,
[class*=block-grid-]::before {
	content: " ";
	display: table
}

[class*=block-grid-] > * {
	display: block;
	height: auto;
	float: left;
	padding: 0 1.5em 1.5em
}

[class*=block-grid-] > :nth-of-type(n) { clear: none }

.small-block-grid-1 > :nth-of-type(1n+1),
[class*=block-grid-]::after { clear: both }

.small-block-grid-1 > * { width: 100% }

/* --------------------------------- */
/*            Components             */
/* --------------------------------- */
/*              Button               */
/* --------------------------------- */
.button {
	border: none;
	cursor: pointer;
	display: inline-block;
	font-family: opensans-bold, helvetica;
	font-size: inherit;
	line-height: inherit;
	margin: .5em 0 1.5em;
	overflow: hidden;
	padding: .5em 1.25em .375em;
	position: relative;
	top: 0;
	text-align: center;
	text-decoration: none
}

	.button:focus, .button:hover { top: 2px }

	.button:active { top: 3px }

	.button-clear {
		background: transparent;
		border: none;
		color: transparent
	}

	.big-button {
		font-size: 1.5em;
		padding: .5em .75em
	}

	.button-blue {
		background: #73c21e;
		box-shadow: 0 3px #60a01c;
		color: #FFF
	}

		.button-blue:focus, .button-blue:hover { box-shadow: 0 2px #60a01c }

		.button-blue:active { box-shadow: 0 0 #60a01c }

	.button-blue-dark {
		background: #5D7790;
		box-shadow: 0 3px #7C97A8;
		color: #FFF
	}

		.button-blue-dark:focus, .button-blue-dark:hover { box-shadow: 0 2px #7C97A8 }

	.button-white {
		background: #FFF;
		box-shadow: 0 3px #BEB5B6;
		color: #776A6B
	}

		.button-white:focus, .button-white:hover { box-shadow: 0 2px #BEB5B6 }

		.button-white:active { box-shadow: 0 0 #BEB5B6 }

/* -------------------------------- */
/*          Special Link            */
/* -------------------------------- */
.special-link {
	position: relative;
	display: inline-block
}

	.special-link::after {
		background: #C5B43C;
		content: '';
		display: inline;
		height: 1px;
		width: 0;
		position: absolute;
		left: 0;
		bottom: 0;
		transition: .2s
	}

		.special-link:focus::after, .special-link:hover::after {
			width: 100%;
			transition: .2s
		}

/* -------------------------------- */
/*              Video               */
/* -------------------------------- */
.flex-video {
	height: 0;
	margin-top: 1.75em;
	margin-bottom: 1em;
	padding-top: 1.5625em;
	padding-bottom: 67.5%;
	position: relative;
	overflow: hidden
}

	.flex-video iframe,
	.flex-video video {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0
	}

/* --------------------------------- */
/*       Inline list and Menu        */
/* --------------------------------- */
.inline-list,
.menu {
	padding: 0;
	list-style: none;
	overflow: hidden
}

	.inline-list > li,
	.menu > li {
		display: block;
		float: left;
		list-style: none;
		margin-left: 1.075em
	}

		.inline-list li:first-child,
		.menu li:first-child { margin-left: 0 }

			.inline-list > li > *,
			.menu > li > * { display: block }

.inline-list-centered,
.menu-container { text-align: center }

	.inline-list-centered ul.inline-list li,
	.menu-container .menu li {
		display: inline-block;
		float: none
	}

/* --------------------------------- */
/*            Toggle Menu            */
/* --------------------------------- */
.toggle-menu {
	background: transparent;
	border: none;
	display: block;
	padding: .75em;
	position: fixed;
	top: 0;
	left: 0
}

.menu {
	background: #F5F4F2;
	border-top: 1px solid #DCDBD9;
	border-right: 1px solid #DCDBD9;
	display: block;
	height: 100%;
	width: 15em;
	list-style: none;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 3.25em;
	left: -15em;
	transition: all .3s ease
}

	.menu.open {
		left: 0;
		min-height: 1000px
	}

	.menu-container .menu li { display: block }

	.menu > li { margin-left: 0 }

	.menu .menu-item {
		border-bottom: 1px solid #DCDBD9;
		color: #455e87;
		font-family: opensans-bold, helvetica;
		margin: 0;
		padding: 1em 0 .875em
	}

		.menu .menu-item::after { display: none }

		.menu .menu-item:hover, .menu .menu-item:focus { background: #FFF }

		.menu .menu-item:active { opacity: .6 }

	.menu .button { display: inline-block }

/* --------------------------------- */
/*             Helpers               */
/* --------------------------------- */
h2.big-title,
h3.big-title { letter-spacing: -3px }

h2.big-title { font-size: 4em }

h3.big-title { font-size: 2.25em }

.show-for-small,
.block { display: block }

.hide-for-small { display: none }

.radius { border-radius: 15px }

.rounded { border-radius: 500px }

.left { float: left }

/* horizontal centering */
.center-for-small,
.center {
	display: block;
	float: none;
	margin-left: auto;
	margin-right: auto
}

.right { float: right }

.text-center-for-small,
.text-center { text-align: center }

.text-right { text-align: right }

/* To hide a text */
.invisible-text {
	position: absolute;
	text-indent: -9999px
}

.text-white { color: #FFF }

.text-blue { color: #33426c }

.text-green { color: #73c21e }

.text-dark { color: #776A6B }

.text-orange { color: #C5B43C }

.thin-text { font-family: opensans-light, helvetica }

.uppercase { text-transform: uppercase }

.big-text { font-size: 150% }

.small-text { font-size: 80% }

.white-bg { background: #FFF }

.blue-gradient-bg {
	background: #360033;
	background: -webkit-linear-gradient(left, #0B8793 0%, #360033 100%);
	background: linear-gradient(to right, #0B8793 0%, #360033 100%)
}

.horizontal-margin {
	margin-top: 1.25em;
	margin-bottom: 1.25em
}

.middle-screen {
	display: flex;
	align-items: center;
	height: auto;
	min-height: calc(100vh - 5.4375em)
}

.full-width { width: 100% }

/* ----------------------------- */
/*     Containers and Layout     */
/* ----------------------------- */
.full-screen {
	color: #E1E1E1;
	overflow: hidden;
	position: relative;
	height: 100vh;
	width: 100%
}

.home-cover {
	background: url(/img/home-header-illustration-bg.svg) no-repeat,
		url(/img/home-cover-bg.jpg) no-repeat
}

.resources-cover {
	background: url(/img/home-header-illustration-bg.svg) no-repeat,
		url(/img/resources-cover-bg.jpg) no-repeat
}

.ebooks-cover {
	background: url(/img/ebooks-cover-bg.jpg) no-repeat;
	background-size: cover
}

.dicas-gerar-valor-cover {
	background: url(/img/dicas-vendas.jpg) no-repeat;
	background-size: cover
}

.home-cover,
.resources-cover {
	background-size: 92%, cover;
	background-position: center left, center
}

.sub-header-try-now { background: url(/img/try-now-header-bg.jpg) no-repeat }

.sub-header-contact { background: url(/img/contact-header-bg.jpg) no-repeat }

.sub-header {
	background-size: cover;
	background-position: center
}

.sub-header { padding: 7em 0 4em }

.top-bar {
	background: #F5F4F2;
	box-shadow: 0 2px 0 0 rgba(0, 0, 0, .1);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1 /* 1000 */
}

.logo {
	margin: 0 auto;
	float: none;
	text-align: center
}

	h1.logo,
	a.logo {
		display: block;
		font-size: 1em;
		line-height: 0;
		margin: .5em 0
	}

	.logo img {
		display: block;
		margin: 0 auto;
		height: 2.25em;
		width: 14.25em
	}

.intro-text {
	font-family: opensans-bold, helvetica;
	font-size: 1.625em;
	line-height: 1.3;
	position: absolute;
	top: 46%;
	left: 5%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%)
}

/* Scroll anchor */
.scroll-to {
	color: #A5BDC1;
	display: block;
	font-family: opensans-bold, helvetica;
	position: absolute;
	left: 0;
	right: 0;
	bottom: .75em;
	text-align: center;
	width: 100%
}

	.scroll-to span {
		display: block;
		letter-spacing: 2px;
		margin: .5em;
		text-transform: uppercase
	}

.special-title::after {
	background: url(/img/title-trace.svg) no-repeat;
	background-size: 70%;
	content: '';
	background-position: center;
	display: block;
	height: 1.25em;
	position: relative;
	bottom: .125em
}

.customers-container {
	background: #DDE3C9 url(/img/arrows-up-illustration.svg) no-repeat;
	background-position: center bottom 2%;
	background-size: 90%;
	padding-bottom: 92%
}

.gestao-de-indicadores-container {
	background: url(/img/gestao-de-indicadores-bg.jpg) no-repeat;
	background-position: center;
	background-size: cover;
	padding-top: 3em
}

.gestao-de-vendas-container {
	background: #F4F4F4;
	box-shadow: 0px -7px 0 rgba(255, 255, 255, .2);
	padding-bottom: 45%
}

.gestao-da-carteira-container {
	background: url(/img/line-graphic-illustration.svg),
				url(/img/gestao-da-carteira-bg.jpg);
	background-position: bottom right, center;
	background-repeat: no-repeat;
	background-size: 80%, cover;
	box-shadow: inset 0px 7px 0 rgba(255, 255, 255, .2);
	padding-bottom: 68%
}

.contact-container {
	background: url(/img/contact-illustration.svg);
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: 90%;
	padding-bottom: 45%
}

.customers-container,
.gestao-de-indicadores-container,
.gestao-de-vendas-container,
.gestao-da-carteira-container,
.contact-container {
	overflow: hidden;
	position: relative
}

.resource-section-title .title-image {
	border: none;
	display: block;
	left: auto;
	width: 80%
}

.resource-section-title .title-text {
	display: block;
	font-size: 1.25em;
	padding: .5em;
	text-align: center;
	width: 100%
}

.resource-item-title {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	margin: 1.5em 1em
}

	.resource-item-title .title-image {
		border: none;
		display: block;
		float: left;
		left: auto;
		width: 20%
	}

	.resource-item-title .title-text {
		-ms-align-self: center;
		-webkit-align-self: center;
		align-self: center;
		display: block;
		float: left;
		font-family: opensans-bold, helvetica;
		font-size: 1.25em;
		padding: 0 1em;
		width: 80%
	}

.gestao-de-vendas-container .title-image,
.gestao-da-carteira-container .title-image { border: none }

.agenda-crm-image,
.tela-crm-image {
	border-radius: 5px;
	box-shadow: -3px -3px 10px rgba(0, 0, 0, .2);
	position: absolute
}

.tela-crm-image {
	left: 14%;
	bottom: -5%;
	width: 80%;
	z-index: 2
}

.agenda-crm-image {
	left: 6%;
	bottom: -1%;
	width: 80%;
	z-index: 1
}

	.agenda-crm-image > img,
	.tela-crm-image > img { border-radius: 5px }

.blog-articles-list .article-title { font-size: 1.5em }

.article-info {
	font-size: .9375em;
	font-style: italic;
}

.blog-post {
	color: #4B4B4D;
	font-family: opensans-regular, helvetica;
	height: 100%;
	margin-top: 5em
}

	.blog-post h2,
	.blog-post h3,
	.blog-post h4,
	.blog-post h5,
	.blog-post h6 {
		font-size: 1.5em;
		margin-bottom: .5em
	}

	.blog-post p {
		font-size: 1em;
		line-height: 1.6;
		margin-bottom: .8125em
	}


	.blog-post a {
		color: #C5B43C;
		display: inline-block;
		position: relative
	}

		.blog-post a::after {
			background: #C5B43C;
			content: '';
			display: inline;
			height: 1px;
			width: 0;
			position: absolute;
			left: 0;
			bottom: 0;
			transition: .2s
		}

			.blog-post a:focus::after, .blog-post a:hover::after {
				width: 100%;
				transition: .2s
			}

			.blog-post a.author-image:focus::after,
			.blog-post a.author-image:hover::after {
				width: 0;
			}

		.blog-post ul li,
		.blog-post ol li {
			line-height: 1.6;
			margin-bottom: .5em
		}

	.blog-post blockquote {
		font-family: opensans-light, helvetica;
		font-size: 1.5em;
		line-height: 1.6;
		margin: 2em 0;
		text-align: center
	}

	.blog-post .post-header {
		padding-top: 2em;
		position: relative
	}

	.blog-post .post-info {
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		width: 100%
	}

		.blog-post .post-info h1 {
			font-size: 1.5em;
			margin: .5em 0
		}

		.blog-post .post-info a { color: #BAE4AC }

	.blog-post .post-cover {
		display: block;
		position: relative;
		margin-top: -2em;
		margin-left: -1.5em;
		margin-right: -1.5em
	}

		.blog-post .post-cover img { border-radius: 4px 4px 0 0 }

		.blog-post .post-cover::before {
			background: rgba(0, 0, 0, .6);
			border-radius: 4px 4px 0 0;
			content: '';
			display: block;
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0
		}

	.blog-post .post-content img {
		border-radius: 5px;
		display: block;
		margin: 1em auto
	}

	.blog-post .post-navigation {
		font-family: opensans-light, helvetica;
		margin: 2em 0;
	}

	.blog-post .previous-post,
	.blog-post .next-post {
		border-top: 4px solid transparent;
		font-size: .8125em;
		margin: 2em 0;
		padding: 2em;
		transition: .2s
	}

		.blog-post .previous-post:focus, .blog-post .previous-post:hover,
		.blog-post .next-post:focus, .blog-post .next-post:hover {
			border-top: 4px solid #C5B43C;
			text-decoration: none;
			transition: .2s;
		}

		.blog-post .previous-post::after,
		.blog-post .next-post::after { display: none }

	.author-info { margin-bottom: 2em }

		.author-info h4 { border: none }

		.author-info .author-image {
			float: left;
			margin-right: 1.5em
		}

	.blog-search { margin: 2.5em auto 1em }

.card {
	background: #FFF;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	padding: 0 1.5em
}

#map {
	box-shadow: 0 0 5px 2px rgba(0, 0, 0, .2);
	height: 28em;
	margin-bottom: 2em
}

	#map img { max-width: none }

.footer { position: relative }

.try-now-container {
	margin-top: -4.5em;
	margin-left: 8%;
	position: relative
}

.try-now-inner {
	float: left;
	padding-top: 1.5em
}

.developed-by {
	border-right: none;
	padding-bottom: 1em
}

/* --------------------------------- */
/*           Media Queries           */
/* --------- Tablet screen --------- */
/*         min-width: 768px          */
/* --------------------------------- */
@media screen and (min-width: 768px) {

	/* ---------------------------- */
	/*            Grid              */
	/* ---------------------------- */
	.container { max-width: 85% }

  .medium-10 { width: 10% }
  
  .medium-20 { width: 20% }

  .medium-30 { width: 30% }

	.medium-40 { width: 40% }

	.medium-50 { width: 50% }

	.medium-60 { width: 60% }

	.medium-70 { width: 70% }

	.medium-80 { width: 80% }

  .medium-90 { width: 90% }

	.medium-100 { width: 100% }

	.col {
		padding-left: 1.5em;
		padding-right: 1.5em
	}

	/* --------------------------------- */
	/*            Block Grid             */
	/* --------------------------------- */
	[class*=block-grid-] > :nth-of-type(n) { clear: none }

	.medium-block-grid-2 > :nth-of-type(2n+1),
	[class*=block-grid-]::after { clear: both }

	.medium-block-grid-2 > * { width: 50% }

	/* ----------------------------- */
	/*           Helpers             */
	/* ----------------------------- */
	.center-for-small { float: left }

	.text-center-for-small { text-align: left }

	.center-for-medium {
		display: block;
		float: none;
		margin-left: auto;
		margin-right: auto
	}

		/* For using Flexbox */
	.flex-container {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex
	}

		/* Vertical and horizontal centering */
		.flex-container .align-center {
			-ms-align-self: center;
			-webkit-align-self: center;
			align-self: center
		}

	.skew-container,
	.skew-invert-container {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		overflow: hidden;
		position: relative;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d
	}

	.skew-container {
		right: 8%;
		padding-left: 5%;
		-webkit-transform: skewX(-20deg);
		-ms-transform: skewX(-20deg);
		transform: skewX(-20deg)
	}

		.skew-container .skew-container-inner {
			-webkit-transform: skewX(20deg);
			-ms-transform: skewX(20deg);
			transform: skewX(20deg)
		}

	.skew-invert-container {
		right: 6.3%;
		padding-left: 5%;
		-webkit-transform: skewX(20deg);
		-ms-transform: skewX(20deg);
		transform: skewX(20deg)
	}

		.skew-invert-container .skew-invert-container-inner {
			-webkit-transform: skewX(-20deg);
			-ms-transform: skewX(-20deg);
			transform: skewX(-20deg)
		}

	/* ----------------------------- */
	/*     Containers and Layout     */
	/* ----------------------------- */
	.home-header,
	.resources-header { background-size: 50%, cover }

	.intro-text { font-size: 2.25em }

	.special-title::after { background-size: auto }

	.resource-section-title .title-image {
		border-right: 2px solid #C1C492;
		left: 0;
		padding: .75em 2.75em .75em 1.75em;
		width: 33%
	}

	.resource-section-title .title-text {
		font-size: 1.4375em;
		padding: 1em 0;
		text-align: left;
		width: 55%
	}

	.resource-item-title { margin: 2.5em 0 }

		.resource-item-title .title-image {
			border-right: 2px solid #c1c492;
			left: 0;
			padding: .25em 1.5em .25em .5em;
			width: 20%
		}

		.resource-item-title .title-text {
			font-size: 1.5em;
			padding: 0 1em;
			width: 80%
		}

	.gestao-de-vendas-container { padding-bottom: 48% }

	.gestao-da-carteira-container { padding-bottom: 55% }

	.gestao-de-vendas-container .title-image,
	.gestao-da-carteira-container .title-image { border-right: 2px solid #C7C7C7 }

	.developed-by { border-right: 1px solid #617588 }

	.blog-post .post-info h1 {
		font-size: 2em;
		margin: .25em 0
	}

	.blog-post blockquote { font-size: 2em }

	.blog-post .post-cover {
		margin-left: -3.5em;
		margin-right: -3.5em
	}

	.blog-search { margin: 1em auto }

		.blog-search input.input-search {
			height: 2.5em;
			width: 80%
		}

		.blog-search .button-search {
			float: right;
			width: 20%
		}

			.blog-search .button-search::after {
				background: url(/img/search-icon.svg) no-repeat;
				content: '';
				display: block;
				height: 30px;
				width: 30px;
				margin: .125em auto 0 auto
			}

	.card { padding: 0 3.5em }

}

/* -------- Desktop screen --------- */
/*        min-width: 1120px          */
/* --------------------------------- */
@media screen and (min-width: 1120px) {

	body { font-size: 100% }

	p { font-size: 1.25em }

	/* ---------------------------- */
	/*            Grid              */
	/* ---------------------------- */
	.container { max-width: 72.75em }

	.large-20 { width: 20% }

	.large-25 { width: 25% }

	.large-30 { width: 30% }

	.large-33 { width: 33.333% }

	.large-40 { width: 40% }

	.large-50 { width: 50% }

	.large-60 { width: 60% }

	.large-70 { width: 70% }

	.large-80 { width: 80% }

	.large-100 { width: 100% }

	/* --------------------------------- */
	/*            Block Grid             */
	/* --------------------------------- */
	[class*=block-grid-] > :nth-of-type(n) { clear: none }

	.large-block-grid-3 > :nth-of-type(3n+1),
	[class*=block-grid-]::after { clear: both }

	.large-block-grid-3 > * { width: 33.33333% }

	/* ----------------------------- */
	/*          Components           */
	/* ----------------------------- */
	/*             Menu              */
	/* ----------------------------- */
	.menu {
		background: transparent;
		border: none;
		display: block;
		height: auto;
		width: auto;
		padding: 0;
		position: static;
		list-style: none;
		float: right;
		margin: 1.75em 0 .4375em;
		overflow: visible
	}

		.menu > li {
			display: block;
			float: left;
			list-style: none;
			margin-left: .75em
		}

			.menu li:first-child { margin-left: 0 }

				.menu > li > * { display: block }

		.menu-container .menu li {
			display: inline-block;
			float: none
		}

		.menu .button { display: inline }

		.menu .menu-item {
			background: transparent;
			border: none;
			font-size: 1.125em;
			letter-spacing: -1px;
			padding: .25em .5625em .125em;
			position: relative;
			transition: .2s
		}

			.menu .menu-item:hover, .menu .menu-item:focus { background: transparent }

			.menu .menu-item::after {
				background: #455e87;
				content: '';
				display: block;
				height: 2px;
				width: .6875em;
				transition: .2s
			}

				.menu .menu-item:focus::after, .menu .menu-item:hover::after, .menu .menu-item.current {
					width: 100%;
					transition: .2s
				}

	/* ---------------------------- */
	/*           Helpers            */
	/* ---------------------------- */
	.center-for-large {
		display: block;
		float: none;
		margin-left: auto;
		margin-right: auto
	}

	.hide-for-large { display: none }

	.reverse-for-large {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-direction: row-reverse;
		-webkit-flex-direction: row-reverse;
		flex-direction: row-reverse
	}

	.horizontal-margin {
		margin-top: 3em;
		margin-bottom: 3em
	}

	.text-white-for-large { color: #FFF }

	/* ----------------------------- */
	/*     Containers and Layout     */
	/* ----------------------------- */
	.header-bar {
		background: #F6F7F1;
		height: 5.4375em
	}

	.sub-header { padding: 2em 0 }

	.top-bar {
		padding: 0 6%;
		position: relative
	}

	.intro-text { font-size: 1.875em }

	.logo {
		display: block;
		float: left;
		padding: .25em 0
	}

		.logo img {
			height: 3.75em;
			width: 21.625em
		}

	.home-cover,
	.resources-cover { background-size: 35%, cover }

	.customers-container {
		background-size: 25vw;
		background-position: bottom 1% right 11%;
		padding-bottom: 0
	}

	.gestao-de-vendas-container { padding-bottom: 0 }

	.gestao-da-carteira-container {
		background-size: 40%, cover;
		padding-bottom: 0
	}

	.contact-container {
		background-size: 40%;
		padding-bottom: 0
	}

	.agenda-crm-image,
	.tela-crm-image {
		box-shadow: -8px 8px 25px rgba(0, 0, 0, .2);
		left: auto;
		bottom: auto
	}

	.tela-crm-image {
		top: 45%;
		right: -30%
	}

	.agenda-crm-image {
		top: 24%;
		right: -24%
	}

	.blog-post { margin-top: 2em }

	.blog-search input.input-search { height: 2.25em }

	.try-now-container {
		background: linear-gradient(to right, #0B8793 0%, #24385B 100%);
		margin: -2em 0 -1px;
		padding-top: 3em;
		padding-bottom: 3em
	}

	.try-now-inner { float: none }

}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 1000;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .popup{
    width: 70%;
  }
}