/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

a{
color: #000;
text-decoration: none;
}

a:hover{color: rgba(0,0,0,.5);}


body{

font-family: 'Open Sans', sans-serif;
font-weight: 300;
background: url(../img/grunge_wall.png);
}

.header{
position: relative;
height: 160px;
background: rgba(161, 44, 0, 0.3);
}

.menu{
position: absolute;
right: 45px;
top: 50px;
}

.menu li{
 font-family: 'Oswald', sans-serif;
font-weight: 400;
display: inline;
list-style: none;
margin-left: 10px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 18px;
}



.sm_logos li{
list-style: none;
display: inline;
margin-left: 10px;
opacity: .5;
}

ul.sm_logos{
margin: 0px;
padding: 0px;
}

.sm_logos{
position: absolute;
top: 0px;
right: auto;
width: 100%;
text-align: center;
}

.sm_logos li{
list-style: none;
display: inline;
opacity: 1;
}

.sm_logos li:nth-child(1) {
position: absolute;
left: 5px;
top: 2px;
}

.sm_logos li:nth-child(2) {
position: absolute;
left: 35px;
top: 2px;
}

.sm_logos li:nth-child(4) {
position: absolute;
right: 15px;
top: 2px;
}

.sm_logos li:nth-child(3) {
position: absolute;
right: 45px;
top: 2px;
}


.logoContainer{
padding: 30px 0 0 30px;
}

.logoContainer a{
text-decoration: none;
color: #000;
}

.logo1{
width: 350px;
margin: 0px 0px 0px 0px;
float: left;
}

.logoHL{
font-family: 'Oswald', sans-serif;
font-weight: 200;
width:auto;
font-size: 50px;
line-height: 53px;
float: left;
text-transform: lowercase;
margin: 58px 0px 0px 5px;
}

.logo1 a img{
width: 100%;
}

.ribbon {
margin-bottom: 2px;
background:  rgba(69, 128, 93, 0.3);
color:#000;
text-align: center;
padding: 3px 0px 4px 0px;
}

.ribbon_text{
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 14px;
letter-spacing: 1px;
display: inline;
padding: 3px;
}


#search_form{
position: absolute;
right: 132px;
bottom: 21px;
width: 400px;
}

#search_query{
float: left;
  width: 100%;
  border: 3px solid  #000;
  padding: 5px;
  height: 24px;
  outline: none;
  color: #000;
 background: url(../img/creampaper.png);
}

#search_submit{
position: absolute;  
  right: -90px;
  width: 80px;
  height: 40px;
  border: 1px solid #000;
  background: #000;
  text-align: center;
  color: #fff;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  font-weight: 200;
  font-size: 20px;
  text-transform: uppercase;
}

.searchTrackArtistUL{
margin: 15px 0px 15px 0px;
padding: 0;
}

.searchTrackArtist{
margin: 0 0 15px 0;
padding: 0;
list-style: none;
}

.resultsContainer{
background:rgba(255, 255, 255, .2);
padding: 5px 15px 5px 15px;
margin-right: 15px;
margin-bottom: 15px;
}

.mob_select_label{
display: none;
}

.label_row{
  list-style: none;
  padding:0;
  margin: 0;
  display: table;
  border-spacing: 10px 10px;
  border-collapse:separate;
  width: 100%;
}


.label_logos{
/*   background: #fff; */
  display: table-cell;
/*   border: 3px solid black; */
}

.label_logos img {
  display: block;
  width: 100%;
  height: auto;
}


/* HOME */

.new_slider{
	opacity: 0;
}

.new_wrap{
	padding: 15px 40px 60px 40px;
	background: rgba(43, 27, 21, 0.5);
	position: relative;
}

.new_wrap_HL{
 font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
letter-spacing: 1px;
padding-left: 0px;
text-transform: uppercase;
margin: 0px 0px 15px 0px;
/* border-bottom: 3px solid #fff; */
color: #fff;
/* border-top: 1px solid black; */
}

.new_slider{
	width: 40%;
	float: left;
	margin: 0px 60px 0px 0px;
	transform: rotate(-3deg);
}

.new_slider .slick-slide{
	margin:0px;
	padding: 0px !important;
	background: transparent;
}


.news_slider .slick-slide{
  margin: 0 !important;
  background: rgba(255,255,255,.3) !important;
}

.news_slider_slider_img_container{
  width: 50%;
}

.news_slider_slider_img_container img{
  float: left;
}

.news_slider_text{
  padding: 0px 30px 0px 30px;
  font-size: 16px !important;
  letter-spacing: 1px !important;
  font-weight: 400;
  width: 50%;
  float: left;
  box-sizing: border-box;
}

.news_text_HL{
  font-family: 'Oswald', sans-serif;	
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 400;
  margin-bottom: 30px;
}

.news_slider .explore_btn{
  margin: 0px 30px 20px 0px;
}

.news_slider .explore_btn a{
  color: #fff;
}

.news_slider .slick-prev{
  right: 40px !important;
}

.news_slider .slick-next{
  right: 0px !important;
}

.news_slider .slick-prev:before, .news_slider .slick-next:before {
  color: #fff;
  }


