@import "partials/vars";
@import "partials/mixins";
@import "partials/reset";
@import "partials/typography";
@import "partials/grid";
@import "partials/forms";

body {
	height: auto;
	position: relative;
	left: 0;
	right: 0;
	@include transition(all 0.2s ease-out);
}

svg {
	/*width: 1em;
	height: 1em;
	display: inline-block;
	stroke-width: 0;*/
}

main {
}

.inner {
	width: 1170px;
	max-width: 96%;
	display: block;
	margin: 0 auto;
	position: relative;
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

/*========== HEROES ==========*/
.hero {
	position: relative;
	background-position: top center;
	background-repeat: no-repeat;

	.caption {
		position: absolute;
		left: 50%;
		top: 50%;
		text-align: center;
		@include transform(translate(-50%,-50%));
	}

	&.home-hero {
		min-height: 815px;
		@media only screen and #{$phone} {
			@include viewport-unit(min-height, 100vh);
		}
		@media only screen and #{$minTabletPort} and #{$maxLaptop} {
			@include viewport-unit(min-height, 90vh);
		}

		.caption {
			width: 710px;
			margin: -20px 0 0 0;
			&:before {
				width: 300px;
				height: 70px;
				border: 3px solid $mainColor;
				border-bottom: none;
				position: absolute;
				left: 50%;
				top: -90px;
				margin: 0 0 0 -150px;
				content: '';
				@media only screen and #{$phone} {
					display: none;
				}
			}
			&:after {
				width: 300px;
				height: 70px;
				border: 3px solid $mainColor;
				border-top: none;
				position: absolute;
				left: 50%;
				bottom: -90px;
				margin: 0 0 0 -150px;
				content: '';
				@media only screen and #{$phone} {
					display: none;
				}
			}
			@media only screen and #{$phone} {
				width: 90%;
			}

			div {
				width: 540px;
				position: absolute;
				left: 85px;
				top: 50%;
				@include transform(translateY(-50%));
			}

			h1 {
				width: 93%;
				line-height: 50px;
				margin: 0 auto;
				font-size: $fontSize40;
				color: #2e324d;
				@media only screen and #{$phone} {
					font-size: 2rem;
					line-height: 40px;

				}
			}

			p {
				color: #2e324d;
				font-size: $fontSize20;
				padding: 20px 0 0 0;
				font-family: 'robotoregular';
				@media only screen and #{$phone} {
					padding: 20px 0;
				}
			}

			.button {
				z-index: 99;
				position: absolute;
				left: 50%;
				bottom: -110px;
				@include transform(translateX(-50%));
				@include boxShadow(0px 10px 27px 0px rgba(0, 0, 0, 0.25));
				@media only screen and #{$phone} {
					width: 100%;
					position: relative;
					left: auto;
					bottom: auto;
					@include transform(translateX(0));
				}
			}
		}

	}

	&.page-hero {
		height: 400px;

		.caption {
			width: 730px;
			&:before {
				width: 300px;
				height: 40px;
				border: 3px solid $mainColor;
				border-bottom: none;
				position: absolute;
				left: 50%;
				top: -40px;
				margin: 0 0 0 -150px;
				content: '';
			}
			&:after {
				width: 300px;
				height: 40px;
				border: 3px solid $mainColor;
				border-top: none;
				position: absolute;
				left: 50%;
				bottom: -60px;
				margin: 0 0 0 -150px;
				content: '';
			}
			@media only screen and #{$phone} {
				width: 100%;
			}

			h1 {
				text-transform: uppercase;
				font-family: 'robotolight';
				color: #e6f0ff;
				font-size: 1rem;
				opacity: .4;
			}

			p {
				font-size: $fontSize30;
				color: #fff;
				line-height: 40px;
				@media only screen and #{$phone} {
					line-height: 35px;
				}
			}
		}
	}

}

