/*=================================================================================================
┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┤(･_├┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴
                                            Hello!
                                Thank's for beeing here.
                                Hope you have fun reading my code. ~(˘▾˘~)
                                I'm Lukas Rosenkranz from Leipzig - Germany.
                                As normal I've the Copiright for this Code,
                                read but dont touch ¯\_(ツ)_/¯

                                Here's a nice record I've listend to, while coding.
                                Dig deeper: http://gilfish.bandcamp.com/album/the-machine-inside-of-you
  =================================================================================================*/

/*=================================================================================================
                                              Global
  =================================================================================================*/
html,
body {
  width: 100%;
  height: 100%;
  font-family: 'Roboto Mono', monospace;
  background-color: white;
}

.landing {
  width: 100%;
  height: 100%;
  background: url('../img/Allgemein/Background.png') no-repeat center center
    fixed;
  display: table;
  position: relative;
  background-size: cover;
}
/*=================================================================================================
                                              Navigation
  =================================================================================================*/
.logo {
}

.bottom-arrow-hover:hover {
  background: url('../img/Allgemein/bottom-arrow-new.png') no-repeat center;
}
.top-arrow-hover:hover {
  background: url('../img/Allgemein/top-arrow-new.png') no-repeat center;
}
.logo-col {
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  height: 100px;
  background-color: white;
  z-index: 4;
}
.logo-col-nav {
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  height: 0px;
  margin-top: 100px;
  background-color: white;
  z-index: 5;
}

.navigation {
  font-size: 16px;
  font-weight: bold;
  color: black;
  margin-top: 0px;
  margin-bottom: 0px;
  opacity: 0;
  transition: all 1s linear;
  background: none;
  border: none;
}
/*=================================================================================================
                                              Home
  =================================================================================================*/
.tapes {
  width: 220px;
  margin-top: 30px;
  margin-left: -50px;
}

.news {
  height: 160px;
  width: auto;
  margin-left: 20%;
  margin-top: 20%;
}

.about {
  height: 300px;
  margin-top: 0px;
  margin-left: 150px;
}

.artists {
  width: 300px;
  margin-left: 15%;
}

.merch {
  margin-left: -130px;
  width: 300px;
}

.tv-u {
  margin-top: 0px;
  width: 400px;
}

.note {
  height: 90vh;
  margin-left: 150px;
  margin-top: 20px;
  z-index: auto;
}

.fixed {
  position: fixed;
}

.static-merch {
  position: absolute;
}
.static-merch:hover {
  opacity: 0;
}
.static {
  position: absolute;
  background: white;
}
.static:hover {
  opacity: 0;
}
/*=================================================================================================
                                              News
  =================================================================================================*/
