/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v34-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

body {padding:0; margin:0; min-width:320px; overflow-y:scroll; color:#333; background:#fff; font-family:'Open Sans',Verdana,Arial,sans-serif;}
html, body {height:100%; width:100%;}

#topnavOuter {position:fixed; top:0; left:0; width:100%; height:30px; background:#fff; z-index:10;}
#topnav {position:relative}
#footer {color:#fff; background:#000; padding:20px; font-size:13px; line-height:1.5em;}

.homelink {float:left; height:30px; width:30px; margin-right:1px; background-color:#c00; background-image:url(../img/home.gif); background-repeat:no-repeat;}
.mainnav {float:left; margin:0; padding:0;}
.langnav {position:absolute; top:0; right:0; margin:0; padding:0;}
#topnav li {list-style-type:none; float:left; margin-right:1px;}
#topnav li a {display:block; font-size:16px; line-height:16px; padding:7px 15px; text-transform:uppercase; text-decoration:none; color:#000;}
#topnav li a.main {font-weight:bold;}
#mainNl {background-image:url(../img/post.png); background-repeat:no-repeat; background-position:center;}
#topnav .langnav li a {padding:7px 5px;}
#topnav li a:hover, #topnav li a.main.act {color:#fff; background:#c00;}
#topnav li #mainNl:hover {background-image:url(../img/post_act.png); background-repeat:no-repeat; background-position:center;}
#topnav li ul {position:absolute; left:0; width:100%; padding-left:30px; color:#fff; background:#c00; max-height:0; overflow:hidden; transition: max-height 0.5s;}
#topnav li:hover ul {max-height:30px;}
#topnav li li {}
#topnav li li a {font-size:14px; line-height:14px; font-weight:normal; color:#fff;}

.headerPic, .headerPicBox, .headerPicBox img {position:relative; display:block; width:100%; height:auto; overflow:hidden;}
.headerPicBox h1 {display:none; position:absolute; left:20px; bottom:20px; color:#fff; font-size:48px; text-transform:uppercase; z-index:5;}
.pIndex .headerPicBox {position:relative; height:auto; max-height:100%; overflow:hidden;}
.page .headerPicBox, .page #main {padding-top:30px;}
.message {position:absolute; top:0; width:80%; margin:10%; background:#fff; border:3px #c00 solid;}
.message p {padding:10px;}

.clear {clear:both; height:1px; width:100%; overflow:hidden;}
.box {clear:both;}
.boxFull {clear:both;}
.box a {color:#333; text-decoration:none;}
.box a:hover {text-decoration:underline;}
.boxStandard {width:940px; margin:0 auto; padding:10px 10px 20px;}
.boxStandard h1, .boxStandard h2 {font-size:32px; margin:10px 0; padding:0;}
.boxStandard h3 {font-size:19px; margin:10px 0; padding:0;}
.boxStandard h1 span, .boxStandard h2 span, .boxStandard h3 span {font-weight:normal;}

.photoLeft {float:left; width:auto; max-width:50%; margin:5px 40px 20px 0;}
.photoRight {float:right; width:auto; max-width:50%; margin:5px 0 20px 40px;}
.photoLeft img, .photoRight img {display:block; width:auto; height:auto; max-width:100%; margin:0 auto;}

#nlBox {clear:both; color:#fff; background:#0E1D24; padding:40px 20px;}
#nlBox p {float:left; width:48%; margin:0; padding:0px;}
#nlBox form {float:right; width:48%; margin:0; padding:0;}
#nlField {float:left;}
#nlEmail {font-size:14px; color:#fff; background:#27343A; border:none; height:40px; width:40%; padding-left:5px; margin:0 10px 0 0;}
#nlSubmit {font-size:14px; font-weight:bold; color:#333; background:#fff; border:none; height:40px; width:40%; margin:0;}

.footerLeft {float:left; margin:10px auto -1.5em;}
.footerRight {float:right; text-align:right; margin:10px auto -1.4em;}
.footerCenter {width:100%; text-align:center;}
#footer img {display:block; margin:10px auto; text-align:center;}
#footer a {color:#fff; text-decoration:none; padding:0 5px;}
#footer a:hover {text-decoration:underline;}
#footer a.kjellLink {color:#c00; text-transform:uppercase;}

/* Startseite */
#soundButtons {position:absolute; top:10%; left:20px; width:60px; height:90%;}
.btnSound {display:block; height:29%; margin-bottom:30%; color:transparent; opacity:0.8; cursor:pointer;}
.btnSound:hover {opacity:1.0;}
.btnSound img {display:block; height:100%; width:auto;}
#soundPlayer {position:absolute; top:0; left:0; visibility:hidden;}
#btnScroll {position:absolute; left:50%; bottom:5%; height:100px; width:100px; margin-left:-50px; background-image:url(../img/btn_scroll.png); background-size:100% auto; opacity:0.8; cursor:pointer; display:none;}
#btnScroll img {display:block; width:100%; height:auto;}
#btnScroll:hover {opacity:1.0;}
#social {position:absolute; top:10%; right:0px; padding:7px; background-color:rgba(0,0,0,0.4);}
#social a {display:block; padding:3px; color:transparent;}

.boxStart {width:33.3%; float:left; min-height:730px; overflow:hidden;}
.boxStart img {display:block; width:100%; height:auto;}
.boxStart h2 {font-size:48px; line-height:48px; margin:-85px 0 0; padding:20px; text-transform:uppercase; color:#fff;}
.boxStart p {font-size:16px; line-height:1.5em; padding:0; margin:20px;}
.box1 {background:#ffc;}
.box2 {background:#fc9;}
.box3 {background:#6cf;}

.jp-play {display:block; height:52px; width:52px; background-image:url(../img/jp_play.png); background-repeat:no-repeat;}
.jp-pause {display:block; height:52px; width:52px; background-image:url(../img/jp_pause.png); background-repeat:no-repeat;}
.jp-prev {display:block; height:52px; width:37px; background-image:url(../img/jp_prev.png); background-position:center; background-repeat:no-repeat;}
.jp-next {display:block; height:52px; width:37px; background-image:url(../img/jp_next.png); background-position:center; background-repeat:no-repeat;}

#jp_container {position:absolute; bottom:5%; right:20px; padding:0;}
#jp_container a, #jp_container a:link, #jp_container a:visited, #jp_container a:hover, #jp_container a:focus, #jp_container a:active {color:#fff;}
#jp_container ul {list-style-type:none; padding:0; margin:0;}
#jp_container ul.tracklist {display:none;}
#jp_container li {float:left; margin-right:1em;}
#jp_container p {margin:0; text-align:left;}
#jp_container span {color: #fff;}

/* Alben */
.boxCover {clear:both; padding-top:30px; color:#fff; background:#0E1D24;}
.cover {width:1000px; margin:0 auto;}
.coverPic {width:100%;}
.coverPic img, .coverRight img {display:block; width:100%; height:auto;}
.coverContent {clear:both; position:relative; padding:20px 10px;}
.coverContent h1 {font-size:35px; line-height:35px; margin:0 20px 0 0; padding:0; float:left;}
.coverContent h2 {font-size:18px; line-height:18px; margin:0; padding:15px 0;}
.coverContent ol {margin:0; padding:0 1.7em 0;}
.coverContent ol li {margin:0 0 5px; padding:0;}
.coverContent a {color:#E54242;}
.coverLinks {float:right; padding-top:10px;}
.coverLinks a {display:block; height:50px; width:180px; margin:0 0 20px; font-size:14px; line-height:50px; font-style:italic; text-decoration:none; text-align:center; color:#fff; border:1px #fff solid; transition:border-color 0.5s, background-color 0.5s;}
.coverLinks a:hover {text-decoration:none; background:#c00; border-color:#c00;}
.coverBtns {clear:both; padding:0 0 20px;}
.coverBtns a {display:block; float:left; height:56px; margin:0 22px 10px 0;}
.coverBtns a img {display:block;}
iframe {display:block; height:100px; width:240px;}

.sliderGallery {display:none;}
.sliderGallery .slick-track img {width:100%; height:auto;}
.slick-arrow {position:absolute; height:100%; width:5%; border:none; background-color:transparent; background-position:center; background-repeat:no-repeat; border:none; opacity:0.5; z-index:5; cursor:pointer;}
.slick-arrow:hover {opacity:1.0;}
.slick-prev {top:0; left:0; background-image:url(../img/pfeil-links.png);}
.slick-next {top:0; right:0; background-image:url(../img/pfeil-rechts.png);}

/* Band */
.artistPic {float:left; width:auto; max-width:50%; margin:5px 40px 20px 0;}
.odd .artistPic {float:right; margin:5px 0 20px 40px;}
.artistPic img {width:380px; height:auto; border:4px #333 solid;}

/* Galerie */
.grid-item {width:24.9%; float: left;}
.grid-item img {display:block; width:94%; height:auto; margin:3%;}
.mfp-title {font-size:14px;}

/* Videos */
.boxVideos {color:#fff; background:#000;}
.popup-youtube {display:block; position:relative; width:50%; float:left;}
.videoPic {display:block; width:100%; height:auto;}
.youtube-play {display:block; position:absolute; top:0; left:0; height:100%; width:100%; background-image:url(../img/btn_video.png); background-position:center; background-repeat:no-repeat; background-size:15% auto; opacity:0.75;}
.youtube-info {display:block; position:absolute; left:0; bottom:0; width:100%; padding:5px; color:#fff; background:rgba(0,0,0,0.5); opacity:0; transition:opacity 0.5s;}
.popup-youtube:hover .youtube-play {opacity:1.0;}
.popup-youtube:hover .youtube-info {opacity:1.0;}

/* Media Queries */
@media screen and (min-width:1300px){
  #topnav li a {padding:7px 25px;}
  #nlEmail, #nlSubmit {width:30%;}
  .boxStart h2 {font-size:56px;}
  .coverContent {padding:20px 0px;}
  .grid-item {width:20%; float: left;}
}

@media screen and (max-width:1000px){
  #topnav li a {padding:7px 10px;}
  #btnScroll {height:76px; width:76px; margin-left:-38px;}
  #nlEmail, #nlSubmit {width:45%;}
  .boxStandard {width:auto; max-width:940px;}
  #jp_container {right:0;}
  .boxStart h2 {font-size:40px;}
  .cover {width:auto; max-width:1000px;}
  .coverContent {padding:20px 10px;}
  .artistPic {width:390px; max-width:48%;}
  .artistPic img {display:block; width:100%; max-width:380px; height:auto; border:4px #333 solid;}
  .grid-item {width:33%;}
  .footerLeft, .footerRight {margin:10px auto;}
  .footerCenter {margin-top:0;}
  .webInfo {display:none;}
}

@media screen and (max-width:740px){
  #topnavBtn {position:absolute; top:0; right:0; height:30px; width:57px; background-color:#c00; background-image:url(../img/btn_topnav.jpg); background-position:center; cursor:pointer;}
  .homelink {position:absolute; top:0; left:0; float:none;}
  .mainnav {float:none; padding-top:30px; max-height:0; overflow:hidden; transition:max-height 0.5s}
  .mainnav.opened {max-height:360px;}
  .langnav {right:65px;}
  #topnav .mainnav li {float:none; width:auto; background:rgba(150,0,0,0.7);}
  #topnav .mainnav a {color:#fff; text-align:center;}
  #topnav li ul, #topnav li:hover ul {position:relative; padding-left:0; max-height:0px;}
  #topnav li.opened ul {max-height:200px;}
  #mainNl {background-image:url(../img/post_act.png);}
  #btnScroll {height:50px; width:50px; margin-left:-25px;}
  #nlBox p, #nlBox form {float:none; width:auto; padding:5px 0;}
  .page .headerPic {width:120%; margin:0 -10%;}
  .footerRight span {display:none;}
  .boxStart {float:none; width:auto;}
  .boxStart h2 {font-size:48px;}
  .coverContent h1 {float:none;}
  .artistPic, .odd .artistPic {float:none; width:auto; max-width:100%; margin:0; background:#eee;}
  .artistPic img {margin:0 auto;}
  .photoLeft, .photoRight {float:none; max-width:100%; background:#eee; margin:0 0 20px;}
}

@media screen and (max-width:500px){
  #jp_container {display:none;}
  #nlEmail, #nlSubmit {width:100%; margin-bottom:10px;}
  .page .headerPic {width:140%; margin:0 -20%;}
  .footerLeft {padding:0 0 10px;}
  .coverPic {width:100%; overflow:hidden;}
  .coverPic img {width:200%; height:auto; margin-right:-100%;}
  .coverLinks {float:none; padding-top:10px;}
  .coverLinks a {width:auto; margin:0 auto 10px;}
  .coverBtns a {width:48%; margin-right:1.8%; overflow:hidden;}
  .coverBtns a img {margin:0 auto;}
  .grid-item {width:50%;}
  .popup-youtube {float:none; width:100%;}
}

@media screen and (max-height:360px){
  #soundButtons {top:15%; height:80%;}
  .btnSound {margin-bottom:15%;}
  #jp_container {display:none;}
}

@media screen and (max-width:460px){
  #btnScroll {height:1px; width:1px;}
}