@charset "UTF-8";
/* Template (Standard) CSS */

@font-face {
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400;
  src:local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3SZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
  font-display: swap;}
@font-face {
  font-family:'Open Sans';
  font-style:italic;
  font-weight:400;
  src:local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBiwlidHJgAgmTjOEEzwu1L8.ttf) format('truetype');
  font-display: swap;}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSpS3E-kSBmtLoNJPDtbj2Pk.ttf) format('truetype');
  font-display: swap;}

*{
	margin:0;
	padding:0;
	border:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	outline: none !important;}

html, body{
	font-family:'Open Sans', sans-serif;
	text-align:left;
	font-size: 16px;
	color:#666;
	height:100%;
	background:url('../images/pattern-1.png');
	overflow:auto;}

body{
	background:url('../images/pattern-2.png') center 0 no-repeat;
	background-attachment:fixed;
	background-size:100%;}


/* S C H R I F T E N */
h1, .contentheading, .componentheading{
	font-size:50px;
	text-align:left;
	font-weight:600;
	margin-bottom:30px;
	color:rgb(90, 90, 90);}

h1,h2,h3,h4,h5,h6{	line-height:1.42857143;}

h2{
	font-weight:400;
	font-size:30px;
	color:rgb(90, 90, 90);
	text-transform:uppercase;
	font-style:italic;
	line-height:normal;
	margin:0;}

p{	margin-bottom:20px;
	font-size:16px;
	line-height:170%;
	color:rgb(90, 90, 90);}

br{	line-height:100%;}


/* Listen */
ul, li{margin:0;list-style-type:none;}

/* LINKS */
a:link, a:active, a:visited{text-decoration:none;text-transform:uppercase;color:#666}
a:hover{text-decoration:none;color:#666;}

.impressum a:link, .impressum a:active, .impressum a:visited{text-decoration:underline;text-transform:none;color:#666;}
.impressum a:hover{text-decoration:none;color:#666;}


/* SONSTIGES */
.clear{clear:both;}
#cv, #live-art{  /* Custom styling */
	  border-radius: 4px;
	  /* Custom transition - slide from top*/
	  transform: translateY(-50px);
	  transition: all .33s;}

.fancybox-slide--current #cv, .fancybox-slide--current #live-art {
  transform: translateY(0);}

.cv, .live-art{
	display:none;
	width:90%;
	height:90%;
	padding:50px 20px !important;
	overflow:auto;
	margin: 0 !important;}

.cv img{float:right;margin: 20px 20% 20px 20px !important;}

/* VIDEO ShowCASE */


/* P O S I T I O N E N   U N D   B O X E N */
#container{width:1128px;margin:0 auto 30px;}

/* Header */
header{
	width:960px;
	height:auto;
	margin:0 auto;
	padding:50px 0 20px 0;}

header h1{
	text-align:center;
	font-size:90px;
	color:rgb(51, 51, 51);
	margin:0;}
header h2{text-align:center;font-size:40px;color:rgb(51, 51, 51);}

.linie_oben{
	background:url('../images/linie.png');
	width:100%;
	height:9px;
	margin-bottom:5px;}
.linie_unten{
	background-image:url('../images/linie.png');
	background-position:0 -9px;
	width:100%;
	height:9px;
	margin-top:15px;}
.linie_pfeil{
	background-image:url('../images/linie.png');
	background-position:50% -18px;
	background-repeat:no-repeat;
	height:9px;
	width:100%;}

/* Hauptgerüst */
main{
	width:100%;
	height:auto;}


/*-------------------------*/
/***** GRID Kategorien *****/
/*-------------------------*/

/* GRID */
.grid{
	width: 980px;
	height: auto;
	margin: 0 auto;
	position: relative;
	-webkit-tranform:translate3d(10px, 0%, 0);
	transform:translate3d(10px, 0%, 0);}

.grid .cat{
	width: 306px;
	height: 306px;
	background: #fff;
	float: left;
	margin: 0 20px 20px 0;}


/***** Caption Grid *****/
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.0em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

figure.effect-caption img {
	opacity: 0.9;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-caption:hover img {
	opacity: 0.5;
}

figure.effect-caption figcaption::before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	background: rgb(90, 90, 90);
	background: *#fff;
	content: '';
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
}

figure.effect-caption h2 {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	width: 100%;
	text-align: center;
	font-weight: 100;
	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);
}

figure.effect-caption h2.span {
	font-weight: 700;
}

figure.effect-caption h2 i {
	font-style: normal;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);
}