.new_text{
font-weight: 400;
letter-spacing: 1px;
color: white;
opacity: 0;
}

.new_text_HL{
	font-family: 'Oswald', sans-serif;	
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 400;
}

.explore_btn{
float: right;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 3px 3px 3px 5px;
margin: 30px;
border: 2px solid black;
cursor: pointer;
background: black;
color: #fff;

}

.explore_btn a{
	color: #fff;
}

.featured_wrap_HL{
 font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
letter-spacing: 1px;
padding-left: 0px;
text-transform: uppercase;
margin: 0px 40px 10px 40px;
/* border-bottom: 3px solid black; */
/* border-top: 1px solid black; */
}

.featured_HL_Artist_Container{
height: 100px;
overflow: hidden;
}

.featured_HL{
margin: 0 0 0 0;
padding: 10px 0px 5px 0px;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 16px;
letter-spacing: 1px;
}

.featured_release_artist{
}


.slick-slide{
padding: 15px 15px 15px 15px;
background: rgba(255,255,255,.2);
margin: 10px;
transition: all .5s ease;
}

.slick-slide a{
color: #000;
text-decoration: none;
}

.slick-slide img{
width: 100%;
}

.slick-prev:before, .slick-next:before{
color: #000; 
font-size: 27px;
}

.slick-prev, .slick-next{
top:-20px;
width: auto;
height: auto;
padding: 3px;
opacity: .7;
}

.slick-prev{
left: auto;
right: 80px;
z-index: 1;

}

.slick-next{
right: 40px;
z-index: 1;
}


.leftOut{ opacity: 0;}
.rightOut{ opacity: 0;}

.featured_trax{
list-style: none;
margin: 5px 0 5px 0;
}

.labelrow_wrap{
padding: 5px 30px 5px 30px;
/*   background: rgba(255,255,255,.5); */
}

.featured_wrap{
overflow: hidden;
padding: 15px 0px 30px 0px;
  background: rgba(69, 128, 93, 0.3);
}

.collections_wrap{
overflow: hidden;
padding: 15px 0px 0px 0px;
  background:rgba(69, 128, 93, 0.3);
}

.collection_top_bar{
background: rgba(147, 170, 203, 0.85);	
padding: 10px 40px 10px 40px;
margin: 2px 0px 2px 0px;
color: #fff;
}

.more_collections_HL{
text-transform: uppercase;
float: left;
margin-right: 15px;
font-family: 'Oswald', sans-serif;
font-weight: 400;
letter-spacing: 1px;
font-size: 16px;
}

.collectionList{
padding: 0px;
margin: 0px;
}

.collections_slider{
margin-bottom:20px;
}

/*
.collections_slider .slick-prev, .collections_slider .slick-next{	
position: absolute;
bottom: -50px;
top: auto;
background: yellow;
height: auto;
padding: 3px;
opacity: .7;
}

.slick-prev{

}

.slick-next{

}
*/


.collectionItems{
display: inline;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-weight: 200;
font-size: 16px;
letter-spacing: 1px;
}

.collectionItems:nth-child(odd) a{
  color: #eaeaea;
}

.collectionItems a{
color: #fff;
text-decoration: none;
}

.collectionItems a:hover{
color:#fcfb00;
}

.collectionItems:after{
display: inline;
content: '\2605';
margin: 0px 10px 0px 10px;
font-weight: normal;
font-family: monospace;
color:rgba(255,255,255,.7);
font-size: 20px;
line-height: 0px;
}

.collectionItems:last-child:after{
display: none;
}



.Collections_HL_Container{
	
}

.playlist_wrap{
padding: 15px 40px 30px 40px;
background: rgba(43, 27, 21, 0.65);
}

.playlist_wrap_HL{
 font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
letter-spacing: 1px;
padding-left: 0px;
text-transform: uppercase;
margin: 0px 0px 15px 0px;
/* border-bottom: 3px solid #fff; */
color: #fff;
/* border-top: 1px solid black; */
}

.playlist_container{
margin-top: 15px;
display: table;
width: 100%;
}

.playlist{
display: table-cell;
text-align: center;
width:25%;
padding: 5px 15px 15px 15px;
text-align: center;
}

.playlist iframe{
width: 100%;
}

/* LABEL */


.labelinfo_wrap{
padding: 15px 40px 30px 40px;
background: rgba(69, 128, 93, 0.3);
}

.labelinfoHL{
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
letter-spacing: 1px;
padding-left: 0px;
text-transform: uppercase;
margin: 0px 0px 15px 0px;
/* border-bottom: 3px solid black; */
}

.label_header{
background: rgba(255,255,255,.2);
min-height: 400px;
display: block;
position: relative;
}

.label_pusher{
clear: both;
height: 5px;
}

.excerpt_container{
/* font-size: 14px; */
font-weight: 400;
 letter-spacing: 1px; 
padding-left: 360px;
padding-top: 30px;
}

.excerpt_title{
padding: 30px 30px 10px 30px;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-weight: 400;
font-size: 16px;
}

.label_info_excerpt{
padding: 0px 30px 60px 30px;
margin: 0px 0px 0px 0px;
}