.news-page-headline {
  background: white;
  margin-top: 5%;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 3px solid grey;
}
.news-page-content {
  background: white;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

.news-headline {
  max-width: inherit;
  font-weight: bold;
  font-size: 15px;
  transform: scale(1.3, 0.9);
  margin: auto;
}

.news-content-image {
  width: 90%;
  margin: 10% 5%;
}

.news-content-headline {
  font-weight: medium;
  font-size: 20px;
  margin: 3% 0%;
}

.news-content {
  font-size: 13px;
  text-align: left;
  margin: auto;
}

.news-content iframe {
  font-size: 13px;
  text-align: left;
  margin: auto;
  max-width: 100%;
}

.last {
  margin-bottom: 5%;
}

/*=================================================================================================
                                              Artist
  =================================================================================================*/
.artist-page {
  margin-top: 2%;
  background: white;
  border: 1px solid black;
  height: 68vh;
}

.artist-page-image {
  width: 80%;
  margin: 10% 5%;
}

.scroll-box {
  overflow-y: scroll;
  height: 85%;
  margin-top: 3%;
}
/*Remove the scrollbar from Chrome, Safari, Edge and IE*/
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

* {
  -ms-overflow-style: none !important;
}

.artist-content-headline {
  font-size: 20px;
}

.artist-content {
  font-size: 13px;
  text-align: left;
  margin: auto;
}

.artist-content-releases {
  font-size: 13px;
  text-align: left;
}

.release-link {
  font-weight: bold;
  color: black;
  font-size: 14px;
}

.artist-content-tourdates-headline {
  font-size: 20px;
  margin-top: 15%;
  margin-bottom: 0%;
}

/*=================================================================================================
                                              Releases
  =================================================================================================*/
.release-page-image {
  width: 100%;
  margin: 10% 5%;
}

.bandcamp-player {
  border: 1px solid black;
  width: 100%;
  height: 42px;
  margin-left: 5%;
}
/*=================================================================================================
                                              Tapes
  =================================================================================================*/
.cover-Dame_Area {
  width: 180px;
  -moz-transform: rotate(-20deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-20deg); /* Safari */
  -o-transform: rotate(-20deg); /* Opera */
  -ms-transform: rotate(-20deg); /* IE9 */
  transform: rotate(-20deg); /* W3C */
}
.cover-YOR {
  width: 180px;
  -moz-transform: rotate(+8deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+8deg); /* Safari */
  -o-transform: rotate(+8deg); /* Opera */
  -ms-transform: rotate(+8deg); /* IE9 */
  transform: rotate(+8deg); /* W3C */
}
.cover-LASSIE {
  width: 180px;
  -moz-transform: rotate(+4deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+4deg); /* Safari */
  -o-transform: rotate(+4deg); /* Opera */
  -ms-transform: rotate(+4deg); /* IE9 */
  transform: rotate(+4deg); /* W3C */
}
.cover-De_Klumb {
  width: 180px;
  -moz-transform: rotate(-2deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-2deg); /* Safari */
  -o-transform: rotate(-2deg); /* Opera */
  -ms-transform: rotate(-2deg); /* IE9 */
  transform: rotate(-2deg); /* W3C */
}
.cover-So_Beast {
  width: 180px;
  -moz-transform: rotate(-12deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-12deg); /* Safari */
  -o-transform: rotate(-12deg); /* Opera */
  -ms-transform: rotate(-12deg); /* IE9 */
  transform: rotate(-12deg); /* W3C */
}
.cover-Die_Lore {
  width: 180px;
  -moz-transform: rotate(-19deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-19deg); /* Safari */
  -o-transform: rotate(-19deg); /* Opera */
  -ms-transform: rotate(-19deg); /* IE9 */
  transform: rotate(-19deg); /* W3C */
}
.cover-Doc_Flippers {
  width: 180px;
  -moz-transform: rotate(-20deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-20deg); /* Safari */
  -o-transform: rotate(-20deg); /* Opera */
  -ms-transform: rotate(-20deg); /* IE9 */
  transform: rotate(-20deg); /* W3C */
}
.cover-Warm_Swords {
  width: 180px;
  -moz-transform: rotate(+22deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+22deg); /* Safari */
  -o-transform: rotate(+22deg); /* Opera */
  -ms-transform: rotate(+22deg); /* IE9 */
  transform: rotate(+22deg); /* W3C */
}
.cover-Warm_Swords {
  width: 180px;
  -moz-transform: rotate(-19deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-19deg); /* Safari */
  -o-transform: rotate(-19deg); /* Opera */
  -ms-transform: rotate(-19deg); /* IE9 */
  transform: rotate(-19deg); /* W3C */
}
.cover-AKU {
  width: 180px;
  -moz-transform: rotate(+22deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+22deg); /* Safari */
  -o-transform: rotate(+22deg); /* Opera */
  -ms-transform: rotate(+22deg); /* IE9 */
  transform: rotate(+22deg); /* W3C */
}
.cover-Abrichten {
  width: 180px;
  -moz-transform: rotate(-20deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-20deg); /* Safari */
  -o-transform: rotate(-20deg); /* Opera */
  -ms-transform: rotate(-20deg); /* IE9 */
  transform: rotate(-20deg); /* W3C */
}
.cover-Ex-White {
  width: 180px;
  -moz-transform: rotate(+15deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+15deg); /* Safari */
  -o-transform: rotate(+15deg); /* Opera */
  -ms-transform: rotate(+15deg); /* IE9 */
  transform: rotate(+15deg); /* W3C */
}
.cover-Double_Job {
  width: 180px;
  -moz-transform: rotate(+11deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+11deg); /* Safari */
  -o-transform: rotate(+11deg); /* Opera */
  -ms-transform: rotate(+11deg); /* IE9 */
  transform: rotate(+11deg); /* W3C */
}
.cover-EAZY {
  width: 180px;
  -moz-transform: rotate(-20deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-20deg); /* Safari */
  -o-transform: rotate(-20deg); /* Opera */
  -ms-transform: rotate(-20deg); /* IE9 */
  transform: rotate(-20deg); /* W3C */
}
.cover-Torte_la_buche {
  width: 180px;
  -moz-transform: rotate(+16deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+16deg); /* Safari */
  -o-transform: rotate(+16deg); /* Opera */
  -ms-transform: rotate(+16deg); /* IE9 */
  transform: rotate(+16deg); /* W3C */
}
.cover-le_clonq {
  width: 180px;
  -moz-transform: rotate(-9deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-9deg); /* Safari */
  -o-transform: rotate(-9deg); /* Opera */
  -ms-transform: rotate(-9deg); /* IE9 */
  transform: rotate(-9deg); /* W3C */
}
.cover-Die_Blühenden_Landschaften {
  width: 180px;
  -moz-transform: rotate(+20deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+20deg); /* Safari */
  -o-transform: rotate(+20deg); /* Opera */
  -ms-transform: rotate(+20deg); /* IE9 */
  transform: rotate(+20deg); /* W3C */
}
.cover-EAZY {
  width: 180px;
  -moz-transform: rotate(+8deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+8deg); /* Safari */
  -o-transform: rotate(+8deg); /* Opera */
  -ms-transform: rotate(+8deg); /* IE9 */
  transform: rotate(+8deg); /* W3C */
}
.cover-De_Klumb {
  width: 180px;
  -moz-transform: rotate(+4deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+4deg); /* Safari */
  -o-transform: rotate(+4deg); /* Opera */
  -ms-transform: rotate(+4deg); /* IE9 */
  transform: rotate(+4deg); /* W3C */
}
.cover-Various {
  width: 180px;
  -moz-transform: rotate(-5deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-5deg); /* Safari */
  -o-transform: rotate(-5deg); /* Opera */
  -ms-transform: rotate(-5deg); /* IE9 */
  transform: rotate(-5deg); /* W3C */
}
.cover-Ronny_Federico {
  width: 180px;
  -moz-transform: rotate(-20deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-20deg); /* Safari */
  -o-transform: rotate(-20deg); /* Opera */
  -ms-transform: rotate(-20deg); /* IE9 */
  transform: rotate(-20deg); /* W3C */
}
.cover-Oba_Boba {
  width: 180px;
  -moz-transform: rotate(-20deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-20deg); /* Safari */
  -o-transform: rotate(-20deg); /* Opera */
  -ms-transform: rotate(-20deg); /* IE9 */
  transform: rotate(-20deg); /* W3C */
}
.cover-Onyon {
  width: 180px;
  -moz-transform: rotate(+9deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+9deg); /* Safari */
  -o-transform: rotate(+9deg); /* Opera */
  -ms-transform: rotate(+9deg); /* IE9 */
  transform: rotate(+9deg); /* W3C */
}
.cover-Heavy_Petting {
  width: 180px;
  -moz-transform: rotate(-7deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-7deg); /* Safari */
  -o-transform: rotate(-7deg); /* Opera */
  -ms-transform: rotate(-7deg); /* IE9 */
  transform: rotate(-7deg); /* W3C */
}
.cover-Lemongrab {
  width: 180px;
  -moz-transform: rotate(+6deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+6deg); /* Safari */
  -o-transform: rotate(+6deg); /* Opera */
  -ms-transform: rotate(+6deg); /* IE9 */
  transform: rotate(+6deg); /* W3C */
}
.cover-Ariel_My_Friend {
  width: 180px;
  -moz-transform: rotate(-1deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-1deg); /* Safari */
  -o-transform: rotate(-1deg); /* Opera */
  -ms-transform: rotate(-1deg); /* IE9 */
  transform: rotate(-1deg); /* W3C */
}
.cover-St_Toupet {
  width: 180px;
  -moz-transform: rotate(+18deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+18deg); /* Safari */
  -o-transform: rotate(+18deg); /* Opera */
  -ms-transform: rotate(+18deg); /* IE9 */
  transform: rotate(+18deg); /* W3C */
}
.cover-Erste_Hilfe {
  width: 180px;
  -moz-transform: rotate(-2deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-2deg); /* Safari */
  -o-transform: rotate(-2deg); /* Opera */
  -ms-transform: rotate(-2deg); /* IE9 */
  transform: rotate(-2deg); /* W3C */
}
.cover-Bili_Rubin {
  width: 180px;
  -moz-transform: rotate(-20deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-20deg); /* Safari */
  -o-transform: rotate(-20deg); /* Opera */
  -ms-transform: rotate(-20deg); /* IE9 */
  transform: rotate(-20deg); /* W3C */
}
.cover-Zoomies {
  width: 180px;
  -moz-transform: rotate(-10deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-10deg); /* Safari */
  -o-transform: rotate(-10deg); /* Opera */
  -ms-transform: rotate(-10deg); /* IE9 */
  transform: rotate(-10deg); /* W3C */
}
.cover-Warm_Swords {
  width: 180px;
  -moz-transform: rotate(+19deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+19deg); /* Safari */
  -o-transform: rotate(+19deg); /* Opera */
  -ms-transform: rotate(+19deg); /* IE9 */
  transform: rotate(+19deg); /* W3C */
}
.cover-Atol_Atol_Atol {
  width: 180px;
  -moz-transform: rotate(-6deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-6deg); /* Safari */
  -o-transform: rotate(-6deg); /* Opera */
  -ms-transform: rotate(-6deg); /* IE9 */
  transform: rotate(-6deg); /* W3C */
}
.cover-Frankie {
  width: 180px;
  -moz-transform: rotate(+7deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+7deg); /* Safari */
  -o-transform: rotate(+7deg); /* Opera */
  -ms-transform: rotate(+7deg); /* IE9 */
  transform: rotate(+7deg); /* W3C */
}
.cover-Kevin_Diesel___Cesar_Palace {
  width: 180px;
  -moz-transform: rotate(-2deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-2deg); /* Safari */
  -o-transform: rotate(-2deg); /* Opera */
  -ms-transform: rotate(-2deg); /* IE9 */
  transform: rotate(-2deg); /* W3C */
}
.cover-Juicebumps {
  width: 180px;
  -moz-transform: rotate(+20deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(+20deg); /* Safari */
  -o-transform: rotate(+20deg); /* Opera */
  -ms-transform: rotate(+20deg); /* IE9 */
  transform: rotate(+20deg); /* W3C */
}
.cover-CIA_Debutante {
  width: 180px;
  -moz-transform: rotate(-20deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-20deg); /* Safari */
  -o-transform: rotate(-20deg); /* Opera */
  -ms-transform: rotate(-20deg); /* IE9 */
  transform: rotate(-20deg); /* W3C */
}
.cover-KOU {
  width: 180px;
  -moz-transform: rotate(-10deg); /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-10deg); /* Safari */
  -o-transform: rotate(-10deg); /* Opera */
  -ms-transform: rotate(-10deg); /* IE9 */
  transform: rotate(-10deg); /* W3C */
}

.tape-box {
  margin-top: 10vh;
  margin-bottom: 10vh;
}

.image {
  opacity: 1;
  transition: 0.5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

/*=================================================================================================
                                            About
=================================================================================================*/
.about-page {
  margin-top: 8%;
  background: white;
  border: 1px solid black;
  height: 45vh;
}

/*=================================================================================================
                                              TV-U
  =================================================================================================*/
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
}