@charset "UTF-8";
/* CSS Document */
/* Covers the main desktop body (3 columns) area on all primary pages - index plus 6 main links. Reveals on load */

.loading-cover {
	position: fixed; 
	top: 46px;
	left: 0;
	height: 100%; 
	width: 100%; 
	background: white; 
	z-index:9999; 
    font-size: 60px; 
    margin: 0 auto;
    text-align: center; 
    padding-top: 40vh;
}
.loading-cover-full {
	position: fixed; 
	top: 0px;
	left: 0;
	height: 100%; 
	width: 100%; 
	background: white; 
	z-index:9999; 
    font-size: 60px; 
    margin: 0 auto;
    text-align: center; 
    padding-top: 40vh;
}
/* Wraps the main desktop area on all primary pages. Ensures no jumps between them. */
.container {
	position: relative;
	height: 100%;
	min-height: 88vh;
	width: 100%;
	display: inline-block;
	overflow: hidden;
	-webkit-transform: translateZ(0) scale(1.0, 1.0); /* This prevents a distortion on hover in Safari */
	}
/* Wraps the mobile slideshow on all primary pages. */
.container-mobile {
	position: relative;
	max-height: 100vh;
	overflow: hidden;
	display: none;
	padding: 0;
	margin-top: -52px;
	}

.logobg-header {
  
  	width: 50%;
  	height: 36px;
  	padding-top: 0px;
  	padding-bottom: 10px;
  	display: inline-block;
  	position: relative;
  	float: left;
}
.logobg-header-mobile {
  
  	width: 30%;
  	height: 7%;
 	padding: 1%;
  	display: none;
  	position: absolute;
  	background-color: rgba(255,255,255, 0.5);
  	top: 50px;
  	z-index: 2;
}
.logo-image {
  
  	width: 100%;  
}
.telephone {
  	padding-top: 5px;
  	padding-bottom: 5px;
  	padding-right: 0.6%;
  	text-align: right;
  	height: 36px;
  	vertical-align: top;
  	display: none;
  	font-size: 8pt;
	color: black;
	font-family: "Helvetica", Arial, sans-serif;
	font-weight: normal;
line-height: 12pt;
	padding-top: 0px;
	padding-right: 5px;
}
.socials-header {
  	width: 49%;
  	padding-top: 5px;
  	padding-bottom: 5px;
  	padding-right: 0.6%;
 		float: right;
  	text-align: right;
  	height: 36px;
  	vertical-align: top;
  	display: inline-block;
}
.social-button {
	padding-left: 5px;
	padding-right: 0px;
	height: 30px;
	vertical-align: middle;
	display: inline-block;
}
.address-header {  
	width: 32%;
	padding-bottom: 5px;
	padding-top: 5px; 
	padding-left: 1%;
	float: left;
	text-align: left;
	height: 36px;
	display: inline-block;
}
.address-text {
	margin-top: 1px;
	margin-left: 25px;
	padding-left: 12px;
	width: 130px;
	font-size: 10pt;
	color: black;
	font-family: "Helvetica", Arial, sans-serif;
	font-weight: normal;
	display: inline-block;
}
.address-text:hover {
  	color: rgba(40, 55, 68, 1);
}
/* All min-buttons here. Some currently not featured on site. Delete unused on project end.*/
.mapbuttonLink {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/button_map.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
}
.mapbuttonLink:hover {
	background-position: 0 0;
}
.logobuttonLink {
	display: inline-block;
	height: 36px;
	width: 278px;
	background: url('../images/button_logolong.jpg') bottom;
	background: url('../images/button_logolong.png') bottom;
	background-size: 278px 72px;
	background-repeat: no-repeat;
	position: relative;
}
.logobuttonLink:hover {
	background-position: 0 0;
}
.fbbuttonLink {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/button_facebook.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
}
.fbbuttonLink:hover {
	background-position: 0 0;
}
.twbuttonLink {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/button_twitter.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
}
.twbuttonLink:hover {
	background-position: 0 0;
}
.inbuttonLink {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/button_linkedin.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
}
.inbuttonLink:hover {
	background-position: 0 0;
}
.ytbuttonLink {
	display: inline-block;
	height: 30px;
	width: 30px;
	background: url('../images/button_youtube.png') bottom;
	background-size: 30px 60px;
	background-repeat: no-repeat;
}
.ytbuttonLink:hover {
	background-position: 0 0;
}
.addressLink {
	display: inline-block;
	width: 220px;
	height: 110px;
	background: url('../images/address-office.png') bottom;
	background-size: 220px 220px;
	background-repeat: no-repeat;
	border-bottom: 3px solid white;
	border-top: 3px solid white;
	background-color: rgba(40, 55, 68, 0.8);
}
.addressLink:hover {
	background-position: 0 0;
	background-color: rgba(40, 55, 68, 1);
}

/* Hides the mobile slideshow on larger screen devices. */
.slideshow-mobile {
  display: none;
  position: relative;
	height: 100%;
	top: -150px;
	overflow: hidden;
	display: none;
	padding: 0;
	margin: 0;
}

/* Column featuring in the home & about pages. */
.column {
z-index: 1;
    display: block;
    background-color: #FBFBCF;
    width:32.5%;
    height: 100%; /* Fall-back for old browsers like Safari5. It triggers viewport.js which adjusts height to match vh value below. */
    min-height: 88vh;
    float:left;
    margin-top: -40px;
    margin-left:0.4%;
    margin-right:0.4%;
    margin-bottom: 0px;
    overflow: hidden;
    position: relative; 
-webkit-transform: translateZ(0) scale(1.0, 1.0); /* This prevents a distortion on hover in Safari */
-webkit-backface-visibility: hidden;
	 }
/* All hover effects for column in 'index' and 'about' */	 
.column:hover #columnimgbg1 {
	will-change: opacity;
	opacity: 0.8; 
	filter: alpha(opacity=80); /* For IE8 and earlier */ 
	transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-backface-visibility: hidden;
	}
.column:hover #columnimgbg2 {
	will-change: opacity;
	opacity: 0.8; 
	filter: alpha(opacity=80); /* For IE8 and earlier */ 
	transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-backface-visibility: hidden;
	}
