@charset "utf-8";
/* FONTS and TYPOGRAPHY */

.whiteShadow
{
	-webkit-text-shadow: 3px 3px 1px  rgba( 255,255,255, .8 );
	-moz-text-shadow: 3px 3px 1px  rgba(255,255,255, .8);
	text-shadow: 3px 3px 1px  rgba(255,255,255, .8);
}
.darkShadow
{
	-webkit-text-shadow: 2px 2px 1px  rgba( 16,123,78, .3 );
	-moz-text-shadow: 2px 2px 1px  rgba(16,123,78, .3);
	text-shadow: 2px 2px 1px  rgba(16,123,78, .3);
}

@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('fonts/Bevan-webfont.eot');
    src: url('fonts/Bevan-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Bevan-webfont.woff') format('woff'),
         url('fonts/Bevan-webfont.ttf') format('truetype'),
         url('fonts/Bevan-webfont.svg#ChunkFiveRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LondrinaSolidRegular';
    src: url('fonts/LondrinaSolid-Regular-webfont.eot');
    src: url('fonts/LondrinaSolid-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/LondrinaSolid-Regular-webfont.woff') format('woff'),
         url('fonts/LondrinaSolid-Regular-webfont.ttf') format('truetype'),
         url('fonts/LondrinaSolid-Regular-webfont.svg#LondrinaSolidRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

a, p, h1, h2, h3, h4, h5, h6 { font:'ChunkFiveRegular' sans-serif; color:#000 }
a div h1:link, a div h1:visited{color:#000}

h1.titleHeader { font-family:'ChunkFiveRegular'; font-size:375% ; background:url(../core-images/HeaderDots.png); padding:15px 20px; line-height:140%;}
h1.subHeader { font-family:'ChunkFiveRegular'; font-size:200% ; background:url(../core-images/HeaderDots.png); padding:15px 20px; line-height:140%; margin-top:20px;}

/* CORE ELEMENTS */

body {margin:0; background:url(../core-images/TexturedBackground.png) fixed center; font-size:1em; line-height:18px;}
.topCurtain { max-width:100%; width:100%; max-height:116; height:100%; position:fixed; background:url(../core-images/TopDots.png) fixed top center repeat-x; background-size:contain; z-index:10000; pointer-events:none; top:0px;}
.wrapper {margin:0px auto;  max-width:1920px; height:100%; width:100%; position:relative;}
.contentWrapper {max-width:60%; width:100%; position:absolute; right:0; }
.headerPanel{ max-width:40%; max-height:100%; width:100%; height:100%; position:fixed; left:0;}

.project-single-wrapper { max-width:1152px; width:100%; max-height:768px; height:100%; position:fixed; overflow:hidden;  z-index:40; left:auto; right:auto;}
.enable-anims {
	transition: all .75s  cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-webkit-transition:all .75s  cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-moz-transition:all .75s  cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.opacity-anims {
	transition:opacity .5s;
	-webkit-transition:opacity .5s;
	-moz-transition:opacity .5s;
}

.shade {width:100%; height:100%; position:fixed; top:0; left:0; background-color:rgba(0,0,0,.85); z-index:60}

.project-slot {position:relative; max-width:720px; width:100%; max-height:430px; height:100%;margin:0px 0px 50px;}
.project-slot:hover {cursor:pointer}
.project-slot-title-wrapper { position:absolute; width:100%;  z-index:50;  top:12%;}
.project-slot-title { font: 300% 'LondrinaSolidRegular', sans-serif ; text-align:center; text-transform:uppercase; position:relative; margin:0px auto; }
.project-slot-banner{ width:100%; position:absolute; z-index:30; top:0px; opacity:.8}
.project-slot-grit {width:100%; position:absolute; top:30.2%; z-index:20}
.project-slot-art {width:100%; position:absolute; top:30.2%; z-index:10}


/* HEADER */
.titlePadding { margin:25% 5% 0px }

/* NAVIGATION */
.navbar { position:fixed; bottom:0px; z-index:20000; width:100%; max-width:1920px; height:100%; max-height:60px; background-color:rgba(255,255,255,.8);}
.nav-mask { overflow:hidden; margin:0px; display:block;}
.nav-selected { background-color: rgba(255,0,0,1);  pointer-events:none;}
.nav-hover { position:absolute; top:-60px; left:10px; padding:10px; background-color:rgba(255, 203, 5, 1); font: 150% 'ChunkFiveRegular', sans-serif ;  pointer-events:none; text-wrap:none;}
.nav-hover-test { position:absolute; bottom:-120px; left:10px; padding:10px; height:20px; background-color:rgba(255, 203, 5, 1); font: 150% 'ChunkFiveRegular', sans-serif ;  pointer-events:none; text-wrap:none;}
.nav-hover-test img { position:absolute; bottom:-30px; left:0px; height:30px;} 
.links-nav{ list-style:none; margin:0px; height:100%; max-height:60px; position:relative; left:25px; display:block;}
.links-nav li {display:inline-block; height:60px; margin:0px 10px 0px 0px; position:relative;}
.links-nav li:hover {background-color:rgba(255, 203, 5, 1);}
.links-nav li.nav-selected:hover {background-color:rgba(255, 0, 0, 1);}
.links-nav li.nav-spacer:hover { background-color:rgba(0,0,0,0);}
.links-nav img { height:100%;}
.show-portfolio {margin-top:-60px;}

/* CONTENT PROJECT SECTION */
.portrait-ends img{ width:100%;}
.portrait-torso{ background:url('../core-images/self-portrait-torso.png') repeat-y; background-size:100%;  width:100%; margin-top:-10px;}
.project-panel 
{
	max-width:60%; width:100%;
	position:absolute;
	top:200px;
	left:50%;
}


.project-single-hidden { top: -800px;}

/* PORTFOLIO VIEWER */

.portfolio-screen { width:100%; height:100%; max-height:1080px; background-color:rgba(0,0,0,0); position:fixed;  z-index:100;  overflow:hidden; }
.portfolio-viewer { width:100%; max-height:648px; height:100%; position:absolute; margin:0px auto 0px;  left: 50%;}
.portfolio-slide-wrapper { width:100%; position:relative; left:0px; top:0px; list-style:none; margin:0px; padding:0px}
.portfolio-slide-wrapper li { float:left ; background-color:rgba(0,0,0,.95); padding:0px; margin-left:0px }
.portfiolio-slide {  max-height:648px; max-width:1152px; height:100%;  position:relative; float:left; margin:0px 5px 0px 0px; }
.portfiolio-slide img {opacity:.25; -moz-opacity:.25; -webkit-opacity:.25; width:100%; height:100%;}
.portfolio-slide-selected img {opacity:1; -moz-opacity:1; -webkit-opacity:1;}
.portfolio-nav-panel { position:fixed;  width:340px; height:100%; max-height:90px; background-color:rgba(153,153,153,.5) ; bottom:0px; left:50%; margin-left:-170px;}
.portfolio-nav-panel div { display:table; margin:0px auto; height:100%;text-align:center; }
.portfolio-nav-panel div ul {margin:0px; padding:0px; list-style:none; height:100%; max-height:60px;  }
.portfolio-nav-panel div ul li { margin:15px 10px 0px 0px; float:left; padding:0px; height:90px; width:60px; overflow:hidden; position:relative; display:table-cell; vertical-align:middle; }
.portfolio-nav-panel div ul li img { width:60px; height:60px;}
.portfolio-nav-panel div ul li img:hover { background-image:url('../core-images/btn-nav-hover.png'); background-size:60px 60px; cursor: hand; cursor: pointer; }
.portfolio-nav-panel div ul li img:active { background-image:url('../core-images/btn-nav-click.png'); background-size:60px 60px;cursor: hand; cursor: pointer; }
.portfolio-nav-panel div ul li:last-child {margin:15px 0px 0px 0px;}

/* CONTACT PANEL */
.contact-panel {position:fixed; left:50%; top:50%; margin:-160px 0 0 -160px; height:320px; width:320px; z-index:20000; background-color:rgba(255,255,255,.8)}
.contact-panel div {position:relative; display:block; margin:20px;}
.contact-input { color:#000; background-color:rgba(250, 250,250, .7); padding:7px 15px; font-family:Arial, Helvetica, sans-serif; font-size:80%; width:250px; border:none; margin:0 0 20px; outline:none;}
.contact-input:focus {border:0px none; background-color:rgba(255, 203, 5, 1); color:#000; outline:none;}
.contact-text {color:#000; background-color:rgba(250, 250,250, .7); border:none; outline:none; resize:none; width:250px; padding:7px 15px; font-family:Arial, Helvetica, sans-serif; font-size:80%; }
.contact-text:focus {background-color:rgba(255, 203, 5, 1); color:#000; outline:none;}
.contact-buttons { position:absolute; right:0px; bottom:0px; display:inline-block; height:40px; margin:0px; list-style:none}
.contact-buttons li { display:inline-block; text-align:center; background-color:rgba(255, 203, 5, .5); height:40px;}
.contact-buttons li:hover { cursor:pointer; background-color:rgba(255, 203, 5, 1); }
.contact-buttons li:active { background-color:rgba(255, 0, 0, 1);}
.contact-buttons li img {height:100%; border:0 none;}
.contact-results{ display:table; width:100%; height:100%; vertical-align:middle; font-size:100%;}
.contact-results p{ display:table-cell; vertical-align:middle; text-align:center}

/* Preloader */
#preloader {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff; /* change if the mask should have another color then white */
	z-index:99; /* makes sure it stays on top */
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(../img/status.gif); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}

/* DEBUG PANEL */
.debugPanel { width:300px; height:300px; background-color:rgba(255,255,255, .6); position:fixed; top:30px; right:30px; z-index:10000}
.debugText { font:200% Verdana, Geneva, sans-serif ; line-height:24pt;}

/* MEDIA QUERIES */
.disabled {  pointer-events:none;}
.visible { z-index:200 }
.hiddenEl { opacity:0; -moz-opacity:0; -webkit-opacity:0;}