.readMoreBtn{
position: absolute;
bottom: 30px;
right: 30px;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 3px 5px 3px 3px;
border: 2px solid black;
cursor: pointer;
background: black;
color: #fff;
}

.de_ico{position: absolute; right: 30px; top:30px; width: 30px; height: auto; z-index: 10;}
.de_ico img{width: 100%; height: 100%;}

.en_ico{position: absolute; right: 70px; top:30px; width: 30px; height: auto; z-index: 10;}
.en_ico img{width: 100%; height: 100%;}

.label_img_container{
 float: left; 
 position: absolute;
display: block;
}

.labelinfo_img{
position: relative;
padding: 15px;
margin: 30px 0px 0px 0px;
/* background: url(../img/creampaper.png); */
/* margin: 0px 15px 5px 0px;  */
}


.cycler{
/*  border: 6px solid #fff; */
 float: left;
 height: 300px; width: 300px;
margin: 0px 0px 30px 30px;
 position: relative;
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.cycler_before {
 height: 300px; width: 300px;
/*  border: 6px solid #fff; */
 position: absolute;
 z-index: -1;
 top: 0px;
 left: -10px;
 
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 
 -webkit-transform: rotate(-5deg);
 -moz-transform: rotate(-5deg);
 -o-transform: rotate(-5deg);
 -ms-transform: rotate(-5deg);
 transform: rotate(-5deg);
}

.cycler_after {
 content: "";
 height: 300px; width: 300px;
 background: #768590;
/*  border: 6px solid #fff; */
 position: absolute;
 z-index: -1;
 top: 5px;
 left: 0px;
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 -webkit-transform: rotate(4deg);
 -moz-transform: rotate(4deg);
 -o-transform: rotate(4deg);
 -ms-transform: rotate(4deg);
 transform: rotate(4deg);
}

.cycler img{
max-width: 100%;
height: auto;
position:absolute;
z-index:1;
display: block;
}

.cycler img.active{z-index:3}


.othersContainer{
background: rgba(255,255,255,.2);
padding: 30px 30px 60px 30px;
margin-top: 15px;
min-height: 160px;
cursor: pointer;
position: relative;
letter-spacing: 1px;
}

.othersContainer:hover{
background: rgba(255,255,255,.5);
}

.othersContainerHL{
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
letter-spacing: 1px;
padding-left: 0px;
text-transform: uppercase;

}

.othersHL{
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 16px;
letter-spacing: 1px;
padding-left: 0px;
text-transform: uppercase;
margin: 0px 100px 15px 0px;

}


.label_img_container_other{
 float: left; 
max-width: 150;
height:auto;
}


.labelinfo_img_other{
padding: 0px;
margin: 0px 0px 0px 0px;
/* background: url(../img/creampaper.png); */
/* margin: 0px 15px 5px 0px;  */
}


.cycler_other{
/*  border: 6px solid #fff; */
 float: left;
 height: 150px; width: 150px;
margin: 0px 30px 0px 15px;
 position: relative;
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.cycler_before_other {
 height: 150px; width: 150px;
/*  border: 6px solid #fff; */
 position: absolute;
 z-index: -1;
 top: 0px;
 left: -10px;
 
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 
 -webkit-transform: rotate(-5deg);
 -moz-transform: rotate(-5deg);
 -o-transform: rotate(-5deg);
 -ms-transform: rotate(-5deg);
 transform: rotate(-5deg);
}

.cycler_after_other {
 content: "";
 height: 150px; width: 150px;
 background: #768590;
/*  border: 6px solid #fff; */
 position: absolute;
 z-index: -1;
 top: 5px;
 left: 0px;
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 -webkit-transform: rotate(4deg);
 -moz-transform: rotate(4deg);
 -o-transform: rotate(4deg);
 -ms-transform: rotate(4deg);
 transform: rotate(4deg);
}

.cycler_other img{
max-width: 100%;
height: auto;
position:absolute;
z-index:1;
display: block;
}

.cycler_other img.active{z-index:3}

.showOthers{
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 3px 3px 3px 5px;
border: 2px solid black;
position: absolute;
bottom: 30px;
right: 30px;
cursor: pointer;
background: black;
color: #fff;
}

.showOthers a{
color: #fff;
}

.labelLogo{
margin-top: 30px;
margin-left: 30px;
width: 150px;
height: auto;
}

.labelLogo img{
width: 100%;
height: auto;
}


.label_info_text{
padding: 0px 30px 30px 30px;
background: rgba(255,255,255,.2);
column-count: 3; 
 -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
  -moz-column-gap: 30px; /* Firefox */
  column-gap: 30px;
overflow: hidden;
opacity: 0;
/* font-size: 14px; */
font-weight: 400;
letter-spacing: 1px;
display: block;
}




div.label_info_text p:first-of-type{
margin-top: 0px;
padding-top: 0px;
}


.genre-wrap{
padding: 10px 40px 10px 40px;
background: rgba(43, 27, 21, 0.65);
color: #fff;

}

.genre_list_HL{
text-transform: uppercase;
float: left;
margin-right: 15px;
font-family: 'Oswald', sans-serif;
font-weight: 400;
letter-spacing: 1px;
font-size: 16px;
}

.genre_list{
padding: 0px;
margin: 0px;
}

.genre_mob{
display: none;
}

.genre_item{
display: inline-block;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-weight: 200;
font-size: 16px;
letter-spacing: 1px;
}

.genre_item a{
color: #fff;
text-decoration: none;
}

.genre_item:after{
display: inline;
content: '\2605';
margin: 0px 10px 0px 10px;
font-weight: normal;
font-family: monospace;
color:rgba(255,255,255,.3);
}

.genre_item:last-child:after{
display: none;
}

.label_releases_wrap{
clear: both;
 padding: 15px 40px 30px 40px; 
background: rgba(69, 128, 93, 0.3);
}

.label_release_wrap_HL{
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
letter-spacing: 1px;
padding-left: 0px;
text-transform: uppercase;
margin: 0px 0px 10px 0px;
/* border-bottom: 1px solid black; */
}

.label_releases_wrap h2{
font-weight: normal;
font-size: 16px;
}


.label_release_container{
width: 100%;
/*
-webkit-column-count: 5;
  -webkit-column-gap: 0;
  -moz-column-count: 5;
  -moz-column-gap: 0;
  column-count: 5;
  column-gap: 0;
*/
}

.releaslist_item{
transition: all .5s ease;
width: 20%;
overflow: hidden;
list-style: none;
column-break-inside: avoid;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}

.grid-sizer{width: 20%; list-style: none;}

.releaslist_item a{
color: #000;
margin: 0px 15px 15px 0px;
padding: 15px 15px 15px 15px;
display: block;
 background: url(../img/creampaper.png);
text-decoration: none;
}

h3.label_release_title{
padding: 15px 0px 5px 0px;
margin: 0px;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 16px;
letter-spacing: 1px;
display: block;
}

.label_release_artist{
padding: 0px 0px 10px 0px;
font-weight: 300;
font-size: 14px;
display: block;
}

.genre_ul{
margin: 0px;
padding: 0px;
list-style: none;
font-size: 12px;
font-style: italic;
}

.genre_ul li{
display: inline;
margin-left: 3px;
}

.katalogNr{
font-size: 12px;
margin-top: 10px;
}

.EAN{
font-size: 12px;
margin-top: 10px;
}

.releaslist_item a img{
width: 100%;

}

.pusher{
width: 100%;
clear: both;
}

.MarkupPagerNav {
        clear: both;
        margin: 10px 0px 50px 0px;
       padding: 0px;
       font-family: 'Oswald', sans-serif;
       font-weight: 200;
}
.MarkupPagerNav li {
	display: inline;
	list-style: none;
	margin: 0;
}

.MarkupPagerNav li a,
.MarkupPagerNav li.MarkupPagerNavSeparator {
	display: block;
	float: left;
	padding: 2px 9px;
	color: #fff;
	background: rgba(43, 27, 21, 0.65);
	margin-right: 5px;
	font-size: 14px;
/* 	font-weight: bold; */
	text-transform: uppercase;
}

.MarkupPagerNav li.MarkupPagerNavOn a,
.MarkupPagerNav li a:hover {
	color: #000;
	background: #d2e4ea;
	text-decoration: none;
}

.MarkupPagerNav li.MarkupPagerNavSeparator {
	display: inline;
	color: #000;
	background: transparent;
	padding-left: 3px;
	padding-right: 3px;
}


/* RELEASE */

.release_wrap{
padding: 15px 40px 30px 40px;
background: rgba(69, 128, 93, 0.3);
}

.release_wrap_HL{
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
letter-spacing: 1px;
padding-left: 0px;
text-transform: uppercase;
margin: 0px 10px 15px 0px;
float: left;
/* border-bottom: 3px solid black; */
/* border-top: 1px solid black; */
}

.release_interpret_HL{
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 20px;
letter-spacing: 1px;
float: left;
text-transform: uppercase;
margin: 0px 10px 15px 0px;
}


.release_preview{
width: 35%;
float: left;
}

.katalog_release_nr{
position: relative;
/* height: 30px; */
margin-right: 30px;
width: auto;
font-size: 16px;
padding: 5px 5px 5px 10px;
background: rgba(43, 27, 21, 0.65);
color: #fff;
}

.appleLink{
position: relative;
/* height: 30px; */
width: auto;
margin-top: 15px;
float: left;
}

.appleLink a img{
height: 30px;
margin-right: 15px;
}

.spotifyLink{
position: relative;
/* height: 30px; */
margin-right: 18px;
width: auto;
margin-top: 15px;
float: left;
background: black;
border-radius: 5px;
height: 20px;
padding: 5px;
margin-left: 2px;
}

.spotifyLink img{
height: 100%;
}

.amazonLink{
position: relative;
/* height: 30px; */
margin-right: 30px;
width: auto;
margin-top: 15px;
float: left;
background: black;
color: white;
border-radius: 5px;
overflow: hidden;
height: 30px;
padding: 0px;
}

.amazonLink img{
height: 100%;
}

.player_header_r{
width: 65%;
float: right;
 background: url(../img/creampaper.png);
color: #000;
}

 #plwrap{
 width: 65%;
float: right;
 background: url(../img/creampaper.png); 
color: #000;
}

#plwrap_2{
  width: 65%;
float: right;
color: #000;
}

