@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700');
@import url("https://fonts.googleapis.com/css?family=Metal+Mania");

.btn {
    text-align: center;
    vertical-align: middle;
    padding:.67em .67em;
    cursor: pointer;
}

.btn-primary {
    color: white;
    background-color: #56CCF2;
    border: none;
    border-radius: .3em;
    font-weight: bold;
    width:80px;
}
.btn-primary:hover {
    background-color: #2D9CDB;
}
.shop-item {
    margin:0;
    border-style:none;
}
.shop-details{
     text-align: center;
     left:0;
     right:0;
}
.btn-info{
  background-color:pink;
   text-align: center;
    vertical-align: middle;
    padding:.67em .67em;
    cursor: pointer;
}
.shop-item-title {
    width:70%;
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
    color:black;
}

.shop-item-details {
      display: flex;
    align-items: center;
    margin-bottom:2px;
    margin-top:2px;

}

.btn-danger {
    color: white;
    background-color: #EB5757;
    border: none;
    border-radius: .3em;
    font-weight: bold;
    width:70px;
    height:25px;
    text-align:center;
}

.btn-danger:hover {
    background-color: #CC4C4C;
}

.checkout {
    display: block;
    margin: 40px auto 80px auto;
    font-size: 1.75em;
}
.search-box {
  background: var(--mainPink);
  color: var(--mainBlack);
}
.badge{
   background-color:red;
   border-radius:10px;
   color:white;
   display:inline-block;
   font-size:12px;
   line-height:1;
   padding:3px 7px;
   text-align:center;
   white-space:nowrap;
   }
 .shop-item-title {
      display: block;
      padding-top:0px;
      font-size:18px;
    }


   ul{
   margin:0px;
   padding:0px;
   list-style:none;
}
ul li{
    float:left;
    text-align:center;
   width:180px;
   height:55px;
   background-color:#ff00ff;
   line-height:40px;
   font-size:20px;
   margin-right:0px;
    border-radius:2px;
    box-shadow:0px 8px 16px 0px;
    transform:scale(0.9);
}
ul li a{
   text-decoration:none;
   color:white;
   display:block;
   border-style:0;
}

ul li a:hover{
   background-color:#48d1cc;
   opacity:-5px;
    border-radius:2px;
}
ul li ul li{
   float:right;
   display:none;
}
ul li:hover ul li{
  display:block;
}
input[type=text],
input[type=password]{
 width:90%;
 height:37px;
 display:inline-block;
 border:3px solid #00B4CC;
 box-sizing:border-box;
}

 .cancelbtn{
         width:auto;
         padding:10px 18px;
         background-color:red;
         }
 .imgcontainer{
         text-align:center;
         margin:19px 0 12px 0;
         position:relative;
         }
 .login{
         padding:none;
         top:0;
         align-items:center;
         }
 span.button{
         width:auto;
         float:right;
         padding:10px 20px;
         background-color:blue;
         }
  span.psw{
    float:right;
    padding-top:16px;
  }
  .modal{
         display:none;
         position:absolute;
         bottom:0;
         margin-right:0;
         z-index:1;
         width:100%px;
         height:100%px;
         overflow:auto;
         background-color:rgb(0,0,0);
         background-color:rgba(0,0,0,0.4);
         padding-top:20px;
         float:left;
         }
  .modal-content{
      background-color:#fefefe;
         margin:10% auto 15% auto;
         border:1px solid #888;
         width:80%;
         align-items:center;
         margin-top:100px;

         }

  .close{
         position:absolute;
         right:25px;
         top:0;
         color:#000;
         font-size:35px;
         font-weight:bold;
         transition:0.3s;
         }
 .close:hover,
 .close:focus{
         color:red;
         cursor:pointer;}
