/** ----------------------------------------------------------
 *
 * Contains the main layout of the page and the individual styles.
 * Acts as the main stylesheet for theme.
 *
 *		Include your notes or table of contents below....
 *		Include color hex's or values of your grid
 *
 *		1. OOCSS GRID
 *		2. MAIN LAYOUT
 *		3. HEADER
 *			- Brand
 *			- Search Form
 *		4. Navigation
 *			- Primary Navigation
 *			- tablet Navigation
 *			- Secondary Navigation
 *			- Secondary Nav 2-5 Levels deep
 *		5. Mixed
 *		6. Footer
 *		7. Page Specific Layout
 *			- Homepage
 *			- Search Results
 *		8. Device and Responsive Layout
 *			- Breakpoint 960px
 *			- Breakpoint 640px
 *				- Search Form
 *				- Main Content
 *		9. Print Styles
 *			- Simple Theme custom print styles
 *
 * @author Torsten W�rtz <info@twuertz.de>
 * ------------------------------------------------------- */

/* OOCSS Grid
* https://github.com/stubbornella/oocss/wiki/grids
*/

.line, /* line - Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling. */
.lastUnit {
	overflow:hidden;
	*overflow:visible;
	*zoom:1;
	padding:0 10px;
}
.unit { /* unit - Base class which divides a line into sections (columns). */
	float:left;
	padding:0 11px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box; /* box-sizing:border-box; creates a box-model where
	padding and border are NOT added onto the width - they are included in the width,
	so a 200px wide element with 20px padding will be 200px, NOT 240px wide */
}
.unitRightv { /* Use this class if you want to offset a column eg: |--content(.unit)--|--content(.unit)--|--no-content--|--no-content--|--content(.unitRighttv)--| */
	float:right;
}

.ie8 .unit {
		padding-left:0;
		padding-right:0;
	}
/* sizeXofY - Extends unit. Indicates the fractional width of the unit, for example size3of4 would take up three quarters, or 75%, of the horizontal space.
The following fractions are supported: 1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5 */
/* It is possible to add more columns if you wish you will just have to add the fractions that are missing eg: .size1of6 {width:16.66666%;} */

.size1of1 {
	float:none;
}
.size1of2 {
	width:50%;
}
.size1of3 {
	width: 33.33333%;
}
.size2of3 {
	width:66.66666%;
}
.size1of4 {
	width:25%;
}
.size3of4 {
	width:75%;
}
.size1of5 {
	width:20%;
}
.size2of5 {
	width:40%;
}
.size3of5 {
	width:60%;
}
.size4of5 {
	width:80%;
}
.lastUnit { /* lastUnit - Extends unit. Applied to the last child of every line. */
	float:none;
	width:auto;
	_position:relative; /* Bug fix for IE6 - Internet Explorer 6 and below wouldn't fail on properties that were prefixed with non-alphanumeric characters.
	meaning that anything prefixed with _ wouldn't be picked up by any other browsers */
	_left:-3px;
	_margin-right:-3px;
}

/* MAIN LAYOUT */


body {
    margin: 0;
    background: #ededed;
    min-width: 240px;
    -webkit-text-size-adjust: none; /* The text size is not adjusted for Safari on iPhone */
}
	.ie7 body,
	.ie8 body {
	    min-width: 860px; /* media queries are not supported in ie7/8 without a polyfill */
	}

	.main {
	    background: #fff;
	    padding: 20px 0 60px;
	    min-height: 300px;
	}
	.inner {
	    max-width: 1100px;
	    margin: 0 auto;
	    padding: 0 30px;
	}
	.ie6 .inner {
	    width: 960px;
	}
	.no-sidebar .content-container {
	    float: left;
	    width:100%; /* makes content container full width when there is no sidebar */
	}
	.sidebar { /* this is the sidebar element */
	    margin-top: 12px;
	}
	.no-sidebar .sidebar {
		display: none;
	}