/*========== HEADER ==========*/
header {
	width: 100%;
	z-index: 99;
	position: relative;
	background: #fff;
	text-align: right;
	padding: 10px 0 0 0;
	&:before {
		width: 30%;
		height: 1px;
		background: #086fb8;
		position: absolute;
		left: 0;
		top: 0;
		content: '';
	}
	&:after {
		width: 70%;
		height: 1px;
		background: #f26532;
		position: absolute;
		right: 0;
		top: 0;
		content: '';
	}

	@media only screen and #{$phone} {
	}

	.logo {
		width: 180px;
		float: left;
		padding: 15px 0 0 0;
		@media only screen and #{$maxTabletLand} {
			padding: 7px 0 17px 0;
		}

	}

	.off-canvas-right {
		display: inline-block;
		@media only screen and #{$phone} {
			width: 80%;
			right: -80%;
		}

		@media only screen and #{$minTabletPort} and #{$maxTabletLand} {
			width: 50%;
			right: -50%;
		}

		@media only screen and #{$maxTabletLand} {
			height: 100%;
			position: fixed;
			top: 0;
			bottom: 0;
			overflow-y: auto;
			background: #24252f;
			@include transition(all 0.2s ease-out);
		}
	}

	nav {
		padding: 8px 0 0 0;
		@media only screen and #{$maxTabletLand} {
			padding: 0;
			text-align: left;
		}
		ul {
			li {
				display: inline-block;
				padding: 0 18px 30px 18px;
				position: relative;
				@include transition(all .2s ease-out);
				&:last-child {
					padding: 0 0 30px 18px;
					@media only screen and #{$maxTabletLand} {
						padding: 0;
						border-bottom: 1px solid #343543;
					}
				}
				@media only screen and #{$maxTabletLand} {
					padding: 0;
					display: block;
					border-top: 1px solid #343543;
				}

				a {
					display: block;
					font-family: 'robotobold';
					color: #7b7c8d;
					font-size: $fontSize14;
					text-transform: uppercase;
					@media only screen and #{$maxTabletLand} {
						font-size: 1rem;
						padding: 26px 30px;
					}
				}

				&.active, &:hover {
					a {
						color: $mainColor;
					}
					ul {
						li {
							a {
								color: #4f515e;
							}
						}
					}
				}

				&.dropdown {
					&:hover {
						> ul {
							display: block;
							@media only screen and #{$maxTabletLand} {
								display: none;
							}
						}
					}
				}

				> ul {
					width: 210px;
					position: absolute;
					left: 50%;
					top: 43px;
					background: #fff;
					display: none;
					@include borderRadius(0 0 2px 2px);
					@include transform(translateX(-50%));
					@include transition(all .2s ease-out);
					@include boxShadow(0px 14px 24px 0px rgba(0, 0, 0, 0.17));

					&:before {
						width: 100%;
						height: 2px;
						background: #f3823a;
						position: absolute;
						left: 0;
						top: -2px;
						content: '';
					}

					&:after {
						width: 0;
						height: 0;
						border-left: 7px solid transparent;
						border-right: 7px solid transparent;
						border-bottom: 7px solid #f3823a;
						position: absolute;
						left: 50%;
						top: -8px;
						content: '';
						@include transform(translateX(-50%));
					}

					li {
						padding: 0;
						text-align: center;
						display: block;
						border-bottom: 1px solid #e5e5e6;
						&:last-child {
							border: none;
							padding: 0;
						}

						a {
							font-family: 'robotolight';
							color: #4f515e;
							font-size: $fontSize13;
							padding: 14px 10px;
							line-height: 18px;
							&:hover {
								color: $mainColor;
							}
						}
					}
				}
			}
		}
	}

	.lang {
		@media only screen and #{$maxTabletLand} {
			padding: 8px 30px;
		}
		ul {
			@media only screen and #{$maxTabletLand} {
				text-align: left;
			}
			li {
				display: inline-block;
				padding: 0 0 0 5px;
				@media only screen and #{$maxTabletLand} {
					padding: 0;
					border: 1px solid #343543;
				}

				a {
					font-size: $fontSize13;
					color: #8b8ca2;
					&:hover {
						color: #2c2d3f;
					}
					@media only screen and #{$maxTabletLand} {
						font-size: 15px;
						text-transform: uppercase;
						display: block;
						padding: 13px 25px;
					}
				}

				&.active {
					@media only screen and #{$maxTabletLand} {
						border: 1px solid #595b6c;
					}
					a {
						color: #2c2d3f;
						@media only screen and #{$maxTabletLand} {
							color: #fff;
						}
					}
				}
			}
		}
	}

	.hamburger {
		display: none;
		@media only screen and #{$maxTabletLand} {
			display: inline-block;
			margin: 7px 0 0 0;
		}
	}

}


