/* on PC */
@media screen and (min-width: 550px) {
    .hero-banner {
      /* top: 40%;
      left: 40%;*/
    }
  }
  
  /* on Mobile */
  @media screen and (max-width: 550px) {
    .hero-banner {
      /*top: 25%;
      left: 20%;*/
    }
  }

  .body{
    width: 100%;
  }
  .hero {
    position: relative;
  }
  
  .hero img {
    display: block;
    width: 100%;
    height: auto;
  }

  .hero-banner{
    position: absolute;
    text-align: center;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
  }

  .maintenance{
    background-color: black;
  }

  .fade-in-hero {
    animation: fadeIn 1s;
    -webkit-animation:;
    -moz-animation: fadeIn 1s;
    -o-animation: fadeIn 1s;
    -ms-animation: fadeIn 1s;
  }
  
  .fade-in-text {
      animation: fadeIn 1s;
      -webkit-animation: fadeIn 1s;
      -moz-animation: fadeIn 1s;
      -o-animation: fadeIn 1s;
      -ms-animation: fadeIn 1s;
  }
    
    .fade-in-img {
      animation: fadeIn 1s;
      -webkit-animation: fadeIn 1s;
      -moz-animation: fadeIn 1s;
      -o-animation: fadeIn 1s;
      -ms-animation: fadeIn 1s;
  }
  
    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    @-moz-keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    @-webkit-keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    @-o-keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    @-ms-keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }