/*
face - #a66666
collar - #333333
glass - #cbcbcb
suit - #999999
glare- #e3e3e3
*/


body {
	margin: 0;
	position: relative;
	width: auto;
	font-family: oswald-medium, oswald, sans-serif;
}


#mainbackground {
  width: 100%;
height:100%;
  display: block;
  position: relative;
}

#mainbackground::after {
  content: "";
  background: url("../images/bg-home6.jpg") repeat-y scroll center top #e3e3e3;
  opacity: 0.7;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
    background-attachment: fixed;  

}




#contactbackground {
  width: 100%;
  height: 100%;

  display: block;
  position: relative;
}

#contactbackground::after {
  content: "";
  background: url("../images/bg-home2.jpg") repeat-y scroll center top #e3e3e3;
  opacity: 0.7;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
  background-attachment: fixed;  
}

#projectsbackground {
  width: 100%;
  height: 100%;

  display: block;
  position: relative;
}

#projectsbackground::after {
  content: "";
  background: url("../images/bg-home2.jpg") repeat-y  center top #e3e3e3;
  opacity: 0.7;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
  background-attachment: fixed;  
}



a {
	text-decoration: none;
	outline: none;
}

a:active {
	background: none;
	text-decoration: none;
}

img {
	border: none;
}
/*-------------------------------------------FONTS---------------------------------------------*/
@font-face {
	font-family: 'audiowide-regular-webfont';
	src: url('../fonts/audiowide-regular-webfont.eot');
	src: url('../fonts/audiowide-regular-webfont.woff') format('woff'), url('../fonts/audiowide-regular-webfont.ttf') format('truetype'), url('../fonts/audiowide-regular-webfont.svg') format('svg');
}
/*----------------------------------navigation header-styles---------------------------------------*/
#header {
	background: url(../images/bg-transparent1.png) repeat;
	background-color: #FFFFFF;
	margin: 0;
	height: auto;
	padding: 0;
	width: auto;
}

#headerlogo {
	margin: auto;
	padding: 45px 0 6px 0;
	border-bottom: 2px;
	border-bottom-style: solid;
	border-color: black;
	max-width: 1200px;
	background-color: #FFFFFF;
	text-transform: Uppercase;
	color: blue;
	font-size: 22px;
	line-height: 1.6em;
	font-style: normal;
	font-weight: 700;
	letter-spacing: -1px;
	word-spacing: -1px;
	font-family: oswald-medium, oswald, sans-serif;
	overflow: auto;
}

#headerlogo a {
	color: #342643;
	text-decoration: none;
}

#headerlogo a:hover {
	color: #342643;
	text-decoration: none;
}

#headerlogo a:active {
	color: #342643;
	text-decoration: none;
}

#menubar {
	background: #FFFFFF;
	background-color: #FFFFFF;
	margin: 0;
	padding: 0;
	width: auto;
	text-decoration: none;
}

 /* Style buttons 
.btn {
	background-color: DodgerBlue;
	border: none;
	color: white;
	padding: 13px 30px;
	cursor: pointer;
	font-size: 16px;
}
*/
/* Darker background on mouse-over 
.btn:hover {
	background-color: RoyalBlue;
} */



 /* Place the navbar at the bottom of the page, and make it stick */
.navbar {
	background-color: #FFFFFF;
	overflow: hidden;
	position: static;
	top: 60px;
	width: 100%;
	margin: auto;
	max-width: 1200px;
}

/* Style the links inside the navigation bar */
.navbar a {
	float: left;
	display: block;
	color: #333;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
	line-height: 17px;
}

/* Change the color of links on hover */
.navbar a:hover {
	background-color: #cbcbcb;
	color: #333333;
	text-decoration: none;
}

/* Add a green background color to the active link */
.navbar a.active {
	background-color: #cbcbcb;
	color: #333333;
	text-decoration: none;
}

/* Hide the link that should open and close the navbar on small screens */
.navbar .icon {
	display: none;
} 

 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
@media screen and (max-width: 600px) {
	.navbar a:not(:first-child) {
		display: none;
	}

	.navbar a.icon {
		float: right;
		display: block;
	}
}

/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
	.navbar.responsive a.icon {
		position: absolute;
		right: 0;
		top: 113px;
	}

	.navbar.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
}


/*----------------------------------------Index page-home-styles-------------------------------*/
#body {
	background-color: #000000;
	margin: 0;
	min-height: 850px;
	overflow: hidden;
	padding: 0;
	width: 100%;
}

#body.home {
	margin: auto;
	display: block;
	background: transparent;
	min-height: 450px;
	overflow: hidden;
	width: 100%;
}

