@font-face {
font-family: 'mrs_whiteregular';
src: url('../font/mrswhite-webfont.woff2') format('woff2'),
 url('../font/mrswhite-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}
html
{
	width: 100%;
	height: 100%;
}

body {
	overflow-y: auto;
	overflow-x: hidden;
	font-family: 'mrs_whiteregular';
	color: #fff;
	font-size: 5vh;
	line-height: 1.3;
	width: 100%;
	height: 100%;
	background-color: #000;
	background-size: 100% 100%;
	background-attachment: fixed;
	background-image: url(../images/frame.png);
	background-repeat: no-repeat;
}



.parallax-container {
	perspective: 1000;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	-o-perspective: 1000;	
	transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	overflow: hidden;
/*	position: fixed;*/
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1000;
}

.moon-c
{	
	width: 98vw;
	height: 95vh;

}



.parallax-container2 {
	width: 100vw;
	height: 100vh;
	z-index: 3000;
/*	position: fixed;
	right: 0;
	left: 0;
	margin-right: auto;
	margin-left: auto;*/

}


.parallax-container2 P
{
	/* Safari, Chrome */
	-webkit-transform: rotate(3deg);
	
	/* Firefox */
	-moz-transform: rotate(3deg);
	
	/* IE */
	-ms-transform: rotate(3deg);
	
	/* Opera */
	-o-transform: rotate(3deg);
	
	/* CSS3 standard as defined here: http://www.w3.org/TR/css3-transforms/ */
	transform: rotate(3deg);
}

h2
{

	padding-bottom: 5vw;
	padding-top: 5vw;
		/* Safari, Chrome */
	-webkit-transform: rotate(-4deg);
	
	/* Firefox */
	-moz-transform: rotate(-4deg);
	
	/* IE */
	-ms-transform: rotate(-4deg);
	
	/* Opera */
	-o-transform: rotate(-4deg);
	
	/* CSS3 standard as defined here: http://www.w3.org/TR/css3-transforms/ */
	transform: rotate(-4deg);
}

.logo
{
	clear: both;
	background-repeat: no-repeat;
	background-image: url(../images/sm_logo.png);
	background-position:center;
	background-size: contain;
}

.parallax-base 
{
	/*position: fixed;*/
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;		
	z-index: 199;
	height: 100vh;
}

.room
{	
	z-index: 1000;
	background-image: url(../images/back.png);
	background-size: auto 100%;
	background-repeat: no-repeat;
	height: 100vh;
	width: 100%;
}

.room-base
{
	width: 100%;

}

.view, .window, .cat, .telescope
{
	background-size: auto 100%;
	background-repeat: no-repeat;
	height: 100vh;
	width: 100%;	
}


.view
{
	background-image: url(../images/view.png);
	-webkit-transform: translateZ(10px);
	-moz-transform: translateZ(10px);

}

.window
{
	background-image: url(../images/window.png);
	-webkit-transform: translateZ(110px);
	-moz-transform: translateZ(110px);
}

.cat
{
	background-image: url(../images/cattable.png);
	-webkit-transform: translateZ(170px);
	-moz-transform: translateZ(170px);
}

.telescope
{
	background-image: url(../images/telescope.png);
	background-position: center bottom;
	transform: translateZ(230px);
	-webkit-transform: translateZ(230px);
	-moz-transform: translateZ(230px);
}


.star1, .star2, .star3
{
	width: 100%;
	height: 100vh;	
}

.star1
{
	background-image: url(../images/star1.png);

}

.star2
{
	background-image: url(../images/star2.png);
}

.star3
{
	background-image: url(../images/star3.png);
}




.text-1
{
	top: 35%;
	font-size: 2.5vh;
}

.text-2
{
	top: 15%;
}



.imgy
{
	width: 100%;
	height: 100%;
	/*position: absolute;*/
}

.imgx
{
	width: 100%;
	height: 100%;
	/*position: absolute;*/
}

#log
{
	color: red;
	position: absolute;
	top: 0;
}





.shadow
{
	position: absolute;
	left: 0vh;
	top: 0vh;
	width: 85vh;
	height: 85vh;
	transform:translateZ(170px);
	-moz-transform:translateZ(170px);
	-webkit-transform:translateZ(170px);
	-o-transform:translateZ(170px);
	-ms-transform:translateZ(170px);
}








.scrolldown
{
	margin-top: 40%;
	animation-duration: 1s;
	animation-name: blink;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
	font-size: 1.5vh;
	position: absolute;
	bottom: 5%;
	left: 10%;
	text-align: left;
}


.scrolldown IMG
{
	float: left;
	margin-top: -5px;
}



@keyframes blink {
from {
	opacity: 1;
}
to {
	opacity: 0;
}
}





.moon
{
	background-image: url(../images/moon2.png);
	background-position: center top;
	background-size: 95% auto;
	background-repeat: no-repeat;
}

@media only screen and (device-width: 640px) and (orientation: landscape)
{
	
h2
{	
font-size: 10vh;
}
	
.moon
{
	height: 75vh;
	width: 43vw;
}

.moon-base
{	top: 5vh;
	width: 45vw;
	left: 50%;
}


.text
{
	width: 40vw;
	left: 10%;
	text-align: center;
}

.logo
{
	width: 40vw;
	height: 20vh;
}

.guy
{
	background-position: center;
	width: 43vw;
	height: 83vh;
}

.princess, .rocket, .blackmoon
{
	width: 43vw;
	height: 80vh;
}

.rocket
{
	background-position: center;
}

.room, .view, .window, .cat
{
	background-position: right;	
}

.link
{
	font-size: 5vh;
	margin-left: -25vw;
}

}

@media only screen and (max-height: 960px) and (orientation: portrait)
{
body
{
	max-width: 800px;
}

h2
{	
	font-size: 6vh;
}

.moon-base
{	
	left: 10vw;
	right: 10vw;

}

.moon
{
	top: 10px;
}

.text
{
	width: 100vw;
	text-align: center;
	font-size: 3vh;
}


.text-2
{
	top: 50%;
}

.logo
{
	width: 80vw;
	height: 20vh;
	margin-left: 10vw;
	margin-top: 15%;
}

.guy
{
	background-position: center top;
	top: 20px;
}

.moon-base, .moon, .princess, .rocket, .blackmoon, .guy
{
	height: 70vw;
	width: 80vw;
}

.rocket
{
	background-position: center;
}


.room, .view, .window, .cat
{	
	background-position: -600px 0;
}

.princess
{top: 30px;}



.alien
{
	margin-top: -300px;
	margin-left: -500px;
}

.fallingstar
{
	margin-left: -500px;
}

.link
{
	font-size: 3vh;
	margin-top: 130px;
	margin-left: -150px;
}

.telescope
{background-size: auto 80%;
background-position: -220px 70px;}
}



@media screen and (max-width: 990px) and (min-width: 641px)
{
	
h2
{	
font-size: 10vh;
}
	
.moon
{
	height: 80vh;
	width: 43vw;
}

.moon-base
{	top: 5vh;
	width: 45vw;
	left: 50%;
}


.text
{
	width: 40vw;
	left: 10%;
	text-align: center;
}

.logo
{
	width: 40vw;
	height: 20vh;
}

.guy
{
	background-position: center;
	width: 43vw;
	height: 83vh;
}

.princess, .rocket, .blackmoon
{
	width: 43vw;
	height: 80vh;
}

.rocket
{
	background-position: center;
}

.room, .view, .window, .cat
{
	background-position: right;	
}

.link
{
	font-size: 5vh;
	margin-left: -25vw;
}

}

@media screen and (max-width: 1150px) and (min-width: 991px)
{
	
h2
{	
font-size: 10vh;
}
	
.moon
{
	margin-top: 20%;
	height: 50vh;
	width: 43vw;
	
}

.moon-base
{	top: 5vh;
	width: 45vw;
	left: 50%;
}


.text
{
	width: 40vw;
	left: 10%;
	text-align: center;
}

.logo
{
	width: 40vw;
	height: 20vh;
}

.guy
{
	background-position: center;
	width: 43vw;
	height: 83vh;
}

.princess, .rocket, .blackmoon
{
	width: 43vw;
	height: 80vh;
}

.rocket
{
	background-position: center;
}

.room, .view, .window, .cat
{
	background-position: right;	
}

.link
{
	font-size: 5vh;
	margin-left: -10vw;
}

}

@media screen and (min-width: 1151px)
{
	
h2
{	
font-size: 10vh;
}

.moon
{
	height: 75vh;
	width: 43vw;
}

.moon-base
{	top: 5vh;
	width: 45vw;
	left: 50%;
}



.text
{
	width: 40vw;
	left: 10%;
	text-align: center;
}

.logo
{
	width: 40vw;
	height: 20vh;
}

.guy
{
	background-position: center bottom;
	width: 43vw;
	height: 83vh;
}

.princess, .rocket, .blackmoon
{
	width: 43vw;
	height: 80vh;
}

.rocket
{
	background-position: center;
}

.link
{
	font-size: 5vh;
}
}

.blackmoon
{
	background-repeat: no-repeat;
	background-image: url(../images/blackmoon.png);
	background-position:center top;
	background-size: 95%;
	background-repeat: no-repeat;
}

.princess
{
	background-image:url(../images/princess.png);
	background-size: 95%;
	background-position: center;
	background-repeat: no-repeat;
}


.rocket
{

	background-image:url(../images/rocket.png);
	background-size: 95%;
	background-repeat: no-repeat;
	z-index: 1000;
	transform: translateZ(100px);
}


.guy
{
	background-image:url(../images/guy.png);
	background-size: 95%;
	background-repeat: no-repeat;
}

.fallingstar
{
	position: absolute;
	z-index: 1000;
	top: 0; 
	left: 0;
	width: 183px;
	height: 95px;
	background-image:url(../images/fallingstar.png);
	background-size: 93%;
	background-position: center;
	background-repeat: no-repeat;
}

.alien
{
	position: absolute;
	z-index: 1000;
	width: 150px;
	height: 163px;
	background-image:url(../images/alien.png);
	background-size: 93%;
	background-position: center;
	background-repeat: no-repeat;
}

.sputnik
{
	position: absolute;
	z-index: 1000;
	top: 0; 
	left: 50%;
	width: 600px;
	height: 600px;
	background-image:url(../images/sputnik.png);
	background-size: 93%;
	background-position: center;
	background-repeat: no-repeat;
}


.skrollable {
	/*
	 * First-level skrollables are positioned relative to window
	 */
	position:fixed;
	z-index: 50;

	/*
	 * Skrollables by default have a z-index of 100 in order to make it easy to position elements in front/back without changing each skrollable
	 */
}

.skrollr-mobile .skrollable {
	/*
		May cause issues on Android default browser (see #331 on GitHub).
	*/
	position:fixed;
}

.skrollable .skrollable {
	/*
	 * Second-level skrollables are positioned relative their parent skrollable
	 */
	position:absolute;
}

/*   */


.link
{position: fixed;
top: 47%;
left: 15%;
width: 550px;
z-index: 151;
text-align: center;
}


a, a:visited
{
	color: #ed145b;
	text-decoration: underline;
}

a:hover, a:active
{
		color: #fff;
		text-decoration: underline;
}




#main {
  position: relative;
  z-index: 20;
  background-color: #000;
  -webkit-transition: -webkit-transform .6s ease;
  transition: -webkit-transform .6s ease;
  transition: transform .6s ease;
  transition: transform .6s ease, -webkit-transform .6s ease;
}
@media (min-width: 640px) {
  #main {
    padding: 1em;
  }
}