/* HEADER */
.header {
    background: #EDEDED;
}

	.header .inner {
	    padding-top: 10px;
	    position: relative;
	    min-height: 72px;
	}
		.headerafter{
		width: 100%;
		height: 10px;
		background-image: -webkit-linear-gradient(#EDEDED 0%, white 100%);
		background-image: -moz-linear-gradient(#EDEDED 0%, white 100%);
		background-image: -o-linear-gradient(#EDEDED 0%, white 100%);
		background-image: linear-gradient(#EDEDED 0%, white 100%);
		}


	/* Brand */
	header .brand, header .brand:hover, header .brand:visited{
	    float: left;
	    color: #fff;
	    display: inline-block;
		}
		body .header a.brand:link, body .header a.brand:visited {
		background-image: url(../images/logo-only.gif);
		background-repeat: no-repeat;
		background-position: right;
		width: 203px;
		height: 40px;
	    }
		body .header a.brand:hover {
		background-image: url(../images/logo-invers.gif);
		background-repeat: no-repeat;
		background-position: right;
		width: 203px;
		height: 40px;
		}
	.WebtechnikPage .header a.brand:link, .WebtechnikPage .header a.brand:visited,
	.RefOrdner	.header a.brand:link,.RefOrdner	.header a.brand:visited {
		background-image: url("../images/logo-only-blk.png");
	}
	.WebtechnikPage .header a.brand:hover,
	.RefOrdner	.header a.brand:hover{
		background-image: url("../images/logo-invers-blk.png");
	}
	.WebtechnikPage .headerafter,
	.RefOrdner  .headerafter {
		display:none;
	 }
		.brand h1 {
		    margin: 0;
		    padding: 0;
		    font-size: 48px;
		    font-family: "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		    color: #fff;
		    font-weight: 600;
		    font-stretch: normal; /* default value. No font stretching */
		    line-height: 1em;
		}
		.brand p {
		    color: #888;
		    margin-bottom: 22px;
		}
		.brandtitle {
			float: right;
			text-align: right;
			 max-width: 330px;
			margin-right: 15px;
		}
		.brandtitle h6 {
		    font-size: 12px;
		    font-family: "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		    color: black;
		    font-weight: 500;
		    font-stretch: normal; /* default value. No font stretching */
			line-height: 1.2em;
		}

		.ie8 .brandtitle h6 {
					    font-size: 11px;
		}

		.brandtitle h6 a{
			color: black
			}

		.WebtechnikPage .brandtitle h6,
		.RefOrdner .header .brandtitle h6,
		.WebtechnikPage .brandtitle h6 a,
		.RefOrdner .header .brandtitle h6 a {
		color: #999;
		}

/* Search form */
	.search-bar {
	    position: relative;
		float: right;
	}
		.search-bar #Search {
			margin: 0;
			padding: 0;
		}
		.search-bar form input.text {
		    width: 155px;
		    padding: 5px 34px 5px 15px;
		    color: #888;
		    margin: 0;
		    border: none;
		    -moz-border-radius: 14px;
		    border-radius: 14px;
		    background: #fff;
		}
		.search-bar form input.action { /* positions the search button icon over the top of the search input */
		    font-size: 14px;
		    position: absolute;
		    right: 5px;
		    top: 0;
		    cursor: pointer;
		    border: none;
		    padding: 5px;
		    background: none;
		    font-family: 'WebSymbolsRegular';
		    color: #848484;
			border-radius: 0;
			margin: 0;
		}
		.search-bar form input.active,
		.search-bar form input.action:hover {
		    color: #000;
		}
		.search-bar form input:focus,
		.header textarea:focus {
		    outline: none; /* removes default browser outlining on focus */
		}
		.search-dropdown-icon {
		    display: none; /* hides search-dropdown-icon when site is at full width - media queries set it to display:block when at mobile/tablet width */
		}

/* NAVIGATION */
	/* Intro navigation */


	/* Primary navigation */
	.header .inner .unit {
		position: relative; /* used to position the main navigation */
	}
	.header .endnav {
		background-image: url("../images/navrechts.png");
		background-repeat: no-repeat;
		position: absolute;
		right: 0;
		width: 16px;
		height: 48px;
		top: 45px;
	}
/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .header .endnav{top:44px;}
}
	.header .primary ul {
		position: relative;
		float: right;
		bottom:0;
		right:6px; /* positions the main navigation */
		margin-top: 15px;
		margin-bottom:15px;
		border-bottom: 1px solid #5F00FF;
		line-height: 0;
	}
	.ie8 .header .primary ul {
		width: 81%;
	}
	.header .primary ul li.start {
		display:none;
	}
	.header .primary li {
	    float: left;
	    padding-bottom: 14px;
	    margin: 0 4px;
	    position: relative;
	    white-space: nowrap; /* forces text to never wrap onto a second line */
	}
	.header .primary li a	{
	    color: #555;
	    font-size: 18px;
	    font-family: "CamboRegular";
	    padding: 6px 8px 0 8px;
	    font-weight: bold;
	    display: block;
	}
	.WebtechnikPage .header .primary li a,
	.RefOrdner .header .primary li a,
	.WebtechnikPage .header .secondary li a,
	.RefOrdner .header .secondary li a {
	    color: #ccc;
	 }
     .WebtechnikPage .header .secondary li.section,
	.RefOrdner .header .secondary li.section,
	.WebtechnikPage .header .secondary li.current,
	.RefOrdner .header .secondary li.current,
	.WebtechnikPage .header .secondary li.current a.current,
	.RefOrdner .header .secondary li.current a.current
	{
	    background: none;
	 }


	.header .primary li a:hover {
	    color: #999;
	}
	.header .primary li.section a,
	.header .primary li.current a {
	    color: #999;
	}
	.js-an .header .primary li.section:after,
	.js-an .header .primary li.current:after {
	    content: '}'; /* adds triangle beneath current nav item ('}' is renders as a triangle when WebSymbolsRegular is set as the font) */
	    display: block;
	    position: absolute;
	    left: 50%;
	    margin-left: -7px;
	    bottom: -14px;
	    font-family: 'WebSymbolsRegular';
	    font-size: 20px;
	    color: #999;
	    text-align: center;
	    line-height: 20px;
	}

	/* Tablet Navigation */
	/* When navigation and logo overlap tablet-nav is initialized */
	.tablet-nav .brand p {
	    margin-bottom: 0;
	}
	.js-aus .header .inner,
	.tablet-nav .header .inner {
	    padding-top: 10px;
	}
	.js-aus #intro {
		display: none;
	}

.tablet-nav .header .primary ul {
	    float: right;
	    clear: both;
	    position: relative;
		margin-top: 15px;
		margin-bottom:15px;
		right:6px; /* positions the main navigation */
		line-height: 0;
	}
		.js-aus .header .primary ul li,
		.tablet-nav .header .primary ul li {
		    white-space: nowrap;
		}
			.js-aus .header .primary ul li a,
			.tablet-nav .header .primary ul li a { /* there is no hover on touch devices so no transition on hover is necessary */
			    -moz-transition: none;
			    -webkit-transition: none;
			    transition: none;
			}
	.js-aus #nav {
		visibility: visible;
		}
	.js-aus .StartPage .main {
		padding-top: 150px;
		}

	.tablet-nav .footer .right {
	    float: left;
	    width: 100%;
	}

	/* Secondary navigation */
		.header .secondary ul {
		position: relative;
		float: left;
		bottom:0;
		top: -15px;
	}
		.header .secondary li {
			float: left;
		    list-style-type: none;
		    margin-bottom: 0;
		}
			.header .secondary li .arrow {
			    color: #b80000;
			    padding-right: 5px;
			    display: block;
			    font-size: 15px;
			    line-height: 20px;
			    position: absolute;
			    left: 2px;
			    top: 7px;
			    -moz-transition: 0.2s; /* this transition moves the arrow from left:2px to left:6px */
			    -webkit-transition: 0.2s;
			    transition: 0.2s;
			}
		.header .secondary li a:hover .arrow {
		    left: 6px; /* this sets the final position for the arrow transition */
		}
		.header .secondary li a { /* side nav link styling */
		    padding: 10px 0;
		    display: block;
		    text-transform: uppercase;
		    letter-spacing: 2px;
		    font-size: 11px;
		    color: #333;
		    line-height: 17px;
		    border-bottom: none;
	    font-family: "CamboRegular";
		}
		.header .secondary li .text {
		    padding-left: 28px;
		    display: block;
		}
		.header .secondary li.current a.current {
			color: #999;
			background-color: #EDEDED;
		}
		.header .secondary li.section,
		.header .secondary li.current {
		    background-color: #F3F3F3;
			padding-right: 15px;
		}
			.header .secondary li.section a,
			.header .secondary li.current a {
			    color: #000;
			}
			.WebtechnikPage .header .secondary li.section a,
			.WebtechnikPage .header .secondary li.current a {
			    color: white;
			}

		/* Secondary navigation 2-5 levels deep */
		.header .secondary ul ul {
			display: none;
		}
		.secondary ul li.current ul,
		.secondary ul li.section ul { /* Only show child pages from selected parent */
			display: block;
		}
		.secondary li.current ul ul {
			display: none;
		}
		.header .secondary ul ul li a { padding-left: 10px; } /* Indent all sidebar navigation levels*/
			.header .secondary ul ul li a .arrow { left: 12px; }
			.header .secondary ul ul li a:hover .arrow { left: 16px; }

		.header .secondary ul ul ul li a { padding-left: 20px; }
			.header .secondary ul ul ul li a .arrow { left: 22px; }
			.header .secondary ul ul ul li a:hover .arrow { left: 26px; }

		.header .secondary ul ul ul ul li a { padding-left: 30px; }
			.header .secondary ul ul ul ul li a .arrow { left: 32px; }
			.header .secondary ul ul ul ul li a:hover .arrow { left: 36px; }

		.header .secondary ul ul ul ul ul li a { padding-left: 40px; }
			.header .secondary ul ul ul ul ul li a .arrow { left: 32px; }
			.header .secondary ul ul ul ul ul li a:hover .arrow { left: 36px; }

		.header .secondary li a:hover,
		.header .secondary li.section a:hover,
		.header .secondary li.current a:hover {
			color: #999;
		}
		.header .primary .menu2	{
			display:none;
		}

