/********** C S S   B E R E I C H   W O R K S H O P S **************************************/

/* 
Sacramento 
font-family: 'sacramentoregular';
   
Raleway Light 300 
font-family: 'ralewaylight';
   
Raleway Regular 400 
font-family: 'ralewayregular';
 
Raleway Medium 500
font-family: 'ralewaymedium';
  
Raleway Semibold 600 
font-family: 'ralewaysemibold';
   
Raleway Regular 400 Italic
font-family: 'ralewayitalic';

Raleway Medium 500 Italic
font-family: 'ralewaymedium_italic';

Snippet 
font-family: 'snippetregular';

OpenSans Light 300 
font-family: 'open_sanslight';

OpenSans Regular 400 
font-family: 'open_sansregular';

OpenSans Semibold 600 
font-family: 'open_sanssemibold';
   
OpenSans Bold 700 
font-family: 'open_sansbold';

*/

.WORKSHOP_Headline {
	display: flex;
	justify-content: center;
	width:100%;
	margin-top: 90px;
	height: 50px;
}

[id^="AUSSEN_RAHMEN"]  {
	border:0px dotted blue;
	width:65%;
	max-width:850px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 50px;
	margin-top: 60px;
}

[id^="WORKSHOP_BLOCK"] {
	border: 0px solid red;
	width:100%;
	margin-top: 40px;
	/*width:70vw;*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
[id^="WORKSHOP_BLOCK"]:hover {
	opacity:1 !important;
	 transition: opacity .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out;
    -webkit-transition: opacity .35s ease-in-out;
}
.WB_DATUM {
	border: 0px solid blue;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	width:100%;
}
[id^="WB_DATUM_Text"] {
	border: 0px solid green;
	display: flex;
	width:100%;
	font-family: 'open_sanssemibold';
	color:#8A5D3B;
	font-size:1.8em;
	padding:0px 0 5px 0;
}



.WB_OBEN {
	border: 0px solid green;
	z-index:50;
	display: flex;
	flex-direction: column;
	width:100%;
	height:600px;
	/*background: url(../picWorkshop/IMG_0084.JPG) no-repeat;*/
	background-position: center; 
	background-size: cover !important;
	/*-webkit-filter: sepia(1);
    filter: sepia(1);*/
    position:relative;
}
.WB_OBEN_Overlayer {
	z-index:30;
	position: absolute;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0);
}

[id^="WB_OBEN_A"] {
	border:0px solid red;
	width:100%;
	height:100%;
	z-index:61;
}
[id^="EINGABE_BILD"] {
	border:0px solid magenta;
	position:absolute; 
	right: -34px;
	padding-left:60%;
	display: flex;
	flex-direction: column;
	opacity:0;
	transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}
[id^="EINGABE_BILD"]:hover {
	opacity:1;
	 transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}
.EINGABEBUTTON {
	outline:0px solid magenta;
	width:30px;
	height:30px;
	margin: 0 0 4px 4px;
	cursor:pointer;
	font-family: 'open_sanssemibold';
	color:#444;
	font-size:.9em;
	line-height: 2.1em;
	text-align:center;
}
.EINGABEBUTTON:hover {
	color:#000;
	font-weight:600;
}

[id^="EINGABE_Upload"] {
	background: url(../picEINGABE_WORKSHOPS/ButtonUpload.svg) no-repeat;
	background-size: 100%;
	background-position: 0 0;
}
[id^="EINGABE_Upload"]:hover {
	background-position: 0 -30px;
}

.EINGABE_BildAuswahl {
	background: url(../picEINGABE_WORKSHOPS/ButtonAuswahl.svg) no-repeat;
	background-size: 100%;
	background-position: 0 0;
}
[id^="EINGABE_BildAuswahl"]:hover {
	background-position: 0 -30px;
}



[id^="WB_OBEN_A_LOGO"] {
	border:0px solid magenta;
	width: 20%;
	padding-bottom: 25%;
    height: 0;
	/*background: rgb(107,59,88) url(../pic/LogoInspireYogaWalsrodeWeissWorkshops.svg) 100% center no-repeat;*/
	background-size: contain;
	position:absolute;
}

[id^="EINGABE_FARBE_LOGO"], [id^="EINGABE_FARBE_HINTERGRUND"] {
	position:absolute;
	margin-top:0;
	opacity:0;
	transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}
/*[id^="WORKSHOP_BLOCK"]:hover > .WB_OBEN > .WB_OBEN_A > [id^="EINGABE_FARBE_LOGO"] {*/
[id^="WB_OBEN_A_LOGO"]:hover ~ [id^="EINGABE_FARBE_LOGO"], [id^="EINGABE_FARBE_LOGO"]:hover {
	opacity:1;
	 transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}
