ul, li {
    margin: 0;
    padding: 0;
}

.margin-10 {
    margin-top: 10px;
}

.margin-15 {
    margin-top: 15px;
}

.margin-20 {
    margin-top: 20px;
}

.margin-25 {
    margin-top: 25px;
}

.margin-30 {
    margin-top: 30px;
}

.margin-35 {
    margin-top: 35px;
}

.margin-40 {
    margin-top: 40px;
}

.margin-45 {
    margin-top: 45px;
}

.margin-50 {
    margin-top: 50px;
}

.sidebar-menu a:hover {
    text-decoration: none;
}

.header-top {
    border: 1px solid white;
    text-align: center;
    width: 100%;
    background: -webkit-linear-gradient(white, gray);
}

ul.contact-details {
    float: left;
    margin: 0;
    padding: 0;
}

    ul.contact-details li {
        text-align: center;
        padding: 6px 10px;
        display: inline-block;
        margin: 0 auto;
        font-size: 13px;
        color: black;
    }

/*ul.socials-list{
    float:right;
}*/

ul.socials-list li {
    cursor: pointer;
    padding: 6px 10px;
    border-left: 1px solid #e7e7e7;
    display: inline-block;
    text-align: center;
    float: right;
}

    ul.socials-list li .fa {
        color: #666;
        font-size: 18px;
    }

    .header-content{
        margin-top:50px;
    }

.header-content h1 {
    margin: 0;
    padding: 0;
    color: #0061ac;
    font-size: 40px;
    font-weight: bold;
    font-family: Calibri;
}

.header-content p {
    font-size:20px;
    line-height: 22px;
    color: #666;
}

.search-form {
    float: right;
    margin-top: 60px;
}

.form-control {
    display: inline-block !important;
    width: 64% !important;
}


.navigation-bar {
    border: 1px solid #999;
    
    width: 100%;
    margin-top: 15px;
    width: 100%;
    position: relative;
}

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
 background: -webkit-linear-gradient(#3371aa, #3371aa);
    /*background: #3371aa;*/
}

    /* Float the list items side by side */
    ul.topnav li {
        float: left;
    }
        /* Style the links inside the list items */
        ul.topnav li a {
            display: inline-block;
            color: white;
			font-weight: 600;
            padding: 14px 25px;
            text-decoration: none;
            transition: 0.3s;
            font-size: 15px;
        }

            /* Change background color of links on hover */
            ul.topnav li a:hover {
                background-color: black;
                color: white;
                opacity: 0.4;
            }

        /* Hide the list item that contains the link that should open and close the topnav on small screens */
        ul.topnav li.icon {
            display: none;
        }

        ul.topnav li ul.nav-submenu {
            display: none;
            position: absolute;
            width: 192px;
            text-transform: capitalize;
        }

        ul.topnav li:hover ul.nav-submenu {
            display: block;
            z-index: 30;
            background: rgba(159, 159, 159, 0.7);
        }

            ul.topnav li:hover ul.nav-submenu li {
                width: 190px;
                overflow: hidden;
            }

                ul.topnav li:hover ul.nav-submenu li a {
                    width: 190px;
                    margin-left: 0px;
                }


/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
    ul.topnav li:not(:first-child) {
        display: none;
    }

    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
    ul.topnav.responsive {
        position: relative;
    }

        ul.topnav.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        ul.topnav.responsive li {
            float: none;
            display: inline;
        }

            ul.topnav.responsive li a {
                display: block;
                text-align: left;
            }
}

/*ul.sidebar-menu li:first-child a {
    background-color: #351DD0;
    font-size: 18px;
    font-weight: 700;
}

ul.sidebar-menu {
    width: 100%;
}

    ul.sidebar-menu li a {
        border-bottom: 1px solid white;
        display: block;
        background-color: #351DD0;
        padding: 10px 15px;
        color: white;
        font-size: 12px;
    }

a:hover {
    text-decoration: none;
}

ul.sidebar-menu li i {
    float: right;
    margin-right: 20px;
}

ul.sidebar-menu li i {
    float: right;
    margin-right: 20px;
    -webkit-transform: rotate(180deg);
    -webkit-transition: -webkit-transform linear 0.3s, font-size linear 0.3s;
}

.sidebar-menu li ul {
    display: none;
}

.sidebar-menu li:hover ul {
    display: inline-block;
    background-color: white;
    padding: 2px 0px;
    width: 100%;
}

    .sidebar-menu li:hover ul li {
        padding: 10px 15px;
        border: 1px dotted blue;
    }*/