/*========== SECTIONS ==========*/
section {
	padding: 120px 0;
	position: relative;
	z-index: 2;
	@media only screen and #{$phone} {
		padding: 60px 0;
	}

	/* Section elements */
	.section-heading {
		text-align: center;
		padding: 0 0 60px 0;
		position: relative;
		z-index: 2;

		h2 {
			color: #3a3e60;
			font-size: $fontSize30;
			text-transform: uppercase;
			position: relative;
			@media only screen and #{$phone} {
				line-height: 35px;
			}
			&:after {
				width: 100px;
				height: 2px;
				background: $mainColor;
				position: absolute;
				left: 50%;
				bottom: -30px;
				margin: 0 0 0 -50px;
				content: '';
			}
		}

		p {
			width: 75%;
			padding: 45px 0 0 0;
			margin: 0 auto;
			color: #4f515e;
			@media only screen and #{$maxTabletPort} {
				width: 100%;
			}
		}

		&.heading-icon {
			text-align: left;
			padding: 0 0 40px 0;
			@media only screen and #{$maxTabletPort} {
				text-align: center;
			}

			h2 {
				display: inline-block;
				vertical-align: middle;
				&:after {
					display: none;
				}
				@media only screen and #{$maxTabletPort} {
					display: block;
				}
			}
			div {
				width: 65px;
				height: 65px;
				background: #1378bf;
				margin: 0 20px 0 0;
				position: relative;
				display: inline-block;
				vertical-align: middle;
				@include borderRadius(2px);
				@include boxShadow(0px 13px 27px 0px rgba(0, 0, 0, 0.1));
				@media only screen and #{$maxTabletPort} {
					margin: 0 0 10px 0;
				}

				img {
					width: 46px;
					height: 46px;
					fill: #fff;
					position: absolute;
					left: 50%;
					top: 50%;
					@include transform(translate(-50%,-50%));
				}
			}
		}

	}

	.section-body {
		position: relative;
		z-index: 2;

		p {
			color: #4f515e;
		}
	}

	.section-footer {
		text-align: center;
		padding: 35px 0 0 0;
		position: relative;
		z-index: 2;
	}

	.section-image {
		width: 500px;
		position: absolute;
		left: 0;
		top: -190px;
		z-index: 99;
		@media only screen and #{$maxTabletPort} {
			display: none;
		}
		@media only screen and #{$minTabletLand} and #{$maxTabletLand} {
			width: 90%;
			position: relative;
			left: auto;
			top: auto;
		}
		img {
			width: 100%;
			height: auto;
			display: block;
			@include boxShadow(0px 23px 30px 0px rgba(0, 0, 0, 0.2));
		}
	}


	/* Section background */
	&.bg-blue {
		background: rgb(26,68,116);
		background: -moz-linear-gradient(top, rgba(26,68,116,1) 0%, rgba(37,88,146,1) 100%);
		background: -webkit-linear-gradient(top, rgba(26,68,116,1) 0%,rgba(37,88,146,1) 100%);
		background: linear-gradient(to bottom, rgba(26,68,116,1) 0%,rgba(37,88,146,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a4474', endColorstr='#255892',GradientType=0 );
		&:after {
			width: 100%;
			height: 200px;
			background: url('/img/bg-section.png') no-repeat bottom center;
			position: absolute;
			bottom: 0;
			left: 0;
			content: '';
		}

		.section-heading {
			h2 {
				color: #fff;
				font-size: 35px;
				font-family: 'robotolight';
			}
			p {
				color: #fff;
			}
		}
	}

	&.bg-image {
		background-color: #f6f5f4;
		background-repeat: no-repeat;
		background-position: 100% 0;
		z-index: 1;
		position: relative;
		&:before {
			@media only screen and #{$maxTabletPort} {
				width: 100%;
				height: 100%;
				background: rgba(17,19,33,.75);
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				content: '';
			}
		}
		@media only screen and #{$minTabletLand} and #{$maxTabletLand} {
			background-position: 50% 0;
		}
		@media only screen and #{$minLaptop} and #{$maxLaptop} {
			background-position: 0 0;
		}

		.section-heading {
			text-align: left;
			h2 {
				@media only screen and #{$maxTabletPort} {
					color: #fff;
				}
				&:after {
					left: 0;
					margin: 0;
					@media only screen and #{$maxTabletPort} {
						left: 50%;
						bottom: -30px;
						margin: 0 0 0 -50px;
					}
				}
			}
			@media only screen and #{$maxTabletPort} {
				text-align: center;
			}
		}

		.section-body {
			.rich-text {
				text-align: justify;
				@media only screen and #{$maxTabletPort} {
					text-align: center;
					color: #fff;
				}
				p {
					@media only screen and #{$maxTabletPort} {
						color: #fff;
					}
				}
			}
			ul {
				text-align: left;
				@media only screen and #{$maxTabletPort} {
					text-align: center;
				}

			}
		}

		.section-footer {
			text-align: left;
			@media only screen and #{$maxTabletPort} {
				text-align: center;
			}
		}
	}

	&.bg-blur {
		background: url("/img/bg-section-img.jpg") no-repeat top center #f3f3f3;
	}

	&.bg-pattern {
		background: url("/img/bg-pattern.png") no-repeat 0 0 #fff;
	}

	&.border-top {
		border-top: 1px solid #dddee3;
	}

	&.padding-bottom {
		padding-bottom: 150px;
		@media only screen and #{$phone} {
			padding-bottom: 60px;
		}
		@media only screen and #{$minTabletPort} and #{$maxTabletLand} {
			padding-bottom: 120px;
		}
	}

	/* Special sections */
	&.section-service {
		.section-footer {
			text-align: left;
			@media only screen and #{$maxTabletPort} {
				text-align: center;
			}
		}
	}

	&.license-section {
		padding: 10px 0;
		border-bottom: 1px solid #e4e4e4;
		text-align: center;
		color: #56596c;
		@include boxShadow(0px 2px 4px 0px rgba(0, 0, 0, 0.07));

		img {
			width: 80%;
			height: auto;
			display: inline-block;
			@media only screen and #{$phone} {
				width: 30%;
			}
		}

		p {
			padding: 20px 0 0 0;
			text-align: right;
			@media only screen and #{$phone} {
				text-align: center;
				padding: 0;
			}
		}

		h3 {
			padding: 25px 0 0 0;
			font-family: 'robotomedium';
			@media only screen and #{$phone} {
				padding: 0;
				line-height: 25px;
			}
		}
	}

	&.contact-section {}

}

