/* --------------------------
---------  FONTS  -----------
----------------------------*/

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700&subset=cyrillic,latin,cyrillic-ext);

@font-face {
  font-family: 'MicrogrammaD-BoldExte';
  src: url('../font/MicrogrammaD-BoldExte.eot?#iefix') format('embedded-opentype'),  url('../font/MicrogrammaD-BoldExte.woff') format('woff'), url('../font/MicrogrammaD-BoldExte.ttf')  format('truetype'), url('../font/MicrogrammaD-BoldExte.svg#MicrogrammaD-BoldExte') format('svg');
  font-weight: normal;
  font-style: normal;
}

@grey_bg: #f7f7f7;
@c_green: #72AE36;
@c_yellow: #faa531;

@c_body_font: #263238;

/* ------------------------------------------------------------
------------------  MAIN STYLE  -------------------------------
-------------------------------------------------------------*/

#wrapper{
    overflow-x: hidden;
    position: relative;
    width: 100%;
    overflow-y: hidden;
}

body {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	font-size: 16px;
	color: @c_body_font;
	width: 100%;
}

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

.clear{
	clear: both;
}

.display_none{
	display: none;
}

.container-fluid{
	padding: 0px 0px;
}

.button{
	cursor: pointer;
}

.content{
	max-width: 1200px;
	margin: 0 auto;
}

.head1{
	margin-bottom: 65px;
	p:nth-child(1){
		font-size: 1.125em;
		line-height: 1.125em;
		font-weight: 300;
		color: black;
		text-transform: uppercase;
		margin: 0;
		margin-top: 35px;
	}
	p:nth-child(2){
		font-size: 2.5em;
		line-height: 1em;
		margin: 0;
		font-weight: 400;
		text-transform: uppercase;
		margin-top: 2px;
	}
	p:nth-child(3){
		font-size: 1.25em;
		line-height: 1.125em;
		margin: 0px;
		color: #929292;
		margin-top: 2px;
		margin-bottom: 0px;
	}
}

.transition {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#myModal{
	.btn_end{
		text-align: right;
		span{
			cursor: pointer;
		}
	}
	.modal-content{
		width: 400px;
		margin-left: -50px;
		.right{
			.head{
				font-family: 'Roboto Condensed', sans-serif;
				p{
					margin-bottom: 40px;
				}	
			}
			font-family: 'Roboto', sans-serif;
			font-size: 0.875em;
		    border-radius: 2px;
		    background: white;
		    padding: 40px 40px 30px 40px;
			input[type="text"], input[type="email"]{
				border: none;
				outline: none;
				width: 100%;
				padding: 10px;
				background: white;
				font-size: 0.875em;
				margin-bottom: 20px;
		    	border-radius: 2px;
		    	border: 1px solid #f2f2f2;
			}
			.button{
				background: @c_yellow;
				padding: 10px;
				border-radius: 3px;
				color: white;
				cursor: pointer;
			}
		}
	}
}


/* ------------------------------------------------------------
------------------ HEADER STYLE  ----------------------
-------------------------------------------------------------*/

#headerSection{
	width: 100%;
	.container_my{
		border-bottom: 1px solid #1A1B1C;
		height: 100px;
		background: black;
		padding: 35px 5% 0px 5%;
		.logo{
			a{
				cursor: pointer;
			}
			.logoName{
				font-family: 'MicrogrammaD-BoldExte' !important;
				float: left;
				font-size: 35px;
				margin: 0px;
				color: white;
				margin-top: -12.5px;
				padding: 0px;
				transform: scaleY(1.1);
			}
			.logoType{
				float: left;
				height: 26px;
				border-right: 1px solid white;
				padding: 0px 11px 0px 6px;
				color: @c_yellow;
				font-size: 17px;
				font-family: 'Roboto Condensed', sans-serif;
				font-weight: 300;
			}
			.logoSlogan{
				font-family: 'Roboto Condensed', sans-serif;
				font-weight: 300;
				float: left;
				text-transform: uppercase;
				margin: 2px 0 0 10px;
				background-color: rgba(0, 0, 0, 0);
				font-style: normal;
				font-size: 11px;
				line-height: 11px;
				color: #777777;
			}
		}
		.contacts{
			margin-top: -2px;
			img{
				margin-top: 2px;
				height: 26px;
			}
			img, p{
				float: right;
			}
			p{
				margin-left: 5px;
			}
			a{
				color: #2cabf8;
				text-decoration: none;
			}
			.phoneButton{
				width: 160px;
				background: black;
				color: @c_yellow;
				border-radius: 2px;
				font-size: 14px;
				font-weight: 400;
				padding: 10px 5px 9px 5px;
				margin-top: -6px;
				cursor: pointer;
				text-transform: uppercase;
				border: 1px dashed #e6e7e8;
				i{
					margin-left: 3px;
					color: @c_yellow;
				}
			}
			.phoneButtonactive:hover{
				background: @c_yellow;
				color: white;
				border: 1px solid @c_yellow;
				i{
					color: white;
				}
			}
		}
	}
}

