/* ============================================================================
   DYNAMIC CSS GENERATOR
   Generated: 2026-02-21 19:59:32   
   Custom CSS classes from cms_css database table
   This file is loaded by CKEditor and front-end for dynamic styling
   Access via: /dynamic.css
   ============================================================================ */

/* ============================================================================
   CUSTOM CSS CLASSES
   Managed via Admin > CSS Class Library
   ============================================================================ */

/* .horseBg */

.horseBg {
background-image: linear-gradient(hsla(var(--White), 0.1), hsla(var(--White), 0.5)), url(/media/9x16/Pass-3.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
min-height: 50vh;
width: 90%;
display: flex;
    align-items: flex-end; 
    justify-content: flex-end;
    padding: var(--Space6);
border-radius: 32px;
margin: 0 auto;}

@media (max-width: 768px) {
.horseBg{
 min-height: 90vh;}
}
@media (min-width: 1925px) {
.horseBg{
min-height: 70vh;}
}


/* .twoColumnGrid */

.twoColumnGrid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 16px;
width: 90%; 
max-width: 1920px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.twoColumnGrid {
 grid-template-columns: 1fr;
}
}


/* .horseBgWhite */

.horseBgWhite {
  background-image: url(/media/uploads/white_horse_edit.jpg);
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
  min-height: 60vh;
  margin-top: var(--Space4);
  padding-top: var(--Space8);
  column-gap: 40px;
}

@media screen and (max-width: 768px) {
  .horseBgWhite {
    min-height: 90vh;
    background-size: auto 200px;
    padding-bottom: 150px;
    background-position: bottom right;
  }
}


/* .horseBgTan */

.horseBgTan {
    background-image: url(/media/4x3/horse_bg_tan_10.webp);
    background-size: auto 100%;
    background-position: bottom left;
    background-repeat: no-repeat;
    min-height: 60vh;
    padding-top: 150px;
}


@media screen and (max-width: 768px) {
  .horseBgTan {
    min-height: 90vh;
    background-size: auto 200px;
padding-top: 10px;
    padding-bottom: 150px;
    background-position: bottom left;
  }
}


/* .grayBG */

.grayBG {
background-color: hsl(var(--Gray90));
padding-top: var(--Space8);
padding-bottom: var(--Space8);
}


/* .twoThirdsLeft */

.twoThirdsLeft {
display: grid;
grid-template-columns: 70% 30%;
grid-gap: var(--Space4);
width: 90%;
max-width: 1920px;
margin: 0 auto;
padding: var(--Space4);
}
@media screen and (max-width: 768px) {
      .twoThirdsLeft {
        grid-template-columns: 1fr;
padding: 0;
      }
    }


/* .horseBgBlack */

.horseBgBlack {
background-image: url(/media/16x9/horse_bg_black.webp) ;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
height: 50vh;
margin-top: var(--Space4);
padding-top: var(--Space8);
color: white;
}


/* HorseBgThin */

.horseBgThin {
background-image: url(/media/uploads/white_left_photo_wide.jpg);
    background-size: 160vw;
    background-position: left;
    background-repeat: no-repeat;
min-height: 50vh;
width: 100%;
}

@media (max-width: 768px) {
.horseBgThin {
 min-height: 90vh;
background-position: left bottom;
padding-bottom: 175px;
}
}

@media (min-width: 1925px) {
.horseBgThin{
min-height: 80vh;
}
}


/* .whitehorseBg-thin */

