/*

tg: @bendyuzhko

*/

@charset 'UTF-8';


@desktop: ~"(min-width: 992px)";

@tablet: ~"(max-width: 991.5px)";

@mobile: ~"(max-width: 767.5px)";


@blue: #004D73;


/*
@desktop: (min-width: 992px);

@tablet: (max-width: 991.5px);

@mobile: (max-width: 767.5px);
*/

html {
	scroll-behavior: smooth;
}

body {
	background: white;
	color: #8B8B8B;
	font-family: "Raleway", sans-serif;
}


ol li::marker {
	color: @blue;
}


h1,
h2,
h3,
.fw-semibold {
	font-family: "Merriweather", serif;
	color: black;
}


.btn-primary {

	background: @blue;
	border: 1px solid @blue;
	color: white !important;

	&:hover,
	&:focus {
		background: #168DE2;
		border: 1px solid #168DE2;
		color: white;
	}

	&:disabled {
		background: @blue;
		border: 1px solid @blue;
		opacity: 1;
	}

}


.header,
footer {

	background: white;
	color: #8B8B8B;

	.nav-link {

		color: black;

		&:hover,
		&:focus {
			color: @blue;
		}

	}

	.fa-phone,
	.fa-envelope-o,
	.fa-clock-o {
		color: @blue;
	}

	@media (max-width: 767.5px) {

		ul span {
			display: none;
		}

	}

}

header {

	background: url('/assets/img/header.jpg') center no-repeat;
	background-size: cover;
	color: black;

	.btn-primary {

		background: @blue;
		border: 1px solid @blue;
		color: white;

		&:hover,
		&:focus {
			color: white;
		}

	}

	* {
		z-index: 2;
	}

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.5);
		z-index: 1;
	}

}


#bars {

	display: none;
	background: #FFF7F1;
	color: black;
	width: 75%;

	a {
		color: black;
	}

}


#is-open {
	background: rgba(255, 247, 241, 0.3);
	display: none;
}


#promo {
	background: #FFF7F1;
}


#prices {

	background: white;
	border-top: 2px solid #FFF7F1;

	ul li::marker {
		color: @blue;
	}

}


#services {

	background: white;

	.border {

		background: white;
		border: 1px solid #FFEEE4 !important;

		a {
			color: black;
		}

		ul li::marker {
			color: @blue;
		}

		&:hover,
		&:focus {
			background: #FFF7F1;
		}

	}

}


#up {
	color: #004D73;
}


/*  */

#social-buttons {

	opacity: 0;
	display: flex;
	flex-direction: column-reverse;
	animation: delayed 2s;
	animation-fill-mode: forwards;

	&:hover .messenger-buttons {

		pointer-events: auto;

		a {
			opacity: 1;
			transform: scale(1);
		}

	}

	.bubble {

		background: @blue;
		color: white;
		cursor: pointer;

		i {
			animation: rotation 1.5s linear infinite;
		}

	}

	.messenger-buttons {

		position: absolute;
		right: 0;
		bottom: 50px;
		display: flex;
		flex-direction: column;
		pointer-events: none;

		a {

			position: relative;
			display: block;
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			margin-bottom: 15px;
			border-radius: 50%;
			opacity: 0;
			color: white !important;
			box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.1);
			cursor: pointer;
			transform: scale(0);
			transition: all 150ms cubic-bezier(0, 0, 0.2, 1);

			&:hover::after {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.1);
			}

		}

	}

}


@keyframes delayed {

	60% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}

}

@keyframes rotation {

	0%,
	100%,
	50% {
		transform: rotate(0);
	}

	25% {
		transform: rotate(30deg);
	}

	75% {
		transform: rotate(-30deg);
	}

}