/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  font-size: 62.5%; }
body {
  background: #FFF;
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  font-family: 'Ubuntu', sans-serif;
  color: #000; }
a, a:visited {
    color: #243588;
    text-decoration: none;
	font-weight:700;
}
a:hover{color:#000}
strong {font-weight: 700}
p {margin:0;}

img{width:100%}

h1,h3{font-weight: 700;font-size: 60px;line-height: 70px;padding: 30px 0;margin:0;text-align:center;color:#243588}
h2{font-weight: 700;font-size: 30px;line-height: 36px;padding: 10px 0;margin:0;}
h4{font-weight: 700;font-size: 16px;line-height: 24px;padding: 0 0 10px 0;margin:0;}

.content-2_3 > ul{}
.content-2_3 > ul > li{margin-bottom:10px;font-weight: 700}

/* BG-COLORS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.white  {background:#FFF;}
.light  {background:#e5e5e5;}
.blue   {background:#243588}
.blue h2,.blue h3,.blue h4,.blue p,.blue a,.blue a:visited{color:#FFF;}
.blue a{font-weight:300}
.blue a:hover{color:#ffed00;}
.yellow {background:#ffed00}

/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*nav{border-bottom:solid 1px #e5e5e5;}

.logo{float:left;font-size: 20px;font-weight: 700;padding:0 100px 0 0}
.logo a,.logo a:visited{color:#FFF;}

.contact{float:left;font-size: 20px;font-weight: 300;color:#FFF;}
.contact a,.contact a:visited{color:#FFF;}
.contact a:hover{color:#ffed00}*/

/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */

nav{position:fixed;top:27px; right:20px; z-index:2000}
nav > ul {position:fixed; top:100px; left:0px;}
nav ul{padding:0; margin:0; list-style: none; overflow: hidden; background-color: #fff; width:100%}
nav > ul > li{width:25%; float:left; padding:40px 0 0 0;}
nav > ul > li:nth-child(1),nav > ul > li:nth-child(2){padding-top:80px}
nav > ul > li:nth-child(odd){padding-left:25%}
nav > ul > li:nth-child(even){padding-right:25%}
nav > ul > li img{width:100px; margin:0 auto; padding-bottom:10px; filter: invert(100%)}
nav > ul > li > a {font-weight:700;}
nav > ul > li a:hover:before {content:'\2794 '; padding-right:5px}
nav > ul > li a:hover:after {content:'\2794 '; padding-left:5px; color:transparent}
nav > ul > li a:visited{color:#000!important;}

/* menu */
nav .menu {height: 0;  transition: height .2s ease-out;	text-align: center;}

/* menu icon */
nav .menu-icon {  cursor: pointer;  display: inline-block;  float: right;  padding: 20px 10px;  position: relative;  user-select: none; border-radius:9px}
nav .menu-icon:hover{background:#000}
nav .menu-icon .navicon {  background: #FFF;  display: block;  height: 5px;  position: relative;  transition: background .2s ease-out;  width: 30px;}
nav .menu-icon .navicon:before,
nav .menu-icon .navicon:after {  background: #FFF;  content: '';  display: block;  height: 100%;  position: absolute;  transition: all .2s ease-out;  width: 100%;}
nav .menu-icon .navicon:before {  top: 10px;}
nav .menu-icon .navicon:after {  top: -10px;}

/* menu btn */
nav .menu-btn {  display: none;	text-align: center;}
nav .menu-btn:checked ~ .menu {height: calc(100vh - 80px)}
nav .menu-btn:checked ~ .menu-icon .navicon {  background: transparent;}
nav .menu-btn:checked ~ .menu-icon .navicon:before {  transform: rotate(-45deg);}
nav .menu-btn:checked ~ .menu-icon .navicon:after {  transform: rotate(45deg);}
nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {  top: 0;}

@media (max-width: 1000px) {
	nav > ul > li{width:40%;}
	nav > ul > li:nth-child(odd){padding-left:10%}
	nav > ul > li:nth-child(even){padding-right:10%}
}
@media (max-width: 550px) {
	nav{top:17px;}
	nav .menu-icon{filter: drop-shadow(0 0 5px #000); -moz-filter: drop-shadow(0 0 5px #000); -o-filter: drop-shadow(0 0 5px #000);-ms-filter: drop-shadow(0 0 5px #000);}
	nav .menu-icon:hover{background:none;}
}
@media (max-width: 420px) {
	nav > ul > li{width:50%;}
	nav > ul > li:nth-child(odd){padding-left:0%}
	nav > ul > li:nth-child(even){padding-right:0%}
}
@media (max-width: 400px) {
	nav > ul > li img,nav > ul > li br{display:none;}
	nav > ul > li{width:100%; padding:10px 0 0 0}
	nav > ul > li:nth-child(1){padding-top:40px}
	nav > ul > li:nth-child(2){padding-top:10px}
	nav{right:10px}
	
}

/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{position:fixed; z-index:2000; top: 0; left: 0; width:100%; height:100px; background:rgba(36,53,136,0.9); display:flex; align-items: center; justify-content: center}
header p{text-align:center; letter-spacing:1px; padding:0}
header p a, header p a:visited{color:#FFF;}
header p a:hover{color:#fbdd1b}
@media (max-width: 750px) {header p{display:none}}
header .logo{position:fixed; z-index:4000; top:10px; left:10px; width:300px; height:80px; border-radius: 9px; background-color:#FFF; display:flex; justify-content:center}

header .logo img{width:calc(100% - 20px);margin:12px 10px;}

header > .icons{position:fixed; top:35px; right:40px; width:200px; height:100px;}
header > .icons img{width:auto; height:30px; margin-right:20px;}
header > .icons > .phone,
header > .icons > .email,
header > .icons > .icon-location{position:relative}
header > .icons > .phone:hover::before{content:'+41 71 394 10 20';left:-50px}
header > .icons > .email:hover::before{content:'info@bossart-kuhn.ch';left:-75px}
header > .icons > .icon-location:hover::before{content:'9230 Flawil';left:-28px}
header > .icons > .phone:hover::before,
header > .icons > .email:hover::before,
header > .icons > .icon-location:hover::before{position:absolute; bottom:-30px; white-space: nowrap; background:#243588; padding:5px 10px; border-radius:5px; font-size:13px; line-height:15px; color:#FFF; border:1px solid #FFF}

@media (max-width: 550px) {
	header {position:absolute; top:20px;background:none}
	header .logo{position:absolute; top:-10px; width:240px; height:60px;box-shadow: none;}
	header .logo img{margin:10px;}
	header .icons{top:90px; display:flex; flex-direction:column; width:30px;right:50px;}
	header > .icons img{width:auto; height:30px; margin:5px;filter: drop-shadow(0 0 2px #000); -moz-filter: drop-shadow(0 0 2px #000); -o-filter: drop-shadow(0 0 2px #000);-ms-filter: drop-shadow(0 0 2px #000); }
	header > .icons > .phone:hover::before,
	header > .icons > .email:hover::before,
	header > .icons > .icon-location:hover::before{content:none}
	.pageimage{padding-top:80px; background:#243588}
}
@media (max-width: 400px) {
	header .icons{right:25px;}
}

/* CONSTRUCT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container{max-width:960px;margin: 0 auto;padding:0 10px; position:relative}
.content-3_3{width:100%;}
.content-2_3{width:66%;float:left;}
.content-1_2{width:50%;float:left;}
.content-1_3{width:33%;float:left;}
.content-1_4{width:25%;float:left;}
.content-1_4 p,.content-1_2 p,.content-1_3 p,.content-2_3 p,.content-3_3 p,.content-1_3 h4{padding:0 10px 10px 10px}
.content-1_2 h2,.content-1_2 h4,.content-1_3 h2,.content-2_3 h2,.content-3_3 h2{padding:10px}
.content-1_2 ul{margin-top:0;}
.stop-float{clear:both;}
.space{line-height: 0;height:30px;}
#location{position:absolute; top:-40px}

/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*header {position: relative;width:100%;}
header img{width:100%;}
.headerlogo{position: absolute; bottom:20%;margin:0 20%;width:60%;z-index:20000;}
.headerlogo img{filter: drop-shadow(0px 0px 30px rgba(255,255,255,1));animation-name: logo; animation-duration: 2s;}
.centered{max-width: 980px;margin:0 auto;}

@keyframes logo {
	0%   {opacity: 0;}
    49%  {opacity: 0;}
    100% {opacity: 1;}
}*/


/* CONTENT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.promotion{width:calc(100% - 30px); background:#dad9d8; text-align:center; padding:30px 15px 10px 15px; margin-bottom:40px}
.promotion p, .promotion a, .promotion a:visited{color:#000; margin-bottom:30px; font-weight:700}
.promotion a:hover{color:#FFF}
.promotion > .highlight{font-size:30px; line-height: 40px; color:#FFF}

.kompetenzen{position:relative;margin: 10px 0 20px 10px;width:90%;height:140px;overflow: hidden}
.kompetenzen img{position:absolute;width:100%;left:0px;top:0px;transition:all 500ms;}
.kompetenzen img:hover{width:200%;left:-50%;top:-50%;transition:all 500ms;}
.info{font-weight:700;}
.spez{margin-bottom:10px}

.portrait{position:relative;margin:10px}
.portrait > .content{position: absolute;top:0;left:0;}
.portrait > .content img{margin:5% 5% 5px 5%;width:90%;background:#fff}
.portrait > .content p{text-align:center;}
.portrait > .content a{color:#000;font-weight: 300;}
.portrait > .content a:hover{color:#243588}
.address{text-align:center;font-weight:700;}

.portrait-klein{border:solid 1px #e5e5e5; border-radius:9px;margin:10px 10px 20px 10px;padding:10px;line-height: 20px}
.portrait-klein img{border-radius:50%;width:30%;float:left;margin-right:10px}
.portrait-klein p{min-width:50%;margin:0;padding:0;}
.portrait-klein a{font-weight:300}

.portrait-team img{border-radius:50%;margin:20px 10% 0 10%;width:80%;background:#e5e5e5}
.portrait-team p{text-align:center;}
.portrait-team a{font-weight: 300;}

.partner{position:relative;width:120px;height:120px;border-radius:9px;background:#243588;padding:10px;margin:10px;overflow:hidden;float:left;}
.partner img{position:absolute;width:80%;left:10%;top:10%;transition:all 500ms;}
.partner img:hover{width:150%;left:-25%;top:-25%;transition:all 500ms;}

.youtube{width:100%;height:528px;border:none}
.youtube2{width:100%;height:258px;border:none}

.e-tec{}
.e-tec h3{font-size: 30px;line-height: 36px;}
.e-tec .content-3_3{width:50%; margin:0 auto}
.e-tec iframe{width:100%;height:480px;border:1px solid #243588}

.googlemaps{width:100%;height:420px;border:none;}
.adresselink a, .adresslink a:visited {color: #FFF; font-weight:300;}

.webdesign{text-align:right;}

/* KONTAKTFORMULAR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kontakt {margin:0 0 20px 10px;}
.kontakt label{display: block;width:30%;float:left;}
.kontakt input,.kontakt textarea{width:60%;}
.kontakt p,.kontakt-send,.kontakt-recaptcha{margin-left:30%;}
.kontakt p{margin-top:30px;}

/* COOKIE-BANNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cookie-banner{position:fixed; width: calc(100% - 40px);bottom:10px;right:10px;padding:15px 10px 10px 10px; background:rgba(0,0,0,0.8);border:1px solid #333;border-radius:9px;color:#fff;text-align: center;z-index:100002;}
.cookie-banner button{background:#fff;color:#000;margin:10px 0 0 0;border-radius:5px;padding:0 10px}
.cookie-banner a{color:#FFF; font-weight:700}
.cookie-banner a:hover{text-decoration:none;}
.cookie-vorhanden{display:none;}


@media (max-width: 980px) {
	.headerlogo{margin:0 10%;width:80%;}
}
@media (max-width: 768px) {
	h1,h3{font-size: 44px;line-height: 52px;}
	.kompetenzen{height:110px}
	.portrait > .content img{margin-bottom:0}
	.portrait > .content p{line-height:20px}
	.e-tec iframe{height:540px;}
	.e-tec .content-3_3{width:100%}
	.portrait-klein,.portrait-team p{font-size:12px;line-height:16px}
	.youtube{height:401px;}
	.partner{width:105px;height:105px}
	.headerlogo img{filter: drop-shadow(0px 0px 10px rgba(255,255,255,1));}
}
@media (max-width: 600px) {
	.content-1_3,.content-2_3,.content-1_2,.content-1_4{width:100%;float:none;margin-bottom:30px;}
	.portrait > .content img{margin-bottom:5px}
	.portrait-klein,.portrait-team p{font-size:16px;line-height:20px}
}
@media (max-width: 414px) {
	h1,h3{font-size: 30px;line-height: 36px;}
	h2, .e-tec h3{font-size: 24px;line-height: 30px;}
	header {padding-top:78px;min-height:100px}
	.headerlogo{top:50%}
	.logo{padding:0}
	.e-tec iframe{height:580px;}
	.youtube{height:202px;}
	.kontakt {margin:20px 0}
	.kontakt label{width:90%;font-weight: 700;margin-left:10px;}
	.kontakt input,.kontakt textarea{width:90%;margin-left:10px;}
	.kontakt p,.kontakt-send,.kontakt-recaptcha{margin-left:0;}
	.kontakt p{margin:20px 0;}
	.kontakt-recaptcha div{width:285px;margin-bottom:30px}
	input{border:solid 1px #ddd;}
	h1,h2,h3,h4,p {-moz-hyphens: auto;   -o-hyphens: auto;   -webkit-hyphens: auto;   -ms-hyphens: auto;hyphens: auto;} 
	h1,h3{text-align:left;padding:30px 0 10px 10px}
	.partner{width:85px;height:85px}
}