@import "_fonts";

  .eventSearch{
     background-color:#fff;
     padding:10px;
     width:100%;
     box-shadow:0px 3px 10px rgba(0,0,0,0.1);
     border-radius:10px;

     .location, .category{
       width:33.33%;
       display:inline-block;
       vertical-align:top;
       height:74px;
       text-align:left;
       box-sizing:border-box;
       padding:10px;
       cursor:pointer;

       span{
         font-weight:700;
         font-family:$boldFont;
         display:block;
         font-size:14px;
         line-height:20px;
         padding-left:15px;


       }

       select{
         border:0px;
         background:transparent;
         font-size:15px;
         font-family:$boldFont;
         font-weight:300;
         color:#666;
         width:100%;
         padding:10px;
         text-transform:uppercase;
       }
       &:nth-child(1){
         border-right:1px solid #ececec;
       }
     }



     button{
       display:inline-block;
       width:30%;
       cursor:pointer;
       font-weight:bold;
       float:right;
       height:74px;
       text-align:center;
       line-height:40px;
       font-size:16px;
       padding:17px;
       border-radius:10px;
       box-sizing:border-box;
       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);
       color:#fff;
       border:0px;
       transition:transform 0.3s ease-in-out;
       transform-origin:center right !important;


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


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

     }
  }

  .employers{
    font-size:18px;
    padding:15px;
    text-align:left;
    width:100%;
    opacity:0.8;


    a{
      font-weight:bold;
    }
  }

  #eventSearchCategory{
    option{
      display:none;

      &.show{
        display:block;
      }
    }
  }

  @media screen and (max-width:650px){
    .eventSearch{
      width:400px;
      max-width:96%;
      margin-left:auto;
      margin-right:auto;

      .location, .category{
        width:100%;
        &:nth-child(1){
          border-right:0px solid #ececec;
          bottom:1px solid #ececec;
        }
      }

      button{
        width:100%;
        float:none;
        transform-origin:center center !important;

        &:hover{
          transform:scale(1.03) !important;
        }
      }
    }
  }