/*========== GRIDS ==========*/
.service-grid {
	.row {
		margin: 0 -5px;
		> .column {
			padding: 5px;
		}
	}

	article {
		padding: 30px 0 0 0;
		height: 150px;
		text-align: center;
		background: #fff;
		@include boxShadow(0px 10px 30px 0px rgba(0, 0, 0, 0.1));

		div {
			width: 43px;
			margin: 0 auto 15px auto;
			img {
				width: 43px;
				height: 43px;
				fill: #2e75f8;
			}
		}

		p {
			width: 90%;
			display: inline-block;
			color: #444c66;
			font-size: $fontSize14;
			font-family: 'robotobold';
			text-transform: uppercase;
			line-height: 20px;
		}

	}
}

.default-grid {

	.row {
		> .column {
			&:nth-child(1),
			&:nth-child(2),
			&:nth-child(3),
			&:nth-child(4) {
				margin: 0 0 40px 0;
				@media only screen and #{$maxTabletPort} {
					margin: 0 -2px;
				}
				@media only screen and #{$minTabletPort} and #{$maxTabletPort} {
					margin: 0 0 20px 0;
				}
			}
		}
	}

	article {
		@media only screen and #{$phone} {
			min-height: 140px;
		}

		@media only screen and #{$maxTabletPort} {
			text-align: center;
		}

		div {
			width: 80px;
			height: 80px;
			background: #fff;
			position: relative;
			display: inline-block;
			vertical-align: middle;
			@include boxShadow(0px 13px 27px 0px rgba(0, 0, 0, 0.08));


			img {
				width: 40px;
				height: 40px;
				fill: #2e75f8;
				position: absolute;
				left: 50%;
				top: 50%;
				@include transform(translate(-50%,-50%));
			}
		}

		p {
			width: 150px;
			color: #4f515e;
			font-size: $fontSize14;
			line-height: 20px;
			display: inline-block;
			vertical-align: middle;
			padding: 0 0 0 10px;
			@media only screen and #{$maxTabletPort} {
				width: 80%;
				padding: 10px 0 0 0;
			}
		}
	}

	&.small-grid {
		width: 1030px;
		margin: 0 auto;
		@media only screen and #{$maxLaptop} {
			width: auto;
		}
	}

}

