@charset "utf-8";
/*============================== 
	- Template Name: Bleurant - Responsive HTML Creative Team and Portfolio Template
	- Author: DoubleEight
	- Version: 1.0.0
	- Website: themeforest.net/user/doubleeight/portfolio
================================= */	


/*---------------------- 
	Stylesheet Guide
------------------------
00. PRELOADER

01. GENERAL

02. NAV BAR
	02.1 Logo
	02.2 Menu Icon
	02.3 Navigation
	
03. CONTENT

04. FOOTER

05. ELEMENT
    05.1 Photo Item
	05.2 Align Middle Wrapper
	05.3 Button

07. CLIENT PAGE
	
08. CONTACT PAGE

09. PROJECT PAGE
	
99. MEDIA SCREEN
 	- @media screen and (max-width: 1600px)
	- @media screen and (max-width: 1366px)
	- @media screen and (max-width: 1200px)
	- @media screen and (max-width: 991px)
	- @media screen and (max-width: 480px)

*/


/*===============================================*/
/* 00. PRELOADER		 						 */
/*===============================================*/
/* See: */
/* - preloader.css */


/*===============================================*/
/* 01. GENERAL	  		 						 */
/*===============================================*/
body{
	margin:0; 
	padding:0;
	font-family: 'Raleway', sans-serif; 
	background-color:#fff; 
	color:#a8c3bc;
	font-size:20px;
	font-weight:500;
}

h1{
	font-size:63px; 
	margin-bottom:36px;
}

h2{
	font-size:54px; 
	margin-bottom:36px;
}

h1, h2{
	margin-top:0;
	font-weight:800;
}

p{
	color: #a8c3bc;
	font-size: 18px;
/*
	font-size:28px;
	font-weight:500;
	line-height:54px;
	margin-bottom:50px;
*/
}

a, a:hover, a:active, a:focus{
	color:#FFF;
	text-decoration:none;
}

.fullwidth{
	width:100%;
}

.clearboth{
	clear:both;
}

.-rowmargin{
	margin-bottom:80px;
}

.-rowmargin.-desktopnomargin{
	margin-bottom:0px;
}

.-rowmarginhalf{
	margin-bottom:65px;
}

.-rowmarginhalf.-desktopnomargin{
	margin-bottom:0px;
}

.nomargin{
	margin:0 !important;
}

.nomargintop{
	margin-top:0 !important;
}

.nomarginbottom{
	margin-bottom:0 !important;
}

.-extrabold{
	font-weight:800;	
}

.-bold{
	font-weight:700;
}

.-semibold{
	font-weight:600;
}

.-medium{
	font-weight:500;
}

.grid-4{
	float:left;
	width:25%;
}

.grid-3{
	float:left;
	width:33.3%;
}


/*===============================================*/
/* 02. NAV BAR	  		 						 */
/*===============================================*/
#nav-bar{
	padding:18px 34px 4px 34px;
}

/* 02.1 Logo	  		 						 */
/*-----------------------------------------------*/
#logo{
	float:left; 
	width:50%; 
	font-weight:700; 
	font-size:33px;
}

.logo img{
	width: 200px;
}

.navbar-brand img {
	width: 115px;
}

.navbar-default {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    width: 100%;
    padding: 20px 0;
    background: #fff;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #007fbc !important;
    background-color: transparent;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
    color: #007fbc !important;
    background-color: transparent;
}
.navbar-brand { 
	padding: 0px;
	position: absolute;
	left: 50%;
	margin-left: -58px !important;  
	margin-top: -10px;
	}
	
