/*
Theme Name: Howlett Ranch
Theme URI: https://howlettranch.com
Author: WebberSites
Author URI: https://webbersites.com
Description: 
Tags: 
Version: 2024.1
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate

*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

@font-face {
    font-family: 'SaintRegus-MediumExpanded';
    src: url('fonts/SaintRegus-MediumExpanded.eot');
    src: url('fonts/SaintRegus-MediumExpanded.eot?#iefix') format('embedded-opentype'),
        url('fonts/SaintRegus-MediumExpanded.woff2') format('woff2'),
        url('fonts/SaintRegus-MediumExpanded.woff') format('woff'),
        url('fonts/SaintRegus-MediumExpanded.ttf') format('truetype'),
        url('fonts/SaintRegus-MediumExpanded.svg#SaintRegus-MediumExpanded') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.grecaptcha-badge {display:none !important;}

body {font-family: "brandon-grotesque", sans-serif;}

p, li {font-family: "brandon-grotesque", sans-serif; margin-bottom:14px; 
font-weight: 400;
font-style: normal;}

h1, h2, h3 {font-family: 'SaintRegus-MediumExpanded';}

h1 {margin:2vw;}

h2 {
text-align: center;
font-size: 24px;
color: #c8a16e;
padding: 24px;
}

strong, b {
font-family: "brandon-grotesque", sans-serif;
font-weight: 700;
font-style: normal;}

em, i {font-family: "brandon-grotesque", sans-serif;
font-weight: 400;
font-style: italic;}

em strong {font-family: "brandon-grotesque", sans-serif;
font-weight: 700;
font-style: italic;}


a {color: #c8a16e;}

.video-container {
    position: relative;
    width: 100%;
    overflow: hidden;
	z-index:1;
}

.video-bg {

    width: 100%;
    height: auto;
}

video {height:20vw; background-color:#000;}

header {
  
}

/* General Styles */
.top-band {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background-color: #000;
    height: 80px;
    display: flex;
    align-items: center;
}

.menu-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
}

.menu-icon {
    width: 50px;
    border-radius: 0;
}

.logo-container {
    margin: 0 auto;
    text-align: center;
}

.logo {
	margin:10px 20px;
    width: 200px;
    transition: width 0.3s ease;
}

img {
    border-radius: 0;
}

/* Homepage Specific Styles */
.home .top-band {
    position: relative;
    background-color: transparent;
    height: auto;
}


.home .logo-container {
    position: absolute;
    top: 12vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    text-align: center;
}

.home .logo {
    width: 80%;
    transition: width 0.3s ease;
}




.site-footer {
    background-color: #000;
    color: #fff;
    padding: 40px 0 40px 0;
    position: relative;
}

.site-footer .container {
    max-width: 1200px;
    margin: 0 auto;
}

.site-footer .wavy-border {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: url('img/wavy-border.svg') repeat-x;
    background-size: cover;
}

.site-footer p {
    margin: 0;
    font-size: 1rem;
    color: #d5a468;
}

.site-footer .social-icons {
    margin-bottom: 20px;
}

.site-footer .social-icon {
    margin: 0 10px;
    display: inline-block;
    color: #d5a468;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.site-footer .social-icon:hover {
    color: #fff;
}
.site-footer a {color:#d5a468;}


#menu-overlay {
    background-color: hsla(0,0%,0%,0.65);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: none;
}

#navigation {
    height: auto;
    padding: 0;
    padding-bottom: .8vw;
    position: fixed;
    top: 0;
    right: -100%; /* Hidden to the left */
    width: 25%;
    font-weight: normal;
    z-index: 9998;
    transition: right 0.3s ease; /* Smooth transition */
    background-color: #d5a468;
}

.menuopen #navigation {
    right: 0; /* Slide in from the left */
}

.menu-toggle {
    position: fixed;
    top: 25px;
    right: 20px;
   
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
}
 
.menuopen {
   
}

#menu {
    width: 100%;
    height: 100vh;
    padding: 100px 20px;
}

#menu a {
    color: #000;
    display: block;
    font-size: 3vw;
    line-height: 4vw;
    text-decoration: none;
   font-family: 'SaintRegus-MediumExpanded';
	
}

#menu a:hover {
    color: #FFF;
}

