body, html {
    height: 100%;
}

body {
	overflow-x: hidden;
}

html {
	scroll-behavior: smooth;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.spinner {
	position: fixed;
    top: 47%;
    width: 40px;
    height: 40px;
    border: 4px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}


@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/*TYPOGRAHPY RULES*/
.extra-bold-font{
font-family: montserrat, sans-serif!important;
font-weight: 800!important;
font-style: normal!important;
}

.bold-font{
font-family: montserrat, sans-serif!important;
font-weight: 700!important;
font-style: normal!important;
}

.semi-bold-font{
font-family: montserrat, sans-serif!important;
font-weight: 600!important;
font-style: normal!important;
}

.primary-font{
font-family: montserrat, sans-serif!important;
font-weight: 500!important;
font-style: normal!important;
}

.light-font{
font-family: montserrat, sans-serif!important;
font-weight: 400!important;
font-style: normal!important;
}

.lighter-font{
font-family: montserrat, sans-serif!important;
font-weight: 300!important;
font-style: normal!important;
}

.extra-light-font{
font-family: montserrat, sans-serif!important;
font-weight: 200!important;
font-style: normal!important;
}

.rounded-font-light{
font-family: montserrat-alternates, sans-serif!important;
font-weight: 400!important;
font-style: normal!important;
}

.rounded-font{
font-family: montserrat-alternates, sans-serif!important;
font-weight: 600!important;
font-style: normal!important;
}

.rounded-font-bold{
font-family: montserrat-alternates, sans-serif!important;
font-weight: 800!important;
font-style: normal!important;
}

.text-darkgrey{
	color: #1f1d1d!important;
}

.text-midgrey{
	color: #4d4d4f!important;
}

.text-lightgrey{
	color: #777777!important;
}

.text-verylight-grey{
	color: #f2f2f2!important;
}

.text-cream{
	color: #f1efeb!important;
}

.text-white{
	color: #ffffff!important;
}

.text-red{
	color: #ed1c24!important;
}

.xl-tracking{
	letter-spacing: 14px;
}

.lg-tracking{
	letter-spacing: 10px;
}

.med-tracking{
	letter-spacing: 6px;
} 

.sm-tracking{
	letter-spacing: 4px;
}

.xs-tracking{
	letter-spacing: 2px;
}

.xxs-tracking{
	letter-spacing: 1px;
}

.fs-paragraph{
	font-size: 1.7vh!important;
}

.fs-subtitle{
	font-size: 3.25vh!important;
}

.verysmall-fs{
    font-size: 1.1vh!important;
}

.line-height-small{
	line-height: 1.3em!important;
}

.line-height-smaller{
	line-height: 1em!important;
}

/*GENERAL RULES*/
.z-to-front{
	z-index: 900!important;
}

.opacity-zero{
	opacity: 0!important;
}

.no-borderRadius{
	border-radius: 0!important;
}

.vh-70{
 height:70vh!important;
}

.dotted-divider {
  border-top: 3px dotted #bbb!important;
}

/*IMAGE RULES*/
.image-contain{
	object-fit: contain!important;
}

.image-cover{
	object-fit: cover!important;
}

.flip-pic{
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.object-position-center{
    object-position: center!important;
}

.max-img-height{
    max-height: 200px!important;
}

/*BACKGROUND RULES*/

.black-bgnd{
	background-color:#000000!important;
}

.darkgrey-bgnd{
	background-color: #1f1d1d!important;
}

.midgrey-bgnd{
	background-color: #4d4d4f!important;
}

.lightgrey-bgnd{
	background-color: #777777!important;
}

.lightergrey-bgnd{
	background-color: #c0c0c0!important;
}

.verylightgrey-bgnd{
	background-color: #f2f2f2!important;
}

.cream-bgnd{
	background-color: #f1efeb!important;
}

.white-bgnd{
	background-color: #ffffff!important;
}

.red-bgnd{
	background-color:#ed1c24!important;
}

.header-bg{
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("../images/header/header_fromINC.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.tri-resources{
    background-image: url('../images/index/single-calf.jpg'); 
    background-size: cover; 
    background-position: center;
}

.tri-about{
    background-image: url('../images/index/bull.jpg'); 
    background-size: cover; 
    background-position: center;
}

.tri-member{
    background-image: url('../images/index/cow-calfpair.jpg'); 
    background-size: cover; 
    background-position: center;
}

/*LINKS AND BUTTONS RULES*/
.link-red{
	text-decoration: none!important;
}

.link-red:hover{
	color: #ed1c24!important;
}

.red-button{
    text-transform: uppercase;
    background-color:#ed1c24!important;
    text-decoration:none;
    color:white;
}

.red-button:hover{
	background-color: #4d4d4f !important;
}

.lightgrey-button{
    background-color: #f1f1f1 !important;
    text-decoration:none;
    color:rgb(0, 0, 0);
}

.lightgrey-button:hover{
    background-color: #dadada !important;
	color:#ed1c24!important;
}

.grey-button{
    text-transform: uppercase;
    background-color: #4d4d4f !important;
    text-decoration:none;
    color:white;
}

.grey-button:hover{
	background-color:#ed1c24!important;
}

.red-outline-button{
	background: #ed1c24!important;
	border: 2px solid #ed1c24!important;
	border-radius: 6px;
	box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
	box-sizing: border-box;
	color: #FFFFFF;
	cursor: pointer;
	text-align: center;
}

.red-outline-button:hover{
	background-color: transparent!important;
	border: 2px solid #ed1c24!important;
    color: #ed1c24!important;
}


/*NAVIGATION RULES*/
.navbar {
    background-color: #ed1c24!important;
}

.btn-group {
    display: flex!important;
    flex-wrap: wrap!important;
    justify-content: center!important;
    gap: 10px!important;
    padding: 0 20px!important;
}

.btn-primary {
    background-color: #ed1c24!important;
    border-radius: 0!important;
    color: white!important;
    border:#ed1c24!important;
    flex-grow: 0!important; 
    padding: 8px 16px!important; 
    white-space: nowrap!important; 
}

.btn-primary:hover {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)!important;
}

.btn-primary.active {
    background-color: #ffffff!important;
    color: black!important;
    font-weight: 800!important;
    pointer-events: none!important;
}

.navbar-toggler {
    border: none!important;
    color: white!important;
    border-radius: 0px!important;
}

.navbar-toggler:focus {
    box-shadow: none!important;
}

.navbar-toggler:hover {
    box-shadow: none!important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)!important;
}


@media (max-width: 1585px) { 
    .btn-group {
        max-width: 100%!important; 
        justify-content: center!important;
    }

    .btn-primary {
        width: calc(100% / 6 - 10px)!important; 
    }

    .tri-vh{
    height: 70vh!important;
}
}

@media (max-width: 991px) { 
    .btn-group {
        flex-wrap: wrap!important;
        justify-content: center!important;
        gap: 7px!important;
    }

    .btn-primary {
        width: calc(100% / 2 - 10px)!important; 
    }

    .tri-vh{
    height: 130vh!important;
}
}

@media (max-width: 768px) { 
    .btn-group {
        flex-direction: column!important;
        align-items: center!important;
        display: flex!important;
        width: 100%!important;
        gap: 5px!important;
    }

    .btn-primary {
        width: auto!important; 
    }

	.navbar-toggler[aria-expanded="true"] + .navbar-collapse {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

@media (max-width: 576px) { 
    .btn-group {
        flex-direction: column!important;
        align-items: center!important;
        display: flex!important;
        width: 100%!important;
        gap: 3px!important;
    }

    .navbar-toggler[aria-expanded="true"] + .navbar-collapse {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
} 

/*HOME PAGE RULES*/

.fade-animation {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1s;
    animation-name: fade-animation;
    animation-duration: 1s;
}

@keyframes fade-animation {
  from {opacity: .6} 
  to {opacity: 1}
}

.tri-div:hover {
    flex-grow: 2.5;
}

.tri-div {
    transition: 0.4s ease-out;
}

.tri-div:hover .learn-more
 {
    display: block!important;
}

.tri-vh{
    height: 70vh;
}

@media (max-width: 1585px) { 
    .tri-vh{ height: 70vh!important;}
}

@media (max-width: 991px) { 
    .tri-vh{ height: 130vh!important;}
}

@media (max-width: 768px) { 
    .tri-vh{ height: 130vh!important;}
}

@media (max-width: 576px) { 
    .tri-vh{ height: 130vh!important;}
}   

/*FOOTER RULES*/

.gsc-clear-button{
    display: none!important;
}

.gsc-control {
    width: 100%!important;
}

.link-red.active{
    color: #ed1c24!important;
    pointer-events: none!important;
}

/*ABOUT PAGE RULES*/

.btn-secondary {
    background-color: #1f1d1d!important;
    border-radius: 0!important;
    color: white!important;
    border: #1f1d1d!important;
    flex-grow: 0!important; 
    padding: 8px 16px!important; 
    white-space: nowrap!important; 
}

.btn-secondary:hover {
    color:  #ed1c24!important;
}

.btn-secondary.active {
  color:  #ed1c24!important;
}

.ratio-custom {
    --bs-aspect-ratio: 56.25%!important;

    @media (min-width: 768px) { 
        --bs-aspect-ratio: 100%!important;
    }
}

.about-image{
    opacity: 1!important;
    transition: 0.3s;
}

.about-image-container:hover .about-image{
    opacity: 0.61!important;
}

.pdf-thumbnail{
    opacity: 1!important;
    transition: 0.3s;
    aspect-ratio: 92 / 119!important;
}

.pdf-caption{
    color: black!important;
    flex-grow: 1; 
}

.pdf-thumbnail-container:hover .pdf-thumbnail{
    opacity: 0.61!important;
}

.pdf-thumbnail-container:hover .pdf-caption{
    color: #ed1c24!important;
}

.secondary-active{
    color: #ed1c24!important;
    pointer-events: none!important;
}

/*RESOURCE PAGE RULES*/

.img-height-custom{
    height: 50vh!important;
    object-fit: cover!important;
    object-position: center!important;
}

@media (min-width: 768px) {
    .img-height-custom {
        height: 45vh!important;
    }
}

/*NEWS PAGE RULES*/

.resize-me{
    height:100%!important;
}

@media (max-width: 768px) {
    .resize-me {
        height: auto !important;
    }
}

.calendar-row:nth-child(even) {
  background-color: #c0c0c0!important;
}

/*MEMBERSHIP PAGE RULES*/
.social-media-icons:hover {
    opacity: 0.7!important;
    transition: opacity 0.2s ease-in-out!important;
}

/*YOUTH PAGE RULES*/
.ratio-3x4 {
  position: relative!important;
  width: 100%!important;
  padding-top: 133.33%!important;
}

.ratio-3x4 > img {
  position: absolute!important;
  top: 0!important;
  left: 0!important;
  height: 100%!important;
  width: 100%!important;
  object-fit: cover!important;
}

/*MERCH PAGE RULES*/
.merch-img-height {
    max-height: 550px!important;
    object-fit: contain!important;
}

/*DIRECTORY PAGE RULES*/
.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  font-size: 1.2rem!important; 
  text-align: center!important; 
  color:   #272727 !important;       
  font-family: montserrat, sans-serif!important;
  font-weight: 700!important;
  font-style: normal!important;
}

/* Remove all borders from Tabulator */
.tabulator {
   border: none !important;
}

.tabulator .tabulator-header,
.tabulator .tabulator-row {
   border: none !important;
}

.tabulator .tabulator-cell {
   border: none !important;
   box-shadow: none !important;
}

#example-table{
  border-top: 6px solid #ffffff !important; 
}

.tabulator .tabulator-header .tabulator-col {
  border-right: none !important;
}

.tabulator .tabulator-header-filter input,
.tabulator .tabulator-header-filter select {
  margin-bottom: 6px!important;
}

.tabulator-paginator {
  padding: 0.25rem 0.5rem!important;
  font-size: 0.85rem!important;
  display: flex!important;
  align-items: center!important;
  justify-content: flex-end!important; 
}

@media (max-width: 768px) {
.tabulator-paginator {
  padding: 0.25rem 0.5rem!important;
  font-size: 0.85rem!important;
  display: flex!important;
  align-items: center!important;
  justify-content: flex-start!important; 
}
}

.tabulator-page-size {
  margin-bottom: 0!important;
}

.tabulator-page-size label {
  margin-right: 0.25rem!important;
  font-size: 0.85rem!important;
}

.tabulator-page {
  padding: 3px 6px!important;
  font-size: 0.8rem!important;
  min-width: unset!important;
}

.tabulator .tabulator-footer .tabulator-footer-contents {
padding: 0px 0px!important;
}

.tabulator-paginator label {
  display: none!important;
}

.tabulator-page-size select {
  margin-left: 0 !important;
}

/*CUSTOM FORM RULES (SELECT 2)*/

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border: solid;
  border-color: rgb(90, 90, 90) !important;
  outline: 0 none !important;
}
.form-select:focus {
  outline: none!important;
  border: thin solid!important;
  border-color: rgba(172, 40, 40, 0.8)!important;
  box-shadow: 0 1px 1px rgba(204, 5, 5, 0.075) inset, 0 0 8px rgba(201, 10, 10, 0.6)!important;
}

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
    border: thin solid!important;
    border-color: rgba(172, 40, 40, 0.8)!important;
    outline: 0 none !important;
}

.form-control:focus {
  border-color: rgba(172, 40, 40, 0.8)!important;
  box-shadow: 0 1px 1px rgba(204, 5, 5, 0.075) inset, 0 0 8px rgba(201, 10, 10, 0.6)!important;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #dc3545 !important; 
    color: white !important; 
}

select option:checked {
    background-color: #dc3545 !important; 
    color: white !important; 
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #dc3545 !important; 
    color: white !important; 
}

.select2-results__option:hover {
    background-color: #dc3545 !important;
    color: white !important;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #dc3545 !important; 
    color: white !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: rgba(172, 40, 40, 0.8)!important;
    box-shadow: 0 1px 1px rgba(204, 5, 5, 0.075) inset, 0 0 8px rgba(201, 10, 10, 0.6)!important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: rgba(172, 40, 40, 0.8)!important;
    box-shadow: 0 1px 1px rgba(204, 5, 5, 0.075) inset, 0 0 8px rgba(201, 10, 10, 0.6)!important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    z-index: 1056;
    overflow: hidden;
    color: #212529;
    background-color: #fff;
    border-color: rgba(172, 40, 40, 0.8)!important;
    border-radius: .25rem;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    color: #fff;
    background-color: #dc3545 !important; 
}

/*CUSTOM CAROUSEL RULES (SLICK)*/
.slick-slide{
    object-fit: cover!important;
}

.slick-slide > div{
    height: 90%!important;
}

.slick-track{
    display: flex!important;
    flex-direction: row!important;
    height: 100%!important;
}

.slick-dots{
    bottom: 12px!important;
}

@media (max-width: 1200px) { 
    .slick-dots{
        bottom: 10px!important;
    }
}

@media (max-width: 768px) { 
    .slick-dots{
        bottom: 3px!important;
    }
}

.slick-dots li button::before {
    font-size: 16px;
    color: #000000!important;
    opacity: 0.7;
	padding-top: 8px;
  }

.slick-dots li.slick-active button::before {
    color: #000000!important;
    opacity: 1;
	padding-top: 8px;
  }

.slick-prev:before {
	color: #ed1c24!important;
}

.slick-next:before {
	color: #ed1c24!important;
}

.slick-dotted.slick-slider {
    margin-bottom: 0px!important;
}