@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: 'poseyregular';
    src: url('posey-webfont.woff2') format('woff2'),
         url('posey-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/* shared link rules (leave as-is) */
.mxm-root-link{
  display:block;                      /* fill the whole <li> horizontally   */
  padding:18px 32px;                  /* what your text links use           */
  text-decoration:none;
  transition:background .3s ease;
}

/* 1️⃣ Make the anchor as tall as the other items
      (the h1 inside those links is ~64 px tall)              */
.mxm-root-li > .mxm-root-link{
  height:64px;                        /* adjust if your bar is taller/shorter */
}

/* 2️⃣ Icon artwork only on the Facebook button */
.mxm-root-link.facebook-icon{
  /* drop the line-height so padding sets the bar height
     and flexbox centres the icon perfectly */
  line-height:0;
  display:flex;                       /* let us centre the pseudo-icon      */
  align-items:center;                 /* vertical centring                  */
  justify-content:center;             /* horizontal centring                */
}

/* 3️⃣ Use a pseudo-element for the actual PNG
      – it’s easier to position without cropping */
.mxm-root-link.facebook-icon::before{
  content:"";
  width:30px;
  height:30px;
  background:url("TheArkSires/facebookicon.png") center/contain no-repeat;
  transform:translateY(4px);          /* pushes the icon 4 px down          */
  transition:background .2s ease;
}

/* 4️⃣ Swap the artwork on hover/focus */
.mxm-root-link.facebook-icon:hover::before,
.mxm-root-link.facebook-icon:focus::before{
  background-image:url("TheArkSires/facebookiconhover.png");
}

/* table can shrink on small screens */
table { width: 100%; border-collapse: collapse; }

/* images inside table cells scale down with their cell */
td img.images {
  max-width: 100%;
  height: auto;
  display: block;      /* removes the inline gap */
  margin: 0 auto;      /* keeps it centered */
}


.showpiglogo {max-height: 20px; margin-top:2px;}

.maincontent{
    background-color: rgba(255,255,255,1.00);
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.boarname2 {
    font-family: 'poseyregular';
    font-size: 3rem!important;
    letter-spacing: -4px;
}
.menulogo {
    max-height: 200px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 100000;
}

.collectiondays {
    color: rgba(63,63,63,1.00);
    font-size: 12px;
}

.descriptionsmall {
    font-size: 95%;
    font-style: normal;
}
.space {margin-bottom: 10px;}


.mediasize {min-width: 1000px;}

.logomargin {margin-bottom: 150px;}

.menufont {font-family:'Panton Rust Bold W01 Grunge';
font-size: 150%;}


.mxm-root-li h1 {font-family:'Panton Rust Bold W01 Grunge';
font-size: 150%;}

.specialmargin {min-height: 500px;}
.boarpic {
    border: medium solid rgba(12,21,70,1.00);
    border-radius: 1px;
    max-height: 400px;
}
.pedigree {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 30px!important;
}
.headlinebig .smallarklogo {
    max-width: 500px;
}
.hmy-content-wrapper.hmy-content-rounded.hmy-color-content-forest.openhousemargin {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}
.greenbox {
    color: rgba(255,255,255,1.00);
    background-color: rgba(6,81,14,1.00);
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 80%;
}

.redbox {
    color: rgba(255,255,255,1.00);
    background-color: rgba(123,0,5,1.00);
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 95%;
}


  .premium-option {
    background: #f5f5f5;
    border-left: 6px solid #b30000;
    padding: 20px;
    margin: 20px 0;
    color: #222;
  }

  .premium-option h2 {
    font-family: 'poseyregular'!important;
      font-size: 2rem!important;
    letter-spacing: -2px;
    margin-top: 0;
    color: #b30000;
    text-transform: uppercase;
  
  }

  .premium-option p {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.5;
  }

  .premium-option strong {
    color: #000;
  }

  .premium-option em {
    font-style: italic;
    color: #444;
  }
/* === ARK Slideshow Styles === */

.ark-slideshow {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

/* Each slide: image + caption */
.ark-slideshow .slide {
  display: none;
  flex-direction: column;
  align-items: center;
  transition: opacity 1s ease-in-out;
}

.ark-slideshow .slide.active {
  display: flex;
}

/* Slide image */
.ark-slideshow .slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* Caption */
.ark-slideshow .caption {
  font-size: 12pt;
  color: #000;
  padding-top: 0.5rem;
  text-align: center;
}

/* Navigation arrows */
.ark-slideshow .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3.5rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.4);
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.75rem;
  z-index: 1000;
  user-select: none;
  line-height: 1;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.ark-slideshow .nav:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.ark-slideshow .prev {
  left: 10px;
}

.ark-slideshow .next {
  right: 10px;
}


@media screen and (max-width: 600px) {

  
  .menulogo {
    max-height: 250px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 100000;
}
.headlinebig .smallarklogo {
    max-width: 300px;
}

.logomargin {margin-bottom: 225px;}


.boarbox {
	
	width: 100%!important;
     max-width: 300px;
	text-align: center;
}


.boarboxsmall {
    height: 365px;
    width: 100%!important;
    max-width: 300px;
    text-align: center;
}


.photocontainer {margin: auto;
}

.headlinebig {
	font-family:'Panton Rust Bold W01 Base'!important;
    font-size: 150%;
    line-height: .5em;
	color: #134b3e;
}
    
    .headlinebigARK {
	font-family:'Panton Rust Bold W01 Base'!important;
    font-size: 130%;
    line-height: .5em;
	color: #134b3e;
}


.maincontent{
    background-color: rgba(255,255,255,1.00);
    min-width: 940px;
}

body {background-color: rgba(255,255,255,1.00);}

}
/* ============================================
   ARK Sale Button — replaces old .tkl-BTN style
   Colors pulled from the Steve Cobb & Family badge
   ============================================ */

.ark-sale-btn {
  --ark-green: #1d4d34;
  --ark-green-dark: #0f2e1f;
  --ark-cream: #f4f1ea;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 260px;
  padding: 20px 38px;
  background: linear-gradient(150deg, var(--ark-green) 0%, var(--ark-green-dark) 100%);
  border: 1px solid rgba(244, 241, 234, 0.25);
  border-bottom: 4px solid var(--ark-cream);
  border-radius: 6px;
  color: #fff !important;
  text-decoration: none;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-bottom-color 0.25s ease;
}

/* diagonal sheen that sweeps across on hover */
.ark-sale-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: -65%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
}

.ark-sale-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  border-bottom-color: #ffcf4d;
}

