﻿* {
	box-sizing: border-box;
	position: relative;
}
*:focus {
	outline: none;
}
::-ms-clear {
	display: none;
}
button, input, select, textarea {
	font-size: inherit;
	font-family: inherit;
	color: inherit;
}
.loading-true .diretiva1 {
	display: none;
}
	.diretiva1 a, .diretiva1 a[href] {
		color: #03A9F4;
	}
body {
	background-color: #fff;
	color: #1a1a1a;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 1.1vw;
	margin: 0;
	padding: 0;
	line-height: 1.75em;
	scroll-behavior: smooth;
}
* {
	box-sizing: border-box;
	position: relative;
	text-rendering: optimizelegibility;
}
*:focus {
	outline: none;
}
::-ms-clear {
	display: none;
}
button, input, select, textarea, a {
	font-size: inherit;
	font-family: inherit;
	color: inherit;
	text-decoration: inherit;
}
icon, a[class^="icon-"], a[class*=" icon-"], button[class^="icon-"], button[class*=" icon-"] {
	font-size: 24px;
	text-align: center;
	text-decoration: none;
	line-height: normal;
}
body.loading-1 input[type="submit"] {
	display: none;
}
p {
	text-align: justify;
}

.blue {
	background-color: #01579B;
}
.lightblue {
	background-color: #0277BD;
}
.clearblue {
	background-color: #03A9F4;
}
.red {
	background-color: #EE4256;
}
.green {
	background-color: #50BCB6;
}
.yellow {
	background-color: #FCB64B;
}

.font-blue {
	color: #01579B;
}
.font-lightblue {
	color: #0277BD;
}
.font-clearblue {
	color: #03A9F4;
}
.font-red {
	color: #EE4256;
}
.font-green {
	color: #50BCB6;
}
.font-yellow {
	color: #FCB64B;
}

[center] { 
	text-align: center;
}
[justify] { 
	text-align: justify;
}

page, block, stuff {
	display: block;
}

