body{  
    background-color: #000;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Amatic SC';
    font-size: 1.8em;
    color: #fff;
}
select, option {
    font-family: 'Amatic SC';
    font-size: .7em;
    color: #fff;
    background-color: #000;
    width:40%;
}
a, a:visited, a:hover {
    color: #fff;
    font-weight: bold;
}

nav a {
    text-decoration: none;
    display: inline-block;
    margin-right: 25px;
}

a.tooltip {
  text-decoration: none;
  position: relative;
  

}
a.tooltip span {
  padding: 0;
  margin: 0;
  display: block;
  z-index: 100;
  background-color: rgba(0, 0, 0, .7);
  left: 0;
  width:180px;
  position: absolute;
  bottom: -5px;
  text-decoration: none;
}

a.tooltip span:hover {
    background-color: rgba(0, 100, 0, 1);
      border-right: 1px solid yellow;
  border-left: 1px solid yellow;
}

.artImg {
    pointer-events: auto;
    width:100%;
    margin: 0;
    padding: 0;
}


/*.wrapper {
    width: 90%;
    height: 100%;
    margin: 0 auto;
}*/

/*.row {
    clear: both;
    width: 100%;
}*/
.blink {
    padding-left: 5%;
    font-family: 'Vast Shadow';
    color: #ccc;
    position: absolute;
    top: 0;
    left: 0;
-webkit-animation-name: blinker;
    -webkit-animation-duration: 12s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    /*-webkit-animation-delay: 5s;*/

    -moz-animation-name: blinker;
    -moz-animation-duration: 12s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    /*-moz-animation-delay: 5s;*/

    animation-name: blinker;
    animation-duration: 12s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /*animation-delay: 5s;*/
}

@-moz-keyframes blinker {  
    0% { opacity: 0.0; }
    50% { opacity: 1.0; }
    100% { opacity: 0.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 0.0; }
    50% { opacity: 1.0; }
    100% { opacity: 0.0; }
}

@keyframes blinker {  
    0% { opacity: 0.0; }
    50% { opacity: 1.0; }
    100% { opacity: 0.0; }
}


#navig {
    background-color: black;
    z-index: 100;
    width: 100%;
    background-color: rgba(0,0,0,.6);
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid #666;
    padding: 1%;
    align: center;
}
input[type=text], #supa {
    border: 2px solid black;
    background-color: #000;
    color: #fff;  
    font-size: 3rem;
    padding: .3rem;
    float:  left;
}
#logo_img {
    height: 3.5em;
    float: left;
    text-align: center;
}
#navig2 {
    visibility: hidden;
}

#nav_record_icon {
    height: 4rem;
    float: left;
}
#nav_music_note {
    height: 4rem;
    float: left;

}

.logo {
    /*font-size: 2em;*/
    font: 1.3rem/2.3rem 'Vast Shadow';
    color: #ccc;
    float: left;

}


nav {
    margin:20px 0 0 15px;
    float: left;
    /*font-size: 1.7em;*/
    
}

button
{
    display: inline-block;
    background: none;
    cursor: pointer;
    border: none;
    margin-right: 25px;
    padding: 0px;
    font-family: 'Amatic SC';
    font-size: 1.1em;
    color: #fff;
}
 .thumb {
    width: 100%;
    height: 100%;
 }
 .record_thumb {
        overflow-wrap: break-word;
      padding: 3%;
      margin: auto;
      width: 200px;

 }

li {
    vertical-align: top;
    text-align: center;
    margin: auto;
    
}



.outline {
    /*padding: 5px;*/
    outline: 1px solid #2F2C2B;
    margin-bottom: 20px;
}
#player {
    margin: auto;position: absolute; left: -1000; bottom: 0; right: 0; opacity: 0; visibility: hidden;

}
.discog-container {
    font-family: 'Amatic SC';
    font-size: 1.1em;
    color: #fff;

}
#discog-container {



}

#recordContainer {
    /*border-top: 3px solid yellow;
    border-bottom: 5px solid green; */
    margin-top: 2px;
    position: relative;
    top: 0;
    float: left;
    clear: both;
    width: 100%;
    z-index: 99;
}

#sideMenu {
    position:absolute;
    top:8%;
    left:0;
    width:35%;
    height:85%;
    overflow: scroll;
    background-color: rgba(0,0,0,.5);
    z-index:100;
    visibility:hidden;
}
ul {
    padding-left: 0;
    margin:0;
    padding-bottom: 0;
    position:relative; 
    clear: both;
}
li {
    list-style: none;
    padding:auto;
    margin:auto;
    
}
li:hover {
    opacity:1;
    
}
#list {
    margin:0;
    padding:0;
}
#list li {
    margin: auto;
    text-align: center;
    
}
#heading {
    font: 1em/1em 'Vast Shadow';
    color: #666;
    display:block;
    cursor: pointer;
    padding:3px 0 20px 5px;

}
.now {
    font: 2rem/2rem 'Vast Shadow';
}

.thumb:hover {
    opacity: 1;
}

.clear {
    clear: both;
}
.selected {
    opacity: 1;
}
#selected_tunes {
    font: 2.5rem/2.5rem 'Vast Shadow';
}

li {
    display: inline-block;
    margin: auto;
    padding: 2%;
}
.hidden {
    visibility: hidden;
}
#current {
    display: block;
    padding-bottom: 3%;
    overflow-y: scroll;
}
.currentNotes {
    font: .5em/.3em Arial, sans-serif;
    color: #fff;
}
.Rocksteady {
    color: orange;
}
.Reggae, .Dub, .Roots {
    color: green;
}

