#events{
  #eventMap{
    width:100%;
    position:relative;
    z-index:0;
    height:90vh;
    height:calc(100vh - 135px);


    @media screen and (max-width:768px){
      height:calc(100vh - 135px);
    }


  }

  .viewListButton{
    float:left;
  }

  .eventMapLabel{
    position:relative;
    display:block;
    padding:5px;
    padding-right:33px;
    cursor:pointer;

    svg{
      width:16px;
      position:absolute;
      top:10px;
      right:5px;
      color:#ccc;
      top:calc(50% - 8px);
    }

    &.lineTop{
      border-top:1px solid #ececec;

    }


    text-align:left;

    b{
      display:block;
    }

  }

  h1#mapDateHeader{
    display:block;
    text-align:left;
    font-size:30px;
    font-weight:bold;
    padding:0px;
    margin:5px;
    color:#184787;
    text-transform:uppercase;
    line-height:1em;
    border-left:5px solid #184787;
    padding-left:10px;
    margin-left:0px;


    small{
      text-transform:none;
      display:block;
    }
  }

  .mapHeader{
    border-top:1px solid #fcfcfc;
    margin-left:auto;
    margin-right:auto;
    display:block;
    width:100%;
    transition:height 0.3s ease-in-out;

    @media screen and (max-width:768px){
      height:158px;
    }



    .mapHeaderHolder{
      display:block;
      width:1200px;
      max-width:100%;
      margin-left:auto;
      margin-right:auto;
    }

    z-index:9999;

    .spacer{
      transition:height 0.3s ease-in-out;
    }

    &.stick{
      position:fixed;
      left:0px;
      z-index:1;
      width:100%;
      background-color:#fff;
      border-bottom:1px solid #ececec;

      @media screen and (max-width:768px){

        height:92px;

        .dateHeaderButton{
          span{
            display:none;
          }
        }

        #mapDateHeader{
          font-size:16px;
          small{
            display:none;

          }
        }

        .showPOI{
          margin-left:none;
          float:none;
          display:inline-block;
          border-left:1px solid #ececec;
          padding:12px;

          span.longText{
            display:none;
          }

          span.shortText{
            display:inline-block;
          }
        }
      }

    }

    .mapHeaderTitle{
      width:60%;
      display:inline-block;
      vertical-align:top;
      padding-top:6px;
    }

    .mapHeaderFilters{
      width:40%;
      display:inline-block;
      vertical-align:top;
      padding-top:10px;

      .dateHeaderButton{
        z-index:0;
      }
    }
  }

  .mapHeaderButtons{
    float:right;
    display:block;

    .showPOI{
      display:block;
      width:-webkit-fit-content;
      width:fit-content;
      margin-left:auto;

      font-size:12px;
      line-height:1.5em;
      color:#666;
      text-transform:uppercase;
      padding:10px;
      cursor:pointer;
      padding-right:20px;

      span.shortText{
        display:none;
      }

      input{
        position:relative;
        top:2px;
      }
    }
  }

  @media screen and (max-width:880px){
    .mapHeader{

      .mapHeaderTitle{
        width:100%;
        text-align:center;

        h1#mapDateHeader{
          border-left:0px;
          padding-left:0px;
          text-align:center;
          font-size:20px;
        }
      }

      .mapHeaderButtons{
        float:none;
      }

      .showPOI{
        margin-right:auto;
      }

      .mapHeaderFilters{
        width:100%;
        text-align:center;

        .dateHeaderButton{
          float:none;
        }
      }
    }
  }

}