.horseBg {
background-image: linear-gradient(hsla(var(--White), 0.1), hsla(var(--White), 0.5)), url(/media/uploads/white_left_photo_wide.svg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
min-height: 50vh;
width: 90%;
display: flex;
    align-items: flex-end; 
    justify-content: flex-end;
    padding: var(--Space6);
border-radius: 32px;
margin: 0 auto;}

@media (max-width: 768px) {
.horseBg{
 min-height: 90vh;}
}
@media (min-width: 1925px) {
.horseBg{
min-height: 70vh;}
}


/* .threecolumn */

.threecolumn  {
  display: flex;
  gap: 20px;           /* Space between columns */
  padding: 20px 0;     /* Optional spacing above/below */
}

.column {
  flex: 1;             /* All 3 equal width */
  padding: 20px;       /* Inner padding for content */
  box-sizing: border-box;
}

/* Mobile responsive: stacks into one column */
@media (max-width: 768px) {
  .three-columns {
    flex-direction: column;
  }
}


/* .twoThirdsRight */

.twoThirdsRight {
display: grid;
grid-template-columns: 30% 70%;
grid-gap: var(--Space2);
width: 90%;
max-width: 1920px;
margin: 0 auto;
padding: var(--Space4);
}
@media screen and (max-width: 768px) {
      .twoThirdsRight {
        grid-template-columns: 1fr;
      }
    }


/* .parallaxRed */

.parallaxRed {
  background: 
    linear-gradient(hsla(var(--ColorBrand4), 0.5), hsla(var(--ColorBrand4), 0.5)),
    url('/media/16x9/20210630Equine_Connection0220_2.jpg') center/cover no-repeat fixed;
width: 100%;
margin: 0 auto;
padding: 32px;
min-height: 70vh;
}
@media screen and (max-width: 768px) {
.parallaxRed {
background: linear-gradient(hsla(var(--ColorBrand4), 0.5), hsla(var(--ColorBrand4), 0.5)),
    url('/media/9x16/canadian_usa_parallax_mobile.jpg');
background-attachment: scroll;
    background-size: cover;
    background-position: center;

}
}


/* .jordyBgGray */

.jordyBgGray {
  background-image: url(/media/uploads/jordy_transparent.webp);
  background-position: right bottom;
 background-size: auto 100%;
  background-repeat: no-repeat;
  background-color: hsla(var(--Gray50), 1);
  min-height: 70vh;
  width: 100%;
  display: flex;
  margin-top: var(--Space8);
  margin-bottom: var(--Space8);
  padding: var(--Space8);
  color: white;
}

@media screen and (max-width: 768px) {
  .jordyBgGray {
    padding-bottom: 200px;
    background-size: auto 270px; 
  }
}


/* .parallaxWomen */

.parallaxWomen {
  background: 
    linear-gradient(hsla(var(--ColorBrand4), 0.5), hsla(var(--ColorBrand2Light), 0.5)),
    url('/media/uploads/parallax2.jpg') center/cover no-repeat fixed;
width: 100%;
margin: 0 auto;
padding: 32px;
min-height: 40vh;
}

@media screen and (max-width: 768px) {
.parallaxWomen {
background: 
    linear-gradient(hsla(var(--ColorBrand4), 0.5), hsla(var(--ColorBrand2Light), 0.5)),
    url('/media/9x16/woman_parallax_mobile.jpg');
background-attachment: scroll;
    background-size: cover;
    background-position: center;
}
}


/* .parallaxBrandonEye */

.parallaxBrandonEye {
  background: 
    linear-gradient(hsla(var(--ColorBrand3Dark), 0.5), hsla(var(--ColorBrand3Light), 0.5)),
    url('/media/16x9/Brandon_eye.jpg') center/cover no-repeat fixed;
  width: 100%;
  margin: 0 auto;
  padding: 32px;
  min-height: 40vh;
}

@media screen and (max-width: 768px) {
  .parallaxBrandonEye {
    background: 
      linear-gradient(hsla(var(--ColorBrand3Dark), 0.5), hsla(var(--ColorBrand3Light), 0.5)),
      url('/media/9x16/home_parallax_mobile.jpg');
      background-attachment: scroll;
    background-size: cover;
    background-position: center;
      
  }
}


/* .parallaxFaye */

.parallaxFaye {
  /* 1. Define the color separately so it's "permanent" */
  background-color: black !important; 
  
  /* 2. Your image and parallax settings */
  background-image: url('/media/16x9/parallax11.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

  width: 100%;
  margin: 0 auto;
  padding: 32px;
  min-height: 40vh;
}

@media screen and (max-width: 768px) {
  .parallaxFaye {
    min-height: 90vh;
    /* This makes sure the image doesn't stretch and stays top-right */
    background-size: auto 200px;
    background-position: top right;
    /* Fixed often breaks on mobile, scroll fixes the "black box" issue */
    background-attachment: scroll; 
    
    padding-top: 150px;
    padding-bottom: 20px;
  }
}


/* .parallaxNose */

.parallaxNose {
  background: 
    black url('/media/16x9/parallax8.jpg') center/cover no-repeat fixed;
  width: 100%;
  margin: 0 auto;
  padding: 32px;
  min-height: 40vh;
}

@media screen and (max-width: 768px) {
  .parallaxNose {
    min-height: 90vh;
    background-size: auto 200px;
    padding-bottom: 20px;
padding-top: 150px;
    background-position: top right;
    background-attachment: scroll;
  }
}


/* .parallaxUSA */

.parallaxUSA {
  background: 
    linear-gradient(hsla(var(--ColorBrand3Dark), 0.5), hsla(var(--ColorBrand3), 0.5)),
    url('/media/16x9/new_USA_banner.jpg') center/cover no-repeat fixed;
width: 100%;
margin: 0 auto;
padding: 32px;
min-height: 40vh;
}


/* .parallaxJane */

.parallaxJane {
  /* Desktop: Gradient + Image */
  background: 
    linear-gradient(hsla(var(--ColorBrandDark), 0.5), hsla(var(--ColorBrandLight), 0.5)),
    url('/media/16x9/Parallax_jane_sm.jpg') center/cover no-repeat fixed;
  width: 100%;
  margin: 0 auto;
  padding: 32px;
  min-height: 40vh;
}

/* Removed the semicolon from the media query line */
@media screen and (max-width: 768px) { 
  .parallaxJane {
    /* Only change the image source, keep the gradient and other settings */
    background-image: 
      linear-gradient(hsla(var(--ColorBrandDark), 0.5), hsla(var(--ColorBrandLight), 0.5)),
      url('/media/9x16/Parallax_jane_sm.jpg');
    
    /* On mobile, we usually want 'scroll' instead of 'fixed' for better performance */
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
  }
}


/* threeColumnGrid */

.threeColumnGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  width: 80%;
  margin: 0 auto;
  align-items: start;
}

@media screen and (max-width: 768px) {
  .threeColumnGrid {
    grid-template-columns: 1fr;
    width: 90%;
  }
}


/* singleColumn */

.singleColumn {
width: 90%;
max-width: 1920px;
margin: 0 auto;
padding-top: 60px;
}


/* .fourColumnGrid */

.fourColumnGrid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 16px;
width: 90%; 
max-width: 1920px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.fourColumnGrid {
 grid-template-columns: 1fr;
}
}


/* divBorders */

.borderLeftGray {
border-left: 1px solid hsl(var(--Gray80));
padding-left: 20px;
}


/* blackBackground */

.blackBackground {
background-color: black;
}


/* singleColumnFlex */

.singleColumnFlex {
display: flex;
flex-direction: column;
}


/* .horseBgWhiteSpec */

.horseBgWhiteSpec {
  background-image: url(/media/uploads/parallax7.jpg);
  background-size: 100% auto;
  background-position: right;
  background-repeat: no-repeat;
  min-height: 60vh;
  margin-top: var(--Space4);
  padding-top: var(--Space8);
}

@media screen and (max-width: 768px) {
  .horseBgWhiteSpec {
    min-height: 90vh;
    background-size: 100% auto;
    padding-bottom: 225px;
    background-position: bottom right;
  }
}



/* ============================================================================
   USAGE INSTRUCTIONS
   
   1. Go to Admin > CSS Class Library
   2. Add a new CSS class with a name (e.g., "heroSection")
   3. Enter CSS properties (without the class selector)
   4. The class will be available as .heroSection in both CKEditor and front-end
   5. Use in HTML: <div class="heroSection">Content</div>
   
   Note: Caching is disabled - changes appear immediately
   ============================================================================ */