/* .navbar-brand img {margin-left:10px; margin-top: -15px;} */
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border-color: #fff;
}
.menu-top { background: rgba(0, 0, 0, 0) none repeat scroll 0 0 }
.menu-top li a {
    color: #a8c3bc !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
	font-family: Raleway;
}
.menu-top li a:hover { color: #007fbc!important }

.navbar-default.menu-shrink {
    background-color: #fff;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    width: 100%;
}

.menu-shrink .navbar-brand img {
	width: 70px;
}
.navbar-default.menu-shrink li a { color: #a8c3bc!important }
.navbar-default.menu-shrink li a:hover { color: #007fbc !important }
.navbar-default .navbar-toggle { background: #fff none repeat scroll 0 0 }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: #fff }
.navbar-default .navbar-toggle .icon-bar { background-color: #007fbc }
/*

/* 02.2 Menu Icon  		 						 */
/*-----------------------------------------------*/
#menu-wrapper{
	float:right; 
	width:50%; 
	text-align:right; 
}

#bar-wrapper{
	margin-top:15px; 
	display:inline-block;
}

.bar{
	height:4px; 
	width:32px; 
	background-color:#FFF; 
	margin-bottom:5px;
	opacity:1;
	webkit-transition: all 0.2s ease; 
	-moz-transition: all 0.2s ease;
 	transition: all 0.2s ease;
}

#menu-icon:hover .bar{
	opacity:0.7;
	width:37px;	
}


/* 02.3 Navigation 		 						 */
/*-----------------------------------------------*/
#navigation-window{
	position:fixed;	 
	top:0; 
	bottom:0; 
	left:0; 
	right:0; 
	z-index:1;
	background-color:#000000;
	display:none; 
}

#navigation-window.open{
	display:block;
}

#navigation-title{
	font-weight:800; font-size:63px; margin-bottom:70px;
}

#nav-menu{
	list-style-type:none;
	text-align:center;
	font-size: 28px;
	padding:0;
	color:#FFF
}

#nav-menu li{
	margin-bottom:45px;	
}

#nav-menu li.current a{
	text-decoration:underline;
	opacity:0.7;
}

#nav-menu li a{
	color:#FFF;
}

#nav-menu li a:hover{
	opacity:0.7;
	text-decoration:none;
}

#closemenu-wrapper{
	position:fixed; top:25px; right:40px; 
}

#closemenu{
	font-size:35px; 
	color:#FFF
}

#closemenu i{
	opacity:1;
	-ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
	webkit-transition: all 0.2s ease; 
	-moz-transition: all 0.2s ease;
 	transition: all 0.2s ease;
}

#closemenu:hover i{
	opacity:0.7;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}


/*===============================================*/
/* 03. CONTENT	  		 						 */
/*===============================================*/
#page-content{
	width:1600px; 
	margin:0 auto; 
	padding:130px 0 30px 0;
}

#page-content.fullwidth{
	width:100% !important;
}


/*===============================================*/
/* 04. FOOTER	  		 						 */
/*===============================================*/
#social-media{
	padding:36px 0 36px 0;
	text-align: center;
}

.socmed-icon{
	font-size:26px; 
	color:#000; 
	text-decoration:none; 
	margin-right:42px;
	opacity:1
}

.socmed-icon.-nomargin{
	margin:0;
}

.socmed-icon:hover,
.socmed-icon:focus{
	color:#FFF;
	opacity:0.7;
	webkit-transition: all 0.2s ease; 
	-moz-transition: all 0.2s ease;
 	transition: all 0.2s ease; 
}


/*===============================================*/
/* 05. ELEMENT	  		 						 */
/*===============================================*/

/* 05.1 Photo Item 		 						 */
/*-----------------------------------------------*/
.photo-item{
	position:relative;
	margin-bottom:65px;
}

.photo-item.-desktopnomargin,
.photo-item.-nomargin{
	margin-bottom:0px;
}

.photo-item .overlay-caption{
	position:absolute;
	top:0; 
	bottom:0; 
	left:0; 
	right:0; 
	opacity:0;	
	background-color:#000000; 
	border: solid 4px #a8c3bc; 	
	webkit-transition: opacity 0.2s ease; 
	-moz-transition: opacity 0.2s ease;
 	transition: opacity 0.2s ease;
}

.photo-item .overlay-caption.-noborder{
	border: none; 	
}

.photo-item:hover .overlay-caption{
	opacity:1;
}

