body {
	margin: 0;
}

#page {
	width: 100%;
	max-width: 1349px;
	margin: 0 auto;
}

#skyscraperLeft {
	position: fixed;
	top: 250px;
	left: calc(((100vw - 1349px) / 2) - 150px);
	display: none;
}

#skyscraperRight {
	position: fixed;
	top: 250px;
	right: calc(((100vw - 1349px) / 2) - 150px);
	display: none;
}

#topBannerFrame {
	width: 100%;
	max-width: 1349px;
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
}

#topBannerFixed {
	width: 100%;
	height: 250px;
	background-color: #eee;
	margin-bottom: 10px;
	max-width: 1349px;
	justify-content: space-between;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
	display: none;
	bottom: 0;
}

#topBannerHandle {
	height: 30px;
	width: 30px;
	font-size: 24px;
	font-weight: 700;
	display: grid;
	align-items: center;
	text-align: center;
	margin-top: -30px;
	margin-left: 98%;
	background-color: #eee;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	cursor: pointer;
}

.topBannerLarge {
	width: 1000px;
	float: left;
}

.topBannerSmall {
	width: 320px;
	text-align: right;
	float: right;
}

/* Smart App Banner */
.customPromoBar {
	position: fixed;
	width: 100%;
	z-index: 100000;
	left: 0;
	bottom: 0;
	background: #fff;
	height: 51px;
	padding: 8px 12px;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
}

.customPromoBar .closeIcon,
.customPromoBar .drfLogoImage {
	position: absolute;
}

.customPromoBar .drfLogoImage {
	left: 12px;
	width: 35px;
	height: 35px;
	top: 8px;
}

.customPromoBar .drfLogoImage img {
	width: 35px;
	height: 35px;
}

.customPromoBar .closeIcon {
	right: 5px;
	top: 8px;
	cursor: pointer;
	border: 0;
	padding: 0;
}

.customPromoBar a {
	display: inline-block;
	margin-left: 45px;
	font-size: 15px;
	line-height: 35px;
	color: #06c;
	font-family: "TitilliumWeb-Regular", sans-serif;
}

.getPicks {
	background: #fff;
	border: 1px solid #0066cc;
	border-radius: 4px;
	padding: 6px 23px;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 12px;
	height: 34px;
	line-height: 34px;
	margin-bottom: 7px;
}

.passbackContainer {
	width: 100%;
	text-align: center;
}

.passbackHide {
	display: none;
}

.passbackFooter {
	margin-left: 140px;
	margin-top: 10px;
}

.img30 {
	height: 30px;
}

.img40 {
	height: 40px;
}

select option:disabled {
	color: #ccc;
}

#invalidEmail {
	color: #e8212c;
}

.securityDetail {
	font-size: 12px;
	font-weight: 600;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	background-color: #ffffff;
	color: #000000;
	width: 100%;
	margin-bottom: 10px;
}

.securityDetail a {
	text-decoration: none;
	color: #000000;
}

.securityText {
	width: 100%;
	font-weight: 400;
	text-align: center;
}

.securityText a {
	text-decoration: none;
	color: #005bf0;
}

.modalBottomLeft {
	float: left;
	padding: 10px;
	width: 35%;
}

.modalBottomCenter {
	float: left;
	padding: 10px;
	width: 30%;
}

.modalBottomRight {
	float: right;
	padding: 10px;
}

.bottom-size {
	font-size: 14px;
	padding-right: 5px;
}

.nav-text {
	display: flex;
	align-items: center;
}

.drfCommonFooter {
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	text-align: left;
	padding: 12px;
	width: 100%;
	max-width: 1080px;
	margin: 0 0 0 120px;
}

.footerTop {
	border-top: 1px solid #ccc;
	padding: 10px 0;
}

.footerTopLeft {
	float: left;
	width: 755px;
}

.footerSearch {
	border-bottom: 1px solid #ccc;
	margin-bottom: 12px;
	margin-right: 12px;
	padding-bottom: 6px;
}

.fRow {
	margin-left: -15px;
	margin-right: -15px;
}

.fCol {
	padding-left: 15px;
	padding-right: 15px;
	float: left;
	box-sizing: border-box;
}

.footerLogo {
	width: 145px;
	padding-right: 15px;
	float: left;
	box-sizing: border-box;
	display: block;
	cursor: pointer;
}

.footerLogo img {
	width: 145px;
}

.gcseCol {
	width: 75%;
}

.align-items-center {
	align-items: center;
}

.footerSearchTitle {
	float: left;
	font-size: 15px;
	line-height: 40px;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	font-weight: 700;
	width: 160px;
}

.footerSearchInput {
	float: right;
	width: 430px;
}

.floatingWrap {
	width: 100%;
	position: relative;
}

.subscribeBox a.btnBlue {
	background: #0066cc;
	color: #ffffff;
	font-size: 16px;
	line-height: 48px;
	font-family: "Titillium Web", sans-serif;
	font-weight: 700;
	box-shadow: 0 4px 6px -3px #0066cc;
	border: 1px solid #0066cc;
	display: block;
	border-radius: 4px;
	height: 48px;
	box-sizing: border-box;
	text-align: center;
}

