:root{
  --bg-image-top: #376bb4;
  --bg-image-middle: #376fb4;
  --bg-image-bottom: #4590de;
  --bg-color: #3773b4;
  --bg-color-light: #e5edff8f;
  --bg-color-header-btn: #e5f2ff8f;
  --color: #fff;
  --border-color:#f4f5f7;
  --alert-success: #37b47e;
  --alert-warning: #ff9800;
  --alert-error: #e83232;
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 80%;
  -webkit-text-size-adjust: 80%;
}
html, body{
 color:#616961;
 background-color:#fff;
 padding:0px 0px;
 }
 
img{
  width:100px;
  }
  
a{
  color:var(--bg-color);
  text-decoration:none;
  }
  
a:hover {
 color:#fff;
 background-color: var(--bg-color);
 border-radius:3px;
}
  
section{
  padding:5px 5px;
  }
  
#about:hover, #products:hover,#contact:hover,#faq:hover, .product:hover {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius:3px;
  }
  
p{
  font-size:14px;
  color:#616961;
  }
  
.sentence{
  background-color:#f4f5f7;
  text-align:left;
  word-wrap: break-word;
  }
  
.btn{
  color:var(--color);
  border:1px solid var(--bg-color-light);
  border-radius:5px;
  border-color:none;
  }
  
.btn-success{
background-color:var(--bg-color);
background-image: linear-gradient(var(--bg-image-top), var(--bg-image-middle) 60%, var(--bg-image-bottom));
}

.btn-delete{
background-color:var(--alert-error);
background-image: linear-gradient(var(--alert-error), var(--alert-error) 60%, var(--alert-error));
}
  
.shop-btn{
  font-size:20px;
  color:#fff;
  margin-top:10px;
  width:auto;
  font-weight:bold;
  padding:5px 10px;
  background-color:var(--bg-color);
  background-image: linear-gradient(var(--bg-image-top), var(--bg-image-middle) 60%, var(--bg-image-bottom));
  }
  
.btn:hover {
 background-color:none;
  border:1px solid var(--bg-color);
  }
  
.euie{
  font-weight:bold;
  font-style:italic;
  }
  
*{
  margin: 0px;
  width:100%;
  box-sizing: border-box;
  padding:3px 3px;
  }
  
*:before, *:after {
  box-sizing: border-box;
}

.icon{
  fill:var(--bg-color);
  }
  
#header{
  background-color:var(--bg-color);
  background-image: linear-gradient(var(--bg-image-top), var(--bg-image-middle) 60%, var(--bg-image-bottom));
  color:var(--color);
  text-align:left;
  padding:5px 5px;
  padding-left: 3%;
  padding-right: 1%;
  position:fixed;
  z-index:9999;
  display:block;
  overflow:hidden; 
  white-space:nowrap;
  }
  
.header-btn{
width:auto;padding:3px 5px;
background-color:var(--bg-color-header-btn);
display:inline;
float:left;
border:1px solid var(--bg-color);;border-radius:20%;
margin-right:4%;
}

.header-btn:hover{
border:1px solid var(--bg-color-light);background-color:#ffff;
}

.header-btn:active{
border:1px solid grey;
}

.header-cart{
 width:30px;
 margin-bottom:-3px;
}
  
#footer{
  text-align:center;
  color:#fff;
  background-color:#555656;
  padding:10px 10px;
  }
  
#body{
  position:relative;
  background-color: var(--bg-color-light);
  overflow:hidden;
  border-radius:3px;
  padding:0px 0px;
  padding-top:53px;
 }

#navbar{
  float:left;
  position:relative;
  width:10%;
  height:100%;
  font-size:20px;
  font-weight:bold;
  }
  
#company-logo img{
  width:100%;
  padding-top:15px;
  }
  
#navbar a{
  display:block;
  margin-top:20px
  }
  
.navlist{
  height:100%;
  }
  
#navbar #navlist img{
 width:25px;
 padding-bottom:0;
 }
 
