/* CSS-Dokument */


@import url(/css/datepicker.css);
@import url(/css/chocolat.css);
@import url(/css/font-awesome.min.css);

@font-face {
  font-family: 'Radley';
  src: url(/fonts/Radley-Regular.ttf);
}

* { margin: 0; padding: 0; }

body { background: url('/img/site/bizarrdies-back.jpg') fixed center center no-repeat; background-size: cover; color: #d9dada; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; }

h1 { font-size: 1.2rem; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; }
h1 img { max-width: 50%; }
a:hover span { color: #a0a0a0; }
h2 { color: #a0a0a0; font-size: 1.5rem; margin-bottom: 15px; }
h3 { font-size: 1.2rem; margin-bottom: 15px; }
h4 { color: #a0a0a0; font-size: 1.1rem; margin-bottom: 15px;  }
p { font-size: 0.95rem; margin-bottom: 10px; text-align: justify; }
ul { margin: 1% 1% 20px; }
li { font-size: 0.95rem; list-style: inside none; }
a { color: #a0a0a0; text-decoration: none; outline: none; overflow: auto; } 
a:hover, a:focus, a:active { color: #d9dada; }
hr { border-width: 0; border-bottom: 1px solid; 
	-moz-border-image: -moz-linear-gradient(left, rgba(217,218,218,0.5) 0%, #a0a0a0 50%, rgba(217,218,218,0.5) 100%);
	-webkit-border-image: -webkit-linear-gradient(left, rgba(217,218,218,0.5) 0%, #a0a0a0 50%, rgba(217,218,218,0.5) 100%);
	border-image: linear-gradient(to right, rgba(217,218,218,0.5) 0%, #a0a0a0 50%,rgba(217,218,218,0.5) 100%);
	
	border-image-slice: 1; margin: 1% 0; }

.page { margin: 0 auto; overflow: auto; width: 1200px; }
.black { background: rgba(11,11,11,0.8); }
.blackgradient { background: rgba(11,11,11,0.8); }
.shadow { -webkit-box-shadow: 0 0 7px 1px rgba(0,0,0,0.7); box-shadow: 0 0 7px 1px rgba(0,0,0,0.7); }

.bordergradient { border-top: 1px solid #d9dada;  border-bottom: 1px solid #d9dada;	
	 }

#header { color: #a0a0a0; margin: 30px 0 20px; padding: 20px 0 30px; text-align: center; width:100%; }

#calendar { overflow: auto; padding: 1% 0; text-align: center!important; }
.note { margin: 25px 0; overflow: auto; text-align: center; }
.note a { color: #a0a0a0; }
.note a:hover { color: #a0a0a0; }
.gldp-flatwhite { display: inline-block; position: relative!important; }

#overview { font-size: 0; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; min-height: 200px; line-height: 1; }

.team { background: rgba(11,11,11,0.8);  margin: 10px 1% ; overflow: visible; padding: 10px 1%; width: 12.5%; height: auto; overflow: auto;
	transition: ease-out 0.5s; -webkit-transition: ease-out 0.5s; -moz-transition: ease-out 0.5s; -o-transition: ease-out 0.5s; 
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(top right, #a0a0a0 0%, rgba(0,0,0,0) 60%);
	-webkit-border-image: -webkit-linear-gradient(top right, #a0a0a0 0%, rgba(0,0,0,0) 60%);
	border-image: linear-gradient(to bottom left, #a0a0a0 0%, rgba(0,0,0,0) 60%);
	border-image-slice: 1; vertical-align: top;}

.team:hover { color: #a0a0a0; transition: ease-out 0.5s; -webkit-transition: ease-out 0.5s; -moz-transition: ease-out 0.5s; -o-transition: ease-out 0.5s;
	-moz-border-image: -moz-linear-gradient(top right, #a0a0a0 0%, rgba(217,218,218,0) 60%);
	-webkit-border-image: -webkit-linear-gradient(top right, #a0a0a0 0%, rgba(217,218,218,0) 60%);
	border-image: linear-gradient(to bottom left, #a0a0a0 0%, rgba(217,218,218,0) 60%);
	border-image-slice: 1;} 
.team p { font-size: 1rem; text-align: center; margin: 0; }
.team img { width: 99%; margin-bottom: 10px; border: 1px solid #a0a0a0;
	-moz-border-image: -moz-linear-gradient(left, rgba(217,218,218,0.5) 0%, #a0a0a0 50%, rgba(217,218,218,0.5) 100%);
	-webkit-border-image: -webkit-linear-gradient(left, rgba(217,218,218,0.5) 0%, #a0a0a0 50%, rgba(217,218,218,0.5) 100%);
	border-image: linear-gradient(to right, rgba(217,218,218,0.5) 0%, #a0a0a0 50%,rgba(217,218,218,0.5) 100%);
	
	border-image-slice: 1; transition: ease-out 0.5s; -webkit-transition: ease-out 0.5s; -moz-transition: ease-out 0.5s; -o-transition: ease-out 0.5s; }
.team:hover img { border: 1px solid #a0a0a0; -moz-border-image: -moz-linear-gradient(left, rgba(217,218,218,0.5) 0%, #a0a0a0 50%, rgba(217,218,218,0.5) 100%);
	-webkit-border-image: -webkit-linear-gradient(left, rgba(217,218,218,0.5) 0%, #a0a0a0 50%, rgba(217,218,218,0.5) 100%);
	border-image: linear-gradient(to right, rgba(217,218,218,0.5) 0%, #a0a0a0 50%,rgba(217,218,218,0.5) 100%);
	
	border-image-slice: 1; transition: ease-out 0.5s; -webkit-transition: ease-out 0.5s; -moz-transition: ease-out 0.5s; -o-transition: ease-out 0.5s; }

.hide, .input_1, .input_2 { width: 0; height: 0; opacity: 0; transition: ease-out 0.8s; -webkit-transition: ease-out 0.8s; -moz-transition: ease-out 0.8s; -o-transition: ease-out 0.8s; padding: 0; margin: 0; border: 0; overflow: hidden;  }
.hide img { opacity: 0;  width: 0; height: 0; margin: 0; border: none; }
.filter { margin: 10px auto; background: rgba(11,11,11,0.8); color: #a0a0a0; border: 1px solid #a0a0a0; display: block; clear: both; overflow: auto; padding: 10px 20px; font-size: 1rem; font-family: Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer;  }
.filter:hover { border: 1px solid #a0a0a0; color: #a0a0a0; }

.portrait { float: left; width: 300px; margin: 10px; padding: 10px; }
.portrait img { border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(top right, #a0a0a0 0%, rgba(0,0,0,0) 60%);
	-webkit-border-image: -webkit-linear-gradient(to right, #a0a0a0 0%, rgba(0,0,0,0) 60%);
	border-image: linear-gradient(to bottom left, #a0a0a0 0%, rgba(0,0,0,0) 60%);
	border-image-slice: 1; width: 95%; margin: 2% 0 0 5%; }

.galerie { margin: 2% 0 0 5%; }
.galerie img { display: inline-block; width: 29%; margin: 1.3%; }
.galerie img:hover { color: #a0a0a0; transition: ease-out 0.5s; -webkit-transition: ease-out 0.5s; -moz-transition: ease-out 0.5s; -o-transition: ease-out 0.5s;
	-moz-border-image: -moz-linear-gradient(top right, #a0a0a0 0%, rgba(217,218,218,0) 60%);
	-webkit-border-image: -webkit-linear-gradient(top right, #a0a0a0 0%, rgba(217,218,218,0) 60%);
	border-image: linear-gradient(to bottom left, #a0a0a0 0%, rgba(217,218,218,0) 60%);
	border-image-slice: 1; }

.info { float: left; width: 480px; margin: 10px; padding: 10px; }
.info ul { overflow: auto; margin-bottom: 20px; }
.info li { float: left; width: 48%; margin: 0 1%; }

.special { border: 1px solid #a0a0a0; padding: 20px; margin-bottom: 20px; }  
.special:before { color: #0b0b0b; content: "\f12a"; font-family: 'FontAwesome'; font-size: 1rem; position: absolute; margin-left: -30px; margin-top: 3px; border-radius: 50%; background: #a0a0a0; width: 21px; height: 21px; text-align: center; }  
.special p:last-child { margin: 0; }

.sidebar { float: left; width: 300px; margin: 10px; padding: 10px; }
.sidebar li { font-size: 1.2rem; }
.sidebar .fa { color: #a0a0a0; margin-right: 10px;  }
.sidebar .fa-envelope { font-size: 0.95rem; }
.sidebar a { color: #a0a0a0; }
.sidebar p { text-align: left; }
.sidebar .date { font-size: 1.2rem; margin-bottom: 0px; text-align: left; }
.sidebar h3 { margin-top: 30px; }
.sidebar h3:first-child { margin-top: 0; }


.rights { float: left; width: 820px; margin: 10px; padding: 10px;  }
.imprint { float: right; width: 300px; margin: 10px; padding: 10px;  }

.full { clear:both; width: 96%; margin: 1%; padding: 1%; text-align: center; }

.back { font-size: 1.2rem; letter-spacing: 1px; text-transform: uppercase; }

#footer { margin: 30px 0; padding: 20px 0; text-align: center; }
#footer a { display: block; }
#footer img { margin-top: 10px; }

@media screen and (max-width: 1280px) {
	
	.page { width: 960px; }
	.team { width: 15.75%; }
	.hide, .input_1, .input_2 { width: 0; height: 0; opacity: 0;  padding: 0; margin: 0; border: 0; overflow: hidden;
		transition: ease-out 0.2s; -webkit-transition: ease-out 0.2s; -moz-transition: ease-out 0.2s; -o-transition: ease-out 0.2s;}
	.hide img { opacity: 0;  }
	
	.portrait { width: 30%; margin: 1%; padding: 1%; }
	.info { float: right; width: 62%; margin: 1%; padding: 1%; }
	.sidebar { float: right; width: 62%; margin: 1%; padding: 1%; }  
	
	.rights { width: 62%; margin: 1%; padding: 1%;  }
	.imprint { width: 30%; margin: 1%; padding: 1%;  }
	
}

@media screen and (max-width: 1000px) {
	h1 { font-size: 0.9rem; }
	h1 img { max-width: 95%; }
	p { font-size: 100%; }
	li { font-size: 100%; }
	
	.page { width: 96%; }
	.team { width: 20.5%; }
	.hide, .input_1, .input_2 { width: 0; height: 0; opacity: 0;  padding: 0; margin: 0; border: 0; overflow: hidden;  }
	.hide img { opacity: 0;  }
	
	.galerie img { display: inline-block; width: 28.5%; margin: 1.3%; }
	
	
}

@media screen and (max-width: 720px) {
	
	.page { width: 96%; }
	.team { width: 28.75%; padding: 5px 1%; }
	.hide, .input_1, .input_2 { width: 0; height: 0; opacity: 0;  padding: 0; margin: 0; border: 0; overflow: hidden;  }
	.hide img { opacity: 0;  }
	
	.rights { float: left; width: 96%; margin: 1%; padding: 1%;  }
	.imprint { float: left; width: 96%; margin: 1%; padding: 1%;  }
	
}

@media screen and (max-width: 580px) {
	
	.page { width: 96%; }
	.team { width: 43%; padding: 5px 2%; }
	.hide, .input_1, .input_2 { width: 0; height: 0; opacity: 0;  padding: 0; margin: 0; border: 0; overflow: hidden;  }
	.hide img { opacity: 0;  }
	
	
	.portrait { width: 96%; clear:both; padding: 2%; margin: 0; text-align: center; }
	.portrait > img { margin: 0;  }
	.info {  width: 94%; padding: 3%; clear:both; margin: 0; }
	.sidebar { width: 94%; padding: 3%; clear:both; margin: 0; }  
	.galerie { margin: 0; }
	.galerie img { display: inline-block; width: 28%; margin: 1.3%; }
}