@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700,300,800&subset=latin,greek,cyrillic');
body{
	font-family: 'Myriad Pro', sans-serif;
	overflow-x: hidden;
	background: #fff;
	font-size: 17px;
	color: #202020;
}
header .phones{
	text-align: right;

}
header .phones span a{
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	color: #666;
	font-weight: 300;
	text-decoration: none;
	padding: .375rem .75rem;
}
header .phones span a img{
	margin-right: 0.5rem;
}
header.navigation {
	background: #fff;
	z-index: 10;
}
.navbar .logo img{
	width: 180px;
}
.navbar .logo a:hover {
	border-bottom: none !important;
}
.navbar .logo:active {
	border-bottom: none !important;
}
.navbar .logo.active a {
	border-bottom: none !important;
}
.navbar-nav .nav-link {
	padding: 1rem;
}
.navFixed{
	position: sticky !important;
	top: -6px;
	left: 0;
	box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
}
	header .phones span a{
		font-family: 'Open Sans', sans-serif;
		font-size: 17px;
		color: #666;
		font-weight: 300;
		text-decoration: none;
		padding: .375rem .75rem;
	}
	header .phones span a img{
		margin-right: 0.5rem;
	}
	header nav ul li{
		margin: 0 0 0 8px;
	}
	header nav ul li:first-child{
		margin: 0
	}
	header nav ul li a:hover,header nav ul li.active a{
		border-bottom: 5px solid #00aeef;
	}



#about{
	background: url("../img/bg_about1.jpg") no-repeat center;
	background-size: cover;
	text-align: center;
	position: relative
}
	#about .inner{
		width: 100%;
		background-color: rgba(0,0,0,0.3);
		padding: 6rem;
		height: calc(100vh - 61px);
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
	}
	#about h1{
		text-transform: uppercase;
		color: #fff;
		font-weight: normal;
		font-size: 48px;
		letter-spacing: -2px;
		line-height: 57px;
	}
	#about .btn-order{
		font-size: 15px;
		padding: 0.5rem 1rem;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		svg {
			margin-left: 5px;
		}
	}




#list-numbers{
	text-align: center; padding: 0 0 85px 0;
}
	#list-numbers .row{
		border: 2px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
	}
		#list-numbers .row .numbers{
			padding: 15px 1% 20px 1%;
			display: inline-block; 
			float: left;
			border-right: 1px solid #ebebeb;
			border-bottom: 1px solid #ebebeb;
			box-sizing: border-box;
			.thumbnail {
				position: relative;
				img {
					transition: 1s;
				}
				.new {
					position: absolute;
					top: 25px;
					right: 0;
					font-size: 14px;
					font-weight: 700;
					line-height: 100%;
					color: white;
					background: red;
					padding: 5px 10px;
					border-radius: 8px;
					rotate: 10deg;
					animation: pulse 1.5s infinite;
				}
			}
			&:hover {
				.thumbnail img {
					scale: 1.1;
				}
			}
		}
		#list-numbers .row .col-3:nth-child(1),
		#list-numbers .row .col-3:nth-child(2),
		#list-numbers .row .col-3:nth-child(3),
		#list-numbers .row .col-3:nth-child(4){
			display: inline-block;
		}
			#list-numbers .title{
				display: table; width: 100%; line-height: 20px; height: 80px;
			}
				#list-numbers .title p{
					display: table-cell; vertical-align: middle; height: 80px;
				}
			#list-numbers .thumbnail{
				width: 100%; height: 150px;
				align-items: center;
				display: flex;
				justify-content: center;
			}
				#list-numbers .thumbnail img{
					max-width: 80%; max-height: 130px;
				}
			#list-numbers .price{
				line-height: 20px; display: table; width: 100%; height: 40px; margin: 0 0 15px 0;
			}
				#list-numbers .price p{
					vertical-align: middle; display: table-cell; height: 40px;
				}