.plyr__control{
color: #000;
}

.plyr--full-ui input[type=range]{
color: rgba(161, 44, 0, 0.3);
}

.plyr--audio .plyr__progress__buffer{
color: rgba(161, 44, 0, 0.1);
}

.plyr--audio .plyr__controls{
color: #000;
}

.plSel{
background: rgba(0,0,0,.3);
color: white;
}

#nowPlay span {
display:inline-block;
font-size:1.05rem;
vertical-align:top;
margin:7px 0px 0px 15px;
}

#nowPlay span#npAction {
padding: 0px;
width: auto;
font-family: 'Oswald', sans-serif;
font-weight: 300; 
font-size: 20px;
letter-spacing: 1px;
}

#nowPlay span#npTitle {
display: inline-block;
padding:0px;
text-align:left;
width: 70%;
font-family: 'Oswald', sans-serif;
font-weight: 400; 
font-size: 20px;
letter-spacing: 1px;
}

#tracks{
font-size: 0;
position: relative;
float: right;
margin: 5px 5px 0px 0px;
text-align: center;
}

#tracks a{
color: #000;
}

span.plInterpret{
font-size: 14px;
font-style: italic;
display: block;
padding-left: 21px;
}

#plList li{
padding: 10px 0px;
}

.player_container{ 
position:relative; 
clear: both;
 width:auto; min-width: 300px; 
width: 100%;
}
/* .column { width:inherit; } */

