html, body, header, footer, hgroup, nav, article, section, figure,
figcaption, h1, h2, h3, body, div, p, img {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	border: 0;
	box-sizing: border-box;
}


/* Grabs Tamil_MN Font */
@font-face {
	font-family: "Tamil_MN";
	src: url(Tamil_MN.ttf) format("truetype");
}

ul{
	margin-top: 0;
}

html{

	margin: 0 auto;

}




a{
	text-decoration: none;
	color: white;
}


hr{
	border: 1px solid white;
	border-bottom: none;
}

body {
	background: white url("http://i.imgur.com/gs2hgiB.jpg");
	background: white;

	background-size: cover;
	background-position: right top;
	background-repeat: no-repeat;
	color: black;
	font-family: helvetica;
	font-family: 'Ubuntu', sans-serif;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;

	width: 100vw;

	min-width: 700px;
	min-width: 300px;


	max-width: 1950px;
	line-height: 25px;
	margin: 0;

	padding: 0;

}

/* AWESOME! This fixes the weird border on the right of the page for mobile devices! */
html,body
{

	overflow-x: hidden;
}

main{
	background-color: white;
}

h1{
	font-size: 22px;
}

h2{
	font-size: 40px;
}


h3{
	font-size: 28px;
	font-weight: normal;
}


article >ul{
	position: relative;
	left: 150px;
	top: -125px;
}


input {
	border: 0;
	padding: 10px;
	font-size: 18px;
	background: #EAEAEA;

}

input[type="submit"] {
	background: rgba(30,86,160,1);
	color: white;

}

img{
	width: auto;
	height: 100px;
	margin: 15px;
}

.fa{
	color: black;
	font-size: 35px;
	padding-left: 10px;
}

#connect a{
	padding-left: 10px;
}

.fa:first-child{
	padding-left: 0;
}

#connect a:first-child{
	padding-left: 0;
}


header .fa:hover{
	color: #4CAF50;
	color: #007dc5;
	cursor: pointer;
}

p{
	margin: 15px;
}

.menu{
	position: relative;
	top: 15px;
	left: 15px;
	width: 50px;
	height: 50px;
	font-size: 50px;
	color: white;

}

.fa-home{
	position: relative;
	top: 15px;
	left: 15px;
	width: 50px;
	height: 50px;
	font-size: 50px;
	color: white;
	padding: 0;
}

.leftArrow{
	position: absolute;
	top: 0px;
	left: -20px !important;
	width: 75px;
	height: 75px;
	font-size: 75px;
	display: none;
	color: white;
	z-index: 1;
	text-align: center !important;
}

.leftArrow:hover{
	color: #008183 !important;
}



.fullscreen{
	position: fixed;
	left: 0;
	width: 100%;
	height: 100%;
	top: 0;
	background: rgba(25,67,102, 1);
	background: black;
	z-index: 3;
	display: none;
}

#scrollMenu{
	background-color: #18453B;

}

#scrollMenuNav{
	position: absolute;
	top: 100px;
	left: 50%;
	width: 500px;
	height: 50px;
	margin-left: -250px;


	border-radius: 5px;
	list-style: none !important;

}


#scrollMenuNav ul{
	margin: 0;
	padding: 0;
}

#scrollMenuNav li{
	list-style: none;
	text-align: center;
	background: #4CAF50;
	background-color: #007dc5;
	background: #008183;



	font-size: 30px;
	margin-top: 50px;
	line-height: 50px;
}


#scrollMenuNav li:hover{
	color: black !important;
	background: white;
	cursor: pointer;
}

#scrollMenuNav li:hover a{
	color: black !important;
	background: white;
	cursor: pointer;
}




header{
	position: relative;
	height: auto;

	top: 0;

	left: 0;

}

.fa-bars{
	top: 15px;
	left: 15px;
	height: 50px;
	position: relative;
	color: white;
	width: 50px;
	font-size: 50px;
	text-align: center;

	z-index: 3;
}


.fa-bars:hover{
	color: #008183 !important;
}


#digital-resume-example{
	position: absolute;

	top: 8px;
	height: 275px;
	left: 50%;

	margin-left: -158px;
	width: 316px;
}


