html,
body {
  height: 100vh;
  max-height: 100dvh;
  max-width: 100vw;
  background: #000;
  overflow: hidden;
}

.variable {
  width: 100%;
  position: absolute;
  display: inline-flex;
  top: 0px;
  background: #ccc;
  justify-content: space-around;
  display: none;
}

.wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100vh;
  max-height: 100dvh;
  max-width: 100vw;
}

area {
  cursor: pointer;
}

.start-page {
  position:absolute;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#start-page2 {
  display: none;
  position: fixed;
  margin-bottom:-300%;
}

#start-page2b {
  display: none;
}

#start-page3 {
  display: none;
  position: fixed;
  margin-bottom:-300%;
}

#start-page4 {
  display: none;
}

#start-page4b {
  display: none;
}

#start-page5 {
  display: none;
  position: fixed;
  margin-bottom:-300%;
}

#start-page5b {
  display: none;
}

#start-page6 {
  display: none;
}

#start-page7 {
  display: none;
}

#start-page7b {
  display: none;
}

#start-page8 {
  display: none;
  position: fixed;
  margin-bottom:-300%;
}

#start-page8b {
  display: none;
}

#start-page9 {
  display: none;
  position: fixed;
  margin-bottom:-300%;
}

#start-page10 {
  display: none;
}

#start-page10b {
  display: none;
}

#start-page11 {
  display: none;
  position: fixed;
  margin-bottom:-300%;
}

#start-page11b {
  display: none;
}

#start-page12 {
  display: none;
  position: fixed;
  margin-bottom:-300%;
}

#start-page13 {
  display: none;
}

#start-page14 {
  display: none;
}

#start-page15 {
  display: none;
}

#start-page15b {
  display: none;
}

#start-page16 {
  display: none;
  position: fixed;
  margin-bottom:-300%;
}

#start-page16b {
  display: none;
}

#start-page17 {
  display: none;
}

#start-page18 {
  display: none;
}

#start-page19 {
  display: none;
}

#start-page20 {
  display: none;
}

.background-intro {
  max-height: 100dvh;
  max-width: 100vw;
  cursor: pointer;
}

.background-intro-2 {
  max-height: 100dvh;
  max-width: 100vw;
  cursor: pointer;
}

.background-image {
  max-height: 100dvh;
  max-width: 100vw;
}

.interface-base {
  width: 100%;
}

.rules {
  max-height: 100dvh;
  max-width: 100vw;
}

.rules-none {
  display:none;
  position: absolute;
}

#rules-page {
  display:none;
}

.arrow {
  position: absolute;
  top: 50%;
  right: 5%;
  width: 8%;
  cursor: pointer;
}

.background-video {
  max-height: 100dvh;
  max-width: 100vw;
}

video {
  background-color: black;
  max-height: 100dvh;
  max-width: 100vw;
  display: none;
}

#countdown {
  font-size: 2em;
  background-color: white;
}

.skip-button {
  position: absolute;
  top: 1.7%;
  right: 1%;
  width: 5%;
  cursor: pointer;
  opacity: 0.2;
  display: none;
}

.skip-button:hover {
  opacity: 1;
}

.img-magnifier-glass {
	position: absolute;
	border: 3px solid #000;
	border-radius: 50%;
	cursor: none;
	width: 100px;
	height: 100px;
  -webkit-box-shadow: 0px 0px 8px 2px #000000; 
  box-shadow: 0px 0px 8px 2px #000000;
  z-index: 3;
}

.orange {
  color: #fef4e9;
  border: solid 1px #da7c0c;
  background: #f78d1d;
  background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
  background: -moz-linear-gradient(top, #faa51a, #f47a20);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}

.orange:hover {
  background: #e5892d;
}

.glink_button {
  display: inline-block;
  vertical-align: baseline;
  margin: 0 2px;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 18px/100% Arial, Helvetica, sans-serif;
  font-size: 18px;
  padding: .5em 1em .55em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.glink_button:hover {
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.8);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,.8);
  box-shadow: 0 1px 1px rgba(0,0,0,.8);
}

.start-button {
  position: absolute;
  cursor: pointer;
  z-index: 99999999;
  font-size: 1.8vmin;
  font-family: Tahoma;
  left: 43%;
  top: 74.5%;
  width: 14.2%;
  height: 7%;
  display: none;
}

.play_button {
  display: inline-block;
  vertical-align: baseline;
  margin: 0 2px;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 18px/100% Arial, Helvetica, sans-serif;
  font-size: 18px;
  padding: .5em 1em .55em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.play_button:hover {
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.8);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,.8);
  box-shadow: 0 1px 1px rgba(0,0,0,.8);
}

