/* @import url('https://fonts.googleapis.com/css?family=Raleway');
/* @import url('https://fonts.googleapis.com/css?family=Oswald');

/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/raleway-v28-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/raleway-v28-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/oswald-v49-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/oswald-v49-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}



/******************************************************************/
/*             CSS used by more than one page                     */
/******************************************************************/
body {
	margin:				0;
	padding:			0;
	height:				100%;
	width:				100%;
}

/************ CSS for Header ************/
.navbar {
	position:			fixed;
	top:				0;
	z-index:			9999;
}
.h-headline {
	background-color: 	#333;
	width:				100vw;
	height:				50px;
	margin:				0;
	padding: 			0;
}
.h-logo {
	margin-top:			12px;
	margin-left:		50px;
	float: 				left;
}
.h-flag-wrapper {
	float: 				right;
	margin-right: 		40px;
	padding: 			0;
}
.h-flag {
	max-width:			40px;
	margin-top:			12px;
	margin-right: 		40px;
}

/************ CSS for footer ************/
footer {
	background-color:	#000;
	max-width:			100%;
	height:				auto;
	padding:			50px 0px;
	font-size:			14px;
	color:				#FFF;
	font-family:		'Arial', sans-serif;
}
.f-wrapper {
	display:			flex;
	flex-diection:		row;
	justify-content: 	space-between;
	max-width: 			1000px;
	margin:				0px auto;
}
.f-textblock1 {
	max-width:			33%;
	text-align:			left;
	padding:			0px 20px;
}
.f-textblock2 {
	max-width:			33%;
	text-align:			center;
}
.f-textblock2 a {
	color: 				#FFF;
}
.f-textblock3 {
	max-width: 			34%;
	text-align:			left;
	padding:			0px 20px;
	font-size:			18px;
	font-family:		'Oswald', sans-serif;
}
.f-textblock3 a {
	color:				#FFF;
}

/************ CSS für button ************/
.btn-weiter {
	margin-top:			20px;
	border-radius:		9px;
	font-family:		'Oswald', sans-serif;
	color:				#3db7c0;
	font-size:			80%;
	padding:			7px 15px;
	border:				solid #3db7c0; 3px;
	text-transform:		uppercase;
	text-decoration:	none;
}
.btn-weiter:hover {
	color:				#F00;
	border:				solid #F00 3px;
}

/************ Standard Headline and text ************/

h1 {
	font-family:		'Oswald', sans-serif;
	font-size:			32px;
	text-align:			center;
	margin-bottom:		30px;
	margin-top:			160px;
	font-weight:		normal;	
}
	
.text-headline {
	font-family:		'Oswald', sans-serif;
	font-size:			32px;
}

.text-standard {
	font-size:			17px;
}	

/************ Three column layout ************/
.three-c-wrapper {
	display:			flex;
	flex-direction:		row;
	justify-content:	space-between;
	margin:				0px auto;
	line-height:		1.57;
	text-align:			justify;	
}
.three-c-main {
	width:				60%;
	order:				2;
	margin:				0px 50px 50px 50px;
	padding:			0px 25px;
	background:			#EEE;
}
.three-c-sidebar-left {
	width: 				20%;
  	order: 				1;
	line-height:		normal;
}
.three-c-sidebar-right {
	width: 				20%;
  	order: 				3;
	line-height:		normal;
	text-align:			left;
}
.three-c-sidebar-title {
	font-family:		'Oswald', sans-serif;
	font-size:			21px;
}
.dl-link {
	font-family:		'Oswald', sans-serif;
	line-height:		2.5;
	text-decoration:	none;
	color:				#6b7980;
}
.pic {
	width: 				100%;
  	height: 			auto;
}
.picbig {
	position:			absolute;
	width:				0px;
	-webkit-transition: width 0.3s linear 0s;
	transition:			width 0.3s linear 0s;
	z-index:			999;
}
.pic:hover + .picbig {
	width:				500px;
}
.pictext {
	font-size:			8px;
}

.s-image-container {
	margin:				100px auto;
}

.s-image-pic {
	width:				100%;
}



/******************************************************************/
/*                  CSS for home page                             */
/******************************************************************/

.headline-home {
	margin-top:			200px;
	margin-bottom:		100px;
	text-align:			center;
}

.products-home {
	margin-top:			100px;
	margin-bottom: 		100px;
	text-align:			left;	 
}