.overlay-caption .phototitle{
	font-size:23px; 
	font-weight:700; 
	margin-bottom:0px;
	color: #a8c3bc;
}

.overlay-caption .photocaption{
	font-size:16px; 
	font-weight:500;
}

#portfolio-photo {
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}

/* 05.2  Align Middle Wrapper					 */
/* ----------------------------------------------*/
.align-middle{
	position:absolute;
	display:table;
	height:100%;
	width:100%;
}

.v-align{
	display:table-cell;	
}

.-oncenter{
	vertical-align:middle;
	text-align:center;
}

.-ontop{
	vertical-align:top;
	text-align:center;
}

.-onbottom{
	vertical-align:bottom;
	text-align:center;
}


/* 05.3 Button									 */
/* ----------------------------------------------*/
.default-button{
	display:inline-block;
	background-color:#FFF; 
	padding:25px 50px; 
	font-size: 22px; 
	font-weight:700; 
	border-radius:3px; 
	color:#666;
	text-decoration:none;
	webkit-transition: all 0.2s ease; 
	-moz-transition: all 0.2s ease;
 	transition: all 0.2s ease; 
	border:none;
}

.default-button:hover,
.default-button:focus{
	background-color:#484747;
	color:#FFF;
	text-decoration:none;
}


/*===============================================*/
/* 07. CLIENT PAGE	 						 	 */
/*===============================================*/

.client-box{
	position:relative;
	height:432px;
	width:100%;
	border:3px solid #33b874; 
	border-right:none;
	border-bottom:none;
}

.client-box.-rightborder{
	border-right:3px solid #33b874; 
}

.client-box.-bottomborder{
	border-bottom:3px solid #33b874; 
}

.quoteicon{
	font-size:36px; 
	margin-bottom:40px; 
	opacity:0.5;
}

.theclient{
	font-size:24px;
	margin-top:42px;
	opacity:0.7;
}


/*===============================================*/
/* 08. CONTACT PAGE	 						 	 */
/*===============================================*/
h2.contact,
.h2.contact{
	font-weight:800; 
	font-size:54px;
	padding-bottom:30px; 
	margin-bottom:65px; 
	margin-top:0;
	border-bottom:3px solid #a8c3bc;
}

.info-item{
	width:80%; 
	color:#FFF; 
	margin:0 0 60px 0;
}

.info-item.-marginauto{
	margin:0 auto 60px auto;
}

.info-item.-desktopnomargin{
	margin:0px;
}

.info-item.-marginauto.-desktopnomargin{
	margin:0 auto 0 auto;
}

.info-item.-nomargin,
.info-item.-marginauto.-nomargin{
	margin:0px;
}

.info-item.-floatright{
	float:right;
}

.info-item > .thelabel{
	font-size:28px; 
	font-weight:800; 
	margin-bottom:15px;
}

.info-item > .theinfo{
	font-size:24px; 
	font-weight:500
}

#mapbutton-wrapper{
	text-align:right;
}

#sendbutton-wrapper{
	text-align:right;
}

input[type="text"], textarea{
	width:100%; 
	color:#FFF;
	padding:7px 0; 
	margin-bottom:80px;
	border:none; 
	border-bottom:3px solid #a8c3bc; 
	background-color:transparent
}

input[type="text"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}

input:focus,
textarea:focus {
    outline:none;
}

/*===============================================*/
/* 09. PROJECT PAGE	 						 	 */
/*===============================================*/
.project-detail{
	padding:45px 0 55px 0; 
	border-bottom:3px solid #33b874; 
	border-top:3px solid #33b874;
}

/*===============================================*/
/* 99. MEDIA SCREEN		 						 */
/*===============================================*/

@media screen and (max-width: 1600px) {
/*===============================================*/
/* 03. CONTENT	  		 						 */
/*===============================================*/	
#page-content{
	width:1366px;
}
}

