/* ВНИМАНИЕ! */
/* Перед редактированием сделай копию. */
/* После редактироания измени версию CSS в index.html и error_404.html. */

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');

* {
	margin:0;
	padding:0;
}

html, body {
	height:100%;
	font-family:Roboto;
}

img {
	opacity:1;
	transition:opacity 0.3s;
}

img[data-src] {
	opacity:0;
}

/* ----- Обертка ----- */
.wrapper {
	display:flex;
	flex-direction:column;
	min-height:100%;
}

/* ----- Контент страницы ----- */
.content {
	flex:1 0 auto;
}

/* ----- Шапка ----- */
header {
	position:absolute;
	width:100%;
	padding-top:1rem;
}

/* ----- Блок с контактами ----- */
.header-phone {
	background:url(../img/call.png) no-repeat left;
}

.header-phone a {
	display:inline-block;
	margin-left:2rem;
	color:#fff;
}

.header-adres {
	background:url(../img/map_marker.png) no-repeat left;
}

.header-adres p {
	color:#fff;
	margin-left:2rem;
	margin-bottom:0;
}

.header-mail {
	background:url(../img/email.png) no-repeat left;
}

.header-mail a {
	display:inline-block;
	color:#fff;
	margin-left:2rem;
}

.header-phone a:after, .header-mail a:after {
	background-color:#fff;
	content:"";
	display:block;
	height:1px;
	width:0%;
	-webkit-transition:width .3s ease-in-out;
	-moz--transition:width .3s ease-in-out;
	transition:width .3s ease-in-out;
}

.header-phone a:hover:after, .header-mail a:hover:after {
	width:100%;
}

.header-phone a:hover, .header-mail a:hover {
	text-decoration:none;
}

/* ----- Меню ----- */
.fixed-top {
	background-color:rgba(38, 38, 38, 0.85);
	-moz-transition:all 0.25s ease-in-out;
	-o-transition:all 0.25s ease-in-out;
	-webkit-transition:all 0.25s ease-in-out;
}

.navbar-logo, .navbar-phone {
	display:none;
} 

@media (min-width:992px) {
	.navbar-expand-lg .navbar-nav .nav-link {
		padding-right:2.5rem;
		padding-left:2.5rem;
	}
}

.navbar-nav .nav-link {
	color:#fff;
	font-weight:500;
	text-transform:uppercase;
	-moz-transition:all 0.25s ease-in-out;
	-o-transition:all 0.25s ease-in-out;
	-webkit-transition:all 0.25s ease-in-out;
}

.navbar-nav a.active:after, .navbar-nav .nav-link:after {
	background-color:#fff;
	display:block;
	content:"";
	height:1px;
	width:0%;
	-moz-transition:all 0.25s ease-in-out;
	-o-transition:all 0.25s ease-in-out;
	-webkit-transition:all 0.25s ease-in-out;
}

.navbar-nav .nav-link:hover:after, .navbar-nav .nav-link:focus:after, .navbar-nav a.active:after {
	width:100%;
}

.navbar-toggler-icon {
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* ----- Интро ----- */
.intro {
	padding-top:17rem;
	background:url(../img/the_shard.jpg) no-repeat center center;
	background-attachment:fixed;
	background-blend-mode:multiply;
	background-color:rgba(0,0,0,.25);
	background-size:cover;
	-o-background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	height:100vh;
}

.intro .body-section h1 {
	color:#fff;
	text-shadow:1px 1px 10px #000;
}

.intro .body-section h1 span {
	display:block;
	font-size:3rem;
	font-weight:700;
	text-shadow:0px 0px 20px #000;
}

.intro .body-section p {
	color:#fff;
	font-size:1.5rem;
	text-shadow:1px 1px 10px #000;
	margin-top:1rem;
	margin-bottom:1.5rem;
}

.intro .body-section .btn-modal {
	color:#fff;
	background:linear-gradient(to top, rgba(57, 213, 90, 0.9), rgba(55, 109, 107, 0.9));
	border:1px solid rgba(0,0,0,.24);
	box-shadow:0 0 1rem #000;
	text-shadow:0px 0px 3px #000;
	position:relative;
	overflow:hidden;
}

.intro .body-section .btn-modal:before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:1.5em;
	height:100%;
	background-color:rgba(255, 255, 255, 0.6);
	transform:translateX(-4em) skewX(-45deg);
}

.intro .body-section .btn-modal:hover:before {
	animation:move-light 1s;
}