.play-button {
  position: absolute;
  cursor: pointer;
  z-index: 99999999;
  font-size: 1.8vmin;
  font-family: Tahoma;
  left: 7%;
  top: 91%;
  width: 18%;
  height: 5%; 
  display: none;
}

.outsidetop {
  margin-top: -350%;
  transition: margin 1.5s;
}

.insidetop {
  position:absolute !important;
  margin-bottom: 0% !important;
  transition: margin 1.5s !important;
}

.outsideright {
  margin-right: -250%;
  transition: margin .9s;
}

.insideright {
  position:absolute !important;
  margin-right: 0% !important;
  transition: margin 1.5s !important;
}

.eldorado-project {
  position: absolute;
  top: 3%;
  left: 9%;
  width: 23%;
  display: none;
}

.tutorial {
  position: absolute;
  top: 34%;
  left: 73%;
  width: 17%;
  display: none;
}

.blue-text {
  position: absolute;
  top: 10%;
  left: 64.7%;
  width: 7.6%;
  display: none;
}

.circle-orange {
  position: absolute;
  top: 8.5%;
  left: 2.3%;
  width: 5.8%;
  display: none;
}

.line-orange {
  position: absolute;
  top: 11.5%;
  left: 2%;
  width: 34.5%;
  display: none;
}

.frame-orange {
  position: absolute;
  top: 5.8%;
  left: 38.8%;
  width: 36.5%;
  display: none;
}

.map {
  position: absolute;
  top: 6%;
  left: 39%;
  width: 36%;
  display: none;
}

.signal {
  position: absolute;
  top: 24%;
  left: 71%;
  width: 4%;
  display: none;
}

.point-blue {
  position: absolute;
  top: 14%;
  left: 39.7%;
  width: 4%;
  display: none;
}

.point-blue-4 {
  position: absolute;
  top: 36%;
  left: 49.4%;
  width: 4%;
  display: none;
}

.point-blue-6 {
  position: absolute;
  top: 35%;
  left: 67.2%;
  width: 4%;
  display: none;
}

.point-blue-8 {
  position: absolute;
  top: 24%;
  left: 71%;
  width: 4%;
  display: none;
}

.blue-text-2 {
  position: absolute;
  top: 60%;
  left: 36%;
  width: 6%;
  display: none;
}

.blue-text-3 {
  position: absolute;
  top: 51%;
  left: 85%;
  width: 6.5%;
  display: none;
}

.line-blue {
  position: absolute;
  top: 46%;
  left: 77%;
  width: 19%;
  display: none;
}

.mini-rectangle {
  position: absolute;
  top: 58.8%;
  left: 77.8%;
  width: 17.5%;
  display: none;
}

.scout-team {
  position: absolute;
  top: 54.5%;
  left: 78%;
  width: 10%;
  display: none;
}

.team {
  position: absolute;
  top: 59%;
  left: 78%;
  width: 17%;
  display: none;
}

.gif-liquid {
  position: absolute;
  top: 6%;
  left: 40%;
  width: 24%;
  display: none;
}

.gif-text {
  position: absolute;
  top: 45%;
  left: 44%;
  width: 23%;
  display: none;
}

.gif-gps {
  position: absolute;
  top: 17.5%;
  left: 8%;
  width: 27%;
  display: none;
}

.gif-audio {
  position: absolute;
  top: 47.3%;
  left: 82.4%;
  width: 6.3%;
  display: none;
}

.gif-scanner {
  position: absolute;
  top: 60%;
  left: 43%;
  width: 21%;
  display: none;
}

.gif-spectro {
  position: absolute;
  top: 31%;
  left: 77%;
  width: 14%;
  display: none;
}

.gif-circle {
  position: absolute;
  top: 8.5%;
  left: 76%;
  width: 23%;
  display: none;
}

.gif-audio-blue {
  position: absolute;
  top: 59%;
  left: 65%;
  width: 12%;
  display: none;
}

.gif-connections {
  position: absolute;
  top: 68%;
  left: 65.5%;
  width: 11.5%;
  display: none;
}

.gif-connections-7 {
  position: absolute;
  top: 58%;
  left: 65%;
  width: 14%;
  display: none;
}

.gif-sequencer {
  position: absolute;
  top: 69%;
  left: 78.5%;
  width: 14.5%;
  display: none;
}