.column:hover #columnimgbg3 {
	will-change: opacity;
	opacity: 0.8; 
	filter: alpha(opacity=80); /* For IE8 and earlier */ 
	transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-backface-visibility: hidden;
	}
.column:hover .navbottom {
	background-color: rgba(40, 55, 68, 1);
	border-top: 1px solid white;
	}
.column:hover #navbottom-about1 {
	height: 320px;
	background-color: rgba(40, 55, 68, 0.7);
	border-top: 1px solid white;
	transition: 1s ease-out;
	-moz-transition: 1s ease-out;
    -webkit-transition: 1s ease-out;
    -o-transition: 1s ease-out;
	}
.column:hover #navbottom-about2 {
	height: 320px;
	background-color: rgba(40, 55, 68, 0.7);
	border-top: 1px solid white;
	transition: 1s ease-out;
	-moz-transition: 1s ease-out;
    -webkit-transition: 1s ease-out;
    -o-transition: 1s ease-out;
	}
.column:hover #navbottom-about3 {
	height: 320px;
	background-color: rgba(40, 55, 68, 0.7);
	border-top: 1px solid white;
	transition: 1s ease-out;
	-moz-transition: 1s ease-out;
    -webkit-transition: 1s ease-out;
    -o-transition: 1s ease-out;
	}
/* Column backgrounds (index/about). Must be id(#) as unique. */	
#columnimgbg1 {
	background: url('../images/column1h.jpg') no-repeat center center;
	background-size: auto 100%;
	height: 100%;
	display: block;
	position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
	text-align: center;
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */ 
	transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-backface-visibility: hidden; 
	will-change: opacity;
	}	
#columnimgbg1-about {
	background: url('../images/column1a.jpg') no-repeat center center;
	background-size: auto 100%;
	height: 100%;
	display: block;
	position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
	text-align: center;
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */ 
	transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-backface-visibility: hidden; 
	will-change: opacity;
	}	
#columnimgbg2 {
	background: url('../images/column2h.jpg') no-repeat center center;
	background-size: auto 100%;
	height: 100%;
	display: block;
	position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
	text-align: center;
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */ 
	transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-backface-visibility: hidden; 
	will-change: opacity;
	}
#columnimgbg2-about {
	background: url('../images/column2a.jpg') no-repeat center center;
	background-size: auto 100%;
	height: 100%;
	display: block;
	position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
	text-align: center;
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */ 
	transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-backface-visibility: hidden; 
	will-change: opacity;
	}		
#columnimgbg3 {
	background: url('../images/column3h.jpg') no-repeat center center;
	background-size: auto 100%;
	height: 100%;
	display: block;
	position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
	text-align: center;
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */ 
	transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-backface-visibility: hidden; 
	will-change: opacity;
	}
#columnimgbg3-about {
	background: url('../images/column3a.jpg') no-repeat center center;
	background-size: auto 100%;
	height: 100%;
	display: block;
	position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
	text-align: center;
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */ 
	transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-backface-visibility: hidden; 
	will-change: opacity;
	}	
/* CSS relating to footers. Note '-portrait' refers to tablets and larger smartphones, '-menu' to smaller screen devices.*/	
footer a {
	text-decoration: none;
	color: black;
	}	
.footerdetails {	
	max-width: 100%;
	height: 15px;
	margin: 0 auto;
	text-align: center;
	padding: 5px;
	color: black;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 60%;
	line-height: 10px;
	padding-bottom: 0px;
	}
.footerdetails-portrait {
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 5px;
	color: black;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 60%;
	display: none;
	font-weight: strong;
	line-height: 15px;
	padding-bottom: 0px;
	}	
.footer-menu {
	color: #f0e2d7;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 60%;
	line-height: 20px;
    background-color: rgba(40, 55, 68, 1);
    font-weight: normal;
    
	}	
.footer-menu-small {
	color: #f0e2d7;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 40%;
	line-height: 20px;
    background-color: rgba(40, 55, 68, 1);
    font-weight: normal;
	}	
/* NAVIGATION AREA & BUTTONS FOR 'index', 'about' & 'people'. */
/* All mobile navigation. Hidden on larger screens. */
.navmobile {
	display: none;
	}	
/* Inactive, selected link. Ensure padding is set to 0, text-indent matches nav a value & margin value is deducted from standard nav li width. */
/* Note that there are three versions, depending on whether the button is scrolling 'about' on about page, regular top or regular bottom nav button  */
.navcurrent {
	position: relative;
    width: 32.1%;
    color: #fff;
    text-align: left;
    line-height: 40px;
    text-shadow: 1px 1px 0px #28374;
    background-clip:border-box;
    background-color: black;
	border-bottom: 3px solid white;
	padding-left: 0;
	text-indent: 10px;
	margin-left: 0.4%;
	margin-right: 0.4%;
	}
.navcurrent-about {
	position: relative;
    width: 32.1%;
    color: #fff;
    text-align: left;
    line-height: 40px;
    text-shadow: 1px 1px 0px #28374;
    background-clip:border-box;
    background-color: black;
	border-bottom: 3px solid white;
	padding-left: 0;
	text-indent: 10px;
	margin-left: 0.4%;
	margin-right: 0.4%;
	display: none;
	}
.navbottomcurrent {
	position: relative;
    width: 32.1%;
    color: #fff;
    text-align: left;
    line-height: 40px;
    text-shadow: 1px 1px 0px #28374;
    background-clip:border-box;
    background-color: black;
	border-top: 3px solid white;
	padding-left: 0;
	text-indent: 10px;
	margin-left: 0.4%;
	margin-right: 0.4%;
	}
.navcurrent-menu {
	color: white;
	line-height: 40px;
    background-color: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid #576979;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 100%;
    font-weight: normal;
    text-overflow: ellipsis;
	white-space: nowrap;
  	overflow: hidden;
  	padding-left: 10px;
  	padding-right: 10px;
  	width: 95%;
	}	
.navcurrent-menu-small {
	color: white;
	line-height: 40px;
    background-color: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid #576979;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 70%;
    font-weight: normal;
    text-overflow: ellipsis;
	white-space: nowrap;
  	overflow: hidden;
  	padding-left: 10px;
  	padding-right: 10px;
  	width: 95%;
	}	   
.small {
	font-size: 70%;
	}	   	   