#menu .social-icons {
    display: flex;
    justify-content: left;
    margin-top: 20px;
}

#menu .social-icon {
    margin: 0 10px;
    display: inline-block;
    color: #fff;
    font-size: 2rem;
    transition: color 0.3s;
}

#menu .social-icon:hover {
    color: #000;
}

.feed-section {
	width:100%; display:block;
background-color:#000 !important;	
	padding-bottom:25px !important;
}





.event-info h2 {
    text-align: center;
    
    font-size: 24px;
    color: #c8a16e; /* Matching the color from the image */

   
}

.page-id-28 .entry-content {padding:4vw; margin-top:10vw;}



h1 {
    text-align: center;
    
    font-size: 40px;
    color: #c8a16e; /* Matching the color from the image */

   
}

h3 {font-size:24px; margin-bottom:20px;}

#news-section {padding:2vw 5vw;}

.columns-wrapper {
	padding:2vw 5vw;
    column-count: 2;
   text-align:left;
}

ul {margin-bottom:14px;}

p, li {
    font-family: "brandon-grotesque", sans-serif;
font-weight: 400;
font-style: normal;
    font-size: 16px; /* Adjust to match the font size */
   line-height:20px;
    color: #000; /* Matching the body text color */
}


@media (max-width: 768px) {
    .columns-wrapper {
        grid-template-columns: 1fr;
    }
}


.list_carousel {
	margin: 0 auto;
	width: 80%;
	margin-bottom:2vw;
	
	
}
.list_carousel ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}
.list_carousel li img {
	width: 100%;
	height: auto;
	
}
.list_carousel li {
	font-size: 40px;
	color: #999;
	text-align: center;
	width: 250px;
height: 260px;
padding: 0;
margin: 6px;
display: inline-block;
}
.list_carousel.responsive {
	width: auto;
	margin-left: 0;
}
.clearfix {
	float: none;
	clear: both;
}


.prev {
	float: left;
	margin-left: 2vw;
	padding-top:90px;
	width: 5%;
	text-align: center;
}
.prev img, .next img {
	width: 60%;
	height: auto;
}
.next {
	padding-top:90px;
	float: right;
	margin-right: 2vw;
	width: 5%;
	text-align: center;
}
.pager {
	float: left;
	width: 300px;
	text-align: center;
}
.pager a {
	margin: 0 5px;
	text-decoration: none;
}
.pager a.selected {
	text-decoration: underline;
}
.timer {
	background-color: #999;
	height: 6px;
	width: 0px;
}


.team-archive .team-member .details h2 {padding-top:0; padding-left:0; text-align:left;}


#the-container #content {Xmax-width:1200px; padding:0 5vw; margin:3vw auto; margin-top:110px;}

.home #the-container #content {max-width:none; padding:0; margin:0;}

#section-1 {background-color:#000; border:20px solid #c8a16e; margin-top:-5px;}
.feed-section {border:20px solid #c8a16e; border-top:0;}

#section-1 p {color:#FFF;}

.team-archive .team-member {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.team-archive .team-member .photo {
    width: 30vw;
    height: 40vw;
	
    flex-shrink: 0;
    overflow: hidden;
    margin-right: 20px;
}

.team-archive .team-member .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.team-archive .team-member .details {
    flex: 1;
}

.team-archive .team-member .details h2 {
    margin-top: 0;
}

.studs-archive {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 50px; /* Space between grid items */
    margin: 40px auto;
    max-width: 1200px;
    padding: 0 20px;
}

.stud-item {
    text-align: center;
    transition: transform 0.3s ease, filter 0.3s ease; /* Smooth transition for shrinking and darkening */
}

.stud-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1; /* Ensure square images */
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.3s ease, filter 0.3s ease; /* Smooth transition for shrinking and darkening */
}

.stud-item-title {
    margin-top: 10px;
    font-size: 28px;
    color: #c8a16e;
    font-family: 'SaintRegus-MediumExpanded';
}

.stud-item a {
    text-decoration: none;
    color: inherit;
}

/* Hover effect: darken the image and shrink it slightly */
.stud-item:hover {
    transform: scale(0.98); /* Slightly shrink the entire .stud-item */
}

.stud-item:hover img {
    filter: brightness(0.8); /* Darkens the image */
    transform: scale(0.95); /* Shrinks the image slightly */
}


.page-id-30 h2 {text-align:left; padding-left:0;}



@media (max-width: 768px) {
    .studs-archive {
        grid-template-columns: 1fr; /* Single column on smaller screens */
    }
}


/* Custom Styling for Studs Page */

/* Container for the single stud page */
/*.single-stud {
    margin-top: 50px;
    padding: 20px;
}
*/
/* Title Styling */
.stud-title {
    font-family: 'SaintRegus-MediumExpanded', sans-serif;
    font-size: 48px;
    color: #c8a16e;
    text-align: center;
    margin-bottom: 30px;
	
}

.single-stud #content .row {border-top:20px solid #c8a16e;}



h1.stud-title {margin-top:0; padding-top:0; }
/* Carousel for the stud images */
#studGalleryCustomCarousel {
    margin-top: 20px;
	margin-bottom:15px;
}