.no_js_trax_HL{
font-family: 'Oswald', sans-serif;
font-weight: 400; 
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;
padding-bottom: 10px;
}

.no_js_trax {
background:rgba(255, 255, 255, .2);
float: left;
padding: 15px 30px 15px 30px;
}

.no_js_trax li{
list-style: decimal;
padding: 10px 0px 10px 0px;
font-size: 18px;
}

.no_js_trackartist{
font-style: italic;
margin-left: 20px;
font-size: 16px;
}

.prev_img_container{
width: 100%;
height: auto;
margin-bottom: 15px;
cursor: pointer;
}

.yt_margin{
  margin-right: 30px;
}

._df_custom{
display: block; 
margin-right: 30px;
background: rgba(255,255,255,.3);
}

._df_custom img{
width: 100%;
height: auto;
 background: url(../img/creampaper.png);
}


.df-lightbox-wrapper{
background: url(../img/creampaper.png);
}


.highlight{
background: #ffee84;
/* padding: 0px 3px 0px 3px; */
}

.extraText{
width: 65%;
float: right;
margin-top: 30px;
background: rgba(43, 27, 21, 0.65);

color: #fff;

}

.extraTextInner{
padding: 15px;
}

.extraInfoHL{
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: 400; 
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;

}

.extraText .slick-slide{

padding: 0px;

}

.extraText .slick-prev, .extraText .slick-next{

top: 50%;
/* width: 0px; */
opacity: 1;
}

.extraText .slick-prev{
left: 10px;
right: auto;

}

.extraText .slick-next{
right: 5px;
left: auto;

}

.extraText .slick-prev:before, .extraText .slick-next:before{
color: #fff;
opacity: 1;
}


.extraText ._df_custom{
margin-right: 0px;
cursor: pointer;
}

/* ABOUT */

.about_wrap{
padding: 15px 40px 30px 40px;
background: rgba(69, 128, 93, 0.3);
}

.aboutWrapTitle{
font-family: 'Oswald', sans-serif;
font-weight: 400; 
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 10px;
}

.aboutImgContainer{
float: right;
width: 50%;
margin: 15px;
}

.aboutLang{
  position: absolute;
  margin-top: -35px;
}

.aboutImgContainer img{
max-width: 100%;
}

.aboutText{
background: rgba(255, 255, 255, .2);
padding: 15px 30px 30px 30px;
}

.aboutTitle{
font-family: 'Oswald', sans-serif;
font-weight: 400; 
font-size: 16px;
letter-spacing: 1px;
text-transform: uppercase;
padding-bottom: 10px;
padding-top: 10px;
}

/* CONTACT */

.contact_wrap{
padding: 15px 40px 30px 40px;
background: rgba(69, 128, 93, 0.3);
display: block;
}

.contactWrapTitle{
font-family: 'Oswald', sans-serif;
font-weight: 400; 
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 10px;
}

.contactImgContainer{
float: left;
width: 50%;
margin: 15px 15px 15px 0px;
}

.contactImgContainer img{
max-width: 100%;
}

.contactText{
background: rgba(255, 255, 255, .2);
padding: 15px 30px 30px 30px;
}

.contactTitle{
font-family: 'Oswald', sans-serif;
font-weight: 400; 
font-size: 16px;
letter-spacing: 1px;
text-transform: uppercase;
padding-bottom: 10px;
padding-top: 10px;
}


/* PRIVACY POLICY */

.privacy_wrap{
padding: 15px 40px 30px 40px;
background: rgba(69, 128, 93, 0.3);
}

.privacyWrapTitle{
font-family: 'Oswald', sans-serif;
font-weight: 400; 
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 10px;
}