.left-bar {
    margin-top: 10px;
}

.panel-heading .panel-title a {
    text-decoration: none;
}

.panel-collapse .panel-body {
    padding: 0;
    margin: 0;
    position: relative;
}

ul.panel-list {
    background-color: transparent;
    font-size: 12px;
}

    ul.panel-list li {
        margin: 0;
        padding: 7px 10px;
        color: black;
        border-bottom: 1px dotted black;
    }

    ul.panel-list li a{
        color: #0061ac;
    }

        ul.panel-list li ul.submenu {
            display: none;
            position: absolute;
        }

        ul.panel-list li:hover ul.submenu {
            margin-left:250px;
            margin-top:-26px;
            display:block;
            width: 210px;
            z-index: 50;
            background-color: white;
        }

            ul.panel-list li:hover ul.submenu li {
                padding:8px 25px;
                border-bottom: 1px dotted black;
               
            }

        ul.panel-list li:last-child {
            border-bottom: none;
        }



.welcome-msg {
    background-image: url('../img/welcome-img.jpg');
    background-size: cover;
}

.aboutus {
    margin-top: 20px;
    height: 40px;
    width: 130px;
    border: none;
    color: white;
    background-color: #0061ac;
    font-size: 15px;
    border-radius: 5px;
}

    .aboutus:hover {
        opacity: 0.8;
    }

.welcome-msg h1 {
    color: #0061ac;
    font-weight: 700;
}

.welcome-msg p {
    font-size: 14px;
    line-height: 25px;
    color: white;
}

.featured-product {
    text-align: center;
}

.featured-title h2 {
    font-weight: 700;
    color: #0061ac;
    font-size: 25px;
}

.footer {
    background-color: #222222;
    padding-top: 20px;
    padding-bottom: 20px;
}

    .footer h3 {
        color: white;
        font-size: 18px;
    }

.horizontal-row {
    width: 70px;
    margin-top: 0px;
    border: 2px solid #0061ac;
}

.footer-about, .footer-menu, .footer-product, .footer-contact {
    font-size: 12px;
    padding: 0px 20px;
    overflow: hidden;
}

    .footer-about .fa {
        border-radius: 5px;
        font-size: 22px;
        padding: 9px 13px;
        color: white;
    }

    .footer-about .fa-facebook, .footer-about .fa-twitter, .footer-about .fa-youtube {
        margin: 5px;
    }

    .footer-about .fa-facebook {
        background-color: #3B5998;
    }

    .footer-about .fa-twitter {
        background-color: #00aced;
    }

    .footer-about .fa-youtube {
        background-color: #bb0000;
    }


    .footer-about p {
        font-size: 13px;
        color: white;
        text-align: justify;
    }

.footer-menu {
    padding-left: 30px;
}

.footer-product {
    padding-left: 30px;
}

ul.footer-nav li {
    color: white;
    font-size: 13px;
    line-height: 25px;
}

ul.footer-nav a {
    color: white;
    line-height: 20px;
    text-decoration: none;
}

.address p {
    line-height: 25px;
}

.address .fa {
    font-size: 20px;
    color: gray;
}

.products-box {
    border:2px solid #0061ac;
    margin-top:30px;
    margin-left:10px;
    margin-right:10px;
    -webkit-transition: box-shadow linear 0.2s;
}

    .products-box:hover {
        -webkit-transition: box-shadow linear 0.2s;
        box-shadow: 0px 0px 10px blue;
    }

.products {
    background:-webkit-linear-gradient(gray, white, gray);
    color: black;
    padding: 1px 10px;
    border-radius: 6px;
}

    .products h4 {
        font-size: 17px;
    }

    .caption{
        text-align: center; 
        margin-top: 10px;
        font-weight:bold;
        font-size:15px;
    }

    ul.about-list li{
        line-height:25px;
        list-style-type:circle;
        list-style-position:inside;
        text-align:justify;
    }

    ul.about-list li b{
       font-weight:bold;
       color:red;
    }

    .about-section{
        border:2px solid gray;
        padding:10px 20px;
        box-shadow:0px 0px 10px gray;
    }

    .aspirate-product-details table td{
        padding:10px 30px 10px 0px;
    }

    .discription ul li{
        padding:10px;
        padding-left:0;
        list-style-type:circle;
        list-style-position:inside;
    }