#studGalleryCustomCarousel .stud-carousel-img {
    border-radius: 0;
    object-fit: cover;
    height: 400px;
    width: 100%;
}

#studGalleryCustomCarousel .stud-carousel-control {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    padding: 10px;
}

#studGalleryCustomCarousel .stud-carousel-icon {
    background-color: #c8a16e;
    border-radius: 50%;
}

#studGalleryCustomCarousel .stud-carousel-control:hover .stud-carousel-icon {
    background-color: #a8874a; /* Darker hover effect */
}

/* Pedigree Button */
.pedigree-btn {
    background-color: #c8a16e;
    color: white;
    padding: 10px 20px;
    border-radius: 0;
    font-family: "brandon-grotesque", sans-serif;
font-weight: 400;
font-style: normal;
    font-size: 16px;
    text-decoration: none;
	border:0;
	margin-bottom:15px;
}

.pedigree-btn:hover {
    background-color: #a8874a;
    color: #fff;
}

/* Content Styling */
.stud-content {
	text-align:left;
    margin-top: 20px;
    font-family: "brandon-grotesque", sans-serif;
font-weight: 400;
font-style: normal;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.stud-content p {
    margin-bottom: 20px;
	color:#c8a16e;
}



p.stud-fee {color:#FFF;}

.stud-content h2, .stud-content h3 {
    color: #c8a16e;
    font-family: 'SaintRegus-MediumExpanded', sans-serif;
}

.stud-content ul {
    list-style: disc;
    margin-left: 20px;
    padding-left: 20px;
}

.stud-content ul li {
    margin-bottom: 10px;
}


/* Horse Archive Grid */
.horse-archive {
    margin-top: 40px;
}

.horse-item {
    border: 1px solid #d9b588; /* Border matching image */
    padding: 20px;
    border-radius: 5px;
}

/* Horse Image Styling */
.horse-item img {
    border: 3px solid #d9b588; /* Border around the image */
    border-radius: 0;
    max-height: 400px; /* Limit height of the image */
    object-fit: cover;
    width: 100%;
}

/* Horse Details Styling */
.horse-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.horse-name {
    font-size: 30px;
    color: #c8a16e;
    font-family: 'SaintRegus-MediumExpanded', sans-serif;
}

.horse-details p {
    font-size: 19px;
  
    margin-bottom: 10px;
}

.horse-details p strong {
    color: #000;
}

/* Button Styling */
.horse-buttons a {
    display: inline-block;
    background-color: #d9b588;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 0;
    margin-right: 10px;
    font-size: 16px;
    
}

.horse-buttons a:hover {
    background-color: #c8a16e; /* Hover color for buttons */
    color: white;
}

.horse-buttons .btn-outline-primary {
    background-color: #d9b588;
    color: #fff;
    border: 1px solid #d9b588;
    text-transform: uppercase;
}

.horse-buttons .btn-outline-primary:hover {
    background-color: #c8a16e;
    border-color: #c8a16e;
}

.horse-category {
    
    color: #666;
    margin-bottom: 15px;
    font-style: italic;
}


/* Responsive Design */
@media (max-width: 768px) {
    .horse-item {
        flex-direction: column;
    }
    
    .horse-details {
        margin-top: 20px;
    }
    
    .horse-buttons a {
        margin-bottom: 10px;
    }
}


.category-filter {
    margin: 0 10px;
    cursor: pointer;
}

.category-filters label {
    font-size: 16px;
    font-weight: bold;
    margin-right: 20px;
}



/* Responsive Design */
@media (min-width: 768px) {
   /* .single-stud {
        margin-top: 100px;
    }*/

    .stud-title {
        font-size: 56px;
        text-align: center;
    }

    #studGalleryCustomCarousel .stud-carousel-img {
        height: 500px;
    }

    .pedigree-btn {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .stud-title {
        font-size: 36px;
        text-align: center;
		
    }

    #studGalleryCustomCarousel .stud-carousel-img {
      /*  height: 250px;*/
    }
	
	

    .pedigree-btn {
        width: 100%;
        text-align: center;
        margin-top: 20px;
		margin:20px;
		width:calc(100% - 40px);
		display:inline-block;
    }

    .stud-content {
        font-size: 14px;
        margin-top: 20px;
		padding:20px;
    }
}


@media (max-width: 600px) {
    .team-archive .team-member {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .team-archive .team-member .photo {
        margin-right: 0;
        margin-bottom: 15px;
    }
}




/* Media Query for Mobile */
@media (max-width: 768px) {
    #navigation {
        width: 100%; /* Full width for mobile */
        left: -100%; /* Completely off-screen to the left */
    }

    .menuopen #navigation {
        left: 0; /* Slide in from the left */
    }

    #menu a {
        font-size: 8vw; /* Larger text for mobile */
        line-height: 12vw; /* Adjust line height for mobile */
    }

	#header {/*background-color:#d37d07; */  width:100%; }
	
	.content {text-align:left;}
	
	.logo-container {
    position: relative;
    top: 0;
		
    left: 50%;
		padding: 0 20%;
    transform: translateX(-50%);
    z-index: 99;
	text-align:center;
}
	
	.home .logo-container {width:60%;}
	
	
	
	.home .logo {
    width: 100%;
    transition: width 0.3s ease; /* Smooth transition */
}

	a.anchor-jump {
display: block;
position: relative;
top: -20vw;
visibility: hidden;
}
	
	
	#news-section {padding-bottom:44px;}
	
	
	.team-archive .team-member .photo {
width: 100%;
height: 90vw;}
	
	
}
	




