*,
*::before,
*::after{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
//	font-family: 'Roboto', sans-serif;
    	font-family: 'Calisto MT';
    	background-color: #f5f5f0; 
    	color: #000;
	font-size: 10px;
}

body {
    overflow-x: hidden;
}

a{
	text-decoration: none;
	font-size: 2vw;
}

ul{
	list-style: none;
}

header{
	width: 100%;
	position: fixed;
    	background-color: #f5f5f0; 
}

.container{
	width: 100%;
	max-width: 117rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.menu-icons{
	color: #555;
	font-size: 4rem;
	position: absolute;
	top: 50%;
	right: 2rem;
	transform: translateY(-50%);
	cursor: pointer;
	z-index: 1500;
	display: none;
}

nav{
	display: flex;
	align-items: center;
	width: 100%;
	height: 8rem;
	border-bottom: 1px solid rgba(255,255,255, .1);
}

.logo{
	width: 5rem;
	height: 5rem;
//	background-color: #aaaaaa;
	display: flex;
	border-radius: 100%;
	margin-right: 5rem;
}

.logi i{
	margin: auto;
	font-size: 3rem;
	color: #eee;
}

.nav-list{
	display: flex;
	width: 100%;
	align-items: center;
}

.nav-list li{
	line-height: 3rem;
	position: relative;
}

.sub-menu li{
	line-height: 3rem;
}

.nav-list a{
	display: block;
	color: #000;
	padding: 0 1.5rem;
	font-size: 1.4rem;
	text-transform: uppercase;
	transition: color 650ms;
}

.nav-list a:hover{
	color: #aaaaaa;
}

.sub-menu{
	width: 30rem;
	display: block;
	position: absolute;
	border-top: 3px solid #aaaaaa;
//	background-color: #191919;
	background-color: #f5f5f0;
	z-index: 100;
	top: 16rem;
	opacity: 0;
	visibility: hidden;
	transition: all 500ms ease;
}

// Arrow treatment for hover menus. Arrow get's in the way. 
.sub-menu::before{
//	content: "";
//	position: absolute;
//	top: -2.5rem;
//	left: 3rem;
//	border: 1.2rem solid transparent;
//	border-bottom-color: #aaaaaa;
}

.sub-menu .sub-menu::before{
	top: .9rem;
	left: -2.5rem;
	border: 1.2rem solid transparent;
	border-right-color: #aaaaaa;
}

.sub-menu .sub-menu {
	border-top: none;
	border-left: 3px solid #aaaaaa;
	top: 0;
	left: 160%;
}

.nav-list li:hover > .sub-menu{
	top: 3rem;
	opacity: 1;
	visibility: visible;	
}

li.move-right{
	margin: auto 0 auto auto;
	line-height: initial;
}


.sub-menu li:hover > .sub-menu {
	top: 0;
	left: 100%;
}

.containerSpacer {
	height:15vw;
}

@media screen and (max-width: 850px){
	.nav-list{
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		display: none;
		flex-direction: column;
		align-items: initial;
		background-color: #f5f5f0;
		opacity: .85;
		z-index: 1000;
	}
	
	.nav-list > li{
		line-height: 3rem;
	}
	
	.sub-menu{
		position:initial;
		border: 3px solid transparent;
		border-left-color: #aaaaaa;
		margin-left: 1rem;
		max-height: 0;
	}
	
	.sub-menu:: before{
		display:none;
	}
	
	.nav-list li:hover > .sub-menu{
		opacity: 1;
//		top: 3.5rem;
		visibility: visible;
		max-height: initial;
	}
	
	li.move-right{
		margin: 0 auto 0 0;
		line-height: initial;
	}

	.menu-icons{
		display: block;
	}
	
	.ion-md-close{
		display: none;
	}
	
	nav.active .ion-md-close{
		display: block;
	}
	
	nav.active .ion-md-menu{
		display: none;
	}
	
	nav.active .nav-list{
		display: flex;
	}
	
	.containerSpacer {
		height: 7vw;
	}
	
	.container {
		height: 1vw;
	}	
}	
			
/*End nav css*/

@media screen and (max-width: 830px){
    .text h1{
        font-size: 4rem;
    }
}

/*Column Layout*/
/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
//  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.row {
	text-align: center;
	font-size: 10pt;
}

/* Responsive layout - makes the 4  columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .column {
    width: 50%;
  }
}

/* Responsive layout - makes the 4  columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

/*Title Sizing*/
.titleText {
    text-align: center;
    font-weight: bold;
//    font-size: 30pt;
    font-size: 3vw;
    text-align: center;
    transition: 0.2s;
}

.subTitleText {
    text-align: center;
    font-weight: bold;
//    font-size: 18pt;
    font-size: 2.5vw;
    transition: 0.2s;
}

.image-link {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

/* aligns caption to center */
.mfp-title {
  text-align: center;
  padding: 6px 0;
}

.linkCell {
    vertical-align: top; 
    text-align: center; 
    font-weight: bold;
    font-style: italic;
    font-size: 12pt;
}

.navigationTable {
    width: 80%;
    align: center;
}

.navigationCell {
    white-space: nowrap; 
    text-align: center; 
    vertical-align: middle;
    background-repeat: no-repeat; 
    background-position: center;
}
 
.navigationFrame {
    white-space: nowrap; 
    text-align: center; 
    vertical-align: middle;
    background-repeat: no-repeat; 
    background-position: center;
    width: 200px;
    height: 200px;
    align: middle;
    border-style: none;
}

.navigationText {
    text-align: center;
    font-size: 10pt;  
}
 

.imageTable {
    width: 100%; 
    align: center;
}

.thumbCell {
    vertical-align: top;
    text-align: center;
    align: center;
}

.imageLink {
    text-decoration:none;
}

.with-caption {
  display: inline-block;
//  width: 20%;
  margin: 5px;
}

.with-caption img {
  width: 100%;
  vertical-align: bottom;
}

.with-caption .title {
  text-align: center;
}

.thumbImage {
     border-color:black; 
     border-width=4px;
}

.referencesCell {
    vertical-align: top; 
    text-align: center; 
    font-size: 12pt;
}

.referencesName {
    vertical-align: top; 
    font-size: 12pt;
}

.layoutTable {
    white-space: nowrap; 
    vertical-align: middle;
    background-repeat: no-repeat; 
    background-position: center;
    align: middle;
    border-style: none;
    width: 80%; 
    height: 700px; 
    text-align: left;    
}

.formatTitle {
    vertical-align: top; 
    text-align: left;
    font-weight: bold;
    font-size: 20pt;
}

.formatName {
    vertical-align: top; 
    text-align: left;
    font-weight: bold;
    font-size: 12pt;
}
.formatAddress {
    vertical-align: top; 
    text-align: left;
    font-weight: bold;
    font-size: 16pt;
}
.formatQuote {
    vertical-align: top; 
    text-align: left;
    font-weight: bold;
    font-size: 16pt;
}
.formatText {
    vertical-align: top; 
    text-align: left;
    font-weight: bold;
    font-size: 16pt;
}

h2 {
    padding: 10 20 20;
    font-size: 2.5vw;
}

.homeText {
    font-size: 2vw;
    margin: 0;
    padding: 10 30 10 30;  
}

.contactText {
    font-size: 4vw;
}