/*---------------------------------------------------------*\	
	DORNENREICH -- Du wilde Liebe sei - Design v1.30
	http://www.dornenreich.com 				
	
	last update: 15-May-2022												
\*---------------------------------------------------------*/

* {
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}

html, body { 
	width: 100%; 
	height: 100%; 
}
	
body { 
	background: #C7C7C7; 
	line-height: 1.4rem;
	color: #543333;
	font-family: verdana, arial, sans-serif; 
}

/*---------------------------------------------------------*\
	Seitenelemente
\*---------------------------------------------------------*/

div.content-inner {
	display: inline-block;
	width: 90%;
	text-align: justify;
}

div.content-inner-small {
	display: inline-block;
	width: 80%;
	text-align: justify;
}

div.content-inner-tiny {
	display: inline-block;
	width: 70%;
	text-align: justify;
}

div.container {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center; }

div.footnotes {
	padding: 1rem;
	width: 80%;
	min-width: 600px;
	max-width: 1100px;
	min-height: 60px;
	margin: auto;
	position: relative;
	top: 0; left: 0; bottom: 0; right: 0;
	background: #C7C7C7;
	text-align:center;
}

/*---------------------------------------------------------*\
	Dornenreich-Logo
\*---------------------------------------------------------*/

img.logo {
	width: 30%; 
	min-width: 360px; 
	max-width: 540px; 
	margin-top: 60px;
}

div.logo-img {
	display: block; 
	text-align: center; 
	width: 100%;
}

/*---------------------------------------------------------*\
	GALLERY
\*---------------------------------------------------------*/

div.table-gallery { 
	width: auto;
	min-width:420px;
    display: table; 
    border-collapse:collapse; 
	text-align:center;
	margin: 0 auto;
}

div.tr-gallery { 
	display:table-row; 
}

div.td-gallery { 
	display:table-cell; 
	border:0px; 
    padding-left:3px; 
	padding-right:3px; 
	padding-top:0px; 
	padding-bottom:0px; 
	text-align: center;
}

img.gallery {
	width: 14vw;
	min-width: 100px;
	max-width: 200px;
}

div.logo-img {
	display: block; 
	text-align: center; 
	width: 100%;
}

/*---------------------------------------------------------*\
	NEWS Section
\*---------------------------------------------------------*/

img.news-pic {
	width:42vw; 
	max-width: 640px;
}

img.news-pic-small {
	width:21vw; 
	max-width: 320px;
}

img.flyer {
	width:16vw; 
	max-width: 240px;
	min-width: 180px;
}

span.news-datum {
	font-size: 0.9rem;
	margin-top: 0.15rem;
}

/*---------------------------------------------------------*\
	DISCOGRAPHY Section
\*---------------------------------------------------------*/

img.cd-item {
	width:18vw; 
	min-width: 200px;
	max-width: 280px !important;
}

div.press-container {
	width: 100%; 
	display: flex; 
	justify-content: center;
	align-items: center;
}

div.press {
	font-size: 0.9rem;
	width: 80%;
	text-align: center;
}


/*---------------------------------------------------------*\
	Social Media Icons
\*---------------------------------------------------------*/

img.social {
	width: 3.0rem;
	height: auto;
	margin-right: 0.2rem;
}

/*---------------------------------------------------------*\
	Tabellenelemente
\*---------------------------------------------------------*/

div.table { 
	width: 90%;
	min-width:500px;
    display: table; 
    border-collapse:collapse; 
	text-align:center;
	margin: 0 auto;
}

div.table-news { 
    display: table; 
    border-collapse:collapse; 
	text-align:center;
	margin: 0 auto;
}
    
div.tr { 
	display:table-row; 
}
  
div.td { 
	display:table-cell; 
	border:0px; 
    padding-left:0px; 
	padding-right:0px; 
	padding-top:0px; 
	padding-bottom:0px; 
	text-align: left;
}

div.td-right { 
	display:table-cell; 
	border:0px; 
    padding-left:4px; 
	padding-right:4px; 
	padding-top:4px; 
	padding-bottom:0px; 
	text-align: right;
}

div.td-news-wide { 
	display:table-cell; 
	border:0px; 
    padding-left:0px; 
	padding-right:0px; 
	padding-top:0px; 
	padding-bottom:0px; 
	text-align: left;
}
	
div.table-footer-row {
	display:table-row;
}

div.table-disc { 
	width: 90%;
	min-width:500px;
    display: table; 
    border-collapse:collapse; 
	text-align:left;
	margin: 0 auto;
}
    
div.tr-disc { 
	display:table-row; 
}
  
div.td-disc { 
	display:table-cell; 
	border:0px; 
    padding-left:0px; 
	padding-right:0px; 
	padding-top:0px; 
	padding-bottom:0px; 
	text-align: left;
}

/*---------------------------------------------------------*\
	LINKS formatieren....
\*---------------------------------------------------------*/

a:link { 
	color:#903130; 
	text-decoration:none; }

a:visited { 
	color:#903130; 
	text-decoration:none; }
	
a:hover { 
	color:#FFFFFF;
	text-decoration:none; }
	