block.header {
	height: 7.32vw;
	display: flex;
	padding-left: 22%;
}
	block.header > stuff.logo {
		position: absolute;
		top: 0;
		left: 20px;
		bottom: 0;
		width: 18%;
		background-image: url(https://myhappen.azurewebsites.net/diretiva1/1.2/vectors/logo.contabil.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
		block.header > stuff.logo > a {
			display: block;
			height: 100%;
		}
		block.header > stuff.logo img {
			display: none;
		}
	block.header > stuff.menu {
		text-transform: uppercase;
		color: #01579B;
		flex: 1 auto;
		text-align: center;
		line-height: 7.32vw;
	}
	block.header > stuff.menu.social {
		font-size: 1.8vw;
	}
		block.header > stuff.menu > a {
			display: block;
			height: 100%;
		}
		block.header > stuff.menu > a:hover {
			background-color: #01579B;
			color: #fff;
		}
		page.funcionalidades > block.header > stuff.menu.funcionalidades > a, page.planos > block.header > stuff.menu.planos > a, page.blog > block.header > stuff.menu.blog > a {
			border-bottom: 2px solid #01579B;
			font-weight: bold;
		}
		block.header > stuff.menu.planos {
			color: #50bcb6;
			font-weight: bold;
		}
		block.header > stuff.menu.login {
			font-weight: bold;
		}
		
block.banner, block.slide {
	height: 35.14vw;
}
block.banner {
	display: block;
	color: #1a1a1a;
	overflow: hidden;
}
	block.banner > stuff.img, block.banner > stuff.img > a, block.banner > stuff.img > a > img {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		height: 100%;
	}
	block.banner > stuff.text {
		position: absolute;
		top: calc(50% - 7vw);
		left: calc(33% - 20.6vw);
	}
		block.banner > stuff.text > a > [icon], block.blocks > stuff.block > a > [icon] {
			font-size: 9vw;
		}
		block.banner > stuff.text > a > [icon] {
			float: left;
		}
		block.banner > stuff.text > a > [text] {
			font-size: 3vw;
			letter-spacing: 0.85vw;
			text-transform: uppercase;
			margin-left: 2vw;
			float: left;
			line-height: 1.15em;
			margin-top: 1.2vw;
		}
		

	
	block.banner.meu-contador {
		margin: 0;
	}
		block.banner.meu-contador > stuff.links {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
		}
			block.banner.meu-contador > stuff.links > div {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
			}
				block.banner.meu-contador > stuff.links > div > img {
					max-width: 100%;
				}
				block.banner.meu-contador > stuff.links > div > a {
					position: absolute;
					top: 0;
					bottom: 0;
				}
				block.banner.meu-contador > stuff.links > div > a.link1 {
					left: 0;
					right: 50%;
				}
				block.banner.meu-contador > stuff.links > div > a.link2 {
					right: 0;
					left: 50%;
				}
		
block.blocks, block.startnow {
	height: 17.57vw;
	color: #fff;
	display: flex;
}
	block.blocks > stuff.block {
		flex: 1;
		text-align: center;
		padding: 2vw;
	}
	ablock.blocks > stuff.block:hover {
		/*background-color: rgba(0,0,0,0.25)*/
	}
		block.blocks > stuff.block > a > [icon] {
			
		}
		block.blocks > stuff.block > a > [text] {
			display: block;
			line-height: 1.5em;
			text-transform: uppercase;
			font-size: 1.3vw;
			letter-spacing: 0.2vw;
		}
		
block.slide {
	color: #1a1a1a;
	display: flex;
	margin: 2vw 0;
}
	block.slide > stuff {
		width: 50%;
	}
	block.slide > stuff.img {
	}
		block.slide > stuff.img > a {
			overflow: hidden;
			display: block;
		}
			block.slide > stuff.img > a > img {
				width: 100%;
			}
	block.slide > stuff.text {
		display: block;
		padding: 3vw;
	}
		block.slide > stuff.text > a > [title], blog > post > .title {
			text-align: center;
			font-size: 1.7vw;
			letter-spacing: 0.25vw;
			font-weight: bold;
			text-transform: uppercase;
			margin-bottom: 3vw;
		}
		block.slide > stuff.text > a > [text], blog {
			font-size: 1.7vw;
			line-height: 1.5em;
		}
		block.slide > stuff.text > a > [text] {
			margin-bottom: 1.5vw;
			overflow: hidden;
		}
			block.slide > stuff.text > a > [text] > [icon] {
				font-size: 2.4vw;
				width: 3vw;
				position: absolute;
				top: 0;
				left: 0;
			}
			block.slide > stuff.text > a > [text] > [text] {
				margin-left: 3.5vw;
				display: block;
				
			}
			
block.startnow {
	padding: 0 10vw;
	border-bottom: 1px solid #e6e6e6;
	color: #fff;
}
	block.startnow > stuff.content {
		width: 100%;
	}
		block.startnow > stuff.content > a {
			display: flex;
		}
			block.startnow > stuff.content > a > div {
				flex: 1;
			}
			block.startnow > stuff.content > a > [button] {
				text-align: center;
			}
				block.startnow > stuff.content > a > [button] > span {
					height: 5.12vw;
					background-color: #fff;
					font-size: 1.7vw;
					letter-spacing: 0.25vw;
					font-weight: bold;
					text-transform: uppercase;
					line-height: 5.12vw;
					padding: 0 3vw;
					border-radius: 10vw;
					display: inline-block;
					top: calc(50% - (5.12vw / 2));
				}
			block.startnow > stuff.content > a > [text] {
				text-align: center;
				font-size: 1.7vw;
				line-height: 1.6em;
				padding: 6.2vw 0;
			}
			
block.blog {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
}
	block.blog > stuff.blog {
		width: 75%;
	}
	block.blog > stuff.banner-right-img {
		width: 25%;
	}
		block.blog > stuff.banner-right-img > a {
			
		}
			block.blog > stuff.banner-right-img > a > img {
				width: 100%;
				display: block;
			}
			
blog {
	display: block;
	font-size: 1.4vw;
	line-height: 1.5em;
	text-align: justify;
}
	blog > post {
		display: block;
		overflow: hidden;
		margin: 2vw;
	}
		blog > post > *:not(.type-2) {
			display: block;
			margin: 3vw;
		}
		blog > post > a.title {
			margin: 1vw 3vw 3vw 3vw;
		}
		blog > post.isUniq-0 > a.author {
			display: none;
		}
		blog > post.isUniq-1 > a.description {
			display: none;
		}
			blog > post > a.description > more {
				display: block;
				font-weight: bold;
				margin-top: 1vw;
			}
		blog > post > .img {
			display: none;
		}
		blog > post.hasImage-1.isUniq-0 > a.img {
			display: block;
			float: left;
			width: 20vw;
			height: 16vw;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			margin: 0 2vw 1vw 0;
		}
		blog > post > .title {
			display: block;
			text-align: left;
		}
		blog > post > .description, blog > post > a.author {
			font-style: italic;
		}
		blog > post.isUniq-0 > .content {
			display: none;
		}
		blog > post.isUniq-1 > .content {
			display: block;
		}
		blog > post > .content.type-2 {
			text-align: center;
		}
			blog > post > .content.type-2 > img {
				max-width: 100%;
			}
			blog > post > .content a {
				color: #01579B;
				text-decoration: underline;
			}
			blog > post > .content .banner-newsletter {
				background: #83edb8;
				padding: 2.5vw;
				line-height: 1.35em;
			}
				blog > post > .content .banner-newsletter > span.icon {
					float: left;
					font-size: 4vw;
					margin-right: 2vw;
				}
			
form {
	padding: 3vw;
	text-align: center;
	font-size: 1.3vw;
}
contact > form {
	padding: 0 3vw 3vw 3vw;
}
	form > div, form label {
		display: block;
	}
	form > div label, form input[type="submit"], courses course > side > button {
		line-height: 1.5em;
		text-transform: uppercase;
		font-size: 1.3vw;
		letter-spacing: 0.2vw;
		width: auto;
	}
	form > div, .form > div {
		text-align: left;
		margin-bottom: 2vw;
	}
		form > div input, form > div select, form > div textarea {
			width: 100%;
			padding: 0 1vw;
			height: 4vw;
			border: 1px solid #1a1a1a;
		}
		form > div textarea {
			height: 20vw;
			padding: 1vw;
			resize: none;
		}
		form > div label {
			margin-bottom: 1vw;
		}
		form > div err {
			display: block;
			color: #EE4256;
			line-height: 1.5em;
			text-transform: uppercase;
			font-size: 1vw;
			letter-spacing: 0.15vw;
			margin-top: 1vw;
		}
		form input[type="submit"], courses course > side > button {
			border: 0;
			background-color: #50BCB6;
			color: #fff;
			padding: 0 2vw;
			height: 4vw;
			border-radius: 10vw;
			cursor: pointer;
		}	
	form > .forgot {
		text-align: left;
	}
	[container] > [fp] {
		margin-bottom: 5vw;
	}
	form > [container] > [contract] > [msg] {
		height: 50vh;
		overflow-x: none;
		overflow-y: auto;
	}
	form > [container] > [contract] > .agree > err {
		display: block;
		color: #EE4256;
	}
	form div.submit {
		text-align: center;
	}
	
	contact > form > .subscribe {
		text-align: center;
	}
		contact > form > .subscribe > input {
			width: auto;
			height: auto;
			margin-right: 10px;
		}

subscribe {
	display: block;
}
	subscribe > form > .title {
		display: none;
	}
block.slide.w100 {
	height: auto;
}
block.slide.w100 > stuff {
	width: 100%;
}

block.popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.9);
	z-index: 1000;
}
body[popup="1"] block.popup {
	display: block;
}
	block.popup > span.close {
		position: absolute;
		top: 0;
		right: 0;
		width: 50px;
		height: 50px;
		line-height: 50px;
		background-color: #ee4256;
		color: #fff;
		text-align: center;
		font-size: 32px;
		cursor: pointer;
	}
	block.popup > stuff.popup-newsletter {
		position: absolute;
		top: calc(50% - 17vw);
		left: calc(50% - 30vw);
		background-color: #fff;
		width: 60vw;
		height: 32vw;
		z-index: 10;
	}
		block.popup > stuff.popup-newsletter > subscribe {
			
		}
			block.popup > stuff.popup-newsletter > subscribe > form {
				
			}
				block.popup > stuff.popup-newsletter > subscribe > form > .title {
					display: block;
					line-height: 1.5em;
					text-transform: uppercase;
					font-size: 1.7vw;
					letter-spacing: 0.2vw;
					width: auto;
					text-align: center;
					font-weight: bold;
				}