@media screen and (max-width: 1366px) {
/*===============================================*/
/* 01. GENERAL	  		 						 */
/*===============================================*/	
body,p{
	font-size:16px;
}

p{
/* 	line-height:48px; */
/* 	margin-bottom:45px; */
}

h1{
	font-size:52px;
	margin-bottom:30px;
}

h2{
	font-size:42px; 
	margin-bottom:30px;
}

.-rowmargin{
	margin-bottom:105px !important;
}

.-rowmarginhalf{
	margin-bottom:55px !important;
}

#portfolio-photo {
	display: block;
}

#portfolio-photo {
	
}

/*===============================================*/
/* 02. NAV BAR	  		 						 */
/*===============================================*/
#nav-bar{
	padding:18px 34px 0px 34px;
}

/* 02.1 Logo	  		 						 */
/*-----------------------------------------------*/
#logo{
	font-size:30px;
}

/* 02.2 Menu Icon  		 						 */
/*-----------------------------------------------*/
.bar{
	width:28px; 
	margin-bottom:4px;
}

#menu-icon:hover .bar{
	width:33px;	
}

/* 02.3 Navigation 		 						 */
/*-----------------------------------------------*/
#navigation-title{
	font-size:52px; 
	margin-bottom:63px;
}

#nav-menu{
	font-size: 24px;
}

#nav-menu li{
	margin-bottom:36px;	
}

#closemenu-wrapper{
	top:25px; right:40px; 
}

#closemenu{
	font-size:30px; 
}

/*===============================================*/
/* 03. CONTENT	  		 						 */
/*===============================================*/	
#page-content{
	width:1200px;
	padding:105px 0 105px 0;
}

/*===============================================*/
/* 04. FOOTER	  		 						 */
/*===============================================*/
.socmed-icon{
	font-size:24px;
	margin-right:33px;
}

#social-media{
	padding:30px 0 30px 0;
}


/* 05.1 Photo Item 		 						 */
/*-----------------------------------------------*/
.overlay-caption .phototitle{
	font-size:24px; 
	margin-bottom:14px
}

.overlay-caption .photocaption{
	font-size:14px; 
}


/* 05.3 Button									 */
/* ----------------------------------------------*/
.default-button{
	padding:18px 36px;
	font-size:21px;
}

/*===============================================*/
/* 07. CLIENT PAGE	  		 					 */
/*===============================================*/	
.client-box{
	height:400px;
}

.client-box img{
	width:60%;
}

.quoteicon{
	font-size:30px; 
	margin-bottom:30px; 
	opacity:0.5
}

.theclient{
	font-size:22px;
	margin-top:36px;
	opacity:0.7
}

/*===============================================*/
/* 08. CONTACT PAGE	 						 	 */
/*===============================================*/
h2.contact,
.h2.contact{
	font-size:42px;
	padding-bottom:20px; 
	margin-bottom:50px; 
}

.info-item{
	margin:0 0 40px 0;
}

.info-item.-marginauto{
	margin:0 auto 40px auto;
}

.info-item > .thelabel{
	font-size:24px; 
	margin-bottom:12px;
}

.info-item > .theinfo{
	font-size:21px; 
	line-height:normal;
}

input[type="text"], textarea{
	margin-bottom:50px;
}

/*===============================================*/
/* 09. PROJECT PAGE	 						 	 */
/*===============================================*/
#project-portfolio{
	padding:10px 0 0 0;
}

#brief-detail p{
	font-size:24px; 
	line-height:45px; 
	margin:0 0 30px 0;
}


}

@media screen and (max-width: 1200px) {
/*===============================================*/
/* 03. CONTENT	  		 						 */
/*===============================================*/	
#page-content{
	width:991px;
}

/*===============================================*/
/* 07. CLIENT PAGE	  		 					 */
/*===============================================*/	
.client-box{
	height:300px;
}

.client-box img{
	width:70%;
}

/* 05.1 Photo Item 		 						 */
/*-----------------------------------------------*/
.overlay-caption .phototitle{
	font-size:21px; 
}

