/* GENERAL STYLES */

#loading{
	background-color: #222;
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 2000001;
	padding-top: 40%;
}



#main-container{
		position: relative;
		z-index: 1;
		overflow: hidden;
}


input{
	-webkit-appearance: none;
    border-radius: 0;
}

@font-face{
        font-family:Batch;
        src:url('../fonts/batch.html');
        src:url('../fonts/batchd41d.eot?#iefix') format('embedded-opentype'),
          url('../fonts/batch.woff') format('woff'),
          url('../fonts/batch.ttf') format('truetype'),
          url('../fonts/batch.svg#batchregular') format('svg');
        font-weight:normal;
        font-style:normal;
      }
      
.batch {
        font-family:"Batch"; /*or whatever you've decalred your font name as*/
        font-size:16px;
        line-height:1;
        display:inline-block;
        font-style: normal;
      }

.batch:before {
        content:attr(data-icon);
    }
    
.large-i{
	font-size: 45px;
}

.xlarge-i{
	font-size: 105px;
}

.sign-i{
	padding: 10px;
	border: 3px solid;
}

.btn{
	padding: 20px;
	border: 2px solid #57b567;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
	display: inline-block;
	background-color: #57b567;
	
}

.btn h4{
	color: #fff;
	margin: 0px;
}

.btn:hover{
	background-color: #eee;
}

.btn:hover h4{
	color: #57b567;
}

.text-white{
	color: #fff;
}

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

.inner-section{
	padding-top: 44px;
	padding-bottom: 44px;
}

.hero-p{
	font-size: 18px;
}

.text-highlight{
	color: #57b567;
}

.page-title h1{
	margin-top: 0px;
	margin-bottom: 44px;
}	

.hidden{
	opacity: 0;
}

/* NAV STYLES */

#nav{
	max-height: 80px;
	padding: 15px 0px 15px 0px;
	position:fixed;
	top:0px;
	z-index: 2000000;
	width: 100%;
	overflow: hidden;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
}

.nav-bg{
	background-color: #222;
}

.work-single-header{
	height: 75px;
	padding: 15px 25px 15px 25px;
	position: fixed;
	width: 100%;
	background-color: #222;
	z-index: 2000001;
	right:0px;

}


#logo{
	margin-left: 44px;
}

#menu{
	margin-right: 44px;
}

#menu li{
	list-style: none;
	float: left;
	font-size: 15px;
	margin-left: 20px;
	margin-top: 13px;
	font-family: 'Montserrat';
}

#mobile-toggle{
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
}

.mobile-menu-open{
	max-height: 400px !important;
}

#mobile-toggle i{
	font-size: 40px;
}

.slider-nav{
	font-size: 40px;
	color: #fff;
	opacity: 0.8;
}

/* HEADER STYLES */

#home-banner{
	background:url('../img/front.jpg');
	background-size: cover;
	position: relative;
	overflow: hidden;
}

#home-banner .hero-text{
	padding-top: 220px !important;
}

#home-banner:before {
	content: ' ';
	display: block;
	position:absolute;
	width:100%;
	height:100%;
	background: -moz-linear-gradient(top,  rgba(4,163,52,0.55) 0%, rgba(87,181,103,0.45) 75%, rgba(87,181,103,0.35) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(4,163,52,0.45)), color-stop(35%,rgba(87,181,103,0.75)), color-stop(100%,rgba(87,181,103,0.75))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(4,163,52,0.55) 0%,rgba(87,181,103,0.45) 75%,rgba(87,181,103,0.35) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(4,163,52,0.55) 0%,rgba(87,181,103,0.45) 75%,rgba(87,181,103,0.35) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(4,163,52,0.55) 0%,rgba(87,181,103,0.45) 75%,rgba(87,181,103,0.35) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(4,163,52,0.55) 0%,rgba(87,181,103,0.45) 75%,rgba(87,181,103,0.35) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf04a334', endColorstr='#bf57b567',GradientType=0 ); /* IE6-9 */




}

