/*/////////////// Main Style Sheet for Kranich Automobile ///////////////////


/******* General *******/ 

* { box-sizing: border-box; margin: 0; vertical-align:top; }


/*** basic formats for backgrounds ***/

.negative { background:rgb(0,88,122); }
.positive { background:rbg(245,245,245); } 

fieldset { display: inline-block; max-width: 100%; }
fieldset.half 		{ width: 47%; }
fieldset.overview 	{ width: 30%; }

/****** Containers and wrappers ********/
#startwrapper { display:block; width:30%; max-width:800px; margin: 0 auto; text-align:center; }
main { display:block; width:1200px; min-height:200px; margin: 0 auto; display:flex; flex-wrap:wrap; margin:50px auto; justify-content:space-between; align-items:stretch; }
.container { position:relative; padding:8px 28px; margin-bottom:20px; }
.half { display:inline-block; width: 49%; }
.full { display:block; width:100%;  }
.half h1 { margin-bottom:36px; }
.msg { position: relative; display:block; margin:60px auto; padding:5px 20px; box-shadow: 1px 2px 7px 0 rgba(0,0,0,0.4); }
.msg_main {	 width: 600px;   }
.col-2 { display:block; width:100%; column-count:2; column-gap: 60px; }
.col-2 h2 { break-before:column; column-break-before:always; }
.col-3 { display:block; width:100%; margin:20px 0; column-count:3; column-gap: 80px; column-rule-style: solid; column-rule-width: 1px; }
.positive .col-3 { column-rule-color: rgb(0,88,122); }
.negative .col-3 { column-rule-color: rgb(0,88,122); }
.left  { display:inline-block; position:relative; width:48%; height:300px; float:left;  margin:90px 0 0 0; overflow:hidden; text-align:right; }
.right { display:inline-block; position:relative; width:48%; height:300px; float:right; margin:90px 0 0 0; overflow:hidden; text-align:left;  }
.left img, .left iframe  { display:inline-block; width:68%; float:left;  margin-right:30px; }
.right img, .right iframe { display:inline-block; width:68%; float:right; margin-left: 30px; }
main>h1 { margin:30px auto; }
.banner { position:relative; width:100%; display:flex; margin-top:14vh; }
.display { margin:40px auto; width:60%; max-width:800px; }


/***** Forms *****/

.msg_main input, .msg_main input[type=submit] { margin:10px 0; width:100%; text-align:center; }


/****** Branding ******/
/* colors */
.negative .main_color { fill:white; } /* logo */
.positive .main_color { fill:rgb(0,88,122); } /* logo */
.negative .sec_color, .negative a.sec_color { color:#AAB4BE; fill:#AAB4BE; } /* logo */
.positive .sec_color, .positive a.sec_color { color:#6A747C; fill:#6A747C; } /* logo */

.positive .halftone   { background:rgba(0,88,122,.2); }

#startlogo { display:block; width:100%; margin:40px 0; }	/* on landing page */
#navlogobox { display:block; width:300px; margin:40px 50px 0 50px; }/* in navigation bar / header */
#navlogo { display:block; width:100%; margin:0; }  	/* in navigation bar / header */


/***** images *****/
.cover { object-fit:cover; }
.doc { position:relative; overflow:hidden; display:inline-flex; align-items:flex-end; margin: 0 12px 12px 0;  }
.doc img { height:40px; width:auto; margin-right:5px; }


/***** Header, Footer, Navigation *****/

header { display:flex; width:1200px; margin:0 auto 50px auto; justify-content:center; align-items:flex-end; background:none; }

#switchLang { position:fixed; top:5px; left:75%; background:none; display:block; }

 /* Navbar containers, one left and one right of the logo */
nav { overflow: hidden; width: 400px; display:flex; justify-content:space-between; align-items:center; background:none; }

/* Links inside the navbar */

nav ul { display:inline-block; background:none; }
nav li { padding:5px 4px; }


/* The dropdown container 
.dropdown {
  float: left;
  overflow: hidden;
}*/

/* Dropdown button  */
.dropdown .dropbtn { border: none; outline: none; background-color:inherit; margin: 0; }

/* Dropdown content (hidden by default) */
.dropdown-content { display:none; position:absolute; }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content { display: block; } 

nav li a:hover, nav li a:active, input[type=submit]:hover /* navigation links mouseover etc */
 { text-decoration:underline; }

.negative nav li.active { background:rgba(0,0,0,.0); border: 2px solid rgba(255,255,255,.2) } /* the navigation links of the active page */
.positive nav li.active, #switchLang span { background:rgba(0,88,122,.0); border: 2px solid rgba(0,88,122,.2) } /* navigation links of active page */

footer { position:fixed; left:0px; bottom:0px; width:100%; height:25px; display:flex; justify-content:center; padding-top:2px; z-index:1000; }
footer nav { width:auto; }
footer nav ul { margin: 0 15px }
.negative footer { background-color:rgba(0,0,0,.3); }
.positive footer { background-color:rgba(192,212,221,.8); }
.negative footer:hover { background-color:rgba(255,255,255,.8); }

#nav_client { display:block; width:100%; margin-top:-15px; margin-bottom: 30px; background:none; }
#nav_client ul { margin-right:20px; }


/****** fading ******/
.fade     { position:relative; height:100%; width:100%; display:block; overflow:hidden; } 
.fade img { position:absolute; display:block; width:100%; left:-100%; right:-100%; top:-100%; bottom:-100%; margin:auto; }

.test { position:relative; display:block; width:100%; }

.fullscreenimg { /* as the name says */
	display:block; width:100%; height:30vh; overflow:visible; margin:30px 0;
}

/****** Tables ******/
.maincontent table { width:100%; }
.imagecell, .imagecell a { display:flex; font-size:0; }
tr.comp:hover { background:white; }

/****** Tiles ******/
.tile { display:inline-block; position:relative; width:164px; height:164px; margin:0 10px 10px 0; overflow:hidden; }
.tile img { height:100%; width:100%; object-fit:cover; }
.caption { 
	position:absolute; width:100%; left:0; bottom:0; padding:12px 4px 4px 4px; 
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)); 
}

/***** IMAGES ******/
.form img { width:40px; }

.thumb { width:75px; height:75px; object-fit:cover; }


.caption_banner { position:absolute; width:100%; left:0; bottom:0; padding:15vw 0 2.4vw 7vw; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.2)) }

.mixitup-control-active { background:rgba(0,80,122,.2); }

/******** Buttons ************/

button, input#submit { background:white; border:none; margin:5px 2px; padding:0 5px; box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.6) }

.filterlabel { display:inline-block; min-width:170px; }