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

#events{

      .headerProd{
        display:block;
        width:100%;
        padding:10px;



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

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

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

          @media screen and (max-width:1000px){
            margin-left:auto;
            margin-right:auto;


          }
        }



      }

      .headerAlert{
        width:800px;
        max-width:96%;
        margin-left:auto;
        margin-right:auto;
        display:grid;
        padding:10px;
        border-radius:20px;
        grid-template-columns:100px 1fr;

        &.pending{
          border:1px solid #fbc02d;
          background-color:#fff3e0;

          svg{
            color:#fbc02d;
          }
        }


        .alertIcon{
          svg{
            width:80px;
            justify-content: center;
            align-items:center;
          }
        }

        .alertText{
          text-align:center;
          font-size:18px;
          line-height:1.3em;
          display:flex;
          justify-content: center;
          align-items:center;
        }

      }

      @media screen and (max-width:600px){
        .headerProd{
          padding:0px;
          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;
        z-index:0;

        @media screen and (min-width:1001px){
          position:absolute;
          right:0px;
          top:0px;
        }

        .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;

            svg{
              display:inline-block;
              width:25px;
              margin:5px;
              vertical-align: top;
            }

            &.button{
              background-color:$color_green;
              border-radius:10px;
              color:#fff; 
              margin:10px;
              padding:10px;
              padding-left:20px;
              padding-right:20px;
            }

          }

          &: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:1000px){
        .menu{
          padding-bottom:0px;
          margin-bottom:0px;
          .focusLine{
            bottom:10px;
          }
          li{
            a{
              padding:10px;
              font-size:18px;

              svg{
                display:inline-block;
                width:20px;
                margin:3px;
              }
            }
          }
        }
      }







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

        .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; 

          -ms-overflow-style: none;  /* IE and Edge */
          scrollbar-width: none;  /* Firefox */
          -ms-overflow-style: none;  /* IE and Edge */

          &::-webkit-scrollbar {
            display: none;
          }


          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;
      }
    }
  }
}