html, body {
	
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: #ffffff;
}


.Mtitle{
	font-family: 'Dosis', sans-serif;
	color:#484f56;
	font-size: 48px;
	font-weight: bold;
	text-align: center;
}


.Mtext{
	font-family: 'Dosis', sans-serif;
	color:#484f56;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
.hover {
	width: 100%;
	height: 100%;
	animation: hover 5s ease-in-out infinite;
	animation-fill-mode: forwards;
}

.itchy
{
    /* float: left; */
    position: absolute;
    top: 347px;
    left: 500px;
}
.itchy2
{
    /* float: left; */
    position: absolute;
    top: 347px;
    left: 700px;
}
.scene {
  margin-right: auto !important;
  margin-left: auto !important;
  display:block;
}

.Solirislogo {
    background-image: url(../img/SolirisLogo.png);
    position: absolute;
    top: 184px;
    left: 101px;
    width: 177px;
    height: 252px;
    bottom: 620px;
    border: 0px solid #333;
    box-sizing: border-box;
    /* animation: rotation 25s infinite linear; */
}

#loader 
{
	height: 1500px;
	widows: 1500px;
	position: fixed;
	background-color: white;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	z-index: 999;
}

#loader img
{
	position: absolute;
	top:50%;
	left:50%;
	ttransform: translate(-50%,-50%);
}

.planet {
  background-image: url("../img/header-img.png");
/*  position: absolute;*/
  top: 0;
  left: 0;
  width: 400px;
  height: 444px;
  bottom: 620px;
  border: 0px solid #333;
  box-sizing: border-box;
  background-repeat: no-repeat;
}
.robo
{
  color: white;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

/*.gamelogo {
  background-image: url("../img/Logoo.png";
  width: 177px;
  height: 252;
  border: 0px solid #333;
  box-sizing: border-box;
  opacity: 1;
  margin: 50px auto auto auto;
  background-repeat: no-repeat;
  background-position: center;
}*/

.cloud1 {
  background-image: url("../img/cloud2.png");
  width: 120px;
  height: 68px;
  position: absolute;
  top: 100px;
  right: -50px;
  animation: float2 4s ease-in-out infinite alternate;
  opacity: 0.7;
}

.cloud2 {
  background-image: url("../img/cloud.png");
  width: 120px;
  height: 68px;
  position: absolute;
  top: 0;
  left: 0;
  animation: float1 4s ease-in-out infinite alternate;
  opacity: 0.7;
}



@keyframes float1 {
  from {transform: translateX(-50px);}
  to {transform: translateX(50px);}
}

@keyframes float2 {
  from {transform: translateX(50px);}
  to {transform: translateX(-50px);}
}

.circle1 {
    width: 400px;
    height: 400px;
    position: absolute;
    top: -254px;
    left: 895px;
    border-radius: 50%;
    background-color: #eef1f399;
}


.circle2 {
width: 450px;
    height: 450px;
    position: absolute;
    top: 695px;
    left: -279px;
    border-radius: 50%;
    background-color: #eef1f399;
}

.circle3 {
    width: 650px;
    height: 650px;
    position: absolute;
    top: 595px;
    left: 1390px;
    border-radius: 50%;
    background-color: #eef1f399;
}
.filler {
  width: 145px;
  height: 40px;
  border-radius: 17px;
  position: absolute;
  top: 70px;
  background-color: lightgray;
  box-shadow: inset 0 -5px gray;
}


.left {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: darkslateblue;
  position: absolute;
  top: 10px;
  left: 20px;
  border: 1px solid #333;
  z-index: 1;
}

.left::before {
  content: "";
  width: 60px;
  height: 20px;
  border-bottom: 60px solid darkslateblue;
  border-radius: 0 0 0 100%;
  position: absolute;
  top: -20px;
  left: -30px;
  animation: excite1 2s infinite alternate linear;
  transform-origin: right;
}

@keyframes excite1 {
  to {transform: rotateZ(-5deg);}
}

.right {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: darkslateblue;
  position: absolute;
  top: 10px;
  right: 20px;
  border: 1px solid #333;
  z-index: 1;
}

.right::after {
  content: "";
  width: 60px;
  height: 20px;
  border-bottom: 60px solid darkslateblue;
  border-radius: 0 0 100% 0;
  position: absolute;
  top: -20px;
  right: -30px;
  animation: excite2 2s linear alternate infinite;
  transform-origin: left;
}

@keyframes excite2 {
  to {transform: rotateZ(5deg);}
}

.story-content
{
	color:#484f56;
}
.body {
  height: 80px;
  width: 58px;
  border-radius: 25px;
  position: absolute;
  bottom: -18px;
  background-color: darkslateblue;
  transform: rotateZ(-10deg);
  border: 2px solid #333;
}

.drop {
  height: 13px;
  width: 13px;
  border-radius: 50%;
  background-color: limegreen;
  position: absolute;
  bottom: -25px;
  right: 180px;
  animation: spray 3s ease-out infinite;
}

.drop::before {
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: limegreen;
  position: absolute;
  bottom: 0;
  right: 0;
  animation: spray 3s 0.3s ease-out infinite;
}

.drop::after {
  content: "";
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: limegreen;
  position: absolute;
  bottom: 0;
  right: 0;
  animation: spray 3s 0.7s ease-out infinite;
}

@keyframes spray {
  0% {transform: translateY(0);}
  30% {transform: translateY(-100px);}
  60% {transform: translateY(0);}
}


.lower {
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 5px solid #333;
  overflow: hidden;
}


@keyframes blink {
  0% {transform: scaleY(0.1);}
  5% {transform: scaleY(0.1);}
  5.1% {transform: scaleY(1);}
}

.detail1 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  bottom: 10px;
  right: 0px;
  background-color: lightsteelblue;
  overflow: hidden;
  border: 2px solid #333;
  box-sizing: border-box;
}

.fin {
  width: 50px;
  height: 120px;
  border-radius: 40px;
  position: absolute;
  bottom: 0;
  right: 180px;
  background-color: slateblue;
  border: 5px solid #333;
  border-top: 5px solid transparent;
  transform: rotateZ(15deg);
  box-shadow: inset 0 -10px darkslateblue;
  animation: swim 2s linear infinite alternate;
  transform-origin: top;
}


.detail2 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 30px;
  border-bottom: 8px solid #333;
  border-right: 8px solid #333;
  transform: rotateZ(-50deg);
}