figure.effect-caption figcaption::before,
figure.effect-caption h2 {
	-webkit-transition: -webkit-transform 0.35s, -webkit-color 0.35s;
	transition: transform 0.35s, color 0.35s;
}

figure.effect-caption:hover figcaption::before,
figure.effect-caption:hover h2,
figure.effect-caption:hover h2 i {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	color: rgb(90, 90, 90);
}


footer{
	position: relative;
	background:rgb(226, 226, 226);
	height:auto;
	width:100%;
	min-width:1128px;
	text-align:center;
	font-weight:400;
	font-size:13px;
	color:rgb(90, 90, 90);
	text-decoration:none;
	text-transform:uppercase;
	font-style:italic;
	line-height:40px;
	margin:0;}

.fb-like > span{vertical-align: middle !important; margin-right: 20px;}


footer li{display:inline-block;}
footer .divider{margin-left:7px;}
.impressum{width:960px;margin:0 auto;}


/* BUTTONS */
.button_div{float:right;height:auto;padding:10px;margin-right:73px;}
.button{
	background:rgb(253,253,253);
	padding:10px 15px;
	cursor:pointer;
	display:inline-block;
	margin:0 0 10px 10px;}

.button:hover{
	background:rgb(253,253,253);
	box-shadow:5px 5px 0 rgb(90, 90, 90);}

.button_gallery{
	color:#f1f1f1 !important;
	font-size:23px;
	font-weight:400;
	text-transform:uppercase;
	font-style:italic;
	line-height:normal;
	margin:5px 0 0 0;
	background:rgb(90, 90, 90);
	padding:0 3px 0 0;
	cursor:pointer;
	display:inline-block;}


a.button_gallery{text-decoration: none !important;}

