/*- Debug -*/
    .debug-fixed{
    	position: fixed;
    	background-color: var(--gray);
    	top: 0;
    	left: 0;
    	z-index: 1000;
    	padding: 20px;
    	border: 2px solid var(--red);
    	border-radius: 5px;
    	max-width: 100vw;
    	max-height: 100vh;
    	width: 20vw;
    	height: 20vh;
    	overflow: auto;
    	resize: auto;
    }
    .debug{
    	background-color: var(--gray);
    	padding: 20px;
    	border: 2px solid var(--red);
    	border-radius: 5px;
    	overflow: auto;
    	max-width: 100vw;
    	max-height: 100vh;
    }
/*- Debug -*/
/*- Variables -*/
	:root{
		--white: #ecf0f1;
		--blue: #2c3e50;
		--lightblue: #34495e;
		--black: #1e272e;
		--gray: #808e9b;
		--lightgray: #d2dae2;
		--link: #0984e3;
		--lightlink: #74b9ff;
	}
/*- Variables -*/
/*- Reset -*/
	*{
		margin: 0;
		padding: 0;
		border: none;
		outline: none;
		box-sizing: border-box;
		font-family: 'Roboto', Verdana, sans-serif;
		font-size: 16px;
		color: var(--black);
	}
	a{
		text-decoration: none;
	}
	html{
		width: 100%;
		height: 100%;
	}
	body{
		width: 100%;
		min-height: 100%;
		overflow: hidden;
		position: relative;
	}
    hr{
    	width: 100%;
    	border: none;
    	height: 1px;
    	margin: 10px 0;
    	background-color: var(--black);
    }
    button, input, select, textarea{
    	border: none;
    	background: none;
    	outline: none;
    }
    textarea{ resize: none; }
    label, button, input[type="submit"], .button{
    	cursor: pointer;
    }
	.hid-block{
		display: block;
		overflow: hidden;
		width: 0px;
		height: 0px;
	}
	.no-box{
		display: none;
	}
/*- Reset -*/
/*- Pagination -*/
	.pag{
		padding: 20px 0;
	}
	.pag .pages p{
		text-align: center;
		width: 100%;
		margin-bottom: 20px;
		color: var(--white);
	}
	.pag .pagen ul{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		width: 100%;
		justify-content: center;
	}
	.pag .pagen ul li{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		justify-content: center;
		-ms-align-items: center;
		align-items: center;
		background-color: var(--at);
		margin: 0 3px;
		border-radius: 3px;
		color: var(--white);
	}
	.pag .pagen ul li a{
		padding: 10px 10px;
		display: block;
		max-width: 30px;
		max-height: 40px;
	}
/*- Pagination -*/
/*- Scroll -*/
	.scroll{
		overflow: auto;
	}
	.scroll::-webkit-scrollbar-thumb{
	    border-width: 1px 1px 1px 2px;
	    border-color: #777;
	    background-color: var(--at);
	}
	.scroll::-webkit-scrollbar-thumb:hover{
	    border-width: 1px 1px 1px 2px;
	    border-color: #555;
	    background-color: #777;
	}
	.scroll::-webkit-scrollbar-track{
	    border-width:0;
	}
	.scroll::-webkit-scrollbar-track:hover{
	    border-left: solid 1px #aaa;
	    background-color: #eee;
	}
	.nav-scroll::-webkit-scrollbar{
	    width: 0px;
	}
	.scroll-none::-webkit-scrollbar{
	    width: 0px;
	}
	.main-scroll::-webkit-scrollbar{
	    width: 2px;
	}
	.no-scroll{
		overflow: hidden;
	}
/*- Scroll -*/
/*- Header -*/
	.header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
	}
	.header .left,
	.header .right{
		width: 30%;
		padding: 30px 8px;
	}
	.header .center{
		width: 40%;
	}
	.header .left a{
		display: block;
		width: 100px;
	}
	.header .left a img{
		width: 100%;
	}
	.header .center h1{
		text-align: center;
		font-size: 24px;
		color: var(--blue);
	}
	.header .center .address{
		text-align: center;
		color: var(--blue);
	}
	.header .right{
		text-align: right;
	}
	.header .right a{
		font-size: 18px;
		display: block;
		color: var(--blue);
	}
	.header .right span{
		font-size: 12px;
		display: block;
		color: var(--blue);
	}
/*- Header -*/
/*- Nav -*/
	nav{
	}
	nav .navigation{
		display: flex;
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
		background-color: var(--lightblue);
	}
	nav .navigation label{
		display: block;
		transition: 0.3s;
		text-transform: uppercase;
		color: var(--white);
	}
	nav .navigation span,
	nav .navigation a{
		color: var(--white);
		display: block;
		width: 100%;
		padding: 16px;
	}
	nav .navigation label:hover,
	nav .navigation label.active{
		background-color: var(--blue);
	}
	.course-list .navigation{
		padding: 20px 0;
		display: flex;
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
	}
	.course-list .navigation label{
		background-color: var(--lightgray);
		padding: 10px;
		margin-right: 10px;
		border-radius: 5px;
		color: var(--blue);
		transition: 0.3s;
	}
	.course-list .navigation label.active,
	.course-list .navigation label:hover{
		background-color: var(--blue);
		color: var(--lightgray);
	}
