@import "lib";

@import "../fonts/proximanova/proximanova.css";
// @import "../media/css/animate.min.css";


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

html, body {height:100%}

.ta-c
{
	text-align: center;
}

.geral{
	margin: 0 auto;
	min-height:95%;
	position: relative;

	display: flex;
	flex-direction: column;
}

* html .geral {height: 100%}

/* Visual */

body{
	// background-attachment: fixed;
	background-color: #f5f5f5;
	// background-image: url(/media/images/layout/body-bg.png);
	background-image: url(/media/images/layout/brushed_alu.png);
	// background-repeat: repeat-x;
	color: #666;
}

h1,h2,h3,h4{
	// text-shadow: #fff 0 1px 1px;

	.h-font-family
}
h1{
	color: #444;
	font-size: 32px;
	margin-bottom: 5px;
	text-transform: uppercase;
}
h2{
	color: #666;
	font-size: 24px;
	margin-bottom: 5px;
	text-transform: uppercase;
}
h3{
	color: #888;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}
p{
	margin-bottom: 10px;
	text-align: left;
}

.img-responsive {
	max-width: 100%;
}

.body{
	cursor: default;
	font-family: @font;
	font-size: 13px;
	min-height: 340px;
	// padding-bottom: 120px;
	// padding-bottom: 88px;
}

.header
{
	// background-color: #444;
	background-color: #fff;
	cursor: default;
	// padding-top: 10px;
	// margin-bottom: 20px;
	padding: 0;
	position: relative;
	z-index: 50;

	// perspective: 500px;

	.wrap
	{
		display: flex;
		max-width: 960px;
		margin: 0 auto;
	}

	@cor1: rgba(52, 102, 121, 0.9);
	@cor2: rgba(36, 132, 111, 0.9);

	// background: @cor1;
	// background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM0NjY3OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNDg0NmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	// background: -moz-linear-gradient(left,  @cor1 0%, @cor2 100%);
	// background: -webkit-linear-gradient(left,  @cor1 0%,@cor2 100%);
	// background: linear-gradient(to right,  @cor1 0%,@cor2 100%);

	&:after
	{
		display: block;
		content: "";
		width: 100%;
		position: absolute;
		// bottom: 0;
		top: 100%;
		height: @header-ribbon-height;
		z-index: 0;

		// @cor1: #BDE342;
		@cor1: #7eb6d3;
		@cor2: #73C1E2;

		background: @cor1;
		// background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JkZTM0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3M2MxZTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background: -moz-linear-gradient(left,  @cor1 0%, @cor2 100%);
		background: -webkit-linear-gradient(left,  @cor1 0%,@cor2 100%);
		background: linear-gradient(to right,  @cor1 0%,@cor2 100%);
	}

	.logo
	{
		// background-image: url(/media/images/layout/header-sysquali.png);
		// background-position: center top;
		display: block;
		float: left;
		height:76px;
		margin: 0;
		width: 200px;
		position: relative;
		z-index: 2;

		&:hover{
			background-position: center bottom;
		}

		img
		{
			display: block;
			margin: 0;
			width: 100%;
		}
	}

	.menu
	{
		// background-image: url(/media/images/layout/header-menu-bg.png);
		background-repeat: no-repeat;
		background-position: top center;
		display: flex;
		flex-grow: 1;
		font-family: @font-title;
		// height: 57px;

		.menu-item
		{
			display: flex;
			flex-direction: column;
			justify-content: center;
			position: relative;
			line-height: 1em;
			margin: 0;
			.wk-anim;

			// display: inline-block;
			// display: table-cell;
			// width: 18%;
			
			&:hover
			{
				ul.submenu
				{
					display: block;
				}
			}

			a
			{
				color: #333;
				display: flex;
				justify-content: center;
				font-size: 13px;
				font-weight: normal;
				text-decoration: none;
				text-transform: uppercase;
				text-align: center;
				padding: 10px 15px;
				border-radius: 50px;
				align-items: center;
				letter-spacing: .5px;

				.wk-anim;

				&:hover{
					background: rgba(0,0,0,.6);
					color: #fff;
				}
			}

			&.-megamenu
			{
				position: static;

				&:hover
				{
					background: @submenu-bgc;

					> a
					{
						background-color: transparent;
						color: @sysquali-verde;

						&:hover
						{
							color: #FFF;
						}
					}
				}

				.submenu
				{
					width: 100%;
					max-width: initial;
					left: 0;
					right: 0;
					top: 100%;
					// transform: translate3d(0,0,0);

					&:after
					{
						display: none;
					}
				}
			}

			&.-solucoes
			{
				> a
				{
					font-weight: bold;
				}

				&.-megamenu
				{
					&:hover
					{
						ul.submenu
						{
							display: flex;
							flex-direction: row;
							align-items: center;
							margin: 0 auto;
							width: auto;

							.menu-item
							{
								width: 100%;

								a
								{
									padding: 3em 20px;

									img, svg
									{
										display: block;
										margin: 0 auto 2em;
										height: 90px;
									}
								}
							}
						}
					}
				}
			}

			&.-cta
			{
				a
				{
					background: darken(@sysquali-verde, 5%);
					color: #fff;
					font-weight: bold;

					&:hover{
						background: darken(@sysquali-verde, 15%);
						box-shadow: 0 0 0 4px darken(@sysquali-verde, 15%);
						color: #fff;
					}
				}
			}
		}

		ul
		{
			list-style: none;
			// margin-left: 242px;
			// margin-left: 300px;
			// padding-top: 13px;
			// padding-top: 3px;
			margin: 0;
			margin-left: auto;
			text-align: center;
			// width: 654px;
			// display: table;
			display: flex;
		}

		ul.submenu
		{
			background-color: @submenu-bgc;
			display: flex;
			flex-direction: column;
			position: absolute;
			padding: 15px;
			right: 0;
			width: 230px;
			z-index: 50;
			text-align: right;
			box-shadow: 0 12px 12px rgba(0,0,0,.15);

			display: none;

			&:after
			{
				bottom: 100%;
				right: 18px;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
				border-color: rgba(51, 51, 51, 0);
				border-bottom-color: @submenu-bgc;
				border-width: 5px;
				margin-right: -5px;
			}

			&:before
			{
				display: block;
				content: "";
				left: 0;
				width: 100%;
				position: absolute;
				top: 100%;
				height: @header-ribbon-height;
				z-index: 0;

				@cor1: #7eb6d3;
				@cor2: #73C1E2;

				background: @cor1;
				background: -moz-linear-gradient(left,  @cor1 0%, @cor2 100%);
				background: -webkit-linear-gradient(left,  @cor1 0%,@cor2 100%);
				background: linear-gradient(to right,  @cor1 0%,@cor2 100%);
			}

			.menu-item
			{
				a
				{
					color: #FFF;
					border-radius: 0;
					justify-content: flex-end;
					flex-direction: column;
					line-height: 1.1em;
					border-radius: 6px;

					small
					{
						font-size: .9em;
						font-style: italic;
						color: rgba(255,255,255,.3);
					}

					&:hover
					{
						small
						{
							color: #FFF;
						}
					}
				}
			}
		}
	}
}

.header-firstbar
{
	background-color: #eee;
	display: block;
	color: #333;

	.wrap
	{
		justify-content: flex-end;
		width: 100%;
	}

	ul
	{
		display: flex;
		margin: 0;
		padding: 0;

		&:hover {
			li {
				a:not(:hover) {
					filter: grayscale(1) opacity(.5);
				}
			}
		}
	}

	li
	{
		border-left: 1px solid #DDD;
		display: flex;
		justify-content: center;
		margin: 0;

		&:last-child
		{
			border-right: 1px solid #DDD;
		}
	}

	a
	{
		font-family: @font-title;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		padding: 5px 10px;
		letter-spacing: 1px;
		font-size: 1.2em;
		transition: all 150ms ease-in-out;

		&:hover
		{
			background-color: #FFF;
		}

		b
		{
			font-weight: 500;
		}
	}

	.link-social
	{
		a
		{
			img {
				width: 15px !important;
			}
			&:hover
			{
				background-color: #FFF;

				svg path
				{
					fill: #FFF !important;
				}
			}
		}
	}
}

.caret
{
	border: solid currentColor;
	border-width: 0 1px 1px 0;
	display: inline-block;
	padding: 2px;
	position: relative;
	align-self: center;
	margin-left: 8px;
	margin-top: -2px;

	&.-up
	{
		transform: rotate(-135deg);
		-webkit-transform: rotate(-135deg);
	}
	&.-down
	{
		transform: rotate(45deg);
  		-webkit-transform: rotate(45deg);
	}
	&.-left
	{
		transform: rotate(135deg);
 		-webkit-transform: rotate(135deg);
	}
	&.-right
	{
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}
}

main.body
{
	padding-top: 20px;
	flex-grow: 1;
}

#headline {
	background-image:url('/media/images/slideshow/headline01.jpg');
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	min-height: 550px;
	margin-top: -120px;
	padding-top: 220px;
	position: relative;
	z-index: 0;


    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

	> ul {
		margin: 0;
		padding: 0;
		position: absolute;
		z-index: 0;

		li {
			list-style: none;
			display: block;
			min-height: 600px;
			margin: 0;
			padding: 0;
		}
	}

	&:before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: #222;
		background-image:url(/media/images/layout/px_by_Gre3g.png);
		position: absolute;
		z-index: 0;

		opacity: 0.5;
		-khtml-opacity: 0.5;
		-moz-opacity: 0.5;
	}

	.blocks {
		position: relative;
		z-index: 2;
	}

	h1 {
		text-shadow: none;
		color: #fff;
		font-size:60px;
		line-height: 1;
		margin-bottom: 10px;

		b {
			display: block;
		}
	}
	p {
		font-size: 16px;
		color: #fff;

		> a {
			display: inline-block;
			color: #fff;
			text-decoration: none;
			// text-transform: uppercase;
			width: auto;
			margin: 15px auto;
			margin-left: -10px;
			padding: 15px 25px;
			background-color: rgba(0,0,0,0.3);
			border: 1px solid #fff;
			border-radius: 30px;

			&:focus,
			&:hover {
				background-color: #0E87B0;
				border-color: #0E87B0;
				color: #FFF;
			}
		}
	}
}