.clients-grid {

	.clients-grid-block {
		padding: 0 0 50px 0;
		&:last-child {
			padding: 0;
		}
		h2 {
			font-size: 20px;
			color: #2e324d;
			font-family: 'robotoregular';
			text-align: center;
			text-transform: uppercase;
			padding: 0 0 10px 0;
			margin: 0 0 20px 0;
			border-bottom: 1px solid #c9cbd0;
		}
	}

	article {
		background: #fff;
		text-align: center;
		padding: 10px 5px;
		margin: 0 0 10px 0;
		@include boxShadow(0px 10px 20px 0px rgba(0, 0, 0, 0.1));

		div {
			width: 175px;
			display: inline-block;
			img {
				width: 100%;
				height: auto;
				display: block;
			}
		}

		h3 {
			font-family: 'robotobold';
			font-size: 15px;
			color: #4f515e;
			padding: 5px 0;
		}

		p {
			color: #6c6d7a;
			font-size: 13px;
			line-height: 20px;
		}
	}
}

.employees-grid  {
	article {
		background: #fff;
		text-align: left;
		margin: 0 0 10px 0;
		@include boxShadow(0px 10px 20px 0px rgba(0, 0, 0, 0.1));
		@media only screen and #{$maxTabletPort} {
			text-align: center;
		}

		div {
			padding: 25px 50px;
			&:first-child {
				border-bottom: 1px solid #e2e3e8;
			}
			@media only screen and #{$phone} {
				padding: 20px;
			}

			h2 {
				color: #3a3e60;
				font-size: 20px;
				font-family: 'robotomedium';
				padding: 0 0 8px 0;
			}
			em {
				color: #767887;
				text-transform: uppercase;
				font-size: 12px;
			}

			&.rich-text {
				font-size: 14px;
				border: none;
				padding: 0 0 10px 0;
				ul {
					li {
						padding: 0 0 10px 0;
					}
				}
			}
		}

		a {
			line-height: 30px;
			color: #1a91e0;
			position: relative;
			&:after {
				width: 100%;
				height: 1px;
				border-bottom: 1px dashed #d1d2d6;
				position: absolute;
				bottom: -3px;
				left: 0;
				content: '';
				@include transition(all .2s ease-out);
			}
			&:hover {
				&:after {
					border-bottom: 1px dashed #1a91e0;
				}
			}
		}
	}
}


/*========== MISC ==========*/
/* Counter Block */
.counter-block {
	width: 880px;
	max-width: 100%;
	margin: 0 auto;

	.row {
		margin: 0 -25px;
		> .column {
			padding: 0 25px;
			&:last-child {
				a {
					&:after {
						display: none;
					}
				}
			}
		}
	}

	article {
		text-align: center;
		position: relative;
		@media only screen and #{$phone} {
			padding: 0 0 15px 0;
		}

		a {
			width: 140px;
			height: 140px;
			display: inline-block;
			border: 2px solid #4182cb;
			position: relative;
			@include borderRadius(50%);
			&:after {
				width: 88px;
				height: 3px;
				background: url("/img/conn.png") no-repeat center center;
				position: absolute;
				top: 50%;
				right: -95px;
				content: '';
				@media only screen and #{$phone} {
					display: none;
				}
				@media only screen and #{$minTabletPort} and #{$maxTabletPort} {
					width: 60px;
					right: -60px;
				}
			}

			img {
				width: 70px;
				display: block;
				position: absolute;
				left: 50%;
				top: 50%;
				@include transform(translate(-50%,-50%));
			}

			span {
				width: 140px;
				height: 140px;
				display: block;
				position: absolute;
				border: 1px solid #4182cb;
				left: 50%;
				top: 50%;
				opacity: 0;
				@include borderRadius(50%);
				@include transform(translate(-50%,-50%));
			}

			em {
				width: 140px;
				height: 140px;
				display: block;
				position: absolute;
				border: 1px solid #4182cb;
				left: 50%;
				top: 50%;
				opacity: 0;
				@include borderRadius(50%);
				@include transform(translate(-50%,-50%));
			}

			&:hover {
				img {
					@include filter(brightness(0) invert(1))
				}
				em {
					opacity: 1;
					animation: pulse1 2s linear infinite;
				}
				span {
					opacity: 1;
					animation-delay: 1s;
					animation: pulse2 1s linear infinite;
				}
			}
		}

		div {
			font-size: 40px;
			font-family: 'robotobold';
			color: #fff;
			padding: 15px 0 0 0;
			position: relative;
			z-index: 2;
			@media only screen and #{$phone} {
				font-size: 30px;
				padding: 5px 0 0 0;
			}
		}

		p {
			font-size: $fontSize14;
			color: #fff;
			text-transform: uppercase;
			line-height: 20px;
			padding: 5px 0 0 0;
		}

	}
}