.floatingInput {
	-webkit-font-smoothing: antialiased;
	border: 0;
	padding: 0 75px 0 12px;
	margin: 20px 0 6px;
	height: 40px !important;
	font-size: 15px;
	line-height: 20px;
	color: #000;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	width: 100%;
	outline: 0;
}

#nlTitle {
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	font-style: italic;
	font-size: 24px;
	font-weight: 600;
	padding: 10px;
}

.iconButton {
	position: absolute;
	right: 5px;
	top: 6px;
	height: 28px;
	width: 40px;
	background: #0066cc;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.iconButton svg {
	width: 24px;
	height: 24px;
	vertical-align: middle;
}

.footerLeftColumn {
	margin-bottom: 10px;
	float: left;
	width: 180px;
}

.footerLeftNavTitle {
	margin-top: 2px;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 700;
	float: left;
}

.footerLeftNavSub {
	margin-bottom: 5px;
}

.footerLeftNavSub a:hover {
	color: #0066cc;
}

.footerTopRight {
	border-left: 1px solid #ccc;
	float: left;
	padding-left: 15px;
	width: 30%;
	box-sizing: border-box;
}

.footerRightNavClick {
	font-size: 15px;
	font-weight: 700;
	margin-top: 25px;
}

.footerRightNavClick a:hover {
	color: #0066cc;
}

#signupPopup svg {
	transform: rotate(180deg);
}

.subscriptionDetails {
	margin-bottom: 10px;
	margin-top: 10px;
}

.subscriptionDetails a {
	color: #0066cc;
}

.subscriptionDetails a:hover {
	color: #000000;
}

.footerBottom {
	border-top: 1px solid #ccc;
	padding: 10px 0;
}

.footerBottomLeft {
	float: left;
	width: 500px;
}

.footerNavClick {
	margin-right: 18px;
	margin-bottom: 10px;
	font-size: 13px;
	float: left;
}

.footerNavClick a:hover {
	color: #0066cc;
}

.footerBottomCenter {
	float: left;
	width: 240px;
}

.footerBottomRight {
	float: left;
	margin-left: 20px;
	width: 200px;
}

.storeIcons {
	width: 240px;
}

.leftFive {
	margin-left: 8px;
}

.socialLabel {
	font-size: 13px;
	line-height: 16px;
	color: #000;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	letter-spacing: 0;
	margin-bottom: 6px;
}

.footerSocialLinks {
	text-align: left;
	padding-left: 12px;
}

.d-flex {
	display: flex;
}

.justify-content-end {
	justify-content: flex-end;
}

.redTitle {
	color: red;
}

.redError {
	font-size: 11px;
	color: #f30707;
	display: none;
}

#drfNavigation {
	width: 100%;
	background-color: #ffffff;
	position: relative;
	z-index: 9999;
}

.drfNavigationFixed {
	position: fixed !important;
	top: 0;
}

#nav_btn {
	display: block;
	float: left;
	padding: 20px 8px 20px 8px;
	cursor: pointer;
}

#nav_btn span,
#nav_btn span::before,
#nav_btn span::after {
	width: 20px;
	height: 2px;
	float: left;
	display: block;
	background: #666;
	position: relative;
	text-indent: -9000px;
}

#nav_btn span {
	margin: 8px 0;
}

#nav_btn span::before,
#nav_btn span::after {
	content: "";
	position: absolute;
}

#nav_btn span::before {
	top: -8px;
}

#nav_btn span::after {
	bottom: -8px;
}

#nav_btn span,
#nav_btn span:before,
#nav_btn span:after {
	-webkit-transition: all 100ms ease-in-out;
	-moz-transition: all 100ms ease-in-out;
	-ms-transition: all 100ms ease-in-out;
	-o-transition: all 100ms ease-in-out;
	transition: all 100ms ease-in-out;
}

#nav_btn.active span {
	background-color: transparent;
}

#nav_btn.active span::before,
#nav_btn.active span::after {
	top: 0;
}

#nav_btn.active span:before {
	background: #666;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

#nav_btn.active span::after {
	background: #666;
	transform: translateY(-10px) rotate(-45deg);
	-webkit-transform: translateY(-10px) rotate(-45deg);
	top: 10px;
}

.hamburgerDrop {
	width: 186px;
	height: 400px;
	margin-left: -20px;
	margin-top: 35px;
	position: fixed;
	display: none;
	background-color: #ffffff;
	border: 1px solid #cccccc;
}

.headerTopLogo {
	height: 60px;
	float: left;
}

.headerTopLogo img {
	height: 60px;
}

#pageOverlayWrap {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 99998;
	position: fixed;
	display: none;
}

#pageOverlay {
	top: 50px;
	width: 470px;
	height: 800px;
	background: none;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding-bottom: 24px;
	z-index: 99999;
	display: none;
}

#pageOverlayFrame {
	height: 750px;
	background: none;
}

#pageOverlayClose {
	position: absolute;
	right: 10px;
	top: 10px;
	font-size: 24px;
	line-height: 30px;
	font-weight: 800;
	text-align: center;
	cursor: pointer;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	background: none;
}

