@charset "utf-8";
                        /* CSS Document */
                        
                        body {
                            margin: 0px;
                            padding: 0px;
                        }
                        
                        ul {
                            list-style: none;
                        }
                        
                        a {
                            text-decoration: none;
                        }
                        
                        .slide-left {
                            width: 50%;
                            height: 150vh;
                            background-color: #161616;
                            background-attachment: fixed;
                            background-size: 100vh auto;
                            background-repeat: no-repeat;
                            overflow: hidden;
                            position: relative;
                        }
                        
                        .slide-right {
                            width: 50%;
                            height: 100vh;
                            background-color: white;
                            background-repeat: no-repeat;
                            overflow: hidden;
                            position: relative;
                        }
                        
                        .wrapper {
                            display: flex;
                        }
                        
                        .menu,
                        .img-menu {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin: 30px 50px;
                            font-family: calibri;
                        }
                        
                        .menu ul {
                            display: flex;
                        }
                        
                        .menu ul li {
                            margin: 0px 20px;
                            font-weight: 700;
                            letter-spacing: 2px;
                            font-size: 13px;
                        }
                        
                        .menu a {
                            color: #e9e9e9;
                        }
                        
                        .logo {
                            font-weight: bold;
                            letter-spacing: 3px;
                            border: 2px solid #686868;
                            padding: 5px 20px;
                        }
                        
                        .login {
                            width: 110px;
                            height: 40px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: #313237;
                            color: #FFFFFF;
                            border-radius: 10px;
                        }
                        
                        .login:hover {
                            background-color: #5a5b53;
                            transition: all ease 0.5s;
                        }
                        
                        .product-name {
                            position: absolute;
                            left: 50%;
                            top: 20%;
                            transform: translate(-50%, -20%);
                        }
                        
                        .product-name h1 {
                            letter-spacing: 0px;
                            margin: 0px;
                            padding: 0px;
                            font-family: BAD GRUNGE;
                            font-size: 250px;
                            color: #f3f3f3;
                        }
                        
                        .footer-heading {
                            font-family: calibri;
                            color: #e9e9e9;
                            display: flex;
                            align-items: center;
                            height: 40px;
                        }
                        
                        .footer {
                            position: absolute;
                            width: 100%;
                            padding: 50px;
                            box-sizing: border-box;
                            left: 0px;
                            bottom: 0px;
                        }
                        
                        .footer-heading h2 {
                            margin-right: 20px;
                        }
                        
                        .footer-heading span {
                            border: 2px solid #555555;
                            width: 30px;
                            box-sizing: border-box;
                            margin: 0px 5px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 30px;
                        }
                        
                        .footer p {
                            color: #b7b5b5;
                            font-family: calibri;
                            line-height: 15px;
                            font-weight: 400;
                            width: 300px;
                            font-size: 16px;
                        }
                        
                        .social {
                            position: absolute;
                            bottom: 40px;
                            right: 40px;
                        }
                        
                        .social a {
                            color: #dddddd;
                            border-left: 2px solid #6e6e6e;
                            font-family: myriad pro;
                            padding: 0px 10px;
                            letter-spacing: 2px;
                            transition: all ease 0.5s;
                        }
                        
                        .fb:hover {
                            border-left: 2px solid #088adc;
                            color: #088adc;
                        }
                        
                        .in:hover {
                            border-left: 2px solid #d5ba00;
                            color: #d5ba00;
                        }
                        
                        .yu:hover {
                            border-left: 2px solid #c91a1d;
                            color: #c91a1d;
                        }
                        
                        .product-img {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            box-sizing: border-box;
                            height: 70%;
                        }
                        
                        .cart-opt {
                            display: flex;
                            flex-direction: column;
                            position: absolute;
                            bottom: 50px;
                            right: 60px;
                        }
                        
                        .cart-opt a,
                        p {
                            font-family: calibri;
                            font-weight: bold;
                            letter-spacing: 1px;
                            line-height: 10px;
                        }
                        
                        .price {
                            font-size: 25px;
                            color: #161616;
                        }
                        
                        .add-btn {
                            background-color: #313237;
                            font-size: 18px;
                            border-radius: 5px;
                            width: 150px;
                            height: 45px;
                            color: #FFFFFF;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
                        }
                        
                        .add-btn:hover {
                            background-color: #5a5b63;
                            transition: all ease 0.5s;
                        }
                        
                        .button {
                            position: absolute;
                            bottom: 50px;
                            left: 40px;
                            display: flex;
                        }
                        
                        .button a {
                            color: #fbfbfb;
                            background-color: #848484;
                            width: 40px;
                            height: 40px;
                            font-size: 14px;
                            border-radius: 50%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-family: calibri;
                            margin: 0px 5px;
                        }
                        
                        .active-btn {
                            width: 80px !important;
                            height: 80px !important;
                            background-color: #313237 !important;
                            font-size: 25px !important;
                        }
                        
                        .text-container1,
                        .text-container2 {
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            left: -10000px;
                        }
                        
                        .active-text-slide {
                            left: auto;
                        }
                        
                        .active-text-slide h1 {
                            animation: text-animation ease 0.5s;
                        }
                        
                        .img-container1,
                        .img-container2 {
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            right: -1000000px;
                        }
                        
                        .active-img-slide {
                            right: auto;
                            animation: fade ease 1s;
                        }
                        
                        .active-text-slide>.footer {
                            animation: fade ease 1s;
                        }
                        
                        @keyframes text-animation {
                            0% {
                                letter-spacing: 100px;
                            }
                            100% {
                                letter-spacing: 0px;
                            }
                        }
                        
                        @keyframes fade {
                            0% {
                                opacity: 0;
                            }
                            100% {
                                opacity: 1;
                            }
                        }
                        
                        input[type=text],
                        input[type=password] {
                            width: 100%;
                            padding: 15px;
                            margin: 5px 0 22px 0;
                            display: inline-block;
                            border: none;
                            background: #f1f1f1;
                        }
                        /* Add a background color when the inputs get focus */
                        
                        input[type=text]:focus,
                        input[type=password]:focus {
                            background-color: #ddd;
                            outline: none;
                        }
                        /* Set a style for all buttons */
                        
                        button {
                            background-color: #080808;
                            color: white;
                            padding-top: right;
                            margin: 8px 0;
                            border: none;
                            cursor: pointer;
                            width: 100%;
                            opacity: 0.9;
                        }
                        
                        button:hover {
                            opacity: 1;
                        }
                        /* Extra styles for the cancel button */
                        
                        .cancelbtn {
                            padding: 14px 20px;
                            background-color: #f44336;
                        }
                        /* Float cancel and signup buttons and add an equal width */
                        
                        .cancelbtn,
                        .signupbtn {
                            float: right;
                            width: 50%;
                        }
                        /* Add padding to container elements */
                        
                        .container {
                            padding: 16px;
                        }
                        /* The Modal (background) */
                        
                        .modal {
                            display: none;
                            /* Hidden by default */
                            position: fixed;
                            /* Stay in place */
                            z-index: 1;
                            /* Sit on top */
                            left: 0;
                            top: 0;
                            width: 100%;
                            /* Full width */
                            height: 100%;
                            /* Full height */
                            overflow: auto;
                            /* Enable scroll if needed */
                            background-color: #474e5d;
                            padding-top: 50px;
                        }
                        /* Modal Content/Box */
                        
                        .modal-content {
                            background-color: #fefefe;
                            margin: 5% auto 15% auto;
                            /* 5% from the top, 15% from the bottom and centered */
                            border: 1px solid #888;
                            width: 80%;
                            /* Could be more or less, depending on screen size */
                        }
                        /* Style the horizontal ruler */
                        
                        hr {
                            border: 1px solid #f1f1f1;
                            margin-bottom: 25px;
                        }
                        /* The Close Button (x) */
                        
                        .close {
                            position: absolute;
                            right: 35px;
                            top: 15px;
                            font-size: 40px;
                            font-weight: bold;
                            color: #f1f1f1;
                        }
                        
                        .close:hover,
                        .close:focus {
                            color: #f44336;
                            cursor: pointer;
                        }
                        /* Clear floats */
                        
                        .clearfix::after {
                            content: "";
                            clear: both;
                            display: table;
                        }
                        /* Change styles for cancel button and signup button on extra small screens */
                        
                        @media screen and (max-width: 300px) {
                            .cancelbtn,
                            .signupbtn {
                                width: 100%;
                            }
                        }
                        /* Full-width input fields */
                        
                        input[type=text],
                        input[type=password] {
                            width: 100%;
                            padding: 12 px 20 px;
                            margin: 8 px 0;
                            display: inline - block;
                            border: 1 px solid#ccc;
                            box-sizing: border-box;
                        }
                        /* Set a style for all buttons */
                        
                        button {
                            background-color: black;
                            color: white;
                            padding: 14px 20px;
                            margin: 8px 0;
                            border: none;
                            cursor: pointer;
                            width: 100%;
                        }
                        
                        button:hover {
                            opacity: 0.8;
                        }
                        /* Extra styles for the cancel button */
                        
                        .cancelbtn {
                            width: auto;
                            padding: 10px 18px;
                            background-color: #f44336;
                        }
                        /* Center the image and position the close button */
                        
                        .imgcontainer {
                            text-align: center;
                            margin: 24 px 0 12 px 0;
                            position: relative;
                        }
                        
                        img.avatar {
                            width: 40%;
                            border-radius: 50%;
                        }
                        
                        .container {
                            padding: 16 px;
                        }
                        
                        span.psw {
                            float: right;
                            padding-top: 16px;
                        }
                        /* The Modal (background) */
                        
                        .modal {
                            display: none;
                            /* Hidden by default */
                            position: fixed;
                            /* Stay in place */
                            z-index: 1;
                            /* Sit on top */
                            left: 0;
                            top: 0;
                            width: 100%;
                            /* Full width */
                            height: 100%;
                            /* Full height */
                            overflow: auto;
                            /* Enable scroll if needed */
                            background-color: rgb(0, 0, 0);
                            /* Fallback color */
                            background-color: rgba(0, 0, 0, 0.4);
                            /* Black w/ opacity */
                            padding-top: 60px;
                        }
                        /* Modal Content/Box */
                        
                        .modal-content {
                            background-color: #fefefe;
                            margin: 5% auto 15% auto;
                            /* 5% from the top, 15% from the bottom and centered */
                            border: 1 px solid #888;
                            width: 80%;
                            /* Could be more or less, depending on screen size */
                        }
                        /* The Close Button (x) */
                        
                        .close {
                            position: absolute;
                            right: 25px;
                            top: 0;
                            color: #000;
                            font-size: 35 px;
                            font-weight: bold;
                        }
                        
                        .close hover,
                        .close focus {
                            color: red;
                            cursor: pointer;
                        }
                        /* Add Zoom Animation */
                        
                        .animate {
                            -webkit-animation: animatezoom 0.6 s;
                            animation: animatezoom 0.6 s
                        }
                        
                        @-webkit-keyframes animatezoom {
                            from {
                                -webkit-transform: scale(0)
                            }
                            to {
                                -webkit-transform: scale(1)
                            }
                        }
                        
                        @keyframes animatezoom {
                            from {
                                transform: scale(0)
                            }
                            to {
                                transform: scale(1)
                            }
                        }
                        /* Change styles for span and cancel button on extra small screens */
                        
                        @media screen and (max-width: 300px) {
                            span.psw {
                                display: block;
                                float: none;
                            }
                            .cancelbtn {
                                width: 100%;
                            }
                        }
                        /* Change styles for span and cancel button on extra small screens */
                        
                        @media screen and(max-width: 300 px) {
                            span.psw {
                                display: block;
                                float: none;
                            }
                            .cancelbtn {
                                width: 100%;
                            }
                        }
                        
                        .container {
                            max-width: 1170px;
                            background-color: black;
                            margin: auto;
                        }
                        
                        .row {
                            display: flex;
                            flex-wrap: wrap;
                        }
                        
                        ul {
                            list-style: none;
                        }
                        
                        .footer {
                            background-color: #24262B;
                            padding: 70px 0;
                        }
                        
                        .footer-col {
                            width: 25%;
                            padding: 0 25px;
                            height: 50%;
                        }
                        
                        .footer-col h4 {
                            font-size: 18px;
                            text-transform: capitalize;
                            color: #FFFFFF;
                            margin-bottom: 30px;
                            font-weight: 500;
                            position: relative;
                        }
                        
                        .footer-col h4::before {
                            content: '';
                            position: absolute;
                            left: 0;
                            bottom: -10px;
                            background-color: #E91E63;
                            height: 2px;
                            box-sizing: border-box;
                            width: 50px;
                        }
                        
                        .footer-col ul li:not(:last-child) {
                            margin-bottom: 10px;
                        }
                        
                        .footer-col ul li a {
                            font-size: 16px;
                            text-transform: capitalize;
                            color: #FFFFFF;
                            font-weight: 300;
                            color: #24262B;
                            display: block;
                            transition: all 0.3s ease;
                            text-decoration: none;
                        }
                        
                        .footer-col ul li a:hover {
                            font-size: 20px;
                            color: #FFFFFF;
                            padding-left: 10px;
                            padding: 3px 0;
                            margin-left: 5px;
                            font-weight: 700;
                        }
                        
                        .footer-col .social-links a {
                            display: inline-block;
                            height: 40px;
                            width: 40px;
                            background-color: rgb();
                        }
                        
                        .social-links a:hover {
                            padding-left: 10px;
                            padding: 3px 0;
                            margin-left: 5px;
                        }