:root {
    --primary-color: #252d36;
    --secondary-color: #b3a086;
    --tertiary-color: #ffffff;
    --body-bg: #ffffff;
    --text-color: #616568;
    --alt-text-color: #b3a086;
    --link-color: #877354;
    --link-hover-color: #6b5b43;
    --primary-font-family: "Times New Roman", serif;
    --secondary-font-family: "Petrona", serif;
    --tertiary-font-family: "Outfit", sans-serif;
    --nav-bg: #252d36;
    --nav-height: 124px;
    --nav-height-sm: 80px;
    --nav-link-color: #ffffff;
    --nav-link-hover-color: #ffffff;
    --nav-link-hover-bg: #252d36;
    --navbar-toggle-bg: #252d36;
    --navbar-toggle-icon-bar-bg: #ffffff;
    --navbar-toggle-hover-bg: #252d36;
    --navbar-toggle-icon-bar-hover-bg: #ffffff;
    --button-text: #252d36;
    --button-bg: #b3a086;
    --button-hover-text: #252d36;
    --button-hover-bg: #ffffff;
    --border-radius: 20px;
    --footer-text: #ffffff;
    --footer-bg: #252d36;
    --footer-padding: 40px;
    --section-padding: 60px;
    --section-padding-sm: 45px;
    --alt-section-bg: #b3a086;
    --alt-section-text-color: #252d36;
    --slide-height: 520px;
    --transition-speed: 0.25s;
}
/**********************************************/
/*******        Helper Classes          *******/
/**********************************************/
/* @group region*/

/* Removes Padding of Columns Inside This Row  */
.relative {
    position: relative;
}

/* Removes Padding of Columns Inside This Row So They Touch The Edge Of Container */
.row-nopad {
    margin-right: -15px;
    margin-left: -15px;
}

.row-nopad > * {
    padding-right: 0;
    padding-left: 0;
}

.row-nopad:before,
.row-nopad:after {
    display: table;
    content: " ";
}

.row-nopad:after {
    clear: both;
}
.nopad-md{padding: 0;}

@media (min-width: 992px) {
    .nopad-md{
        padding-right: 15px;
        padding-left: 15px;
    }
}

/* Disables Textarea Resize that Messes with Design */
textarea {
    resize: none;
}

/* Force Block Elements To Stack Horizontally */
/* Ex: Span Around A Phrase So It drops Down */
/* As a Whole When Responding  */
.inline-block {
    display: inline-block
}

/* Prevents Flicker On Transition */
.carousel {
    position: relative;
    z-index: 1000;
}

/* Always Displays a Scrollbar even if page does not need to scroll */
html {
    font-size: 16px;
    overflow-y: scroll;
    scroll-behavior: smooth;
}
/* @endregion*/

/**********************************************/
/*******        Fonts Classes           *******/
/**********************************************/

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "kepler-std", serif;
    font-optical-sizing: auto;
    /* font-weight: 400; */
    font-weight: 300;
    margin-top: 0;
}

h2, .h2 {
    font-family: var(--secondary-font-family);
    font-weight: 100;
}

.bold {
    font-weight: 700;
}

.italic {
    font-style: italic;
}

.lead {
    font-size: 1.375rem;
    line-height: 1.5;
}

a {
    color: var(--link-color);
    /* text-decoration: underline; */
}

a:hover, a:focus {
    color: var(--link-hover-color);
}

.alt-header {
    font-family: var(--tertiary-font-family);
}

.serif-lite {
    font-family: "kepler-std", serif;
    font-weight: 300;
}
 
/**********************************************/
/*******       Template Classes         *******/
/**********************************************/

body {
    background-color: var(--body-bg);
    color: var(--text-color);
    font-family: var(--primary-font-family);
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.5;
    min-height: 100vh;
}

.bg-dark {
    background-color: var(--primary-color);
    color: var(--tertiary-color);
}

.bg-gold {
    background-color: var(--alt-section-bg);
    color: var(--alt-section-text-color);
}

body.menu-open {
    overflow: hidden;
}

footer {
    background-color: var(--footer-bg);
    font-size: .875rem;
    padding-top: var(--footer-padding);
    padding-bottom: var(--footer-padding);
}

footer, footer a, footer a:hover, footer a:focus {
    color: var(--footer-text);
} 

.footer-nav a:hover, .footer-nav a:focus {
    color: var(--alt-text-color);
    text-decoration: none;
}

