@import 'variable.less';
@import 'https://fonts.googleapis.com/css?family=Raleway:400,500,700';
@import 'https://fonts.googleapis.com/css?family=Noto+Sans:400,700&subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext,vietnamese';

// GENERAL //

* {
	font-family: 'Raleway','Noto Sans', sans-serif;
	font-size: 1em;
	line-height: 1.75;
	letter-spacing: 1px; 
}

a, a:hover {
	text-decoration: none;
}

p {
	span {
		color: @m-pink;
	}
}

body {
	background: @main-blue;
}

wrapper {
	background: #ffffff;
	width: 100%;
	display: block;
	overflow: hidden;
}

section {
	background: #ffffff;
}

h1, h2, h3, h4 {
	font-weight: 700;
	color: @m-blue;
	letter-spacing: 2px;
}

h1 {
	font-size: 2.5em;
	letter-spacing: 3px;

	@media (max-width: 420px) {
		font-size: 2em;
		letter-spacing: 2px;
	}
}

h2 {
	font-size: 2em;

	@media (max-width: 420px) {
		font-size: 1.75em;
	}
}

h3 {
	font-size: 1.75em;

	@media (max-width: 420px) {
		font-size: 1.5em;
	}
}

h4 {
	font-size: 1.5em;

	@media (max-width: 420px) {
		font-size: 1.25 em;
	}
}

h5 {
	font-size: 1.25em;

	@media (max-width: 420px) {
		font-size: 1.15 em;
	}
}

li {
	margin-bottom: 10px;
}

.blue-line {
	&:after {
	display: block;
	content: "";
	width: 33%;
	height: 5px;
	margin-top: 5px;
	background-color: @m-blue;
	}
}

.blue-line-ctr {
	&:after {
	display: block;
	content: "";
	width: 33%;
	height: 5px;
	margin: 0 auto;
	margin-top: 10px;
	background-color: @m-blue;
	}
}

.center {
	text-align: center;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

// Buttons //

.btn-left {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	overflow: hidden;
	padding: 8px 0;
	color: @m-pink;
	font-size: 1.125em;
	font-weight: 500;
	margin-bottom: 30px;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 80%;
		bottom: 0;
		background: @m-pink;
		height: 3px;
		-webkit-transition-property: right;
		transition-property: right;
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		-webkit-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
	}

	&:hover {
		color: @m-pink;

		&:before {
			right: 0;
		} 
	}

	&:focus {
		&:before {
			right: 0;
		} 
	}

	&:active {
		&:before {
			right: 0;
		} 
	}
}

.btn-ctr {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	overflow: hidden;
	padding: 8px 0;
	color: @m-pink;
	font-size: 1.125em;
	font-weight: 500;
	margin-bottom: 30px;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 40%;
		right: 40%;
		bottom: 0;
		background: @m-pink;
		height: 3px;
		-webkit-transition-property: left, right;
		transition-property: left, right;
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		-webkit-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
	}

	&:hover {
		color: @m-pink;

		&:before {
			right: 0;
			left: 0;
		} 
	}

	&:focus {
		&:before {
			right: 0;
			left: 0;
		} 
	}

	&:active {
		&:before {
			right: 0;
			left: 0;
		} 
	}
}

// Line //

.colorline {
	display: block;
	background-image: url('../img/colorline.svg');
	height: 10px;
	width: 100%;
	background-size: contain;
	background-position: center top;
}

.bottomline {
	display: block;
	background-color: #dadada;
	height: 1px;
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
}

.bottomline-2 {
	display: block;
	background-color: #dadada;
	height: 1px;
	width: 100%;
	max-width: 1200px;
	margin: 15px 0px 15px;
}