/* Two classes controlling the segmented bottom 3 links in 'index' & 'about'. */
.navbottom {
	position: absolute;
    bottom: 0;
    display: block;
    z-index: 10; 
    border-top: 3px solid white;
    pointer-events: none;
}
.navbottom-li {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    border-bottom: 0;
    float: left;
}
/* Two classes controlling the bottom 3 links in 'people' & 'contact' (pc). Similar to default top nav, but absolute bottom algined. */
.navbottom-pc {
	position: absolute;
	height: 43px;
	bottom: 0;
	}
.navbottom-pc a {
    border-top: 3px solid white;
    border-bottom: 0px;     
}
/* Scrolling bottom links on 'about' page - animation on page load, transition on later mouse movement. */
.navbottom-about-anime {
	position: absolute;
	font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #fff;
    text-shadow: 1px 1px 0px #283744;
    line-height: 40px;
    text-indent: 10px;
    bottom: 0;
    display: block;
    background: rgba(40, 55, 68, 0.5);
    z-index: 10; 
    border-top: 3px solid white;
    pointer-events: none;
    animation-name: about-blurbs;
    -webkit-animation-name: about-blurbs; /* Chrome, Safari, Opera */
    animation-duration: 1s;
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;    
}
@keyframes about-blurbs {
    from {height: 40px;
    	 border-top: 3px solid white;}
    to {height: 160px;
    	 border-top: 1px solid white;}
    }
#navbottom-about1, #navbottom-about2, #navbottom-about3 {
	position: absolute;
	font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #fff;
    text-shadow: 1px 1px 0px #283744;
    line-height: 40px;
    text-indent: 10px;
    bottom: 0;
    display: block;
    background: rgba(40, 55, 68, 0.5);
    z-index: 10; 
    border-top: 3px solid white;
    pointer-events: none;
    transition: .5s ease-out;
    -moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
    -o-transition: .5s ease-out;
}
#navbottom-about1 li, #navbottom-about2 li, #navbottom-about3 li {
	width: 100%;
	}
/* V IMPORTANT. These next two styles are identical to previous 2, except hidden. They allow for abridged text on large mobiles in landscape mode. */
#navbottom-about1-750, #navbottom-about2-750, #navbottom-about3-750 {
	position: absolute;
	font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #fff;
    text-shadow: 1px 1px 0px #283744;
    line-height: 40px;
    text-indent: 10px;
    bottom: 0;
    display: none;
    background: rgba(40, 55, 68, 0.5);
    z-index: 10; 
    border-top: 3px solid white;
    pointer-events: none;
    transition: .5s ease-out;
    -moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
    -o-transition: .5s ease-out;
}
#navbottom-about1-750 li, #navbottom-about2-750 li, #navbottom-about3-750 li {
	width: 100%;
	}
.navbottom-about-blurb {
	display: inline-block;
	line-height: 150%;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 70%;
	color: white;
	font-weight: normal;
	margin: 0;
	text-indent: 0;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	position: relative;
	}
.navbottom-slides-anime1 {
	position: absolute;
	overflow: hidden;
    font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #fff;
    text-shadow: 1px 1px 0px #283744;
    line-height: 40px;
    text-indent: 10px;
    bottom: 0;
    margin-bottom: -3px;
    left: 0.4%;
    width: 31.7%;
    display: block;
    background: rgba(0, 0, 0, 0.7);
    height: 90px;
    z-index: 10; 
    border-top: 1px solid white;
    animation-name: slides-anime1;
    -webkit-animation-name: slides-anime1; /* Chrome, Safari, Opera */
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-duration: 10s;
    -webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;   
}
@keyframes slides-anime1 {
    0%{ height: 90px;
    	 border-top: 1px solid white;
    	 background-color: rgba(0, 0, 0, 0.7);
    	 }
    0.0000000000001%{ height: 40px;
    	 border-top: 3px solid white;
    	 background-color: rgba(0, 0, 0, 1);
    	 }
    30%{ height: 40px;
    	 border-top: 3px solid white;
    	 background-color: rgba(0, 0, 0, 1);
    	 }
    40%{height: 320px;
    	 border-top: 1px solid white;
    	 background-color: rgba(0, 0, 0, 0.7);
    	 }
    90%{height: 320px;
    	 border-top: 1px solid white;
    	 background-color: rgba(0, 0, 0, 0.7);
    	 }
    100%{height: 90px;
    	 border-top: 1px solid white;
    	 background-color: rgba(0, 0, 0, 0.7);
    	 }
    }
.navbottom-slides-anime2 {
	position: absolute;
	overflow: hidden;
    font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #fff;
    text-shadow: 1px 1px 0px #283744;
    line-height: 40px;
    text-indent: 10px;
    bottom: 0;
    margin-bottom: -3px;
    right: 33.8%;
    width: 31.7%;
    display: block;
    background-color: rgba(0, 0, 0, 0.7);
    height: 90px;
    z-index: 10; 
    border-top: 1px solid white;
    animation-name: slides-anime2;
    -webkit-animation-name: slides-anime2; /* Chrome, Safari, Opera */
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-duration: 10s;
    -webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;   
}
@keyframes slides-anime2 {
    0%{ height: 90px;
    	 border-top: 1px solid white;
    	 background-color: rgba(0, 0, 0, 0.7);
    	 }
    0.0000000000001%{ height: 40px;
    	 border-top: 3px solid white;
    	 background-color: rgba(0, 0, 0, 1);
    	 }
    30%{ height: 40px;
    	 border-top: 3px solid white;
    	 background-color: rgba(0, 0, 0, 1);
    	 }
    40%{height: 360px;
    	 border-top: 1px solid white;
    	 background-color: rgba(0, 0, 0, 0.7);
    	 }
    90%{height: 360px;
    	 border-top: 1px solid white;
    	 background-color: rgba(0, 0, 0, 0.7);
    	 }
    100%{height: 90px;
    	 border-top: 1px solid white;
    	 background-color: rgba(0, 0, 0, 0.7);
    	 }
    }
