html, body {
	height: 100%; /*Помогает прибить подвал к низу*/
	margin: 0;
	padding: 0;
	min-width: 320px;
	position: relative;
	width: 100%;
	color: #333;
}

body {
	font-size: 16px;
	font-family: "Roboto", serif;
	/*font-family: "PT Sans", serif;*/
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;

	line-height: 24px;
}
/*body.lock {*/
/*	overflow: hidden;*/
/*}*/

/*@media (max-width: 767.98px) {*/
/*	body.lock {*/
/*		width: 100%;*/
/*		position: fixed;*/
/*		overflow: hidden;*/
/*	}*/
/*}*/

/* ==================================== */

a:focus {
	outline: none;
}

h1 {
	font-size: 30px;
	line-height: 1;
	/*margin: 0 0 30px 0;*/
	margin: 10px 0 30px 17px;
}

#portfolio h1 {
	margin: 10px 0 0px 17px;
}

h2 {
	font-size: 25px;
	line-height: 1;
	margin: 0 0 20px 0;
}

ul {
	list-style: none;
}

a:hover {
	transition: all 0.3s ease 0s;
}

/* ==================================== */

.wrapper {
	min-height: 100%;
	display: grid;
	grid-template: minmax(160px, auto) 1fr minmax(163px, auto) / 1fr;
	grid-template-areas:
			"header"
			"main"
			"footer"
;
}

.header_wrapper {
	position: fixed;
	width: 100%;
	z-index: 2;
}

.header {
	grid-area: header;
	display: grid;
	grid-template: 20px 1fr 50px /
	1fr /*Ограничеивающий контейнер - левая пустая колонка*/
	minmax(auto, 300px) /* Максимальная ширина контента 1200px (300 + 900)*/
	minmax(auto, 700px)
	minmax(auto, 200px)
	1fr; /*Ограничеивающий контейнер - правая пустая колонка*/
	background: white;
}

.header.no_sub {
	grid-template-rows: 20px 1fr 6px;
}

/*.header > div {*/
/*	position: fixed;*/
/*}*/

.header::before {
	content: "";
	background-image: url("../img/top2.png");
	background-repeat: repeat-x;
	height: 5px;
	margin-bottom: 5px;
	width: 100%;
	grid-column: 2 / 5;
	z-index: 3;
}

.header::after {
	content: "";
	background: #eeeeee url("../img/fixed_menu_shadow.png") repeat-x scroll 50% 100%;
	height: 5px;
	margin-bottom: 5px;
	width: 100%;
	grid-column: 2 / 5;
	z-index: 3;
}

.header.no_sub::after {
	margin-top: 6px;
}


.header__logo {
	grid-column: 2 / 3; /* Смещение на одну колонку (для имитации левой пустой колонки)*/
    z-index: 3;
}


/* header__department-menu department-menu */

#menuMain2 li
{
	border: 1px solid #989a9b;
	border-radius: 7px;
	/*	padding: 3px 10px;*/
	background-color: #008dd4;
	text-align: center;
	text-transform: uppercase;
	margin-right: 10px;
	height: 45px;
}

