
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <!-- SITE TITTLE -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>WOLFIT ATHLEISURE</title>

        <!-- PLUGINS CSS STYLE -->
        <link href="plugins/jquery-ui/jquery-ui.css" rel="stylesheet">
        <link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <link href="plugins/selectbox/select_option1.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="plugins/rs-plugin/css/settings.css" media="screen">
        <link rel="stylesheet" type="text/css" href="plugins/owl-carousel/owl.carousel.css" media="screen">
        <link rel="stylesheet" href="options/optionswitch.css">

        <!-- GOOGLE FONT -->
        <!--  <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'> -->
        <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet">
        <!-- CUSTOM CSS -->
        <link href="css/style.css" rel="stylesheet">
        <link rel="stylesheet" href="css/colors/default.css" id="option_color">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <link href="css/product-list.css?a=<?= mt_rand(); ?>" rel="stylesheet" />
        <link href="css/product-detail.css?a=<?= mt_rand(); ?>" rel="stylesheet" />
        <link href="css/checkout.css?a=<?= mt_rand(); ?>" rel="stylesheet" />
        <link href="css/xzoom.css?a=<?= mt_rand(); ?>" rel="stylesheet" />
        <link rel="stylesheet" href="css/mySuper.css">
        <script src="js/custom.js?a=<?= mt_rand(); ?>"></script>
        <!--        <link href="js/select2/select2.min.css" rel="stylesheet" />
                <script src="js/select2/select2.full.min.js"></script>-->
        <!--        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
                <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>    
        -->
        <link href="plugins/select2/select2.min.css" rel="stylesheet" />
        <script src="plugins/select2/select2.full.min.js"></script>

        <script>
            $(document).ready(function () {
                $("#login").on("click", ".login", login);
                $("#signup").on("click", ".register", register);
                $("#forgetpwd").on("click", ".pwdforget", ForgetPwd);
                $('.select2').select2();
                $('.mainpart').select2();
                $('.detailpart').select2();
                $('.fetchpart').select2();
                getUserDetails();
                $(document).on('click', '.add-to-cart', addCart)
//                $('.navbar-brandimg').css({'width': '90'});
//                $('.navbar-brandimg').css({'height': '90'});


                $(window).scroll(function () {
                    if ($(window).scrollTop() > 1) {
                        $('.navbar-brandimg').attr({'src': 'img/logohead.jpg'});
                        $('.navbar-brandimg').css({'width': '90'});
                        $('.navbar-brandimg').css({'height': '45'});
//                        $('.navbar-brandimg').css({'margin-top': '9'});
                        // $("body").removeClass("padding-top");

                    }
//                    } else {
//                        $('.navbar-brandimg').css({'width': '150'});
//                    }

                });
            });
        </script>
        <style>
            .headimg{
                height: 45px;
                width: 90px;
                /*margin-left: 550px;*/
            }

            /*            @media (min-width: 768px) and (max-width: 991px) { 
                            .headimg {
                                height: 45px;
                                width: 90px;
                                margin-left: 245px;
                            }
                        }
            
                        @media (min-width: 992px) and (max-width: 1125px) { 
                            .headimg {
                                height: 45px;
                                width: 90px;
                                margin-left: 440px;
                            }
                        }
            
                        @media (min-width: 1126px) and (max-width: 1800px) { 
                            .headimg {
                                height: 45px;
                                width: 90px;
                                margin-left: 480px;
                            }
                        }
            
                        @media only screen and (min-device-width : 100px) and (max-device-width : 768px) {
                            .headimg {
                                height: 45px;
                                width: 90px;
                                margin-left: 100px;
                                padding: 0px;
                            }
                        }*/
        </style>
    </head>
    <body style='overflow-x: hidden;'>
        <div class="main-wrapper">
            <!-- HEADER -->
            <div class="header clearfix">

                <!-- TOPBAR -->
                <div class="topBar">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6 hidden-sm col-xs-3">
                                <ul class="list-inline">
                                    <li><a href="https://www.instagram.com/wolfit_athleisure/" target="_blank"><i class="fa fa-instagram"></i></a></li>
                                    <li><a href="https://m.facebook.com/Wolfit-Athleisure-490110548149524" target="_blank"><i class="fa fa-facebook"></i></a></li>
                                    <!--<li><a href="#"><i class="fa fa-twitter"></i></a></li>-->
                                    <!--<li><a href="#"><i class="fa fa-dribbble"></i></a></li>-->
<!--                                    <li><a href="#"><i class="fa fa-vimeo"></i></a></li>
                                    <li><a href="#"><i class="fa fa-tumblr"></i></a></li>-->
                                </ul>
                            </div>
                            <div class="col-md-6 col-xs-9">
                                <ul class="list-inline pull-right">
                                    <?php if ($_COOKIE['username'] == '') { ?>
                                        <li>
                                            <span id="login-signup-controller">
                                                <a data-toggle="modal" href='.login-modal'>Log in</a>
                                                <small>or</small>
                                                <a data-toggle="modal" href='#signup'>Create an account</a>
                                            </span>

                                        </li>
                                    <?php } else { ?>
                                        <!--#252525-->

                                        <li class="dropdown settings">

                                            <!--<div id="login-signup-controller">-->
                                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                                <?php echo $_COOKIE['username']; ?> <i class="fa fa-angle-down"></i>
                                                <ul class="dropdown-menu dropdown-menu-right" style="background-color: black;">
                                                    <li><a href="prevorder.php">Previous Orders</a></li>
                                                    <li><a href="logout.php" ><i class="fa fa-power-off"></i> Logout</a></li>
                                                </ul>
                                            </a>

                                            <!--                                            <ul class="dropdown-menu animated fadeInDown" style="background-color: #252525; color: white;">
                                                                                            <li><a href="prevorder.php">Previous Order</a>