@charset "UTF-8";
/* CSS Document */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
	.services{margin-bottom:2.0em;}
	.box-shape-container{margin-bottom:2.0em;}
		#services .content > section {
			height: auto;
		}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { 
	.services{margin-bottom:2.0em;}
	.box-shape-container{margin-bottom:2.0em;}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { 

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { 

}

@media screen and (min-width: 1170px){
	.navbar-default {
		transition: padding 0.3s;
		}
		.navbar-default .navbar-brand{
			padding:30px 0;
		}
	.navbar-default.navbar-shrink {
		transition: padding 0.3s;
		}
		.navbar-default.navbar-shrink .navbar-brand{
			margin-top: 0;
			padding:0 1.0em;
			transition: padding 0.3s;
			}
			.navbar-default.navbar-shrink .navbar-brand img{
				margin-top: 0;
				padding-top: 0;
				padding-bottom:0;
				transition: all 0.5s easy;
				max-height: 60px !important;
				}
}/* Ends the media query for min-width: 1170px *********************  */

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	#testimonialsslider .carousel-control-prev{
		margin-left: -1.0em;
	}
	#testimonialsslider .carousel-control-next{
		margin-right: -1.0em;
	}
}


body{
	font-size: 16px !important;
	font-family:'Open Sans' !important;
	font-style: normal;
	font-weight: 400;
	overflow: auto;
	min-height: 2000px;
}

h1, h2, h3, h4, h5, h6{
	font-family:'Open Sans' !important;
	font-style:normal;
	font-weight: 300 !important;
}
h3{
	font-size: 2.0em !important;
}

i{
	margin-right:1.0em;
}

a:link,
a:visited{
	color:#DCB000;
}


#mainheader{
/*	background-image: linear-gradient(135deg, #271b38, #563d7c, #7952b3);*/
	background-color:#FFFFFF;
	-webkit-transition: padding .55s;
	-moz-transition: padding .55s;
	-ms-transition: padding .55s;
	-o-transition: padding .55s;
	transition: padding .55s;
	z-index: 999;
	opacity: 0.9;
	}
	#mainheader .navbar{
		position:relative;
		}
	#mainheader .navbar-brand{
		margin-top:-5px;
		}
	#mainheader .navbar-default.navbar-shrink .navbar-brand > img {            
		max-height: 50px;
		}
		.navbar-default .navbar-brand > img {            
			max-height: 80px;
			transition: all 0.5s easy;
			}



#navbarmenu{
	font-size: 1.0em;
	}
	#navbarmenu #btogger{
		right: 1.0em;
	}
	#navbarmenu ul li{
		margin-left: 1.5em;
		}
		#navbarmenu ul li.active{
			background-color: #ffcc66;
			border-radius: 5px;
			}
			#navbarmenu ul li.active a{
				color: #ffffff !important;
				padding-left: 1.0em;
				padding-right: 1.0em;
				}
			/* Use this style if the list item is not marked with Active */
			#navbarmenu ul li a:link,
			#navbarmenu ul li a:visited{
				color:#2e424c;
				font-size: 1.0em;
				font-weight: 400;
				font-style: italic;				
			}
			#navbarmenu ul li a:hover,
			#navbarmenu ul li a:active{
				color:#ffcc66;
			}

.content {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	}
	.content > section#homepage{
		width: 100%;
		height: 100%;
		clear: both;
		}
.content > section{
	width: 100%;
	min-height: 100%;
	height: auto;
}

/*  This is the style for the homepage only. It matches the colors of the logo  */
#home{
	background-color:#fafafa;
}

/*  This is the style for the second and the fourth section of the website  */
#services,
#testimonials{
	background-color:#ffcc66;
	}
	#services a:link,
	#services a:visited,
	#testimonials a:link,
	#testimonials a:visited{
		color: #2e424c;
	}
	#services a:hover,
	#services a:active,
	#testimonials a:hover,
	#testimonials a:active{
		color:#999;
	}

/*  This is the style for the third and the fifth sections of the website  */
#about,
#contact{
	background-color:#FAFAFA;
	}
	#about a:link,
	#about a:visited,
	#contact a:link,
	#contact a:visited,
	.modal-dialog a:link,
	.modal-dialog a:visited{
		color: #406a80;
	}
	#about a:hover,
	#about a:active,
	#contact a:hover,
	#contact a:active,
	.modal-dialog a:hover,
	.modal-dialog a:active{
		color:#406a80;
		text-decoration: underline;
	}
	#contact .google-maps {
		position: relative;
		padding-bottom: 75%; /* This is the aspect ratio */
		height: 0;
		overflow: hidden;
		}
		#contact .google-maps iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100% !important;
			height: 100% !important;
			}

/*
#contact{
	background-color:#FFEDFD;
	}
	#contact a:link,
	#contact a:visited{
		color: #ecaf67;
	}
	#contact a:hover,
	#contact a:active{
		color:#c7873b;
	}
*/