header {
	display: block;
	// overflow: hidden;
	height: 100px;
	width: 100%;
	background-color: transparent;
	color: @txt-sub;
	position: fixed;
	top: 0;
	z-index: 88;
	transition:all ease 0.2s;

	@media (max-width: 767px) {
		height: 80px;
	}

	.nav-block {
		text-align: left;
	    margin-top: 39px;
		
		.mymenu{
			width: 40px;
			svg{
				z-index: 100;
				rect{
					transition:all ease 0.5s;
				}
			}

			&.open{
				#rec_middle{
					transition:all ease 0.8s;
					transform: translate(-100px);
					opacity: 0;
				}
				#rec_top{
					transition:all ease 0.3s;
					transform: translate(-44px,6px) rotate(-37deg);
				}
				#rec_bottom{
					transition:all ease 0.3s;
			   	 	transform: translate(48px,25px) rotate(37deg);
				}
			}
		}
		@media (max-width: 767px) {
			&.nav-block{
					margin-top: 23px;
			}
		}
	}

	.logo-block {
		text-align: center;
		margin-top: 15px;
		padding-top: 130px;
		transition: all ease 0.5s;
		
		img {
			width: 300px;
			transition: all ease 0.2s;
			@media (max-width: 767px) {
				width: 150px;
			}
		}

		@media (max-width: 767px) {
			padding: 0;
			margin-top: 10px;
		}
	}

	.user-block {
		text-align: right;
		margin-top: 30px;
		position: relative;

		.lang_select{
				width: 100px;
				float: right;
				margin-right: 10px;
			>div{
				display: inline-block;
				position: relative;
			}
			img {
				width: 35px;
				padding: 5px;
				margin-left: 5px;
			}
			a {
				color: @txt-sub;
			}
			.lang_container{

				.lang {

					&:after {
						content: "|";
						margin-left: 10px;
					}

					@media (max-width: 423px) {
						display: none;
					}
					&:hover{
						ul{
							opacity: 100;
							transition:all ease 0.2s;
						}
					}
				}

				ul {
					opacity: 0;
					margin: 0;
					padding: 0;
					background: #fff;
					border-radius: 3px;
					min-width: 100px;
					right: 0;
					position: absolute;
					text-align: left;
					border: 1px solid #e6e6e6;
					transition:opacity ease 0.2s;
					visibility: hidden;
					box-shadow: 0 2px 10px rgba(0,0,0,.2);

					>li {
						margin-bottom: 0;
						list-style: none;

						a{
							display: block;
							text-decoration: none;
							color: @main-blue;
							padding: 10px;
							transition:background ease 0.2s;
						}
						&:hover{
							transition:background ease 0.2s;
							background: #e6e6e6;
						}
					}
				}
				&:hover{
					ul{
						opacity: 100;
						visibility: inherit;
					}
				}
			}
			.user_container{
				>div{
					opacity: 0;
					margin: 0;
					padding: 0;
					color: @main-blue;
					background: #ffffff;
					border-radius: 3px;
					min-width: 100px;
					right: 0;
					position: absolute;
					text-align: center;
					border: 1px solid #e6e6e6;
					transition:opacity ease 0.2s;
					visibility: hidden;
					text-align: left;
					box-shadow: 0 2px 10px rgba(0,0,0,.2);
				}

				&:hover{
					>div{
						opacity: 100;
						visibility: inherit;
						padding: 10px 15px;
						width: 200px;
						text-align: center;
					}

					.user-link {
						display: inline-block;
						text-align: center;
						width: 48%;
						color: @m-blue;
						font-size: 1em;
						border: 1px solid rgba(255, 255, 255, 0);
						padding-top: 10px;
						padding-bottom: 5px;

						span {
							font-size: 2em;
							color: @m-pink;
						}

						&:hover {
							border: 1px solid #dadada;
						}
					}
				}
			}
			// @media (max-width: 767px) {
			// 	margin-top: 15px;
			// }
			
		}
		@media (max-width: 767px) {
			&.user-block{
			 	 	margin-top: 19px;
			}
		}
	}
	&.active{
		background: @main-blue;
		transition: all ease 0.2s;
		.logo-block{
			transition: all ease 0.5s;
			padding-top: 0;
			img{
				transition: all ease 0.2s;
				width: 200px;
			}
			@media (max-width: 767px) {
				img{
						width: 160px;
				}
			}
		}
	}
}

