@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=cyrillic');
*{
	margin: 0;
	padding: 0;
	text-decoration: none;
	font-weight: normal;
}

body{

	font-family: "Open Sans", "Segoe UI";
	--main-color: #1e824c;
	--main-color-light: #36b871;
}


header{
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	z-index: 100;
	width:22%;

}

	header .visible{
		width: 100%;
		background-color: #222;	
		box-sizing: border-box;
		padding: 20px 25px;
		color: #999;
		height: 100%;
		position: relative;
		background-size: 100% 100%;
		z-index: 100;
	}

		header .visible a.logo{
			display: block;
			margin-bottom: 40px;
		}
		header .visible img{
			width: 70%;
			display: block;
			margin: 0 auto;
		}

		header .visible nav{
			display: block;
		}
			header .visible nav ul{
				margin: 0;
				padding: 0;
			}
			header .visible nav li{
				display: block;
				border-bottom: 1px solid #444;
				
			}
			header .visible nav>ul>li{
				background-size: 20px auto;
				background-position: -20px center;
				background-repeat: no-repeat;
				transition: .3s;
				background-image: url("/img/header-portfolio-icon.png");
			}
			header .visible nav>ul>li.main{
				background-image: url("/img/header-main-icon.png");
			}
			header .visible nav>ul>li.service{
				background-image: url("/img/header-service-icon.png");
			}
			header .visible nav>ul>li.breef{
				background-image: url("/img/header-breef-icon.png");
			}
			header .visible nav>ul>li.about{
				background-image: url("/img/header-about-icon.png");
			}	
			header .visible nav>ul>li.courses{
				background-image: url("/img/header-courses-icon.png");
			}	
			header .visible nav>ul>li.blog{
				background-image: url("/img/header-blog-icon.png");
			}
			header .visible nav>ul>li:hover{
				color: var(--main-color);
				background-position: 8px center;
				padding-left: 28px;
			}
				header .visible nav li a{
					display: block;
					color:#999;
					text-decoration: none;
					font-family: "Segoe UI", "Open Sans";
					font-weight: 400;
					text-transform: uppercase;
					padding: 12px 8px;
					background-position: right center;
					background-size: auto 14px;
					background-repeat: no-repeat;
					background-image: url('/img/nav-arrow.png')

				}
				header .visible nav li a:last-child{
					background-size: 0;
				}
				header .visible nav li:hover>a{
					color: var(--main-color);
				}
			header .visible nav li ul{
				display: none;
				position: absolute;
				height: 100%;
				width: 15%;
				-overflow: auto;
				z-index: 100;
			}
			header .visible nav li ul::-webkit-scrollbar{
				background-color: #222;
				width: 10px;
			}
			header .visible nav li ul::-webkit-scrollbar-track{
				background-color: #222;
				width: 10px;
			}
			header .visible nav li ul::-webkit-scrollbar-thumb{
				background-color: #333;
				width: 10px;
			}
			header .visible nav li ul:before{
				position:absolute;
				content:"";
				width:25px;
				height: 100%;
				display: block;
				background-color:transparent;
				left:-25px;
			}
			header .visible nav li:hover>ul{
				display: block;
				top: 0;
				height: 100%;
				width: 100%;
				box-sizing: border-box;
				left: 100%;
				margin-left: 0;
				background-color: #222;
				padding: 15px 25px;
			}
				header .visible nav li li{
					border-bottom: 1px dotted #444;
				}
					header .visible nav li li a{
						text-transform: none;
						font-family: "Open Sans";
						font-weight: 300;
						line-height: 1.1;
						font-size: 14px;
					}
	header .visible .contacts{
		margin-top: 40px;
		position: absolute;
		bottom: 0;
		width: 100%;
		left: 0;
		padding: 10px 20px;
		box-sizing: border-box;
		
	}
	
	header .visible .contacts .disclaimer {
	    font-size: 12px;
	    padding: 7px 10px;
	    background-color: #ccc;
	    color: #a00;
	    border-radius: 3px;
	    margin-bottom: 7px;
	}
	
		header .visible .contacts .message{
			display: block;
			width: 100%;
			background-color: var(--main-color);
			color:#fff;
			padding: 8px 10px;
			text-align: center;
			border-radius: 4px;
			box-sizing: border-box;
			font-weight: 300;
			text-transform: uppercase;
			font-size: 14px;
			margin-bottom: 15px;
			/*box-shadow: 1px 1px 3px #444;*/

		}

		header .visible .contacts .ctcts{

		}
			header .visible .contacts .ctcts ol{

			}
				header .visible .contacts .ctcts li{
					display: block;
				}
					header .visible .contacts .ctcts li a{
						color: #ccc;
						display: block;
						font-size: 14px;
						line-height: 1;
						padding: 3px 0;
						padding-left: 23px;
						background-size: auto 80%;
						background-position: left center;
						background-repeat: no-repeat;
						font-weight: 300;
						margin-bottom: 2px;

					}
					header .visible .contacts .ctcts li a.tel{
						background-image: url("/img/nav-phone.png");
					}
					header .visible .contacts .ctcts li a.addr{
						background-image: url("/img/nav-addr.png");
						background-position: 3px center;
					}
			header .visible .contacts .all{
				text-align: right;
			}
				header .visible .contacts .all a{
					color: var(--main-color-light);
					display: inline-block;
					padding-bottom: 2px;
					border-bottom: 1px dashed var(--main-color-light);
					text-decoration: none;
					font-size: 14px;
				}

	@media screen and (max-width: 768px){


	}

	@media screen and (max-width:1250px){
		header .visible nav li a{
			padding: 6px 8px;
			font-size: 13px;
			background-size: auto 13px;
		}
		header .visible nav li li a{
			font-size: 13px;
		}
		header .visible .contacts .ctcts li a{
			font-size: 13px;
		}
		header .visible .contacts .message{
			font-size: 12px;
		}
	}
	@media screen and (min-width: 1600px){
		header .visible nav li a{
			padding: 16px 10px;
			font-size: 17px;
			background-size: auto 17px;
		}
		header .visible nav li li a{
			font-size: 16px;
		}
		header .visible .contacts .ctcts li a{
			font-size: 16px;
		}
	}