.navbottom-slides-anime3 {
	position: absolute;
	overflow: hidden;
    font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #fff;
    text-shadow: 1px 1px 0px #283744;
    line-height: 40px;
    text-indent: 10px;
    bottom: 0;
    margin-bottom: -3px;
    right: 0.5%;
    width: 31.7%;
    display: block;
    background: rgba(0, 0, 0, 0.7);
    height: 90px;
    z-index: 10; 
    border-top: 1px solid white;
    animation-name: slides-anime3;
    -webkit-animation-name: slides-anime3; /* Chrome, Safari, Opera */
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-duration: 10s;
    -webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;   
}
@keyframes slides-anime3 {
    0%{ height: 90px;
    	 border-top: 1px solid white;
    	 background-color: rgba(0, 0, 0, 0.7);
    	 }
    0.0000000000001%{ height: 40px;
    	 border-top: 3px solid white;
    	 background-color: rgba(0, 0, 0, 1);
    	 }
    30%{ height: 40px;
    	 border-top: 3px solid white;
    	 background-color: rgba(0, 0, 0, 1);
    	 }
    40%{height: 210px;
    	 border-top: 1px solid white;
    	 background-color: rgba(0, 0, 0, 0.7);
    	 }
    90%{height: 210px;
    	 border-top: 1px solid white;
    	 background-color: rgba(0, 0, 0, 0.7);
    	 }
    100%{height: 90px;
    	 border-top: 1px solid white;
    	 background-color: rgba(0, 0, 0, 0.7);
    	 }
    }
.navbottom-slides-popup1 {
	position: absolute;
	overflow: hidden;
    font-size: 10pt;
    font-family: "Helvetica", Arial, sans-serif;
    font-weight: normal;
    color: yellow;
    text-shadow: 1px 1px 0px #283744;
    line-height: 30px;
    text-indent: 0px;
    text-align: center;
    bottom: 90px;
    margin-bottom: -3px;
    right: 67.1%;
    width: 200px;
    display: block;
    background: rgba(0, 0, 0, 0);
    height: 0px;
    z-index: 10; 
    border-top: 0px solid white;
    animation-name: slides-popup;
    -webkit-animation-name: slides-popup; /* Chrome, Safari, Opera */
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-duration: 45s;
    -webkit-animation-duration: 45s; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;   
}
.navbottom-slides-popup2 {
	position: absolute;
	overflow: hidden;
    font-size: 10pt;
    font-family: "Helvetica", Arial, sans-serif;
    font-weight: normal;
    color: yellow;
    text-shadow: 1px 1px 0px #283744;
    line-height: 30px;
    text-indent: 0px;
    text-align: center;
    bottom: 90px;
    margin-bottom: -3px;
    right: 33.8%;
    width: 200px;
    display: block;
    background: rgba(0, 0, 0, 0);
    height: 0px;
    z-index: 10; 
    border-top: 0px solid white;
    animation-name: slides-popup;
    -webkit-animation-name: slides-popup; /* Chrome, Safari, Opera */
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-duration: 45s;
    -webkit-animation-duration: 45s; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;   
}
.navbottom-slides-popup3 {
	position: absolute;
	overflow: hidden;
    font-size: 10pt;
    font-family: "Helvetica", Arial, sans-serif;
    font-weight: normal;
    color: yellow;
    text-shadow: 1px 1px 0px #283744;
    line-height: 30px;
    text-indent: 0px;
    text-align: center;
    bottom: 90px;
    margin-bottom: -3px;
    right: 0.5%;
    width: 200px;
    display: block;
    background: rgba(0, 0, 0, 0);
    height: 0px;
    z-index: 10; 
    border-top: 0px solid white;
    animation-name: slides-popup;
    -webkit-animation-name: slides-popup; /* Chrome, Safari, Opera */
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-duration: 45s;
    -webkit-animation-duration: 45s; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;   
}
@keyframes slides-popup {
    0%, 4%{ height: 0px;
    	 border-top: 0px solid white;
    	 background: rgba(0, 0, 0, 0);
    	 }
    5%, 15% {height: 30px;
    	 border-top: 0px solid white;
    	 background: rgba(0, 0, 0, 0.7);
    	 }
    16%, 100%{height: 0px;
    	 border-top: 0px solid white;
    	 background: rgba(0, 0, 0, 0);
    	 }
    }
.navbottom-project-title {
	display: block;
	line-height: 200%;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 80%;
	color: white;
	font-weight: normal;
	margin: 0;
	text-indent: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	position: relative;
	text-overflow: ellipsis;
	white-space: nowrap;
  	overflow: hidden;
	}
nav li a.navbottom-project-title {
	text-decoration: none;
	color: white;
	border-top: 0px;
	background-color: transparent;
	}
nav li a:hover.navbottom-project-title {
	text-decoration: none;
	color: yellow;
	border-top: 0px;
	background-color: transparent;
	}
.navbottom-project-title-active {
	display: block;
	line-height: 200%;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 80%;
	color: white;
	font-weight: normal;
	margin: 0;
	text-indent: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	position: relative;
	color: white;
	text-overflow: ellipsis;
	white-space: nowrap;
  	overflow: hidden;
	}
/* These are the transitions on all desktop slideshows (bottom screen). Add 40px to height in hover when new project added. */
.navbottom-slides1 {
	position: absolute;
	overflow-y: hidden;
	overflow-x: hidden;
    font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #fff;
    text-shadow: 1px 1px 0px #283744;
    line-height: 40px;
    text-indent: 10px;
    bottom: 0;
    margin-bottom: -3px;
    left: 0.4%;
    width: 31.7%;
    display: block;
    background: rgba(0, 0, 0, 0.7);
    height: 90px;
    z-index: 10; 
    border-top: 1px solid white;
    transition: .25s ease-out;
    -moz-transition: .25s ease-out;
    -webkit-transition: .25s ease-out;
    -o-transition: .25s ease-out;  
}
.navbottom-slides1:hover {
	height: 320px;
	border-top: 1px solid white;
    background: rgba(0, 0, 0, 1);
	transition: 0.5s ease-out;
	-moz-transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
	}
.navbottom-slides2 {
	position: absolute;
	overflow-y: hidden;
	overflow-x: hidden;
    font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #fff;
    text-shadow: 1px 1px 0px #283744;
    line-height: 40px;
    text-indent: 10px;
    bottom: 0;
    margin-bottom: -3px;
    right: 33.8%;
    width: 31.7%;
    display: block;
    background: rgba(0, 0, 0, 0.7);
    height: 90px;
    z-index: 10; 
    border-top: 1px solid white;
    transition: .25s ease-out;
    -moz-transition: .25s ease-out;
    -webkit-transition: .25s ease-out;
    -o-transition: .25s ease-out;  
}
.navbottom-slides2:hover, navbottom-slides2:focus {
	height: 360px;
	border-top: 1px solid white;
    background: rgba(0, 0, 0, 1);
	transition: 0.5s ease-out;
	-moz-transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
	}
