/* Theme Name: Seal 7 Theme Theme URI: http://seal.com Description: Seal 7 Theme Author: David Kitson Author URI: http://kaleid.co Version: 1 */ @import url(css/reset.css); *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height:100%; display:block;} body { font-size:15px; line-height:120%; letter-spacing:2px; background:#000; height:100%; } a { text-decoration:none; } a:hover { text-decoration:none; } .loader { position:fixed; top:0;left:0; width:100%; height:100%; background:#fff url(images/loader.gif) 50% 50% no-repeat; background-size:150px; z-index:2000000000;} #wrap { margin:0 auto 0; position:relative; height:100%;} #wrap2 { margin:0 auto 0; opacity:0.8; display:block; position:absolute; width:100%; height:100%; top:0; left:0;} #wrap3 { margin:0 auto 0; opacity:0.8; display:block; position:absolute; width:100%; height:auto; top:0; left:0;} /*HOME*/ iframe.forMobile { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0;right: 0; bottom: 0; } .onMobile iframe.forMobile { display: block; z-index:100; } #vid_controls { position:fixed; margin:0 auto 0; bottom:0; border-top:2px solid #fff; left:0; width:100%; display:block; z-index:50000000; -webkit-transform: translateZ(0); background:#cd273d; text-align:center;} #vid_controls ul { text-align:center; width:100%; padding:0.5em; z-index:50000000; text-align:center;} #vid_controls li{ list-style: none; display:inline; padding:0; } #vid_controls a { padding:0; text-transform: uppercase; text-decoration: none; color:#fff; line-height:1em; letter-spacing: 2px; } #vid_controls li { font-size: 2em; margin: 0 0.1em 0 0; } #vid_controls li a:after { content: '.'; color:#fff; margin-right:-5px;} #vid_controls li:last-child a:after { content: ''; } #vid_controls a:hover { opacity:0.7;} #flickrwrap { position: relative; width:100%; height:auto; } .onMobile .hidemenow { display:none!important;} .onMobile #videoBanner { display:none!important;} /*TOUR DATES*/ #tourdates { padding:3em 3em 1em; position:relative; max-width:1300px; margin:0 auto;} #tourdates header { position:relative; text-align:center;} #tourdates header h1{ color:#fff; font-size:5em; display:inline-block; padding:1.3em 0.2em 0.5em 0.2em; position:relative; } #tourdates header h1:after, #tourdates header h1:before { content: '.'; color:#cd273d; display:inline;} #tour_dates { margin: 2em auto; padding:1em; text-transform:uppercase; letter-spacing:3px; } #tour_dates .tour_date { background:rgba(255,255,255,0.1); padding:1.5em 1.2em 0.7em; margin:0 auto 1em; position:relative; height:auto; } #tour_dates .tour_date:nth-child(2n) { background:rgba(0,0,0,0.3); } #tour_dates .tour_date:last-child { margin: 0 auto 0;} #tour_dates .tour_date .dm { display:inline-block; font-size: 2em; color:#cd273d;} #tour_dates .tour_date .lu {display:inline-block; font-size: 2em; margin-left:5px; color:#fff;} #tour_dates .tour_date .lu a{ color:#fff;} #tour_dates .tour_date .lu a:hover{ opacity:0.6;} #tour_dates .tour_date .lu span{ font-size: 0.6em; text-transform:none;} #tour_dates .tour_date .tix {display:block; position:absolute; top:0; right:0; height:100%; text-transform:none; font-size:2em; color:#000; background:#cd273d; color:#fff; padding:22px 0; width:200px; text-align:center;} #tour_dates .tour_date span a { color: #000;} #tour_dates .tour_date span a:hover { opacity:0.6; } #tour_dates .tour_date .tix:hover { color:#fff; border-left:solid #fff 10px; padding-left:10px; } #tour_dates .tour_date .soldout {display:block; position:absolute; top:0; right:0; height:100%; font-size:3em; background:#fff; color:#cd273d; padding:22px 0; width:200px; text-align:center;} #tour_header { font-size:3.4em!important; width:550px!important; } /*VIDEO*/ #featuredvid{ position:absolute; top:0; left:0; width:100%; height:100%; display:block; border-top:45px;} #featuredvid iframe { position:absolute; top:0; left:0; width:100%; height:100%;} .vid_section { background:#fff; border-top:2px solid #cd273d; padding:10px 40px 0; position:fixed; width:100%; bottom:0; left:0; z-index:2;} .videos_slider { padding:10px; margin:0 auto; } .videos_slider a.vidstill{ display:block; padding-top:50%; cursor:pointer;} .videos_slider .video-item {border:2px solid #cd273d; background:#000 url(images/play.png) no-repeat 50% 85%; background-size:15% auto; position:relative; } #vid_button { position:absolute; top:-50px; left:50%; margin-left:-100px; width:200px; height:50px; background: url(images/vid_close.png) no-repeat 50% 50%; background-size:auto 100%; z-index:1; cursor:pointer; } #vid_button_close { position:fixed; bottom:-100px; left:50%; margin-left:-150px; width:300px; height:70px; background: url(images/vid_select.png) no-repeat 50% 50%; background-size:auto 100%; z-index:1; } #vid_button:hover { cursor:pointer;} .videos_slider .video-item h2 { position:absolute; width:100%; padding:0 10px; top:50%; margin-top:-10px; color:#fff; text-align:center; letter-spacing:1px; font-size:13px; opacity:0; line-height:110%;} .videos_slider .video-item h2:after, .videos_slider .video-item h2:before { content: '.'; color:#cd273d; font-size:30px;} .videos_slider .video-item h2 a { color:#fff;} .videos_slider .video-item h2 a:hover { color:#fff;} .video-item:hover > a.vidstill{ opacity:0.1;} .video-item:hover > h2 { opacity:1;} /*MUSIC*/ #music { padding:3em 0.5em 1em; position:relative; max-width:1300px; margin:0 auto;} #music header { position:relative; text-align:center;} #music header h1{ color:#fff; font-size:5em; display:inline-block; padding:1.3em 0.2em 0.5em 0.2em; position:relative; text-transform:uppercase; } #music header h1:after, #music header h1:before { content: '.'; color:#cd273d; display:inline;} #music .item { display:inline-block; width:20%; float:left; position:relative; padding: 0.5em; color:#fff; text-align:left; text-align:center;} #music .item .packshot { padding-top:100%; margin:0 auto; position:relative; width:100%; margin-bottom:0.5em; border:2px solid #BCBCBC; } #music .item:hover > .packshot { border:2px solid #cd273d;} #music .item:hover > h1 { color:#cd273d; } #music .item h1 { font-size:1.5em; line-height: 110%; text-transform:uppercase;} #music .item:hover > h1:after, #music .item:hover > h1:before { content: '.'; color:#fff; font-size:50px;} #music .item h1:after, #music .item h1:before { content: '.'; color:#cd273d; font-size:50px;} /*MUSIC SINGLE*/ #music_single { padding:3em 1em 4em; position:relative; max-width:1300px; margin:0 auto;} #music_single header { position:relative; text-align:center;} #music_single header h1{ color:#fff; font-size:5em; display:inline-block; padding:1.3em 0.2em 0.5em 0.2em; position:relative; text-transform:uppercase; } #music_single header h1:after, #music_single header h1:before { content: '.'; color:#cd273d; display:inline;} #music_single header h2{ color:#cd273d; font-size:1.5em; display:block; position:relative; margin-bottom:1em;} #music_single .item_single { display:inline-block; width:40%; float:left; position:relative; padding: 0.5em; color:#fff; text-align:left; text-align:center;} #music_single .item_single .packshot { padding-top:100%; margin:0 auto; position:relative; width:100%; margin-bottom:0.5em; border:2px solid #cd273d; } #music_single .item_single a{ display:inline-block; width:33.3%; float:left; padding:0 5px; margin-top:1em;} #music_single .item_single a img { display:block; width:100%; height:auto;} #music_single .item_single a:hover { opacity:0.7;} #music_single .item_single2 { display:inline-block; width:60%; float:left; position:relative; padding: 0.5em 0.5em 0.5em 2em; color:#fff; text-align:left; text-align:center;} #blurb { font-weight:300; line-height:150%; font-size:1.2em; text-align:left; margin-bottom:1em; } #tracklist { padding-top:1em; padding-bottom:3em;} #tracklist h2 { color: #cd273d; text-align:left; font-size:2em; border-bottom:2px solid #cd273d; margin-bottom:0.3em; padding-bottom:0.5em;} #tracklist ol { color: #fff; font-size:1.2em; font-weight:300; list-style-type: decimal; padding-left:0; text-align:left; list-style-position: inside; -moz-column-count: 2; -moz-column-gap: 10px; -webkit-column-count: 2; -webkit-column-gap: 10px; column-count: 2; column-gap: 10px;} #tracklist li { margin:0.5em auto; display: list-item; list-style-position: inside; text-indent: -1.4em; padding-left: 1.5em; line-height:115%; } /*NAV*/ #menu, #menu2 { position:fixed; margin:0 auto 0; top:0; left:0; width:100%; display:block; z-index:9999; -webkit-transform: translateZ(0); background:#fff url(images/logo.png) 5px 50% no-repeat; background-size:auto 80%; border-bottom:2px solid #cd273d; font-style:italic; font-weight:500; } #menu ul, #menu2 ul { text-align:center; width:100%; padding:0.5em; z-index:50000000; text-align:center;} #menu li, #menu2 li{ list-style: none; display:inline; padding:0; } #menu a, #menu2 a { padding:0; text-transform: uppercase; text-decoration: none; color:#000; line-height:1em; letter-spacing: 2px; } #menu li, #menu2 li { font-size: 2em; margin: 0 0.1em 0 0; } #menu li a:after, #menu2 li a:after { content: '.'; color:#cd273d; margin-right:-5px;} #menu li:last-child a:after { content: ''; } #menu a:hover, #menu2 a:hover { color:#cd273d;} #mob_menu { display:none;} .current_page_item a, .current_page_item a:hover, #menu2 .current_page_item a, #menu2 .current_page_item a:hover { text-decoration:none; color:#808080!important;} #menu2{display:none;} /*SOCIALS*/ #socialsgrp { position:absolute; top:-245px; right:20px; background:#fff; padding:10px; z-index:999; border-bottom:2px solid #cd273d; } #socialsgrp a{ width:30px; display:block; margin:5px auto;} #socialsgrp a img { width:100%; height:auto; display:block} .social_open { position:fixed; top:0; right:20px; width:50px; height:45px; display:block; background:url(images/social_lines.png) no-repeat 50% 50%; background-size:auto 80%; } .social_open:hover, .social_close:hover { opacity:0.6; cursor:pointer;} .social_close { position:fixed; top:0; right:20px; width:50px; height:45px; display:block; background:url(images/social_close.png) no-repeat 50% 50%; background-size:auto 80%; display:none; } /*SOCIALS*/ #socialsgrp2 { position:absolute; top:100%; left:0; background:#fff; padding:5px; z-index:9999; border-bottom:2px solid #cd273d; text-align:center;width:100%; display:none;} #socialsgrp2 a{ width:30px; display:inline-block; margin:0 4px;} #socialsgrp2 a img { width:100%; height:auto; display:block} #homehead { position:fixed; top: 0; left:0 ; width:200px; height:40px;z-index:500000000;} /*CSS SNIPPETS*/ .vidWrap { position: relative; padding-bottom: 53.25%; /* 16:9 */ padding-top: 25px; height: 0;} .vidWrap iframe { position: absolute;top: 0; left: 0; width: 100%; height: 100%; } .cover { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat:no-repeat; background-position:50% 50%; background-attachment: scroll; } .clear { clear:both; vertical-align: middle;} .yellow { color:#ffca00;} .clear { clear:both; white-space: none;} .transall, .bg, .arrows, #artist_slider h1, #promo_banners a img { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;} .transopac { -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out;} a:hover.opac { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50);-moz-opacity: 0.5;-khtml-opacity: 0.5;opacity: 0.5; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;} img.ri { position: absolute; max-width: 80%; top: 10%; left: 10%; border-radius: 3px; box-shadow: 0 3px 6px rgba(0,0,0,0.9); } img.ri:empty { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .desat, .bg, .video-item a:hover{ -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray; filter: url("data:image/svg+xml;utf8,#greyscale"); } @media screen and (orientation: portrait) { img.ri { max-width: 90%; } } @media screen and (orientation: landscape) { img.ri { max-height: 90%; } } @media only screen and (max-width : 1370px) { @media only screen and (max-width : 1175px) { @media only screen and (max-width : 980px) { /*TOUR DATES*/ #tourdates { padding:3em 1em 1em;} #tour_dates .tour_date { padding:2em 0 0;} #tour_dates .tour_date .dm { display:block; font-size: 2.5em; margin-left:20px;} #tour_dates .tour_date .lu {display:block; font-size: 2.5em; margin-left:20px; margin-top:10px; line-height:90%;} #tour_dates .tour_date .lu span{ line-height:100%; display:block;} #tour_dates .tour_date .tix {font-size: 2.5em; margin-top:20px; width:100%; text-align:center; position:relative;} #tour_dates .tour_date .soldout {font-size: 2.5em; margin-top:20px; width:100%; text-align:center; position:relative;} #tour_header { font-size:2em!important; width:100%!important; } /*MUSIC*/ #music { padding:3em 1em 1em; position:relative; max-width:800px; margin:0 auto 2em;} #music .item { display:inline-block; width:50%; float:left; position:relative; padding: 0.5em; } } @media only screen and (max-width : 750px) { body{ font-size:12px; } /*NAV*/ #mob_menu { display:block; position:relative; color:#000; font-size:2em; text-align:center; line-height:1.5; text-align:right; background:#fff url(images/logo.png) 5px 50% no-repeat; background-size:auto 80%; } #menu { display:none;} #menu2 { display:block; position:fixed; background-image:none;} #menu2 ul { padding:0 0; display:none; } #menu2 li { list-style: none; display:block; border-bottom:2px solid #222; padding:0.5em 0; font-size:2em; } #menu2 li:first-child { border-top:2px solid #222;} /*MUSICSINGLE*/ #music_single .item_single { width:100%;} #music_single .item_single2 { width:100%;} #music_single header h1{ font-size:3em; display:inline-block; padding:1em 0.2em 0.5em 0.2em; position:relative; text-transform:uppercase; } #music_single header h2{ color:#cd273d; font-size:1.2em; display:block; position:relative; margin-bottom:1em;} #blurb { line-height:150%; font-size:1.1em; text-align:left; margin-bottom:1em; padding:1em 0; } #tracklist ol { color: #fff; font-size:1.2em; font-weight:300; list-style-type: decimal; padding-left:0; text-align:left; list-style-position: inside; -moz-column-count: 1; -moz-column-gap: 0px; -webkit-column-count: 1; -webkit-column-gap: 0px; column-count: 1; column-gap: 0px;} } @media only screen and (max-width : 650px) { /*TOUR*/ #tourdates header h1{ font-size:3em; } @media only screen and (max-width : 520px) { /*ARTISTS */ #artist_slider .item { padding-top:150%; } #artist_slider h1 { font-size:2.5em; text-align:center; padding-top:0.2em;} }