@charset "UTF-8";
/* CSS Document */

body {
	background-color: rgb(0,110,156); /* default */
	/*background-color: rgb(0,121,169);*/ /* mac safari & chrome */
	/*background-color: rgb(0,110,156);*/ /* mobile pc safari & chrome */
	/*background-color: rgb(0,118,155);*/ /* mac firefox & ie */
	margin:0;
	padding:0;
	text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.homepageBody {
	width:100vw;
	height:100vh;
	overflow:hidden;
}

.headerText {
	position:fixed; left:0px; top:0px; width:100%; height:auto; text-align:left; font-family: 'Kameron', serif;
	font-size:54px;
	color:#0076a6;
	font-weight:700;
	line-height:98px;
	box-sizing: border-box;
	padding-left:24px; padding-right:24px; z-index:2500; background-color:#FFFFFF; border-bottom:solid; border-bottom-width:1px; border-bottom-color:#e1f3f8;
}

.navDiv {
	position:fixed; left:0px; top:98px;
	width:187px; z-index:2000;
	padding-top:20px;
}

.atomDiv {
	position:relative;
}


.infoClass {
	position:absolute;
	right:2%;
	bottom:2%;
	font-family: 'Roboto', sans-serif;
	font-size:30px;
	color:#FFF;
	font-weight:400;
	width:96%;
	height:auto;
	text-align:right;
	line-height:1.3em;
}

.infoClass strong {
	font-size:1.25em;
	font-weight:700;
}

.infoClass a {
	color:#1257e6;
}

.sideNavButton {
	position:relative; left:0px; top:0px; width:187px; height:76px; background-color:rgba(255,255,255,.95); margin:0; padding:0; overflow:hidden; border-bottom:solid; border-bottom-width:1px; border-bottom-color:#e1f3f8; cursor:pointer;
}

.sideNavButton:hover .underBar {
	width:100%;
}

.sideNavButton:hover .navText {
	color:#FFF;
}

.navText {
	position:absolute; left:0px; top:0px;
	margin:0; padding:0; font-family: 'Roboto', sans-serif;
	font-size:27px; line-height:1;
	font-weight:400; margin-top:25px; margin-left:29px; text-transform:uppercase;
	-webkit-transition: color .5s ease-in-out;
    -moz-transition: color .5s ease-in-out;
    -o-transition: color .5s ease-in-out;
    transition: color .5s ease-in-out;
	z-index:100;
}

.underBar {
	position:absolute; left:0px; top:0px; width:8px; height:100%; background-color:#fc6621;
	-webkit-transition: width .5s ease-in-out;
    -moz-transition: width .5s ease-in-out;
    -o-transition: width .5s ease-in-out;
    transition: width .5s ease-in-out;
}

.aboutButton {
	color:#fc6621;
}

.aboutButton .underBar {
	background-color:#fc6621;
}

.workButton {
	color:#4aa920;
}

.workButton .underBar {
	background-color:#4aa920;
}

.contactButton {
	color:#ca1881;
}

.contactButton .underBar {
	background-color:#ca1881;
}

.padNav {
	position:absolute; right:0px; top:25px; width:55%; height:auto;  font-family: 'Roboto', sans-serif;
	font-size:21px; line-height:1;
	color:#fc6621;
	font-weight:400; text-align:right; display:none;
}

.padNav a {
	margin-right:24px; text-decoration:none;
}

.hamburger {
	position:absolute; right:0px; top:8px; margin-right:12px; display:none !important;
}

.navDivSpecial {
	position:fixed; top:0px; width:100%; height:100vh; background-color:#FFF; padding-top:72px; display:block !important;
	-webkit-animation: fadeinout .25s linear forwards;
    animation: fadeinout .25s linear forwards;
}
.navDivSpecial .sideNavButton {
	width:100%;
}

#bubbleArea {
	position:fixed; left:0px; top:0px; width:100%; height:100vh; overflow:hidden;
}

.bubble {
	position:absolute; left:0px; top:0px; width:1px; height:1px;
}