#menuMain2 li:hover
{
	background-color: #066FA4;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

#menuMain2 li.active
{
	background-color: #3f3f3f;
}

#menuMain2 li.active:after
{
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-top: 12px solid #3f3f3f;
	content: " ";
	width: 0px;
	height: 0px;
	position: relative;
	top: 10px;
	z-index: 3;
}


#menuMain2 li a
{
	font-size: 17px;
	color: #FFF;
	margin: 0px;
	padding: 10px;
}

#menuMain2 li a:focus
{
	background-color: inherit;
}

#menuMain2 li a:hover
{
	text-decoration: none;
	background-color: transparent;
}

.department-menu ul {
	display: flex;
	justify-content: center;
	height: 70px;
	align-items: end;
}


/* header__extra */

.header__extra {
	display: grid;
    z-index: 3;
}

.header__btnOrder
{
	/*right: 0px;*/
	/*top: 70px;*/
	/*width: 208px;*/
	height: 42px;
	background-color: #008DD4;
	color: #FFF;
	font-size: 16px;
	text-transform: uppercase;
	padding-top: 8px;
}

.header__btnMobilOrder {
	display: none;
}

.header__btnOrder:hover
{
	background-color: #066FA4;
	color: #FFF;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

/*
header__login
*/
.header__login {
	/*width: 208px;*/
	height: 42px;
	background-color: #EEEEEE;
	color: black;
	font-size: 14px;
	background-image: url("../img/personal.png");
	background-repeat: no-repeat;
	padding-left: 30px;
	padding-top: 10px;
	background-position: 5px 11px;
	position: relative;
	top: -10px
}

.header__login:hover
{
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

/*
	header__sub-menu
*/
.header__sub-menu {
	grid-column: 2 / 5;
	/*background: #eeeeee url("../img/fixed_menu_shadow.png") repeat-x scroll 50% 100%;*/
	height: 54px;
}

.header__sub-menu ul {
	display: flex;
	justify-content: center;
}

.header__sub-menu a
{
	font-size: 17px;
	color: #000;
	margin: 0px;
	padding: 10px;
}

.header__sub-menu ul li a:hover
{
	text-decoration: none;
	color: #FFF;
	background-color: #008DD4;
}

.header__sub-menu li.current a
{
	text-decoration: none;
	color: #FFF;
}

.header__sub-menu li.current
{
	background-color: #3F3F3F;
}

.header__sub-menu li:hover
{
	background-color: #008DD4;
	transition: background-color 200ms linear;
}


/*
	Footer
*/
footer {
	/*Высота зависит от .wrapper */
	grid-area: footer;
	/*background: green;*/
	display: grid;
	grid-template: 163px /
    1fr /*Ограничеивающий контейнер - левая пустая колонка*/
	minmax(auto, 1200px) /* Максимальная ширина контента 1200px (300 + 900)*/
	1fr; /*Ограничеивающий контейнер - правая пустая колонка*/
}

.footer__content {
	position: relative;
	grid-column: 2 / 3;
}

.footer__content::before
{
	content: "";
	display: block;
	margin-bottom: 10px;
	background-image: url("../img/top2.png");
	background-repeat: repeat-x;
	height: 5px;
	width: 100%;
}


.footer__bottom {
	/*border: 1px solid red;*/
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	justify-items: center;

	background-color: #008DD4;
}

.footer__copy {
	/*grid-column-start: span 2;*/

	background-color: #008DD4;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	padding: 10px;
}

/*.footer__menu {*/
/*	position: absolute;*/
/*	right: 20px;*/
/*	bottom: -10px;*/
/*	!*top: 14px;*!*/
/*}*/

.footer__menu ul {
	display: flex;
}

.footer__menu a {
	color: white;
}

.footer__menu ul.nav > li > a:focus,
.footer__menu ul.nav > li > a:hover
{
	text-decoration: underline;
	background-color: inherit;
}

.footer__form {
	background-color: #f7f7f7;
	padding: 12px;
	text-align: center;
	max-width: 1100px;
	margin: 0 auto;
}

@media (max-width: 500px) {
	.footer__form {
		max-width: 300px;
	}
}

.footer__form .fields {
	display: flex;
	flex-wrap: wrap;

	justify-content: space-around;
}

.footer__form .fields .form-control {
	flex: 0 1 240px;
	margin-bottom: 12px;
}

.footer__form .fields .form-control input {
	padding:0 10px;
	width: 160px;
	border: none;
}

.footer__form .fields .form-control input:focus {
	outline: none;
}

.footer__btnOrder {
	width: 208px;
	height: 33px;
	background-color: #008DD4;
	color: #FFF;
	font-size: 16px;
	text-transform: uppercase;
	padding-top: 5px;
	letter-spacing: 2px;
}

.footer__btnOrder:hover
{
	background-color: #066FA4;
	color: #FFF;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.footer__form .message {
	font-size: 18px;
	font-weight: bold;
	color: #008DD4;
}

.footer__form .message.error {
	margin-top: 5px;
	color: red;
}

.footer__form .error_mark {
	border: 1px solid red;
}


/*
	Feedback
*/
#myModal .error_mark {
	color: red;
}

#myModal .messageBox {
	color: red;
	margin-top: 12px;
}




/*
	Main
*/

.main {
	margin-bottom: 50px;
}

@media (min-width: 992px) {

	.main {
		grid-area: main;
		display: grid;
		grid-template: 1fr/
            1fr /*Ограничеивающий контейнер - левая пустая колонка*/
			minmax(auto, 1200px)
			1fr /*Ограничеивающий контейнер - правая пустая колонка*/
		;
	}

	.content {
		grid-column: 2 / 3;
		padding: 0 0 0 30px;
	}

	/*.sidebar {*/
	/*	grid-column: 2 / 3; !* Смещение на одну колонку (для имитации левой пустой колонки)*!*/
	/*	margin: 0;*/
	/*}*/
}





.tarif_items:after
{
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	margin: 0;
	padding: 0;
}

.tarif_items .item
{
	border: 2px solid #989a9b;
	width: 270px;
	margin-left: 22px;
	float: left;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);
	padding: 10px 20px;
	border-radius: 6px 6px 0 0;
	text-align: center;
	position: relative;
}