.headerClose {
	background: #fff;
	width: 24px;
	height: 24px;
	margin-top: 10px;
	padding-right: 20px;
	float: right;
	position: relative;
	cursor: pointer;
}

.headerClose:after {
	content: "";
	height: 24px;
	border-left: 1px solid #333;
	position: absolute;
	transform: rotate(45deg);
	left: 23px;
}

.headerClose:before {
	content: "";
	height: 24px;
	border-left: 1px solid #333;
	position: absolute;
	transform: rotate(-45deg);
	left: 23px;
}

#modalOverlay {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 9997;
	position: fixed;
	display: none;
}

#railOverlay {
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	background-color: #ffffff;
	z-index: 998;
	position: fixed;
	display: none;
}

.hamburgerActive {
	overflow: hidden;
}

.modalContent {
	top: 0;
	overflow: auto;
	background-color: #ffffff;
	position: fixed;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	display: none;
	z-index: 99999;
	height: 100%;
}

#modalRegister {
	top: 61px;
	max-width: 700px;
}

#modalRegisterHeader {
	height: 50px;
	width: 100%;
}

#registerText {
	float: left;
	width: 100%;
	font-size: 24px;
	line-height: 50px;
	font-family: "Alfa Slab One", cursive;
	font-weight: 400;
	color: #19345e;
}

.modalLogin {
	top: 100px;
	width: 624px;
	height: 400px;
	background-color: #ffffff;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	display: none;
	z-index: 99999;
}

.modalX {
	float: right;
	margin-right: 10px;
	cursor: pointer;
	font-size: 18px;
}

.modalColumn {
	width: 250px;
	min-height: 340px;
	text-align: left;
	margin: 10px 10px 10px 20px;
	float: left;
}

.modalTopNav {
	font-size: 22px;
	line-height: 36px;
	font-family: "Alfa Slab One", cursive;
	font-weight: 400;
	margin-bottom: 15px;
}

.modalSubNav {
	display: block;
}

.modalListNav {
	width: 100%;
}

.modalListNav a {
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	width: 100%;
	display: inline-block;
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
}

.modalListNav a:hover {
	color: #005bf0;
}

.close {
	background: #fff;
	width: 24px;
	height: 24px;
	margin-top: 10px;
	padding-right: 20px;
	float: right;
	position: relative;
	cursor: pointer;
}

.close:after {
	content: "";
	height: 24px;
	border-left: 1px solid #333;
	position: absolute;
	transform: rotate(45deg);
	left: 23px;
}

.close:before {
	content: "";
	height: 24px;
	border-left: 1px solid #333;
	position: absolute;
	transform: rotate(-45deg);
	left: 23px;
}

.clearFloat {
	clear: both;
}

ul {
	list-style-type: none;
}

a {
	text-decoration: none;
	color: #000000;
}

.hidden {
	display: none;
}

.navContainer {
	width: 100%;
	max-width: 1349px;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
}

#mainNavContainer {
	border-bottom: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	width: 100%;
	height: 60px;
	display: flex;
}

#mainNav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #f6f6f6;
	flex: 1;
}

.mainNav {
	height: 60px;
	line-height: 60px;
	margin-left: 10px;
	margin-right: 10px;
	float: left;
}

.navIcon {
	height: 25px;
	width: 25px;
	margin-right: 5px;
	vertical-align: middle;
	cursor: pointer;
}

.mainNav a {
	padding-left: 5px;
	padding-right: 5px;
	font-size: 15px;
	line-height: 17px;
	color: #333;
	font-weight: 600;
}

.mainNav a:hover {
	color: #2161cc;
}

.mainNav a.active {
	color: #2161cc;
}

.topNavLine {
	width: 1px;
	height: 32px;
	background: #666;
	display: inline-block;
	margin: 0 20px 0 31px;
}

#mainNav .JoinDrfBets.btnRed {
	margin: 0 16px 0 36px;
}

.loginNavDiv {
	font-family: "Titillium Web", sans-serif;
	font-weight: 600;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	outline: 0;
	width: 82px;
	margin-right: 12px;
}

.btnRed {
	color: #fff;
	background: #ec1c24;
	box-shadow: 0 4px 4px -3px rgba(236, 28, 36, 0.5);
	height: 40px;
}

.btnRed:hover {
	background: #ce2029;
	box-shadow: 0 4px 8px -2px rgba(206, 32, 41, 0.7);
}

.btnRed:hover,
.btnRed:focus {
	color: #fff;
}

.logInBtn {
	font-size: 15px;
	line-height: 20px;
	color: #0066cc;
	cursor: pointer;
	font-family: "Titillium Web", sans-serif;
	font-weight: 700;
}

.logInBtn:hover {
	color: #19345e;
}

#noLoginNavDiv {
	margin-left: 0;
	margin-right: 10px;
	cursor: pointer;
	float: left;
}

.loginTop svg {
	display: inline-block;
	vertical-align: middle;
	margin-right: 12px;
}

#secondaryNavWrap {
	text-align: center;
}

