/**
*author= bijay kumar sah.
*gbajar.com
**/
/* header or nav bar style from here */
*{margin:0; padding:0;}
.nav-bar{width: 100%;}

.login-page{
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4);
  padding-top: 60px;
}
.login-contentanimate{
  background-color: #fefefe;
  margin: 5% auto 20% auto; 
  border: 1px solid #888;
  width: 50%;
}
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}
.imgcontainer {
  text-align: center;
  background-color: #fff;
  width: 50%;
  height: 40%;
  position: absolute;
}
.imgcontainer button{
  background-color:#3b5998; /* Green background */
  border: none; /* Green border */
  color: white; /* White text */
  padding: 4px 24px 10px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
  top: 50%;
  bottom:50%;
  left: 40%;
  height: 20px;
  position: absolute;
  text-align: center;
}
.imgcontainer button a{
	text-decoration: none;color: #fff;
}
.login-contentanimate{
 -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

.users-menu-icons a svg path{
	fill: #fff;
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 5px; /* Location of the box */
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
   /* background-color: rgb(0,0,0);*/ /* Fallback color */
    background-color: #fff; /* Black w/ opacity */
  }
  .modal-content {
    background-color: #fefefe;
    margin: auto;

    padding:0.5%;
    border: 1px solid #888;
    width: 100%;
  }
  #search_form{
      width: 100%;
      height: 2.3rem;
      border-bottom: 3px solid black;
  }
  .search_input{
     width: 91%;
      height: 1.95rem;
      outline: none;
      border: none;
  }
  .close_search{
      cursor: pointer;
  }
/* for large devices*/
@media screen and (min-width: 620px){
	body{
	margin: 56px 0 0 0;
}
.search-btn{
	display: none;
}
.nav-bar:after{
	display: table;
	content: "";
	clear: both;
	background-color: #4285f4;
}

.header-top:after{
	display: table;
	content: "";
	clear: both;
}
.header-top .log-img{
	width: 25%;
	float: left;
}
.header-top .search-bar{
	width: 75%;
	float: left;
}
.search-bar form{
	margin-top: 12px;
	width: 90%;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	display: flex;
	background-color: #f0f1d3;
	border-radius: 20px;
}
.search-bar form input{
	width: 92%;
	outline: none;
	border: none;
	margin-left: 1%;
	padding-left: 6px;
	border-top-left-radius:20px; 
	border-bottom-left-radius:20px; 
}
.search-bar form button{
	width: 5%;
	outline: none;
	border: none;
	background-color: transparent;
	cursor: pointer;
	text-align: center;
}
.modal{
	display: none;
}
.logoimg{
	margin-top: 14px;
	width: 100%;
	/*box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);*/
	display: flex;
}
.logoimg h3{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	overflow: hidden;
	white-space: nowrap;
	font-family: sans-serif;
	font-size: 26px;
	color:#fff;
	text-decoration: none;
	-webkit-tap-highlight-color:transparent;
	transition: background-color:0.1s ease-in-out;
}
.logoimg h3 a{
	color:#fff;
	text-decoration: none;
}

.users-menu-icons{
	margin-top: 5px;
	width: 100%;
	/*box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);*/
	display: flex;
}
.users-menu-icons a{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	overflow: hidden;
	white-space: nowrap;
	font-family: sans-serif;
	font-size: 13px;
	color:#444444;
	text-decoration: none;
	-webkit-tap-highlight-color:transparent;
	transition: background-color:0.1s ease-in-out;
}
.users-menu-icons a svg{
	height: 30px;
	width: 30px;
}
.users-menu-icons a .sms-note{
	border-radius: 40%;
	text-align: center;
	background-color: red;
	color: white;
	font-size: 12px;
	float: right;
	/*height: 18px;
	width: 18px;*/
	position: absolute;
}
.users-menu-icons a img{
	width: 30px;
	height: 30px;
	color: white;
}
	.users-menu{
		width: 35%;
		float: right;
		top: 0;
		right: 0;
		background-color: #4285f4;
		position: fixed;
		height: 56px;
	}
	.header-top{
	width: 65%; 
	float: left;
	background-color: #4285f4;
	top:0;
	position: fixed;
	height: 56px;
}
.categories-items{
  float: left;
  overflow: hidden;
  width: 10%;
}
.location-app{
	width: 20%;
	right: 0;
	float: right;
	/*position: absolute;*/
	display: flex;
}
.location,.apps{
	float: right;
	margin-top: 1px;
	width: 100%;
	text-align: center;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
	display: flex;
	padding: 12px;
	cursor: pointer;
}
 #notifications, #carts, #wishlists, #messages{
        display:none;
        width:450px;
        position:absolute;
        top:50px;
        left:0;
        background:#FFF;
        border:solid 1px rgba(100, 100, 100, .20);
        -webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
        z-index: 0;
    }
  #notifications:before {         
        content: '';
        display:block;
        width:0;
        height:0;
        color:transparent;
        border:10px solid #CCC;
        border-color:transparent transparent #FFF;
        margin-top:-20px;
        margin-left:10px;
    }   
}

