@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; }

.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:45%; left:10%; }
.title.pos2 { top:-30%; right:15%; }
.title.pos3 { top:-35%; left:15%; }
.title.pos4 { top:38%; right:10%; }
.title.pos5 { top:-25%; left:10%; }
.title.pos6 { top:40%; right:15%; }
.title.pos7 { top:40%; left:10%; }
.title.pos8 { top:-25%; 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; transition: .3s ease all; background: url('images/cent_cent.png') teal; background-size:cover; } 
    
.centralia.topper {display:none}
    
.centralia:hover {background-image: url('images/jmmt.png') !important;}

.ezrider {z-index:1000}
    
.streaming {background-image: url(images/streamed.jpg)}
.purchase {background-image: url(images/OtherRojo.jpg)}
.shows {background-image: url(images/OtherJagmaster.jpg)}
.metro {background-image: url(images/MetroSongs.jpg); }
.aul {background-image: url(images/UndisclosedLocation.jpg)}
.other {background-image: url(images/Podcast.jpg)}
.videos {background-image: url(images/Other930Club.jpg)}
.fairfax {background-image: url(images/SFBTP.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; }

.purchase {background-image: url(images/OtherRojoSQ.jpg)}
.other {background-image: url(images/PodcastSQ.jpg); }
.metro {background-image: url(images/MetroSongsSQ.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:100%; 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) {
.purchase {background-image: url(images/OtherRojoSQ.jpg)}
.other {background-image: url(images/PodcastSQ.jpg)}
.metro {background-image: url(images/MetroSongsSQ.jpg); }       
}