#subNavContainer {
	width: 100%;
	height: 38px;
	-webkit-box-shadow: 0 2px 2px #cccccc;
	-moz-box-shadow: 0 2px 2px #cccccc;
	box-shadow: 0 2px 2px #cccccc;
}

#subNav {
	display: inline-block;
	height: 38px;
	margin: 0 auto;
	max-width: 100%;
	overflow-x: auto;
	white-space: nowrap;
}

#subNavHeader {
	height: 53px;
}

.subNav {
	height: 38px;
	line-height: 38px;
	color: #ffffff;
	float: left;
	display: block;
}

.subNav a {
	color: #ffffff;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 600;
	padding-left: 10px;
	padding-right: 10px;
}

.subNavSelected {
	background-color: #ffffff;
}

.subNavBlack {
	color: #000000;
}

.subNavHeaderText {
	font-size: 28px;
	line-height: 53px;
	font-family: "Alfa Slab One", cursive;
	font-weight: 400;
	margin-top: 5px;
	margin-bottom: 10px;
}

.thirdNav {
	display: none;
	text-align: left;
	position: fixed;
	background-color: #cccccc;
	border: solid 1px #666;
	font-size: 13px;
}

.thirdNav a {
	color: #ffffff !important;
	font-size: 13px;
	font-weight: 400;
}

.userInitials {
	margin-right: 10px;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	border: solid 1px #666666;
	color: #666;
	line-height: 40px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}

.user-arrow-down {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #666;
	margin-left: 3px;
	margin-bottom: 3px;
	display: inline-block;
}

.user-arrow-down-active {
	border-top: 0;
	border-bottom: 5px solid #666;
}

.userProfileDropdown {
	width: 190px;
	margin-top: 14px;
	margin-right: 1.5px;
	margin-left: -116px;
	padding-left: 0;
	position: absolute;
	background-color: #ffffff;
	display: none;
}

.userProfileDropdownItem {
	width: 190px;
	height: 40px;
	line-height: 40px;
}

.userProfileDropdownItem a {
	display: inline-block;
	width: 180px;
	height: 100%;
	padding-left: 10px;
	color: #000000;
	text-align: left;
	font-size: 14px;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	font-weight: 400;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	text-decoration: none;
}

.userProfileDropdownItem a:hover {
	background: #eceff5;
	color: #005bf0;
}

.iframeContainer {
	width: 100%;
	max-width: 1349px;
	padding-top: 65px;
	margin: 0 auto;
}

#iframeContainer {
	width: calc(100% - 275px);
	height: 700px;
	text-align: center;
	background-color: #cccccc;
	border: solid 1px #000000;
	float: left;
	padding-top: 10px;
}

.loginIframeLeft {
	background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
		url("https://static.drf.com/sstf/prod/images/loginHorse.jpg");
	width: 312px;
	margin-top: -35px;
	height: 401px;
	float: left;
}

.loginIframeRight {
	width: 312px;
	float: left;
}

#iframeRegButton {
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	font-size: 14px;
	height: 40px;
	width: 244px;
	margin-top: 10px;
	border-radius: 4px;
	background-color: #ec1c24;
	color: #ffffff;
	line-height: 40px;
	cursor: pointer;
	position: absolute;
	bottom: 33px;
	left: 30px;
}

#iframeRegButton:hover {
	background-color: #990000;
}

.iframeWhiteOne {
	color: #ffffff;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: 600;
	width: 100%;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 20px;
}

.iframeWhiteTwo {
	color: #ffffff;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 600;
	width: 100%;
	text-align: center;
	margin-bottom: 40px;
}

.iframeWhiteThree {
	color: #ffffff;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 22px;
	font-weight: 400;
	width: 100%;
	text-align: center;
}

.mobileRegister {
	display: none;
}

.arrowRight {
	float: right;
	margin-right: 15px;
	margin-top: 10px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.arrowRight.active {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}

/*LEFT NAVIGATION CSS RULES*/

#leftNavContainer {
	display: block;
	width: 265px;
	position: relative;
	float: left;
	box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.16);
	background-color: #ffffff;
	z-index: 9;
}

.leftNavContainerFixed {
	position: fixed !important;
	top: 170px;
}

#leftNavToggleContainer {
	display: block;
	margin-top: 12px;
	margin-left: 50px;
	cursor: pointer;
}

#leftNavTop {
	display: none;
}

.drfCalendar {
	height: 30px;
	margin-left: 10px;
	margin-top: 4px;
}

.leftNavHeader {
	font-size: 21px;
	line-height: 32px;
	color: #000;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	font-weight: 700;
	letter-spacing: -0.2px;
	padding: 6px 0 0;
}

.leftNavTabs {
	width: 255px;
	padding-top: 10px;
	padding-left: 10px;
	background: #ffffff;
}

.leftNavTab {
	width: 120px;
	height: 30px;
	border: solid 1px #0066cc;
	background: #ffffff;
	color: #0066cc;
	float: left;
	text-align: center;
	line-height: 30px;
	font-size: 12px;
	cursor: pointer;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.leftNavTabArea {
	display: none;
	margin-top: 5px;
	background-color: #ffffff;
}

.leftNavTabSelected {
	background: #0066cc;
	color: #ffffff;
}

.boxHeader {
	width: 100%;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	font-weight: 600;
	margin-top: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}

#wageringTabArea {
	-ms-overflow-style: none;
	overflow: auto;
}