#homepage_mobile{
	position: absolute;

	top: 8px;
	height: 275px;
	left: 50%;
	left: 65%;
	width: auto;
}

#menu_mobile{
	position: absolute;

	top: 8px;
	height: 275px;
	left: 81%;

	width: auto;
}


#resume-example{
	position: absolute;
	top: 20px;
	height: 250px;

	right: 78%;

	width: auto;
}

#arrow{
	position: absolute;

	top: 140px;
	right: 70%;
	left: auto;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	color: white;
}

@media screen and (max-width: 975px) {
	#digital-resume-example{
		margin-left: -100px;
	}

	#resume-example{
		position: absolute;
		top: 20px;
		height: 250px;
		left: 0px;
		right: auto;
		width: auto;
	}

	#arrow{
		position: absolute;

		top: 140px;
		right: auto;
		left: 225px;
		width: 50px;
		height: 50px;
		text-align: center;
		line-height: 50px;
		color: white;
	}

	#menu_mobile{

		display: none;
	}

	#homepage_mobile{
		position: absolute;

		top: 8px;
		height: 275px;
		left: 50%;
		left: 75%;
		width: auto;
	}



}

@media screen and (max-width: 635px) {

	#arrow{
		display: none;
	}
}

@media screen and (max-width: 850px) {

	#digital-resume-example{
		right: 0px;
		margin-left: 0;
		left: auto;
	}

	#menu_mobile{

		display: none;
	}

	#homepage_mobile{
		display: none;
	}

}

/* Banner area */
#profile{
	position: relative;
	top: 80px;

	background: white url("pictures/detroit.jpg");



	background: #66b9bf;
	background: black;

	background-size: cover;
	background-position: center;
	background-position: center -60px;
	left: 0;
	right: 0;
	height: 400px;
	background-repeat: no-repeat;
	z-index: -1;

}

#profileInfo{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 25%;
	width: 350px;
	width: 335px;


	background: rgba(76,175,80,.65);
	background: rgba(0,0,128,.50);

	/* #194366 */
	background: rgba(25,67,102, .65);
	text-align: center;
}


#profilePic{
	position: absolute;
	left: 50%;
	margin-left: -75px;

	bottom: 50%;

	border-radius: 50%;
	border: 3px solid white;
	width: 150px;
	height: 150px;
	z-index: 2;

	text-align: center;

}



#profileInfo .text{
	position: absolute;
	top: 50%;
	left: 15px;
	right: 15px;
	color: white;
	font-size: 20px;
	font-family: 'Ubuntu', sans-serif;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	line-height: 30px;
	background: #4CAF50;
	border-radius: 5px;
}


#header_images{
	background: black;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 320px;
	text-align: center;
	padding: 10px;
	padding-top: 0;
	padding-left: 0px;
	padding-right: 0;
}

.header_image{
	background: black;

	height: 300px;
	width: 300px;
	border-radius: 5px;

	display: inline-block;
	background-size: cover;
	background-position: center;
	margin-left: 10px;

	margin-top: 10px;
}


.header_image.first{

	background-image: url("Fence_Pictures/All_Pictures/wood3_gates.jpg");
	margin-left: 0;
}

.header_image.seventh{
	background-image: url("Fence_Pictures/All_Pictures/wood19_custom_privacy.jpg");
}


.header_image.ninth{
	background-image: url("Fence_Pictures/All_Pictures/wood1_Custom_gates.jpg");
}

.header_image.seventeenth{
	background-image: url("Fence_Pictures/All_Pictures/wood46.jpg");
}

.header_image.eighteenth{
	background-image: url("Fence_Pictures/All_Pictures/wood38.jpg");
}




.header_image.second{
	background-image: url("Fence_Pictures/All_Pictures/chain_link5.jpg");
}

.header_image.fifth{
	background-image: url("Fence_Pictures/All_Pictures/chain_link29.jpg");
}

.header_image.thirteenth{
	background-image: url("Fence_Pictures/All_Pictures/chain_link34.jpg");
}