.hero-text{
	padding-top: 240px;
	padding-bottom: 150px;
	position: relative;
	z-index: 3;
}

.header h3{
	margin: 0px;
	font-family: 'Podkova';
	font-size: 44px;
	font-weight: 300;
	margin-bottom: 0px;
}

.header h1{
	font-family: 'Montserrat';
	font-size: 94px;
	margin-top:0px;
	border-bottom: 7px solid;
	display: inline-block;
}

/* PAGE SPIEL */

.page-spiel{
	background-color: #fff;
}

.page-spiel h1{
	margin-bottom: 44px;
}

.page-spiel p{
	margin-top: 22px;
}

.page-spiel hr{
	width: 50%;
	border-color: #ccc;
	margin: 0px auto;
	margin-top: 44px;
	border-width: 1px;
}

/* HOT LINK BAR */

.link-bar{
	background-color: #57b567;
	box-shadow: inset 0 6px 10px 0px rgba(0,0,0,0.2), inset 0 -6px 10px 0px rgba(0,0,0,0.1)
}

.link-bar .btn{
	background-color: #57b567;
	border: 3px solid #fff;
	width: 90%;
}

.link-bar .btn h4{
	color: #fff;
}

.link-bar .btn:hover{
	background-color: #fff;
}

.link-bar .btn:hover h4{
	color: #57b567;
}

.link-arrow{
	position: absolute;
	top: 23px;
	right: -13px;
}

.link-arrow i{
	color: #fff;
	font-size: 25px;
}

.current-page{
	background-color: #fff !important;
}

.current-page h4{
	color: #57b567 !important;
	
}

/* FEATURED PROJECT */

#fp-holder{
	overflow: visible;
}

#featured-project{
	background-color: #eee;
	overflow: hidden;
}

#featured-project p{
	margin-bottom: 44px;
}

#featured-project hr{
	width: 150px;
	border-color: #bbb;
	border-width: 1px;
}

#featured-slider-holder{
	overflow: hidden;
	  -webkit-box-shadow:  0px 0px 30px 2px rgba(0, 0, 0, 0.3);
  box-shadow:  0px 0px 30px 2px rgba(0, 0, 0, 0.3);
}


/******** OUR CLIENTS **********/

#our-clients{
	background-color: #222;
	color: #fff;
}

#clients-holder{
	margin-top: 44px;
}

#clients-holder img{
	opacity: 0.8;
}


/******************************** ABOUT PAGE ********************************/

.inner-header:before {
	content: ' ';
	display: block;
	position:absolute;
	width:100%;
	height:100%;
	background: -moz-linear-gradient(top,  rgba(4,163,52,0.55) 0%, rgba(87,181,103,0.45) 75%, rgba(87,181,103,0.35) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(4,163,52,0.45)), color-stop(35%,rgba(87,181,103,0.75)), color-stop(100%,rgba(87,181,103,0.75))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(4,163,52,0.55) 0%,rgba(87,181,103,0.45) 75%,rgba(87,181,103,0.35) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(4,163,52,0.55) 0%,rgba(87,181,103,0.45) 75%,rgba(87,181,103,0.35) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(4,163,52,0.55) 0%,rgba(87,181,103,0.45) 75%,rgba(87,181,103,0.35) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(4,163,52,0.55) 0%,rgba(87,181,103,0.45) 75%,rgba(87,181,103,0.35) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf04a334', endColorstr='#bf57b567',GradientType=0 ); /* IE6-9 */


}


.inner-header{
	background:url('../img/inner.jpg');
	background-size: cover;
	height:560px;
	position: relative;
}

/********************* SKILLS *****************/

#our-skills{
	background-color: #eee;
}

.process{
	background-color: #57b567;
	padding: 15px;
	color: #fff;
	position: relative;
}

.process h3{
	margin-bottom: 20px;
	border: 3px solid;
	padding: 10px;
}

.process h3:hover{
	background-color: #fff;
	color: #57b567;
}

