body {
    display: flex;
    flex-direction: column;
    font-family:'Times New Roman', Times, serif;
    height: 100%;
  }
  a{
    color: #000000;
    text-decoration: none;
  }
  a:hover{
    color:#8B0000;
    text-decoration: none;
  }
  ul{
    list-style: none;
    text-decoration: none;
  }
  p{
    font-size: 18px;
    color: #000000;
    margin-top: 0;
  }
  h1, h2, h3 {
    margin-bottom: 0; 
}
h2{
    margin-top: 1rem;
}
.post{
    font-size: 14px;
}
  #article-content p{
    width: 90%;
    margin-top: 1rem;
  }
  form{
    display: flex;
    width: 100%;
  }
 .type_img{
  vertical-align: 0;
 }
  ul:hover{
  text-decoration: none;
}
.badge.badge-primary {
  background-color: white;
  color: #8B0000;
  font-size: 14px;
}
 /* --------------------------------------------------------------header*/
 .header {
  width: 100%;
  background:  #f8f0f0;
}
#search-filter{
  margin-left: 27%;
  margin-bottom: 2%;
  margin-right: 35%;
}
#logo{
  margin-left: 40%;
  margin-top: 1%;
}
.search_wrap{
  width: 70%;
}
  .search {
    width: 100%;
    margin-left: 20%;
    margin-bottom: 4%;
    margin-top: 4%;
    display: flex;
    
  }
  .searchTerm {
    width: 100%;
    border: 2px solid #8B0000;
    border-right: none;
    margin-right: -3px;
    padding: 10px;
    padding-left: 15px;
    height: 2rem;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: rgb(67, 67, 67);
    font-size: 16px;
  }
  .searchTerm:focus{
    color: rgb(67, 67, 67);
  }
  .searchButton {
    width: 3rem;
    height: 2rem;
    border: 2px solid #8B0000;
    border-left: none;
    margin-left: -3px;
    background: white;
    text-align: center;
    color: #8B0000;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 16px;
    margin-left: 2px;
  }
/*-----------------------------------------------------------------burger-menu*/
#menuToggle
{
  display: none;
  position: relative;
  padding-left: 20px;
  top: 30px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color:#8B0000;
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color:#8B0000;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; 
  z-index: 2; 
  -webkit-touch-callout: none;
}

#menuToggle span
{
  display: block;
  width: 25px;
  height: 3px;
  margin-bottom: 5px;
  position: relative;
  background:#8B0000;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background:#8B0000;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background:rgb(252, 248, 248);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}
#menuToggle input:checked ~ ul
{
  transform: none;
}
/*-----------------------------------------------------------------navbar*/
#navbar{
  width: 100%;
}
.dropdowner-main {
  display: flex;
  justify-content: space-between;
  width: 100%; 
}
.dropdowner2-main{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%; 
  margin-top: 3%;
}
.dropdowner {
  width: 40%;
  flex: 1;
  margin-left: 5px;
  margin-right: 10px;
  font-size: 16px;
}
.dropdowns{
  width: 100%;
  height: 2rem;
  border: 0.5px solid #8B0000;
  border-radius: 3px 3px 3px 3px;
  font-size: 14px;
  background-color: white;
  color: rgb(67, 67, 67);
}

.dropdowns:focus,
.dropdowns:active{
  border: transparent; 
  outline-color: transparent;
}
.custom-options{
  color: #8B0000;
  margin-left: 15%;
  font-size: 16px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 5px;
  border: 1px solid #1e1d1d;
  background-color: #fff;
}
.custom-options::after {
  content: "-";
  position: absolute;
  border-bottom: 1px solid #0b0a0a; 
}