/* ------------------------------------------------------------
------------------  UTP STYLE  ----------------------
-------------------------------------------------------------*/

#utpSection{
	background: black;
	width: 100%;
	color: white;
	.content{
		background: url("../img/girl.png") no-repeat right;
		background-position: right 30% bottom;
		background-size: auto 90%;
		height: 100%;
	}
	.container_my{
		height: 500px;
		padding: 0px 5% 0px 5%;
		p:nth-child(1){
			font-size: 1.5em;
			line-height: 1.125em;
			margin-bottom: 0px;
			margin-top: 100px;
			text-transform: uppercase;
		}
		p:nth-child(2){
			font-size: 2.75em;
			font-weight: 400;
			text-transform: uppercase;
			line-height: 1em;
			margin-left: -0.2%;
		}
		.coupon{
			font-size: 1.5em;
			font-weight: 400;
			text-transform: uppercase;
			line-height: 1em;
			margin-top: 50px;
			border: 1px dashed #e6e7e8;
			padding: 5px;
			display: inline-block;
			margin-left: -0.5%;
			b{
				font-weight: 400;
			}
			b:nth-child(1){
				color: @c_yellow;
			}
		}
		.buttons{
			margin-top: 32.5px;
			font-weight: 400;
			font-size: 0.875em;
			a:nth-child(1) span{
				// width: 150px;
				// height: 40px;
				background: @c_green;
				padding: 10px 10px;
				border-radius: 2px;
				float: left;
				color: white;
				cursor: pointer;
			}
			a:nth-child(1) span:hover{
				background: @c_yellow;
			}
			a:nth-child(2) span{
				float: left;
				color: @c_yellow;
				margin: 10px 0 0 10px;
				cursor: pointer;
			}
			a:nth-child(2) span:hover{
				color: @c_green;
			}
		}
	}
}



/* ------------------------------------------------------------
------------------ FACTS STYLE  ----------------------
-------------------------------------------------------------*/

#factsSection{
	margin-top: 1px;
	border-top: 10px solid @c_yellow;
	border-bottom: 1px solid #e6e7e8;
	.container_my{
		padding: 0px 5% 0px 5%;
		.row:nth-child(1), .row:nth-child(4){
			margin-bottom: 35px;
		}
		.fact{
			img{
				width: 128px;
			}
			p{
				margin-top: 17.5px;
				font-size: 1.125em;
			}
		}
		.two{
			margin-top: -80px;
			margin-bottom: 35px;
		}
	}
}

.application{
	padding-bottom: 35px;
	font-size: 18px;
	span{
		color: @c_yellow;
	}
	p:nth-child(1){
		padding: 0 10px;
	}
	.blank{
		background: url('../img/iframe_bg.png');
		border-radius: 2px;
		padding: 20px;
		border: 1px dashed #e6e7e8;
		margin-bottom: 10px;
		margin-top: 35px;
		img{
			position: absolute;
			right: 8px;
			top: 29px;
		}
	}
	.buttom{
		font-size: 18px;
		img{
			margin-left: 20px;
			margin-right: 5px;
			margin-top: -5px;
		}
	}
}


