/* * core.css - all custom CSS code belongs in this file; including Bootstrap * Framework overrides. * */ /* ============================================================================= CUSTOM CSS ========================================================================== */ /* BOOTSTRAP OVERRIDES ----------------------------------------------------------------------------*/ /* QUOTES ON HOMEPAGE */ #banner-home #quotes { font-size: 172%; line-height: 1em; /*top: 10.75%;*/ top: 5.75%; width: 100%; } #banner-home #quotes { height: 3em; position: absolute; z-index: 300; } .t { display: table; height: 100%; width: 100%; } .tc { display: table-cell; height: 100%; vertical-align: middle; width: 100%; } #banner-home .slideshow { display: table; width: 100%; height: 100%; } #banner-home .slideshow li { display: none; width: 100%; height: 100%; vertical-align: middle; } #banner-home .slideshow li:first-of-type { display: table-cell; } /* Sets Box model */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } html { /*-webkit-font-smoothing: antialiased;*/ } body { font-size: 18px; font-family: 'Open Sans Condensed', sans-serif; color:#fff; background: url('../_img/CLUE_201711Final_V2_BGTile.png') !important; padding-bottom:40px; } .topContentMain { width:100%; padding-top:0px; margin:0px auto; text-align: center; background-color:#221510 !important; border: 1px solid #9f3628; margin-top:20px; padding-bottom:30px; border-radius: 10px; margin-left:0px; margin-bottom:-20px; } .topContent { max-width: 945px; width:100%; margin:0px auto; padding-top:50px; text-align: center; } .topContent img { max-width: 620px; width:100%; } .contentwrapper { max-width: 945px; width:100%; height: auto; margin:0px auto; padding-top:20px; padding-left:15px; } .copyContent { max-width: 700px; width:100%; margin:0px auto; padding-top:0px; padding-bottom:1px; text-align: center; } .copyContent p { color:#fff; font-size:18px; font-family: 'Open Sans', sans-serif; clear: both; padding-left: 15px; padding-right: 15px; } .middlewrapper { max-width: 565px; width: 60%; height: auto; margin: 19px auto; background: url(../_img/CLUE_201711Final_V2_BigCardTexture.png) !important; border-radius: 20px; border: 1px solid #9f3628; padding-top: 40px; padding-left: 8px; padding-right: 8px; padding-bottom: 40px; text-align: center; float: left; margin-top: 30px; } .middlewrapper2 { max-width: 1000px; width:100%; height: auto; margin:30px auto; background: url('../_img/CLUE_201711Final_V2_BigCardTexture.png') !important; border-radius: 20px; border:1px solid #9f3628; padding:10px; text-align: center; margin-left:-18px; } .middlewrapper2 p{ width:100%; } .middlewrapper2 h2{ margin-top:20px; padding-bottom:20px; } .sidewrapper { max-width: 175px; width:20%; height: auto; margin:0px auto; padding:10px; text-align: center; float:left; margin-top: 15px !important; } .sidewrapper img { margin-bottom:15px; } .flourish { max-width: 270px; width:100%; height: auto; margin:0px auto; } .middlebtn { max-width:256px; width:50%; height: auto; margin:0px auto; text-align: center; float:left; padding-bottom: 10px; } .middlebtns { max-width: 565px; width:100%; height: auto; margin:0px auto; text-align: center; margin-left:15px; } .bottombtns1 { max-width: 720px; width: 100%; margin: 0px auto; text-align: center; } .bottombtn1 { max-width: 340px; width: 50%; height: auto; float: left; margin-left: 10px; margin-bottom: 40px; } .bottombtn { max-width:128px; width:100%; height: auto; float:left; margin-left: 20px; margin-bottom: 30px; } .bottombtns { max-width:930px; width:100%; margin:0px auto; text-align: center; } .navBRK { margin-bottom:0px !important; clear:both !important; } .navbtn { width:140px !important; background: url(../_img/CLUE_201711Final_V2_BigCardTexture.png) !important; border-radius: 10px; border: 1px solid #9f3628; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; margin-top:20px; color:#fff !important; text-align: center; text-transform: uppercase; font-weight:bold; font-size:16px; margin-bottom:-40px !important; margin-left:0px !important; } .navbtn a { font-weight:bold; color:#fff !important; text-transform: uppercase; font-size:14px; } @media (max-width: 1000px){ .middlewrapper2 { max-width: 940px; width:100%; height: auto; margin:30px auto; background: url('../_img/CLUE_201711Final_V2_BigCardTexture.png') !important; border-radius: 20px; border:1px solid #9f3628; padding:10px; text-align: center; margin-left:-10px; } } @media (max-width: 940px){ .middlebtn { max-width:256px; width:100%; height: auto; margin:0px auto; text-align: center; float:none !important; padding-bottom: 10px; } .contentwrapper { padding-left:0px !important; } .middlewrapper2 { max-width: 940px; width:100%; height: auto; margin:30px auto; background: url('../_img/CLUE_201711Final_V2_BigCardTexture.png') !important; border-radius: 20px; border:1px solid #9f3628; padding:10px; text-align: center; margin-left:-3px; } } @media (min-width: 600px){ .isMobile { display:none; } } @media (max-width: 600px){ .isDesktop { display:none; } .isMobile { width:100%; max-width:480px; margin:0px auto; padding-left:10px; padding-right:10px; } .topContentMain { width:100%; padding-top:0px; margin:0px auto; text-align: center; background-color:#221510 !important; border: 1px solid #9f3628; margin-top:20px; padding-bottom:30px; border-radius: 10px; margin-left:0px; margin-bottom:0px; } .topContent img { max-width: 320px !important; width:100%; padding-left:10px; padding-right:10px; } .middlewrapper { width:92%; height: auto; margin:12px auto; background: url('../_img/CLUE_201711Final_V2_BigCardTexture.png') !important; border-radius: 20px; border:1px solid #9f3628; padding:10px; text-align: center; float:none !important; clear:both; } .sidewrapper { max-width: 100px; width:33.33% !important; height: auto; margin:0px auto; padding:5px !important; text-align: center; float:left; margin-top:0px !important; } .copyContent p { color: #fff; font-size: 16px; font-family: 'Open Sans', sans-serif; clear: both; padding: 0px !important; padding-left:20px !important; padding-right:20px !important; padding-bottom:10px !important; } } @media (max-width: 930px){ .bottombtn { max-width:280px; width:100%; height: auto; float:none !important; margin-top:20px; margin:0px auto; } .bottombtns { max-width:600px; width:100%; margin:0px auto; text-align: center; } .bottombtn1 { max-width:280px; width:100%; height: auto; float:none !important; margin-top:20px; margin:0px auto; } .bottombtns1 { max-width:600px; width:100%; margin:0px auto; text-align: center; } .navbtn { width:200px !important; background: url(../_img/CLUE_201711Final_V2_BigCardTexture.png) !important; border-radius: 10px; border: 1px solid #9f3628; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; margin:20px auto; color:#fff !important; text-align: center; margin-bottom:-10px !important; margin-left:40px !important; } .navbtn a { font-weight:bold; color:#fff !important; text-transform: uppercase; font-size:14px; } } @media (max-width: 768px){ .topContent { padding-top:30px; } .middlebtn { max-width:240px; width:100%; height: auto; margin:0px auto; text-align: center; float:none !important; padding-bottom: 10px; } .middlebtns { max-width: 600px; width:100%; height: auto; margin:0px auto; text-align: center; margin-left:0px; } .bottombtn { max-width:280px; width:100%; height: auto; float:none !important; margin-top:20px; margin:0px auto; } .bottombtns { max-width:600px; width:100%; margin:0px auto; text-align: center; } .bottombtn1 { max-width:280px; width:100%; height: auto; float:none !important; margin-top:20px; margin:0px auto; } .bottombtns1 { max-width:600px; width:100%; margin:0px auto; text-align: center; } .navbtn { width:200px !important; background: url(../_img/CLUE_201711Final_V2_BigCardTexture.png) !important; border-radius: 10px; border: 1px solid #9f3628; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; margin:20px auto; color:#fff !important; text-align: center; margin-bottom:-10px !important; margin-left:40px !important; } .navbtn a { font-weight:bold; color:#fff !important; text-transform: uppercase; font-size:14px; } .sidewrapper { max-width: 180px; width:20%; height: auto; margin:0px auto; padding:10px; text-align: center; float:left; margin-top:50px; } .copyContent { max-width: 700px; width:100%; margin:0px auto; padding-top:0px; padding-bottom:0px; text-align: center; } .copyContent p { color:#fff; font-size:16px; font-family: 'Open Sans', sans-serif; clear: both; padding: 20px; } .topContent img { max-width: 500px; width:100%; padding-left:10px; padding-right:10px; } } img { outline: none; border: 0; max-width:100%; } .img-responsive { display: inline; } h1 { margin-top:0; margin-bottom: 0; font-family: "Knockout 70 A", "Knockout 70 B"; font-style: normal; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; font-size: 225%; line-height: 1em; margin: 1em auto; text-align: center; } h3 { font-size: 130%; line-height: 1em; } h4 { font-size: 100%; line-height: 1em; } .nowrap { white-space: nowrap; } @media (min-width:1200px) { h1 { font-size: 280%; } } h2 { font-family: 'Open Sans Condensed', sans-serif; font-weight: bold !important; font-size: 50px; margin:0px; text-transform: uppercase; } body > iframe { position: absolute; top: -1000px; left: -1000px; height: 1px; width: 1px; } .carousel-inner>.item>a>img { margin: 0 auto; } /* UTILITY CLASSES SECTION ----------------------------------------------------------------------------*/ iframe#mediaplxpxl { opacity: 0; } .align_right { text-align: right !important; } .align_left { text-align: left !important; } .align_center { text-align: center !important; } .visible-xxs { display: none !important; } .hidden-xxs { display: block !important; } @media (max-width: 479px){ .visible-xxs { display: block !important; } .hidden-xxs { display: none !important; } .topborder{ display: none !important; } } /* GLOBAL SECTION ----------------------------------------------------------------------------*/ .divider-double { width: 100%; height: 17px; background: url('../_img/divider-double.png'); } #outerwrapper.container { padding-left: 0; padding-right: 0; } #ticket_info { width: 100%; padding-left:20px; padding-right:20px; padding-bottom:30px; height: auto; background: url('../_img/gold_bg_lrg.jp'); background:#eaae2a; } #ticket_info2 { width: 100%; margin-top: 40px; padding:30px; text-align: center; height: auto; color:#000; background: url('../_img/gold_bg_sml.jpg'); background-repeat: no-repeat; } #ticket_info2 h1 { font-weight: bold; font-size:40px !important; margin:0px; text-align: center !important; line-height:40px !important; } #ticket_info2 h2 { font-weight: bold; font-size:30px; margin:0px; line-height:30px; } #ticket_info2 p { margin-top:10px; padding-left: 20px; padding-right: 20px; } @media (max-width: 800px){ #ticket_info2 { width: 100%; margin-top: 40px; padding:20px; text-align: center; height: auto; color:#000; background: url('../_img/gold_bg_sml.jpg'); background-repeat: repeat; } #ticket_info2 h1 { font-weight: bold; font-size:20px !important; margin:0px; text-align: center !important; line-height:20px !important; } #ticket_info2 h2 { font-weight: bold; font-size:15px; margin:0px; line-height:15px !important; } #ticket_info2 p { margin-top:10px; } .chicago h1 { text-align: center !important; margin-bottom: 20px !important; line-height: 30px !important; font-family: 'Knockout 30 A', 'Knockout 30 B'; margin: 0px; font-size: 35px !important; } } .footer-link { text-align: left; padding-left: 10px; } .footer-link a { color:#fff !important; } #content { margin: 0 auto; } #content.content-home { margin-bottom: 0; margin-top: 2em; } #content p { line-height:1.5em; color:#000 !important; } #content strong { font-family:'Futura W01 Heavy'; font-family: "Knockout 50 A", "Knockout 50 B"; } @font-face { font-family: 'JuniorBantam'; src: url('knockout-htf27-juniorbantamwt-webfont.eot'); src: url('knockout-htf27-juniorbantamwt-webfont.eot?iefix') format('eot'), url('knockout-htf27-juniorbantamwt-webfont.woff') format('woff'), url('knockout-htf27-juniorbantamwt-webfont.ttf') format('truetype'), url('knockout-htf27-juniorbantamwt-webfont.svg#webfontEVwm6Yqh') format('svg'); font-weight: normal; font-style: normal; } a { color:#eadf73; } a:hover, a:visited, a:link { color:#eadf73; text-decoration:none; } .tix-info { float:right; } /* NAV SECTION ----------------------------------------------------------------------------*/ #masthead { font-family: "Knockout 52 A", "Knockout 52 B"; font-style: normal; font-weight: 400; } #masthead .container { padding-left: 0; padding-right: 0; padding-top: 5px; } .navbar-nav >li > a{ padding:10px; font-size:143%; color:#fff; margin: 0 6px 0; letter-spacing: .0625em; text-shadow: 1px 1px 2px #000000; } li.active a { color: #fff; } .navbar-nav > li > a, .navbar-nav > li > a:hover { background:none!important; } .navbar { margin-bottom: 0; -webkit-box-shadow: 0px 4px 14px 4px rgba(0,0,0,0.4); -moz-box-shadow: 0px 4px 14px 4px rgba(0,0,0,0.4); box-shadow: 0px 4px 14px 4px rgba(0,0,0,0.4); min-height:45px; background:#000; } .nav { text-transform: uppercase; } .nav .open>a, .nav .open>a:hover, .nav .open>a:focus { background:none; } .dropdown-menu { background:#000; color:#fff; font-size:120%; text-align:center; min-width:216px; z-index:5000; } .dropdown-menu>li>a { color:#fff; } .dropdown-menu>li>a:hover { background:none; color:#fff; } /* MUSIC PLAYER STYLING ----------------------------------------------------------------------------*/ .marquee { position: absolute; width: 120px; height: 45px; top: 10px; left: 130px; overflow: hidden; text-transform: uppercase; color: #ffffff; overflow: hidden; z-index: 4000; font-size:112%; } .marquee > div { display: block; width: auto !important; white-space: nowrap; position: absolute; height: 44px; top: 0px; left: 0px; } .sc-player{ position: absolute; width: 250px; height: 44px; background: #000000; z-index: 4000; } #player:hover .sc-player, #player:focus .sc-player, #player.hoverplayer .sc-player { height: 700px; } .sc-player ol, .sc-player li{ margin: 0; padding: 0; list-style-position: inside; } /* Artworks */ .sc-player .sc-artwork-list{ display: none; } /* controls */ .sc-player .sc-controls{ position: absolute; width: 35px; height: 33px; top: 4px; left: 50px; } .sc-player .sc-controls a{ display: block; width: 38px; height: 33px; background: url('../_img/audio-sprites.png') no-repeat -78px 0; text-indent: -9999px; } .sc-player .sc-controls a:hover { background-position: -78px -33px; } .sc-player .sc-controls a.sc-pause { background: url('../_img/audio-sprites.png') no-repeat -115px 0; text-indent: -9999px; } .sc-player .sc-controls a.sc-pause:hover{ background: url('../_img/audio-sprites.png') no-repeat -115px -33px; text-indent: -9999px; } .sc-player.playing .sc-controls a.sc-pause{ background: url('../_img/audio-sprites.png') no-repeat -115px 0; text-indent: -9999px; } .sc-player.playing .sc-controls a.sc-pause:hover{ background: url('../_img/audio-sprites.png') no-repeat -115px -33px; text-indent: -9999px; } .sc-player-prev { position: absolute; top: 4px; left: 5px; display: block; width: 35px; height: 33px; background: url('../_img/audio-sprites.png') no-repeat -41px 0; text-indent: -9999px; z-index: 4000; } .sc-player-prev:hover { background-position: -41px -33px; cursor: pointer; } .sc-player-next { position: absolute; top: 4px; left: 87px; display: block; width: 38px; height: 33px; background: url('../_img/audio-sprites.png') no-repeat -153px 0; text-indent: -9999px; z-index: 4000; } .sc-player-next:hover { background-position: -153px -33px; cursor: pointer; } .sc-player.playing .sc-controls a.sc-play{ display: none; } .sc-player.playing .sc-controls a.sc-pause{ display: block; } /* scrubber */ .sc-scrubber { position: absolute; left: 0; top: 55px; height: 50px; width: 100%; display: none; } #player:hover .sc-scrubber, #player:focus .sc-scrubber, #player.hoverplayer .sc-scrubber { display: block; background: url('../_img/audio-sound.png') no-repeat 10px 25px; } .sc-scrubber .sc-time-span{ width: 69%; height: 20px; margin: 5px 0 0; position: relative; } .sc-scrubber .sc-buffer{ display: none; } .sc-scrubber .sc-time-indicators { position: absolute; top: 0px; width: 100%; text-indent: -9999px; z-index: 500; } .sc-time-indicators span { position: absolute; top: 0; color: #fff; font-size: 80%; text-indent: 0; } .sc-position { left: 10px; } .sc-duration { right: 10px; } .sc-waveform-container { position: absolute; left: 41px; height: 10px; width: 100%; margin: 0 auto; background-color: #ffffff; -webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .5); box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .5); } .sc-waveform-container img { display: none; } .sc-scrubber .sc-played { position: absolute; width: 100%; left: 41px; top: 0; background-color: #dac902; opacity: 0.75; height: 10px; -webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .5); box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .5); } /* volume control */ .sc-volume-slider { bottom: 10px; left: 41px; position: absolute; width: 110px; height: 10px; background-color: white; -webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .5); box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .5); cursor: pointer; } .sc-volume-slider .sc-volume-status{ position: absolute; background-color:#dac902; width: 0%; height: 8px; top: 1px; left: 1px; } /* Track listings*/ .sc-player ol.sc-trackslist { display: none; position: absolute; float: left; width: 250px; height: auto; top: 115px; left: 0px; overflow: hidden; padding: 0; list-style-type: none; z-index:100; } #player:hover .sc-player ol.sc-trackslist, #player:focus .sc-player ol.sc-trackslist, #player.hoverplayer .sc-player ol.sc-trackslist{ display: block; } .sc-player ol.sc-trackslist li { float: left; clear: left; text-align: left; cursor: pointer; margin: 0; width: 95%; font: 14px/1.3 helvetica, arial, sans-serif; padding: 5px 10px; border-top: 1px solid rgba(255, 255, 255, .2); } .sc-player ol.sc-trackslist li a { text-transform: none !important; letter-spacing: 0 !important; color:#fff; } .sc-trackslist li.active { background: rgba(255, 255, 255, .1); } .sc-trackslist li.active a, .sc-player ol.sc-trackslist li:hover a { color: #DAC902 !important; } /* utilities */ .sc-player .hidden { display: none; } .sc-player-engine-container{ width: 1px; height: 1px; position: fixed; top: 2px; left: 2px; } .sc-player { font: 24px/1 'JuniorBantam', helvetica, arial, sans-serif; letter-spacing: 1px; } .sc-player a { text-decoration: none; color: #333; } /* Track listings*/ .sc-player ol.sc-trackslist li.active { display: block !important; } .sc-player ol.sc-trackslist li.active a { color: #003399; } /* Track info*/ .sc-player .sc-info{ display: none; background: #fff; opacity: 0.9; } .sc-player .sc-info-toggle{ display: none; } .sc-player a { text-decoration: none; color: #333; } /* Track listings*/ .sc-player ol.sc-trackslist li.active, .sc-player ol.sc-trackslist li:hover { color: #fff; } .sc-player ol.sc-trackslist li.active a { color: #003399; } .sc-track-duration { display: none; } .sc-pause { display: none; } #sc-widget { height: 1px; width: 1px; position: absolute; top: 0; left: 0; opacity: 0; } /* KEYART SECTION ----------------------------------------------------------------------------*/ #keyart { background: #000; background-position:center top; margin-top:25px; /*height:386px; display: none;*/ } #keyart img { margin:0 auto; display:block; } #banner-home { position:relative; margin-top:45px; } #keyart .col-sm-6:first-of-type, #keyart .col-sm-6:last-of-type { padding-left: 0; padding-right: 0; } .get_tickets { height:66px; width:190px; background-repeat:no-repeat; background-image: url("../_img/get-tickets.png"); float:right; margin-bottom: -14px; } .get_tickets_content { font-weight: bold; color:#000; font-size: 20px; margin-top: 14px; margin-left: 25px; } .xplore { position: absolute; margin-top:-35px; margin-left:600px; } .xplore a { color:#fff; font-family: "Knockout 30 A", "Knockout 30 B"; font-style: normal; font-weight: 400; font-size: 20px; } #banner { padding-bottom:4px; position: relative; margin-top:45px; height:386px; padding-bottom: 30.2727272727%; width:100%; background-size:cover; background-position:center top; background-repeat:no-repeat; } #banner_tour { position: relative; margin-top:100px !important; margin-bottom:35px !important; max-height:300px; height:300px; margin:0px auto; max-width:1000px; background-size:cover; background-position:center top; background-repeat:no-repeat; background-image: url("../_img/motown-banner.png"); } @media (max-width:990px) { .xplore { position:absolute; margin-top:18px; margin-left:0px; padding:5px; width:100%; background-color:#000; } } @media (max-width:900px) { #banner_tour { position: relative; margin-top:100px !important; margin-bottom:45px; max-height:180px; height:180px; margin:0px auto; max-width:600px; background-size:cover; background-position:center top; background-repeat:no-repeat; background-image: url("../_img/motown-banner-mobile.png"); } } @media (max-width:767px) { #banner_tour { position: relative; margin-top:130px !important; } } @media (max-width:600px) { #banner_tour { position: relative; margin-top:130px !important; margin-bottom:45px; max-height:96px; height:96px; margin:0px auto; max-width:320px; background-size:cover; background-position:center top; background-repeat:no-repeat; background-image: url("../_img/motown-banner-mobile-320.png"); } } #presale-link { position: absolute; width: 25%; height: 10%; top: 78.5%; left: 8.25%; } @media (max-width:479px) { #presale-link { position: absolute; width: 84%; height: 10%; top: 39%; left: 8.25%; } } #border { background:url(../_img/keyart-border.png) repeat-x bottom center; background-size:cover; height:.4em; } #banner-home #border { /*display: none;*/ } .tourpage #banner-home #border { display: block; } #bar{ font-family: "Knockout 70 A", "Knockout 70 B"; font-style: normal; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; font-size: 200%; line-height: 1em; padding-top:.25em; padding-bottom:.25em; text-align: center; background-color:#0059a0; } #bar .gold{ color:#ffde57; } #bar .nobreak{ display:inline-block; } #home-video { position: relative; /*height: 386px;*/ top: 0px; background: #000; z-index: 1000; background:url(../_img/keyart-border.png) repeat-x bottom center #000; } #home-video video { width: 100%; max-height:382px; } #video-controls { display: block; position: absolute; z-index: 5005; height: 0; bottom: -15px; } #mute-video { position: absolute; bottom: 25px; left: 10px; } #restart-video { position: absolute; bottom: 25px; left: 63px; } #close-video { position: absolute; top: 20px; right: 15px; } #play-video { position: absolute; bottom: 4px; left: 15px; font-size: 25px; line-height: .8; font-family: 'Tungsten A', 'Tungsten B'; } #play-video img { vertical-align: top; } .tourpage #keyart { display: block; } .tourpage #video-controls { display: none; } @media (max-width:767px) { #home-video, #video-controls { display: none; } #banner-home #border { display: block; } } /* -------------------------------------------- HP Carousel -------------------------------------------- */ #hp-carousel { position: relative; width: 100%; height: 0; padding-bottom: 45%; margin: 4em 0 1em; } #carousel-container { position: absolute; top: 0; left: 0; font-size: 0; width: 100%; height: 100%; } .carousel-item { font-size: 18px; line-height: 1em; width: 33%; width: 26%; padding-bottom: 32%; display: block; position: absolute; top: 0; margin: 1em auto 3em; vertical-align: middle; transition: all 0.5s ease; z-index: 2; } .carousel-item.inactive { top: 7%; opacity: 1; background: #000; } .carousel-item.active { width: 48%; padding-bottom: 40%; background-color: #333; box-shadow: .125em .125em 1em rgba(0,0,0,.75); z-index: 3; transition: all 0.5s ease; pointer-events: none; } .carousel-item.active * { pointer-events: all !important; } .carousel-item:nth-child(1) { left:0; } .carousel-item:nth-child(3) { left: 74% } @media (min-width:1200px) { .london .carousel-content > div { font-size: 150%; } } .slide0 .carousel-item:nth-child(3), .slide1 .carousel-item:nth-child(1), .slide2 .carousel-item:nth-child(2) { left: 0 !important; } .slide0 .carousel-item:nth-child(2), .slide1 .carousel-item:nth-child(3), .slide2 .carousel-item:nth-child(1) { left: 74% !important; } .slide0 .carousel-item:nth-child(1), .slide1 .carousel-item:nth-child(2), .slide2 .carousel-item:nth-child(3) { left: 26% !important; } .carousel-item.active .carousel-img, .carousel-item.active .carousel-txt { opacity: 0; transition: opacity 0.5s ease; z-index: 4; -webkit-transition-delay: 0.5s; /* Safari */ transition-delay: 0.5s; } .carousel-img, .carousel-txt { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .carousel-img { opacity: .35; } .carousel-content { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; z-index: -1; display: none; } .carousel-item.active .carousel-content { opacity: 1; display: block; z-index: 5; } .top-bar { background: url(../_img/hpc-top-bar.gif) center center no-repeat; background-size: cover; width: 100%; height: 2em; opacity: .7; margin-top:-2em; transition: opacity 0.5s ease; z-index: 4; } .active .top-bar { opacity: 1; } .bar-text { line-height: 2em; color: #000; opacity: 0; transition: opacity 0.5s ease; z-index: 4; } .active .bar-text { opacity: 1; -webkit-transition-delay: 0.5s; /* Safari */ transition-delay: 0.5s; } .carousel-item:not(.active):hover { cursor: pointer; } .carousel-item:not(.active):hover .carousel-img { opacity: .65; } .carousel-item:not(.active):hover .top-bar { opacity: 1; } @media (min-width: 768px) { .pad-md { padding:0 2em; } } @media (max-width:767px) { #hp-carousel { height: auto; padding: 0; font-size: 0; } #carousel-container { position: relative; } .carousel-item, .carousel-item.active { width: 32%; padding-bottom: 42%; margin: .366665%; background-color: #000; box-shadow: none; z-index: 3; transition: none; pointer-events: all; position: relative; display: inline-block; } .carousel-item.active .carousel-img, .carousel-item.active .carousel-txt { opacity: .3; transition: none; z-index: 4; -webkit-transition-delay: none; /* Safari */ transition-delay: none; } .carousel-item.active .carousel-txt { opacity: 1; } .carousel-txt { background-size: 200%; } .carousel-item.active .carousel-content { display: none; } #mobile-content .carousel-content { display: block; opacity: 1; position: relative; text-align: center; padding: 1.5em; background: #333; z-index: 4 !important; } .carousel-item.inactive { top: 0; } .top-bar { height: 1em; margin-top: -1em; } .carousel-item.active:hover { cursor: pointer; } .carousel-item.active:hover .carousel-img { opacity: .65; } .carousel-item.active .top-bar, .carousel-item.active:hover .top-bar { opacity: 1; } .active .top-bar { opacity: .7; } .active .bar-text { opacity: 0; } .slide0 .carousel-item:nth-child(3), .slide1 .carousel-item:nth-child(1), .slide2 .carousel-item:nth-child(2) { left: 0 !important; } .slide0 .carousel-item:nth-child(2), .slide1 .carousel-item:nth-child(3), .slide2 .carousel-item:nth-child(1) { left: 0 !important; } .slide0 .carousel-item:nth-child(1), .slide1 .carousel-item:nth-child(2), .slide2 .carousel-item:nth-child(3) { left: 0 !important; } #mobile-content * { pointer-events: all !important; } } /* -------------------------------------------- SPOTIFY PLAYER -------------------------------------------- */ .ic { text-align: center; line-height: 0; } .ic > div { line-height: 1em; display: inline-block; vertical-align: middle; } .spotify { padding: 1em 0; } .spotify:before { content: url(../_img/hp-rule.jpg); display: block; width: 100%; height: auto; margin-bottom: 1.25em; overflow: hidden; } .spotify:after { content: url(../_img/hp-rule.jpg); display: block; width: 100%; height: auto; margin-top: 1.25em; overflow: hidden; } .spotify-txt, .spotify-player { margin: .5em 1em; } .spotify h2, .spotify h2 small { color: #eadf73; margin: 0; } #hp-content a { display: block; position: relative; margin: 1.5em 0; } @media (max-width:767px){ #hp-content a { display: inline-block; } .social { padding-left:0; text-align: center !important; } .footer-link { text-align: center; margin-bottom:10px !important; } } /* FOOTER SECTION ----------------------------------------------------------------------------*/ #footer { /* margin-top: 20px; */ text-align: center; /* border-top: 1px solid #2e2e2e; */ padding-top: 30px; } .lang { margin:0px; } .soc { margin:0 4px 0 0; display:inline-block; } .social { margin-right:0px !important; text-align: right; } .lang-select { display:block; } .hrule { margin-top: 20px; padding-top:20px; border-top: 1px solid #2e2e2e; } .ebook { font-size:86%; color:#eadf73; text-align:left; } .rules { border-right:1px solid #2e2e2e; border-left:1px solid #2e2e2e; } .btns { margin-top:2em; } .col-sm-6 { margin-bottom: 30px; } .btns a { display:inline-block; background:#252525; color:#eadf73; text-transform:uppercase; padding:6px; margin-right:5px; } .btns a.merch { background:url(../_img/btn-merch.png) no-repeat 10px center #252525; padding:6px 6px 6px 33px; } .btns a.study { background:url(../_img/btn-study.png) no-repeat 10px center #252525; padding:6px 6px 6px 35px; } .btns a:hover { text-decoration: none; } .aa { margin-top:5px; } .theater-info { color:#fff; padding:40px 0; } .theater-info big { font-size:129%; } .theater-info small { font-size:71%; line-height:1.3em; display:block; } .theater-info small a { color:#fff; text-decoration: none; } .map-link { color:#6f6d6d; } .1pxrule { border-bottom: 1px solid #666; width: 100%; } /* HOME PAGE VIDEOS ----------------------------------------------------------------------------*/ .modal, .modal-body { padding: 50px 25px; background:#000; z-index: 100000; height: 100%; } .modal, .modal-backdrop { bottom: auto !important; overflow: hidden; } .modal-body iframe { display: block; width: 100%; height: 100%; z-index:5030; } .modal-body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .close, .close:hover { opacity: 1; z-index: 6000000000000; position: absolute; top: 0px; right: 30px; font-size: 45px; padding: 3px; background: rgba(0, 0, 0, .6) !important; color: #fff; text-shadow: none; text-transform:uppercase; } .carousel-indicators { text-align:right; bottom:-10px; margin-left:-11%; } .carousel-indicators li { background:#fff; border:0px; } .carousel-indicators .active { background:#ba7217; } .carousel-inner a span { color:#fff; display:block; text-transform:uppercase; padding-top:10px; } .carousel-inner a:hover { text-decoration:none; } @media (max-width:991px) { .carousel-indicators { text-align: center; width: 100%; top: 100%; left: auto; bottom: auto; margin: 0; } .carousel-inner a span { text-align:center; } } /* HOME SECTION ----------------------------------------------------------------------------*/ .on-broadway { display: block; background:url(../_img/home-onbroadway.jpg) center no-repeat; padding:16px 0; min-height:127px; margin-bottom: 40px; } .t { display: table; height: 100%; min-height: 95px; width: 100%; } .tc { display: table-cell; height: 100%; vertical-align: middle; width: 100%; } .on-broadway big { text-align:center; margin:0px auto; display:block; color:#552a02; font-size:215%; } .on-broadway big strong, .on-tour big strong { font-family:'Futura W01 Heavy'; } .on-broadway a { display:block; margin:0 auto; text-align: center; } .on-tour { background:#1b1b1b; padding: 25px 0; } .on-tour big { font-size:207%; color:#f5ea78; text-align:center; display:block; margin:0 auto 25px; } .on-tour big.full { font-size: 150%; letter-spacing: .05em; } .london big { font-size:288%; text-align: center; display:block; } @media (min-width:1200px) { .london big { font-size:236%; } } #content .london p { font-size:207%; color:#f5ea78; text-align: center; line-height:1.2em; margin: 0 auto 1em; } @media (max-width:479px) { #content .london p { font-size: 6.5vw; } } #content .london a:visited { color:#eadf73; text-decoration:none; } .flag { margin-top:-5px; } #near-you { background:#353535; padding:1em 3em; } #near-you h2 { font-family:'Futura W01 Heavy'; font-size:150%; color:#f5ea78; padding:0 0 5px; margin:0; } #near-you .city { font-family:'Futura W01 Heavy'; font-size:150%; color:#fff; padding:0 0 5px; margin:0; text-transform:uppercase; } #near-you .date { font-size:114%; } #near-you a { display:block; margin-bottom:10px; } .slimScrollDivWrap { background: #242424; padding: 1.25em 0; } .tour-city { margin: 0em 3em 0 2em; padding:1em 0; border-bottom:1px solid #2e2e2e; } .tour-city .city { font-family:'Futura W01 Heavy'; font-size:129%; color:#fff; padding:0 0 5px; margin:0; text-transform:uppercase; } .tour-city a { display:block; color:#b16d1d; text-transform:uppercase; } .slimScrollRail { right:15px!important; border-radius:0px!important; opacity:1!important; height:95%!important; } .slimScrollBar { right:15px!important; border-radius:0px!important; opacity:1!important; height:60px!important; } /* ABOUT SECTION ----------------------------------------------------------------------------*/ #about_copy p { font-size:114%; line-height:1.625em; margin: 0 0 1em; } .tix-info { font-size:186%; color:#eadf73; } #about-right .tix-info { float:none!important; } #about-right p { font-size:129%; } #about-right p a { font-size:118% } #about-right #about-videos { margin:10px 0 40px; } .songs { list-style-type:none; font-size:114%; margin:20px 0 40px; padding:0px; } .songs li { padding:0px 0px 2px; color:#000; } .songsleft { width:50%; float:left; } .songsright { width:50%; } @media (max-width:767px) { .songsleft { width:100%; clear:both; float:none; } .songsright { width:100%; clear:both; } } /* CAST -------------------------------------------------------------------------------- */ #cast-list>div { clear:both; margin: 0 0 30px; border: 1px solid #000; display: block; position:relative; } #cast-list.creative>div { padding:25px 25px 2px; } #cast-list>div { min-height: 252px; } #cast-list>div img { float:left; border: 1px solid #e8bb3e; margin-right:20px; } .bio { padding:25px 25px 2px; } #cast-list .summary, #cast-list .details { min-height: 250px; } #cast-list h3 em { font-family: 'Futura W01 Book'; } #cast-list h3 { color: #000; font-family:'Futura W01 Heavy', sans-serif; margin-top:0; } .read-more, .read-less { position: absolute; right: 0; bottom: 0; background: #000; font-size:114%; padding: 3px 10px; display: block; } .read-more a, .read-less a { color: #ffffff !important; display: block; } /* CASTING -------------------------------------------------------------------------------- */ #audition-form { font-size: 125%; color: #fff; } #aud-info { border-top: 1px solid #efdf73; border-bottom: 1px solid #efdf73; padding: 30px 0; margin: 30px 0 30px; } #aud-info h3, #open-call h3 { font-size: 220%; font-family: 'Futura W01 Book', helvetica, arial, sans-serif; text-align: center; color:#efdf73; } #open-call { border-bottom: 1px solid #efdf73; padding:0 0 20px; } #open-call h3 { color:#fff; } #open-call p, #open-call ol { font-size:136%; } .call-info { margin-top:40px; display:block; } .call-det { background:url(../_img/casting-left.jpg) no-repeat top center; background-size: cover; text-align:center; color:#000; margin-top:15px; margin-bottom:15px; } .call-det big { font-family: 'Futura W01 Book', helvetica, arial, sans-serif; font-size:229%; margin:5px 0 10px; display:block; } #open-call .call-det p { font-size:122%; line-height:1.45em; } #audition-form { padding:10px 0 0; } #audition-form h3 { font-size:185%; text-align:center; } #audition-form p { margin-bottom:30px; } #audition-form h5 { color: #fff; margin: 0 auto 20px; font-size:125%; } #audition-form h5 span { display: inline-block; text-align: center; background: #ca3d36; width: 32px; height: 32px; -webkit-border-radius: 32px; border-radius: 32px; vertical-align: top; padding-top:2px; } #audition-form h5 small { color: #efdf73; } #audition-form h5 a { color:#ca3d36; } #audition-form { font-family: 'Futura W01 Book', helvetica, arial, sans-serif; } #aud-form label { display: inline-block; width: 17%; margin-right: 5px; text-align: right; } #aud-form input { width: 20%; font-size: 16px; -webkit-border-radius: 20px; border-radius: 20px; padding: 3px 10px; border: none; margin-right: 30px; color:#000; } #aud-form input[type="checkbox"] { width: 10px; clear:both; margin: 0 5px 0 40px; } #aud-form label.check { text-align:left; width:90%; } #aud-form label.left { width:9%; } #aud-form #send { position: relative; top: -60px; float: right; font-size: 20px; padding: 3px 20px; font-family: 'Futura W01 Book', helvetica, arial, sans-serif; color: #fff; width: 99px; height:32px; background: url(../_img/btn-submit.png) no-repeat; border-radius:0px; text-indent:-9999px; cursor: pointer; } #form-status { text-align: center; padding: 20px 0; color: #ca3d36; } /* News -------------------------------------------------------------------------------- */ #news h2 { background: url('../img/title-news.png') no-repeat scroll bottom left; } #news-list { max-width:1200px; margin:0 auto; text-align: center; } .isotope-item { /*float:left;*/ display: inline-block; vertical-align: top; width:220px; height:auto; background: #ffffff; color: #000000; margin: 5px; } .isotope-item a { text-transform: uppercase; font-family: 'Futura W01 Book'; } .isotope-item .number { display: none; } .news { padding: 20px 20px 10px; text-align: left; } .news img { max-width: 100%; height:auto; display: block; } .instagram { width: 220px; height: 220px; border: 3px solid #6b4b3d; float:left; } .instagram img { width: 220px; display: block; } .tweet { width: 220px; padding: 10px 10px 0; font-size: 17px; line-height: 1; border: 3px solid #762d0c; overflow: hidden; float:left; } .feature, .feature img { width: 424px !important; } .broadway { border: 3px solid #e8ba02; } .motown { border: 3px solid #d48212; } .news img { display: block; } #content .news p { margin: 0 0 10px !important; font-size: 108%; line-height: 1.4em; } .news h3 { font-weight: normal; font-size: 123%; font-family:'Futura W01 Heavy', sans-serif; margin: 0 0 10px; } p.pub { font-style: normal; font-size: 80%; font-family: 'Futura W01 Book Oblique' !important; } #news-list a { color: #b82e25 !important; } .tweet_user { display: block; line-height: 1.2; font-size: 10px; padding: 0 0 5px; border-bottom: 1px dotted #666666; } .tweet_user span { float: left; display: block; width: 20px; height: 17px; margin: 0 3px 2px 0; background: url('../_img/tweet-sprite.png') no-repeat scroll top left; } .tweet_text { display: block; font-size: 14px; } .tweet_text a { font-family: 'Futura W01 Book'; font-size: 12px; text-transform: none; } .tweet_time { display: block; text-align: center; color: #666666 !important; font-family: 'Futura W01 Book'; font-size: 12px; text-transform: none; padding: 0 0 5px; border-bottom: 1px dotted #666666; } .tweet_action { display: inline-block; margin: 5px 9px 0; width: 22px; height: 17px; text-indent: -9999px; } .tweet_reply { background: url('../_img/tweet-sprite.png') no-repeat scroll -30px 0; } .tweet_retweet { background: url('../_img/tweet-sprite.png') no-repeat scroll -63px 0; } .tweet_favorite { background: url('../_img/tweet-sprite.png') no-repeat scroll -94px 0; } #filters { font: 18px/1 'Futura W01 Book'; margin: 40px auto 30px; text-align: center; padding:0; } #filters li { display: inline-block; margin: 0 3px; } #filters a { display: inline-block; color: #ffffff; padding: 5px 10px; cursor: pointer; -webkit-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .5); box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .5); } #filters a:hover { opacity: 0.9; filter:alpha(opacity=90); } #all { background: #787914; } #broadway { background: #e8ba02; } #motown{ background: #d48212; } #tweet { background: #762d0c; } #instagram { background: #6b4b3d; } /* REVIEWS -------------------------------------------------------------------------------- */ #reviews-list { margin-top:40px; } #reviews-list div { text-align: center; border-bottom: 1px solid #dbcc69; margin: 0 0 30px; } #reviews-list div h3 { color: #efdf73; font-size: 214%; } #reviews-list div:first-child h3 { font-size: 271%; } #reviews-list div:last-child { border: none !important; } /* TICKETS SECTION ----------------------------------------------------------------------------*/ .ticket-info { text-align: center; text-transform: uppercase; } @media (max-width:767px) { .ticket-info { max-width: 441px; margin: 3em auto 0; } } .ticket-info h4 { margin: .5em; font-size: 90%; line-height: 1em; } #tkts_info { margin: 3em auto; } a.tix-premium { font-family: "Knockout 50 A", "Knockout 50 B"; color: #000; font-size: 150%; } .ticket-info { background: url(_img/bg-gold.jpg); background-size: cover; padding: 2px; } .info-box { background: #000; padding: 1.2em 1em; margin-bottom: 1px; } .info-box:last-child { margin-bottom: 0; } .info-box a { text-decoration: underline; color: #fff; } .info-box a:hover { color: #eadf73; } .info-box h3 a { color: #eadf73; } .info-box h3 a:hover { color: #fff; } .info-box h3, .info-box h4 { margin: 0; color: #fff; } .info-box h3 { margin-bottom: .25em; color: #eadf73; } @media (min-width:1200px) { .ticket-info { font-size: 120%; } } @media (max-width:1199px) { .ticket-info { margin-left: -15px; margin-right: -15px; font-size: 108%; } .info-box { padding: 1.37em 1em !important; } } @media (max-width:991px) { .ticket-info { font-size: 85%; } .info-box { padding: 1.57em 1em !important; } } @media (max-width:767px) { .ticket-info { font-size: 100%; margin: 3em auto 0; } } @media (max-width: 580px) { .ticket-info { font-size: 100%; margin: 3em auto 0; max-width: 294px; } } /* SAFARI only: @media screen and (max-width: 766px) { .h-rule.visible-xs { height: 1px;margin: 15em auto 0em; background:url(../_img/bg-gold.jpg);background-size:cover; } } */ @media (max-width: 600px) { .h-rule.visible-xs { height: 1px;margin: 10em auto 0em; background:url(../_img/bg-gold.jpg);background-size:cover; } } @media (min-width: 600px) and (max-width: 766px) { .h-rule.visible-xs { height: 1px;margin: 8em auto 0em; background:url(../_img/bg-gold.jpg);background-size:cover; } } @media screen and (-webkit-min-device-pixel-ratio:0) { .h-rule.visible-xs { height: 1px;margin: 16em auto 0em; background:url(../_img/bg-gold.jpg);background-size:cover; } } /* Chrome only: */ @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) and (max-width: 766px) { .h-rule.visible-xs { height: 1px;margin: 16em auto 0em; background:url(../_img/bg-gold.jpg);background-size:cover; } } .loc-info { position: relative; height: 5em; } .loc-info > div { height: 100%; } @media (max-width: 766px) { .loc-info > div { height: auto; } } .loc-info a:link,.loc-info a:visited,.loc-info a:active { color: #eadf73; text-decoration: none; } .loc-info a:hover { color: #ffffff; text-decoration: none; } .loc-info h2 a:link,.loc-info h2 a:visited,.loc-info h2 a:active { color: #eadf73; text-decoration: none; } .loc-info h2 a:hover { color: #ffffff; text-decoration: none; } .lottery-copy { margin-top: 7px; line-height: normal; font-size: 82% } @media (min-width: 768px) and (max-width: 1024px) { .lottery-copy { /* font-size: 72% */ } } .loc-info h2 { margin: 0 !important; line-height: 1em; margin-top: -.25em !important; } #month-nav { background: url(../_img/bg-gold.jpg) center center no-repeat; background-size: cover; text-align: center; margin: 0 1px; text-transform: uppercase; box-shadow: .5em .5em .5em rgba(0,0,0,.25); position: relative; z-index: 20; line-height: 1em; } #month-nav a { color: #000; padding: .5em; margin: 0 .25em; display: inline-block; opacity:0; } #month-nav a.active { color: #ebdf73; background: #323030; } #sched { font-family: "Knockout 50 A", "Knockout 50 B"; } #sched h3 { font-size:129%; line-height:1.4em; } #sched h3 strong { font-size:114%; } #sched label { display: inline-block; } #calendar { position: relative; width: 630px; height: auto; overflow: hidden; } #cal-left, #cal-right { position: absolute; top: 2.625em; z-index:100; display:none; } #cal-right { width: 0; height: 0; border-top: .6em solid transparent; border-bottom: .6em solid transparent; border-left: .6em solid #db960b; } #cal-left { width: 0; height: 0; border-top: .6em solid transparent; border-bottom: .6em solid transparent; border-right:.6em solid #db960b; } #cal-left { left: 25%; } #cal-right { right: 25%; } @media (max-width:991px) { #cal-left { left: 5%; } #cal-right { right: 5%; } } .inactive { opacity: .3; cursor: default; } .month { display:none; float:left; width: 100%; } .month:first-child { display: block; } .perf { display:block; position:absolute; top:2px; right:115px; font-size:120%; } #sched .month h3 { font-family: "Knockout 70 A", "Knockout 70 B"; letter-spacing: 1px; text-transform: uppercase; text-align: center; margin: 0 1px 1px 1px; color:#f6de74; font-size:170%; background: rgb(50,48,48); } .ticket-type { vertical-align: text-bottom; display: inline-block; font-size: 28px; line-height: 1.25; padding: 0 8px; margin: 0 0 0 10px; font-family: 'Futura W01 Book'; background: transparent; color: #c83c36; border: 2px solid #c83c36; -webkit-border-radius: 30px; border-radius: 30px; } .ticket-type:hover, .ticket-type.active { background: #c83c36; color: #fff; } .ticket-key, .ticket-key-individual, .ticket-key-group { font-size: 20px; display: inline-block; margin: 0 0 10px; } .ticket-key span, .ticket-key-group span, .ticket-key-individual span { display: inline-block; width: 30px; height: 30px; -webkit-border-radius: 30px; border-radius: 30px; vertical-align: middle; } /*INDIVIDUAL CELLS*/ .individuals .month>div>div { position: relative; display:block; float:left; width: 88px; height: 72px; margin: 1px 1px; background: rgba(57, 53, 54, .9); background: #323030; text-align: center; overflow: hidden; } .individuals .month>div>div.offset { background: #1f1e1e; } .individuals .month>div> div> a { font-size: 90%; color: #000; text-decoration: none; color: #eadf73; } .individuals .month>div> div> a:hover { } .individuals .month>div> div> a:first-child { display:block; width: 88px; height: 72px; padding: 20px 3px 10px; -webkit-border-radius: 80px; border-radius: 80px; } .individuals .month>div> div> a:nth-child(2) { position: absolute; display:block; bottom: 0; left: 0; width: 88px; height: 35px; padding: 3px 0 0; border-radius: 0 0 80px 80px; -moz-border-radius: 0 0 80px 80px; -webkit-border-radius: 0 0 80px 80px; } .individuals .month>div>div> p.dark { color: #fff; } .individuals .month>div>div> a.some { background: #e8ba02; } .individuals .month>div>div> a.some:hover { background: #df9d00; color: #fff; } .individuals .month>div>div> a.best { background: #577914; } .individuals .month>div>div> a.best:hover { background: #227700; color: #fff; } .individuals .month>div>div a.sold { text-decoration: none; background: #c83c36; color: #fff; } .individuals .month>div>div a.sold:hover { cursor: default; } .individuals .month p { margin: 0 0 5px !important; line-height: 1 !important; } .individuals .month>div>div p.date { position : absolute; top: 5px; left: 2px; font-family: 'Futura W01 Heavy', sans-serif; font-size: 85%!important; text-align: left; width: 100%; color: #000; } .individuals .month>div>div p:nth-child(2) { position: absolute; width: 100%; height: 10px; padding: 0; margin: 0; bottom: 30px; left:2px; line-height: 1.25 !important; } .call { clear: both; padding: 10px 0 0; width: 100%; text-align: center; font-size:160%; } .sched-nav { position:relative; margin:0 auto; width:630px; } #schedule_info #schedule .schedule_box { min-width: 8%; padding: 5px 2px; border: 1px solid #ddd } #location-info { color:#eadf73; } #location-info h4 { font-size:171%; line-height:1.4em; } #location-info small { color:#eadf73; } #location-info p { font-size:114%; } #location-info a { color:#b16d1d; } .map-seats { margin:35px 0; } .map-seats a { width:38%; float:left; margin:0 15px; text-align: center; } .map-seats a img { width:100%; display:block; } .dialog { display: none; } .ui-widget { font-family: "Knockout 30 A", "Knockout 30 B" !important; font-style: normal; font-weight: 400; } .ui-widget h3, .faq-block h3 { font-family: "Knockout 50 A", "Knockout 50 B" !important; text-transform: uppercase; font-size: 120%; font-weight: normal; color: #E7BC5E; margin-bottom: .125em; } .faq-block h3 { font-size: 150%; border-top: 2px solid #333; padding-top: .75em; } .faq-block a.premium:link, .faq-block a.premium:visited, .faq-block a.premium:active { color: #eadf73; text-decoration: underline; } .faq-block a.premium:hover { color: #ffffff; } .ui-dialog { position: absolute; padding:0px!important; border:0px!important; height:100%; width:100%; } .ui-widget-content { background: #333 !important; color: #fff !important; } .ui-dialog-content { padding:0px!important; } .ui-dialog-titlebar { display: block; position: relative; background: url(../_img/bg-gold.jpg) center center no-repeat; background-size: cover; color: #ffffff !important; text-align: center; padding: 5px 0; /* font: 40px/1 'Futura W01 Book', helvetica, arial, sans-serif; */ letter-spacing: 2px; border-radius:0px!important; color: #000 !important; font-family: "Knockout 50 A", "Knockout 50 B" !important; font-size: 150%; } .ui-widget-header { border:0px!important; background: url(../_img/bg-gold.jpg) center center no-repeat !important; background-size: cover; } .ui-dialog .ui-dialog-titlebar { padding: 0 1em !important; } .ui-corner-all { border-radius:0px!important; } .ui-dialog-titlebar-close { position: absolute; top: 15px; right: 10px; width: 25px!important; height: 34px!important; line-height: 20px; letter-spacing: 0px; text-decoration: none; color: #ffffff; background: transparent; /*background:url(../_img/close-btn.gif) no-repeat;*/ border:0px!important; outline: none; } .ui-dialog .ui-dialog-titlebar-close { right: .5em !important; top: 30% !important; } .ui-dialog-titlebar-close:after { content: '×'; color: #000; } .ui-widget-overlay { position: absolute; top: 0; left: 0; background-color: #000000!important; background-image:none!important; opacity: 0.9!important; filter: alpha(opacity = 90)!important; } /* OPT-IN FORM SECTION ----------------------------------------------------------------------------*/ #opt-in-form, #opt-in-form2 { margin:0px auto !important; padding:0px 25px; text-align: center; border-left:1px solid #2e2e2e; border-right:1px solid #2e2e2e; } #opt-in-form2 { width: 90%; left: 5%; right: 5%; top: 50%; border-left: none; border-right: none; padding: 0; max-width: 517px; margin: 0 auto; text-align: center; } @media (max-width: 767px) { #keyart { text-align: center; } #keyart .col-sm-6:last-of-type { display: inline-block; } } #opt-in-form label, #opt-in-form2 label { display: inline; } #opt-in-form input, #opt-in-form2 input { display: inline; background:#252525; color:#fff; border:none; padding:5px; text-align:center; font-size: 85%; } #opt-in-form input[type="email"] { width:25%; } #opt-in-form2 input[type="email"] { width:40%; } #opt-in-form input[type="zip"] { width:20%; } #opt-in-form2 input[type="zip"] { width:28%; } #opt-in-form ::-webkit-input-placeholder, #opt-in-form2 ::-webkit-input-placeholder { color:#fff; } #opt-in-form ::-moz-placeholder, #opt-in-form2 ::-moz-placeholder { color:#fff; } #opt-in-form :-ms-input-placeholder, #opt-in-form2 :-ms-input-placeholder { color:#fff; } #opt-in-form input:-moz-placeholder, #opt-in-form2 input:-moz-placeholder { color:#fff; } #opt-in-form input[type="submit"] { width:15%; color:#eadf73; } #opt-in-form2 input[type="submit"] { width:28%; color:#eadf73; background: #cc2c2b; } #opt-in-form .mc-field-group, #opt-in-form2 .mc-field-group { display: inline; } .form-thanks { color: #502115; } /* QUOTE ROTATION SECTION -----------------------------------------------------------------------------*/ #quotes { text-align: center; -webkit-overflow-scrolling: touch; height:300px; display:table; width:100%; padding: 0 5%; } #content #quotes { margin: 1em auto; } #quotes > * { -webkit-transform: translateZ(0); } #quotes .quotetext { font-size: 250%; color:#eadf73; line-height:.9em; letter-spacing: .05em; } #quotes .quotetext { font-size: 220%; } #quotes .quotetext.quotesmall { font-size: 200%; } #quotes .quotetext.quotebig { font-size: 230%; } #quotes cite { display: block; font-style: italic; color:#eadf73; margin-top: 3px; font-size: 80%; letter-spacing: .05em; } .quote-align { display:table-cell; vertical-align: top; width:100%; margin:0 auto; } #quotes li { display: none; } #quotes li:first-child { display: table-cell; } #content .quote-align { vertical-align: middle; } /* GALLERY SECTION ----------------------------------------------------------------------------*/ #video-list { margin:50px 0 0 95px; } .video-item { position: relative; vertical-align: top; display: inline-block; text-align: left; width: 130px } .video-item img.video-overlay { position: absolute; top: 3px; left: 3px; width: 100%; display: block; } .video-item:hover img.video-overlay { opacity: 0.7; } #video-display { text-align: center; margin: 0 0 30px 0; } #video-display iframe { text-align: center; margin: 0 auto; display: block; } .video-item { width: 229px; height: 149px; } .video-item img { height:147px; width:229px; } .video-item.featured { float: left; margin-right: 6px; width: 470px; height: 310px; } .video-item.featured img { width:470px; height:308px; } .video-item { display: inline-block; margin: 0 2px 12px; border: 1px solid #e8ba02; position:relative; } .video-item a { position: absolute; display: block; padding: 147px 0 0; width: 229px; height: 40px; background: rgba(102, 78, 25, .3) url('../_img/media-play-button-half.png') no-repeat center center; color: #ffffff; font-size: 18px; line-height: 1; text-align: center; -webkit-box-shadow: inset 0px 0px 30px 0px rgba(76, 54, 7, .5); box-shadow: inset 0px 0px 30px 0px rgba(76, 54, 7, .5); } .video-item.featured a { padding: 308px 0 0; width: 470px; height: 85px; font-size: 22px; -webkit-box-shadow: inset 0px 0px 70px 0px rgba(76, 54, 7, .5); box-shadow: inset 0px 0px 70px 0px rgba(76, 54, 7, .5); } .video-item a:hover { background: rgba(102, 78, 25, .6) url('../_img/media-play-button.png') no-repeat center center; -webkit-box-shadow: inset 0px 0px 30px 0px rgba(76, 54, 7, .8); box-shadow: inset 0px 0px 30px 0px rgba(76, 54, 7, .8); } .video-item.featured a:hover { padding: 308px 0 0; width: 470px; height: 85px; font-size: 22px; -webkit-box-shadow: inset 0px 0px 70px 0px rgba(76, 54, 7, .8); box-shadow: inset 0px 0px 70px 0px rgba(76, 54, 7, .8); } .video-item a span { position:absolute; text-align: center; width:100%; bottom:10px; left:0px; } #photo-display img { background-size: 100% 100%; } #photo-list { clear: both; width:100%; margin: 50px auto 0; text-align: center; } .photo-item { vertical-align: top; display: inline-block; text-align: center; margin: 0 5px 12px; } .photo-item, .photo-item img { width: 145px; height: 145px; } .photo-item a { position: absolute; display: block; width: 145px; height: 147px; opacity: 0.8; filter: alpha(opacity = 80); border: 1px solid #e8bb3e; } .photo-item a:hover { opacity: 1; filter: alpha(opacity = 100); border: 1px solid #e8bb3e; } #photo-display { position: relative; width: 100%; min-height:600px; overflow: hidden; margin-top:50px; } #photo-container { min-height:600px; } #photo-container, #photo-container img { position: relative; display: block; max-width: 100%; height: auto; overflow: hidden; margin: 0 auto; } #photo-caption { width: 100%; margin: 0 auto; text-align: center; } #photo-close, #photo-next, #photo-prev { position: absolute; } #photo-next, #photo-prev { font-size: 500%; top: 40%; } #photo-close { top: 0px; right: 0px; } #photo-next { right: 0; } #photo-prev { left: 0; } #photo-display { display: none; } .photos-content { min-height: 800px; } .photo-footnote { font-size:93%; text-align:center; margin-top:40px; } /* TOUR PAGE ----------------------------------------------------------------------------*/ #tour-list { clear:both; margin-top:30px; margin-bottom:30px; color:#000; } #tour-list .city, #tour-list .date, #tour-list .venue { display: inline-block; font-size:100%; } #tour-list .city { width: 18%; font-weight: bold; margin: 0 auto 35px; font-size: 19px; } #tour-list .date { width: 20%; } #tour-list a { color:#fff; background: #000; padding-left:20px; padding-right:20px; padding-top:7px; padding-bottom:5px; font-style: normal; font-weight: 400; text-transform: uppercase; border-radius: 5px; font-size: 20px; margin-left: 10px; } #tour-list hr { margin: 0 auto 15px; border-color: #413e28; display:none; } .chris-clark { text-align:center; font-size:94%!important; } /* PARTNERS PAGE ----------------------------------------------------------------------------*/ #partners { text-align: center; line-height: 2; margin-top:40px; } #partners img { margin: 0 20px; } /* INTERNATIONAL PAGES ----------------------------------------------------------------------------*/ #international h2 { height: 250px; } #international h3 { color: #efdf73; font: 28px/1.5 'Futura W01 Book', helvetica, arial, sans-serif; border-bottom: 1px solid #dbcc69; } #international p { font-size:130%; margin-bottom:40px; } .international-tickets { width: 90%; font-size: 150%; margin: 20px 0; list-style-position: outside; list-style-type: decimal; } .international-tickets li { padding:4px 0; } #get-tickets, .get-tickets { line-height: 1; color: #ffffff !important; padding: 4px 15px; background: #ca3d36; cursor: pointer; -webkit-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .5); box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .5); } #get-tickets:hover { color: #ffffff !important; opacity: 0.9; filter:alpha(opacity=90); } #info .get-tickets, #international #get-tickets { position: relative; margin: 0 auto; top: 0; } /* CHICAGO PAGE ----------------------------------------------------------------------------*/ .chicago h1 { text-align:left; margin-bottom:20px !important; line-height:40px; font-family: 'Knockout 30 A', 'Knockout 30 B'; margin:0px; font-size:50px;" } .chi-left { color:#fff; } .chi-left h3 { font-size:200%; } #content .chi-left p { font-size:130%; margin-bottom:30px; } .address { font-size:130%; display:block; margin-bottom:5px; } .chi-video { display:block; text-align:center; font-size: 130%; } .chi-video img { border:1px solid #e8bb3e; } #chi-block form { width: 100%; } #chi-block input { float: left; display: block; width: 65%; padding: 6px; margin: 0 4px 0; *margin: 0 4px 0 2px; background: #ffffff; color:#000; vertical-align: bottom; border: none; line-height: 1.5 \9; border: 1px solid #cccccc \9 !important; outline: 0; -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .5); box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, .5); font: 16px/1 'Futura W01 Book', helvetica, arial, sans-serif; } #chi-block #yhhlf-yhhlf { width: 250px; height: 22px; text-align: center; color: #000000; } #chi-block #submit { width: 100px; height: 33px; color: #ffffff; background: url(../_img/btn-send.png) no-repeat; cursor: pointer; text-indent:-9999px; } #chi-block #chi-confirmation { display: none; color: #ffffff; font: 20px/1 'Futura W01 Book', helvetica, arial, sans-serif; } .sanfran { font-size:116%; } #content .sanfran-blurb { margin-top:20px; font-size:123%; } .map-img { border:2px solid #e8bb3e; float:right; } /* UPGRADE PAGE ----------------------------------------------------------------------------*/ #upgd_content { text-align: center; } #upgd_content .msgbox { width: 940px; margin: 20px auto; padding: 10px; font-family:'Futura W01 Book', helvetica, arial, sans-serif; } #upgd_content .msgbox small { color:#fff; } #upgd_content h2 { margin-top:40px; font-size: 29px; } #upgd_content p { font-size:18px; } /* ============================================================================= MEDIA QUERIES ========================================================================== */ /* Extra Small Devices */ @media (max-width: 600px) { #cast-list>div img { float: none; margin: 0 auto 10px; } } @media (max-width: 767px) { .img-header { width: 100%; max-width: 566px; margin-top: 20px !important; padding: 0 20px; } h1 { font-size:225%; } #bar{ font-size: 150%; } #banner { height:155px; } #keyart { display:block; } #border { display:block; } video, #video-controls, #play-video { display:none; } .navbar-nav >li > a { text-align:center; } .navbar-toggle { font-size:116%; padding:2px 10px; } #opt-in-form input { display: block; margin: 0 auto; margin-bottom: 5px; width:80%!important; } #quotes { height:250px; font-size: 5vw; /*max-width: 496px; margin: 3em auto;*/ margin: 0 auto; top: 5.75%; } #quotes .quotetext { font-size:170%; } #quotes .quotetext.quotesmall { font-size: 140%; } #quotes .quotetext.quotebig { font-size: 190%; } #about-videos { margin:0 auto 20px; max-width:496px; } .carousel-control { font-size:36px; opacity:.8; width:9%; } .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { top:38%; } #about-right #about-videos { max-width:574px; } .tix-info { float:none; margin-bottom:50px; display:block; text-align: center } #opt-in-form, .btns { border:none; } .language, .opt-in, .social, .btns { margin-bottom:25px; } .btns a { margin-bottom:5px; } .ebook { margin-left:0px; margin-bottom:25px; text-align:center; } .theater-info { padding:40px 20px; } .info-btns { display:block; } #about-right { text-align:center; } #aud-form label { display:block; text-align:left; } #aud-form input { width:80%; } #aud-form #send { float:none; top:0; } #aud-form input[type="checkbox"] { margin: 10px 15px 0 0px; float:left; } #aud-form label.check { width:75%; } #partners img { display:block; margin:0 auto; } #video-list { margin:50px 0 0 0; text-align:center; } .video-item.featured { float:none; } #tour-list .city, #tour-list .date, #tour-list .venue { font-size:100%; display:block; width:100%; } #tour-list a { font-size:108%; } #chi-vid { margin-top:30px; clear:both; } #location-info { margin-top:60px; } #partners a { margin-bottom:10px; display:block; } .map-img { float:none; } .ticket-info h4 { margin: .5em; font-size: 100%; line-height: 1em; } } /* Small Devices */ @media (min-width: 768px) and (max-width: 991px) { .navbar-nav { float: none; } #bar{ font-size: 150%; } .navbar-nav >li#home > a { margin:0 6px 0 0; padding-left:0; } #keyart { /*height:294px;*/ } #banner { height:250px; } #player { float: left; top: 45px; width: 240px; margin: 0 auto; } #player { display:none !important; } .carousel-control { display:none; } .soc { margin:15px 0 0 0; } .aa { margin-top:30px; } #video-list { margin:50px 0 0 0; } #tour-list .city, #tour-list .date, #tour-list .venue { font-size:85%; } #tour-list a { font-size:100%; } #calendar { width:441px; } .individuals .month>div>div { width:61px; height:53px; } .individuals .month>div> div> a { font-size:70%; } .individuals .month>div> div> a:first-child { width:61px; height:53px; } .individuals .month>div> div> a:nth-child(2) { width:61px; height:22px; } .individuals .month>div>div p.date { font-size:60%!important; } .perf { display: block; position: absolute; top: 26px; right: 0px; font-size: 90%; width:184px; text-align:center; } .sched-nav { width:441px; } .map-seats a { margin:0px 13px; } } @media (max-width: 992px) { #quotes .quotetext { font-size:190%; } #quotes .quotetext.quotesmall { font-size: 180%; } #quotes .quotetext.quotebig { font-size: 250%; } #filters li { margin:0 0 10px; } #filters li:first-child { display:block; } .on-broadway { padding:20px 0; } .on-broadway big { font-size:145%; } .on-tour { max-width: 604px; margin: 0 auto; } margin: 0em 3em 0 2em; .on-tour big { font-size:152%; } #near-you { padding:1em 2em; } .tour-city { margin:0 2em; } .slimScrollBar, .slimScrollRail { right:7px!important; } .tour-imgs { text-align: center; } .tour-imgs img { float:none!important; margin-bottom:20px; } .tix-info { font-size:130%; } .call-det big { font-size:192%; } #open-call .call-det p { font-size:105%; } } @media (min-width: 768px) and (max-width: 1199px) { .navbar-nav >li > a { padding:12px 3px; font-size:120%; } #about-right .info-btns { display:block; } #quotes { height: 320px !important; /* margin-top: -20px; */ } } /* Medium Screens/Desktops */ @media (min-width: 992px) and (max-width: 1199px) { .navbar-nav >li#home > a { margin:0 6px 0 0; padding-left:0; } #banner { height:325px; } #quotes { height: 440px; } .on-broadway big { font-size:190%; } .soc { margin:15px 7px 0 0; } .aa { margin-top:10px; } #calendar { width:539px; } .individuals .month>div>div { width:75px; height:67px; } .individuals .month>div> div> a:first-child { width:67px; height:67px; } .individuals .month>div> div> a:nth-child(2) { width:67px; height:30px; } .perf { display: block; position: absolute; top: 33px; right: 6px; font-size: 90%; } .sched-nav { width:539px; } } @media (max-width: 1199px) { #opt-in-form label { display:block; } #opt-in-form input[type="email"] { width:40%; } #opt-in-form input[type="zip"] { width:30%; } #opt-in-form input[type="submit"] { width:20%; } .btns a { margin-bottom:5px; font-size:93%; } #cast-list>div img { margin-bottom:10px; } } /* Large Screens/Desktops */ @media (min-width: 1200px) { .navbar-nav >li > a{ font-size:120%; margin: 0 3px 0; letter-spacing: 0.02em; } .on-broadway, .on-tour { margin-left:20px; margin-right:20px; } .language { text-align:left; padding-right:1px; } .lang-select { display:inline; } #about-right { padding-left:70px; } } @media (min-width:481px) and (max-width: 768px) { #calendar { width:441px; margin:0 auto; } .individuals .month>div>div { width:61px; height:53px; } .individuals .month>div> div> a { font-size:70%; } .individuals .month>div> div> a:first-child { width:61px; height:53px; } .individuals .month>div> div> a:nth-child(2) { width:61px; height:22px; } .individuals .month>div>div p.date { font-size:60%!important; } .perf { display: block; position: absolute; top: 2px; right: 0px; font-size: 103%; width:184px; text-align:center; } .sched-nav { width:441px; } } @media (max-width: 580px) { #banner { height:100px; } .on-broadway { padding:20px 0; } .on-broadway big { font-size:130%; } .on-tour big { font-size:130%; } .on-broadway a { max-width:90%; } #near-you { padding:1em 2em; } #near-you h2, #near-you .city { font-size:130%; } #near-you .pull-right { width:40%; } .tour-city { margin:0 2em; } .tour-city .city { font-size:110%; } .tour-city a { font-size:93%; } .date { font-size:93%; } .slimScrollBar, .slimScrollRail { right:7px!important; } .info-btns a { display:block; margin-bottom:5px; } .video-item.featured, .video-item.featured a:hover, .video-item.featured a { width:229px; height:147px; } .video-item.featured img { height:145px; } .video-item.featured a:hover, .video-item.featured a { padding:145px 0 0; font-size:18px; } #calendar { width:294px; margin:0 auto; } .individuals .month>div>div { width:40px; height:38px; margin:1px 1px; } .individuals .month>div> div> a { font-size:53%; } .individuals .month>div>div p.date { font-size: 47%!important; top:2px; } .individuals .month>div> div> a:first-child { width:40px; height:38px; padding-top:11px; } .individuals .month>div> div> a:nth-child(2) { width:40px; height:18px; } .perf { display: block; position:relative; top:0; left:0; font-size: 103%; width:100%; text-align:center; margin:25px 0 0; } .sched-nav { width:294px; } .call-det { width:320px; margin:auto; } .ticket-info h4 { font-size: 80%; } } @media (min-width: 768px){ .navbar-nav { float: right; margin: 0 auto; display: inline-block; padding-top:10px; } } @media (max-width: 767px){ .navbar-nav { float: none; margin: 0 auto; display: inline-block; text-align: center !important; width: 100%; } } .individuals .month>div.day-names>div { height:auto !important; color: #000; } @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu #menu-button { display: none; } #cssmenu { font-family: Montserrat, sans-serif; float: right; margin-top: 5px; } #cssmenu > ul > li { float: left; } #cssmenu.align-center > ul { font-size: 0; text-align: center; } #cssmenu.align-center > ul > li { display: inline-block; float: none; } #cssmenu.align-center ul ul { text-align: left; } #cssmenu.align-right > ul > li { float: right; } #cssmenu > ul > li > a { padding: 17px; font-size: 14px; letter-spacing: 1px; text-decoration: none; color: #fff; text-transform: uppercase; } #cssmenu > ul > li:hover > a { color: #ffffff; } #cssmenu > ul > li.has-sub > a { padding-right: 30px; } #cssmenu > ul > li.has-sub > a:after { position: absolute; top: 22px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; } #cssmenu > ul > li.has-sub > a:before { position: absolute; top: 19px; right: 14px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } #cssmenu > ul > li.has-sub:hover > a:before { top: 23px; height: 0; } #cssmenu ul ul { position: absolute; left: -9999px; } #cssmenu.align-right ul ul { text-align: right; } #cssmenu ul ul li { height: 0; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } #cssmenu li:hover > ul { left: auto; } #cssmenu.align-right li:hover > ul { left: auto; right: 0; } #cssmenu li:hover > ul > li { height: 35px; } #cssmenu ul ul ul { margin-left: 100%; top: 0; } #cssmenu.align-right ul ul ul { margin-left: 0; margin-right: 100%; } #cssmenu ul ul li a { border-bottom: 1px solid #000; padding: 11px 15px; width: 170px; font-size: 12px; text-decoration: none; color: #000; text-transform: uppercase; font-weight: 400; background: #dcc671; } #cssmenu ul ul li:last-child > a, #cssmenu ul ul li.last-item > a { border-bottom: 0; } #cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover { color: #fff; background: #000; } #cssmenu ul ul li.has-sub > a:after { position: absolute; top: 16px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; } #cssmenu.align-right ul ul li.has-sub > a:after { right: auto; left: 11px; } #cssmenu ul ul li.has-sub > a:before { position: absolute; top: 13px; right: 14px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } #cssmenu.align-right ul ul li.has-sub > a:before { right: auto; left: 14px; } #cssmenu ul ul > li.has-sub:hover > a:before { top: 17px; height: 0; } @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { #cssmenu { width: 100%; } #cssmenu ul { width: 100%; display: none; } #cssmenu.align-center > ul { text-align: left; } #cssmenu ul li { width: 100%; border-top: 1px solid rgba(120, 120, 120, 0.2); } #cssmenu ul ul li, #cssmenu li:hover > ul > li { height: auto; } #cssmenu ul li a, #cssmenu ul ul li a { width: 100%; border-bottom: 0; background: #dcc671; color: #000; } #cssmenu ul li a:hover, #cssmenu ul ul li a:hover { width: 100%; border-bottom: 0; background: #000; color: #fff; } #cssmenu > ul > li { float: none; } #cssmenu ul ul li a { padding-left: 25px; } #cssmenu ul ul ul li a { padding-left: 35px; } #cssmenu ul ul li a { background: #dcc671; color: #000; } #cssmenu ul ul li:hover > a, #cssmenu ul ul li.active > a { background: #000; color: #fff; } #cssmenu ul ul, #cssmenu ul ul ul, #cssmenu.align-right ul ul { position: relative; left: 0; width: 100%; margin: 0; text-align: left; } #cssmenu > ul > li.has-sub > a:after, #cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before { display: none; } #cssmenu #menu-button { display: block; padding: 17px; color: #fff; cursor: pointer; font-size: 12px; text-transform: uppercase; font-weight: 700; } #cssmenu #menu-button:after { position: absolute; top: 22px; right: 17px; display: block; height: 4px; width: 20px; border-top: 2px solid #dddddd; border-bottom: 2px solid #dddddd; content: ''; } #cssmenu #menu-button:before { position: absolute; top: 16px; right: 17px; display: block; height: 2px; width: 20px; background: #dddddd; content: ''; } #cssmenu #menu-button.menu-opened:after { top: 23px; border: 0; height: 2px; width: 15px; background: #ffffff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #cssmenu #menu-button.menu-opened:before { top: 23px; background: #ffffff; width: 15px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #cssmenu .submenu-button { position: absolute; z-index: 99; right: 0; top: 0; display: block; border-left: 1px solid rgba(120, 120, 120, 0.2); height: 46px; width: 46px; cursor: pointer; } #cssmenu .submenu-button.submenu-opened { background: #262626; } #cssmenu ul ul .submenu-button { height: 34px; width: 34px; } #cssmenu .submenu-button:after { position: absolute; top: 22px; right: 19px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; } #cssmenu ul ul .submenu-button:after { top: 15px; right: 13px; } #cssmenu .submenu-button.submenu-opened:after { background: #ffffff; } #cssmenu .submenu-button:before { position: absolute; top: 19px; right: 22px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; } #cssmenu ul ul .submenu-button:before { top: 12px; right: 16px; } #cssmenu .submenu-button.submenu-opened:before { display: none; } } @media (max-width:767px) { .pull-right { float: left !important; margin-left: 10px !important; margin-top: 0px; } #tour-list .city { width: 100%; font-weight: bold; font-size: 19px; margin: 0px 0px 0px 0px; padding-left: 10px; clear: both; padding-top: 20px; } .venue { display: inline-block; font-size: 100%; margin-bottom: 10px; padding-left: 10px; } #tour-list .date { width: 100%; padding-left: 10px; } } @media (max-width:480px) { #tour-list a { color: #fff; background: #000; padding-left: 20px; padding-right: 20px; padding-top: 7px; padding-bottom: 7px; font-style: normal; font-weight: 400; text-transform: uppercase; border-radius: 5px; margin-left: 10px; font-size: 14px !important; } } section { -webkit-perspective: 500px; perspective: 500px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .flip-container { position: relative; display: inline-block; } .flip-container > div > div { backface-visibility: hidden; -webkit-backface-visibility: hidden; top: 0; left: 0; } .flip-container .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .flip-container > div > div + div { transform: rotateX(180deg) scaleX(-1) scaleY(-1); position: absolute; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { -webkit-transform: rotateY(180deg) !important; -moz-transform: rotateY(180deg) !important; -ms-transform: rotateY(180deg) !important; transform: rotateY(180deg); } .vertical.flip-container:hover .flipper, .vertical.flip-container.hover .flipper{ transform: rotateX(180deg); } .flip-container, .flip-container > div > div { max-width: 160px; width:100%; height: 100%; max-height: 269px; margin-bottom:15px; } @media (max-width:768px) { .flip-container, .flip-container > div > div { margin-bottom:0px; } } /* .flip-container { perspective: 1000px; } .flip-container:active .flipper, .flip-container.active .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { max-width: 160px; max-height: 269px; margin-bottom:15px; } @media (max-width:768px) { .flip-container, .front, .back { margin-bottom:0px; } } .flipper { transition: 0.4s; transform-style: preserve-3d; } .front, .back { backface-visibility: hidden; transform: rotateY(180deg); top: 0; left: 0; } .front { z-index: 2; transform: rotateY(0deg); } .back { transform: rotateY(180deg); position: absolute; } */ button { background:#9f3628; border-radius: 20px; border: 0; border-radius: 4px; padding: 7px 15px; font-size: 16px; color: #FFFFFF; cursor: pointer; border: 1px solid #9f3628; &:focus { outline: none; margin:10px; } &:hover { background: lighten(#89BDD3, 10%); } } .popup { background:#9f3628; border-radius: 20px; border: 1px solid #; padding:20px; display: none; max-width: 600px; z-index: 5001; margin:0px auto; left:0; right:0; top: 35%; position: absolute; width: 80%; } .popup h3 { font-size: 40px; line-height: 1em; margin-top: 0px; margin-bottom: 30px; } a { cursor: pointer !important; } #opt-in-form input[type="email"] { width: 80% !important; } input[type="submit"] { width: 150px !important; background: url('../_img/CLUE_201711Final_V2_BigCardTexture.png') !important; border-radius: 20px; border: 0; border-radius: 4px; padding: 5px 15px; font-size: 20px; color: #FFFFFF !important; font-family: 'Open Sans Condensed', sans-serif; cursor: pointer; border: 1px solid #9f3628; margin:10px; font-weight:100; } #opt-in-form input, #opt-in-form2 input { display: inline; background: #252525 !important; color: #333 !important; border: none; padding: 5px; width: 15% !important; text-align: center; font-size: 85%; } input { width: 85% !important; background: #fff; min-height: 50px; padding: 10px; border: 0px; color: #333 !important; font-size:18px; }