.animate{
         -webkit-animation:animate zoom 0.6s;
         animation:animate zoom 0.6s}
         @-webkit-keyframes animate zoom{
         from{-webkit-transform:scale(0)}
         to{-webkit-transform:scale(1)}
         }
 @keyframes animatezoom{
         from{transform:scale(0)}
         to{transform:scale(1)}
         }
         @media screen and(max-width:300px)
         span.psw{
         display:block;
         float:none;
         align:left;
         }

.mpesa{
         display:none;
         position:fixed;
         top:0;
         width:70%;
         height:60%;
         overflow:auto;
         background-color:pink;
         padding-top:40px;
}
.pesacontainer{
         text-align:center;
         margin:19px 0 12px 0;
         position:relative;
}
.visa{
         display:none;
         position:fixed;
         top:0;
         width:100%;
         height:100%;
         overflow:auto;
         background-color:pink;
         padding-top:40px;
}
.visa-content{
 background-color:white;
         margin:5% auto 15% auto;
         border:1px solid #888;
         width:80%;
}
.visacontainer{
  text-align:center;
         margin:19px 0 12px 0;
         position:relative;
}
a.lightbox img {
height: 300px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 94px 20px 20px 20px;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
width:90%;
top:0;
right:0;
background:green;
opacity:0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
 border-radius:10px;
  box-shadow:0 0 0 10px pink;
 transform:scale(1.0);
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position:absolute;
top: 0;
left:0;
right:0;
bottom: 0;
width:85%;
height:80%;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
 border-radius:10px;
  box-shadow:0 0 0 10px green;
 transform:scale(1.0);
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display:block;
width:45px;
height:45px;
box-sizing: border-box;
background:red;
color: black;
text-decoration: none;
position: absolute;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
content: "";
display: block;
height:27px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
content: "";
display: block;
height:0px;
width: 0px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity:5;
top: 0;
bottom: 0;
}
.lightbox-target:target img {
    max-height: 100%;
    max-width: 100%;
}

.lightbox-target:target,
a.lightbox-close {
     top:0;
}
 .badge-notify,
 .my-cart-badge
 {
    background:red;
    position:relative;
    top: -20px;
    right: 10px;
  }
  .my-cart-icon-affix {
    position: fixed;
    z-index: 999;
  }