#cases-slider {
	background-color: #457383;
	color: #FFF;
	font-size: 15px;
	padding: 30px 20px 20px;

	ul {
		list-style: none;

		li {
			margin: 0;
			padding: 0;

			blockquote {
				font-style: italic;
				margin-bottom: 0;

				cite {
					color: rgba(255,255,255,0.5);
					display: block;
					font-size: 0.9em;
					margin-top: 10px;
					margin-bottom: 0;

					&:before {
						content: "";
						display: inline-block;
						vertical-align: middle;
						width: 15px;
						height: 1px;
						background-color: rgba(255,255,255,0.5);
						margin-right: 10px;
					}
				}
			}
		}
	}
}

#footer {
	background-color: #333;
	// background: url(/media/images/layout/bottom-bg.png) no-repeat top center;
	// bottom: 40px;
	color: #aaa;
	cursor: default;
	font-family: verdana;
	font-size: 11px;
	height: auto;
	margin-top: 30px;
	position: relative;
	// text-indent: 52px;
	width: 100%;
	left: 0;
	bottom: 0;

	.blocks {
		position: relative;
	}

	.wrap
	{
		width: 100%;
		display: flex;
		max-width: 960px;
		margin: 0 auto;
		padding: 10px 0;
	}

	.creditos
	{
		flex-grow: 1;
		display: flex;
		align-items: center;
	}

	.footer-links
	{
		display: flex;
		margin: 0;
		padding: 0;

		li {
			display: inline-block;
			border-left: 1px solid #333;
			margin: 0;
			padding: 0;
		}
		a {
			display: flex;
			color: #FFF;
			text-decoration: none;
			text-transform: uppercase;
			font-family: @font-title;
			letter-spacing: 1px;
			font-size: 1.5em;
			padding: 8px 8px;
			border-radius: 6px;

			&:hover
			{
				background-color: #111;
			}
		}
	}

	.sq-bottom-link{
		background-image:url(/media/images/ico/bottom-sysquali_32.png);
		display: block;
		float: left;
		margin-left: 14px;
		margin-top: -6px;
		position: absolute;
		height: 32px;
		width: 32px;
	}
	.rights{
		margin-left: 10px;
	}
	.bottom-menu{
		display:block;
		float:right;
		height: 32px;
		margin-right: 20px;
		margin-top: -24px;
		position:absolute;
		right:0;
		width:360px;
		.ico{
			display: block;
			float: right;
			margin-left: 2px;
			margin-top: 0px;
			position: relative;
			height: 32px;
			width: 32px;
		}
		.bot-ico-msg{
			background-image:url(/media/images/ico/bottom-msg_32.png);
			&:hover{
				background-image:url(/media/images/ico/bottom-msg2_32.png);
			}
		}
	}
}