.Ballads {
    color: pink;
}
.Ska {
    color: red;
}
.Jamaican {
    color: yellow;
}

.yearNav {
    width: 10%;
    padding: 2px;
    float: left;
    min-height: 100%;
}
.year {
    padding: 10px;
    outline: 1px solid #ccc;
}
.discog_year {
    font-size: 3.4rem;
}
.video-container {
    width: 63%;
    padding-left: 3%;
    float: left;
}
/*#yearThumbs, #yearThumbs2 {
    width: 85%;
    float: left;
}*/
.item, .itemName {
    display: inline-block;  
    padding: 0;
    margin:0;
}
.itemName {
    opacity:.7;
}
.itemName:hover {
    opacity:1;
}

.genre-item {
    /*display: inline-block;*/
    width: 23%;
    min-height: 10%;
    max-height: 10%;
    height: 10%;
    overflow: auto;
    float: left;
    padding: 1%;
    outline: 1px solid #ccc;
}
.large-6 {
    width: 50%;
}
.columns {
    float: left;
}
.branding {
    font: 2.3rem/3.1rem 'Vast Shadow';
    color: #ccc;
    z-index: 100;
}
.bottom_branding {
    position: fixed;
    bottom: 0;
    left: 10px;
        background-color: rgba(0,0,0,.4);
        /*z-index: 100;*/
    width:100%;
}

.currently_selected:hover {
font-weight:bold;

}
.branding-logo{
    display:inline-block;
}
.logo_small {
    font-size:1em;
    color: #666;
    line-height:1em;
    margin:0;
    padding:0;
}
/*.branding-logo {
    padding-left: 5%;
    /*outline: 1px solid red;*/
    /*background-color: rgba(0,0,0,.6);*/
    /*float: left;*/

/*-webkit-animation-name: blink-one;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blink-one;
    -moz-animation-duration: 10s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blink-one;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;*/
}

@-moz-keyframes blink-one {  
    0% { opacity: 1.0; }
    75% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blink-one {  
    0% { opacity: 1.0; }
    75% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blink-one {  
    0% { opacity: 1.0; }
    75% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
#current {
position: relative;
top: 10rem;
padding: 0 4%;
}
.yearTitle {
    font-family: 'Vast Shadow';
    line-height: .9em;
    /*display: inline-block;*/
    //padding: 0 25px 0 20px;
    /*color:#fff;*/
    font-size: 1.2em;
}
.now_on {
    font-family: 'Vast Shadow';
    font-size: .9em;
}
.small {
    height: 80px;
    -webkit-transition: height 2s; /* Safari */
    transition: height 2s;
}
.large {
    height: 100%;
    -webkit-transition: height 2s; /* Safari */
    transition: height 2s;
}
.navButton {
    display:inline-block;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid #666;

    padding: 7px;
    margin: 0 8px 0;
    color: #666;
    font-family: 'Amatic SC';
    line-height: .7em;
    text-align: center;
    cursor: pointer;
}
.videoNav {
    display: block;
    text-align: center;
    font-size: 1.7em;
    overflow-y: scroll;
    
}
.stamp {
    padding:0;
    margin: 30px 15px 35px 0;
    /*border: 5px dashed #666;*/
    float:left;
}
#list {
    position:relative;
    float right;
}
.smalls {
    font-size:.6em;
    color: white;
    position:relative;

}

#current2,#artistImage, #list {
    clear: both;
}
#current2 {
    position:relative;
    display:none;

}

.playButtons {
    float:right;
    font-family: 'Vast Shadow';
}




.halfsies {
    display:inline-block;
    width:50%;
}
/**.jukebox {
    background-image: url('/img/jukebox2.jpeg');
    background-size: cover;
    width:100%;
    height:1641px;
}*/
#artists {
    position:relative;
    margin: 0;
    padding: 0;
}
#artistsContainer {
    margin: 0;
    padding: 0 ;
    z-index: 98;

}   


#now h3 {
    margin: 0 auto;
}

#record {
    margin: 0 auto;
    padding: 0;
z-index: 65;

}

#spinning {
        padding: 5% 0;
  margin: auto;
  align: center;
  width: 100%;
  animation: rotation 6s infinite linear;  
  z-index: 64;
  border-radius: 50%;
}
#not_spinning {
    width: 100%;
    padding: 0;
    margin: 0;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#spinning:hover {
    animation:none;
}


#artistImage {
    display: block;
    text-align: center;
    width: 70%;
    margin: 0 auto;

    
}
.containerTitle {
    color: #fff;  
    font: .8rem 'Vast Shadow';
    display: block;
    text-align: center;
    /*padding-top: 4rem;*/
}

.imgSizer {
  width: 60%;
  min-width: 200px;
  border-radius:50%;
  display: block;
  margin:  2% auto;
  /*margin: 3em auto 0;*/
  border: 1px solid white;

}
.container2 {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;

  background-color: #666;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.small_nav_left {
display:inline-block;

}
.small_nav_right {
display:inline-block;

}




#hamburglar {
    display:none;
    position:absolute;
    right:100;
    top:25px;
    width:400px;
}
.bottom_menu {
    position:absolute;
    left:0;
    top:0px;
}


.loader {
  margin: 3% auto;
  border: 1px solid #666666;
  border-radius: 50%;
  border-top: 1px solid orange;
  width: 4.5em;
  height: 4.5em;
  animation: spinner 4s linear infinite;
}
#loader {
    margin: 4em auto;
    display: inline-block;
    text-align: center;

}

@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }


}