/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 0.9em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
	outline:none;
}

audio:active,
canvas:active,
img:active,
video:active {
	outline:0;
}

video source{
	top:-30px;
	position:relative;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
@font-face { 
   font-family: 'Big Noodle Titling'; 
   src: url('fonts/big_noodle_titling/big_noodle_titling.eot'); 
   src: url('fonts/big_noodle_titling/big_noodle_titling.eot?#iefix') 
   format('embedded-opentype'), 
   url('fonts/big_noodle_titling/big_noodle_titling.svg#Big Noodle Titling') 
   format('svg'), url('fonts/big_noodle_titling/big_noodle_titling.woff') 
   format('woff'), url('fonts/big_noodle_titling/big_noodle_titling.ttf') 
   format('truetype'); 
   font-weight: normal; 
   font-style: normal;
}

body{
	background-color:#eee;
	/*background-image:url(../img/background-eee.png);*/
}

a:active, a:focus {
	outline: none;
}

a{
	outline:0;
	text-decoration:none;
	color:#499BEA;
	font-size:medium;
}

h2{
	font-family: 'Big Noodle Titling';
	color:#F30;
	text-transform:uppercase;
	font-weight:lighter;
	font-size:2.5em;
}

#Sitecontent ul{
	margin:0;
	padding:0;
	
}

#Sitecontent ul li{
	list-style:none;
	margin:0;
	padding:0;
}

.main{
	width:1024px;
	min-height:600px;
	margin:180px auto 0 auto;
}

.header{
	top:0px;
	height:110px;
	background-color:#252525;
	/*background-image:url(../img/headerbackground.png);*/ 
	border-bottom:10px solid #ff3300;
	position:fixed;
	width:100%;
	z-index:300;
	margin-bottom:20px;
}

.headercontainer{
	height: 150px;
    margin: 0 auto;
    width: 1024px;	
}

.slidertop{
	position:absolute;
	/*top:-500px;*/
	width:1024px;
	height:450px;
	margin:60px auto;
	position:relative;
	margin-bottom:20px;
	
	/*overflow:hidden;
	background-position:center 120px;
	background-repeat:no-repeat;*/
}

.slide img{
	width:100%;
}

/*.sliderimage{
	width:1024px;
	height:450px;
	overflow:hidden;
	position:relative;
	text-align:center;
}*/

.slidertop .teaser{
	background-color: #2AD75F;
    border-top: 2px solid #FFFFFF;
    color: #FFFFFF;
    /*display: table;*/
    font-weight: bold;
    padding: 10px 40px;
    position: relative;
    text-align: center;
   /* top: 410px;*/
    /*width: 100%;*/
	font-size:16px;
}

.arrowLeft{
	background:url(../img/arrow.png);
	display:block;
	position:absolute;
	top:200px;
	left:25px;
	width:50px;
	height:50px;
	float:left;
	z-index:10000;
}


.arrowLeft:hover{
	cursor:pointer;
	background:url(../img/arrow.png) 0 -50px;
}

.arrowRight:hover{
	cursor:pointer;
	background:url(../img/arrow.png) -50px -50px;
}

.arrowRight{
	background:url(../img/arrow.png) -50px 0; 
	display:block;
	position:absolute;
	top:200px;
	left:1000px;
	width:50px;
	height:50px;
	float:right;
}

.logo{
	position:relative;
	left:-40px;
	font-size:30px;
	font-weight:bold;
	padding:5px 0 0 10px;
	width:1044px;
	/*height:45px;
	float:left;*/
	overflow:hidden;
}

.playyourpower{
	left: 400px;
    position: relative;
    top: -50px;
}

.menu{
	height:50px;
	/*margin-left:340px;*/
	margin-left:500px;
	position:relative;
	float:left;
	top:-115px;
	/*width:700px;*/
	width:700px;
}

.menu ul{
	padding:0;
}

