@charset "UTF-8";

@font-face {
	font-family: 'Hypatia';
	src: url('hypatiasanspro-regular-webfont.eot');
	src: url(//:) format('no404'), url('hypatiasanspro-regular-webfont.woff') format('woff'), url('hypatiasanspro-regular-webfont.ttf') format('truetype'), url('hypatiasanspro-regular-webfont.svg#webfontmLJtTZhG') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'HypatiaLight';
	src: url('hypatiasanspro-light-webfont.eot');
	src: url(//:) format('no404'), url('hypatiasanspro-light-webfont.woff') format('woff'), url('hypatiasanspro-light-webfont.ttf') format('truetype'), url('hypatiasanspro-light-webfont.svg#webfontmCNqD3Wm') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'HypatiaSansExtraLight';
    src: url('hypatiasanspro-extralight-webfont.eot');
    src: url('hypatiasanspro-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('hypatiasanspro-extralight-webfont.woff') format('woff'),
         url('hypatiasanspro-extralight-webfont.ttf') format('truetype'),
         url('hypatiasanspro-extralight-webfont.svg#HypatiaSansProExtraLightRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes arrowPulse {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}


html {
	scroll-behavior: smooth;
}

body {
	margin:0;
	padding:0;
	text-align: left;
	font-family: 'HypatiaLight';
	font-size: 14pt;
	background-color: #023;
	-webkit-transition: background 500ms;
	-moz-transition: background 500ms;
	-ms-transition: opacity 0.5s;
	-o-transition: opacity 500ms;
	transition: background 500ms;
	-webkit-animation-name: fade-in;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	color:#FFF;
	text-align: center;
}

.MainPage {  }

.MainPage #mainContent {
}

p { text-align:justify; font-size:14pt; }

a:link, a:visited {
	color: #BBB;
	text-decoration: none;
}
a:hover { text-decoration: none; }
a:active {
	color: #FC0;
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'HypatiaSansExtraLight';
	color:rgb(255,255,255,0.5);
	font-weight: normal;
	text-decoration: none;
	clear:both;
	padding:10px;
	margin:0;
	margin-bottom:50px;
	text-transform:uppercase;
	letter-spacing:3px;
	text-align: center;
}
h1 { font-size: 60pt; }
h2 { font-size: 24pt; }
h3 { font-size: 18pt; }
h4 { font-size: 16pt; }
h5 { font-size: 14pt; }
h6 { font-size: 12pt; }

.pagetitle {
	font-family: 'HypatiaSansExtraLight';
	font-size:120px;
	color:#FFF;
	position:fixed;
	right:0;
	top:30%;
	width:50%;
	z-index:1;
	text-align:center;
	text-transform:uppercase;
	-webkit-transition: opacity 1000ms;
	-moz-transition: opacity 1000ms;
	-ms-transition: opacity 1s;
	-o-transition: opacity 1000ms;
	transition: opacity 1000ms;
}

#pagetitle {
	z-index:1;
}

.mainmenu {
	width:100%;
	left:0;
	top:0;
	text-transform:uppercase;
	letter-spacing:0.75pt;
	position:fixed;
	z-index:9000;
	color:#BBB;
	background-image: -webkit-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); /* Chrome 10+, Saf5.1+ */
	background-image: -moz-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);    /* FF3.6+ */
	background-image: -ms-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);      /* IE10 */
	background-image: -o-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);       /* Opera 11.10+ */
	background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);          /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
	text-align:center;
}

.mainmenu a:link, .mainmenu a:visited {
	color:#CCC;
	text-align:center;
	top: 0px;
	text-decoration:none;
}

.mainmenu a:hover, .mainmenu a:active {
	color:#FFF;
}

.menuBtn {
	display:inline-block;
}

#socialMenu {
	width:100%;
	text-align: center;
	margin-bottom:80px; 
	display:block;
	clear:both;
}

#siteBG {
	top:0;
	margin:0;
	padding:0;
	overflow-x:hidden;
	overflow-y:hidden;
	width:100%;
	height:100%;
	position: fixed;
	background-image: url(../images/bg01-2023-09.jpg);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(80%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.7))), url(../images/bg01-2023-09.jpg); /* Saf4+, Chrome */ 
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%), url(../images/bg01-2023-09.jpg); /* Chrome 10+, Saf5.1+ */
	background-image: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%), url(../images/bg01-2023-09.jpg);    /* FF3.6+ */
	background-image: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%), url(../images/bg01-2023-09.jpg);      /* IE10 */
	background-image: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%), url(../images/bg01-2023-09.jpg);       /* Opera 11.10+ */
	background-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%), url(../images/bg01-2023-09.jpg);          /* W3C */
	background-attachment: inherit;
	background-repeat: no-repeat;
	background-position: left top;
	background-size:100% auto;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	z-index:-1;
	-webkit-transition: all 1000ms;
	-moz-transition: all 1000ms;
	-ms-transition: all 1s;
	-o-transition: all 1000ms;
	transition: all 1000ms;
	touch-action: none;
	-ms-touch-action: none;
	opacity:0.3;
	filter: blur(6px);

}