#documents{
	padding: 20px; background: url("../img/documents.webp") 50% 0 repeat;
	background-size: cover;
}
	#documents .img-block {
		width: 100%;
		height: 300px;
		display: inline-block;
		position: relative;
		align-items: center;
		display: flex;
		justify-content: center;
	}
	
	#documents img {
		width: auto;
		height: 100%;
	}
	#documents img.nomer {
		width: 100%;
		height: auto;
	}
	#documents .punctuation {
		color: red;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 3rem;
	}

#requirements{
	padding: 20px; background: url("../img/requirements.webp") 50% 0 repeat;
	background-size: cover;
	padding-bottom: 5rem;
}
	#requirements{
		line-height: 120%;
		.img-block {
			height: 100px;
			svg {
				height: 100%;
			}
		}
		p {
			font-weight: 700;
		}
		span {
			line-height: 100%;
			font-size: 14px;
		}
	}
	



#order{
	text-align: center;
	color: #57515c; 
	font-size: 16px;
}
	#order h2{
		text-transform: uppercase;
	}
	#order .number-preview {
		justify-content: center;
		display: flex;
		flex-direction: column;
		border-right: 1px solid #c8c5cb;
	}
	#order .number-preview p {
		font-size: 1.5rem;
		color: black;
	}
	#order .number-preview span {
		margin-top: 10px;
		font-style: italic;
	}
	#order .number-preview span img {
		margin-top: -25px;
	}
	#order .number-preview input {
		width: 498px;
		background-size: 100% !important;
		border: none !important;
		text-align: center;
		font-size: 4.5em;
		height: 108px !important;
		padding: 0 0.7rem 0 3rem;
	}
	#order .number-preview input:focus { 
		border-radius: 15px;
	}
	#order input[type="text"] table{
		width: 286px!important; height: 77px!important; font-size: 35px; color: #000; text-transform: uppercase; box-sizing: border-box; border: none; padding: 0 0 0 50px;
	}
	.t1{background: url("../img/template/t1.png") no-repeat!important;}
	.t1e{background: url("../img/template/t1e.png") no-repeat!important;}
	.t1b{background: url("../img/template/t1b.jpg") no-repeat!important;}
	.t2{background: url("../img/template/t2.png") 0 0 no-repeat!important;}
	.t3{background: url("../img/template/t3.png") 0 0 no-repeat!important;}
		.t3::-webkit-input-placeholder {color:#000;}
		.t3::-moz-placeholder          {color:#000;}
		.t3:-moz-placeholder           {color:#000;}
		.t3:-ms-input-placeholder      {color:#000;}
	.t4{background: url("../img/template/t4.png") 0 0 no-repeat!important;}
	.t5{background: url("../img/template/t5.png") 0 0 no-repeat!important;}
	.t6{background: none}
		.numb_6{
			width: 311px; height: 246px; background: url("../img/template/t6.png") no-repeat;
			background-size: 100% !important;
			padding: 1rem 1rem 1rem 5rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.numb_6 input{
			width: 100% !important;
		}

	.t7{background: none}
		.numb_7{
			width: 311px; height: 246px; background: url("../img/template/t6.png") no-repeat;
			background-size: 100% !important;
			padding: 1rem 1rem 1rem 5rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.numb_7 input{
			width: 100% !important;
		}

	.t10{background: none; margin: 0!important}
		.numb_10{
			background: url("../img/template/t10.png");
			padding: 2rem;
		}
		.numb_10 input{
			font-size: 85px !important;
		}
		.numb_10 input:first-child{
			margin-bottom: 5px;
		}
	.t11{background: none; width: 50% !important;margin-top: 5px;}
		.numb_11{
			width: 400px; height: 144px; background: url("../img/template/t11.jpg") no-repeat;background-size: 100%;
		}
		.numb_11 .n_1,.n_2{
			height: 100%;
			padding: 0.5rem;
		}
		.numb_11 .n_2{
			padding-left: 1.6rem;
		}
		#order .numb_11 input[type="text"]{
			font-size: 50px !important; height: auto !important; width: 100%; padding: 0 !important;
		}

	.t12{background: none; width: 50% !important;}
		.numb_12{
			width: 400px; height: 144px; background: url("../img/template/t12.jpg") no-repeat;background-size: 100%;
		}
		.numb_12 .n_1,.n_2{
			height: 100%;
			padding: 0.6rem;
		}
		.numb_12 .n_1 input:first-child, .numb_12 .n_2 input:first-child{
			margin-bottom: 5px;
		}
		.numb_12 .n_1{
			padding-right: 0.8rem;
		}
		.numb_12 .n_2{
			padding-left: 0.8rem;
		}
		#order .numb_12 input[type="text"]{
			font-size: 48px !important; height: auto !important; width: 100%; padding: 0 !important;
		}


	.t13{background: none; text-align: right!important; width: 50% !important;}
		#order .numb_13 input[type="text"].no-border{
			height: 85px; font-size: 75px !important;
		}
		.numb_13{
			width: 317px;height: 210px; background: url("../img/template/t13.png") no-repeat;
			background-size: 100% !important;
			padding: 1.5rem 2rem;
			display: flex;
			flex-direction: column;
			align-items: end;
			justify-content: center;
		}
		.numb_13 input:first-child{
			width: 100% !important;
			text-align: right!important;
			margin-bottom: 3px;
			letter-spacing: 6px;
		}

	.t14{background: none; margin: 0!important;}
		.numb_14{
			width: 178px; height: 85px; background: url("../img/template/t14.png") no-repeat;
		}
		#order .numb_14 input[type="text"].no-border{
			font-size: 26px; height: auto; width: 104px; margin-top: 7px; text-align: center; position: relative; left: -20px;
		}

		.t_p{
			position: relative; left: -90px; margin: 0 0 70px 0;
		}


	.t15{background: none;}
		.numb_15 {
			background: url("../img/template/t15.jpg") no-repeat;
			padding: 2rem;
		}
		.numb_15 input {
			font-size: 90px !important;
		}
		.numb_15 input:first-child{
			margin-bottom: 5px;
		}


	.t16{background: url("../img/template/t16.png") 0 0 no-repeat!important; color: #fff!important; padding: 0!important; text-align: center;}
	.t17{background: black; border-radius: 15px; font-size: 90px !important; color: #fff!important; padding: 0!important; text-align: center;}

	.t18{background: none; margin: 0!important}
		.numb_18{
			width: 317px; height: 216px; background: black; border-radius: 15px;
		}
		#order .numb_18 input[type="text"].no-border{
			font-size: 90px !important; width: 100%; color: #fff;
		}
	.numb_19 {
		width: 317px;
		height: 200px;
		background: url("../img/template/t19.png") no-repeat;
		background-size: 100% !important;
		padding: 1.5rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
		#order .numb_19 input[type="text"].no-border{
			height: 100px !important; font-size: 95px !important; width: 100%; color: #fff; text-align: left;
		}

	.t20{background: url("../img/template/t20.png") 0 0 no-repeat!important; color: #fff!important; padding: 0!important; text-align: center;}
		.t20::-webkit-input-placeholder {color:#fff;}
		.t20::-moz-placeholder          {color:#fff;}
		.t20:-moz-placeholder           {color:#fff;}
		.t20:-ms-input-placeholder      {color:#fff;}

	.t21{background: url("../img/template/t21.png") 0 0 no-repeat!important; padding: 0!important; text-align: center;}
	.t22{background: url("../img/template/t7.png") }




		.n_1,.n_2{
			width: 50%; float: left;
		}


	#res_orders{
		text-align: center; width: 100%; padding: 15px 0 0 0;
	}


	#order input[type="text"].no-border{
		border: none; font-size: 60px; color: #000; text-align: center; height: 75px;line-height: normal ; padding: 0px ;
	}


	.on1{background: url("../img/template/t1.png") 3px 50% no-repeat!important;}
	.on2{background: url("../img/icons/on2.png") 3px 50% no-repeat!important;}
	.on3{background: #ffe00c url("../img/icons/on2.png") 3px 50% no-repeat!important;}
	.on4{background: url("../img/icons/on4.png") 3px 50% no-repeat!important;}
	.on5{background: url("../img/icons/on5.png") 3px 50% no-repeat!important;}
	.on6{background: url("../img/icons/n6.png") 3px 50% no-repeat!important; padding-left: 85px!important;}

	#order .create-nomer{
		display: block; margin: 0 auto; padding: 25px 0 10px 0; border: 1px solid #c8c5cb; margin-bottom: 40px;
	}
		#order .create-nomer .wrapper{
			width: 100%;
		}
		
	#order table input[type="text"],#order input[type="number"],#order select{
		width: 100%; padding: 0 3px 0 7px; border: 2px solid #756f7c; color: #000000;
		border-radius: 5px;
	}
	#order #doc{display: none;}
	#order .doc_l{
		margin-top: 1rem;
		border: 2px solid #00aeef;
		transition: all .5s;
	}
	#order .doc_l:hover{
		box-shadow: 0px 3px 8px 0px rgba(0, 175, 239, 0.712);
	}
	#order .wrapper table tr {
		height: 50px;
	}
	#order .wrapper table tr select {
		height: 35px;
		font-size: 0.75rem;
	}
	#order .wrapper table tr input {
		font-size: 1.2rem;
		height: 35px;
	}



