html, body {
    height: 100%;
}

body {
    background-color: black;
}

.logo {
  width: 100%;
  max-width: 350px;
  height: 100%;
  max-height: 350px;
  /* background: no-repeat url("../images/m2m.png");
  background-size: cover; */
  background-image:url('../images/m2m.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;

  opacity: 0;
  animation: fade 2s forwards;
  animation-delay: .5s;
}

.logoText {
  position: relative;
  width: 100%;
  height: 50px;
  top: 100%;
  font-size: 26px;
  text-align: center;
  opacity: 0;
  animation: fade 2s forwards;
  animation-delay: 1s;
}

.logoText .m2 {
  color: white;
}

.logoText .construction {
  color: #2aa7dd;
}

.panel1, .panel2 {
  position: absolute;
  width:80%;
  height:50%;
  left: 10%
}

.panel1 {
  animation: 1s ease-out 0s  slidepanel1;
}

.panel2 {
  animation: 1s ease-out 0s  slidepanel2;
}


.panel1_ {
  position:absolute;
  top:50px;
  width:100%;
  height:35px;
  background-image:url('../images/panel1.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;

}
.panel2_ {
  position:absolute;
  bottom:-100%;
  margin-bottom: 50px;
  width:100%;
  height:35px;
  background-image:url('../images/panel2.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

@keyframes fade {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes slidepanel1 {
  0% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slidepanel2 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}



@media (min-width: 576px) {

}

@media (min-width: 768px) {

}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {
  .logo {
    max-width: 640px;
    max-height: 640px;
  }
  .logoText {
    font-size: 36px;
    bottom: 10%;
  }
}