main{
	position: absolute;
	top: 0;
	right: 0;
	width: 78%;
	z-index: 1;
}

.common-button{
	display: inline-block;
	background: transparent;
	color: var(--main-color);
	border: 1px solid var(--main-color);
	cursor: pointer;
	text-decoration: none;
	padding: 7px 18px;
	font-size: 13px;
	border-radius: 2px;
	transition: .2s;
	background-image: radial-gradient(circle, var(--main-color) 0%, var(--main-color) 60%, transparent 60%, transparent 100%);
	background-size: 0px 0px;
    background-repeat: no-repeat;
    background-position: -20px -20px;
    font-family: inherit;
}

.common-button:hover{
	-background-color: var(--main-color);
	background-size: 100% 300px;
	background-position: -100% -150px;
	color: #fff;
}

.common-mobile{
	display: none;
}

.common-status{
    margin: 10px 0;
    padding: 7px 15px;
    font-size: 14px;
    font-weight: 300;
    border-left: 3px solid var(--main-color);
    background-color: #efefef;
    transition: .15s;
}

.common-status[data-status='none']{
    display: none;
}
.common-status[data-status='pending']{
    border-color:#236192;
    color: #236192;
    background-color: #eaeeff;
}
.common-status[data-status='ok']{
    color: var(--main-color);
    border-color: var(--main-color);
    background-color: #f5f5f5;
}
.common-status[data-status='error']{
        color: #fff;
    border-color: #8C0300;
    background-color: #CB3340;
}


