* {
	border:0;
	padding:0;
	outline:0;
}

*::selection {
	background:#5a5a5a;
	color:#fff;
}

*::-webkit-selection {
	background:#5a5a5a;
	color:#fff;
}

*::-moz-selection {
	background:#5a5a5a;
	color:#fff;
}

body {
	background:#000 url(../img/bg.jpg)no-repeat;
	background-position:center;
	background-size:cover;
	color:#fff;
	font-family:'Inter';
	font-size:16px;
}

.wrapper {
	max-width:1300px;
	width:100%;
	margin:0 auto;
	position:relative;
}

#top {
	background:#191919;
	padding:30px 0;
	height:102px;
}

#top .logo {
	width:400px;
	height:42px;
	background:url(../img/logo.png)no-repeat;
}

#top .contacts {
	gap:50px;
}

#top .contacts a {
	color:#fff;
	text-decoration:none;
	font-weight:500;
	gap:8px;
	line-height:0;
	transition:all .2s;
	-moz-transition:all .2s;
	-webkit-transition:all .2s;
}

#top .contacts a i {
	display:block;
	width:12px;
	height:12px;
	background-position:center !important;
	background-size:contain !important;

}

#top .contacts a:hover {
	opacity:0.7;
}

#top .contacts a.phone i {
	background:url(../img/phone.png)no-repeat;
}
#top .contacts a.email i {
	background:url(../img/email.png)no-repeat;
}

#bottom {
	width:100%;
	
}

#bottom .border {
	display:inline-block;
	border-radius:20px;
	padding:20px 40px;
	color:#fff;
}

#bottom .border.v1 {background:#1561d5;}
#bottom .border.v2 {background:#d17b39}
#bottom .border.v3 {background:#cb443d}
#bottom .border.v4 {background:#0a9ccd}
#bottom .border.v5 {background:#0a9454}
#bottom .border.v6 {background:#878787;}

#bottom .border.hover {
	transition:all .2s;
	-moz-transition:all .2s;
	-webkit-transition:all .2s;
}

#bottom .border.hover:hover{
	transform: scale(1.05);
	box-shadow: 0 0 15px rgba(0, 0, 0, .3);
}

#bottom .root {
	width:100%;
	min-height:calc(100vh - 102px);
	gap:135px;
}

#bottom .text {
	width:calc(100% - (135px + 460px));
}

#bottom .text .title {
	font-size:60.5px;
	font-weight:600;
	line-height:1.2;
}

#bottom .text .slogan {
	margin-top:30px;
	margin-bottom:55px;
}

#bottom .text .services .name {
	font-size:32px;
	font-weight:500;
	margin-bottom:25px;
}


/* FORM */
#bottom .form {
	width:460px;
	background:#fff;
	padding:55px;
	border-radius:50px;
}

#bottom .form .title {
	color:#000;
	font-weight:700;
	font-size:37px;
	text-align:center;
	margin-bottom:30px;
}

#bottom .form  .input {
	margin-bottom:15px;
}

#bottom .form label {
	position: relative;
	display:block;
}

#bottom .form  label span {
	position: absolute;
	top: 30px;
	left: 30px;
	font-family: 'Inter';
	font-size: 16.5px;
	cursor: text;
}

#bottom .form  input {
	padding: 30px;
	outline: none;
	font-family: 'Inter';
	font-size: 16.5px;
	background:#f8f8f8;
	border:1px solid #efefef;
	border-radius:20px;
	width:100%;
	transition:all .2s;
	-moz-transition:all .2s;
	-webkit-transition:all .2s;
}

#bottom .form  .input:hover input,
#bottom .form  .input input:focus {
	border-color:#ddd;
}

#bottom .form  .input input:focus + span {
	display:none;
}

#bottom .form  input:invalid + span:before,
#bottom .form  input[value=""] + span:before {
	content: attr(placeholder);
	position: relative;
	color: #000;
}

#bottom .form input:invalid + span:after {
	content: '*';
	position: relative;
	color: red;
	margin-left:5px;
}

#bottom .form input[type="submit"] {
	color:#fff;
	text-align:center;
	background:#292929;
	border-color:#292929;
	cursor:pointer;
}

#bottom .form input[type="submit"]:hover {
	background:#191919;
	border-color:#191919;
}

#bottom .form input[type="submit"][disabled],
#bottom .form input[type="submit"][disabled]:hover {
	cursor: default;
    background: #ccc;
    border-color: #ccc;
    color: #fff;
}

