/* ------------------------------------------------------
   Variables for easy find and replace


---- Event Program buttons

- results table: buttons key

---- HOME EVENT PROGRAM NAVIGATION

---- EVENT TABLES
---  Generic table styles
--- Specific cell styles
-- Results ranking & Program time columns
-- Car logos & Car/attraction photos
-- extra info column, usually last child

---- Home Event Table Expando

---- Event flag object eg upcoming attractions



------------------------------------------------------ */



/* ---- Banner video thumbs ---- */

.main-video-thumb,
.video-thumb {
	margin-bottom: 25.5px;
	position: relative;
	display: block;
	color: #FFF;
}

.main-video-thumb:hover,
.video-thumb:hover,
.main-video-thumb:focus,
.video-thumb:focus,
.main-video-thumb:active,
.video-thumb:active {
	color: #FFF;
}

.main-video-thumb:before,
.video-thumb:before {
	content: '\00a0';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,.35);
	transition: background 230ms ease-in-out;
}

.main-video-thumb:hover:before,
.video-thumb:hover:before {
	background: rgba(0,0,0,.20);
}

.video-thumb--playhead:after {
	content: '\00a0';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url(../images/tv-play-overlay.svg) center center no-repeat;
	background-size: 50px auto;
	transition: background 230ms ease-in-out, opacity 230ms ease-in-out;
	opacity: .8;
}

.video-thumb--playhead:hover:after {
	background-size: 55px auto;
	opacity: 1;
}

.main-video-thumb__text {
	position: absolute;
	top: 40px;
	left: 50px;
	right: 40px;
	text-transform: uppercase;
}

.video-thumb__text {
	position: absolute;
	bottom: 15px;
	left: 20px;
	right: 20px;
	text-transform: uppercase;
}

.main-video-thumb__text__heading {
	color: #f7ff3f;
	margin: 0.8rem 0;
}

@media screen and (min-width: 768px) {
	.video-thumb {
		margin-bottom: 28px;
	}
}

@media screen and (min-width: 1101px) {
	.video-thumb {
		margin-bottom: 40px;
	}
}


/* ---- Race dashboard  ---- */

.section--race-dashboard {
	padding-top: 0px;
	padding-bottom: 25px;
}



/* ---- Event Program buttons ---- */


.icon-button {
	background: #000;
	text-indent: 99999em;
	font-size: 1px;
	color: rgba(0,0,0,0) !important;
	overflow: hidden;
	width: 40px;
	height: 40px;
	display: inline-block;
	border-radius: 40px;
	margin: 0 4px;
	background-repeat: no-repeat;
	background-position: center;
	transition: background 250ms ease;
	vertical-align: bottom;
}


.icon-button:hover {
	background-color: #444;
}

.icon-results {
	background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218.97%22%20height%3D%2226%22%20viewBox%3D%220%200%2018.97%2026%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%20%7B%20fill%3A%20%23fff%3B%20fill-rule%3A%20evenodd%3B%20%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20id%3D%22icon_flag%22%20class%3D%22cls-1%22%20d%3D%22M1.56%204.38a.8.8%200%201%200-1.55.392l5.22%2020.635a.8.8%200%200%200%20.78.6.73.73%200%200%200%20.19-.025.8.8%200%200%200%20.58-.972zm17.38%205.81L16.39.75a.87.87%200%200%200-.87-.743C10.74-.34%207.6%204.433%202.81%204.087c-.38-.048-.62.15-.53.49q1.275%204.72%202.56%209.44a.936.936%200%200%200%20.86.744c4.78.348%207.93-4.425%2012.71-4.078.38.046.62-.15.53-.49zm-3.76-9c.24.87.47%201.737.71%202.606a8.6%208.6%200%200%200-2.84.59c-.23-.87-.47-1.737-.7-2.6a8.62%208.62%200%200%201%202.83-.59zm-9.86%209.736c-.26-.987-.53-1.974-.8-2.96a8.544%208.544%200%200%200%202.98-.65c-.23-.868-.47-1.736-.7-2.6a29.172%2029.172%200%200%200%202.77-1.475c.23.87.47%201.737.7%202.606A28%2028%200%200%201%207.5%207.322c.27.986.54%201.973.8%202.96a8.522%208.522%200%200%201-2.98.648zm3.7%201.993l-.72-2.644a27.592%2027.592%200%200%200%202.75-1.464l.72%202.643a28.518%2028.518%200%200%201-2.75%201.468zm2.05-4.12c-.26-.986-.53-1.973-.8-2.96a26.63%2026.63%200%200%201%202.78-1.454c.27.986.54%201.973.8%202.96a26.832%2026.832%200%200%200-2.78%201.458zm3.51%201.182c-.23-.88-.47-1.762-.71-2.643a8.577%208.577%200%200%201%202.82-.585c.24.88.48%201.762.71%202.643a8.63%208.63%200%200%200-2.82.588z%22%2F%3E%3C%2Fsvg%3E');
}

