@CHARSET "ISO-8859-1";

@font-face { 
	font-family: "Old Standard TT"; 
	src: url("OldStandardTT-Regular.ttf"); 
}
@font-face { 
	font-family: "Didact Gothic"; 
	src: url("DidactGothic-Regular.ttf"); 
}

html {
	min-height: 100%;
	height: 100%;
	min-width: 1280px;
	font-family: Didact Gothic, Arial, Helvetica, sans-serif;
	line-height: 1.5;
	font-size: calc(2px + 0.54vh + 0.54vw);
	letter-spacing: 0.2px;
	color: #333;
	background-color: #ffffff;
}
body {
	margin: 0;
}

a {
	text-decoration: none;
	color: #004080;
}

h1 {
	font-weight: normal;
	font-family: Old Standard TT;
	color: #004080;
	font-size: calc(4px + 1.24vh + 1.24vw);
}
h2 {
	font-weight: normal;
	font-family: Didact Gothic;
	font-size: calc(3px + 0.66vh + 0.66vw);
	margin-top: 1.5em;
}
h3 {
	font-weight: normal;
	font-family: Didact Gothic;
	font-size: calc(2px + 0.6vh + 0.6vw);
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

p {
	margin-top: calc(0.5vh + 0.5vw);
	margin-bottom: calc(0.5vh + 0.5vw);
}

/** ------------------ Page Image --------------------------- **/

#pageImageHome {
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	width: 60%;
	min-width: 768px;
	height: 100%;
	text-align: center;
	overflow: hidden;
	z-index: 2;
}
#pageImageHome img {
	height: 100%;
	min-width: 60vw;
}

#pageImage {
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	width: 40%;
	min-width: 512px;
	height: 100%;
	text-align: center;
	overflow: hidden;
	z-index: 0;
}
#pageImage img {
	height: 100%;
	min-width: max(512px , 40% );
}

/** ------------------ Menu --------------------------------- **/

#logo {
	position: fixed;
	top: 0;
	left: 0;
	width: 15vw;
	padding: 0.5em 1em;
	z-index: 2;
}
#logo img {
	width: 100%;
}

#menuOptions {
	position: fixed;
	top: 0;
	left: max(40% , 512px);
	width: calc(60% - 4em);
	max-width: calc(100% - 512px - 4em);
	padding: 2em 2em 2em 2em;
	background: #fff;
	z-index: 0;
}
.menuOptAct {
	float: right;
	padding-left: 3em;
	color: #004080;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.menuOpt {
	float: right;
	padding-left: 3em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
}
.menuOpt a {
	color: #000;
}

#legalities {
	position: fixed;
	bottom: 0;
	left: max(40% , 512px);
	height: calc(10px + 0.4vh + 0.4vw);
	width: calc(60% - 2em);
	max-width: calc(100% - 512px - 2em);
	background-color: #fff;
	padding: 1em 2em 1em 0;
	text-align: right;
	z-index: 1;
}

/** ------------------ Home --------------------------------- **/

#home {
	display: none;
}
#homeTitle {
	position: absolute;
	top: 18vh;
	left: 25vw;
	max-width: 60vw;
	padding: 0.4em 0.4em 0.3em 0.4em;
	color: #fff;
	background-color: #004080;
	font-family: Old Standard TT;
	font-size: calc(22px + 0.8vh + 0.8vw);
	z-index: 2;
}

#homeText {
	position: absolute;
	top: 33vh;
	left: 60%;
	padding: 5em;
	width: calc(40% - 10em);
	text-align: left;
	font-size: calc(9px + 0.35vh + 0.35vw);
}

/** ------------------ Content Page-------------------------- **/

#stdContent {
	display: none;
	margin-left: 40%;
	padding: 7em 5em 5em 5em;
	width: calc(60% - 10em);
	text-align: left;
	padding-bottom: 30vh;
}

#standardTextField {
	column-count: 2;
	column-gap: 4em;
	padding-bottom: 5vh;
}