#services .btn-outline-primary,
#about .btn-outline-primary,
#testimonials .btn-outline-primary,
#contact .btn-outline-primary{
	color: #2e424c;
	border:1px solid #2e424c;
	}

.modal-dialog button.btn-primary,
#services .btn-primary,
#about .btn-primary,
#testimonials .btn-primary,
#contact .btn-primary{
	background-color: #2e424c;
	color: #FFFFFF;
	border:1px solid #2e424c;
	}
	.modal-dialog button.btn-primary:hover, 
	.modal-dialog button.btn-primary:active,
	#services .btn-outline-primary:hover,
	#about .btn-outline-primary:hover,
	#testimonials .btn-outline-primary:hover,
	#contact .btn-outline-primary:hover, /* The outline primary should have the same style as the primary button */
	#services .btn-primary:hover,
	#about .btn-primary:hover,
	#testimonials .btn-primary:hover,
	#contact .btn-primary:hover{
		color:#ffffff;
		background-color: #406a80;
		border:1px solid #406a80;
	}






/* Carousel Controls ****************************************** */
#mainslider{
	
	}
	#mainslider .carousel-item{
		height: 100vh;
		}
		#mainslider .carousel-caption{

			}
			#mainslider .carousel-caption h5{
				font-size: 3.0em;
				text-shadow: 2px 2px 2px #000000;
			}
			#mainslider .carousel-caption p{
				font-size: 1.5em;
				text-shadow: 1px 1px 2px #000000;
				font-style: italic;
				font-weight: 300;
			}
			#mainslider img.carousel-image{
				width: 100%;
				height: 100vh;
				}


/* Our Work Slider ****************************************** */
#testimonialsslider{
	padding:2.0em;
	}
	#testimonialsslider .inner-carousel-item{
		margin-left: 2.0em;
		margin-right: 2.0em;
		}
		#testimonialsslider .inner-carousel-item.active{
			background-color:#ffcc66;
		}
	#testimonialsslider .carousel-control-prev,
	#testimonialsslider .carousel-control-next{
		width: 10% !important;
		color:#555;
		font-size:2.5em;
		}
	#testimonialsslider .carousel-item{
		margin-left:2.0em;
		margin-right:2.0em;
		margin-bottom: 2.0em;
		}
		#testimonialsslider .carousel-indicators li{
			background-color:#555;
		}

.commenter{
	font-weight: 300;
	font-style: italic;
}

/* Background Styles ************************************** */
.graysection{
	background-color:#f2f2f2;
}
.light-orange{
	background-color: #feddba;
}
.medium-orange{
	background-color: #fdcc97;
}
.light-blue{
	background-color:#e1eef5;
}
.light-blue h4{
	color: #ffcc66;
}
.medium-blue{
	
}
.light-yellow{
	background-color: #ffe5b2;
}
.medium-yellow{
	background-color: #ffcc66;
}


.box-shape-container{
	padding:0 0.5em;
}
.box-shape{
	padding:1.0em;
	border-radius: 5px;
}

/* Page Components **************************************** */
.pagesection{
	padding:6.0em 2.0em 2.0em;
}
.center-aligned{
	display: block;
	text-align: center;
	}
	h2.center-aligned{
		margin-top:1.5em;
		margin-bottom: 1.5em;
	}
.title-padding-small{
	padding-top:0.5em;
	padding-bottom:0.5em;
}
.title-padding:first-child{padding-top:0;}
.title-padding{
	padding-top:1.0em;
	padding-bottom:1.0em;
}

.centered{
	margin-left:auto;
	margin-right:auto;
}

.hidden{
	display: none;
}

/*  Form style for validation ****************************  */

.is-invalid,
.is-valid,
.error{
	font-size:0.85em;
}
.error,
.is-invalid{
	color:#cc0000;
}
.success,
.is-valid{
	color:#098D09;
}

.error{
	font-style: italic;
}
/* These are the success and error section of the website forms */
.success, 
.error{
	text-align:center;
	}
	.success div, 
	.error div{
		display:block;
		position:absolute;
		top:0;
		width:100%
		}
		.success div p, 
		.error div p{
			margin-top:6.0em;
			line-height:1.5em;
			font-style:italic;
			}
		.success div p{
		  color: #3C0;
		}
		.error div p{
		  color:#990000;
		}
		
#requestappointment.modal-dialog,
#startaproject .modal-dialog{
	min-width: 700px !important;
}
#requestappointment.modal-header h5,
#startaproject .modal-header h5{
	color:#ffcc66;
	font-size:1.6em !important;
}

#requestappointment.modal-dialog #sucess,
#startaproject .modal-dialog #error{
	positon:relative;
}

#processmessage,
#processmessageraa{
	
}

.modal-dialog .modal-title{
	font-size: xx-large;
}