/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 06 2026 | 03:08:41 */
.bq-gallery{
  --red:#EB2627;
  --black:#050505;
  --gold:#B9A77A;

  width:100%;
  padding:90px 5%;
  background:#050505;
  color:#fff;
  overflow:hidden;
  font-family:Arial,Helvetica,sans-serif;
}

.bq-gallery *,
.bq-gallery *::before,
.bq-gallery *::after{
  box-sizing:border-box;
}

.bq-container{
  width:100%;
  max-width:1450px;
  margin:auto;
}


/* HEADER */

.bq-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:35px;
}

.bq-kicker{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:16px;

  color:var(--red);
  font-size:10px;
  font-weight:700;
  letter-spacing:5px;
}

.bq-kicker::before{
  content:"";
  width:35px;
  height:2px;
  background:var(--red);
}

.bq-title{
  margin:0;
  font-size:clamp(46px,5vw,75px);
  line-height:.88;
  letter-spacing:-4px;
  font-weight:800;
  color: #fff;
  text-transform:uppercase;
}

.bq-title span{
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.75);
}

.bq-description{
  width:500px;
  margin:0 0 3px;
  color:rgba(255,255,255,.45);
  font-size:18px;
  line-height:1.8;
}


/* MAIN LAYOUT */

.bq-layout{
  display:grid;

  /* LEFT IMAGE SMALLER / RIGHT THUMBNAILS BIGGER */
  grid-template-columns:minmax(0,72%) minmax(0,28%);

  width:100%;
  height:570px;
  gap:12px;
}


/* MAIN IMAGE */

.bq-main{
  position:relative;
  width:100%;
  height:570px;
  padding:6px;

  background:#090909;
  border:1px solid var(--gold);

  overflow:hidden;

  box-shadow:0 25px 70px rgba(0,0,0,.5);
}

.bq-main-inner{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#111;
}


/* SLIDES */

.bq-slide{
  position:absolute;
  inset:0;

  opacity:0;
  visibility:hidden;

  transition:
    opacity .7s ease,
    visibility .7s ease;
}

.bq-slide.active{
  opacity:1;
  visibility:visible;
}

.bq-slide img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transform:scale(1.03);

  transition:transform 6s cubic-bezier(.16,1,.3,1);
}

.bq-slide.active img{
  transform:scale(1);
}

.bq-slide::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.48),
      transparent 32%,
      transparent 65%,
      rgba(0,0,0,.55)
    );
}


/* LABEL */

.bq-label{
  position:absolute;
  z-index:20;

  top:27px;
  left:27px;

  pointer-events:none;
}

.bq-name{
  display:flex;
  align-items:center;
  gap:10px;

  color:#fff;

  font-size:10px;
  font-weight:700;
  letter-spacing:4px;

  text-shadow:0 2px 10px #000;
}

.bq-name::before{
  content:"";

  width:27px;
  height:2px;

  background:var(--red);
}

.bq-number{
	display: none;}


/* CORNERS */

.bq-corner{
  position:absolute;
  z-index:20;

  width:52px;
  height:52px;

  pointer-events:none;
}

.bq-corner-top{
  top:15px;
  left:15px;

  border-top:2px solid var(--red);
  border-left:2px solid var(--red);
}

.bq-corner-bottom{
  right:15px;
  bottom:15px;

  border-right:2px solid var(--red);
  border-bottom:2px solid var(--red);
}


/* CONTROLS */

.bq-bottom{
  position:absolute;
  z-index:30;

  left:25px;
  right:25px;
  bottom:23px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  pointer-events:none;
}

.bq-counter{
  display:flex;
  align-items:baseline;
  gap:6px;

  padding:7px 11px;

  background:rgba(0,0,0,.55);

  border-left:2px solid var(--red);

  color:rgba(255,255,255,.45);

  font-size:9px;
  letter-spacing:2px;

  backdrop-filter:blur(6px);
}

.bq-counter strong{
  color:#fff;
  font-size:20px;
  letter-spacing:0;
}

.bq-arrows{
  display:flex;
  gap:5px;

  pointer-events:auto;
}