.section-header{
    float:right;
    right:0px;
    margin-top:0px;
    font-family: "Metal Mania";
    font-weight: normal;
    text-align: center;
    font-size: 1.5em;
}
.undisputed{
   float:right;
    display:none;
         z-index:2;
         right:0;
         top:0;
         width:80%;
         overflow:auto;
          position: relative;
         border-radius: 3px;
          margin: auto;
           border-radius: var(--radius);
  transition: height .4s .1s, width  .4s .1s, box-shadow .3s;
  transition-timing-function: cubic-bezier(.67,.17,.32,.95);
  box-shadow: 0 4px 30px rgba(#000, .17);
}

.cart-header {
    font-weight: bold;
    font-size: 1.25em;
    color: #333;
}

.cart-column {
    display: flex;
    align-items:top;
    border-bottom: 1px solid black;
    margin-right: 1.5em;
    margin-top: 10px;
}

.cart-row {
    display:flex;
         border:1px solid #888;
         width:100%;
         margin-top:0;

}

.cart-item {
    width: 45%;
}

.cart-price {
    width: 20%;
    font-size: 1.2em;
    color: #333;
}

.cart-quantity {
    width: 35%;
}

.cart-item-title {
    color: #333;
    margin-left: .5em;
    font-size: 1.2em;
}

.cart-item-image {
    width: 75px;
    height: auto;
    border-radius: 10px;
}

.btn-danger {
    color: white;
    background-color: #EB5757;
    border: none;
    border-radius: .3em;
    font-weight: bold;
}

.btn-danger:hover {
    background-color: #CC4C4C;
}

.cart-quantity-input {
    height: 34px;
    width: 50px;
    border-radius: 5px;
    border: 1px solid #56CCF2;
    background-color: #eee;
    color: #333;
    padding: 0;
    text-align: center;
    font-size: 1.2em;
    margin-right: 25px;
}

.cart-row:last-child {
    border-bottom: 1px solid black;
}

.cart-row:last-child .cart-column {
    border: none;
}

.cart-total {
    text-align:left;
    top: 10px;
    left:20px;
}

.cart-total-title {
    font-weight: bold;
    font-size: 1.5em;
    color: black;
    margin-right: 20px;
}

.cart-total-price {
    color:black;
    font-size: 1.1em;
}
.checkout{
float:right;
background-color:blue;
right:10px;
}

 .type{
 display:block;
   width:74px;
   height:86px;
   cursor:pointer;
   right:70px;
   bottom:0;
   position:absolute;
   text-align:center;
 }
 .span{
    position:absolute;
    left:35px;
    top:62%;
    display:block;
    width:45px;
    height:15px;
    background-color:transparent;
    border-radius:20px;
    transform:rotate(40deg);
    transition:0.5s ease all;
 }
 .span:before, .span:after{
    content:'';
    position:absolute;
    bottom:0;
    right:0;
    width:45px;
    height:15px;
    background-color:#fff;
    border-radius:10px;
    transform:rotateZ(0);
    transition:0.5s ease all;
 }
 #s-cover:hover #s-circle
 {
    top:-1px;
    width:67px;
    height:15px;
    border-width:0;
    background-color:#fff;
    border-radius:20px;
 }
 #s-cover:hover .span{
    top:50%;
    left:56px;
    width:25px;
    margin-top:-9px;
    transform:rotateZ(0);
 }
 #s-cover:hover .span:before{
    bottom:11px;
    transform:rotateZ(-52deg);
 }
 #s-cover:hover .span:after{
    bottom:-11px;
    transform:rotateZ(-52deg);
 }
 #s-cover:hover .span:before,#s-cover:hover .span:after
 {
    right:-6px;
    width:40px;
    background-color:#fff;
 }
.btn-info{
   padding:10px;
   font-size:16px;
   border:none;
   cursor:pointer;
}
.dropdown{
   position:relative;
   display:inline-block;
}
.info-content{
  display:none;
  position:absolute;
  right:0;
  background-color:pink;
  min-width:160px;
  box-shadow:0px 8px 16px 0px;
  rgba(0,0,0,0.2);
}
.info-content a{
   color:black;
   padding:12px 16px;
   text-decoration:none;
   display:block;
}
info-content a:hover{background-color:#f1f1f1}
.dropdown:hover .info-content{
  display:block;
}
.dropdown:hover .btn-info{
   background-color:#7effa5;
}
@import url(https://fonts.googleapis.com/css?family=open+Sans);
.wrap{
font-family:'open Sans',sans-serif;
 width:550px;
 left:30%;
 right:30%
 transform:translate(-50%, -50%);
}
.search{
width:550px;
height:36px;
display:flex;
}
.searchTerm{
width:450px;
border:3px solid #00B4CC;
border-right:none;
height:36px;
border-radius:5px 0 0 5px;
color:black;
}
.searchTerm:focus{
color:#00B4CC;
}
.searchButton{
 width:40px;
 height:36px;
 border:1px solid #00B4CC;
 text-align:center;
 border-radius:0 5px 5px 0;
 cursor:pointer;
 font-size:10px;
}
.slider {
	width:890px;
	margin: 2em auto;
	margin-left:40px;
	top:0px;
	 border-radius:7px 7px 7px 7px;

}

.slider-wrapper {
	width:100%;
	height:300px;
	position: relative;
	 border-radius:7px 7px 7px 7px;
}

.slide {
	float: left;
	position: absolute;
	opacity: 0;
	transition: opacity 3s linear;
}

.slider-wrapper > .slide:first-child {
	opacity: 1;
}
.cool{
 margin-right:40px;
 border:block;
 background-color:white;
 float:left;
 width:420px;
 height:300px;
 text-align:center;
 border-radius:7px 7px 7px 7px;
 overflow:hidden;