@import "_fonts";
@import "_colors";

#eventsOLD{

      .headerProd{
        display:block;
        width:100%;
        background-color:#fff;
        background-image:var(--heroBG);
        background-size:100% auto;
        background-position:top right;
        background-repeat:no-repeat;
        //border-bottom:1px solid #ccc;
        border-bottom:1px solid rgba(0,0,0,0.1);

        z-index:999999;
        background-color:#fff;
        //backdrop-filter: blur(18px);



        -webkit-backdrop-filter: blur(18px);

        .container{
          padding:10px;
          padding-bottom:0px;
          padding-top:10px !important;
        }

        .logo{
          max-height:100px;
          display:block;
          max-width:70%;
          margin-left:auto;
          margin-right:auto;
          transition:transform 0.3s ease-in-out;

          &:hover{
            transform:scale(1.1);
          }
        }

        &.fixedScroll{
          top:44px;
          position:fixed;
          left:0px;
          //background-color:transparent;
          //background:rgba(255,255,255,0.9);
          box-shadow:0px 1px 3px rgba(0,0,0,0.2);
        }

      }

      @media screen and (max-width:600px){
        .headerProd{

          background-size:cover;

          .logo{
            margin-top:20px;
          }

          .container{
            //padding-top:20px;
            background:rgba(255,255,255,0.4);
            padding-bottom:10px;
          }
        }
      }


  .elHeader{
      width:100%;

      background-color:#fff;
      .container{
        //border-bottom:1px solid #666;
        position:relative;

      }




      .menu{
        position:relative;
        width:fit-content;
        width:-webkit-fit-content;   width:-moz-fit-content;
        list-style:none;
        margin:0px;
        margin-left:auto;
        margin-right:auto;
        padding:10px;
        white-space:nowrap;
        overflow:hidden;

        .focusLine{
          position:absolute;
          left:var(--menuFocusLeft,0px);
          width:var(--menuFocusWidth,0px);
          height:6px;
          display:block;
          bottom:20px;
          transition:all 0.3s ease-in-out;
          background-color:$color_purple;
          z-index:1;
        }

        li{
          list-style:none;
          display:inline-block;
          width:fit-content;
          width:-webkit-fit-content;   width:-moz-fit-content;
          margin:0px;
          position:relative;
          z-index:2;
          float:left;
          a{
            display:block;
            font-size:24px;
            padding:20px;
            color:$color_purple;
            font-weight:bold;
            font-family:$accentFont;
            width:fit-content;
            width:-webkit-fit-content;   width:-moz-fit-content;
            text-decoration:none;
            text-transform:uppercase;
            transition:all 0.3s ease-in-out;

            border-left:1px solid rgba(0,0,0,0.1);
          }

          &:nth-child(2){
            a{
              border-left:0px;
            }
          }
        }
        .mobile-only{
          display:none;
        }
      }

      &.fixedScroll{
        .menu{
            .focusLine{
              bottom:10px;
            }
            li{
              a{
                padding:10px;
                font-size:18px;
              }
            }
        }
      }

      @media screen and (max-width:500px){
        .menu{
          padding-bottom:0px;
          margin-bottom:0px;
          .focusLine{
            bottom:10px;
          }
          li{
            a{
              padding:10px;
              font-size:18px;
            }
          }
        }
      }







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

        .elLogo{
          display:block;
          margin-left:auto;
          margin-right:auto;
          width:200px;
          float:none;
        }

        ul.menu{
          white-space:nowrap;
          margin-left:auto;
          margin-right:auto;
          justify-content: center;
          align-items:center;
          width:100%;
          text-align:center;
          overflow-x:auto;
          overflow-y:hidden;
          float:none;
          //border-top:1px solid #ececec;


          li{
            float:none;

            &:first-child{
              a{
                border-left:0px;
              }
            }
          }
          .mobile-only{
            display:inline-block;
          }
        }

        #headerSearch{

          &.show{
            display:block;
          }
        }
      }

      .jobSearch{
        box-shadow:none;
        border-top:1px solid #ececec;
        border-radius:0px;

      }
  }

  .elHeaderPurple{
      width:100%;
      background-color:$color_purple;

      .elLogo{
        display:block;
        width:fit-content;
        width:-webkit-fit-content;   width:-moz-fit-content;
        float:left;
        margin-top:10px;

        img{
          height:70px;
          padding:10px;
        }
      }

      .menu{
        float:right;
        width:50%;
        list-style:none;
        margin:0px;
        padding:10px;

        li{
          list-style:none;
          display:inline-block;
          width:fit-content;
          width:-webkit-fit-content;   width:-moz-fit-content;
          margin:0px;
          float:left;
          a{
            display:block;
            font-size:18px;
            padding:20px;
            color:#fff;
            width:fit-content;
            width:-webkit-fit-content;   width:-moz-fit-content;
            border-left:1px solid rgba(255,255,255,0.3);
          }
        }
      }
  }

  .elPageTitle{
    display:block;
    padding:20px;
    padding-left:30px;
    font-size:20px;
    vertical-align:middle;
    line-height:20px;
    white-space: nowrap;
    overflow-x:auto;
    overflow-y:visible;
    margin-top:10px;
    //background-color:$color_purple;
    //background:rgba(16,0,67,0.1);




    a{
      text-decoration:none;

    }

    svg{
      display:inline-block;
      width:20px;
      height:20px;
      //color:rgba(255,255,255,0.8);
      vertical-align:middle;

      &.chevron_right{
        opacity:0.5;
        width:16px;
        height:16px;
        margin:2px;
      }
    }
  }

  #headerSearch{

    height:0px;
    overflow:hidden;
    width:100%;
    background-color:#ececec;
    transition:all 0.8s ease-in-out;

    .jobSearch{
      margin-left:auto;
      margin-right:auto;
      width:800px;
      max-width:100%;
    }

    &.show{
      height:120px;
      padding:10px;
    }

    @media screen and (max-width:600px){
      &.show{
        height:270px;
      }
    }


  }


  @media screen and (max-width:500px){
    .elPageTitle{
      font-size:12px;
      padding:5px;
      margin-bottom:10px;

      svg{
        width:20px;
        height:20px;
      }
    }
  }
}