#blockmain {
	position: relative;
	top: 03px;
	margin: auto;
	display: block;
	background: transparent;
	overflow: hidden;
	max-width: 1200px;
	height: 444px;
	color: #333333;
}
/*used to center the project divs in middle of page*/

#blockmainwrapper {
	position: relative;
	max-width: 1100px;
	display: flex;
	align-items: center;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.mainblurbwrapper {
	padding: 2px 15px 15px 15px;
	background: rgb(227, 227, 227, 1);
	vertical-align: top;
	width: 55%;
	height:auto;
	flex: right;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	
}


p.homeblurb {
	font-size:18px;   
	color:#33333;
	 text-align: justify;
	 

}

.mainsidepicwrapper {
	position: relative;
	background: transparent;
	height: 350px;
	width: 350px;
	flex: left;
	

}



.mainpic {
	position: relative;
	margin: auto;
	
	width: 100%;
	height: 100%;
	display: block;
 /* remove extra space below image */
	background: transparent;
	padding: 5px 10px;
	
	
}

.mainblurbs {
	padding: 15px 15px 5px 15px;
	text-shadow: .1px .1px .1px #333333;
	color: #333333;
	text-align: center;
}

@media all and (max-width:700px) {

	#blockmainwrapper {
		margin: auto;
		position: relative;
		max-width: 100%;
		flex-wrap: wrap;
	}

	.
#blockmain {
	position: relative;
	top: 03px;
	margin: auto;
	display: block;
	background: transparent;
	overflow: hidden;
	max-width: 1200px;
	height: 500px;
	color: #333333;
}

p.homeblurb {
	font-size:15px;   
	color:#33333;
	 text-align: justify;

}
	

	#body.home {
		min-height: 600px;
	}

	#blockmain {
		height: 590px;
		padding: 5px;
	}
	
	#contactbackground::after {
  content: "";
  background: url("../images/bg-home2.jpg") repeat-x scroll center top #e3e3e3;
  opacity: 0.7;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
  background-attachment: fixed;  
}

	
}



/*---------------------------------------Projects style---------------------------------------------*/
body #projectspage {
	background: red;
	/*url("../images/bg-home2.jpg") repeat-y scroll center top #e3e3e3;*/
	margin: 0;
	top: 0;
	overflow: hidden;
	padding: 0;
	z-index: 3;
	width: 100%;
	background-size: cover;
}

#bodyprojects {
	margin: auto;
	display: block;
	top: 0px;
	background: rgb(227, 227, 227, 0.8);
	min-height: 1070px;
	overflow: none;
	max-width: 1150px;
}

#blockprojects {
	position: relative;
	padding: 0 25px 0 25px;
	margin: auto;
	display: block;
	background: transparent;
	overflow: hidden;
	max-width: 1200px;
	color: #333333;
}

#timelinewrap {
	position: relative;
	background-color: transparent;
}

/*----------------------------Picture slider style----------------------->*/

* {
	box-sizing: border-box;
}

/* Slideshow container */
.slideshow-container {
	width: 299px;
	position: relative;
	top: 0px;
	background: transparent;
	margin: auto;
	margin-bottom: 10px;
}

/* Hide the images by default */
.mySlides1, .mySlides2,.mySlides3,.mySlides4 {
	display: none;
}


/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 2px 7px;
	margin-top: 58px;
	color: #a66666;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	z-index: 10;
	border-radius: 2px 2px 2px 2px;
	user-select: none;
	background-color: rgb(227, 227, 227, 0.4);
}

/* Position the "next button" to the right */
.next {
	right: 0px;
}

/* On hover, add a grey background color */
.prev:hover, .next:hover {
	background-color: #f1f1f1;
	color: #333333;
}

/* Sets image in the middle of div */

.vertsliderimg {
	height: 185px;
	border-radius: 1px;
	position: relative;
	display: block;
	margin: auto;
}

/* Caption text */
#captiontext {
	color: #333333;
	background: rgb(227, 227, 227, 0.8);
	font-size: 12px;
	padding: 2px;
	width: 100%;
	height: 32px;
	text-align: center;
	margin: auto;
	top: 149px;
	z-index: 9;
	position: absolute;
}




/* Fading animation */
.fade {
	animation: fadeIn ease 1s;
	-webkit-animation: fadeIn ease 1s;
	-moz-animation: fadeIn ease 1s;
	-o-animation: fadeIn ease 1s;
	-ms-animation: fadeIn ease 1s;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-o-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}



/*----------------------------------------contact form-styles---------------------------------------*/
#body .header {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}



#emailphone {
	font-size: 12px;
	color: #333333;
	padding:2px;
	top:0px;
	position: relative;
	text-align: left;
	margin: auto;
	width: 100%;
		background: rgb(227, 227, 227, 0.6);

	
}

