/*-----------------------------------PORTRAIT-------------------------------------*/
/*-----------------------------------PORTRAIT-------------------------------------*/
/*-----------------------------------PORTRAIT-------------------------------------*/



/*------------------------------------general-----------------------------------------*/
body{
	margin:0;
	padding:0;
	background-color:rgba(0,0,0,1);
	
}

div{
	margin:0;
	padding:0;
}

#BGWrapper{
	position:absolute;
	width:100vw;
	height:auto;
	margin:0;
	z-index:-1;
	overflow:hidden;
	
}

@media (orientation:portrait){

.BGImage{
	position:relative;
	height:100vh;
	width:auto;
	margin:auto;
	display:none;
}

#BG01{
	margin-left:-850px;
}

#BG03{
	margin-left:-600px;
}

#BG04{
	margin-left:-300px;
}

#BG04{
	margin-left:-300px;
}

#BG05{
	margin-left:-700px;
}

#BG06{
	margin-left:-1400px;
}

}



/*----------------------------------------loadingScreen----------------------------------*/

#loadingScreen{
	position:fixed;
	width:100vw;
	height:100vh;
	background-color:rgba(0,0,0,1.0);
	z-index:101;
}

#loadingGIF{
	position:absolute;
	width:500px;
	height:500px;
	background-color:rgba(255,255,255,0.0);
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin-top:auto;
	margin-bottom:auto;
	margin-left:auto;
	margin-right:auto;

}

#loadingNeptune{
	position:fixed;
	height:107vh;
	width:auto;
	left:-26px;
	top:-26px;
	opacity:0.1;	
}

.loadingPiece{
	position:absolute;
}

#loadingCircle{
	-webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
    -webkit-transform-origin:100px 105px;
    -moz-transform-origin:100px 105px;
    transform-origin:100px 105px;
  	z-index:100;
}

#loadingFish{
	left:-1px;
	top:2px;
}

#loadingX{
	top:3px;
	-webkit-animation: rotateX 3s  infinite;
    -moz-animation: rotateX 3s  infinite;
    -o-animation: rotateX 3s  infinite;
    animation: rotateX 3s  infinite;
    -webkit-transform-origin:101.5px 104.5px;
    -moz-transform-origin:101.5px 104.5px;
    transform-origin:101.5px 104.5px;
}

#loadingTextBox{
	position:absolute;
	top:58%;
	left:60%;
}

#theL{
	-webkit-animation: fadeLet 2.25s  infinite;
    -moz-animation: fadeLet 2.25s  infinite;
    -o-animation: fadeLet 2.25s  infinite;
    animation: fadeLet 2.25s  infinite;
}

#theO{
	-webkit-animation: fadeLet 2.25s  infinite;
    -moz-animation: fadeLet 2.25s  infinite;
    -o-animation: fadeLet 2.25s  infinite;
    animation: fadeLet 2.25s  infinite;
    -webkit-animation-delay:0.25s;
	-moz-animation-delay:0.25s;
	animation-delay:0.25s;
}

#theA{
	-webkit-animation: fadeLet 2.25s  infinite;
    -moz-animation: fadeLet 2.25s  infinite;
    -o-animation: fadeLet 2.25s  infinite;
    animation: fadeLet 2.25s  infinite;
    -webkit-animation-delay:0.5s;
	-moz-animation-delay:0.5s;
	animation-delay:0.5s;
}

#theD{
	-webkit-animation: fadeLet 2.25s  infinite;
    -moz-animation: fadeLet 2.25s  infinite;
    -o-animation: fadeLet 2.25s  infinite;
    animation: fadeLet 2.25s  infinite;
    -webkit-animation-delay:0.75s;
	-moz-animation-delay:0.75s;
	animation-delay:0.75s;
}

