﻿.body-overflow{
	overflow: hidden !important;
}

/* ------------------ Menu BTN For Mobile ------------------ */
.sb-toggle { display:none; }

.sb-toggle {
	position: absolute;
	cursor:pointer;
	z-index: 100;
	border: 2px solid #fff;
}
.sb-toggle-left {
	top: 10px;
	left: 20px;
}
.sb-toggle-right {
	top: 11px;
	right: 20px;
}

.sb-toggle i:first-child {margin-top: 6px;}
.sb-toggle i:last-child {margin-bottom: 6px;}
.sb-toggle i
{
	background:#fff;
	height: 4px;
	width: 26px;
	margin-top: 5px;
	display: block;
	margin-left: 5px;
	margin-right: 5px;
	position: relative;
	opacity: 1;
}

.sb-toggle[data-lines-anim="yes"] i,
.sb-toggle[data-lines-anim="yes"] i:nth-child(2n)::before {
	transition: transform .5s ease 0s;
	-webkit-transition: transform .5s ease 0s;
	-moz-transition: transform .5s ease 0s;
	-o-transition: transform .5s ease 0s;
}

.sb-toggle[data-lines-anim="yes"].active i:nth-child(2n) {
	-ms-transform:rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	width: 27px;
	left: -3px;
	top: 0;
	z-index: 100;
}

.sb-toggle[data-lines-anim="yes"] i:nth-child(2n)::before {
	content: "";
	width: 21px;
	height: 3px;
	display: block;
	background: #fff;
	position: relative;
}

.sb-toggle[data-lines-anim="yes"].active i:nth-child(2n)::before {
	-ms-transform:rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	width: 100%;
	left: 0;
	top: 0;
}

.sb-toggle[data-lines-anim="yes"].active i:first-child,
.sb-toggle[data-lines-anim="yes"].active i:last-child {
	visibility: hidden;
	opacity: 0;
}
/* ------------------ Menu BTN For Mobile ------------------ */

/* ------ Left SIDE For Mobile ------ */
	/*defaults for side*/
	[canvas=container] {
		/*padding: 10px 20px;*/
		/*height: auto;*/
		/*overflow-y: auto;*/

		/*min-width: 100%;*/
		/*width: 100%;*/
		/*max-width: 100%;*/
		/*height: 100%;*/
	}
	[off-canvas] {
		/*padding: 10px 20px;*/

	}

	[class*=js-] {
		cursor: pointer;
		overflow-x: hidden;
	}

	.side-mobile {
		background:#DBDBDB;
		/*width: 100px;*/
		z-index: 3000000;
	}

	html {
		/*height: auto;*/
		/*overflow: auto !important;*/
	}

	body {
		/*height: auto;*/
		/*overflow: auto;*/
	}

	[canvas], [off-canvas] {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		/*-webkit-transition: -webkit-transform 300ms;*/
		/*transition: transform 300ms;*/
		-webkit-backface-visibility: hidden;
	}

	.side-mob-wrapper {
		padding:15px 25px 20px 15px;
	}
	/*defaults for side*/


	/*side elemets styles here*/

	/*side elemets styles here*/

/* ------ Left SIDE For Mobile ------ */

/* ------ Media Standart settings ------ */

@media (min-width: 769px) {
	/*or 961*/
	body {overflow-y: scroll;}
	[canvas="container"] {
		overflow: visible;
		height: auto;
	}
}

@media (max-width: 768px) {
	/*or 960*/

	/*sirina mob paneli*/
	.side-mobile {width:60%;}

	/*nastroika canvas*/
	[canvas="container"] {
		/*padding-top:132px;*/
		margin-top:70px;
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		height: calc( 100% - 70px );
	}
}

@media (max-width: 440px) {
	/*sirina mob paneli*/
	.side-mobile {width:90%;}
}

/* ------ Media Standart settings ------ */

.mobile-ver {display:none;}

@media (max-width: 980px){
	.sb-toggle{
		display:block;
	}
	
	header .header-nav-holder.active{
		display: block;
	}
}