/* MIXED */
header:after,
.main:after,
#Root:after,
.search-bar:after,
header .inner:after,
footer:after { /* clearfix */
    height: 0;
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
}
.search-bar form input.action,
.header .primary li a,
.footer a { /* adds color transition when links/inputs on hover */
    -moz-transition: color 0.2s;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}
.footer a.brand { color: #333; margin-left: 0; }
.footer a.brand:hover { color: #B80000; }
body h1 span.amp {
    font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
    font-style: italic;
}

/*Javascript an oder aus js-an*/
.js-aus .slides > li:first-child {
    display: block;
}
.newsbild{
position: relative;
float: left;
padding-right: 20px;
}
.typography .newsbild img {
border: 0px;
}

.typography .stellar img {
border: 0px;
background-image: none;
}
.pagebild {
position: relative;
float: right;
padding-left: 20px;
}


.pagetitle
{
position: relative;
float: left;
margin-left:auto;
margin-right: auto;
}
.js-an .alert {
display: none;
}
.alert {
	height: 19px;
    background-color: #AE0000;
    color: #FFFFFF;
    font-family: sans-serif;
    font-weight: bold;
    left: 0;
    padding: 1px 0;
    position: relative;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 101;
}
/* FOOTER */
.beforefooter{
		width: 100%;
		height: 10px;
		background-image: -webkit-linear-gradient(white 0%, #EDEDED 100%);
		background-image: -moz-linear-gradient(white 0%, #EDEDED 100%);
		background-image: -o-linear-gradient(white 0%, #EDEDED 100%);
		background-image: linear-gradient(white 0%, #EDEDED 100%);
		}
.footer {
    color: #999;
	background: #ededed;
    padding: 20px 0;
    font-size: 13px;
    line-height: 22px;
}
	.footer a {
	    color: #555;
	}
	.footer a:hover {
	    color: #999;
	}
	.footer .left {
	    float: left;
	    color: #000;
	    display: block;
	}
	.footer .right {
	    float: right;
	    display: block;
	    margin-bottom: 10px;
	}
	.footer .center {
	    display: block;
		margin: 10px auto;
		text-align: center;
		width: 470px;
		color: #333;
		max-width: 100%;
	}
	.footer .center a{
		background-image: url(../images/email.gif);
		background-repeat: no-repeat;
		background-position: right;
		float: right;
		width: 145px;
		height: 17px;
		margin-right: 167px;
		margin-top: 3px;
		}
	.js-aus .footer .flexsliderdesc,
	.js-aus .flexsliderfooter	{
		display: none;
	}
	.WebtechnikPage .footer .center a,
	.RefOrdner .footer .center a {
			background-image: url(../images/email.png);
		}
	.footer span {
	    padding: 0 3px;
	    color: #777;
		margin-top: 0;
	}
	.footer .primary,
	.footer .primary ul
	{
	    display: inline;
	    margin: 0;
	    padding: 0;
	}
		.footer .primary li,
	.footer .secondary li
		{
		    display: inline;
		}
	.ie6 .footer .primary li,
	.ie7 .footer .primary li { /* this is a bugfix for ie6/7 */
	    display: inline;
	    zoom: 1;
	    margin-right: 10px;
	}
	.footer .primary li:after { /* adds '/' to separate the footer navigation items */
	    padding: 0 3px 0 5px;
	    content: '/';
	    color: #999;
	}
	.footer .primary li:last-child:after {
	    content: ''; /* makes sure last nav item doesn't have a '/' following it */
	}

	.footer .arrow {
	    padding: 0 8px 0 5px;
	    color: #b80000;
	    font-size: 13px;
	}
	.footer .primary .nav-open-button {
	    display: none; /* the footer includes the primary nav include - this makes sure the nav open close button doesn't show up */
	}
	.footer .endnav {
		display: none;
		}
  .footer .flexsliderfooter {
			background: none;
			overflow: hidden;
			padding-left: 10px;
			padding-right: 0;
			padding-top: 5px;
			position: relative;
			text-align: left;
			width: 815px;
			}


		.flexsliderfooter .flexslider {
			margin: 0px;
			border: none;
			box-shadow:none;
			}
		.flexsliderfooter .flexslider h1 {
			  font-size: 13px;
			  line-height: 13px;
			  margin: 0 0 10px 0;
			  border-bottom: 0;
			  padding-bottom: 0;
			}
		.flexsliderfooter .flexslider h1  span{
		     color: red;
			}
		.flexsliderfooter .flexslider li {
		    list-style-type: none;
		}
.flexsliderdesc {
	font-size: 13.5px;
	float: left;
	margin-left: 10px;
	color: #333;
	margin-top: 5px;
	}

.footer .flexslider {
	background-color: #EDEDED;
	}
.footer .primary .menu2	{
			display:none;
		}
.footer .secondary li a {
    color: #333333;
    text-transform: uppercase;
	}

.footer .inis{
float: left;
margin-left: 5px;
margin-top: 20px;
}


.WebtechnikPage .slides img {
    background:none;
}

.WebtechnikPage .footer {
margin-bottom: -30px;
		}





/* PAGE SPECIFIC LAYOUT */
	/* Homepage */
		/* currently no Hompage specific styles - feel free to add your own */


/*Startseite*/
  .startbanner{
			background: none repeat scroll 0 0 transparent;
			border-bottom: 1px solid #CCCCCC;
			margin-bottom: 20px;
			overflow: visible;
			padding-left: 0;
			padding-right: 0;
			padding-top: 0;
			position: relative;
			text-align: center;
			}
			.flexslidercont{
				    padding: 15px 5% 2% 0;
			}
			.flexslider{
				margin: 0 0 30px;
				position: relative;
				}
		#startbanner .flexslider {
			margin: 12px 0 0 0;
			border: none;
			box-shadow:none;
			}
		#startbanner .flexslider h1 {
			  font-size: 56px;
			  line-height: 65px;
			  margin: 0 0 10px 0;
			  border-bottom: 0;
			  padding-bottom: 0;
			}
		#startbanner .flexslider h1  span{
		     color: red;
			}
		#startbanner .flexslider li {
		    list-style-type: none;
		}

.home-spalte {
    min-width: 300px;
}

.ie10 .typography .home-spalte p{
font-size: 12.5px;
}
.StartPage .home-spalte h3 a {
	color: #333;
}

.typography .aktuelles  ul {
	 margin-left: 0;
	}

/* INTRO */
		#intro {
			height: 100%;
			left: 0;
			position: absolute;
			width: 100%;
			overflow: hidden;
		}
		#intro .logointro {
			height: 332px;
			position: absolute;
			visibility: hidden;
			width: 340px;
			padding-left: 10px;
			padding-top: 35px;
		}
		#intro a.btn, button, input[type="submit"] {
				font-family: "CamboRegular";
		}


		 #intro .navintroout {
			height: 100%;
		}
		 #intro .navintro {
			background-color: rgba(0, 0, 60, 0.8);
			width: 50px;
			height: 100%;
			float:right;
			right;0;
			}

		#intro .navintro img{
				border: 0 none;
			height: auto;
			max-width: 100%;
			vertical-align: middle;
		}

		#intro .navintro a img{
			height: 30px;
			margin-bottom: 10px;
			width: 30px;
		}

		#intro .navintro ul {
			margin-left: 10px;
			margin-top:  30px;
		}

		#intro .teaser h2{
					margin: 0;
					padding: 0;
					font-family: "CamboRegular",serif;
					font-weight: 600;
					font-stretch: normal; /* default value. No font stretching */
					font-variant: small-caps
					line-height: 1em;
		}
		#intro .teaser1, #intro .teaser2, #intro .teaser3, #intro .teaser4, #intro .teaser5 {
			position: fixed;
			display: none;
			color: #777;
			}
		#intro .teaser1 { left:175px; top:70px; }
		#intro .teaser2 { left:120px; top:323px; }
		#intro .teaser3 { left:440px; top:476px; width:100%;}
		#intro .teaser4 { right:270px; top:410px; }
		#intro .teaser5 { right:160px; top:130px; }
		#intro .teaser1 h2{ font-size: 82px;}
		#intro .teaser2 h2{ font-size: 79px; }
		#intro .teaser3 h2{font-size: 85px; }
		#intro .teaser4 h2{ font-size: 82px; }
		#intro .teaser5 h2{font-size: 76px; }