#navbar #navlist #lazada{
 width:90px;
 }
 
#shop-content{
  position:relative;
  background-color: var(--bg-color);
  width:75%;
  padding:0px 0px;
  padding-top:0px;
  padding-bottom:0px;
  float:left;
  display:block;
}

#shop-menu{
  font-size:20px;
  background-color:#fff;
  text-align:right;
  font-weight:bold;
  padding:15px 15px;
  }
  
.filter-group{
width:100%
}

.filter{
width:auto
}

.search-input{
float:right;width:300px;padding:0;
}
.search-btn{
float:right;width:100px;font-weight:bold;font-size:15.5px;background-color:var(--bg-color);
  background-image: linear-gradient(var(--bg-image-top), var(--bg-image-middle) 60%, var(--bg-image-bottom));
}
  
#content{
  position:relative;
  background-color: var(--bg-color);
  width:75%;
  padding:0px 0px;
  padding-top:0px;
  padding-bottom:0px;
  float:left;
  display:block;
  }
  
#bulletin{
  position: relative;
  float:left;
  width:15%;
  height:100%;
  }
  
#bulletin button{
  margin-top:5px;
  margin-bottom:5px;
  }
  
#menu{
  font-size:20px;
  background-color:#fff;
  text-align:right;
  font-weight:bold;
  padding:15px 15px;
  }
  
#menu a{
  padding-left:12px;
  padding-right:12px;
  border-radius:3px;
  }
  
#main-content{
  background-color:#fff;
  }
  
#home{
  position:relative;
  padding:0;
  }
  
#slides, .slide{
  vertical-align:middle;
  position: relative;
  margin: 0;
  padding:0;
  }
  
.slide img{
  height:400px;
  width:100%;
  margin: 0;
  }

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: black;
  background-color: rgba(0,0,0,0.05);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  display:none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  color: white;
  background-color: rgba(0,0,0,0.8);
}

#dot {
  position: absolute;
  top: 90%;
  
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
  
#about, #contact, #products, #faq{
  color:var(--bg-color);
  background-color: var(--bg-color-light);
  margin-bottom: 0.75rem;
  display:block;
  }

.contact-content{
overflow:hidden;
  display:block;
  width:100%
}
.location-map{
vertical-align:middle;
float:left;
width:55%;
background-color: rgba(0,0,0,0.5);
margin:0;
padding:0;
}

.location-map img{
height:200px;
width:100%;
margin:0;
padding:0;
}
.contact-info{
float:left;
width:45%;
}

#contact > .contact-content > .contact-info >ul>li{
padding:8px;
color:#616961;
vertical-align:middle;
overflow:hidden;
white-space:nowrap;
}

#contact > .contact-content > .contact-info >ul>li>span >img{
width:30px;
margin-bottom:-10px;
}

.products{
  overflow:hidden;
  display:block;
  }
  
#products > a{
  margin-left:83.5%;
  padding:0;
}

.card{
overflow:hidden;
display:block;
float:left;
background-color:#fff;
margin:0.5%;
word-wrap: break-word;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 0.25rem;
text-align:center;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}

.card-shop{
width:32%;
}

.card-cart{
width:49%;
}

.card:hover {
 border: 1px solid var(--bg-color);
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

  }

.card-title{
float:left;
height:40px;
text-align:left;
color:#616961;
font-size:15px;
overflow:hidden;
font-weight:bold;
}

.card-subtitle{
float:left;width:100%;background-color:rgba(0, 0, 0, 0.04);border-bottom: 1px solid rgba(0, 0, 0, 0.08);white-space:nowrap;
}

.card-title-cart{
border:none;
height:90px;
width:45%;
}

.card-subtitle-cart{
overflow:hidden;
white-space:nowrap;
width:45%;
margin-bottom:3px;
}

.card-footer-cart{
width:45%;
}

.card-cart-action{
}

