/* ------------------------------------------------------------------
Project: Semantic
Place here your custom CSS styles
------------------------------------------------------------------ */

@media (min-width: 1200px) {
	.container { width: 970px; }
}

.instagram-logo {
	display: inline-block;
	margin-top: 12px;
	height: 20px;
	width: 20px;
	margin-left: 15px;
	margin-right: 15px;
	border-bottom-width: 0px !important;
}

 a.instagram-logo {
 	background-image: url('/img/instagram.png') !important;
 	background-color: transparent;
 	
 }
 
 
 
 a.instagram-logo:hover, a.instagram-logo:focus, a.instagram-logo:active {
 	background-image: url('/img/instagram.png');
 	background-color: transparent !important;
 	
 }
 
.navbar-custom li a.instagram-logo:hover {
		background: transparent !important;
		background-image: url('/img/instagram.png') !important;
		border-bottom-width: 0px !important;
	}

.navbar-custom li a.instagram-logo,	
.navbar-custom .dropdown-menu > li:last-child > a.instagram-logo {
		background: transparent !important;
		border-bottom-width: 0px !important;
		background-image: url('/img/instagram.png') !important;
	}

html {
	fontfamily: Gill Sans,Gill Sans MT,Calibri,sans-serif;
}
.navbar-custom {
	background: #fff;
	border: 0;
	border-color: #f5f5f5 !important;
	border-bottom: none;
	border-radius: 0;
	font-family: --var(fontfamily);
	font-weight: 600;
	color: #48544b !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 18px;
	z-index: 1000;
}

.navbar-brand {padding-top: 6px;}

.page-title {
	font-family: --var(fontfamily);
	font-weight: 600;
	padding: 5px 20px;
  	background: rgba(255, 255, 255, 0.75);
  	font-size: 30px;
  	line-height: 30px;
  	margin-bottom: 30px;
}	

.project-title {
	font-family: --var(fontfamily);
	font-weight: 600;
	padding: 5px 20px;
  	background: rgba(255, 255, 255, 0.75);
  	position: absolute;
  	left: 0px;
  	z-index: 10;
}	


  	
	.portfolio-item .hovereffect {
		margin-bottom: 16px !important;
  }
  
  	.col-sm-6, .col-sm-12 {
  		padding-left: 8px;
  		padding-right: 8px;
  	}



.contact-content {
	padding: 20px;
	font-size: 20px;
	line-height: 24px;
	background: rgba(255, 255, 255, 0.75);
font-family: --var(fontfamily);	
font-weight: 600;

}

    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
        border: 1px solid #666;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }





.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
	padding: 20px 20px 5px 20px;	
  background: rgba(255, 255, 255, 0.75);
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
  background-color: rgba(255,255,255,0.5);
}

.hovereffect h3, .hovereffect img {
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}



.hovereffect img {
  display: block;
  position: relative;
  width: 100%;
}

.hovereffect h3 {
	font-family: --var(fontfamily);
	font-weight: 600;
	color: #48544b !important;
	font-size: 20px;
text-transform: uppercase;
	width: 100%;
  text-align: left;
  margin: 0px;
  padding: 5px 0 0 0;

}

.hovereffect h4 {
	font-family: --var(fontfamily);
	font-weight: 600;
	font-style: italic;
	color: #48544b !important;
	font-size: 18px;
	width: 100%;
  text-align: left;
  margin: 0px;
  padding: 0px 0px 0px 0px;

}



.hovereffect:hover a.info {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  background-color: rgba(0,0,0,0.4);
 
}

.font-alt, .font-inc {
	font-family: --var(fontfamily);
	color: #48544b !important;
  	background-color: rgba(255,255,255,0.7);}

.font-alt {

	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 20px;
	padding: 0px 20px 0px 20px;
	letter-spacing: 0.05em;
	
}

.font-inc {
	font-size: 18px;
	text-transform: none;
	line-height: 26px;
	padding: 0px 20px 10px 20px;;		
	letter-spacing: 0.0em;
}



.m-b-20 {
	margin-bottom: 0px !important;
}


.navbar-brand img {height: 70px;}
.navbar-fixed-top {height: 90px;}
#custom-collapse {margin-top: 43px; }


.proj-desc {
	font-family: --var(fontfamily);
	font-size: 18px;
	font-weight: 500;
	padding: 10px 0 0 0 ;
	text-transform: none;
	font-style: italic;
	letter-spacing: .02em;
}

.btn {
	padding: 8px 16px;
	font-family: --var(fontfamily);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 16px;
}



@media (min-width: 768px) {
	  .topnav-li {
		width: 100%;
	  }

	.hs-caption {
		width: 100%;
	}

.proj-desc {
	font-size: 18px;
}

	.caption-content.left {
		padding-bottom: 80px;
		position: absolute; 
		bottom: 0px;
		left: 0px;
		text-align: left;
	}
	
	.caption-content.right {
		padding-bottom: 80px;
		position: absolute; 
		bottom: 0px;
		right: 0px;
		text-align: right;
	}
	
	.project-title {
		color: #48544b;
		font-size: 20px;
  		line-height: 20px;
  		top: 110px;
  		max-width: 50%;
  	}

.flex-control-nav > li > a {
	background: transparent;
	border: 1px solid #fff;
	display: block;
	height: 10px;
	width: 10px;
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	        border-radius: 10px;
}

	.li-content {
		margin-top: 110px;
	
}

	.project-content {
		margin-top: 56px;
	}

}

@media (max-width: 767px) {
	.row {
		padding-left: 15px;
		padding-right: 15px;
	}

.proj-desc {
	font-size: 16px;
}


	.caption-content.left {
		vertical-align: bottom;
		padding-bottom: 15px;
		text-align: left;
	}
	.caption-content.right {
		vertical-align: bottom;
		padding-bottom: 15px;
		text-align: right;
	}
	.font-alt, .font-inc {
  	background-color: rgba(255,255,255,0.8);
  	
  	}
		
	.font-alt {
		font-size: 18px;
	}
	.font-inc {
		font-size: 16px;
		line-height: 18px;
		display:none;
	}	

	.flex-control-nav {
		bottom: 0px;
		margin-bottom: -10px;
	}

	.navbar-brand img {
		height: 50px;
	}
	
	.navbar-fixed-top {height: 70px;}
	#custom-collapse {margin-top: 23px; }
	
	.project-title {
		font-size: 16px;
  		line-height: 16px;
  		top: 75px;
  	}
  	
  	.li-content {
		margin-top: 75px;
	
	}
	
	.project-content {
		margin-top: 48px;
	}
	
	
}


/*
.hero-slider > .slides > li .slidebg {
	-webkit-transition: transform 1s ease;
	   -moz-transition: transform 1s ease;
	    -ms-transition: transform 1s ease;
	     -o-transition: transform 1s ease;
	        transition: transform 1s ease;
}
*/


.hero-slider > .slides > li .slidebg {
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
 	    -ms-transition: 0.6s ease-in-out left;
 -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}