eventoL/eventoL

@import '../../styles/index';

.hero {
  background-size: cover;
  margin-bottom: -22vh;
  min-height: 800px;
  position: relative;
  width: 100%;

  .btn-create-event {
    border-radius: 15px;
    font-weight: bold;
    line-height: 1.4;
    padding: 10px 15px;
  }

  .content {
    -ms-flex: 1;
    -webkit-box-flex: 1;
    box-sizing: border-box;
    flex: 1;
    position: relative;
    text-align: center;
    top: 20vh;
    z-index: 5;

    .logo {
      max-height: 50vh;
      max-width: 250px;
      z-index: 4;
    }

    h2 {
      color: $text-color;
      font-size: 27px;
      font-weight: unset;
    }

    p {
      color: $text-color;
      width: 100%;
    }

    .button-wrapper {
      @extend %flex-element;
      margin-top: 30px;
      width: 400px;

      .button:first-child {
        margin-right: 10px;
      }
    }
  }

  .overlay {
    -webkit-transform: rotate(180deg);

    // FF3.6-15
    background: -webkit-linear-gradient(top, $gradient-gray-color 20%, $gradient-end-rgba 100%);
    // Chrome10-25, Safari5.1-6
    background: linear-gradient(to bottom, $gradient-gray-color 20%, $gradient-end-rgba 100%);
    // W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );

    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: rotate(180deg);
    width: 100%;
    z-index: 3;
  }

}