body {
	background-color: #f3f4f8;;
	margin: 0;
	padding-bottom: 50px;
	overflow-x: hidden;
	user-select: none;
}


body .header {
	width: 100%;
	min-height: 700px;
	background: url("../img/display.jpg") no-repeat center;
	background-size: cover;
	position: relative;
}

body .header .header-content{
	padding-top: 150px;
	text-align: center;
}

body .header .header-content img{
	height: 200px;
	user-select: none;
	-webkit-user-drag: none;
}

body .header .header-content .text-head-content {
	font: 45pt "OpenSans";
	color: #fff;
	display: flex;
	justify-content: center;
	width: fit-content;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

body .header .header-content .text-head-content .welcome{
	overflow: hidden;
	padding-right: 10px;
	border-right: .15em solid white;
	font: 45pt "OpenSans";
	width: 100%;
	white-space: nowrap;
  	margin: 0;
  	letter-spacing: 2%;
	color: #fff;
	animation: 
    typing 1s steps(15, end),
    blink-caret .75s step-end infinite;
}

body .header .header-content .text-body {
	transition: 500ms;
	opacity: 0;
	padding-top: 120px;
	font: 15pt "OpenSansLight";
	text-align: center;
	color: #fff;
	margin: 0 150px;
	line-height: 35px;
	animation: appearing 1s 1.5s ease-in-out forwards;
}

body .header .header-content .text-body2 {
	transition: 500ms;
	opacity: 0;
	font: 15pt "OpenSansLight";
	text-align: center;
	color: #fff;
	margin-top: 40px;
	padding-bottom: 40px;
	line-height: 35px;
	animation: appearing 1s 3s ease-in-out forwards;
}


body .navigation {
	width: 100%;
	height: 110px;	
	position: fixed;
	z-index: 1;
	transition: all 500ms;
}
body .navigation .interact {
	height: 110px;		
	margin: 0 100px;
	border-bottom: 1px solid #52555f;
	transition: all 500ms;
}
body .navigation .interact .leap-logo {
	float: left;
	height: 110px;
	width: 180px;	
	cursor: pointer;
	background: url("../img/leap-logo.png") no-repeat center;
}
body .navigation .interact .menu-link {
	position: absolute;
	right: 7%;
	height: 40px;
	width: 500px;	
	margin: 35px 0 0 80px;
}
body .navigation .interact .menu-link .menu-item {
	float: right;
	margin-left: 10px;
	padding: 10px;
	font: 10.5pt "OpenSans";
	color: #cdced1;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 200ms;
	background: none;
	border: none;
	outline: none;
}
body .navigation .interact .menu-link .menu-item:hover {
	color: #b0435d;
}


body .tiles {
	position: relative;
	background-color: white;
	text-align: center;
	display: flex;
	justify-content: space-around;
	align-items: top;
	padding: 2% 0;
}

body .tiles2 {
	position: relative;
	text-align: center;
	display: flex;
	justify-content: space-around;
	align-items: top;
	padding: 2% 0;
}

.bg,
.bg2{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #52555f;
	filter: blur(1px) opacity(0.11) contrast(1);
	z-index: 1;
}

.bg{
	background-image: url(../img/coding-background.jpeg);
}

.bg2{
	background-image: url(../img/coding-background2.jpg);
}

body .tiles .tile-block {
	display: inline-block;
	width: 23%;
	height: 100%;
	text-align: left;
	transition: 500ms;
	border-radius: 1vh;
}

body .tiles2 .tile-block{
	display: inline-block;
	width: 50%;
	height: 100%;
	text-align: left;
	transition: 500ms;
	border-radius: 1vh;
}

body .tiles .tile-block .icon,
body .tiles2 .tile-block .icon {
	user-select: none;
	float: left;
	font: 30pt "et-line";
	color: #ff5274;
	width: 60px;
	transition: 500ms;
}

body .tiles .tile-block .icon:hover,
body .tiles2 .tile-block .icon:hover {
	transform: rotate(-10deg) scale(1.1) translateY(-10px);
}

body .tiles .tile-block .text{
	float: left;
	width: calc(100% - 90px);
	height: calc(100%);
}

body .tiles2 .tile-block .text{
	float: left;
	width: calc(100%);
	height: calc(100%);
}

body .tiles .tile-block .text .text-head {
	font: 11pt "OpenSans";
	color: #3d4351;
	text-transform: uppercase;
}

body .tiles2 .tile-block .text .text-head {
	font: 15pt "OpenSans";
	color: #3d4351;
	text-transform: uppercase;
}

body .tiles .tile-block .text .text-body,
body .tiles2 .tile-block .text .text-body {
	padding-top: 10px;
	font: 11pt "OpenSansLight";
	color: #888;
	line-height: 25px;
}


body .metrics {
	height: 500px;
	background: #f3f4f8;
}


body .clients {
	height: auto;
	background: #fff;
	background: #f3f4f8;
	text-align: center;
}
body .clients h1 {
	margin: 0;
	color: #666f77;
	padding-top: 50px;
	letter-spacing: 2px;
	font: 14pt "OpenSansBold";
	text-transform: uppercase;
}
body .clients .client-block {
	display: inline-block;
	width: 30%;
	text-align: left;
	margin-top: 30px;
	cursor: default;
}
body .clients .client-block .client-box {
	height: auto;
	text-align: left;
	border: 2px solid #ccc;
	border-radius: 8px;
	margin: 40px;
	background: #fff;
	transition: 500ms;
}

body .clients .client-block .client-box:hover {
	transform: translateY(-30px);
	z-index: -1;
}

body .clients .client-block .client-box .client-logo {
	height: 20vh;
}

body .clients .client-block:nth-child(1) .client-box .client-logo {
	background: url("../img/cliente-cral.png") no-repeat center;
	background-size: auto 10vh;
}

body .clients .client-block:nth-child(2) .client-box .client-logo {
	background: url("../img/cliente-rochavaz.png") no-repeat center;
	background-size: 30vh;
}

body .clients .client-block:nth-child(3) .client-box .client-logo {
	background: url("../img/cliente-altos.png") no-repeat center;
	background-size: auto 10vh;
}

body .clients .client-block .client-box .client-line {
	height: 1px;
	background: #ddd;
	margin: 0 30px;
}

body .clients .client-block .client-box h2 {
	font: 12pt "OpenSans";
	margin: 0;
	color: #333;
	text-transform: uppercase;
	text-align: center;
	padding-top: 20px;
	letter-spacing: 2px;
}
body .clients .client-block .client-box h3 {
	font: 12pt "OpenSans";
	margin: 0;
	color: #666f77;
	text-align: center;
	padding: 20px;
	line-height: 30px;
}


body .contato {
	background: #f3f4f8;
	text-align: center;
	vertical-align: top;
	margin-bottom: -1000px;
}
body .contato h1 {
	margin: 0;
	font: 18pt "OpenSansBold";
	color: #333;
	padding: 10px 0 50px 0;
}
body .contato .contato-left {
	float: left;
	width: fit-content;
	padding: 1% 0.5% 0 0.5%;
	border: 2px solid #ccc;
	box-shadow: 0.5vh 0.5vh 0.15vh rgba(0, 0, 0, 0.296);
	height: 150px;
	margin-left: 150px;
	background-color: white;
}

body .contato .contato-left #enviar-mensagem {
	margin-top: 3%;
	background-color: rgb(195, 195, 195);
	border-radius: 50px;
	border: 0;
	height: 25%;
	width: calc(100% - 50px);
	transition: 250ms;
	cursor: pointer;
}