.fake-section {
  background: #eee;
  height: 300px;
}

.tiles-a {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.tiles-a ul {
  margin: 0;
  padding: 0;
}
.tiles-a li {
  list-style: none;
}
@media (min-width: 640px) {
  .tiles-a li {
    float: left;
    width: 33.33%;
  }
}


.tiles-a a {
  margin: 1em;
  display: block;
  background: #222;
  padding-top: 73%;
  height: 0;
}

#aside {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  background: #eee;
  overflow-y: scroll;
  z-index: 10;

}

.tiles-a li a
{
	background-size: 210%;
	-webkit-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    transition: all 500ms linear;
	border: none;
	border: 10px solid #fff;
}


.tiles-a li a:hover
{
	  background-size: 150%;
	  border: 10px solid #000;
}

@media (max-width: 830px)
{
	#aside {
  width: 100%;
}

.show-detail #aside
{z-index: 100;}
}

@media (min-width: 830px)
{
	#aside {
  width: 60%;
}
}
#aside img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
#aside .wrapper {
  padding: 1em;
}
#aside .close {
  width: 30px;
  display: block;
  position: fixed;
  top: 1em;
  right: 1em;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}

.show-detail {
  overflow: hidden;
}
.show-detail #main {
  -webkit-transform: translateX(-60%);
          transform: translateX(-60%);
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}