/* Pongs Dennis */
/* www.pongs.it */

/* General Layout*/

* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0 }
ul, li { list-style: none; padding: 0; margin: 0 }
img { width: 100%; height: auto }
.clearfix { clear:both }
.mobil-show { display: none }

@media (max-width: 880px) {
	body { overflow-x: hidden }
	.mobil-hide { display: none }
	.mobil-show { display: inline }
}

/* Typography */

body { font-size: 24px; font-family: "regular", sans-serif; }
body, header, footer, main, span, p, strong, ul, li, h1, h2, h3, h4, h5, h6 { font-style: normal; font-weight: normal }
h1 { font-size: 2em }
h2 { font-size: 1.6em }
h3 { font-size: 1em }
h4 { font-size: 3em }
h1 a:hover, h2 a:hover { opacity: 0.6 }
.brand a, strong { font-family: "bold", sans-serif }
.brand a img { width: 240px; height: auto; }

@media (max-width: 1920px) { body { font-size: 20px } }
@media (max-width: 1680px) { body { font-size: 18px } }
@media (max-width: 1400px) { body { font-size: 16px } }
@media (max-width: 1280px) { body { font-size: 14px } h4 { font-size: 2.5em } }
@media (max-width: 1080px) { h1 { font-size: 1.6em } h2 { font-size: 1.2em } }
@media (max-width: 880px) {
	h1 { font-size: 1.6em }
	h2 { font-size: 1.2em }
	h4 { font-size: 1.8em }
	h1, h2, h3, h4, p { text-align: center; }
}

/* Links */

a, a:hover { text-decoration: none; color:inherit; transition: all .6s; -o-transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s }
.active:after {
    content: '';
    height: 2px;
    background: #fdc400;
    display:block;
    margin-top: 2px;
}

/* Colors Layout*/

body { background-color: #FFF }
header { background: #FFF }
footer { background-color: #FFF }
.blue { background-color: #00364c; color: #FFF }
.yellow { background-color: #fdc400;  color: #00364c }
.grey { background-color: #DDDDDD;  color: #00364c }

/* Colors Typography*/

body { color: #00364c }
.brand a, .menu a {  color: #00364c }
.footer, .footer a {  color: #00364c }

/* Header */

header { opacity: 1; height: 80px; position: fixed; top: 0; transition: top 0.4s ease-in-out; width: 100%; z-index: 100; float: left }
.nav-up { top: -80px }
.brand { margin-left: 6%; margin-top: 0px; float: left }
.menu { margin-right: 6%; margin-top: 25px; float: right }
.menu ul, .menu li { float: right; padding-left: 60px }
.brand a:hover, .menu a:hover {  opacity: 0.6 }

@media (max-width: 1400px) {
	header { height: 60px }
	.nav-up { top: -60px }
	.brand { float: left; margin-left: 6%; margin-top: 0px }
	.menu { float: right; margin-right: 6%; margin-top: 18px }
	.brand a img { width: 180px; height: auto; }
}

@media (max-width: 880px) {
	header { height: 60px }
	.nav-up { top: -60px }
	.brand { margin-left: 1.5em; margin-top: 10px }
	.menu { margin-right: 1.5em; margin-top: 22px }
	.menu ul, .menu li { padding-left: 16px }
	.brand a img { width: 140px; height: auto; }
}

/* Cover */

.cover { position: relative; height: 100vh; }
.cover-logo {
	width: 60%;
  position:absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}
.cover-service {
	background: url(../images/leistungen/Fotolia_50444147.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.cover-profil {
	background: url(../images/profil/Fotolia_62462497.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.cover-contact {
	background: url(../images/kontakt/Fotolia_48733562.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Content Layout */

.container { width: 100%; float: left }
.wrapper { width: 100%; float: left }
.half { width:calc(100%/2); float: left}
.third { width:calc(100%/3 - 12em); padding: 4em 6em; float: left }
.text { padding: 8em 5em 6em 6em; vertical-align: middle }

@media (max-width: 1080px) {
	.text { padding: 6em 4em 4em 4em }
}
@media (max-width: 880px) {
	.container { float: none }
	.wrapper { float: none }
	.half { width: 100%; float: none }
	.text { padding: 3em }
	.third { width:calc(100%/2 - 3em); padding: 1.5em }
}

/* Slider */

#slides { display: none }
.slides-container { margin: 0 auto }

/* Footer */

.footer { width: 100%; height: 30%; margin: 0; padding: 0; float: left }
.footer, .footer a { text-decoration: none }
.footer, .footer:hover { text-decoration: none; transition: all .6s; -o-transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s }
.footer-address { width: calc(100%/2); padding-left: 6em; padding-top: 3em; float: left }
.footer-links { padding-top: 3em; float: left }
.footer-address a:hover, .footer-links a:hover { opacity: 0.6 }
.social-links { float: left }
.additional-links { float: left; padding-left: 4em }

@media (max-width: 880px) {
	.footer { margin-top:4em; }
	.social-links { display:none }
	.additional-links { padding-left:0; }
	.footer { height: auto; margin-top: 0; padding-bottom: 2em }
	.footer-address { padding: 1.5em; float: none; }
	.footer-links { padding: 0 1.5em; float: none; }
}

/* Back to Top Button */

#back-to-top { position: relative; margin-top: 3em; margin-right: 8em; float: right; padding: 8px; }
#back-to-top:hover { opacity: 0.5; }
#back-to-top path { fill:#00364c; -webkit-transition: fill .2s ease-out; transition: fill .2s ease-out }
#back-to-top svg { position: absolute; top: 0; -webkit-transition: top .2s ease-out; transition: top .2s ease-out }
#back-to-top:hover path { fill:#00364c }
#back-to-top:hover svg { top:-8px }

@media (max-width: 880px) {
	#back-to-top { margin-right: 3em; margin-top: -10px }
}