.main-banner {
	text-align: center;
	background-image: url('../img/main-bg.jpg');
	background-size: cover;
	background-position: center top;
	margin-bottom: 8%;
	
	.banner-txt {
		max-width: 1200px;
		margin: 0 auto;
		margin-top: 20%;
		box-sizing: border-box;

		h1 {
			color: @txt-sub;
			font-size: 5em;
			font-weight: 700;
			text-transform: uppercase;
			line-height: 1.25;

			@media (max-width: 420px) {
				font-size: 2em;
				padding: 0 15px;
				letter-spacing: 1px;
				line-height: 1;
				margin-top: 30%;
			}
		}
	}

	.banner-gadget {
		margin: 0 auto;
		max-height: 600px;
		background-image: url('../img/tri.svg');
		background-size: cover;
		background-position: center bottom;
		vertical-align: bottom;
		width: 100%;

		img {
			width: 90%;
			margin-top: 10%;

			@media (max-width: 767px) {
				transform: scale(1.30);
				overflow: hidden;
			}
		}

		@media (max-width: 767px) {
			overflow: hidden;
		}
	}

	@media (min-width: 1450px) {
		margin-bottom: 15%;
	}

	@media (max-width: 767px) {
		margin-bottom: 15px;
	}
}

.model-cont {

	p {
		margin: 20px 0 15%;
	}
}

.service-cont {
	background-color: @gray;
	padding-bottom: 30px;
	text-align: center;

	.service-clm {
		background-color: @gray;
		-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
		filter: grayscale(100%);
		transition: all .15s ease-in-out;

		h2 {
			margin-top: 50px;
		}

		svg {
			height: 130px;
			margin-bottom: 20px;
		}

		p {
			padding: 0 10%;
		}

		.serv-l {
			font-size: 1.125em;
			font-weight: 500;
		}

		@media (max-width: 767px) {
			webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
			filter: grayscale(0%);
		}

		&:hover {
			z-index: 2;
			position: relative;
			box-shadow: 0 20px 100px rgba(0,0,0,.1);
			cursor: default;
			padding: 15px 15px;
			margin-top: -30px;
			-webkit-filter: none;
			filter: none;

			@media (max-width: 767px) {
				position: inherit;
				box-shadow: none;
				margin-top: 0;
				padding: 0 15px;
			}

			.svg-anim {
				stroke-dasharray: 1000;
				stroke-dashoffset: 0;
				animation: dash 2s cubic-bezier(0.4, 0, 1, 1);
			}

			@keyframes dash {
				from {
					stroke-dashoffset: 1000;
				}
				to {
					stroke-dashoffset: 0;
				}
			}
		}
	}
}

.security-cont {
	text-align: center;
	background-image: url('../img/map-bg.svg');
	background-size: cover;
	background-position: center center;

	h1 {
		margin: 8% auto 4%;
		box-sizing: border-box;
		line-height: 1.25;

		@media (max-width: 767px) {
			font-size: 1.25em;
		}
	}

	br {
		height: 0;
		line-height: 0;

	}

	.sec-clm {
		display: inline-block;

		svg {
			width: 110px;
			margin: 10px;

			@media (max-width: 767px) {
				width: 80px;
			}
		}

		h5 {
			margin: auto 20%;
			padding-bottom: 30px;

			@media (max-width: 767px) {
				margin: auto 5%;
			}
		}

		@media (max-width: 767px) {
			padding: 0;
			height: 35vh;
		}

		@media (max-height: 420px) {
			padding: 0;
			height: 50vh;
		}

		&:nth-child(4) {
			margin-left: 16.666666665%;

			@media (max-width: 767px) {
				margin-left: 0;
			}
		}

		&:hover {
			.svg-anim {
				stroke-dasharray: 1000;
				stroke-dashoffset: 0;
				animation: dash 2s cubic-bezier(0.4, 0, 1, 1);
			}

			@keyframes dash {
				from {
					stroke-dashoffset: 1000;
				}
				to {
					stroke-dashoffset: 0;
				}
			}
		}
	}
}