/*-------------------------------------------------------------------content*/
  #main-content{
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 1%;
  }
  #content{  
    flex-grow: 1;
    max-width: 50%;
    margin-right: 3%;
    margin-bottom: 5%;
    margin-left: 5%;
}
  #content1{
    margin-top: 15%;
}
.noresult-img{
  width: 60%;
  height: 40%;
  opacity: 0.7;
  margin-left: 20%;
}
.bottom-article{
  margin-top: 10%;
}
.post{
  margin-top: 1%;
}
/*-------------------------------------------------------------------index*/
#index-title{
  color: #8B0000;
  font-size: 1.8rem;
  margin-top: 7%;
}
#choice{
  width: 100;
  height: 200px;
}
.choice-img{
  width: 100%;
  height: 100%;
}
.card{
  border-radius: 25px;
  background-color: #FFF;
}
.image-content,
.card-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 14px;
}
.image-content{
  position: relative;
  row-gap: 5px;
  padding: 25px 0;
}
.overlay{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  color:#8B0000;
  border-radius: 25px 25px 0 25px;
}
.overlay::before,
.overlay::after{
  content: '';
  position: absolute;
  right: 0;
  bottom: -40px;
  height: 40px;
  width: 40px;
  color:#8B0000;
}
.overlay::after{
  border-radius: 0 25px 0 0;
  background-color: #FFF;
}
.card-image{
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background: #FFF;
  padding: 3px;
}
.card-image .card-img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  color:#8B0000;
}
.name{
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.button:hover{
  color:#8B0000;
}

.swiper-navBtn{
  color:#8B0000;
  transition: color 0.3s ease;
}
.swiper-navBtn:hover{
  color:#8B0000;
}
.swiper-navBtn::before,
.swiper-navBtn::after{
  font-size: 35px;
}
.swiper-button-next{
  right: 0;
}
.swiper-button-prev{
  left: 0;
}
.swiper-pagination-bullet{
  background-color:#8B0000;
  opacity: 1;
}
.swiper-pagination-bullet-active{
  background-color:#8B0000;
}
/*-------------------------------------------------------------------sidebar*/
#sidebar{
  width: 20%;
}
#side-list{
  margin-left: 4%;
  width: 80%;
  max-height: 400px;
  overflow-y: hidden;
}
#show-more {
  color: #8B0000;
  border: none;
  background-color: white;
  width: 80%;
  text-align: center;
  margin-top: 5%;
}
#show-more:focus{
  outline-color: transparent;
}
/*-------------------------------------------------------------------search-list*/
#card{
  width: 100%;
  display: flex; 
  border-radius: 10px;
  border-bottom: 1px solid #dfe6e9;
  padding: 10px 20px 15px 20px;
  margin-top: 5%;
  align-items: stretch;
}
.card_name{
  color: #8B0000;
}
#card :hover{
  box-shadow: 1px solid #dfe6e9;
}
.subtitles{
  margin-top:3%;
  font-size:1.3rem;
  font-style: italic;
  color: #585858;
  font-weight: 400;
  line-height: 19px;
}
#pic{
  height: 100%;
  float: left;
  margin-bottom: 1px;
  margin-left: 1px;
}
#card_content{
  margin-left: 5%;
  width: 100%;
}
  /*-----------------------------------------------------------------filter-result*/
  #side-by-side{
    display: flex;
    flex-direction: row;
    margin-top: 5%;
  }
  #price-rating{
    margin-left: 25%;
  }
  .filter-view{
    font-size: 1rem;
    color:#585858;
  }
  #filterno{
    display:none;
  }
/*---------------------------------------------------------------- pagination*/
.pagination{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 10%;
  margin-right: 15%;
}
.pagination-btn{
  background-color: #f8f0f0;
  color: #8B0000;
  border-radius: 3px 3px 3px 3px;
  border: none;
}
.pagination-btn:focus,
.pagination-btn:active{
  border: transparent; 
  outline-color: transparent;
}

/*------------------------------------------------------------------- detail*/
#detail{
  width: 100%;
  display: flex;
  flex-direction: row;
}
.detail_name{
  font-size: 1.5rem;
  color: #8B0000;
}
#detail_pics{
  position: relative;
  width: 100%;
  height: 300px; 
  margin-top: 5%;
  overflow: hidden;
}
#detail_img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  top: 0;
  left: 0;
}
.image-container {
  position: relative;
  width: 100%;
  height: 300px; 
  overflow: hidden;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
}
#preview-img {
  max-width: 90%;
  max-height: 90%;
  display: block;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.close-button {
  color: white;
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 35px;
  cursor: pointer;
}
#detail_content{
  width: 100%;
  margin-left: 10%;
  margin-top: 5%;
  padding: 3px 3px 3px 3px;
}
#detail_description{
  width: 85%;
  line-height: 1.5;
  font-weight:400;
}
.detail_price{
  margin-top: 2%;
}
#shop{
  width:9rem;
  height: 2.5rem;
  background-color: #ffbf00;
  color: black;
  border: none;
  border-radius: 5px 5px 5px 5px;
  font-size: 16px;
}
.titles{
  font-weight: 700; 
  color: #8B0000;
  font-size: 1.3rem;
}
#detail_info{
  margin-top: 5rem;
}
.columns{
  margin-top: 1rem;
}
#video{
  width: 90%;
  height: 20rem;
}
#address{
  width: 90%;
  margin-top: 1rem;
  padding-top: 2%;
}
#navigation{
  display: flex;
  flex-direction: row;
  margin-left: 20%;
}
/*------------------------------------------------------------ rating*/
#rating-stars {
  display: inline-block;
  font-size: 0;
}
.rating input {
  display: none;
}
.rating label {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url('https://alcoholshelf.com/static/images/emptystar.png');
  background-size: cover;
  cursor: pointer;
}
.rating .filled-stars {
  background-image: url('https://alcoholshelf.com/static/images/filledstar.png');
}
.rating .half-star {
  background-image: url('https://alcoholshelf.com/static/images/halfstar.png'); 
}