.process .sign-i{
	padding: 30px;
	border: 5px solid;
	border-radius: 50%;
	margin-bottom: 20px;
}


.process p{
	font-size: 16px;
	color: #fff;
}



/********************* TEAM *****************/

#our-team{
	background-color: #222;
	color: #fff;
	position: relative;
}

.team-member{
	border: 4px solid;
	padding: 10px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
}

.team-member:hover{
	background-color: #fff;
}

.team-member:hover h4{
	color: #222;
}

.team-member:hover span{
	color: #222;
}

.team-member h4{
	margin-top: 10px;
	margin-bottom: 5px;
}

.team-image-wrap{
	height: 350px;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.social-overlay{
	position: absolute;
	background-color:rgba(0,0,0,0.7);
	padding-top: 110px;
	height: 100%;
	width: 100%;
	display: none;
}

.social-overlay li{
	list-style: none;
	margin-bottom: 20px;
}

.social-overlay i{
	font-size: 60px;
}

.team-image-wrap img{
	max-width: 180%;
	height: 100%;
}

.arrow-holder{
	position: absolute;
	bottom: -45px;
	width: 100%;
	z-index: 5;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	
	
	border-top: 30px solid #222;
	display: inline;

}

/********************* OUR PROMISE *****************/

#our-promise{
	position: relative;
	background-color: #fff;
}

#our-promise .page-title{
	margin-top: 15px;
}

#our-promise h3{
	font-family: 'Open Sans';
	font-weight: 300;
}

/******************************** SERVICES PAGE ********************************/

#services{
	background-color: #eee;
}

.services-holder{
	background-color: #57b567;
	padding: 25px 15px 15px 15px;
	color: #fff;
}	

.a-service{
	margin-bottom: 20px;
	border: 3px solid;
	padding: 10px;
	background-color: #57b567;
	cursor: pointer;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
	min-height: 55px;
}

.a-service h3{
	color: #fff;
	margin: 0px;
	
}

.a-service:hover{
	background-color: #fff;
}

.a-service:hover h3{
	color: #57b567;
}

.p-holder{
	overflow: hidden;
	display: none;
}

.a-service p{
	font-size: 16px;
	margin-top: 20px;
	color: #57b567;
}

.service-height{
	height: 260px;
}

/********** THE STATS ***********/

#the-stats{
	background-color: #222;
}

.stat-box{
	background-color: #fff;
	position: relative;
	display: inline-block;
	padding: 20px 20px 10px 20px;
	cursor: pointer;
}

.stat-box h1{
	color: #222;
	margin: 0px;
	text-align: center;
	font-family: 'Montserrat';
	font-size: 80px;

}

.stat-box .arrow-down{
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #fff;
	display: inline;
	
	position: relative;
	bottom: -46px;
	text-align: center;
	margin: 0px auto;
}

.stat-detail{
	margin-top: 30px;
}

.stat-detail i{
	font-size: 65px;
	color: #fff;
}

.stat-detail h3{
	color: #fff;
}

/******************************** WORKS PAGE ********************************/

#work{
	background-color: #fff;
}

.work-row{
	margin-bottom: 30px;
}

.work-holder{
	width: 100%;
	position: relative;
}

.work-overlay{
	height: 80px;
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 100%;
	background-color:rgba(0,0,0,0.7);
	padding-top: 100px;
	opacity: 0;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
}

.work-overlay:hover{
	opacity: 1;
}

.work-overlay:hover .expand-work{
	max-height: 100px;
}	

.expand-work{
	position: absolute;
	bottom: 0px;
	width: 100%;
	background-color: #57b567;
	padding: 20px;
	max-height: 0px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
}

/********** WORK SINGLE PAGE **************/

.work-page{
	padding-top: 82px;
	padding-bottom: 44px;
	background-color: #fff;
}

.work-slideshow-holder{
	padding-top: 0px;
}


.work-spiel{
	background-color: #eee;
	margin-top: 44px;
	margin-bottom: 44px;
}