.business-cont {
	text-align: center;

	h1 {
		margin: 8% 20% 4%;
		box-sizing: border-box;
		line-height: 1.25;
		text-align: center;

		@media (max-width: 767px) {
			margin: 8% 10% 4%;
		}
	}

	img {
		width: 100%;
		transition: all .15s ease-in-out;
		margin-bottom: 15px;

		&:hover {
			box-shadow: 0 20px 100px rgba(0,0,0,.1);
		}
	}

	.row {
		&:nth-child(3n+2) {
			margin-bottom: 30px;
		}
}

	.img-col-1 {
		padding: 0px;
		text-align: left;

		img {
			float: left;
		}
	}

	.img-col-2 {
		padding: 0px;
		text-align: right;

		img {
			float: right;
		}
	}

	.text-col-1 {
		text-align: left;

		h1 {
			text-align: left;
			margin: 10% 0 3% 5%;
			font-weight: 500;
			color: @m-yellow;
			letter-spacing: 2px;

			@media (max-width: 767px) {
				text-align: center;
				margin: 10% 0 3%;
			}
		}

		p {
			margin: auto 5% 10px;
		}

		@media (max-width: 767px) {
			text-align: center;
		}
	}

	.text-col-2 {
		text-align: right;

		h1 {
			text-align: right;
			margin: 15% 5% 3% 0%;
			font-weight: 500;
			color: @m-green;
			letter-spacing: 2px;

			@media (max-width: 767px) {
				text-align: center;
				margin: 10% 0 3%;
			}
		}

		p {
			margin: auto 5%;
		}

		@media (max-width: 767px) {
			text-align: center;
		}
	}

	.corp-button {
		margin: 50px auto;
	}
}
.whoweare{
	width: 100%;
	margin: 0;

	a {
		text-decoration: none;
	}


	.txt-carousel {
		width: 100%;
		display: block;
		overflow: hidden;
		min-height: 340px;
		background-color: @gray;
		box-sizing: border-box;
		padding: 10%;
		text-align: center;
		border-bottom: 10px solid @m-green;
		transition: all .15s ease-in-out;

		h3 {
			font-size: 2.25em;
			font-weight: 500;
			line-height: 1.25;

			@media (max-width: 767px) {
				font-size: 1.5em;
			}
		}
	}

	&:hover{
		.txt-carousel{
			background-color: @m-blue;

			h3 {
				color: @txt-sub;
			}
		}
	}
}


.faq-cont {
	padding: 3% 5% 2%;

	.col-sm-8 {

		h1 {
			letter-spacing: 2px;
		}
	}

	.col-sm-4 {
		img {
			max-width: 300px;
			width: 100%;

			@media (max-width: 767px) {
				display: none;
			}
		}
	}
}


footer {
	background-color: @main-blue;
	color: @txt-sub;
	text-align: center;
	padding: 3%;
	width: 100%;
	.modal_menu{
		display: none;
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: @main-blue;
		.nav-block {
			text-align: left;
			margin-top: 39px;
			@media (max-width: 767px) {
				
						margin-top: 23px;
			}
			.mymenu{
				width: 40px;
				rect{
					transition:all ease 0.5s;
				}
				&.open{
					svg{
					z-index: 100;
					rect{
						transition:all ease 0.5s;
						&#rec_middle{
							transition:all ease 0.8s;
							transform: translate(-100px);
							opacity: 0;
						}
						&#rec_top{
							transition:all ease 0.3s;
							transform: translate(-44px,6px) rotate(-37deg);
						}
						&#rec_bottom{
							transition:all ease 0.3s;
					   	 	transform: translate(48px,25px) rotate(37deg);
						}
					}
				}
				}
			}
		}
		.list-menu{
		    position: relative;
		    
		    left: 0;
		    margin: 0 auto;
		    
			.logo-modal{
				width: 200px;
				margin-bottom: 45px;
			}
			>ul{
				margin: 0;
				padding: 0;
				>li{
					list-style: none;
					>a{
						line-height: 35px;
						font-size: 20px;
						text-decoration: none;
						&:hover{
							color: rgba(255, 255, 255, 0.6);
						}
					}
				}
			}
		}
	}
	a {
		color: @txt-sub;
		margin: 0 15px;
		cursor: pointer;
		&:hover {
			color: @txt-sub;
		}
	}

	img {
		width: 150px;
		margin: 15px;
	}

	@media (max-width: 767px) {
		.copyright {
			padding: 0 22%;
		}
	}
}

// PAGE //