.absatzTitle{

font-family: 'Oswald', sans-serif;
font-weight: 400; 
font-size: 16px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 10px;
margin-top: 10px;
}

.privacyText{
background: rgba(255, 255, 255, .2);
padding: 15px 30px 30px 30px;
}

.absatz{
margin-bottom: 30px;
word-wrap: break-word;
}


/* FOOTER */


.main_footer{
background: rgba(43, 27, 21, 0.8);
padding: 15px 40px 30px 40px;
}

.footer_line{
/*
height: 1px;
background: #fff;
margin-bottom: 10px;
*/
}

.footer_menu{
float: left;
}

.footer_menu li{
display: inline;
}

.footer_menu li a{
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: 200; 
font-size: 14px;
letter-spacing: 1px;
padding-right: 15px;
}

.footer_menu_2{
float: right;
}

.footer_menu_2 li{
display: inline;
}

.footer_menu_2 li a{
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: 200; 
font-size: 14px;
letter-spacing: 1px;
padding-left: 15px;
}


@media only screen and (max-width: 1220px) {

#search_form{
position: absolute;
right: 132px;
bottom: 21px;
width: 200px;
}

.new_wrap{
	padding: 40px 40px 60px 40px;
	background: rgba(43, 27, 21, 0.5);
}

.new_wrap_HL{
 font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
letter-spacing: 1px;
padding-left: 0px;
text-transform: uppercase;
margin: 0px 0px 15px 0px;
/* border-bottom: 3px solid #fff; */
color: #fff;
/* border-top: 1px solid black; */
}

.new_slider{
	width: 40%;
	float: left;
	margin: 0px 30px 0px 0px;
	transform: rotate(-3deg);
}

.new_slider .slick-slide{
	margin:0px;
	padding: 0px !important;
	background: transparent;
}

.new_text{
font-weight: 400;
letter-spacing: 1px;
color: white;
margin: 15px 15px 0px 0px;
}

.new_text_HL{
	 font-family: 'Oswald', sans-serif;	
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 400;
}



}


@media only screen and (max-width: 1024px) {


.logoContainer{
padding: 30px 0 0 30px;
}

.logoContainer a{
text-decoration: none;
color: #000;
}

.logo1{
width: 300px;
margin: 0px 0px 0px 0px;
float: left;
}

.logoHL{
font-family: 'Oswald', sans-serif;
font-weight: 200;
width:auto;
font-size: 30px;
line-height: 33px;
float: left;
text-transform: lowercase;
margin: 65px 0px 0px 5px;
}

.logo1 a img{
width: 100%;
}


#search_form{
width: 150px;
right: 105px;
bottom: 30px;
}

#search_query{
float: left;
  width: 100%;
  border: 2px solid  #000;
  padding: 5px;
  height: 14px;
  outline: none;
  color: #000;
 background: url(../img/creampaper.png);
}

#search_submit{
position: absolute;  
  right: -60px;
  width: 60px;
  height: 28px;
  border: 0px solid #000;
  background: #000;
  text-align: center;
  color: #fff;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  font-weight: 200;
  font-size: 16px;
  text-transform: uppercase;
}

.new_wrap{
	padding: 15px 40px 30px 40px;
	background: rgba(43, 27, 21, 0.5);
}

.new_wrap_HL{
 font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
letter-spacing: 1px;
padding-left: 0px;
text-transform: uppercase;
margin: 0px 0px 15px 0px;
/* border-bottom: 3px solid #fff; */
color: #fff;
/* border-top: 1px solid black; */
}

.new_slider{
	width: 40%;
	float: left;
	margin: 0px 30px 10px 0px;
	transform: rotate(-3deg);
}

.new_slider .slick-slide{
	margin:0px;
	padding: 0px !important;
	background: transparent;
}

.new_text{
font-weight: 400;
letter-spacing: 1px;
color: white;
margin: 15px 0px 0px 0px;
font-size: 14px;
}

.new_text_HL{
	 font-family: 'Oswald', sans-serif;	
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 400;
}

.news_slider .slick-slide{
  margin: 0 !important;
  background: rgba(255,255,255,.3) !important;
}

.news_slider_slider_img_container{
  width: 100%;
}

.news_slider_slider_img_container img{
  float: none;
}

.news_slider_text{
  padding: 0px 30px 0px 30px;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  font-weight: 400;
  width: 100%;
  float: none;
  box-sizing: border-box;
}

.news_text_HL{
  font-family: 'Oswald', sans-serif;	
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 400;
  margin-bottom: 30px;
  margin-top: 15px;
}

.news_slider .explore_btn{
  margin: 0px 30px 20px 0px;
}

.news_slider .explore_btn a{
  color: #fff;
}



.playlist_wrap{
padding: 15px 15px 30px 15px;

}

.playlist_container{
display: block;
}

.playlist{
display: block;
width:100%;
padding: 5px 0px 15px 0px;
text-align: center;
clear: both;
}

}