.menu ul li{
	font-family: 'Big Noodle Titling';
	font-weight:lighter;
	list-style-type:none;
	float:left;
	padding:0 8px;
	min-width:50px;
	margin-right:5px;
	text-transform:uppercase;
	font-size:24px;
	/*font-weight:bold;*/
	margin-top:4px;
	text-align:center;
	letter-spacing:1px;
}

.menu ul #homesite{
	margin-top:14px;
}

.menu ul .komplett:hover{
	background-color:#2AD75F;
	color:#fff;
}

.menu ul .komplett:hover a{
	color:#fff;
}

.menu ul li a{
	color:#fff;
	text-decoration:none;
}

.menu ul li a:hover{
	color:#0094dc;
}

.activ a{
	color:#0094dc !important;
}

#homesite a{
	background:url(../img/icon/home.png); 
	width:15px;
	height:15px;
	display:block;
	margin-left:35px;
}

#homesite a:hover{
	background:url(../img/home.png) 0 -15px !important;
}

#homesite .activHome{
	background:url(../img/home.png) 0 -15px !important;
}

.logo .rot{
	color:#ed1c24;
}

.logo .white{
	color:#fff;
}

.content{
	min-height:250px;
	margin-bottom:40px;
	/*background:#CCC;
	padding:20px 20px 20px 40px;*/
}

.content .inner-container{
	margin-bottom:20px;
	/*background-color:#FFF;*/
	padding:20px;
	
}

.content .inner-container h2{
	margin-top:0;
}

.content .inner-container img{
	float:left;
	margin-right:50px;
	margin-bottom:10px;
}

.content .p3col{
	float:left;
	width:294px;
}

.content .p2col{
	float:left;
	width:466px;
}

.middle{
	margin-right:10px;
	padding:20px 20px 20px 20px !important;
}

.left{
	margin-right:10px;
	padding:20px 20px 20px 20px !important;
}

.content .slider{
	width:900px;
	height:350px;
	border:10px solid #fff;
}

.content3col{
	width:280px;
	float:left;
	margin-right:82px;
	margin-bottom:40px;
	min-height:200px;
	/*border:5px solid #fff;
	background-color:#2ad75f;*/
	position:relative;
}

.buttonHome{
	width:180px;
	min-height:150px;
	margin-right:210px;
	padding-left:20px;
}

.galerie{
	margin-right:72px;
	padding:0 12px;
	width:260px;
	border:none;
	min-height:140px;
	cursor:pointer;
}

.site-icon{
	min-height:190px !important;
	width:180px;
	float:right;
	margin-left:50px;
}

.auto{
	margin-right:55px;
	/*padding:10px;*/
	width:260px;
	border:none;
	min-height:260px;
	overflow:hidden;
}

.auto-footer{
	position:absolute;
	left:0px;
	width:260px; 
	background-color:#F30; 
	height:25px; 
	top:230px; 
	text-align:center; 
	color:#FFF; 
	padding-top:5px;
	text-transform:uppercase;
	font-weight:bold;
	letter-spacing:0.1em;
	z-index:200;
}

.auto-footer a{
	text-decoration:none;
	color:#fff;
	display:block;
	background-image:url(../img/icon/vollbild_icon.png);
	background-position:233px -3px;
	background-repeat:no-repeat;
}

.auto-footer a:hover{
	background-image:url(../img/icon/vollbild_icon_hower.png);
	background-position:234px -2px;
	background-repeat:no-repeat;
}

.auto-footer-home{
	position:absolute;
	left:-10px !important;
	width:420px; 
	background-color:#0094dc; 
	height:25px; 
	top:5px !important; 
	text-align:center; 
	color:#FFF; 
	padding-top:5px;
	text-transform:uppercase;
	font-weight:bold;
	letter-spacing:0.1em;
	z-index:200;
}

.auto-footer-home a{
	text-decoration:none;
	color:#fff;
	display:block;
	background-image:url(../img/icon/vollbild_icon.png);
	background-position:390px -3px;
	background-repeat:no-repeat;
	width:420px;
}

