/* CSS Document */

#container{
	width:100vw;
	margin:12vw auto 0 auto;
	position:relative;
	padding-bottom:10vw;
}



#main-info{
	height:auto;
	width:100vw;
	position:relative;
	overflow:hidden;
}

#main-info .site-name{
	float:none;
	text-align:center;
	font-size:6vw;
	padding:2vw 0 0 0;
	line-height:1.5;
	background: linear-gradient(180deg, #6D5F59 0%, #5C3626 100%);
}

#main-info .float-right-pc{
	float:none;
}

#main-info .site-name-phone{
	position:fixed;
	top:0;
	width:100vw;
	height:12vw;
	z-index:500;
}

#main-info .site-name em{
	font-size:100%;
}

#main-info .site-name a{
	color:#fff;
}

#main-info .site-name a:hover{
	text-decoration:underline;
}

#main-info .site-name span{
	font-size:5vw;
	line-height:1.8;
}

.viber-chat{
	position:relative;
	top:4vw;
}

#main-info .site-name .viber-chat img{
	width: 12vw;
	height: 12vw;
}

#messendzhery-i-telefon{
	position:fixed;
	left:0vw;
	bottom:0vw;
	padding:0vw 0vw;
	width:100vw;
	height:12vw;
	display:block;
	border-radius:4vw;
	z-index: 1000;
}

#messendzhery-i-telefon .viber-chat img{
	width:10vw;
	height:10vw;
	position:relative;
	bottom:-1vw;
}

#messendzhery-i-telefon a{
	color:#000;
	text-decoration:none;
	font:bold 6vw Arial, Helvetica, sans-serif;
	padding-left:2vw;
}

#pay-online{
	position:fixed;
	left:0vw;
	bottom:0vw;
	width:100vw;
	height:12vw;
	display:block;
	z-index: 1000;
}

#pay-online form button{
	width:40vw;
	height:12vw;
	border-radius:4vw;
	float:left;
	margin-left:7vw;
	font:normal 6vw/1.5 Arial, Helvetica, sans-serif;
}

/* Dropdown Button */

.dropbtn{
    padding: 0;
    font-size: 16px;
	width:2.5em;
	height:2.5em;
    border: none;
    cursor: pointer;
	display: block;
	background: rgba(224,224,224,0.00);
}

.dropbtn img{
	width: 100%;
	height: 100%;
	position:relative;
	top: 0;
	left: 0;
	z-index:-1;
}

.display-pc{
	display: none;
}

.display-mob{
	display:block;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    /*background-color: #2980B9;*/
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: fixed;
	top:1.5vw;
	left:1.5vw;
    display: inline-block;
	z-index:800;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position:fixed;
	left: 0;
	top:3em;
	color:#fff;
	width:100vw;
    z-index: 1;
}

/* Links inside the dropdown */
#main-info .site-name .dropdown-content a {
    color:#fff;
   /* padding: 12px 16px;
	display: block;*/
    text-decoration: none;
}

.dropdown-content a {
    color:#fff;
   /* padding: 12px 16px;
	display: block;*/
    text-decoration: none;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;} 

#copy{
	margin:10vw 5vw;
	text-align:center;
	font:4vw Arial, Helvetica, sans-serif;
}

#copy a:hover{
	text-decoration:none;
}

#content{
	margin:0 0 5vw 0;
	font:normal 4.5vw/1.5 Arial, Helvetica, sans-serif;
	padding-top:10vw;
}

.main-img{
	top:-10vw;
}

#content #ukr, #content #rus{
	top:2vw;
	/*top:27vw;*/
	z-index:100;

}

#content #ukr{
	left:5vw;
}

#content #rus{
	left:25vw;
}

#content .page-top{
	position:absolute;
	top:3vw;
	top:10vw;
	/*top:35vw;*/
	left:3vw;
	font: 3.7vw/1.5 Arial, Helvetica, sans-serif;
	text-align:left;
	margin: 0;
}

#content .page-top2{
	position:relative;
	top:4vw;
	left:0;
	padding-left:3vw;
	padding-top:2vw;
	padding-bottom:3vw;
}

#content .zapis{
	width:90vw;
	height:11vw;
	text-align:center;
	margin:0 auto;
}

#content .zapis-main{
	position:absolute;
	left:5vw;
	top:60vw;
	/*top:86vw;*/
}

#content .zapis a{
	text-decoration: none;
	color:#000;
	font-size:6vw;
	line-height:11vw;
}

#content a{
	text-decoration:underline;
}

#content a:hover{
	text-decoration:none;
}

#content p{
	/*margin:20px 0;*/
	padding:4vw 5vw;
}

#content h3{
	font:bold 5.5vw/1.5 Arial, Helvetica, sans-serif;
	text-align:center;
	padding:5vw 5vw;
}

#content h2{
	font:bold 6vw/1.5 Arial, Helvetica, sans-serif;
	text-align:center;
	padding:5vw 5vw;
}

