/*------------------------------------------- Reusable -------------------------------------------*/ /* !Revolvers */ .revolver .viewport { position: relative; } .revolver .cylinder { left: 0; position: absolute; top: 0; -webkit-transition: left 0.4s ease-in-out; -moz-transition: left 0.4s ease-in-out; -ms-transition: left 0.4s ease-in-out; -o-transition: left 0.4s ease-in-out; transition: left 0.4s ease-in-out; } .revolver .triggers { float: right; } .revolver .trigger { background: url($s3/images/revolver_arrows.png) no-repeat left top; cursor: pointer; display: block; float: left; height: 23px; margin: 0 0 0 5px; text-indent: -99999px; width: 23px; } .revolver .trigger.previous { background-position: left top; } .revolver .trigger.previous:hover { background-position: left bottom; } .revolver .trigger.next { background-position: right top; } .revolver .trigger.next:hover { background-position: right bottom; } .revolver .trigger.disabled, .revolver .trigger.disabled:hover { cursor: default; opacity: 0.5; } .revolver .trigger.previous.disabled:hover { background-position: left top; } .revolver .trigger.next.disabled:hover { background-position: right top; } .event_header { letter-spacing: 0.025em; text-transform: none; } .event_sub_header { } a small { font-size: 12px; } /*------------------------------------------- Structure -------------------------------------------*/ html, body { min-height: 100%; min-width: 100%; } #wallpaper { background: #333; } #nav_gradient { background: transparent; height: 60px; left: 0; position: absolute; top: 0; width: 100%; z-index: 2; } #nav_gradient.hide { opacity: 0; -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -ms-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear; } /* !Header */ .consistent_header { background: #121819; height: 60px; line-height: 60px; position: relative; z-index: 4; } .consistent_header nav a { color: #FFF; float: left; font-family: $interstate_light; font-size: 14px; } .consistent_header nav a::after { content: "/"; color: #999; display: inline-block; font-size: 12px; margin: 0 7px; } .consistent_header nav a:last-child::after { display: none; } .consistent_header a:hover { color: #DA001A; } .consistent_header .donate, .consistent_header .cart, .consistent_header .shop { float: right; color: #FFF; font-family: $interstate; font-size: 14px; margin: 0 0 0 20px; } .consistent_header .donate::before, .consistent_header .shop::before, .consistent_header .cart::before { content: ""; float: left; height: 16px; width: 16px; margin: 22px 7px 0 0; } .consistent_header .donate::before { background: url(../images/persistent-nav-icons.svg) no-repeat 0px 0px; } .consistent_header .cart::before { background: url(../images/persistent-nav-icons.svg) no-repeat -32px 0px; } .consistent_header .shop::before { background: url(../images/persistent-nav-icons.svg) no-repeat -48px 0px; } #header { padding-top: 30px; position: relative; z-index: 3; } #header .branding { background: url($s3/images/logo_main_white.png) no-repeat center top; display: block; float: left; height: 103px; margin: 0; text-indent: -999999px; width: 101px; } #header .branding.masked { background: none; position: relative; } #header .branding.masked .mask { display: block; left: 0; overflow: hidden; position: absolute; text-indent: -999999px; width: 101px; -webkit-transition: height 0.3s ease-in color 0.3s ease-in; -moz-transition: height 0.3s ease-in color 0.3s ease-in; -ms-transition: height 0.3s ease-in color 0.3s ease-in; -o-transition: height 0.3s ease-in color 0.3s ease-in; transition: height 0.3s ease-in color 0.3s ease-in; } #header .branding.masked .white { background: url($s3/images/logo_main_white.png) no-repeat center bottom; height: 103px; bottom: 0; } #header .branding.masked .black { background: url($s3/images/logo_main_black.png) no-repeat center top; height: 0px; top: 0; } #header .branding.unmasked .white { height: 0px; } #header .branding.unmasked .black { height: 103px; } #header .branding svg { display: block; width: 77px; height: 105px; position: absolute; top: 0; left: -10px; fill: currentColor; } #header .branding.masked { color: #FFFFFF; } #header .branding.unmasked { color: #000000; } #header h1 { margin: 0; } #header .nav { float: right; max-width: 858px; } #header .top_nav { clear: both; float: right; } #header .top_nav .goog-te-gadget-simple { height: 26px; } #header .main_nav { clear: both; float: right; margin: 15px 0 0; } #header .main_nav .item { background: url($s3/images/nav_bg_black.png) repeat; display: block; height: 60px; margin: 0 0 0 1px; top: 0; position: relative; width: 140px; } .ready #header .main_nav .item { float: left; } #header .main_nav .item a { background: transparent; color: #fff; display: block; font-family: $interstate_condensed; font-size: 18px; height: 60px; padding: 11px 10px; position: relative; text-transform: uppercase; width: 140px; z-index: 2; } #header .main_nav .item, #header .main_nav .item a { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } #header .main_nav .item.last { background: url($s3/images/nav_bg_red.png) repeat; } #header .main_nav .item.last a { background: url($s3/images/nav_icon_arrow.png) no-repeat right center; } #header .sub_nav { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); display: none; left: 0; margin: 0; overflow: hidden; position: absolute; top: 60px; z-index: 1; } #header .sub_nav .item { background: #444; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); height: auto; line-height: 1.2; margin: 1px 0 0; width: 281px; } #header .sub_nav .item a { color: #fff; font-family: $interstate; display: block; font-size: 14px; height: auto; padding: 13px 10px; text-transform: uppercase; width: auto; } #header .sub_nav .item.last { box-shadow: none; } #header .main_nav .item:hover .sub_nav { display: block; } #header .main_nav .item:hover a { background: #444; color: #fff; } #header .main_nav .item.last:hover a { background: $spy_red url($s3/images/nav_icon_arrow.png) no-repeat right center; } #header .main_nav .item:hover .sub_nav { display: block; } #header .sub_nav .item:hover a { background: #111; color: #fff; } #header .search_form { float: right; margin: 0 0 0 2px; } #header .search_form fieldset { background: #fff; } #header .search_form input { background: #fff; border: none; height: 26px; padding: 5px 10px; width: 140px; } #header .search_form input.submit { background: #fff url($s3/images/icon_search.png) no-repeat center; height: 26px; text-indent: -99999px; width: 34px; } #header .mandarin_callout { float: right; margin: 0 0 0 2px; } /* !Footer */ #footer { background: url($s3/images/footer_edge.png) repeat; clear: both; margin: 0; padding: 10px 0 0; position: relative; z-index: 2; } #footer .recruited { background: #333; padding: 10px 0; } #footer .recruited h5 { background: url($s3/images/footer_agents_crosshair.png) no-repeat left top; color: #fff; font-family: $guilder; font-size: 40px; margin: 0 0 20px 10px; padding: 26px 0 0 32px; text-transform: uppercase; } #footer .recruited h5 strong { color: $spy_red; display: block; font-family: $interstate; font-size: 46px; letter-spacing: -0.02em; text-indent: -0.01em; } #footer .recruited img { height: 48px; margin: 10px 0 0; width: 48px; } #footer .recruited .block { float: left; margin: 10px 3px 0; width: 48px; height: 48px; } #footer .recruited .block:hover:after { position: absolute; content: "x"; color: #FFF; background: #DA001A; border-radius: 100%; height: 16px; width: 16px; font-size: 10px; line-height: 16px; text-align: center; margin: -8px 0 0 -10px; font-weight: bold; } #footer .recruited .block img { margin: 0; } #footer .twitter_button { margin: 30px 20px 0 0; } #footer .facebook_button { margin: 28px 0 0; } #footer .footer { background: #222; padding: 25px 0; } #footer .footer a:hover { color: #fff; } #footer .footer p { color: #fff; font-size: 15px; margin: 0 0 15px; } #footer .footer h4, #footer .mission_statement h4 { color: #fff; font-family: $interstate; font-size: 17px; margin: 0 0 15px; text-transform: uppercase; } #footer .branding { background: url($s3/images/logo_footer.png) no-repeat center; display: block; height: 142px; margin: 0 0 0 18px; overflow: hidden; text-indent: -99999px; width: 75px; } #footer .social a { background: url($s3/images/footer_social.png) no-repeat left top; color: #fff; display: block; font-family: $interstate; font-size: 15px; margin: 0 0 3px 0; padding: 2px 0 2px 23px; } #footer .social a:hover { color: $spy_red; } #footer .social a.facebook { background-position: 0 1px; } #footer .social a.twitter { background-position: 0 -26px; } #footer .social a.flickr { background-position: 0 -55px; } #footer .social a.youtube { background-position: 0 -88px; } #footer .social a.spyblog { background-position: 0 -116px; } #footer .social a.spycast { background-position: 0 -146px; } #footer .social a.foursquare { background-position: 0 -175px; } #footer .social a.newsletter { background-position: 0 -204px; } #footer .social a.pinterest { background-position: 0 -269px; } #footer .social a.instagram { background-position: 0 -239px; } #footer .hours p { margin: 0; } #footer .hours .times { font-family: $guilder; font-size: 60px; text-transform: uppercase; } #footer .hours .times.small { font-size: 40px; } #footer .hours .times span { background: #111; border-radius: 4px; color: #F3F3F8; display: inline-block; line-height: 1.1; margin: 0 3px 0 0; padding: 0 5px 0 9px; } #footer .mission_statement { background: #111; min-height: 92px; overflow: hidden; padding: 25px 0; position: relative; } #footer .mission_statement p.copyright { color: #A7A7A7; font-size: 14px; margin: 0; position: absolute; text-align: right; bottom: 25px; right: 25px; } #footer .mission_statement p.copyright a { color: #A7A7A7; } #footer .mission_statement p.copyright a:hover { color: #fff; } #footer .mission_statement p.mission { color: #FFF; margin: 0; } /* !Home Feature */ #feature { background: #333; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 1; } #feature .loading { background: #111 url($s3/images/feature_loading.gif) no-repeat center; border-radius: 100%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.75); height: 71px; left: 50%; margin: 0 0 0 -35px; overflow: hidden; padding: 0; position: absolute; text-align: center; text-transform: uppercase; top: 50%; width: 71px; z-index: 5; } #feature .loading.hide { opacity: 0; } #feature .relative { height: 100%; margin: 0 auto; position: relative; width: 100%; } #feature > .relative { height: 100%; width: 100%; } #feature .slider { height: 100%; overflow: hidden; position: absolute; width: 100%; -webkit-transition: top 1s ease-out; -moz-transition: top 1s ease-out; -ms-transition: top 1s ease-out; -o-transition: top 1s ease-out; transition: top 1s ease-out; } #feature .scene { background: #333; top: 0; z-index: 2; } #feature .object { background: #eee; top: -100%; z-index: 1; } #feature .object .item { left: 50%; margin: -480px 0 0 -480px; position: absolute; top: 0; -webkit-transition: top 1s ease-out; -moz-transition: top 1s ease-out; -ms-transition: top 1s ease-out; -o-transition: top 1s ease-out; transition: top 1s ease-out; } #feature .scene .toggle { height: 1px; opacity: 0; pointer-events: none; position: absolute; width: 1px; z-index: 10; } #feature .scene .toggle span { border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 100%; cursor: pointer; display: block; height: 30px; margin: -15px 0 0 -15px; width: 30px; } #feature .scene .toggle strong { background: rgba(255, 255, 255, 1); border-radius: 100%; display: block; height: 18px; margin: 4px; width: 18px; } #feature .scene .toggle span { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; -webkit-animation: toggle_blip 1s ease-out infinite; -moz-animation: toggle_blip 1s ease-out infinite; -ms-animation: toggle_blip 1s ease-out infinite; -o-animation: toggle_blip 1s ease-out infinite; animation: toggle_blip 1s ease-out infinite; } #feature .scene .mask { border-radius: 100%; height: 0; overflow: hidden; position: absolute; width: 0; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } #feature .scene .background { position: absolute; } #feature.animated .scene .mask, #feature.animated .scene .background { -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -ms-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } #feature.unmasked .scene .toggle { opacity: 0.8; pointer-events: all; } #feature.unmasked .scene .toggle:hover span { border-color: $spy_red; } #feature.unmasked .scene .toggle:hover strong { background-color: $spy_red; } #feature .title { position: absolute; top: 40%; width: 100%; z-index: 3; } #feature .title .row { margin-top: -75px; overflow: visible; } #feature .title h2, #feature .title p { position: absolute; width: auto; -webkit-transition: left 1.25s ease-out, right 1.25s ease-out, opacity 0.25s linear, top 1s ease-in; -moz-transition: left 1.25s ease-out, right 1.25s ease-out, opacity 0.25s linear, top 1s ease-in; -ms-transition: left 1.25s ease-out, right 1.25s ease-out, opacity 0.25s linear, top 1s ease-in; -o-transition: left 1.25s ease-out, right 1.25s ease-out, opacity 0.25s linear, top 1s ease-in; transition: left 1.25s ease-out, right 1.25s ease-out, opacity 0.25s linear, top 1s ease-in; } #feature .title h2 { color: $spy_red; font-family: $guilder_alt; font-size: 160px; opacity: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); text-transform: uppercase; top: 0; } #feature .title p { color: #fff; font-family: $interstate; font-size: 36px; left: 150%; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); text-transform: uppercase; top: 166px; } /* #feature .title h2 { background: rgba(0, 0, 0, 0.5); padding: 5px 15px 0; } #feature .title p { background: rgba(0, 0, 0, 0.5); padding: 0 15px; } */ #feature .title h2 { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.95); } #feature .title p { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.95); } #feature .description { position: absolute; width: 100%; z-index: 3; -webkit-transition: top 1s ease-out; -moz-transition: top 1s ease-out; -ms-transition: top 1s ease-out; -o-transition: top 1s ease-out; transition: top 1s ease-out; } #feature .description .row { margin-top: -5%; overflow: visible; } #feature .block { background: url($s3/images/feature_description_arrow.png) no-repeat left 50px; padding: 0 0 0 8px; position: absolute; right: 4.65%; } #feature .block .inner { background: url($s3/images/feature_description_repeat.png) repeat; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); color: #fff; padding: 20px; } #feature .block h3 { color: #fff; font-family: $guilder; font-size: 40px; line-height: 1.3; margin: 0; text-transform: uppercase; } #feature .block h4 { color: #F7F6F2; font-size: 15px; margin: 0 0 10px 0; } #feature .block p { color: #F7F6F2; margin: 0 0 10px; } #feature .block .more { background: url($s3/images/feature_link_arrow.png) no-repeat right center; color: $spy_red; font-size: 15px; padding: 0 10px 0 0; } #feature .description { top: -300px; } #feature .title h2, #feature .title p { left: -125%; } #feature .title h2.show { opacity: 1; left: 4.65%; } #feature .title p.show { opacity: 1; left: 4.65%; } #feature.right_side .title h2, #feature.right_side .title p { left: auto; right: -75%; } #feature.right_side .title h2.show { opacity: 1; right: 4.65%; } #feature.right_side .title p.show { opacity: 1; right: 4.65%; } #feature .description.show .block { right: 4.65%; } #feature .description p { opacity: 1; } #feature.reveal .scene { top: 100%; } #feature.reveal .object { top: 0; } #feature.reveal .object .item { left: 50%; top: 50%; } #feature h2.hide, #feature p.hide { top: 1000px; } #feature.revealed .description, #feature.revealed .object .item { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } #alert { background: #FFE160; padding: 15px 25px; } #alert h2 { background: url($s3/images/alert_icon.png) no-repeat left center; border-right: 1px solid #D1B84F; float: left; font-family: $guilder; font-size: 45px; margin: 0 15px 0 0; padding: 0 15px 0 50px; text-transform: uppercase; } #alert p { font-size: 16px; line-height: 45px; margin: 0; overflow: hidden; width: auto; } /* Home Email Tab */ #home_email_tab { background: url($s3/images/nav_bg_red.png); color: #fff; left: 100%; padding: 10px 5px 20px; position: absolute; text-align: center; width: 65px; } #home_email_tab .psst { color: #fff; font-size: 12px; } #home_email_tab .disclosure { display: none; } #home_email_tab small { font-size: 12px; font-weight: bold; } #home_email_tab .percent { font-family: $guilder; font-size: 36px; margin-bottom: 4px; width: 65px; overflow: visible; text-align: center; } #home_email_tab .click { color: #121819; font-size: 12px; font-weight: bold; } /* !Home Events Callout */ .home .events { height: 375px; margin: 0 0 25px; overflow: visible; } .home .events h5 { float: left; font-family: $interstate_light; font-size: 16px; letter-spacing: 0.05em; margin: 3px 0 15px 0; text-transform: uppercase; } .home .events .block_shadow { clear: both; margin: 10px 0 20px; } .home .events .block_content { background: #fff url($s3/images/content_blockshadow_border.png) repeat; } .home .events .viewport { height: 180px; overflow: hidden; width: 515px; } .home .events .cylinder { height: 180px; width: 10000px; } .home .events figure { float: left; overflow: hidden; } .home .events img { background: none; float: left; padding: 0; width: 515px; } .home .events .event { background: url($s3/images/events_circle.png) no-repeat left top; display: none; margin: 0 -10px 10px -5px; } .home .events .event h3 { font-family: $interstate_condensed_bold; font-size: 25px; margin: 0 15px 5px 0; text-transform: none; } .home .events .event h3 a { color: #111; } .home .events .event h3 a:hover { color: $spy_red; } .home .events .event.active { display: block; } /* !Home Exhibit Callout */ .home .exhibits { margin: 22px 0 25px; } .home .exhibits h5 { float: left; font-family: $interstate_light; font-size: 16px; letter-spacing: 0.05em; margin: 3px 0 15px 0; text-transform: uppercase; } .home .exhibits .viewport { clear: both; height: 210px; overflow: hidden; position: relative; width: 535px; } .home .exhibits .cylinder { height: 210px; width: 100000px; } .home .exhibits .item { float: left; margin: 0 12px 0 0; width: 170px; } .home .exhibits h4 { color: #111; font-family: $interstate_condensed; font-size: 20px; margin: 5px 0 0; } .home .exhibits h4 a { color: #111; } .home .exhibits h4 a:hover { color: $spy_red; } .home .exhibits p { color: #111; font-size: 15px; } .home .exhibits .item > a { display: block; height: 137px; overflow: hidden; width: 170px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .home .exhibits .item > a:hover { border: 4px solid $spy_red; } .home .exhibits .item > a:hover img { margin: -4px; } /* .home .callout.highlight_group figure { width: 280px; } */ /* !Home Ticker Callout */ .home .ticker { background: none; padding: 20px 0; } .home .ticker h5 { float: left; font-family: $interstate_light; font-size: 16px; letter-spacing: 0.05em; margin: 3px 0 15px 0; text-transform: uppercase; } .home .ticker_wrapper .edge { background: url($s3/images/paper-edge_s1.jpg) no-repeat center; display: block; height: 43px; width: 537px; } /* !Page */ .content_shadow { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); margin-bottom: 30px; position: relative; width: 980px; z-index: 2; } #page { background: #fff; margin-top: 30px; margin-bottom: 0; padding: 40px 0; } #page .content { padding: 0 0 0 30px; width: 570px; } #page .sidebar { margin-right: 0; width: 335px; } #page.home { margin: 0; } #page.home .content { border-right: 1px solid #E0E0E0; padding-right: 35px; width: 601px; } #page.sub .content { width: 610px; position: relative; } #page.basic .content { width: 800px; } #page.full .content { width: 930px; } #page.calendar .content { width: 960px; padding-right: 30px; } #page.sub .top_feature { padding: 0 15px 0 30px; width: 97.9167%; } #page.is_404 { background: #fff url($s3/images/bg_404.jpg) no-repeat center 12px; height: 464px; } #page.is_404 h1 { color: #fff; margin-bottom: 110px; } #page.is_404 .breadcrumb a { color: #fff } /* !Breacrumb */ .breadcrumb { margin: 0 0 30px 0; overflow: hidden; } .breadcrumb .item { background: url($s3/images/breadcrumb_divider.png) no-repeat right center; color: $spy_red; display: /* inline-block */; float: /* left */; font-size: 14px; line-height: 1.3; padding: 0 14px 0 0; margin: 0 5px 3px 0; text-transform: uppercase; } .breadcrumb .item.last { background: none; } .breadcrumb a { color: #111; } .breadcrumb a:hover { color: $spy_red; } /* !Sub Navigation */ .sub_navigation { margin: 0; padding: 54px 0 62px 0; position: relative; width: 335px; } .sub_navigation .edge, .sub_navigation .clip { display: block; right: -12px; position: absolute; } .sub_navigation .clip { background: url($s3/images/subnav_paper_clip.png) no-repeat right center; height: 46px; top: 60px; width: 91px; } .sub_navigation .top { background: url($s3/images/subnav_paper_top.png) no-repeat right center; height: 54px; top: 0; width: 335px; } .sub_navigation .bottom { background: url($s3/images/subnav_paper_bottom.png) no-repeat right center; bottom: 0; height: 62px; width: 335px; } .sub_navigation .repeat { background: url($s3/images/subnav_paper_repeat.png) repeat-y right top; margin-right: -12px; } .subnav { margin: 0; padding: 0 40px 0 60px; } .subnav li { background: none; border-bottom: 1px solid #DADADA; margin: 0; padding: 0; } .subnav li.last { border: none; } .subnav a { color: #111; display: block; font-family: $interstate; font-size: 16px; line-height: 1.1; padding: 13px 0; text-transform: uppercase; } .subnav a.active, .subnav a.sub_current { color: $spy_red; } .subnav a:hover { color: $spy_red; } .subnav .has_subnav > a.sub_current { color: #111; } .subnav li.has_subnav a { padding-bottom: 5px; } .subnav .subnav li { border: none; } .subnav .subnav a { font-family: $interstate; font-size: 15px; padding: 5px 0 5px 18px; text-transform: none; } .subnav .subnav a.active { background: url($s3/images/subnav_marker_child.png) no-repeat 6px 8px; } .subnav .subnav .has_subnav > a.active { background: url($s3/images/subnav_marker_child_open.png) no-repeat 3px 10px; } .subnav .subnav { padding: 0 0 10px 0; } .subnav .subnav .subnav { padding: 0 0 2px 18px; } .subnav .subnav .subnav a { font-size: 14px; font-family: $interstate_light; } /* !Tables */ .content table { border-bottom: 1px solid #EAEAEA; border-collapse: separate; margin-bottom: 40px; width: 100%; } /* .content table th { background: #111; color: #999; font-size: 12px; letter-spacing: 0.05em; padding: 7px 20px; text-align: left; text-transform: uppercase; } */ .content table th { background: transparent; color: #DA001A; font-size: 14px; letter-spacing: 0.05em; padding: 10px 0; text-align: left; text-transform: uppercase; } .content table th.right { float: none; text-align: right; } .content table td { border-top: 1px solid #EAEAEA; font-size: 15px; padding: 20px 0; vertical-align: top; } .content table td.right { float: none; text-align: right; } .content table td strong { font-family: $interstate_bold; } .content table p { margin-bottom: 10px; } .content table td.pad_left { padding-left: 20px; } .content table td.pad_right { padding-right: 20px; } .content table td.price { width: 100px; } .content .rank { background: url($s3/images/sitc_ranks.png) no-repeat left top; padding: 0 0 0 25px; } .content .rank.master { background-position: 0 3px; } .content .rank.chief { background-position: 0 -28px; } .content .rank.officer { background-position: 0 -60px; } .content .rank.agent { background-position: 0 -92px; } /* !Events */ .events { margin: 30px 0 10px; overflow: hidden; } .events h5 { font-family: $interstate; font-size: 16px; letter-spacing: 0.05em; margin: 0 0 20px; text-transform: uppercase; } .events h5 a { color: #111; } .events h5 a:hover { color: $spy_red; } .events .event { background: url($s3/images/events_circle.png) no-repeat left top; margin: 0 5px 10px -5px; overflow: hidden; padding: 12px; } .events h4 { font-family: $interstate; font-size: 15px; line-height: 1.2; margin: 0 0 5px; } .events h4 a { color: #111; } .events h4 a:hover { color: $spy_red; } .events time, .events span { display: block; font-size: 14px; margin: 0 0 5px; } .events .tags { background: url($s3/images/icon_tag.png) no-repeat left 4px; color: $spy_red; font-size: 14px; padding: 2px 0 0 15px; } .events .tag { color: $spy_red; } .events .tag:hover { color: #111; } .events .date { float: left; margin: 0 5px 0 0; text-align: center; width: 60px; } .events .month { color: #111; font-family: $interstate_condensed; font-size: 18px; margin: 0; text-transform: uppercase; } .events .day { clear: both; color: $spy_red; font-family: $guilder; font-size: 55px; } .events.callout { border: none; margin: 25px 0; padding: 0; } .events.callout .event { overflow: hidden; } /* !Photo Gallery */ .gallery { margin: 30px 0 0; } .gallery img { padding: 0; position: relative; z-index: 1; } .gallery .container { overflow: hidden; position: relative; } .gallery .viewport { height: 380px; position: relative; width: 560px; } .gallery .viewport figure { left: 0; position: absolute; top: 0; z-index: 1; } .gallery .viewport figcaption { background: rgba(0,0,0,.6); bottom: 0; color: #fdfdfd; font-size: 13px; left: 0; opacity: .9; padding: 13px 15px 15px; position: absolute; width: 100%; z-index: 2; } .gallery .viewport figure.active { z-index: 2; } .gallery .filmstrip { background: url($s3/images/gallery_filmstrip_bg.png) repeat; bottom: -95px; left: 0; padding: 10px 55px; position: absolute; width: 100%; z-index: 4; -webkit-transition: bottom 0.2s ease-out; -moz-transition: bottom 0.2s ease-out; -ms-transition: bottom 0.2s ease-out; -o-transition: bottom 0.2s ease-out; transition: bottom 0.2s ease-out; } .gallery:hover .filmstrip { bottom: 0; } .gallery .filmstrip .viewport { height: 71px; overflow: hidden; width: 450px; } .gallery .filmstrip .cylinder { height: 71px; position: absolute; left: 0; width: 10000px; -webkit-transition: left 0.3s ease-out; -moz-transition: left 0.3s ease-out; -ms-transition: left 0.3s ease-out; -o-transition: left 0.3s ease-out; transition: left 0.3s ease-out; } .gallery .filmstrip figure { cursor: pointer; display: block; float: left; height: 71px; margin: 0 10px 0 0; overflow: hidden; position: static; width: 105px; } .gallery .filmstrip figure:hover { border: 3px solid $spy_red; } .gallery .filmstrip figure.active { border: 3px solid #fff; } .gallery .filmstrip figure:hover img, .gallery .filmstrip figure.active img { margin: -3px; } .gallery .filmstrip .trigger { background: url($s3/images/gallery_arrows.png) no-repeat left top; cursor: pointer; display: block; height: 23px; left: 15px; position: absolute; text-indent: -999999px; top: 33px; width: 23px; } .gallery .filmstrip .trigger.previous { background-position: 0 0; } .gallery .filmstrip .trigger.previous:hover { background-position: 0 -23px; } .gallery .filmstrip .trigger.next { background-position: -23px 0; left: auto; right: 15px; } .gallery .filmstrip .trigger.next:hover { background-position: -23px -23px; } .gallery .filmstrip .viewport, .gallery .filmstrip .trigger { opacity: 0; -webkit-transition: opacity 0.25s ease-in-out; -moz-transition: opacity 0.25s ease-in-out; -ms-transition: opacity 0.25s ease-in-out; -o-transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out; } .gallery:hover .filmstrip .viewport, .gallery:hover .filmstrip .trigger { opacity: 1; } .gallery-caption { background: #eee; padding: 15px; position: relative; z-index: -1; } .gallery .shutter { left: 0; position: absolute; top: 0; z-index: 3; } .gallery .shutter .slices { height: 380px; position: relative; width: 560px; } .gallery .shutter .slice { left: 72px; position: absolute; top: 190px; z-index: 3; -webkit-transform-origin: 203px 0; -moz-transform-origin: 203px 0; -ms-transform-origin: 203px 0; -o-transform-origin: 203px 0; transform-origin: 203px 0; } .gallery .shutter .slice_1 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .gallery .shutter .slice_2 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .gallery .shutter .slice_3 { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .gallery .shutter .slice_4 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .gallery .shutter .slice_5 { -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); } .gallery .shutter .slice_6 { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .gallery .shutter .slice_7 { -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -ms-transform: rotate(315deg); -o-transform: rotate(315deg); transform: rotate(315deg); } .gallery .shutter .slice_8 { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } .gallery .shutter .image { background: url($s3/images/gallery_shutter.png) no-repeat; display: block; height: 500px; position: relative; width: 416px; -webkit-transform: rotate(60deg) translateX(15px) translateY(15px); -moz-transform: rotate(60deg) translateX(15px) translateY(15px); -ms-transform: rotate(60deg) translateX(15px) translateY(15px); -o-transform: rotate(60deg) translateX(15px) translateY(15px); transform: rotate(60deg) translateX(15px) translateY(15px); -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; -o-transform-origin: bottom center; transform-origin: bottom center; } .gallery .shutter.snap .image { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; -webkit-animation: shutter_snap 0.8s; -moz-animation: shutter_snap 0.8s; -ms-animation: shutter_snap 0.8s; -o-animation: shutter_snap 0.8s; animation: shutter_snap 0.8s; } /* !Callouts - Sidebar */ .callouts { clear: both; margin: 25px 50px 25px 0; width: 280px; } .sub .callouts { margin: 25px 50px 25px 25px; width: 260px; } /* !Callout - Home Links */ .callout.home_links { margin: 0 0 25px; overflow: hidden; width: 290px; } .callout.home_links .split { border-top: 1px solid #E0E0E0; width: 135px; margin: 0 10px 0 0; padding: 10px 0 8px; } .callout.home_links h3 { font-family: $guilder; font-size: 42px; margin-left: 2px; } .callout.home_links h3 span { color: $spy_red; } .callout.home_links h3.small { font-size: 34px; } .callout.home_links a { background: url($s3/images/callout_home_links_icons.png) no-repeat left top; color: #111; display: block; font-family: $interstate; font-size: 15px; padding: 2px 0 4px 25px; } .callout.home_links a:hover { color: $spy_red; } .callout.home_links a.tickets { background-position: 2px 1px; } .callout.home_links a.lodging { background-position: 2px -40px; } .callout.home_links a.directions { background-position: 2px -78px; } .callout.home_links a.calendar { background-position: 2px -120px; } /* !Callout - Flexible */ .callout.flexible { margin: 25px 0; } .callout.flexible h4 { color: #000; line-height: 1.2; font-weight: 700; margin: 0 0 5px; text-transform: uppercase; } .callout.flexible h4 a { color: #000; } .callout.flexible p { font-size: 15px; margin: 0; } .callout.flexible > a { display: block; height: 140px; overflow: hidden; width: 260px; } .callout.flexible img { display: block; float: left; } .callout.flexible .description { background: #E02930 url($s3/images/callout_flexible_bg.png) repeat bottom; clear: both; overflow: hidden; padding: 20px 20px 15px; width: 260px; } .callout.flexible .description { color: #fff; } .callout.flexible .edge { background: url($s3/images/callout_flexible_paper.png) no-repeat center; display: block; height: 24px; width: 260px; } /* !Callout - Twitter */ .callout.twitter { margin: 25px 0; } .callout.twitter h4 { background: url($s3/images/callout_twitter_icon.png) no-repeat right center; display: block; font-family: $interstate; float: left; font-size: 16px; margin: 0; padding: 0 25px 0 0; text-transform: uppercase; } .callout.twitter .tweet { clear: both; } .callout.twitter .tweet p { font-family: $interstate_condensed; font-size: 25px; line-height: 1.05; margin: 13px 0; } .callout.twitter .tweet small { display: block; float: left; font-size: 14px; margin: 2px 10px 0 0; } /* !Callout - Visit */ .callout.visit { margin: 25px 0; } .callout.visit h4 { margin: 0 0 5px; } .callout.visit h4 a { color: #111; } .callout.visit p { line-height: 1.5; margin: 0 0 5px; } .callout.visit .disc { background: url($s3/images/callout_visit_bg.png) no-repeat center; float: left; height: 77px; margin: 0 20px 0 0; width: 77px; } .callout.visit .icon { background: url($s3/images/callout_visit_icon.png) no-repeat center; display: block; height: 44px; margin: 17px auto 0; width: 31px; } .callout.visit:hover .icon { background: url($s3/images/callout_visit_icon_animated.gif) no-repeat center; } /* !Callout - Highlight Group */ .callout.highlight_group { margin: 25px 0; } .callout.highlight_group .images { display: block; height: 150px; overflow: hidden; position: relative; width: 260px; } .callout.highlight_group .images img { -webkit-transform-style: initial; } .callout.highlight_group figure { display: block; left: 0; position: absolute; top: 0; z-index: 1; height: 150px; width: 260px; overflow: hidden; } .callout.highlight_group figure.active, .callout.highlight_group figure.was_active { z-index: 2; -webkit-transition: left 0.3s ease-in-out; -moz-transition: left 0.3s ease-in-out; -ms-transition: left 0.3s ease-in-out; -o-transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out; } .callout.highlight_group figure.active { left: 0; } .callout.highlight_group figure.before { left: -260px; } .callout.highlight_group figure.after { left: 260px; } .callout.highlight_group .trigger { background: #111 url($s3/images/callout_highlight_arrows.png); bottom: 0; cursor: pointer; display: block; height: 35px; overflow: hidden; position: absolute; text-indent: -99999px; width: 35px; z-index: 5; } .callout.highlight_group .trigger.previous { background-position: left center; left: 0; } .callout.highlight_group .trigger.next { background-position: right center; right: 0; } .callout.highlight_group .navdots { overflow: hidden; width: 100%; } .callout.highlight_group .navdots span { background: rgba(0,0,0,.2); border-radius: 50%; cursor: pointer; display: block; float: left; height: 7px; margin: 0 5px 10px 2px; overflow: hidden; text-indent: -999px; width: 7px; } .callout.highlight_group .navdots span.active { background: rgba(0,0,0,.5); } .callout.highlight_group .descriptions { background: url($s3/images/callout_highlight.jpg) no-repeat left bottom; margin: -4px 0 0 -5px; width: 285px; } .callout.highlight_group .item { display: none; padding: 18px 40px 20px 20px; } .callout.highlight_group .item.active { display: block; } .callout.highlight_group h3 { font-size: 14px; font-family: $interstate_light; margin-bottom: 10px; } .callout.highlight_group h4 { font-family: $interstate_condensed/* $guilder */; font-size: 32px; margin: 0 0 10px; /* text-transform: uppercase; */ } .callout.highlight_group h4 a { color: #111; } .callout.highlight_group h5 { font-size: 15px; font-family: $interstate; line-height: 1.2; margin-bottom: 10px; text-transform: uppercase; } .callout.highlight_group p { line-height: 1.3; margin: 0 0 5px; } /* !Callout - Virtual Tour */ .callout.virtual_tour { background: url($s3/images/callout_tour_animated.gif) no-repeat center; margin: 25px 0; } .callout.virtual_tour a { background: url($s3/images/callout_tour_static.gif) no-repeat center; display: block; height: 160px; padding: 45px 20px; text-transform: uppercase; width: 260px; } .callout.virtual_tour a:hover { background: none; } .callout.virtual_tour h5 { color: $spy_red; font-size: 17px; margin: 0; } .callout.virtual_tour h4 { color: #fff; font-family: $guilder; font-size: 60px; margin: 0; } /* !Callout - Insider Intel */ .callout.intel { background: url($s3/images/callout_intel_bg.gif) repeat; margin: 25px 0; overflow: hidden; text-align: center; width: 260px; } .callout.intel h5 { background: #111; color: #fff; font-family: $guilder; font-size: 36px; margin: 0; padding: 10px 0; text-transform: uppercase; } .callout.intel .scanner .glow { border-radius: 100%; display: block; height: 95px; margin: 25px auto; width: 95px; } .callout.intel .scanner .disc { background: rgba(216, 0, 25, 0.6); border-radius: 100%; cursor: move; cursor: -webkit-grab; display: block; height: 95px; padding: 15px 0; width: 95px; } .callout.intel.scan .scanner .disc { background: url($s3/images/callout_intel_scanner_glow.png) repeat-x top left; -webkit-transition: background-position 2s linear; -moz-transition: background-position 2s linear; -ms-transition: background-position 2s linear; -o-transition: background-position 2s linear; transition: background-position 2s linear; } .callout.intel.scanning .scanner .disc { background-position: bottom left; } .callout.intel.complete .scanner .disc { background: rgba(0, 153, 51, 0.7); } .callout.intel.scan .scanner .glow { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; -webkit-animation: intel_glow 1s ease-in-out infinite; -moz-animation: intel_glow 1s ease-in-out infinite; -ms-animation: intel_glow 1s ease-in-out infinite; -o-animation: intel_glow 1s ease-in-out infinite; animation: intel_glow 1s ease-in-out infinite; } .callout.intel .scanner .icon { background: url($s3/images/callout_intel_hand.png) no-repeat center; display: block; height: 64px; margin: 0 auto; width: 38px; } .callout.intel .scanner hr { border: 1px solid #fff; margin: 0 auto 15px; width: 50px; } .callout.intel .scanner h6 { color: #fff; font-family: $interstate; font-size: 16px; line-height: 1.2; margin: 0 10px 25px; text-transform: uppercase; } .callout.intel .reveal { display: none; overflow: hidden; padding: 20px; text-align: left; } .callout.intel .reveal h4 { color: #fff; font-family: $interstate; font-size: 16px; line-height: 1.2; margin: 0 0 10px; text-transform: uppercase; } .callout.intel .reveal h4 a { color: #fff; } .callout.intel .reveal h4 a:hover { color: $spy_red; } .callout.intel .reveal time { color: #999; display: block; font-size: 14px; margin: 5px 0 10px; } .callout.intel .reveal p { color: #fff; font-family: $interstate_light; font-size: 15px; line-height: 1.3; margin: 0 0 10px; } .callout.intel .reveal .button { background: transparent; border: 2px solid $spy_red; border-radius: 2px; height: 42px; padding: 0 15px; } .callout.intel .reveal .button:hover { color: $spy_red; } /* !Callout - Store */ .callout.store { margin: 20px 0 25px; padding: 35px 0 0 0; position: relative; } .callout.store .arrow { background: url($s3/images/callout_store_arrow.png) no-repeat 0 0; display: block; height: 35px; left: 65px; position: absolute; top: 0; width: 64px; } .callout.store .block_left { margin: 0 5px 0 0; } .callout.store img { max-width: 110px; } .callout.store h4 { margin: 0 0 5px; text-transform: uppercase; } .callout.store p { font-size: 15px; margin: 0 0 5px; } /* !Callout - COntact */ .callout .contact { overflow: hidden; } .callout .contact h4 { background: url('$s3/images/bg_red.gif'); margin: 0 0 20px; padding: 10px 25px 7px; } .callout .contact .icon { background: url('$s3/images/callout_contact_icon.png'); float: left; height: 16px; margin: 2px 0 0 25px; width: 18px; } .callout .contact .info { float: right; width: 200px; } .callout .contact .info strong { font-family: $interstate; font-size: 15px; } .callout .contact .info p { font-size: 14px; } /* !Callouts - In Content */ .callouts.in_content { border-top: 1px solid #E0E0E0; margin: 25px 0; width: auto; } .callout.in_content { border-bottom: 1px solid #E0E0E0; margin: 0; padding: 25px 0; } .callout.in_content .block_left { margin: 0 20px 0 0; -webkit-transform-style: initial; } .callout.in_content h4 { font-family: $interstate_condensed; font-size: 24px; margin: 0 0 5px; } .callout.in_content h4 a { color: #111; } .callout.in_content p { margin: 0 0 5px; } /* !Callout - Reviews */ .callout.reviews { clear:both; overflow: hidden; padding-top: 20px; } .callout.reviews h3 { background: url($s3/images/content_review_star.png) no-repeat 130px top; font-family: $interstate_light; font-size: 16px; letter-spacing: 1px; margin-bottom: 10px; text-transform: uppercase; } .callout.reviews .description { color: #666666; font-size: 14px; } .callout.reviews .review { background: url($s3/images/content_blockquote_quote.png) no-repeat left top; margin: 25px 0 30px; padding: 8px 0 0 50px; overflow: hidden; } .callout.reviews .review p { font-family: $interstate; font-size: 16px; line-height: 1.2; margin-bottom: 5px; } .callout.reviews .review .user, .content .reviews .review .exhibit { display: block; font-size: 14px; line-height: 1.2; margin-bottom: 5px; } .callout.reviews .review .exhibit { color: $spy_red; } /* !SpyCast - Content Callout */ .spycast_wrapper .spycast { background: url($s3/images/spycast_bg.png) no-repeat center top; height: 400px; margin: 0 0 25px -5px; padding: 50px 25px 30px; position: relative; width: 595px; z-index: 2; } .spycast_wrapper .shadow { box-shadow: 0 0 18px rgba(66, 43, 14, 0.3); height: 380px; left: 3px; position: absolute; top: 14px; width: 579px; } .spycast .item { margin: 15px 0; } .spycast .button.spycast-button { position: absolute; top: auto; bottom: 15px; right: 25px; } .spycast h3 { font-family: $interstate_condensed_bold; font-size: 28px; margin: 0; } .spycast h4 { font-family: $interstate; font-size: 16px; line-height: 1.2; margin: 0; text-transform: uppercase; } .spycast h4 a { color: #111; } .spycast h4 a:hover { color: $spy_red; } .spycast p { margin: 0; } .spycast .item p { color: #333; font-size: 14px; } .spycast .play { background: $spy_red url($s3/images/spycast_play.png) no-repeat center; border-radius: 100%; display: block; float: left; height: 28px; margin: 0 15px 0 0; width: 28px; } .spycast a.more { display: block; float: left; font-size: 14px; margin: 0 10px 0 0; } .spycast a.more:hover { color: #111; } .button.spycast-button { position: absolute; top: 50px; right: 25px; } /* !Blog In-Content Callout */ .blog h5 a, .blog h3 a { color: #111; } .blog h5 a:hover, .blog h3 a:hover { color: $spy_red; } .blog.small { margin: 0 0 20px; } .blog.small h3 { font-family: $interstate; font-size: 16px; line-height: 1.2; margin: 0 0 3px; } .blog.small .date { display: block; font-size: 14px; } .blog.featured { margin: 25px 0; } .blog.featured h5 { background: url($s3/images/home_blog_icon.png) no-repeat right center; float: left; font-family: $interstate_light; font-size: 16px; letter-spacing: 0.05em; padding: 0 20px 0 0; margin: 0 0 8px 0; text-transform: uppercase; } .blog.featured h3 { clear: both; font-family: $guilder; font-size: 50px; line-height: 1; margin: 0 0 5px 2px; } .blog.featured .date { display: block; font-size: 14px; margin: 0 0 4px; } .blog.featured p { margin: 0 0 8px; } .blog.featured .block_right { margin: 0 0 0 20px; } /* !Press List */ .press_list .item { margin: 25px 0; } .press_list .item h2, .press_list .item h3 { margin: 0; } .press_list .item h2 a, .press_list .item h3 a { color: #111; } .press_list .item h2 a:hover, .press_list .item h3 a:hover { color: $spy_red; } .press_list .item p { margin: 0; } .press_list .item .date { color: #aaa; font-size: 14px; margin: 5px 0; } .news_list .item h2 { margin: 0 0 5px; } /* !Press Release */ .press_release h2 { margin: 25px 0 0; } .press_release h3 { line-height: 1.4; margin: 0 0 15px; } .press_release .date { color: #aaa; font-size: 14px; margin: 5px 0 20px; } /* !SpyCast List */ .spycast_list { } .spycast_list .item .date { margin: 5px 0 0; } .spycast_list .play, .spycast_episode .play { background: $spy_red url($s3/images/spycast_play.png) no-repeat center; border-radius: 100%; display: block; float: left; height: 28px; margin: 0 15px 0 0; width: 28px; } .spycast_episode h2 { margin-top: 17px; } .spycast_episode .play { margin-top: 17px; } .spycast_episode iframe { display: block; margin: 0 0 20px 0; } /* !Pagination */ .pagination .page { background: url($s3/images/bg_darkgray.gif); color: #fff; display: inline-block; font-size: 19px; font-family: $interstate_condensed; height: 38px; padding: 10px 15px; vertical-align: bottom; } .pagination .active { background: url($s3/images/bg_red.gif); } .pagination .page .caret { background: url($s3/images/icon_white_caret.png); display: block; height: 10px; margin-top: 4px; width: 6px; } /* !Tickets */ .content .ticket_group { clear: both; margin: 40px 0; overflow: hidden; } .content .ticket_group h2 { margin-bottom: 10px; } .content .ticket_group p { overflow: hidden; width: auto; } .content .ticket_group .button.red { float: right; margin: 0 0 20px 20px; } .content .ticket_group table { border-bottom: 1px solid #E0E0E0; margin-bottom: 10px; width: 100%; } .content .ticket_group table td { border-top: 1px solid #E0E0E0; padding: 10px 0; vertical-align: middle; } .content .ticket_group table td.price { font-family: $guilder; font-size: 32px; text-transform: uppercase; text-align: right; } .content .ticket_group .small_print { color: #777; font-size: 13px; } .content .ticket_group .ticket_disclaimer { font-size: 13px; line-height: 0.722; margin: 16px 0 0; } .content .ticket_group .ticket_disclaimer p { margin: 0; } .content .ticket_group_background { padding: 30px; } .content .ticket_group_background .small_print { margin-bottom: 0; } .content .ticket_group_black { background-color: #323232; color: #fff; } .content .ticket_group_black h2 { color: #fff; } .content .ticket_group_black table { border-bottom-color: rgba(255, 255, 255, 0.12); } .content .ticket_group_black table td { border-top-color: rgba(255, 255, 255, 0.12); } .content .ticket_group_black .ticket_disclaimer { color: #a3a3a3; } .content .ticket_group_black .small_print strong { color: #fff; } .content .ticket_group_gray { background-color: #f4f4f4; } .content .ticket_group_gray .small_print { color: #121819; } .content .ticket_group_gray .small_print strong { color: #EE3D40; } .header_black { color: #fff; display: block; background: url($s3/images/bg_black.png); font-family: ; padding: 10px; text-transform: uppercase; } /* !Calendar Events Callout */ .calendar .revolver { border-top: 1px solid #E0E0E0; margin: 0 0 25px; overflow: visible; padding: 20px 0 0; } .calendar .revolver h5 { float: left; font-family: $interstate_light; font-size: 16px; letter-spacing: 0.05em; margin: 3px 0 15px 0; text-transform: uppercase; } .calendar .revolver .block_shadow { clear: both; margin: 10px 0 40px; float: left; } .calendar .revolver .block_content { background: #fff url($s3/images/content_blockshadow_border.png) repeat; width: 295px; } .calendar .revolver .viewport { height: 275px; overflow: hidden; width: 275px; } .calendar .revolver .cylinder { height: 275px; width: 10000px; } .calendar .revolver figure { float: left; overflow: hidden; } .calendar .revolver img { background: none; float: left; padding: 0; width: 275px; height: 275px; } .calendar .contents { float: right; width: 560px; } .calendar .revolver .event { background: none; display: none; margin: 0 -10px 10px -5px; } .calendar .revolver .event h3 { font-family: $interstate_condensed_bold; font-size: 25px; margin: 0 15px 5px 0; text-transform: none; } .calendar .revolver .event h3 a { color: #111; } .calendar .revolver .event h3 a:hover { color: $spy_red; } .calendar .revolver .event time { display: block; margin: 10px 0; } .calendar .revolver .event .date { color: $spy_red; float: none; font-family: $interstate; font-size: 17px; margin: 10px 0 5px; text-align: left; width: auto; text-transform: uppercase; } .calendar .revolver .event .time { margin: 0; } .calendar .revolver .event p { font-size: 14px; margin: 0 0 10px; } .calendar .revolver .event .buttons { margin-bottom: 10px; } .calendar .revolver .event.active { display: block; } /* !Calendar Events List */ .calendar .events_list h5 { font-family: $interstate_light; font-size: 16px; letter-spacing: 0.05em; margin: 3px 0 15px 0; text-transform: uppercase; } .calendar .events_list h4 { position: relative; text-align: center; margin: 0; } .calendar .events_list h4 a { background: url($s3/images/calendar_arrows.png) no-repeat left center; cursor: pointer; display: block; height: 10px; position: absolute; text-indent: -99999px; top: 12px; width: 6px; } .calendar .events_list h4 a.previous { left: 20px; } .calendar .events_list h4 a.previous:hover { background-position: left bottom; } .calendar .events_list h4 a.next { background-position: right center; right: 20px; } .calendar .events_list h4 a.next:hover { background-position: right bottom; } .calendar .events_list .event { background: url($s3/images/events_circle.png) no-repeat left 20px; border-bottom: 1px solid #E0E0E0; padding: 30px 0; width: 100%; } .calendar .events_list .event.last { border: none; } .calendar .events_list .event h3 { font-family: $interstate_condensed_bold; font-size: 25px; margin: 0 15px 5px 0; text-transform: none; } .calendar .events_list .event h3 a { color: #111; } .calendar .events_list .event h3 a:hover { color: $spy_red; } .calendar .events_list .event .date { float: left; margin: 10px 15px 0 10px; text-align: center; width: 60px; } .calendar .events_list .event .month { color: #111; font-family: $interstate_condensed; font-size: 18px; margin: 0; text-transform: uppercase; } .calendar .events_list .event .day { clear: both; color: $spy_red; display: block; font-family: $guilder; font-size: 55px; } .calendar .events_list .event time { display: block; margin: 10px 0; } .calendar .events_list .event .button { margin-bottom: 15px; } .calendar .events_list .event .sold_out { color: $spy_red; font-weight: bold; margin: 0; text-transform: uppercase; } /* .calendar .events_list .tag { background: url($s3/images/icon_tag.png) no-repeat left 4px; color: $spy_red; display: block; font-size: 14px; margin: 0 0 3px; padding: 2px 0 0 15px; } */ .calendar .events_list .tags { background: url($s3/images/icon_tag.png) no-repeat left 4px; color: $spy_red; font-size: 14px; padding: 2px 0 0 15px; } .calendar .events_list .tag { color: $spy_red; } .calendar .events_list .tag:hover { color: #111; } /* !Calendar Events Search */ .calendar .search_form { margin: 60px 0 32px 0; width: 260px; } .calendar .search_form fieldset { background: #fff; position: relative; width: 100%; } .calendar .search_form input { background: #fff; border: 1px solid #E0E0E0; color: #111; font-family: $interstate_light; font-size: 16px; height: 44px; padding: 10px 20px; width: 100%; } .calendar .search_form input.submit { background: #fff url($s3/images/icon_search_red.png) no-repeat center; border: none; cursor: pointer; height: 34px; position: absolute; right: 1px; text-indent: -99999px; top: 7px; width: 34px; } /* !Calendar Events Filter Box */ .calendar .box { clear: both; margin: 25px 0 25px 25px; width: 260px; } .calendar .box h4 { margin: 0; padding: 10px 20px; } .calendar .box a { color: #111; display: block; margin: 0; padding: 15px 20px; } .calendar .box a:hover { color: $spy_red; } .calendar .box .light { background: #FAFAFA; } .calendar .box .dark { background: #EAEAEA; } .calendar .box .active, .calendar .box .active:hover { background: url($s3/images/bg_darkgray.gif) repeat; color: #fff; } .calendar .day_calendar { color: #111; margin: 0; padding: 15px 20px; } .calendar .day_calendar .subtitle { color: #949494; float: right; font-size: 12px; margin-top: 5px; text-transform: uppercase; } .calendar .active .subtitle { color: #eee; } .calendar .day_calendar a { padding: 6px 0 8px; } .calendar .ui-datepicker-header a { padding: 0; } .calendar .ui-datepicker { box-shadow: none; margin: 10px 0; } .calendar .ui-datepicker th { padding: 0 0 6px; } .calendar .ui-datepicker td:hover a { color: #fff; } .calendar .box .tag_form { margin: 15px; } .calendar .box .tag_form fieldset { margin: 10px 0; } .calendar .box .tag { background: url($s3/images/icon_tag.png) no-repeat left 4px; color: $spy_red; display: inline-block; font-size: 14px; margin: 0 0 3px 10px; padding: 2px 0 0 15px; } /* !Calendar Detail */ #page.sub .calendar_detail_header { width: 800px; } #page.sub .calendar_detail { width: 500px; } #page.sub .calendar_detail iframe { width: 500px; height: 282px; } .calendar_detail .contain { margin-bottom: 35px; width: 100%; } .calendar_detail h2 { font-size: 25px; margin: 12px 0 10px; } .calendar_detail time { font-family: $interstate; display: block; font-size: 14px; } .calendar_detail .date { color: $spy_red; display: block; font-size: 17px; margin-bottom: 12px; text-transform: uppercase; } .calendar_detail .price { display: block; font-size: 14px; margin-top: 10px; text-transform: uppercase; } .calendar_detail .sold_out { background: $spy_red; color: white; display: inline-block; font-size: 17px; font-weight: bold; margin: 20px 0 0; padding: 0 5px; text-transform: uppercase; width: auto; } .calendar_detail .description h6 { color: #777; font-size: 13px; font-weight: 400; font-family: $interstate_light; } #page .calendar_detail_sidebar { padding-left: 20px; margin-right: 50px; width: 395px; } .calendar_detail_sidebar .block_shadow { margin: 0 0 40px; } .calendar_detail_sidebar .tools { background: #F9F9F9; overflow: hidden; padding: 15px 20px 13px; margin: 0; } .calendar_detail_sidebar .tools .item { background: url($s3/images/icon_cal_sprite.png) no-repeat top left; color: #111; display: block; float: left; font-size: 14px; height: 20px; line-height: 17px; margin-right: 30px; padding-left: 25px; } .calendar_detail_sidebar .tools .item:hover { color: $spy_red; } .calendar_detail_sidebar .tools .item.cal { background-position: 0 0; } .calendar_detail_sidebar .tools .item.print { background-position: 0 -30px; padding-left: 20px; } .calendar_detail_sidebar .tools .item.share { background-position: 0 -60px; padding-left: 20px; } .calendar_detail_sidebar .tools .facebook { background: url(../images/persistent-nav-icons.svg?20170317) no-repeat -85px 0px; height: 20px; float: right; margin: 0 0 0 10px; width: 20px; } .calendar_detail_sidebar .tools .twitter { background: url(../images/persistent-nav-icons.svg?20170317) no-repeat -65px 0px; height: 20px; float: right; margin: 0 0 0 10px; width: 20px; } .calendar_detail_sidebar .event { margin-bottom: 30px; overflow: hidden; } /* !Virtual Tour */ .virtual_tour iframe { float: left; margin: 30px 0 0; } .virtual_tour_button_group { position: relative; text-align: center; top: 62px; } .virtual_tour_button { display: inline-block; background-color: #fff; color: #000; padding: 12px 20px; margin: 0; font-family: "Interstate RegularCond",sans-serif; font-size: 18px; text-transform: uppercase; } .virtual_tour_button.active { background-color: #D9112A; color: #fff; } iframe.virtual_tour_frame { margin-top: 0; } .virtual_tour_frame.hidden { display: none; } /* Membership Tabs */ .membership_button_group { text-align: center; margin-bottom: 1em; } .membership_button { display: inline-block; background-color: #fff; color: #000; padding: 12px 20px; margin: 0; font-family: "Interstate RegularCond",sans-serif; font-size: 18px; text-transform: uppercase; } .membership_button.active { background-color: #D9112A; color: #fff; } .content_tab { } .content_tab.hidden { display: none; } /* !Multimedia Feature */ .multimedia_feature { background: url($s3/images/multimedia_bg.jpg) repeat center top; padding: 40px 0 0; margin: 30px 0 30px -40px; width: 980px; } .multimedia_feature .viewport { height: 500px; margin: 0 40px 20px; overflow: hidden; position: relative; width: 900px; } .multimedia_feature .viewport figure { background: #111; display: block; height: 500px; left: 0; position: absolute; top: 0; width: 900px; z-index: 1; -webkit-transition: left 0.45s ease-out; -moz-transition: left 0.45s ease-out; -ms-transition: left 0.45s ease-out; -o-transition: left 0.45s ease-out; transition: left 0.45s ease-out; } .multimedia_feature .viewport figure.active { left: 0; z-index: 2; } .multimedia_feature .viewport figure.was_active { z-index: 2; } .multimedia_feature .viewport figure.before { left: -100%; } .multimedia_feature .viewport figure.after { left: 100%; } .multimedia_feature .filmstrip { padding: 0; position: relative; } .multimedia_feature .filmstrip .clip { background: url($s3/images/multimedia_paper_clip.png) no-repeat right center; display: block; height: 46px; left: -7px; position: absolute; top: -7px; width: 91px; z-index: 2; } .multimedia_feature .filmstrip .viewport { height: 200px; margin: 0; overflow: hidden; position: relative; width: 100%; z-index: 1; } .multimedia_feature .filmstrip .cylinder { background: url($s3/images/multimedia_filmstrip.png) repeat-x left top; height: 200px; left: 0; padding: 27px 0 0 100px; position: absolute; top: 0; width: 100000px; -webkit-transition: left 0.45s ease-out; -moz-transition: left 0.45s ease-out; -ms-transition: left 0.45s ease-out; -o-transition: left 0.45s ease-out; transition: left 0.45s ease-out; } .multimedia_feature .filmstrip .viewport figure { background: none; display: block; cursor: pointer; float: left; left: auto; height: auto; margin: 0 43px 0 0; position: static; width: 163px; top: auto; -webkit-transition: opacity 0.45s ease-out; -moz-transition: opacity 0.45s ease-out; -ms-transition: opacity 0.45s ease-out; -o-transition: opacity 0.45s ease-out; transition: opacity 0.45s ease-out; } .multimedia_feature .filmstrip .viewport figure .image { display: block; height: 90px; overflow: hidden; width: 163px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .multimedia_feature .filmstrip .viewport figure .image:hover { border: 3px solid #fff; } .multimedia_feature .filmstrip .viewport figure.active .image { border: 3px solid $spy_red; } .multimedia_feature .filmstrip .viewport figure img { margin: 0; width: 163px; } .multimedia_feature .filmstrip .viewport figure .image:hover img, .multimedia_feature .filmstrip .viewport figure.active .image img { margin: -3px; } .multimedia_feature .filmstrip .viewport figure { opacity: 0; } .multimedia_feature .filmstrip .viewport figure.in_view { opacity: 1; } .multimedia_feature .filmstrip .viewport figcaption { color: #fff; font-size: 15px; margin-top: 35px; text-transform: uppercase; } .multimedia_feature .filmstrip .viewport figure.active figcaption { color: $spy_red; } .multimedia_feature .filmstrip .trigger { background: url($s3/images/multimedia_arrows.png) no-repeat left top; cursor: pointer; display: block; height: 23px; left: 38px; position: absolute; text-indent: -999999px; top: 60px; width: 23px; z-index: 3; } .multimedia_feature .filmstrip .trigger.previous { background-position: 0 0; } .multimedia_feature .filmstrip .trigger.previous:hover { background-position: 0 -23px; } .multimedia_feature .filmstrip .trigger.next { background-position: -23px 0; left: auto; right: 38px; } .multimedia_feature .filmstrip .trigger.next:hover { background-position: -23px -23px; } .multimedia_feature .pagination { padding: 0 0 20px; text-align: center; } .multimedia_feature .page { background: #fff; border-radius: 100%; cursor: pointer; display: inline-block; height: 12px; margin: 0 5px; padding: 0; text-indent: -99999px; width: 12px; } .multimedia_feature .page:hover { background: $spy_red; } .multimedia_feature .page.active { background: none; border: 2px solid #fff; } /* !Nav Dots */ nav.dots { height: 10px; text-align: center; } nav.dots a { background: url($s3/images/nav_dots.png) no-repeat top left; display: inline-block; height: 10px; margin: 0 3px; width: 10px; } nav.dots a.active, nav.dots a:hover { background-position: right; } /* !Exhibits Feature */ .exhibits_feature { background: url($s3/images/folder_bg.png) repeat center top; height: 471px; padding: 25px 0 0 70px; margin: 30px 0 30px -55px; width: 1017px; } .exhibits_feature h2 { font-family: $interstate_light; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; } .exhibits_feature .feature_main { margin-top: 35px; } .exhibits_feature .pagination { float: left; width: 245px; } .exhibits_feature .pagination .page { background: none; color: #111; cursor: pointer; display: block; font-family: $interstate_bold; font-size: 15px; height: auto; margin: 0; padding: 8px 20px 15px; text-transform: uppercase; } .exhibits_feature .pagination .page:hover, .exhibits_feature .feature_main .pagination .page.active { background: url($s3/images/highlight_list_bg.png) bottom; } .exhibits_feature .exhibit { display: none; margin-top: 10px; } .exhibits_feature .exhibit.active { display: block; } .exhibits_feature .contents { width: 295px; } .exhibits_feature .contents h3 { font-family: $guilder; font-size: 50px; margin-bottom: 10px; } .exhibits_feature .contents .button.red { margin-left: 5px; } .exhibits_feature .block_shadow { margin: 0 50px 0; float: right; margin-top: 10px; } .exhibits_feature .block_content { background: #fff url($s3/images/content_blockshadow_border.png) repeat; width: 305px; } .exhibits_feature .viewport { height: 230px; overflow: hidden; width: 285px; } .exhibits_feature .cylinder { height: 230px; width: 10000px; } .exhibits_feature figure { float: left; overflow: hidden; } .exhibits_feature img { background: none; float: left; padding: 0; width: 285px; height: 230px; } /* !Experiences */ .experiences { margin-bottom: 20px; } .experiences h3 { font-family: $interstate_light; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; } .experiences .experience { border-bottom: 1px solid #EAEAEA; padding: 20px 0; } .experiences .experience .details { width: 290px; } .experiences .experience .details h2 { margin-bottom: 5px; } .experiences .experience .details p { margin-bottom: 5px; } .experiences .experience .details .button.red { margin-left: 2px; } /* !Collection */ .collection { position: relative; } .collection h3 { font-family: $interstate_light; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; } .collection h3 a { color: #111; } .collection h3 a:hover { color: $spy_red; } .collection .triggers { position: absolute; right: 0; top: 0; } .collection .viewport { height: 467px; margin-bottom: 10px; overflow: hidden; width: 580px; } .collection .cylinder { height: 467px; width: 100000px; } .collection img { float: left; margin-top: 0; width: 580px; } .collection h4 { color: #111; font-family: $interstate_condensed; font-size: 20px; margin: 5px 0 0; } .collection h4 a { color: #111; } .collection h4 a:hover { color: $spy_red; } .collection p { color: #111; font-size: 15px; } .collection .contents .item { display: none; } .collection .contents .item.active { display: block; } .collection_landing h5 { font-family: $interstate_light; font-size: 16px; letter-spacing: 0.05em; margin: 25px 0 15px 0; text-transform: uppercase; } .collection_landing .item { float: left; margin: 0 12px 0 0; width: 170px; } .collection_landing h4 { color: #111; font-family: $interstate_condensed; font-size: 20px; margin: 5px 0 0; } .collection_landing h4 a { color: #111; } .collection_landing h4 a:hover { color: $spy_red; } .collection_landing p { color: #111; font-size: 15px; } .collection_detail figure { margin: 0 0 20px; } .collection_detail p { margin-bottom: 20px; } .collection_detail .button { margin-bottom: 25px; } /* !Plan a Visit Feature */ .content .visit_feature { background: url($s3/images/multimedia_bg.jpg) repeat center top; color: white; padding: 30px 40px 90px 40px; margin: 30px 0 30px -40px; overflow: hidden; width: 980px; } .content .visit_feature .third { width: 270px; margin: 0 45px 0 0; position: static; } .content .visit_feature .third.last { margin: 0; } .content .visit_feature h2 { background: url($s3/images/callout_home_links_icons.png) no-repeat left top; color: white; display: block; padding: 2px 0 4px 25px; font-family: $interstate_light; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; } .content .visit_feature h2.tickets { background-position: 2px 1px; } .content .visit_feature h3 { color: $spy_red; text-transform: none; } .content .visit_feature table { border-bottom: 1px solid rgba(255, 255, 255, 0.15); margin-bottom: 10px; width: 100%; } .content .visit_feature table td { border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 15px; padding: 15px 0; vertical-align: middle; } .content .visit_feature table td.group { width: 190px; } .content .visit_feature table td.price { font-family: $interstate; text-align: right; text-transform: uppercase; } .content .visit_feature .q { display: block; font-family: $interstate_condensed_bold; font-size: 28px; margin-bottom: 10px; text-transform: uppercase; } .content .visit_feature .block_shadow { margin: 0 0 15px 0; } .content .visit_feature a { border-bottom: 1px solid #ccc; color: #ccc; font-family: $interstate_bold; } .content .visit_feature a:hover { border-color: #fff; color: #fff; } .content .visit_feature .block_shadow a { border: none; } .content .visit_feature .button { border: none; color: #fff; font-family: $interstate_condensed; position: absolute; top: 335px; } .content .visit_feature .button:hover { border: none; } .content .visit_positioner { position: relative; } .content .happening { border-bottom: 1px solid #EAEAEA; margin-bottom: 30px; } .content .happening .visiting { color: #111; display: block; float: left; font-family: $interstate_condensed_bold; font-size: 28px; letter-spacing: 0; margin: 8px 10px 0 0; text-transform: none; } .content .happening form { display: block; float: left; } .content .happening label { display: block; font-size: 14px; letter-spacing: 1px; margin: 0 0 10px 0; color: #333; text-transform: uppercase; } .content .happening input { background: #fff; border: 1px solid #E0E0E0; color: #111; font-family: $interstate_light; font-size: 16px; height: 44px; padding: 10px; width: 203px; } #visit_date { background: url($s3/images/form_cal_icon.png) no-repeat 173px center; } .content .bring_group { border-bottom: 1px solid #EAEAEA; margin-bottom: 30px; padding: 0 0 20px 0; } .content .bring_group h3 { font-family: $interstate_light; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; } .content .bring_group h4 { display: block; font-family: $interstate_condensed_bold; font-size: 28px; margin-bottom: 10px; } .content .bring_group h5 { font-family: $interstate; margin: 10px 0; text-transform: uppercase; } .content .bring_group .block_shadow { margin: 15px 0; width: 315px; } .content .bring_group .example { width: 340px; } .content .bring_group .list { margin-left: 30px; width: 200px; } .content .reviews { clear:both; overflow: hidden; } .content .reviews h3 { font-family: $interstate_light; font-size: 16px; letter-spacing: 1px; margin-bottom: 10px; text-transform: uppercase; } .content .reviews .description { color: #666666; font-size: 14px; } .content .reviews .review { background: url($s3/images/content_blockquote_quote.png) no-repeat left top; margin: 25px 0 30px; padding: 8px 0 0 50px; overflow: hidden; } .content .reviews .review p { font-family: $interstate; font-size: 16px; line-height: 1.2; margin-bottom: 5px; } .content .reviews .review .user, .content .reviews .review .exhibit { display: block; font-size: 14px; line-height: 1.2; margin-bottom: 5px; } .content .reviews .review .exhibit { color: $spy_red; } /* !Shop Spy Feature */ .content .shop_feature { background: url($s3/images/multimedia_bg.jpg) repeat center top; color: white; margin: 30px 0 30px -40px; overflow: hidden; padding: 35px 40px 30px; position: relative; width: 980px; } .content .shop_feature .revolver { margin: 0 45px 0 0; width: 585px; } .content .shop_feature .viewport { height: 355px; overflow: hidden; width: 585px; } .content .shop_feature .cylinder { height: 355px; width: 100000px; } .content .shop_feature figure { float: left; height: 355px; width: 585px; } .content .shop_feature .triggers { position: static; } .content .shop_feature .trigger { background: #111 url($s3/images/callout_highlight_arrows.png); height: 35px; margin: 0; position: absolute; top: 160px; width: 35px; z-index: 3; } .content .shop_feature .trigger.previous { background-position: left center; left: 0; } .content .shop_feature .trigger.next { background-position: right center; right: 0; } .content .shop_feature .pagination { padding: 20px 0 0; text-align: center; } .content .shop_feature .page { background: #fff; border-radius: 100%; cursor: pointer; display: inline-block; height: 12px; margin: 0 5px; padding: 0; text-indent: -99999px; width: 12px; } .content .shop_feature .page:hover { background: $spy_red; } .content .shop_feature .page.active { background: none; border: 2px solid #fff; } .content .shop_feature .third { width: 270px; margin: 0 45px 0 0; position: relative; } .content .shop_feature .third.last { margin: 0; } /* .content .shop_feature h2 { background: url($s3/images/icon_hours.png) no-repeat left center; color: white; display: block; padding: 0 0 0 25px; font-family: $interstate_condensed_bold; font-size: 28px; margin-bottom: 15px; text-transform: uppercase; } */ .content .shop_feature h2 { /* background: url($s3/images/icon_store.png) no-repeat left center; */ color: white; display: block; /* padding: 0 0 0 25px; */ font-family: $interstate_condensed_bold; font-size: 28px; margin-bottom: 15px; text-transform: uppercase; } .content .shop_feature .arrow { background: url(../images/callout_store_arrow_right.png) no-repeat 0 0; display: block; height: 35px; left: 130px; position: absolute; top: -5px; width: 64px; } .content .shop_feature h3 { color: $spy_red; text-transform: none; } .content .shop_feature table { border-bottom: 1px solid rgba(255,255,255,.2); margin-bottom: 10px; width: 100%; } .content .shop_feature table th { font-family: $interstate_condensed_bold; font-size: 16px; } .content .shop_feature table td { border-top: 1px solid rgba(255,255,255,.2); font-size: 15px; padding: 13px 0; vertical-align: middle; } .content .shop_feature table td.date { font-family: $interstate_light; } .content .shop_feature table td.time { font-family: $interstate; text-align: right; text-transform: uppercase; } .content .shop_feature .button { background-position: 170px 19px; height: 50px; line-height: 48px; margin-top: 20px; text-align: center; width: 100%; } .content .shop_feature .block_shadow { float: right; margin: 0 0 10px 15px; width: 125px; } .content .shop_feature .block_shadow img { max-width: 100%; } .content .shop_feature .product { margin-top: 15px; } .content .shop_feature .product h4 { color: #fff; font-size: 18px; line-height: 1.4; } .content .shop_feature .product p { color: #fff; } .from_the_shop { margin-bottom: 30px; overflow: hidden; position: relative; } .from_the_shop h3 { font-family: $interstate_light; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; } .from_the_shop .triggers { position: absolute; top: 0; right: 0; } .from_the_shop .viewport { margin-top: 10px; height: 200px; overflow: hidden; width: 600px; } .from_the_shop .cylinder { height: 200px; width: 10000px; } .from_the_shop .item { float: left; margin-right: 20px; width: 180px; } .from_the_shop h4 { font-family: $interstate_condensed_bold; font-size: 20px; margin: 10px 0; text-transform: uppercase; } .from_the_shop h4 a { color: #111; } .from_the_shop h4 a:hover { color: $spy_red; } .from_the_shop .price { font-size: 14px; } .from_the_shop figure { height: 130px; margin: 0 0 15px; text-align: center; width: 180px; } .from_the_shop img { max-height: 130px; max-width: 180px; } .shop_events { margin-top: 40px; } .shop_events > h3 { font-family: $interstate_light; font-size: 16px; letter-spacing: 1px; margin-bottom: 10px; text-transform: uppercase; } .shop_events .event { background: url($s3/images/events_circle.png) no-repeat left 20px; border-top: 1px solid #E0E0E0; padding: 30px 0; width: 100%; } .shop_events .event h3 { font-family: $interstate_condensed_bold; font-size: 25px; margin: 0 15px 5px 0; text-transform: none; } .shop_events .event .date { float: left; margin: 10px 15px 0 10px; text-align: center; width: 60px; } .shop_events .event .month { color: #111; font-family: $interstate_condensed; font-size: 18px; margin: 0; text-transform: uppercase; } .shop_events .event .day { clear: both; color: $spy_red; display: block; font-family: $guilder; font-size: 55px; } .shop_events .event .time { display: block; margin: 15px 0; } /* !Sir Veillance */ .code_game { position: relative; } .code_game .intro { font-size: 21px; width: 390px; } .code_game .bird { background: url($s3/images/codes_sirv.jpg); height: 176px; position: absolute; right: 0; top: 30px; width: 154px; z-index: 1; } .code_game .notebook { background: url($s3/images/codes_notebook_bg.png) no-repeat center top; height: 803px; margin: -15px 0 0 -25px; padding: 60px; position: relative; width: 625px; z-index: 2; } .code_game .number { font-family: $interstate_condensed_bold; font-size: 40px; line-height: 50px; } .code_game .number span { font-size: 24px; } .code_game .code img { margin: 0 10px; } .code_game table th { color: black; font-size: 18px; line-height: 42px; padding: 0 0 10px; text-align: center; vertical-align: middle; } .code_game table th.icon { line-height: normal; } .code_game table td { border-color: #BCBABA; padding: 27px 0 22px; } .code_game table tr:last-of-type td { border-bottom: 1px solid #BCBABA; } .code_game .answer input { background: rgba(255,255,255,.5); border: 1px solid rgba(102,102,102,.5); font-family: $interstate; font-size: 20px; padding: 10px; width: 100%; } .code_game .correct .answer input { background: rgba(208,253,212,.5); border-color: rgba(0,153,51,.5); } .code_game .correct .code img { opacity: .35; } .code_game .correct .number { color: #009933; } .code_game .incorrect .answer input { background: rgba(239,177,190,.5); border-color: rgba(216,0,25,.5); } .code_game .incorrect .number { color: #D80019; } .code_game .blurb { float: left; width: 395px; } .code_game .submit { border: 0; float: right; margin-top: -5px; -webkit-appearance: none; } .congrats { margin-top: 30px; } .congrats p { font-size: 21px; } .congrats .badge { display: block; margin: 20px auto; } .congrats hr { margin-bottom: 30px; } .congrats .button { clear: both; display: block; float: none; margin: 10px 0; width: 215px; } /*------------------------------------------- !Bibliography -------------------------------------------*/ .module_search { border: 1px solid #DEDEDE; height: 36px; margin-bottom: 20px; width: 580px; } .module_search .search_field { border: 0; float: left; font-size: 15px; height: 33px; line-height: 34px; margin: 0; padding: 0 10px; width: 534px; } .module_search input.submit{ background: #fff url($s3/images/icon_search.png) no-repeat center; border: 0; cursor: pointer; float: right; height: 34px; margin: 0; padding: 0; text-indent: -99999px; width: 34px; } .spycast_list { float: left; } .spycast_list .item { clear: both; float: left; width: 580px; } .spycast_list hr { clear: both; float: left; width: 100%; } .pagination { float: left; } .spycast_episode p { float: left; } .spycast_episode .button { float: left; margin-top: 40px; margin-right: 10px; } /*------------------------------------------- !Google CSE -------------------------------------------*/ #search_results { min-height: 200px; } #___gcse_0, #___gcse_0 * { } #___gcse_0 tr { background: none; line-height: 1.5; } #___gcse_0 table, #___gcse_0 td { background: none; border: 0; padding: 0; margin: 0; } #___gcse_0 .gsc-control-cse { background: none; border: 1px solid transparent; padding: 0; margin: 0; width: 100%; } #___gcse_0 .gsc-results { width: 100%; } #___gcse_0 .gsc-tabsArea, #___gcse_0 .gsc-resultsHeader { display: none; } #___gcse_0 .gsc-search-box { border: 0; border-collapse: collapse; padding: 0 0 10px 0; } #___gcse_0 .gsc-adBlockVertical { display: none; } #___gcse_0 table.gsc-search-box { position: relative; border: none; } #___gcse_0 table tbody { border: none !important; } #___gcse_0 .gsc-input-box { border: none; height: auto; } #___gcse_0 .gsc-search-box { border: 1px solid transparent; padding:0; } #___gcse_0 .gsc-search-box input.gsc-input { background: #555 !important; border: none; color: #fff; display: block; font-family: $interstate_condensed; font-size: 19px; height: auto !important; line-height: 1; outline: none !important; padding: 14px 20px 13px !important; text-transform: uppercase; } #___gcse_0 .gsc-search-box .gsib_b { display: none; } #___gcse_0 .gsc-search-box button.gsc-search-button { height: 100%; width: 50px; position: absolute; top: 0; right: 0; background: none; border: none; cursor: pointer; } .cse .gsc-search-button-v2:focus, .gsc-search-button-v2:focus { box-shadow: none; } #___gcse_0 .gsc-search-box button.gsc-search-button svg { display: none; } #___gcse_0 .gsc-search-box button.gsc-search-button:before { height: 100%; width: 100%; position: absolute; top: 0; left: 0; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAFMN540AAAABGdBTUEAALGPC/xhBQAAAxFJREFUSA2tlr1rVEEUxTcKUSRRgqJN0E6RpLERPwpxGzEkhYVo0P8gpLUQISAo0UKws1yJYCF+NNYpAmoj2plCDQgpFGwimsRo1t+Zffdl5s289eWRC2fn3nPPvTM7O2/eNhpYu90+Ay7Kd4FzOv70NsYDRjAedD7yafAYtI1Y8VRV3LzWxEUiiAlWTeiPRVFnOZkiSPpVRT8QErwB7wIRxD4wYyT+BDjrYpxgXpFQ6xq1gXflFKzp4pLKn0qq8iSCq07JB/4wwxPFPfqQWYceDH8Uys3rksWPTNChCfSVzOZw7oCXRjCeKDZwcSbI9yIlQnNFuiBHrJ2dC8iSAN11kDfQbuwESyX6Ih3r1A2bKCr9mPywRD6nmRvaXoYPSmLr4AZogknwC6jomrS4IxprGcWjaoaFTSC2g3vgC/gKHoH+/86CaBbI/oAWeACWgGyxtAHJBSmwvqIITsftN1gr5rQBl0Gwi5EIQhqsFeQ6XHsyIBMBusPSBqmICLJhIC02YKz7nS2oOB4zXZ3ij1ZsGzGWEyUOy92tNQdp4qmIDBSdAI2OaXivKQW5ApYTNY4i9xmEs/pict8lwF4D/fYXwAsg+wtWQfkbgqQeu3lg9g3nnE2C372BCctGv0F+dZaJU7wawKcfFpJ6GC6BT6CK/UA0BaIHKzV5xFF4FCwAM90Huon2RmII+F4wBt4CM/3q4yl9xCHUN5wFZjcjUQWCYl2Zy1kTnZrB0jKSuvFsS/UN622XNwM9ngKZjuWQl9pwSeialenGTG7phrq6R69XaorNJ6tI6G6XtZKCmiT9dDjNom+t22tH1rv8Ka03ud9vV9SCJektJtMLqTcS1CTo9VxNMd0k8TMP2Q/0HMr0WMSiTU5Oj1tqlll+fUVtEPSBxUyot2gzElUgqNsP3O3MqBN9qkKZuxDGEa8Bs2c4R7oVk98DbgP3d4fRTBdJ+G+lWyPlKBgED4FWXdXeIzyd1etvkt4Kss0vwF8gDQbAENDtdBwcAl3PA/mtW4C/mKp+YgHnq9ZuiY4FjAAdvvv/ADqB6RdlLsUIAAAAAElFTkSuQmCC') no-repeat 50% 50% / 15px 15px; content: ""; pointer-events: none; } #___gcse_0 .gsc-search-box input.gsc-search-button { height: 100%; width: 100%; position: absolute; top: 0; left: 0; border: 0; cursor: pointer; margin: 0; opacity: 0; padding: 0; } #___gcse_0 .gsc-search-box input.gsc-search-button:hover { /* background-color: #222; */ } #___gcse_0 .gsc-search-box td.gsc-input { padding: 0; } #___gcse_0 .gsc-search-box td.gsc-clear-button { display: none; margin: 10px; padding: 10px; } #___gcse_0 .gsc-thinWrapper { width: 100%; } #___gcse_0 .gs-spelling b, #___gcse_0 .gs-spelling i, #___gcse_0 .gs-spelling a { color: #222; font-weight: normal; text-decoration: none; } #___gcse_0 .gsc-result-info { color: #A1A19F; font-family: $interstate_light; font-size: 13px; margin: 0 0 20px 0; padding: 0 0 5px; } #___gcse_0 .gsc-table-result { color: #222; font-size: 14px } #___gcse_0 .gsc-result { border: none; border-bottom: 1px solid #E9E9E9; clear: both; font-size: 14px; line-height: 18px; margin: 0; overflow:hidden; padding: 20px 0 25px; } #___gcse_0 .gs-result img.gs-image { display:none; } #___gcse_0 .gs-result .gs-web-image-box { padding: 0; width: 0; } #___gcse_0 .gs-no-results-result .gs-snippet { background: none; border: none; font-size: 18px; line-height: 1.4; margin: 0; padding: 5px 0 0; } #___gcse_0 .gsc-table-result, #___gcse_0 .gsc-thumbnail-inside, #___gcse_0 .gsc-url-top { padding-right: 0; padding-left: 0; } #___gcse_0 .gs-title { color: #111; font-family: $interstate_condensed; font-size: 28px; line-height: 1.6; height: auto; margin: 0 0 2px; text-decoration: none; } #___gcse_0 .gs-title b { text-decoration: none; } #___gcse_0 a.gs-title { color: #111; font-size: 28px; } #___gcse_0 a.gs-title b { color: #111; font-size: 28px; } #___gcse_0 a.gs-title:hover b, #___gcse_0 a.gs-title:hover { color: $spy_red; } #___gcse_0 .gs-snippet { color: #333; font-family: $interstate_light; font-size: 15px; line-height: 20px; margin: 0 0 5px; } #___gcse_0 .gs-snippet b { color: #333; font-weight: normal; } #___gcse_0 .gs-visibleUrl { color: #A1A19F; font-family: $interstate_light; font-size: 14px; margin: 8px 0 0; } #___gcse_0 .gs-visibleUrl-short { display: none; } #___gcse_0 .gs-visibleUrl-long { color: #DA001A; display: block; margin: 0; overflow: visible; } #___gcse_0 .gsc-cursor-box { padding: 20px 0; overflow: hidden; } #___gcse_0 .gsc-cursor { } #___gcse_0 .gsc-cursor-page { background: url($s3/images/bg_darkgray.gif); color: #fff; display: inline-block; font-size: 19px; font-family: $interstate_condensed; height: 38px; padding: 10px 15px; text-decoration: none; vertical-align: bottom; } #___gcse_0 .gsc-cursor-page:hover { background: url($s3/images/bg_gray.gif); } #___gcse_0 .gsc-cursor-current-page, #___gcse_0 .gsc-cursor-current-page:hover { background: url($s3/images/bg_red.gif); color: #fff; } /*------------------------------------------- !DatePicker -------------------------------------------*/ .ui-datepicker a { color: #111; } .ui-datepicker * { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .ui-datepicker { background: #fff; border-radius: 2px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25); padding: 0; } .ui-datepicker .ui-datepicker-header { position: relative; padding: 0 0 5px; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { background: url($s3/images/calendar_arrows.png) no-repeat left bottom; cursor: pointer; display: block; height: 10px; padding: 0; position: absolute; text-indent: -99999px; top: 10px; width: 6px; z-index: 2; } .ui-datepicker .ui-datepicker-prev { left: 10px; } .ui-datepicker .ui-datepicker-next { background-position: right bottom; right: 10px; } /* .ui-datepicker .ui-datepicker-prev:hover { background-color: transparent; background-position: left top; } .ui-datepicker .ui-datepicker-next:hover { background-color: transparent; background-position: right top; } */ .ui-datepicker .ui-datepicker-title { background: url($s3/images/bg_red.gif); color: #fff; font-family: $interstate_light; font-size: 13px; height: 29px; letter-spacing: 0.05em; padding: 8px 0 0; text-align: center; text-transform: uppercase; } .ui-datepicker select.ui-datepicker-month-year { width: 100%; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%; } .ui-datepicker table { border-collapse: collapse; font-size: 12px; width: 100%; } .ui-datepicker th { background: #fff; border: none; color: #111; font-weight: normal; font-size: 11px; padding: 0; text-align: center; } .ui-datepicker td { background: none; border: 1px solid #EAEAEA; font-family: $interstate_light; font-size: 12px; padding: 0; height: 18px; width: 28px; } .ui-datepicker td span, .ui-datepicker td a { display: block; margin: 3px; text-align: center; } .ui-datepicker td.ui-state-disabled { background: #FAFAFA; } .ui-datepicker td.ui-state-disabled:hover { background: #FAFAFA; } .ui-datepicker a { padding: 5px 0; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: 0; padding: 0; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: 0; cursor: pointer; padding: 0; width:auto; overflow:visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; } .ui-datepicker .ui-datepicker-other-month { background: #2C4143; } .ui-datepicker .ui-datepicker-other-month a { color: rgba(255, 255, 255, 0.5); } .ui-datepicker .ui-datepicker-today { background: url($s3/images/bg_gray.gif) repeat left top; } .ui-datepicker .ui-datepicker-today a { color: #111; } .ui-datepicker .ui-datepicker-current-day { background: url($s3/images/bg_red.gif) repeat left top; } .ui-datepicker .ui-datepicker-current-day a { color: #fff; } .ui-datepicker td:hover { background: url($s3/images/bg_darkgray.gif) repeat left top; } .ui-datepicker td:hover a { color: #fff; } .ui-datepicker .ui-datepicker-current-week a { background: #eee; color: #375154; } .ui-datepicker .ui-datepicker-current-week.ui-datepicker-other-month a { color: #999; } #ui-datepicker-div { font-size: 12px; } .ui-datepicker-trigger { cursor: pointer; position: absolute; right: -40px; top: 3px; } #form_builder_hidden { display: none; position: absolute; right: -40px; top: 0; width: 18px; } #form_builder_field_23 { float: left; } .form_builder_sublabel { clear: both; } .form_builder_date_4 { overflow: visible; position: relative; width: 60px; } /*------------------------------------------- !Add This -------------------------------------------*/ .addthis_default_style { float: left; } #at15s { background: #fff; border-radius: 2px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); font-size: 14px; margin: -15px 0 0 -20px; overflow: hidden; width: 120px; } #at15s_head { display: none; } #at15pf { display: none; } #at_pspromo { display: none !important; } #at_hover { border: 1px solid #ccc; border-radius: 2px; padding: 10px 13px; } #at16lb { display: none !important; } .at_item { color: #999; display: block; padding: 3px 5px; } .at_item:hover { color: #222; } /*------------------------------------------- !Google Translate -------------------------------------------*/ #google_translate_element { float: right; } .skiptranslate { -webkit-transform-style: flat; } .translated-ltr #header .top_nav a { font-size: 12px; } .translated-ltr #header .main_nav .item a { font-size: 17px; } /*------------------------------------------- !Keyframes -------------------------------------------*/ @-webkit-keyframes intel_glow { 0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.25); } 50% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); } 100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.25); } } @-moz-keyframes intel_glow { 0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.25); } 50% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); } 100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.25); } } @-ms-keyframes intel_glow { 0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.25); } 50% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); } 100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.25); } } @-o-keyframes intel_glow { 0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.25); } 50% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); } 100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.25); } } @keyframes intel_glow { 0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.25); } 50% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); } 100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.25); } } @-webkit-keyframes shutter_snap { 0% { -webkit-transform: rotate(60deg) translateX(15px) translateY(15px); -webkit-transform-origin: bottom center; -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: rotate(0) translateX(0px) translateY(0px); -webkit-transform-origin: bottom center; -webkit-animation-timing-function: linear; } 100% { -webkit-transform: rotate(60deg) translateX(15px) translateY(15px); -webkit-transform-origin: bottom center; -webkit-animation-timing-function: ease-in; } } @-moz-keyframes shutter_snap { 0% { -moz-transform: rotate(60deg) translateX(15px) translateY(15px); -moz-transform-origin: bottom center; -moz-animation-timing-function: ease-out; } 50% { -moz-transform: rotate(0) translateX(0px) translateY(0px); -moz-transform-origin: bottom center; -moz-animation-timing-function: linear; } 100% { -moz-transform: rotate(60deg) translateX(15px) translateY(15px); -moz-transform-origin: bottom center; -moz-animation-timing-function: ease-in; } } @-ms-keyframes shutter_snap { 0% { -ms-transform: rotate(60deg) translateX(15px) translateY(15px); -ms-transform-origin: bottom center; -ms-animation-timing-function: ease-out; } 50% { -ms-transform: rotate(0) translateX(0px) translateY(0px); -ms-transform-origin: bottom center; -ms-animation-timing-function: linear; } 100% { -ms-transform: rotate(60deg) translateX(15px) translateY(15px); -ms-transform-origin: bottom center; -ms-animation-timing-function: ease-in; } } @-o-keyframes shutter_snap { 0% { -o-transform: rotate(60deg) translateX(15px) translateY(15px); -o-transform-origin: bottom center; -o-animation-timing-function: ease-out; } 50% { -o-transform: rotate(0) translateX(0px) translateY(0px); -o-transform-origin: bottom center; -o-animation-timing-function: linear; } 100% { -o-transform: rotate(60deg) translateX(15px) translateY(15px); -o-transform-origin: bottom center; -o-animation-timing-function: ease-in; } } @-keyframes shutter_snap { 0% { transform: rotate(60deg) translateX(15px) translateY(15px); transform-origin: bottom center; animation-timing-function: ease-out; } 50% { transform: rotate(0) translateX(0px) translateY(0px); transform-origin: bottom center; animation-timing-function: linear; } 100% { transform: rotate(60deg) translateX(15px) translateY(15px); transform-origin: bottom center; animation-timing-function: ease-in; } } @-webkit-keyframes toggle_blip { 0% { -webkit-transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { -webkit-transform: scale(2); opacity: 0.1; } } @-moz-keyframes toggle_blip { 0% { -moz-transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { -moz-transform: scale(2); opacity: 0.1; } } @-ms-keyframes toggle_blip { 0% { -ms-transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { -ms-transform: scale(2); opacity: 0.1; } } @-o-keyframes toggle_blip { 0% { -o-transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { -o-transform: scale(2); opacity: 0.1; } } @keyframes toggle_blip { 0% { transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { transform: scale(2); opacity: 0.1; } } /*------------------------------------------- Intel Spycast -------------------------------------------*/ .spycast { background: #111; padding: 30px; } .spycast .spycast_inner { position: relative; } .spycast .spycast_radio { padding-top: 60px; } .spycast .spycast_icon { height: 12px; width: 12px; position: relative; background: #e02930; border-radius: 50%; display: block; margin-bottom: 32px; } .spycast .spycast_icon:before { height: 100%; width: 100%; position: absolute; top: 0; left: 0; animation: play-cast 1s infinite; border-radius: 50%; content: ""; clip-path: polygon( 50% 50%, 50% -120px, 120px -120px, 120px 50%, 50% 50% ); -webkit-clip-path: polygon( 50% 50%, 50% -120px, 120px -120px, 120px 50%, 50% 50% ); transform: rotate(20deg); } @keyframes play-cast { 80% { box-shadow: 0 0 0 8px #111, 0 0 0 9px #fff, 0 0 0 17px #111, 0 0 0 18px #fff, 0 0 0 26px #111, 0 0 0 27px #fff, 0 0 0 35px #111, 0 0 0 36px #fff, 0 0 0 44px #111, 0 0 0 45px #fff, 0 0 0 53px #111, 0 0 0 54px #fff, 0 0 0 62px #111, 0 0 0 63px #fff; } 100% { box-shadow: 0 0 0 8px #111, 0 0 0 9px transparent, 0 0 0 17px #111, 0 0 0 18px transparent, 0 0 0 26px #111, 0 0 0 27px transparent, 0 0 0 35px #111, 0 0 0 36px transparent, 0 0 0 44px #111, 0 0 0 45px transparent, 0 0 0 53px #111, 0 0 0 54px transparent, 0 0 0 62px #111, 0 0 0 63px transparent; } } .spycast .spycast_intro { color: #fff; font-family: "GuilderAlternativeRegular", sans-serif; font-size: 68px; letter-spacing: .5px; text-transform: none; } .spycast .spycast_body { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 4; background: #111; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } .spycast:focus .spycast_body, .spycast:hover .spycast_body { opacity: 1; visibility: visible; } .spycast .spycast_label { color: #fff; font-family: "Interstate Light", sans-serif; margin-bottom: 16px; } .spycast .spycast_link { height: 37px; width: 37px; position: relative; background: #e02930; border-radius: 50%; box-shadow: 0 0 0 0 #e02930; color: #fff; display: block; margin-bottom: 12px; transition: background .25s, box-shadow .25s; } .spycast .spycast_link:focus, .spycast .spycast_link:hover { animation: cast-link 1s infinite; background: #fff; color: #e02930; } @keyframes cast-link { 80%, 100% { box-shadow: 0 0 0 10px transparent; } } .spycast .spycast_link:before { position: absolute; top: 50%; left: 50%; border: 10px solid transparent; border-left-color: currentColor; content: ""; margin-left: 5px; pointer-events: none; transform: translate(-50%, -50%) scaleY(.65); } .spycast .spycast_link_label { width: 1px; height: 1px; position: absolute; border: 0; clip: rect(0 0 0 0); margin: -1px; overflow: hidden; padding: 0; } .spycast .spycast_title { border-bottom: 1px solid rgba(255, 255, 255, .25); color: #fff; font-family: "Interstate",sans-serif; font-size: 20px; line-height: 24px; margin-bottom: 10px; padding-bottom: 8px; text-transform: uppercase; } .spycast .spycast_date { color: rgba(255, 255, 255, .75); font-family: "Interstate RegularCond", sans-serif; } /*------------------------------------------- GDPR -------------------------------------------*/ .gdpr { position: relative; z-index: 8; background: #2F2F2F; color: #fff; display: none; padding: 30px 0; } .gdpr.not-accepted { display: block; } .gdpr_inner {} .gbpr_header {} .gdpr_title { display: block; font-family: "Interstate RegularCond",sans-serif; font-size: 18px; letter-spacing: .4px; margin: 0 0 9px; text-transform: uppercase; } .gdpr_body { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .gdpr_content { width: calc(100% - 140px); font-family: "Interstate Light",sans-serif; font-size: 13px; line-height: 20px; padding-right: 40px; } .gdpr_content p { font: inherit; margin: 0; } .gdpr_content a { border-bottom: 1px solid #fff; font-family: "Interstate",sans-serif; color: inherit; transition: border .25s, color .25s; } .gdpr_content a:hover, .gdpr_content a:focus { border-color: #DC0319; color: rgba(255, 255, 255, .75); } .gdpr_accept { width: 140px; position: relative; background: url("https://spy-museum.s3.amazonaws.com/images/nav_bg_black.png") repeat; color: inherit; display: inline-block; font-family: "Interstate RegularCond",sans-serif; padding: 12px 35px 12px 15px; text-transform: uppercase; transition: color .25s; } .gdpr_accept:hover, .gdpr_accept:focus { color: #DC0319; } .gdpr_accept:after { height: 6px; width: 6px; position: absolute; top: 50%; right: 15px; border-top: 2px solid #DC0319; border-right: 2px solid #DC0319; content: ""; display: inline-block; margin-left: 20px; vertical-align: middle; transform: translate(0, -50%) rotate(45deg); }