#wageringTabArea::-webkit-scrollbar {
	display: none;
}

#handicappingTabArea {
	-ms-overflow-style: none;
	overflow: auto;
}

#handicappingTabArea::-webkit-scrollbar {
	display: none;
}

.wageringBox {
	width: 233px;
	border: solid 1px #0066cc;
	background-color: #ffffff;
	margin-bottom: 5px;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	padding: 5px;
	cursor: pointer;
}

.wageringLeft {
	float: left;
	width: 25px;
	margin-top: 10px;
	height: 20px;
}

.wageringCenter {
	float: left;
	width: 130px;
	height: 45px;
	margin-top: 5px;
}

.wageringRight {
	float: right;
	text-align: center;
	height: 26px;
	width: 60px;
	margin-right: 5px;
}

.wageringBottom {
	float: left;
	width: 210px;
	margin-left: 3px;
	margin-bottom: 3px;
	font-size: 11px;
	line-height: 13px;
	word-wrap: break-word;
	font-weight: 600;
}

.wageringTrackId {
	font-size: 21px;
	line-height: 21px;
	font-weight: 600;
}

.wageringTrackName {
	font-size: 11px;
	line-height: 13px;
	font-weight: 600;
}

.mtpText {
	margin-top: 3px;
	font-size: 18px;
	line-height: 20px;
	font-weight: 600;
	float: right;
}

.mtpSmallText {
	font-size: 14px;
	line-height: 16px;
	font-weight: 400;
	float: right;
}

.mtpClock {
	height: 20px;
	width: 20px;
	border-radius: 12px;
	border: solid 2px #000000;
	float: left;
	margin-right: 5px;
}

.mtpHands {
	height: 6px;
	width: 6px;
	float: left;
	border-left: solid 1px #000000;
	border-bottom: solid 1px #000000;
	margin-top: 7px;
	margin-left: -19px;
}

.handicappingBox {
	width: 233px;
	height: 49px;
	font-size: 12px;
	border: solid 1px #0066cc;
	background-color: #ffffff;
	margin-bottom: 8px;
	font-family: "Titillium Web", Arial, Helvetica, sans-serif;
	padding: 4px;
}

/* Breeders Cup Background UI: Start  */
.handicappingBox.BCItem {
	background: #efeef3;
	border: 1px solid #3b256b;
	position: relative;
	margin-top: 16px;
}

.BCLabel {
	display: none;
}

.handicappingBox.BCItem .BCLabel {
	display: block;
	height: 16px;
	padding: 0 4px;
	border-radius: 4px;
	background-color: #ec1c24;
	font-family: "Titillium Web", sans-serif;
	font-weight: bold;
	font-size: 11px;
	line-height: 16px;
	color: #fff;
	position: absolute;
	top: -12px;
	left: 2px;
}

/* Breeders Cup background UI: End */

.handicappingLeft {
	float: left;
	width: 25px;
	margin-top: 10px;
	height: 20px;
}

.handicappingCenter {
	float: left;
	width: 70px;
	height: 20px;
	margin-top: 5px;
}

.handicappingRight {
	float: left;
	height: 26px;
	width: 135px;
	margin-top: 6px;
}

.handicappingBottom {
	margin-left: 25px;
	font-size: 11px;
	font-weight: 600;
	float: left;
}

.handicappingTrackId {
	font-size: 21px;
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
	line-height: 22px;
	letter-spacing: normal;
	text-align: left;
	color: #000000;
}

.ppBox {
	width: 26px;
	height: 26px;
	font-weight: 600;
	line-height: 13px;
	border: solid 1px #95989a;
	background-color: #ffffff;
	margin-left: 5px;
	font-size: 11px;
	text-align: center;
	display: inline-block;
	float: right;
}

.starBox {
	cursor: pointer;
	width: 20px;
	height: 40px;
	float: left;
}

j {
	border: solid #666;
	border-width: 0 1px 1px 0;
	display: inline-block;
	padding: 6px;
}

.userProfileDropdown {
	z-index: 1;
}

.JoinDrfBets.btnRed {
	width: 86px;
	height: 40px;
	margin: 0 4px 0 12px;
	font-size: 13px;
	line-height: 40px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	align-items: center;
	justify-content: center;
	padding: 0;
	text-transform: none;
	outline: 0;
	border-radius: 4px;
	box-sizing: border-box;
	display: none;
}

.JoinDrfBets svg {
	margin: 0 0 0 4px;
	width: 46px;
	height: 11px;
}

.JoinDrfBets.BetsEligible {
	display: flex;
}

#noLoginNavDiv .JoinDrfBets.BetsEligible {
	display: none;
}

.userProfileDropdown {
	right: -1px;
}

#mainNavContainer {
	position: relative;
}

.userInitials {
	margin-right: 4px;
}

