/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

/*-----------end of reset-------------------------------------*/
/* Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.  */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%; }

/*  apply a natural box layout model to all elements  */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/*------------------BODY-----------------------------*/
body {
  font-family: "Berlin Sans FB", sans-serif;
  font-weight: 300;
  font-size: 16px;
  /*background-image: url("../images/Montage-lossy.webp");*/ }

/*--------------------HEADER-------------------------*/
/* Body Background */
body {
  margin-top: 20px;
  background-color: #05428c; }

* {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
     supported by Chrome and Opera */ }

/* Text Style */
.LiveAlbums {
  border-radius: 2vw;
  background-color: #2779de; }

.LiveAlbums p {
  color: #bfbfbf;
  margin: 2vw;
  font-size: clamp(9px, 4vw, 20px); }

/* Text Style */
.StudioAlbums p {
  color: #bfbfbf;
  margin: 2vw;
  font-size: clamp(9px, 4vw, 20px); }

.AlbumListPage {
  display: grid;
  grid-template-columns: 27% auto 27%;
  grid-template-areas: "live player studio";
  background-color: #246ed3; }

.embedCover {
  width: 75%;
  max-width: 75px; }

.LiveAlbums > a {
  width: 85%; }

.StudioAlbums > img {
  width: 75%;
  max-width: 75px; }

.LiveAlbums {
  grid-area: live;
  text-align: center; }

/* Bootstrap Container */
.PlayerContainer {
  grid-area: player;
  width: 100%;
  height: 100vh;
  text-align: center; }

.StudioAlbums {
  grid-area: studio;
  text-align: center; }

.topbar {
  grid-area: l; }

.albumCover {
  grid-area: cover; }

/*h3 {
	font-size: 5vw;
}



/*Menu Area*/
/*.menuArea{
	position: absolute;
	left: -700px;
	margin: 1.5vw;
	background-color: #f6f6f6;
	height: 100%;
	width: 50vw;
	box-shadow: 5px 0 10px rgba(44,45,45,.4);
	z-index: 1000;
	overflow: scroll;
}

.menuArea ul{
	margin-top: 3vw;
	list-style: none;
	color: #868889;
	padding: 0;
}

.menuArea li{
	font-size: 3vw;
	font-weight: bold;
	background-color: #edf0f0;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-color: #dee1e3;
	padding: 1.5vw;
	cursor: pointer;
}

.menuArea li:first-child{
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #dee1e3;
}

.menuArea li:hover{
	background-color: #e0e2e5;
}

/*Info Section*/
/*.infoSection{
	position: absolute;
	left: 15%;
	bottom: -1000px;
	background-color: #f6f6f6;
	height: 75%;
	width: 75%;
	box-shadow: 0px 0 10px rgba(44,45,45,.4);
	z-index: 750;
}

.infoSection .textArea{
	padding: 2vw 2vw;
	text-align: center;
}

.infoSection .textArea h4{
	font-weight: bold;
}

.infoSection .textArea p{
	color: #8d8e8e;
}

.infoSection img#lyrics {
	width: 100%;
	text-align: center;
}
.highlight{
	background-color: #3b92fc;
	color: #fff;
}

#songName{
	cursor: pointer;
}

/* TopBar */
/*.topBar{
	height: 55px;
}

/*Menu*/
/*.menu{
	height: 35px;
	width: 35px;
	padding: 5px 5px;
	cursor: pointer;
}

#coverImg{
	width: 70%;
	height: auto;
	box-shadow: 0 0 10px rgba(0,0,0,.9);
}

/*Play Timeline*/
/*.playBar{
	width:100%;
	position:relative;
}
.bar{
	background-color: #246ed3;
	border-radius: 25px;
	height: 3px;
	width: 100%;
	position:relative;
	overflow:hidden;
}

.playHead{
	width: 4vw;
	height: 4vw;
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.2);
	cursor: pointer;
	position:absolute;
	left:0;
	top:50%;
	margin-top:-1px;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}

.unplayed-progress{
	background:rgba(240,240,240,0.9);
	position:absolute;
	left:0;
	height:100%;
	width:100%;
	top:0;
}

.time{
	color: #999b9c;
	font-size: 12px;
}

/*Title Area*/
/*.titleArea{
	text-align: center;
}

.titleArea h3{
	font-weight: bold;
}

.titleArea p{
	color: #246ed3;
}

/*Control Area*/
/*.control{
	width: 7vw;
	height: auto;
	cursor: pointer;
}

.close{
	margin: 10px;
	width: 3vw;
	height: auto;
	cursor: pointer;
}

.playBtn{
	
	width: 1fr;
	margin-top: -5px;
}

.controlArea{
	padding-top: 30px;
	padding-bottom: 60px;
}

.disabled{
	opacity: .2;
	cursor: auto;
}

#lyrics {
	width: 300px;
	margin-top: 50px;
}*/
/*#JSONname {
	color: #f6f6f6;
}*/
@media only screen and (min-width: 560px) {
  h3 {
    font-size: 7vw; }

  .LiveAlbums p {
    margin: 2vw;
    font-size: clamp(23px, 4vw, 35px); }

  /* Text Style */
  .StudioAlbums p {
    margin: 2vw;
    font-size: clamp(23px, 4vw, 35px); }

  .embedCover {
    width: 100%;
    max-width: 125px; }

  .StudioAlbums > img {
    max-width: 125px; } }
@media only screen and (min-width: 1140px) {
  p {
    font-size: 4vw; }

  .LiveAlbums p {
    color: #bfbfbf;
    margin: 2vw;
    font-size: 50px; }

  /* Text Style */
  .StudioAlbums p {
    color: #bfbfbf;
    margin: 2vw;
    font-size: 50px; }

  .LiveAlbums > img {
    max-width: 175px; }

  .StudioAlbums > img {
    max-width: 175px; } }