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

/*import---------------------------------------------------------------------------------------------------------------------------------------------------*/
@font-face { font-family: secondFont; src: url(cordia.ttf); }
@font-face { font-family: headFont; src: url(KeepCalm-Medium.ttf); }
/*default--------------------------------------------------------------------------------------------------------------------------------------------------*/
* { margin: 0px; padding: 0px; font-family: secondFont, Verdana, Helvetica, Arial, "sans-serif"; color: #d7d7dd; font-weight: normal; background: none; }
p { display:block; float:none; font-size: 2.0em; text-align:center; line-height: 1.2em;	}
body { background-color: #050509; background-attachment:fixed; position: relative; }
/*site-----------------------------------------------------------------------------------------------------------------------------------------------------*/
#jswarning { }
#preloader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 2; background-color: #000000; cursor: pointer; }
#preloaderInfo { position:absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 300px; height: 300px; }
#preloaderLogo { position:absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 50%; }
#preloaderText { width: 100%; text-align: center; font-size: 40px; color: #ffffff; font-family: headFont;padding-top: 45%; padding-bottom: 45%, }
#preloaderTextFiles { width: 100%; text-align: center; font-size: 40px; color: #ffffff; position:absolute; left: 0; right: 0; margin: auto; }
#preloaderAnimation { position:absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 100%; }
#main { position: relative; width: 100%; min-width: 640px; max-width: 1280px; background-color: #ffffff; padding: 24px 24px; margin: auto; }
.delayLoad { background-color: #050505; margin: 0; padding: 0; }
/*head-----------------------------------------------------------------------------------------------------------------------------------------------------*/
#header { width: 100%; margin: 0px; padding: 0px; position: relative; top: 0px; background-color:#000000; }
#canvas { width: 100%; background-color: #000000; }
#sitelogo { position: absolute; padding: 20px; height: 130px; z-index: 1; }
.mainh1 { position: absolute; left: 150px; top: 17px; font-size: 40px; font-family: headFont; text-indent: .5em; z-index: 1; color: #ffffff; }
.mainh2 { font-size: 2.0em; text-align:center; background-color: #111111; color: #ff9900; margin-bottom: 0; margin-top: 0; top: 0px; }
.markhead { color: #ff9900; font-weight: 900; font-size: 1.3em; }
.marksmall { font-size: .6em; color: #ff9900; }
/*head-nav-------------------------------------------------------------------------------------------------------------------------------------------------*/
#nav { background-color: #000000; position:relative; top: 0px; box-shadow: 0px 15px 20px -10px #444444; }
#navlist { margin:auto; width: 80%; height:70px;list-style-type: none; }
.navli { text-decoration:none; width: 19.88%; float: left; text-align: center; font-size: 1.0em; border-left: thin solid #222222; height: 100%; margin: auto; cursor: pointer; }
.navli:last-child { border-right: thin solid #222222; right: 10%; top: 0px; position: absolute; width: 16%; /* 20 - ((100 - 80)/5) */}
.navli:hover{ background-color: #ffffff; }
.navli:hover > .navmarker{ display:block; }
.navli:hover > .navtext{ color: #000000; }
.navtext { position: relative; padding: 25px 0px; color: #ffffff; font-size: 20px; font-family: headFont; }
.navmarker { height: 10px; width: 100%; background-color: #ff9900; position: relative; display: none; top: -4px; }
#upbutton { width: 70px; height: 70px; position: absolute; top: 0px; right: 0px; border-left: thin solid #222222; cursor: pointer; }
#upbutton:hover { background-color: #ffffff; }
/*sub------------------------------------------------------------------------------------------------------------------------------------------------------*/
.subCut { width: 100%; height: 8px; background-color: #ff9900; }
.sub { padding-bottom: 6em; text-align: center;}
.subTop { width: 100%; height: 40px; }
/*sub-head-------------------------------------------------------------------------------------------------------------------------------------------------*/
.subHead { width: 100%; }
.subHeadTextDiv { position: absolute; color: #ffffff; text-shadow: 2px 2px 4px #000000; text-align: left; width: 500px;}
.stLeftA { color: #ffffff; font-size: 3em; font-family: headFont; position: relative; left: 20px; top: 20px; z-index: 1 }
.stLeftB { color: #ffffff; font-size: 2em; word-spacing: .4em; position: relative; left: 20px; top: 20px; z-index: 1 }
.stRightA { color: #ffffff; font-size: 3em; font-family: headFont; position: relative; top: 20px; text-align: right; z-index: 1 }
.stRightB { color: #ffffff; font-size: 2em; word-spacing: .4em; position: relative; top: 20px; text-align: right; z-index: 1 }
.subHeadImage { width: 100%; margin: auto; height: 100%;}
.subHeadBottom { width: 100%; height: 0px; position: relative; top: 0px; }
.subHeadTri { width: 10%; /*top: 0px; position: relative;*/ height: 40px; }
/*sub-content----------------------------------------------------------------------------------------------------------------------------------------------*/
.subContent { width: 80%; margin: auto }
.subContentText { width: 100%; text-align:justify; }
.cuttingline { width: 100%; height: 1px; }
.contentList { font-size: 2em; text-align: left; list-style-type: square; list-style-position: inside; line-height: 1.5em; padding-left: 10%; margin:auto; margin-top: .5em; }
.subContentVideoContainer { width: 100%; margin: auto; }
.subContentVideo { width: 100%; }
.subContentVideoText { width: 100%; text-indent: 10px; text-align: left; font-size: 30px; line-height: 30px; }
.subContentArticle { width: 100%; }
/*Artwork--------------------------------------------------------------------------------------------------------------------------------------------------*/
.artworkContainer { padding-bottom: 8px; }
.artworkContainer:hover { background-color: #ff9900; }
.artworkContainer:hover > .artworkText { color: #ffffff; }
.artworkDiv { width: 100%; cursor: pointer; }
.artwork { width: 100%; }
.artworkText { width: 100%; font-size: 30px }
/*unwrap---------------------------------------------------------------------------------------------------------------------------------------------------*/
.unwrapContainer { width: 100%; cursor: pointer; padding-bottom: 8px; text-align:center; margin-bottom: 16px; }
/*.unwrapContainer:last-child { margin-bottom: 0px }*/
.unwrapContainer:hover { background-color:#ff9900; }
.unwrapContainer:hover > .unwrapDesc { color: #ffffff; }
.unwrapDesc { color: #111111; width: 90%; text-align: left; margin:auto; font-size: 30px; line-height: 30px;}
/*3d-------------------------------------------------------------------------------------------------------------------------------------------------------*/
.dreid {
	width: 100%;
	height:auto;

 }
.dreidDiv { 
	width: 90%;
	margin: auto;
	height: 90%;
 }
/*2d-------------------------------------------------------------------------------------------------------------------------------------------------------*/
.zweid { background-color: #050505; cursor: pointer; /*padding-bottom: 8px;*/border-bottom: 8px solid #d7d7dd }
.zweid:hover { /*background-color: #ff9900;*/border-bottom: 8px solid #ff9900 }
.zweidThumb { width: 100%; height: 100%; }
#imageblock { width: 100%; position: relative; }
/*Code-----------------------------------------------------------------------------------------------------------------------------------------------------*/
.codeBlock { width: 100%; text-align: center; }
.codeBlock::after { clear: both; }
.codeCollection { text-align:center; width: 400px; margin-bottom: 40px; background-color:#d7d7dd; position: relative; }
.codeCollectionText { margin: 0px; padding: 0px; margin:auto; width: auto; background-color: #070707; }
.codeBox { margin:auto; width: 400px; height: 100px; margin-bottom: 0px; cursor: pointer; display: block; background-color:#111111}
.codeBoxThumbDiv { height: 96px; width: 96px; position: absolute; border: 2px solid #111111; right: 0px;}
.codeBoxThumb { width: 100%; height: 100%; }
.codeBoxText { margin: auto; text-align: center; width: 300px; background-color:#111111; float:left; height: 60px; font-size: 40px; line-height: 60px; padding: 20px 0px; color: #d7d7dd; font-variant:small-caps; }
.codeBoxTextJapanese { margin: auto; text-align: center; width: 300px; background-color:#111111; float:left; height: 60px; font-size: 25px; line-height: 60px; padding: 20px 0px; color: #d7d7dd; font-variant:small-caps; }
.codeBoxText::after { clear: both };
.codeBoxTextJapanese::after { clear: both };
.codeBox:hover { background-color:#ff9900; }
.codeBox:hover > .codeBoxText { background-color: #ff9900; color: #111111; }
.codeBox:hover > .codeBoxText::first-letter { font-size: 1.0em; font-weight: normal; color: #ffffff; }
.codeBox:hover > .codeBoxTextJapanese { background-color: #ff9900; color: #111111; }
.codeBox:hover > .codeBoxTextJapanese::first-letter { font-size: 1.0em; font-weight: normal; color: #ffffff; }
.codeBox:hover > .codeBoxThumbDiv { border: 2px solid #ff9900; }
/*Dia------------------------------------------------------------------------------------------------------------------------------------------------------*/
#diacontainer { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 2; }
#diabackground { width: 100%; height: 100%; position: absolute; background-color: #000000; opacity: .8; }
#diacloseholder { position: absolute; width: 100%; }
#diaclose { cursor: pointer; margin: auto; width: 100px; height: 100px; background-color:#000000; border: thin solid #333333; }
#diaclose:hover { border: thin solid #ffffff; }
#diainfoholder { bottom: 0px; position: absolute; width: 100%; }
#diainfo { font-size: 24px; padding: 4px; font-weight:normal; color: #dddddd; margin: auto; text-align: left; line-height: 20px; background-color: #000000; border: thin solid #333333; }
#diaprevholder { position: absolute; height: 100%; }
#diaprev { position: absolute; width: 100px; height: 100px; left:0; top: 0; right: 0; bottom: 0; margin: auto; background-color:#000000; border: thin solid #333333; cursor: pointer; }
#diaprev:hover { border: thin solid #ffffff; }
#dianextholder { position: absolute; height: 100%; right: 100px; }
#dianext { position: absolute; width: 100px; height: 100px; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background-color:#000000; border: thin solid #333333; cursor: pointer; }
#dianext:hover { border: thin solid #ffffff; }
#diaPreloader { position:fixed; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 100px; height: 100px; z-index: 3; }
/*Youtube------------------------------------------------------------*/
.yt { width: 100%; }
.ytcon { width: 100%; margin: auto; text-align: center; }
/*shorties----------------------------------------------------------------------------------------------------------------------------*/
.hide { display: none; }
.hideV { visibility: hidden }
.bgDark { background-color: #111111; }
.bgLight { background-color: #d7d7dd; }
.textCenter { text-align: center; }
.textDark, .textDark > mark, .textDark > li { color: #111111; }
.textLight, .textLight > mark, .textLight > li { color: #d7d7dd; }
.mt { margin-top: 2em }
.mb { margin-bottom: 2em }
.pt { padding-top: 2em }
.pb { padding-bottom: 2em }
.clearfix::before, .clearfix::after { content: " "; display: table; }
.clearfix::after { clear: both; }
.highlight { color: #ffffff; text-transform: uppercase; font-weight: 900; }
.imgFloatLeft { position: relative; float: left; margin: 10px 5% 5px 0px; z-index: 1; }
.w45 { width: 45% }
.w100 { width: 100% }
.fr { right: 68px }

/*for IE--------------------------------------------------------------------------------------------------------------------------------*/
.navliIE:hover { background-color: #ffffff; }
.navliIE:hover > .navmarker{ display:block; }
.navliIE:hover > .navtext{ color: #000000; }