@keyframes move-light {from
	{transform: translateX(-4em) skewX(-45deg)}
	to 
	{transform: translateX(14em) skewX(-45deg)}
}

/* ----- Услуги ----- */
.services {
	padding-top:3.5rem;
	padding-bottom:3.5rem;
	background:url(../img/abstraction.png) no-repeat center center;
	background-size:cover;
	-o-background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
}

.services .body-section {
	margin-top:2.5rem;
	margin-bottom:1rem;
}

.services .card {
	border-bottom-left-radius:1rem;
	border-bottom-right-radius:1rem;
}

.services .card-body .service-info {
	text-align:left !important;
	-moz-transition:all .75s ease-in-out;
	-o-transition:all .75s ease-in-out;
	-webkit-transition:all .75s ease-in-out;
}

.services .card-body .service-info:before {
	display:block;
	content:'';
	background:#000;
	height:1px;
	width:100%;
	margin-bottom:1em;
}

.services .card-body .service-info ul li {
	list-style:none;
	list-style-image:url(../img/ok.png);
	list-style-position:inside;
}

.services .card-body .btn-service {
	background-color:#4caf50;
	border-color:#4caf50;
	color:#fff;
	text-shadow:0px 0px 3px #000;
}

.services .card-body .btn-service:hover {
	background-color:#409444;
	border-color:#409444;
}

/* ----- Полезная информация ----- */
.useful-information {
	padding-top:10.5rem;
	padding-bottom:3.5rem;
	background:url(../img/the_shard.jpg) no-repeat center center;
	background-attachment:fixed;
	background-blend-mode:multiply;
	background-color:rgba(0,0,0,.25);
	background-size:cover;
	-o-background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
}

.useful-information .body-section {
	background-color:rgba(255,255,255,.75);
	margin-top:2.5rem;
	margin-bottom:2.5rem;
	padding:1.25rem 3.25rem;
}

.useful-information-text {
	margin-top:1.5rem;
	margin-bottom:1.5rem;
	border-bottom:1px solid #000;
}

.useful-information-text:last-of-type {
	border-bottom:0
}

/* ----- Партнерам ----- */
.for-partners {
	padding-top:3.5rem;
	padding-bottom:3.5rem;
}

.for-partners .head-section h4 {
	margin-top:1.25rem;
}

.for-partners .body-section {
	margin-top:1.5rem;
}

.for-partners .step-1 img, 
.for-partners .step-2 img, 
.for-partners .step-3 img, 
.for-partners .step-4 img {
	width:150px;
}

.for-partners .step-1 p, 
.for-partners .step-2 p, 
.for-partners .step-3 p, 
.for-partners .step-4 p {
	color:#000;
	font-weight:500;
	margin-top:1rem;
}

/* ----- О компании ----- */
.about-company {
	padding-top:3.5rem;
	padding-bottom:3.5rem;
	background:url(../img/notebook_work_girl_computer.jpg) no-repeat center center;
	background-attachment:fixed;
	background-blend-mode:multiply;
	background-color:rgba(0,0,0,.25);
	background-size:cover;
	-o-background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	box-shadow:inset 0 0 10px #000;
	-moz-box-shadow:inset 0 0 10px #000;
	-webkit-box-shadow:inset 0 0 10px #000;
}

.about-company .head-section {
	color:#fff;
	text-shadow:0 0 5px #000;
}

.about-company .head-section p:after {
	display:block;
	content:'';
	background:#fff;
	height:1px;
	width:50px;
	margin:.5rem auto .5rem auto;
}

.about-company .body-section {
	margin-top:2.5rem;
	margin-bottom:2.5rem;
}

.about-company .body-section .card {
	background-color:rgba(255, 255, 255, .85);
}

.about-company .body-section .card .card-body p {
	font-weight:500;
	margin-bottom:0;
}

.about-company .body-section .card .card-body p:after {
	display:block;
	content:'';
	background:#000;
	height:1px;
	width:50px;
	margin:.5rem auto .5rem auto;
}

/* ----- Команда ----- */
.team {
	padding-top:3.5rem;
	padding-bottom:1.5rem;
	background:url(../img/clouds.png) no-repeat center;
	background-size:cover;
	-o-background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
}

.team .head-section p:after {
	display:block;
	content:'';
	background:#000;
	height:1px;
	width:50px;
	margin:.5rem auto 0 auto;
}

.team .body-section {
	margin-top:2.5rem;
	margin-bottom:2.5rem;
}

#carouselTeamMob {
	display:none;
}