#content h1{
	font:bold 7vw/1.5 Arial, Helvetica, sans-serif;
	text-align:center;
	padding:2vw 2vw 2vw 2vw;
}

#content ul, #content ol{
	padding:2vw 5vw 2vw 10vw;
}

#content ul li, #content ol li{
	/*margin:10px 0;*/
	padding:3vw 0;
}

#content ul{
	list-style-type:disc;
}

#content #in-article, #content .in-article{
	width:100vw;
	float:none;
	text-align:left;
	font:normal 3.2vw/1.5 Arial, Helvetica, sans-serif;
	padding:1vw 0;
	margin-left:0;
	margin-bottom:2vw;
}

#content #in-article ul, #content .in-article ul{
	padding:1vw 5vw 1vw 10vw;
	list-style-type:disc;
}

#content #in-article ul ul, #content .in-article ul ul{
	padding:2vw 5vw 0 10vw;
	list-style-type:circle;
}

#content #in-article ul li, #content .in-article ul li{
	padding:1vw 0;
}

#content #in-article .in-article-head, #content .in-article .in-article-head{
	list-style:none;
	font-size:100%;
	font-weight:bold;
	text-align:center;
}

#content #in-article a, #content .in-article a{
	text-decoration:underline;
}

#content #in-article a:hover, #content .in-article a:hover{
	text-decoration:underline;
}

.align-center{
	text-align:center;
}

.align-left{
	text-align:left;
}

.align-right{
	text-align:right;
}

.psiholog{
	clear:both;
}

.dashline{
	width:100%;
	height:1px;
	border-bottom:1px dashed #000;
	margin:15px 0;
}

.zaglushka{
	clear:both;
}

#form{
	width:550px;
	height:280px;
	margin:18px auto 0 auto;
}

#Indeks{
	width:550px;
	height:400px;
	margin:18px auto 0 auto;
}

.vopros-otvet{
	height:700px;
	overflow:auto;
}

.img-float-left{
	float:left;
	padding:10px 15px 10px 0;
}

.img-float-right{
	float:right;
	padding:10px 0 10px 15px;
}

.cost{
	font-size:150%
}

#counters{
	padding:30px;
	clear:both;
	text-align:center;
}

#map{
	text-align:center;
}

#content #questions p{
	padding:20px 0;
	border-bottom:1px dashed #036;
}

#content .ansver{
	text-align:right;
	/*font-weight:bold;*/
}

#content .ansver a{
	text-decoration:underline;
}

#content .ansver a:hover{
	text-decoration:none;
}

.pronouncement{
	text-align:right;
	font-style:italic;
	font-weight:bold;
}

#content .mail-zapis{
	box-shadow:2vw 2vw 5vw rgba(0,0,0,0.5);
	width:90vw;
	margin:10vw auto;
	border-radius:2vw;
	float:none;
}

#content .mail-zapis p{
	width:74vw;
	margin:0 auto;
}

#content .mail-zapis p input, #content .mail-zapis p textarea{
	padding:2vw 0;
	width:100%;
}

#content .mail-zapis .submit{
	font-size:6vw;
	height:12vw;
	width:100%;
	border-radius:2vw;
}

.video-content{
	text-align:center;
	margin-bottom:5vw;
}

.video-content iframe, iframe{
	width:100vw;
	height:75vw;
}

.youtube, .youtube-map{
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        display: inline-block;
        overflow: hidden;
        transition: all 200ms ease-out;
        cursor: pointer;
		width:100vw;
	height:75vw;
    }
.youtube img, .youtube-map img{
	width:100%;
	height:auto;
}
    .youtube .play, .youtube-map .play, #map  .youtube-map .play{
        background: url('https://okr.kiev.ua/video/youtube-play-btn.png') no-repeat; /*ВАЖНО: здесь укажите адрес до изображения*/
        background-position: 0 0;
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
        position: absolute;
        height: 10vw;
        width: 14vw;
        transition: none;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
    .youtube:hover .play, .youtube-map:hover .play {
        background-position: 0 0;
    }

.img-1000-667{
	width:100vw;
	height:66.7vw;
}

.img-1000-653{
	width:100vw;
	height:65.3vw;
}

.img-450-380{
	width:90vw;
	height:76vw;
	margin:0 auto;
}

.img-355-533{
	width:90vw;
	height:135vw;
	margin:0 auto;
}

.img-355-533 img{
	width:100%;
	height:100%;
}

.img-492-327{
	width:90vw;
	height:60vw;
	margin:0 auto;
}

.img-449-558{
	width:90vw;
	height:112vw;
	margin:0 auto;
}

.img-130-110{
	width:26vw;
	height:22vw;
}

/*.img-300-215{
	width:20vw;
	height:14.3vw;
}

.img-215-300{
	width:14.3vw;
	height:20vw;
}*/

.img-300-215{
	width:30vw;
	height:21.5vw;
}

