@bottomHeight: 62px;
@widthPage: 1280px;
@colorBlue: #558ED2; 
@colorBlueDark: #1C4C85;
@colorBlueLight: #1e88cc;
@colorBlueUltraLight: #E1F2FF;
@colorRed: #B34844;
@colorText: #424242;
html {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	background: url(../img/html/bkg.jpg);
}
body {
	margin: 0;
	padding: 0;
	max-width: @widthPage;
	background: #ffffff;
	box-shadow: 0 0 100px #000;
	margin: 0 auto;
	color: #424242;
}
img{
	border: 0;
	height: auto;
}
a {
	color: #4785b7;
	text-decoration: none;
	&:hover {
		text-decoration: underline; 
	}
}

header {
    .blindfixedico{
	    //-webkit-transform: rotate(-90deg);  /*Поворот блока с текстом кнопки  на 30 градусов*/
        //-moz-transform: rotate(-90deg);
        //-ms-transform: rotate(-90deg);
        //-o-transform: rotate(-90deg);
        //transform: rotate(-90deg);
	    position:fixed; /*фиксированная позиция кнопки при прокрутке*/
	    z-index:999;
	    right: 0px; /*отступ с права*/
	    top: 0%; /*отступ сверху*/
	    margin-right: 0px; /*отрицательный отступ справа (чем длиннее название кнопки тем больше должно быть значение данного отступа )*/
    }

    /*Стили для ссылки*/
    .blindfixedico a{
	    //color:#fff!important; /*цвет ссылки*/
    	display:block;
	    //background:#DC3522; /*цвет фона кнопки*/
	    font-size:1.2em; /*размер шрифта*/
	    text-align:center; /*выравнивание по центру*/
	    //padding:10px 20px; /*внутренние отступы*/
    	font-weight:bold;/*жирный шрифт*/
	    //border-radius:5px; /*радиус скругления углов*/
	    //border:1px solid #fff; /*рамка вокруг кнопки*/
    }
    .blindfixedico img {
		display: block;
		margin: 0 auto;
		width: 100px;
	}
	.wrap {
		max-width: @widthPage;
		font-family: arial;
		.top {
			background: url(../img/html/top-bkg.png);
			background-size: cover;
			width: 100%;
			height: 113px;
			float: right;
			position: relative;
			z-index: 10;
			box-shadow: 0 3px 6px 0 rgba(0,0,0,0.15);						
			border-bottom: 2px solid #3D759A ;
			.logo {
				width: 280px;
				float: left;
				img {
					width: 85%;
					display: block;
					padding-top: 29px;
					margin: 0 auto;
					max-width: 270px;
					float: left;	
					padding-left: 15px;				
				}
			}
			.feedBack {
				width: 200px;
				display: block;
				margin: 0 auto;
				cursor: pointer;
				top: 35px;
				position: relative;				
				transition: all .3s;
				.feedBackLinkMobile {
					display: none;
				}
				&:hover div {
					background: url(../img/html/feedBackFicha-hover.png) no-repeat;
					background-size: contain;
				}
				&:hover a {
					color: rgba(255, 255, 255, 1);
				}				
				a {
					text-decoration: none;
					color: #fff;
					transition: all .3s;
					display: flex;
					align-items: center;
					&:before {
						content: '';
						display: inline-block;
						width: 27px;
						height: 22px;
						margin-right: .7em;
						background: url(../img/icon/mail.png) no-repeat;
						background-size: contain;
						transition: all .3s;
					}
					&:hover:before {
						margin-right: .2em;
					}
				}
				span {
				    display: inline-block;
				    text-align: center;
				    font-size: 1.14em;
				    text-transform: uppercase;
				    font-weight: 300;
				    padding: 10px 0 10px 0;
				}
				div {
					width: 170px;
					height: 7px; 
					display: block;
					margin: 0 auto;
					background: url(../img/html/feedBackFicha.png) no-repeat;
					background-size: contain;
					transition: all .3s;
				}
			}
			.infoTop {
				position: absolute;
				top: 20px;
				right: 20px;
				span {
					display: block;
					text-align: right;
					a {
						text-decoration: none;
						color: #ffffff;
					}
				}
				.phone {
					font-size: 1.5em;
					font-weight: 600;	
					text-align: right;				
				}
				.addres {
					width: 260px;
					font-size: .95em;
					font-weight: 200;
				    padding-top: 6px;
				    line-height: 1.5em;
				}
			}
		}
		.bottom {
			width: 100%;
		    margin-top: 0;
			position: relative;
			height: @bottomHeight;
			background: rgba(0, 45, 88, 0.16);			
// 			box-shadow: 1px 6px 8px -4px rgba(50, 50, 50, 0.64);
			float: right;
			.menuMobile, .btnMenu {
				display: none;
			}
		}
		nav {
		    float: right;
			margin-right: 10px;
			width: 95%;
			height: 100%;
			font-family: 'Open Sans', sans-serif;
			ul {
			    display: block;
				height: 100%;
				margin: 0;
				list-style: none;
				text-align: justify;
			
				&:after {
					width: 100%;
                    height: 0px;
                    visibility: hidden;
                    overflow: hidden;
                    content: '';
                    display: inline-block;					
				}
				.active > a {
					color: #6bd5fd;
					.active a {
						color: #6bd5fd;
					}
				}	
				.category:hover a:after, .category.active a:after {
					transform: rotate(90deg);
					background: url(../img/html/arrow-right-white-hover@2x.png) 2px 0 no-repeat;
					background-size: contain;
				}
				.category > a:after {
					content: '';
					display: inline-block;
					width: 10px;
					height: 10px;
					background: url(../img/html/arrow-right-white@2x.png) no-repeat;
					background-size: contain;
				    margin-left: 5px;
				    transition: all .3s;
				}			
				li {
					display: inline-block;
					&:hover .ulInner {
// 						display: block;
						visibility: visible;
						opacity: 1;
					}
					a {
						height: @bottomHeight;
						color: #ffffff;
						text-decoration: none;
						font-size: 1.05em;
						font-weight: 600;
						text-align: center;
						vertical-align: middle;
						display: table-cell;
						&:hover {
							color: #afe0ff;
							text-decoration: underline;
						}
					}
					.ulInner {
// 						display: none;
						Visibility:hidden;
						transition: all .5s;
						opacity: 0;
						position: absolute;
						left: 0;
						padding: 0;
						margin: 0;
						list-style: none;	
						width: 100%;
						height: auto;
					    z-index: 900;
						.title {
							display: block;
							width: 100%;
							text-align: center;
							padding: 35px 0 0 0;
							font-size: 1.3em;
							background: rgba(40, 130, 194, 0.96);
							color: #fff;

						}
						ul {
							position: relative;
							left: 0;
							padding: 10px 100px 40px 100px;
							margin: 0;
							list-style: none;	
							width: auto;
							height: auto;
							background: rgba(40, 130, 194, 0.96);			
							&:after {
								content: none;
								display: none;
							}						
							li {
								width: 47%;
								display: inline-block;
								vertical-align: top;
							    border-bottom: 1px solid #83ABC9;
							    &:nth-child(2n) {
								    margin-left: 5%;
							    }
								a {
// 									display: block;
									font-size: .85em;
									font-weight: 200;
									color: #fff;
									text-align: left;
									vertical-align: bottom;
									padding: 0 0 7px 15px;
									letter-spacing: .03em;
									&:hover {
										color: #73b3f2;
									}
								}
							}				
						}
						
					}
				}
			}
		}
	}
}
.content {
	max-width: @widthPage;
	background: url(../img/html/background.jpg);
// 	margin-top: -113px;
	padding-bottom: 140px;
	.wrap {
// 		width: @widthPage;
		width: 100%;
		max-width: @widthPage;
		display: inline-block;
		background-size: cover;
		font-size: 1.12em;
		font-weight: 400;
		.btnContent {
		    text-align: center;
		    display: block;
		    width: 30%;
		    margin: 0 auto;			
			padding: 12px 20px;
// 			border: 1px solid #b0b0b0;
			color: #fff;
			border-radius: 8px;
			background: @colorBlueLight;
			&:hover {
				background:	@colorBlue;
			}
		}
		.wrapCrumb {
// 			margin: 10px 20px 0px 20px;
			.breadcrumb {
				padding: 0;
				list-style: none;
				color: #656565;
				font-size: .7em;
				font-weight: 100;
				li {
					display: inline-block;
				    max-width: 300px;
				    overflow: hidden;
				    white-space: nowrap;
				    position: relative;
				    text-overflow: ellipsis;
				    vertical-align: top;
				    padding: 0 2px 0 2px;
					&:hover {
						max-width: 100%;
					    background: #f0fbff; /* Цвет фона */
					    white-space: normal; /* Обычный перенос текста */
					    border-radius: 5px;
					}				    
					a {
						color: #00bbea;
						&:after {
							content: '>';
							color: #9a9a9a;
							vertical-align: middle;
							padding: 0 0px 0 5px;
						}
						&:hover {
							text-decoration: none;
							color: #6de2ff;
						}
					}
				}
			}
		}
		h1, h2, h3, h4 {
			color: @colorBlueLight;
			text-align: center;
			line-height: 40px;
			font-weight: 400;
			text-transform: uppercase;
			padding: 70px 0 35px 0;
			display: flex !important;
			align-items: center;
			justify-content: center;
			width: 85% !important;
			margin: 0 auto;
			&:before, &:after {
				content: '';
				display: inline-block;
				width: 4em;
				height: 3px;
				background: #558ED2;
				vertical-align: middle;
				margin: 0 .7em;
			}
		}
		h1 {
			font-size: 1.8em;
		}
		h2 {
			font-size: 1.6em;
		}
		h3 {
			font-size: 1.4em;
		}
		h4 {
			font-size: 1.3em;
		}
		h6 {
		    font-weight: 50;
			font-size: 0.7em;
			line-height:1.2;
			margin-top: -15px;
		}
		.wrapInner {
			padding: 0 80px 70px 80px;
			text-align: justify;
		    line-height: 26px;
		    //ЗАПРЕТ НА КОПИРОВАНИЕ
		    div{
		        .noselect{
                    -moz-user-select: none;
                    -webkit-user-select: none;
                    -ms-user-select: none;
                    -o-user-select: none;
                    user-select: none;
		        }
		    }
            //ЗАПРЕТ НА КОПИРОВАНИЕ
		}
		#accordion {
			font-family: arial;
			h3 {
				font-size: 1em;
				background: none;
				margin: .2em 0;;
				text-align: left;
				text-transform: none;
				line-height: 1.5em;
				outline:none !important;
				padding: .5em 0 0 0;
				display: block !important;
				&:after, &:before {
					content: none;
				}
				a, a:hover, a:focus, .ui-state-focus {
					outline:none !important;
				}
				&:before {
				    content: '';
				    display: inline-block;
				    width: 10px;
				    height: 10px;
				    background: url(https://gradspb78.ru/img/html/arrow-right@2x.png) no-repeat;
				    background-size: contain;
				    transition: all .3s;
				    margin-right: 5px;	
				    margin-left: 0;		
				}
			}
			.ui-state-active:before {
			    transform: rotate(90deg);
			    background: url(https://gradspb78.ru/img/html/arrow-right-white-hover@2x.png) 2px 0 no-repeat;
			    background-size: contain;								
			}
			div {
				margin-left: 1.5em;
			}
		}		
		.blockTop, .block {
			h2 {
				text-transform: uppercase;
				font-weight: 400;
				font-size: 1.7em;
				text-align: center;
				color: @colorBlueLight;
				line-height: 40px;
				display: inline-block;
				width: 100%;
			}
		}
		.blockTop {
			display: block;
			background: #ffffff;
			margin: 55px 20px 50px 20px;
			background: #FFFFFF;
			box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
			border-radius: 0px;
		}
		.block {
			display: block;
			position: relative;
			background: #ffffff;
			margin: 60px 20px 50px 20px;
			background: #FFFFFF;
			box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
			border-radius: 0px;			
		}
	}
}

.uslugi {
      width: 100% ;
      display: table;
      margin: auto;
  div {margin: 0 auto;
      float: left;
  	  outline-color: #ffffff;
  	  width: 25% ;
     
}
}
.sign {
    float: none; 
    margin: 0 auto; /* Отступы вокруг */
    }
   .sign p{
    text-align: center;
   }
   .sign img{
       width:100px;
   }
   .sign figcaption {
    text-align: center;
    margin: 0 auto 5px; /* Отступы вокруг абзаца */
    width: 80%;
	text-transform: uppercase;
	font-size: .82em;
	line-height: 1.4em;
	color: #184A78;
   }

.advantage {
	margin-top: 80px;
	div {
		outline-color: #ffffff;
	}
	img {
		display: block;
		margin: 0 auto;
		width: 140px;
	}
	span {
		display: block;
		margin: 0 auto;
		padding: 30px 0 0 0;
		width: 80%;
		text-align: center;
		text-transform: uppercase;
	    font-size: .82em;
	    line-height: 1.4em;
	    color: #558ED2;
	}
}
.wrapTwoBlock {
	.left {
		display: inline-block;
		width: 49%;
		vertical-align: top;
		.adr, .phone, .rezhim, rezhimImg, span {
			display: block;
			font-weight: 400;
		}
		.adr {
			font-size: 1em;
		}
		.phone {
			font-size: 1.3em;
			font-weight: 600;
			margin-top: 5px;
			a {
				color: @colorBlue;
			}
		}
		.rezhim {
			font-size: 1.1em;
			font-weight: 400;
			margin: 20px 0 10px 0;
		}
		.prazdnik {
		    font-size: 1.1em;
		    font-weight: 800;
			margin: 15px 0 20px 0;
		    color: #ff335c
		} 
		.rezhimImg {
			width: 280px;
		}
	}
	.right {
		display: inline-block;
		width: 49%;
		vertical-align: top;
		span {
			display: block;
			border: solid 1px #8AADB9;
		}
	}
}
footer {
	margin-top: -170px;
	color: #fff;
	.wrap {
		max-width: @widthPage;
		height: 170px;
		background: url(../img/html/top-bkg.png);
		background-size: cover;
		box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.35);		
		border-top: 1px solid rgba(36, 72, 103, 0.3);
		.persData {
			max-width: @widthPage;
			padding: 0 25px;
			font-size: .8em;
		}
		a {
			text-decoration: none;
			color: #DAE8FF;
			&:hover {
				color: #ffffff;
			}
		}
		.wrapTop {
			padding: 10px 10px 10px 10px;
			div {
				width: 33%;
				display: inline-block;
				vertical-align: top;
				color: #DAE8FF;
				.logo {
					width: 250px;
				}
			}
			.centerFooter {
				font-size: .85em;
			}
			.adress {
				text-align: right;
				span {
					display: block;
				}
				.phone {
					font-size: 1.4em;
					font-weight: 600;
				}
			}
			.ppd {  font-size: .9em;
	            	font-weight: 100;
		            text-align: justify;
			}      
			.intimeImg {
				text-align: right;
				display: block;
				margin: 0 auto;	
				margin-top: 5px;
				width: 200px;
				a {
					display: inline-block;
					vertical-align: bottom;
				}
				img {
					width: 60px;
					display: inline-block;
					    vertical-align: bottom;
				}
			}
			.footBtn {
				a {
					display: inline-block;
					width: 49%;
					vertical-align: top;
					font-size: .8em;
				}
			}	
			.copyright {
				width: 100%;
				text-align: center;
			}	
		}
		.smallText {
			font-size: .9em;
			font-weight: 100;
			display: flex;
			    padding: 10px 20px 20px 10px;
		}
		hr {
			border: 0;
			border-top: 1px solid rgba(36, 72, 103, 0.5);
			
			box-shadow: 0 2px 4px 0 rgba(17,33,61,0.23);			
		}


		.menuFooter {
			display: block;
			margin: 0 auto;
			width: 90%;
			height: 100%;
			ul {
				height: 100%;
				margin: 0;
				list-style: none;
				text-align: justify;
				&:after {
					content: "";
					margin-left: 100%;					
				}
				li {
					display: inline-block;
					&:hover ul {
						display: block;
						position: absolute;
					}
					a {
						height: @bottomHeight;
						color: #ffffff;
						text-decoration: none;
						font-size: 1.05em;
						font-weight: 500;
						text-align: center;
						vertical-align: middle;
						display: table-cell;
						&:hover {
							color: #c9e0ff;
						}
					}
					ul {
						display: none;
						margin: 0;
						list-style: none;						
					}
				}
			}
		}

		
		
	}
}