.card-body{
float:left;
height:200px;
width:100%;
margin-bottom: 20px;
padding-left: 0;
padding-right: 0;
padding-top: 0;
overflow:hidden;
}

.card-body-cart{
width:54%;
}

.card-body > a,.card-body > img{
height:100%;
width:auto;
}

.card-footer{
float:left;
color:#fff;
background-color: var(--bg-color);
overflow:hidden;
padding:0;
}

.form-shop{
padding:0;
}

.item-prev{
width:25%;float:left;display:inline;
}

.item-next{
width:25%;float:right;display:inline;
}

.item-btn{
font-size:25px;font-weight:bold;background-color:var(--bg-color);
  background-image: linear-gradient(var(--bg-image-top), var(--bg-image-middle) 60%, var(--bg-image-bottom));
}

.card-price{
width:70%;
float:left;
font-size:25px;
margin:0;
color:#fff;
background-color:#ffffff00;
overflow:hidden;
white-space:nowrap;
}

.card-price-cart{
width:100%;
}

.card-cart-btn{
width:30%;height:35px;float:right;margin:0;background-color:rgb(92.54902%,94.117647%,94.509804%);border:none;
}

.card-cart-btn > img{
margin-top:3px;
}

.product{
  padding:5px 5px;
  position:relative;
  width:100%;
  }
  
#product-desc{
  text-align:justify;
  }
  
.alert{
display: block; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 35%; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px;
  width:auto;
}

.alert-success{
background-color: var(--alert-success);
}

.alert-warning{
background-color: var(--alert-warning);
}

.alert-error{
background-color: var(--alert-error);
}

@media only screen and (max-width:620px) {
  /* For mobile phones: */
  #header{
  text-align:center;
  padding-left:1%;
  font-size:10px;
  line-height:25px;
  }
  
  .header-btn{
  margin-right:1%;
  }
  
  #navbar, #content, #bulletin, #shop-content{
    width:100%;
  }
  
  #navbar{
	text-align:center;
  }
  
  #navbar a{
	display:inline;
  }
  
  #navbar #navlist img{
  width:20px;
  }
  
  .header-cart{
  width:20px;
  }
  
  #navbar #navlist #lazada{
  width:70px;
  }
  
  #content{
    padding:0px 0px;
    }
    
  #menu{
    margin-top:1px;
    text-align:center;
    }
    
  .slide img{
   height:200px;
   }
   
  #dot {
  position: absolute;
  top: 80%;
  }
  
  #company-logo img{
    width:60%;
    padding-top:0;
  }
  
  .btn{
  font-size:20px;
  }
  
  .shop-btn{
  width:100%;
  }
  
  .alert{
  right: 5%;
}
  
  .euie{
  font-size:30px;
  }
  
  #products > a{
  width:100%;
  margin-left:0;
  }
  
  .products{
  overflow:hidden;
  display:block;
  }
  
  .location-map{
   width:100%;
   }
   
   #contact > .contact-content > .contact-info >ul>li,
   #contact > .contact-content > .contact-info >ul,
   .contact-info{
   width:100%;
   padding-left:0;
   }
   
   .search-input{
   width:75%;padding:0;
   }
   
   .search-btn{
   width:25%;font-size:15.5px;
   } 
  
  .card-shop{
   width:49%;
   }

  .card-cart{
   width:100%;
   }
  
  .card-body > a,.card-body > img{
   height:150px;
   width:auto;
   }

  .card-price{
   font-size:20px;
   margin-top:3px;
  }
  
  .card-cart-btn{
   width:28%;
  }
  .item-prev{
  width:auto;font-size:10px;
  }

  .item-next{
   width:auto;font-size:10px;
   }
  .product{
  overflow:hidden;
  display:flex;
  }
  
  #product-image{
  position:relative;
  float:left;
  vertical-align:middle;
  width:40%;
  }
  
  #product-image img{
  width:auto;
  }
  
  #product-desc{
  position:relative;
  float:left;
  width:60%;
  }
}