.overlay-caption .photocaption{
	font-size:16px; 
}

}

@media screen and (max-width: 991px) {
/*===============================================*/
/* 01. GENERAL	  		 						 */
/*===============================================*/	
.grid-4{
	float:none;
	width:100%;
	padding:0 30px 0 30px;
}

.grid-3{
	float:none;
	width:100%;
	padding:0 30px 0 30px;
}

/*===============================================*/
/* 03. CONTENT	  		 						 */
/*===============================================*/	
#page-content{
	width:100%;
}


/* 05.1 Photo Item 		 						 */
/*-----------------------------------------------*/
.photo-item{
	margin-bottom:65px !important;
}

.photo-item.-nomargin{
	margin-bottom:0px !important;
}

.photo-item .overlay-caption{
	border: solid 4px #33b874 !important;
}

.overlay-caption .phototitle{
	font-size:27px; 
	margin-bottom:17px
}

.overlay-caption .photocaption{
	font-size:16px; 
}

/*===============================================*/
/* 07. CLIENT PAGE	  		 					 */
/*===============================================*/	
.client-box{
	border:3px solid #33b874 !important; 
	margin-bottom:40px;
}

.client-box.-nomargin{
	margin-bottom:0 !important;
}

.client-box img{
	width:35%;
}


/*===============================================*/
/* 08. CONTACT PAGE	 						 	 */
/*===============================================*/
.info-item{
	width:100%; 
	margin:0 0 60px 0  !important;
}

.info-item.-nomargin{
	margin:0 auto 0 auto !important;
}

.info-item.-marginauto{
	margin:0 auto 60px auto  !important;
}

.info-item.-floatright{
	float:none;
}

#mapbutton-wrapper{
	text-align:left;
	margin-top:40px;
}

#sendbutton-wrapper{
	text-align:left;
	margin-top:10px;
}


/*===============================================*/
/* 09. PROJECT PAGE	 						 	 */
/*===============================================*/
#brief-label{
	margin-bottom:30px;
}

}

@media screen and (max-width: 768px) {
	/*===============================================*/
	/* 07. CLIENT PAGE	  		 					 */
	/*===============================================*/	
	.client-box img{
		width:40%;
	}
}

