/* Slate Media Group 2015 =========================== CONTENTS: 01 Sensible defaults 02 Typography 03 Media queries =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 Sensible defaults ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ div, article, section, header, footer, nav, li { position:relative;} .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden;} body { background:#111113 url(../img/white-noise.png); color: #E1E1E1; font-family: 'Open Sans Condensed', sans-serif; font-size: 20px; letter-spacing: 1px; font-size: 20px;} body p {font-size: 20px;} ::-moz-selection { background:#ff0; color:#333; } ::selection { background:#ff0; color:#333; } a {color: #E1E1E1; text-decoration: none;} a.bit-events-nav {color: #FFF;} a.bit-events-nav:hover,a.bit-events-nav:focus,a.bit-events-nav:visited{color: #FFF;} a:hover,a:focus,a:visited{color: #FFF;} .epk-section a:hover{text-decoration: underline;} .bit-wrapper.t-bg{background: transparent;} body #bit-events > *{background: transparent !important;} table tr.even, table tr.alt, table tr:nth-of-type(even){background: transparent;} /* ---------------------------------------------------------------------------------------------------------- 02 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* 14 / 16 = 0.875em (14px equivalent) 16 / 16 = 1em (16px equivalent) 18 / 16 = 1.125em (18px equivalent) 21 / 16 = 1.3125em (21px equivalent) 24 / 16 = 1.5em (24px equivalent) 30 / 16 = 1.875em (30px equivalent) */ body, input, textarea {} h1, h2, h3, h4, h5, h6 { font-weight:bold; font-family: 'Open Sans Condensed', Helvetica, sans-serif; } /* Navigation */ [data-magellan-expedition], [data-magellan-expedition-clone]{background: #FFF url(../img/white-noise.png) repeat; height: 130px;} dl.sub-nav.logo-centered {margin-top: -60px;text-align: center;} dd.logo-left {width: 100%;} a.logo-anchor {display: block;height: 155px;margin-top: -19px;} a.logo-anchor img{margin-top: -50px; max-width: 500px;} .sub-nav dt a, .sub-nav dd a, .sub-nav li a{font-family: 'Open Sans Condensed', Helvetica, sans-serif;font-size: 21px;letter-spacing: 1px; color: #000; text-transform: uppercase;} dl.sub-nav:not(.logo-centered),.social-icons{float: left; margin-left: 40px;} i.p-fb,i.p-bc,i.p-tw{display: block; height: 30px;width: 30px;border-radius: 20px;} dl.social-icons dd {display: inline-block;margin-right: 10px;} i.p-fb{background: #000 url(../img/icons/facebook.png) no-repeat; background-size: 28px;background-position: 1px 1px;} i.p-bc{background: #000 url(../img/icons/bandcamp.png) no-repeat;background-size: 34px; background-position: -4px -3px; border: 1px solid #000;} i.p-tw{background: #000 url(../img/icons/twitter.png) no-repeat; background-size: 28px;background-position: 1px 1px;} .epk-nav-row{height: 120px;} .sub-nav dd.active a,.sub-nav dd.active a:hover{background: rgba(0, 0, 0, 0.75);} .mobile-nav-btn{display: none; text-align: center;} .mobile-nav-btn a {color: #000;} .logo-mobile{display: none;} /* EPK Banner */ .full-banner-image {width: 100%;height: auto;border-bottom: 4px solid rgba(255, 255, 255, 0.64);margin-bottom: 30px;} .full-banner-image img{width: 100%; height: auto; margin-top: -120px;} /* EPk Sections */ .epk-section{margin-top: 20px; margin-bottom: 50px; } .epk-section h2,.epk-section h3{background: #FFF url(../img/white-noise.png) repeat; text-transform: uppercase; font-family: 'Open Sans Condensed', Helveitca, sans-serif; font-size: 35px; text-align: center; padding: 5px 0px 5px 0px; margin-bottom: 15px;} /* EPK Video */ .video-section iframe{width: 100%; height: 500px;} /* EPK Music */ .player-artwork {} .jp-playlist ul li div a:hover,.jp-playlist ul li div a:focus{color: #FFF;} div.jp-type-playlist a:hover{color: #FFF !important;} i.play-controls {font-style: normal;} i.play-controls p {padding-left: 10px;margin: 0px;display: inline-block;font-size: 19px;} .epk-divides { position: relative; height: 2px; background-color: rgba(255, 255, 255, 0.27); margin-bottom: 10px; margin-top: 20px; } /* Tour Dates */ .epk-tour-dates-listed li{list-style: none;font-size: 20px;} /* Press */ ul.press-items{margin-top: 40px; margin-left: 0px;} ul.press-items li {list-style: none;border-bottom: 1px solid #CCC;margin-bottom: 40px;margin-top: 0px;} ul.press-items li span {color: #FFF;font-style: oblique;} /* Contacts */ .contact-email{text-align: center; margin-bottom: 100px;} /* Copyright Info */ .slate-epk-copyright{text-align: center;} .slate-epk-copyright a img {max-width: 9%;border: 1px solid rgba(204, 204, 204, 0.14);} .slate-epk-copyright p {margin-bottom: -20px;margin-top: -20px;} /* ---------------------------------------------------------------------------------------------------------- 03 Media queries (using a mobile-first approach) ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ @media screen and (max-width:906px) { .mobile-nav-btn{display: block;} [data-magellan-expedition], [data-magellan-expedition-clone]{height: 130px;overflow: hidden;margin-bottom: 35px;} .social-icons,[data-magellan-expedition] .sub-nav dd, [data-magellan-expedition-clone] .sub-nav dd,dl.sub-nav{float: none;clear: both;} dl.sub-nav{text-align: center;} .social-icons{text-align: center; margin-left: 16px;} .sub-nav{margin-top: 10px;} dl.sub-nav:not(.logo-centered){width: 88%;} } @media screen and (max-width:889px) { .full-banner-image img{margin-top: -11%;-webkit-transition-duration: -0.5s;} } @media screen and (max-width:598px) { dd.logo-left{width: auto;} .mobile-nav-btn{margin-top: -6px;} a.logo-anchor{height: 100px; overflow: hidden; margin-top: 0px; display: initial;} a.logo-anchor img{margin-top: 0px; width: 100%; display: none;} .logo-mobile{display: block;} dl.sub-nav.logo-centered{margin-top: -40px;} dl.sub-nav:not(.logo-centered){width: 100%;margin-left: -8px;} } @media screen and (max-width:464px) { .mobile-nav-btn{margin-bottom: 70px;} }