#contactwelcome {
	color: #333333;
	display: block;
	font-size: 18px;
	text-shadow: 4px 3px 3px #ababab;
	font-weight: bold;
	line-height: 20px;
	margin: 0 auto;
	padding: 8px 0 10px;
	text-align: center;
	width: 100%;
}

.success_style {
	position: relative;
	top: 25px;
	max-width: 350px;
	margin: auto;
	color: green;
	text-align: center;
	border: 2px solid green;
	border-radius: 5px;
}

#body.contacthome {
	margin: auto;
	display: block;
	background: transparent;
	min-height: 450px;
	overflow: hidden;
	max-width: 100%;
}

#blockcontact {
	position: relative;
	top: 03px;
	margin: auto;
	display: block;
	background: transparent;
	overflow: hidden;
	max-width: 1200px;
	height: 444px;
	color: #333333;
}

#blockmain {
	position: relative;
	top: 03px;
	margin: auto;
	display: block;
	background: transparent;
	overflow: hidden;
	max-width: 1200px;
	height: 444px;
	color: #333333;
}
/*used to center the project divs in middle of page*/

#blockcontactwrapper {
	position: relative;
	max-width: 1100px;
	display: flex;
	align-items: center;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.contactblurbwrapper {
	padding: 1px;
	background: rgb(227, 227, 227, 0.7);
	vertical-align: top;
	width: 55%;
	flex: right;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	height: 380px;
}

.contactsidepicwrapper {
	position: relative;
	background: transparent;
	height: 350px;
	width: 350px;
	flex: left;
}

.contactpic {
	position: relative;
	margin: auto;
	width: 100%;
	height: 100%;
	display: block;
 /* remove extra space below image */
	background: transparent;
	padding: 5px 10px;
}


#blockmainwrapper {
	position: relative;
	max-width: 1100px;
	display: flex;
	align-items: center;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

@media all and (max-width:700px) {

	#blockcontactwrapper {
		margin: auto;
		position: relative;
		max-width: 100%;
		flex-wrap: wrap;
	}
	
		#blockmainwrapper {
		margin: auto;
		position: relative;
		max-width: 100%;
		top:45%;
		
		flex-wrap: wrap;
	}

	.contactblurbwrapper {
		width: 100%;
	}
	
	.mainblurbwrapper {
		width: 100%;
		
	}

	.contactsidepicwrapper {
		margin: auto;
		padding-bottom: 15px;
		top: 5px;
	}
.mainsidepicwrapper {
		margin: auto;
				padding-bottom: 15px;

	}


	#body.contacthome {
		min-height: 720px;
	}
	
	

	#blockcontact {
		height: 720px;
		padding: 5px;
	}
	
	#blockmain {
		min-height: 720px;
		
	}
	
	#contactbackground::after {
  content: "";
  background: url("../images/bg-home2.jpg") repeat-x scroll center top #e3e3e3;
    background-size: 1200px 900px;
  opacity: 0.7;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
  background-attachment: fixed;  
}


#mainbackground::after {
  content: "";
  background: url("../images/bg-home6.jpg") repeat-x scroll center top #e3e3e3;
    background-size: 1900px 800px;
  opacity: 0.7;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
  background-attachment: fixed;  
}

	
	
	
	
}


/*----------------------------------------footer-styles---------------------------------------*/
#footer {
	margin: 0;
	padding: 0;
	width: auto;
}

#footer .connect {
	background-color: #FFFFFF;
	margin: 0 auto;
	height: 80px;
	overflow: hidden;
	padding: 10px 0 0 0;
	width: auto;
	display: block;
	font-family: Arial;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
	color: #333333;
}

#footer .connect div div {
	float: left;
	margin: 0;
	overflow: hidden;
	padding: 0 0 0 20px;
	width: 380px;
}

#footer .connect div div a {
	background: url(../images/icons.png) no-repeat;
	display: block;
	float: left;
	height: 35px;
	margin: 0;
	padding: 0;
	width: 17px;
}

#footer .connect div div a.facebook {
	background-position: 0 0;
	margin: 0 0 0 15px;
	width: 17px;
}

#footer .connect div div a.twitter {
	background-position: 0 -114px;
	margin: 0 0 0 28px;
	width: 44px;
}

#footer .connect div div a.pinterest {
	background-position: 0 -76px;
	margin: 0 0 0 29px;
	width: 30px;
}

#footer .connect div div a.facebook:hover {
	background-position: -20px 0;
}

#footer .connect div div a.twitter:hover {
	background-position: -46px -114px;
}

#footer .connect div div a.pinterest:hover {
	background-position: -32px -76px;
}