// reponsive menu for mainmenu and search, also standard links such as sign in 


ul.menu{
    margin:0;
    padding:0;
    float:left;
    list-style:none;

    li{
    float:left;
    margin:0;
    padding:0;


    a {
    font-size:17px;
    font-weight:bold;
    padding:11px 15px;
    line-height:40px;
    min-height:62px;
    display:block;

    &:hover, &:focus
    {
      background:lighten(#000, 87%);
      text-decoration:none;
}  

&.myAccount {
    margin: 10px;
    padding: 0px 15px;
    min-height: 38px;
    line-height:38px;
    border: 1px solid;
    
    span{
        padding:-2px 0 5px 0;
        display:inline-block;
    }
     
    &:after {
        font-family: "FontAwesome";
        content: "\f007";
        font-size:18px;
        padding:0 5px;
    }
}

 &.main-menu, &.search{
    display:none;
    background:#fff;
    &:before {

        font-family: "FontAwesome";
        font-size:25px;
        float:right; 
}

}

&.search{

    background:lighten(gray, 30%);        

&:before {

        content: "\f002";
}


        &.active:before{
             content: "\f00d";
             padding:0 2px;
        }

}
 
&.search.active,
&.search:hover,
&.search:focus{
    background:#bdc3c7;
}

&.main-menu {

       background:#133E8D;
       color:#fff;

        &:before{
        content: "\f0c9";
        padding-left:5px;
       
        }
        &.active:before{
             content: "\f00d";
             padding-left:7px;
        }
}

&.main-menu:hover,
&.main-menu:focus,
&.main-menu.active{
    background:darken(#133E8D, 8%);

    
}


    }
}
}


@media (max-width: 767px){

    ul.menu li a.main-menu,
    ul.menu li a.search{
        display:block;
   }

}


@media (max-width: 600px){

    ul.menu li a{
        padding:9px 9px;
    }
    
}



@media (max-width: 550px){

ul.menu li  a.signin {
       display:none;
    }
ul.menu li  a.myAccount
{
span{
    display:none;
}
}
}