#theI{
	-webkit-animation: fadeLet 2.25s  infinite;
    -moz-animation: fadeLet 2.25s  infinite;
    -o-animation: fadeLet 2.25s  infinite;
    animation: fadeLet 2.25s  infinite;
    -webkit-animation-delay:1s;
	-moz-animation-delay:1s;
	animation-delay:1s;
}

#theN{
	-webkit-animation: fadeLet 2.25s  infinite;
    -moz-animation: fadeLet 2.25s  infinite;
    -o-animation: fadeLet 2.25s  infinite;
    animation: fadeLet 2.25s  infinite;
    -webkit-animation-delay:1.25s;
	-moz-animation-delay:1.25s;
	animation-delay:1.25s;
}

#theG{
	-webkit-animation: fadeLet 2.25s  infinite;
    -moz-animation: fadeLet 2.25s  infinite;
    -o-animation: fadeLet 2.25s  infinite;
    animation: fadeLet 2.25s  infinite;
    -webkit-animation-delay:1.5s;
	-moz-animation-delay:1.5s;
	animation-delay1.5s;
}

#theEl1{
	-webkit-animation: fadeLet 2.25s  infinite;
    -moz-animation: fadeLet 2.25s  infinite;
    -o-animation: fadeLet 2.25s  infinite;
    animation: fadeLet 2.25s  infinite;
    -webkit-animation-delay:1.75s;
	-moz-animation-delay:1.75s;
	animation-delay1.75s;
}

#theEl2{
	-webkit-animation: fadeLet 2.25s  infinite;
    -moz-animation: fadeLet 2.25s  infinite;
    -o-animation: fadeLet 2.25s  infinite;
    animation: fadeLet 2.25s  infinite;
    -webkit-animation-delay:2s;
	-moz-animation-delay:2s;
	animation-delay2s;
}

#theEl3{
	-webkit-animation: fadeLet 2.25s  infinite;
    -moz-animation: fadeLet 2.25s  infinite;
    -o-animation: fadeLet 2.25s  infinite;
    animation: fadeLet 2.25s  infinite;
    -webkit-animation-delay:2.25s;
	-moz-animation-delay:2.25s;
	animation-delay2.25s;
}

/*-------------------------loadingKeyframes----------------------------*/


/*-------------rotateAnimation--------------*/


@-webkit-keyframes rotate {
	
	from{-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);  
   		 transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);  
   		 transform: rotate(360deg);}
	}
	
@-moz-keyframes rotate {
	
	from{-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);  
   		 transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);  
   		 transform: rotate(360deg);}
	}
	
@keyframes rotate {
	
	from{-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);  
   		 transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);  
   		 transform: rotate(360deg);}
	}
	
	
/*-------------rotateXAnimation--------------*/

	
@-webkit-keyframes rotateX {
	
	from{-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);  
   		 transform: rotate(0deg);}
	to {-webkit-transform: rotate(-540deg);
		-moz-transform: rotate(-540deg);  
   		 transform: rotate(-540deg);}
	}

	
@-moz-keyframes rotateX {
	
	from{-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);  
   		 transform: rotate(0deg);}
	to {-webkit-transform: rotate(-540deg);
		-moz-transform: rotate(-540deg);  
   		 transform: rotate(-540deg);}
	}
	
@keyframes rotateX {
	
	from{-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);  
   		 transform: rotate(0deg);}
	to {-webkit-transform: rotate(-540deg);
		-moz-transform: rotate(-540deg);  
   		 transform: rotate(-540deg);}
	}
	
/*-------------fadeLetteresAnimation--------------*/

@-webkit-keyframes fadeLet {
	
	0%{opacity:0.33;}
	50%{opacity:1.0;}
	100%{opacity:0.33;}
	}

	
@-moz-keyframes fadeLet {
	
	0%{opacity:0.33;}
	50%{opacity:1.0;}
	100%{opacity:0.33;}
	}

	
@keyframes fadeLet {
	
	0%{opacity:0.33;}
	50%{opacity:1.0;}
	100%{opacity:0.33;}
	}