#nav {
    height: 65px;
    left: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 999;
}
#nav h5{
	font-size: 15px;

	}
#content {
    clear: both;
    float: left;
    width: 100%;
}
#weiter {
    left: 82px;
    position: relative;
}
.ie7 #weiter,
	.ie8 #weiter {
		left: 10px;
}

#anfang {
	position: relative;
	top: -95px;
	}
#weiter, input[type="submit"] {
    background: none repeat scroll 0 0 #5f00ff;
	width: 130px;
}

	/* Webtechnik */

	.WebtechnikPage .main .inner{
			padding: 0;
		}
	.WebtechnikPage .main {
		padding: 0;
		background: #333;
	}
	.webtechnikcontainer{
		margin-left: auto;
		margin-right:auto;
	}
	.webtechnik {
		min-height: 350px;
		height: 350px;
		float: left;
		min-width:350px;
	}

	.WebtechnikPage #webtechnik-2  .webtechnik {
		height: 1200px;
		}


	#kwicks ul{
		margin-right:25px;
		}

	.kwicks{display:block;list-style-type:none;list-style:none;position:relative;margin:0;padding:0}.kwicks>*{display:block;overflow:hidden;padding:0;margin:0}.kwicks.kwicks-processed>*{margin:0;position:absolute}.kwicks-horizontal>*{float:left}.kwicks-horizontal>:first-child{margin-left:0}.kwicks-vertical>:first-child{margin-top:0}
		.kwicks {
				height: 50px;
		}

		.kwicks > li {
				height: 50px;
		}

		.kwicks .Webtechnik { background-color: #4d4d4d; }
		.kwicks .Webtechnik a{
			background-image: url(../images/kwicks/webdesign.png);
			background-repeat: no-repeat;
			background-position: right -50px;
			}
		.kwicks .Philosophie { background-color: #555; }
		.kwicks .Philosophie a{
			background-image: url(../images/kwicks/philosophie.png);
			background-repeat: no-repeat;
			 background-position: right -50px;
			}
		.kwicks .Showroom { background-color: #3d3d3d; }
		.kwicks .Showroom a{
			background-image: url(../images/kwicks/webdesign2.png);
			background-repeat: no-repeat;
			 background-position: right -50px;
			}
		.kwicks .Ausstellung { background-color: #444; }
		.kwicks .Ausstellung a{
			background-image: url(../images/kwicks/referenzen.png);
			background-repeat: no-repeat;
			 background-position: right -50px;
			}
		.kwicks .Ausstellung a:hover,.kwicks .Showroom a:hover, .kwicks .Philosophie a:hover,	.kwicks .Webtechnik a:hover { background-position: right 0px;}

		.WebtechnikPage article p, .WebtechnikPage article h2,  .WebtechnikPage  article h3,  .WebtechnikPage article h4, .WebtechnikPage article h5, .WebtechnikPage article h6,
		.WebtechnikPage article strong {color:white}
		.WebtechnikPage article a{
			color:#eee;
			text-decoration: underline;
			}
		.WebtechnikPage article pre{ background-color:#bbb; }

.RefOrdner .kwicks a,
.WebtechnikPage .kwicks a{
	display:block;
	height:50px;
	outline:none;
   font-size: 22px;
   font-family: "CamboRegular";
    color: #dedede;
    font-stretch: normal; /* default value. No font stretching */
    line-height: 1em;
	text-align:center;
	padding-top: 13px;
}
.WebtechnikPage .kwicks a:hover{
	    color: #858585;
	}
		body .webtechnik1 h3 {color:#aaa;}
		body .webtechnik1 h5 {color:#ccc;}

		.webtechnik2 {
			overflow: hidden;
		}
			.billboard{
				position:absolute;
				width:350px;
				height:350px;
				background:transparent url(../images/billboard.png) no-repeat 0px 0px;
			}
			.bcontainer{
				position:absolute;
				width:350px;
				height:350px;
			}
			.ad{
				width:330px;
				height:330px;
				position:relative;
				margin:10px 0px 0px 5px;
				background-color:#333;
			}
			.typography .ad_1 img{
				width:33px;
				height:330px;
				position:absolute;
				border: none;
			}
			.typography .ad_2 img{
				width:0px;
				height:330px;
				margin-left:12px;
				position:absolute;
				border: none;
			}
			.slice_1{left:0px;}
			.slice_2{left:34px;}
			.slice_3{left:68px;}
			.slice_4{left:102px;}
			.slice_5{left:136px;}
			.slice_6{left:170px;}
			.slice_7{left:204px;}
			.slice_8{left:238px;}
			.slice_9{left:272px;}
			.slice_10{left:306px;}

		.webtechnik3 {
			background: white;
		}
		.typography .webtechnik3 img{
			border: 0;
			}
		.webtechnik4 {
			background: #3d3d3d;
			margin-top: 10px;
			padding:15px;
		}
		.WebtechnikPage .webtechnik4 h3 {
			margin-bottom: 5px;
			}
		.webtechnik5 {
			margin-top:-17px;
		}
		.webtechnik5 .flexslider {
			border: 0;
			}
			.webtechnik5 .flexslider ul li {
				list-style-type: none;
			}
		.webtechnik6 {
			left: 0;
			overflow: hidden;
		}
		.webtechnik6 #parallax1 h2 {
			color: red;
			font-size: 40px;
		}
		.webtechnik6 #parallax1 {
			margin-left:10%;
			margin-top: -290px;
			float:left;
			z-index;11;
		}
		.webtechnik6 #parallax2 h2 {
			color: yellow;
			font-size: 40px;
		}
		.webtechnik6 #parallax2 {
			margin-left:10%;
			margin-top: -240px;
			float:right;
			}
		.webtechnik6 #parallax3 {
			z-index:10;
			float: left;
			position:relative;
			margin-top:230px;
		}
		.webtechnik6 #parallax4 {
			z-index:10;
			float: right;
			position:relative;
			margin-top:-6px;
		}
		.webtechnik6 #parallax3 img, .webtechnik6 #parallax4 img {
			background-image: none;
			border:0;
			width:700px;
			height:60px;
		}
		 .webtechnik6 #parallax5 img {
						width:203px;
			height:40px;
					background-image: none;
			border:0;
		}
		.webtechnik6 #parallax5 {
			z-index:1;
			float: left;
			position:relative;
			margin-top:-120px;
			margin-left:73px;

		}





		.webtechnik7 #todo {
				background-color: grey;
				border-color: #fff;
				-moz-box-shadow: 3px 3px 3px rgba(255,255,255,0.7);
				-webkit-box-shadow: 3px 3px 3px rgba(255,255,255,0.7);
				box-shadow: 3px 3px 3px rgba(255,255,255,0.7);
				color:#ededed;
			}
		.webtechnik7 #todo h2 {
				color:#f4ff70;
				text-align:center;
				font-size: 32px;
				l
			}