.auto-footer-home a:hover{
	background-image:url(../img/icon/vollbild_icon_hower.png);
	background-position:391px -2px;
	background-repeat:no-repeat;
}

.referenz{
	margin-right:50px;
	max-height:260px;
	width:260px;
	position:relative;
	/*top:-260px;*/
}

.referenz-text{
	position:relative;
	height:200px;
	color:#fff;
	padding:20px;
}

.referenz-text h4{
	margin-top:0px;
	margin-bottom:2px; 
}

.referenz-text p{
	margin-top:0px;
	margin-bottom:10px;
}

.link-img{
	float:right !important;
	top:5px;
	position:relative;
}
	
.bounce-hidden{
	overflow:hidden;
	margin-right:101px;
	width:260px;
	background-color:#000;
	max-height:260px;
}

.video{
	margin-right:70px;
	padding:10px;
	width:260px;
	border:none;
	min-height:130px;
	background-color:#333;
	cursor:pointer;
}

.videostart{
	padding:10px;
	border:none;
	background-color:#333;
	cursor:pointer;
	width:400px;
}

.galerie-footer{
	position:absolute; 
	width:260px; 
	background-color:#F30; 
	height:25px; 
	top:165px; 
	text-align:center; 
	color:#FFF; 
	padding-top:5px;
}

.galerie-footerMotor{
	position:relative; 
	width:260px; 
	background-color:#F30; 
	height:25px; 
	/*top:165px; */
	text-align:center; 
	color:#FFF; 
	padding-top:5px;
	text-transform:uppercase;
}


.video-footer{
	background:url(../img/arrow.png) -50px 0; 
	display:block;
	position:absolute;
	top:165px;
	left:245px;
	width:50px;
	height:50px;
	cursor:pointer;
}

.video-footer:hover{
	background:url(../img/arrow.png) -50px -50px;
}

.video-footer-home{
	background:url(../img/arrow.png) -50px 0; 
	display:block;
	top:245px !important;
	left:380px !important;
	width:50px;
	height:50px;
	cursor:pointer;
	position:absolute !important;
}

.video-footer-home:hover{
	background:url(../img/arrow.png) -50px -50px;
}

.video-overlay{
	background-color:RGBA(0,0,0,0.8);
}

.button{
	background:#ed1c24;
	color:#FFF;
	font-weight:bold;
	width:180px;
	height:20px;
	padding:5px 0;
	text-align:center;
	text-transform:uppercase;
	position:absolute;
	left:20px;
	top:175px;
	text-decoration:none;
}

.content3col .button img{
	margin-right:10px;
	position:relative;
	top:2px;
	float:right;
}

.icon60{
	display:block;
	width:60px;
	height:60px;
	border:1px solid #fff;
	background:#2ad75f;
}

.last{
	margin:0;
	padding-right:0;
}

.footer{
	height:20px;
	background:#252525; /*#252525*/
	/*background-image:url(../img/headerbackground.png);*/
	background-repeat:repeat-x;
	border-top:5px solid #ff3300;
	margin:0;
	position:fixed ;
	bottom:0;
	width:100%;
	z-index:250;
	cursor:pointer;
}

.footercontainer{
	margin:0 auto;
	width:1024px;
	padding:0px 20px 20px 40px;
	height:180px;
	left:0px;
	right:0px;
	bottom:0px;
}

.footer3col{
	float:left;
	margin-right:30px;
	width:400px;
	height:130px;
	padding:10px;
	color:#fff;
	font-size:12px;
}

.footer3col ul{
	margin:0;
	float:left;
}

.footer3col .line{
	border-right: 1px solid #444444;
  padding-right: 40px;
}

.footer3col ul li{
	font-size:12px;
	display:block;
	list-style-type:none;
	color:#fff;
	text-transform:uppercase;
	margin-bottom:5px;
}

.footer3col ul li a{
	text-decoration:none;
	display:block;
	color:#fff;
}

.footer3col ul li a:hover{
	color:#0094DC;
}


/* ==========================================================================
   Sozial Icons
   ========================================================================== */