/*----------------------------------------fonts----------------------------------------*/

@font-face{
	font-family:"bodoni";
	font-style:normal;
	font-weight:normal;
	src: url(http://www.m.nickneptune.com/fonts/BodoniSvtyTwoITCTT-Book.otf) format('opentype');
}


@font-face{
	font-family:"LetterGothicStd";
	font-style:normal;
	font-weight:normal;
	src: url(http://www.m.nickneptune.com/fonts/LetterGothicStd.otf) format('opentype');
}

.bodoniText{
	font-family:"bodoni";
	color:white;
}

.boxHeader{
	font-size:3em;
	padding:12px 0 0 34px;
	letter-spacing:0.3em;
}

.boxCopy{
	font-size:2em;
	padding:0 34px;
	letter-spacing:0.2em;
	text-align:justify;
}

.loadingText{
	font-family:"bodoni";
	color:white;
	padding:2px;
	font-size:3em;
	letter-spacing:3px;
}
/*-------------------------------------entryPage----------------------------------------*/



#logoWrapper{
	position:absolute;
	height:300px;
	width:500px;
	background-color:rgba(255,255,255,0);
	right:50px;
	bottom:200px;
	display:none;
}


#circleWrapper{
	position:absolute;
	margin:0;
	height:160px;
	width:160px;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;

}

#fishTrident{
	position:absolute;
}


.logoText{
	position:absolute;
	color:white;
	display:none;
}

#logoText01{
	font-family:"bodoni";
	font-size:3em;
	letter-spacing:14.5px;
	top:130px;
}

#logoText02{
	font-family:"LetterGothicStd";
	font-size:1.4em;
	top:220px;
	left:84px;
}

.line{
	position:absolute;
	width:60px;
}

#line01{
	top:248px;
	left:0;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);  
    transform: rotate(180deg);
}

#line02{
	top:243px;
	right:20px;
}


#practiceLine{
	position:fixed;
	width:5px;
	top:0;
	left:10px;
}


#wholeX01{
	position:absolute;
	width:40px;
	height:40px;
	right:102px;
	bottom:100px;
}

.halfX{
	position:absolute;
}

/*---------scrollIndicator----------------------------------------*/


#scrollIndicator{
	position:absolute;
	width:60px;
	height:60px;
	left:50px;
	bottom:200px;
	background-color:rgba(255,255,255,0.0);
	-webkit-transition:0.2s;
	-moz-transition:0.2s;  
    transition:0.2s;
	display:none;
}

/*#scrollIndicator:hover{
	cursor:pointer;
	opacity:0.8;
	-webkit-transform: scale(1.1, 1.1);
	-moz-transform: scale(1.1, 1.1); 
    transform: scale(1.1, 1.1);
}*/



#scrollText{
	position:absolute;
	font-family:"LetterGothicStd";
	font-size:10px;
	color:#ffffff;
	left:11px;
	top:3px;
	display:none;

}

#downArrow{
	position:absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);  
    transform: rotate(-90deg);
    -webkit-animation: arrowBounce 1s  infinite;
    -moz-animation: arrowBounce 1s infinite;
    -o-animation: arrowBounce 1s infinite;
    animation: arrowBounce 1s infinite;
    display:none;
}

#scrollClick01{
-webkit-transition:0.5s;
	-moz-transition:0.5s;  
    transition:0.5s;
}

/*-------------scrollIndAnimation--------------*/

@-webkit-keyframes arrowBounce {
	
	0%{top:7px;}
	50%{top:0px;}
	100%{top:7px;}
	}

	
@-moz-keyframes arrowBounce {
	
	0%{top:7px;}
	50%{top:px;}
	100%{top:7px;}
	}

	
@keyframes arrowBounce {
	
	0%{top:7px;}
	50%{top:0px;}
	100%{top:7px;}
	}


/*---------------------------CONTAINERCLASSES-------------------------------------------*/