.WebtechnikPage .header,
.RefOrdner .header,
.RefOrdner .footer,
.WebtechnikPage .footer,
.RefOrdner .footer .flexslider,
.WebtechnikPage .footer .flexslider {
    background-color: #333;
}
.WebtechnikPage .beforefooter,
.RefOrdner .beforefooter {
display:none;
}
.WebtechnikPage .footer a,
.RefOrdner .footer a,
.WebtechnikPage .flexsliderdesc,
.RefOrdner .flexsliderdesc,
.WebtechnikPage .footer .center,
.RefOrdner .footer .center{
	color: #ccc;
}
.WebtechnikPage .footer .arrow,
.RefOrdner .footer .arrow {
	    color: #97a8e7;
	}
.WebtechnikPage .footer span,
.RefOrdner .footer span

 {
	    color: #777;
	}



	#webtechnik-2 .panorama-viewport {

		border: 12px ridge #616161;
		margin-left: auto;
		margin-right: auto;
	}

	#webtechnik-2 .webtechnik21 h1 {
		color: white;
		margin-bottom: 2em;
		font-family: Verdana;
		font-weight: normal;
		font-size: 25px;
	}
		#webtechnik-2 .webtechnik21 {
		text-align: center;
		color: white;
	}
	#webtechnik-2 .webtechnik21 a {
		color: white;
	}


.panorama-viewport {
	position: relative;
	width: 600px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	text-align: left;
}
.panorama-container {
	position: relative;
	width: 100000px;
	margin: 0;
	padding: 0;

}
.panorama-control {
	position: absolute;
	display: none;
	padding: 0;
	margin: 0;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 30px;
	background: black;
	filter: alpha(opacity=50);
	opacity: .5;
	text-align: left;
}
.panorama-control-left, .panorama-control-right, .panorama-control-pause {
	float: left;
	padding: 0;
	margin: 0;
	color: white;
	text-decoration: none;
	font-size: 20px;
	line-height: 30px;
	width: 33%;
	text-align: center;
	font-family: 'Arial',sans-serif
}
.panorama-control-left:hover, .panorama-control-right:hover, .panorama-control-pause:hover {
	text-decoration: none;
}
.panorama-control-pause {
	text-transform: uppercase;
}
.panorama-panel {
	position: absolute;
	display: none;
	top: 0;
	right: 0;
	background: #009cff;
	filter: alpha(opacity=50);
	opacity: .5;
	color: white;
	padding: 4px;
}
.panorama-panel h2 {
	font-size: 11px;
	text-transform: uppercase;
	font-family: Arial, sans-serif;
	text-align: right;
}
.panorama-panel ul {
	display: none;
}
.panorama {
	position: relative;
	margin: 0;
	padding: 0;
	border: none;
}