a:active { 
	color:#EEEEEE;
	text-decoration:none; }

a.menu-item {
	color:#301111;
	font-size: 1.2rem !important;
	line-height: 1.6rem !important;
	font-weight: normal !important;
}

a.menu-item:link {
	color:#301111;
	font-size: 1.2rem !important;
	line-height: 1.6rem !important;
	font-weight: normal !important;
}

a.menu-item:hover {
	color:#FFFFFF;
	font-size: 1.2rem !important;
	line-height: 1.6rem !important;
	font-weight: normal !important;
}

a.menu-item:active {
	color:#301111;
	font-size: 1.2rem !important;
	line-height: 1.6rem !important;
	font-weight: normal !important;
}

a.menu-item::visited {
	color:#301111;
	font-size: 1.2rem !important;
	line-height: 1.6rem !important;
	font-weight: normal !important;
}

.button {
    background: #ABABAB;
	font-size: 0.9rem;
    color: #301111 !important;
    display: inline-block;
    padding: 2px 4px 3px 4px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.button-tab {
    background: #ABABAB;
	font-size: 0.9rem;
	line-height: 1.2rem;
    color: #301111 !important;
    display: inline-block;
    padding: 2px 4px 3px 4px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.red {
	background: #903130 !important;
	color: #CDCDCD !important;
}

.page-num {
	font-size: 0.9rem;
}

.selected {
	background: #CDCDCD;
}

.wide {
	width: 10rem;
}

.normal {
	width: 8rem;
}

.small {
	width: 7rem;
}
.tiny {
	width: 6rem;
}

.micro {
	width: 4rem;
}

.rounded {
	border-radius: 4px;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

/*---------------------------------------------------------*\
	TEXTELEMENTE formatieren....
\*---------------------------------------------------------*/

span.n-large {
	font-size: 1.1rem;  }

span.n-small {
	font-size: 0.9rem;  }

span.n-tiny {
	font-size: 0.8rem;  }


/*---------------------------------------------------------*\
	HEADLINES formatieren....
\*---------------------------------------------------------*/

span.hline {
	letter-spacing: 0.1rem; 
	line-height: 0.7; 
	font-size: 2.2rem; 
	font-family: 'kl_antiqua1normal', Fallback, verdana; 
	color: #903130;
	font-weight: bold; 
}

span.hline-medium {
	letter-spacing: 0.1rem; 
	line-height: 0.65; 
	font-size: 1.8rem; 
	font-family: 'kl_antiqua1normal', Fallback, verdana; 
	color: #903130;
	font-weight: bold; 
}

span.hline-small {
	letter-spacing: 0.1rem; 
	line-height: 0.65; 
	font-size: 1.5rem; 
	font-family: 'kl_antiqua1normal', Fallback, verdana; 
	color: #903130;
	font-weight: bold; 
}

span.hline-tiny{
	letter-spacing: 0.1rem; 
	line-height: 0.65; 
	font-size: 1.2rem; 
	font-family: 'kl_antiqua1normal', Fallback, verdana; 
	color: #903130;
	font-weight: bold; 
}

span.hline-plain {
	line-height: 0.65; 
	font-size: 1.1rem; 
	color: #8a4646;
	font-weight: bold; 
}

span.hline-plain-normal {
	line-height: 0.65; 
	font-size: 1.0rem; 
	color: #8a4646;
	font-weight: bold; 
}

span.hline-light {
	line-height: 0.65; 
	font-size: 1.0rem; 
	color: #903130;
}

span.bold {
	font-weight: bold !important;
}


/*---------------------------------------------------------*\
	SYSTEMMELDUNGEN formatieren....
\*---------------------------------------------------------*/

span.hline-error-plain {
	line-height: 0.65; 
	font-size: 1.0rem; 
	color: #EF4646;
	font-weight: bold; 	
}

span.hl-success-plain {
	line-height: 0.65; 
	font-size: 1.0rem; 
	color: #3c8e4f;
	font-weight: bold; 	
}


/*---------------------------------------------------------*\
	ABSÄTZE formatieren.... 
\*---------------------------------------------------------*/

p.center {
	text-align: center; 
	margin-top: 0px;
 }


p.indent-1 {
	margin-left: 1rem; 
	margin-top: 0px; 
 }

p.indent-2 {
	margin-left: 2rem; 
	margin-top: 0px; 
}

p.indent-3 {
	margin-left: 3rem; 
	margin-top: 0px; 
 }

.space {
	margin-bottom: 0.5rem;
}

.space-medium {
	margin-bottom: 1.25rem;
}

.space-wide {
	margin-bottom: 2rem;
}

/*---------------------------------------------------------*\
	LISTEN formatieren..... 
\*---------------------------------------------------------*/

ul {
	list-style-type: "\00BB "; 
	line-height: 1.5rem;
	margin-top: 0px; 
	margin-bottom: 0px; 
}

ul.tracklist {
	list-style-type: decimal-leading-zero;
	line-height: 1.5rem;
	margin-top: 0px; 
	margin-bottom: 0px; 
	padding-left: 2rem;
}

li {
	padding-left: 0.35rem;
}

li.track {
	margin-left: 2rem !important;
}

ul.l-indent-1 {
	padding-left: 1rem; }

ul.l-indent-2 {
	padding-left: 2rem; }

ul.l-indent-3 {
	padding-left: 3rem; }

ul.l-indent-4 {
	padding-left: 4rem; }
	
ul.l-indent-5 {
	padding-left: 5rem; }

/*---------------------------------------------------------*\ 
	Klassen für <hr> Elemente....
\*---------------------------------------------------------*/

hr.hr-fade {
    border: 0;
    height: 2px;
    margin-top: 0.2rem;
	margin-bottom: 0.9rem;
    position:relative;
	background: rgb(198,198,198);
	background: -moz-linear-gradient(90deg, rgba(198,198,198,1) 0%, rgba(118,24,13,1) 48%, rgba(118,24,13,0.8351541300113796) 52%, rgba(198,198,198,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(198,198,198,1) 0%, rgba(118,24,13,1) 48%, rgba(118,24,13,0.8351541300113796) 52%, rgba(198,198,198,1) 100%);
	background: linear-gradient(90deg, rgba(198,198,198,1) 0%, rgba(118,24,13,1) 48%, rgba(118,24,13,0.8351541300113796) 52%, rgba(198,198,198,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c6c6c6",endColorstr="#c6c6c6",GradientType=1);
}

hr.hr-fade:before {
    content: "";
    display: block;
    border-top: solid 1px rgba(255,100,100,0.100);
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    z-index: 1;
}

hr.hr-fade-right {
    border: 0;
    height: 2px;
    margin-top: 0.4rem;
	margin-bottom: 0.6rem;
    position:relative;
	background: rgb(118,24,13);
	background: -moz-linear-gradient(90deg, rgba(118,24,13,1) 0%, rgba(118,24,13,0.8351541300113796) 8%, rgba(214,214,214,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(118,24,13,1) 0%, rgba(118,24,13,0.8351541300113796) 8%, rgba(214,214,214,1) 100%);
	background: linear-gradient(90deg, rgba(118,24,13,1) 0%, rgba(118,24,13,0.8351541300113796) 8%, rgba(214,214,214,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#76180d",endColorstr="#d6d6d6",GradientType=1); 
}

hr.hr-fade-right:before {
    content: "";
    display: block;
    border-top: solid 1px rgba(255,100,100,0.100);
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    z-index: 1;
}

hr.hr-fade-head {
    border: 0;
    height: 1px;
    margin-top: 0.2rem;
	margin-bottom: 0.2rem;
    position:relative;
	background: rgb(198,198,198);
	background: -moz-linear-gradient(90deg, rgba(198,198,198,1) 0%, rgba(118,24,13,1) 48%, rgba(118,24,13,0.8351541300113796) 52%, rgba(198,198,198,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(198,198,198,1) 0%, rgba(118,24,13,1) 48%, rgba(118,24,13,0.8351541300113796) 52%, rgba(198,198,198,1) 100%);
	background: linear-gradient(90deg, rgba(198,198,198,1) 0%, rgba(118,24,13,1) 48%, rgba(118,24,13,0.8351541300113796) 52%, rgba(198,198,198,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c6c6c6",endColorstr="#c6c6c6",GradientType=1);
}

hr.hr-fade-head:before {
    content: "";
    display: block;
    border-top: solid 1px rgba(255,100,100,0.100);
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    z-index: 1;
}

/*---------------------------------------------------------*\ 
	Schatteneffekte....
\*---------------------------------------------------------*/

.shadow {
	box-shadow: 0 1px 1px rgba(0,0,0,0.12), 
				0 2px 2px rgba(0,0,0,0.12), 
				0 4px 4px rgba(0,0,0,0.12), 
				0 8px 8px rgba(0,0,0,0.12),
				0 16px 16px rgba(0,0,0,0.12);
}

.shadow-light {
	box-shadow: 0 1px 1px rgba(0,0,0,0.12), 
				0 2px 2px rgba(0,0,0,0.12), 
				0 4px 4px rgba(0,0,0,0.12);
}

/*---------------------------------------------------------*\ 
	Opacty - Hover....
\*---------------------------------------------------------*/

.opacity-hover {
  opacity: 0.55;
  filter: saturate(0.6); 
  filter: alpha(opacity=55);
}

.opacity-hover:hover {
  opacity: 1.0;
  filter: saturate(1.0); 
  filter: alpha(opacity=100);
}

.opacity-hover-social {
  opacity: 0.8;
  filter: saturate(0.1); 
  filter: alpha(opacity=80);
}

.opacity-hover-social:hover {
  opacity: 1.0;
  filter: saturate(1.0); 
  filter: alpha(opacity=100);
}

/*---------------------------------------------------------*\ 
	Eingabefelder
\*---------------------------------------------------------*/

input[type="text"]
{	
	padding-left: 6px;
    font-size: 0.9rem;
	font-family: verdana, arial, sans-serif; 
}

textarea
{
	padding-left: 6px;
    font-size: 0.9rem;
	font-family: verdana, arial, sans-serif; 
	resize: none;
}