section.banner{
    width: 100%;
    height: 480px;
    position: relative;
    background-color: var(--color-main);
    overflow: hidden;
  }
  section.banner img{
    position: absolute;
    right: 2em;
    bottom: 0px;
    pointer-events: none;
    z-index: 1;
  }
  section.banner .background-banner{
    width: 100%;
    height: 100%;
  }
  section.banner .banner-content{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0) 100%);
  }
  section.banner .banner-content .banner-text{
    max-width: var(--max-width);
    padding: 0px 1em;
    font-family: var(--font-face);
    text-align: center;
    max-width: 52em;
  }
  section.banner .banner-content .banner-text h1{
    font-family: var(--h1-font-face);
    font-weight: 700;
  }
  section.banner .banner-content .banner-text p{
    font-size: 1em;
  }
  section.banner .banner-content .banner-text p.banner-excerpt{
    color: var(--color-orange);
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 2px;
  }
  section.banner .banner-content h1, section.banner .banner-content p{
    color: #fff;
  }
  #breadcrumbs a{
    color: var(--color-orange);
    transition: 0.5s ease;
  }
  #breadcrumbs a:hover{
    color: var(--color-white);
  }
  @media (max-width: 768px) {
    section.banner{
      height: 480px;
    }
    section.banner img{
      position: absolute;
      right: 2em;
      bottom: 0px;
      pointer-events: none;
      z-index: 0;
      width: calc(100% - 4em);
      max-width: 501px;
      max-height: 398px;
    }
    section.banner .banner-content{
      justify-content: flex-end;
      padding-bottom: 2em;
    }
    section.banner .banner-content .banner-text{
      margin-bottom: 2em;
    }
  }
  @keyframes rotate{
    0%{
      transform:perspective(500px) rotateZ(0deg) rotateX(0deg) rotateY(0);
    } 
    100%{
      transform:perspective(500px) rotateZ(0deg) rotateX(0deg) rotateY(-360deg);
    } 
  }
  .stars{
    transform:perspective(500px);
    transform-style:preserve-3d;
    position:absolute;
    bottom:0;
    perspective-origin:50% 100%;
    left:0px;
    width: 100%;
    height: 100%;
  }
  .star{
    width:3px;
    height:3px;
    background: var(--color-orange);
    border-radius:100%;
    position:absolute;
    top:0;
    left:0;
    transform-origin:0 0 -300px;
    transform:translate3d(0,0,-300px);
    backface-visibility:hidden;
    z-index: 0;
  }