.gif-worms {
  position: absolute;
  top: 30%;
  left: 77%;
  width: 11.5%;
  display: none;
}

.gif-cubeline {
  position: absolute;
  top: 6%;
  left: 60%;
  width: 15%;
  display: none;
}

.gif-cubeline-5 {
  position: absolute;
  top: 5%;
  left: 60%;
  width: 14%;
  display: none;
}

.gif-cubeline-5b {
  position: absolute;
  top: 6%;
  left: 69%;
  width: 6%;
  display: none;
}

.gif-cubeline-5c {
  position: absolute;
  top: 16%;
  left: 69%;
  width: 6%;
  display: none;
}

.gif-cubeline-5d {
  position: absolute;
  top: 26%;
  left: 69%;
  width: 6%;
  display: none;
}

.gif-square {
  position: absolute;
  top: 58%;
  left: 43%;
  width: 12%;
  display: none;
}

.gif-rotation {
  position: absolute;
  top: 55%;
  left: 39%;
  width: 14%;
  display: none;
}

.gif-rotation-5 {
  position: absolute;
  top: 30%;
  left: 81%;
  width: 10%;
  display: none;
}

.gif-rubik {
  position: absolute;
  top: 5%;
  left: 60%;
  width: 16%;
  display: none;
}

.gif-waves {
  position: absolute;
  top: 31%;
  left: 83%;
  width: 9%;
  display: none;
}

.gif-cube {
  position: absolute;
  top: 29.8%;
  left: 78%;
  width: 12%;
  display: none;
}

.jim-afro {
  position: absolute;
  top: 8.5%;
  left: 12%;
  width: 17%;
  display: none;
}

.communication1 {
  position: absolute;
  top: 50%;
  left: 7%;
  width: 29%;
  display: none;   
  font-size: 13px;
  font-size: min(max(1.8vh, 13px), 6vh);
  color: #6ca1b7;
  white-space: pre-line;
  overflow: auto;
  height: 42%;
}

.communication2 {
  position: absolute;
  top: 50%;
  left: 7%;
  width: 29%;
  display: none;   
  font-size: 13px;
  font-size: min(max(1.8vh, 13px), 6vh);
  color: #ff200c;
  white-space: pre-line;
  overflow: auto;
  height: 42%;
}

.jim-afro-angle {
  position: absolute;
  cursor: not-allowed;
  top: 1%;
  left: 94.5%;
  width: 5%;
  display: none;
}

.impossible {
  position: absolute;
  top: 1.52%;
  left: 77.3%;
  width: 8.63%;
  display: none;
}

.help-light-2 {
  position: absolute;
  top: 22%;
  left: 13%;
  width: 15%;
  display: none;
}

.call-jim {
  position: absolute;
  top: 1.5%;
  left: 87%;
  width: 7%;
  display: none;
}

.up-arrow {
  position: absolute;
  top: 8.5%;
  left: 93%;
  width: 3.5%;
  display: none;
}

.help-light {
  position: absolute;
  top: 0%;
  left: 77%;
  width: 10%;
  display: none;
}

.help-light-2-used {
  position: absolute;
  top: 0%;
  left: 77%;
  width: 10%;
  display: none;
}

.help-light-1-used {
  position: absolute;
  top: 0%;
  left: 77%;
  width: 10%;
  display: none;
}

.help-light-0-used {
  position: absolute;
  top: 0%;
  left: 77%;
  width: 10%;
  display: none;
}

.help-light-3-used {
  position: absolute;
  top: 0%;
  left: 77%;
  width: 10%;
  display: none;
}

.help-light-2b {
  position: absolute;
  top: 0%;
  left: 79%;
  width: 6%;
  display: none;
}

.help-light-2-1-used {
  position: absolute;
  top: 0%;
  left: 79%;
  width: 6%;
  display: none;
}

.help-light-2-2-used {
  position: absolute;
  top: 0%;
  left: 79%;
  width: 6%;
  display: none;
}

.reference-rectangle {
  position: absolute;
  top: 8.5%;
  left: 2.4%;
  width: 36%;
  display: none;
}

.various-sheets {
  position: absolute;
  top: 13%;
  left: 6%;
  width: 28%;
  display: none;
}

.tutorial-sheets {
  position: absolute;
  top: 16%;
  left: 6%;
  width: 28%;
  display: none;
}