.tarif_items .item.item0
{
	border: 2px solid #008dd4;
	box-shadow: 0px 0px 6px rgba(0, 141, 212, 0.6);
}

.tarif_items .item .icon
{
	background: #fff url("../img/IconsSet.png") no-repeat scroll -5px -6px;
	border: 1px solid #989a9b;
	border-radius: 25px;
	height: 40px;
	left: 110px;
	position: absolute;
	top: -20px;
	width: 41px;
}

.tarif_items .item .icon.icon1
{
	background-position: -54px -6px;
}

.tarif_items .item .icon.icon2
{
	background-position: -106px -6px;
}

.tarif_items .item .icon.icon3
{
	background-position: -155px -4px;
}

.tarif_items .item .title
{
	margin-top: 10px;
}

.tarif_items .item .title a
{
	font-size: 28px;
}


.tarif_items .item .order
{
	border: 1px solid #989a9b;
	border-radius: 7px;
	background-color: #008dd4;
	text-align: center;
	width: 226px;
	height: 44px;
	cursor: pointer;
	color: #FFF;
	padding-top: 7px;
	font-size: 20px;
}

.tarif_items .item .order:hover
{
	background-color: #066FA4;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.tarif_items .item .text1 div,
.tarif_items .item .text1 p
{
	border-bottom: 1px solid #e6e6e6;
	width: 100%;
	font-weight: bold;
	color: #666666;
	margin: 5px 0px;
}

.tarif_items .item .text1 div:last-of-type
{
	border-bottom: none;
}

.tarif_items .item .price span
{
	font-weight: bold;
	font-size: 16px;
}

.tarif_items .item hr
{
	color: #e6e6e6;
	left: -20px;
	margin: 10px 0;
	position: relative;
	width: 265px;
}

.tarif_items .item .bottom
{
	/*	background: #302828;
        width: 10px;
        height: 10px;
        border-radius: 0 0 5px 5px/0 0 3px 3px;
        float: left;
        margin-top: -8px;*/


	background-image: url("../img/item_bottom1.png");
	background-repeat: repeat-x;
	height: 26px;
	left: -20px;
	position: relative;
	top: 22px;
	width: 267px;
	background-color: #FFF;
}

.tarif_items .item .bottom.bottom0
{
	background-image: url("../img/item_bottom0.png");
}


@media (max-width: 1250px) {
    .tarif_items {
        max-width: 700px;
    }

    .tarif_items .item:nth-of-type(1),
    .tarif_items .item:nth-of-type(2)
    {
        margin-bottom: 40px;
    }
}



.tarif_tabble
{
	margin: 40px 0px 60px;
}

.table-striped > tbody > tr:nth-of-type(2n+1)
{
	background-color: #f3f3f3;
}

.table-striped > tbody > tr:first-of-type
{
	background-color: #008dd4;
	color: #FFF;
}


.tarif_tabble .table-striped td
{
	text-align: center;
}

.tarif_tabble .table-striped tr td:first-of-type
{
	text-align: left;
}


.tarif_tabble .table-striped tr.price td
{
	font-weight: bold;
	font-size: 16px;
	vertical-align: middle;
}


/*
Breadcrumbs
*/

#breadcrumbs ul.breadcrumb
{
	background-color: transparent;
	margin-bottom : 0px;
	padding-left: 0px;
}

#breadcrumbs hr
{
	margin-top: 0px;
}

#breadcrumbs .empty_breadcrumb
{
	border: 1px solid #fff;
}




/*
Burger
*/
.header__burger {
    display: none;
}

#menu__mobile {
    position: fixed;
    top: -100%;
}

