@font-face {
	font-family: 'Roboto';
	src: local('Roboto'), url('fonts/Roboto-Regular.ttf');
}

@font-face {
	font-family: 'Roboto-black';
	src: local('Roboto-black'), url('fonts/Roboto-Black.ttf');
}

@font-face {
	font-family: 'Roboto-light';
	src: local('Roboto-light'), url('fonts/Roboto-Light.ttf');
}

@font-face {
	font-family: 'Montserrat';
	src: local('Montserrat'), url('fonts/Montserrat-VariableFont_wght.ttf');
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.cnt {
	text-align: center;
}

img {
	border: 1px solid #323232;
	border-radius: 8px;
}

a {
	color: #e3d2b4;
	text-decoration: none;
}

p {
	margin-bottom: 1.7rem;
	text-align: justify;
}

li {
	margin-left: 2.5rem;
}

details {
	border-left: 1px solid #e3d2b4;
}

details p {
	margin: 1rem;
}

summary {
	margin: 1rem;
	cursor: pointer;
}

h1 {
	font-size: 3rem;
	font-size: calc((3vw + 3rem)/2);
	font-weight: 200;
}

h2 {
	/* margin-top: 2rem; */
	font-size: 1.8rem;
	font-size: calc((1.8vw + 1.8rem)/2);
	font-weight: 100;
	line-height: 2;
}

h4 {
	font-family: 'Roboto-light', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	font-weight: 200;
	font-size: 2rem;
	font-size: calc((2vw + 2rem)/2);
	margin-bottom: 1rem;
}

#page>h4 {
	margin-left: 2rem;
}

hr {
	margin: 1rem 0;
}

.font-roboto {
	font-family: 'Roboto-light', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body {
	color: #FFFFFF;
	background-color: #303e46;
	font-size: 1.2rem;
	font-size: calc((1.2vw + 1.2rem)/2);
}

#head-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	height: 20rem;
	margin-top: 3rem;
	background: linear-gradient(#000000AA, #303e46EE), url(img/head-bkg.jpg) no-repeat center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

#head-block p {
	font-size: 1.5rem;
	font-size: calc((1.5vw + 1.5rem)/2);
	/* margin-top: 1.5rem; */
	line-height: 1.5;
	text-align: center;
}

#page {
	font-family: 'Montserrat', Arial, sans-serif;
	font-weight: 300;
	line-height: 1.55;
	font-size: calc((1.2vw + 1.4rem)/2);
}

.page-block {
	padding: 3rem 2rem;
	margin: 1rem 0;
	display: flex;
	justify-content: space-between;
	align-items: start;
}

.page-block img {
	width: 25vw;
}

#sbkts img {
	margin-left: 3rem;
}

#accred img {
	margin-right: 3rem;
}

#service {
	background-color: #FFFFFF;
	margin-bottom: 0;
	color: #303e46;
	align-items: start;
}

#service img {
	border: none;
	margin-right: 3rem;
}

#service p {
	margin-bottom: 0;
	font-size: 1.5rem;
	font-size: calc((1.5vw + 1.5rem)/2);

}

#price thead {
	font-weight: 200;
	color: white;
	background-color: darkgray;
}

#price th, #price td {
	padding: .2em 1em;
}

#price td:nth-child(even) {
	text-align: center;
}

#price tr:nth-child(even) td {
	background-color: #f5f5f5;
}
#price tr:nth-child(odd) td {
	background-color: #f0f0f0;
}

#price td[colspan] {
	text-align: center;
	background-color: #d0d0d0 !important;
}


#action {
	background: #ededed;
	background: linear-gradient(#FFFFFFCC, #FFFFFF00), url(img/action-bkg.jpg) no-repeat center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	margin-top: 0;

	color: #303e46;
	font-weight: 400;
	justify-content: center;
	text-align: center;
}

#action a {
	color: #674609;
}

#action p:first-child {
	font-size: 1.8rem;
	font-size: calc((1.8vw + 1.8rem)/2);

}

