/* AIS adjustments   */
body  { font-size: 16px ; }

#branding { color: red; }  

.header { margin: 0 -15px ; background-color: #99ccff; background: #99ccff url(/design/trenner.png) 0 0 repeat-x ; } 
.trenner { height: 18px ; width: 100% ; padding: 0 ; background: #99ccff url(/design/trenner.png) 0 0 repeat-x ;  background-position: left center ; opacity: 0.5 ; margin: 5px 0 0 0 ;} 
footer .trenner { padding: 15px 0; margin: 0 ; }

/* toolbar  menu  */
#header-menu { color: #000066; padding: 10px 15px 5px 0 ; margin-right: -15px ; }
#header-menu .navbar-nav > li > a {font-size: 12px ; color: #000066; transition:  all .5s ease-in-out ;}
#header-menu .navbar-nav > li > a:hover { color: #428bca; ; }
#header-menu .navbar-nav > li:last-child { padding:  0 ;  }

 
.row.top { position: relative; top: -15px ; z-index: 0 ; }
.banner { float: left ; position: relative ; padding-top: 10px; width: 100% ; } 

.banner .company { float: left;  font-family: 'Orbitron', sans-serif; font-weight: bold; color: #000066 ; line-height: 21px ; font-size: 18px ; font-style: italic ;  /* opacity: 0.7 ; */ margin: 25px 0 0 0; }
/*.banner .company { float: left; color: #000066 ; margin-left: 0px ; line-height: 21px ; font-size: 21px ; letter-spacing: 0.01em; opacity: 0.7 ;  }*/
.banner a img  { float: left ; }
.volvo-penta {  display: none ; 
font-size: 10px ; margin-top: 10px ; font-style: italic; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif ; color: #000066 ; font-weight: bold; opacity: 0.7 ; line-height: 10px; 
}

.button-volvo-penta { float: left ; margin: -10px 0 0 10px ; width: 120px ; height: 120px ; background: url(/design/button-servicio-oficial-volvo-penta.png) center center no-repeat ; } 

.logo { width: 122px ; height: 120px ; float: left ; position: relative ; top: 0 ; left: 0 ; padding: 0 ;  } 
#logo { padding: 0 15px;  position: relative ; z-index: 9 ;  } 

h1, h2, h3, h4, h5 { color: #666 ; font-family: 'Orbitron', sans-serif; } 
/* h1, h2, h3, h4, h5 { color: #666 ;font-family: 'Exo 2', sans-serif; } */
/* h1, h2, h3, h4, h5 { color: #666 ;font-family: 'Roboto Slab', serif; } */
/* h1, h2, h3, h4, h5 { color: #666 ;font-family: 'Merriweather Sans', sans-serif; } */

/* h2 { text-transform: uppercase; } */
.h5, h5 { font-size: 16px ; }
.title h5 { color: #eee ; }

#menu-language { padding-right: 15px ; padding-top: 18px ; }
.menu-main { background-color: #99ccff ;}

.icon-xs { font-size: 55px ; color: #eee ; } 

.content-main { background-color: #e9e9e9 ; /* background: white url(/design/bg_white.gif) 0 0 repeat ; */min-height: 780px;} 

.footer {  background-color: #99CCFF ; }
.footer .trenner {margin-top: 15px ; } 
.copyright { text-align: right ; padding: 0 15px 15px 0; font-size: 12px ; font-style: italic ; } 

.ais-nav-ajust-right { float: right ; } 

.ais-navbar-default {
	background-image: none ;
	background-color: transparent ;
	border-color: transparent ;
	box-shadow: none ;
	margin: 0 ;
	padding: 0;
	min-height: 0;
}

li { list-style: none ; }
article ul li:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 12px;
    float: left;
    margin-top: 0px;
    margin-left: -17px;
    color: #000066 ;
}
.textblock ul li:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 12px;
    float: left;
    margin-top: 0px;
    margin-left: -17px;
    color: #000066 ;
}




/* haupt menu 1. ebene */
.nav > li > a { font-size: 18px ; border-left: 3px solid transparent ;   transition: all .5s ease-in-out; } 
/* .nav > li:last-child { padding: 5px 0 5px 15px; }*/



/*
 .navbar-nav>li>ul>li>.dropdown-menu { position: relative ; left: 30px;  }  
*/


address { float: left;  background-color: #eee ; margin: 0 ;padding: 15px 0 5px 15px;  border-top: 30px solid #99ccff ; width: 100% ;   } 
li address label {width: 50px; }

/*  Multi level dropdown menu with Bootstrap 3 */
/*  ------------------------------------------ */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

/* ende multi level menu */ 


/* ------------------- */ 
/*   vertical menu responsive   */
/* ------------------- */ 

.nav>li>a:focus, .nav>li>a:hover, .nav>li>a.active1 {
    text-decoration: none;
    background-color: #eee;
    border-left: 3px solid #000066;	
}

ul.nav-stacked {
	background-color: #C4E1FF;
}
/* 1. ebene */
.nav-stacked>li { width: 100% } 

/* 2. ebene */
.nav > li > ul > li > a {
	padding: 3px 0 3px 35px ; 
	font-size: 14px ; 
}


/* 3. ebene */
.nav > li > ul > li > ul > li > a {
	padding: 3px 0 3px 55px ; 
	font-size: 14px ; 
}













#menu-social .form-control {
	 height: auto ; 
	 padding:  0 2%; 
}


.list-inline.ais-list-inline>li {
    padding-left: 15px; 
    padding-right: 0px; 
}
	

.ais-carousel-indicators {
	left: 5%;
	bottom: 0% ;
	list-style: square ;
}

.carousel-indicators li { 	list-style: square  !important ; }


.ais-carousel-caption {
	right: 2%;
	left: 50%;
	padding: 10px;
	background-color: white ;
	opacity: 0.85;
	text-align: left;
}

/*  Referenzen  */

.gradient_image_off { cursor: default  ;  }	
	
.gradient_image, .gradient_image_off  { 
	opacity: 0.7; 
 	filter: grayscale(100%);  
	-webkit-filter: grayscale(100%); 
	filter: gray; 
	background-color: black;  /* Old browsers */
		
	-webkit-transition:opacity 500ms ease-out;
	-moz-transition:opacity 500ms ease-out;
	-o-transition:opacity 500ms ease-out;
	transition:opacity 500ms ease-out;

	background: rgb(60,60,60); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNjM2MzYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYzNjM2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(60,60,60,1) 0%, rgba(60,60,60,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(60,60,60,1)), color-stop(100%,rgba(60,60,60,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(60,60,60,1) 0%,rgba(60,60,60,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(60,60,60,1) 0%,rgba(60,60,60,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(60,60,60,1) 0%,rgba(60,60,60,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(60,60,60,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c3c3c', endColorstr='#3c3c3c',GradientType=0 ); /* IE6-8 */
}

.reference { width: 100%;  overflow: hidden }

.reference img { transition:  all .5s ease-in-out ; }
.reference img:hover { opacity: .5 ; cursor: pointer ; transform: scale(1.2) ; 
    background-image: -webkit-linear-gradient(top,#e8e8e8 0,#f5f5f5 100%);
    background-image: -o-linear-gradient(top,#e8e8e8 0,#f5f5f5 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#e8e8e8),to(#f5f5f5));
    background-image: linear-gradient(to bottom,#e8e8e8 0,#f5f5f5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
    background-repeat: repeat-x;
	background-color: green ;
	}

	
/* ---- isotope ---- */

.grid { background: #e9e9e9 ;  width: 100%; }

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */
.grid-sizer,
.grid-item  { width: 33.333% ;  padding: 17px 0 0 17px; }
.grid-sizer { padding: 0 ; }
.grid-item.checked {  width: 50%;}


.modal-open { padding-right: 0 !important ; } 

.thumbnail {
    text-align: center;
    width: 100%;
    border: none;
    padding: 0;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}
	
.thumbnails {
	padding: 0px;
	margin-bottom: 17px; 
	border: none ;
	cursor: pointer  ;
}

.grid .thumbnails { margin-bottom: 0 ;}

.first { margin-top: 18px ;} 
.ais-cap { height: 18px; }

.leistungen { 
	width: 50% ;
	min-height: 400px ; 
	margin: 0 auto; 
	font-size: 12px ;
	color: white ;
}

.modal-body table { width: 100% ; border: none ; border-color: transparent ;} 
	

.imgtextblock { position: relative ; } 
.greyout { opacity: 0.1 ; 
	-webkit-transition:opacity 500ms ease-out;
	-moz-transition:opacity 500ms ease-out;
	-o-transition:opacity 500ms ease-out;
	transition:opacity 500ms ease-out;
	}
.textblock { display: none ;  position: absolute ; top: 0; left: 0 ; } 

/*  ----  */
/*  Boots Details */

a.boot_item {text-decoration: none ; }
.boot_item:hover {    } 
table.bootdetails { width: 100% ; } 
table.bootdetails td { padding: 3px ; } 
table.bootdetails tr { vertical-align: top ;  } 
table.bootdetails tr.topic { font-weight: bold; border-bottom: 1px solid #ccc ; }
table.bootdetails tr:nth-child(even) {
    background-color: #c4e1ff;
}



/* ----------------------------  */
/* Custom  the menue handling    */
/* just/only for mobile devices  */
/*                               */
/* adjust body when menu is open */
body.slide-active {
    overflow-x: hidden
}
/*first child of #page-content so it doesn't shift around*/
.no-margin-top {
    margin-top: 0px!important
}
/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
#page-content {
    position: relative;
    padding-top: 0px;
    left: 0;
}
#page-content.slide-active {
    padding-top: 0
}
/* put toggle bars on the left :: not using button */
#slide-nav .navbar-toggle {
    cursor: pointer;
    position: relative;
    line-height: 0;
    float: left;
    margin: 0;
    width: 30px;
    height: 40px;
    padding: 10px 0 0 0;
    border: 0;
    background: transparent;
}
/* icon bar prettyup - optional */
#slide-nav .navbar-toggle > .icon-bar {
    width: 100%;
    display: block;
    height: 3px;
    margin: 5px 0 0 0;
	background-color: #000066;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
    background: #000066 ;
}
.navbar-header {
    position: relative;
	width: 100%;
    height: 50px;
}
/* un fix the navbar when active so that all the menu items are accessible */
.navbar.navbar-fixed-top.slide-active {
    position: relative ;
}

/*  masonry  */

.masonry.fadeIn {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}
.masonry {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    opacity: 0;
    transform: translate3d(0, 100px, 0);
    -webkit-transform: translate3d(0, 100px, 0);
    -moz-transform: translate3d(0, 100px, 0);
}

.masonryFlyIn .masonry-item.fadeIn {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

.container .project {
    padding: 0 15px;
}
.masonryFlyIn .masonry-item {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    -webkit-transform: translate3d(0, 50px, 0);
    -moz-transform: translate3d(0, 50px, 0);
}
.container .masonry-item {
    margin-bottom: 30px;
}
.project {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    opacity: 1;
    padding: 0;
}
.masonry-item {
    max-width: 100%;
	padding: 0 0 15px 15px;
}

.project .image-tile {
    margin: 0;
}
.inner-title {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    opacity: 1;
}
.image-tile {
    overflow: hidden;
    position: relative;
    margin-bottom: 24px;
}

.inner-title.hover-reveal:before {
    opacity: 0;
}
.inner-title:before {
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(34, 34, 34, 0.9)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#292929', GradientType=0);
    pointer-events: none;
}

.inner-title.hover-reveal:hover:before {
    opacity: 1;
}

.inner-title.hover-reveal .title {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    -webkit-transform: translate3d(0, 50px, 0);
    -moz-transform: translate3d(0, 50px, 0);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

.inner-title.hover-reveal:hover .title {
    opacity: 1;
    transform: translate3d(0, 0px, 0);
    -webkit-transform: translate3d(0, 0px, 0);
    -moz-transform: translate3d(0, 0px, 0);
}

.inner-title .title {
    position: absolute;
    width: 100%;
    bottom: 24px;
    z-index: 5;
}

.inner-title:hover {
    opacity: .95;
}


/* lightbox */


.lightbox-grid,

.lightbox-grid ul,

.lightbox-grid li {

  position: relative;

  overflow: hidden;

}

.lightbox-grid li {

  width: 50%;

  float: left;

  border: 8px solid rgba(0, 0, 0, 0);

  transition: all 0.3s ease;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  opacity: 1;

}

.lightbox-grid li:hover {

  opacity: .9;

}

.square-thumbs li {

  /* height: 285px;*/

}

.third-thumbs li {

  width: 33.33333vw;

  height: 33vw;

  border: none;

}







/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */
@media (max-width:767px) { 

	h1 { font-size: 24px ; line-height: 34px;}
	h2 { font-size: 22px ; line-height: 30px; }

	/*.banner .company { margin-top: 0 ; }  */

	#slide-nav .container {
	    margin: 0;
	    padding: 0!important;
	}
	
	.row.top {top: 0 ; }
	#logo { padding: 0 ; } 
	
	.button-volvo-penta { position: absolute ; top: 20px ; right: 0 ; } 

	address { padding-left: 30px !important; background-color: #99ccff ; }
	
	.navbar-brand {	margin: -20px 0 0 40px; font-size: 26px ; padding: 0 ; color: #000066 ;  }
	
	#slide-nav .navbar.slide-active {
	    position: absolute;
	    width: 80%;
	    top: -1px;
	    z-index: 1000;
	}
	#slide-nav #slidemenu {
	    background: #f7f7f7;
	    left: -100%;
	    width: 80%;
	    min-width: 0;
	    position: absolute;
	    padding-left: 0;
	    z-index: 2;
	    top: -8px;
	    margin: 0;
	}
	#slide-nav #slidemenu .navbar-nav {
	    min-width: 0;
	    width: 100%;
	    margin: 0;
	}
	#slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
	    min-width: 0;
	    width: 80%;
	    white-space: normal;
	}
	#slide-nav {
	    border-top: 0
	}
	#slide-nav.navbar-inverse #slidemenu {
	    background: #333
	}
	/* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
	#slide-nav #navbar-height-col {
	    position: fixed;
	    top: 0;
	    height: 100%;
	    width: 80%;
	    left: -80%;
	    background: #eee;
	}
	#slide-nav.navbar-inverse #navbar-height-col {
	    background: #333;
	    z-index: 1;
	    border: 0;
	}
	#slide-nav .navbar-form {
	    width: 100%;
	    margin: 8px 0;
	    text-align: center;
	    overflow: hidden;
	    /*fast clearfixer*/
	}
	#slide-nav .navbar-form .form-control {
	    text-align: center
	}
	#slide-nav .navbar-form .btn {
	    width: 100%
	}
	
	
	
}

@media  (max-width: 767px) and  (orientation: landscape) {
	.banner .company {
	    position: relative;
		margin-top: 20px;
		z-index: 9 ;
	}
	.row.top { top: -15px; height: 10px ;}
}


@media (min-width:768px) { 
	#page-content {
	    left: 0!important
	}
	
	.banner .company { line-height: 46px ; font-size: 46px ; z-index: 0 ; }
	
	#logo { padding: 0 ; } 
	
	.navbar.navbar-fixed-top.slide-active {
	    position: fixed
	}
	.navbar-header {
		display: none; 
	    left: 0!important
	}
}

/* @media (max-width: 991px) and (min-width: 768px) { */
@media (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation : portrait)  {
	/* iPad hochkant */
	.container-fluid {
  	  /*	margin: 28px;*/
	}
	
	.banner .company { margin-top: 35px ; line-height: 42px ; font-size: 32px ;  }
	
	.nav > li > ul > li > a {
 	   padding: 5px 0 5px 30px;
    	font-size: 13px;
	}
	.nav > li > ul > li > ul > li > a {
   		 padding: 5px 0 5px 45px;
    	font-size: 13px;
}
	
	
}


#captchaReload, #captchaHelp {
    text-decoration: underline;
    color: #337ab7;
    cursor: pointer;
}