.sozialIcon{
	width:35px;
	height:35px;
	float:left;
	display:block;
	cursor:pointer;
	margin-right:20px;
}

.facebook{
	background:url(../img/icon/facebook.png) 0 0;
}

.facebook:hover{
	background:url(../img/icon/facebook.png) 0 -35px;
}

.twitter{
	background:url(../img/icon/twitter.png) 0 0;
}

.twitter:hover{
	background:url(../img/icon/twitter.png) 0 -35px;
}

.google{
	background:url(../img/icon/googleplus.png) 0 0;
}

.google:hover{
	background:url(../img/icon/googleplus.png) 0 -35px;
}

.xing{
	background:url(../img/icon/xing.png) 0 0;
}

.xing:hover{
	background:url(../img/icon/xing.png) 0 -35px;
}

.vimeo{
	background:url(../img/icon/vimeo.png) 0 0; 
}

.vimeo:hover{
	background:url(../img/icon/vimeo.png) 0 -35px;
}

/* ==========================================================================
   Slider
   ========================================================================== */




.scrollable {
  /* required settings */
  position:relative;
  overflow:hidden;
  width: 1024px;
  height:450px;
}
 
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accommodate scrollable
items.  it's enough that you set width and height for the root element
and not for this element.
*/
.scrollable .items {
  /* this cannot be too large */
  width:20000em;
  position:absolute;
}
 
/*
a single item. must be floated in horizontal scrolling.  typically,
this element is the one that *you* will style the most.
*/
.items .sliderimage {
  float:left;
  width:1024px;
  height:450px;
  overflow:hidden;
}

/* ==========================================================================
   Overlay Galerie
   ========================================================================== */

.apple_overlay {
 
    /* initially overlay is hidden */
    display:none;
 
    /* growing background image */
    background-image:url(../img/trans1px.png);
 
    /*
      width after the growing animation finishes
      height is automatically calculated
      
    width:1024px;*/
 
    /* some padding to layout nested elements nicely  */
    padding:15px;
 
    /* a little styling */
    font-size:11px;
	margin:auto auto;
}
 
/* default close button positioned on upper right corner */
.apple_overlay .close {
    background-image:url(../img/icon/close.png); 
    position:absolute; 
	right:-10px; 
	top:-10px;
    cursor:pointer;
    height:35px;
    width:35px;
}

/* black version of the overlay. simply uses a different background image */
div.apple_overlay.black {
/*background-image:url(../img/overlay/transparent.png);*/
background-color:#333;
color:#fff;
}

/* ==========================================================================
   Overlay Video
   ========================================================================== */



.apple_overlay_video {
 
    /* initially overlay is hidden */
    display:none;
 
    /* growing background image */
    background-image:url(../img/overlay/black.png);
 
    /*
      width after the growing animation finishes
      height is automatically calculated*/
      
    width:600px;
 
    /* some padding to layout nested elements nicely  */
    padding:35px;
 
    /* a little styling */
    font-size:11px;
	margin:auto auto;
	z-index:25000;
}

.apple_overlay_video_home {
 
    /* initially overlay is hidden */
    display:none;
 
    /* growing background image */
    background-image:url(../img/overlay/black.png);
 
    /*
      width after the growing animation finishes
      height is automatically calculated*/
      
    width:1280px;
 
    /* some padding to layout nested elements nicely  */
    padding:35px;
 
    /* a little styling */
    font-size:11px;
	margin:auto auto;
	z-index:25000;
}
 
/* default close button positioned on upper right corner */
.apple_overlay_video .close {
    background-image:url(../img/icon/close.png); 
    position:absolute; right:30px; top:30px;
    cursor:pointer;
    height:35px;
    width:35px;
}

.apple_overlay_video_home .close {
    background-image:url(../img/icon/close.png); 
    position:absolute; right:30px; top:30px;
    cursor:pointer;
    height:35px;
    width:35px;
}
/* black version of the overlay. simply uses a different background image */
div.apple_overlay_video.black {
background-image:url(../img/trans1px.png);
color:#fff;
}