.img-215-300{
	width:21.5vw;
	height:30vw;
}

.width-50{
	width:100vw;
}

.width-45{
	width:90vw;
}

.width-60{
	width:100vw;
}

.img-float-left-sert-footer div{
	float:left;
	/*height:20vw;*/
	height:30vw;
}

.img-float-left-sert-footer div img{
	width:100%;
	height:auto;
	max-height:100%;
}

#content .fl-l{
	float:none;
}

#content .fl-r{
	float:none;
}

#content .bg-6D5F59 .width-50 li{
	border-bottom:1px solid rgba(65, 40, 29, 0.5);
}

#content .bg-6D5F59 .width-50 ul{
	padding-left:5vw;
	list-style:none;
	padding-top:0;
	padding-bottom:0;
}

#content .lech{
	padding-bottom:3vw;
}

#content .lech .zapis{
	margin-left:auto;
}

.cards{
	padding:5vw 3vw;
}

.card{
	width:20vw;
	height:12.5vw;
	float:left;
	margin:5vw 0 0 5vw;
	border-radius:3px;
}

.cards .card .card-img{
	width:10vw;
	height:6.4vw;
	margin:2.5vw auto 0 auto;
	text-align:center;
}

.card p{
	text-align:center;
	position:relative;
	top:-1vw;
	font-size:2vw;
}

#content .card p{
	font-size:2vw;
}

#content .pc-4-cols{
	width:40vw;
	height:40vw;
	border-width:1vw;
	border-radius:2vw;
	float:left;
	margin:4vw 4vw;
}

#content .pc-4-cols a .img-box{
	width:20vw;
	height:20vw;
	margin:3vw auto;
}

#content #treningi-recl{
	width:94vw;
	height:23vw;
	margin:4vw auto;
	text-align:center;
	box-shadow:0px 0px 3vw #FBB03B;
border-radius:5vw;
}

#content #treningi-recl a{
	display: block;
	padding:3vw 0 2vw 15vw;
	padding:3vw 0 2vw 0;
	font-size:6vw;
}

#content #treningi-recl a img{
	position: absolute;
	top:2vw;
	left:0;
	width:18vw;
	height:18vw;
}

#content #treningi-recl a span{
	font-size:4.5vw;
}

#content .preim{
	width:100vw;
	font:bold 6.4vw/1.5 Arial, Helvetica, sans-serif;
	text-align:center;
	margin-top:20vw;
}

#content .preim h2, #content .pc-3-cols h2{
	font-size:7.5vw;
	line-height:2;
	text-align:center;
}

.preim div{
	width:75%;
	float:none;
	margin-left:0;
	margin:0 auto;
	padding:2vw 0;
	border-radius:24vw;
	margin-bottom:2vw;
}

.preim a{
	text-decoration:none;
}

.preim div .preim-img{
	width:26vw;
	height:20vw;
}

.pc-3-cols .min-550{
	min-height:0;
}

.pc-3-cols .min-200{
	min-height:0;
}

.pc-1-3-cols{
	width:80vw;
	display:block;
	background: rgba(255, 255, 255, 0.85);
box-shadow: 0 1vw 2vw rgba(109, 95, 89, 0.15);
border-radius: 7vw;
	margin:7vw auto;
}

#content .pc-1-3-cols a{
	display:block;
	width:90%;
	padding:5vw 5%;
	text-decoration:none;
	color:#000;
}

#content .pc-1-3-cols a .img-130-110{
	margin:0 auto;
}

#cost-all-page{
	width:100vw;
}

#cost-all-page div{
	width:80vw;
	margin:3vw 10vw 5vw 10vw;
	height:auto;
	float:none;
	border-radius:2vw;
	box-shadow: 1vw 1vw 2vw rgba(0,0,0,0.5);
	text-align:center;
}

#cost-all-page div p{
	padding:3vw;
}

#cost-all-page div .cost-all-page-name{
	display:block;
	padding:none;
	font-weight:bold;
	min-height:8vw;
	border-top-left-radius:2vw;
	border-top-right-radius:2vw;
}

#content #cost-all-page div .cost-all-page-name-small{
	font-size:100%;
	font-weight:normal;
}

.cost-all-page{
	width:80vw;
	margin:0px 10vw 3vw 10vw;
	padding-bottom:1vw;
	border-radius:5vw;
	box-shadow: 2vw 2vw 4vw rgba(0,0,0,0.5);
	text-align:center;
	display:none;
}

#content .cost-all-page p{
	padding:2vw;
	margin:0;
}

#content .cost-all-page-link{
	width:70;
	margin:1vw auto 4vw auto;
}

#content .cost-all-page-link a{
	display:block;
	width:100%;
	text-decoration:none;
	font-size:5vw;
	line-height:10vw;
}

#content .cost-all-page-link a, #content .cost-all-page-link-2 a{
	font-weight:bold;
}