/* ############################################################
	FARBKLIMA
###############################################################

	Beige:			#e7e1d0, 231 225 208
	Sand:			#c9c4b5, 201 196 181
	Dunkelschwarz:	#1b1b1b, 27 27 27
	Grau:			#a4a4a4, 164 164 164
	
	Mint:			#8ec89a, 142 200 154
	Orange:			#f7b385, 247 179 133
	Babyblau:		#85d0f5, 133 208 245
	Zitrone:		#f7f8ae, 247 248 174
	
###############################################################
	180 - AKKORDEON
############################################################ */

/* Accordion */
.mdl180-accordion {
	overflow: hidden;
}
.mdl180-abstand {
	margin-top: 14px;
}

/* Titel */
.mdl180-accordion-section h2.mdl180-h2-title {
	margin-bottom: 0 !important;
	font-size: 1.125rem !important; /* 18px */
	line-height: 1.5rem !important; /* 24px */
}
	a.mdl180-accordion-title {
		position: relative;
		overflow: hidden;
		display: block;
		width: 100%;
		margin-bottom: 4px;
		padding: 9px 40px 9px 12px;
		color: #e7e1d0 !important;
		text-decoration: none;
		background-color: #a19d92;
		background-image: url("/Portal/Module/180/Images/titel-button.svg");
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 28px 16px;
		-o-transition: background .2s, margin .2s, ease-in-out;
		-ms-transition: background .2s, margin .2s, ease-in-out;
		-moz-transition: background .2s, margin .2s, ease-in-out;
		-webkit-transition: background .2s, margin .2s, ease-in-out;
		transition: background .2s, margin .2s, ease-in-out;
	}
		.no-svg a.mdl180-accordion-title {
			background-image: url("/Portal/Module/180/Images/titel-button-28x16-retina.png");
		}
	a.mdl180-accordion-title:hover {
		background-color: #959288;
	}
	a.mdl180-accordion-title.active {
		background-image: url("/Portal/Module/180/Images/titel-button-close.svg");
		margin-bottom: 0;
	}
		.no-svg a.mdl180-accordion-title.active {
			background-image: url("/Portal/Module/180/Images/titel-button-close-28x16-retina.png");
		}
		a.mdl180-accordion-title span {
			font-family: "JustusPro-Light";
		}
		
	.mdl180-accordion-nocontent {
		background-image: none !important;
		cursor: default;
		margin-bottom: 4px;				
	}
		.mdl180-accordion-nocontent.active {
			margin-bottom: 4px !important;				
		}
		.mdl180-accordion-nocontent:hover {
			background-color: #a19d92 !important;
		}

/* Inhalt */
.mdl180-accordion-content {
	width: 100%;
	background-color: #c9c4b5;
	display: none;
}

/* Listen */
.mdl180-accordion-content ul li {
	margin-left: 8px !important;
	padding-left: 17px !important;
}

/* ############################################################
	ALLGEMEINES
############################################################ */

/* Allgemeines */
#middle__panel {
	font-size: 1.125rem; /* 18px */
	line-height: 1.5rem; /* 24px */
}

/* Absatz Einleitung */
.mdl180-einleitung {
	margin-bottom: 8px;
}

/* Titel */
#middle__panel h3 {
	font-size: 1.125rem; /* 18px */
}
h3.mdl180-titel-werke {
	margin-bottom: 14px !important;
}

/* ############################################################
	FOTOGALERIE
############################################################ */

/* Raster */
.row-mdl180-image {
	margin-right: -6px;
	margin-left: -6px;
}