@media (max-width: 992px) {

    .header__login,
    .header__sub-menu,
    #menuMain2
    {
        display: none;
    }

    .header__burger {
        display: block;
        position: relative;
        width: 30px;
        height: 20px;
        z-index: 3;
        cursor: pointer;
        margin: 12px auto;
    }

    .header__burger span {
        height: 2px;
        background-color: black;
        width: 100%;
        position: absolute;
        left: 0;
        top: 9px;
        transition: all 0.3s ease 0s;
    }

    .header__burger:before,
    .header__burger:after {
        content: '';
        height: 2px;
        background-color: black;
        width: 100%;
        position: absolute;
        left: 0;
        transition: all 0.3s ease 0s;
    }

    .header__burger:before {
        top: 0;
    }

    .header__burger:after {
        bottom: 0;
    }

    .header__burger.active span {
        transform: scale(0);
    }
    .header__burger.active:before {
        transform: rotate(45deg);
        top: 9px;
    }
    .header__burger.active:after {
        transform: rotate(-45deg);
        bottom: 9px;
    }

    #menu__mobile {
        position: fixed;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        padding: 60px 10px 0 10px;
        transition: all 0.3s ease 0s;
        overflow: auto; /*Возможность прокруки меню, когда оно не помещается на экране*/
        z-index: 2;
    }

    #menu__mobile.active {
        top: 0;
    }

    #menu__mobile {
        padding-top: 115px;
    }


	#menu__mobile{
		font-size: 24px;
	}

	#menu__mobile ul
	{
		height: auto;
	}

    #menu__mobile,
    #menu__mobile ul
    {
        display: block;
    }

    #menu__mobile li {
        margin-bottom: 25px;
        display: block;
    }

	/*#menu__mobile li li ::after {*/
	/*	content: "";*/
	/*	display: block;*/
	/*	background-image: url("../img/top2.png");*/
	/*	background-repeat: repeat-x;*/
	/*	height: 5px;*/
	/*	margin-bottom: 5px;*/
	/*}*/

	#menu__mobile li li:nth-of-type(1) {
		padding-top: 15px;
	}

	#menu__mobile li a {
		display: block;
		width: 100%;
		padding-left: 0px;
		transition: all 0.5s ease 0s;
	}

	#menu__mobile li:hover > a {
		text-decoration: none;
		padding-left: 10px;
		background-color: white;

	}

	#menu__mobile li li a::after {
		content: "";
		display: block;
		/*border: 1px dashed #008dd4;*/
		background-image: url("../img/top2.png");
		background-repeat: repeat-x;
		height: 5px;
		margin-bottom: 5px;
		width: 60%;
	}

	#menu__mobile li.active > a
	{
		color: black;
	}


    body.locked {
        overflow: hidden; /*"Блок" промокки при открытом меню*/
    }

    .main {
    	margin-top: 60px;
		padding: 0px 30px;
    }

    .wrapper {
        grid-template: minmax(100px, auto) 1fr minmax(90px, auto) / 1fr;
        grid-template-areas:
                "header"
                "main"
                "footer"
    ;
    }

	.header {
		grid-template: 20px 1fr 0px / 1fr minmax(auto, 300px) minmax(auto, 700px) minmax(auto, 200px) 1fr;
	}


	.footer__bottom {
		display: block;
	}

	.footer__bottom .c0 {
		display: none;
	}

    .footer__menu {
        /*position: static;*/
        background-color: #008DD4;
        color: #FFF;
        font-weight: bold;
    }

    .footer__menu ul {
        justify-content: center;
    }
}