/* ------------------------------------------------------------
------------------ FEEDBACK STYLE  ----------------------
-------------------------------------------------------------*/

#feedbackSection{
	border-bottom: 1px solid #e6e7e8;
	border-top: 1px solid #e6e7e8;
	background: @grey_bg;
	.head1{
		margin-bottom: 35px;
	}
	.container_my{
		padding: 0px 5% 35px 5%;
		.panel{
			border-radius: 2px;
		}
		.feedback{
			.wistia_responsive_padding{
				width: 130px;
				height: 10px;

			}
			.wistia_responsive_wrapper{
			}
			img{
				width: 130px;
				float: left;
				margin-top: -10px;
				margin-right: 10px;
			}
			.text{
				width: calc( ~"100% - 140px");
				float: left;
				margin-top: -10px;
				margin-bottom: 0px;
				p:nth-child(1){
					font-weight: 400;
					line-height: 16px;
					margin: 0 0 5px 0;
				}
				p:nth-child(2){
					font-size: 0.8125em;
					color: #929292;
					text-transform: lowercase;
					line-height: 14px;
					margin: 0 0 5px 0;
				}
				p:nth-child(3){
					margin-top: 8px;
					font-size: 0.9375em;
					margin-bottom: 0px;
				}
			}
		}
	}
}

/* ------------------------------------------------------------
------------------  FOOTER STYLE  ----------------------
-------------------------------------------------------------*/

#footerSection{
	width: 100%;
	background: #1A1B1C;
	padding:0px;
	margin: 0px;
	.container_my{
		padding: 0px 5% 0px 5%;
		.row{
			.col-md-4:nth-child(1){ padding: 35px 35px 10px 0px; }
			.col-md-4:nth-child(2){ padding: 35px 35px 10px 35px; }
			.col-md-4:nth-child(3){ padding: 35px 0px 10px 35px; }

			.col-md-4:nth-child(1){
				font-size: 10px;
				color: #777777;
				.logo{
					margin-top: -12px;
					.logoName{
						font-family: 'MicrogrammaD-BoldExte' !important;
						float: left;
						font-size: 35px;
						margin: 0px;
						padding: 0px;
						transform: scaleY(1.1);
						color: white
					}
					.logoType{	
						float: left;
						height: 26px;
						border-right: 1px solid #777777;
						padding: 0px 10px 0px 7px;
						color: @c_yellow;
						font-size: 17px;
						font-family: 'Roboto Condensed', sans-serif;
						font-weight: 300;
						margin-top: 11.5px;
					}
					.logoSlogan{	
						font-family: 'Roboto Condensed', sans-serif;
						font-weight: 300;
						float: left;
						text-transform: uppercase;
						margin: 13.5px 0 0 10px;
						background-color: rgba(0, 0, 0, 0);
						font-style: normal;
						font-size: 11px;
						line-height: 11px;
					}
				}
				iframe{
					width: 100%;
					margin: 15px 0px 10px 0px;
				}
				.adress{
					font-size: 10px;
					margin-top: 10px;
					text-transform: uppercase;
					span{
						color: white;
					}
				}
				.copy{
					a{
						color: #777777;
					}
					img{
						margin: -2px 1px 0px 1px;
						width: 13px;
					}
				}
			}
			.col-md-4:nth-child(2){
				color: white;
				border-right: 1px solid #777777;
				border-left: 1px solid #777777;
				min-height: 275px;
				p:nth-child(1){
					color: #777777;
					font-size: 10px;
					text-transform: uppercase;
					font-weight: 400;
					margin: 0;
					padding: 0;
					span{
						color: white;
					}
				}
			}
			.col-md-4:nth-child(3){
				color: white;
				p:nth-child(1){
					color: @c_yellow;
					font-size: 1.375em;
					line-height: 1em;
					font-weight: 400;
					margin: 0px;
					padding: 0px;
				}
				p:nth-child(2){
					font-size: 10px;
					text-transform: uppercase;
					color: #777777;
				}
				p:nth-child(3){
					font-size: 1.125em;
					margin-top: 8px;
					margin-bottom: 0px;
				}
				input[type='text']{
					outline: none;
					border: 1px dashed #e6e7e8;
					background: #1A1B1C;
					border-radius: 2px;
					padding: 5px;
					margin-top: 10px;
					width: 250px;
				}
				p.button{
					width: 250px;
					background: @c_yellow;
					text-align: center;
					padding: 8px;
					border-radius: 3px;
					margin-top: 13px;
				}
				.copy{
					font-size: 10px;
					color: #777;
					font-weight: 300;
					margin-top: 20px;
					display: none;
					a{
						color: #777777;
					}
					img{
						margin: -2px 1px 0px 1px;
						width: 13px;
					}
				}
			}
		}
	}
}