body .contato .contato-left #enviar-mensagem:hover {
	background-color: #333;
	border-radius: 50px;
	border: 0;
	height: 25%;
	width: calc(100% - 80px);
	color: white;
}

body .contato .contato-left .line {
	font: 14pt "OpenSans";
	padding: 10px;
	color: #333;
	text-align: left;
}
body .contato .contato-left .line:first-child::before {
	content: "\f095";
	font: 14pt "Fonticon";
	margin-right: 10px;
}
body .contato .contato-left .line:nth-child(2)::before {
	content: "\f003";
	font: 14pt "Fonticon";
	margin-right: 10px;
}

body .contato .contato-right {
	display: inline-block;
	width: 40%;
	height: 400px;
}
body .contato .contato-right input[type="text"] {
	height: 45px;
	background: #fff;
	width: 100%;
	border: 1px solid #ccc;
	outline: none;
	font: 11pt "OpenSans";
	color: #888;
	text-indent: 15px;
	box-shadow: 0px 0px 3px #ddd inset;
	
}
body .contato .contato-right input[type="text"]:nth-child(2) {
	margin: 15px 0;
}
body .contato .contato-right textarea {
	height: 45px;
	background: #fff;
	width: calc(100% - 30px);
	height: 150px;
	padding: 10px 15px;
	border: 1px solid #ccc;
	outline: none;
	font: 11pt "OpenSans";
	color: #888;
	box-shadow: 0px 0px 3px #ddd inset;
	resize: none;
}
body .contato .contato-right button {
	width: 160px;
	height: 40px;
	border: 1px solid #ccc;
	margin: 10px 0 0 0;
	color: #55acee;
	line-height: 40px;
	background: #fff;
	outline: none;
	box-shadow: 0px 0px 3px #ddd inset;
	font: 11pt "OpenSans";
	float: left;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s;
}
body .contato .contato-right button:hover {
	border: 1px solid #339beb;
	box-shadow: none;
	background: #339beb;
	color: #fff;	
}