.logos-block {
	margin: -5px 0 0 0;
	position: relative;
	&:before {
		width: 16px;
		height: 180px;
		background: #fff;
		position: absolute;
		left: -13px;
		top: 0;
		content: '';
		z-index: 99;
	}
	&:after {
		width: 16px;
		height: 180px;
		background: #fff;
		position: absolute;
		right: -14px;
		top: 0;
		content: '';
		z-index: 99;
	}

	article {
		min-height: 120px;
		text-align: center;
		margin: 0 5px;
		background: #fff;
		position: relative;
		@include boxShadow(0px 10px 20px 0px rgba(0, 0, 0, 0.1));

		img {
			width: 175px;
			position: absolute;
			left: 50%;
			top: 50%;
			@include transform(translate(-50%,-50%));
			@media only screen and #{$maxTabletLand} {
				width: 100%;
				height: auto;
				display: block;
			}
		}
	}

	.slick-list {
		padding: 5px 0 30px 0;
	}
}

.employees-block {
	a {
		background: #fff;
		overflow: hidden;
		text-align: center;
		display: block;
		@include borderRadius(2px);
		@include boxShadow(0px 13px 27px 0px rgba(0, 0, 0, 0.1));
		&:hover {
			@include boxShadow(0px 28px 30px 0px rgba(0, 0, 0, 0.25));
		}
		@media only screen and #{$maxTabletPort} {
			margin: 0 0 10px 0;
		}

		img {
			width: 100%;
			height: auto;
			display: block;
		}

		h2 {
			color: #3a3e60;
			font-family: 'robotobold';
			font-size: 13px;
			text-transform: uppercase;
			position: relative;
			padding: 25px 0 35px 0;
			&:after {
				width: 50px;
				height: 2px;
				background: $mainColor;
				position: absolute;
				left: 50%;
				bottom: 20px;
				margin: 0 0 0 -25px;
				content: '';
			}
		}
	}
}

.quote-block {
	width: 800px;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;

	.quote-text {
		position: relative;
		margin: 0 0 40px 0;
		&:after {
			width: 100px;
			height: 2px;
			background: $mainColor;
			position: absolute;
			left: 50%;
			bottom: -25px;
			margin: 0 0 0 -50px;
			content: '';
		}

		p {
			font-size: $fontSize24;
			color: #2e324d;
			line-height: 40px;
			font-style: italic;
		}
	}

	.quote-author {
		p {
			color: #3a3e60;
			font-size: 1.04rem;
			span {
				font-family: 'robotobold';
			}
		}
	}

	.quote-action {
		padding: 30px 0 0 0;
		.button {
			min-width: 300px;
			margin: 0 5px;
			@media only screen and #{$phone} {
				margin: 10px 0;
			}

		}
	}

}

.edition-block {
	article {
		padding: 20px;
		margin: 0 5px;
		background: #fff;
		overflow: hidden;
		position: relative;
		text-align: center;
		@include boxShadow(0px 5px 10px 0px rgba(0, 0, 0, 0.15));

		div {
			display: inline-block;
		}

		h2 {
			color: #3a3e60;
			font-family: 'robotomedium';
			padding: 15px 0 10px 0;
		}

		p {
			color: #4f515e;
			line-height: 18px;
			font-size: 13px;
			padding: 0 0 3px 0;
			&:last-child {
				padding: 0;
			}
			strong {
				font-weight: bold;
				line-height: 18px;
			}
		}
	}
}

.license-block {
	padding: 15px 30px 15px 10px;
	margin: 0 0 35px 0;
	display: inline-block;
	background: #fff;
	@include transition(all .2s ease-out);
	@include boxShadow(0px 13px 27px 0px rgba(0, 0, 0, 0.1));
	@media only screen and #{$maxTabletPort} {
		width: 100%;
	}

	div {
		display: inline-block;
		vertical-align: middle;
		margin: 0 10px;
	}

	p {
		display: inline-block;
		vertical-align: middle;
		color: #4f515e;
		font-size: 15px;
		line-height: 24px;
		@include transition(all .2s ease-out);
	}

	h3 {
		color: #4f515e;
		font-size: 16px;
		line-height: 24px;
		font-family: 'robotomedium';
		@include transition(all .2s ease-out);
	}


}