div.apple_overlay_video_home.black {
background-image:url(../img/trans1px.png);
color:#fff;
}

/* ==========================================================================
  Form
   ========================================================================== */


label{
	width:200px;
	height:30px;
	display:block;
	float:left;
	margin-bottom:20px;
}

select,
input{
	width:267px;
	height:27px;
	border:1px solid #ccc;
	background:#fff;
	padding:3px 0 0 5px;
	color:#999;
}

select{
	width:278px;
}

textarea{
	width:777px;
	height:300px;
	border:1px solid #ccc;
	background:#fff;
	padding:3px 0 0 5px;
	color:#999;
}

.text-area{
	height:300px;
	margin-bottom:20px;
}

.plz{
	width:60px;
}

.label-plz{
	width:70px;
	float:left;
}

.ort{
	width:197px;
}

.label-ort{
	width:160px;
	float:left;
}

.label-after{
	width:238px;
	float:left;
	display:block;
}

.form-left{
	width:470px;
	float:left;
	margin-right:20px;
	padding-right:19px;
	border-right:1px solid #eee;
}

.trenner{
	width:2px;
	background-color:#eee;
	margin-right:19px;
	display:block;
	height:100%;
}

.form-right{
	width:474px;
	float:left;
}

input[type="submit"]{
	width:783px;
	height:33px;
	font-weight:bold;
	color:#333;
	text-transform:uppercase;
	background-color:#0094DC; 
}

/* error message */
.error {
  /* supply height to ensure consistent positioning for every browser */
  height:25px;
  background-color:#ccc;
  border:1px solid #E1E16D;
  font-size:11px;
  color:#000;
  padding:3px 10px;
  margin-left:-2px;
  position:relative;
 

  /* CSS3 spicing for mozilla and webkit
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  -moz-border-radius-bottomleft:0;
  -moz-border-radius-topleft:0;
  -webkit-border-bottom-left-radius:0;
  -webkit-border-top-left-radius:0;
 
  -moz-box-shadow:0 0 6px #ddd;
  -webkit-box-shadow:0 0 6px #ddd; */
}

/* ==========================================================================
   Easy Slide
   ========================================================================== */
.qitem {
    /* width and height must be even number */
    width:126px;
    height:126px;    
    
    /* some styling for the item */
    border:4px solid #222;    
    margin:5px 5px 5px 0;
    background: url('bg.gif') no-repeat;
    
    /* make sure the four divs are hidden after changing the position */
    overflow:hidden;
    
    /* absolute position enabled for children elements*/
    position:relative;
    
    /* display item in single row */
    float:left;
    
    /* hand symbol for ie and other browser */
    cursor:hand; cursor:pointer;
}
    .qitem img {
        border:0;
    }
    /* styling for caption, position absolute is a must to set the z-index */
    .qitem .caption {
        position:absolute;
        z-index:0;    
        color:#ccc;
        display:block;
    }
        .qitem .caption h4 {
            font-size:12px;
            padding:10px 5px 0 8px;
            margin:0;
            color:#369ead;
        }
        .qitem .caption p {
            font-size:10px;    
            padding:3px 5px 0 8px;
            margin:0;
        }
/* Generic setting for corners */
.topLeft, .topRight, .bottomLeft, .bottomRight {
    /* allow javascript to move the corners */
    position:absolute;
    background-repeat: no-repeat;
    z-index:200;
}
/* set the background position for different corners */
.topLeft {
    background-position: top left;     
}
.topRight {
    background-position: top right;
}
.bottomLeft {
    background-position: bottom left;
}
.bottomRight {
    background-position: bottom right;
}
.clear {
    clear:both;    
}

/* ==========================================================================
   Buttons
   ========================================================================== */



.mvLogin{
	display:block;
	text-decoration:none;
	text-transform:uppercase;
	color:#fff;
	width:200px;
	height:23px;
	text-align:center;
	background-color: #0094dc;
	padding-top:7px;
}


 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: 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: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

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