#form_number{
	width: 100%; margin: 10px 0 10px 0;display: flex;
	justify-content: center;
}


#customers{
	height: 560px; background: url("../img/bg_customers.jpg") 50% 0 no-repeat; padding: 55px 0 0 0;
}
		#customers .slider{
			position: relative; width: 90%; overflow: hidden; font-size: 24px; color: #fff; text-align: center; display: block; margin: 0 auto;
			line-height: 27px; padding-bottom: 30px;
		}
		#customers .slides{
			height: 100%;
			overflow: hidden;
			-webkit-backface-visibility: hidden;
			-webkit-transform-style: preserve-3d;
			-webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
			   -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
			    -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
			     -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
			        transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
		}
		#customers .slide{
			height: 100%; float: left; clear: none; position: relative;
		}
			#customers .slider span{
				display: inline-block; width: 100%; font-size: 20px; margin: 10px 0 0 0;
			}
			#customers .slider img{
				margin-bottom: 10px;
			}
		#customers .slider-arrow{
			position: absolute; display: block; width: 20px; height: 20px; font-size: 0px; color: transparent;
		}
		#customers .slider-arrow--right {background: url("../img/icons/arr_r.png") 50% 50% no-repeat; position: relative; right: -20px; bottom: -20px;}
		#customers .slider-arrow--left {background: url("../img/icons/arr_l.png") 50% 50% no-repeat; position: relative; left: -20px;}
		#customers .slider-nav{
			position: absolute; top: 335px;
		}
		#customers .slider-nav__item{
			width: 21px; height: 21px; float: left; clear: none; display: block; margin: 0 5px; display: none;
		}
	#customers .social{
		width: 100%; text-align: center; font-size: 20px; font-style: italic; color: #fff;
	}
		#customers .social a{
			display: inline-block; width: 50px; height: 50px; background: url("../img/icons/vk_c.png") 50% 50% no-repeat; font-size: 0px; position: relative; top: -30px;
		}