/* ------------------------------------------------------------Articles*/
#hero-container{
  background-size: cover;
  background-position: center;
  height: auto;
  display: flex;
  align-items: center;
  text-align: center;
  color: #fff;
  font-size: 2rem;
}
.main-title{
  text-wrap: balance;
  color: #8B0000;
  font-size: 2rem;
}
h1{
  color: #8B0000;
  font-size: 2rem;
}
.article-content h2{
  font-size: 23px;
  color: #8B0000;
}
.article-content h3{
  font-size: 20px;
  color: #8B0000;
}
.article-content h4{
  font-size: 19px;
  color: #8B0000;
}
.article-content p{
  font-size: 18px;
}
.subheading{
  color: #1e1d1d;
  font-size: 22px;
}
.highlight{
  font-weight: bold;
  color: #444343;
}
.extra-img{
  max-width: 100%;
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}
.extra-img img{
  max-width: 80%;
  height: auto;
  display: block; 
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.rightcolumn {
  width: 25%;
  margin-bottom: 130px;
}
.articleimg {
  max-width: 100%; 
  height: auto; 
  display: block; 
  margin: 0 auto; 
  border: 1px solid #ccc; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
  border-radius: 4px;
}
.card {
  border: none;
  padding: 20px;
  margin-top: 20px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* --------------------------------------------------------------FAQ*/
.text-secondary {
  color: #8B0000;
}

.fa,
.fas {
  font-family: 'FontAwesome';
  font-weight: 400;
  font-size: 1.2rem;
  font-style: normal;
}
.right-0 {
  right: 0;
}
.top-0 {
  top: 0;
}
.h-100 {
  height: 100%;
}
a.text-secondary:focus,
a.text-secondary:hover {
  text-decoration: none;
  color: #914444;
}
#accordion .fa-plus {
  transition: -webkit-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
}
#accordion a[aria-expanded=true] .fa-plus {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* --------------------------------------------------------------footer*/
  .footer-clean {
    background-color:#f8f0f0;
    color:#8B0000;
    padding: 20px;
    text-align: center;
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  .footer-clean h3 {
    margin-top:0;
    margin-bottom:12px;
    font-weight:bold;
    font-size:16px;
  }
  .footer-clean ul {
    padding:0;
    list-style:none;
    line-height:1.6;
    font-size:14px;
    margin-bottom:0;
  }
  .footer-clean ul a {
    color:inherit;
    text-decoration:none;
    opacity:0.8;
  }
  .footer-clean ul a:hover {
    opacity:1;
  }
  .footer-clean .item.social {
    text-align:right;
  }
  @media (max-width:767px) {
    .footer-clean .item {
      text-align:center;
      padding-bottom:20px;
    }
  }
  @media (max-width: 768px) {
    .footer-clean .item.social {
      text-align:center;
    }
  }
  .footer-clean .item.social > a {
    font-size:24px;
    width:40px;
    height:40px;
    line-height:40px;
    display:inline-block;
    text-align:center;
    border-radius:50%;
    border:1px solid #8B0000;
    margin-left:10px;
    margin-top:22px;
    color:inherit;
    opacity:0.75;
  }
  .footer-clean .item.social > a:hover {
    opacity:0.9;
  }
  
  @media (max-width:991px) {
    .footer-clean .item.social > a {
      margin-top:40px;
    }
  }
  
  @media (max-width:767px) {
    .footer-clean .item.social > a {
      margin-top:10px;
    }
  }
  
  .footer-clean .copyright {
    margin-top:14px;
    margin-bottom:0;
    font-size:13px;
    opacity:0.6;
  }
  /*--------------------------------------------------------------------------- phone*/
  @media only screen and (max-width: 500px){
    form{
      width: 100%;
    }
    p{
      font-size: 16px;
    }
    #search-filter{
      margin-left: 1%;
      margin-bottom: 2%;
      margin-right: 1%;
    }
    #menuToggle
    {
      display: block;
    }
    #main-content{
      display: block;
      width: 100%;
      margin-top: 3%;
    }
    #content {
      max-width: 100%;
      padding: 3px 10px 30px 3px;
      float:none;
    }
    #index-title{
      font-size: 1.8rem;
    }
     #pic {
      float: none;
      margin: 0 auto;
     }
    #logo{
      margin-left: 30%;
    }
    .rightcolumn{
      display: none;
    } 
    #article-content p{
      width: 100%;
    }
    #navbar{
      width: 100%;
      margin-left: 2%;
    }
    .dropdowner-main {
      margin-top: 2%;
      width: 100%; 
    }
    .dropdowner2-main {
      margin-top: 3%;
    }
    .dropdowner {
      width: 40%;
      flex: 1;
      margin-left: 5px;
      margin-right: 10px;
      font-size: 16px;
    }
    .dropdowns{
      width: 100%;
      height: 1.5rem;
      font-size: 12px;
    }
    #detail{
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-top: 20%;
    }
    .detail_name{
      text-align: center;
      font-size: 1.2rem;
    }
    #detail_img {
      position: relative; 
      width: 100%;
      object-fit: contain;
    }
    .vl {
      display: none;
    }
    .columns {
      padding: 0px;
    }
    .bottom-article{
      display: block;
    }
    .image-container {
      width: 100%;
      height: auto; 
    }
    #detail_description{
      width: 100%;
    }
    #detail_description .subtitles{
      text-align: center;
    }
    #detail_info{
      display:block;
      margin-top: 3rem;
    }
    #detail_content{
      margin-top: 5%;
      margin-left: none;
    }
    #address{
      width: 100%;
    }
    #detail_content{
      margin-top: 6%;
      margin-left: 2%;
      padding: 3px 3px 3px 3px;
    }
    #card {
      display: flex;
      flex-direction: column;
      flex-grow:1 ;
      margin-top: 12%;
    }
    .card_name{
      font-size: 1.2rem;
    }
    #card_content {
      padding-left: 25%;
      padding-right: 5%;
      margin-top: 20px;
    }
    #sidebar{
      display: none;
    }
     #card_description{
      display: none;
     }
    #content1{
      margin-top: 30%;
    }
    .leftcolumn {
      float: none;
      width: 100%;
    }
    .rightcolumn {
      display: none;
    }
    .searchTerm {
      font-size: 13px;
    }
    .search {
      width: 100%;
      margin-left: 20%;
    } 
    ul.no-indent {
      padding-left: 0;
      list-style: none;
    }
    
    ul.no-indent li {
      margin-left: 0; 
    }
    #volume-country{
      display:none;
    }
    #price-rating{
      margin-left: 0%;
    }
    #filter-price{
      display: none;
    }
    #filterno{
      display:block;
      color: #585858;
    }
    #side-by-side{
      display: flex;
      flex-direction: column;
      margin-top: 2%;
    }
    .extra-img img{
      max-width: 90%;
    }
    #video{
     width: 100%;
}
    
  }

  /*--------------------------------------------------------------------------- tablet*/
 @media (min-width: 501px) and (max-width: 991px) {
    form{
      width: 100%;
    }
    p{
      font-size: 18px;
    }
     .header {
      padding-bottom: 2%;
      padding-left: 1%;
      padding-right: 1%;
    }
    #search-filter{
      margin-left: 1%;
      margin-right: 1%;
    }
    #sidebar{
      display: none;
    }
    #logo {
      margin-left: 40%;
    }
    #main-content{
      display: block;
      width: 100%;
      margin-top: 3%;
    }
     #pic {
      float: none;
      margin: 0 auto;
     }
    .rightcolumn{
      display: none;
    }
    #article-content p{
      width: 100%;
    }
    #detail{
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-left: 1%;
    }
    .vl {
      display: none;
    }
    .columns {
      padding: 0px;
    }
    .bottom-article{
      display: block;
    }
    .dropdowner-main {
      width: 80%;
      margin-left: 10%; 
    }
    .dropdowner2-main {
      width: 80%;
      margin-left: 10%; 
    }
    .dropdowner {
      width: 100%; 
    }
    .dropdowns{
      width: 100%;
      border: 0.5px solid #8B0000;
      height: 2rem;
      font-size: 14px;
    }
    .detail_name{
      text-align: center;
      font-size: 2rem;
    }
    .subtitles{
      font-size: 20px;
    }
    #detail_img {
      position: relative; 
      width: 100%;
      object-fit: contain;
    }
    .image-container {
      width: 100%;
      height: auto; 
    }
    #detail_description{
      width: 100%;
    }
    #detail_description .subtitles{
      text-align: center;
    }
    #detail_info{
      display:block;
      margin-top: 3rem;
    }
    #detail_content{
      margin-top: 5%;
      margin-left: none;
    }
    #address{
      width: 100%;
    }
    #detail_content{
      margin-top: 6%;
      margin-left: 2%;
      padding: 3px 3px 3px 3px;
    }
    #video{
      width: 500px;
      height: 350px;
    }
    #content {
      padding: 3px 3px 3px 3px;
      max-width: 90%;
      float:none;
    }
    #card {
      width: 100%;
      flex-grow:1 ;
    }
    .card_name{
      font-size: 1.4rem;
    }
    #card_content {
      margin-left: 5%;
      margin-top: 20px;
    }
    
     #card_description{
      display: none;
     }
    #content1{
      margin-top: 40%;
    }
    .searchTerm {
      font-size: 14px;
    }
    .search{
      width: 100%;
      height: 2.3rem;
      margin-left: 40%;
    }
    .search_wrap{
      width: 55%;
    }

}