.loginTop .userInitials {
	width: 38px;
	height: 38px;
	line-height: 40px;
	margin-right: 2px;
}

.loginTop svg {
	margin-right: 8px;
}

@media only screen and (max-width: 1699px) {
	#skyscraperLeft {
		display: none;
	}

	#skyscraperRight {
		display: none;
	}
}

@media only screen and (max-width: 1280px) {
	.topBannerSmall {
		display: none;
		float: none;
		margin: 0 auto;
	}

	.topBannerLarge {
		float: none;
		margin: 0 auto;
	}

	#topBannerFrame {
		justify-content: center;
	}
}

@media only screen and (max-width: 1300px) {
	.mainNav {
		margin-left: 5px;
		margin-right: 5px;
	}

	.arrowRightFooter {
		display: none;
	}
}

@media only screen and (max-width: 1200px) {
	.JoinDrfBets.btnRed {
		margin: 0 16px 0 10px;
	}

	.JoinDrfBets svg {
		margin: 0;
		position: relative;
		top: 1px;
	}

	.loginTop svg {
		margin-right: 2px;
		width: 30px;
		height: 30px;
	}

	.loginTop .userInitials {
		width: 30px;
		height: 30px;
		line-height: 30px;
		margin-right: 2px;
	}

	.user-arrow-down {
		margin-bottom: 0;
	}

	.userProfileDropdown {
		margin-left: 0;
		margin-right: 0;
		right: 0;
	}

	.loginTop {
		margin-top: 4px;
	}

	.JoinDrfBets.btnRed {
		margin-left: auto;
		display: none;
	}

	#noLoginNavDiv {
		width: 185px;
		margin-top: 5px;
	}

	#noLoginNavDiv .JoinDrfBets.BetsEligible.btnRed {
		float: left;
		display: block;
	}

	#noLoginNavDiv .loginTop {
		float: right;
	}

	.userProfileDropdown {
		top: 40px;
	}

	.logInBtn {
		position: absolute;
		margin-right: 0;
		right: 103px;
		top: 15px;
	}

	.loginNavDiv {
		right: 10px;
		top: 5px;
	}

	.logInBtn,
	.loginNavDiv {
		position: absolute;
		margin-right: 0;
	}

	.footerSearchInput {
		float: left;
		width: 100%;
	}

	.drfCommonFooter {
		margin: 0;
		padding: 0;
	}

	.passbackFooter {
		margin-left: 0;
	}

	.footerBottomLeft {
		width: 40%;
	}

	.footerBottomRight {
		width: 290px;
	}

	.footerTopLeft {
		width: 70%;
	}

	.footerLeftColumn {
		width: 22%;
	}

	k {
		border: solid #000;
		border-width: 0 2px 2px 0;
		display: inline-block;
		padding: 5px;
	}

	kLink {
		border: solid #06c;
		border-width: 0 2px 2px 0;
		display: inline-block;
		padding: 5px;
	}

	.passbackDesktop {
		display: none;
	}

	#leftNavLogo {
		display: none;
	}

	#nav_btn {
		padding: 15px 8px 20px 8px;
	}

	.userInitials {
		height: 30px;
		width: 30px;
		line-height: 30px;
	}

	#leftNavToggleContainer {
		position: fixed;
		top: 10px;
		left: 0;
	}

	#leftNavToggle {
		display: block;
		margin-left: 38px;
		margin-top: 12px;
		cursor: pointer;
	}

	#leftNavTop {
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #cccccc;
		display: block;
		position: relative;
	}

	.leftNavClock {
		height: 24px;
		width: 24px;
		background: url("https://static.drf.com/sstf/prod/images/calendar.png");
		background-size: contain;
		float: left;
	}

	#leftNavContainer {
		top: 0;
		position: fixed;
		left: 0;
		margin-top: 0;
		background: none;
		border: none;
		box-shadow: none;
		display: none;
		z-index: 99997;
		/* changed the value as it was overlapping login pop up */
	}

	#leftNavCancel {
		margin-top: 15px;
	}

	#iframeContainer {
		width: 100%;
	}

	.iframeContainer {
		width: 100%;
		max-width: 1024px;
		margin: 0 auto;
	}

	#mainNav {
		display: block;
	}

	#nav_btn {
		position: absolute;
	}

	.headerTopLogo {
		float: left;
	}

	.subNav a {
		color: #ffffff !important;
		border-right: solid 1px rgba(255, 255, 255, 0.2);
	}

	.subNav {
		position: relative;
		display: inline-block;
	}

	.subNavSelected {
		position: relative;
		display: inline-block;
		background: none;
		height: 35px;
		cursor: pointer;
		border-bottom: 5px solid #ffffff;
	}

	.thirdNav {
		width: 220px;
	}

	#mainNav {
		height: 50px;
		position: relative;
	}

	#mainNavContainer {
		height: 50px;
	}

	#noLoginNavDiv {
		float: right;
		margin-right: 20px;
	}

	.headerTopLogo {
		height: 50px;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 92px;
	}

	.headerTopLogo img {
		height: 50px;
	}

	.topNavLine {
		display: none !important;
	}

	.mainNav {
		display: none;
	}

	.modalContent {
		width: 100%;
		top: 50px;
		left: 0;
		margin: 0;
		position: fixed;
		overflow: auto;
	}

	#modalOverlay {
		top: 61px;
	}

	#railOverlay {
		top: 61px;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
	}

	#modalLogo {
		display: none;
	}

	#modalCancel {
		display: none;
	}

	.modalTopNav {
		margin-bottom: 10px;
		margin-left: 15px;
		margin-top: 10px;
		cursor: pointer;
	}

	.modalSubNav {
		margin-left: 25px;
		margin-bottom: 10px;
		text-align: left;
		display: none;
	}

	.modalColumn,
	.userProfileDropdown {
		top: 40px;
		width: 100%;
		margin: 0;
		min-height: 0;
		border-top: 1px solid #cccccc;
	}

	.arrowRight {
		float: right;
		margin-right: 15px;
		margin-top: 10px;
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}

	.arrowRight.active {
		transform: rotate(-135deg);
		-webkit-transform: rotate(-135deg);
	}

	.arrowRightRace {
		margin: 5px;
	}

	.arrowNavRight {
		float: right;
		margin-top: 15px;
		margin-right: 40px;
		border: solid #fff;
		border-width: 0 1px 1px 0;
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		cursor: pointer;
	}

	.arrowNavLeft {
		float: left;
		margin-top: 15px;
		margin-left: 40px;
		border: solid #fff;
		border-width: 0 1px 1px 0;
		transform: rotate(135deg);
		-webkit-transform: rotate(135deg);
		cursor: pointer;
	}

	#arrowNavLeft {
		height: 40px;
		width: 60px;
		float: left;
		cursor: pointer;
		display: none;
	}

	#arrowNavRight {
		height: 40px;
		width: 60px;
		float: right;
		cursor: pointer;
		display: none;
	}
}