.navbottom-slides3 {
	position: absolute;
	overflow-y: hidden;
	overflow-x: hidden;
	text-overflow: ellipsis;
    font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #fff;
    text-shadow: 1px 1px 0px #283744;
    line-height: 40px;
    text-indent: 10px;
    bottom: 0;
    margin-bottom: -3px;
    right: 0.5%;
    width: 31.7%;
    display: block;
    background: rgba(0, 0, 0, 0.7);
    height: 90px;
    z-index: 10; 
    border-top: 1px solid white;
    transition: .25s ease-out;
    -moz-transition: .25s ease-out;
    -webkit-transition: .25s ease-out;
    -o-transition: .25s ease-out;  
}
.navbottom-slides3:hover {
	height: 210px;
	border-top: 1px solid white;
    background: rgba(0, 0, 0, 1);
	transition: 0.5s ease-out;
	-moz-transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
	}
.navbottom-slides-center {
	position: absolute;
	overflow-y: hidden;
	overflow-x: hidden;
    right: 33.4%; 
}
.navbottom-slides-right {
	position: absolute;
	overflow-y: hidden;
	overflow-x: hidden;
    right: 0.1%; 
}
/* The regular navbar along the top is controlled by this default 'nav' with the a- class added to list items. */	

nav {
    height: 40px;
    width: 100%;
    float: right;
    display: inline;
    margin-right: 0px;
    font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    position: relative;
    z-index: 12;
}
.a-bottom-border {
	border-bottom: 3px solid white
	}
/* Navigation is globally controlled by these next classes. */	
nav a {
	background: rgba(40, 55, 68, 0.5);
    color: #fff;
    text-shadow: 1px 1px 0px #283744;
    display: block;
    text-align: left;
    text-indent: 10px;
    text-decoration: none;
    line-height: 40px;
}
nav ul {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    height: 40px;
    position: relative;
}
nav li {
    display: inline;
    width: 32.5%;
    padding-left: 0.4%;
    padding-right: 0.4%;
    float: left;
}
nav li a:hover {
    background-color: rgba(40, 55, 68, 1);   
}
nav li a:active {
    background-color: black;    
}
nav li:last-child a {
    border-right: 0;
}
.navtop:hover {
	background-color: rgba(40, 55, 68, 1);
	}
.navtop:hover +.navbottom {
	background-color: rgba(40, 55, 68, 0.5);
	border-top: 3px solid white;
	}
.navtop:hover +.navbottom {
	background-color: rgba(40, 55, 68, 0.5);
	}
.navtop:hover ~#columnimgbg1 {
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */ 
	transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-backface-visibility: hidden;
	}
.navtop:hover ~#columnimgbg2 {
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */ 
	transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-backface-visibility: hidden;
	}
.navtop:hover ~#columnimgbg3 {
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */ 
	transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-backface-visibility: hidden;
	}
.navtop:hover +.navbottom-about {
	height: 40px;
	border-top: 3px solid white;
    border-right: 1px solid #576979;
    background: rgba(40, 55, 68, 0.5);
    transition: .5s ease-out;
    -moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
    -o-transition: .5s ease-out;
	}
.navtop-about-link {
	position: relative;
    background-color: rgba(40, 55, 68, 0.5);
    display: inline;
    z-index: 11;
     border-bottom: 3px solid white;
    font-size: 13pt;
    font-family: "Helvetica", Arial, sans-serif;
    font-weight: normal;
    text-shadow: 1px 1px 0px #283744;
    color: #fff;
    text-align: left;
    width: 32.1%;
    margin-left: 0.4%;
	margin-right: 0.4%;
	padding-left: 0;
	padding-right: 0.4%;
	text-indent: 10px;
    line-height: 40px;
    height: 40px;
    transition: .5s ease-out;
    -moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
    -o-transition: .5s ease-out; 
}
.navtop-about-link:hover {
	border-bottom: 1px solid white;
	transition: 1s ease-out;
	-moz-transition: 1s ease-out;
    -webkit-transition: 1s ease-out;
    -o-transition: 1s ease-out;
	padding-top: 150px;
	background-color: rgba(40, 55, 68, 0.9);
	}
.navtop-about-link:hover +.navbottom {
	height: 40px;
	border-top: 3px solid white;
    border-right: 1px solid #576979;
    background: rgba(40, 55, 68, 0.5);
    transition: .5s ease-out;
    -moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
    -o-transition: .5s ease-out;
	}
.navtop-link-blurb {
	display: inline-block;
	top: -180px;
	line-height: 150%;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 80%;
	color: white;
	padding-top: 0px;
	position: relative;
	transition: .5s ease-out;
	-moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
    -o-transition: .5s ease-out;
	} 
.navtop-link-more {
	display: inline;
	text-align: left;
	margin-left: -46px;
	top: -145px;
	line-height: 150%;
	font-size: 13pt;
    font-family: "Helvetica", Arial, sans-serif;
    font-weight: normal;
    text-shadow: 1px 1px 0px #283744;
	color: white;
	position: relative;
	transition: .5s ease-out;
	-moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
    -o-transition: .5s ease-out;
	}    
.navtop-about-anime {
	position: relative;
    background: rgba(0, 0, 0, 1);
    display: inline;
     border-bottom: 3px solid white;
    font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-shadow: 1px 1px 0px #283744;
    color: #fff;
    text-align: left;
    width: 32.1%;
    margin-left: 0.4%;
	margin-right: 0.4%;
	padding-left: 0;
	padding-right: 0.4%;
	text-indent: 10px;
    line-height: 40px;
    height: 40px;
    animation-name: about-anime;
    -webkit-animation-name: about-anime; /* Chrome, Safari, Opera */
    animation-delay: 3s;
    -webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
    animation-duration: 10s;
    -webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;    
}
@keyframes about-anime {
0%{	
    	 border-bottom: 3px solid white;
    	 padding-top: 0px;
    	 background: rgba(0, 0, 0, 1);
    	 }
10%{	
    	 border-bottom: 1px solid white;
    	 padding-top: 160px;
    	 background: rgba(0, 0, 0, 0.7);
    	 }
95%{	
    	 border-bottom: 1px solid white;
    	 padding-top: 160px;
    	 background: rgba(0, 0, 0, 0.7);
    	 }
100%{
     	 border-bottom: 3px solid white;
    	 padding-top: 0px;
    	 background-color: rgba(0, 0, 0, 1);
    }
    }
