* {margin:0; padding:0}
html, body {height:100%}
body {font-family: 'Nunito Sans', sans-serif; background-color:#f2f2f2; color:#5b5b5b; font-size:17px}
h2 {margin-bottom:15px; text-align:center; color:#005CA5; font-weight:normal; font-size:40px}
h3 {margin-bottom:10px; font-weight:normal; font-size:25px}
div, section {box-sizing:border-box}
p {margin-bottom:15px}
a {color:#5b5b5b; text-decoration:none}
a:hover {color:#f7b731}
section {min-height:100%; padding-top:100px; padding-bottom:20px}
section:nth-child(odd) {background-color:#fff}
iframe {max-width:100% !important}

@media screen and (max-width: 959px){
	body {font-size:15px}
	section {min-height:0; padding-top:20px}
}



/* CLASSES */
.container {max-width:960px; margin:0 auto}
.row {}
.blue {color:#005CA5}
.yellow {color:#f7b731}
.leading {font-size:30px; margin-bottom:15px; text-align:center}
.clearfix {clear:both}
.text-center {text-align:center}
.float-left {float:left}
.float-right {float:right}
.mobile-only {display:none}

@media screen and (max-width: 959px){
	.mobile-only {display:block}
	.container {padding-left:10px; padding-right:10px}
}



/* HEADER */
#header {position:fixed; top:0; left:0; width:100%; z-index:999; background-color:rgba(40,40,40,0.75); padding-top:10px; padding-bottom:10px; color:#fff; border-bottom:1px solid #222}
	#header a {color:#fff}
	#header .helper {position:relative}

		#logo {display:inline-block; padding:5px; background-color:#005CA5; color:#000; border-radius:7px; font-size:30px}
			#logo .aaa {display:inline-block}
			#logo .taxi {display:inline-block; margin-left:10px; padding-left:5px; padding-right:5px; background-color:#f7b731; border-radius:7px}

		#nav {position:absolute; top:15px; right:0}
			#nav .bars {display:none}
			#nav ul {float:right; margin:0; padding:0; list-style-type:none}
				#nav ul li {margin:0 0 0 20px; padding:0; display:inline-block}
					#nav ul li a {display:inline-block; text-decoration:none; font-weight:bold; transition:color 0.5s; text-shadow:1px 1px 2px #333}
					#nav ul li a:hover {color:#f7b731}

@media screen and (max-width: 959px){
	#header {position:absolute}
		#nav .helper {position:relative}
			#nav .bars {display:block}
			#nav ul {display:none; z-index:9999; float:none; position:absolute; top:100%; right:0; padding:10px 20px; background-color:#000}
				#nav ul li {display:block; margin:0 0 10px 0}
					#nav ul li a {display:block; padding:5px 10px; white-space: nowrap;}
/* 		#header .helper {position:static; text-align:center}
			#logo {display:inline-block; width:auto; margin:0 auto 10px auto}
			#nav {position:static; display:inline-block; margin:0 auto}
				#nav ul {float:none}
					#nav ul li {margin-left:10px; margin-right:10px} */
}


/* SECTION 1 */
#section-1 {background-image:url(images/top-bg.jpg); background-repeat:no-repeat; background-position:center top}
#section-1 .animation-area {position:relative; height:400px; overflow:hidden}
	h1 {position:absolute; bottom:-100px; left:0; width:100%; margin:0; padding:0; color:#fff; font-weight:normal; font-size:70px; text-align:center; animation:head 1s; animation-fill-mode:forwards; animation-delay:2s}
	#section-1 .animation-area .slogan {position:absolute; bottom:-100px; left:0; width:100%; font-size:30px; color:#fff; text-align:center; animation:slogan 1s; animation-fill-mode:forwards; animation-delay:3s}
	#section-1 .animation-area .contact {position:absolute; bottom:130px; left:0; width:100%; text-align:center; opacity:0; animation:contact 1s; animation-fill-mode:forwards; animation-delay:4s}
		#section-1 .animation-area .contact ul {display:inline-block; margin:0; padding:0; list-style-type:none}
			#section-1 .animation-area .contact ul li {display:inline-block; margin:0 12px 0 12px; padding:0; color:#f7b731; font-size:27px}
			#section-1 .animation-area .contact ul li a {display:inline-block; color:#f7b731; text-decoration:none; border-width:2px; padding:5px 12px; border-style:solid; border-color:transparent; border-radius:5px}
			#section-1 .animation-area .contact ul li a:hover {border-color:#f7b731}

@keyframes head {
	from {bottom:0}
	to {bottom:250px}
}

@keyframes slogan {
	from {bottom:0}
	to {bottom:200px}
}

@keyframes contact {
	from {opacity:0}
	to {opacity:1}
}

@media screen and (max-width: 959px){
	#section-1 {padding-top:120px; padding-bottom:20px}
		#section-1 .animation-area {position:static; height:auto}
		h1 {position:static; animation:none; display:none}
		#section-1 .animation-area .slogan {position:static; animation:none}
		#section-1 .animation-area .contact {position:static; opacity:1; animation:none}
}


/* SERVICE */
#service .cols {margin-top:20px; text-align:center; font-size:16px}
#service .col-1 {float:left; width:25%; padding-right:16px}
#service .col-2 {float:left; width:25%; padding-left:8px; padding-right:8px}
#service .col-3 {float:left; width:25%; padding-left:8px; padding-left:8px}
#service .col-4 {float:left; width:25%; padding-left:16px}

@media screen and (max-width: 959px){
	#service .col-1 {float:none; width:100%; margin-bottom:30px; padding:0}
	#service .col-2 {float:none; width:100%; margin-bottom:30px; padding:0}
	#service .col-3 {float:none; width:100%; margin-bottom:30px; padding:0}
	#service .col-4 {float:none; width:100%; padding:0}
}


/* UEBER UNS */
#ueber-uns {text-align:center}


/* GALERIE */
.gallery {text-align:center}
.gallery ul {margin:0; padding:0; list-style-type:none}
	.gallery ul li {margin:10px; padding:0; display:inline-block}


/* CONTACT */
@media screen and (max-width: 959px){
	#kontakt .float-left {float:none}
	#kontakt .float-right {float:none}
}