.bubbleInside {
	position:absolute; left:-750px; top:-750px; width:1500px; height:1500px; background-color:#FFF; border-radius:50%; visibility:hidden;
}

.scrollingSection {
	position:relative; overflow:scroll; text-align:center;
}

.contentHolder {
	position:relative; left:0px; top:0px; width:100%; height:auto; display:inline-block; padding-left:187px; box-sizing: border-box; text-align:center; padding-top:120px;
}

.theContent {
	position:relative; left:0px; top:0px; width:80%; height:auto; max-width:750px; display:inline-block;
}

.theContentWork {
	position:relative; left:0px; top:0px; width:92%; height:auto; display:inline-block; margin-top:36px; padding-bottom:75px; margin-bottom:50px;
}

.theWorkBlock {
	position:relative; left:0px; top:0px; width:286px; height:286px; border-radius:10px; display:inline-block; background-color:#FFF; margin:28px; visibility:hidden; text-align:center; cursor:pointer;
}

.theWorkBlock img {
	position:absolute; left:50%; top:50%; width:87%; height:auto; display:inline-block;
	-webkit-transform:translateX(-50%) translateY(-50%);
  	-ms-transform:translateX(-50%) translateY(-50%);
  	transform:translateX(-50%) translateY(-50%); max-width:248px; border:solid; border-width:1px; border-color:#CCC;
}

@media only screen and (max-width:1240px) {
	.theWorkBlock {
		width:214px; height:214px; margin:21px;
	}
}

@media only screen and (max-width:514px) {
	.theWorkBlock {
		width:143px; height:143px; margin:14px;
	}
}

@media only screen and (max-width:380px) {
	.theWorkBlock {
		width:135px; height:135px; margin:10px;
	}
}

.divideLine {
	position:relative; left:0px; top:0px; width:100%; height:1px; background-color:#FFF;
}

.highlightClass {
	position:relative; left:0px; top:0px; width:75%; height:auto; display:inline-block; font-family: 'Roboto', sans-serif; font-weight:300; font-style:italic; font-size:40px; line-height:1.35; color:#FFF; padding-top:.75em; padding-bottom:.75em; overflow:hidden;
}

.highlightClass strong {
	font-weight:400; font-style:normal;
}

.theContent p {
	margin:0; padding:0; position:relative; left:0px; top:0px; width:90%; height:auto; display:inline-block; font-family: 'Roboto', sans-serif; font-weight:400; color:#FFF; text-align:left; font-size:21px; line-height:1.7; padding-top:2em; padding-bottom:2em;
}

.theContent p strong {
	font-weight:700;
}

.atomSpecial {
	height:100vh; box-sizing: border-box;
}

.leftColumn {
	position:relative; left:0px; top:0px; width:30%; height:auto; vertical-align:top; float:left; display:inline-block; text-align:left; font-family: 'Roboto', sans-serif; font-weight:700; color:#FFF; font-size:26px; line-height:1.2;
}

.rightColumn {
	position:relative; left:0px; top:0px; width:70%; height:auto; vertical-align:top; float:left; display:inline-block; text-align:left; font-family: 'Roboto', sans-serif; font-weight:400; color:#FFF; font-size:26px; line-height:1.2;
}

.rightColumn a {
	color:#FFF; text-decoration:none;
}

.columnSpacer {
	position:relative; left:0px; top:0px; width:100%; height:25px; vertical-align:top; float:left; display:inline-block;
}

.contactHolder {
	position:relative; left:0px; top:0px; width:80%; height:auto; vertical-align:top; display:inline-block; padding-top:2em; padding-bottom:2em;
}

#myVideo {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%; 
  height: auto;
  -webkit-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform:translateY(-50%);
  margin-top:70px;
  border-style: none !important;
}


@media only screen and (max-width:1450px) {
	.highlightClass {
		font-size:35px;
	}
	.theContent p {
		font-size:19px;
}
}

@media only screen and (max-width:1200px) {
	.infoClass {
		font-size:24px;
		
	}
	.theContent {
		width:85%; max-width:640px;
	}
	.highlightClass {
		font-size:30px;
	}
	.theContent p {
		font-size:16px;
}
}