.quote {
	position: fixed;
	top: 72vh;
	left: 30vw;
	font-size: calc(1px + 0.5vh + 0.5vw);
	color: #fff;
	font-style: italic;
	background-color: #004080;
	padding: calc(0.4vh + 0.4vw) calc(0.6vh + 0.6vw);
	z-index: 1;
}
.quoteSrc {
	font-style: normal;
}
#servicesQuote {
	width: 56%;
}
#quoteWhiteBg {
	position: fixed;
	bottom: 0;
	left: max(40% , 512px);
	height: calc(10px + 0.4vh + 0.4vw);
	width: calc(60% - 2em);
	max-width: calc(100% - 512px - 2em);
	background-color: #fff;
	padding: calc(18vh + 4vw) 2em 1em 0;
	text-align: right;
}
#servicesDetailLink {
	cursor: pointer;
	color: #004080;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

#servicesDetails {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	height: 100%;
	width: 100%;
	background: #fff;
}
#servicesDetails img {
	width: 15vw;
	margin: 2vh 5vw 2vh 0; 
}
#servicesDetails h2 {
	margin-top: 0;	
}
#servicesDetailsContent {
	padding: 5vh 10vw;
	height: calc(100% - 10vh);
	width: calc(100% - 20vw);
	overflow: auto;
}
#servDetailsTextField {
	position: relative;
	width: 100%;
	column-count: 3;
	column-gap: 4em;
}

#clsButton2 {
    display: none;
    position: fixed;
	top: 1em;
	right: 1em;
	width: 30px;
	height: 28px;
	margin-bottom: 30px;
	cursor: pointer;
}
#clsButton2:before, #clsButton2:after {
    position: absolute;
    left: 1em;
    content: '';
    height: 33px;
    width: 2px;
    background-color: #004080;
}
#clsButton2:before {
    transform: rotate(45deg);
}
#clsButton2:after {
    transform: rotate(-45deg);
}

#aboutContent {
	display: none;
	margin-left: 55%;
	padding: 7em 5em 5em 5em;
	width: calc(45% - 10em);
	text-align: left;
	padding-bottom: 2em;
}

#aboutTextField {
	column-count: 1;
	padding-bottom: 5vh;
}

#aboutQuote {
	top: calc(7em + 3px + 1vh + 1vw );
	margin-top: max( 18vw , 250px );
	left: max(35% , 448px);
	width: calc(20% - 1.2vh - 1.2vw);
	min-width: calc(256px - 1.2vh - 1.2vw);
}

#aboutPortrait {
	position: fixed;
	top: calc(7em + 3px + 1vh + 1vw );
	left: max(45% , 576px);
	width: max(10% , 128px);	
}
#aboutPortrait img {
	width: 100%;
}

/** ------------------ Contact ------------------------------ **/

#contact {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	height: calc(100% - 40vh);
	width: calc(100% - 50vw);
	background: #fff;
	padding: 20vh 25vw;
}
#contact img {
	width: 15vw;
	margin-top: 3em;
	margin-right: 5em;
}
#contactTextField {
	width: 30vw;
}

#clsButton {
    display: none;
    position: fixed;
	top: 1em;
	right: 1em;
	width: 30px;
	height: 28px;
	margin-bottom: 30px;
	cursor: pointer;
}
#clsButton:before, #clsButton:after {
    position: absolute;
    left: 1em;
    content: '';
    height: 33px;
    width: 2px;
    background-color: #004080;
}
#clsButton:before {
    transform: rotate(45deg);
}
#clsButton:after {
    transform: rotate(-45deg);
}
/** ------------------ Legalities --------------------------- **/

#privacyContent {
	display: none;
	padding: 15vh 10vw 10vh 3vw;
	width: calc(50% - 13vw);
	float: left;
}
#legalContent {
	display: none;
	padding: 15vh 3vw 10vh 10vw;
	width: calc(30% - 13vw);
	float: left;
}