// FORM CSS
.contact_form {
max-width: 500px;
width: 100%;
margin: 0 auto;
}
.contact_form input{
box-sizing: border-box;
display: block;
border: none;
box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.11);
padding: 10px 20px;
width: 100%;
margin: 10px 0;
outline: none;
}
.contact_form input[type="submit"]{
background: @colorBlue;
border: none;
box-shadow: 0px 2px 0 1px #3b6aa3;
border-radius: 5px;
color: white;
text-transform: uppercase;
font-weight: 600;
width: 100%;
cursor: pointer;
transition: 0.3s;
font-size: 1.2em;
}
.contact_form input[type="submit"]:hover{
background: @colorBlueDark;
box-shadow: 0px 2px 0 1px #4f83c3;
}
.contact_form textarea {
box-sizing: border-box;
display: block;
border: none;
box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.11);
padding: 10px 20px;
width: 100%;
margin: 10px 0;
outline: none;
}
.contact_form .error {
	font-size: .9em;
}
.contact_form sup {
	color: #ff4141;
}
.feedBackValid {
	font-size: 2em;
	text-align: center;
	padding: 30px 0 30px 0;
}
.radio {
	input {
		width: auto;
		display: inline;
	}
	input[type=radio]:checked + label:before, input[type=checkbox]:checked + label:before {
	    content: "•";
	    color: #2f406f;
		font-size: 51px;
		text-align: center;
		line-height: 26px;
		font-family: arial;
	}
	label:before {
	    content: "";
	    display: inline-block;
	    width: 25px;
	    height: 25px;
	    margin-right: 10px;
	    background-color: #ffffff;
	    box-shadow: inset 0px 1px 7px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.8);
	    vertical-align: middle;
	    cursor: pointer;
        border-radius: 20px;
	}	
	input[type=radio], input[type=checkbox] {
	    display: none;
	}	
}
.checkbox {
	text-align: left;
	font-size: .9em;
	input {
		display: inline-block;
		width: auto;
		margin-right: .5em;
	}
	label {
		text-align: left;
	}
	
}