#carouselTeam .card-img-overlay, #carouselTeamMob .card-img-overlay {
	background:rgba(255, 255, 255, .85);
	top:auto;
	padding:.5rem;
}

#carouselTeam .card-img-overlay h5:after, #carouselTeamMob .card-img-overlay h5:after {
	display:block;
	content:'';
	background:#000;
	height:1px;
	width:50px;
	margin:.5rem auto 0 auto;
}

#carouselTeam .carousel-information, #carouselTeamMob .carousel-information {
	margin-bottom:3.5rem;
}

#carouselTeam .carousel-control-prev-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
	background-size:.7rem;
	border-radius:50%;
	background-color:#000;
	height:35px;
	width:35px;
}

#carouselTeam .carousel-control-next-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
	background-size:.7rem;
	border-radius:50%;
	background-color:#000;
	height:35px;
	width:35px;
}

#carouselTeam .carousel-indicators li, #carouselTeamMob .carousel-indicators li {
	border-radius:50%;
	background-color:#000;
	height:10px;
	width:10px;
}

/* ----- Контакты ----- */
.contacts .col-xl-8, .contacts .col-xl-4 {
	padding-left:0;
	padding-right:0;
}

#map {
	height:438px;
	width:100%;
}

.contacts-info {
	padding:1.25rem;
	height:100%;
	background:url(../img/communication_line.png);
	background-size:contain;
	-o-background-size:contain;
	-moz-background-size:contain;
	-webkit-background-size:contain;
}

.contacts-adres h5 {
	background:url(../img/color_map_marker.png) no-repeat left;
	padding-left:1.5rem;
}

.contacts-phone h5 {
	background:url(../img/color_phone.png) no-repeat left;
	padding-left:1.5rem;
}

.contacts-phone a {
	color:#000;
}

.contacts-phone .fa-telegram {
	color:#0088cc;
}

.contacts-phone .fa-viber {
	color:#8f5db7;
}

.contacts-phone .fa-whatsapp {
	color:#25d366;
}

.contacts-social {
	margin-top:1rem;
}

.contacts-social a {
	padding:10px;
	font-size:15px;
	width:35px;
	border-radius:50%;
	text-align:center;
	margin-left:5px;
	margin-right:5px;
	-moz-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
}

.contacts-social .fa-facebook-f {
	background:#0078FF;
	color:#fff;
}

.contacts-social .fa-facebook-f:hover {
	box-shadow:0 0 15px #0078FF;
	text-decoration: none;
}

.contacts-social .fa-linkedin-in {
	background:#006599;
	color:#fff;
}

.contacts-social .fa-linkedin-in:hover {
	box-shadow:0 0 15px #006599;
	text-decoration:none;
}

.contacts-social .fa-instagram {
	background:#DD2A7B;
	color:#fff;
}

.contacts-social .fa-instagram:hover {
	box-shadow:0 0 15px #DD2A7B;
	text-decoration:none;
}

.contacts-feedback .btn-modal {
	background-color:#4caf50;
	border-color:#4caf50;
	color:#fff;
	margin-top:.75rem;
	text-shadow:0px 0px 3px #000;
}

.contacts-feedback .btn-modal:hover {
	background-color:#409444;
	border-color:#409444;
}

/* ----- Подвал ----- */
footer {
	flex:0 0 auto;
	padding-top:1rem;
	padding-bottom:1rem;
	background-color:rgba(0, 0, 0, 0.85);
}

.footer-copyright {
	color:#fff;
}

/* ----- Модальные окан обратной связи ----- */
.modal .modal-header {
	border-bottom:0;
}
.modal .modal-header .modal-title {
	margin-left:auto;
}

.modal .modal-header .close {
	padding:0 .25rem;
	transition:all 0.25s ease-in-out;
	-moz-transition:all 0.25s ease-in-out;
	-o-transition:all 0.25s ease-in-out;
	-webkit-transition:all 0.25s ease-in-out;
}

.modal .modal-header .close:hover{
	transition:all 0.25s ease-in-out;
	-moz-transition:all 0.25s ease-in-out;
	-o-transition:all 0.25s ease-in-out;
	-webkit-transition:all 0.25s ease-in-out; 
}

.modal .modal-body form .form-control {
	border-top:0;
	border-left:0;
	border-right:0;
	padding:1.375rem 0.75rem;
}

.modal .modal-body form .form-control:focus {
	border-bottom:1px solid #000;
	box-shadow:0 0 0 0;
}