.game-picture-1 {
  position: absolute;
  top: 5.5%;
  left: 42%;
  width: 41%;
  display: none;
}

.line-frame-1 {
  position: absolute;
  top: 32.5%;
  left: 34.6%;
  width: 22.5%;
  display: none;
}

.find-1 {
  position: absolute;
  top: 18.5%;
  left: 5.9%;
  width: 29%;
  display: none;
}

.game-picture-2 {
  position: absolute;
  top: 7%;
  left: 41%;
  width: 46.7%;
  display: none;
}

.find-2 {
  position: absolute;
  top: 16%;
  left: 8%;
  width: 28%;
  display: none;
}

.line-frame-2 {
  position: absolute;
  top: 29%;
  left: 35.9%;
  width: 19%;
  display: none;
}

.game-picture-3 {
  position: absolute;
  top: 5%;
  left: 41%;
  width: 40%;
  display: none;
}

.line-frame-3 {
  position: absolute;
  top: 27%;
  left: 34.6%;
  width: 20%;
  display: none;
}

.find-3 {
  position: absolute;
  top: 18.5%;
  left: 5.9%;
  width: 29%;
  display: none;
}

.game-picture-4 {
  position: absolute;
  top: 6%;
  left: 37%;
  width: 39%;
  display: none;
}

.find-4 {
  position: absolute;
  top: 16%;
  left: 9%;
  width: 26%;
  display: none;
}

.find-4b {
  position: absolute;
  top: 37%;
  left: 8%;
  width: 28%;
  display: none;
}

.line-frame-4 {
  position: absolute;
  top: 27%;
  left: 34.6%;
  width: 19%;
  display: none;
}

.game-picture-5 {
  position: absolute;
  top: 6%;
  left: 39.7%;
  width: 42%;
  display: none;
}

.find-5 {
  position: absolute;
  top: 19%;
  left: 2.7%;
  width: 35%;
  display: none;
}

.line-frame-5 {
  position: absolute;
  top: 26%;
  left: 37.5%;
  width: 18.5%;
  display: none;
}

.game-picture-6 {
  position: absolute;
  top: 8%;
  left: 41%;
  width: 36%;
  display: none;
}

.line-frame-6 {
  position: absolute;
  top: 27%;
  left: 33.5%;
  width: 25%;
  display: none;
}

.find-6 {
  position: absolute;
  top: 17.5%;
  left: 7%;
  width: 27%;
  display: none;
}

.find-7 {
  position: absolute;
  top: 57%;
  left: 64%;
  width: 20%;
  display: none;
}

.line-frame-7 {
  position: absolute;
  top: 68%;
  left: 43.5%;
  width: 21%;
  display: none;
}



.team-support-button-1 {
  position: absolute;
  top: 8.5%;
  left: 76.9%;
  width: 14%;
  display: none;
  cursor: pointer;
}

.team-support-button-2 {
  position: absolute;
  top: 16.5%;
  left: 76.9%;
  width: 14%;
  display: none;
  cursor: pointer;
}

.team-support-button-3 {
  position: absolute;
  top: 24.5%;
  left: 76.9%;
  width: 14%;
  display: none;
  cursor: pointer;
}

#team-support-deactivate-1 {
  cursor: not-allowed;
}

#team-support-deactivate-2 {
  cursor: not-allowed;
}

#team-support-deactivate-3 {
  cursor: not-allowed;
}

.code-bar {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  z-index: 2;
  display:none;
}

.text-help {
  position: absolute;
  top: 5%;
  left: 25%;
  width: 50%;
  height: 80%;
  overflow: auto;
  display: none;
  z-index: 9;
}

.help {
  font-size: calc(0.5rem + ((2.5vw - 0.48rem) * 1.3889));
  line-height: calc(1rem + ((2.5vw - 0.48rem) * 1.3889));
  text-align: left;
  font-weight: normal;
  margin-bottom: 0rem;
  color: #000;
}

.team-support-button-close {
  position: absolute;
  top: 0%;
  left: 77%;
  width: 5%;
  display: none;
  cursor: pointer;
  z-index: 9;
}

.team-support-button-img-0 {
  position: absolute;
  top: 80%;
  left: 42%;
  width: 15%;
  display: none;
  z-index: 9;
  cursor: pointer;
}

.team-support-button-img {
  position: absolute;
  top: 86%;
  left: 42%;
  width: 15%;
  display: none;
  z-index: 9;
  cursor: pointer;
}


.tutorial1 {
  position: absolute;
  top: 9.5%;
  left: 9%;
  width: 21%;
  display: none;
}