/*- Nav -*/
/*- Main -*/
	.main{
		padding: 20px;
		max-width: 1100px;
		width: 100%;
		margin: 0 auto 10px;
	}
	.main p{
		text-align: center;
		font-size: 20px;
		margin-bottom: 30px;
	}
	.main p a{
		display: inline-block;
		padding: 20px 30px;
		background-color: var(--blue);
		color: var(--white);
		text-transform: uppercase;
		transition: 0.2s;
	}
	.main p a:hover{
		background-color: var(--lightblue);
	}
	.main .sect-name{
		text-align: center;
		font-size: 20px;
		background-color: none;
		margin-bottom: 20px;
	}
/*- Main -*/
/*- Courses -*/
	.course-block{
		display: flex;
		max-width: 1100px;
		width: 100%;
		margin: 0 auto 10px;
		justify-content: space-between;
		background-color: var(--lightgray);
	}
	.course-block .left,
	.course-block .centre,
	.course-block .right{
		padding: 10px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.course-block .left{
		width: 30%;
	}
	.course-block .left h2{
		margin-bottom: 10px;
	}
	.course-block .left span{
		font-size: 12px;
	}
	.course-block .centre{
		width: 60%;
	}
	.course-block .right{
		width: 10%;
		justify-content: center;
		font-weight: bold;
	}
/*- Courses -*/
/*- main-about-us -*/
	.about-us-info{
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
		padding: 10px;
	}
	.main-about-us p,
	.about-us-info p{
		padding: 10px 0;
	}
	.main-about-us h3,
	.about-us-info h3{
		padding: 20px 0;
		font-size: 20px;
	}
	.about-us-info a,
	.main-about-us a{
		text-decoration: underline;
		color: var(--link);
		transition: ;
	}
	.about-us-info a:hover,
	.main-about-us a:hover{
		color: var(--lightlink);
	}
	ul{
		padding-left: 40px;
	}
	ul li{
		padding: 10px 0;
	}
	.bold{
		font-weight: bold;
	}
	.bunner{
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: right 0;
		padding: 20px;
	}
	.bunner h2{
		font-size: 26px;
		font-weight: normal;
		padding: 100px;
	}
	.drop-section i{
		padding: 10px;
		font-size: 30px;
	}
	.main-about-us{
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
	}
	.main-about-us label input{
		display: none;
	}
	.main-about-us label{
		display: block;
		width: 100%;
		padding: 20px 10px;
		/*background-color: var(--lightgray);*/
		transition: 0.2s;
		margin-bottom: 6px;
	}
	.main-about-us label:hover,
	.main-about-us label.active{
		background-color: var(--gray);
		color: var(--white);
	}
	.main-about-us .drop-section{
		margin-bottom: 6px;
		padding: 10px;
		background-color: var(--lightgray);
	}
	.table{
		width: 100%;
	}
	table *{
		font-size: 12px;
		text-align: center;
		border: 1px solid var(--black);
	}
	table th,
	table td{
		padding: 6px;
	}
	.section-name{
		display: block;
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
		padding: 20px 10px;
		background-color: var(--blue);
		color: var(--white);
		text-align: center;
	}
	.section-name-white{
		display: block;
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
		padding: 20px 10px;
		background-color: var(--white);
		color: var(--blue);
		text-align: center;
	}
	.svidetelstva{
		display: flex;
		justify-content: space-around;
		max-width: 1100px;
		width: 100%;
		margin: 0 auto 20px;
		cursor: pointer;
		padding: 20px 10px;
		background-color: var(--blue);
	}
	.svidetelstva .svid{
		width: 20%;
	}
	.svidetelstva .svid img{
		width: 100%;
	}
/*- main-about-us -*/
/*- about us -*/
	.about-us h3{
		text-align: center;
		padding: 10px;
		font-size: 20px;
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
	}
	.about-us .text{
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
	}
	.photos-wrapper{
		display: flex;
		flex-wrap: wrap;
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
	}
	.photos-wrapper .photo{
		width: 16.666666%;
		padding: 6px;
	}
	.photos-wrapper .photo img{
		width: 100%;
		border: 1px solid var(--black);
	}
/*- about us -*/
/*- news -*/
	.news{
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
	}
	.news p{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30px 0;
		font-size: 3em;
		opacity: 0.2;
	}
/*- news -*/
/*- contacts -*/
	.contacts-wrap{
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-top: 50px;
	}
	.contacts-wrap h3,
	.contacts-wrap p,
	.contacts-wrap a.main-phone{
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
		color: var(--blue);
		transition: 0.3s;
	}
	.contacts-wrap a.main-phone{
		margin-bottom: 40px;
	}
	.contacts-wrap a.main-phone:hover{
		font-weight: bold;
	}
	.contacts-wrap div{
		padding: 10px;
	}
	.contacts-wrap div a{
		display: block;
		text-align: center;
		padding: 10px;
		transition: 0.3s;
		border-radius: 6px;
	}
	.contacts-wrap div a:hover{
		background-color: var(--lightgray);
	}
/*- contacts -*/
/*- sow hide -*/
	.navigation{
		position: relative;
	}
	.drop-about{
		position: absolute;
		top: 100%;
		left: 0;
		background-color: var(--lightblue);
		z-index: 100;
	}
	/*.course-list,
	.about-us,
	.news,*/
	.course-wrapper,
	.drop-about{
		overflow: hidden;
		height: 0px;
	}
	/*.course-list.show,
	.about-us.show,
	.news.show,*/
	.course-wrapper.show,
	.drop-about.show{
		overflow: hidden;
		height: auto;
	}
/*- sow hide -*/
/*- Footer -*/
	footer{
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	.footer-2 p{
		background-color: var(--lightgray);
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
		padding: 10px;
	}
	.footer-2 a{
		text-decoration: underline;
		color: var(--link);
		transition: 0.2s;
	}
	.footer-2 a:hover{
		color: var(--lightlink);
	}
	.footer{
		background-color: var(--blue);
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
		padding: 10px;
	}
	.footer .contacts{
		width: 50%;
		display: flex;
		flex-wrap: wrap;
	}
	.footer .contacts a{
		display: flex;
		width: 100%;
		padding: 6px;
		align-items: center;
		border-radius: 50px 0 0 50px;
		transition: 0.3s;
	}
	.footer .contacts a *{
		color: var(--white);
	}
	.footer .contacts a .icon{
		display: flex;
		width: 40px;
		height: 40px;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--white);
		border-radius: 50%;
		margin-right: 10px;
	}
	.footer .map{
		width: 50%;
		align-self: stretch;
	}
	.footer .contacts a:hover{
		background-color: var(--white);
	}
	.footer .contacts a:hover span i,
	.footer .contacts a:hover span{
		color: var(--blue);
	}
	.footer .contacts a:hover span.icon{
		border-color: var(--blue);
	}
/*- Footer -*/
/*- Photo -*/
	.photo-one-wrapper{
		position: fixed;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
		background-color: var(--black);
		z-index: 200;
		transition: 0.3s;
		overflow: hidden;
		text-align: center;
	}
	.photo-one-wrapper.active{
		width: 100vw;
		height: 100vh;
	}
	.photo-one-wrapper img{
		position: absolute;
		max-width: 100%;
		max-height: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: 0.8s;
	}
	.photo-one-close{
		position: fixed;
		top: 0;
		right: 0;
		z-index: 201;
		display: none;
	}
	.photo-one-close.active{
		display: block;
	}
	.photo-one-close span{
		display: block;
		padding: 20px;
		cursor: pointer;
	}
	.photo-one-close i{
		color: var(--white);
		font-size: 24px;
	}
/*- Photo -*/
/*- Media -*/
	@media only screen  and (max-width: 860px){
		/*- Header -*/
			.header .left{
				width: 10%;
				padding-left: 10px;
			}
			.header .center{
				display: none;
			}
			.header .right{
				width: 90%;
			}
			.header .left a{
				width: 100px;
			}
			.header .left a img{
				width: 100%;
			}
			.header .right a,
			.header .right span{
				text-align: right;
			}
			.bunner{
				padding: 10px;
			}
			.bunner h2{
				font-size: 20px;
				padding: 50px;
			}
		/*- Header -*/
		/*- Nav -*/
			nav .navigation span,
			nav .navigation a{
				padding: 12px;
				font-size: 10px;
			}
			.course-list .navigation{
				padding: 12px 0;
				justify-content: center;
				flex-wrap: wrap;
			}
			.course-list .navigation label{
				padding: 8px;
				margin-right: 6px;
				font-size: 12px;
				margin-bottom: 6px;
			}
			.course-list .navigation label.active,
			.course-list .navigation label:hover{
				background-color: var(--blue);
				color: var(--lightgray);
			}
		/*- Nav -*/
		/*- Main -*/
			.main{
				padding: 10px;
			}
			.main p{
				font-size: 16px;
				margin-bottom: 20px;
			}
			.main p a{
				padding: 10px 30px;
			}
			.main .sect-name{
				font-size: 18px;
			}
		/*- Main -*/
		/*- Footer -*/
			.footer{
				flex-wrap: wrap;
			}
			.footer .contacts{
				width: 100%;
			}
			.footer .map{
				width: 100%;
			}
			.footer-2 p{
				font-size: 12px;
			}
			.footer-2 a{
				font-size: 12px;
			}
		/*- Footer -*/
		/*- about us -*/
			.about-us h3{
				font-size: 12px;
			}
			.about-us .text{
				text-align: center;
				padding: 10px;
			}
			.photos-wrapper{
				justify-content: center;
			}
			.photos-wrapper .photo{
				width: 25%;
			}
		/*- about us -*/
		/*- news -*/
			.news p{
				font-size: 1.5em;
			}
		/*- news -*/
		/*- contacts -*/
			.contacts-wrap div{
				margin-bottom: 20px;
			}
		/*- contacts -*/
	}
/*- Media -*/