.mdl180-col-image {
	float: left;
	position: relative;
	width: 25%;
	padding-left: 6px;
	padding-right: 6px;
}	
	.mdl180-imagebox, .mdl180-innerbox {
		width: 100%;
		height: 0;
		padding-bottom: 100%;
	}
	.mdl180-imagebox {
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
		.mdl180-innerbox, .mdl180-innerbox-last {
			position: relative;
			background-color: rgba(49,49,49, 0.25);
			-o-transition: background-color 0.2s ease-in-out;
			-ms-transition: background-color 0.2s ease-in-out;
			-moz-transition: background-color 0.2s ease-in-out;
			-webkit-transition: background-color 0.2s ease-in-out;
			transition: background-color 0.2s ease-in-out;
		}
		.mdl180-innerbox-last {
			background-color: rgba(49,49,49, 0.85);
		}
		.mdl180-innerbox:hover {
			background-color: rgba(49,49,49, 0);
		}
			.mdl180-textbox {
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				margin-top: -15px;
				text-align: center;
				font-size: 1.875rem; /* 30px */
				line-height: 1.875rem; /* 30px */
				color: #e7e1d0;
				overflow: hidden;
			}
@media (min-width: 480px) {
	.mdl180-col-image {
		width: 12.5%;
	}
}
@media (min-width: 480px) and (max-width: 759px) {
	.mdl180-textbox {
		margin-top: -12px;
		font-size: 1.3125rem; /* 21px */
		line-height: 1.5rem; /* 24px */
	}
}

/* ############################################################
	FANCYBOX
############################################################ */

/* FANCYBOX */
.fancybox-opened .fancybox-skin {
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
	        box-shadow: none;
}

/* Titelbalken */
.fb-line {
	margin: 0;
	padding: 0;
}
.fb-title, .fb-number {
	float: left;
	width: 60%;
	padding: 3px 0;
	font-family: "JustusPro-Light";
	font-size: 1.3125rem; /* 21px */
	line-height: 1.5rem; /* 24px */
	color: #fff;
}
.fb-title {
	padding-left: 15px;
}
.fb-number {
	float: right;
	text-align: right;
	width: 40%;
	padding-right: 15px;
}
@media (max-width: 479px) {
	.fb-title {
		display: none;
	}
}
@media (min-width: 760px) {
	.fb-title, .fb-number {
		width: auto;
		padding-top: 19px;
		padding-bottom: 8px;
	}
}
@media (min-width: 1220px) {
	.fb-title, .fb-number {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Navigation */
.fancybox-close {
		display: none;
	}
@media (max-width: 759px){
	.fancybox-nav {
		display: none;
	}
}
@media (min-width: 760px) {
	.fancybox-nav {
		width: 35px;
		height: 100%;
	}
	.fancybox-nav span {
		position: absolute;
		top: 50%;
		width: 35px;
		height: 84px;
		margin-top: -42px;
		visibility: visible;
	}
	.fancybox-prev {
		left: 20px;
	}
	.fancybox-next {
		left: auto;
		right: 20px;
	}
	.fancybox-prev span, .fancybox-next span {
		width: 35px;
		height: 84px;
		background-image: url("/Portal/kunstschule/Images/Fancybox/lightbox-prev.svg") !important;
		background-size: 35px 84px !important;
		-o-transition: background .2s ease-in-out;
		-ms-transition: background .2s ease-in-out;
		-moz-transition: background .2s ease-in-out;
		-webkit-transition: background .2s ease-in-out;
		transition: background .2s ease-in-out;
	}
	.fancybox-prev span:hover {
		background-image: url("/Portal/kunstschule/Images/Fancybox/lightbox-prev-active.svg") !important;
	}
		.no-svg .fancybox-prev span {
			background-image: url("/Portal/kunstschule/Images/Fancybox/lightbox-prev-35x84-retina.png") !important;
		}
		.no-svg .fancybox-prev span:hover {
			background-image: url("/Portal/kunstschule/Images/Fancybox/lightbox-prev-active-35x84-retina.png") !important;
		}
	.fancybox-next span {
		background-image: url("/Portal/kunstschule/Images/Fancybox/lightbox-next.svg") !important;
	}
	.fancybox-next span:hover {
		background-image: url("/Portal/kunstschule/Images/Fancybox/lightbox-next-active.svg") !important;
	}
		.no-svg .fancybox-next span {
			background-image: url("/Portal/kunstschule/Images/Fancybox/lightbox-next-35x84-retina.png") !important;
		}
		.no-svg .fancybox-next span:hover {
			background-image: url("/Portal/kunstschule/Images/Fancybox/lightbox-next-active-35x84-retina.png") !important;
		}
}