.contentBox{
	position:absolute;
	width:80%;
	height:36%;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	background-color:rgba(0,0,0,0.75);
	border:2px solid white;
}

.pageContainer{
	position:relative;
	width:100vw;
	height:100vh;
	margin:50px auto;
	background-color:rgba(255,0,0,0.0);
}

/*-----------------------------------entryPage-------------------------------------------*/

#entryPage{
	position:relative;
	width:100vw;
	height:100vh;
	background-color:rgba(255,255,255,0.0);
}



/*-----------------------------------quotesSection-------------------------------------------*/


#quotesBox{
	height:40vh;
}





.arrow{
	position:absolute;
	height:100px;
	width:auto;
	top:-33%;
	bottom:0;
	margin:auto;
	background-color:rgba(255,255,255,0.0);	
	z-index:2;
}

.arrowImg{
	height:100px;
	width:auto;
}

#leftArrow{
	left:20px;
    -webkit-transition:0.2s;
	-moz-transition:0.2s;  
    transition:0.2s;
}


#rightArrow{
	right:20px;
	-webkit-transition:0.2s;
	-moz-transition:0.2s;  
    transition:0.2s;
}



.quoteCopy{
	position:absolute;
	margin:70px 70px 0 70px;
	-webkit-transition:0.8s;
	-moz-transition:0.8s;  
    transition:0.8s;
}

.quoterText{
	position:absolute;
	margin:0 70px;
	bottom:50px;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;  
    transition:0.5s;
}

.activeQuote{
	opacity:1.0;
	-webkit-transform:scale(1.0, 1.0);
	-moz-transform:scale(1.0, 1.0);  
    transform:scale(1.0, 1.0);
}
	
.nonActiveQuote{
	opacity:0.0;
	-webkit-transform:scale(0.98, 0.98);
	-moz-transform:scale(0.98, 0.98);  
    transform:scale(0.98, 0.98);
}

.activeQuoterText{
	opacity:1.0;
}
	
.nonActiveQuoterText{
	opacity:0.0;
	-webkit-transform:translate(20px);
	-moz-transform:translate(20px);  
    transform:translate(20px);
}


/*-----------------------------------contactSection-------------------------------------*/


#easterEgg{
	position:relative;
	opacity:0.75;
	z-index:100;
	text-decoration:none;
	color:#ffffff;
	background-color:rgba(0,0,0,1.0);
	-webkit-transition:0.2s;
	-moz-transition:0.2s;  
    transition:0.2s;
}

#easterEgg:hover{
	opacity:1.0;
	cursor:pointer;
}

#easterEgg:hover~#secretContact{
	opacity:1.0;
}



#secretContact{
	position:absolute;
	font-family:"LetterGothicStd";
	font-size:10px;
	color:#ffffff;
	left:28%;
	bottom:11px;
	opacity:0.0;
	z-index:100;
	-webkit-transition:0.2s;
	-moz-transition:0.2s;  
    transition:0.2s;
}


/*-----------------------------------credsSection-------------------------------------*/

#credsSectionContent{
	position:relative;
	width:437px;
	height:120px;
	top:-250px;
	left:0;
	right:0;
	margin:auto;
	background-color:rgba(255,255,255,0.0);
	overflow:hidden;
	z-index: 1000;
}

#photoCredContainer{
	position:absolute;
	width:437px;
	height:50px;
	margin:0;
	right:0;
	top:0;
	background-color:rgba(255,255,255,0.0);
}

#photoCredHorzLine{
	position:absolute;
	height:2px;
	width:437px;
	top:0;
	right:0;
}

#photoCredHorzLineFill{
	position:absolute;
	height:2px;
	width:100%;
	right:0;
	background-color:#fff;
}


#siteCredHorzLine{
	position:absolute;
	height:2px;
	width:300px;
	right:0;
	bottom:49px;
}

#siteCredHorzLineFill{
	position:absolute;
	height:2px;
	width:100%;
	right:0;
	background-color:#fff;
}