@media only screen and (max-width: 800px) {

  .yt_margin{
    margin-right:0px;
  }

.header{
height: auto;
padding-bottom: 20px;
}

.ribbon_text{
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 1px;
display: inline;
padding: 3px;
}

.logoContainer{
padding: 20px 0px 15px 0px;
position: relative;
width: 170px;
margin: 0 auto;
}

.logo1{
width: 170px;
}

.logoHL{
font-family: 'Oswald', sans-serif;
font-weight: 200;
width:auto;
font-size: 27px;
line-height:normal;
text-transform: lowercase;
margin: 0px;
}



ul.menu{
margin: 0px 0px 0px 0px;
padding: 10px 0px 15px 0px;
}

.menu{
clear: both;
position:relative;
text-align: center;
right: auto;
top: auto;
}

.menu li{
 font-family: 'Oswald', sans-serif;
font-weight: 400;
display: inline;
list-style: none;
/* margin-left: 5px; */
text-transform: uppercase;
letter-spacing: 1px;
font-size: 16px;
margin: 0px 10px 0px 10px;
text-align: center;
}

#search_form{
width: 80%;
right: auto;
bottom: auto;
left: -5px;
top: auto;
position: relative;
margin: 0 auto;
height: 30px;
}

#search_query{
width: 100%;
border: 2px solid #000;
border-radius: 0px !important;
padding: 5px 5px 5px 5px;
height: 14px;
outline: none;
color: #000;
font-size: 14px;
background: url(../img/creampaper.png);
}

#search_submit{
clear: both;
position: absolute;  
  right: -12px;
  width: auto;
  height: 28px;
  border: 0px solid #000;
  background: #000;
  text-align: center;
  color: #fff;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
}

.new_wrap{
	padding: 15px 15px 15px 15px;
	background: rgba(43, 27, 21, 0.5);
}

.new_wrap_HL{
 font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
letter-spacing: 1px;
padding-left: 0px;
text-transform: uppercase;
margin: 0px 0px 15px 0px;
/* border-bottom: 3px solid #fff; */
color: #fff;
/* border-top: 1px solid black; */
}

.new_slider{
	width: auto;
	float: none;
	margin: 0px 0px 30px 0px;
	transform: rotate(-3deg);
}

.new_slider .slick-slide{
	margin:0px;
	padding: 0px !important;
	background: transparent;
}

.new_text{
font-weight: 400;
letter-spacing: 1px;
color: white;
margin: 15px 0px 0px 0px;
font-size: 14px;
}

.new_text_HL{
	 font-family: 'Oswald', sans-serif;	
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 400;
}



.mob_select_label{
display: block;
position: relative;
background: rgba(43, 27, 21, 0.65);
color: white;
font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 17px;
letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  margin: 0 auto;
  padding: 15px 0px 15px 0px;
  cursor: pointer;
}

.mob_select_label_btn{
position: relative;
display: inline-block;
margin: 0 auto;
border: 2px solid white;
padding: 5px;
 cursor: pointer;
}

.labelrow_wrap{
padding: 0px;
}

.label_row{
  list-style: none;
  padding:0;
  margin: 0;
  display: block;
  border-spacing: 10px 10px;
  border-collapse:separate;
  width: 100%;
  text-align: center;
  max-height: 0px;
  overflow: hidden;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}


.labelinfo_wrap{
padding: 15px 15px 30px 15px;
}

.labelLogo{
margin-left: 10px;
}

.label_img_container{
clear: both;
 float: none;
 position: relative;
display: block;
margin-left: 15px;
padding-top: 15px;
}

