html{
	min-height: 100%;
}

.nav-bar{
	padding-top: 10px;
	background-color: white;
}
.f-nav {
	z-index: 9999;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	margin:0;
	padding-top: 10px;
	background-color: white;
	height: 55px;
}
.discount {
	background-color: #FF3030;
	color: white;
	border-radius: 5em / 5em;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: .5em;
	position: absolute;
	bottom:0;
	transition: all 0.5s ease;

}
.product-icons-shop-basket {
	float: left;
}
.product-icons-search {
	float: right;
}
.quick-review {
	display: flex;
	align-items: flex-end;
	padding-bottom: 3%;
}
.quick-review a {
	text-decoration: none;
	font-size: 85%;
}
.product-in:hover .product-quick-review {
	color: #FF3030;
}

.product {
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 10px;
	transition: all 0.5s ease;

}

.product-image{
width: 100%; 
height: 200px;
object-fit: scale-down;
}
.product-in {
	border: 1px solid #e2e2e2;
	transition: all 0.5s ease;
	min-height: 325px;
}
.product-body {
	position: relative;
	transition: all 0.5s ease;
}

.product-footer-name{
padding-top: 10px; 
color:#77787A; 
height:100px; 
min-height: 75px; 
max-height: 75px;
text-decoration: none;	
}
.product-footer-name :hover{
color:#77787A; 
text-decoration: none;	
}
.sold-out {
	position: absolute;
	top: 2%;
	left: 3%;
	/*background-color: #53C15A;*/
	background-color: #C82333;
	color: white;
	border-radius: 5em / 5em;
	padding-left: 4.5%;
	padding-right: 4.5%;
	padding-top: 1%;
	padding-bottom: 1%;
	font-size: 9pt;
}
.product-price {
	color: #FF3030;
	word-break: break-all;
}
.quick-review {
	display: flex;
	align-items: flex-end;
	padding-bottom: 3%;
}
.quick-review a {
	text-decoration: none;
	font-size: 85%;
}
.tag {
	background-color: #D94144;
	float: left;
	padding: 5px 10px;
	border-radius: 2.5px;
	font-size: 10px;
	position: absolute;
	color: white;
	margin-top: 10px
}
.tag-left {
	background-color: transparent;
	float: left;
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 10px;
	position: relative;
	color: white;
	margin-top: 10px
}
.tag-left:after {
	content: '';
	position: absolute;
	left: -50%;
	top: 100%;
	border-style: solid;
	border-width: 0 7.5px 5px 7.5px;
	;
	border-color: transparent transparent #D94144 transparent;
	transform: rotate(-90deg);
}




#nav-bar-menu-bottom {
	display: none;
	position: absolute;
	z-index: 999;
	border-radius: .2%;
	background-color: transparent;
	top:33;
}

#nav-bar-menu-bottom div div{
	background-color: white;
	border-radius: .2%;
	
}


.nav-bar-menu-ul {
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-align: center;	
	
}
.nav-bar-menu-li {
    display: inline-block;
	margin:0;
		
}
.nav-bar-menu-li-a {
 display: inline-block;
	text-align: center;
	color: black;
	text-decoration: none;
	padding: 5px 20px;/*NEV-padding: 5px 35px*/
	font-size: .9em;
	border-bottom: 3px solid transparent;
}

.nav-bar-menu-li:after {

  display:block;
  content: '';
  border-bottom: 1px solid #D94144;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;

}
.nav-bar-menu-li:hover:after { transform: scaleX(1); }
.nav-bar-menu-li:after{  transform-origin:  0% 50%; }

