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

#footer{
  margin-top:50px !important;
}

#pageHolder{
  z-index:2;
}

#events{
  min-height:80vh;
  &.pastel{
    //background-color:#f8faff;
    background:linear-gradient(to bottom,#fff,#f8faff);
    background-attachment: fixed;
  }

  .col-8{
    vertical-align:top;
    width:calc(100% - 320px);
    display:inline-block;
  }

  .col-4{
    vertical-align:top;
    width:320px;
    display:inline-block;
  }

  @media screen and (max-width:1000px){
    .col-8{
      width:100% !important;
    }
    .col-4{
      display:none;
    }
  }

  .elHasListings{
    display:none;
  }

  .containerNarrow{
    width:800px;
    display:block;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    //padding:10px;
    padding-top:20px;
  }

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

  .backButton{
    display:block;
    width:fit-content;
    width:-webkit-fit-content;   width:-moz-fit-content;
    font-size:16px;
    color:#333;
    cursor:pointer;
    text-decoration:none;

    svg{
      display:inline-block;
      width:20px;
      height:20px;
      vertical-align:top;
      position:relative;
      top:1px;
      color:#333;
    }
  }

  .heroHeader{
    background-color:#f6f8fd;
    width:100%;
    //height:600px;
  //  height:300px;

    //background-image:var(--heroBG);
    background-size:100% auto;
    background-position:top right;
    background-repeat:no-repeat;

    .employers{
      font-family:$boldFont;
    }


    .menu{
      position:absolute;
      top:10px;
      right:10px;
      width:fit-content;
      width:-webkit-fit-content;   width:-moz-fit-content;
      display:block;
      list-style:none;
      margin:0px;
      padding:10px;

      .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{
        display:inline-block;

        a{
          font-family:$accentFont;
          font-size:24px;
          padding:10px;
          padding-left:20px;
          position:relative;
          z-index:2;
          font-weight:bold;
          padding-right:20px;
          display:block;
          text-decoration:none;
          text-transform:uppercase;
          color:$color_purple;
          border-left:1px solid rgba(0,0,0,0.1);

          svg{
            width:24px;
            height:24px;
            display:inline-block;
            vertical-align: middle;
            position:relative;
            top:-2px;
            margin-right:10px;
          }


        }

        &:nth-child(2){
            a{
              border-left:0px;
            }
        }
      }


    }

    .heroLogo{
      display:block;
      width:350px;
      max-width:100%;
      margin-top:30px;
    }


    .container{

      height:100%;
      //background-image:var(--homeGraphic);
      background-repeat:no-repeat;
      background-size:auto 80%;
      background-position: center right;
      position:relative;
    }

    .vCenter{
      height:100%;
      display:flex;
      vertical-align: middle;
      text-align: center;
      justify-content: center;
      align-items: center;
      width:60%;

      .heroHolder{
        display:inline-block;
        width:100%;
        text-align:left;

        h1{
          font-size:80px;
          line-height:86px;
          font-weight:900;
          margin:0px;
          padding:0px;
          max-width:600px;
        }

        big{
          display:block;
          padding:10px;
          padding-top:30px;
          padding-bottom:30px;
          font-size:28px;
          line-height:1.2em;
          font-family:$accentFont;
          font-weight:bold;

        }
      }
    }
  }

  .heroFooter{
    position:relative;
    top:-30px;

    .container{
      padding:0px;
      margin-top:0px;
      margin-bottom:0px;
      display:grid;
      grid-template-columns:2fr 1fr;
      grid-column-gap:20px;
    }

    //background-color:#100043;
    color:#fff;
    *{
      position:relative;
      z-index:1;
    }

    h3{
      font-family:$boldFont !important;
      font-weight:700;



    }

    h4{
      padding:15px;
    }

    .emailSignup{
      width:100%;
      display:inline-block;
      padding:30px;
      padding-right:230px;
      position:relative;
      background-color:$color_purple;
      background-image:var(--purpleBG);
      background-size:cover;
      background-position:top right;

      form{
        position:static !important;
      }


      .bgIcon{
        z-index:0;
        position:absolute;
        color:#fff;
        opacity:0.1;
        transform:rotate(-12deg);
        left:-80px;
        width:250px;
        height:250px;
        top:-30px;
      }

    }



    h3, h4{

      margin:0px;
      padding:3px;
    }

    h3{

      u{
        color:#00e8ff;
      }
    }

    h4{
      opacity:0.9;
      font-size:14px;
    }

    input[type='email']{
      padding:10px;
      border-radius:10px;
      border:2px solid #00e8ff;
      width:100%;
      margin-top:12px;
    }

    button{
      position:absolute;
      bottom:30px;
      right:30px;
      background-color:#1d86f2;
      background:linear-gradient(to bottom right,#00e8ff,#1d86f2,#1d86f2);
      background-size:130% auto;
      box-shadow:0px 2px 4px rgba(0,0,0,0.2);
      color:#fff;
      width:180px;
      height:80px;
      font-size:14px;
      text-shadow:-1px -1px 0px rgba(0,0,0,0.5);

    }
  }

  .employerCTA{
    background-color:#ff5f00;
    background:linear-gradient(to right,#ff514f,#ff6437);
    background-size:150% auto;
    width:100%;
    vertical-align:top;
    display:inline-block;
    padding:30px;
    text-align:right;
    position:relative;


    h3{
      u{
        color:#100043;
      }
    }

    .bgIcon{
      z-index:0;
      position:absolute;
      color:#fff;
      opacity:0.1;
      transform:rotate(12deg);
      left:0px;
      width:250px;
      height:250px;
      top:-30px;
    }

    .button{

      color:#fff;
      background-color:#100043;
      background:linear-gradient(to bottom right,#6a46dd,#100043,#100043);
      text-shadow:-1px -1px 0px rgba(0,0,0,0.5);
      background-size:130% auto;
      box-shadow:0px 2px 4px rgba(0,0,0,0.2);
      display:block;
      width:-webkit-fit-content;   width:-moz-fit-content;
      width:fit-content;
      margin-left:auto;
      padding:10px;
      margin-top:10px;
      padding-left:20px;
      padding-right:20px;
      font-size:14px;
      text-decoration:none;

    }

  }

  .divider{
    display:block;
    width:200px;
    margin-left:auto;
    margin-right:auto;
    max-width:90%;
    height:1px;
    background-color:#ccc;
    margin-top:20px;
    margin-bottom:20px;

    &.fullWidth{
      width:100%;
      max-width:100%;
    }
  }

  buttonDEP, .button{
    display:inline-block;
    cursor:pointer;
    font-weight:bold;

    border-radius:10px;
    box-sizing:border-box;

    border:0px;
    transition:transform 0.3s ease-in-out;
    transform-origin:center center;


    svg{
      width:20px;
      height:20px;
      vertical-align: middle;
      display:inline-block;
      margin-right:5px;
    }


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

    &.buttonLarge{
      padding:20px;
      background-color:$color_purple;
      color:#fff;
      box-shadow:0px 4px 10px rgba(0,0,0,0.2);
      text-decoration:none;


    }

    &.green{
      background-color:$color_green;
    }

    &.buttonCenter{
      display:block;
      width:-webkit-fit-content;   width:-moz-fit-content;
      width:fit-content;
      margin:10px;
      margin-left:auto;
      margin-right:auto;

    }

  }

/*
  .tag{
    display:inline-block;
    padding:10px;
    padding-left:20px;
    padding-right:20px;
    background-color:#666;
    color:#fff;
    font-size:12px;
    line-height:12px;
    text-transform:uppercase;
    margin:5px;
    margin-left:0px;
    border-radius:3px;
  }
  */

  a.loginLink{
    display:block;
    width:200px;
    padding:20px;
    box-shadow:1px 1px 2px rgba(0,0,0,0.1);
    text-align:center;
    font-size:18px;
    text-decoration:none;
  }

  .payment{
    width:440px;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    padding:20px;

    .item, .price{
      width:50%;
      display:inline-block;
      vertical-align:top;
    }

    .price{
      text-align:right;
    }
  }

  .vCenter{
    display:flex;
    align-items:center;
    justify-content: center;
    width:100%;
    height:100%;
    .vCenterHolder{
      display:inline-block;
    }
  }

  .button2{
    background-color:#1d86f2;
    background:linear-gradient(to bottom right,#ff4b56,#d83b11,#d83b11);
    background-size:130% auto;
    box-shadow:0px 2px 4px rgba(0,0,0,0.2);
    text-shadow:-1px -1px 0px rgba(0,0,0,0.3);
    color:#fff;
    display:block;
    margin:10px;
    width:-webkit-fit-content;   width:-moz-fit-content;
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
    padding:10px;

    padding-left:20px;
    padding-right:20px;
    font-size:14px;
    border-radius:20px;
    line-height:1.3em;
    text-align:center;
    text-decoration:none;
    font-family:$boldFont;
    transition:transform 0.3s ease-in-out;

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

    b{
      display:block;
      font-size:24px;
      font-family:$accentFont;

    }

  }

  .elAdminOptions{
      width:800px;
      max-width:100%;
      padding:10px;
      display:block;
      margin-left:auto;
      margin-right:auto;
  }

  .button4{
    display:block;
    color:#333;
    border:1px solid #666;
    box-shadow:1px 1px 0px rgba(255,255,255,0.8);

    text-decoration:none;
    width:fit-content;
    width:-webkit-fit-content;   width:-moz-fit-content;
    padding:10px;
    padding-left:20px;
    padding-right:20px;
    text-transform:uppercase;
    font-size:14px;
    text-shadow:1px 1px 0px rgba(255,255,255,0.8);

    transition:transform 0.3s ease-in-out;

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

    svg{
      width:16px;
      height:16px;
      display:inline-block;
      vertical-align:top;
    }
  }

  .button3{

    color:#000;
    cursor:pointer;
    display:block;

    width:450px;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    padding:20px;
    border-bottom:1px solid #ececec;

    padding-left:20px;
    padding-right:20px;
    font-size:14px;
    line-height:1.3em;
    text-align:center;
    text-decoration:none;
    transition:all 0.3s ease-in-out;
    position:relative;
    padding-right:80px;

    svg{
      position:absolute;
      right:10px;
      top:25px;
      width:30px;
      height:30px;
      color:#666;
      transition:color 0.3s ease-in-out;
    }

    b{
      display:block;
      font-size:16px;

    }


    &:hover{
      transform:scale(1.1);
      background-color:#ececec;

      svg{
        color:#333;
      }
    }



  }

  .middotMobileBreak{
    position:static;
    display:inline;
    margin-left:10px;
    margin-right:10px;
  }

  @media screen and (max-width:600px){
    .middotMobileBreak{
      clear:both;
      opacity:0;
      display:block;
      height:3px;
    }
  }

  @media screen and (max-width:900px){
    .heroHeader{
      background-size:auto 100%;
      background-size:cover;
      height:auto;
      .container{
        background-image:none;
        background:rgba(255,255,255,0.5);
        padding-bottom:0px;
      }

      .menu{
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        margin-left:auto;
        margin-right:auto;

        .focusLine{
          bottom:10px;
        }

        li{
          a{
            font-size:16px;
          }
        }

      }

      .heroLogo{
        margin-top:30px;
        max-width:80%;
        margin-left:auto;
        margin-right:auto;
      }

      .vCenter{
        width:100%;
        min-height:100%;
        height:auto;
        display:block;
        padding-bottom:60px;

        .heroHolder{
          h1{
            font-size:50px;
            line-height:56px;
            max-width:100%;
            text-align:center;
          }

          big{
            text-align:center;
          }

          .employers{
            display:none;
            text-align:center;
          }
        }
      }
    }

    .heroFooter{
      padding:10px;
      .container{
        grid-template-columns:1fr;
        grid-template-rows:auto auto;
        grid-row-gap:10px;
        top:0px;
      }

      .employerCTA, .emailSignup{
        width:100%;
        float:none;
        padding:20px;

      }

      h3{
        text-align:center;
        u{
          display:block;
          text-align:center;
          font-size:1.4em;
        }

      }

      .emailSignup{

        padding-right:20px;
        text-align:center;

        button{
          position:relative;
          top:auto;
          right:auto;
          bottom:auto;
          height:auto;
          margin-left:auto;
          margin-right:auto;
          margin-top:10px;
          display:block;
          width:fit-content;
          width:-webkit-fit-content;   width:-moz-fit-content;
          padding:10px;
          padding-left:20px;
          padding-right:20px;

        }
      }

      .employerCTA{
        //margin-bottom:20px;
        text-align:center;

        .button{
          margin-left:auto !important;
          margin-right:auto !important;
          display:block;
          width:fit-content;
          width:-webkit-fit-content;   width:-moz-fit-content;
        }

      }
    }
  }

  .subText{
    color:#666;
    font-weight:normal;
    font-size:14px;
    line-height:20px;
    padding:0px;
    margin:0px;
    margin-top:10px;
    margin-bottom:10px;
    display:block;

    b{
      color:#000;
    }

    a{
      color:$color_purple;
    }
  }

  @media screen and (max-width:600px){
    .subText{
      text-align:center;
    }
    .desktopOnly{
        display:none !important;
    }
  }

  .centerDialogue{
    width:500px;
    max-width:96%;
    display:block;
    padding:10px;
    border-radius:10px;
    background-color:#fff;
    border:1px solid #ececec;
    text-align:center;
    margin:20px;
    margin-left:auto;
    margin-right:auto;
    font-size:16px;



    h2, h3, h4{
      font-size:30px;
      line-height:1.2em;
      font-family:$boldFont;
      margin:0px;
      font-weight:700;
      padding:5px;
    }

    h2{
      color:$color_purple;
    }

    h3{
      font-size:24px;
    }

    h4{
      font-size:18px;
    }

    button{
      margin-top:10px;
    }
  }

  ul.featureList{
    list-style:none;
    margin:0px;
    padding:0px;


    li{
      list-style:none;
      padding:8px;
      font-size:18px;
      text-align:left;
      padding-left:50px;
      border-bottom:1px solid rgba(255,255,255,0.2);
      position:relative;

      svg{
        width:26px;
        height:26px;
        position:absolute;
        left:8px;
        top:8px;
        color:#fff;
      }


      &.featureHeader{
        font-family:$boldFont;
        font-weight:700;
        font-size:24px;
        padding-left:0px;
        color:$color_blue;

      }
    }
  }

  .browseJobs{
    padding:10px;
    h2{
      font-family:$boldFont;
      font-weight:700;
      text-align:center;
      font-size:35px;
      line-height:1.1em;
    }
  }

  .mobileBreak{
    display:none;
  }

  @media screen and (max-width:600px){
    .mobileBreak{
        display:block;
        width:100%;
        height:1px;
    }
  }


}