#siteCredContainer{
	position:absolute;
	width:300px;
	height:50px;
	right:0;
	bottom:0;
	margin:0;
	background-color:rgba(255,255,255,0.0);
}

.credTextWrapper{
	position:absolute;
	top:5px;
	right:0px;
	width:500px;
	background-color:rgba(255,255,255,0.0);
}

.credText{
	position:absolute;
	font-size:2em;
	text-align:right;
	letter-spacing:3px;
	margin-right:5px;
}

.blackCredText{
	position:absolute;
	right:0;
	margin-left:3px;
	color:#000000;
	z-index:3;
}

#photoWhiteBG{
	position:absolute;
	width:246px;
	height:50px;
	right:0;
	top:0;
	background-color:rgba(255,255,255,0.98);
	z-index:2;
}



#siteCredText{
	position:absolute;
	right:185px;
}

#photoCredText{
	position:absolute;
	right:252px;

}


#siteWhiteBG{
	position:absolute;
	width:180px;
	height:50px;
	right:0;
	top:0;
	background-color:rgba(255,255,255,0.98);
	z-index:2;
}



#footerBuffer{
	position:relative;
	width:100%;
	height:50px;
}

/*-----------------------------------LANDSCAPE-------------------------------------*/
/*-----------------------------------LANDSCAPE-------------------------------------*/
/*-----------------------------------LANDSCAPE-------------------------------------*/



@media (orientation:landscape){

.BGImage{
	position:relative;
	height:auto;
	width:100vw;
	margin:auto;
	display:none;
}

.loadingText{
	font-family:"bodoni";
	color:white;
	padding:2px;
	font-size:2em;
	letter-spacing:3px;
}


/*------------------------INTROLOGO--------------------------*/

#logoWrapper{
	position:absolute;
	height:160px;
	width:320px;
	background-color:rgba(255,255,255,0.0);
	left:50px;
	bottom:100px;
	display:none;
}


#circleWrapper{
	position:absolute;
	margin:0;
	height:90px;
	width:90px;
	left:0;
	right:10px;
	margin-left:auto;
	margin-right:auto;

}

#fishTrident{
	position:absolute;
}


.logoText{
	position:absolute;
	color:white;
	display:none;
}

#logoText01{
	font-family:"bodoni";
	font-size:1.5em;
	letter-spacing:12.5px;
	top:90px;
}

#logoText02{
	font-family:"LetterGothicStd";
	font-size:0.7em;
	top:137px;
	left:74px;
}

.line{
	position:absolute;
	width:60px;
}

#line01{
	top:148px;
	left:0;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);  
    transform: rotate(180deg);
}

#line02{
	top:143px;
	right:20px;
}

#scrollIndicator{
	position:absolute;
	width:60px;
	height:60px;
	left:80%;
	bottom:100px;
	background-color:rgba(255,255,255,0.0);
	-webkit-transition:0.2s;
	-moz-transition:0.2s;  
    transition:0.2s;
	display:none;
}

/*---------------------------CONTAINERCLASSES-------------------------------------------*/

.contentBox{
	position:absolute;
	width:60%;
	height:60%;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	background-color:rgba(0,0,0,0.66);
	border:2px solid white;
}

.pageContainer{
	position:relative;
	width:100vw;
	height:100vh;
	margin:50px auto;
	background-color:rgba(255,0,0,0.0);
}

.boxHeader{
	font-size:2em;
	padding:12px 0 0 34px;
	letter-spacing:0.3em;
}

.boxCopy{
	font-size:1.33em;
	padding:0 34px;
	letter-spacing:0.2em;
	text-align:justify;
}

#quotesBox{
	height:80vh;
}

#credsSectionContent{
	position:relative;
	width:437px;
	height:120px;
	top:200px;
	left:0;
	right:0;
	margin:auto;
	background-color:rgba(255,255,255,0.0);
	overflow:hidden;
	z-index: 1000;
}



}