.modal .modal-body form .custom-checkbox .custom-control-label::before{
	border-radius:1.25rem;
}

.modal .modal-body form .custom-control-input:checked~.custom-control-label::before {
	border-color:#4caf50;
	background-color:#4caf50;
}

.modal .modal-body form .btn-modal{
	background-color:#4caf50;
	border-color:#4caf50;
	color:#fff;
	text-shadow:0px 0px 3px #000;
}

.modal .modal-body form .btn-modal:hover {
	background-color:#409444;
	border-color:#409444;
}

/* ----- Кнопка "Вверх" ----- */
.scrollup {
	position:fixed;
	color:#fff;
	background-color:#4caf50;
	right:20px;
	bottom:10px;
	padding:1px 10px;
	font-size:30px;
	border-radius:35px;
	text-shadow:0 1px 2px #000;
	cursor:pointer;
	display:none;
	text-align:center;
	z-index:1;
	transition:all 0.25s ease-in-out;
	-moz-transition:all 0.25s ease-in-out;
	-o-transition:all 0.25s ease-in-out;
	-webkit-transition:all 0.25s ease-in-out;
}

.scrollup:hover {
	background-color:#409444;
	transition:all 0.25s ease-in-out;
	-moz-transition:all 0.25s ease-in-out;
	-o-transition:all 0.25s ease-in-out;
	-webkit-transition:all 0.25s ease-in-out;
}

/* ----- Error 404 ----- */
.error-404 {
	padding-top:13rem;
	height:96vh;
	background:url(../img/data_center.jpg)center center no-repeat;
	background-attachment:fixed;
	background-blend-mode:multiply;
	background-color:rgba(0,0,0,.45);
	background-size:cover;
	-o-background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
}

.error-404 .body-section {
	margin-top:2.5rem;
	margin-bottom:2.5rem;
}

.error-404 .body-section img {
	width:400px;
}

.error-404 .body-section h1, .error-404 .body-section h5 {
	text-shadow:1px 1px 10px #000;
}

.error-404 .btn-error{
	background-color:#4caf50;
	border-color:#4caf50;
	color:#fff;
	text-shadow:0px 0px 3px #000;
}

.error-404 .btn-error:hover {
	background-color:#409444;
	border-color:#409444;
}

.error-404 .btn-error .fa-undo {
	transition: transform 350ms ease;
}

.error-404 .btn-error:hover .fa-undo {
	transform:rotate(-180deg);
	transition:transform 350ms ease;
}

/* ----- Медиазапросы ширины ----- */
@media (max-width:1024px) {

	/*----- Меню ----- */
	.navbar-expand-lg .navbar-nav .nav-link {
		padding-right:1.7rem;
		padding-left:1.7rem;
	}

	/* ----- Итнро ----- */
	.intro {
		height:50vh;
		background-attachment:initial;
	}

	/* ----- Услуги ----- */
	.services .card-body h5 {
		font-size:1.05rem;
	}

	/* ----- О нас ----- */
	.about-company {
		background-attachment:initial;
	}

	.about-company .body-section .card .card-body p {
		font-size:.9rem;
	}
}

@media (max-width:768px) {

	/* ----- Шапка ----- */
	header {
		padding-top:0;
	}

	.header-logo, .header-phone, .header-adres, .header-mail {
		display:none;
	}

	/* ----- Меню ----- */
	.navbar {
		background-color:rgba(38, 38, 38, 0.85);
		box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
	}
	
	.navbar-logo, .navbar-phone {
		display:block;
	}

	.navbar-logo img {
		width:80px;
	}

	.navbar-phone {
		background:url(../img/call.png) no-repeat left;
	}

	.navbar-phone a {
		display:block;
		margin-left:2rem;
		color:#fff;
	}

	.navbar-collapse {
		border-top:1px solid #fff;
		margin-top:.5rem;
		padding-top:.5rem;
	}

	.navbar-expand-lg .navbar-nav .nav-link {
		display:inline-block;
		padding-right:0;
		padding-left:0;
	}

	/* ----- Итнро ----- */
	.intro {
		height:70vh;
	}

	/* ----- Услуги ----- */
	.services .card-body h5 {
		font-size:1.25rem;
	}

	/* ----- О нас ----- */
	.about-company .body-section .card .card-body p {
		font-size:1rem;
	}

	/* ----- Наша команда ----- */
	.carousel-control-prev, .carousel-control-next {
		display:none;
	}

	/* ----- Контакты ----- */
	#map {
		height:400px;
	}

	/* ----- Полезная инфомарция ----- */
	.useful-information {
		padding-top:4.5rem;
		padding-bottom:1.5rem;
	}
}