#callback-form,
#rate-form{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    z-index: 999;
}
#callback-form .wrap,
#rate-form .wrap{
    display: flex;
    width: 30%;
    min-width: 300px;
    height: 100vh;
    flex-direction: column;
    margin: 0 auto;
}
    #callback-form .wrap .form,
    #rate-form .wrap .form{
        display: block;
        margin: auto 0;
        width: 100%;
        box-sizing: border-box;
        background-color: #fff;
        padding: 15px;
        text-align: center;
        border-radius: 3px;
    }
    #callback-form .wrap .form .hgroup,
    #rate-form .wrap .form .hgroup{
        text-align: center;
        margin-bottom: 10px;
    }
    #callback-form .wrap .form .hgroup h4,
    #rate-form .wrap .form .hgroup h4{
        color: var(--main-color);
        font-size:18px;
    }
    #callback-form .wrap .form .hgroup p,
    #rate-form .wrap .form .hgroup p{
        font-size: 12px;
    }
    #callback-form .wrap .form form,
    #rate-form .wrap .form form{
        display: block;
    }
        
    #callback-form .wrap .form form label,
    #rate-form .wrap .form form label{
        display: block;
        margin-bottom: 15px;
    }
        
        #callback-form .wrap .form label span,
        #rate-form .wrap .form label span{
            display: block;
            font-size: 13px;
        }
        
        #callback-form .wrap .form form label input,
        #rate-form .wrap .form form label input{
            display: block;
            font-family: inherit;
            text-align: center;
            padding: 7px 10px;
            border: 1px solid #777;
            box-sizing: border-box;
            width: 100%;
        }
        #callback-form .wrap .form input[type='submit'],
        #rate-form .wrap .form input[type='submit']{
            
        }

