@font-face {
    font-family: 'LetteraTextStdRegular';
    src: url('./fonts/letteratextstd.eot');
    src: url('./fonts/letteratextstd.eot') format('embedded-opentype'),
         url('./fonts/letteratextstd.woff2') format('woff2'),
         url('./fonts/letteratextstd.woff') format('woff'),
         url('./fonts/letteratextstd.ttf') format('truetype'),
         url('./fonts/letteratextstd.svg#LetteraTextStdRegular') format('svg');
}


* {margin:0;padding:0;box-sizing:border-box;-webkit-backface-visibility:  hidden;-webkit-tap-highlight-color:  transparent;}
html,body {width:100%;height:100%}
body {font-family: LetteraTextStdRegular, arial; font-variant-numeric: lining-nums;font-size:20px;color:white;background:black}
a {text-decoration:none;color:white;outline:none}
ul, li {list-style:none;}
h1,h2,h3,h4 {font-weight:normal}
h3 {font-size:36px;padding-bottom:0.4em}
h4 {font-size:24px}
p {padding-bottom:0.5em; }
td {padding:0 1em 0.5em 0; vertical-align:top;}
tr > td:first-child {white-space: nowrap;}

.fixd {display: inline-block; position:fixed; z-index:3}
a.fixd.head {left:25px;right:100px;top:18px;font-size:25px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;text-transform:uppercase}
a.fixd.name {right:25px;top:20px;font-size:20px}
a.fixd.close {right:25px;top:10px}
a.fixd.prev {left:25px;right:75%;top:50px;bottom:25px;background-color:transparent;background-image:none;background-size:70px;background-position:center left;background-repeat:no-repeat}
a.fixd.curr {left:25%;right:25%;top:50px;bottom:25px;background-color:transparent;}
a.fixd.next {left:75%;right:25px;top:50px;bottom:25px;background-color:transparent;background-image:none;background-size:70px;background-position:center right;background-repeat:no-repeat}
a.fixd.prev:hover {background-image:url(/img/icon/prev.png);}
a.fixd.next:hover {background-image:url(/img/icon/next.png);}
img.fixd.logo {left:25px;top:56px;z-index:4}
ul.fixd.menu {left:25px;top:55px;z-index:5;background-color:rgba(0, 0, 0, 1);display:none;width:220px;font-size:18px;padding:0 0 1em 0;text-transform:uppercase;line-height:1.1}


/*div.fit > a {display:none}*/
div.fit a {text-align:center;display:block;height:100%}
div.fit img {max-width:100%;max-height:100%}
div.mask {position:fixed;top:0;height:60px;left:25px;right:25px;background:black;z-index:2}
div.spac {height:60px}

div.page {margin:0px 25px 0px 25px;background-color:#000}
div.page.fit {height:calc(100% - 75px);background-position:center;background-size:contain;background-repeat:no-repeat}
.page.fit + .page.fit {margin-top:1rem}
div.page div.text {max-width:600px;margin:0 auto;font-size:20px;padding:0 0 5em 0}
div.page div.text img {max-width:600px;padding:0 0 1em 0;}

div.rand {top:0;left:0;right:0;bottom:0;background-size:cover;background-position:center;display:none;z-index:10;}

span.icon {display:inline-block;margin:0 7px;}
span.icon img {width:24px;vertical-align:middle}
span.icon.close img {width:45px;}
span.icon.menu img {width:30px;margin-top:-3px}
span.icon.more img {width:40px;margin-top:-18px}
span.maxwidth {font-size:18px; display:inline-block;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
li.social {font-size:20px;}
li.social img {width:30px; margin-top:15px;}

@media screen and (min-width: 1024px) {
	span.maxwidth {max-width:60vw;}
}
@media screen and (max-width: 1023px) {
	img.fixd.logo  {display:none}
}
@media screen and (max-width: 640px) {
	div.mask {position:fixed;top:0;height:50px;left:25px;right:25px;background:black;z-index:2}
	ul.fixd.menu {font-size:16px;width:100%;}
	a.fixd.head {font-size:20px;right:70px ; }
	a.fixd.close {right: 15px; }
	a.fixd.name {font-size:20px;top:auto;bottom:10px;white-space: nowrap;display:block;text-overflow:ellipsis;overflow:hidden;padding-right:50px;text-align:right;left:25px;padding-top:7px}
	/*body:not(.menu) a.fixd.head span.icon {float:right}*/
	a.fixd.prev, a.fixd.next {display:none !important}
	a.fixd.name span.icon {position:absolute;right:0;top:7px}
	/*a.fixd.name span:not(.icon){max-width:20%;overflow: hidden;text-overflow: ellipsis;  }*/
	div.page.proj {height:calc(100% - 100px)}
	div.page div.text img {max-width:100%}
	li.social img {width:40px;  margin-top:25px; margin-right:5px;}
	a.fixd.name span.maxwidth {max-width:70vw;font-size:16px;}
	span.icon {	margin: 0;}
	span.icon.more img {width:40px;margin-top:-6px}
	td {	padding: 0 0.5em 0.5em 0;	}
	tr > td:first-child {white-space: normal;}
}