@import 'https://www.kentuckyderby.com/uploads/utilities.css';
@import 'https://www.kentuckyderby.com/styles/css/animations.css';
@import 'https://www.kentuckyderby.com/styles/css/main.css';

.subscription-form-prompt {
  margin-bottom: 7px;
}
.sponsor-menu { text-align: center }
.sponsor-menu-2 {
  position: static;
  right: auto;
  bottom: auto;
  height: auto;
}
@media only screen and (min-width: 1130px) {
  .sponsor-menu { text-align: left }
  .sponsor-menu-2 {
    position: absolute;
    right: 30px;
	bottom: 16px;
	height: 38px;
  }
}

@media print {
  .gm-nav { display: none; }
}

/* Tracking pixel hide */
body > img[width="1"] { display: none }

/*-- replaces _racing.scss:46 --*/
.contender-preview .contender-preview-label {
  font-weight: 700;
  color: #fff;
  opacity: 0.5;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1.54;
}

/*-- replaces _controls.scss:644 --*/
.subscription-form .subscription-form-label {
  margin-bottom: 7px;
  font-size: 1em;
  font-weight: 500;
  color: #29292b;
}

/*-- replaces _racing.scss:240 --*/
.next-race-tout .next-race-tout-header {
  font-size: 40px;
  font-family: "sorts-mill-goudy",Georgia,sans-serif;
  line-height: 1;
  text-transform: lowercase;
  color: #bbb;
}

/*-- replaces _racing.scss:247 --*/
.next-race-tout .next-race-tout-date {
  font-family: "sorts-mill-goudy",Georgia,sans-serif;
}

/*-- replaces _party.scss:64 --*/
.nbc-agenda .small {
  text-transform: uppercase;
  font-size: .75em;
}

/*-- replaces _party.scss:130 --*/
.party-planner-tout .party-planner-tout-callout {
  font-size: 1.25em;
  font-weight: 500;
  color: white;
}

/*-- stand alone -- used to replace styles for h2 headers in dark themed areas -- */
.dark-header {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  color: white;
}

/*-- stand alone -- used to replace styles for h3 headers in dark themed areas -- */
.dark-header-h3 {
  font-size: 1em;
  font-weight: 500;
  color: white;
}

/*-- stand alone -- used to replace styles for h2 headers in sidebar callouts -- */
.text-style-aside-header {
  font-size: 1.188em;
}

/*-- replaces _racing.scss:84 --*/
.odds-board-horse header {
  display: none;
}

/*-- replaces _racing.scss:85 --*/
.odds-board-item:first-child .odds-board-horse header {
  display: block;
}

/*-- replaces _racing.scss:84 --*/
.odds-board-item:first-child header {
  text-transform: none;
}

/*-- replaces _racing.scss:84 --*/
.odds-board-item header {
  margin: 0 0 5px;
  text-transform: uppercase;
}

/*-- replaces _racing.scss:977 --*/
@media only screen and (min-width: 645px) {
  .odds-board-item:first-child header {
	display: block;
	margin: 0 0 10px;
	padding: 0;
  }
  .odds-board-item:first-child header.text-style-footnote {
	margin: 0 0 20px;
  }
}



/*-- in __racing.scss:~894 -- had to replace all the <i> elements to <span class="odds-type-item"> --*/
.odds-board-odds span.odds-type-item {

}

.odds-board-odds span.odds-type-item {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;

  display: inline-block;
  font-style: normal;
  min-width: 56px;
  padding: 12px 12px;
  text-align: center;
}

.odds-board-odds span.odds-type-item:nth-child(1) {
  -webkit-animation-duration: 1.7s;
  -webkit-animation-name: odds-roll-down;
}

.odds-board-odds span.odds-type-item:nth-child(2) {
  min-width: 0;
  border-left: 1px solid #d9d7d2;
  border-right: 1px solid #d9d7d2;
}

.odds-board-odds span.odds-type-item:nth-child(3) {
  -webkit-animation-duration: 1.7s;
  -webkit-animation-name: odds-roll-up;
}

/*-- New CSS for composition.scss, had to add modifier class supporting three tap buttons --*/
.tap-button-group.-three>a {
  width: 32%;
  margin-right: 2%
}

.tap-button-group.-three>a:first-child {
  border-right: none
}

.tap-button-group.-three>a:last-child {
  margin-right: 0
}