#siteBG.show {
	opacity:1;
	filter: blur(0px);
}

#siteBG.hide {
	opacity:0.2;
	filter: blur(7px);
}


.entry {
	padding: 10px;
	border-bottom: 1pt solid #222;
	clear:both;
	opacity:0;
}

.entry.left {
    transform: translateX(-200px);
}

.entry.right {
    transform: translateX(200px);
	-webkit-transition-delay:0.2s;
	-moz-transition-delay:0.2s;
	-ms-transition-delay:0.2s;
	-o-transition-delay:0.2s;
	transition-delay:0.2s;
}

.entry.hide {
	opacity:0;
}

.entry.show {
	opacity:1;
    transform: translateX(0);
}

.pageContent, .aboutPage, .multimediaPage {
	margin-left:auto;
	margin-right:auto;
	padding-top:100px;
	margin-bottom:100px;
	overflow-x:auto;
	overflow-y:auto;
	-webkit-overflow-scrolling: touch;
}

#homePage {
	-webkit-transition: all 1000ms;
	-moz-transition: all 1000ms;
	-ms-transition: all 1s;
	-o-transition: all 1000ms;
	transition: all 1000ms;
	margin-bottom:100px;
	animation: arrowPulse 3s 3;
}

#homePage.show {
	opacity:1;
	filter: blur(0);
}

#homePage.hide {
	opacity:0;
	filter: blur(10px);
}

.aboutPage { }

#bioPage { 
	text-align:justify;
}

@media screen and (orientation:portrait) {

	#siteBG {
		background-position: 15% top;
	}
	
	.mainmenu {
		font-size:40pt;
		line-height:44pt;
		height:120px;
	}

	.menuBtn {
		margin-left:20px;
		margin-right:20px;
	}

	.entry {
		-webkit-transition: all 500ms;
		-moz-transition: all 500ms;
		-ms-transition: all 0.5s;
		-o-transition: all 500ms;
		transition: all 500ms;
	}

	.pageContent, .aboutPage, .multimediaPage {
	}

	.aboutPage {
	}
	
	#bioPage { 
		font-size:36pt;
		line-height:50pt;
		width:800px;
		margin-bottom:600px;
	}

	#homePage { 
		padding-top:105%;
	}

	#contactPage {
		font-size:48pt;
		margin-bottom:600px;
	}
}

@media screen and (orientation:landscape) {

	#siteBG {
		background-position: left top;
	}
	
	.mainmenu {
		font-size:24pt;
		line-height:28pt;
		height:60px;
	}

	.menuBtn {
		margin-left:10px;
		margin-right:10px;
	}

	.entry {
		-webkit-transition: all 800ms;
		-moz-transition: all 800ms;
		-ms-transition: all 0.8s;
		-o-transition: all 800ms;
		transition: all 800ms;
	}
	.pageContent, .aboutPage, .multimediaPage {
	}

	.aboutPage {
	}
	
	#bioPage { 
		font-size:16pt;
		line-height:28pt;
		width:600px;
		margin-bottom:100px;
	}
	
	#homePage { 
		padding-top:47%;
	}
		
	#contactPage {
		font-size:24pt;
		margin-bottom:100px;
	}
		
}

#videoPage { 
    width:100%;
	max-width:950px;
    height:auto;
	margin-left:auto;
	margin-right:auto;
	z-index:2;
}

#videoPage .entry {
	position: relative;
	width:450px;
	height:255px;
	overflow: hidden;
	display: inline-block;
	margin:10px;
	border: 1px solid #FFFFFF;
	padding: 0;
}

.videothumb {
	display: block;
	width: 100%;
	height: auto;
}

.cliplisting {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 1;
	transition: 0.5s;
	background-color:rgba(0,0,0,0.5);
}

#videoPage .entry:hover .cliplisting {
	opacity: 0;
}

.vidPlayBtn {
	color:rgba(255,255,255,0.5);
	font-size: 60pt;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}

#contactPage {
	margin-bottom:30%; 
}