.navtop-about {
	position: relative;
    background: rgba(0, 0, 0, 1);
    display: inline;
    z-index: 11;
     border-bottom: 3px solid white;
    font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-shadow: 1px 1px 0px #283744;
    color: #fff;
    text-align: left;
    width: 32.1%;
    margin-left: 0.4%;
	margin-right: 0.4%;
	padding-left: 0;
	padding-right: 0.4%;
	text-indent: 10px;
    line-height: 40px;
    height: 40px;
    transition: .5s ease-out;
    -moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
    -o-transition: .5s ease-out; 
}
.navtop-about:hover {
	border-bottom: 1px solid white;
	transition: 1s ease-out;
	-moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
    -o-transition: .5s ease-out;
	padding-top: 380px;
	background-color: rgba(0, 0, 0, 0.7);
	}
.navtop-about:hover +.navbottom-about {
	height: 40px;
	border-top: 3px solid white;
    border-right: 1px solid #576979;
    background: rgba(40, 55, 68, 0.5);
    transition: .5s ease-out;
    -moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
    -o-transition: .5s ease-out;
	}
.navtop-about-blurb-anime {
	display: inline-block;
	width: 95%;
	text-indent: 0;
	top: -200px;
	line-height: 150%;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 70%;
	font-weight: normal;
	color: white;
	padding-right: 25px;
	padding-left: 10px;
	position: relative;
	transition: .5s ease-out;
	-moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
    -o-transition: .5s ease-out;
	}  
.navtop-about-blurb {
	display: none;
	width: 95%;
	text-indent: 0;
	top: -420px;
	line-height: 150%;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 70%;
	font-weight: normal;
	color: white;
	padding-right: 25px;
	padding-left: 10px;
	position: relative;
	transition: .5s ease-out;
	-moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
    -o-transition: .5s ease-out;
	}  
.navtop-people-anime {
	position: relative;
    background: rgba(0, 0, 0, 1);
    display: inline;
     border-bottom: 3px solid white;
    font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-shadow: 1px 1px 0px #283744;
    color: #fff;
    text-align: left;
    width: 32.1%;
    margin-left: 0.4%;
	margin-right: 0.4%;
	padding-left: 0;
	padding-right: 0.4%;
	text-indent: 10px;
    line-height: 40px;
    height: 40px;
    animation-name: people-anime;
    -webkit-animation-name: people-anime; /* Chrome, Safari, Opera */
    animation-delay: 3s;
    -webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
    animation-duration: 10s;
    -webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;    
}
@keyframes people-anime {
0%{	
    	 border-bottom: 3px solid white;
    	 padding-top: 0px;
    	 background: rgba(0, 0, 0, 1);
    	 }
10%{	
    	 border-bottom: 1px solid white;
    	 padding-top: 480px;
    	 background: rgba(0, 0, 0, 0.7);
    	 }
95%{	
    	 border-bottom: 1px solid white;
    	 padding-top: 480px;
    	 background: rgba(0, 0, 0, 0.7);
    	 }
100%{
     	 border-bottom: 3px solid white;
    	 padding-top: 0px;
    	 background-color: rgba(0, 0, 0, 1);
    }
    }
.navtop-people {
	position: relative;
    background: rgba(0, 0, 0, 1);
    display: inline;
    z-index: 11;
     border-bottom: 3px solid white;
    font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-shadow: 1px 1px 0px #283744;
    color: #fff;
    text-align: left;
    width: 32.1%;
    margin-left: 0.4%;
	margin-right: 0.4%;
	padding-left: 0;
	padding-right: 0.4%;
	text-indent: 10px;
    line-height: 40px;
    height: 40px;
    transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out; 
}
.navtop-people:hover {
	border-bottom: 1px solid white;
	transition: 1s ease-out;
	-moz-transition: 1s ease-out;
    -webkit-transition: 1s ease-out;
    -o-transition: 1s ease-out;
	padding-top: 480px;
	background-color: rgba(0, 0, 0, 0.7);
	}
.navtop-people-blurb {
	display: inline-block;
	width: 95%;
	text-indent: 0;
	top: -525px;
	line-height: 150%;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 70%;
	font-weight: normal;
	color: white;
	padding-right: 25px;
	padding-left: 10px;
	position: relative;
	transition: .5s ease-out;
	-moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
    -o-transition: .5s ease-out;
	}  
.navtop-contact-anime {
	position: relative;
    background: rgba(0, 0, 0, 1);
    display: inline;
     border-bottom: 3px solid white;
    font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-shadow: 1px 1px 0px #283744;
    color: #fff;
    text-align: left;
    width: 32.1%;
    margin-left: 0.4%;
	margin-right: 0.4%;
	padding-left: 0;
	padding-right: 0.4%;
	text-indent: 10px;
    line-height: 40px;
    height: 40px;
    animation-name: contact-anime;
    -webkit-animation-name: contact-anime; /* Chrome, Safari, Opera */
    animation-delay: 3s;
    -webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
    animation-duration: 10s;
    -webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;    
}
@keyframes contact-anime {
0%{	
    	 border-bottom: 3px solid white;
    	 padding-top: 0px;
    	 background: rgba(0, 0, 0, 1);
    	 }
10%{	
    	 border-bottom: 1px solid white;
    	 padding-top: 420px;
    	 background: rgba(0, 0, 0, 0.7);
    	 }
95%{	
    	 border-bottom: 1px solid white;
    	 padding-top: 420px;
    	 background: rgba(0, 0, 0, 0.7);
    	 }
100%{
     	 border-bottom: 3px solid white;
    	 padding-top: 0px;
    	 background-color: rgba(0, 0, 0, 1);
    }
    }