/* KENBURNS STYLES */
#kenburns-slideshow {
	position: relative;
	width:600px;
	height: 360px;
	background-color:#292929;
		border: 12px ridge #616161;
	z-index: 1;
	overflow: hidden;
}

.kb-slide{
	position: absolute;
	z-index: 1;
	opacity: 0;
}


.kb-slide img{
	position: relative;
	-webkit-transform: translate3d(0,0,0)
	-moz-transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;

}


.loader {
	width:32px;
	height:32px;
	top:6px;
	left:550px;
	border:5px solid rgba(128,128,128,0.9);
	opacity:.9;
	border-top:5px solid rgba(0,0,0,0);
	border-left:5px dotted rgba(0,0,0,0);
	border-radius:32px;
	-moz-animation:spin .7s infinite linear;
	-webkit-animation:spin .7s infinite linear;
}

@-moz-keyframes spin {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(-360deg); }
}

#kenburns-description{
	width: 600px;
	background-color:#191919;
	color:#999;
	padding:0 22px 22px 22px;

}

#kenburns-description p{
	margin:0;
	padding:0;
	line-height: 18px;
	font-size:12px;

}

#kenburns-description a{
	color:white;
	text-decoration: none;
}
#kenburns-description a:hover{
	color:green;
	text-decoration: none;
}

#kenburns-description a:visited{
	color:white;
}
.title {
	clear: left;
	margin:0;
	padding:15px 0 0 0;
}
#slide-title{
	font-size: 12px;
	float:left;
	color:#7085B3;
}
#status{
	color:#333;
	font-size: 12px;
	float:right;
	clear: right;
}







/* Kontaktpage */
	form#Form_Form {
		width: 100%;
	}
	.kontakt-spalte input:invalid, .kontakt-spalte textarea:invalid 	{
		box-shadow: 0 0 5px blue;
	}

	.kontakt-spalte form input#Form_Form_action_process,
	.kontakt-spalte form input#Form_Form_action_process:visited {
		background: none repeat scroll 0 0 blue;
	}

	.kontakt-spalte .Actions:after {display:none;}

	.row{
	    content: "";
		display: table;
	}
	.kontakt-spalte {
		max-width: 450px;
		margin-left: 20px;
		min-height: 1px;
		display: block;
		float: left;
		margin-left: 0;
		width: auto;
		}

/* Newsletter */
	.SubscriptionPage form input#Form_Form_action_doSubscribe,
	.SubscriptionPage form input#Form_Form_action_doSubscribe:visited {
		background: none repeat scroll 0 0 blue;
	}
	.SubscriptionPage .Actions:after {display:none;}



/* RefOrdner */
	.RefOrdner {
		background:#000;
	}
.RefOrdner .kwicks{
	margin-top:10px;
		margin-bottom:30px;
	margin-left:2%;

	}


.RefOrdner .kwicks li {
	width:31%;
  -webkit-transform: rotate(.5deg);
  -moz-transform: rotate(.5deg);
  -o-transform: rotate(.5deg);
	margin: 5px 5px;
    -moz-border-radius: 12px; /* FF1+ */
	-webkit-border-radius: 12px; /* Saf3-4 */
    border-radius: 12px; /* Opera 10.5, IE 9, Saf5, Chrome */
	}

.refpage {
width:100%;
}



/* Impressum */
	.typography .intro {
		margin-left:auto;
		margin-right: auto;
		border: none;
	}
	.typography .intro td {
		border: none;
	}
	.typography .intro img.right {
		margin: 0px;
		max-width: 100%;
		}
/* Blog */

.BlogHolder .blogSummary h3,
.blogcontent .blogSummary h3,
.BlogEntry .blogEntry h3
 { font-size: 24px; line-height: 31px; margin-bottom: 12px; }


.BlogHolder .blogSummary h3 img,
.blogcontent .blogSummary h3 img,
.BlogEntry .blogEntry h3 img{
	border: 0;
	}


.BlogEntry .blogEntry img.noborder,
.Page .content-container img.noborder,
.WebtechnikPage img.noborder{
	border: none;
	background:none;
	}

/* Programmierung */
#todo h1 {
  margin: 0;
}

#todo ul {
  clear: both;
  padding-left: 10px;
  list-style-type: none;
  padding-top: 3px;
}

#todo li label {
  cursor: pointer;
}

#todo .button {
  float: left;
  margin-right: 10px;
  cursor: pointer;
  text-decoration: underline;
  font-size: 1.1em;
}

#todo .button-disabled {
  float: left;
  margin-right: 10px;
  font-size: 1.1em;
  color: #666;
}
#todo {
  font-family: 'Gochi Hand', cursive;
  margin: 20px;
  border-color: #DEE184;
  background-color: #F4F39E;
  padding: 10px 20px;
  -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg);
  -o-transform: rotate(-1deg);
  word-spacing: 0.1em;

  min-width: 150px;
  min-height: 200px;
}


.DevelopePage .content {
  font-family: 'Gochi Hand', cursive;
  margin: 20px;
  border-color: #DEE184;
  background-color: #7ebdf5;
  padding: 10px 20px;
  -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -o-transform: rotate(1deg);
  word-spacing: 0.1em;
  min-width: 150px;
  min-height: 200px;
}





