/* ========================================================================== Responsive CSS ========================================================================== */ /* * Table of Contents * 1.0 - Normalize + Gfonts * 2.0 - Globals * 3.0 - Typography * 4.0 - Elements + Fluxx Framework * 5.0 - Headers + Navigation * 5.1 - Slash Header * 5.2 - Standard Header * 5.3 - Drop Down Menus * 6.0 - Billboard / Carousel * 7.0 - Homepage Modules * 7.1 - Newsletter * 7.2 - Blog Updates * 7.6 - General Info Module * 8.0 - Footer * 8.1 - Social Connect * 8.2 - Twitter Feed * 8.3 - SPJA Conventions * 9.0 - Page Layout * 9.1 - Sidebar * 10.0 - Registration * 11.0 - Mobile UI * 12.0 - Scrollbars * 13.0 - Gravity Forms */ /* ========================================================================== Custom Breakpoint @1320px ========================================================================== */ @media screen and (max-width: 1320px){ /* 5.0 Headers + Navigation */ .headernav #headerLeft, .headernav #headerRight{width: 41% !important;} } /* ========================================================================== Custom Breakpoint @1179px ========================================================================== */ @media screen and (max-width: 1179px){ /* 5.0 Headers + Navigation */ .headernav .navrow > li > a, .headernav .navrow > li > a{font-size: 16px !important;padding-left: 8px !important;padding-right: 8px !important;/* width: 75px; */} #registerFloat{display: none;} .sectionTitle.fixed{font-size: 24px !important} /* 7.0 Homepage Modules */ .animeHero{display: none;} /* 10.0 Registration */ #ticketOptions .ticketOption .ticketName{padding: 3em} } /* ========================================================================== Custom Breakpoint @1508px ========================================================================== */ @media screen and (max-width: 1508px){ #pageHeader.standard { background-size: inherit; } } /* ========================================================================== Custom Breakpoint @1120px ========================================================================== */ @media screen and (max-width: 1120px){ /* 5.0 Headers + Navigation */ .headernav #headerLeft, .headernav #headerRight{width: 50% !important; background-color: #1d2025 !important; background-size: 200% 95px !important; background-position-x: center !important } #logoBar{background: transparent ; z-index: 1000000; position: fixed ; pointer-events: none} .navrow, .headernav #headerLeft .topbar{/* padding-right: 127px; */text-align: -webkit-center;} .navrow, .headernav #headerRight .topbar{/* padding-left: 100px; */text-align: center;} #slashMenuRight{padding: 0px 0 0 108px !important;} /* 7.6 General Info Module */ #generalInfo .inner{width: 100%;} /* 9.0 Page Layout */ #pageContent.standard-layout{width: 100%; clear: both; float: none;} #pageContentWrap #sidebar{width: 100%; clear: both; float: none; max-width: none; margin-top: 0 !important} #pageContent .half{width: 100% !important; clear: both; float: none; padding: 0 !important; margin: 0 !important} } /* ========================================================================== Custom Breakpoint @1000px - Devices: Tablets - Notes: ========================================================================== */ @media screen and (max-width: 1000px){ /* 4.0 - Elements + Fluxx Framework */ .half{clear: both;width: 100%;} .inner{width: 90%;} /* 5.0 Headers + Navigation */ /* 5.3 Drop Down Menus */ .headernav .dropdown-block{ width: 800px; height: 400px; display: block; position: fixed; top: 95px !important; left: 50%; margin-left: -400px; background: #fdfdfd; text-align: left; display: none; } .headernav .dropdown-block.simple-drop{position: absolute !important; top: 5px !important; left: 0px !important; margin-left: 0px;} .navrow, .headernav #headerLeft .topbar{padding-right: 70px} .navrow, .headernav #headerRight .topbar{padding-left: 70px} .navrow > li > a, .navrow > li > a{font-size: 15px !important} .navrow > li, .navrow > li{margin: 0} #registerli{margin-right: 1% !important} #registerLink{width: 100px;height: 44px !important; background-size: 100% auto !important; margin-top: 11px; margin-right: 0px !important} /* 6.0 - Billboard / Carousel */ #billboard .slideContent h1{font-size: 60px} /* 7.2 Blog Updates */ #blogUpdates{height: auto; background-size: cover; } /* 8.2 - Twitter Feed */ #twitter-feed{display: none} /* 10.0 Registration */ #ticketOptions .ticketOption .ticketName{padding: 3em 2em;} #ticketOptions .ticketOption .ticketName .animfloat{display: none} #reg-anim-right, #reg-anim-left{width: 25%; height: auto;} #moredet-axgirl{display: none;} .constrainer{width: 100% !important} } /* ========================================================================== Switches to Mobile UI - Devices: Tablets + Mobile - Notes: UI goes Mobile. ========================================================================== */ @media screen and (max-width: 866px){ /* Misc */ .us_floating{display: none !important} /* 3.0 - Typography */ h1{font-size: 22px !important;margin: 1em 0;} h2{font-size: 36px !important;} h3{font-size: 28px !important;} h4{font-size: 24px !important;} h5{font-size: 20px !important;} h6{font-size: 16px !important;} /* 4.0 Elements + Framework */ .mobile-reveal{display: block} /* 5.0 Headers + Navigation */ #headerLeft, #headerRight{display: none !important} #logoBar{text-align: center; height: 60px; background: #1d2025; display: block !important; pointer-events: all !important} #logoBar a img{max-height: 100%;width: auto;height: 45px !important;} #logoBar a{pointer-events: all} #logo2{ /* margin-top: -38px; */ max-height: 186px; max-width: 350px; } #stdlogo{display: none} #search-button{display: block;} #searchBar input{-webkit-appearance: none; border-radius: 0px; margin: 0; } /* 6.0 - Billboard / Carousel */ #billboard .slideContent h1{font-size: 40px !important} .rsImg,.rsContent, .rsContainer, .rsOverflow, .royalSlider{min-height: 550px !important} .slideContent .hero{max-width: 100%; height: auto} #billboard .slideContent {width: 90%; margin-left: -45%;} #billboard, #new-royalslider-1, #new-royalslider-1 .rsOverflow, #new-royalslider-1 .rsContainer, #new-royalslider-1 .rsContent{height: 87.5vh !important; max-height: 800px !important} #billboard .rsMainSlideImage{height: 105vh !important; width: auto !important; margin-top: 0 !important; min-width: 100% !important} #billboard .slideContent .ribbontext{font-size: 11px} #playTrailer{-webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8)} /* 7.1 - Newsletter */ #newsletter{height: auto;padding: 1em 0 1em 0;text-align: center;} .newsletterTxt{width:100%; clear: both; float: none; background-position: 89% top !important; text-align: left; background-size: auto 100%} #newsletterForm{width: 100%; float: none !important; clear: both; height: 70px !important; position: relative; top: -20px;} #newsletter .inner{width: 90%} /* 7.2 - Blog Updates */ .posttitle strong{font-size: 13px;} /* 7.6 - General Info Module */ #generalInfo{padding-bottom: 0px !important} #generalInfoModule{margin: 4em auto 0 auto;} #theVenue .venue-inner{width: 95%} #generalInfoModule #generalInfo_tabbedNav ul li a{font-size: 15px; padding: 0 1em} #generalInfo_tabbedContent .optionexcerpt img{display: none !important} #generalInfo_tabbedContent .option-fullcol .optionexcerpt{width: 60%} #generalInfoModule, #generalInfoModule #generalInfo_tabbedNav{border-radius: 0px !important} .faqspolicies-block{width: 90%; margin: 0 auto} /* 8.0 - Footer */ .spjalogo{display: none} /* 8.1 - Social Connect */ #socialIcons ul li{width: 10%; margin-right: 3px;} #socialIcons ul li img{width: 100%; height: auto} /* 8.3 - SPJA Conventions */ #spjaCons{display: none;} /* 9.0 Page Layout */ #pageHeader.standard .pageTitle{margin-top: 45px; font-size: 36px !important} #pageContent.standard-layout{padding: 1em 0} #pageHeader{background-size: initial !important;/* height: 200px !important; */} #pageWrap .tabbedNav{padding: 10px 0 !important;} #pageWrap .tabbedNav ul li{width: 49%; text-align: center !important} #pageWrap .tabbedNav ul li:first-child a{padding-left: 2em !important;} #pageWrap .tabbedNav ul li a{ font-size: 14px !important; line-height: 16px !important; border-radius: 5px; padding: 1em !important; display: block; margin: .18em 0; } #pageWrap .tabbedNav ul li:first-child a{padding-left: 1em !important} .tabbedNav .inner{width: 96% !important} .toggle-title{background-position-x: 94% !important} #pageHeader.default-bg{background-position-y: top !important;padding-top: 75px;} /* 10.0 Registration */ #ticketOptions .ticketOption .ticketName .ticket-description{width: 100%; font-size: 15px;} #ticketOptions .ticketOption .ticketName{padding: 2em} #ticketOptions .ticketOption .ticketFeatures ul{padding: 3.25em 1em 0 2em; font-size: 14px; width: auto} #ticketOptions .ticketOption .ticketName .animfloat, #ticketOptions .ticketOption .ticketFeatures .moreticket-details{display: none;} #ticketOptions .ticketOption .ticketName, #ticketOptions .ticketOption .ticketFeatures{width: 50%; float: left;} #ticketOptions .ticketOption .ticketPrice {width: 100%; clear: both; float: none; min-height: 0px; padding: 2em 0; } #ticketOptions .ticketOption .ticketPrice .ticket-price{font-size: 42px; position: relative; top: 10px; line-height: 57px; margin-right: .5em; display: inline;} #ticketOptions .ticketOption .ticketPrice .ticket-na{margin-top: 7px;} #registrationHeader{margin-top: 60px} #pageHeader.standard{background-size: cover;height: 200px;} /* 13.0 Gravity Forms */ .gform_wrapper input, .gform_wrapper select, .gform_wrapper textarea{width: 100% !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .gform_wrapper .button{width: 100% !important; max-width: 100% } } /* END: @media screen and (max-width: 866px) */ /* ========================================================================== Mobile Phones < 480px - Devices: Mobile Phones - Notes: ========================================================================== */ @media screen and (max-width: 480px){ /* 6.0 - Billboard / Carousel */ #billboard .slideContent .ribbontext{font-size: 10px} #playTrailer{margin-top: .5em; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); transform: scale(0.5)} #billboard .slideContent{ -webkit-transform: scale(.8); -moz-transform: scale(.8); transform: scale(.8); } /* 7.2 - Blog Updates */ #blogUpdates .half{padding: 0em;} #blogUpdates .half h6{text-align: center} .miniBlogRoll .blogpost{padding: 1em -0.5em;max-width: 100%;overflow: hidden;} .miniBlogRoll .blogpost .postdate{position: static} .theLatest .latestPostThumb {float: none; max-width: none; width: 100%;border-radius: 5px;overflow: hidden; display: none} .theLatest .latestPostContent{padding-left: 0px; width: 100%} /* 7.1 - Newsletter */ #newsletterForm input[type="submit"]{right: 10%} /* 7.6 - General Info Module */ #generalInfoModule #generalInfo_tabbedNav ul li{padding: 0; display: block; } #generalInfoModule #generalInfo_tabbedNav ul li a{padding: 0; display: block; line-height: 3em} #theVenue{padding: 2em 0; height: auto} #theVenue .third{width: 100%; clear: both; float: none; padding: 0px; text-align: center} #theVenue .venue-label{line-height: 1em; text-align: center} #theVenue .venue-address{padding-top: 30px;} #theVenue .venue-directions{padding-top: 40px;} #generalInfoModule .option-fullcol{padding: 2em;} #generalInfoModule .option-fullcol .btn{position: static; float: none; clear: both; width: 100%; display: block; box-sizing: border-box} #generalInfo_tabbedContent .option-fullcol .optionexcerpt{width: 100%; margin-bottom: 1em} /* 8.0 - Footer */ #footerBase{/* padding-bottom: 60px; */} /* 8.1 - Social Connect */ #socialConnect{min-height: none; padding-top: 5em} #socialFeeds{margin-top: 69px; height: 244px;} #instagram-feed .label{margin-top: 38px;} /* 9.0 Page Layout */ #pageHeader.standard{background-size: cover;height: 200px;} .toggle-title{background-position-x: 90% !important} /* 10.0 Registration */ #registrationHeader{margin-top: 60px;} #registrationHeader .slimPreTitle{margin-top: 70px; font-size: 28px;} #regOptions{width: 100%; border: none; border-radius: none;} #registrationHeader{height: 470px;} #registrationHeader #reg-anim-left, #registrationHeader #reg-anim-right{display: none} .notification-bar {width: 100%; height: auto;line-height: 1em; padding: 1.5em; box-sizing: border-box; font-size: 16px;} .notification-bar .button{width: 100%; margin: 15px 0 0 0 ; padding: 0; display: block;} #regOptions select{text-indent: 2em; color: #777} #ticketOptions .ticketOption .ticketName{width: 100%; min-height: 0px; float: none; display: block; padding: 2em; position: relative} #ticketOptions .ticketOption .ticketName .ticket-description{font-size: 15px; opacity: 0.75; width: auto} #ticketOptions .ticketOption .ticketFeatures{width: 100%; float: none; min-height: 0px !important; } #ticketOptions .ticketOption .ticketFeatures ul{padding: 1em; font-size: 13px; width: 84%; opacity: 0.6} #ticketOptions .ticketOption .ticketPrice{width: 100%; float: none; min-height: 0px; padding: 1em;} #ticketOptions .ticketOption .ticketPrice .ticket-price{font-size: 36px; position: relative; top: 10px; line-height: 57px; margin-right: .5em; display: inline;} #ticketOptions .ticketOption .ticketPrice .ticket-na{margin: 0; padding: 1em 0} #ticketOptions{padding-bottom: 0px;} #eventBrite{width: 90px; height: auto; opacity: 0.75; margin-top: 25px} /* 11.0 Mobile UI */ #registerSticky{display: block} } /* ========================================================================== Specifics ========================================================================== */ @media screen and (min-width: 1600px){ #billboard .slideContent{ -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } @media screen and (min-width: 1920px){ #billboard .slideContent{ -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } @media only screen and (min-device-width: 300px) and (max-device-width: 900px) and (orientation: landscape){ #billboard .slideContent{-webkit-transform: scale(0.5); -moz-transform: scale(0.5); transform: scale(0.5)} #billboard, #new-royalslider-1, #new-royalslider-1 .rsOverflow, #new-royalslider-1 .rsContainer, #new-royalslider-1 .rsContent{height: 100vh !important; max-height: 800px !important} #billboard .rsMainSlideImage{height: 105vh !important; width: auto !important; margin-top: 0 !important; min-width: 100% !important} } @media screen and (min-width: 867px){ #billboard, #new-royalslider-1, #new-royalslider-1 .rsOverflow, #new-royalslider-1 .rsContainer, #new-royalslider-1 .rsContent{height: 100vh !important; max-height: none !important} #billboard .rsMainSlideImage{height: 105vh !important; width: auto !important; margin-top: 0 !important; min-width: 100% !important} } @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2){ #billboard .slideContent{ -webkit-transform: scale(0.4) !important; -moz-transform: scale(0.4) !important; transform: scale(0.4) !important; } } /* ========================================================================== Mobile Optimizations ~ ========================================================================== */ @media screen and (max-width: 866px){ #blogUpdates{background: #f9f9f9} #generalInfo{background: #fdc833 !important} } /* reCaptcha go responsive */ @media only screen and (max-width : 480px) { #recaptcha_challenge_image{ margin: 0 !important; width: 100% !important; height: auto !important; } #recaptcha_response_field { margin: 0 !important; width: 100% !important; height: auto !important; } .recaptchatable #recaptcha_image { margin: 0 !important; width: 100% !important; height: auto !important; } .recaptchatable .recaptcha_r1_c1, .recaptchatable .recaptcha_r3_c1, .recaptchatable .recaptcha_r3_c2, .recaptchatable .recaptcha_r7_c1, .recaptchatable .recaptcha_r8_c1, .recaptchatable .recaptcha_r3_c3, .recaptchatable .recaptcha_r2_c1, .recaptchatable .recaptcha_r4_c1, .recaptchatable .recaptcha_r4_c2, .recaptchatable .recaptcha_r4_c4, .recaptchatable .recaptcha_image_cell { margin: 0 !important; width: 100% !important; background: none !important; height: auto !important; } } @media screen and (max-width: 1200px){ #ticketOptions .ticketOption .ticketFeatures ul li{font-size: 13px} }