.header_image.fourteenth{
	background-image: url("Fence_Pictures/All_Pictures/chain_link10.jpg");
}





.header_image.third{
	background-image: url("Fence_Pictures/All_Pictures/vinyl33.jpg");
}

.header_image.sixth{
	background-image: url("Fence_Pictures/All_Pictures/vinyl47.jpg");
}

.header_image.tenth{
	background-image: url("Fence_Pictures/All_Pictures/vinyl3.jpg");
}

.header_image.eleventh{
	background-image: url("Fence_Pictures/All_Pictures/vinyl13.jpg");
}

.header_image.twelfth{
	background-image: url("Fence_Pictures/All_Pictures/vinyl46.jpg");
}




.header_image.fourth{
	background-image: url("Fence_Pictures/All_Pictures/aluminum12.jpg");
}

.header_image.eighth{
	background-image: url("Fence_Pictures/All_Pictures/aluminum6.jpg");
}

.header_image.fifteenth{
	background-image: url("Fence_Pictures/All_Pictures/aluminum7.jpg");
}

.header_image.sixteenth{
	background-image: url("Fence_Pictures/All_Pictures/aluminum9.jpg");
}



#connect{
	position: absolute;
	right: 15px;
	top: 15px;
	height: 50px;
	width: auto;
	padding-right: 20px;
	padding-left: 20px;
	background: white;
	line-height: 60px;


	border-radius: 5px;
}


#menuBar{
	position: fixed;
	height: 80px;
	width: 100%;
	width: 100vw;
	left: 0;
	top: 0;

	background: #EAEAEA;
	background: transparent;
	z-index: 3;
	background: black;
	background: #07889b;

	background: #18453B;


}

#menuBar.slide{
	background: none;
}

#menuBarNav{
	position: absolute;
	left: 350px;
	width: auto;
	line-height: 40px;
	display: none;
	top: 50%;
	margin-top: -5px;

}


#menuBarNav a{
	padding-left: 15px;
}

#menuBarNav a:first-child{
	padding-left: 0px;
}

#menuBarNav a:hover{
	color: #4CAF50;
	color: #007dc5;
}

/* When menu bars are shown */
@media screen and (max-width: 916px) {
	#menuBarNav{
		display: none !important;
	}




}

#header_contact_info{
	position: absolute;
	bottom: -13px;
	left: 50%;
	width: 400px;
	margin: 0;
	margin-bottom: 15px;
	margin-left: -200px;
	height: auto;
	color: black;
	text-align: center;
	font-size: 15px;
	color: white;


}



#menuBar h1{

	font-family: 'Raleway', sans-serif;

	color: white;
	position: absolute;
	left: 75px;
	left: 15px;
	left: 50%;
	margin-left: -300px;
	margin-left: -400px;



	top: 50%;

	width: 600px;

	width: 800px;

	font-size: 60px;
	font-size: 45px;

	font-weight: 300;

	line-height: 50px;

	margin-top: -36px;

	text-align: center;


}

/* When menu bars are added */
#menuBar h1.shift{

	font-family: 'Ubuntu', sans-serif;
	font-family: 'Raleway', sans-serif;
	color: white;
	position: absolute;
	left: 75px;
	left: 15px;
	left: 70px;
	top: 50%;
	width: auto;
	width: 320px;
	width: 310px;
	width: 300px;
	font-size: 39px;
	font-weight: 300;
	line-height: 50px;
	margin-top: -25px;
}

#menuBar h1.slide:hover{
	color: white;
	cursor: default;
}

#menuBar h1:hover{
	color: #4CAF50;
	color: #eeaa7b;
	color: white;
	cursor: pointer;
}


.logoArea{
	position: absolute;
	top: 5px;
	left: 30px;
	width: 95px;
	bottom: 5px;
	background-image: url('images/picket_banner_white.png');

	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;


	z-index: 1;

}

.logoArea:hover{
	cursor: pointer;
}


.connectArea{
	position: absolute;
	top: 0;
	right: 15px;
	width: 200px;
	height: 100%;
}

.connectIcon{
	position: absolute;
	width: 33.33%;
	height: 100%;
}