.hidden {
	opacity:0;
}

.console-container {
	font-size: 10em;
	text-align:center;
	height:200px;
	width:600px;
	display:block;
	position:absolute;
	color:white;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

.console-underscore {
	font-size: 20pt;
	display:inline-block;
	position:relative;
	top:0;
	left:0;
	color: #70D6F9;
}

.vAlign {
	justify-content: center;
	display: flex;
}

@keyframes typing {
	from { width: 0 }
	to { width: 100% }
}
 
@keyframes blink-caret {
	from, to { border-color: transparent }
	50% { border-color: white; }
}

@keyframes appearing {
	from { opacity: 0; }
	to { opacity: 100%; }
}

@keyframes glow {
	100%{text-shadow: rgba(103,229,101,.9) 0px 0px 5px;}
}

@media screen and (max-width: 1024px){
	body {
		background-color: #f3f4f8;;
		margin: 0;
		padding-bottom: 50px;
		overflow-x: hidden;
		user-select: none;
	}
	
	
	body .header {
		width: 100%;
		min-height: 700px;
		background: url("../img/display.jpg") no-repeat center;
		background-size: cover;
		position: relative;
	}
	
	body .header .header-content{
		padding-top: 150px;
		text-align: center;
	}
	
	body .header .header-content img{
		height: 200px;
		user-select: none;
		-webkit-user-drag: none;
	}
	
	body .header .header-content .text-head-content {
		font: 45pt "OpenSans";
		color: #fff;
		display: flex;
		justify-content: center;
		width: fit-content;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	
	body .header .header-content .text-head-content .welcome{
		overflow: hidden;
		padding-right: 10px;
		border-right: .15em solid white;
		font: 45pt "OpenSans";
		width: 100%;
		white-space: nowrap;
		  margin: 0;
		  letter-spacing: 2%;
		color: #fff;
		animation: 
		typing 1s steps(15, end),
		blink-caret .75s step-end infinite;
	}
	
	body .header .header-content .text-body {
		transition: 500ms;
		opacity: 0;
		padding-top: 120px;
		font: 17pt "OpenSansLight";
		text-align: center;
		color: #fff;
		margin: 0 150px;
		line-height: 35px;
		animation: appearing 1s 1.5s ease-in-out forwards;
	}
	
	body .header .header-content .text-body2 {
		transition: 500ms;
		opacity: 0;
		font: 15pt "OpenSansLight";
		text-align: center;
		color: #fff;
		margin-top: 40px;
		padding-bottom: 40px;
		line-height: 35px;
		animation: appearing 1s 3s ease-in-out forwards;
	}
	
	
	body .navigation {
		width: 100%;
		height: 110px;	
		position: fixed;
		z-index: 1;
		transition: all 500ms;
	}
	body .navigation .interact {
		height: 110px;		
		margin: 0 100px;
		border-bottom: 1px solid #52555f;
		transition: all 500ms;
	}
	body .navigation .interact .leap-logo {
		float: left;
		height: 110px;
		width: 180px;	
		cursor: pointer;
		background: url("../img/leap-logo.png") no-repeat center;
	}
	body .navigation .interact .menu-link {
		position: absolute;
		right: 7%;
		height: 40px;
		width: 500px;	
		margin: 35px 0 0 80px;
	}
	body .navigation .interact .menu-link .menu-item {
		float: right;
		margin-left: 10px;
		padding: 10px;
		font: 10.5pt "OpenSans";
		color: #cdced1;
		text-transform: uppercase;
		cursor: pointer;
		transition: all 200ms;
		background: none;
		border: none;
		outline: none;
	}
	body .navigation .interact .menu-link .menu-item:hover {
		color: #b0435d;
	}
	
	
	body .tiles {
		position: relative;
		background-color: white;
		text-align: center;
		display: block;
		justify-content: space-around;
		align-items: top;
		padding: 2% 0;
	}
	
	body .tiles2 {
		position: relative;
		text-align: center;
		display: flex;
		justify-content: space-around;
		align-items: top;
		padding: 2% 0;
	}
	
	.bg,
	.bg2{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-color: #52555f;
		filter: blur(1px) opacity(0.11) contrast(1);
		z-index: 1;
	}
	
	.bg{
		background-image: url(../img/coding-background.jpeg);
	}
	
	.bg2{
		background-image: url(../img/coding-background2.jpg);
	}
	
	body .tiles .tile-block {
		display: inline-block;
		width: 80%;
		height: 100%;
		text-align: left;
		transition: 500ms;
		border-radius: 1vh;
		margin: 2% 0;
	}
	
	body .tiles2 .tile-block{
		display: inline-block;
		width: 70%;
		height: 100%;
		text-align: left;
		transition: 500ms;
		border-radius: 1vh;
	}
	
	body .tiles .tile-block .icon,
	body .tiles2 .tile-block .icon {
		user-select: none;
		float: left;
		font: 30pt "et-line";
		color: #ff5274;
		width: 60px;
		transition: 500ms;
	}
	
	body .tiles .tile-block .icon:hover,
	body .tiles2 .tile-block .icon:hover {
		transform: rotate(-10deg) scale(1.1) translateY(-10px);
	}
	
	body .tiles .tile-block .text{
		float: left;
		width: calc(100% - 90px);
		height: calc(100%);
	}
	
	body .tiles2 .tile-block .text{
		float: left;
		width: calc(100%);
		height: calc(100%);
	}
	
	body .tiles .tile-block .text .text-head {
		font: 17pt "OpenSans";
		color: #3d4351;
		text-transform: uppercase;
	}
	
	body .tiles2 .tile-block .text .text-head {
		font: 20pt "OpenSans";
		color: #3d4351;
		text-transform: uppercase;
	}
	
	body .tiles .tile-block .text .text-body {
		padding-top: 10px;
		font: 15pt "OpenSansLight";
		color: #888;
		line-height: 25px;
	}

	body .tiles2 .tile-block .text .text-body{
		padding-top: 10px;
		font: 18pt "OpenSansLight";
		color: #888;
		line-height: 25px;	
	}
	
	
	body .metrics {
		height: 500px;
		background: #f3f4f8;
	}
	
	
	body .clients {
		height: auto;
		background: #fff;
		background: #f3f4f8;
		text-align: center;
	}
	body .clients h1 {
		margin: 0;
		color: #666f77;
		padding-top: 50px;
		letter-spacing: 2px;
		font: 14pt "OpenSansBold";
		text-transform: uppercase;
	}
	body .clients .client-block {
		display: inline-block;
		width: 80%;
		text-align: left;
		margin-top: 30px;
		cursor: default;
	}
	body .clients .client-block .client-box {
		height: auto;
		text-align: left;
		border: 2px solid #ccc;
		border-radius: 8px;
		margin: 40px;
		background: #fff;
		transition: 500ms;
	}
	
	body .clients .client-block .client-box:hover {
		transform: translateY(-30px);
		z-index: -1;
	}
	
	body .clients .client-block .client-box .client-logo {
		height: 20vh;
	}
	
	body .clients .client-block:nth-child(1) .client-box .client-logo {
		background: url("../img/cliente-cral.png") no-repeat center;
		background-size: auto 10vh;
	}
	
	body .clients .client-block:nth-child(2) .client-box .client-logo {
		background: url("../img/cliente-rochavaz.png") no-repeat center;
		background-size: 30vh;
	}
	
	body .clients .client-block:nth-child(3) .client-box .client-logo {
		background: url("../img/cliente-altos.png") no-repeat center;
		background-size: auto 10vh;
	}
	
	body .clients .client-block .client-box .client-line {
		height: 1px;
		background: #ddd;
		margin: 0 30px;
	}
	
	body .clients .client-block .client-box h2 {
		font: 12pt "OpenSans";
		margin: 0;
		color: #333;
		text-transform: uppercase;
		text-align: center;
		padding-top: 20px;
		letter-spacing: 2px;
	}
	body .clients .client-block .client-box h3 {
		font: 12pt "OpenSans";
		margin: 0;
		color: #666f77;
		text-align: center;
		padding: 20px;
		line-height: 30px;
	}
	
	
	body .contato {
		background: #f3f4f8;
		text-align: center;
		vertical-align: top;
		margin-bottom: -1000px;
	}
	body .contato h1 {
		margin: 0;
		font: 18pt "OpenSansBold";
		color: #333;
		padding: 10px 0 50px 0;
	}
	body .contato .contato-left {
		float: left;
		width: fit-content;
		padding: 1% 0.5% 0 0.5%;
		border: 2px solid #ccc;
		box-shadow: 0.5vh 0.5vh 0.15vh rgba(0, 0, 0, 0.296);
		height: 150px;
		margin-left: 150px;
		background-color: white;
	}
	
	body .contato .contato-left #enviar-mensagem {
		margin-top: 3%;
		background-color: rgb(195, 195, 195);
		border-radius: 50px;
		border: 0;
		height: 25%;
		width: calc(100% - 50px);
		transition: 250ms;
		cursor: pointer;
	}
	
	body .contato .contato-left #enviar-mensagem:hover {
		background-color: #333;
		border-radius: 50px;
		border: 0;
		height: 25%;
		width: calc(100% - 80px);
		color: white;
	}
	
	body .contato .contato-left .line {
		font: 14pt "OpenSans";
		padding: 10px;
		color: #333;
		text-align: left;
	}
	body .contato .contato-left .line:first-child::before {
		content: "\f095";
		font: 14pt "Fonticon";
		margin-right: 10px;
	}
	body .contato .contato-left .line:nth-child(2)::before {
		content: "\f003";
		font: 14pt "Fonticon";
		margin-right: 10px;
	}
	
	body .contato .contato-right {
		display: inline-block;
		width: 40%;
		height: 400px;
	}
	body .contato .contato-right input[type="text"] {
		height: 45px;
		background: #fff;
		width: 100%;
		border: 1px solid #ccc;
		outline: none;
		font: 11pt "OpenSans";
		color: #888;
		text-indent: 15px;
		box-shadow: 0px 0px 3px #ddd inset;
		
	}
	body .contato .contato-right input[type="text"]:nth-child(2) {
		margin: 15px 0;
	}
	body .contato .contato-right textarea {
		height: 45px;
		background: #fff;
		width: calc(100% - 30px);
		height: 150px;
		padding: 10px 15px;
		border: 1px solid #ccc;
		outline: none;
		font: 11pt "OpenSans";
		color: #888;
		box-shadow: 0px 0px 3px #ddd inset;
		resize: none;
	}
	body .contato .contato-right button {
		width: 160px;
		height: 40px;
		border: 1px solid #ccc;
		margin: 10px 0 0 0;
		color: #55acee;
		line-height: 40px;
		background: #fff;
		outline: none;
		box-shadow: 0px 0px 3px #ddd inset;
		font: 11pt "OpenSans";
		float: left;
		text-transform: uppercase;
		cursor: pointer;
		transition: all 0.3s;
	}
	body .contato .contato-right button:hover {
		border: 1px solid #339beb;
		box-shadow: none;
		background: #339beb;
		color: #fff;	
	}
	
	.hidden {
		opacity:0;
	}
	
	.console-container {
		font-size: 10em;
		text-align:center;
		height:200px;
		width:600px;
		display:block;
		position:absolute;
		color:white;
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin:auto;
	}
	
	.console-underscore {
		font-size: 20pt;
		display:inline-block;
		position:relative;
		top:0;
		left:0;
		color: #70D6F9;
	}
	
	.vAlign {
		justify-content: center;
		display: block;
	}
}