#payment{
	padding-bottom: 4rem;
	.payment-step {
		.col-6,.col-12 {
			display: flex;
			flex-direction: column;
			align-items: center;
			span {
				text-align: center;
			}
		}
		p {
			float: left;
			padding: 10px 0px 10px 40px;
			background: #00aeef;
			color: #fff;
			position: relative;
			width: 95%;
			margin: 10px 0px;
			span {
				font-weight: 900;
			}
		}
		img {
			height: 80px;
			width: auto;
			margin-bottom: 10px;
		}
		
		p:before {
			content: '';
			border-left: 22px solid #fff;
			border-top: 22px solid transparent;
			border-bottom: 22px solid transparent;
			position: absolute;
			top: 0;
			left: 0;
		}
		p:after {
			content: '';
			border-left: 22px solid #00aeef;
			border-top: 22px solid transparent;
			border-bottom: 22px solid transparent;
			position: absolute;
			top: 0;
			left: 100%;
			z-index: 2;
		}
	}
}



#contacts{
	display: block; background-size: cover !important; background: url("../img/bg_footer.jpg") 50% 0 no-repeat; text-align: center; color: #fff;
}
	#contacts h2{
		color: #fff; padding: 80px 0 15px 0; letter-spacing: 2px;
	}
	#contacts p{
		letter-spacing: 2px; font-size: 18px; margin-bottom: 45px;
	}
	#contacts input[type="text"],#contacts input[type="email"]{
		height: 53px; width: 243px; border: 2px solid #fff; background: none; color: #fff; margin: 0 10px 30px 10px; padding: 0 10px 0 20px; font-size: 24px;
	}
	#contacts .btn{
		width: 215px; height: 55px; line-height: normal; font-size: 24px; border: 1px solid #31427b; border-radius: 0;
	}

	#contacts ::-webkit-input-placeholder {color:#fff;}
	#contacts ::-moz-placeholder          {color:#fff;}
	#contacts :-moz-placeholder           {color:#fff;}
	#contacts :-ms-input-placeholder      {color:#fff;}