.page-container {
	margin-top: 100px;
	padding-bottom: 30px;

	@media (max-width: 767px) {
		margin-top: 70px;
	}

	h1 {
		display: inline-block;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	h2 {
		margin-top: 30px;
		color: @m-blue;
	}

	h4{
		margin-top: 20px;
		color: @m-pink;
	}

	table {
	width: 100%;
	max-width: 1200px;
	margin: 15px auto;
		tr {
			background-color: #f2f2f4;
			border-bottom: 1px solid #dadada;

			&:nth-last-child(1) {
				border-bottom: 0;
			}

			&:nth-child(even) {
				background-color: #fafafa;
			}
		}

		th {
			padding: 15px;
			width: auto;
			border-right: 1px solid #dadada;
			background-color: @m-blue;
			color: @txt-sub;
			text-align: center;
			border-bottom: 5px solid #0066aa;
			font-size: 1.125em;

			&:nth-last-child(1) {
				border-right: 0;
			}
		}

		td {
			padding: 15px;
			width: auto;
			border-right: 1px solid #dadada;

			&:nth-last-child(1) {
				border-right: 0;
			}
		}
	
	}

	.page-title {
		border-bottom: 0;
		margin-bottom: 0;
		padding-bottom: 0;
		text-align: center;
	}

	.img-col-1 {
		padding: 0px;
		text-align: left;

		img {
			float: left;
			width: 100%;
			transition: all .15s ease-in-out;
			margin-bottom: 15px;
			margin-top: 15px;

			&:hover {
				box-shadow: 0 20px 100px rgba(0,0,0,.1);
			}
		}

	}

	.img-col-2 {
		padding: 0px;
		text-align: right;

		img {
			float: right;
			width: 100%;
			transition: all .15s ease-in-out;
			margin-bottom: 15px;
			margin-top: 15px;
			
			&:hover {
				box-shadow: 0 20px 100px rgba(0,0,0,.1);
			}
		}
	}

}

.img-inst {
	img {
		border: 1px solid #dadada;
		box-sizing: border-box;
	}
}

.deals-chart {
	text-align: center;
	margin: 20px 0 30px;

	.deals-icon {
		text-align: center;

		img {
			width: 100%;
			max-width: 150px;
			margin: 0 auto;
		}
	}

	.deals-txt {
		background-image: url('../img/arrow-right.png');
		background-size: 150px;
		background-repeat: no-repeat;
		background-position: center 0;

		h5 {
			margin-top: 18%;

			@media (max-width: 767px) {
				margin-top: 20px;
				margin-bottom: 10px;
			}
		}

		@media (max-width: 767px) {
			background-image: none;
		}
	}

}

.main-item {

	.main-ol {
		padding-left: 0px;
	}

	.item {
		h4 {
			display: inline-block;
		}
	}
	
	.item:before {
		font-size: 1.5em;
		color: @m-pink;
		font-weight: 700;
		letter-spacing: 2px;
		margin-left: 0px !important;

		@media (max-width: 420px) {
			font-size: 1.25 em;
		}
	}

	ol {
		counter-reset: item;
	}

	li{
		display: block;
	}
	
	li:before {
		content: counters(item, ".") ". ";
		counter-increment: item;
		margin-left: -30px;
	}
}


.faq {
	.anchors {
		.col-sm-4 {
			text-align: center;
		}
	}
}

// Carousel Nav //

.owl-controls{
		position: static;
    bottom: 10px;
    text-align: center;
    width: 100%;
	.owl-nav{
	    position: absolute;
	    width: 100%;
	    top: 38%;
		span{

		    position: absolute;
		    font-size: 37px;
		    color: rgb(234, 51, 112);
		    top: 0;
		    &.icon_left{
		    	left: 0;
		    	padding-left: 14px;
		    	
		    }
		    &.icon_right{
		    	right: 0;
		    	padding-right: 14px;
		    }
		}
	}
	.owl-dots{
		    position: absolute;
		    bottom: 11px;
		    width: 100%;
		.owl-dot{
			background: rgba(151, 204, 0, 0.34);
			width: 15px;
			height: 15px;
			border-radius: 50%;
			display: inline-block;
			margin: 10px;
			&.active{
				background:@m-green;
			}
		}
	}

}

.modal_custom{
	span{
		    font-size: 1.7em;
    		color: #000306;
	}
	.modal-dialog{
		width: 60%;
	}
	.modal-content{
		img{
			width: 100%;
			border: none; 
		}
	}
}