.icon-info {
	background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228.97%22%20height%3D%2222%22%20viewBox%3D%220%200%208.97%2022%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%20%7B%20fill%3A%20%23fff%3B%20fill-rule%3A%20evenodd%3B%20%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20id%3D%22icon_info%22%20class%3D%22cls-1%22%20d%3D%22M8.42%2020.87q-1.275.546-2.04.83a4.935%204.935%200%200%201-1.76.288%203.342%203.342%200%200%201-2.41-.818%202.748%202.748%200%200%201-.86-2.074%206.858%206.858%200%200%201%20.07-1c.04-.34.11-.722.2-1.152l1.07-4.078c.09-.392.17-.764.24-1.11a5.7%205.7%200%200%200%20.09-.96%201.15%201.15%200%200%200-1.43-1.393%202.754%202.754%200%200%200-.85.137c-.29.1-.54.182-.74.267L.28%208.55c.7-.308%201.37-.572%202-.79a5.512%205.512%200%200%201%201.81-.33%203.266%203.266%200%200%201%202.37.8%202.753%202.753%200%200%201%20.83%202.087c0%20.178-.01.49-.05.936a6.383%206.383%200%200%201-.22%201.23L5.96%2016.55c-.08.326-.16.7-.23%201.117a6.13%206.13%200%200%200-.1.95%201.448%201.448%200%200%200%20.33%201.1%201.763%201.763%200%200%200%201.16.3A3.153%203.153%200%200%200%208%2019.87a5.082%205.082%200%200%200%20.71-.258zM8.23%204.364a2.415%202.415%200%200%201-1.78.747%202.46%202.46%200%200%201-1.8-.746%202.59%202.59%200%200%201%200-3.625%202.443%202.443%200%200%201%201.8-.755A2.4%202.4%200%200%201%208.23.74a2.565%202.565%200%200%201%200%203.624z%22%2F%3E%3C%2Fsvg%3E');
}