a.license-block {
	padding: 15px 60px 15px 10px;
	border-left: 2px solid #1378bf;
	background: url('/img/ico-download.png') no-repeat 97% center #fff;
	&:hover {
		@include boxShadow(0px 43px 47px 0px rgba(0, 0, 0, 0.15));
		h3, p {
			color: #1378bf;
		}
	}
}


/*========== CONTACT ==========*/
.contact-section {

	.inner {
		position: relative;
		z-index: 99;
	}

	.contact-info {
		@media only screen and #{$maxTabletLand} {
			text-align: center;
		}

		h2 {
			color: #3a3e60;
			font-family: 'robotoregular';
			font-size: 28px;
			padding: 0 0 25px 0;
		}

		p {
			color: #5a6063;
			font-size: 15px;

			strong {
				line-height: 30px;
				font-family: 'robotobold';
			}

			a {
				line-height: 30px;
			}
		}
	}

	.contact-form {
		padding: 35px 0 0 0;
		@media only screen and #{$phone} {
			width: 100%;
			padding: 35px 0;
		}
		@media only screen and #{$minTabletPort} and #{$maxTabletPort} {
			width: 80%;
			margin: 0 auto 50px auto;
		}
		@media only screen and #{$minTabletLand} and #{$maxTabletLand} {
			width: 60%;
			margin: 0 auto 50px auto;
		}

		.button {
			@media only screen and #{$maxTabletLand} {
				width: 100%;
			}
		}
	}

	&:after {
		width: 76%;
		height: 100%;
		background: url("/img/bg-fade.png") no-repeat right top;
		position: absolute;
		left: 0;
		top: 0;
		content: '';
		z-index: 98;
		@media only screen and #{$maxTabletLand} {
			display: none;
		}
	}
}

.map {
	width: 60%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
	@media only screen and #{$maxTabletLand} {
		position: relative;
		width: 96%;
		margin: 0 auto;
		height: 400px;
		right:auto;
		top: auto;
	}
}

/*========== SLICK SLIDER ==========*/
.slick-slider {

	&.edition-block {
		.slick-list {
			padding: 0 0 40px 0;
		}
	}

	ul.slick-dots {
		display: block;
		text-align: center;
		li {
			display: inline-block;
			padding: 0 3px;

			div {
				width: 11px;
				height: 11px;
				display: block;
				background: #cacfda;
				cursor: pointer;
				text-indent: -9999px;
				@include borderRadius(50%);
				@include transition(all .2s ease-out);
				&:hover {
					background: #b0b5c2;
				}
			}

			&.slick-active {
				div {
					background: #5596db;
				}
			}
		}
	}

	.slick-arrow {
		width: 13px;
		height: 21px;
		position: absolute;
		top: 62px;
		opacity: .8;
		cursor: pointer;

		&.slick-prev {
			background: url("/img/ic-arrow-left.png") no-repeat top center;
			left: -50px;
		}

		&.slick-next {
			background: url("/img/ic-arrow-right.png") no-repeat top center;
			right: -50px;
		}

		&:hover {
			opacity: 1;
		}

		&.slick-disabled {
			opacity: 0.4;
			cursor: default;
		}
	}

}

/*========== MESSAGES & ERRORS ==========*/
.validation-error {
	.input {
		border: 1px solid #d86a6a;
		&:hover,
		&:focus {
			border: 1px solid #d86a6a;
		}
	}

	.validation-error-message {
		font-size: 14px;
		color: #d04e4e;
		padding: 4px 20px;
	}
}

.full-message-section {
	@include viewport-unit(min-height, 90vh);
	background: url('/img/bg-404.jpg') no-repeat top center;
	background-size: cover;
	position: relative;

	.error-404 {
		width: 100%;
		text-align: center;
		position: absolute;
		left: 0;
		top: 50%;
		@include transform(translateY(-50%));
		h2 {
			font-size: 200px;
			color: #2c2e38;
			text-shadow: 0px 3px 9px rgba(0, 0, 0, 0.5);
		}

		p {
			font-size: 30px;
			color: #2c2e38;
			padding: 10px 0 30px 0;
		}
	}
}

/*========== POPUP ==========*/
.popup_background {
	background: red;
	transition: all 0.3s 0.3s;
}
.popup,
.popup_wrapper {
	transition: all 0.3s ease-out;
}
.popup_visible .popup {
	transform: translateX(0) translateY(0);
}

.close-popup {
	position: absolute;
	right: 30px;
	top: 32px;
}

