/* HTML5 ✰ Boilerplate */
@-ms-viewport {width: device-width;}
::-moz-selection {background: #009FDF; color: #fff; text-shadow: none; border: 2px solid #009FDF;}
::selection {background: #009FDF; color: #fff; text-shadow: none; border: 2px solid #009FDF;}
a {color: #009FDF; text-decoration: underline;}
a:visited, a:hover {color: #009FDF; text-decoration: none;}
a:focus {outline: 0;}
a:hover, a:active {outline: 0;}
body {background: #fff url(/public/img/homeBacker.gif) bottom center repeat-x; color: #333; font-size: 16px; font-family: arial, helvetica, sans-serif; padding: 0 !important; margin: 0 !important;}
h1, h2, h3, h4{margin: 0; padding: 0; font-weight: 600; font-family: "atrament-web", sans-serif; letter-spacing: -1px;}
.home h2{text-transform: uppercase;font-size: 45px;}
.internal h2{font-size: 60px !important; padding: 40px 0 0 0;}
.internal h3{color: #333;}
.internal h4{color: #aaa;}
.centered{text-align: center;}
.navbar-toggler {color: rgba(255,255,255,1) !important; border-color: rgba(255,255,255,.4) !important; padding: 5px; border-radius: 0;}
.navbar-toggler-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='flat' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;}
/* -----------------------------------------------------------------------------------------------------------------------------------------------
Author: Mike Ortega ---- Creative Director at DICHOTOME ---- www.dichoto.me
----------------------------------------------------------------------------------------------------------------------------------------------- */
/* -- begin primary styles ---------------------------------------------------------------------------------------------------------------------*/
#topWrapper {background: #fff !important;margin: 0; padding: 3px 0 !important;}
#topBar {height: auto !important;}
#topBar strong{display: block; height: auto; font-size: 14px; font-weight: bold; color: #333; text-transform: uppercase; font-family: "atrament-web", sans-serif; margin: 10px 14px; letter-spacing: 3px;}
.rtFloat{float: right !important; display: block;}
#navWrapper {background: #e00067;}
.navbar{background-color: #e00067 !important;}
.container-fluid, .p-2, .navbar,.nav-item, #mainNav ul, #mainNav li {padding: 0 !important;}
.oaklawn{position: absolute; display: block; top: 90px; left: 6px; z-index: 2000; width: 188px; height: 25px; background: url(/public/img/oaklawnHdr.svg) no-repeat top left; background-size: cover;}
h1 .navbar-brand {height: 75px; width: 188px; margin: 10px !important; display: block; text-indent: -9999px; background: transparent url(/public/img/riverfest_logo_2018.svg) center center no-repeat;}
#mainNav li ul.secondlevel{position: absolute; width: 9em; left: -9999px; z-index: 1000; white-space: nowrap; border: 3px solid #e00067; border-top: none; border-left: none; }
#mainNav li:hover ul.secondlevel{left: auto; transform: translateY(-25px) translateX(0px);}
#mainNav{color: #002857; font-weight: 600; font-size: 24px; font-family: "atrament-web", sans-serif; text-align: center;}
#mainNav li{border-top: 1px solid rgba(255,255,255,0.3); padding: 5px !important;}
#mainNav li.nav-item a{background: #e00067; color: #002857;display: block; text-decoration: none; margin: 0; padding: 15px 10px; -webkit-transition: background .2s;-moz-transition: background .2s; transition: background .2s;}
#mainNav li.nav-item-sub{list-style-type: none !important;}
#mainNav li.nav-item-sub a{background: #ddd; padding: 0 !important; font-size: 18px;}
#mainNav li ul.secondlevel-mob{margin: 0 0 15px 0;}
#mainNav li.nav-item-mob{list-style-type: none !important; border: none;}
#mainNav li.nav-item-mob a{background: #e00067; color: #fff; padding: 0 !important; font-size: 18px;}
#mainNav li.nav-item-mob a:hover {background: #e00067; color:#fff}
#mainNav li.nav-item-mob a.active {background: #e00067; color: #fff;}
#mainNav li.nav-item-mob a.active:hover {background: #e00067; color:#fff;}
#dateWrapper{display: block; position: absolute; z-index: 50; left: 50%; top: 45%; transform: translate(-50%, -45%); text-indent: -9999px; background: url(/public/img/date.png) center center no-repeat; width: 100%; height: 300px; background-size: contain;}
.tixBtn{color: #fff !important; text-decoration: none; display: block; padding: 5px 30px; position: absolute; z-index: 100; left: 50%; top: 85%; transform: translate(-50%, -85%);background: #e00067; border: 2px solid #fff; text-align: center; border-radius: 28px; font-weight: 600; font-size: 28px; font-family: "atrament-web", sans-serif;}
.tixBtn:hover{text-decoration: none; background: #009FDF; -webkit-transition: background .4s;-moz-transition: background .4s; transition: background .4s;}
.tixBtn2{text-decoration: none;position: absolute; z-index: 500; color: #fff !important; display: block; width: 94%; text-align: center; margin: -25px 10px 10px 10px; padding: 5px 20px; background: #e00067; border: 2px solid #fff; border-radius: 24px; font-weight: 600; font-size: 24px; font-family: "atrament-web", sans-serif;}
.tixBtn2:hover{text-decoration: none; background: #009FDF; -webkit-transition: background .4s;-moz-transition: background .4s; transition: background .4s;}
.tixBtn3{color: #fff !important; text-decoration: none; display: block; padding: 5px 30px;background: #e00067; border: 2px solid #fff; text-align: center; border-radius: 28px; font-weight: 600; font-size: 16px; font-family: "atrament-web", sans-serif;}
.tixBtn3:hover{text-decoration: none; background: #009FDF; -webkit-transition: background .4s;-moz-transition: background .4s; transition: background .4s;}
#rfSocial {display: block; margin: 0 !important; padding: 0; height: 20px; float: right;}
#rfSocial li{display: inline-block; float: left; margin: 0 0 0 25px; padding: 0; list-style-type: none; text-indent: 0; width: 20px; height: 20px; background: #aaa;}
#rfSocial li a{display: block; margin: 0; padding: 0;text-indent: 0; width: 20px; height: 20px; text-indent: -9999px;}
#performerSocial {display: block; position: relative; margin: 15px 0 25px 0 !important; padding: 0; height: 40px;}
#performerSocial li{display: inline-block; float: left; margin: 0 25px 0 0; padding: 0; list-style-type: none; text-indent: 0; width: 24px; height: 24px; background: #aaa;}
#performerSocial li a{display: block; margin: 0; padding: 0;text-indent: 0; width: 24px; height: 24px; text-indent: -9999px;}
.facebook a{background: transparent url(/public/img/facebook.png) top left no-repeat; background-size: cover;}
.twitter a{background: transparent url(/public/img/twitter.png) top left no-repeat; background-size: cover;}
.instagram a{background: transparent url(/public/img/instagram.png) top left no-repeat; background-size: cover;}
.youtube a{background: transparent url(/public/img/youtube.png) top left no-repeat; background-size: cover;}
.internalBody{margin: 25px 0 60px 0;}
#bgVid{display:block; height: auto; width: 100%; padding: 0 !important; margin: 0 !important;}
#vidWrapper {position: relative; background: #888; height: 100%; overflow: hidden;}
#bandWrapper{height: auto; background: #fff url(/public/img/bandbacker.jpg) bottom center no-repeat; background-size: cover;}
#bandWrapperWater{min-height: 200px;padding: 1px 0 120px 0 !important; background: transparent url(/public/img/waterBack.png) bottom center no-repeat;}
#tixWrapperWater{min-height: 200px;padding: 1px 0 120px 0 !important; background: transparent url(/public/img/waterBack2.png) bottom right no-repeat;}
#internalWater{padding: 0 0 120px 0 !important; background: transparent url(/public/img/waterBack.png) bottom center no-repeat;}
#tixWrapper{height: auto; padding: 0 !important;color: #fff;background: #009fdf;}
#lineupPage {background: transparent url(/public/img/bandbacker.jpg) bottom center no-repeat; background-size: cover;}
img.h2image{display: inline-block; margin: -43px 0 0 6px; width: 23px; height: 35px;}
#serveWrapper{background: #002857; padding: 0 0 60px 0 !important; color: #fff; font-size: 13px;}
#serveWrapper hr{background: rgba(255,255,255,.1); margin: 60px 0 !important; color: #fff;}
#serveWrapper li{list-style: disc; margin: 13px 0 0 -25px; text-indent: none}
#footerWrapper{background: #666; padding: 30px 0 0 0 !important; color: #fff; margin: 0 !important;}
.internal #footerWrapper{background: #009fdf; padding: 30px 0 0 0 !important; margin: 0 !important color: #fff;}
#footerWrapper p{white-space: nowrap; font-size: 12px;}
#footerWrapper a{color: #fff;}
#slideshow{width: 100%; height: 200px !important; overflow: hidden; background: #dedede}
#slideshow img{position: absolute; margin: 0; margin-left: 50%; transform: translateX(-50%); width: auto; height: 200px !important; overflow: hidden;}
#sponsorWrapper img{width: 95%; height: auto; margin: 3em 0;}
#sponsorWrapper div.row{text-align: center;}
#rfSocialBottom {display: block; margin: 0 !important; padding: 0; height: 20px;}
#rfSocialBottom li{display: block; float: left; margin: 10px 25px 0 0; padding: 0; list-style-type: none; width: 40px; height: 30px; background: #666; background-size: cover !important;}
#rfSocialBottom li a{display: block; margin: 0; padding: 0;text-indent: 0; border: 1px solid #fff; width: 40px; height: 40px; text-indent: -9999px; background-size: cover !important}
#tixLayout{text-align: center;}
#tixLayout img{height: 350px; width: auto; margin-top: 60px;}
#bandlineupWrapper{font-family: "atrament-web", sans-serif; font-weight: 600; margin: 20px 0 40px 0; letter-spacing: -1px;}
#bandlineupWrapper div{text-align: center; white-space: nowrap;font-size: 38px;}
.f48px a{font-size: 140%;}
.f45px a{font-size: 136%;}
.f42px a{font-size: 124%;}
.f39px a{font-size: 116%;}
.f37px a{font-size: 111%;}
.f36px a{font-size: 108%;}
.f33px a{font-size: 100%;}
.f30px a{font-size: 90%;}
.f26px a{font-size: 80%;}
.andMore {color: #999; padding-top: 30px; font-size: 80%;}
.redBand a{color: #AA182C; text-decoration: none;}
.blueBand a{color: #AA182C; text-decoration: none;}
/* -- responsive media queries ------------------------------------------------------------------------------------------------------------------------- */
/* Extra small devices (portrait phones, less than 576px) have no media query since this is the default in Bootstrap */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
#slideshow{width: 100%; height: auto !important; overflow: hidden; background: #dedede}
#slideshow img{position: static; margin: 0; transform: translateX(0%); width: 100%; height: auto !important;}
#serveWrapper{font-size: 16px;}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
h1 .navbar-brand {background: transparent url(/public/img/riverfest_logo_2018.png) center center no-repeat;}
.oaklawn{top: 93px;left: -3px; background: url(/public/img/oaklawnHdr.png) no-repeat top left; background-size: cover;}
#topBar strong{margin-left: 0;}
h1 .navbar-brand {margin-left: 0 !important;}
#mainNav li{border: none; padding: 0!important;}
#mainNav li.nav-item a{padding:34px 10px !important;}
#mainNav li.active a{background: #fff; color: #bb0056; -webkit-transition: none;-moz-transition: none; transition: none;}
#mainNav li.active:hover a{background: #fff; color:#bb0056; -webkit-transition: none;-moz-transition: none; transition: none;}7
#mainNav li.nav-item a:hover {background: #bb0056; color:#fff;}
#mainNav li.nav-item a.active{background: #fff; color: #bb0056 !important;}
#mainNav li.nav-item a.active:hover{background: #fff; color:#bb0056 !important;}
#mainNav li.nav-item a span {display: block; float: right; font-size: 12px; margin: 10px 0 0 5px;}
#mainNav li.nav-item-sub a{padding:10px !important; text-align: left; width:auto; color:#002857 !important;}
#mainNav li.nav-item-sub a:hover {background: #fff; color:#002857 !important;}
#mainNav li.nav-item-sub a.active {background: #ddd; color: #002857;}
#mainNav li.nav-item-sub a.active:hover {background: #fff; color:#002857;}
#mainNav li:hover a.nav-link{background: #bb0056 !important; color: #fff;}
#mainNav li:hover a.active{background: #fff !important; color: #002857;}
#mainNav li.nav-item-sub a.active{background: #ddd !important; color: #002857 !important;}
#mainNav li.nav-item-sub a.active:hover{background: #fff !important; color: #002857 !important;}
#sponsorWrapper img{width: 80%; height: auto; margin: 3em 3em 0 1em;}
#serveWrapper{font-size: 13px;}
#tixWrapperWater{padding: 1px 0 160px 0 !important;}
.leftFoot{float: left; font-size: 14px !important;}
.rightFoot{float: right; font-size: 14px !important;}
#tixLayout img{height: 400px;}
.bandCell{padding: 0 43px 0 30px;}
.bullet{background: transparent url(/public/img/bullet.png) right center no-repeat;}
.redBand a{color: #AA182C; text-decoration: none;}
.blueBand a{color: #002857; text-decoration: none;}
.andMore{color: #999; padding-top: 0px; font-size: 100%;}
#bandlineupWrapper div{text-align: left;}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
#mainNav li.nav-item a{padding:34px 20px !important;}
#mainNav li.nav-item-sub a{padding:10px !important; text-align: left;}
#serveWrapper{font-size: 16px;}
#bandlineupWrapper div{font-size: 46px;}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
#mainNav li.nav-item a{padding:34px 35px !important;}
#mainNav li.nav-item-sub a{padding:10px !important; text-align: left;}
#tixLayout img{height: 500px;}
#bandlineupWrapper div{font-size: 55px;}
}
/* Extra large devices (xlarge desktops, 1400px and up) */
@media (min-width: 1400px) {
.tixBtn{left: 50%; top: 80% !important; transform: translate(-50%, -80%) !important;}
#dateWrapper{left: 50%; top: 45%; transform: translate(-50%, -45%);}
}
/* Extra large devices (xxlarge desktops, 1600px and up) */
@media (min-width: 1600px) {
.tixBtn{left: 50%; top: 65% !important; transform: translate(-50%, -65%) !important;}
#dateWrapper{left: 50%; top: 35%; transform: translate(-50%, -35%);}
}