/* Preloader */
.containerNg-preloader {
	align-items:center; cursor:none; display:flex; height:100%;
  justify-content:center; position:fixed; left:0; top:0; width:100%; z-index:900010;
}

.containerNg-preloader .animation-preloader {
	position:absolute; z-index: 100010;
}

/* Spinner Loading */
.containerNg-preloader .animation-preloader .spinner {
  animation: spinner 1s infinite linear;
	border-radius: 50%;  border: 10px solid rgba(0, 0, 0, 0.2);
  border-top-color: green; /* It is not in alphabetical order so that you do not overwrite it */
  height: 9em;  margin: 0 auto 3.5em auto; width: 9em;
}

/* Loading text */
.containerNg-preloader .animation-preloader .txt-loading {
  font: bold 5em 'Montserrat', sans-serif;
	text-align: center;	user-select: none;
}

.containerNg-preloader
.animation-preloader .txt-loading .characters:before {
  animation: characters 4s infinite;  color: blue;
  content: attr(preloader-text);  left: 0;
  opacity: 0;  position: absolute;  top: 0;
  transform: rotateY(-90deg);
}

.containerNg-preloader
.animation-preloader .txt-loading .characters {
	color: green;	position: relative;
}

.containerNg-preloader
.animation-preloader
.txt-loading .characters:nth-child(2):before {
  animation-delay: 0.2s;
}

.containerNg-preloader
.animation-preloader
.txt-loading .characters:nth-child(3):before {
  animation-delay: 0.4s;
}

.containerNg-preloader
.animation-preloader
.txt-loading .characters:nth-child(4):before {
  animation-delay: 0.6s;
}

.containerNg-preloader
.animation-preloader
.txt-loading .characters:nth-child(5):before {
  animation-delay: 0.8s;
}

.containerNg-preloader
.animation-preloader
.txt-loading .characters:nth-child(6):before {
  animation-delay: 1s;
}

.containerNg-preloader
.animation-preloader
.txt-loading .characters:nth-child(7):before {
  animation-delay: 1.2s;
}

.containerNg-preloader .loader-section {
  background-color: #212121 !important;  height: 100%;
  position: fixed;  top: 0;  width: calc(50% + 1px);
}

.containerNg-preloader .loader-section.section-left {
  left: 0;
}

.containerNg-preloader .loader-section.section-right {
  right: 0;
}

/* Fade effect on loading animation */
.loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}

/* Curtain effect */
.loaded .loader-section.section-left {
  transform: translateX(-101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}

.loaded .loader-section.section-right {
  transform: translateX(101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}

/* Animation of the preloader */
@keyframes spinner {
to {
	transform: rotateZ(360deg);
 }
}

/* Animation of letters loading from the preloader */
@keyframes characters {
  0%,
  75%,
  100% {
 opacity: 0;
 transform: rotateY(-90deg);
  }
  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

/* Laptop size back (laptop, tablet, cell phone) */
@media screen and (max-width: 767px) {
	/* Preloader */
	/* Spinner Loading */
	.containerNg-preloader .animation-preloader .spinner {
	height: 8em;
	width: 8em;
	}
	/* Text Loading */
	.containerNg-preloader .animation-preloader .txt-loading {
	  font: bold 3.5em 'Montserrat', sans-serif;
 }
}

@media screen and (max-width: 500px) {
	/* Prelaoder */
	/* Spinner Loading */
	.containerNg-preloader .animation-preloader .spinner {
	height: 7em;
	width: 7em;
	}
	/*Loading text */
	.containerNg-preloader .animation-preloader .txt-loading {
	  font: bold 2em 'Montserrat', sans-serif;
	}
}

.origin{
text-decoration:none;
font-size:45px;
}

.oasBackground {
background: rgba(255, 255, 255, 0.8);background-image: url('../../img/session_background.png');
background-repeat: no-repeat;
background-size: cover;
padding-bottom:100px;
}

 #shape .lol { height:200px; width:200px;}

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform:rotateY(0);
  }
  to {-webkit-transform:rotateY(-360deg);
  }
}

@-moz-keyframes spin {
    from {

    -moz-transform:rotateY(0);

  }
  to {
      -moz-transform:rotateY(-360deg);
  }

}

#wrapper{
    width:600;
    margin:0 auto;
    -webkit-perspective: 800;
    margin:150px auto 0 auto;
    -webkit-perspective-origin: 50% 90px;
    -webkit-transition:-webkit-perspective,1s;
    -moz-perspective-origin: 50% 90px;
    -moz-transition:-webkit-perspective,1s;
}

#shape {
  margin:0 auto;
  height:200px;
  width:200px;
  -webkit-transform-style:preserve-3d;
  -webkit-animation: spin 8s infinite linear;
  -moz-transform-style:preserve-3d;
  -moz-animation: spin 8s infinite linear;

}

.plane {
      position:absolute;
       height:200px;
      width:200px;
      background-color:rgba(0,0,0, 0.6);
      text-align:center;
      font-size:10em;
      color:white;

    }

#shape > .p1 {
  -webkit-transform:translateZ(250px);
  -moz-transform:translateZ(250px);
  color:red;
  text-shadow 1px 1px 1px black;
}
#shape > .p2 {
  -webkit-transform:rotateY(45deg) translateZ(250px);
   -moz-transform:rotateY(45deg) translateZ(250px);
}
#shape > .p3 {
  -webkit-transform:
    rotateY(90deg) translateZ(250px);
   -moz-transform:
    rotateY(90deg) translateZ(250px);
}
#shape > .p4 {
  -webkit-transform: rotateY(135deg) translateZ(250px);
  -moz-transform: rotateY(135deg) translateZ(250px);
}
#shape > .p5 {
  -webkit-transform:rotateY(180deg) translateZ(250px);
  -moz-transform:rotateY(180deg) translateZ(250px);
  color:red;
  text-shadow 1px 1px 1px black;
}
#shape > .p6 {
  -webkit-transform:rotateY(225deg)
    translateZ(250px);
  -moz-transform:rotateY(225deg)
    translateZ(250px);
}
#shape > .p7 {
  -webkit-transform:rotateY(270deg)
    translateZ(250px);
   -moz-transform:rotateY(270deg)
    translateZ(250px);
}
#shape > .p8 {
  -webkit-transform:rotateY(315deg)
    translateZ(250px);
   -moz-transform:rotateY(315deg)
    translateZ(250px);
}

#wrapper:hover {
  -webkit-perspective-origin: 50% -250px;
  -moz-perspective-origin: 50% -250px;
};