.connectIcon:hover{
	cursor: pointer;
}

.connectIcon.icon1{
	right: 85px;

	top: 50%;

	margin-top: -25px;

	width: 50px;
	height: 50px;

	background-image: url('images/circle_facebook_logo2.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.connectIcon.icon1:hover{
	background-image: url('images/circle_facebook_logo2_inv.png');

	/*
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    */

}

.connectIcon.icon2{

	right: 15px;

	top: 50%;

	margin-top: -25px;

	width: 50px;
	height: 50px;


	background-image: url('images/circle_phone_logo.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.connectIcon.icon2:hover{
	background-image: url('images/circle_phone_logo_inv.png');



	/*
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    */
}






header img{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

	-webkit-transition: width 2s; /* Safari */
	transition: width .5s;


}

header .text{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

	-webkit-transition: width 2s; /* Safari */
	transition: width .5s;


}

.fa-home{
	display: none;
}

.black{
	background: black !important;
}

#extra{
	display: none;
}

.escape{
	display: none;
}



#name{
	position: absolute;
	left: 50%;
	margin-left: 15px;
	line-height: 500px;
	color: white;
	font-size: 40px;
}

article{
	padding: 15%;
	padding-top: 100px;
	padding-bottom: 100px;
	padding-bottom: 0;
}


article:first-child{
	padding: 15%;
	padding-top: 100px;
	padding-bottom: 100px;
}

article:nth-child(even){
	background: #EAEAEA;
}

.fa-desktop{
	margin-top: 15px;
	width: 100px;
	height: 100px;
	font-size: 100px;
}

nav{
	position: relative;
	background: #4682B4;
	background: black;
	background: #e37222;

	background: blue;
	background-color: #18453B;

	height: 50px;
	text-align: center;

	-webkit-transition: background-color 1000ms linear;
	-moz-transition: background-color 1000ms linear;
	-o-transition: background-color 1000ms linear;
	-ms-transition: background-color 1000ms linear;
	transition: background-color 1000ms linear;

}

nav.fixed{
	position: fixed;
	top: 80px;
	left: 0;
	width: 100%;
	height: 50px;
	z-index: 1;
	background-color: #007dc5;
	background: #008183;
}

nav>ul{
	margin: 0;
	padding: 0;
}

nav li{
	display: inline-block;

	line-height: 50px;
	text-align: center;
	width: 15%;
	list-style: none;
	color: white;

}

.line{
	position: relative;
	left: 101%;
	top: -35px;
	height: 20px;
	width: 1px;
	background: white;
}


nav li:first-child{


}

nav li:hover{
	background: white;
	cursor: pointer;
	color: black;
}

nav li:hover a{
	cursor: pointer;
	color: black;
}



.content_section:nth-child(odd){
	background: white;
}

.content_section:nth-child(even){
	background: #EAEAEA;
}



.fa-angle-down{
	position: absolute;
	bottom: 5px;
	left: 50%;
	width: 50px;
	height: 50px;
	margin-left: -25px;
	font-size: 50px;
	padding: 0;
	border-radius: 50%;
	display: none;
}

.fa-angle-down:hover{
	background: #4CAF50;
	background: #007dc5;
	background: #008183;
	cursor: pointer;
	color: white;
}


footer{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	width: 100vw;
	height: 275px;
	background: black;
	background: #07889b;
	background: #18453B;

	list-style: none;
	color: white;
	text-align: center;
	line-height: 45px;

}

footer hr{
	display: none;
}

footer h2{
	font-size: 20px;
}

footer ul, footer li{
	margin: 0;
	padding: 0;
}


/* Each Separate List */
footer > ul{
	margin: 15px;
	margin-top: 20px;
	vertical-align: top;
	display: inline-block;
	border-right: 1px solid white;
	padding-right: 30px;

}

footer .fa{
	color: white;
}

footer >ul .fa:hover{
	color: #4CAF50;
	color: #007dc5;
	color: #008183;
}

footer >ul a:hover{
	color: #4CAF50;
	color: #007dc5;
	color: #008183;
}

footer > ul:last-child{
	border: none;
	padding: none;
}