.popup {
	width: 770px;
	background: #fff;
	@include borderRadius(3px);
	transform: translateX(0) translateY(-40%);

	@media only screen and #{$maxTabletPort} {
		width: 90%;
	}

	.popup-heading {
		text-align: center;
		position: relative;
		padding: 30px 0;
		@include boxShadow(0px 5px 10px 0px rgba(0, 0, 0, 0.1));
		&:before {
			width: 50%;
			height: 1px;
			background: #086fb8;
			position: absolute;
			left: 0;
			bottom: 0;
			content: "";
		}
		&:after {
			width: 50%;
			height: 1px;
			background: #f26532;
			position: absolute;
			right: 0;
			bottom: 0;
			content: "";
		}

		h2 {
			color: #22232c;
			text-transform: uppercase;
			font-size: 20px;
			font-family: 'robotoregular';
		}
	}

	.popup-body {
		padding: 50px 80px;
		@media only screen and #{$phone} {
			padding: 20px;
		}
	}

	.popup-footer {
		padding: 15px 0;
		text-align: center;
		border-top: 1px solid #e2e3e7;
		@include boxShadow(0px -4px 7px 0px rgba(0, 0, 0, 0.04));
		@media only screen and #{$phone} {
			padding: 10px 20px;
		}
	}
}


/*========== ANIMATIONS ==========*/
@keyframes pulse1 {
	0% {
		width: 140px;
		height: 140px;
	}
	100% {
		width: 250px;
		height: 250px;
		opacity: 0;
	}
}
@keyframes pulse2 {
	0% {
		width: 140px;
		height: 140px;
	}
	50% {
		opacity: .2;
	}
	100% {
		width: 250px;
		height: 250px;
		opacity: 0;
	}
}


/*========== ANIMATIONS ==========*/

footer {
	padding: 80px 0 0 0;
	background: #2e313d;
	color: #8a8d9c;
	font-size: $fontSize14;
	@media only screen and #{$maxTabletPort} {
		padding: 40px 0 0 0;
		text-align: center;
	}

	a {
		color: #8a8d9c;
		font-size: $fontSize14;
		&:hover {
			color: #fff;
		}
	}

	strong {
		font-weight: bold;
	}

	h3 {
		font-family: 'robotobold';
		color: #fff;
		font-size: $fontSize16;
	}

	ul {
		li {
			padding: 15px 0 0 0;
			@media only screen and #{$maxTabletPort} {
				line-height: 20px;
			}
		}
	}


	.logo-holder {
		@media only screen and #{$maxTabletPort} {
			margin: 0 0 20px 0;
		}
		.logo {
			padding: 40px 0 5px 0;
			@media only screen and #{$maxTabletPort} {
				padding: 0 0 5px 0;
			}
		}
	}

	.footer-b {
		background: #242731;
		text-align: center;
		font-size: 14px;
		padding: 15px 0;
		margin: 80px 0 0 0;
		@media only screen and #{$maxTabletPort} {
			margin: 40px 0 0 0;
		}

		a {
			color: #b7b9c3;
			&:hover {
				color: #fff;
			}
		}
	}

}

body {
	&.off-canvas-right-opened {
		@media only screen and #{$maxTabletLand} {
			left: -50%;
			overflow-x: visible;

			.off-canvas-right {
				right: 0;
			}
		}

		@media only screen and #{$phone} {
			left: -80%;
			overflow-x: visible;
		}
	}
}



.hamburger {
	display: inline-block;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible; }


.hamburger-box {
	width: 40px;
	height: 24px;
	display: inline-block;
	position: relative; }

.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	width: 40px;
	height: 6px;
	background: #e67b37;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
	content: "";
	display: block; }
.hamburger-inner::before {
	top: -10px; }
.hamburger-inner::after {
	bottom: -10px; }


/*
   * Squeeze
   */
.hamburger--squeeze .hamburger-inner {
	transition-duration: 0.1s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze .hamburger-inner::before {
	transition: top 0.1s 0.14s ease, opacity 0.1s ease; }
.hamburger--squeeze .hamburger-inner::after {
	transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
	transform: rotate(45deg);
	transition-delay: 0.14s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--squeeze.is-active .hamburger-inner::before {
	top: 0;
	opacity: 0;
	transition: top 0.1s ease, opacity 0.1s 0.14s ease; }
.hamburger--squeeze.is-active .hamburger-inner::after {
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }

















