@charset "utf-8";
::-webkit-scrollbar
{
  	width: .5vw;  /* for vertical scrollbars */
  	height: .5vw; /* for horizontal scrollbars */
	border-radius: 1vw;
}

::-webkit-scrollbar-track
{
  	background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  	background: rgba(0, 0, 0, 0.5);
}

::scrollbar
{
  	width: .5vw;  /* for vertical scrollbars */
  	height: .5vw; /* for horizontal scrollbars */
	border-radius: 1vw;
}

::scrollbar-track
{
  	background: rgba(0, 0, 0, 0.1);
}

::scrollbar-thumb
{
  	background: rgba(0, 0, 0, 0.5);
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}


body {
	background-color: #FAF9F6;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	font-family: 'Raleway', sans-serif;
	font-size: 1.1vw;
	font-weight: 300;
}

/* NAVBAR ********************************************************** */

.navbar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 5vw;
	background-color: rgba(0,0,0,.80);
}
.navbar img {
	height: 4vw;
	padding-top: .5vw;
	margin-left: 2vw;
}
.dropdown {
  float: right;
  margin-right: 2vw;
  overflow: hidden;
}
.dropdown .dropbtn {
  height: 4vw;  
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
}
.dropbtn img {
	height: 2vw;
	margin-top: 1vw;
}
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 15vw;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 1vw;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}


/* MAIN HEADER ******************************************************** */
.mainImage {
	float: left;
	background-image: url(images/Vanguard-Home-Automation-Home-Page.png);
	background-size: cover;
	width: 100vw;
	height: 54vw;
	z-index: -1;
}
.topPadding {
	margin-top: 10vw;
}
.certified {
    float: left;
    margin-left: 2.5vw;
    margin-top: 0vw;
}
.certified img {
    width: 11.5vw;
}
#logo {
	margin-left: 32vw;
	margin-top: -6vw;
	float: left;
}
#logo img {
	width: 30vw;
}
.tagline {
	width: 70vw;
	margin-left: 15vw;
	font-size: 2vw;
	color: #22675c;
	float: left;
	margin-top: 6vw;
	text-align: center;
}


/* Home Page***********************************************************/
.mainContent {
	width: 65vw;
	float: left;
}
.showroom {
	background-image: url(images/showroomThin.jpg);
	background-size: cover;
	width: 95vw;
	height: 14vw;
	margin: 2vw;
	float: left;
	border: solid medium #e8b461;
}
.coverVert {
	width: 95vw;
	height: 14vw;
	background-color: rgba(121,121,121,.80);
	text-align: center;
}
.coverVert:hover {
	width: 95vw;
	height: 14vw;
	background-color: rgba(34,103,92,.80);
}
.coverVert p {
	margin-top: 5vw;
	float: left;
	width: 100%;
	text-align: center;
	font-size: 2.4vw;
	color: #ffffff;
}
.divider {
	width: 80vw;
	margin-left: 10vw;
	margin-top: 2vw;
	margin-bottom: 2vw;
}
.securityBlurb {
	width: 60vw;
	margin-left: 5vw;
	margin-top: 3vw;
	margin-bottom: 3vw;
	font-size: 1.3vw;
}
.securityBlurb li {
	margin-left: 3vw;
	margin-top: 1vw;
}
.securityBlurb h3 {
	width: 100%;
	font-size: 2.4vw;
	font-weight: 500;
	color: #22675c;
}
.mainBlog {
	width: 25vw;
	height: auto;
	float: right;
	margin-right: 3vw;
	margin-top: 23vw;
	border-left: solid medium #555555;
}
.footer {
	width: 100%;
	padding-bottom: 5vw;
	background-color: #333333;
}
.footRight {
	float: right;
	margin-top: 5vw;
	margin-right: 5vw;
	color: #D4D4D4;
}
.footRight a:visited {
	color: #D4D4D4;
}
.footRight a:link {
	color: #D4D4D4;
	text-decoration: none;
}
.footRight a:hover {
	color: #ffffff;
}
	