.ark-sale-btn:hover::before {
  left: 130%;
}

.ark-sale-btn:active {
  transform: translateY(-1px);
}

.ark-sale-btn .ark-sale-date {
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff !important;
}

.ark-sale-btn .ark-sale-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffcf4d !important;
}

.ark-sale-btn .ark-sale-host {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(244, 241, 234, 0.85) !important;
}

.ark-sale-btn .ark-sale-host img {
  height: 13px;
}
/* ============================================
   ARK Sale Button — replaces old .tkl-BTN style
   Colors pulled from the Steve Cobb & Family badge
   ============================================ */

.ark-sale-btn {
  --ark-green: #1d4d34;
  --ark-green-dark: #0f2e1f;
  --ark-cream: #f4f1ea;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 260px;
  padding: 20px 38px;
  background: linear-gradient(150deg, var(--ark-green) 0%, var(--ark-green-dark) 100%);
  border: 1px solid rgba(244, 241, 234, 0.25);
  border-bottom: 4px solid var(--ark-cream);
  border-radius: 6px;
  color: #fff !important;
  text-decoration: none;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-bottom-color 0.25s ease;
}

/* diagonal sheen that sweeps across on hover */
.ark-sale-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: -65%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
}

.ark-sale-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  border-bottom-color: #ffcf4d;
}