.icon-add-to-cal {
	background-color: #58a3e2;
	background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221.82%22%20height%3D%2222%22%20viewBox%3D%220%200%2021.82%2022%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%20%7B%20fill%3A%20%23fff%3B%20fill-rule%3A%20evenodd%3B%20%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20id%3D%22icon_add-to-cal%22%20class%3D%22cls-1%22%20d%3D%22M17.87%2011.524a5.33%205.33%200%200%200-1.37-.18h-.17a5.332%205.332%200%200%200-5.16%205.24v.087a5.5%205.5%200%200%200%20.25%201.635%205.333%205.333%200%201%200%206.45-6.78zM16.5%2020.2a3.526%203.526%200%201%201%203.52-3.525A3.527%203.527%200%200%201%2016.5%2020.2zm.51-5.932h-1.2v1.89h-1.89v1.2h1.89v1.893h1.2v-1.89h1.89v-1.2h-1.89v-1.892zM4.46%204.035a.6.6%200%200%200%20.6-.6V.6a.6.6%200%200%200-.6-.6h-.51a.6.6%200%200%200-.6.6v2.838a.6.6%200%200%200%20.6.6h.51zm9.46%200a.6.6%200%200%200%20.6-.6V.6a.6.6%200%200%200-.6-.6h-.52a.6.6%200%200%200-.6.6v2.838a.6.6%200%200%200%20.6.6h.52zM9.79%2017.793a6.84%206.84%200%200%201-.13-1.29c0-.144.01-.287.02-.43H2.57a1.03%201.03%200%200%201-1.03-1.03V6.785h14.79v3.19c.11-.005.22-.008.34-.008a6.51%206.51%200%200%201%201.2.113V3.348A1.37%201.37%200%200%200%2016.5%201.97h-1.12v1.463a1.466%201.466%200%200%201-1.46%201.462h-.52a1.466%201.466%200%200%201-1.46-1.462V1.97H5.92v1.463a1.46%201.46%200%200%201-1.46%201.462h-.51a1.46%201.46%200%200%201-1.46-1.462V1.97H1.37A1.38%201.38%200%200%200-.01%203.348v13.07a1.38%201.38%200%200%200%201.38%201.376h8.42zM4.84%208a1.365%201.365%200%201%201-1.37%201.365A1.363%201.363%200%200%201%204.84%208zm4.09%200a1.365%201.365%200%201%201-1.36%201.365A1.365%201.365%200%200%201%208.93%208zm4.1%200a1.365%201.365%200%201%201-1.37%201.365A1.363%201.363%200%200%201%2013.03%208zm-4.1%204.128a1.365%201.365%200%201%201-1.36%201.365%201.365%201.365%200%200%201%201.36-1.364zm-4.09%200a1.365%201.365%200%201%201-1.37%201.365%201.363%201.363%200%200%201%201.37-1.364z%22%2F%3E%3C%2Fsvg%3E');
}
.icon-add-to-cal:hover {
	background-color: #263D83;
}
.icon-add-to-cal.disabled,
.icon-add-to-cal.disabled:hover {
	background-color: #BBB;
}


/* BP 3 */
@media screen and (max-width: 767px) {
	.event-program__videos .embed-container {
		margin: 0 0 20px;
	}
}



/* - results table: buttons key - */

.results-table-key {
	font-size: 1.5rem;
	color: #686868;
	padding-top: 15px;
	text-align: right;
	float: right;
}

.results-table-key img {
	vertical-align: middle;
	max-height: 20px;
	margin-left: 4px;
	margin-right: 8px;
	display: inline-block;
}

@media screen and (max-width: 1100px) {
	.results-table-key {
		float: none;
		text-align: left;
	}
}




/* ---- HOME EVENT PROGRAM NAVIGATION ---- */

.event-program-navigation {
	text-align: right;
}

.event-program-navigation .button {
	margin-bottom: 15px;
}


@media screen and (min-width: 767px) {
	.event-program-navigation {
		margin-top: 11px;
	}
}

@media screen and (min-width: 1101px) {
	.event-program-navigation {
		margin-top: 26px;
	}
}



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

	.event-program-navigation {
		text-align: left;
	}
	.event-program-navigation a {
		width: 100%;
	}

	.event-program-navigation .event-program-navigation__program-btn {
		width: 49%;
		float: left;
	}
	.event-program-navigation .event-program-navigation__results-btn {
		width: 49%;
		float: right;
	}
}


@media screen and (min-width: 600px) {
	.event-program-navigation .grid-col:last-child {
		text-align: right;
	}
}
@media screen and (max-width: 500px) {
	.event-program-navigation {
		text-align: right;
	}
	.event-program-navigation__program-btn,
	.event-program-navigation__results-btn {
		display: block;
		width: 100%;
	}
}

/* ---- EVENT TABLES ---- */

/* ---  Generic table styles --- */

.event-table {
	border: 1px solid #d7d7d7;
}

.event-table th,
.event-table td {
    padding: 6px 8px 6px 0;
    vertical-align: top;
    border-left: 0px;
    border-right: 0px;
}