#search-result {
	background-color: white;
	position: absolute;
	width: 100%;
	border-radius: .2%;
	border-bottom: 1px solid #D94144;
	border-right: 1px solid #D94144;
	border-left: 1px solid #D94144;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	left: 0;
	padding-top: 2%;
	top: -3px;
	height: 300px;
	display: none;
	overflow: scroll;
	overflow-x: hidden;
}
#nav-bar-user-bottom {
	position: absolute;
	display: none;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	background-color: white;
	border-radius: 10px;
}
#nav-bar-basket-bottom {
	background-color: white;
	position: absolute;
	left: 0;
	top: 0px;
	width: 100%;
	display: none;
	border-radius: 10px;
}
#nav-bar-basket-bottom-scroll {
	left: 0;
	overflow: auto;
	overflow-x: hidden;
	height: 300px;
	padding: 10px;
}
.nav-bar-basket-bottom-image {
	width: 80%;
	height: 50px;
	max-height: 50px;
	object-fit: scale-down;
	border: 1px solid #F4F4F4;
	margin-left: 10px;
}


#user-tag-top {
	background-color: transparent;
	display: none;
}
#user-tag-top:after {
	content: '';
	position: absolute;
	left: 45;
	bottom: 0;
	border-style: solid;
	border-width: 0 15px 10px 15px;
	border-color: transparent transparent white transparent;
	transform: rotate(0deg);
}
#basket-tag-top {
	background-color: transparent;
	display: none;
}
#basket-tag-top:after {
	content: '';
	position: absolute;
	right: 70%;
	bottom: -16;
	border-style: solid;
	border-width: 0 15px 10px 15px;
	border-color: transparent transparent white transparent;
	transform: rotate(0deg);
}
.nav-bar-search-bottom-image {
	width: 80%;
	height: 75px;
	max-height: 75px;
	object-fit: scale-down;
	border: 1px solid #F4F4F4;
}
.search-sold-out{
	left:13%;
	top:5%;
	font-size: .5em;
}
#content-full-login {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.40);
	display: none;
	position: fixed;
}
#content-full {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.40);
	display: none;
	position: fixed;
}
#content {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.40);
	display: none;
	z-index: 998;
	position: fixed;

}



.footer-menu-ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.footer-menu-li a {
	text-decoration: none;
	font-size: .9em;
	color: black;
}
.footer-menu-li a:hover {
	color: #FF0000;
}
.footer-social {
	text-decoration: none;
	font-size: .8em;
	color: black;
	margin-right: 10px;
}
.footer-social:hover {
	color: #D94144;
}
.verticle {
	width: 1px;
	height: 80%;
	position: absolute;
	background-color: grey;
	left: 1%;
}
.product-features-select-item {
	padding-top: 6%;
	transition: all 0.5s ease;
}
.product-small-image {
	border: 1px solid #e8e8e8;
	cursor:pointer;
	transition: box-shadow .2s;
	transition: all 0.5s ease;
}
#product-small-image-scroll .product-small-image{
	width: 100%; 
	height: 75px;
	object-fit: scale-down; 
	background-color: white;
	-webkit-box-shadow: 0px 0px 8px 1px transparent;
-moz-box-shadow: 0px 0px 8px 1px transparent;
box-shadow: 0px 0px 8px 1px transparent;
	transition: all 0.5s ease;
}



.nav-link-product {
	display: block;
	padding: .5rem 1rem;
	color: #6c757d;
	border-top: 2px solid transparent;
	background-color: white;
	margin-right: .2rem;
    margin-bottom: .1rem;
}
.nav-link-product:focus,  .nav-link-product:hover {
	text-decoration: none;
	color: #D0211C;


}
.nav-link-product.disabled {
	color: #6c757d
}
.nav-link-product.active {
	color: #D0211C;
	background-color: white;
	border-top: 2px solid #D0211C;
	font-weight: bold;

}
.user-comment-img {
	font-size: 3em;
	transition: all 0.5s ease;
}
.header-hr {
	word-break: normal;
	font-size: 2em;
}



	

		/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}

::-webkit-scrollbar-track {
border: 1px solid #C32828;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: #C32828;
 border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #B01D2B;
}
/* Mobile Codes */

#mobile-nav-bar {
	display: none;
	z-index: 1005;
	background-color: #F8FAFC;
	width: 100%;
}
#mobile-nav-bar-in {
	padding: 2%;
}
#mobile-nav-bar-search {
	margin: 0;
	padding-bottom: 5px;
}
#mobile-search-result {
	background-color: white;
	position: absolute;
	width: 100%;
	border-radius: .2%;
	border-bottom: 1px solid #D94144;
	border-right: 1px solid #D94144;
	border-left: 1px solid #D94144;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	left: 0;
	padding-top: 2%;
	padding-right: 2%;
	top: -3px;
	height: 300px;
	display: none;
	overflow: scroll;
	overflow-x: hidden;
}