.alert{
	margin: 20px 0 0 0;
}




h2{
	font-size: 40px; color: #272727; font-weight: normal; text-align: center; padding: 45px 0 45px 0; line-height: 48px;
}
h3{
	font-size: 32px; color: #fff; font-weight: normal; text-align: center; margin: 0 0 35px 0;
}




input,select{font-family: 'Myriad Pro', sans-serif;}

.btn {
	vertical-align: initial !important;
	transition: 0.5s all ease-out;
	border: none;
}
.btn-blue:hover{
	background: #007daa !important;
	transition: 0.5s all ease-out;
}
.btn-blue{
	color: #fff !important; font-size: 16px; background: #00aeef !important; border-radius: 3px;
}
 .btn{
	display: inline-block; text-align: center; text-decoration: none; transition: 0.5s all ease-out; border: none;
}
	.btn:hover{
		cursor: pointer; transition: 0.5s all ease-out;
	}

	.btn-blue{
		width: 170px; height: 40px; line-height: 45px; color: #fff; font-size: 16px; background: #00aeef; border-radius: 3px;
	}
		.btn-blue:hover{
			background: #009dd8;
		}


.modal_div{
	width: 400px; border-radius: 5px; border: 5px solid #00aeef; background: #fff; position: fixed; top: 45%; left: 50%; margin-top: -200px; margin-left: -205px; display: none; opacity: 0; z-index: 9999; padding: 20px 10px 20px 10px; text-align: center;
}
	.modal_div h3{
		color: #000; font-size: 20px; font-weight: bold;
	}
	.modal_close {
		width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; font-weight: 700;
	}
	.modal_div input[type="text"],.modal_div input[type="email"]{
		width: 70%; padding: 0 5% 0 5%; border: 1px solid #dedede; border-radius: 7px; height: 40px; margin: 0 0 20px 0;
	}
		.modal_div .btn{
			margin: 10px 0 10px 0;
		}

	#overlay{
		z-index: 9998; position: fixed; background: #000; background-size: 60px; opacity: 0.75; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; display: none;
	}

.file_selected{
	width: 100%;
}
	.file_selected p{
		padding: 5px 0 5px 0;
	}
.checkbox {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 15px;
}
.checkbox input {
	scale: 2;
	margin-right: 15px;	
}
@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}