.map {
	min-height: 400px;
}


.gallery__items {
	display: grid;
	/*grid-auto-flow: dense;*/
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	justify-items: center;
}

.gallery__item {
	justify-self: center;

	/*position: relative;*/
	/*padding: 0 0 85% 0; */
	/* Хитрое пропорциональное изменение ячеек */
}

.gallery__item img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/*
    https://iteam-pro.ru/it-autsorsing/spetspredlozheniya
*/

.flex_grid {
	display: flex;
	margin: 0 auto 60px;
	text-align: center;
}

.flex_grid .flex_grid__item {
	flex: 1 1 0px;
	padding: 10px;
}

.flex_grid .flex_grid__title {
	font-weight: bold;
	font-size: 18px;
}


/*
    Пример вертикального отображения
*/
@media (max-width: 960px ) {
	.flex_grid {
		width: auto;
		flex-direction: column;
	}

	.gallery__item .grid {
		padding: 0;
	}

	#soslider3 {
		display: none;
	}
}

/* Landscape phones and smaller */
@media (max-width: 480px) {

	.header {
		grid-template: 10px 1fr 0px / 1fr minmax(100px, auto) minmax(auto, 700px) minmax(100px, auto)  1fr;

		box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
	}

	/*.header > div {*/
	/*	border: 1px solid #000;*/
	/*}*/

	.header__logo {
		align-self: center;
		justify-self: center;
	}

	.header__logo img {
		height: 25px;
		transform: translate(10px, 0);
	}


	/*#breadcrumbs {*/
	/*	display: none;*/
	/*}*/

	.header__btnOrder {
		display: none;
	}

	.header__btnMobilOrder {
		display: block;
		align-self: center;
		justify-self: center;
		font-size: 30px;
		cursor: pointer;
		color: #066FA4;
	}

	.main {
		padding: 0px 10px;
	}

	.tarif_items .item {
		display: block;
		margin: 0 auto 40px;
		float: none;
	}

	#menu__mobile li li a::after {
		width: 80%;
	}

	.tarif_items .item .title a {
		font-size: 26px;
	}

	h1 {
		text-align: center;
	}

	.table-responsive {
		overflow: auto;
		position: relative;
		max-width: 300px;
		margin: 0 auto 60px;
	}

	.table-responsive table {
		display: inline-block;
		vertical-align: top;
		max-width: 100%;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.table-responsive::after {
		content: '';
		display: block;
		width: 15px;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		background: radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-size: 15px 100%;
		background-position: 100% 0%;
	}
}

.so_text {
	/*border: 1px red solid;*/
	padding-left: 10px;
	padding-right: 10px;
}

.so_text ul {
	padding: 0;
}

.so_text ul li {
	padding: 7px 10px;
	margin-bottom: 10px;
	border-radius: 5px;
	/*border-left: 10px solid #0E0FC1;*/
	border-left: 10px solid #008dd4;
	box-shadow: 2px -2px 5px 0 rgba(0,0,0,.1), -2px -2px 5px 0 rgba(0,0,0,.1), 2px 2px 5px 0 rgba(0,0,0,.1), -2px 2px 5px 0 rgba(0,0,0,.1);
	font-size: 18px;
	transition: 0.3s all linear;
}

.so_text hr {
	margin-top: 10px;
	margin-bottom: 10px;
	/*border-top: 1px solid #0E0FC1;*/
	border-top: 1px solid #008dd4;
}


#portfolio .grid figure h2 {
	word-spacing: 5px;
}

sup {
	color: red;
	font-size: 18px;
}
