/* ==================================================================
Stylesheet fuer die Slider, Karussel und Diashows
Datei: text.css
Media: all

Datum: 17.12.2012
Autor:	grintsch communications (ph/mf)
Internet: www.grintsch.com

Inhalt:
CSS-Anweisungen für Ideal Standard
==================================================================== */
/* ======================================================

	=1. flexslider.css

========================================================= */
/* ======================================================

	=1.1 flexslider.css - Browser Resets

========================================================= */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus { outline: none; }

.slides,
.flex-control-nav,
.flex-direction-nav {
	list-style: none;

	padding: 0;
	margin: 0;
}

/* ======================================================

	=1.2 flexslider.css - necessary styles

========================================================= */
.flexslider .slides > .hero__item,
.flexslider .slides > .hero-navigation__item {
	display: none;
	-webkit-backface-visibility: hidden;
} /* Hide the slides before the JS is loaded. Avoids image jumping */

/* ======================================================

	=1.3 flexslider.css - Clearfixes

========================================================= */
.slides:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;

	line-height: 0;
	height: 0;
}

html[xmlns] .slides { display: block; }

* html .slides { height: 1%; }

/* ======================================================

	=1.4 flexslider.css - No JavaScript Fallback

========================================================= */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* ======================================================

	=1.5 flexslider.css - Use of flexslider classes

========================================================= */
/* ======================================================
	=1.5.1 Direction navigation
========================================================= */
/*ul*/.flex-direction-nav {
	position: absolute;
	top: 1.429em;
	right: 1.429em;
	
	letter-spacing: -0.31em;

	width: 78px;
	height: 33px;
}

	/*ul*/.flex-direction-nav li {
		display: inline-block;
		
		letter-spacing: normal;
		
		margin: 0;
	}

		/*ul*/.flex-direction-nav a {
			display: block;

			text-indent: -9999px;

			width: 34px;
			height: 33px;
			background-image:  url("img/sprite/no-repeat.png");
			background-repeat: no-repeat;
			background-color: #fff;
			opacity: 1;
			background-color: rgba(255, 255, 255, 0.8);
			margin: 0 0 0 5px;
			
			cursor: pointer;
		}
		
		.flex-direction-nav a.flex-next,
		.flex-direction-nav:hover a.flex-next { background-position: -239px -52px; }

		.flex-direction-nav a.flex-prev,
		.flex-direction-nav:hover a.flex-prev { background-position: -189px -52px; }
		