.event-table th:first-child {
    padding-left: 6px;
    padding-right: 6px;
}

.event-table td:first-child {
    padding-left: 6px;
}

.event-table td:last-child {
    padding-right: 15px;
}

.event-table .on td {
    background: #f7ff3f !important;
}

.event-table .button {
    padding: 10px 15px 9px;
    font-size: 1.5rem;
}


@media screen and (max-width: 767px) {
	.event-table .button {
	    padding: 7px 10px 6px;
	    font-size: 1.4rem;
	}
}

@media screen and (max-width: 600px) {
	.event-table .button {
	    padding: 5px 10px 4px;
	    font-size: 1.2rem;
	}
	.event-table td:last-child {
	    padding-right: 10px;
	}
}

@media screen and (max-width: 400px) {
	.event-table {
		font-size: 1.3rem;
		line-height: 1.25;
	}
	.event-table .button {
		display: none;
	}
	.event-table th {
		letter-spacing: -1px;
	}
}

@media screen and (max-width: 330px) {
	.event-table {
		font-size: 1.2rem;
		line-height: 1.25;
	}
}


@media screen and (min-width: 501px) {
	.event-table th,
	.event-table td {
	    padding: 8px 20px 8px 0;
	}
	.event-table th:first-child {
	    padding-left: 10px;
    	padding-right: 10px;
	}
	.event-table td:first-child {
	    padding-left: 10px;
	}
	.event-mobile-button {
		display: none;
	}
}


@media screen and (min-width: 767px) {
	.event-table th,
	.event-table td {
	    padding: 10px 24px 10px 0;
	}
	.event-table th:first-child {
	    padding-left: 12px;
	    padding-right: 12px;
	}
	.event-table td:first-child {
	    padding-left: 12px;
	}
}

/* --- Specific cell styles --- */


/* -- Results ranking & Program time columns -- */

.event-table td.hero-text {
	padding-left: 0;
	padding-right: 10px;
	padding-top: 0;
	border-top: 0px;
	border-bottom: 0px;
}


.event-table .hero-text__wrap {
	font-size: 1.8rem;
	vertical-align: top;
	font-family: 'GinRoundedOblique', sans-serif;
	line-height: 1;
	color: #000;
	text-align: right;
	border-top: 2px solid #000;
	position: relative;
	top: -1px;
	padding-left: 5px;
	padding-right: 2px;
	padding-top: 5px;
}

.event-table .hero-text small {
	font-size: .8em;
	opacity: .6;
}

.event-table tbody tr:first-child .result-pos__rank {
	top: 0;
}

@media screen and (min-width: 451px) {
	.event-table .hero-text {
		padding-right: 20px;

	}
	.event-table .hero-text__wrap {
		padding-left: 10px;
		font-size: 2rem;
	}
	.event-table .hero-text small {
		font-size: .6em;
	}
}
@media screen and (min-width: 501px) {
	.event-table .hero-text__wrap {
		padding-left: 10px;
		font-size: 2.6rem;
	}
	.event-table .hero-text small {
		font-size: .6em;
	}
}

@media screen and (min-width:768px) {
	.event-table .hero-text__wrap {
		font-size: 2.6rem;
	}
	.event-table .hero-text small {
		font-size: .6em;
	}

	.event-table td.hero-text {
		padding-right: 15px;
	}
}

@media screen and (min-width: 1100px) {
	.event-table .hero-text__wrap {
		font-size: 3.1rem;
		padding-top: 2px;
	}
	.event-table td.hero-text {
		padding-right: 20px;
	}
}

/* -- Car logos & Car/attraction photos -- */

.event-table .img  {
	padding-left: 0;
	padding-right: 10px;
	max-width: 70px;
	min-width: 65px;
}

.event-table .car-logo {
	vertical-align: middle;
	padding-left: 0;
	min-width: 30px;
	width: 70px;
	padding-right: 15px;
	padding-top: 2px;
}


.event-table .car-logo img {
	min-width: 20px;
}


