/* latin-ext */
@font-face {
  font-family: 'Fjalla One';
  font-style: normal;
  font-weight: 400;
  src: url(Fonts/Yq6R-LCAWCX3-6Ky7FAFrO96kigt.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fjalla One';
  font-style: normal;
  font-weight: 400;
  src: url(Fonts/Yq6R-LCAWCX3-6Ky7FAFrOF6kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(Fonts/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(Fonts/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body { 
 height: 98vh;
 letter-spacing: 1px; 
 font-size: 13px;
 font-family: Lato, sans-serif;
 color: #CFE2E2; 
 background: url('img/Background.gif') no-repeat left bottom;
 background-size: 90% 100%;
 background-attachment: fixed;
 background-color: #000000; 
 margin-left: 5px; 
 margin-right: 5px;
 margin-bottom: 0px; 
}

#top {
width: 670px;
height: 90px;
border: 3px;
border-color: #808080;
border-style: none none none dotted;
margin-left: auto;
margin-top: 10px;
margin-bottom: 0px;
margin-right: auto;
background-color: #304040;
overflow: hidden;
padding: 5px 40px 0px 40px;
background: url('img/Backgr2.gif');
background-repeat: repeat;
}

#main {
position: relative;
width: 670px;
height: calc(100% - 113px);
overflow: auto;
border: 3px;
border-color: #808080;
border-style: dotted none none dotted;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-color: #304040;
padding: 5px 40px 10px 40px;
background: url('img/Backgr2.gif');
background-repeat: repeat;
}

#audio {
 float: left;
 width: 250px;
 margin-left: 0px;
 margin-bottom: 0px;
}

audio::-webkit-media-controls-current-time-display, 
audio::-webkit-media-controls-time-remaining-display {
 display: none;
 }

#nav {
float: right;
list-style: none;
width: auto;
display: inline-block;
margin-right: 100px;
margin-top: 2px;
margin-bottom: 2px; 
padding: 1px;
 font-family: Fjalla One;
 letter-spacing: 3pt; 
 color: #CFE2E2; 
 font-size: 16px;
 text-shadow: 2px 2px #4D3A39;
}

#navdiv {
 display: block;
}

#nav li {
float: left;
margin-left: 4px;
margin-right: 6px;
margin-top: 0px;
margin-bottom: 0px;
padding: 1px;
}

#nav img {
border: 0px;
}

#menu-icon {
 display: none;
}

#contentlink {
 display: block;
}

h1 { 
 clear: both;
 font-family: Fjalla One, sans-serif;
 font-weight: bold;
 text-decoration: none;
 color: #FFFFFF; 
 font-size: 24px; 
 margin-left:20px; 
 margin-right:20px; 
 letter-spacing: 9px; 
 text-align: left;
 text-shadow: 1px 1px #8D7A59;
}

h2 {
 margin-top: 20px;
 display: block;
 }

p {
 margin-left: 30px;
 margin-right: 30px;
 text-indent: 10px;
 clear: both;
}

#newsitems {
 float: left;
 width: 340px;
}

.news {
 background-color: rgba(255, 255, 255, 0.1);
 padding: 3px;
 border: 1px solid #403030;
 border-radius: 4px;
}

.news img {
 margin-bottom: 5px;
 margin-right: 7px;
 vertical-align: top;
 padding:3px;
 border: 1px solid #507070;
 border-color: #606868 #406060 #406060 #606868;
 width: 50px;
 height: 33px;
 box-shadow: 5px 5px 2px #203030;
}
.previous {
 float: left;
}

.previous:before {
 content: "\00AB";
}

.next {
 float: right;
}

.next:after {
 content: "\00BB";
}

td {
  vertical-align: top;
}

img.driehoek {
float: right;
margin-right: -40px;
margin-top: -5px;
padding: 0px;
border: 0px;
}

#titelimg {
 display: block;
 margin-left: auto;
 margin-right: auto;
 border: 0;
 height: 47px;
}

img.topbutton {
 width: 25px;
 height: 25px;
 margin-left: 0px;
 margin-right: 0px;
}

.tegel {
 display: inline-block;
 vertical-align: top;
 width: 118px;
 padding: 5px;
 margin-bottom: 20px;
 border: 1px;
 border-color: #203030;
 border-style: none none none solid;
}

.tegel span {
 display: block;
}

.label {
 display: block;
 font-size: 11px;
 color: #BFBFBF; 
}

img.disco {
 vertical-align: middle;
 padding:3px;
 border: 1px solid #507070;
 border-color: #606868 #405858 #405858 #606868;
 border-radius: 2px;
 width: 80px;
 height: 80px;
 box-shadow: 5px 5px 2px #101515;
 background-color: #000000;
 margin-bottom: 5px;
}

img.disco:hover {
 box-shadow: 0px 0px 0px;
 margin-left: 1px;
}

img.video {
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 5px;
 vertical-align: middle;
 padding:3px;
 border: 1px solid #507070;
 border-color: #606868 #406060 #406060 #606868;
 width: 100px;
 height: 66px;
 box-shadow: 5px 5px 2px #101515;
}

div.front {
 float: left;
 text-align: center;
}

img.front {
 float: left;
 padding:2px;
 border: 1px solid #507070;
 border-color: #606868 #406060 #406060 #606868;
 border-radius: 2px;
 width: 150px;
 height: 150px;
 margin-right:10px;
 box-shadow: 5px 5px 5px #303030;
}

ol.tracklist {
 font-family: Verdana;
 color: #DFF2D2;
 line-height: 150%;
 font-size: 13px;
 margin-top: 0px;
 margin-bottom: 2px;
 padding: 0px 10px 0px 30px;
}