.contactInfoFooter>ul li:hover{
	color: white;
	cursor: default;
}

/* Each List Title */
footer > ul  > li{
	margin-top: 0;
}

/* Each sub list */
footer > ul  > ul{
	margin-top: 15px;
}

footer > ul  > ul > li:hover{

	cursor: pointer;
	color: #4CAF50;
	color: #007dc5;
	color: #008183;
}

footer li{

	list-style: none;

}

.usefulLinks{
	margin-left: 60px;
}

.connectFooter{
	border-right: 0;
}

.fa-copyright{

	font-size: 15px;
	padding: 0;
}

#copyright_area{
	position: relative;
	left: 0;
	width: 100%;
	top: 0;
	height: 50px;
}

#copyright{
	position: absolute;
	left: 50%;
	width: 300px;
	margin-left: -150px;
	bottom: 5px;
	padding: 0;
	text-align: center;

}


#picket_footer{
	position: relative;
	top: 50%;
	top: auto;
	bottom: 0;

	width: 100%;
	left: 0;
	height: 150px;
	background-image: url('images/picket_banner_white.png');
	background-size: contain;
	z-index: 0;
}


#intro_section{
	background: #909ab7;
	background: #EAEAEA;
	padding-bottom: 30px;
	padding-top: 10px;
}


#about_section hr{
	border: 1px solid black;
	border-bottom: none;

	margin-left: 50px;
	margin-right: 50px;
	margin-top: 40px;
	margin-bottom: 40px;
}


#about_section .card.center{
	margin-left: -5%;
}

#about_section p{
	text-align: left;
}

#contact_section hr{
	border: 1px solid black;
	border-bottom: none;

	margin-left: 25%;
	margin-right: 25%;
	margin-top: 0px;
	margin-bottom: 30px;
}

.centerText{
	text-align: center;
}


.quotes{
	color: #008183;
	font-size: 20px;
	margin-left: 0px;
	margin-right: 7px;
}

#contact_section{
	color: black;
}

#contact_section h2 {
	color: white;
	color: black
}

#contact_section .fa {
	color: white;
	color: black
}


.footer_section{
	position: relative;

	z-index: 1;
}

#footer_stuff_background{
	position: absolute;
	left: 25%;
	right: 25%;
	top: 50px;
	bottom: 50px;

	background: blue;
	background: #18453B;

}


#products_section{
	vertical-align: middle;
	padding-bottom: 60px;
}

#products_section .card{
	background: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 0;
	text-align: left;

}


#products_section .card.no_background{
	background: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;

}

#products_section .card {

	margin-top: 60px;
	margin-bottom: 0;

}

#products_section .card.not_first{

	width: 40%;
}




#products_section .card.first{

	margin-top: 30px;
}



#products_section .card p {
	text-align: left;
}

#products_section .button{
	margin-top: 30px;
}

#products_section .container {

	padding-top: 0px;
	padding-bottom: 0;
}

#products_section .container.last {

	padding-bottom: 30px;
}

#products_section .card .fa{

	font-size: 25px;
}


#products_section .card .header{

	padding: 0;
	padding-top: 30px;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-right: 15px;
}



.header_text{

	margin-bottom: 30px;
}

.horizontal_layout{
	position: relative;
	display: inline-block;
	text-align: center;
	vertical-align: top;
}

.horizontal_layout .container{
	width: 49%;
	display: inline-block;
	margin-top: 15px;
	vertical-align: top;

}


#gallery_area{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	background: black;
	z-index: 0;


}


.titleTextBig {
	display: block;
}

.titleTextSmall{
	display: none;
}



#homePage{
	background: orange;
}

#copyright p{
	margin: 0;
}

#copyright a{
	color: #008183;
}

#copyright a:hover{
	color: orange;
}



  .lds-spinner {
  color: white;
  display: inline-block;
  position: absolute;
  left: 50%;
  margin-left: -40px;
  top: 50%;
  width: 80px;
  height: 80px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #fff;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}



.loading-screen{
	position: fixed;
	left: 0;
	right:0;
	top:80px;
	bottom:0;
	background: black;
	z-index: 100;
}