@media only screen and (max-width: 979px) {
	.topBannerSmall {
		display: block;
	}

	.topBannerLarge {
		display: none;
	}

	#topBannerHandle {
		margin-left: 92%;
	}

	.arrowRightFooter {
		float: right;
		margin-right: 15px;
		margin-top: 4px;
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		display: block;
	}

	.arrowRightFooter.active {
		transform: rotate(-135deg);
		-webkit-transform: rotate(-135deg);
	}

	.footerSearchTitle {
		margin-bottom: 10px;
	}

	.footerSearchInput {
		float: left;
		width: 100%;
	}

	.floatingWrap {
		margin-bottom: 10px;
	}

	.footerLeftNavTop {
		width: 100%;
		height: 35px;
	}

	.footerTopLeft {
		width: 100%;
		border: none;
	}

	.footerLeftNavSub {
		float: left;
		width: 50%;
		padding: 0 0 12px;
	}

	.passbackFooter {
		margin-left: 0;
	}

	.footerTopRight {
		margin: 0;
		border: none;
		padding-left: 10px;
		width: 95%;
	}

	.subscriptionDetails {
		width: 95%;
	}

	#footerNavLeft {
		margin-left: 10px;
		width: 95%;
	}

	.footerLeftColumn {
		width: 100%;
		border-bottom: 1px solid #cccccc;
	}

	#footerBottomNav {
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-top: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
	}

	.modal-content {
		position: relative;
		max-height: 500px;
		overflow: scroll;
	}

	.footerSearch {
		margin-left: 10px;
		width: 95%;
	}

	.footerLogo {
		width: 100%;
	}

	.footerLogo img {
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 10px;
	}

	.footerTop {
		border: none;
	}

	.footerLogoCol {
		width: 95%;
		text-align: center;
		margin: 0 auto;
		padding-bottom: 10px;
	}

	.footerNavClick {
		width: 40%;
		margin-top: 10px;
	}

	.footerLeftNavContent {
		display: none;
	}

	.footerBottom {
		border: none;
		margin-bottom: 20px;
	}

	.footerBottomLeft {
		padding-left: 10px;
		width: 95%;
	}

	.footerSocialLinks {
		width: 200px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.storeIcons {
		width: 240px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 15px;
	}

	.footerBottomCenter {
		padding-left: 10px;
		width: 95%;
	}

	.footerBottomRight {
		padding-left: 10px;
		margin-left: 0;
		width: 95%;
	}

	.footerCopyright {
		width: 100%;
		text-align: center;
		margin: 10px 0;
	}
}

@media only screen and (max-width: 850px) and (orientation: landscape) {
	.hamburgerActive .modalContent {
		height: calc(100% - 60px);
	}

	.hamburgerActive #railOverlay {
		z-index: 9999;
	}

	.modal-content {
		position: relative;
		max-height: 300px;
		overflow: scroll;
	}
}

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

	#noLoginNavDiv .JoinDrfBets.btnRed,
	.JoinDrfBets.btnRed {
		width: 64px;
		height: 32px;
		margin: 4px 8px 0 auto;
		font-size: 11px;
		line-height: 12px;
		box-sizing: border-box;
		padding-top: 3px;
		display: none;
	}

	.JoinDrfBets svg {
		margin: 3px auto 0;
		width: 41px;
		height: 9px;
		display: block;
	}

	#noLoginNavDiv .loginTop {
		float: right;
		padding-right: 12px;
	}

	#noLoginNavDiv .JoinDrfBets.BetsEligible {
		display: block;
	}

	#noLoginNavDiv {
		width: 132px;
		margin-right: 0;
	}

	.BetsEligible .loginTop {
		margin-top: 4px;
	}
}