#mobile-nav-bar-menu-bottom{
	position: fixed;
	display: none;
	left: 0;
	width: 100%;
	height:600px;
	background-color: white;
	border-top: 1px solid #DC3545; 
	overflow-y:auto;
	
}
#mobile-nav-bar-user-bottom {
	position: absolute;
	display: none;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	background-color: white;
	border-radius: 10px;
	left: 0;
	top: 1px;
	border: 2px solid #E56975;
}
#mobile-nav-bar-basket-bottom {
	background-color: white;
	position: absolute;
	left: 0;
	top: 1px;
	width: 100%;
	display: none;
	border-radius: 10px;
	border: 2px solid #E56975;
}
#mobile-nav-bar-basket-bottom-scroll {
	overflow: auto;
	overflow-x: hidden;
	left: 0;
	padding: 10px;
	height: 300px;
}


#mobile-Category-Filter{
	padding-top: 2%;
	display: none;
}

#mobile-Category-Filter-ul{
border:1px solid #DFDFDF; 
list-style-type: none; 
margin: 0; 
padding: 0;
overflow: hidden; 
text-align: left; 
	
}

#mobile-Category-Filter-ul li{
display: inline-block;  
padding: 10px; 
background-color:#EFEFEF; 
width: 100%; 
border-bottom:1px solid #DFDFDF; 
	
}
#mobile-Category-Filter-ul li:hover{
background-color: white;
cursor:pointer;
color:black;
	
}

@media screen and (max-width: 1000px) {
	
.user-comment-img {
	font-size: 2em;
}
.header-hr {
	word-break: normal;
	font-size: .8em;
}
.nav-bar-all {
	display: none;
	
}
 #mobile-nav-bar {
	display: block;
}
.nav-item {
	width: 100%;
}
#content {
	display: none;
}
#content-full {
	display: none;
}
#content-full-login {
	display: none;
}
	
#Category-Filter{
display: none;
}
	
#mobile-Category-Filter{
display: block;
}
	
	
.quick-review{
	display: none;
	}
	
	.product-footer h5{
		font-size: .85em;
	}
	
	
.nav-bar-basket-bottom-image {
	width: 80%;
	height: 50px;
	max-height: 50px;
	object-fit: scale-down;
	border: 1px solid #F4F4F4;
	margin-left: 10px;
}
	
.nav-bar-search-bottom-image {
	width: 100%;
	height: 50px;
	max-height: 50px;
	object-fit: scale-down;
	border: 1px solid #F4F4F4;
}

.search-sold-out{
	left:20%;
	font-size: .4em;
}

.product-footer-name{
padding-top: 10px; 
color:#77787A; 
height:60px; 
min-height: 60px; 
max-height: 60px;	
font-size: .9em;
}
	
.product-image{
width: 100%; 
height: 150px;
object-fit: scale-down;
}
	
.product-in {
	border: 1px solid #e2e2e2;
	transition: all 0.5s ease;
	min-height: 260px;
}
}
@media screen and (max-height:823px){
#mobile-nav-bar-menu-bottom{
	position: fixed;
	display: none;
	left: 0;
	width: 100%;
	height:793px;
	background-color: white;
	border-top: 1px solid #DC3545; 
	overflow-y:auto;
	
}	
}

@media screen and (max-height:736px){
#mobile-nav-bar-menu-bottom{
	position: fixed;
	display: none;
	left: 0;
	width: 100%;
	height:685px;
	background-color: white;
	border-top: 1px solid #DC3545; 
	overflow-y:auto;
	
}	
}

@media screen and (max-height:654px){
#mobile-nav-bar-menu-bottom{
	position: fixed;
	display: none;
	left: 0;
	width: 100%;
	height:595px;
	background-color: white;
	border-top: 1px solid #DC3545; 
	overflow-y:auto;
	
}	
}