@media(max-width:767px){

	body{
		font-size: 10px;
		#footerSection{
			.container_my{
				padding: 0px;
				.row{
					.col-md-4:nth-child(1){ 
						padding: 20px 35px 10px 35px; 
						width: 100%;
						border-bottom: 1px solid #777;
						.copy{
							display: none;
						}
					}
					.col-md-4:nth-child(3){ 
						width: 100%;
						padding: 25px 0px 10px 35px; 
						.copy{
							display: block;
						}
					}
				}
			}
		}
	}

	#headerSection{
		.container_my{
			height: 80px;
			padding: 0px 5% 0px 5%;
			.logo{
				margin-top: -5px;
				.logoName{
					font-size: 28px;
					margin-top: -10.5px;
				}
				.logoType{
					height: 21px;
					font-size: 14px;
				}
				.logoSlogan{
					margin-top: 0px;
				}
			}
		}
	}

}

@media(max-width:992px){

	body{
		font-size: 12px;
	}
		
	#utpSection{
		.container_my{
			height: 500px;
			padding: 0px 5% 0px 5%;
			p:nth-child(1){
				font-size: 1.125em;
				line-height: 1.5em;
				margin-bottom: 0px;
				margin-top: 50px;
			}
			p:nth-child(2){
				font-size: 2.75em;
				line-height: 1em;
				margin-left: -0.2%;
			}
			.coupon{
				font-size: 1.5em;
				line-height: 1em;
				margin-top: 35px;
				margin-left: -2%;
			}
		}
	}

	#factsSection{
		.container_my{
			.row:nth-child(1), .row:nth-child(4){
				margin-bottom: 35px;
			}
			.fact{
				img{
					width: 64px;
				}
				p{
					margin-top: 10px;
				}
			}
		}
	}

	#footerSection{
		width: 100%;
		background: #1A1B1C;
		padding:0px;
		margin: 0px;
		.container_my{
			.row{
				.col-md-4:nth-child(1){
					font-size: 10px;
					color: #777777;
					.logo{
						margin-top: 5px;
						.logoName{
							font-size: 28px;
							margin-top: -10.5px;
						}
						.logoType{
							height: 21px;
							font-size: 14px;
							margin-top: -2px;
						}
						.logoSlogan{
							margin-top: -2px;
							font-size: 10px;
						}
					}
				}
			}
		}
	}

}

@media(max-width:1120px){
	#footerSection{
		width: 100%;
		background: #1A1B1C;
		padding:0px;
		margin: 0px;
		.container_my{
			.row{
				.col-md-4:nth-child(1){
					width: 50%;
					border-right: 1px solid #777;
				}
				.col-md-4:nth-child(2){
					display: none;
				}
				.col-md-4:nth-child(3){
					width: 50%;
				}
			}
		}
	}
}

@media(max-width:1200px){

	#headerSection{
		.container_my{
			padding: 35px 5% 0px 5%;
		}
	}

	#utpSection{
		.container_my{
			padding: 0px 5% 0px 5%;
		}
	}

	#factsSection{
		.container_my{
			padding: 0px 5% 0px 5%;
		}
	}

	#feedbackSection{
		.container_my{
			padding: 0px 5% 35px 5%;
		}
	}

	#footerSection{
		.container_my{
			padding: 0px 5% 0px 5%;
		}
	}

}