.slideshow{
	// background:url(/media/images/layout/home-slider-bg.png) no-repeat top center;
	// background-color: #fff;
	display: block;
	height:350px;
	margin-bottom: 20px;
	padding-top: 6px;
	width: 960px;

	.sliding{
		margin-left: 10px;

		.slide{
			height: 342px;
			width: 940px;
		}
	}

	.nav{
		background:url(/media/images/layout/slideshow-nav.png) no-repeat;
		display: block;
		height:64px;
		margin-top: -210px;
		position: absolute;
		width:38px;
		z-index: 500;
	}
	.nav-left{
		background-position: top left;
		float: left;
		margin-left: 4px;

		&:hover{
			background-position: bottom left;
		}
	}
	.nav-right{
		background-position: top right;
		margin-left: 918px;

		&:hover{
			background-position: bottom right;
		}
	}
	.navigation{
		display: block;
		margin-left: 10px;
		margin-top: -15px;
		position: absolute;
		z-index: 501;

		li{
			background: url(/media/images/layout/slideshow-nav-bullet.png) no-repeat bottom left;
			display: inline-block;
			list-style:none;
			margin:0;
			margin-right: 3px;

			&:hover{
				background-position: bottom right;
			}
		}
		.activeLI{
			background-position: top left;

			&:hover{
				background-position: top right;
			}
		}
		.bullet{
			display: block;
			height: 16px;
			width: 15px;
		}
	}
}