/************ CSS for image carousel ************/
.jssorb032 {
	position:			absolute;
}
.jssorb032 .i {
	position:			absolute;
	cursor:				pointer;
}
.jssorb032 .i .b {
	fill:				#fff;
	fill-opacity:		0.7;
	stroke:				#000;
	stroke-width:		1200;
	stroke-miterlimit:	10;
	stroke-opacity:		0.25;
}
.jssorb032 .i:hover .b {
	fill:				#000;
	fill-opacity:		.6;
	stroke:				#fff;
	stroke-opacity:		.35;
}
.jssorb032 .iav .b {
	fill:				#000;
	fill-opacity:		1;
	stroke:				#fff;
	stroke-opacity:		.35;
}
.jssorb032 .i.idn {
	opacity:			.3;
}

/************ content section ************/
.main-content-area {
	max-width:			1200px;
	margin:				0px auto 50px auto;
	padding:			0px 25px;
	font-family:		'Raleway', sans-serif;
	color:				#333;
	font-size:			14px; 
}

/************* Grid specification ************/
.grid-wrapper {
  width: 				930px;
  margin:				0 auto;
  display:				-ms-grid;
  display:				grid;
  grid-gap:				15px;
  -ms-grid-columns:		300px 15px 300px 15px 300px;
  -ms-grid-rows:		300px 15px 300px;
  grid-template-columns:300px 300px 300px;
  grid-template-rows: 	300px 300px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 10px;
  padding:	0px;
  font-size: 150%;
  box-shadow:	0px 0px 5px grey;
}

.a {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-column: 1 / 3;
  grid-row: 1;
}

.b {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 5;
  grid-column: 3;
  grid-row: 1 / 3;
}

.c {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-column: 1;
  grid-row: 2;
}

.d {
  -ms-grid-column: 3;
  -ms-grid-row: 3;
  grid-column: 2;
  grid-row: 2;
}

/************ Link arrows ************/
.link-arrow {
	color:				#3db7c0;
	text-decoration:	none;
	padding-left:		10px;
}
.link-arrow:hover {
	color:				#F00;
}

/******************************************************************/
/*              CSS for products                                  */
/******************************************************************/

.intro-rm {
	margin-top:			160px;
}
	
.intro-headline-rm {
	text-align:			center;
	margin-bottom:		30px;
}

.intro-text-rm {
	text-align:			justify;
	line-height:		1.57;
}

/******************************************************************/
/*              CSS for products                                  */
/******************************************************************/

.i-text-section {
	text-align:			center;
	padding:			2em 2em 2em 2em;
	border-bottom:		1px solid #333;
	text-decoration:	none:
}

.i-text-section:last-child {
	border-bottom:	none;
}

.i-text-section-left {
	text-align:			left;
	padding:			0em 2em 0em 2em;
	border-bottom:		1px solid #333;
	text-decoration:	none:
}

.i-text-section-left:last-child {
	border-bottom:	none;
}


@media only screen and (max-width : 1000px) {
.stellarnav > ul > li > a { 
  padding: 				20px 23px; }
h1 {
  font-size:			20px; }	
.text-headline {
  font-size:			20px; }	
.text-standard {
  font-size:			14px; }
.main-content-area {
  font-size:			12px; }
.headline-home {
  font-size:			20px; }
.three-c-sidebar-title {
  font-size:			16px; }
.btn-weiter {
  font-size:			80%;
  padding:				7px 15px; }
.grid-wrapper {
  grid-gap: 			15px;
  -ms-grid-columns:		300px 15px 300px;
  -ms-grid-rows: 		300px 15px 300px 15px 300px;
  grid-template-columns:300px 300px; 
  grid-template-rows: 	300px 300px 300px;
  width: 				615px; }
.b {
  -ms-grid-row:			3;
  -ms-grid-row-span:	3;
  -ms-grid-column:		1;
  grid-column:			1;
  grid-row:				2 / span 2; } 
.c {
  -ms-grid-row:			3;
  -ms-grid-column:		3;
  grid-column:			2;
  grid-row:				2; }
.d {
  -ms-grid-column:		3;
  -ms-grid-row:			5;
  grid-column:			2;
  grid-row:				3; }
}

@media screen and (max-width:768px) {
.h-logo {
  margin-left:			20px; }
.h-flag {
  max-width:			25px;
  margin-right:			10px; }	
.f-wrapper {
  flex-direction:		column; }
.f-textblock1 {
  width:				80%; }
.f-textblock2 {
  width:				80%;
  margin:				20px 20px;
  text-align:			left; }
.f-textblock3 {
  max-width:			80%; }
.three-c-wrapper {
  flex-direction:		column; }
.three-c-main {
  width:				80%;
  margin-left:		0px; }
.three-c-sidebar-right {
  width:				80%; }
.three-c-sidebar-left {
  width:				80%; }
.pictext {
  display:				none; }
.pic {
  width:				60%;
  margin-bottom:		50px; }	
.pic:hover + .picbig {
  width:				0px; }	
}