#bottom .form .success {
	color:#000;
	text-align:center;
	font-size:20px;
	display:flex;
	gap:10px;
	flex-direction:column;
	font-weight:600;
	padding:50px 0;
	margin:30px 0;
	border-top:1px solid #0a9454;
	border-bottom:1px solid #0a9454;
}

#bottom .form .success p {
	width:100%;
}

@media screen and (max-width:1280px) {
	#top {padding:20px 0;height:82px;}
	#bottom {min-height:calc(100vh - 82px);}
	.wrapper {width:95%;}
	#bottom .text .title {font-size:45px;}
	#bottom .form .title {line-height:1.2;}
	#bottom .form {padding:50px;}
	#bottom .form input {padding:25px;}
	#bottom .form label span {top: 25px;left: 25px;}
}

@media screen and (max-width:1024px) {
	#bottom .form {width: 350px;padding: 30px;}
	#bottom .form .title {font-size: 36px;}
	#bottom .text {width: calc(100% - (60px + 350px));}
	#bottom .root {gap:60px;}
	#bottom .text .services .name {font-size: 25px;}
	#bottom .border {padding: 15px 35px;}
}

@media screen and (max-width:900px) {
	#bottom .root {padding:60px 30px;}
	#bottom .root .text {width:100%;}
	#bottom .root .form {width:100%;}
	#bottom .text {width:100%;}
}

@media screen and (max-width:600px) {
	body {
		background:url(../img/bg-m.jpg)no-repeat;
		background-position:center; 
		background-size:cover;
	}

	#top {height:auto;}

	#top .logo {
		width: 159px;
		height: 31px;
		background:url(../img/logo-m.png)no-repeat;
	}

	#top .gap30 {
		gap:10px;
	}

	#top .contacts {
		gap: 8px;
		flex-direction: column;
		align-items: start;
	}

	#top .contacts a {
		gap: 6px;
		font-size: 4vw;
	}

	#bottom .border {
		text-align:center;
		font-size: 4.5vw;
		padding: 15px;
		width: 100%;
	}

	#bottom .text .slogan {
		margin-bottom: 40px;
	}

	.wrapper {width:calc(100% - 8vw);}
	#bottom .root {padding:40px 0;}
	#bottom .text .title {font-size: 7.5vw;text-align:center;}

	#bottom .text .services .name {
        font-size: 7.5vw;
    	text-align: center;
		line-height:1.2;
		font-weight:600;
    }

	#bottom .form {
		border-radius: 30px;
	}

	#bottom .form .title {
		font-size: 7.5vw;
	}

	#bottom .form input {
		padding:5vw;
	}

	#bottom .form .input span {
        top: 5vw;
		left:5vw;
    }
	
}

/*
@keyframes css-animation-shake {  
    0% { transform: translateX(0); }  
    20% { transform: translateX(-5px); }  
    40% { transform: translateX(5px); }  
    60% { transform: translateX(-5px); }  
    80% { transform: translateX(5px); }  
    100% { transform: translateX(0); }  
}*/

@keyframes css-animation-shake { 
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake {  
    animation: css-animation-shake 0.5s ease;  
}

#bottom .form .police-input {
	padding:5px 0 30px 0;
	color:#716d6d;
}

#bottom .form .police-input input {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: none;
	display:block;
    width:20px;
    height:20px;
    border-radius:8px;
    border: 1px solid #ddd;
    cursor:pointer;
    transition:all .2s;
    -moz-transition:all .2s;
    -webkit-transition:all .2s;
    vertical-align:top;
    position:relative;
	-webkit-apperance:none;
	padding:0;
}

#bottom .form .police-input input:before {
	content:'';
    display:block;
    position:absolute;
    width:12px;
    height:12px;
    border-radius:4px;
    left:3px;
    top:3px;
    background:#f8f8f8;
    transition:all .2s;
    -moz-transition:all .2s;
    -webkit-transition:all .2s;
}

#bottom .form .police-input input:hover:before {
	background-color:#f0f0f0;
}

#bottom .form .police-input input:checked {
	background:#fff;
	accent-color: #fff;
}

#bottom .form .police-input input:checked:before {
	background-color:#cb443d;
}

#bottom .form .police-input .txt {
	width:calc(100% - 40px);
	font-size: 11px;
    line-height: 15px;
}

#bottom .form .police-input .txt a {
	color:#292929;
	text-decoration:underline;
}

#bottom .form .police-input .txt a:hover {
	text-decoration: none;
}