/*-- needed margins on paragraphs in captions. editors where entering empty paragraph tags to achieve the effect  --*/
.caption p {
  margin: 20px 0;
}

/*-- need to center things in a sponsor sidebar --*/
.sidebar-sponsors {
	text-align: center;
}
.sidebar-sponsors header {
	margin: 20px 0;
}
.grid-2 a {
	display:block;
	width: 50%;
	float:left;
}
.grid-2::after {
  clear: both;
  content: "";
  display: table;
}

/*-- to replace the <u> tag --*/
.u {
  text-decoration: underline;
}

/*-- we need a way to visually hide text for callouts that have only images --*/
.visuallyhidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

.header-margins {
  margin-top: 30px;
  margin-bottom: 7px;
  font-weight: 500;
}

/*-- header vareation for the news landing page --*/
.news-header {
	font-family: museo-sans, "Helvetica Neue", sans-serif;
}

/*-- make em tags emphisise text --*/
em {
    font-style: italic;
}

/*-- remove browser default for slick slide focus --*/
.slick-slide:focus {
	outline:none;
}

/*-- adds css/class to replace depreciated strike tag --*/
.strike {
	text-decoration: line-through;
}

/*-- adds style to hr tags for use in place of the .ruler in content --*/
hr {
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.chef-list-item article p {
    margin-bottom: 10px;
}

/*-- Custom Headers (adds responsive logo to the right) -- has been added and committed to styles/scss/_visit.scss for future deploy --*/ 
/*-- commit --> josh 7c543cd2 adds styles for custom therby header -- okay to delete after deployed */
/*-- commit --> josh 32c72fe4 adds custom headers to select pages */
/*-- commit --> josh 5812b51f adds text size tweak to custom headers */

.cover-art-thurby:after,
.cover-art-dawn-at-the-downs:after,
.cover-art-opening-night:after {
  content: "";
  position: absolute;
  top: 10%;
  right: 5%;
  bottom: 10%;
  width: 40%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100% center;
}

.cover-art-thurby:after {
  background-image: url(https://www.kentuckyderby.com/uploads/cover-art/derbyweek/thurby-header-logo-145.png);
}

.cover-art-dawn-at-the-downs:after {
  background-image: url(https://www.kentuckyderby.com/uploads/cover-art/champions-day-header-logo-145.png);
}

.cover-art-champions-day:after {
  background-image: url(https://www.kentuckyderby.com/uploads/cover-art/derbyweek/champions-day-header-logo-145.png);
}


.cover-art-dawn-at-the-downs:after {
  background-image: url(https://www.kentuckyderby.com/uploads/cover-art/derbyweek/dawn-at-the-downs-header-logo-145.png);
}

.cover-art-opening-night:after {
  background-image: url(https://www.kentuckyderby.com/uploads/cover-art/derbyweek/opening-night-header-logo-145.png);
}

.cover-art-expert-picks {
  padding-top: 16vh;
  padding-bottom: 16vh;
}

@media only screen and (min-width: 768px) {
  .cover-art-thurby:after,
  .cover-art-dawn-at-the-downs:after,
  .cover-art-opening-night:after {
    top: 10%;
    right: 50%;
    bottom: 10%;
    width: 100%;
    max-width: 700px;
    transform: translateX(50%);
  }
}

@media only screen and (min-width: 980px) {
  .cover-art-thurby:after,
  .cover-art-dawn-at-the-downs:after,
  .cover-art-opening-night:after {
    max-width: 920px;
  }
}

@media only screen and (min-width: 1200px) {
  .cover-art-thurby:after,
  .cover-art-dawn-at-the-downs:after,
  .cover-art-opening-night:after {
    max-width: 1140px;
    background-position: 91.5% center;
  }
}

/*-- move page title out of the way for small screens (if needed) --*/
.cover-art-opening-night article,
.cover-art-dawn-at-the-downs article {
  width: 50%;
  margin-left: 0;
}

@media only screen and (min-width: 640px) {
  .cover-art-opening-night article,
  .cover-art-dawn-at-the-downs article {
    width: 100%;
    margin-left: auto;
  }
}

/*-- small button text for header and header layout in /party --*/
.section-party .more-link {
  font-size: 1rem;
}

@media only screen and (min-width: 750px) {
  .section-party .derby-week-header-layout>*:nth-child(2) {
	width: 60%;
	text-align: left;
  }
  .section-party .derby-week-header-layout>*:nth-child(3) {
	width: 40%;
	text-align: right;
  }
}

@media only screen and (min-width: 1200px) {
  .section-party .derby-week-header-layout>*:nth-child(1) {
	display: block;
	width: 26%;
	text-align: center;
	padding: 10px 0px;
  }
  .section-party .derby-week-header-layout>*:nth-child(2) {
	width: 46%;
	text-align: center;
	padding: 0;
  }
  .section-party .derby-week-header-layout>*:nth-child(3) {
	width: 28%;
	text-align: center;
	padding: 0;
  }
}

/*-- Polkadot Part Branding Override --*/
.cell-style-polkadot,
.cell-style-polkadot.tint-shaded {
  background: #124637;
}

/*-- Derby Week 2018 --*/
.contender-profile-header .fb-like {
    margin-right: 4px;
}
.tweet-pin-buttons {
    float: left;
    margin-top: 21px;
}
.tweet-pin-buttons iframe, .tweet-pin-buttons span {
    display: inline-block;
    vertical-align: middle;
}
@media only screen and (max-width: 727px) {
    .contender-profile-header .fb-like {
        margin-right: 0;
    }
    .tweet-pin-buttons {
        float: none;
        margin-top: 8px;
        margin-bottom: 15px;
    }
}
a:hover .home-card-image {
  filter: brightness(1.15);
}
.rule-offset {
	margin-top: 3rem;
	margin-bottom: 3rem;
}
@media only screen and (max-width: 600px) {
	.blog-post-header {
		margin-left: 15px;
		margin-right: 15px;
	}
}
.derby-gives-unit {
	background-image: url("/uploads/cover-art/derbyweek/derby-gives-pool-amount-grey.png");
}
.nbc-bug-content .content-bar > * {
	display: inline-block;
}
.event-countdown ._headline {
	text-shadow: 0 5px 20px rgba(0,0,0,0.2)
}


/* Split background layout for form pages, from CDRT site */
.split-background-layout {
   position: relative;
    display: flex;
	flex-direction: column-reverse;
	align-items: stretch;
}
.split-background-layout .image-group {
	padding: 0;
}
.split-background-layout .image-gallery-item {
    width: 100%;
	height: 50vh;
}
@media only screen and (min-width: 1024px) {
    .split-background-layout {
        flex-direction: row;
	}
    .split-background-layout .content-region {
        min-height: 100vh;
        width: 50%
    }
    .split-background-layout .background-region {
        width: 50%;
		height: 100vh;
        overflow: hidden;

		position: sticky;
		top: 0;
    }
	.split-background-layout .image-gallery-item {
        height: 100vh;
	}
}


/* Derby 145 */
.gate-item {
	transform: translateZ(0);
}
.force-align-bottom > * {
	vertical-align: bottom !important;
}

@media screen and (max-width: 600px) {
  .nbc-agenda tr td:nth-child(1) {
  	  font-weight: bold;
	  white-space: normal;
  }
}
@media screen and (max-width: 899px) {
	/* Hide flickering NBC logo until we can fix it fully */
	.event-countdown-parts>div:nth-child(2) {
		display: none;
	}
}

/* Changes to Saddles */
.saddle-16, .gate-item.gate-number-16 {
  color: #FF4E00;
  font-weight: 500;
}
.saddle-18, .gate-item.gate-number-18 {
  color: #FFF200
}
.saddle-19, .gate-item.gate-number-19 {
  color: #FF2C1C;
  font-weight: 500;
}
.saddle-20, .gate-item.gate-number-20 {
  color: #F7EB00
}

/* Responsive Table */
@media screen and (max-width: 600px) {
  table.responsive-table {
    border: 0;
  }

  table.responsive-table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table.responsive-table tr {
    display: block;
    margin-bottom: .625em;
  }
  
  table.responsive-table td {
    display: block;
	padding-left: 15px !important;
    text-align: left !important;
  }
  
  table.responsive-table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

}

@media only screen and (min-width: 728px) {
	.megamenu .bet-now-column a {
		padding: 8px 0;
	}
}

/* replace longines-logo in count down */
.longines-logo {
    background: url(https://www.kentuckyderby.com/white-longines-logo) no-repeat center;
}

@media only screen and (min-width: 900px) {
  .event-countdown-parts.-white .longines-logo {
	  background-image: url(https://www.kentuckyderby.com/white-longines-logo);
  }
}

/* KyDerbyAtHome page shine */
@media only screen and (max-width: 600px) {
  table.KyDerbyAtHome-table {
	  display: table;
	  position: relative;
  }
  .KyDerbyAtHome-table tr {
	  position: relative;
	  display: flex;
	  align-items: flex-start;
	  justify-content: space-between;
	  padding-top: 13px;
	  padding-bottom: 10px;
  }
  .KyDerbyAtHome-table tr td {
	  display: block;
  }
  .KyDerbyAtHome-table tr td:nth-child(1) {
  	  position: absolute;
	  top: 10px;
  }
  .KyDerbyAtHome-table tr td:nth-child(2),
  .KyDerbyAtHome-table tr td:nth-child(3){
	  padding-top: 2em;
	  white-space: normal;
  }
  .KyDerbyAtHome-table tr td:nth-child(2) {
	  flex-basis: 66%;
  }
  .KyDerbyAtHome-table tr td:nth-child(3) {
	  flex-basis: 34%;
  }
  .KyDerbyAtHome-collection-item .h-inset-cell {
	  padding: 10px 0;
  }
}

  .dropdown-control {
    display: inline-block;
	background: #ED174F;
	color: #fff;
	border-radius: 4px;
  }
  .dropdown-control > button {
    display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 14px 24px;
	color: inherit;
  }
  .dropdown-control > button span {
    margin-right: 1.5em;
  }
  .dropdown-control nav a {
    display: block;
	padding: 7px 24px;
	color: #fff;
	text-decoration: none;
  }
  .dropdown-control nav a:hover {
    background: rgba(255,255,255,0.08);
  }
  .dropdown-control > div {
    display: none;
    padding-bottom: 7px;
  }
  .dropdown-control.is-open {
    background: #28202B;
  }
  .dropdown-control.is-open > div {
    display: block;
  }

/* Homepage tweaks */
@media only screen and (min-width: 767px) {
  /* Position the sticky card to the left */
  html .edition-layout-tout { float: left }
}

/* social Media buttons are off just a bit */
.tweet-pin-buttons {
    margin-top: 18px;
}

.share-buttons {
  display: flex;
}

.share-buttons > * {
  margin-right: 5px;
}

.contender-profile-header .share-buttons > * {
	margin-top: 16px;
	margin-bottom: 16px;
}

@media only screen and (min-width: 768px) {
  .contender-profile-header .split-button-group {
	  top: 85px;
  }
}

@media only screen and (min-width: 816px) {
  .contender-profile-header .split-button-group {
	  top: 11px;
  }
}

/* START --- Temp styles while we wait for server caches to come in 12/14/2020 -- */
/* This controlls the search icon in the mobile header */
.main-menu_search {
  display: block;
  width: 40px;
  height: 40px;
  padding: 10px;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media only screen and (min-width: 768px) {
  .main-menu_search {
    top: 10px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  .gm-icon-toggle, .gm-nav {display: none}
}
@media only screen and (min-width: 900px) {
  .main-menu_search {
    display: none;
  }
}
/* END --- Temp styles while we wait for server caches to come in -- */

.odds-board-odds .odds-type-current > em {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  display: inline-block;
  font-style: normal;
  min-width: 56px;
  padding: 12px 12px;
  text-align: center;
}
.odds-board-odds .odds-type-current > em:nth-child(2) {
  min-width: 0;
  border-left: 1px solid #d9d7d2;
  border-right: 1px solid #d9d7d2;
}

/* New layout utilities - 2021 */
.body-inset {
	padding: 1.33rem;
}
.bold-header-layout {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 4rem 1.33rem 2rem;
}
.bold-header-layout > * + * {
	margin-top: 15px;
}
.bold-header-layout h1 {
  	font-family: "museo-sans","Helvetica Neue",sans-serif;
	font-weight: 700;
}
@media screen and (min-width: 960px) {
	.body-inset {
	  padding: 3.5rem 4rem;
	}
	.bold-header-layout {
	  flex-direction: row;
	  align-items: flex-end;
	  justify-content: space-between;
	  padding: 2.5rem 4rem 1.5rem;
	}
	.bold-header-layout > * + * {
	  margin-top: 0;
	}
}
.bold-header-layout.-collapse-bottom {
  border: 0;
  padding-bottom: 0;
}
.title-offset {
  margin-bottom: 1.75rem;
}

/* Quickfix for rendering quirks with odds in the megamenu */
.leaderboard-table td { transform: translateZ(0) }