.detail2::before {
  content: "";
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  bottom: 20px;
  right: 10px;
  border-bottom: 8px solid #333;
  border-right: 8px solid #333;
}

.detail2::after {
  content: "";
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  bottom: 5px;
  right: 0;
  border-bottom: 8px solid #333;
  border-right: 8px solid #333;
}

button {
    cursor: pointer;
    outline: 0;
    width: 180px;
    height: 48px;
    border-radius: 8px;
    background-color: #2C3138;
    margin-top: 90px;
    overflow: hidden;
    -webkit-transform: scale(.7);
            transform: scale(.7);
}

button::after {
    content: "";
    position: relative;
    top: -40px;
    display: block;
    width: 48px;
    height: 107%;
    background-color: #000;
    margin-top: -1px;
    margin-left: -7px;
    border-radius: 6px 0 0 6px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxN3B4IiB2aWV3Qm94PSIwIDAgMTQgMTciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUxLjEgKDU3NTAxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJEZXNrdG9wLUhELUNvcHktMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwOS4wMDAwMDAsIC0xMDA4LjAwMDAwMCkiIGZpbGw9IiNGOUZDRkYiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQ3LjAwMDAwMCwgNDk5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTYtQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDYuMDAwMDAwLCA0OTUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImljX2ZpbGVfZG93bmxvYWRfYmxhY2tfMjRweC0oMSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2LjAwMDAwMCwgOC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE0LDEyIEwxMCwxMiBMMTAsNiBMNCw2IEw0LDEyIEwwLDEyIEw3LDE5IEwxNCwxMiBaIE0wLDIxIEwwLDIzIEwxNCwyMyBMMTQsMjEgTDAsMjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
    background-repeat: no-repeat;
    background-position: center;
}

button::before {
    content: "";
    display: block;
    width: 48px;
    height: 46px;
    margin-left: -7px;
    margin-top: -1px;
    -webkit-transition: all 200ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
    transition: all 200ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
}

.box-4
{
	align-content: center;
	
}
.box-4:hover button::before {
    width: 120%;
    opacity: 1;
    background-color: #FF6500;
}

/*
.container {
	
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 80vw;
    height: 100vh;
    margin-left: 6vw;
    -webkit-transform: rotateX(23deg) rotateZ(-9deg) rotateY(15deg) scale3d(1, 1, -0.9);
            transform: rotateX(23deg) rotateZ(-9deg) rotateY(15deg) scale3d(1, 1, -0.9);
}
*/

.box {
    align-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
    will-change: transform;
    pointer-events:none;

}
.cover
{
  margin: 90px auto auto auto;
  width: 400px;
  pointer-events:none;

}

.box:hover .cover .planet{
    -webkit-transform: translateY(-14px) scale(1.04);
            transform: translateY(-14px) scale(1.04);		
}

.box:hover .cover .Solirislogo{
    -webkit-transform: translateY(-14px) scale(1.06);
            transform: translateY(-14px) scale(1.06);		
}


.planet
{
	align-content: center;
    -webkit-transition: all 600ms ease-in-out;
    transition: all 600ms ease-in-out;
    will-change: transform;
}

.Solirislogo
{
	align-content: center;
    -webkit-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
    will-change: transform;

}

.itchybtn{
			pointer-events:all;
	    will-change:opacity;
}