html {
	scroll-behavior: smooth;
}

body {
	text-rendering: geometricPrecision;
	background-image: url('/site/archive/img/bg.gif');
	margin: 0;
}

::selection {
    background-color: #7d6e71 !important;
    color: #da7cc4 !important;
}

* {
	box-sizing: border-box;
    scrollbar-width: thin;
    -ms-overflow-style: none;
    scrollbar-color: #ffece2 transparent;
	cursor: url("/site/archive/img/cur.cur"), auto;
}

* img {
    user-select:none;
}

*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #ffece2;
}

a {
	cursor: url('/site/archive/img/link.gif'), auto;
}

a * {
	cursor: url('/site/archive/img/link.gif'), auto;
}

.scroll-hug {
  width: 100%;
  display: flex;
  justify-content: center;
}

.knight{
	width:100%;
	height: 100vh;
	overflow-x:hidden;
	overflow-y: visible;
    position:relative;
	font-family: 'Times New Roman', Times, serif;
	font-style: italic;
}

.item {
  margin: auto;
}

.jack {
  width: 720px;
  height: 256px;
  margin: auto auto -100px auto;
  top:50px;
  right:-250px;
  position: relative;
  z-index: 1;
}

#heart {
  width: 250px;
  height: 250px;
  margin: 0;
}

.filter-chrome {
  filter: url(#liquid-chrome-1) drop-shadow(3px 3px 0 #ffece2);
}

.filter-chrome-txt {
  filter: url(#liquid-chrome-2) drop-shadow(3px 3px 0 #ffece2);
}

@font-face {
	font-family: 'wobble';
	src: url('/fonts/wobble.otf');
}

.text {
  position: absolute;
  top:0.35em;
  left:0.85em;
  font-family: "Times New Roman", serif;
  text-transform: uppercase;
  font-size: 120px;
  color: #000;
  z-index: 2;
}

  #switch {
	position: relative;
	top:240px;
	left:-8em;
    width: 73px;
    height: 158px;
    background: url('/site/archive/img/switch.gif') no-repeat 0 0;
    filter: drop-shadow(3px 3px 0 #ffece2);
	&:hover {
		cursor: url('/site/archive/img/grab.cur'), auto;
	}
  }
  #switch.active {
    background-position: -73px 0;
  }

.queen {
	margin:60px auto 5% auto;
    width:100%;
    max-width:1140px;
    height: 730px;
    position:relative;
	-webkit-animation: comein 1.5s ease-in-out;
	-moz-animation: comein 1.5s ease-in-out;
	animation: comein 1.5s ease-in-out;
}

.archive {
  width: 100%;
  max-width: 1000px;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: .2s;
  -moz-transition: .2s;
  transition: .2s;
  -webkit-box-shadow: -2px 0 3px rgba(0,0,0,0.3);
  -moz-box-shadow: -2px 0 3px rgba(0,0,0,0.3);
  box-shadow: -2px 0 3px rgba(0,0,0,0.3);
  border: 1em solid #ffece2;
  border-bottom: none;
  background-color: #ffece2;
  cursor: url('/site/archive/img/link.gif'), auto;
}

.archive * {
	cursor: url('/site/archive/img/link.gif'), auto;
}

.archive > video, .archive > img {
	border-radius: 6px;
	box-shadow: 0 0 5px #0000006c;
	width: 100%;
}

.icon {
	width: 32px;
	margin-top: -9px;
	margin-right: 4px;
	vertical-align: -9px;
}

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

.archive:nth-child(1) {
	left: 10px;
}
.archive:nth-child(1):hover {  
	-webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    transform: rotate(-2deg);
	left: 0;
}

.archive:nth-child(2) {
	left: 10%;
}
.archive:nth-child(2):hover {
	-webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    transform: rotate(-2deg);
	left: 5%;
}

.archive:nth-child(3) {  
	left: 20%;
}
.archive:nth-child(3):hover {  
	-webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    transform: rotate(-2deg);
	left: 15%;
}

.archive:nth-child(4) {  
	left: 30%;
}
.archive:nth-child(4):hover {  
	-webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    transform: rotate(-2deg);
	left: 25%;
}

.archive:nth-child(5) {  
	left: 40%;
}
.archive:nth-child(5):hover {  
	-webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    transform: rotate(-2deg);
	left: 35%;
}

.opened {  
	z-index: 1000;
	left:0 !important;
	-webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-box-shadow:0 0 3px rgba(0,0,0,0.3);
	-moz-box-shadow:0 0 3px rgba(0,0,0,0.3);
	box-shadow:0 0 3px rgba(0,0,0,0.3);
	width:100%;
    max-width:1140px;
}

.opened img{
		z-index:5;
}

.shadow {
	position:absolute;
    bottom:20px;
    left:10px;
    width:90%;
	height:20px;
	-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-transform:rotate(-2deg);
	-moz-transform:rotate(-2deg);
	transform:rotate(-2deg);
	display:none;
	z-index:-1;
}

.shadow:after {
	display:block;
	content:"";
	position:absolute;
    bottom:-8px;
    right:-93px;
    width:90%;
	height:20px;
	-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-transform:rotate(4deg);
	-moz-transform:rotate(4deg);
	transform:rotate(4deg);
}

.txt {
    display:block;
	margin:-2px 0 0 0;
	padding-top:20px;
	width: 100%;
	padding-left:2%;
	height:52px;
	background: #ffece2;
}


#nav {
position: absolute;
  bottom: -50px;
  left: 50%;
  margin: 0 0 0 -62px;
  background: #362f22;
  opacity: 0.8;
  color: #fff;
  height: 26px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  padding: 6px 10px 0px 10px;
}

