* {
    padding:0;
    margin:0;
}

h1{
    font: normal 20px Arial ;color : #FFFFFF ;padding: 10px;
}
h2{
    font: bold 18px Tahoma;color : #FFFFFF ;padding: 10px;
}
h3{
    font: normal 14px Tahoma;color : #FFFFFF ;padding: 10px;
}
h4{
    font: bold 14px Tahoma;color : #FFFFFF ;padding: 10px;
}
body { font-family: 'Arial', 'Tahoma', sans-serif;
       background-color:#4E504B;
      height: 100%;
      font-size: 18px;
}
header { background-color:#4E504B;
    height : 50px;
    margin:auto;
    width : 95%;
    border-bottom:1px solid #CCC8B5;
    padding: 10px;
}
#brand { float:left;
    line-height:50px;
    color:#CCC8B5;
    font-size:30px;
    font-weight:bolder;
    position:absolute;
    font-family: Arial, Helvetica, sans-serif;


}

nav { width:95%;
    text-align:center;
    z-index:-1;
}

nav ul { line-height:50px;
padding :10px;}

nav li { display:inline-block; }
a:link {

    padding: 20px;
    font-weight:lighter;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #CCC8B5;
    text-decoration:none;
    background-color:#4E504B;
}
a:Visited {
    padding: 20px;
    font-weight:lighter;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #CCC8B5;
    text-decoration:none;
    background-color:#4E504B;

}
a:hover {

    padding: 20px;
    font-weight:lighter;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #CCC8B5;
    text-decoration:none;
    background-color:#555A53;
    border-radius: 5px;
}
a:active {

    padding: 20px;
    font-weight:lighter;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: orange;
    text-decoration: underline;
    background-color: #555A53;
    border-radius: 5px;
}
/*----------------------------------------------------*/
.menu { width: 100%;
    font-size: 20px;
    height:50px; position:absolute;

    background:#4E504B; top:0px;
    transition: all 1s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out; }
.menu-icon { padding:10px 20px;
    background:#555A53;
    color:#987D3E;
    cursor:pointer;
    float:right;
    margin-top:10px;
    margin-right: 10px;
    border-radius:5px; }
#menuToggle { display:none; }
#menuToggle:checked ~ .menu { position:absolute; top:51px; }
#menuToggle:checked ~ .content { position:absolute; top:120px; }
.content{
    width: 100%;
    position: absolute;
    margin: auto;
    text-align: center;
    top:70px;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}


.clear  { clear: both;
}



/*--------------------------------*/
@media screen and (max-width:590px) {
    nav li {
        display: block;
    }

    nav a {
        display: block;
        padding: 0;
        border-bottom: 1px solid #CAB47F;
    }

    nav a:hover {
        border-radius: 0;
    }

    .menu {
        top: -500px;
        height: auto;
    }

    #brand {
        font-size: 30px;
    }

    #menuToggle:checked ~ .content { position:absolute; top:400px; }
    a:link {

        padding: 5px;
        font-weight: lighter;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #CCC8B5;
        text-decoration: none;
        background-color: #4E504B;
    }

    a:Visited {
        padding: 5px;
        font-weight: lighter;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #CCC8B5;
        text-decoration: none;
        background-color: #4E504B;

    }

    a:hover {

        padding: 5px;
        font-weight: lighter;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #CCC8B5;
        text-decoration: none;
        background-color: #555A53;
        border-radius: 5px;
    }

    a:active {

        padding: 5px;
        font-weight: lighter;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: orange;
        text-decoration: underline;
        background-color: #555A53;
        border-radius: 5px;
    }
    .content{
        width: 100%;
        position: absolute;
        margin: auto;
        text-align: center;

        transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
    }
}