.manual {
  position: absolute;
  top: 34%;
  left: 73%;
  width: 17%;
  display: none;
}

.zoom-rep-0 {
  position: absolute;
  top: 3.7%;
  left: 37.3%;
  width: 60%;
  z-index: 1;
  display: none;
}

.zoom-close {
  position: absolute;
  top: 32.7%;
  left: 92%;
  width: 5%;
  z-index: 2;
  display: none;
  cursor: pointer;
  height: 10%;
}

.code-div {
  position: absolute;
  display: inline-block;
  top: 84%;
  width: 100%;
  display: none;
}

.code-label {
  color: #ffffff;
  font-weight: bold;
  margin-right: 20px;
  margin-left: 45%;
}

.code-input {
  color:#000000;
  background: #ffffff;
  width: 31%;
  margin-right: 10px;
}

.code-input:focus {
  border-color: #FFC107;
  outline: transparent;
}

.code-button {
  background: #52E44E;
  border: 2px solid #52E44E;
  border-radius: 4px;
  min-width: 9%;
  letter-spacing: .2rem;
  font-weight: bold;
  padding: 0 10px;
  margin-right: 2%;
}

.code-button:hover {
  background: #2ad824;
}

.message-div {
  position: absolute;
  display: inline-block;
  top: 84%;
  width: 100%;
  display: none;
}

.message-label {
  color: #ffffff;
  font-weight: bold;
  margin-right: 20px;
  margin-left: 45%;
}

.message-input {
  color:#000000;
  background: #ffffff;
  width: 29%;
  margin-right: 10px;
}

.message-input:focus {
  border-color: #FFC107;
  outline: transparent;
}

.message-button {
  background: #52E44E;
  border: 2px solid #52E44E;
  border-radius: 4px;
  min-width: 9%;
  letter-spacing: .2rem;
  font-weight: bold;
  padding: 0 10px;
  margin-right: 2%;
}

.message-button:hover {
  background: #2ad824;
}

@media only screen and (min-width: 1920px) {
  .background-intro {
    height: 3240px;
  }
  .background-intro-2 {
    height: 3240px;
  }
  .background-image {
    height: 3240px;
  }
  .background-video {
    height: 3240px;
  }
}

@media only screen and (max-width: 822px) {
  .code-div {
    top: 81%;
  }
  .code-label {
    font-size: 10px;
    margin-right: 5px;
    margin-left: 36%;
  }
  .code-input {
    font-size: 10px;
    margin-right: 5px;
    height: 16px;
  }
  .code-button {
    font-size: 10px;
    padding: 0 0 0 2px;
    letter-spacing: .1rem;
    border: 0px solid #52E44E;
    height: 15px;
  }
  .message-div {
    top: 81%;
  }
  .message-label {
    font-size: 10px;
    margin-right: 5px;
    margin-left: 36%;
  }
  .message-input {
    font-size: 10px;
    margin-right: 5px;
    height: 16px;
  }
  .message-button {
    font-size: 10px;
    padding: 0 0 0 2px;
    letter-spacing: .1rem;
    border: 0px solid #52E44E;
    height: 15px;
  }
  .play_button {
    padding: 0px;
  }
  .glink_button {
    padding: 0px;
  }
}

@media screen and (orientation:landscape)
and (max-height: 465px) {
  .code-div {
    top: 83%;
  }
  .code-label {
    font-size: 12px;
    margin-right: 5px;
    margin-left: 44%;
  }
  .code-input {
    font-size: 10px;
    margin-right: 5px;
    height: 16px;
  }
  .code-button {
    font-size: 12px;
    padding: 0 3px;
    letter-spacing: .1rem;
    border: 0px solid #52E44E;
    height: 18px;
  }
  .message-div {
    top: 83%;
  }
  .message-label {
    font-size: 12px;
    margin-right: 5px;
    margin-left: 40%;
  }
  .message-input {
    font-size: 10px;
    margin-right: 5px;
    height: 16px;
  }
  .message-button {
    font-size: 12px;
    padding: 0 3px;
    letter-spacing: .1rem;
    border: 0px solid #52E44E;
    height: 18px;
  }
  .play_button {
    padding: 0px;
  }
  .glink_button {
    padding: 0px;
  }
}

.shake {
  animation: shake 0.92s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.blink-image {
    -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
    animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
 
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
 
@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 

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

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 1; }
    to   { opacity: 0; }
}