p.review {
 font-family: Georgia;
 font-style: italic;
 color: #DFF2E2;
 font-weight: normal;
 font-size: 12px; 
 margin-left:70px; 
 margin-right:70px; 
 margin-bottom:5px;
 letter-spacing: 1.2px; 
 text-align: center; }

span.reviewauthor { 
 margin-left: 70px; 
 margin-right: 25px;
 font-size: 12px;
 font-family: Tahoma;
 }

.reviewauthor a {
 font-weight: bold;
}

table.details {
 width: 400px;
 color: #E0E0E0;
 border: 0;
 letter-spacing: 1px; 
 }

table.details td:first-child {
 width: 115px;
}

#clicktoplay {
 font-size: 80%;
 margin-left: 20px;
 color: #A0A0A0;
}

#videoplayer {
 width: 596px;
 height: 362px;
}

#videoplayersmall {
 float: left;
 width: 280px;
 height: 180px;
 margin-left: 0px;
 padding: 2px;
 border: 1px solid #505858;
 margin: 3px;
}

ol { list-style-type: decimal; }

span.date { float: left; color: #908080; margin-right: 0px; font-size: 12px;}

a:link { color: #FFFFFF; text-decoration: none; }
a:visited { color: #FFFFFF; text-decoration: none; }
a:hover { color: #FFFFFF; text-decoration: underline; }
a:active { color: #FFFFFF; text-decoration: none; }
.tracklist a:link { color: #FFFFFF; text-decoration: none; border-bottom: 1px dotted; border-color: #70B0B0;}
#nav a { color: #F8F8F8; text-decoration: none; }
#nav a:hover { text-decoration: underline; }

a.disco:link, a.disco:visited, a.disco:active { color: #000000; text-decoration: none; font-weight:bold;}
a.disco:hover { color: #000000; text-decoration: underline; font-weight:bold;}

hr { color: #000000;
background-color: #000000;
height: 1px;
border: 0;
margin-top: 15px;
margin-bottom: 15px;
}

.buy {
 float: right;
 width: auto;
 margin-right: 5px;
 margin-bottom: 1px;
 text-align: right;
 border-style: solid none solid none;
 border-width: 1px;
 border-color: #000000;
 background: rgba(0,0,0, .1);
 padding: 2px;
}

.buy a:link {
 font-family: Fjalla One;
 letter-spacing: 2pt; 
 color: #CFE2E2; 
 font-size: 18px;
 text-shadow: 2px 2px #4D3A39;
}

.buy span {
 clear: both;
 color: #A0A0A0;
}

.bclogo {
 vertical-align: middle;
 margin-right: 6px;
 width: 30px;
 height: 30px;
}

@media only screen and (max-width: 780px), only screen and (max-device-width: 780px) {

body { 
 width: 99%;
 font-size:16px;
 background-image: none;
 margin-left: 0px;
 margin-right: 0px;
 padding: 0px;
 }

#top {
width: 98%;
height: auto;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding: 1%;
}

#main {
width: 99%;
margin-left: 0px;
margin-right: 120px;
padding: 1% 0% 1% 1%;
}

#titelimg {
 width: 241px;
 height: 36px;
}

#newsitems {
 width: 100%;
}

h1 {
 font-size: 32px;
 letter-spacing: 2px;
}


.previous .next{
 margin-top: 15px;
 margin-bottom: 15px;
}

#menu-icon {
 position: absolute;
 top: 15px;
 right: 10px;
 width: 40px;
 height: 40px;
 height: 45px;
 cursor: pointer;
 display: block;
 background: url('img/menu.gif');
 background-position: top right;
 background-repeat: no-repeat;
 background-size: 30px 30px;
}

#navdiv {
 display: none;
}

#contentlink {
 clear: both;
 display: none;
}

#audio {
 width: 70%;
 margin-left: 0px;
 margin-top: 0px;
}

#nav { 
 float: left;
 margin-left: 10px;
 margin-right: 10px;
 letter-spacing: 2px; 
 font-weight: bold;
 font-size: 28px;
 margin-left: 10px;
 overflow: visible;
}

#nav li
{ 
 float: left;
 margin-left: 1px;
 margin-right: 7px;
 padding: 10px 3px 15px 3px;
 letter-spacing: 1px;
}

p {
 margin-left: 5px;
 margin-right: 35px;
}

.tegel {
 padding: 2px;
}

.label {
 font-size: 13px;
}


table.details {
 width: 100%;
 clear: both;
 letter-spacing: 1px;
}

ol.tracklist {
 font-size: 17px;
 }

ol.tracklist li {
 margin-bottom: 6px;
}

p.review {
 font-size: 16px; 
 margin-left: 10px;
 margin-right: 10px;
 }

span.reviewauthor { 
 font-size: 16px;
 margin-left: 20px;
 }

img.disco {
 width: 80px;
 height: 80px;
}

img.front {
 float: left;
 padding: 1px;
 width: 100px;
 height: 100px;
 margin-right: 5px;
 box-shadow: 2px 2px 2px #303030;
}

img.topbutton {
 width: 48px;
 height: 48px;
 margin-left: 10px;
}

img.driehoek {
width: 16px;
height: 16px;
margin-right: -1%;
margin-top: -1%;
}

.buy {
 float: left;
 margin-top: 4px;
 margin-bottom: 4px;
}

}

@media (min-width: 641px) and (max-width: 900px) {
#top {
 margin-left: 0px;
}

#main {
 margin-left: 0px;
}
}