/* == FORMs == */

.textbox,
.textarea{
	background: rgba(0,0,0,0.05);
	border: 1px solid #bbb;
	color: #777;
	font-family: @font-default;
	font-size: 12px;
	// box-shadow: rgba(0,0,0,0.1) 0px 2px 4px inset,  rgba(255,255,255,0) 0px 0px 0px;

	.wk-anim;

	&:hover{
		background: rgba(0,0,0,0.0);
		border: 1px solid #abd;
	}

	&:focus{
		// background: rgba(215,225,255,1);
		border: 1px solid #0C86AF;
		color: #557;
		// box-shadow: rgba(0,0,0,0.2) 0px 2px 4px inset,  rgba(255,255,255,0.5) 0px 0px 6px;
	}
}
.textbox{
	height: 20px;
}
.btn{
	background-color: #666;
	border: 1px solid #555;
	color: #fff;
	cursor: pointer;
	font-family: @font-default;
	// min-height: 40px;
	text-decoration: none;
	// box-shadow: rgba(0,0,0,0.1) 0px -20px 20px inset;

	.border-radius;
	.wk-anim;

	&:hover{
		background-color: #444;
		border: 1px solid #333;
		// box-shadow: rgba(0,0,0,0.2) 0px -20px 20px inset;
	}

	&:focus{
		background-color: #444;
		border: 1px solid #333;
		// box-shadow: rgba(0,0,0,0.2) 0px -20px 20px inset;
	}
}
.btn-dstq{
	background:#0c6489;
	border-radius: 100px;

	&:hover{
		background:#229acc;
	}
	&:focus{
		background:#229acc;
	}
}
.btn-demo
{
	border-radius: 100px;
}

#vantagens
{
	padding: 3.2em 0 0;
}

// .index-subtitle,
.index-subtitle
{
	font-size: 20px;
	font-weight: 300;
}

.vantagens-title
{
	font-size: 24px;
	font-weight: bold;
	margin-top:20px;
	line-height: 1em;
	margin-bottom: 15px;

	b {
		display: block;
	}
}

.vantagens-title + p {
	margin-top: 0;
	margin-bottom: 30px;
}

