body {
    margin:0;
    font-size:22px;
    line-height:32px;
    font-family:sans-serif;
}

.Clear
{
    clear:both;
}

/*  ---------------  Header 1  ----------------------  */


.toggle, [id=drop]{
    display:none;
    float:right;
}
#nav {
    margin: 0;
    padding: 0;
    background-color: #01579b;
    -webkit-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
    z-index: 100;
}
#logo{
    display:block;
    float:left;
    padding:10px 0 0 30px;
}
#logo img{
    width: 170px;
}
#nav::after{
    content:"";
    display:table;
    clear:both;
}
#nav ul{
    float:right;
    list-style:none;
    padding:0;
    margin:0;
}
#nav ul li{
    display:flex;
    float:left;
}
#nav a {
    display: block;
    padding: 14px 22px;
    color: #fff;
    font-size: 17px;
    text-decoration: none;
}
    #nav a:hover {
        background-color: #3378af;
        transition: 0.5s;
    }
/*  -------------------------------------------------  */

/*  ---------------  Header 2  ----------------------  */

.toggle1, [id=drop1]{
    display:none;
}

#nav1 {
    margin: 0;
    padding: 0;
    background-color: #FFF;
    -webkit-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
    z-index: 101;
    position: relative;
}
#logo1{
    display:block;
    float:left;
    padding:10px 0 0 30px;
}
#logo1 img{
    width: 350px;
}
#nav1::after{
    content:"";
    display:table;
    clear:both;
}
#nav1 ul{
    float:right;
    list-style:none;
    padding:0;
    margin:0;
}
#nav1 ul li{
    display:flex;
    float:left;
}
#nav1 a {
    display: block;
    padding: 31px 22px;
    color: #3378af;
    font-size: 17px;
    text-decoration: none;
}
    #nav1 a:hover 
    {
        color: #fff;
        background-color: #3378af;
        transition: 0.5s;
    }

/*  -------------------------------------------------  */    

/*  ---------------  Header 3  ----------------------  */

#nav2 {
    margin: 0;
    padding: 0;
    background-color: #01579b;
    height: 80px;
    -webkit-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
    z-index: 100;
}

#nav2 a {
    text-decoration: none;
    color: #232323;
    transition: color 0.3s ease;
}

    #nav2 a:hover {
        color: tomato;
    }

#menuToggle {
    display: block;
    position: relative;
    top: 30px;
    left: 50px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

    #menuToggle input {
        display: block;
        width: 33px;
        height: 28px;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */
    }

    /*
 * Just a quick hamburger
 */

    #menuToggle span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        background: #cdcdcd;
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
    }

        #menuToggle span:first-child {
            transform-origin: 0% 0%;
        }

        #menuToggle span:nth-last-child(2) {
            transform-origin: 0% 100%;
        }

    /* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */

    #menuToggle input:checked ~ span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
    }

        /*
 * But let's hide the middle one.
 */

        #menuToggle input:checked ~ span:nth-last-child(3) {
            opacity: 0;
            transform: rotate(0deg) scale(0.2, 0.2);
        }

        /*
 * Ohyeah and the last one should go the other direction
 */

        #menuToggle input:checked ~ span:nth-last-child(2) {
            opacity: 1;
            transform: rotate(-45deg) translate(0, -1px);
        }

/*
 * Make this absolute positioned
 * at the top left of the screen
 */

#menu2 {
    position: absolute;
    width: 300px;
    margin: 23px 0 0 -50px;
    padding: 50px;
    padding-top: 15px;
    background: #ededed;
    list-style-type: none;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

    #menu2 li {
        padding: 10px 0;
        font-size: 22px;
    }

/*
 * And let's fade it in from the left
 */

#menuToggle input:checked ~ ul {
    transform: scale(1.0, 1.0);
    opacity: 1;
}

#logo2 {
    display: block;
    float: left;
    padding: 10px 0 0 30px;
    margin-left:80px;
    margin-top:10px;
}

    #logo2 img {
        width: 170px;
    }


/*  -------------------------------------------------  */

/*  ---------------  Header 4  ----------------------  */
.toggle3, [id=drop3]{
    display:none;
    float:right;
}

#nav3 {
    margin: 0;
    padding: 0;
    background-color: #01579b;
    -webkit-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
    z-index: 100;
}
#logo3{
    display:block;
    float:left;
    padding:10px 0 0 30px;
}
#logo3 img{
    width: 170px;
}
#nav3::after{
    content:"";
    display:table;
    clear:both;
}
#nav3 ul{
    float:right;
    list-style:none;
    padding:0;
    margin:0;
}
#nav3 ul li{
    display:flex;
    float:left;
}
#nav3 a {
    display: block;
    padding: 14px 22px;
    color: #fff;
    font-size: 17px;
    text-decoration: none;
}
    #nav3 a:hover {
        background-color: #3378af;
        transition: 0.5s;
    }

/*  -------------------------------------------------  */
/*  ---------------  Header 5  ----------------------  */
.toggle4, [id=drop4]{
    display:none;
    float:left;
}