/* Search Results */
	.typography .searchResults h1 {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	.searchResults p.searchQuery {
	    margin-bottom: 10px;
	    font-size: 15px;
	    font-weight: bold;
	}
	.searchResults ul#SearchResults {
	    padding: 0;
	    border-bottom: 1px solid #e5e5e5;
	    margin:0;
	}
		.searchResults ul#SearchResults li {
		    border-top: 1px solid #e5e5e5;
		    padding: 20px 0;
		    list-style-type: none;
		}
		.searchResults ul#SearchResults p {
		    margin-bottom: 10px;
		}
		.searchResults #PageNumbers a {
		    padding: 0 5px;
		}
		.searchResults #PageNumbers .pagination {
		   	border-bottom: 1px solid #e5e5e5;
		    padding: 20px 0;
		    display:table; /* displays the pagination as a table so that elements stay inline and the middle column adjusts its size to accomodate and the right arrow stays to the right */
		    width:100%;
		}
		.searchResults #PageNumbers .pagination span{
			display:table-cell; /* each element in the pagination div displays as a table cell */
		}
		.searchResults #PageNumbers p {
		    text-align: center;
		    padding:20px 0;
		}
		.searchResults #PageNumbers .next,
		.searchResults #PageNumbers .prev {
		    font-size: 14px;
		    padding: 0 20px;
		    display:table-cell; /* each element in the pagination div displays as a table cell */
		    vertical-align: middle;
		    border-bottom:0 !important;
		}
		.searchResults #PageNumbers .next {
		    margin-left: 15px;
		}
		.searchResults #PageNumbers .prev {
		    margin-right: 15px;
		}


/* style-my-tootltips plugin, tooltip styling */
#s-m-t-tooltip{
	/* basic */
	max-width:300px;
	z-index:10;
	margin:24px 24px 7px 12px;
	/* style and design */
	padding:8px;
	background:#222; /* fallback if rgba not supported */
	background:rgba(0,0,0,80.5);
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-moz-box-shadow:2px 2px 0 rgba(0,0,80,0.15),-1px -1px 0 rgba(255,255,255,0.3);
	-webkit-box-shadow:2px 2px 0 rgba(0,0,80,0.15),-1px -1px 0 rgba(255,255,255,0.3);
	box-shadow:2px 2px 0 rgba(0,0,80,0.15),-1px -1px 0 rgba(255,255,255,0.3);
	/* font */
	 font-family: "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:16px;
	line-height:21px;
	color:#fff;
}



/* DEVICE & RESPONSIVE LAYOUT */
.header .nav-open-button {
    display: none; /* removes the nav toggle button for desktop site */
}
#media-query-trigger {
    /* instead of detecting the width of the window in simple/javascript/script.js it detects the visibility of this element (which is set using media queries)
    instead to trigger the hiding/showing of nav and search in mobile mode */
    display: none;
    visibility: hidden;
}

/* BREAKPOINT 1440px */
@media only screen and (max-width: 1440px) {
		#intro .teaser1 h2{ font-size: 52px;}
		#intro .teaser2 h2{ font-size: 49px; }
		#intro .teaser3 h2{font-size: 55px; }
		#intro .teaser4 h2{ font-size: 52px; }
		#intro .teaser5 h2{font-size: 48px; }
	}

/* BREAKPOINT 1050px */
@media only screen and (max-width: 1088px) {
	.header .primary li a{
		font-size: 17px;
	}

}
/* BREAKPOINT 980px */

@media only screen and (max-width: 1045px) {
	.header .primary li a{
		font-weight: normal;
	}
	.header .primary li {
		margin-left: -3px;
		margin-right: -2px;
	}
}
/* BREAKPOINT 960px */
@media only screen and (max-width: 960px) {
	.content img {
	    max-width: 97%;
	    height: auto;
	}
	.header .primary ul {
	    -webkit-padding-start: 0px; /* removes default webkit padding on ul items */
	}


	.footer .inis{
		display:none;
	}

		#intro .teaser1 h2{ font-size: 33px;}
		#intro .teaser2 h2{ font-size: 39px; }
		#intro .teaser3 h2{font-size: 45px; }
		#intro .teaser4 h2{ font-size: 42px; }
		#intro .teaser5 h2{font-size: 30px; }

	.header .secondary li .text {
    padding-left: 10px;
	}

}

/* BREAKPOINT 748px */
@media only screen and (max-width: 860px) {
	.header .primary li a{
		font-size: 15px;
	}
	   .header .secondary li a {
		letter-spacing:1px;
		}

}
/* BREAKPOINT 700px */
@media only screen and (max-width: 778px) {
	.header .primary li a{
		font-size: 13px;
	}
		#intro .teaser1 h2{ font-size: 26px;}
		#intro .teaser2 h2{ font-size: 29px; }
		#intro .teaser3 h2{font-size: 35px; }
		#intro .teaser4 h2{ font-size: 32px; }
		#intro .teaser5 h2{font-size: 22px; }
}
@media only screen and (max-width: 724px) {
	.header .primary li a{
		font-size: 11px;
	}
}