.circle {
	display:inline-block;
	width:15px;
	height:15px;
	-webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    background:#dff7ff;
    border:1px solid #362f22;
    margin-right:6px;
	&:hover {
	background:#fff;
	border:1px solid #ccc;
	cursor: url('/site/archive/img/link.gif'), auto;
	}
}

.circle:active,
.activenav,
.activenav:hover{
	background:#666;
	border:1px solid #333;
}

.activenav{
	cursor: url("/site/archive/img/cur.cur"), auto !important;
}

.circle:last-child{
	margin-right: 0;
}

#loading{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	top:0;
	left:0;
	z-index:10001;
	position:absolute;
}

.loader{
    display: block;
    height: 30px;
    left: 50%;
    margin: -15px 0 0 -15px;
    position: absolute;
    top: 50%;
    width: 30px;
	animation: spin 1s infinite linear;
	-moz-animation: spin 1s infinite linear;
	-webkit-animation: spin 1s infinite linear;
}

@-webkit-keyframes comein {
	0% { opacity: 0; -webkit-transform: translateY(-3000px); }
	80% { opacity: 1; -webkit-transform: translateY(40px); }
	100% { -webkit-transform: translateY(0); }
}
@-moz-keyframes comein {
	0% { opacity: 0; -moz-transform: translateY(-3000px); }
	80% { opacity: 1; -moz-transform: translateY(40px); }
	100% { -moz-transform: translateY(0); }
}
@keyframes comein {
	0% { opacity: 0; transform: translateY(-3000px); }
	80% { opacity: 1; transform: translateY(40px); }
	100% { transform: translateY(0); }
}

.fogwrapper {
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
  filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
}
#foglayer_01, #foglayer_02, #foglayer_03 {
  height: 100%;
  position: fixed;
  width: 200%;
}
#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  float: left;
  height: 100%;
  width: 50%;
}
#foglayer_01 {
  -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  -moz-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
}
#foglayer_02, #foglayer_03 {
  -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
}

#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url("/site/archive/img/fog1.png") center center/cover no-repeat transparent;
}
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02{
  background: url("/site/archive/img/fog2.png") center center/cover no-repeat transparent;
}

@keyframes foglayer_01_opacity {
  0% { opacity: 0.5; }
  22% { opacity: 0.8; }
  40% { opacity: 0.7; }
  58% { opacity: 0.75; }
  80% { opacity: 0.6; }
  100% { opacity: 0.5; }
}

@keyframes foglayer_02_opacity {
  0% { opacity: 0.8; }
  25% { opacity: 0.6; }
  50% { opacity: 0.5; }
  80% { opacity: 0.7; }
  100% { opacity: 0.8; }
}

@keyframes foglayer_03_opacity {
  0% { opacity: 1; }
  27% { opacity: 0.7; }
  52% { opacity: 0.9; }
  68% { opacity: 0.8; }
  100% { opacity: 1; }
}

@-webkit-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-moz-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-o-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}

@media only screen
  and (min-width: 280px)
  and (max-width: 767px) {
    #foglayer_01 .image01, #foglayer_01 .image02,
    #foglayer_02 .image01, #foglayer_02 .image02,
    #foglayer_03 .image01, #foglayer_03 .image02 {
      width: 100%;
    }
  }