.navtop-contact {
	position: relative;
    background: rgba(0, 0, 0, 1);
    display: inline;
    z-index: 11;
     border-bottom: 3px solid white;
    font-size: 13pt;
    font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-shadow: 1px 1px 0px #283744;
    color: #fff;
    text-align: left;
    width: 32.1%;
    margin-left: 0.4%;
	margin-right: 0.4%;
	padding-left: 0;
	padding-right: 0.4%;
	text-indent: 10px;
    line-height: 40px;
    height: 40px;
    transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out; 
}
.navtop-contact:hover {
	border-bottom: 1px solid white;
	transition: 1s ease-out;
	-moz-transition: 1s ease-out;
    -webkit-transition: 1s ease-out;
    -o-transition: 1s ease-out;
	padding-top: 420px;
	background-color: rgba(0, 0, 0, 0.7);
	}
.navtop-contact-blurb {
	display: inline-block;
	width: 95%;
	text-indent: 0;
	top: -465px;
	line-height: 150%;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 90%;
	font-weight: normal;
	color: white;
	padding-right: 25px;
	padding-left: 10px;
	position: relative;
	transition: .5s ease-out;
	-moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
    -o-transition: .5s ease-out;
	}  
#navtophome {
	position: absolute;
    top: 0;
    background: rgba(40, 55, 68, 0.5);
    display: block;
    z-index: 100;
}
/* Mobile nav menu. */	
nav a#pull {
    display: none;
}  
/* END OF NAVIGATION CSS. */

/* CSS SPECIFIC TO 'people'. */	
.peopleimgbg {
	background: url('../images/people-names.jpg') no-repeat top center;
	background-size: cover;
	background-position: 50% 19%;
	text-align: center;
	margin: 0 auto;
	margin-right: 0.5%;
	height: 100%;
	width: 99.1%;
	display: inline-block;
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
	z-index: 1;
	overflow: hidden;
	}	
/* CSS for all mapped links & textboxes */
/* These are the 3 text styles within each box */
.text-box-name {
	color: white;
	font-size: 120%;
    font-family: "Helvetica", Arial, sans-serif;
    line-height: 20px;
    text-shadow: 2px 2px 0px black;
    }
.text-box-jobtitle {
	color: white;
	font-size: 100%;
    font-family: "Helvetica", Arial, sans-serif;
    line-height: 10px;
    }
.text-box-text {
	color: white;
	font-size: 100%;
    font-family: "Helvetica", Arial, sans-serif;
    font-weight: normal;
    line-height: 20px;
    }
/* These are the actual links and textboxes for individual 'buttons' */
/* link-box = transparent link area. */
/* text-box = parent text box div - entire text box with text that will display on mouseover.*/
/* text-box-box = the actual box, without text*/
/* button/link 1 */
#link-box1 { 
	position: absolute; 
	top: 21%; 
	left: 20%; 
	width: 10%; 
	height: 40%; 
	background-color: transparent; 
	}
#link-box1:hover +#text-box1 {

	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */
	transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -webkit-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
	}
#text-box1 {
	opacity: 0; 
	filter: alpha(opacity=0); /* For IE8 and earlier */
	transition: opacity .25s ease-out;
    -moz-transition: opacity .25s ease-out;
    -webkit-transition: opacity .25s ease-out;
    -o-transition: opacity .25s ease-out;
	}
#text-box-box1 {
	background-color: rgba(40, 55, 68, 0.7);
	border-bottom: 3px solid white;
	border-top: 3px solid white;
	box-shadow:5px 5px 20px;
	width: 220px;
	top: 29%;
	left: 2%;
	display: block;
	position: absolute;
    margin: auto;
	text-align: center;
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */ 
	}
/* button/link 2 */		
#link-box2 { 
	position: absolute; 
	top: 27%; 
	left: 74%; 
	width: 18%; 
	height: 60%; 
	background-color: transparent;
	}
#link-box2:hover +#text-box2 {
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */
	transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -webkit-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
	}
#text-box2 {
	opacity: 0; 
	filter: alpha(opacity=0); /* For IE8 and earlier */
	transition: opacity .25s ease-out;
    -moz-transition: opacity .25s ease-out;
    -webkit-transition: opacity .25s ease-out;
    -o-transition: opacity .25s ease-out;
	}
#text-box-box2 {
	background-color: rgba(40, 55, 68, 0.7);
	border-bottom: 3px solid white;
	border-top: 3px solid white;
	box-shadow:5px 5px 20px;
	width: 220px;
	top: 54%;
	left: 57%;
	display: block;
	position: absolute;
    margin: auto;
	text-align: center;
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */ 
	}
/* button/link 3 */	
#link-box3 { 
	position: absolute; 
	top: 20%; 
	left: 38%; 
	width: 13%; 
	height: 45%; 
	background-color: transparent;
		}
#link-box3:hover +#text-box3 {
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */
	transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -webkit-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
	}
#text-box3 {
	opacity: 0; 
	filter: alpha(opacity=0); /* For IE8 and earlier */
	transition: opacity .25s ease-out;
    -moz-transition: opacity .25s ease-out;
    -webkit-transition: opacity .25s ease-out;
    -o-transition: opacity .25s ease-out;
	}
#text-box-box3 {
	background-color: rgba(40, 55, 68, 0.7);
	border-bottom: 3px solid white;
	border-top: 3px solid white;
	box-shadow:5px 5px 20px;
	width: 220px;
	top: 55%;
	left: 37%;
	display: block;
	position: absolute;
    margin: auto;
	text-align: center;
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */ 
	}
/* button/link 4 */	
#link-box4 { 
	position: absolute; 
	top: 22%; 
	left: 61%; 
	width: 12%; 
	height: 45%; 
	background-color: transparent;
	}
#link-box4:hover +#text-box4 {
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */
	transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -webkit-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
	}
#text-box4 {
	opacity: 0; 
	filter: alpha(opacity=0); /* For IE8 and earlier */
	transition: opacity .25s ease-out;
    -moz-transition: opacity .25s ease-out;
    -webkit-transition: opacity .25s ease-out;
    -o-transition: opacity .25s ease-out;
	}