.vantagens-list {

	// display: table;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.vantagens-item {
		background: #FFF;
		display:flex;
		flex-direction: column;
		justify-content: center;
		// float: left;
		font-size: 13px;
		// color: #FFF;
		// min-height: 170px;
		margin: 0 .5% 1%;
		padding: 2.4em;
		z-index:1;
		width: 49%;
		text-align: center;

		@cor2: #34917b;
		@cor1: #467384;

		// border-left: 6px solid #245162;

		// background: @cor1;
		// background: -moz-linear-gradient(45deg, @cor1 0%, @cor2 100%);
		// background: -webkit-gradient(left bottom, right top, color-stop(0%, @cor1), color-stop(100%, @cor2));
		// background: -webkit-linear-gradient(45deg, @cor1 0%, @cor2 100%);
		// background: -o-linear-gradient(45deg, @cor1 0%, @cor2 100%);
		// background: -ms-linear-gradient(45deg, @cor1 0%, @cor2 100%);
		// background: linear-gradient(45deg, @cor1 0%, @cor2 100%);

	    -webkit-box-sizing: border-box;
	       -moz-box-sizing: border-box;
	            box-sizing: border-box;

		//-webkit-transform: scale(1.0);
		//-moz-transform: scale(1.0);

		// .border-radius;
		//.box-shadow-min;
		// .wk-anim;

		/*
		&:hover{
			background: rgba(255,255,255,0.9);
			z-index:2;

			-webkit-transform: scale(1.1);
			-moz-transform: scale(1.1);

			.box-shadow;
		}
		*/

		h3{
			// color: #FFF;
			color: @sysquali-azul;
			text-shadow: none;
			font-size:24px;
			// font-weight: normal;
			line-height: 1em;
			// padding: 20px 20px 0px 30px;
			margin-bottom: 1em;
			text-transform: uppercase;
			font-weight: 300;
		}
		p{
			text-align: center;
			// padding: 5px 20px 20px 30px;
			
			&:last-child
			{
				margin-bottom: 0;
			}
		}
	}
}

.paginacao{
	// background: rgba(255,255,255,0.4);
	margin: 5px 10px 20px 10px;
	// padding: 8px 16px 8px 16px;
	border-bottom: 1px solid rgba(0,0,0,0.05);
	padding: 0;

	// .border-radius;

	a{
		@cor: #4989aa;
		color:@cor;
		display: inline-block;
		text-decoration:none;
		margin: 0 5px -1px;

		&:hover{
			color:#080;
			border-bottom: 1px solid;
			text-decoration: none;
		}
		&:first-child {
			margin-left: 0;
		}
	}
}

/*SPIN Basics*/
#mask{
	background-color: rgba(0,0,0,0.9);
	cursor: wait;
	display:none;
	height:100%;
	left:0;
	position:fixed;
	top:0;
	width: 100%;
	z-index: 100;
}
#spin{
	left:51%;
	position:fixed;
	top:50%;
}

/*POPUP*/
.popup{
	@popup_height: 230px;
	@popup_width: 800px;
	@popup_padding: 20px;

	background: #fff;
	left: 50%;
	height:@popup_height;
	margin-left: -(@popup_width/2)-@popup_padding;
	margin-top:-(@popup_height/2);
	padding: @popup_padding;
	position: fixed;
	top: 50%;
	width: @popup_width;
	z-index: 101;

	.border-radius;
	.box-shadow;
}

/*WP*/

.wp{
	bottom: 0;
	display:block;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 12px;
	// height:32px;
	position: relative;
	text-align: right;
	width: 100%;
	.wpby{
		color: #999;
	}
	a{
		display: inline-block;
		color: #999;
		padding: 10px;
		text-decoration: none;

		b {
			text-transform: uppercase;
		}

		img{
			float: right;
			margin-right: 7px;
		}
	}
	.wpwesley{
		color: #666;
	}
	.wppimentel{
		color:#888;
	}
}

.novidade {
	text-transform: uppercase;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	padding: 10px 15px;
	display: inline-block;
	background-color: #FFB915;
	color: #74500E;
	line-height: 1em;
	border-radius: 23px;
	font-weight: 700;
	font-size: 14px;
	vertical-align: top;
	margin-left: 15px;
}

#cases-slider
{
	ul li {
		background-color: transparent !important;
	}
}

#clientes-sliding {
	.clientes-lista
	{
		width: 940px !important;
	}
	.clientes-item {
		background-color: transparent !important;
		list-style: none;
	}
}