﻿/* -----------------------------------------------------------------------------------------------
* VG_CollectionPages.css
*
* 011924 DustinP: Created for housing Collection Page CSS
* ----------------------------------------------------------------------------------------------- */
/* 011924 DustinP - Import variables */
/* Global VG Variables */
/* 070822 ShawnO */
/****

 OLD VARIABLES
($vg_color_darckcharcoal) $vg-color-mutedblack: #333;
($vg_color_gunpowder)     $vg-color-darkgrey: #4d4d4f;
($vg_color_darkgrey)      $vg_color_grey: #7A7A78;
($vg_color_gray79)        $vg-color-lightgrey: #c9c9c9;
($vg_color_white)         $vg-color-white: #ffffff; 

*/
.text-center, .text-normal-center-30, .text-normal-center-15-lh25, .text-normal-center-2-3vw, .text-normal-center-20, .OurQuality .vg-split-section .vg-split-text, .OurQuality h1, .OurQuality h2 {
  text-align: center;
}

.text-italic {
  font-style: italic;
}

.text-normal, .text-normal-center-30, .text-normal-center-15-lh25, .text-normal-center-2-3vw, .text-normal-center-20 {
  font-style: normal;
}

.font-arapey {
  font-family: Arapey, serif !important;
}

.font-lato {
  font-family: Lato, sans-serif !important;
}

.fs30 {
  font-size: 2.5em;
  letter-spacing: 0px;
  line-height: min(5vh, 50px);
}

.p0 {
  padding: 0;
}

.img-full-block {
  width: 100%;
  display: block;
}

.max800-center {
  max-width: 1000px;
  margin: 50px auto;
  padding: 0 10px;
}

.brc-separate {
  border-collapse: separate;
}

.Title {
  letter-spacing: unset !important;
}

.OurQuality {
  background: black;
  color: white;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-top: -3px;
}
.OurQuality h1, .OurQuality h2 {
  color: white;
  margin-bottom: 30px;
}
.OurQuality .collage-responsive-wrapper {
  position: relative;
}
.OurQuality .collage-responsive-wrapper .collage-flex {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: flex-start;
}
.OurQuality .collage-responsive-wrapper .collage-flex .collage-container {
  width: 100%;
  border-spacing: 0 20px !important;
  table-layout: fixed;
}
.OurQuality .collage-responsive-wrapper .collage-flex .collage-container tr {
  height: 10% !important;
}
.OurQuality .collage-responsive-wrapper .collage-flex .collage-container td {
  width: 25% !important;
}
.OurQuality .collage-responsive-wrapper .collage-flex .left-collage {
  margin-top: 100px;
}
.OurQuality .craftsmanship-hero-img-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/7;
  overflow: hidden;
}
.OurQuality .craftsmanship-hero-img-wrapper .craftsmanship-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.OurQuality .craftsmanship-hero-img-wrapper .craftsmanship-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4vw 2vw;
  box-sizing: border-box;
  pointer-events: none;
}
.OurQuality .craftsmanship-hero-img-wrapper .craftsmanship-overlay h1, .OurQuality .craftsmanship-hero-img-wrapper .craftsmanship-overlay p {
  pointer-events: auto;
  margin: 0 0 3vw 0;
  word-break: break-word;
}
.OurQuality .vg-white-block {
  background: #fff;
  color: #222;
  padding: 60px;
  font-size: 1.08em;
  letter-spacing: 0.02em;
  text-align: left;
  max-width: 100%;
  margin: 0 auto;
}
.OurQuality .vg-white-block p {
  margin: 0;
}
.OurQuality .vg-split-section {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-height: 400px;
  max-width: 100%;
}
.OurQuality .vg-split-section .vg-split-text {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.OurQuality .vg-split-section .vg-split-text p {
  line-height: 55px;
  margin: 0;
}
.OurQuality .vg-split-section .vg-split-text span {
  font-family: Arapey, serif;
  font-size: 2em;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.OurQuality .vg-split-section .vg-split-image {
  flex: 1 1 50%;
  min-width: 300px;
  min-height: 400px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}
.OurQuality .vg-split-section .vg-split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.text-normal-center-20 {
  font-size: 1.2em;
  line-height: min(4vh, 40px);
  letter-spacing: 1px;
}

.text-unset-2-8vw {
  font-style: unset;
  font-size: 2.8vw;
  letter-spacing: 2px;
  line-height: 4vw;
}

.text-normal-center-2-3vw {
  font-size: 2.3vw;
  line-height: 2.8vw;
}

.text-normal-center-15-lh25 {
  font-size: 15px;
  line-height: 25px;
}

.text-normal-center-30 {
  font-size: 30px;
}

@media (max-width: 900px) {
  .OurQuality .vg-split-section {
    flex-direction: column;
  }
  .OurQuality .vg-split-section .vg-split-text,
  .OurQuality .vg-split-section .vg-split-image {
    min-height: 370px;
    width: 100%;
  }
  .OurQuality .vg-split-section .vg-split-text span {
    font-size: 1.2em;
  }
}
@media (max-width: 900px) {
  .OurQuality .collage-flex {
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
  }
  .OurQuality .collage-flex .right-collage {
    order: 2;
    margin-top: 0;
  }
  .OurQuality .collage-flex .left-collage {
    order: 1;
    margin-top: 0;
  }
  .OurQuality .craftsmanship-hero-img-wrapper {
    aspect-ratio: 2/1;
    min-height: 300px;
  }
  .OurQuality .craftsmanship-overlay {
    padding: 6vw 2vw;
  }
}
@media (max-width: 800px) {
  .OurQuality .craftsmanship-hero-img-wrapper {
    aspect-ratio: 1/0.75;
  }
}
@media (max-width: 700px) {
  .OurQuality .craftsmanship-hero-img-wrapper {
    aspect-ratio: 1/1;
  }
}
@media (max-width: 600px) {
  .OurQuality .craftsmanship-hero-img-wrapper {
    aspect-ratio: 1/1.25;
  }
}
@media (max-width: 550px) {
  .OurQuality .craftsmanship-hero-img-wrapper {
    aspect-ratio: 1/1.75;
  }
}
@media (max-width: 500px) {
  .OurQuality .craftsmanship-hero-img-wrapper {
    aspect-ratio: 1/2;
  }
}