/* BREAKPOINT 640px */
/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media only screen and (max-width: 640px) {
	body {
	    max-width: 640px;
	}
		.footer .inis {
	display:none;
	}

	.header .primary li a{
		font-size: 14px;
	}
	#media-query-trigger {
	    visibility: visible;
	}
	#startbanner .flexslider {
			margin: 0;
  }
	#startbanner .flexslider h1 {
	font-size: 36px;
	  line-height: 45px;
	  }
	#startbanner .flexslider h2 {
	font-size: 28px;
	  line-height: 35px;
	  }
	.pagebild, .qrcode, .brandtitle{
	display: none;
	}
  .home-spalte {
	width: auto;
	}

	/* Navigation*/
	.tablet-nav .header .brand {
	    float: none;
	    display: inline-block;
	    margin-left: 22px;
	    margin-bottom: 9px;
	}
		.brand h1 {
		    font-size: 40px;
		}
		.brand h1 {
		    padding-right: 100px; /* padding stops .brand text from overlapping the search and nav buttons */
		}
		.tablet-nav .header {
			padding: 0px;
		}
		.tablet-nav .header .inner {
		    padding: 10px 0 0 0;
		    min-height: 0;
		}
		.tablet-nav .header .primary .nav-open-button { /* styling and positioning of the nav toggle button */
		    z-index: 100;
		    width: 20px;
		    height: 20px;
		    position: absolute;
		    right: 21px;
		    top: 0;
		    display: block;
		    cursor: pointer;
		    font-family: 'WebSymbolsRegular';
		    font-size: 20px;
		    color: black;
		}
		.tablet-nav h6 {
		    color: #555;
			font-size: 18px;
			font-family: Georgia;
			position: relative;
			float: right;
		    font-weight: bold;
			border-bottom: 1px solid #5F00FF;
			padding: 0 6px 4px 5px;
			}
		 .WebtechnikPage .nav-open-button h6,
		.RefOrdner .nav-open-button h6 {
		   color: #ccc;
		}
			.tablet-nav .header .endnav {
				right: 6px;
				top: -9px;
				}

		.tablet-nav .header .primary ul {
		    z-index: 10;
		    position: relative;
		    display: none; /* initially hiding the navigation */
		    float: left;
		    margin: 0;
		    padding: 0;
		    white-space: normal;
		    width: 100%;
			right: 0;
		}
		.tablet-nav .header .secondary ul {
		    z-index: 10;
		    position: relative;
		    display: none; /* initially hiding the navigation */
		    float: left;
		    margin: 0;
		    padding: 0;
		    white-space: normal;
		    width: 100%;
		}
		.tablet-nav .header .primary ul li {
			    width: 100%;
			    margin: 0;
			    padding: 0;
			    float: none; /* displays list items vertically */
			    background: none;
			    position: relative;
			    text-shadow: 0 1px #fff;
			}
		.tablet-nav .header .primary ul li:after { /* creates the arrow for the primary nav links */
			    content: '\003e';
			    display: block;
			    position: absolute;
			    right: 20px;
			    top: 0px;
			    font-family: 'WebSymbolsRegular';
			    font-size: 14px;
			    color: #999;
			    text-align: center;
			    vertical-align: middle;
			    line-height: 38px;
			}
		.tablet-nav .header .primary ul li a,
		.tablet-nav .header .primary ul li.current a,
		.tablet-nav .header .primary ul li.section a { /* styling the  top level nav links */
			    padding: 10px 0 10px 22px;
			    font-weight: bold;
			    border-bottom: 1px solid #bbb;
			    color: #434343;
			    background: #e7e7e7;
				line-height: 16px;
			}
		.tablet-nav .header .primary ul li.current a,
		.tablet-nav .header .primary ul li.section a {
				background: #CCCCCC; /* makes background on current top level page slightly darker */
			}
		.tablet-nav .header .primary ul li a:hover {
			    color: inherit;
			}
			.tablet-nav .header .primary li.section:after,
			.tablet-nav .header .primary li.current:after {
			    display: none; /* hides the link arrow on current top level page */
			}
			.tablet-nav .tablet-nav .header nav.primary ul li {
				padding: 0;
			}

			.tablet-nav .primary .menu2	{
				display:block;
			}
			.tablet-nav .primary .menu2 li a { /* side nav link styling */
				padding: 6px 8px;
				display: block;
				font-size: 13px;
		        color: #888;
				border-bottom: none;
			    font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
			}
			.tablet-nav .header .primary ul .menu2 li:after { /* creates the arrow for the primary nav links */
				font-size: 11px;
			}
			.tablet-nav .footer .primary .menu2	{
				display:none;
			}

			#kwicks ul {
				margin-right:0;
				}
			#kwicks .kwicks a {
				font-size: 18px;
				}
			.RefOrdner .kwicks li{
				width: 30%;
				}

	/* Search Form */
	.search-bar { /* adds new styling to mobile search bar */
	    width: 100%;
	    position: relative;
	    top: 0;
	    right: 0;
	    display: none; /* hides searchbar initially */
	    padding: 20px 0;
	    margin: 0;
	    background-color: #E7E7E7;
	}
	.search-dropdown-icon { /* styling for search toggle button */
	    display: block;
	    cursor: pointer;
	    width: 20px;
	    height: 20px;
	    position: absolute;
	    right: 10%;
	      margin-top: 34px;
	    font-family: 'WebSymbolsRegular';
	    font-size: 20px;
	    color: #ededed;
	    text-align: center;
	    line-height: 20px;
	}
	.search-bar form {
	    margin: 0;
	    width: 100%;
	}
		.search-bar form fieldset {
		    padding: 0 18px;
		    left: 0;
		    right: 0;
		    position: relative;
		}
	.search-bar div.field {
	    margin-bottom: 0;
	}
	.search-bar form input.text {
	    width: 89%; /* makes search input full width - allowing for space either side */
	    max-width: 89%;
	    padding: 8px 10% 8px 1%;
	    text-indent: 15px;
	    position: relative;
	    display: block;
	    right: 0;
	    left: 0;
	    border: 1px solid #e5e5e5;
	    background: #fff;
	    font-size: 13px;
	    -moz-border-radius: 20px; /* increase border radius due to increased padding */
		border-radius: 20px;
	}
	.search-bar form input.action {
	    right: 5%;
	    top: 2px;
	}

	form input.text, form textarea, form .textajaxuniquetext, form select {
	    font-size: 13px;
		}

	/* Main Content */
	.main {
	    padding: 20px 0 45px; /* decrease padding so that more content can fit on screen */
	}
	.content-container,
	.sidebar {
	    width: 100%; /* sidenav is now shown above the page content */
	    margin-bottom: 30px;
	}
		.typography h1 { /* decrease size of page heading due to smaller screen */
		    font-size: 30px;
			line-height:35px;
		    margin-bottom: 15px;
		    padding-bottom: 10px;
		}
		.typography p {
		    font-size: 14px;
		    line-height: 23px;
		}
	p.intro {
	    font-size: 19px;
	    line-height: 27px;
	}
	#intro .teaser {
		display:none;
	}

	.main .inner {
	    padding: 0 22px;
	}
	/* Secondry Nav */
	.secondary li a {
	    line-height: 24px;
	}
	.secondary li .arrow {
	    line-height: 26px;
	}
	/* Footer */
	.footer .right {
	    float: left;
	    width: 100%;
	}

}

/* BREAKPOINT 420px */

/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media only screen and (max-width: 420px) {
		#intro .navintroout {
		display:none;
	}
	.webtechnik2 {
		margin-left: -21px;
		}
}



/* Print Styles */
/* Based on HTML5 boilerplate print styles */
@media print {
	* {
	    background: transparent !important;
	    color: black !important;
	    box-shadow: none !important;
	    text-shadow: none !important;
	    filter: none !important;
	    -ms-filter: none !important;
	}
	a,
	a:visited {
	    text-decoration: underline
	}
	a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */
    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }
	thead {
	    display: table-header-group
	}
	tr,
	img {
	    page-break-inside: avoid
	}
	img {
	    max-width: 100% !important
	}
	pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    @page {
        margin: 0.5cm;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    /* Simple theme custom print styles */
	.header,
	.footer,
    .nav-open-button,
    .search-bar,
    .search-dropdown-icon,
    nav.primary {
	 display: none;
	}
}