/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
  font-size: 16px;
  line-height: 28px;
  font-weight: 300;
  font-family: 'Ubuntu', sans-serif;
  color: #475059; }
a, a:visited {
    color: #475059;
    text-decoration: none;
}
a:hover{color:#E21A37}
strong {font-weight: 700}
p {margin:0 0 20px 0;}

h1,h3{
    font-weight: 300;
    font-size: 40px;
	line-height: 50px;
    text-align: left;
    margin:0 0 10px 0;
}
h2,h4{
    font-weight: 700;
    font-size:24px;
	line-height: 30px;
    margin:0 0 10px 0;
}

/* BG-COLORS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.white {background:#FFF;}
.black {background:#000;}
.light {background:#DDD;}
.yellow{background:#FFD12F;}


/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.headerfix{position:fixed;left: 0;right: 0;z-index: 2}
header{
	width:100%;
	max-width:960px;
	margin:0 auto;
	font-size: 14px;
	display:flex;
	justify-content: space-between;
	align-items: center;
}
header a, header a:visited {color:#FFF;}
header a:hover{color:#E21A37}
.hf1       {height: 40px;color:#FFF;}
.hf2       {height: 30px;color:#000;}
.hf2 span  {padding-left:20px;font-weight: 700;text-align: center;}
.hf3	   {height: 30px;color:#000;}
.logo      {padding-left:20px;width: 210px;display:flex;justify-content: space-between;align-items: center;}
.logo-text {font-weight: 700;font-size: 28px;}
.logo img  {height:36px;}
nav        {padding-right:20px;font-weight: 700}

.mobile-menu{display:none;}
.mobile-menu p{margin:0;}
.mobile-menu a{color:#000;}
.mobile-menu a:hover{color:#E21A37}
.mobile-menu-nav{font-weight:700}

.headerimg{width:100%;max-width: 960px;padding-top:100px;margin:0 auto;line-height: 0px;}

/* DIVERS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container{width:100%;max-width: 960px;margin:0 auto;}
article{width:66%;float:left;margin:40px 0;}
article h1, article h2, article h3, article h4, article p{margin-left:20px}
aside{width:34%;float:left;text-align: center;margin:40px 0 20px 0;}
.content{padding-left:20px;}
.portrait{width:90%;height: 90%; margin:5%;border-radius: 50%;overflow:hidden;line-height: 0;}
.dienste{display:flex;justify-content: flex-start;flex-wrap: wrap;}
.dienstleistung{width:30%;margin:20px 1.5%;}
.issuu{width:45%;margin:20px 2.5% 80px 2.5%;float:left;}
.issuu div{width:100%;height: 320px}
.e-tec{padding:20px;}
.partner{margin:20px 2.5%;width:20%;line-height: 0;background:#777;float: left;}
.partner:hover{background:#DDD;}
.partner img{width:80%;margin:10%;}
.partner-klein img{width:50%;margin:25%;}

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact-map{position: relative;width:100%;height: auto;margin:60px 0}
.contact-map iframe{border:none;width:100%;height: 480px;margin-bottom:-10px}
address{font-style: normal;padding:10px;background: #FFF;position:absolute;left:10px;bottom:10px;line-height: 20px}
address p{margin-bottom:5px}

/* PAD
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.pad-field{padding:20px 20px 40px 20px}
.pad-field h4{margin-bottom:30px;}
.img-left-pad{width:34%;float:left;}
.img-left-pad img{width:77%;margin:0 11.5%}
.pad{width:66%;float:left;background-image: url(../images/global/pad-670x480.svg);background-repeat: no-repeat;line-height: 0;}
.pad iframe{width: 80%; height:390px; border: 0;margin: 20px 10%;}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{bottom:0px;width:100%;max-width: 960px;margin:0 auto;height: 35px;padding-top:5px;font-size: 14px}
footer a, footer a:visited{color:#FFF;padding:0 20px;}
footer a:hover{color:#E21A37}
footer span{float:right}

/* MEDIAS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 959px) {
	.img-left-pad{display:none;}
	.pad{width:100%;background-image: none;}
	.pad-field h4{margin-bottom:0;}
	.pad iframe{width: 100%; height:540px; margin:20px 0 0 0;}
	.contact-map{margin:0}
}

@media (max-width: 767px) {
	.mobile-off{display:none;}
	.mobile-menu{display:block;width:100%;padding:110px 0 10px 0;text-align: center;}
	header{justify-content:center}
	.hf2 span{padding-left:0;}
	.headerimg{padding-top:0;display: block;}
	article, aside{float:none;}
	article {width:100%;margin-top:20px}
	aside{width:66%;margin:0 auto}
	.dienstleistung{width:45%;margin:20px 2.5%;}
	.pad iframe{height:440px;}
	footer{margin-top:0}	
}
@media (max-width: 420px) {
	h1,h2{font-size: 32px;line-height: 40px;}
	h3,h4{font-size: 20px;line-height: 24px;}
	aside{width:90%}
	.dienstleistung,.issuu{width:90%;margin:20px 5%;float:none;}
	.partner{width:45%;margin:10px 2.5%;}
	.contact-map iframe{height:340px;}
	address{position:relative;left:0px;padding-left:20px;}
	.pad iframe{height:380px;}
}