.feed-section {

	padding-bottom:25px !important;
}



html, body {
    height: 100%;
    margin: 0;
}

body:not(.home) #wrapper {
    position: relative;
    min-height: 100%;
}

body:not(.home) #the-container {
    padding-bottom: 100px; /* Space for the footer */
}

body:not(.home) .site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    padding: 20px;
    text-align: center;
}





/* Input, select, and textarea styling */
input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 0;
  box-sizing: border-box;
  margin-bottom:1vw;
}

/* Checkbox styling */
fieldset {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 0;
}

legend {
  font-weight: bold;
  padding: 0 5px;
}

input[type="checkbox"] {
  margin-right: 10px;
}

/* Submit button styling */
input[type="submit"] {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #0056b3;
}

.content-section {
    /*display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    margin-bottom: 100px;*/
}

.image-column img {
 width: 100%;
    aspect-ratio: 1 / 1; /* This makes the image a square */
    object-fit: cover;
}

.text-column h2 {
    font-size: 24px;
    color: #c8a16e; /* Adjust color to match the headline style */
    margin: 0;
	padding:0;
}

.text-column p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

@media (max-width: 768px) {
    .content-section {
        grid-template-columns: 1fr;
    }

    

    .text-column h2 {
        margin-top: 20px;
    }
}




.three-column-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style-type: none;
    padding: 0;
}

.three-column-list li {
    border: 1px solid #ddd; /* Optional: Add borders to separate items */
    padding: 15px;
    border-radius: 0; /* Optional: Add rounded corners */
}

.three-column-list h3 {
    font-size: 18px;
    color: #333;
    margin-top: 0;
}

.three-column-list p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .three-column-list {
        grid-template-columns: 1fr;
    }
}