stuff.likebox {
	width: 100%;
	text-align: center;
}
	stuff.likebox iframe {
		border: none;
		overflow: hidden;
		display: inline-block;
	}
		
block.footer {
	height: 7.32vw;
	line-height: 1.5em;
	padding-top: 2.3vw;
	text-align: center;
	text-transform: uppercase;
	font-size: 1vw;
	letter-spacing: 0.3vw;
}
a.title > h1 {
	margin: 0;
	padding: 0;
	font-size: inherit;
}

@media (max-width: 959px) and (orientation: portrait) {
	body {
		font-size: 4vw;
	}
	block.header {
		height: 18.32vw;
		padding-left: 55%;
	}
	block.header > stuff.logo {
		width: auto;
		right: 50%;
	}
	block.header > stuff.menu {
		font-size: 4vw;
		line-height: 18.32vw;
	}
		block.header > stuff.menu.social {
			font-size: 5vw;
		}
	block.header > stuff.menu:not(.planos) {
		display: none;
	}
	block.header > stuff.menu.planos {
		line-height: 1.2em;
		padding-top: 4.5vw;
	}
	block.banner {
		margin: 10vw 0;
	}
	block.banner > stuff.text {
		left: calc(5%);
	}
	block.banner > stuff.text > a > [icon], block.blocks > stuff.block > a > [icon] {
		font-size: 15vw;
	}
	block.banner > stuff.text > a > [text] {
		font-size: 4vw;
	}
	
	block.blocks {
		flex-wrap: wrap;
		height: auto;
	}
	block.blocks > stuff.block {
		flex: 1 auto;
		width: 100%;
		padding: 5vw 0;
	}
	block.blocks > stuff.block > a > [text], block.startnow > stuff.content > a > [button] > span {
		font-size: 4vw;
		letter-spacing: 0.85vw;
	}
	block.slide, block.startnow > stuff.content > a {
		height: auto;
		flex-wrap: wrap;
	}
	block.slide > stuff.img, block.slide > stuff.text, block.startnow > stuff.content > a > div {
		width: 100%;
	}
	block.slide > img {
		order: 1;
	}
	block.slide > stuff.text {
		order: 2;
		padding: 7vw;
	}
	block.slide > stuff.text > a > [title], blog > post > .title {
		font-size: 5vw;
		margin-bottom: 5vw;
	}
	block.slide > stuff.text > a > [text], block.startnow > stuff.content > a > [text] {
		font-size: 5vw;
	}
	block.slide > stuff.text > a > [text]:not(:last-child) {
		margin-bottom: 5vw;
	}
	block.slide > stuff.text > a > [text] > [icon] {
		font-size: 7vw;
		width: 9vw;
	}
	block.slide > stuff.text > a > [text] > [text] {
		margin-left: 11vw;
	}
	block.startnow {
		height: auto;
	}
	block.startnow > stuff.content > a > div {
		flex: 1 auto;
	}
	block.startnow > stuff.content > a > [text] {
		padding: 0;
		margin: 0 0 10vw 0;
	}
	block.startnow.invert > stuff.content > a > [text] {
		padding: 0;
		margin: 10vw 0 0 0;
	}
	block.startnow > stuff.content > a > [button] {
		overflow: hidden;
		margin: 10vw 0;
	}
	block.startnow > stuff.content > a > [button] > span {
		height: 12vw;
		line-height: 12vw;
		padding: 0 6vw;
		top: auto;
	}
	blog {
		font-size: 4vw;
		line-height: 1.75em;
	}
	blog > post {
		margin: 0;
	}
	blog > post > *:not(.type-2), blog > post > a.title {
		margin: 8vw;
	}
	blog > post.hasImage-1.isUniq-0 > a.img {
		width: 100%;
		height: 40vh;
		margin: 0 0 8vw 0;
	}
	blog > post > a.description > more {
		margin-top: 3vw;
	}
	
	blog > post > .content .banner-newsletter {
		padding: 6vw 8vw 8vw 8vw;
		line-height: 1.75em;
	}
	blog > post > .content .banner-newsletter > span.icon {
		display: block;
		width: 100%;
		margin: 0 0 3vw 0;
		height: 1em;
		line-height: 1em;
		text-align: center;
		font-size: 4em;
	}
	
	form {
		padding: 7vw;
		font-size: 4vw;
	}
	contact > form {
		padding: 0 7vw 7vw 7vw;
	}
		form > div, .form > div {
			margin-bottom: 5vw;
		}
		form > div input {
			padding: 0 4vw;
		}
		form > div label, form input[type="submit"], form > div err, [plano] > [buttons] > input[type="submit"], courses course > side > button {
			font-size: 4vw;
			letter-spacing: 0.85vw;
		}
		form > div err {
			font-size: 3vw;
			letter-spacing: 0.3vw;
		}
		form > div label {
			margin-bottom: 3vw;
		}
		form > div input, form > div select, form > div textarea {
			font-size: 4vw;
			height: 12vw;
		}
		form > div textarea {
			height: 40vw;
			padding: 4vw;
		}
		form input[type="submit"], [plano] > [buttons] > input[type="submit"], courses course > side > button {
			height: 12vw;
			padding: 0 5vw;
		}
		
	block.slide.w100 {
		height: auto;
	}
	
	block.popup > stuff.popup-newsletter {
		left: 0;
		right: 0;
		width: auto;
		height: 94vw;
		top: calc(50% - 47vw);
	}
	block.popup > stuff.popup-newsletter > subscribe > form > .title {
		font-size: 4vw;
		letter-spacing: 0.85vw;
	}
	
	block.blog > stuff.blog {
		width: 100%;
	}
	block.blog > stuff.banner-right-img {
		display: none;
	}
	
	block.footer {
		height: auto;
		padding: 10vw 0;
		font-size: 3vw;
	}
}
body {
	padding-bottom: 25px;
}
.diretiva1 {
	font-family: "Roboto", Arial, sans-serif;
	text-align: right;
	padding: 0px 10px;
	height: 25px;
	line-height: 25px;
	font-size: 9px;
	letter-spacing: 1px;
	border-top: 1px solid #e6e6e6;
	color: #999;
	text-transform: uppercase;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 10000;
}
	.diretiva1>* {
		position: absolute;
		top: 0;
		bottom: 0;
	}
	.diretiva1>[r] {
		right: 10px;
	}
	.diretiva1>[l] {
		left: 10px;
	}