.work-spiel ul{
	list-style: none;
	overflow: hidden;
}

.work-spiel li h4{
	float: left;
margin: 0px 0px 0px 15px;
	
}

.work-spiel li i{
	float: left;
	font-size: 20px;
	
}	

.work-spiel li{
	margin-bottom: 15px;
	overflow: hidden;
}

.work-spiel li a{
	color: #222;
}

#work-single-back i{
	padding-top: 5px;
	margin-right: 10px;
}

#work-single-back .btn:hover{
	background-color: #fff;
}

#work-single-back .btn:hover i{
	color: #57b567;
}

/******************************** CONTACT PAGE ********************************/

#contact-body{
	background-color: #eee;
}

#google-map iframe{
	width: 100%;
	height: 560px;
	border: none;
}

#contact-details-holder{
	padding: 20px;
	background-color: #222;
}

#contact-details-holder h3{
	margin-top: 0px;
}

#contact-details{
	list-style: none;
}

#contact-details i{
	font-size: 18px;
}

#contact-details span{
	font-size: 18px;
	color: #fff;
}

#contact-details li{
	margin-bottom: 10px;
	position: relative;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
	cursor: pointer;
}

#contact-details li:hover{
	left: 10px;
}

#contact-details-holder .arrow-down{
	position: relative;
	top: 60px;
}

#social-icons-holder{
	margin-top: 44px;
}

#social-icons-holder i{
	font-size: 60px;
}

#social-icons-holder a:first-child{
	margin-left: 0px;
}

#social-icons-holder a{
	color: #222;
	margin-left: 15px;
	position:relative;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
	
}

#social-icons-holder a:hover{
	bottom: 10px;
}



#contact-form-holder{
	position: relative;
}

#form-sent{
	background-color: #57b567;
	padding: 30px;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 100;
	
	display: none;
}

#form-sent i{
	float: right;
	font-size: 60px;
	color: #fff;
	margin-right: 30px;
	
}	

#form-holder{
	background-color: #57b567;
	position: relative;
	width: 100%;
	padding: 20px;
	overflow: hidden;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
	
}

#envelope-address{
	padding-top: 90px;
	padding-left: 20px;
}

#envelope-address h3{
	margin-bottom: 20px;
	
}

#envelope-address h5{
	margin-top: 0px;
	margin-bottom: 5px;
}

#thankyou-message{
	background-color: #ddd;
	padding: 120px;
	-webkit-box-shadow: inset 1px 1px 10px 5px rgba(0, 0, 0, 0.1);
    box-shadow: inset 1px 1px 10px 5px rgba(0, 0, 0, 0.1);
    position: absolute;
}

.form-button{
	border: 1px solid #fff;
	background-color: #57b567;
	height: 30px;
	color: #fff;
	width: 70px;
	font-size: 16px;
	padding: 5px;
	cursor: pointer;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
}

.form-button:hover{
	background-color: #fff;
	color: #57b567;
}	

/****************************** FOOTER STYLES *********************/

#footer{
	background-color: #eee;
	color: #666666;
	font-size: 16px;
	-webkit-box-shadow: inset 0px 19px 22px -20px rgba(0, 0, 0, 0.4);
        
        box-shadow: inset 0px 19px 22px -20px rgba(0, 0, 0, 0.4);
    height: 120px;
    background: url('../img/grid.png');
}

#footer-container{
	/*position: fixed;
	bottom: 44px;
	margin-left: 92px;*/

}

#footer-container .six:first-child{
	position: fixed;
	bottom: 44px;
}

#footer-container .six:nth-child(2){
	position: fixed;
	bottom: 44px;
	right: 90px;
}


#footer-social a:first-child{
	margin-left: 0px;
}	

#footer-social .social-icon{
	color: #bbb;
	font-size: 22px;
	margin-left: 15px;
}

#footer-social a{
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
}

#footer-social a:hover{
	
	color: #57b567;

}