@media (max-width:414px) {

	/* ----- Меню ----- */
	.navbar-phone {
		background:transparent;
	}

	/* ----- Итнро ----- */
	.intro {
		height:100vh;
	}

	.intro .body-section h1 {
		font-size:1.5rem;
	}

	.intro .body-section h1 span {
		font-size:2rem;
	}

	/* ----- Партнерам ----- */
	.for_partners .step-1 img, .for_partners .step-2 img, .for_partners .step-3 img, .for_partners .step-4 img {
		width:150px;
	}

	/* ----- О нас ----- */
	.about-company .body-section .card .card-body p {
		font-size:1.25rem;
	}

	/* ----- Команда ----- */
	#carouselTeam {
		display:none;
	}

	#carouselTeamMob {
		display:block;
	}
	#carouselTeamMob .card-img-overlay h5 {
		font-size:1.05rem;
	}

	/* ----- Error 404 ----- */
	.error-404 .body-section img {
		width:350px;
	}
}

@media (max-width:411px) {

	/* ------ Полезная информация ------ */
	.useful-information {
		padding-top:7.5rem;
		padding-bottom:2.5rem;
	}
}

@media (max-width:375px) {

	/* ----- Меню ----- */
	.navbar-logo a {
		font-size:.9rem;
	}

	.navbar-phone a {
		margin-left:0;
	}

	/* ----- Итнро ----- */
	.intro .body-section h1 span {
		font-size:1.35rem;
	}

	.intro .body-section h1 span {
		font-size:1.85rem;
	}

	.intro .body-section p {
		font-size:1.45rem;
	}

	/* ------ Полезная информация ------ */
	.useful-information .body-section {
		padding: 1.25rem 2.25rem;
	}

	.useful-information .useful-information-text h3 {
		font-size:1.45rem;
	}

	/* ----- Команда ----- */
	#carouselTeamMob .card-img-overlay h5 {
		font-size:1rem;
	}

	/* ----- Подвал ----- */
	.footer-copyright {
		font-size:.9rem;
	}
}

@media (max-width:360px) {

	/* ----- Итнро ----- */
	.intro .body-section h1 {
		font-size:1.25rem;
	}

	.intro .body-section h1 span {
		font-size:1.75rem;
	}

	.intro .body-section p {
		font-size:1.2rem;
	}

	/* ----- О нас ----- */
	.about-company .body-section .card .card-body p {
		font-size: 1rem;
	}

	/* ----- Наша команда ----- */
	#carouselTeamMob .card-img-overlay h5 {
		font-size:.95rem;
	}

	/* ----- Контакты ----- */
	.contacts-adres h5, .contacts-phone h5 {
		font-size:1.24rem;
	}

	/* ----- Error 404 ----- */
	.error-404 .body-section img {
		width:300px;
	}
}

@media (max-width:320px) {

	/* ----- Меню ----- */
	.navbar-logo img {
		width:60px;
	}

	.navbar-phone a {
		font-size:.9rem;
	}

	/* ----- Итнро ----- */
	.intro {
		padding-top:14rem;
	}

	.intro .body-section h1 {
		font-size:1.05rem;
	}

	.intro .body-section h1 span {
		font-size:1.55rem;
	}

	.intro .body-section p {
		font-size:1.1rem;
	}

	/* ------ Полезная информация ------ */
	.useful-information {
		padding-top:5.5rem;
		padding-bottom:1.5rem;
	}
	.useful-information .useful-information-text h3 {
		font-size:1.15rem;
	}

	/* ----- О нас ----- */
	.head-section p {
		font-size:.9rem;
	}

	/* ----- Наша команда ----- */
	#carouselTeamMob .card-img-overlay h5 {
		font-size:.8rem;
	}

	/* ----- Контакты ----- */
	.contacts-adres h5, .contacts-phone h5 {
		font-size:1.07rem;
	}

	/* ----- Подвал ----- */
	.footer-copyright {
		font-size:.8rem;
	}

	/* ----- Модальные окна обратной связи ----- */
	.modal .modal-header .modal-title {
		font-size:1.25rem;
	}

	.modal .custom-control-label {
		font-size:.9rem;
	}

	/* ----- Error 404 ----- */
	.error-404 {
		padding-top:10rem;
	}
	.error-404 .body-section img {
		width:250px;
	}
}