.portfolio{
	
}
	.portfolio .section-heading{
		margin-bottom: 10px;
		font-size: 0;
		padding: 40px 5%;
	}
		.portfolio .section-heading .hgroup{
			width: 70%;
			display: inline-block;
			vertical-align: top;
			font-size: 15px;

		}
			.portfolio .section-heading .hgroup h3{
				font-size: 2.3em;
				color: var(--main-color);
			}
		.portfolio .section-heading .btn{
			width: 30%;
			display: inline-block;
			vertical-align: top;
			font-size: 15px;
			text-align: right;
			padding-top:20px;
		}

	.portfolio .grid{
		font-size: 0;

	}
		.portfolio .grid .half{
			display: inline-block;
			vertical-align: top;
			width: 50%;
		}
			.portfolio .grid .half>div{
				display: inline-block;
				vertical-align: top;
				background-size: 100% auto;
				-background-size: cover;
				background-position: center center;
				transition: .3s;
				position: relative;

			}
			.portfolio .grid .cell2x2{
				width: 100%;
				height: 26.3vw;
			}
			.portfolio .grid .cell1x1{
				width: 50%;
				height: 13.15vw;
			}
			.portfolio .grid .cell2x1{
				width: 100%;
				height: 13.15vw;
			}

			.portfolio .grid .half>div{
				background-size: auto 100%;
				transition: .4s;
			}
			.portfolio .grid .half>div:hover{
				background-size: auto 125%;
			}
			.portfolio .grid .half>div a{
				display: block;
				position: absolute;
				width: calc(100% - 14px);
				height: calc(100% - 14px);
				top: 7px;
				left: 7px;
				background-color: rgba(0,0,0,0.85);
				opacity: 0;
				transition: .2s;
				box-sizing: border-box;
				padding: 10px;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			.portfolio .grid .half>div:hover a{
				opacity: 1;
			}
			.portfolio .grid .half a h5{
				font-size: 15px;
				color: #fff;
				text-align: center;
			}
			.portfolio .grid .half>div a div{
				color: var(--main-color-light);
				padding-top: 10px;
				font-size: 15px;	
				text-align: center;

			}
			.portfolio .grid .half>div a div:before{
				content: "";
				display: block;
				width: 20%;
				height: 0;
				border-top: 3px solid var(--main-color-light);
				margin: 0 auto;
				margin-bottom: 10px;
			}

main .cta-block{
	padding: 40px 5%;
	background-color: #eee;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
	main .cta-block .wrap{
		background-color: #fff;
		padding: 20px;
	}
		main .cta-block .wrap .hgroup{
			margin-bottom: 20px;
		}
		main .cta-block .wrap h3{
			color: var(--main-color);
			font-size: 22px;
		}
		main .cta-block .wrap p{
			font-size: 14px;
		}
		main .cta-block .wrap a{
		
		}
		main .cta-block .wrap .actions span{
			display: inline-block;
			padding: 0  10px;
			font-size: 14px;
		}


footer{
	height: 550px;
	position: relative;
}
	footer #map{
		position: absolute;
		height: 100%;
		width: 100%;
		margin-bottom: -60vh;
	}

	footer .feedback{
		position: absolute;
		z-index: 3;
		top: 0;
		left: 0;
		width: 50%;
		height: 100%;
		background-color: rgba(40,40,40,0.85);
		box-sizing: border-box;
		padding: 40px 5%;
		color: #fff;
	}
	footer .feedback h3{
		margin-bottom: 30px;
	}
	footer form{
		display: block;
		margin-bottom: 20px;
	}
		footer form label{
			display: block;
			margin-bottom: 20px;
		}
			footer form label input, footer form label textarea{
				display: block;
				background:transparent;
				border: 0;
				font-family: inherit;
				border-bottom: 1px solid #888;
				padding: 6px;
				box-sizing: border-box;
				width: 100%;
				color: #fff;
				outline: none;
			}
			footer form label textarea{
				height: 7em;
				line-height: 1.15em;
				resize: none;
			}
	footer form input[type='submit']{
		outline: none;
		color: #ccc;
		font-family: inherit;
		border: 1px solid #ccc;
		background: transparent;
		border-radius: 3px;
		padding: 6px 12px;
		cursor: pointer;
	}
	footer form input[type='submit']:hover{
		border-color: #fff;
		color: #fff;
	}
			footer form label *:focus{
				outline: none;
				border-color: var(--main-color);
			}

	footer .contacts{

	}
	footer h4{
		margin-bottom: 20px;
	}
		footer .contacts .congroup{
			margin-bottom: 15px;
		}
		footer .contacts .congroup div{
			color: #ccc;
			line-height: 1;
			font-size: 14px;
			background-size: 20px;
			padding: 4px;
			padding-left: 30px;
			background-position: left center;
			background-repeat: no-repeat;
			background-image: url('/img/footer-phone.png');

		}
		footer .contacts .congroup div.mail{
			background-image: url('/img/footer-mail.png');
		}
		footer .contacts .congroup div.addr{
			background-image: url('/img/footer-address.png');
		}

@media screen and (max-width: 768px), screen and (max-aspect-ratio: 1/1){
	header{
		position: fixed;
		width: calc(100% - 60px);
		left: -100%;
		box-sizing: border-box;
		transition: .3s;
	}

	header .mobile{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 10px 15px;
		background-color: #222;
		font-size: 0;
		transition: .3s;
	}

	header.open{
		left: 0;
	}
	header.open .mobile{
		left: calc(100% - 61px);
	}
	header.open .mobile button{
		background-image: url('/img/header-menu-close.png');
		background-repeat: no-repeat;;
		background-size: 70%;
	}

	header .mobile button, header .mobile a{
		display: inline-block;
		padding: 15px;
		background-color: transparent;;
		background-size: 100% auto;
		background-size: contain;
		background-position: center;
		border: 0;
		transition: .2s;


	}
	header .mobile button{
		outline: none;
		background-image: url('/img/header-menu.png')
	}
	header .mobile a.call{
		background-image: url('/img/header-phone.png')
	}
	header .mobile a.to-top{
		background-image: url('/img/header-top.png')
	}
	header .mobile button{
		margin-right: 15px;
	}
	header .mobile  a{
		margin-left: 15px;
	}
	header .mobile .right-group{
		float: right;
	}

	header .visible nav{
		max-height: 50vh;
		overflow: auto;
	}
	header .visible nav li ul{
		position: static;
		display: block;
		width: auto;
		padding-left: 20px;
	}

	header .visible nav li a{
		background-image: none;
	}




	main{
		width: 100%;
	}

	main .cta-block .wrap{
		text-align: center;
	}
	main .cta-block .wrap .actions span{
		display: block;
		padding: 10px 10px;
	}

	.common-mobile{
		display: block;
	}

	

	.portfolio .grid .half{
		width: 100%;
	}
	.portfolio .grid .cell2x2{
		height: 50vw;
	}
	.portfolio .grid .cell1x1{
		height: 25vw;
	}



	footer #map{
		position: static;
		height: 50vh;
		width: 100%;
		margin: 0;
	}
	footer .feedback{
		height: auto;
		width: 100%;
		position: static;
	}

}