#nav4 {
    margin: 0;
    padding: 0;
    background-color: #01579b;
    -webkit-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.75);
    z-index: 100;
}
#logo4{
    display:block;
    float:left;
    padding:10px 0 0 30px;
}
#logo4 img{
    width: 170px;
}
#nav4::after{
    content:"";
    display:table;
    clear:both;
}
#nav4 ul{
    float:right;
    list-style:none;
    padding:0;
    margin:0;
}
#nav4 ul li{
    display:flex;
    float:left;
}
#nav4 a {
    display: block;
    padding: 14px 22px;
    color: #fff;
    font-size: 17px;
    text-decoration: none;
}
    #nav4 a:hover {
        background-color: #3378af;
        transition: 0.5s;
    }
/*  -------------------------------------------------  */



@media (max-width : 768px) 
{
    
    
    /*  ---------------  Header 1  ----------------------  */
    #logo {
        display: block;
        width: 80%;
        text-align: center;
        float: left;
        padding: 20px 0 10px;
    }
    #nav {
        width: 100%;
    }
    #nav ul{
        width:100%;
    }
    #nav ul li {
        width: 100%;
    }
        #nav a {
            display: block;
            padding: 14px 22px;
            color: #fff;
            font-size: 17px;
            width: 100%;
            text-decoration: none;
        }

            #nav a:hover {
                background-color: #3378af;
                transition: 0.5s;
            }
    .toggle + a, .menu {
        display: none;        
    }
    .toggle {
        display:block;
        background-color:#00457c;
        padding:24px 20px;
        color:#fff;
        font-size:17px;
        cursor:pointer;
    }
    .toggle:hover{
        background-color:#003c6c;
    }
    [id^=drop]:checked + ul{
        display:block;
    }
/*  -------------------------------------------------  */    

/*  ---------------  Header 2  ----------------------  */

#logo1 {
        display: block;
        width: 100%;
        text-align: center;
        float: none;
        padding: 20px 0 10px;
    }
    #nav1 {
        width: 100%;
    }
    #nav1 ul{
        width:100%;
    }
    #nav1 ul li {
        width: 100%;
    }
        #nav1 a {
            display: block;
            padding: 14px 22px;
            color: #3378af;
            font-size: 17px;
            width: 100%;
            text-decoration: none;
        }

            #nav1 a:hover {
                background-color: #3378af;
                transition: 0.5s;
            }
    .toggle1 + a, .menu1 {
        display:none;
    }
    .toggle1 {
        display:block;
        background-color:#00457c;
        padding:14px 20px;
        color:#fff;
        font-size:17px;
        cursor:pointer;
    }
    .toggle1:hover{
        background-color:#003c6c;
    }
    [id^=drop1]:checked + ul{
        display:block;
    }
    
    

/*  -------------------------------------------------  */    

/*  ---------------  Header 3  ----------------------  */



/*  -------------------------------------------------  */

/*  ---------------  Header 4  ----------------------  */
    #logo3 {
        display: block;
        width: 80%;
        text-align: center;
        float: left;
        padding: 20px 0 10px;
    }
    #nav3 {
        width: 100%;
    }
    #nav3 ul{
        width:100%;
    }
    #nav3 ul li {
        width: 100%;
    }
        #nav3 a {
            display: block;
            padding: 14px 22px;
            color: #fff;
            font-size: 17px;
            width: 100%;
            text-decoration: none;
        }

            #nav3 a:hover {
                background-color: #3378af;
                transition: 0.5s;
            }
    .toggle3 + a, .menu3 {
        display: none;        
    }
    .toggle3 {
        display:block;
        background-color:#00457c;
        padding:24px 20px;
        color:#fff;
        font-size:17px;
        cursor:pointer;
    }
    .toggle3:hover{
        background-color:#003c6c;
    }
    [id^=drop3]:checked + ul{
        display:block;
    }

/*  -------------------------------------------------  */    

/*  ---------------  Header 5  ----------------------  */
    #logo4 {
        display: block;
        width: 80%;
        text-align: center;
        float: right;
        padding: 20px 0 10px;
    }
    #nav4 {
        width: 100%;
    }
    #nav4 ul{
        width:100%;
    }
    #nav4 ul li {
        width: 100%;
    }
        #nav4 a {
            display: block;
            padding: 14px 22px;
            color: #fff;
            font-size: 17px;
            width: 100%;
            text-decoration: none;
        }

            #nav4 a:hover {
                background-color: #3378af;
                transition: 0.5s;
            }
    .toggle4 + a, .menu4 {
        display: none;        
    }
    .toggle4 {
        display:block;
        background-color:#00457c;
        padding:24px 20px;
        color:#fff;
        font-size:17px;
        cursor:pointer;
    }
    .toggle4:hover{
        background-color:#003c6c;
    }
    [id^=drop4]:checked + ul{
        display:block;
        
    }

/*  -------------------------------------------------  */    


}