@media screen and (max-height:568px){
#mobile-nav-bar-menu-bottom{
	position: fixed;
	display: none;
	left: 0;
	width: 100%;
	height:528px;
	background-color: white;
	border-top: 1px solid #DC3545; 
	overflow-y:auto;
	
}	
}


/* Effects */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
}

.animated.flipOutX,
.animated.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
}

@-webkit-keyframes shake {
    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

@keyframes shake {
    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}


/* Alert Design */
.alert {
    border: 0;
    border-radius: 0;
    position: relative;
    padding: 20px 15px;
    line-height: 20px;
	z-index:99999;
}

.alert b {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 12px;
}

.alert,
.alert.alert-default {
    background-color: white;
    color: #555555;
    border-radius: 3px;
    box-shadow: 0 12px 20px -10px rgba(255, 255, 255, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(255, 255, 255, 0.2);
}

.alert a,
.alert .alert-link,
.alert.alert-default a,
.alert.alert-default .alert-link {
    color: #555555;
}

.alert.alert-inverse {
    background-color: #2e2e2e;
    color: #fff;
    border-radius: 3px;
    box-shadow: 0 12px 20px -10px rgba(33, 33, 33, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(33, 33, 33, 0.2);
}

.alert.alert-inverse a,
.alert.alert-inverse .alert-link {
    color: #fff;
}

.alert.alert-primary {
    background-color: #af2cc5;
    color: #ffffff;
    border-radius: 3px;
    box-shadow: 0 12px 20px -10px rgba(156, 39, 176, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(156, 39, 176, 0.2);
}

.alert.alert-primary a,
.alert.alert-primary .alert-link {
    color: #ffffff;
}

.alert.alert-success {
    background-color: #5cb860;
    color: #ffffff;
    border-radius: 3px;
    box-shadow: 0 12px 20px -10px rgba(76, 175, 80, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(76, 175, 80, 0.2);
}

.alert.alert-success a,
.alert.alert-success .alert-link {
    color: #ffffff;
}

.alert.alert-info {
    background-color: #00d3ee;
    color: #ffffff;
    border-radius: 3px;
    box-shadow: 0 12px 20px -10px rgba(0, 188, 212, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(0, 188, 212, 0.2);
}

.alert.alert-info a,
.alert.alert-info .alert-link {
    color: #ffffff;
}

.alert.alert-warning {
    background-color: #ffa21a;
    color: #ffffff;
    border-radius: 3px;
    box-shadow: 0 12px 20px -10px rgba(255, 152, 0, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(255, 152, 0, 0.2);
}

.alert.alert-warning a,
.alert.alert-warning .alert-link {
    color: #ffffff;
}

.alert.alert-danger {
    background-color: #f55a4e;
    color: #ffffff;
    border-radius: 3px;
    box-shadow: 0 12px 20px -10px rgba(244, 67, 54, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(244, 67, 54, 0.2);
}

.alert.alert-danger a,
.alert.alert-danger .alert-link {
    color: #ffffff;
}

.alert.alert-rose {
    background-color: #eb3573;
    color: #ffffff;
    border-radius: 3px;
    box-shadow: 0 12px 20px -10px rgba(233, 30, 99, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(233, 30, 99, 0.2);
}

.alert.alert-rose a,
.alert.alert-rose .alert-link {
    color: #ffffff;
}

.alert-info,
.alert-danger,
.alert-warning,
.alert-success {
    color: #ffffff;
}

.alert-default a,
.alert-default .alert-link {
    color: rgba(0, 0, 0, 0.87);
}

.alert i[data-notify="icon"] {
    font-size: 30px;
    display: block;
    left: 15px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
}

.alert span {
    display: block;
    max-width: 89%;
}

.alert .alert-icon {
    display: block;
    float: left;
    margin-right: 15px;
}

.alert .alert-icon i {
    margin-top: -7px;
    top: 5px;
    position: relative;
}

.alert.alert-with-icon {
    padding-left: 65px;
}