@media (max-width: 980px){
	body, html{
		min-width: 100%;
	}
	
	header{
		height: 0 !important;
	}
	
	header.active{
		height: 60px !important;
		background: rgba(26, 29, 33, 0.92) !important;
	}
	
	#header.sticky{
		height: 60px !important;
		background: rgba(26, 29, 33, 0.92) !important;
	}
	
	.container-16{
		width: 100%;
	}
	
	.container-16 .column-4{
		width: 168px;
		margin: 0 0 0 20px;
	}
	
	header .header-brand-holder{
		padding: 49px 0 0 !important;
	}
	
	header .header-brand-holder a.inibrand-logo{
		position: absolute !important;
		width: 168px !important;
		height: 38px !important;
		top: 11px;
		left: 20px;
	}
	
	.column-12{
		width: 100% !important;
		margin: 0;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	header .header-nav-holder{
		display: none;
		position: fixed;
		top: 60px;
		left: 0;
		width: 100%;
		height: calc(100% - 60px);
		padding: 0 !important;
		overflow-y: auto;
		background: rgba(26, 29, 33, 0.92);
	}
		
	#navbar,
	#header.sticky #navbar{
		text-align: center;
		padding: 0;
	}
	
	#navbar ul,
	#header.sticky #navbar ul{
		padding: 20px 0 30px;
	}
	
	#navbar ul li,
	#header.sticky #navbar ul li{
		display: block;
	}
	
	#navbar ul li:nth-child(-n+4){
		margin-bottom: 20px !important;
	}
	
	#navbar ul li:nth-child(5n){
		display: inline-block;
	}
	
	#navbar ul li:nth-child(6n){
		display: inline-block;
	}
	
	#navbar ul li a{
		padding: 5px 15px !important;
		margin: 0 !important;
	}
	
	#intro{
		min-height: 550px;
	}
	
	#intro figure figcaption{
		top: 60px !important;
	}
	
	.container-12{
		width: 100%;
	}
	
	#intro .column-12{
		padding: 20px 20px 0;
		box-sizing: border-box;
	}
	
	h1{
		font-size: 70px !important;
		line-height: 80px !important;
	}
	
	.heading-description{
		padding: 15px 0 0 0 !important;
		width: 100%;
	}
	
	h6{
		font-size: 18px;
		line-height: 1.3;
		margin: 0;
	}
	
	.intro-links{
		padding: 25px 0 0 0 !important;
	}
	
	a.button-style-1{
		padding: 10px 30px;
	}
	
	#scroll{
		display: none;
	}
	
	#main-services{
		height: auto;
		box-sizing: border-box;
	}
	
	#main-services .container-12{
		text-align: center;
		font-size: 0;
		padding: 20px 20px 15px;
		box-sizing: border-box;
	}
	
	#main-services .column-3{
		float: none;
		display: inline-block;
		margin: 0;
		padding: 0 0 10px;
	}
	
	#main-services .main-service{
		text-align: center;
		font-size: 0;
	}
	
	.container-style-1{
		padding: 20px 20px 0;
		box-sizing: border-box;
	}
	
	.container-style-1 .container-12{
		text-align: center;
		font-size: 0;
	}
	
	.container-style-1 .column-12{
		position: relative;
	}
	
	.container-style-1 h3{
		font-size: 45px;
		margin: 0 0 10px;
	}
	
	.container-style-1 .column-3{
		margin: 0 20px 20px;
		float: none;
		display: inline-block;
		vertical-align: top;
	}
	
	.container-style-1 .project{
		width: 95%;
		margin: 0 auto;
	}
	
	.container-style-1 .project-image{
		width: 100%;
		height: auto;
	}
	
	.container-style-1 .project-description{
		min-height: 85px;
		width: 100%;
		background-color: #f9f9f9;
	}
	
	.container-style-1 .project-description a{
		width: 100%;
	}
	
	.container-style-1 .project-description a h6{
		padding: 10px 0 0;
	}
	
	.container-style-1 .project-description a p{
		padding: 0;
	}
	
	.container-style-1 .color-style-1{
		margin: 0 auto;
		width: 100px;
	}
	
	.container-style-1 .button-wrapper{
		padding: 0;
	}
	
	.container-style-1 .button-style-4{
		padding: 10px 25px;
		margin-bottom: 20px;
	}
	
	.container-style-5{
		padding: 20px 20px 0;
		box-sizing: border-box;
	}
	
	.container-style-5 .section-heading{
		height: auto !important;
	}
	
	.container-style-5 .column-12{
		position: relative;
	}
		
	.container-style-5 h3{
		font-size: 45px;
		margin: 0 0 10px;
		text-align: center;
	}
	
	.container-style-5 .color-style-1{
		margin: 0 auto;
		width: 100px;
	}
	
	.container-style-5 .clients-wrapper{
		font-size: 0;
	}
	
	.container-style-5 .brand-logo{
		margin: 0 20px 20px;
	}
	
	.container-style-4{
		padding: 20px;
		box-sizing: border-box;
	}
	
	.container-style-4 .column-12{
		position: relative;
	}
	
	.container-style-4 .section-white-heading{
		height: auto !important;
	}
	
	.container-style-4 h3{
		font-size: 45px;
		margin: 0 0 10px;
		text-align: center;
	}
	
	.container-style-4 .color-style-3{
		margin: 0 auto;
		width: 100px;
	}
	
	.container-style-4 .column-1{
		display: none;
	}
	
	.container-style-4 .column-10{
		width: 100%;
		margin: 0;
	}
	
	.container-style-4 .section-content{
		padding: 0 0 20px;
	}
	
	.container-style-4 .button-wrapper{
		padding: 0;
	}
	
	.container-style-4 .button-style-2{
		padding: 10px 25px;
	}
	
	#footer{
		padding: 20px;
		box-sizing: border-box;
		position: relative;
		height: auto;
	}
	
	#footer .column-7{
		margin: 0;
		width: auto;
		position: relative;
	}
	
	#footer .footer-bleft{
		padding: 0;
	}
	
	#footer .column-2{
		width: 20%;
		position: absolute;
		bottom: 20px;
		left: calc(50% - 98px);
		margin: 0;
		float: none;
		z-index: 10;
	}
	
	#footer .footer-tmiddle{
		padding: 0;
	}
	
	#footer .column-7:last-child{
		float: right;
	}
	
	#footer .footer-tright{
		padding: 0;
		min-height: 0;
	}
	
	#footer .phone{
		padding: 0;
		margin: 0;
	}
	
	header#header-style-2{
		height: 60px !important;
	}
	
	#no-intro {
		height: 60px;
	}
	
	.header-sub-nav{
		padding: 20px 20px 10px;
		box-sizing: border-box;
	}
	
	.header-sub-nav .column-3{
		margin: 0;
		padding-bottom: 5px;
	}
	
	.header-sub-nav .column-9{
		width: 100%;
		margin: 0;
	}
	
	.header-sub-nav .column-9 ul{
		font-size: 0;
		text-align: center;
	}
	
	.header-sub-nav .column-9 ul li{
		display: inline-block;
		margin: 0 20px 10px;
	}
		
	.header-sub-nav .column-9 ul li a{
		margin: 0;
	}
	
	.container-style-1 .section-heading{
		height: auto !important;
	}
	
	.container-style-4 .button-style-5-big{
		padding: 10px 25px;
		min-width: 200px;
	}
	
	.container-style-1 .column-6{
		margin: 0 0 20px;
		width: 100%;
	}
	
	.container-style-1 .about-pic{
		width: 100%;
		height: 300px;
		background-position: center;
		background-repeat: no-repeat;
	}
	
	.container-style-1 .column-6:nth-child(2n){
		margin: 0;
		box-sizing: border-box;
	}
	
	.container-style-1 .section-content{
		padding: 0;
	}
	
	.container-style-1 .column-10{
		width: 100%;
		margin: 0;
	}
		
	.container-style-1 .read-more{
		font-size: 14px;
		background-color: #f31455;
		width: 280px;
		display: inline-block;
		line-height: 1;
		font-family: "Open Sans",sans-serif;
		font-weight: 900 !important;
		text-transform: uppercase;
		text-align: center;
		padding: 20px 10px 20px;
		color: #fff !important;
		border-bottom: none !important;
		box-sizing: border-box;
		margin: 0 0 20px;
	}
	
	.container-style-1 .read-more:hover{
		background-color: #e31753;
	}
	
	.container-style-1 .wrapper{
		font-size: 0;
	}
	
	.container-style-1 .task-block{
		width: 260px;
		float: none;
		display: inline-block;
		margin: 0 10px 20px;
		text-align: center;
	}
	
	.container-style-1 .task-icon{
		margin: 0 auto 10px;
	}
	
	.container-style-1 .task-name{
		padding-bottom: 0;
	}
	
	.container-style-1 .task-name-text{
		font-family: "Roboto Slab",sans-serif;
		color: #080808;
		font-size: 24px;
		line-height: 1;
	}
	
	.container-style-1 .task-name-decore{
		width: 55px;
		height: 2px;
		background-color: #111;
		display: block;
		margin: 20px auto;
	}
	
	.container-style-1 .task-desc{
		color: #080808;
		font-size: 14px;
		padding: 0;
	}
	
	.container-style-1 .more-info{
		display: block;
		width: 45px;
		height: 45px;
		border-radius: 50%;
		border: 2px solid #00badc;
		margin: 20px auto 0;
	}
	
	.container-style-1 .more-info img{
		margin: 14px auto 0;
	}
	
	.container-style-1.style-1{
		padding: 0;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.container-style-1 .overlay{
		background-color: rgba(17,17,17,0.87);
		padding: 20px;
	}
	
	.container-style-1 .banner-title{
		font-family: "Roboto Slab",sans-serif;
		font-size: 37px;
		padding-bottom: 20px;
		color: #fff;
	}
	
	.container-style-1 .btn-wrapper{
		text-align: center;
	}
	
	.container-style-1 .contact{
		font-size: 15px;
		width: 280px;
		background-color: #00badc;
		display: inline-block;
		line-height: 1;
		font-family: "Open Sans",sans-serif;
		font-weight: 900 !important;
		text-transform: uppercase;
		text-align: center;
		padding: 20px 10px 20px;
		color: #fff !important;
		border-bottom: none !important;
		box-sizing: border-box;
	}
	
	.container-style-1 .contact:hover{
		background-color: #07aac8;
	}
	
	.container-style-1.style-2{
		padding: 0;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.container-style-1.style-2 .overlay{
		background-color: rgba(170,4,52,0.8);
		padding: 20px;
	}
	
	.container-style-1 .branch-block{
		width: 260px;
		margin: 0 10px 20px;
		float: none;
		display: inline-block;
		padding: 20px;
		box-sizing: border-box;
		text-align: left;
		background-color: #f7f7f7;
		position: relative;
	}
	
	.container-style-1 .branch-name{
		padding: 0;
	}
	
	.container-style-1 .branch-name-text{
		color: #080808;
		font-size: 20px;
		line-height: 1;
		font-family: "Roboto Slab",sans-serif;
	}
	
	.container-style-1 .branch-name-decore{
		width: 65px;
		height: 3px;
		background-color: #f31455;
		display: block;
		margin: 25px 0 0;
	}
	
	.container-style-1 .branch-desc{
		color: #2d2d2e;
		font-size: 14px;
		line-height: 1.3;
		padding: 0;
	}
	
	.container-style-1 .branch-icon{
		position: absolute;
		top: 10px;
		right: 10px;
	}
	
	.container-style-1 .branch-block.main{
		background-color: inherit;
		text-align: center;
	}
	
	.container-style-1 .branch-block.main .branch-name{
		padding: 0;
	}
	
	.container-style-1 .branch-block.main .branch-name-text{
		font-size: 37px;
	}
	
	.container-style-1 .branch-name-decore{
		height: 6px;
		width: 95px;
		margin: 20px auto;
	}
	
	.container-style-1 .branch-block.main .branch-desc{
		padding: 0;
	}
	
	.container-style-1 .column-5{
		width: 100%;
		margin: 0;
	}
	
	.container-style-4 .column-3{
		width: 100%;
		margin: 0;
	}
	
	.container-style-4 .column-9{
		width: 100%;
		margin: 0;
	}
	
	.cell-heading{
		font-size: 28px;
	}
	
	input.input{
		width: 100%;
		box-sizing: border-box;
		padding: 10px 20px;
		font-size: 28px;
		line-height: 1;
		height: auto;
	}
	
	select.select{
		width: 100%;
		height: auto;
		font-size: 28px;
		line-height: 1;
		padding: 10px 20px;
	}
	
	textarea.area{
		width: 100%;
		box-sizing: border-box;
		font-size: 28px;
		line-height: 1;
		padding: 10px 20px;
	}
	
	.container-style-4 .container-12:nth-child(6n) .column-3{
		display: none;
	}
	
	.container-style-4 .container-12:nth-child(6n) .column-9{
		text-align: center;
	}
	
	input.btn-submit{
		padding: 10px 25px;
	}
	
	.services-top-ban{
		height: auto;
		padding: 20px;
		background-position: center;
		background-size: cover;
		margin: 0 0 30px;
	}
	
	.serv-top-ban-title{
		padding: 0 0 20px;
	}
	
	.serv-top-ban-content{
		padding: 0;
	}
	
	.services-cols-sets{
		margin: 0;
		font-size: 0;
	}
	
	.service-col{
		margin: 0 10px 30px !important;
		float: none;
		display: inline-block;
		width: 260px;
	}
	
	.service-icon{
		width: 70px;
	}
	
	.service-desc{
		width: 190px;
	}
	
	a.serv-btn-s{
		width: 100%;
	}
	
	.other-services{
		padding: 30px 20px 0;
	}
	
	.oth-services-title{
		padding-bottom: 20px;
	}
	
	.oth-services-content{
		margin: 0;
		font-size: 0;
	}
	
	.oth-service-col{
		float: none;
		display: inline-block;
		width: 220px;
		height: 455px;
		margin: 0 10px 30px;
		vertical-align: top;
	}
	
	.oth-serv-img{
		width: 100%;
		height: 180px;
	}
	
	.oth-serv-title{
		height: 65px;
	}
	
	.oth-serv-desc{
		height: 120px;
	}
	
	a.serv-btn{
		width: 100%;
		padding: 10px 0;
	}
}

@media (max-width: 768px){
	h1{
		font-size: 55px !important;
		line-height: 65px !important;
	}
	
	.cell-heading,
	input.input,
	select.select,
	textarea.area{
		font-size: 26px;
	}	
}

@media (max-width: 600px){
	#footer .column-7{
		display: block;
		text-align: center;
		float: none;
		padding-bottom: 20px;
	}
	
	#footer .column-7:last-child{
		float: none;
		padding-bottom: 40px;
	}
	
	#footer .footer-tright{
		text-align: center;
	}
}

@media (max-width: 400px){
	.container-style-1 .read-more{
		width: 100%;
	}
	
	.container-style-1 .contact{
		width: 100%;
	}
	
	.container-style-1 .task-block{
		width: 100%;
		margin: 0 0 20px;
	}
	
	.container-style-1 .branch-block{
		width: 100%;
		margin: 0 0 20px;
	}
	
	.cell-heading,
	input.input,
	select.select,
	textarea.area{
		font-size: 24px;
	}
	
	.oth-service-col{
		width: 100%;
		margin: 0 0 30px;
		height: 385px;
	}
	
	.oth-serv-title{
		height: 45px;
	}
	
	.oth-serv-desc{
		height: 70px;
	}
}