.button_gallery:hover{
	box-shadow:5px 5px 0 #efefef;}


/* Fancybox Caption */
h3{
	font-weight:400;
	font-size:23px;
	color:#f1f1f1;
	text-transform:uppercase;
	font-style:italic;
	line-height:normal;
	background:rgb(90, 90, 90);
	margin:5px 0 0 0;
	display:inline-block;}


.name, .groesse, .preis{
	font-weight:400;
	font-size:20px;
	color:#f1f1f1;
	text-transform:uppercase;
	font-style:italic;
	line-height:normal;
	margin:0 0 0 10px;}

.left{float:left;width:50%;text-align:left;}
/* .middle{float:left;width:30%;text-align:center;} */
.right{float:right;width:50%;text-align:right;}






/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
/* ---------------------------------------- Media Queries ---------------------------------------- */
/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/

/* -------------------- SMARTPHONE ----------------- */
@media only screen and (max-width :768px) {

*{
	margin:0;
	padding:0;
	border:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	outline: none !important;}

html, body{
	font-family:'Open Sans', sans-serif;
	text-align:left;
	font-size: 16px;
	color:#666;
	height:100%;
	background:url('../images/pattern-1.png');
	overflow:auto;
	-webkit-overflow-scrolling: touch;}

body{
	background:url('../images/pattern-2.png') center 0 no-repeat;
	background-attachment:fixed;
	background-size:100%;}


/* S C H R I F T E N */
h1, .contentheading, .componentheading{
		font-size:7vw;
	text-align:left;
	font-weight:600;
	margin-bottom:30px;
	color:rgb(90, 90, 90);}

h1,h2,h3,h4,h5,h6{	line-height:1.42857143;}

h2{
	font-weight:400;
	font-size:30px;
	color:rgb(90, 90, 90);
	text-transform:uppercase;
	font-style:italic;
	line-height:normal;
	margin:0;}

p{	margin-bottom:20px;
	font-size:16px;
	line-height:170%;
	color:rgb(90, 90, 90);}

br{	line-height:100%;}


/* Listen */
ul, li{margin:0;list-style-type:none;}

/* LINKS */
a:link, a:active, a:visited{text-decoration:none;text-transform:uppercase;color:#666;}
a:hover{text-decoration:none;color:#666;}

/* SONSTIGES */
.clear{clear:both;}
.cv, .live-art{display:none;width:auto;height:auto;padding:40px 20px;overflow:auto;}
.cv img{float:right;margin:0 0 20px 0 !important;width:100%;}


/* VIDEO ShowCASE */


/* P O S I T I O N E N   U N D   B O X E N */
#container{
		width:100%;
		margin:10px auto 0;}

/* Header */
header{
		width:100%;
	height:auto;
	margin:0 auto;
		padding:0 0 20px 0;}

header h1{
	text-align:center;
		font-size:17vw;
	color:rgb(51, 51, 51);
	margin:0;}
header h2{
	text-align:center;
	font-size:7vw;
	color:rgb(51, 51, 51);}

.linie_oben{
	background:url('../images/linie.png');
	width:100%;
	height:9px;
	margin-bottom:5px;}
.linie_unten{
	background-image:url('../images/linie.png');
	background-position:0 -9px;
	width:100%;
	height:9px;
	margin-top:15px;}
.linie_pfeil{
	background-image:url('../images/linie.png');
	background-position:50% -18px;
	background-repeat:no-repeat;
	height:9px;
	width:100%;}

/* Hauptgerüst */
main{
	width:100%;
	height:auto;}

.iframe_yt{
	width: 100%;
	height: auto;}


/*-------------------------*/
/***** GRID Kategorien *****/
/*-------------------------*/
.grid{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding-left:10px;
	position: relative;
	-webkit-tranform:translate3d(0px, 0%, 0);
	transform:translate3d(0px, 0%, 0);}

.grid .cat{
	width: calc(50% - 10px);
	height: auto;
	background: #fff;
	float: left;
	margin: 0 10px 10px 0px;}

.grid h2{font-size: 1.2em;}


/***** Caption Grid *****/
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: auto;
	max-width: auto;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.0em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

figure.effect-caption img {
	opacity: 0.9;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-caption:hover img {
	opacity: 0.5;
}

figure.effect-caption figcaption::before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	background: rgb(90, 90, 90);
	content: '';
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-caption h2 {
	position: absolute;
	bottom: 10px;
	left: 0;
	color: #fff;
	width: 100%;
	text-align: center;
	font-weight: 100;
	-webkit-transform: translate3d(0,-20px,0);
	transform: translate3d(0,-20px,0);
}

figure.effect-caption h2.span {
	font-weight: 700;
}

figure.effect-caption h2 i {
	font-style: normal;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,-20px,0);
	transform: translate3d(0,-20px,0);
}

figure.effect-caption figcaption::before,
figure.effect-caption h2 {
	-webkit-transition: -webkit-transform 0.35s, -webkit-color 0.35s;
	transition: transform 0.35s, color 0.35s;
}

figure.effect-caption:hover figcaption::before,
figure.effect-caption:hover h2,
figure.effect-caption:hover h2 i {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	color: rgb(90, 90, 90);
}


footer{
	position: relative;
	background:rgb(226, 226, 226);
	height:auto;
	width:100%;
		min-width:100%;
	text-align:center;
	line-height:normal;}

footer li{display:inline-block;}
footer .divider{margin-left:7px;}
.impressum{
		width:100%;
	margin:0 auto;
		padding: 15px;
		overflow: auto;}


/* BUTTONS */
.button_div{float:right;height:auto;padding:10px;margin-right:10px;}
.button{
	background:rgb(253,253,253);
	padding:10px 15px;
	cursor:pointer;
	display:inline-block;
	margin:0 0 10px 10px;}

.button:hover{
	background:rgb(253,253,253);
	box-shadow:5px 5px 0 rgb(90, 90, 90);}

.button_gallery{
	color:#f1f1f1 !important;
	font-size:23px;
	font-weight:400;
	text-transform:uppercase;
	font-style:italic;
	line-height:normal;
	margin:5px 0 0 0;
	background:rgb(90, 90, 90);
	padding:0 3px 0 0;
	cursor:pointer;
	display:inline-block;}

.button_gallery:hover{
	box-shadow:5px 5px 0 #efefef;}

a.button_gallery{text-decoration: none !important;}


/* Fancybox Caption */
h3{
	font-weight:400;
	font-size:23px;
	color:#f1f1f1;
	text-transform:uppercase;
	font-style:italic;
	line-height:normal;
	background:rgb(90, 90, 90);
	margin:5px 0 0 0;
	display:inline-block;}


.name, .groesse, .preis{
	font-weight:400;
	font-size:20px;
	color:rgb(90, 90, 90);
	text-transform:uppercase;
	font-style:italic;
	line-height:normal;
	margin:0 0 0 10px;}

.left{float:left;width:100%;text-align:left;}
.left span{color: #f1f1f1;}
/* .middle{float:right;width:100%;text-align:right;display:none;} */
.right{float:left;width:100%;text-align:left;}


}

/* -------------------- TABLETS -------------------- */
@media only screen and (min-width :769px) and (max-width :992px) {

/* VIDEO ShowCASE */

}


/* -------------------- LAPTOP -------------------- */
@media only screen and (min-width :993px) and (max-width :1200px){

/* VIDEO ShowCASE */

}

/* -------------------- DESKTOP -------------------- */
@media only screen and (min-width :1201px){}