.ark-sale-btn:hover::before {
  left: 130%;
}

.ark-sale-btn:active {
  transform: translateY(-1px);
}

.ark-sale-btn .ark-sale-date {
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff !important;
}

.ark-sale-btn .ark-sale-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffcf4d !important;
}

.ark-sale-btn .ark-sale-host {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(244, 241, 234, 0.85) !important;
}

.ark-sale-btn .ark-sale-host img {
  height: 13px;
}

/* ============================================
   ARK Sale Button — replaces old .tkl-BTN style
   Colors pulled from the Steve Cobb & Family badge
   ============================================ */

.ark-sale-btn {
  --ark-green: #1d4d34;
  --ark-green-dark: #0f2e1f;
  --ark-cream: #f4f1ea;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 260px;
  padding: 20px 38px;
  background: linear-gradient(150deg, var(--ark-green) 0%, var(--ark-green-dark) 100%);
  border: 1px solid rgba(244, 241, 234, 0.25);
  border-bottom: 4px solid var(--ark-cream);
  border-radius: 6px;
  color: #fff !important;
  text-decoration: none;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-bottom-color 0.25s ease;
}

/* diagonal sheen that sweeps across on hover */
.ark-sale-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: -65%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
}

.ark-sale-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  border-bottom-color: #ffcf4d;
}

.ark-sale-btn:hover::before {
  left: 130%;
}

.ark-sale-btn:active {
  transform: translateY(-1px);
}

.ark-sale-btn .ark-sale-date {
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff !important;
}

.ark-sale-btn .ark-sale-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffcf4d !important;
}

.ark-sale-btn .ark-sale-host {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(244, 241, 234, 0.85) !important;
}

.ark-sale-btn .ark-sale-host img {
  height: 13px;
}

/* ============================================
   ARK Featured Sale Button — homepage variant
   Flips the palette (parchment/gold field, green
   ink) and adds a corner ribbon + soft pulse so it
   reads as "the one to watch" next to the sale-page
   buttons, without breaking from the brand colors.
   ============================================ */

