﻿

#MenuBody
{
    margin:0;
}

 /*-------------------------------------*/

 .MenuWrap
{
    width:100%;
    min-height:10vh;
    font-family:Arial;
    text-align:right;
    color:#666666;
    background-color:#FFFFFF;
    box-sizing:border-box;
    display:table;
    padding:10px 0;
}

    .MenuWrap a
    {
        color:inherit;
        text-decoration:none;
    }

 /*-------------------------------------*/
.MenuWrap .Logo
{
    width:150px;
    height:auto;
    float:left;
    margin-left:30px;
    border:none;
}

 /*-------------------------------------*/
.MenuLayer
{
    display:inline-block;
    margin-right:50px;
}

.MenuLayer .Menu
{
    display:inline-block;
    padding-left:0;
}

    .MenuLayer .Menu li
    {
        list-style:none;
        display:inline-block;
        margin-right:20px;
    }

     .MenuLayer .Menu li:hover
        {
            font-weight:bold;
        }

 /*-------------------------------------*/
.LoginLayer
{
    display:inline-block;
    margin-right:30px;  
}


.btn
{
    min-width:100px;
    display:inline-block;
    color:white;
    background-color:#FF5572;
    border-radius:5px;
    text-align:center;
    box-sizing:border-box;
    padding: 10px;
}

#btnLogin
{
    color: #FF5572;
    background-color:white;
    border:1px solid #FF5572;
    margin-right:20px;
}

    #btnLogin:hover
    {
        color:white;
        background-color:#FF5572;   
    }

#btnSignup:hover
{
    color:#FF5572;
    background-color:white;
    border:1px solid #FF5572;
}


/*----------------------------------------- Tablet --------------------------------------*/
@media screen and (min-width:481px) and (max-width: 768px)
{
    .MenuWrap
    {
        min-height:1vh;
    }
        .MenuWrap .Logo
        {
            width: 100px;
            margin-left: 15px;
        }

 /*-------------------------------------*/
    .MenuLayer
    {
        margin-right: 15px;
    }

        .MenuLayer .Menu li
        {
            margin-right: 5px;
            font-size: smaller;
        }

/*-------------------------------------*/
    .LoginLayer
    {
        margin-right: 15px;
    }


        .LoginLayer .btn
        {
            min-width: 80px;
            display: inline-block;
            font-size: small;
            padding: 5px 10px;
        }

        .LoginLayer #btnLogin
        {
            margin-right: 5px;
        }

}

/*------------------------------------------- Mobile ------------------------------------*/
@media screen and (max-width: 992px)
{
    .MenuWrap
    {
        min-height:1vh;
    }

   .MenuWrap .Logo
{
    width:100px;
    margin-left:15px;
}

 /*-------------------------------------*/
    .MenuLayer
{
    margin-right:15px;
}

  .MenuLayer .Menu li
    {
        margin-right:5px;
        font-size:smaller;
    }



/*-------------------------------------*/
.LoginLayer
{
    margin-right:15px;  
}


    .LoginLayer .btn
    {
        min-width: 80px;
        display: inline-block;
        font-size: small;
        padding: 5px 10px;
    }

    .LoginLayer #btnLogin
    {
        margin-right: 5px;
    }


}