.cycler{
/*  border: 6px solid #fff; */
 float: left;
 height: 250px; width: 250px;
margin: 0px 0px 0px 0px;
 position: relative;
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.cycler_before {
 height: 250px; width: 250px;
/*  border: 6px solid #fff; */
 position: absolute;
 z-index: -1;
 top: 0px;
 left: -10px;
 
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 
 -webkit-transform: rotate(-5deg);
 -moz-transform: rotate(-5deg);
 -o-transform: rotate(-5deg);
 -ms-transform: rotate(-5deg);
 transform: rotate(-5deg);
}

.cycler_after {
 content: "";
 height: 250px; width: 250px;
 background: #768590;
/*  border: 6px solid #fff; */
 position: absolute;
 z-index: -1;
 top: 5px;
 left: 0px;
 -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
 -webkit-transform: rotate(4deg);
 -moz-transform: rotate(4deg);
 -o-transform: rotate(4deg);
 -ms-transform: rotate(4deg);
 transform: rotate(4deg);
}

.cycler img{
max-width: 100%;
height: auto;
position:absolute;
z-index:1;
display: block;
}


.excerpt_container{
/* font-size: 14px; */
clear: both;
font-weight: 400;
 letter-spacing: 1px; 
padding-left: 10px;
padding-right: 10px;
padding-bottom: 30px;
padding-top: 30px;
}

.excerpt_title{
padding: 30px 100px 10px 10px;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-weight: 400;
font-size: 16px;
}

.label_info_excerpt{
padding: 0px 10px 30px 10px;
margin: 0px 0px 0px 0px;
}

.readMoreBtn{
position: absolute;
bottom: 30px;
right: 30px;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 3px 5px 3px 3px;
border: 2px solid black;
cursor: pointer;
background: black;
color: #fff;
}

.de_ico{position: absolute; right: 30px; top:345px; width: 30px; height: auto; z-index: 10;}
.de_ico img{width: 100%; height: 100%;}

.en_ico{position: absolute; right: 70px; top:345px; width: 30px; height: auto; z-index: 10;}
.en_ico img{width: 100%; height: 100%;}


.labelinfo_img{
position: relative;
padding: 15px;
margin:10px 0px 0px 0px;
/* background: url(../img/creampaper.png); */
/* margin: 0px 15px 5px 0px;  */
}




.genre_mob{
display: block;
position: relative;
color: white;
font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 17px;
letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  margin: 0 auto;
  padding: 15px 0px 15px 0px;
  cursor: pointer;
}

.genre_mob_btn{
position: relative;
display: inline-block;
margin: 0 auto;
border: 2px solid white;
padding: 5px;
 cursor: pointer;
}

.genre_list_HL{
display: none;
}

.genre_item{
display: block;
padding: 10px 0px 10px 0px;
border-bottom: 1px solid #fff;
}

.genre_list{
text-align: center;
padding-bottom: 0px;
max-height: 0px;
overflow: hidden;
-webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.open{
max-height: 1500px;
 -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.genre_item:after{
content: '';
}

.label_logos{
/*   background: #fff; */
  display: block;
  text-align: center;
  width: 100%;
/*   border: 3px solid black; */
	position: relative;
	margin-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid black;
}

.label_logos a {
  display: block;
 text-align: center;
 width: 250px;
margin: 0 auto;
}


.label_logos img {
  display: block;
  text-align: center;
  margin: 0 auto;
  max-height: 60px;
 max-width: 250px;
  width: auto;
  height: auto;
}

.label_info_text{
background: rgba(255,255,255,.2);
padding: 15px 15px 15px 15px;
column-count: 1;

}

.label_releases_wrap{
padding: 15px 0px 30px 15px;
}


.releaslist_item{
transition: all .5s ease;
width: 50%;
overflow: hidden;
list-style: none;
column-break-inside: avoid;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}

.grid-sizer{width: 50%; list-style: none;}

.release_wrap{
padding: 15px 15px 30px 15px;
}

.release_preview{
width: 100%;
}

._df_custom{
margin-right: 0px;
}

.player_header_r{
width: 100%;
}

#plwrap{
width: 100%;
}

#plwrap_2{
  width: 100%;
}

#nowPlay span#npTitle{
max-width: 55%;
}


.katalog_release_nr{
margin-right: 0px;
}


.streamLinks{
display: block;
position: relative;
}

.streamPusher{
clear: both;
padding-bottom:  15px;
}

/* ABOUT */

.about_wrap{
padding: 15px 15px 30px 15px;
background: rgba(69, 128, 93, 0.3);
}

.aboutWrapTitle{
font-family: 'Oswald', sans-serif;
font-weight: 400; 
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 10px;
}

.aboutImgContainer{
float: none;
width: 100%;
margin: 0px 0px 15px 0px;
}

.aboutImgContainer img{
max-width: 100%;
}

.aboutText{
background: rgba(255, 255, 255, .2);
padding: 15px 15px 15px 15px;
}

.aboutTitle{
font-family: 'Oswald', sans-serif;
font-weight: 400; 
font-size: 16px;
letter-spacing: 1px;
text-transform: uppercase;
padding-bottom: 10px;
padding-top: 10px;
}

/* OTHER */

.label_img_container_other{
float: none;
clear: both;
height: 165px;
margin-bottom: 15px;
}

.showOthers{
bottom: 30px;
}

.othersContainer .de_ico, .othersContainer .en_ico{
top:30px;
}

.extraText{
width: 100%;
float: right;
margin-top: 30px;
background: rgba(43, 27, 21, 0.65);

color: #fff;

}



/* PRIVACY POLICY */

.privacy_wrap{
padding: 15px 15px 30px 15px;
background: rgba(69, 128, 93, 0.3);
}



/* CONTACT */

.contact_wrap{
padding: 15px 15px 30px 15px;
background: rgba(69, 128, 93, 0.3);
display: block;
}

.contactWrapTitle{
font-family: 'Oswald', sans-serif;
font-weight: 400; 
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 10px;
}

.contactImgContainer{
float: none;
width: 100%;
margin: 0px 0px 15px 0px;
}

.contactImgContainer img{
max-width: 100%;
}

.contactText{
background: rgba(255, 255, 255, .2);
padding: 15px 15px 15px 15px;
}

.contactTitle{
font-family: 'Oswald', sans-serif;
font-weight: 400; 
font-size: 16px;
letter-spacing: 1px;
text-transform: uppercase;
padding-bottom: 10px;
padding-top: 10px;
}


.main_footer{
background: rgba(43, 27, 21, 0.8);
padding: 15px 15px 30px 15px;
}


.footer_menu{
float: left;
}

.footer_menu li{
display: block;
}

.footer_menu li a{
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: 200; 
font-size: 14px;
letter-spacing: 1px;
padding-right: 15px;
}

.footer_menu_2{
float: right;
}

.footer_menu_2 li{
display: block;
text-align: right;
}

.footer_menu_2 li a{
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: 200; 
font-size: 14px;
letter-spacing: 1px;
padding-left: 0px;
}


}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}