#text-box-box4 {
	background-color: rgba(40, 55, 68, 0.7);
	border-bottom: 3px solid white;
	border-top: 3px solid white;
	box-shadow:5px 5px 20px;
	width: 220px;
	top: 47%;
	left: 51%;
	display: block;
	position: absolute;
    margin: auto;
	text-align: center;
	opacity: 1; 
	filter: alpha(opacity=100); /* For IE8 and earlier */ 
	}	
/* CSS SPECIFIC TO 'contact'. */	
.contactimgbg {
	background: url('../images/contact.jpg') no-repeat center center;
	background-size: cover;
	background-position: 50% 80%;
	text-align: center;
	margin: 0 auto;
	margin-right: 0.5%;
	height: 100%;
	width: 99.1%;
	display: inline-block;
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
	z-index: 1;
	overflow: hidden;
	}	
/* Almost the same as previous, but displays on mobile; note subtle differences in right margin and width. */ 
.contactimgbg-mobile {
	background: url('../images/contact.jpg') no-repeat center center;
	background-size: cover;
	background-position: 50% 80%;
	height: 100%;
	width: 100%;
	display: none;
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
	z-index: 1;
	overflow: hidden;
	}	
/* This div contains images with contact details. These are hidden on desktop, but set to "display: inline-block" in style_contact.responsiveness.css on screens of 1100px width and less. */	
.addressarea {
	width: 220px;
	height: 100%;
	position: absolute;
	display: none;
	right: 20px;
	padding-top: 60px;
    margin: 0 auto;  
	}	
.address-img {
	display: inline-block;
	margin: 0 auto;
	margin-top: 10px;
	border-bottom: 3px solid white;
	border-top: 3px solid white;
	background-color: rgba(40, 55, 68, 0.8);
	width: 220px;
	}
h1 a {
	display: block;
	text-decoration: none;
	color: white;
	}
h2 a, h3 a {
	display: block;
	text-decoration: none;
	color: white;
	}
p a {
	display: block;
	text-decoration: none;
	color: white;
	}	
.caption-heading {
	position: absolute;
	margin-top: -40px;
	padding: 0;
	height: 40px;
	line-height: 40px;
	width: 100%;
	color: white;
	background-color: rgba(40, 55, 68, 1);
	text-align: center;
	font-size: 150%;
    font-family: "Helvetica", Arial, sans-serif;
    font-weight: bold;
	}
.caption-heading-asher {
	position: absolute;
	margin-top: -80px;
	padding: 0;
	height: 80px;
	line-height: 40px;
	width: 100%;
	color: white;
	background-color: rgba(40, 55, 68, 1);
	text-align: center;
	font-size: 150%;
    font-family: "Helvetica", Arial, sans-serif;
    font-weight: bold;
	}
.caption-contact {
	position: absolute;
	bottom: -15px;
	padding: 0;
	height: 40px;
	line-height: 40px;
	width: 100%;
	color: white;
	background-color: rgba(40, 55, 68, 1);
	text-align: center;
	font-size: 150%;
    font-family: "Helvetica", Arial, sans-serif;
    font-weight: bold;
	}
.caption-slideshow {
	position: absolute;
	margin-top: -40px;
	height: 40px;
	line-height: 20px;
	width: 100%;
	color: white;
	background-color: rgba(40, 55, 68, 1);
	text-align: center;
	font-size: 80%;
    font-family: "Helvetica", Arial, sans-serif;
    font-weight: bold;
	}
.caption-slideshow-single40 {
	position: absolute;
	margin-top: -40px;
	height: 40px;
	line-height: 40px;
	width: 100%;
	color: white;
	background-color: rgba(40, 55, 68, 1);
	text-align: center;
	font-size: 80%;
    font-family: "Helvetica", Arial, sans-serif;
    font-weight: bold;
	}
/* This centers regardless of mobile screen width with left & right set 0 and margin-left and -right set auto. Width & padding must equal 100 viewport width. */
.caption-blurb {
	margin: 0 auto;
	position: absolute;
	line-height: 20px;
	left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
	width: 90vw;
	padding-left: 5vw;
	padding-right: 5vw;
	padding-top: 10px;
	padding-bottom: 10px;
	color: white;
	background-color: rgba(40, 55, 68, 0.5);
	text-align: center;
	font-size: 80%;
  font-family: "Helvetica", Arial, sans-serif;
  font-weight: normal;  
	}
/* The height of captions is determined for each page in the styles below - these are added to the global setting above. */
.caption-blurb-about {
	margin-top: -220px;
	height: 160px;
	}
.caption-blurb-people {
	margin-top: -260px;
	height: 200px;
	}
.caption-special {
	position: absolute;
	top: 50px;
	margin-left: 80px;
	height: 15px;
	line-height: 15px;
	width: auto;
	padding: 5px;
	color: white;
	background-color: rgba(40, 55, 68, 0.5);
	text-align: center;
	font-size: 80%;
    font-family: "Helvetica", Arial, sans-serif;
    font-weight: normal;
    border-bottom: 1px solid white;
	}
.slideshow {
	position: absolute;
	margin: 0 auto;
	text-align: center;
	height: 100%;
	width: 99.1%;
	margin-left: 0.4%;
	overflow: hidden;
	-webkit-transform: translateZ(0) scale(1.0, 1.0); /* This prevents a distortion on hover in Safari */
	}	
.construction {
	position: absolute;
	display: block;
	width: 100%;
	left: 0;
	right: 0;
	top: 100%;
	top: 39vh;
	height: 90px;
	color: navy;
	text-align: center;
	background-color: rgba(255,255,255,0.6);
	font-family: "Helvetica", Arial, sans-serif;
	z-index: 100;
	pointer-events: none;
	}
	
.construction-mobile {
	position: absolute;
	display: none;
	width: 100%;
	left: 0;
	right: 0;
	top: 37vh;
	height: 115px;
	color: navy;
	margin: 0 auto;
	text-align: center;
	background-color: rgba(255,255,255,0.6);
	font-family: "Helvetica", Arial, sans-serif;
	z-index: 100;
	pointer-events: none;
	}
.main-menu {
	top: 10px;
	}
h2 a img, h3 a img {
	height: 1.5em !important;
	width: 1.5em !important;
	min-height: 100% !important;
	display: inline !important;
	background: none !important;
	margin-right: 0.25em;
	margin-top: -0.125em;
	vertical-align: middle;
}		
.index-info {
	margin-top: 3.5em;
}