[id^="WB_BLOCKUNTEN"]:hover > [id^="WB_UNTENPOS"] > [id^="EINGABE_FARBE_HINTERGRUND"] {
	opacity:1;
	 transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}







.WB_OBEN_B {
	border: 0px solid blue;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width:100%;
	height:100%;
	z-index:62;
}
[id^="WB_OBEN_B_HEADINE"] {
	border: 0px solid blue;
	width:92%; /* important for fittext */
	text-align:center;
	font-family: 'ralewaysemibold';
	color:#FFF;
	font-size:55px;
	line-height: 1.2em;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-shadow: 0px 0px 7px rgba(0, 0, 0, 1);
	
	padding-bottom: 2%;
	min-height: 10%;
	min-width:100px;
}

[id^="WB_OBEN_B_SUBHEADINE"] {
	border: 0px solid blue;
	width:92%; /* important for fittext */
	text-align:center;
	font-family: 'ralewaysemibold';
	color:#FFF;
	font-size:1.3em;
	line-height: 1.1em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-shadow: 0px 0px 7px rgba(0, 0, 0, 1);
	padding-top: 2%;
	height: 10%;
}
[id^="WB_OBEN__C"] {
	z-index:63;
	border: 0px solid blue;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex-direction: column;
	width:100%;
	height:100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#613768+27,683867+100&0+27,1+100 */
	background: -moz-linear-gradient(top,  rgba(107,59,88,0) 27%, rgba(107,59,88,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(107,59,88,0) 27%,rgba(107,59,88,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(107,59,88,0) 27%,rgba(107,59,88,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00613768', endColorstr='#683867',GradientType=0 ); /* IE6-9 */
	margin-bottom:-1px; /*sonst Kante zwischen Block oben und unten*/
}
[id^="WB_OBEN_C_MIT"] {
	border: 0px solid green;
	width:100%;
	font-family: 'ralewaysemibold';
	font-size:.9em;
	color:#FFF;
	text-shadow: 0px 0px 7px rgba(0, 0, 0, 1);
	text-align:center;
	padding-bottom:10px;
}
[id^="WB_OBEN_C_NAME"] {
	border: 0px solid red;
	display: flex;
	justify-content: center;
	width:100%;
	margin-bottom:-22%;
	font-family: 'sacramentoregular';
	color:#FFF;
	font-size:6em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 56%;
}

[id^="WB_BLOCKUNTEN"] {
	border: 0px solid green;
	z-index:30;
	position:relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width:100%;
	background-color:rgba(107,59,88,1);
	min-height:100px;
	color:#FFF;
}
.WB_BLOCKUNTENRahmen {
	border: 0px solid blue;	
	overflow: hidden;
	width:100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
[id^="WB_UNTENPOS"] {
	border: 0px solid orange;
	position:absolute;
	width:100%;
	height:auto;
	left:0;
	top:0;
}

[id^="WB_UNTEN_TEXTHeadline"] {
	border: 0px solid red;
	font-family: 'open_sanssemibold';
	color:#E5B8A3;
	font-size:1.1em;
	line-height: 1.2em;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin:40px 50px 5px 50px;
	text-align:center;
}
[id^="WB_UNTEN_TEXTSubHeadline"] {
	border: 0px solid red;
	font-family: 'open_sanssemibold';
	color:#FFF;
	font-size:1.0em;
	line-height: 1.2em;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin:5px 50px;
	text-align:center;
}
[id^="WB_UNTEN_TEXTText"] {
	border: 0px solid red;
	font-family: 'ralewaymedium';
	color:#FFF;
	font-size:0.9em;
	line-height: 1.5em;
	letter-spacing: 0.03em;
	margin:10px 50px;
	text-align:center;
}
[id^="WB_UNTEN_TEXTUnterzeileA"] {
	border: 0px solid red;
	font-family: 'open_sanssemibold';
	color:#E5B8A3;
	font-size:1.1em;
	line-height: 1.2em;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin:5px 50px;
	text-align:center;
}
[id^="WB_UNTEN_TEXTUnterzeileB"] {
	border: 0px solid red;
	font-family: 'open_sanssemibold';
	color:#FFF;
	font-size:1.1em;
	line-height: 1.2em;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin:5px 50px;
	text-align:center;
}
[id^="WB_UNTEN_TEXTKontakt"] {
	border: 0px solid red;
	font-family: 'open_sanssemibold';
	color:#FFF;
	font-size:0.9em;
	line-height: 1.2em;
	margin:15px 40px 40px 40px;
	text-align:center;
}


#WORKSHOP_Block {
	display: flex;
	background-color:#FFF;
	height: 1000px;
	width:100%;
}