@media screen and (max-width: 480px) {
	/*===============================================*/
	/* 01. GENERAL	  		 						 */
	/*===============================================*/	
	body, p {
		font-size:14px;
	}
	
	p{
/*
		line-height:37px;
		margin-bottom:30px;
*/
	}
	
	h1{
		font-size:36px;
		margin-bottom:21px;
	}
	
	h2{
		font-size:30px;
		margin-bottom:21px;
	}
	
	.-rowmargin{
		margin-bottom:60px !important;
		margin-top: 100px;
	}
	
	.-rowmarginhalf{
		margin-bottom:30px !important;
	}
	
	
	/*===============================================*/
	/* 02. NAV BAR	  		 						 */
	/*===============================================*/
	#nav-bar{
		padding:14px 10px 0px 10px;
	}
	
	/* 02.1 Logo	  		 						 */
	/*-----------------------------------------------*/
	#logo{
		font-size:23px;
	}
	
	/* 02.2 Menu Icon  		 						 */
	/*-----------------------------------------------*/
	#bar-wrapper{
		margin-top:6px; 
	}
	
	.bar{
		height:3px; 
		width:24px; 
		margin-bottom:4px;
	}
	
	#menu-icon:hover .bar{
		width:30px;	
	}
	
	/* 02.3 Navigation 		 						 */
	/*-----------------------------------------------*/
	#navigation-title{
		font-size:36px; 
		margin-bottom:53px;
	}
	
	#nav-menu{
		font-size:21px;
	}
	
	#nav-menu li{
		margin-bottom:30px;	
	}
	
	#closemenu-wrapper{
		top:15px; right:20px; 
	}
	
	#closemenu{
		font-size:21px; 
	}
	
	/*===============================================*/
	/* 03. CONTENT	  		 						 */
	/*===============================================*/	
	#page-content{
		width:100%;
		padding:60px 0 60px 0;
	}
	
	/*===============================================*/
	/* 04. FOOTER	  		 						 */
	/*===============================================*/
	#social-media{
		padding:10px 0 10px 0;
	}
	
	.socmed-icon{
		font-size:21px;
		margin-right:20px;
	}
	
	/* 05.1 Photo Item 		 						 */
	/*-----------------------------------------------*/	
	.photo-item.-marginbottom{
		margin-bottom:40px !important;
	}
	
	.photo-item.-nomargin{
		margin-bottom:0px !important;
	}
	
	.overlay-caption .phototitle{
		font-size:15px; 
		margin-bottom:5px
	}
	
	.overlay-caption .photocaption{
		font-size:12px; 
	}
	
	/* 05.3 Button									 */
	/* ----------------------------------------------*/
	.default-button{
		padding:14px 20px; 
		font-size: 18px;
	}
	
	/*===============================================*/
	/* 07. CLIENT PAGE	  		 					 */
	/*===============================================*/	
	.client-box{
		height:250px;
		margin-bottom:40px;
	}
	
	.client-box img{
		width:60%;
	}
	
	#client-testimonial{
		margin-bottom:20px;
	}
	
	.quoteicon{
		font-size:28px;	
		margin-bottom:16px;
	}
	
	.theclient{
		font-size:17px; 
		margin-top:24px;
	}
	
	
	/*===============================================*/
	/* 08. CONTACT PAGE	 						 	 */
	/*===============================================*/
	h2.contact,
	.h2.contact{
		font-size:30px;
		padding-bottom:15px; 
		margin-bottom:35px; 
	}
	
	.info-item{
		margin:0 0 30px 0 !important;
	}
	
	.info-item.-marginauto{
		margin:0 auto 30px auto !important;
	}
	
	.info-item > .thelabel{
		font-size:21px; 
		margin-bottom:10px;
	}
	
	.info-item > .theinfo{
		font-size:18px; 
		line-height:normal;	
	}
	
	#mapbutton-wrapper{
		text-align:left;
		margin-bottom:20px;
		margin-top:30px;
	}
	
	input[type="text"], textarea{
		margin-bottom:30px;
		padding:4px;
	}
	
	#sendbutton-wrapper{
		text-align:left;
		margin-top:14px;
	}
	
	/*===============================================*/
	/* 09. PROJECT PAGE	 						 	 */
	/*===============================================*/
	.project-detail{
		padding:30px 0 30px 0; 
	}
	
	#project-portfolio{
		padding:10px 0 0 0;
	}
	
	#brief-label{
		margin-bottom:10px;
	}
	
	#brief-detail p{
		font-size:18px; 
		line-height:30px; 
		margin:0 0 13px 0;
	}
}

@media screen and (max-width:1200px) {
	.navbar-brand {
		width: 200px;
		left: 0%;
		margin-left: 10px !important;
	}
}	

@media screen and (max-width:767px) {
    .navbar-nav {
        background: #fff;
    }

	.navbar-brand {
	    height: auto;
	    width: 70%;
	}
	.navbar-brand img {
	    width: 100%;
	}
	.menu-shrink .navbar-brand img {
	    width: 50%;
	}
}


@media screen and (max-width:426px) {
	.navbar-brand {
		width: 200px;
		left: 0%;
		margin-left: 10px !important;
	}
}	

.box {
	background: #fff;
	border-radius: 10px;
	color: #a8c3bc;
	padding: 10px;
	margin-bottom: 20px;
}

.box-inner {
	margin: 20px 0 20px 0;
	color: #000000;
}

.box-inner a {
	color: #666666;
	border-color: #666666;
}

.cursive {
	font-family: 'Qwigley', cursive; 
	font-size: 100px; 
	margin-bottom: 0px;
}

.cursive-small {
	font-family: 'Qwigley', cursive; 
	font-size: 50px; 
	margin-bottom: 0px;
}