.footLeft {
	float: left;
	margin-top: 5vw;
	margin-left: 5vw;
	width: 45%;
}

/* SIDE BLOG ********************************************************* */
.sideBlog {
	width: 20vw;
	float: right;
	margin-top: 5vw;
}
.sideBlogHead {
	width: 100%;
	text-align: center;
	font-size: 2.4vw;
	color: #22675c;
}
.sideBlog a:link {
	color: #22675c;
}
.sideBlog a:visited {
	color: #22675c;
}
.sideBlog a:hover {
	color: #555555;
}

/* BLOG PAGE ************************************************************* */
.headline {
	max-width: 12vw;
	max-height: 3vw;
	margin-left: 1.5vw;
	display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blogFinalHolder {
	width: 85vw;
	margin-left: 7.5vw;
	margin-top: 9vw;
	margin-bottom: 5vw;
}
.blogFinalHolder a:link {
	text-decoration: none;
	color: #ffffff;
}

.blogFinalHolder a:visited {
	text-decoration: none;
	color: #ffffff;
}
.blogFinalPost {
	
	width: 21vw;
	height: 35vw;
	margin-left: 5vw;
	text-align: center;
	float: left;
}
.finalPostImage {
	background-size: cover;
	border-radius: 1vw;
	width: 21vw;
	height: 18vw;
}
.finalHeadline {
	font-size: 1.5vw;
	margin-top: 3w;
	overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 4; /* number of lines to show */
   line-clamp: 4;
   -webkit-box-orient: vertical;
}
.goBack {
	padding: 1vw;
	border-radius: 1vw;
	background-color: #ffffff;
	border: solid medium #cf9826;
	color: #cf9826;
	font-size: 2.5vw;
	position: fixed;
	right: 2vw;
	top: 7vw;
}
.loadMoreBlog {
	width: 80vw;
	margin-left: 10vw;
	border: solid medium #e8b461;
	color: #e8b461;
	padding-top: 1vw;
	padding-bottom: 1vw;
	text-align: center;
	font-size: 2vw;
	cursor: pointer;
}
a:link {
	text-decoration: none;
}

.loadMoreBlog a:visited {
	text-decoration: none;
}

/* CONTACT PAGE *********************************************************** */
.contactLeft {
	width: 25vw;
	float: left;
	margin-left: 5vw;
	margin-top: 3vw;
}	
.contactRight input { 
	border: thin solid #000000; 
	padding: .6vw; 
	width: 35vw;
	background-color: #ffffff,0.5;
	-webkit-box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
	-moz-box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
	box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	font-size: 1.3vw
}
.contactRight select { 
	border: thin solid #000000; 
	padding: .6vw; 
	width: 35vw;
	background-color: #ffffff,0.5;
	-webkit-box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
	-moz-box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
	box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	font-size: 1.3vw;
	color: rgba(108,108,108,1.00);
}
.contactRight textarea { 
	border: thin solid #000000; 
	-webkit-box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
	-moz-box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
	box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
	padding: .6vw; 
	width: 35vw;
	background: #ffffff,0.5;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	font-family: 'Raleway', sans-serif;
	font-weight: 900;
	font-size: 1.3vw
}
.contactRight {
	width:35vw;
	float: right;
	margin-right: 5vw;
}
.map {
	width: 80vw;
	height: 20vw;
	background-image: url(Contact/map.jpg);
	margin-top: 5vw;
	margin-left: 0vw;
	background-size: cover;
	background-position: center;
	margin-bottom: 5vw;
}
.map a {
	text-decoration: none;
}
.testimonials {
	width: 95%;
	min-height: 10vw;
	margin-left: 0vw;
	padding-top: 3vw;
	padding-bottom: 3vw;
	padding-left: 5vw;
	background-color: #999999;
}
.testSingle {
	float: left;
	border-right: .1vw solid #22675c;
	padding-left: 2vw;
	padding-right: 2vw;
	width: 26vw;
	min-height: 10vw;
	color: #ffffff;
}
.testButton {
	padding-left: 2vw;
	padding-right: 2vw;
	padding-top: 1vw;
	padding-bottom: 1vw;
	background-color: #22675c;
	color: #ffffff;
	font-size: 2vw;
	float: right;
	margin-right: 3vw;
	margin-bottom: 3vw;
}
.testSingle p {
	font-style: italic;
	color: #ffffff;
	font-size: 1vw;
}
.lineheight {
	line-height: 1.6vw
}
.contactHeader {
	width: 100%;
	font-size: 2.4vw;
	font-weight: 500;
	color: #22675c;
	text-align: center;
	padding-bottom: 5vw;
}	

/* ALL OTHER PAGES ***************************************************** */
.lightingBanner {
	width: 100vw;
	float: left;
	margin-top: 0vw;
}
.lightingBanner video {
	width: 100vw;
	height: auto;
}
.bannerCover {
	width: 100%;
	height: 42.3vw;
	background-color: rgba(0,0,0,.80);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.bannerText {
	width: 70vw;
	margin-left: 15vw;
	margin-top: 18vw;
	text-align: center;
	font-size: 2.3vw;
	color: #ffffff;
}
.aboutBanner {
	width: 80vw;
	margin-left: 10vw;
	margin-top: 3vw;
	color: #000000;
	margin-bottom: 5vw;
}
.aboutBanner h3 {
	width: 100%;
	font-size: 2.4vw;
	font-weight: 500;
	color: #22675c;
}
.aboutBanner ul {
	margin-left: 2vw;
}
.showText {
	width: 100%; 
	text-align: center;
}
.showText h3 {
	width: 100%;
	font-size: 2.4vw;
	font-weight: 500;
	color: #22675c;
}
.headerText h2 {
	width: 100%;
	font-size: 2.4vw;
	font-weight: 500;
	color: #22675c;
	text-align: center;
}
.sectionNoBG {
	width: 27vw;
	padding-bottom: 2vw;
	margin-left: 5vw;
	color: #333333;
	margin-top: 3vw;
	float: left;
}
.sectionNoBG h3 {
	color: #cf9826;
	font-size: 2vw;
}
@media screen and (max-width: 500px) {
	body {
		font-size: 2.8vw;
	}
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;
		width: 100%;
		height: 10vw;
		background-color: rgba(0,0,0,.80);
	}
	.navbar img {
		height: 8vw;
		padding-top: 1vw;
		margin-left: 4vw;
	}
	.dropdown {
	  float: right;
	  margin-right: 2vw;
	  overflow: hidden;
	}
	.dropdown .dropbtn {
	  height: 4vw;  
	  border: none;
	  outline: none;
	  background-color: rgba(0, 0, 0, 0);
	}
	.dropbtn img {
		height: 5vw;
		margin-top: 1vw;
	}
	.dropdown-content {
	  display: none;
	  position: absolute;
	  right: 0;
	  background-color: #f9f9f9;
	  min-width: 30vw;
	  font-size: 5vw;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  z-index: 1;
	}

	.dropdown-content a {
	  float: none;
	  color: black;
	  padding: 1vw;
	  text-decoration: none;
	  display: block;
	  text-align: left;
	}
	/* MAIN IMAGE ******************************************/
	#logo {
		margin-left: 23vw;
		margin-top: -6vw;
		float: left;
	}
	#logo img {
		width: 50vw;
	}
	.tagline {
		width: 70vw;
		margin-left: 15vw;
		font-size: 4vw;
		color: #ffffff;
		float: left;
		margin-top: 6vw;
		text-align: center;
	}
	.mainContent {
		width: 100%;
		float: left;
	}
	.showroom {
		background-image: url(images/showroomThin.jpg);
		background-size: cover;
		width: 95vw;
		height: 14vw;
		margin: 2vw;
		float: left;
		border: solid medium #e8b461;
	}
	.coverVert {
		width: 95vw;
		height: 14vw;
		background-color: rgba(121,121,121,.80);
		text-align: center;
	}
	.coverVert:hover {
		width: 95vw;
		height: 14vw;
		background-color: rgba(34,103,92,.80);
	}
	.coverVert p {
		margin-top: 5vw;
		float: left;
		width: 100%;
		text-align: center;
		font-size: 4vw;
		color: #ffffff;
	}
	.divider {
		width: 80vw;
		margin-left: 10vw;
		margin-top: 2vw;
		margin-bottom: 2vw;
	}
	.securityBlurb {
		width: 90vw;
		margin-left: 5vw;
		margin-top: 6vw;
		margin-bottom: 3vw;
		font-size: 3.2vw;
	}
	.securityBlurb li {
		margin-left: 3vw;
		margin-top: 1vw;
	}
	.securityBlurb h3 {
		width: 100%;
		font-size: 5vw;
		font-weight: 500;
		color: #22675c;
	}
	.mainBlog {
		width: 100%;
		height: auto;
		float: left;
		margin-right: 3vw;
		margin-top: 10vw;
		border-left: none;
	}
	.footer {
		width: 100%;
		padding-bottom: 5vw;
		padding-top: 3vw;
		background-color: #333333;
	}
	.footRight {
		width: 100%;
		text-align: center;
		float: none;
		margin-top: 10vw;
		margin-right: 5vw;
		margin-bottom: 3vw;
		color: #D4D4D4;
	}
	.footRight a:visited {
		color: #D4D4D4;
	}
	.footRight a:link {
		color: #D4D4D4;
		text-decoration: none;
	}
	.footRight a:hover {
		color: #ffffff;
	}
		
	.footLeft {
		float: left;
		margin-top: 5vw;
		margin-left: 0vw;
		width: 100%;
		text-align: center;
	}

	/* SIDE BLOG ********************************************************* */
	.sideBlog {
		width: 40vw;
		float: left;
		margin-top: 5vw;
		margin-left: 6vw;
	}
	.sideBlogHead {
		width: 100%;
		text-align: center;
		font-size: 6vw;
		color: #22675c;
	}
	.sideBlog a:link {
		color: #22675c;
	}
	.sideBlog a:visited {
		color: #22675c;
	}
	.sideBlog a:hover {
		color: #555555;
	}

	/* BLOG PAGE ************************************************************* */
	.headline {
		max-width: 12vw;
		max-height: 3vw;
		margin-left: 1.5vw;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.blogFinalHolder {
		width: 90vw;
		margin-left: 5vw;
		margin-top: 15vw;
		margin-bottom: 5vw;
	}
	.blogFinalHolder a:link {
		text-decoration: none;
		color: #ffffff;
	}

	.blogFinalHolder a:visited {
		text-decoration: none;
		color: #ffffff;
	}
	.blogFinalPost {
		
		width: 80vw;
		height: auto;
		margin-left: 5vw;
		text-align: center;
		float: left;
		font-size: 5vw;
		margin-bottom: 3vw;
	}
	.finalPostImage {
		background-size: cover;
		border-radius: 1vw;
		width: 80vw;
		height: 69vw;
	}
	.finalHeadline {
		font-size: 4vw;
		margin-top: 1w;
		overflow: hidden;
	   text-overflow: ellipsis;
	   display: -webkit-box;
	   -webkit-line-clamp: 4; /* number of lines to show */
	   line-clamp: 4;
	   -webkit-box-orient: vertical;
	}
	.goBack {
		padding: 1vw;
		border-radius: 1vw;
		background-color: #ffffff;
		border: solid medium #cf9826;
		color: #cf9826;
		font-size: 4vw;
		position: fixed;
		right: 2vw;
		top: 7vw;
	}
	.loadMoreBlog {
		width: 80vw;
		margin-left: 10vw;
		border: solid medium #e8b461;
		color: #e8b461;
		padding-top: 1vw;
		padding-bottom: 1vw;
		text-align: center;
		font-size: 4vw;
		cursor: pointer;
	}
	a:link {
		text-decoration: none;
	}

	.loadMoreBlog a:visited {
		text-decoration: none;
	}
	.lightingBanner {
		width: 100vw;
		float: left;
		margin-top: 0vw;
	}
	.lightingBanner video {
		width: 100vw;
		height: auto;
	}
	.bannerCover {
		width: 100%;
		height: 42.3vw;
		background-color: rgba(0,0,0,.80);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.bannerText {
		width: 70vw;
		margin-left: 15vw;
		margin-top: 18vw;
		text-align: center;
		font-size: 3.5vw;
		color: #ffffff;
	}
	.aboutBanner {
		width: 80vw;
		margin-left: 10vw;
		margin-top: 3vw;
		color: #000000;
		margin-bottom: 5vw;
	}
	.aboutBanner h3 {
		width: 100%;
		font-size: 2.4vw;
		font-weight: 500;
		color: #22675c;
	}
	.aboutBanner ul {
		margin-left: 2vw;
	}
	.showText {
		width: 100%; 
		text-align: center;
	}
	.showText h3 {
		width: 100%;
		font-size: 5vw;
		font-weight: 500;
		color: #22675c;
	}
	.headerText h2 {
		width: 100%;
		font-size: 5vw;
		font-weight: 500;
		color: #22675c;
		text-align: center;
	}
	.sectionNoBG {
		width: 80vw;
		padding-bottom: 5vw;
		margin-left: 10vw;
		color: #333333;
		margin-top: 3vw;
		float: left;
	}
	.sectionNoBG h3 {
		color: #cf9826;
		font-size: 5vw;
	}
	
	/* CONTACT PAGE *********************************************************** */
	.contactLeft {
		width: 80vw;
		float: left;
		margin-left: 0vw;
		margin-top: 6vw;
		text-align: center;
	}	
	.contactRight input { 
		border: thin solid #000000; 
		padding: 1.2vw; 
		width: 80vw;
		background-color: #ffffff,0.5;
		-webkit-box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
		-moz-box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
		box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		font-size: 3vw
	}
	.contactRight select { 
		border: thin solid #000000; 
		padding: 1.2vw; 
		width: 80vw;
		background-color: #ffffff,0.5;
		-webkit-box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
		-moz-box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
		box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		font-size: 3vw;
		color: rgba(108,108,108,1.00);
	}
	.contactRight textarea { 
		border: thin solid #000000; 
		-webkit-box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
		-moz-box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
		box-shadow: inset 0 0 0px #000000, 0 0 0px #000000;
		padding: 1.2vw; 
		width: 80vw;
		background: #ffffff,0.5;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		font-family: 'Raleway', sans-serif;
		font-weight: 900;
		font-size: 3vw
	}
	.contactRight {
		width:80vw;
		float: left;
		margin-right: 0vw;
		margin-left: 0vw;
	}
	.map {
		width: 80vw;
		height: 30vw;
		background-image: url(Contact/map.jpg);
		margin-top: 5vw;
		margin-left: 0vw;
		background-size: cover;
		background-position: center;
		margin-bottom: 5vw;
	}
	.map a {
		text-decoration: none;
	}
	.testimonials {
		width: 95%;
		min-height: 20vw;
		margin-left: 0vw;
		padding-top: 3vw;
		padding-bottom: 3vw;
		padding-left: 5vw;
		background-color: #999999;
	}
	.testSingle {
		float: left;
		border-right: .1vw solid #22675c;
		padding-left: 2vw;
		padding-right: 2vw;
		width: 26vw;
		min-height: 20vw;
		color: #ffffff;
	}
	.testButton {
		padding-left: 2vw;
		padding-right: 2vw;
		padding-top: 1vw;
		padding-bottom: 1vw;
		background-color: #22675c;
		color: #ffffff;
		font-size: 2vw;
		float: right;
		margin-right: 3vw;
		margin-bottom: 3vw;
	}
	.testSingle p {
		font-style: italic;
		color: #ffffff;
		font-size: 2vw;
	}
	.lineheight {
		line-height: 1.6vw
	}
	.contactHeader {
		width: 100%;
		font-size: 5vw;
		font-weight: 500;
		color: #22675c;
		text-align: center;
	}

}