/* for small devices*/
@media screen and (max-width: 620px){
	body{
		margin-top: 33px;
		margin-bottom: 40px;
	}
.header-top{
		width: 100%;
		top:0px;
		position: fixed;
		background-color: #4285f4;
		height: 35px;
	}
.login-contentanimate{
  background-color: #fefefe;
  margin: 5% auto 10% auto; 
  border: 1px solid #888;
  width: 85%;
}
.imgcontainer {
  text-align: center;
  background-color: #fff;
  width: 80%;
  height: 40%;
  position: absolute;
}
.imgcontainer button{
  background-color:#3b5998; /* Green background */
  border: none; /* Green border */
  color: white; /* White text */
  padding: 4px 24px 10px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
  top: 50%;
  bottom:50%;
  left: 20%;
  height: 20px;
  position: absolute;
  text-align: center;
}	
.search-btn{
	float: right;
	right:18px;
	position: fixed;
	cursor: pointer;
	border-radius: 50%;
	margin:3px 8px 9px 1px;
	background-color: transparent;
	height: 23px;
	width: 23px;
	text-align: center;
	border:1px solid #fff;
}
.search-btn svg{
	height: 19px;
	width: 19px;
	margin-top: 3px;
}
.header-top:after{
	display: table;
	content: "";
	clear: both;
}
.header-top .log-img{
	width: 25%;
	float: left;
	font-size: 20px;
}
.logoimg{
	margin-top: 8px;
	margin-bottom: 8px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	width: 100%;
	padding-left: 13px;
}
.logoimg h3{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	overflow: hidden;
	white-space: nowrap;
	font-family: sans-serif;
	font-size: 14px;
	color:#fff;
	text-decoration: none;
	-webkit-tap-highlight-color:transparent;
	transition: background-color:0,1s ease-in-out;
}
.logoimg h3 a{
	color:#fff;
	text-decoration: none;
}
.header-top .search-bar{
	width: 75%;
	float: left;
}
.search-bar form{
	margin-top: 12px;
	width: 90%;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	display: flex;
	background-color: #f0f1d3;
	border-radius: 20px;
	display: none;
}
.search-bar form input{
	width: 92%;
	outline: none;
	border: none;
	margin-left: 1%;
	padding-left: 6px;
	border-top-left-radius:20px; 
	border-bottom-left-radius:20px; 
}

.search-bar form button{
	width: 5%;
	outline: none;
	border: none;
	background-color: transparent;
	cursor: pointer;
	text-align: center;
}
	
	.users-menu{
		bottom:0px;
		width: 100%;
		position: fixed;
		background-color: #4285f2;
		height: 40px;
	}
	.users-menu-icons{
	margin-top: 5px;
	width: 100%;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	display: flex;
}
.users-menu-icons a{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	overflow: hidden;
	white-space: nowrap;
	font-family: sans-serif;
	font-size: 9px;
	color:#444444;
	text-decoration: none;
	-webkit-tap-highlight-color:transparent;
	transition: background-color:0,1s ease-in-out;
}
.users-menu-icons a svg{
	height: 18px;
}
	.users-menu-icons a .sms-note{
	border-radius: 40%;
	text-align: center;
	background-color: red;
	color: white;
	font-size: 8px;
	float: right;
	/*height: 18px;
	width: 18px;*/
	position: absolute;
}
.slider-text{
	display: none;
	width: 0px;
}
.category-bar{
	width: 100%;
}
.categories-items{
  float: left;
  overflow: hidden;
  width: 50%;
}
.categories-items .dropbtn{
  font-size:9px;  
  border: none;
  outline: none;
  padding: 14px 40px;
  font: inherit;
  margin: 0;
  cursor: pointer;
  width: 100%;
}
.location-app{
	width: 50%;
	float: left;
	right: 0;
	/*position: absolute;*/
	justify-content: flex-end;
	display: flex;
}

.location-app{
	width: 50%;
	right: 0;
	float: right;
	/*position: absolute;*/
	display: flex;
}
.location,.apps{
	float: right;
	margin-top: 1px;
	width: 100%;
	text-align: center;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
	display: flex;
	padding: 12px;
	cursor: pointer;
}
.apps{
	display: none;
}

#notifications, #carts, #wishlists, #messages {
        display:none;
        width:100%;
        position:fixed;
        top:2px;
        left:0;
        bottom: 40px;
        background:#FFF;
        border:solid 1px rgba(100, 100, 100, .20);
        -webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
        z-index: 0;
    }
  #notifications:before {         
        content: '';
        display:block;
        width:0;
        height:0;
        color:transparent;
        border:10px solid #CCC;
        border-color:transparent transparent #FFF;
        margin-top:0;
        margin-left:0;
    }   
}

/* header or nav bar stle end*/

/* being category style start*/
.category-bar{
	background-color: #f1f2f3;
	width: 100%;
	/*display: flex;
	justify-content: flex-start;*/
	display: inline-flex;
}

.slider-text{
	width: 70%;
}
.typewrite-text{
	margin-top: 4px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
	padding: 12px;
}

.categories-items .dropbtn{
  font-size:1rem;  
  border: none;
  outline: none;
  padding: 14px 16px;
  font: inherit;
  margin: 0;
  cursor: pointer;
}
.dropdown-content {
  display: none;
  position: fixed;
  /*background-color: #f9f9f9;*/
  background-color: transparent;
  /*width: 100%;*/
  left: 0;
  right: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.categories-items:hover .dropdown-content {
  display: block;
  min-width: 320px;

}
.rows .column {
  float: left;
  /*width: 33.33%;*/
  padding: 7px;
  background-color: #ccc;
  font-size: 1rem;
}

.rows .column a {
  float: none;
  color: black;
  padding: 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* category style end*/

/* being footer style start*/
.footer-nav{
  background: #ddd;
  width: 100%;
}
.footer-contents{
	background-color:  #ddd1d2;
	width: 100%;
	margin: 0px;
}
.footer-contents:after{
	display: table;
	content: "";
	clear: both;
}
.footer-column{
	width: 20%;
	float: left;
	text-align: center;
}
.footer-column h3{
	text-decoration: underline;
}
.footer-column a{
  float: none;
  color: black;
  padding: 4px;
  text-decoration: none;
  display: block;
}
/* footer style end*/