@media only screen and (max-width:725px) {
	.infoClass {
		font-size:17px;
	}
	.leftColumn {
		width:100%;
	}
	.rightColumn {
		width:100%;
	}
	.theContentWork {
		width:100%;
	}
}

@media only screen and (max-width:510px) {
	.infoClass {
		font-size:16px;
	}
	.highlightClass {
		font-size:25px; width:95%;
	}
	.theContent p {
		width:100%;
}
	
}
@media only screen and (max-width:410px) {
	.infoClass {
		font-size:15px;
	}
}

@media only screen and (max-width:370px) {
.highlightClass {
		font-size:20px; width:95%;
	}
	.theContent p {
		font-size:11px;
}
}

@media only screen and (max-width:959px) {
.headerText {
	position:fixed; padding-left:12px; padding-right:12px; background-color:#FFF;  color:#0076a6; font-size:40px;
	line-height:1.8em;
}
.navDiv {
	/*position:fixed; left:-187px;*/
	display:none;
}
.atomDiv {
	position:absolute; left:0px; top:0px; width:100%; height:100%; display:inline-block; box-sizing: border-box; padding-top:165px;
}
#coinAnimation {
  top:50%;
}
.padNav {
	display:block;
}
.contentHolder {
	padding-left:0px;
}
.atomSpecial {
	margin-top:0px;
}
#myVideo {
  margin-top:0px;
}
}
.headerText {
	position:fixed; padding-left:12px; padding-right:12px; background-color:#FFF;  color:#0076a6; font-size:40px;
	line-height:1.8em;
}
.navDiv {
	/*position:fixed; left:-187px;*/
	display:none;
}
.atomDiv {
	position:absolute; left:0px; top:0px; width:100%; height:100%; display:inline-block; box-sizing: border-box; padding-top:165px;
}
#coinAnimation {
  top:50%;
}
.padNav {
	display:block;
}
.contentHolder {
	padding-left:0px;
}
.atomSpecial {
	margin-top:0px;
}
#myVideo {
  margin-top:0px;
}
.headerText {
	position:fixed; padding-left:12px; padding-right:12px; background-color:#FFF;  color:#0076a6; font-size:40px;
	line-height:1.8em;
}
.navDiv {
	/*position:fixed; left:-187px;*/
	display:none;
}
.atomDiv {
	position:absolute; left:0px; top:0px; width:100%; height:100%; display:inline-block; box-sizing: border-box; padding-top:165px;
}
#coinAnimation {
  top:50%;
}
.padNav {
	display:block;
}
.contentHolder {
	padding-left:0px;
}
.atomSpecial {
	margin-top:0px;
}
#myVideo {
  margin-top:0px;
}
@media only screen and (max-width:610px) {
	.padNav {
		display:none;
	}
	.hamburger {
		display:block !important;
	}
	.leftColumn {
		font-size:22px;
	}
	.rightColumn {
		font-size:22px;
	}
}

.fadeOverClass {
	position:fixed; left:0px; top:0px; width:100%; height:100vh; z-index:25000; text-align:center;
}

.fadeOverClassBlack {
	position:absolute; left:0px; top:0px; width:100%; height:100vh; background-color:#000;
}

.theBannerHolder {
	position:absolute; left:10px; top:10px; width:300px; height:250px;  border:0; background-color:#FFF; display:inline-block;
}

#theBanner {
	left:0px; top:0px; width:320px; height:270px;
}

.theBannerHolderClose {
	position:absolute; right:-12px; top:-12px; width:24px; height:24px; object-fit: contain; z-index:500; cursor:pointer;
}

.theMoreButton {
	position:absolute; left:50%; bottom:0px; width:200px; height:46px; background-color:#FFF; border-radius:25px; display:inline-block; margin-left:-100px; cursor:pointer; text-align:center; font-family: 'Roboto', sans-serif; font-size:18px; font-weight:700; line-height:46px; color:#666;
}