.ark-featured-btn {
  --ark-green: #1d4d34;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 300px;
  max-width: 380px;
  padding: 28px 30px 22px;
  background: linear-gradient(160deg, #faf7ee 0%, #ecdfba 100%);
  border: 2px solid var(--ark-green);
  border-radius: 10px;
  color: var(--ark-green) !important;
  text-decoration: none !important;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 0 rgba(29, 77, 52, 0.35), 0 8px 20px rgba(0, 0, 0, 0.18);
  animation: ark-pulse 2.6s ease-out infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ark-featured-btn:hover {
  transform: translateY(-4px) scale(1.015);
  animation-play-state: paused;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

@keyframes ark-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(29, 77, 52, 0.35), 0 8px 20px rgba(0, 0, 0, 0.18); }
  70%  { box-shadow: 0 0 0 14px rgba(29, 77, 52, 0), 0 8px 20px rgba(0, 0, 0, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(29, 77, 52, 0), 0 8px 20px rgba(0, 0, 0, 0.18); }
}

.ark-featured-btn .ark-featured-tag {
  position: absolute;
  top: 14px;
  left: -34px;
  width: 140px;
  transform: rotate(-45deg);
  background: var(--ark-green);
  color: #fff !important;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.ark-featured-btn .ark-featured-date {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ark-green) !important;
  text-decoration: none !important;
  margin-top: 6px;
}

.ark-featured-btn .ark-featured-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8a6d1a !important;
  text-decoration: none !important;
}

.ark-featured-btn .ark-featured-sub {
  font-size: 0.78rem;
  font-weight: 500;
  font-style: italic;
  color: #3f3f3f !important;
  text-decoration: none !important;
}

.ark-featured-btn .ark-featured-host {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 500;
  color: #555 !important;
  text-decoration: none !important;
}

.ark-featured-btn .ark-featured-host img {
  height: 13px;
  filter: brightness(0);
}

/* Compact modifier — add this class alongside ark-featured-btn
   whenever it sits inside one of the site's own hmy-section
   cells (same repeating structure as the sale page) instead
   of standing alone. It doesn't assume anything about the
   parent container — it just fills whatever width the cell
   gives it and drops the pulse so several side by side don't
   glow on top of each other.
   Markup:
   <div class="hmy-section" data-hmy-basis="25,%,1">
     <div class="hmy-content-wrapper">
       <div class="hmy-content hmy-center">
         <a class="ark-featured-btn ark-compact" href="...">...</a>
       </div>
     </div>
   </div> */
.ark-featured-btn.ark-compact {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  max-width: 260px;
  margin: 0 auto;
  padding: 20px 14px 16px;
  animation: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

.ark-featured-btn.ark-compact:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
}

.ark-featured-btn.ark-compact .ark-featured-date {
  font-size: 1.15rem;
}

.ark-featured-btn.ark-compact .ark-featured-title {
  font-size: 0.78rem;
}

.ark-featured-btn.ark-compact .ark-featured-host {
  font-size: 0.62rem;
}

/* ============================================
   Mobile responsiveness
   ============================================
   This site (Homestead SiteBuilder Plus, the "p7HMY"
   widgets) lays out hmy-section cells using the
   percentage in data-hmy-basis (e.g. 25% each for the
   four sale cards) but it does not reduce the COLUMN
   COUNT on small screens — so on a phone you'd get four
   ~90px-wide slivers instead of a stacked list. Below,
   #p7HMY_sales is the ID on the wrapper around the four
   homepage sale cards (see ark-homepage-section.html) —
   these rules take over the layout with plain flexbox
   under 900px, overriding whatever width the page's own
   engine assigns, regardless of load order. */

.ark-sale-btn,
.ark-featured-btn {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  #p7HMY_sales {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  #p7HMY_sales .hmy-section {
    display: block !important;
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    flex: 0 0 calc(50% - 8px) !important;
    box-sizing: border-box !important;
  }

  .ark-featured-btn.ark-compact {
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  #p7HMY_sales .hmy-section {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .ark-featured-btn.ark-compact {
    max-width: 300px !important;
    padding: 20px 16px 16px;
  }

  .ark-featured-btn.ark-compact .ark-featured-date {
    font-size: 1.3rem;
  }

  .ark-featured-btn.ark-compact .ark-featured-title {
    font-size: 0.9rem;
  }

  .ark-featured-btn.ark-compact .ark-featured-host {
    font-size: 0.68rem;
  }

  /* the sale-page buttons (one per section already, but
     guard against a squeezed min-width on very small phones) */
  .ark-sale-btn {
    min-width: 0;
    width: 100%;
    padding: 18px 22px;
  }
}

/* ============================================
   Site-wide mobile overflow guard
   ============================================
   Beyond the cards themselves, the page as a whole was
   scrolling sideways on phones — the template's outer
   wrapper divs (.container, .content, .header, .footer,
   .maintext, .slideshow2) and the many <img> tags further
   down the page with hardcoded width="1200" etc. attributes
   don't shrink for small screens, so the whole document
   ends up wider than the viewport. This caps the known
   wrapper classes to 100% and forces images/tables to scale
   down instead of overflowing. If content still scrolls
   sideways after this, look for another element elsewhere on
   the page with a hardcoded pixel width or width attribute
   larger than the screen — cobb2013.css/cobb20.css may set
   fixed widths that this can't see and override. */

@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .container,
  .content,
  .header,
  .footer,
  .maintext,
  .slideshow2 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .maintext img,
  .slideshow2 img,
  .content img {
    max-width: 100% !important;
    height: auto !important;
  }

  .maintext table {
    width: 100% !important;
    max-width: 100% !important;
  }
}