/*
====================================
 Theme Name:   OGAL Theme
 Theme URI:    https://ogalweb.com
 Description:  Kyle's GP Theme
 Author:       Kyle Van Deusen
 Author URI:   https://kylevandeusen.com
 Template:     generatepress
 Version:      0.1
====================================
*/


/* =========================
   TYPOGRAPHY
========================= */

/* Font Family Utilities */
.ff-body {
    font-family: var(--gp-font--body);
}

.ff-heading {
    font-family: var(--gp-font--headings);
}

/* Heading and utility class font assignment */
h1, h2, h3, h4, h5, h6,
[class*="fs-"] {
    font-family: var(--gp-font--headings);
}

.fs-p {
    font-family: var(--gp-font--body);
}


/* =========================
   FLUID TYPOGRAPHY SCALE
   Source: https://theadminbar.com/simple-responsive-font-size-calculator/
========================= */

/* Fluid Typography Scale */


h1, .fs-h1, .looks-h1, section h1, article h1, nav h1, aside h1, {
	font-size: clamp(3rem, 2.7273rem + 1.0909vw, 3.6rem);
}

h2, .fs-h2 {
	font-size: clamp(2.25rem, 2.0455rem + 0.8182vw, 2.7rem);
}

h3, .fs-h3 {
	font-size: clamp(1.875rem, 1.7045rem + 0.6818vw, 2.25rem);
}

h4, .fs-h4 {
	font-size: clamp(1.5rem, 1.3636rem + 0.5455vw, 1.8rem);
}

h5, .fs-h5 {
	font-size: clamp(1.25rem, 1.1364rem + 0.4545vw, 1.5rem);
}

h6, .fs-h6 {
	font-size: clamp(1.125rem, 1.0227rem + 0.4091vw, 1.35rem);
}

p, .fs-p {
	font-size: clamp(0.8333rem, 0.7576rem + 0.303vw, 1rem);
}


/* =========================
   CONTENT GRID
========================= */
.content-grid{
  --content-width: 1280px;
  --section-inline-padding: clamp(1rem, 0.848rem + 0.758vw, 5rem);  
  display: grid;
  grid-template-columns: 
    minmax(var(--section-inline-padding), 1fr)
    min(calc(50% - var(--section-inline-padding) * 2), calc(var(--content-width) / 2))
    min(calc(50% - var(--section-inline-padding) * 2), calc(var(--content-width) / 2))
    minmax(var(--section-inline-padding), 1fr);
}

/* =========================
   BAGUETTEBOX
========================= */
#baguetteBox-overlay {
  display: none;
  opacity: 0;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  background-color: #222;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
#baguetteBox-overlay.visible {
  opacity: 1;
}
#baguetteBox-overlay .full-image {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}
#baguetteBox-overlay .full-image figure {
  display: inline;
  margin: 0;
  height: 100%;
}
#baguetteBox-overlay .full-image img {
  display: inline-block;
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
     -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
#baguetteBox-overlay .full-image figcaption {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  line-height: 1.8;
  white-space: normal;
  color: #ccc;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.6);
  font-family: sans-serif;
}
#baguetteBox-overlay .full-image:before {
  content: "";
  display: inline-block;
  height: 50%;
  width: 1px;
  margin-right: -1px;
}

#baguetteBox-slider {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  white-space: nowrap;
  -webkit-transition: left 0.4s ease, -webkit-transform 0.4s ease;
  transition: left 0.4s ease, -webkit-transform 0.4s ease;
  transition: left 0.4s ease, transform 0.4s ease;
  transition: left 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease, -moz-transform 0.4s ease;
}
#baguetteBox-slider.bounce-from-right {
  -webkit-animation: bounceFromRight 0.4s ease-out;
          animation: bounceFromRight 0.4s ease-out;
}
#baguetteBox-slider.bounce-from-left {
  -webkit-animation: bounceFromLeft 0.4s ease-out;
          animation: bounceFromLeft 0.4s ease-out;
}

@-webkit-keyframes bounceFromRight {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: -30px;
  }
  100% {
    margin-left: 0;
  }
}

@keyframes bounceFromRight {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: -30px;
  }
  100% {
    margin-left: 0;
  }
}
@-webkit-keyframes bounceFromLeft {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: 30px;
  }
  100% {
    margin-left: 0;
  }
}
@keyframes bounceFromLeft {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: 30px;
  }
  100% {
    margin-left: 0;
  }
}
.baguetteBox-button#previous-button, .baguetteBox-button#next-button {
  top: 50%;
  top: calc(50% - 30px);
  width: 44px;
  height: 60px;
}

.baguetteBox-button {
  position: absolute;
  cursor: pointer;
  outline: none;
  padding: 0;
  margin: 0;
  border: 0;
  -moz-border-radius: 15%;
       border-radius: 15%;
  background-color: transparent;
  color: #ddd;
  font: 1.6em sans-serif;
  -webkit-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}
.baguetteBox-button:focus, .baguetteBox-button:hover {
  background-color: rgba(50, 50, 50, 0.9);
}
.baguetteBox-button#next-button {
  right: 2%;
}
.baguetteBox-button#previous-button {
  left: 2%;
}
.baguetteBox-button#close-button {
  top: 20px;
  right: 2%;
  right: calc(2% + 6px);
  width: 30px;
  height: 30px;
}
.baguetteBox-button svg {
  position: absolute;
  left: 0;
  top: 0;
}

/*
    Preloader
    Borrowed from http://tobiasahlin.com/spinkit/
*/
.baguetteBox-spinner {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
}

.baguetteBox-double-bounce1,
.baguetteBox-double-bounce2 {
  width: 100%;
  height: 100%;
  -moz-border-radius: 50%;
       border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: bounce 2s infinite ease-in-out;
          animation: bounce 2s infinite ease-in-out;
}

.baguetteBox-double-bounce2 {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes bounce {
  0%, 100% {
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
            transform: scale(1);
  }
}