.studs-grid {
	margin:0 auto;
	max-width:1100px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stud-item {
    text-align: center;
}

.stud-image img {
    width: 100%;
    height: auto; /* Adjust if you want a fixed square size */
    object-fit: cover; /* Ensures image covers the square area */
    aspect-ratio: 1 / 1; /* Makes the image square */
}

.stud-item h3 {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
	padding-bottom:0;
	margin-bottom:0;
}



@media (max-width: 768px) {
    .studs-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .studs-grid {
        grid-template-columns: 1fr;
    }
}


.foals-page {
    margin: 0 auto;
    max-width: 1500px;
    padding: 20px;	background-color:#c8a16e;
}

.foals-content {
    text-align: center;
    margin-bottom: 20px;
	background-color:#000;
	color:#c8a16e;
	background-color:#000;
	padding:20px 50px;
}

.foals-content p {color:#c8a16e;  font-size: 18px;}

.foals-content h2 {
    font-size: 4vw;
    color: #c8a16e; /* Dark red color */
    letter-spacing: 1.5px;
    margin: 0;
}




.foal-image {font-size:0; border-top: 20px solid #c8a16e;}


.foal-info h3 {
    font-size: 20px;
    font-weight: bold;
    margin-top: 15px;
    color: #c8a16e;
}

.foal-info p {
    font-size: 18px;
    margin: 5px 0;
    color: #c8a16e;
}




.single-foal {border:20px solid #c8a16e;}
.single-foal h1 {background-color:#000; margin:0; padding:25px;}
.single-foal h2 {background-color:#000; margin:0; padding-top:0; font-size:28px;}

.foals-grid {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next row */
    gap: 20px; /* Space between items */
    justify-content: flex-start; /* Align items to the left */
}

.foal-item {
    background-color: #000;
    color: #c8a16e;
    text-align: center;
    padding: 20px;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 23%; /* Fixed width for each foal item */
    flex: 0 0 auto; /* Prevent flex-grow or shrink */
}


.stallion-item {
	  background-color: #000;
    color: #c8a16e;
    text-align: center;
    padding: 20px;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 49%; /* Fixed width for each foal item */
    flex: 0 0 auto; /* Prevent flex-grow or shrink */
	
}

input[type="submit"]:hover, input[type="submit"] {background-color: #c8a16e;}


.foal-image img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

.appointment-panel  p  { font-size: 25px; line-height:30px;
    font-weight: bold;}

.appointment-panel {
    background-color: #c8a16e; /* Gold color */
    color: #000;
    text-align: center;
    padding: 20px;
   
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto; /* Allow the panel to stretch to fill available space */
    min-width: 22%; /* Minimum width to maintain consistent spacing */
}

.page-id-259 h1 {font-size:4vw; text-transform: uppercase;}


.single-studs li {color:#c8a16e;}

.single-studs #content  {
    margin: 0 auto;
    max-width: 1500px;
    padding: 20px !important;	
	
}




.single-studs .container.single-stud {
    text-align: center;
    margin-bottom: 0;
	background-color:#000;
	color:#c8a16e;
	border:20px solid #c8a16e;
	background-color:#000;
	padding-top:20px;
}

.stud-content {color:#c8a16e; }



@media (max-width: 1160px) {
    .foal-item {
       width:calc(33.33% - 20px);
    }
	.appointment-panel {width:22%}
	
	.stallion-item {
       width:calc(48%);
    }
	
	
}



@media (max-width: 900px) {
    .foal-item {
       width:calc(50% - 20px);
    }
	.appointment-panel {width:22%}
}

@media (max-width: 768px) {
    .foal-item {
       width:calc(100% - 20px);
    }
	.appointment-panel {width:100%}
	
	 .stallion-item {
       width:calc(100%);
    }
	
}



.foal-image-wrapper {
    position: relative;
    width: 100%;
    height: 600px; /* Adjust this height as per your design */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foal-image-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.foal-image-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(20px);
    transform: scale(1.2); /* Slightly enlarge for better effect */
}

.foal-image-centered {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 100%;
}

.foal-image-centered img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}


.foal-details-bar {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 0;
    font-size: 24px;
	border-top:20px solid #c8a16e;
 
}

.foal-details-bar strong {color: #c8a16e;}

.foal-details-bar p {
    margin: 0;
    font-size: 24px;
	line-height:28px;
    font-weight: 500;
	color:#FFF;
}

.foal-details-bar span {
    display: inline-block;
    margin-right: 10px;
}

.foal-content-box {
    background-color: #fff;
    border: 0;
    padding: 40px;
 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    line-height: 1.6;
}

.foal-content-box p {margin-bottom:10px;}


.foal-details-bar p em {
    font-style: italic;
    
}

a.back-button {display:block; width:100px; margin:15px auto; border:1px solid black; padding:5px 10px; text-align:center;}

.header-with-button {
	max-width:1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
	margin:0 auto;
	padding:0;
    margin-bottom: 20px;
}

.header-with-button h1 {
   text-align:center;
}

.btn-breeding {
    background-color: #000; /* Dark red color */
    color: #c8a16e;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

.btn-breeding:hover {
    background-color: #c8a16e; /* Darker red on hover */
	color:#000;
}


.page-id-30 .service-grid {
  display: flex;
  flex-wrap: wrap;
  
}

.page-id-30 .service-item {
  width: 50%;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 40px;
}

.page-id-30 .service-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
	
	aspect-ratio: 1 / 1; /* This makes the image a square */
    object-fit: cover;
	
	
}


.page-id-30 #content {border:20px solid #c8a16e; background-color:#000; color:#c8a16e;  margin: 0 auto;
    max-width: 1500px;}
.page-id-30 #content p {color:#c8a16e;}

.page-id-30 #the-container #content {padding:10px;}

/* style.css */
[class^="col-"] {
  
  box-sizing: border-box;
}
.col-1  { width: 8.3333%; }
.col-2  { width: 16.6667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.3333%; }
.col-5  { width: 41.6667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.3333%; }
.col-8  { width: 66.6667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6667%; }
.col-12 { width: 100%; }

.offset-3 {
  margin-left: 25%;
}

.centered {
  justify-content: center;
  text-align: center;
}

.clearfix {
  clear: both;
}


.section p {color: #c8a16e;}

/* Section Headings */
.section {
	color: #c8a16e;
background-color: #000;
padding: 20px 50px;
  background: #000;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #DDD;
  border-radius: 0;
	border:20px solid #c8a16e;
}
.section h2 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #c8a16e; /* a rustic brown */
}

/* Last job / Work History boxes */
.last-job {
  border: 1px solid #DDD;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
}


.app-submit .col-12, .app-submit .col-8 {
  margin-bottom: 10px;
}

.col-12 p {text-align:center;}

.page-id-273 .row {margin:auto !important}

.section.positions-section, .section.applicant-section, .section.qa-section, .section.employment-section {margin-bottom:0!important; border-bottom:0!important;}

.page-id-273 #content .header {display:none; color: #c8a16e;
background-color: #000;
padding: 20px 50px;
border:20px solid #c8a16e;}


.team-archive {
	
	color: #c8a16e;
background-color: #000;

border:20px solid #c8a16e;
	
}

.team-member {border:20px solid #c8a16e; border-right:0; border-left:0; border-bottom:0; padding-bottom:0}

.team-member .content p {color:#fff;}

.team-member .details {padding-top:25px; padding-left:10px; padding-right:20px;}

.team-archive .team-member {margin-bottom:0;}

@media (max-width: 768px) {

	.details {padding:5vw !important}
	.employment-section .row {display:block;}
		.employment-section .col-6, .employment-section .col-8 {width:100%; display:block; -ms-flex: 0 0 50%;
flex: none;
max-width: 100%;}
	
	.team-archive .team-member {display:block;}
	
}

fieldset {border:0;}
.page-id-148 #the-container #content {background-color:#000; border:20px solid #c8a16e; max-width: 1200px; color:#FFF; margin: 20px auto; margin-top:110px;}

.page-id-148 #the-container {padding:5vw; padding-top:0;} 

.page-id-148 #the-container #content p, .page-id-148 #the-container #content span, .page-id-148 #the-container #content, .page-id-148 #the-container #content label {color:#FFF;}

.page-id-148 .stud-item h3 {color:#c8a16e;}
.page-id-148 legend {color:#c8a16e;}

.page-id-30 #the-container #content  {margin: 20px auto; margin-top:110px;}
.page-id-30 #the-container {padding:5vw; padding-top:0;}