@font-face {
	font-family: thetailof;
	src: url("1572971243b.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: ZeitungMicroProLight;
	src: url("ZeitungMicroPro-Light.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

body{
	background:#111;
	opacity:1;
	color:#fff;
	font-family:Verdana;
	padding:0px;
	margin:0px;
	font-size:0.9em;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
}	


/**
 * ==============================================
 * Dot Fire
 * ==============================================
 */
.dot-fire {
  position: relative;
  left: -9999px;
  width: 20px !important;
  height: 20px !important;
  border-radius: 5px;
  color: rgba(255,102,0,0);
  animation: dot-fire 2s infinite linear;
  font-family:ZeitungMicroProLight;
}


@keyframes dot-fire {
  0% {
    color:rgba(255,102,0,1);
  }
  50% {
   color:rgba(255,102,0,0);
  }
  100% {
    color:rgba(255,102,0,1);
  }
}


a{ 	
  	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    text-decoration:none;
    color:#f60;
}
.thumb, .thumbTitle{
	margin:2px;
	vertical-align: text-bottom;
	display:inline-block;
	width: 96px;
	height: 54px;
	position:relative;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
  	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.visited:before, .visited:after {
    position: absolute;
    content: '';
    background: #000;
    display: block;
    width: 100%;
    height: 2px;
    -webkit-transform: rotate(-27deg);
    transform: rotate(-27deg);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    box-shadow: 0px 0px 5px 1px #f60;
    opacity:1;
}

.visited:after {
    -webkit-transform: rotate(27deg);    
    transform: rotate(27deg);
}

   

@media screen and (max-width: 600px) {
	.thumb, .thumbTitle {
		width: 19vw; /* 96 */
		height: 10.6875vw;
	}
}
	
@media screen and (max-width: 400px) {
	.thumb, .thumbTitle {
		width: 23vw; /* 96 */
		height: 13.5vw;
	}
}
.thumbTitle{
	word-break: break-all;
}
.thumbTitle .content{
	opacity:1;
	filter: none;
	font-size:0.6em;
	padding:10px;
	text-align:left;
}
.thumbImg{
	width:100%;
	opacity:0.4;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	border: 1px solid #111;
	filter: grayscale(100%) ;
	transition: all 1s ease-out;
	border-radius:3px;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.thumbImgNote{
	position:absolute;
	top:0;
	padding:5px;
	font-size:0.5em;
	color:#555;
}
@media(hover: hover) and (pointer: fine) {
	.thumbImg:hover{
		box-shadow: 0px 0px 10px rgba(255, 101, 0, 1);
		cursor:pointer;
		opacity:1 !important;
		border:1px solid #f60;
		transition: border 0s ease-out;
		-webkit-filter: none; /* Safari 6.0 - 9.0 */
		filter: none;
		/* transform: scale(1.05); */
	}
}
.shine{
	filter: grayscale(20%);
	opacity:0.5;
	transition: all 1s ease-in-out;
	box-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
}
.shineTitle{
	filter: grayscale(20%);
	opacity:0.5;
	transition: all 1s ease-in-out;
	box-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
	border:1px solid #f60;
}
.selected{
	border: 1px solid #f60;
	opacity:1 !important;
	filter:none;
	transition: opacity 0s ease-in-out;
	box-shadow: 0px 0px 20px rgba(255, 105, 0, 1);
}
.fullWidthVideo iframe,
.fullWidthVideo #videoLoader,
.fullWidthVideo object,
.fullWidthVideo div, 
.fullWidthVideo video, 
.fullWidthVideo embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
video{
	z-index:99998;
}
#videoLoader{
	z-index:99999;
}
#videoLoader img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	width:100%;
	filter:sepia(100%) brightness(20%);
}
#videoLoader .content {
	margin: 0;
	position: absolute;
	top: 93%;
	left: 2%;
	margin-right: -50%;
	transform: translate(-50%, -50%) 
	width:20px;
	height:20px;
	overflow:visible;
}

.footer{
	position: absolute;
	bottom: 0;
	right: 0;
}
	
.header{
	position:fixed;
	top:57px;
	left:20px;
	width:160px;
	height:70px;
	z-index:199999;
	background:#ff6600;
	padding:10px;
	border-radius:3px;
	font-size:0.8em;
	line-height:1.5em;
}
.jsPanel{
	 box-shadow: 0px 0px 20vw 5vw rgba(0, 0, 0, 1); 
}

.jsPanel-title{
	font-feature-settings: 'c2sc' on; 
	font-family: 'ZeitungMicroProLight';
}

#imageContainer{
	margin: 0 auto;
	width: auto;
	display:inline-block;
}
/*
.jsPanel-hdr:hover{
	background: #fff;
}
*/
#logger{
	font-size:0.6em;
	z-index:99999;
	position:fixed;
	top:0;
	left:0;
	color:#fff;
	padding:20px;
	display:none;
}
.top, .left, .right, .bottom{
	z-index:999999;
	color:#f60;
	position: fixed;
	font-size:1.2em;
	text-transform:uppercase;
	padding:5px;
	font-feature-settings: 'c2sc' on; 
	font-family: 'ZeitungMicroProLight';
}
.top:hover, .left:hover, .right:hover, .bottom:hover{
	cursor:pointer;
	color:#fff;
	
}
.top{
	top:0px;
	text-align:center;
	width:100%;
	background-image: linear-gradient( rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
}
.right{
	top:45%;
	right:-35px;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	background-image: linear-gradient( rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
	background:#111;
	box-shadow:0 5px 10px 5px #111;
}	
.bottom{
	bottom:0px;
	text-align:center;
	width:100%;
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	transform: rotate(-180deg);
	background:#ff0;
}
.left{
	top:45%;
	left:-35px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	background:#111;
	box-shadow:0 5px 10px 5px #111;
}
.center{
	 width:100%;
	 height:100%;
	 mix-blend-mode: exclusion;
	 filter: invert(100%);
	 opacity:1;
	 position:fixed;
	 margin: 0 auto;
	 left:0;
	 vertical-align: middle;
}


/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay */
.overlay {
	 font-family: 'ZeitungMicroProLight';
	 height: 100%;
	  width: 0;
	  position: fixed;
	  z-index: 999999;
	  top: 0;
	  background-color: rgba(0,0,0, 0.9);
	  overflow-x: hidden;
	  transition: 0.5s;
	  -webkit-transform: translateZ(0);
	   -moz-transform: translateZ(0);
	   -ms-transform: translateZ(0);
	   -o-transform: translateZ(0);
	   transform: translateZ(0);
}
.overlayLeft {
	left:0;
}
.overlayRight {
	right:0;
}
.overlay-content {
	  position: relative;
	  top: 0%;
	  width: 100vw;
	  text-align: center;
	  margin-top: 40px;
}

.overlay_off a {
	  padding: 8px;
	  text-decoration: none;
	  font-size: 22px;
	  color: #818181;
	  display: block;
	  transition: 0.3s;
}

.overlay .small {
	  font-size: 14px;
	  width:80%;
	  margin:0 auto;
	  max-width:300px;
}

.overlay_off a:hover, .overlay_off a:focus {
	  color: #f1f1f1;
}


.overlay .closebtn.right{
	  position: absolute;
	  top: 0px;
	  right: 20px;
	  font-size: 50px;
	  color:#f60;
}

.overlay .closebtn.left{
	  position: absolute;
	  top: 0px;
	  left: 20px;
	  font-size: 50px;
	  color:#f60;
}


@media screen and (max-height: 450px) {
	  .overlay a {font-size: 20px}
	  .overlay .closebtn {
		font-size: 40px;
	  }
}


.logo{
	font-size:5em;
	font-family: 'thetailof';
	font-variation-settings: "ANIM" 700;
	font-feature-settings: 'ss01' 1; /* activate advanced shaping for Safari */
	opacity:1;
	z-index:1;
	margin-bottom:25px;
	display:inline-block;
}

@media screen and (orientation:portrait) { 
	#coverAnimation{
		width:100%;
		height: 100vh;
		text-align: center;
		background:#111;
		z-index:999999;
		font-size:70vw;
		line-height:110vh;
		margin-left:0vw;
		color:#fff;
		font-family: 'thetailof';
		font-variation-settings: "ANIM" 0;
		font-feature-settings: 'ss01' 1; /* activate advanced shaping for Safari */
		opacity:1;
		z-index:1;
	}
}

@media screen and (orientation:landscape) { 
	#coverAnimation{
		width:100%;
		height: 100vh;
		text-align: center;
		background:#111;
		z-index:999999;
		font-size:70vh;
		line-height:120vh;
		margin-left:0vw;
		color:#fff;
		font-family: 'thetailof';
		font-variation-settings: "ANIM" 0;
		font-feature-settings: 'ss01' 1; /* activate advanced shaping for Safari */
		opacity:1;
		z-index:1;
	}
}

#coverAnimation:hover{
	cursor:pointer;
}

.book{
	font-size:2em;
	width:220px;
	height:380px;
	background:#000;
	border:1px solid #444;
	display:inline-block;
	margin:0 auto;
}
.book:hover{
	box-shadow: 0px 0px 20px 2px #f60;
}

/*
.jsPanel-btn-close{
	border:1px solid #ff0 !important;
	padding:30px !important;
	margin:-30px !important;
}




div > .lozad {
   opacity: 0;
   transition: opacity 500ms ease 100ms;
}

div > .lozad[data-loaded] {
   opacity: 0.3;
}
*/