#action p {
	text-align: center;
	font-size: 1.5rem;
	font-size: calc((1.5vw + 1.5rem)/2);
}

#contacts {
	justify-content: center;
	padding: 0 2rem;
	margin: 0;
}

#contacts li,
#bottom li,
#menu li {
	list-style-type: none;
	padding-bottom: .3rem;
}

#map {
	display: flex;
	justify-content: center;
	margin-left: 5vw;
	overflow: hidden;
}

#bottom {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	color: #FFFFFF;
	font-size: 1.5rem;
	font-size: calc((1.5vw + 1.5rem)/2);
	font-weight: 500;
	line-height: 2rem;
	margin: 3rem 0 0 0;
	padding: 5rem 1rem;
	background: linear-gradient(to right, #303e46EF, #000000CC), url(img/bottom-bkg.jpg) no-repeat center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

#bottom li {
	margin-left: 0;
	line-height: 1.3em;
}

#bottom a[href^='#'] {
	font-weight: 500;
	font-size: 1.6em;
	font-size: calc((1.6vw + 1.6rem)/2);
}

#bottom div {
	padding: 0 3rem;
}

#bottom div:last-child {
	display: flex;
	align-items: end;
	font-size: 0.7em;
}

#menu {
	width: 100%;
	height: 3rem;
	position: fixed;
	top: 0;
	display: flex;
	justify-content: right;
	opacity: .85;
	background-color: #c9dae4;
	font-weight: 800;
	overflow: hidden;
}

#menu a {
	display: flex;
	height: 100%;
	align-items: center;
	padding: 0 1rem;
	color: #2e3a45;
	background-color: #c9dae4;
}

#menu a:hover {
	background-color: #c4c0bb;
}

#menu .phone {
	font-size: 1.6em;
	font-size: calc((1.6vw + 1.6rem)/2);
	margin: 0 3vw;
}

/* cards */
.cards {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.card {
	width: 20%;
	margin: .7rem;
	background-color: #3d4954;
	/* border-radius: 10px; */
}

.card a {
	font-weight: inherit;
	text-decoration: none;
}

.card-title {
	background-color: #2b343d;
	color: #ffffff;
	border-bottom: 2px solid #84542a;
	/* border-radius: 6px; */
	padding: .5rem 0;
	font-family: 'Roboto-light', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	font-size: 1.8vw;
	font-size: calc((1.8vw + 1.8rem)/2);
	font-weight: 400;
	text-align: center;
}

.card-body {
	padding: 1rem;
	font-size: 1.2rem;
	font-size: calc((1.2vw + 1.2rem)/2);
	text-align: center;
}

.card-body img {
	width: 100%;
}


/* МенюБургер */

#menu-icn {
	display: none;
	height: 2rem;
	width: 2rem;
	border: none;
	border-radius: 0;
	cursor: pointer;
	margin: .5rem;
}

/* Media --------------------------------------------------------------------------- */
@media (max-width: 900px) {
	#head-block h1 {
		font-size: 2.5rem;
		font-size: calc((2.5vw + 2.5rem)/2);
	}

	.page-block img {
		display: none;
	}

	#accred {
		background: linear-gradient(#303e46EE, #303e46EE), url(img/accred.jpg) no-repeat left;
	}

	#sbkts {
		background: linear-gradient(#303e46EE, #303e46EE), url(img/sbkts.jpg) no-repeat right;
	}

	#contacts {
		flex-direction: column;
		text-align: center;
	}

	#contacts>div {
		width: 100%;
	}

	#map {
		margin: 0;
	}

	.card {
		width: 40%;
	}

	.card-body {
		font-size: 1.2rem;
	}

}

@media (max-width: 576px) {
	.page-block {
		margin: 0;
		padding: 2rem;
	}

	#accred,
	#sbkts {
		background: none;
	}

	p {
		text-align: left;
	}

	.card {
		width: 90%;
	}
}

@media (max-width:350px) {
	#head-block * {
		font-size: 1em !important;

	}
}