/* ======================================================
	=1.5.2 Control navigation
========================================================= */	
/*ol*/.flex-control-nav {
	position: absolute;
	bottom: 0.714em;
	left: 50%;

	text-align: center;
	letter-spacing: -0.31em;
	line-height: 1em;
}

	/*ol*/.flex-control-nav li {
		display: inline-block;
		zoom: 1;
		*display: inline;
		
		letter-spacing: normal;

		margin: 0 1.429em 0 0;
	}
	
		/*ol*/.flex-control-nav li a {
			display: block;
			
			text-indent: -9999px;

			width: 12px;
			height: 12px;
			background-color: #c0c1c2;
			border-radius: 10px;
			
			cursor: pointer;
		}
		
		/*ol*/.flex-control-nav li a.flex-active { background-color: #efefef; }
			
/* ======================================================

	=2. Hero-Element

========================================================= */
.hero {
	position: relative;
	
	width: 100%;
	box-shadow: 0 0 5px #dbdbdb;
}

.slider--polaroid { border-bottom: 3px solid #009de4; }

/*h2*/.hero-subheader {
	font-size: 1.429em;
    line-height: 1.429em;
	text-transform: uppercase;
	
	margin-bottom: 0.714em;
}

/* ======================================================

	=2.1 Hero-Element: ein oder mehrere Bilder

========================================================= */
.hero__content {}

	.hero__wrap { padding-left: 300px; }
	
		.hero__list {
			list-style: none;
			
			margin: 0;
		}
	
			.hero__item {
				position: relative;
				
				margin: 0;
			}
			
				.hero__href { text-decoration: none; }
		
					.hero__img {
						display: block;
	
						width: 100%;
					}
	
					.hero__frame-wrap {
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
	
						width: 300px;
						height: 100%;
					}
	
						.hero__frame {
							position: absolute;
							left: 0;
	
							width: 260px;
							margin: 20px;
						}

						.hero__frame--title { top: 0; }

						.hero__frame--text { bottom: 0; }

							.hero__title,
							.hero__topline {
								color: #fff;
								text-transform: uppercase;
							}
							
							/*h1|h2*/.hero__title {
								font-size: 2.142em;
								line-height: 1.143em;
							}
							
							/*h2|h3*/.hero__topline {
								font-size: 1.286em;
								line-height: 1.1664em;
								padding-bottom: 15px;
								border-bottom: 1px solid #fff;
								margin-bottom: 10px;
							}
							
							/*p*/.hero__title.nb,
							/*p*/.hero__topline.nb {
								font-family: "museo-sans-n3","museo-sans",Arial,Helvetica,sans-serif;
								font-style: normal;
								font-weight: 300;
							}
	
							.hero__text {
								font-family: "museo-sans-n3","museo-sans",Arial,Helvetica,sans-serif;
								font-weight: 300;
								color: #fff;
	
								margin: 0;
							}
							
							.hero__href--to-collection {
								display: block;
								
								color: #fff !important;
								text-decoration: none;
								
								background: url(img/sprite/no-repeat_x.png) no-repeat -16000px 8px;
								padding-left: 15px;
								margin-top: 10px;
							}
							
							.hero__href--to-collection:hover { text-decoration: underline; }

/* ======================================================
	=2.1.1 Hero-Element: Polaroid-Style
========================================================= */
.hero__frame--polaroid {
	position: relative;
	
	padding: 0.741em;
}

	.hero__frame--polaroid .hero__title,
	.hero__frame--polaroid .hero__topline,
	.hero__frame--polaroid .hero__text {
		width: 75%;
		color: #686868;
	}
	
	.hero__frame--polaroid .hero__title,
	.hero__frame--polaroid .hero__topline {
		text-transform: none;
		
		margin-bottom: 0.3em;
	}
	
	.hero__frame--polaroid .hero__icon {
		display: block;
		position: absolute;
		top: 17px;
		right: 0.714em;
		
		width: 16px;
		height: 12px;
		background: url(img/sprite/no-repeat_x.png) no-repeat -2893px 2px;
	}

/* ======================================================
	=2.1.2 Hero-Element: Hintergrundfarbe für Textfläche
========================================================= */
.hero__frame-wrap--standard {
	background: #204c90; /* Old browsers */
	background: -moz-linear-gradient(left,  #204c90 0%, #378cd1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#204c90), color-stop(100%,#378cd1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #204c90 0%,#378cd1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #204c90 0%,#378cd1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #204c90 0%,#378cd1 100%); /* IE10+ */
	background: linear-gradient(to right,  #204c90 0%,#378cd1 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#204c90', endColorstr='#378cd1',GradientType=1 ); /* IE6-9 */
}

.hero__frame-wrap--blue {
	background: #12385c; /* Old browsers */
	background: -moz-linear-gradient(left,  #12385c 0%, #2a759e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#12385c), color-stop(100%,#2a759e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #12385c 0%,#2a759e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #12385c 0%,#2a759e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #12385c 0%,#2a759e 100%); /* IE10+ */
	background: linear-gradient(to right,  #12385c 0%,#2a759e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12385c', endColorstr='#2a759e',GradientType=1 ); /* IE6-9 */
}

.hero__frame-wrap--purple {
	background: #3c105a; /* Old browsers */
	background: -moz-linear-gradient(left,  #3c105a 0%, #712a7f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#3c105a), color-stop(100%,#712a7f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #3c105a 0%,#712a7f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #3c105a 0%,#712a7f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #3c105a 0%,#712a7f 100%); /* IE10+ */
	background: linear-gradient(to right,  #3c105a 0%,#712a7f 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c105a', endColorstr='#712a7f',GradientType=1 ); /* IE6-9 */
}

.hero__frame-wrap--plum {
	background: #521233; /* Old browsers */
	background: -moz-linear-gradient(left,  #521233 0%, #87004e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#521233), color-stop(100%,#87004e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #521233 0%,#87004e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #521233 0%,#87004e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #521233 0%,#87004e 100%); /* IE10+ */
	background: linear-gradient(to right,  #521233 0%,#87004e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#521233', endColorstr='#87004e',GradientType=1 ); /* IE6-9 */
}

.hero__frame-wrap--aqua {
	background: #0e3842; /* Old browsers */
	background: -moz-linear-gradient(left,  #0e3842 0%, #216875 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0e3842), color-stop(100%,#216875)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #0e3842 0%,#216875 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #0e3842 0%,#216875 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #0e3842 0%,#216875 100%); /* IE10+ */
	background: linear-gradient(to right,  #0e3842 0%,#216875 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e3842', endColorstr='#216875',GradientType=1 ); /* IE6-9 */
}

.hero__frame-wrap--grey {
	background: #2c3d4f; /* Old browsers */
	background: -moz-linear-gradient(left,  #2c3d4f 0%, #758c9f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2c3d4f), color-stop(100%,#758c9f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #2c3d4f 0%,#758c9f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #2c3d4f 0%,#758c9f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #2c3d4f 0%,#758c9f 100%); /* IE10+ */
	background: linear-gradient(to right,  #2c3d4f 0%,#758c9f 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3d4f', endColorstr='#758c9f',GradientType=1 ); /* IE6-9 */
}

.hero__frame-wrap--pink {
	background: #8d006b; /* Old browsers */
	background: -moz-linear-gradient(left,  #8d006b 0%, #b50078 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#8d006b), color-stop(100%,#b50078)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #8d006b 0%,#b50078 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #8d006b 0%,#b50078 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #8d006b 0%,#b50078 100%); /* IE10+ */
	background: linear-gradient(to right,  #8d006b 0%,#b50078 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d006b', endColorstr='#b50078',GradientType=1 ); /* IE6-9 */
}

.hero__frame-wrap--indigo {
	background: #32255b; /* Old browsers */
	background: -moz-linear-gradient(left,  #32255b 0%, #788cb6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#32255b), color-stop(100%,#788cb6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #32255b 0%,#788cb6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #32255b 0%,#788cb6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #32255b 0%,#788cb6 100%); /* IE10+ */
	background: linear-gradient(to right,  #32255b 0%,#788cb6 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32255b', endColorstr='#788cb6',GradientType=1 ); /* IE6-9 */
}

.hero__frame-wrap--orange {
	background: #6c2b09; /* Old browsers */
	background: -moz-linear-gradient(left,  #6c2b09 0%, #c04c1d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#6c2b09), color-stop(100%,#c04c1d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #6c2b09 0%,#c04c1d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #6c2b09 0%,#c04c1d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #6c2b09 0%,#c04c1d 100%); /* IE10+ */
	background: linear-gradient(to right,  #6c2b09 0%,#c04c1d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c2b09', endColorstr='#c04c1d',GradientType=1 ); /* IE6-9 */
}

/* ======================================================

	=2.2 Hero-Element: Navigationsbereich

========================================================= */			
.hero-action__content {
	padding: 0 1.429em;
	border-top: 1px dotted #c0c1c2;
}

	.hero-action__list {
		border-left: 1px dotted #c0c1c2;
		
		transform: translate3d(0px, 0px, 0px) !important;
	}
	
		.hero-action__item {
			width: 140px;
			padding: 0 0.357em;
			border-top: 6px solid #fff;
			border-right: 1px dotted #c0c1c2;
			margin: 0;
		}
		
		/*.hero-action__item*/.flex-active-slide { border-top-color: #c0c1c2; }

			.hero-action__href {
				display: block;
				
				text-decoration: none;
			}
			
			/*.hero-action__item*/.flex-active-slide .hero-action__href { color: #009de4; }
					
				.hero-action__title {
					padding: 0.714em 0;
					margin: 0;
				}
				
				.hero-action__img { margin: 0; }
				
/* ======================================================

	=3. Carousel

	Used in:
	- collectionGroup_list_collectionsByCollectionGroup_caroussel.html (grintsch_is_pmd)
	- collection_view_details.html (grintsch_is_pmd)

	@Reviewed

========================================================= */
.carousel { 
	position: relative; 
	margin: 20px 0 0;
}

	/*li*/.carousel__slide--first,
	.carousel ul.slides li:first-child { width: 220px !important; }
	
		.carousel li:first-child .container--left { margin-left: 0!important; }
	
	.carousel .flex-direction-nav {
		top: -45px;
		right: 0;

		width: auto;
	}

	.carousel .flex-direction-nav a {
		width: 25px;
		height: 25px;
		background: url(img/sprite/no-repeat_v1-1.png) no-repeat ;
		background-color: #009DE4;
		border-radius: 25px;
	}

	.carousel .flex-direction-nav a.flex-next,
	.carousel .flex-direction-nav:hover a.flex-next { background-position: -30px  -75px; }

.carousel .flex-direction-nav a.flex-prev,
.carousel .flex-direction-nav:hover a.flex-prev { background-position: 0 -75px; }



/* ======================================================

	=4. fullWidth

========================================================= */
.slider--full {}

.hero--full { height: 710px; }

	.hero--full__content {
			position: absolute;
			top: 111px;
			left:0;
			overflow: hidden;

			height: 710px
		}

		.hero--full__item { overflow: hidden; }
		
		.hero--full__bg-standard { background: #204c90; }
		.hero--full__bg-blue { background: #204c90; }
		.hero--full__bg-purple { background: #3c105a; }
		.hero--full__bg-plum { background: #521233; }
		.hero--full__bg-aqua { background: #0e3842; }
		.hero--full__bg-grey { background: #2c3d4f; }
		.hero--full__bg-pink { background: #8d006b; }
		.hero--full__bg-indigo { background: #32255b; }
		.hero--full__bg-orange { background: #6c2b09; }

			.hero--full__href { display: block; }

				.hero--full__wrap { overflow: hidden; }

				  .hero--full__img { 
				  display: block;
				 	position: relative; 
					height: 100%;
					/* width: 100%; */
					}

				  .hero--full__frame {
					 -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
					 position: absolute;
					 bottom: 120px;
					 left: 0;

					 width: 300px;
					 background: rgba(255,255,255,0.3);
					 padding: 20px;
					 border: 1px solid #fff;
					 margin: 0;
				 }

					 .hero--full__icon {
						 position: absolute;
						 bottom: 20px;
						 right: 20px;

						 background: url(img/sprite/no-repeat.png) -48px -648px no-repeat;
						 width: 18px;
						 height: 18px;
					 } 

					.hero--full .hero__title { margin-bottom: 0.357em; }
					.hero--full .hero__topline { margin-bottom: 0.357em; }
					.hero--full .hero__text {}

.icn--hero-full {
	position: absolute;
	bottom: 20px;
	left: 50%;
	z-index: 10;
	margin-left: -11px;
}

	
	






	

	

  
  

  
  
  
  
  .hero__item--color_red { background: #9d1c38;}

  .hero__item--color_blue { background: #5223cb; }