@media only screen and (max-width: 768px) {
	.logInBtn {
		font-size: 13px;
		line-height: 32px;
		right: 84px;
		top: 8px;
	}

	.loginNavDiv {
		width: 67px;
		height: 32px;
		line-height: 32px;
		font-size: 13px;
		top: 9px;
	}

	.securityDetail {
		font-size: 11px;
	}

	#modalOverlay {
		/* background-color: #ffffff;  removed this as color of overlay is white  which should be black*/
		z-index: 9997;
	}

	#railOverlay {
		background-color: #ffffff;
	}

	.wageringBox {
		height: 41px;
		width: 343px;
	}

	.wageringLeft {
		width: 30px;
	}

	.wageringCenter {
		width: 190px;
	}

	.wageringRight {
		height: 30px;
		width: 100px;
		margin-right: 20px;
		margin-top: 0;
	}

	.wageringBottom {
		display: none;
	}

	.handicappingBox {
		width: 343px;
	}

	.handicappingLeft {
		width: 30px;
	}

	.handicappingCenter {
		width: 170px;
	}

	.handicappingRight {
		margin-top: 5px;
	}

	.handicappingBottom {
		margin-left: 30px;
	}

	.starBox {
		height: 40px;
		width: 30px;
	}

	#leftNavContainer {
		background: #ffffff;
		width: 100%;
	}

	#leftNavLogo {
		display: block;
	}

	.leftNavTabs {
		width: 360px;
	}

	.leftNavTab {
		width: 176px;
	}

	.loginIframeLeft {
		display: none;
	}

	.modalContent {
		width: 100%;
	}

	.modalLogin {
		width: 320px;
		height: 450px;
	}

	.mobileRegister {
		font-family: "Titillium Web", Arial, Helvetica, sans-serif;
		font-size: 13px;
		display: block;
		color: #666;
		font-weight: 600;
		margin-bottom: 20px;
		margin-left: 35px;
		text-align: left;
		cursor: pointer;
	}

	.registerRed {
		text-decoration: underline;
		color: #ec1c24;
	}

	body.iosDevice .mobileRegister {
		margin-top: -20px;
	}

	.hamburgerActive .modalContent {
		height: calc(100% - 60px);
		/*60px being the height of header */
	}
}

@media screen and (min-width: 1025px) {
	.subNav a {
		height: 38px;
		display: inline-block;
	}

	.subNav:not(.subNavSelected):hover {
		border-bottom: 3px solid #ffffff;
		box-sizing: border-box;
	}

	.subNav.subNavSelected a {
		color: #19345e;
	}
}

@media screen and (min-width: 1201px) {
	.subNav a {
		height: 38px;
		display: inline-block;
	}

	.subNav:hover {
		background-color: #fff;
		border-bottom: none;
		box-sizing: content-box;
	}

	.subNav:hover a {
		color: #19345e !important;
		font-weight: 600;
	}

	.subNav.subNavSelected a {
		color: #19345e;
	}

	.linksParentElement {
		margin: 0 25px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1 0 auto;
		padding: 0;
	}

	.linksParentElement .mainNav {
		flex-grow: 1;
		display: flex;
		align-items: center;
		margin: 0 !important;
	}

	.linksParentElement .mainNav>a {
		width: 100%;
		justify-content: center;
		display: flex;
		align-items: center;
	}

	#mainNav .logInBtn {
		margin-right: 12px;
	}
}

/*Set up the media queries so if a user wants to print the page they can*/
@media only print {
	#container {
		margin: 0 auto;
		padding: 10px;
		width: 98%;
	}

	#mainContainer {
		/*Since it gets hard set at the element level by the menu code, we need the important for it to take effect on print*/
		padding-top: 0 !important;
	}

	/*don't print the ads, nav, or footer links (leave the footer copyright though)*/
	#logoHeader,
	#leftNavContainer,
	#drfNavigation,
	.footerMenu {
		display: none;
	}
}

@media only screen and (max-width: 1199px) and (orientation: landscape) {
	#drfNavigation {
		position: static;
	}

	#leftNavToggleContainer {
		position: static;
	}

	#leftNavToggle {
		position: absolute;
	}

	#nav_btn {
		position: absolute;
	}

	#mainContainer {
		padding-top: 0 !important;
	}

	.hamburgerActive #drfNavigation,
	.hamburgerActive #leftNavToggle {
		position: fixed;
	}

	.hamburgerActive #leftNavToggle {
		z-index: 9999;
	}
}

@media (max-width: 374px) {
	#noLoginNavDiv .loginTop {
		float: right;
		padding-right: 4px;
	}

	#noLoginNavDiv {
		width: 124px;
	}
}