@charset "utf-8";
/* CSS Document */

* {margin:0; padding:0}

body { -webkit-text-size-adjust:none !important;
	-webkit-font-smoothing: subpixel-antialiased !important;
	-moz-osx-font-smoothing: subpixel-antialiased !important;
	text-rendering:optimizeLegibility !important;
	-webkit-font-feature-settings: 'kern' 1; margin:0; padding:0;}

.nixed {display:none !important}
	
.nix {width:60px; height:60px; background:teal; position:absolute; top:-10px; right:-10px; cursor: pointer; border-radius:100%; border:2px solid #fff }

.overlay {z-index:9999; position:fixed; top:0; left:0; bottom:0; right:0; background: rgba(25,25,25,.8);}
	
.choice {position:relative; width:90%; max-width:500px; margin:auto; top: 10%; bottom:auto; left:0; right:0; height: 500px; background:#fff; text-align:center; box-sizing:border-box; padding:40px; border-radius: 20px; box-shadow: 0 3px 3px 0 #333}

.guv { width:100%; height: 100vh }
.xcrss { position:absolute; transform:rotate(45deg); top:27px; left:11px; width:40px; height: 5px; background: #fff }
.xcrss.hex { transform:rotate(-45deg); }
	
.sektor { width:50%; height: 50vh; display:inline-block; position:relative; background-color: #203F44 }
	
.one, .two, .three, .four {
  position: absolute;
  height: 100%;
  width: 100%; 
  background-size: 100% auto; background-repeat: none; transition:all .5s ease; background-position: 0 top; opacity:.25; -webkit-filter: sepia(70%); filter: sepia(70%);
}
.one:hover, .two:hover, .three:hover, .four:hover {background-size: 110% auto; transition:all 2s ease; opacity: 1; -webkit-filter: sepia(0); filter: sepia(0);}

.one.hover, .two.hover, .three.hover, .four.hover {background-size: 110% auto; transition:all 2s ease; opacity: 1; -webkit-filter: sepia(0); filter: sepia(0);} 
	
.w1, .w2, .w3, .w4 {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
}
	
.w1 {
  left: 0;
  top: 0;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%, 0 0);
  clip-path: polygon(0 0, 100% 100%, 0 100%, 0 0); 
}
.w2 {
  right: 0;
  top: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0); 
}

.w3 {
  left: 0;
  top: 0;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 0, 0 0);
  clip-path: polygon(0 0, 0 100%, 100% 0, 0 0); 
}

.w4 {
  right: 0;
  top: 0;
  -webkit-clip-path: polygon(0 100%, 100% 0, 100% 0, 100% 100%);
  clip-path: polygon(0 100%, 100% 0, 100% 0, 100% 100%); 
}
	
.title { position:absolute; margin:auto; height: 95%; max-height:105px;  bottom:0; width:95%; max-width:300px; font-family: 'Fira Sans', Arial, sans-serif; font-size:40px; text-shadow: 0 2px 6px #222; color: #fff; font-variant: small-caps; letter-spacing: -1px; text-align:center; line-height: 100%; text-decoration: none; z-index:1000}
	
.title.pos1 { top:30%; left:10%; }
.title.pos2 { top:-30%; right:15%; }
.title.pos3 { top:-30%; left:15%; }
.title.pos4 { top:40%; right:10%; }
.title.pos5 { top:-20%; left:10%; }
.title.pos6 { top:45%; right:15%; }
.title.pos7 { top:40%; left:10%; }
.title.pos8 { top:-20%; right:10%; }
	
.centralia { position:absolute; margin:auto; height: 95%; max-height:380px; top:0; left:0; right:0; bottom:0; width:95%; max-width:380px; border-radius:100%; display:block; z-index:2000; background: url('images/cent_strip.png') teal; background-size: auto 100%; } 
	
.centralia.topper {display:none}
	
.centralia:hover {background-image: url('images/jmmt.png') !important;}

.ezrider {z-index:1000}
	
.streaming {background-image: url(images/streamed.jpg)}
.newz {background-image: url(images/Press.jpg)}
.aul {background-image: url(images/UndisclosedLocation.jpg)}
.fairfax {background-image: url(images/SFBTP.jpg)}
.other {background-image: url(images/Other930Club.jpg)}
.shows {background-image: url(images/MetroSongs.jpg)}
.videos {background-image: url(images/Videos.jpg)}
.caster {background-image: url(images/Podcast.jpg)}
.tunez {background-image: url(images/Music.jpg)}
	
.mobi {display:none}


/*------------ EDGE STYLES ---------------- */	

	
@supports (-ms-ime-align:auto) { 

.w1, .w2, .w3, .w4 {
  position: relative; display:inline-block;
  width:50%; height:100%;
}
	
.one, .three {
  position: absolute;
  height: 100%;
  width: 50%; 
}
	
.two, .four {
  position: absolute; 
  left:50%;
  height: 100%;
  width: 50%; 
}
	
.title { position:absolute; margin:auto; height: 95%; max-height:105px; width:95%; max-width:240px; font-family: 'Fira Sans', Arial, sans-serif; font-size:40px; text-shadow: 0 2px 6px #222; color: #fff; font-variant: small-caps; letter-spacing: -1px; text-align:center; line-height: 100%; text-decoration: none; z-index:1000}
	
.title.pos1, .title.pos4, .title.pos5, .title.pos8 { top: 0; left:0; right:0; bottom:0 }

.title.pos2, .title.pos3 { top: -25%; left:0; right:0; }
.title.pos6, .title.pos7 { top: 45; left:0; right:0; }


.shows {background-image: url(images/MetroSongsSQ.jpg)}
.videos {background-image: url(images/VideosSQ.jpg)}
.caster {background-image: url(images/PodcastSQ.jpg)}
.tunez {background-image: url(images/MusicSQ.jpg)}
}

/*------------ IE Styles ---------------- */	


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

.w1, .w2, .w3, .w4 {
  position: relative; display:inline-block;
  width:50%; height:100%;
}
	
.one, .three {
  position: absolute;
  height: 100%;
  width: 50%; 
}
	
.two, .four {
  position: absolute; 
  left:50%;
  height: 100%;
  width: 50%; 
}
	
.title { position:absolute; margin:auto; height: 95%; max-height:105px; width:95%; max-width:240px; font-family: 'Fira Sans', Arial, sans-serif; font-size:40px; text-shadow: 0 2px 6px #222; color: #fff; font-variant: small-caps; letter-spacing: -1px; text-align:center; line-height: 100%; text-decoration: none; z-index:1000}
	
.title.pos1, .title.pos4, .title.pos5, .title.pos8 { top: 0; left:0; right:0; bottom:0 }

.title.pos2, .title.pos3 { top: -25%; left:0; right:0; }
.title.pos6, .title.pos7 { top: 45; left:0; right:0; }

.shows {background-image: url(images/MetroSongsSQ.jpg)}
.videos {background-image: url(images/VideosSQ.jpg)}
.caster {background-image: url(images/PodcastSQ.jpg)}
.tunez {background-image: url(images/MusicSQ.jpg)}
}


/*---------------- TABLET ---------------- */
	
@media screen and (max-width:1024px) {
	
.centralia.topper {display:block}
	
.sektor { height: 400px; }

.w1, .w2, .w3, .w4 {
  position: relative; display:inline-block;
  width:100%; height:200px; clip-path:none; margin:0;
}
	
.one, .three {
  position: absolute;
  height: 200px;
  width: 100%; 
}
	
.two, .four {
  position: absolute;
  left:0;
  top:200px;
  height: 200px;
  width: 100%; 
}
	
.title { position:absolute; margin:auto; height: 95%; max-height:35px; width:100%; max-width: 100%; font-size:25px; background:rgba(55,55,55,.95); padding-top:10px }
	
.title.pos1, .title.pos2, .title.pos3, .title.pos4, .title.pos5, .title.pos6, .title.pos7, .title.pos8 { top:auto; left:auto; right:auto; bottom:0; }
	
.mobi {display:block}
		
.centralia { position:relative; margin:0; height: 200px; max-height:200px; width:100%; max-width:none; box-sizing:border-box; border-radius:0;  background: url('images/cent_jmmt.png') center 0 #004F4F no-repeat !important; background-size: contain !important; border: 1px solid #333 } 
	
.centralia.circed {display:none}
	
.centralia:hover {background-image: url('images/cent_jmmt.png') !important;}
	
} 


	
/*---------------- MOBILE ---------------- */


@media screen and (max-width:480px) {

.sektor { width:100%; height: 280px; }	
	
.w1, .w2, .w3, .w4 {
  width:100%; height:140px; 
}
	
.one, .three {
  height: 140px; background-position: center -30px
}
	
.two, .four {
  top:140px;
  height: 140px; background-position: center -30px
}
	
.centralia { height:125px }
	
}

/*	
@media (max-aspect-ratio: 4/3) {
.shows {background-image: url(images/MetroSongsSQ.jpg)}
.videos {background-image: url(images/VideosSQ.jpg)}
.caster {background-image: url(images/PodcastSQ.jpg)}
.tunez {background-image: url(images/MusicSQ.jpg)}
} */