.btn-primary {
    background-color: var(--button-bg);
    border: none;
    border-radius: var(--border-radius);
    color: var(--button-text);
    font-family: var(--tertiary-font-family);
    font-size: 1.125rem;
    padding: 10px 20px;
    text-transform: uppercase;
    -webkit-transition: all var(--transition-speed) ease-in-out;
    -o-transition: all var(--transition-speed) ease-in-out;
    transition: all var(--transition-speed) ease-in-out;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-text);
}

.home-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.hero-content {
    color: var(--tertiary-color);
    position: absolute;
    text-align: center;
    width: calc(100% - 30px);
    padding-left: 15px;
    padding-right: 15px;
}

.home-hero .hero-content {
    bottom: 12%;
}

.home-hero .hero-content h1 {
    font-family: var(--tertiary-font-family);
    font-size: clamp(.75rem, 1.75vw, 1.25rem);
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.contact-hero .hero-content {
    bottom: 32%;
}

.contact-hero .hero-content h1 {
    font-family: "the-seasons", sans-serif;
    font-size: clamp(2rem, 5vw, 6rem);
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.contact-hero .hero-content p {
    font-family: var(--secondary-font-family);
    font-size: clamp(1rem, 1.75vw, 1.5rem);
    font-style: italic;
    font-weight: 200;
}

footer {
    font-family: var(--tertiary-font-family);
}

footer .container-fluid {
    padding-left: clamp(2rem, 4.5vw, 6rem);
    padding-right: clamp(2rem, 4.5vw, 6rem);
}

.site-footer {
    font-size: .875rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.site-footer > div {
    align-self: center;
}

.footer-nav {
    line-height: 2;
}

.footer-logo {
    text-align: right;
}

.footer-social, .footer-nav ul {
    list-style-type: none;
    margin-bottom: 0;
    padding-left: 0;
}

.footer-contact {
    text-align: right;
}

.footer-social li {
    display: inline-block;
    font-size: clamp(2.5rem, 7vw, 3.5rem);    
    margin-left: 15px;
}

.footer-social a {
    vertical-align: bottom;
}

.footer-social li .fa-facebook {
    font-size: clamp(calc(2.5rem - 15%), calc(8vw - 15%), calc(3.5rem - 15%));
}

.footer-social li .fa-instagram {
    transform: translateY(7%);
}

.sale-kicker {
    font-family: var(--tertiary-font-family);
    font-size: clamp(.875rem, 3vw, 2.5rem);
    letter-spacing: 8px;
    text-transform: uppercase;
}

.sale-title {
    color: var(--alt-text-color);
    font-family: "kepler-std", serif;
    font-size: clamp(2rem, 7vw, 6rem);
    font-style: italic;
    line-height: 1;
    /* margin-bottom: 20px; */
}

.sale-date {
    font-family: "the-seasons", sans-serif;
    font-size: clamp(1.75rem, 6vw, 5.5rem);
    font-weight: 300;
    line-height: 1;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.sale-btn {
    font-size: clamp(.875rem, 1.5vw, 1.125rem);
}

.about-hero {
    height: 300px;
    position: relative;
}

.contact-hero {
    height: 350px;
    position: relative;
}

.contact-hero img {
    opacity: .42;
}

.contact-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: var(--primary-color);
    z-index: -1;
}

.feature-row {
    padding-top: 5.5rem;
}

.feature-row .container {
    width: 100%;
}

.img-col {
    padding-bottom: 60%;
}

.img-col img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
}

.about-content {
    padding: 3rem clamp(1rem, 8vw, 5rem) 0;
}

.about-content h2, h2.page-heading {
    font-size: clamp(2rem, 6vw, 3.25rem);
    margin-bottom: 20px;
    text-transform: uppercase;
}

.team-feature-row .about-content h2 {
    margin-bottom: 5px;
}

.about-content p, .about-content li {
    font-size: 1.25rem;
}

.team-feature-row .about-content p.job-title {
    font-family: var(--tertiary-font-family);
    font-size: 1.125rem;
    text-transform: uppercase;
}

.about-bottom p {
    font-size: clamp(1.5rem, 4.5vw, 1.75rem);
    line-height: 1.3;
    margin-bottom: 30px;
}

.about-bottom p:last-of-type {
    margin-bottom: 0;
}

section.team-feature-row:last-child {
    margin-bottom: 80px;
}

.sale main, .header-light main {
    padding-top: var(--nav-height-sm);
}

.contacts-row {
    font-family: var(--tertiary-font-family);
    font-weight: 300;
}

.contacts-row h3 {
    font-family: var(--tertiary-font-family);
    text-transform: uppercase;
}

.contacts-row a {
    color: var(--primary-color);
    text-decoration: underline;
}

.contacts-row a:hover, .contacts-row a:focus {
    color: #313f50;
}

.shadow {
    box-shadow: 3px 3px 10px rgb(37 45 54 / .25);
}

.grid {
    margin-left: -10px;
    margin-right: -10px;
}

.grid-item {
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.grid-item img, .grid-item video {
    box-shadow: 3px 3px 10px rgb(37 45 54 / .55);
    transition: all var(--transition-speed) ease-in-out;
}

.grid-item a:hover img {
    transform: scale(101.5%);
}

.form-container {
    background-color: var(--primary-color);
    color: #fff;
    padding: 20px;
}

.form-container h3 {
    font-family: var(--tertiary-font-family);
    text-transform: uppercase;
}

.map-container iframe {
    height: 100%;
    width: 100%;
}

.down-arrow {
    position: absolute;
    bottom: 2%;
    left: 50%;
    font-size: 2.75rem;
    animation: jumpInfinite 1.5s infinite;
    transform: translateX(-50%);
}

.down-arrow a {
    color: rgb(255 255 255 / .25);
}

@keyframes jumpInfinite {
    0% {
        bottom: 2%;
    }

    50% {
        bottom: calc(2% - 10px);
    }

    100% {
        bottom: 2%;
    }
}

.play-icon {
    position: absolute;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: rgb(37 45 54 / .35);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.play-icon::after {
    content: '\f04b';
    color: #fff;    
    position: absolute;
    left: calc(50% + 5%);
    top: 50%;
    font-family: 'Font Awesome 7 Pro';
    text-rendering: auto;
    font: var(--fa-font-sharp-solid);
    font-size: .875rem;
    -webkit-font-smoothing: antialiased;
    transform: translate(-50%, -50%);
}

.video-grid-row .grid-item a:hover .play-icon, .video-grid-row .grid-item a:focus .play-icon {
    display: none;
}

.video-page div.pswp__img--placeholder {
    background: transparent;
}

.video-content {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 90%;
    max-height: 80vh;
    transform: translate(-50%, -50%);
}

/**********************************************/
/*******        Carousel Classes        *******/
/**********************************************/

.carousel-control {
    text-shadow: none;
}

.carousel-control.left, .carousel-control.right {
    background: transparent;
}

.glyphicon-chevron-left::before {
    content: '\f0a8';
    font-family: 'Font Awesome 7 Pro';
    text-rendering: auto;
    font: var(--fa-font-sharp-light);
    -webkit-font-smoothing: antialiased;
}

.glyphicon-chevron-right::before {
    content: '\f0a9';
    font-family: 'Font Awesome 7 Pro';
    text-rendering: auto;
    font: var(--fa-font-sharp-light);
    -webkit-font-smoothing: antialiased;
}

.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
    font-size: 35px;
}

/** Home Vertical Carousel **/
:root {
    --slide-height: clamp(400px, 46vw, 650px);
}

.home .carousel {
    margin: auto;
    width: 100%;
}

.viewport,
.home .slide, 
.carousel-image {
    height: var(--slide-height);
}

.viewport {
    position: relative;
    overflow: hidden;
    background: var(--alt-section-bg);
}

.track {
    height: 100%
}

.home .slide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-content {
    color: var(--primary-color);
    padding-inline: clamp(2rem, 4.5vw, 6rem) clamp(10rem, 16vw, 22rem);
}

.carousel-content h2 {
    font-family: "kepler-std", serif;
    font-size: 3rem;
    font-style: italic;
    margin: 0 0 1rem
}

.carousel-content p {
    font-size: 1.1rem;
    line-height: 1.8;
}

.carousel-content a {
    color: var(--primary-color);
}

.carousel-content a:hover, .carousel-content a:focus {
    color: #313f50;
}

.carousel-content a::after {
    content: '\f178';
    position: relative;
    left: 5px;
    top: 2px;
    display: inline-block;
    font-family: 'Font Awesome 7 Pro';
    font-size: 1.75rem;
    text-rendering: auto;
    font: var(--fa-font-thin);
    -webkit-font-smoothing: antialiased;
}

.carousel-controls {
    position: absolute;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 5;
}

.carousel-controls button {
    width: 56px;
    height: 56px;
    background: transparent;
    border: 0;
    color: var(--primary-color);
    font-size: 2.5rem;
    cursor: pointer
}


/**********************************************/
/*******      Navigation Classes        *******/
/**********************************************/

.navbar {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2001;
    background: linear-gradient(to bottom,
            rgba(37, 45, 54, 0.50) 0%,
            rgba(37, 45, 54, 0.32) 35%,
            rgba(37, 45, 54, 0.16) 65%,
            rgba(37, 45, 54, 0) 100%);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.header-light .navbar {
    background: transparent;
}

.header-dark .navbar {
    background-color: var(--primary-color);
}

.menu-open .navbar {
    width: 65px;
    background: transparent;
}

.navbar.nav-hidden {
    transform: translateY(-100%);
}

.navbar.nav-scrolled {
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
}

.navbar .container-fluid {
    min-height: var(--nav-height-sm);
    position: relative;
    display: flex;
    align-items: center;
}

.navbar .container-fluid::before, .navbar .container-fluid::after {
    content: none;
}

.nav > li > a {
    color: var(--nav-link-color);
    font-family: var(--secondary-font-family);
    font-optical-sizing: auto;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 100;
    line-height: 1.1;
    text-transform: uppercase;
    -webkit-transition: all var(--transition-speed) ease-in-out;
    -o-transition: all var(--transition-speed) ease-in-out;
    transition: all var(--transition-speed) ease-in-out;
}

.nav>li>a:hover, .nav>li>a:focus {
    background-color: var(--nav-link-hover-bg);
    color: var(--nav-link-hover-color);
    transform: scale(1.2);
}

.home li.home-active > a, .about-pg li.about-active > a,
.team-pg li.team-active>a, .sale li.sale-active>a, .donors li.donors-active > a, .photo li.photo-active > a, .video-page li.video-active > a,
.contact li.contact-active > a {
    color: var(--secondary-color);
}

.navbar-brand {
    color: var(--nav-link-color);
    font-family: "ivyjournal", sans-serif;
    font-size: clamp(.8125rem, 3vw, 2.25rem);
    font-weight: 400;
    font-style: normal;
    height: auto;
    letter-spacing: 1.5px;
    padding: 0;
    text-transform: uppercase;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity .25s ease;
}

.header-light .navbar-brand {
    color: var(--primary-color);
    transition: all var(--transition-speed) ease;
}

.header-light .navbar.nav-scrolled .navbar-brand {
    color: var(--tertiary-color);
}

.navbar-brand:hover, .navbar-brand:focus {
    color: var(--tertiary-color);
}

.header-light .navbar-brand:hover,
.header-light .navbar-brand:focus {
    color: var(--primary-color);
}

body.menu-open .navbar-brand {
    opacity: 0;
    pointer-events: none;
}

.navbar-toggle {
    border-radius: var(--border-radius);
    display: block;
    float: none;
    margin-left: 15px;
    padding: 10px 8px;
    position: relative;
    text-align: center;
    z-index: 2002;
    -webkit-transition: all var(--transition-speed) ease-in-out;
    -o-transition: all var(--transition-speed) ease-in-out;
    transition: all var(--transition-speed) ease-in-out;
}

.navbar-toggle .icon-bar {
    border-radius: 0;
    width: 35px;
    height: 3px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    -webkit-transition: all var(--transition-speed) ease-in-out;
    -o-transition: all var(--transition-speed) ease-in-out;
    transition: all var(--transition-speed) ease-in-out;
}

.navbar-toggle .icon-bar, .navbar-toggle.active .icon-bar {
    background-color: var(--tertiary-color);
}

.header-light .navbar-toggle .icon-bar, .header-light .navbar-toggle.active .icon-bar {
    background-color: var(--primary-color);
}

.header-light .navbar.nav-scrolled .navbar-toggle .icon-bar, .header-light .navbar.nav-scrolled .navbar-toggle.active .icon-bar, .menu-open.header-light .navbar-toggle .icon-bar {
    background-color: var(--tertiary-color);
}

.navbar-toggle:hover .icon-bar, .header-light .navbar.nav-scrolled .navbar-toggle:hover .icon-bar {
    background-color: #d6c0a2;
}

.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 5px;
}

/* .navbar-toggle .icon-bar+span.icon-bar:nth-of-type(4),
.navbar-toggle .icon-bar+span.icon-bar:nth-of-type(5) {
    top: -3px;
    margin-top: 0;
}

.navbar-toggle .icon-bar+span.icon-bar:nth-of-type(5) {
    margin-top: 5px;
}

.navbar-toggle.active .icon-bar+span.icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.navbar-toggle.active .icon-bar+span.icon-bar:nth-of-type(4) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.navbar-toggle.active .icon-bar:nth-child(2),
.navbar-toggle.active .icon-bar:nth-child(5) {
    width: 0;
} */

.navbar-toggle .icon-bar+span.icon-bar:nth-of-type(3),
.navbar-toggle .icon-bar+span.icon-bar:nth-of-type(4) {
    top: -3px;
    margin-top: 0;
}

.navbar-toggle .icon-bar+span.icon-bar:nth-of-type(4) {
    margin-top: 5px;
}

.navbar-toggle.active .icon-bar+span.icon-bar:nth-of-type(2) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.navbar-toggle.active .icon-bar+span.icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.navbar-toggle.active .icon-bar:nth-child(1),
.navbar-toggle.active .icon-bar:nth-child(4) {
    width: 0;
}

.overlay {
    position: fixed;
    inset: 0;
    background: var(--nav-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.overlay[hidden] {
    display: none;
}

.nav {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.menu-title {
    color: #fff;
    font-family: var(--tertiary-font-family);
    font-size: .75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    -webkit-transition: all var(--transition-speed) ease-in-out;
    -o-transition: all var(--transition-speed) ease-in-out;
    transition: all var(--transition-speed) ease-in-out;
}

.header-light .menu-title {
    color: var(--primary-color)
}

.navbar-toggle:hover .menu-title {
    color: #d6c0a2;
}

.menu-open .menu-title {
    display: none;
}

/**********************************************/
/*******        Animal Classes          *******/
/**********************************************/

.animals>div {
    margin-bottom: 40px;
    text-align: center;
}

.animals > div h3 {
    margin-bottom: 5px;
}

.animals>div img,
#case img {
    margin-bottom: 10px;
}

.animals > div img {
    box-shadow: 3px 3px 10px rgb(37 45 54 / .55);
    transition: all var(--transition-speed) ease-in-out;
}

.animals>div a:hover img {
    transform: scale(101.5%);
}

.PedAnmName {
    display: none;
}

.PedCalvedRow,
.PedTable,
.divEpdTbl {
    font-size: 1rem;
}

.divEpdTbl caption {
    background-color: var(--primary-color);
    border-color: #ccc;
    color: var(--alt-text-color);
}

/**********************************************/
/********        Form Classes          ********/
/**********************************************/

.breederForm label {
    color: var(--tertiary-color);
    font-family: var(--tertiary-font-family);
    font-size: 1rem;
    font-weight: 400;
}

.form-control {
    border: none;
    border-radius: 0;
    font-family: var(--tertiary-font-family);
}

.btn-form {
    font-size: 1rem;
    min-width: 220px;
}

.btn-form:disabled {
    opacity: .65;
    cursor: not-allowed;
    pointer-events: all;
}

.btn-form[disabled],
.btn-form[disabled]:hover,
.btn-form[disabled]:focus,
.btn-form[disabled]:active {
    background-color: var(--button-bg);
    border: none;
    color: var(--button-text);
    outline: none;
}

.btn-form:focus,
.btn-form:active:focus {
    outline-offset: 2px;
    outline: 2px solid #f3a36a;
}

.form-control:focus {
    border-color: #86b7fe;
    -webkit-box-shadow: 0 0 0 2px #86b7fe;
    box-shadow: 0 0 0 2px #86b7fe;
}

.breederFormError,
.form-control.breederFormError {
    border-color: #d64947;
}

.breederFormError:focus,
.form-control.breederFormError:focus {
    -webkit-box-shadow: 0 0 0 2px #FF5F5C;
    box-shadow: 0 0 0 2px #FF5F5C;
}

.breederFormErrorMesssage {
    display: none;
    position: relative;
    color: #FF5F5C;
    font-size: .875rem;
    font-style: italic;
    white-space: nowrap;
}

.breederFormError~.breederFormErrorMesssage {
    display: block;
    margin-left: 2px;
    top: 1px;
}

.breederFormOptional {
    font-size: 85%;
    color: #ccc;
}

.sm-pad-3-col>.col-xs-6 {
    padding-right: 5px;
}

.sm-pad-3-col>.col-xs-3 {
    padding-left: 5px;
    padding-right: 5px;
}

.sm-pad-3-col>.col-xs-3:last-child {
    padding-right: 15px;
}

.sm-pad-2-col>.col-xs-6:first-child {
    padding-right: 5px;
}

.sm-pad-2-col>.col-xs-6:last-child {
    padding-left: 5px;
}

.sm-pad-2-col>.col-sm-6:first-child {
    padding-left: 15px;
}

.sm-pad-2-col>.col-sm-6:last-child {
    padding-right: 15px;
}

@media screen and (min-width: 768px) {
    .sm-pad-2-col>.col-sm-6:first-child {
        padding-right: 5px;
    }

    .sm-pad-2-col>.col-sm-6:last-child {
        padding-left: 5px;
    }
}

.breederEmailHeading,
.breederEmailHeadingC {
    display: none;
}

.grow-wrap {
    display: grid;
}

.grow-wrap::after {
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
}

.grow-wrap>textarea {
    resize: none;
    overflow: hidden;
}

/* Match the other input field styles */
.grow-wrap>textarea,
.grow-wrap::after {
    border: none;
    border-radius: 0;
    font-size: 14px;
    color: #555;
    min-height: 100px;
    padding: 6px 12px;
    grid-area: 1 / 1 / 2 / 2;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.g-recaptcha {
    margin-bottom: 15px;
}

/**********************************************/
/*******        Helper Classes          *******/
/**********************************************/

.mb-0 {
    margin-bottom: 0;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-70 {
    margin-bottom: 70px;
}

.mb-80 {
    margin-bottom: 80px;
}

.section-pad {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

.section-pad-sm {
    padding-top: var(--section-padding-sm);
    padding-bottom: var(--section-padding-sm);
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.img-cover {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
}

/**********************************************/
/*******      Media Query Classes       *******/
/**********************************************/
@media screen and (min-width: 768px) {
    .about-hero {
        height: 450px;
    }

    .contact-hero {
        height: 415px;
    }

    .navbar>.container-fluid .navbar-brand {
        margin-left: 0;
    }

    .contacts-row {
        display: flex;
    }

    .contacts-row > div {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .contacts-row > div::before {
        content: '';
        position: absolute;
        left: 15px;
        height: 100%;
        width: 1px;
        top: 0;
        background-color: var(--primary-color);
    }

    .contacts-row>div>* {
        margin-left: clamp(1.5rem, 2vw, 3rem);
    }

    .contacts-row p {
        margin-bottom: 0;
    }

    .play-icon {
        height: 40px;
        width: 40px;
    }

    .play-icon::after {
        font-size: 1.125rem;
    }

    .site-footer {
        font-size: 1rem;
        display: flex;
    }

    .footer-logo {
        text-align: center;
    }

    .navbar-toggle .icon-bar {
        width: 40px;
    }

    .menu-title {
        font-size: .875rem;
    }

    .animals {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .animals::before,
    .animals::after {
        content: none;
    }
    
    .flex-sm {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .contacts-row h3 {
        font-size: 1.125rem;
    }

    .contacts-row p {
        font-size: 1rem;
    }
}

@media screen and (min-width: 992px) {
    .about-hero {
        height: 500px;
    }

    .contact-hero {
        height: auto;
    }

    .contact-hero img {
        width: 100%;
    }

    .feature-row .flex-center {
        display: flex;
    }

    .text-col {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .img-col {
        padding-bottom: 34.625%;
    }

    .img-right .text-col {
        order: 1;
    }

    .img-right .img-col {
        order: 2;
    }

    .about-content {
        padding: 1.25rem clamp(2rem, 6vw, 3.5rem);
    }

    .team-feature-row .about-content {
        padding: 1.25rem clamp(2.75rem, 9vw, 5.5rem);
    }

    .about-content p, .about-content li {
        font-size: 1rem;
    }

    .team-feature-row .about-content p {
        font-size: 1.25rem;
    }

    .sale main, .header-light main {
        padding-top: var(--nav-height);
    }

    .map-container {
        height: 100%;
    }

    .map-container iframe {
        height: 100%;
        width: 100%;
    }

    .play-icon {
        height: 50px;
        width: 50px;
    }

    .play-icon::after {
        font-size: 1.5rem;
    }
    
    .navbar .container-fluid {
        min-height: var(--nav-height);
        position: relative;
        display: flex;
        align-items: center;
    }

    .flex-md {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

@media screen and (min-width: 992px) and (max-width: 1599px) {
    .about-content h2 {
        font-size: 3vw;
    }
}

@media screen and (min-width: 1200px) {
    .about-hero {
        height: auto;
    }

    .about-hero img {
        width: 100%;
    }
    
    .section-pad {
        padding-top: var(--section-padding);
        padding-bottom: var(--section-padding);
    }

    .section-pad-sm {
        padding-top: var(--section-padding-sm);
        padding-bottom: var(--section-padding-sm);
    }
}

@media screen and (min-width: 1600px) {
    .feature-row .container, .gallery .container-fluid {
        width: 1600px;
    }

    .about-content p, .about-content li {
        font-size: 1.25rem;
    } 
}

@media screen and (max-width: 1199px) {
    .about-hero img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center center;
        object-position: center center;
    }
}

@media screen and (max-width: 991px) {
    .contact-hero img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: 44% center;
        object-position: 44% center;
    }

    :root {
        --slide-height: 850px;
        --carousel-img-height: 500px
    }

    .home .slide {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .map-container {
        position: relative;
        display: block;
        height: 0;
        padding: 0;
        padding-bottom: 75%;
        overflow: hidden;
    }

    .map-container iframe {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
    }

    .carousel-content {
        padding-inline: clamp(2rem, 6vw, 6rem) clamp(12rem, 18vw, 16rem);
    }

    .carousel-controls {
        top: calc(var(--carousel-img-height) + ((var(--slide-height) - var(--carousel-img-height)) / 2));
        transform: translateY(-50%);
        bottom: auto;
    }

    .controls button {
        width: 64px;
        height: 64px;
        font-size: 3rem;
    }

    .carousel-image,
    .carousel-image img {
        height: var(--carousel-img-height);
    }

    .mb-5-md {
        margin-bottom: 5px;
    }

    .mb-10-md {
        margin-bottom: 10px;
    }

    .mb-20-md {
        margin-bottom: 20px;
    }

    .mb-30-md {
        margin-bottom: 30px;
    }

    .mb-40-md {
        margin-bottom: 40px;
    }

    .mb-50-md {
        margin-bottom: 50px;
    }

    .mb-60-md {
        margin-bottom: 60px;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --slide-height: 700px;
        --carousel-img-height: 300px
    }

    .contacts-row>div {
        margin-bottom: 40px;
    }

    .carousel-content {
        padding-inline: clamp(2rem, 6vw, 6rem) clamp(7rem, 12vw, 12rem);
    }

    .navbar-collapse {
        clear: both;
    }

    .social-list {
        margin-left: -15px;
        margin-right: -15px;
    }

    .social-list>li>a {
        display: block;
        padding-left: 15px;
        padding-right: 15px;
    }

    .footer-logo img {
        max-height: 196px;
    }

    .footer-logo, .footer-nav {
        margin-bottom: 20px;
    }

    .footer-contact {
        clear: both;
        text-align: center;
    }

    .footer-social li {
        margin-left: 7.5px;
        margin-right: 7.5px;
    }

    .mb-5-sm {
        margin-bottom: 5px;
    }

    .mb-10-sm {
        margin-bottom: 10px;
    }

    .mb-20-sm {
        margin-bottom: 20px;
    }

    .mb-30-sm {
        margin-bottom: 30px;
    }

    .mb-40-sm {
        margin-bottom: 40px;
    }

    .mb-50-sm {
        margin-bottom: 50px;
    }
}

@media(max-width:500px) {
    :root {
        --slide-height: 800px;
        --carousel-img-height: 300px;
    }

    .carousel-content {
        padding-inline: clamp(2rem, 6vw, 6rem) clamp(5.5rem, 12vw, 12rem);
    }

    .carousel-controls {
        right: .75rem;
    }
}

@media screen and (max-width: 424px) {
    .navbar-toggle {
        margin-left: 0;
    }
}

@media screen and (max-height: 500px) and (orientation: landscape) {
    .nav > li > a {
        font-size: clamp(1.5rem, 3.5vw, 3rem);
        padding: 5px 15px;
    }
}

@media screen and (max-width: 374px) {
    .navbar-brand {
        font-size: .75rem;
        letter-spacing: 1.5px;
    }
}