// END FORM CSS 
// STYLE 
.rezhimGrafika {
	display: flex;
	.row {
		flex-flow: column;	
		margin-right: .5em;
	    text-align: end;
		.week {
			
		}
		.box {
/*
			width: 24px;
			height: 24px;
			background: @colorBlueLight;
			border-radius: 50%;
*/
			width: 0; height: 0;
			border: 14px solid transparent;
			border-bottom-color: @colorBlueLight;
			position: relative; top: -10px;			
			&:after {
				content: "";
				width: 0; height: 0;
				position: absolute; left: -14px; top: 14px;
				border: 14px solid transparent;
				border-top-color: @colorBlueLight;	
			}		
		}
	}
	.sat, .sun {
		.week {
			color: @colorRed
		}
		.box {
			border-bottom-color: @colorRed;
			&:after {
				border-top-color: @colorRed;	
			}
		}		
	}
}

// STYLE END

		.wrapNews {
			width: 100%;
			font-size: 0;
		    -webkit-column-width: 100%;
		    -moz-column-width: 100%;
		    column-width: 100%;
		    -webkit-column-count: 2;
		    -moz-column-count: 2;
		    column-count: 2;
		    -webkit-column-gap: 30px;
		    -moz-column-gap: 30px;
		    column-gap: 30px;
		    -webkit-column-rule: 1px solid #ccc;
		    -moz-column-rule: 1px solid #ccc;
		    column-rule: 1px solid #ccc;			
			.newsBlock {
				width: 100%;
				display: inline-block;
				vertical-align: top;
				margin-right: 5%;
				margin-bottom: 40px;
				&:last-child {
					margin-right: 0;
				}
				.titleNews {
					display: block;
					font-size: 19px;
					padding: 0 0 .5em 0;
					a {
						color: @colorBlue;
						text-decoration: none;
						&:hover {
							color: @colorBlueLight;
						}
					}
				}
				.dateNews {
					display: block;
					font-size: 14px;
					padding: .2em 0 0 0;
					text-align: right;
					color: #8c8c8c;
				}
				.descNews {
					display: block;
					font-size: 15px;
					text-align: justify;
					a {
						color: @colorText;
						text-decoration: none;
						&:hover {
							text-decoration: underline;
						}
					}
				}
				.imgNews {
					display: block;
					overflow: hidden;
					&:hover ~ .descNews a {
						text-decoration: underline;
					}
					img {
						width: 100%;
						border: 1px solid #cbcbcb;
					    box-sizing: border-box;
					}
					img[src=""] {
					    display: none;
					}
				}
			}
		}
.pagination {
			float: right;
			list-style: none;
			.active {
				font-size: 1em;
				font-weight: bold;
				a {
					color: #1b88cb;
				}
			}
			.disabled {
				color: #8e8e8e;
			}
			li {
				display: inline-block;
				a {
					color: #343434;
					text-decoration: none;
					display: inline;
					padding: 0 3px 0 3px;
					&:hover {
						color: #1b88cb;
					}
				}
				span {
					padding: 0 3px 0 3px;
				}
			}
		
	}