@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,600);


html { margin: 0; padding: 0; height: 100%; }
body {
	margin: 0;
	padding: 0;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	color: #595555;
	font-size: 10px;
	font-weight: 300;
	background-color: #ffffff;
	height: 100%;
	overflow-y: scroll;/*Scrollbar immer anzeigen*/
}

a { text-decoration: none; color: #595555; }
a img { border: 0; vertical-align: top; }
img { vertical-align: top; }

.clear:after, .head:after { visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0; }

#overallContainer { position: relative; min-height: 100%; }
#topBar { position: fixed; top: 0; left: 0; width: 100%; background-color: #182127; z-index: 900; }
#logoBox { position: relative; display: block; width: 320px; background-color: #88b120; float: left; text-align: center; }
#topNav { position: absolute; top: 0; left: 320px; float: left; padding-left: 18px; width: 500px; }
#topNav a { display: block; height: 52px; padding: 21px 12px 0 12px; float: left; color: #ffffff; font-size: 2em; }
#topNav a div { font-size: 0.7em; line-height: 1.1em; color: #727d89; }
#topNav a:hover { background-color: #2a3439; }

.topbarheight { height: 74px; }

.center { position: relative; margin: 0 auto 0; }
.center1 { position: relative; margin: 0 auto 0; width: 100%; max-width: 744px; }
.center2 { position: relative; margin: 0 auto 0; width: 100%; max-width: 884px; }
.center3 { position: relative; margin: 0 auto 0; width: 100%; max-width: 974px; }

.color1 h2, .color1 h1 { color: #e23063; }
.color2 h2, .color2 h1 { color: #f39200; }
.color3 h2, .color3 h1 { color: #94c11f; }
.color4 h2, .color4 h1 { color: #ec4343; }
.color5 h2, .color5 h1 { color: #4b84b4; }
.color6 h2, .color6 h1 { color: #404553; }

.color1 .klapp_cta { background-color: #e23063; }
.color2 .klapp_cta { background-color: #f39200; }
.color3 .klapp_cta { background-color: #94c11f; }
.color4 .klapp_cta { background-color: #ec4343; }
.color5 .klapp_cta { background-color: #4b84b4; }
.color6 .klapp_cta { background-color: #404553; }

.color1 .klapp_cta.open:after { border-color: #e23063 transparent transparent transparent; }
.color2 .klapp_cta.open:after { border-color: #f39200 transparent transparent transparent; }
.color3 .klapp_cta.open:after { border-color: #94c11f transparent transparent transparent; }
.color4 .klapp_cta.open:after { border-color: #ec4343 transparent transparent transparent; }
.color5 .klapp_cta.open:after { border-color: #4b84b4 transparent transparent transparent; }
.color6 .klapp_cta.open:after { border-color: #404553 transparent transparent transparent; }

.color1 .extLink { color: #e23063; }
.color2 .extLink { color: #f39200; }
.color3 .extLink { color: #94c11f; }
.color4 .extLink { color: #ec4343; }
.color5 .extLink { color: #4b84b4; }
.color6 .extLink { color: #404553; }

#logoBox img { width: 87%; margin-top: 24px; }

.extLink { display: block; font-size: 1.3334em; }
/* typicons */
@font-face {
      font-family: 'fontello';
      src: url('/files/lib/fontello/font/fontello.eot?26107855');
      src: url('/files/lib/fontello/font/fontello.eot?26107855#iefix') format('embedded-opentype'),
           url('/files/lib/fontello/font/fontello.woff?26107855') format('woff'),
           url('/files/lib/fontello/font/fontello.ttf?26107855') format('truetype'),
           url('/files/lib/fontello/font/fontello.svg?26107855#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }
.typeicons { font-family: 'Typicons'; font-size: 0.8em; vertical-align: bottom; }
.typeicons { font-family: 'fontello'; font-size: 0.8em; vertical-align: middle; }



/* Seiten Specials Agentur */
.pageblock { position: relative; width: 100%; overflow: hidden; }

.pageblock.ag_eins { height: 50vw; max-height: 454px; }
.ag_eins .fg img { position: absolute; top: 64px; right: 0; width: 40%; max-width: 245px; }
.ag_eins .bg { position: absolute; width: 100%; height: 120%; bottom: 0; }

/*#ag_eins_bg { background-image: url(/files/images/beach.jpg); background-repeat: no-repeat; background-size: 100% auto; }*/

.pageblock.ag_zwei { padding: 60px 0; }
.ag_zwei .icons {  }
.ag_zwei .icon { width: 20%; position: relative; float: left; text-align: center; font-size: 2.0em; font-weight:400; line-height: 1em; height: 14.4vw; max-height: 155px; }
.ag_zwei .icon span { font-size: 0.636em; }
.ag_zwei .icon img { width: 46%; margin-bottom: 20px; }
.ag_zwei .icon a { color: #595555; }
.ag_zwei .icon:hover img { width: 54%; }
.ag_zwei .icon img { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.pageblock.ag_drei { padding: 88px 0; background-color: #b8e5e9; }
.ag_drei .big_icon { width: 40%; max-width: 200px; margin-bottom: 20px; position: relative; }
.ag_drei .bg { position: absolute; width: 100%; height: 160%;	bottom: 0; }

.pageblock.ag_vier { padding: 88px 0; }
.ag_vier .big_icon { width: 40%; max-width: 200px; margin-bottom: 20px; position: relative; }

.pageblock.ag_fuenf { padding: 88px 0; background-color: #e8f1ce; }
.ag_fuenf .big_icon { width: 40%; max-width: 200px; margin-bottom: 20px; position: relative; }
.ag_fuenf .bg { position: absolute; width: 100%; height: 160%; bottom: 30%; }

.module, .features { margin: 0; padding: 0; }
.module li, .features li { list-style: none; float: left; padding: 14px 9px; background-color: #f4dab4; margin-right: 2px; margin-top: 2px; }


/* Seiten Specials Google Partner */
.pageblock.gp_eins { height: 50vw; max-height: 454px; }
.gp_eins .fg { position: absolute; bottom: 48%; width: 100%; height: 30%; max-height: 100px; text-align: center; }
.gp_eins .bg { position: absolute; width: 100%; height: 120%;	bottom: 0; }

.pageblock.gp_zwei { padding: 60px 0; }

.pageblock.gp_drei { padding: 88px 0; background-color: #d8f0f3; }
.gp_drei .big_icon { width: 40%; max-width: 200px; margin-bottom: 20px; position: relative; }
.gp_drei .bg { position: absolute; width: 100%; height: 200%;	bottom: 10%; }

.pageblock.gp_vier { padding: 88px 0; }
.gp_vier .big_icon { width: 80%; max-width: 600px; margin-bottom: 40px; position: relative; }

/* Seiten Specials Google Business View */
.pageblock.gbv_eins { height: 50vw; max-height: 454px; }
#gp_badge { position: absolute; top: 30%; right: 8%; width: 20vw; max-width: 146px; z-index: 800; }

.pageblock.gbv_zwei { padding: 14px 0 60px 0; }
#gmaps_schrift { max-width: 360px; width: 80%; margin: 0 auto 34px; }
#g_logos { max-width: 650px; width: 90%; margin: 80px auto 0; }
#g_logos .icon { width: 33%; position: relative; float: left; text-align: center; font-size: 1.8em;  line-height: 1em; }
#g_logos .icon img { width: 25%; margin-bottom: 22px; }
.gbv_zwei .big_icon { width: 40%; max-width: 200px; margin-bottom: 20px; position: relative; }
.gbv_zwei .bg { position: absolute; width: 80%; height: 80%; margin-left: 10%; top: 10%; }

.pageblock.gbv_drei { padding: 66px 0; background-color: #ec4343; }
.gbv_referenzen .item { position: relative; float: left; width: 22%; height: 22vw; max-height: 204px; margin: 1.5%; background-color: #e33636; }
.gbv_referenzen .item .icon { position: absolute; top: 10%; left: 50%; margin-left: -7.5%; width: 15%; }
.gbv_referenzen .item .txt { position: relative; padding-top: 44px; text-align: center; color: #ffffff; font-size: 1.1em; line-height: 1.1em; margin: 0; }
.gbv_referenzen .item h5 { font-size: 1.4545em; font-weight: 300; margin: 0; margin-bottom: 10px; }
.gbv_referenzen .item a { display: block; }
.rollover { display: none; position: absolute; top: 24%; text-align: center; width: 100%; height: 14%; }
.gbv_referenzen .item:hover .rollover { display: block; }

.pageblock.gbv_vier { padding: 80px 0; }
.gbv_vier ul { list-style-type: none; padding: 0px; margin: 0px; }
.gbv_vier ul li { padding-left: 50px; position: relative; margin-bottom: 20px; }
.gbv_vier ul li img { position: absolute; top: -4px; left: 0; width: 40px; }
.gbv_vier .bg { position: absolute; width: 100%; height: 140vw; bottom: 0; }

.pageblock.gbv_fuenf { padding: 66px 0; background-color: #b2e3e7; }

.elastic-video {
    position: relative;
    padding-bottom: 55%;
    padding-top: 15px;
    height: 0;
    overflow: hidden;
}
.elastic-video iframe {  
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.pageblock.rf_eins { height: 50vw; max-height: 454px; }
.rf_eins .bg { position: absolute; width: 100%; height: 120%; bottom: 0; }

.pageblock.referenzen { padding: 88px 0; }

.pageblock.impressum { padding: 88px 0; background-color: #0f151a; color: #727d89; }




.klapper { margin-bottom: 8px; }
.klapper .head { text-align: center; }
.klapper .content { display: none; padding-top: 30px; }
.klapp_cta { display: block; position: relative; width: 164px; padding: 12px 0; font-size: 2.8em; line-height: 1em; font-weight: 300; color: #ffffff; }
.klapp_cta { border: 1px solid #ffffff; margin: 0 auto; font-family: "Source Sans Pro", Arial, Helvetica, sans-serif; cursor: pointer; }
.klapp_cta:hover {  }
.klapp_cta:active { top: 1px; }
.klapp_cta.open:before { top: 102%; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; display: block; width: 0px;
border-style: solid;
border-width: 16px 82px 0 82px;
border-color: #ffffff transparent transparent transparent; }
.klapp_cta.open:after { top: 100%; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; display: block; width: 0px;
border-style: solid;
border-width: 16px 82px 0 82px; }

h2, h1 { font-size: 3.8em; margin-top: 0; margin-bottom: 14px; font-weight: 300; }
h2.cen, h1.cen { text-align: center; }

.txt { font-size: 1.8em; line-height: 1.667; margin-bottom: 30px; }
.txt.teaser { font-size: 2.2em; }

/* referenzen  */
#ref_wrapper { margin-top: 40px; }
.ritem { float: left; height: 60px; width: 25%; padding: 0 3%; margin-right: 2%; margin-bottom: 2%; text-align: center; font-size: 1.8em; line-height: 1.1em; background-color: #7b7575; color: #ffffff;  }
.ritem {
	display: -webkit-box; display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-box-align: center; -moz-box-align: center;
	-ms-flex-align: center;
	-webkit-justify-content: center;
	justify-content: center;
	
	-webkit-box-pack: center; -moz-box-pack: center;
	-ms-flex-pack: center;
	-webkit-align-items: center;
	align-items: center; }
.ritem.head { clear: left; }


#mobNavButton { display: none; position: absolute; width: 51px; height: 66px; top: 8px; right: 10px; cursor: pointer; }
#mobNavButton div { position: absolute; left: 16px; width: 19px; height: 2px; font-size: 1px; background-color: #ffffff;  }
#mobNavButton.open { background-color: #000000; }
div.eins { top: 22px; }
div.zwei { top: 27px; }
div.drei { top: 32px; }

#abdecker { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 800; }

#footBar1 { position: relative; background-color: #182127; width: 100%; color: #727d89; }
#footBar1 .pad { padding-top: 114px; padding-bottom: 122px; }
#footBar2 { position: relative; background-color: #0f151a; height: auto; width: 100%; color: #727d89; font-size: 2.5em; }
#footBar1 a, #footBar2 a { color: #727d89; }

#tagBox { padding: 0; }
#tagBox li { list-style: none; float: left; padding: 14px 9px; background-color: #2e3d45; margin-right: 2px; margin-top: 2px; color: #435761; font-size: 1.6em; line-height: 1em; text-transform: uppercase; }
#tagBox li:first-child { background-color: #264f6b; color: #ffffff; }

#fnav { position: relative; padding-top:30px; text-align: center; max-width: 360px; margin: 0 auto; }
#g_disclaim { font-size: 0.5em; position: relative; padding: 15px 20px 6px 20px; text-align: center; }

.soc_wrap { position: absolute; top: 0; padding-top: 25px; right: 20px; }
.soc_wrap a { display: inline-block; vertical-align: middle; }
.soc_wrap a:first-child { }


#adrBox { float: left; }
#adrBox h3 { font-size: 2.5em; font-weight: 300; margin: 0; padding-left: 36px; }
#adrBox .maps, #adrBox .tel, #adrBox .mail { font-size: 1.8em; display: block; position: relative; vertical-align: middle; margin-top: 10px; padding-top: 2px; padding-left: 36px; }
#adrBox .maps img, #adrBox .tel img, #adrBox .mail img { position: absolute; left: 0; top: 0; }
#adrBox .maps, #adrBox .mail { margin-top: 20px; }

/* Rueckruf */
#rrBox { width: 210px; float: right; font-size: 1.8em; }
.line { padding-top: 8px; clear: both; }
.line label { display: block; }
.line div { float: left; }
#rrBox h4 { margin: 0; margin-bottom: 6px; font-weight:400; }
#rrBox button {
cursor: pointer;
font-size: 18px;
font-weight: 300;
padding: 10px;
width: 140px;
color: #ffffff;
 background-color: #435761;
-moz-border-radius: 4px; 
-webkit-border-radius: 4px;
-o-border-radius:4px;
-ms-border-radius: 4px;
border-radius: 4px;
border: none;
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
margin-top: 26px;
}
#rrBox button:active { border: none; }
#rrBox input { width: 200px; height: 35px; background-color: #545a5f; font-size: 1em; color: #ffffff; font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;}
#rrBox input { border: none; padding-left: 8px; }
#rrBox input { -moz-border-radius: 4px; 
-webkit-border-radius: 4px;
-o-border-radius:4px;
-ms-border-radius: 4px;
border-radius: 4px; }

/* BV Form */
.formline { margin-bottom: 20px; width: 90%; margin-right: 6%; }
.formline.half { width: 42%; float: left; }
.formline input, .formline textarea { width: 100%; height: 30px; font-size: 1.8em; font-weight: 400; color: #a9a8a8; padding: 4px 10px; border: 1px solid #a1d7dc; font-family: "Source Sans Pro", Arial, Helvetica, sans-serif; }
.formline input, .formline textarea, .formline button { -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; }
.formline textarea { height: 80px; }
.formline button { height: 50px; width: 165px; background-color: #ec4343; border: 1px solid #ffffff; color: #ffffff; font-size:1.8em; font-family: "Source Sans Pro", Arial, Helvetica, sans-serif; }
.ret { font-size: 1.8em; padding-bottom: 280px }

#cookieChoiceInfo { font-size: 1.6em; line-height: 1.6em; width: 96%; padding: 2%; }
#cookieChoiceDismiss { color: #ffffff; padding: 6px 14px; font-weight: 400; background-color: #2e3d45; border-radius: 6px; }

@media screen and (max-width: 970px) {

	#topNav a { font-size: 1.8em; }
	.ag_eins .fg img { top: 8vw; }
	.ag_zwei .icon { font-size: 2vw; }
	#g_logos .icon { font-size: 2vw; }
	
	#footBar1 .center1 { width: 80%; }
	.center2 { width: 96%; }
	.gbv_referenzen .item .txt { padding-top: 20%; }
}

@media screen and (max-width: 870px) {
	#topNav a { font-size: 1.6em; }	
}

@media screen and (max-width: 790px) {
	.center1 { width: 96%; }
	#topBar .center1 { width: 100%; }
		
	.ritem { font-size: 2.4vw; height: 9vw; }
	
	/* mobile nav */
	#mobNavButton { display: block; }
	#topNav { display: none; position: relative; padding-top: 40px; padding-bottom: 40px; padding-left: 12%; width: 100%; top: 0; right: 0; left: auto; background-color: #000000; }
	#topNav a { width: 30%; font-size: 1.8em; padding: 4%; height: auto; }
	#topNav a:hover { background-color: #182127; }
	
	#rrBox { display: none; }
	#footBar1 .center1 { width: 410px; }
	#tagBox { display: none; }
	#footBar1 .pad { padding-bottom: 40px; }
	
	.soc_wrap { position: relative; width: 100%; right: auto; text-align: center; }
}

@media screen and (max-width: 600px) {
	.gbv_referenzen .item { width: 47%; height: 47vw; max-height: none; }
	
	#footBar2 { height: auto; }
	
}

@media screen and (max-width: 500px) {

	h2, h1 { font-size: 3em; }
	.extLink { font-size: 1em; }
	
	.ag_zwei .icon:last-child { width: 50%; margin: 0 25%; }
	.ag_zwei .icon { width: 50%; max-height: none; }
	.ag_zwei .icon { height: 60vw; font-size: 4vw; }
	.ag_zwei .icon span { font-size: 1em; }
	
	.ritem { font-size: 4vw; height: 14vw; width: 42%; padding: 0 3%; margin-right: 2%; margin-bottom: 2%; }

	#adrBox h3 { font-size: 2em; }
	#adrBox span { display: block; }
	#adrBox span.slash { display: none; }
	#adrBox .tel img, #adrBox .maps img { top: 12px; }
	#footBar1 .center1 { width: 290px; }
	#footBar2 { font-size: 2em; }
	
	.formline.half, .formline { width: 92%; }
}

@media screen and (max-width: 450px) {
	h2, h1 { font-size: 2.4em; }

	#logoBox { width: 80%; }
	#logoBox img { margin-top: 26px; }
	
	.ag_zwei .icon { font-size: 5vw; }
	
	#topNav a { width: 60%; font-size: 1.8em; padding: 4%; }
	
}

@media screen and (max-width: 420px) {
	.gbv_referenzen .item { width: 67%; height: 67vw; margin: 0 16% 10% 16%; max-height: none; }
}

@media screen and (max-width: 340px) {
	.gbv_referenzen .item { width: 87%; height: 87vw; margin: 6%; max-height: none; }
}