@media screen and (max-width: 767px ) {
	.event-table .img {
		padding: 0;
		min-width: 0;
	}

	.event-table .img img {
		display: none;
	}

	.event-table .car-logo {
		width: 45px;
		padding-top: 8px;
		padding-right: 5px;
		vertical-align: top !important;
	}

}


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

	.event-table .car-logo {
		width: 30px;
	}

}



/* -- extra info column, usually last child -- */

.info-col {
	text-align: right;
	min-width: 100px;
}

/* BP 5 - BP 6 */
@media screen and (min-width: 451px) and (max-width: 500px) {
	.event-table--race-program .info-col {
		width: 100px;
	}

	.icon-button:first-child {
		margin-left: 0;
		margin-bottom: 0px;
	}

	.icon-button:last-child {
		margin-right: 0;
		margin-bottom: 0px;
	}
}

/* BP 5 */
@media screen and (max-width: 500px) {
	.event-table .info-col {
		min-width: 0px;
	}
	.event-table .icon-button.icon-info {
		display: none;
	}
	.icon-button {
		margin-bottom: 3px;
	}

}

/* Min BP 5 */
@media screen and (min-width: 501px) {
	.event-mobile-button {
		display: none;
	}
	.event-table--race-program .info-col {
		width: 150px;
	}
	.icon-button:first-child {
		margin-left: 0;
	}
	.icon-button:last-child {
		margin-right: 0;
	}
}


/* Min BP 3 */
@media screen and (min-width: 767px) {
	.info-col {
		text-align: right;
		min-width: 170px;
	}
}


/* ---- Home Event Table Expando  ---- */

.event-table-readmore {
	text-align: center;
}



/* ---- Home Event photos gallery  ---- */


.event-photos {
	margin: 35px 0 0;
}

.event-photos__item {
	margin-bottom: 35px;
}

@media screen and (max-width: 450px) {
	.event-photos-row--2nd {
		display: none;
	}
}

.event-photos-cta {
	text-align: center;
}

/* ---- Event flag object eg upcoming attractions ---- */


.upcoming-attractions {
	margin-bottom: 20px;
}


.upcoming-attractions__heading {
	margin-top: 0;
	margin-bottom: 21px;
}

.event-flag-object {
	border-top: 3px solid #fff;
	border-bottom: 3px solid #fff;
	margin-bottom: 28px;
	display: block;
	-webkit-transition: all 180ms ease-in-out;
	-moz-transition: all 180ms ease-in-out;
	-ms-transition: all 180ms ease-in-out;
	-o-transition: all 180ms ease-in-out;
	transition: all 180ms ease-in-out;
}

.event-flag-object:hover {
	background: rgba(0,0,0,0.06);
	margin-right: -10px;
	padding-right: 10px;
}
.event-flag-object__img {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	float: left;
	height: 100px;
	width: 34.285714286%;
}
.event-flag-object__content {
	float: right;
	padding-right: 5px;
	width: 60%;
	font-size: 1.2rem;
	line-height: 1.2;
	text-transform: uppercase;
	color: #000;
	display: table;
	height: 100px;
}
.event-flag-object__content__vert-center {
	display: table-cell;
	vertical-align: middle;
}
.event-flag-object__heading {
	margin-top: 0;
	margin-bottom: 5px;
	font-size: 1.4rem;
}
.event-flag-object__link-indicator {
	margin: 0;
}
.event-flag-object__link-indicator:after {
	content: '\00a0\003e';
	font-size: 1.6rem;
	line-height: 10px;
	position: relative;
	top: 1px;
}
@media screen and (min-width: 767px) and (max-width: 1100px) {
	.event-flag-object__img {
		width: 23%;
		height: 115px;
	}
	.event-flag-object__content {
		width: 74%;
		height: 115px;
	}
}
@media screen and (min-width: 400px) and (max-width: 767px), screen and (min-width: 1101px) {
	.event-flag-object__heading {
		font-size: 1.6rem;
	}

	.event-flag-object__img {
		height: 115px;
	}
	.event-flag-object__content {
		height: 115px;
	}
}