.bq-arrow{
  width:43px;
  height:43px;

  padding:0;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;

  background:rgba(0,0,0,.55);

  border:1px solid rgba(255,255,255,.35);

  cursor:pointer;

  font-size:16px;

  transition:.25s ease;
}

.bq-arrow:hover{
  background:var(--red);
  border-color:var(--red);
}


/* RIGHT THUMBNAILS */

.bq-thumbs{
  width:100%;
  height:570px;

  display:grid;

  grid-template-columns:1fr 1fr;

  grid-auto-rows:137px;

  gap:8px;

  overflow-y:auto;
  overflow-x:hidden;

  padding:1px;

  scrollbar-gutter:stable;
}

.bq-thumbs::-webkit-scrollbar{
  width:3px;
}

.bq-thumbs::-webkit-scrollbar-track{
  background:#151515;
}

.bq-thumbs::-webkit-scrollbar-thumb{
  background:var(--red);
}


/* THUMBNAIL */

.bq-thumb{
  position:relative;

  width:100%;
  height:137px;

  overflow:hidden;

  cursor:pointer;

  background:#111;

  border:1px solid rgba(255,255,255,.13);

  opacity:.45;

  transition:
    opacity .25s ease,
    border-color .25s ease;
}

.bq-thumb:hover{
  opacity:.85;
}

.bq-thumb.active{
  opacity:1;

  border:2px solid var(--red);

  box-shadow:
    0 0 0 1px rgba(235,38,39,.18);
}

.bq-thumb img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:transform .4s ease;
}

.bq-thumb:hover img{
  transform:scale(1.05);
}

.bq-thumb span{
  position:absolute;
  right:7px;
  bottom:6px;
  z-index:5;
  color:#fff;
  font-weight:800;
  letter-spacing:1px;
  text-shadow:0 2px 6px #000;
}


/* PROGRESS */

.bq-progress-row{
  display:flex;
  align-items:center;
  gap:15px;

  margin-top:17px;
}

.bq-progress{
  flex:1;
  height:2px;
  background:#1b1b1b;
}

.bq-progress span{
  display:block;

  width:5.55%;
  height:100%;

  background:var(--red);

  transition:width .5s ease;
}

.bq-total{
  color:#fff;

  font-size:8px;
  font-weight:700;
  letter-spacing:3px;

  white-space:nowrap;
}


/* TABLET */

@media(max-width:900px){

  .bq-gallery{
    padding:70px 4%;
  }

  .bq-header{
    display:block;
  }

  .bq-description{
    width:auto;
    max-width:400px;
    margin-top:22px;
  }

  .bq-layout{
    grid-template-columns:minmax(0,68%) minmax(0,32%);
    height:500px;
  }

  .bq-main{
    height:500px;
  }

  .bq-thumbs{
    height:500px;
    grid-auto-rows:117px;
  }

  .bq-thumb{
    height:117px;
  }
}


/* MOBILE */

@media(max-width:600px){

  .bq-gallery{
    padding:55px 14px;
  }

  .bq-title{
    font-size:43px;
    letter-spacing:-3px;
  }

  .bq-layout{
    grid-template-columns:minmax(0,64%) minmax(0,36%);
    height:400px;
    gap:6px;
  }

  .bq-main{
    height:400px;
    padding:4px;
  }

  .bq-thumbs{
    height:400px;

    grid-template-columns:1fr;

    grid-auto-rows:76px;

    gap:5px;
  }

  .bq-thumb{
    height:76px;
  }

  .bq-label{
    top:19px;
    left:18px;
  }

  .bq-name{
    font-size:7px;
    letter-spacing:2px;
  }

  .bq-number{
    margin-left:30px;
    font-size:9px;
  }

  .bq-bottom{
    left:17px;
    right:17px;
    bottom:16px;
  }

  .bq-arrow{
    width:36px;
    height:36px;
  }
}


/* SMALL PHONE */

@media(max-width:400px){

  .bq-layout{
    grid-template-columns:minmax(0,62%) minmax(0,38%);
    height:360px;
  }

  .bq-main{
    height:360px;
  }

  .bq-thumbs{
    height:360px;
    grid-auto-rows:68px;
  }

  .bq-thumb{
    height:68px;
  }

  .bq-title{
    font-size:39px;
  }
}