/*
	Hear My Name CSS V3
         Designer: Hear My Name UG | www.hmn.ug
         =================================================
         Grundfarben: #EFEFEC (helles grau), #b6b6b6 (dunkles Grau), #00B5E9 (Blau), #ffd53f (gelb)
*/

/* Links */
a:link, a:visited {
   	font-size: 1.0em;
 	color: #00B5E9;
 	font-weight: normal;
 	text-decoration: none;
         padding-bottom: 1px;
         border-bottom: 2px #00B5E9 dotted;
         transition: 0.4s;
}

a:hover {
 	color: #000000;
 	text-decoration: none;
         transition: 0.4s;
}
a.no { border-bottom: 0px #00B5E9 dotted; }

/* Button */
a.button:link, a.button:visited {
	padding: 6px 20px;
 	margin: 5px 5px 5px 0px;
 	border: 1px #00B5E9 solid;
 	font-size: 1.2em;
         font-weight: normal;
         text-shadow: #FFFFFF 1px 1px 0px;
         color: #00B5E9;
         background-color: #ffffff;
         border-radius: 6px;
         -moz-border-radius: 6px;
         -khtml-border-radius: 6px;
}

a.button:hover {
	color: #FFFFFF;
         text-decoration: none;
         text-shadow: #00B5E9 1px 1px 0px;
	background-color: #00B5E9;
         border: 1px #FFFFFF solid;
}

a.button2:link, a.button2:visited {
	display: inline-block;
	padding: 7px 60px 7px 40px;
 	margin: 5px 5px 5px 5px;

 	font-size: 1.2em;
         font-weight: normal;
         color: #FFFFFF;
         text-shadow: #00B5E9 1px 1px 0px;
         text-align: left;
         text-decoration: none;

         border: 2px #FFFFFF solid;
         background: #00B5E9 url(../images/button_hover.png) center right no-repeat;

         border-radius: 30px;
         -moz-border-radius: 30px;
         -khtml-border-radius: 30px;
}

a.button2:hover {
         text-shadow: #FFFFFF 1px 1px 0px;
         color: #00B5E9;

         border: 2px #00B5E9 solid;
         background: #FFFFFF url(../images/button.png) center right no-repeat;
}

a.external {
 	background-image: url(../images/el-16.png);
         background-position: center right !important;
         background-repeat: no-repeat !important;
         padding-right: 35px !important;
}
a.external:hover { background-image: url(../images/el-16-w.png); }


/* Allgemein */
html {
	border: 0px #FFFFFF solid;
}
html, body {
	background:#FFFFFF url(../images/bg.png) center -50px repeat-x;
         margin: 0px;
         padding: 0px;
         min-width: 320px;
}

.links 	{ float:left; }
.rechts 	{ float:right; }
img 	{ border: 0px; }
.pad     { padding: 10px; }
.pad_top { padding: 20px 0px; }
.pad_side{ padding: 0px 20px; }
.pad_big { padding: 20px 25px; }
.clear 	{ clear:both; line-height:0.0em; height: 0px; display: block; background-color: #FFDF00; padding: 0px !important; margin: 0px !important; }
.center 	{ text-align:center; }
.small	{ font-size: 0.8em !important; }
.medium	{ font-size: 1.0em !important; }
.big	{ font-size: 1.2em !important; }
.line	{ border-bottom: 2px #BFBFBF dotted; }
.round	{ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.aright  { text-align: right; }
.acenter { text-align: center; }
.ajustifiy { text-align: justify; }
.lineheight { line-height: 1.6em !important; }

.w100 	{ width: 100%; }
.w100pad { width: calc(100% - 20px); padding: 5px 10px; }
.w75 	{ width: 75%; }
.w75pad 	{ width: calc(75% - 20px); padding: 5px 10px; }
.w50 	{ width: 50%; }
.w50pad 	{ width: calc(50% - 20px); padding: 5px 10px; }
.w33 	{ width: 33.3%; }
.w33pad 	{ width: calc(33.3% - 20px); padding: 5px 10px; }
.w25 	{ width: 25%; }
.w25pad 	{ width: calc(25% - 20px); padding: 5px 10px; }

.blue 	{ background: #00B5E9; color: #FFFFFF; text-shadow: #00B5E9 1px 1px 0px; }
.blue2 	{ background: #78c6e7; color: #054453; text-shadow: #78c6e7 1px 1px 0px; }
.grey 	{ background: #f5f5f5; color: #4F4F4F; text-shadow: #FFFFFF 1px 1px 0px; }
.grey2 	{ background: #efefef; color: #4F4F4F; text-shadow: #FFFFFF 1px 1px 0px; }

.block 	{ background: #00B5E9; color: #FFFFFF; text-shadow: #00B5E9 1px 1px 0px; padding: 10px 15px; }

.in_shadow { -webkit-box-shadow: inset 0px 7px 10px -10px rgba(0, 0, 0, 0.40), inset 0px -7px 10px -10px rgba(0, 0, 0, 0.40); -moz-box-shadow:    inset 0px 7px 10px -10px rgba(0, 0, 0, 0.40), inset 0px -7px 10px -10px rgba(0, 0, 0, 0.40); box-shadow:         inset 0px 7px 10px -10px rgba(0, 0, 0, 0.40), inset 0px -7px 10px -10px rgba(0, 0, 0, 0.40); }
.additional { text-indent: -9999px; height: 0px; width: 0px; }

td { padding: 2px 5px !important; }

body, div {
 	font-family: 'Open Sans', sans-serif, Verdana;
 	font-size: 1.0em;
 	color: #3F3F3F;
 	font-weight: normal;
         text-shadow: #FFFFFF 1px 1px 1px;

         padding: 0px 0px 0px 0px;
         margin: 0px 0px 0px 0px;
}

/* �berschriften */
h1 {
         font-family: 'Questrial', sans-serif; /* Ruda? */
         font-size: 3.0em;
         color: #FFFFFF;
         font-weight: normal;
         margin: 0px 0px 0px 0px;
         text-shadow: #009bc7 2px 2px 0px;
}

h2 {
         font-family: 'Questrial', sans-serif;
         font-size: 2.0em;
         color: #9f9f9f;
         font-weight: normal;
         margin: 0px 0px 0px 0px;
         text-shadow: #DADAD4 0px 0px 0px;
}

h3 {
	display: inline-block;
         margin: 10px 0px 0px 0px;
         padding: 5px 10px 3px 10px;

         font-family: 'Ruda', sans-serif;
         font-size: 1.4em;
         color: #FFFFFF;
         font-weight: 700;
         text-shadow: #DADAD4 0px 0px 0px;

         background: #b6b6b6;
         cursor: pointer;
}

h3.color {
	display: inline-block;
         margin: 10px 0px 0px 0px;
         padding: 5px 10px 3px 10px;

         font-family: 'Ruda', sans-serif;
         font-size: 1.4em;
         color: #FFFFFF;
         font-weight: 700;
         text-shadow: #00B5E9 0px 0px 0px;
         text-align: center;

         background: #00B5E9;
}

.headline h3 {
         display: inline-block;
         margin: 0px 0px 0px 0px;
         padding: 0px 0px 0px 0px;
         height: 40px;

         font-family: 'Ruda', sans-serif;
         font-size: 1.6em;
         color: #00b5e9;
         font-weight: normal;
         text-shadow: #FFFFFF 0px 0px 0px;

         background: #FFFFFF;
         border-bottom: 2px #00b5e9 solid;
}

.headline {
         font-family: 'Ruda', sans-serif;
         font-size: 1.0em;
         color: #FFFFFF;
         border-bottom: 2px #EFEFEF solid;
         margin: 10px 0px 10px 0px;
         padding: 5px 0px 5px 0px;
         height: 35px;
}


h4 {
         font-family: 'Ruda', sans-serif;
         font-size: 1.4em;
         color: #3F3F3F;
         text-shadow: #DADAD4 1px 1px 1px;
         font-weight: normal;
         margin: 0px 0px 5px 0px;
         letter-spacing: -0.07em;
}

h5 {
         display: inline-block;
         margin: 10px 0px 0px 0px;
         padding: 5px 10px 3px 10px;

         font-family: 'Ruda', sans-serif;
         font-size: 1.2em;
         color: #FFFFFF;
         font-weight: bold;
         text-shadow: #DADAD4 0px 0px 0px;

         background: #b6b6b6;
}

/* Aufbau */
#wrapper {
         width: 100%;
}

.in {
	min-width: 300px;
         width: calc(100% - 40px);
         max-width: 1400px;
         margin: 0px auto 0px auto;


}

#header {
         width: calc(100% - 20px);
         margin: 0px auto;

/*
-webkit-clip-path: polygon(0 0, 100% 1%, 100% 90%, 50% 100%, 0 90%);
clip-path: polygon(0 0, 100% 1%, 100% 90%, 50% 100%, 0 90%); */

}

#logo {
         display: block;
         width: 100%;
         margin: 10px auto 20px auto;
         text-align: center;
}

#logo img {
         width: calc(100% - 20px);
         max-width:685px;
         height: inherit;
         margin: 0px auto;
}

#menu {
	width: 100%;
         margin: 70px auto 120px auto;
         text-align: center;
}

#menu a:link, #menu a:visited {
	display: inline-block;
         margin: 5px 10px;
         padding: 15px 15px;
         width: 150px;

         border: 1px #FFFFFF solid;
         -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

         font-family: 'Questrial', sans-serif;
         font-size: 1.4em;
         color: #FFFFFF;
         font-weight: normal;
         text-shadow: #009bc7 1px 1px 1px;
         text-decoration: none;
}

#menu a:hover {
	color: #00B5E9;
         background: #FFFFFF;
         text-shadow: #FFFFFF 1px 1px 1px;
}

#site {
         width: 100%;
         margin: 0px auto;
}

#footer {
	background: #00B5E9;
         width: 100%;

         padding: 20px 0px 40px 0px;

         text-align: center;
         font-size: 1.0em;
         color: #FFFFFF;
         font-weight: normal;
         text-shadow: #009bc7 1px 1px 1px;
}

#footer a:link, #footer a:visited {
         font-size: 1.0em;
         color: #FFFFFF;
         font-weight: normal;
         text-decoration: none;
}

#footer a:hover {
	color: #ffd53f;
}

#footer b { padding-bottom: 6px; border-bottom: 2px #FFFFFF solid; }

#socialmedia {
         text-align: center;
         padding: 0px auto 0px auto;
}

#socialmedia a.fb { display: inline-block; background: url(../images/icon_facebook.png) top center no-repeat; width: 150px; height: 130px; }
#socialmedia a.fb:hover { background: url(../images/icon_facebook_hover.png) top center no-repeat; }
#socialmedia a.gp { display: inline-block; background: url(../images/icon_googleplus.png) top center no-repeat; width: 150px; height: 130px; }
#socialmedia a.gp:hover { background: url(../images/icon_googleplus_hover.png) top center no-repeat; }
#socialmedia a.tw { display: inline-block; background: url(../images/icon_twitter.png) top center no-repeat; width: 150px; height: 130px; }
#socialmedia a.tw:hover { background: url(../images/icon_twitter_hover.png) top center no-repeat; }
#socialmedia a.fo { display: inline-block; background: url(../images/icon_foto.png) top center no-repeat; width: 150px; height: 130px; }
#socialmedia a.fo:hover { background: url(../images/icon_foto_hover.png) top center no-repeat; }

/* Startseite */
#startseite .l, #startseite .m, #startseite .r { float: left; width: calc(33.333% - 20px); margin: 0px; color: #5F5F5F; font-size: 0.9em; }
#startseite .m { margin: 0px 30px; }
#startseite .l img, #startseite .m img, #startseite .r img { width: 100%; height: inherit; margin: 0px 0px 10px 0px; }

/* Projekte */
#projekte {}
#projekt_bg {
	background-repeat: no-repeat;
	background-position: center top;
         width: 100%;
         height: 300px;
         margin-bottom: 20px;
	-webkit-box-shadow: inset 0px 10px 15px -10px rgba(0, 0, 0, 0.40), inset 0px -10px 15px -10px rgba(0, 0, 0, 0.40);
	-moz-box-shadow:    inset 0px 10px 15px -10px rgba(0, 0, 0, 0.40), inset 0px -10px 15px -10px rgba(0, 0, 0, 0.40);
	box-shadow:         inset 0px 10px 15px -10px rgba(0, 0, 0, 0.40), inset 0px -10px 15px -10px rgba(0, 0, 0, 0.40);
}
#projekt_bg.amo { background-image: url(../../../upload/projekte/amo_full.jpg); }
#projekt_bg.bgm { background-image: url(../../../upload/projekte/bgm_full.jpg); }
#projekt_bg.dtc { background-image: url(../../../upload/projekte/dtc_full.jpg); }
#projekt_bg.fsk { background-image: url(../../../upload/projekte/fsk_full.jpg); }
#projekt_bg.gbb { background-image: url(../../../upload/projekte/gbb_full.jpg); }
#projekt_bg.gpv { background-image: url(../../../upload/projekte/gpv_full.jpg); }
#projekt_bg.mbg { background-image: url(../../../upload/projekte/mbg_full.jpg); }
#projekt_bg.mrg { background-image: url(../../../upload/projekte/mrg_full.jpg); }
#projekt_bg.mtl { background-image: url(../../../upload/projekte/mtl_full.jpg); }
#projekt_bg.ski { background-image: url(../../../upload/projekte/ski_full.jpg); }
#projekt_bg.vdb { background-image: url(../../../upload/projekte/vdb_full.jpg); }
#projekt_bg.wim { background-image: url(../../../upload/projekte/wim_full.jpg); }
#projekt_bg.wop { background-image: url(../../../upload/projekte/wop_full.jpg); }

#projekte .info {
	float: left;
         width: calc(50% - 20px);
         text-align: justify;
}
#projekte .features {
	float: right;
         width: calc(50% - 50px);
         padding: 15px 15px 5px 15px;
         font-size: 0.9em;
         margin-top: 95px;
}

#projekte .item { float: left; width: calc(20% - 10px); text-align: center; padding: 5px 0px; margin: 5px; }
#projekte .item a { text-decoration: none !important; border: 0px !important; }

/* Dienstleitungen */
#dienstleistung .info {
	float: left;
         width: calc(50% - 20px);
         text-align: justify;
}
#dienstleistung .features {
	float: right;
         width: calc(50% - 50px);
         padding: 15px 15px 5px 15px;
         font-size: 0.9em;
         margin-top: 40px;
}

#dienstleistung .item { float: left; width: calc(20% - 10px); text-align: center; padding: 5px 0px; margin: 5px; }
#dienstleistung .item a { text-decoration: none !important; border: 0px !important; }

#dienstleistungen .pad_side {
	padding-left: 0px;
         padding-right: 30px;
}


/* Sonstiges */
ul { margin: 0px; padding: 10px 0px; list-style: none; }
li { background: url(../images/dot.png) left center no-repeat; margin: 0px; padding: 5px 0px 5px 35px; border-bottom: 2px #CFCFCF dotted; }
li:last-child { border-bottom: 0px #CFCFCF dotted; }

#w { position: fixed; display: none; top: 0; left: 0; background: #000000; color: #FFFFFF; padding: 5px 10px; }

#shadow {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         z-index: 100;
         background-color: rgba(0, 0, 0, 0.55);
         width: 100%;
         height: 100%;
         cursor: pointer;
}

#top {
         position: fixed;
         z-index: 10;
         bottom: 20px;
         right: 20px;
         display: none;

         background: #00B5E9;
         padding: 3px 8px 3px 10px;

         font-size: 1.0em;
         color: #FFFFFF;
         text-shadow: #65DDED 1px 1px 0px;

         cursor: pointer;
}

#top .show { display: block; }
#top b { display: inline; font-weight: bold; padding-top: 0px !important; }


/* Kontakt */
#kontakt {}
#kontakt .l { text-align: right; padding: 40px 40px 40px 0px; border-right: 6px #00B5E9 solid; }
#kontakt .r { padding: 50px 0px 10px 40px; }
#kontakt .r .rechts { float: left; padding-left: 20px; }
#kontakt .r .top { padding-top: 10px; }
#kontakt .r .mail { padding-top: 10px; direction: rtl; unicode-bidi: bidi-override; }
.mail { direction: rtl; unicode-bidi: bidi-override; }

#kontakt .l, #kontakt .r {
	float:left;
         margin: 0px 0px;
         width: calc(50% - 46px);
}

#kontaktform {
	max-width: 600px;
         width: 100%;
         border: 0px #FFFFFF solid;
         padding: 0px;
         margin: 30px auto 20px auto;
}

#kontaktform label {
	display: inline-block;
	width: 130px;
         padding-right: 10px;
         line-height: 1.5em;
         font-size: 1.0em;
         font-weight: bold;
         padding-top: 3px;
         text-align: right;
         vertical-align: top;
}

#kontaktform .ds { font-size: 0.9em; text-align: justify; }

#kontaktform input, #kontaktform textarea { width: calc(100% - 160px); background-color: #FFFFFF; }
#kontaktform input[type="checkbox"] { width: 20px; background-color: #FFFFFF; }
#kontaktform select { width: calc(100% - 140px); background-color: #FFFFFF; }

#referenzen2 .item { float: left; display: inline-block; width: calc(33% - 0px); margin: 0px; padding: 0px; height: 250px; }
#referenzen2 .item .image { width: 100%; height: 250px; }
#referenzen2 .item .info { opacity: 0.0; filter: alpha(opacity=0); transition: 0.8s; cursor: pointer; margin-top: -250px; width: 100%; height: 250px; font-family: 'Ruda', sans-serif; font-size: 1.1em;  text-align: center; background: #00B5E9; color: #FFFFFF; text-size: 1.1em; text-shadow: #00B5E9 0px 0px 0px; }
#referenzen2 .item .info:hover { opacity: 1.0; filter: alpha(opacity=100); transition: 0.8s; }
#referenzen2 .item .info b { display: block; height: 20px; overflow: hidden; padding: 30px 0px 10px 0px; font-size: 1.2em; }
#referenzen2 .item .info .text { height: 80px; overflow: hidden; padding: 10px 20px 10px 20px; width: calc(100% - 40px); font-size: 0.9em; text-shadow: #00B5E9 0px 0px 0px; color: #FFFFFF; }

#referenzen2 .item .image.adc { background: #EFEFEF url(../../../upload/referenzen/adc_full.jpg) center center no-repeat; background-size: 100%; }
#referenzen2 .item .image.do { background: #EFEFEF url(../../../upload/referenzen/dealonkel_full.jpg) center center no-repeat; background-size: 100%; }
#referenzen2 .item .image.pkv { background: #EFEFEF url(../../../upload/referenzen/pkvtarifvergleich_full.jpg) center center no-repeat; background-size: 100%; }
#referenzen2 .item .image.red { background: #EFEFEF url(../../../upload/referenzen/redix_full.jpg) center center no-repeat; background-size: 100%; }
#referenzen2 .item .image.tse { background: #EFEFEF url(../../../upload/referenzen/tauchspasserleben_full.jpg) center center no-repeat; background-size: 100%; }
#referenzen2 .item .image.wi { background: #EFEFEF url(../../../upload/referenzen/wisimi_full.jpg) center center no-repeat; background-size: 100%; }
#referenzen2 .item .image.vf { background: #EFEFEF url(../../../upload/referenzen/vielfaedig_full.jpg) center center no-repeat; background-size: 100%; }

#referenzen .item, #angebote .item { float: left; width: calc(50% -  10px); margin: 10px 0px; padding: 0px 0px 10px 0px; border-bottom: 2px #EFEFEF dotted; }
#referenzen .item:last-child, #angebote .item:last-child { border-bottom: 2px #FFFFFF dotted; }
#referenzen .item:nth-child(even), #angebote .item:nth-child(even) { float: right; }
#referenzen .item .image, #angebote .item .image { float: left; width: 250px; }
#referenzen .item .info, #angebote .item .info { float: right; width: calc(100% - 270px); padding-right: 10px; }
#referenzen .item b, #angebote .item b { display: block; height: 22px; overflow: hidden; }
#referenzen .item .info .text, #angebote .item .info .text { height: 80px; overflow: hidden; margin: 8px 0px 8px 0px; font-size: 0.9em; }
#referenzen .item .image img, #angebote .item .image img { width: 100%; height: inherit; }

#referenzbutton .item {
         float: left;
         display: inline-block;
	width: calc(33.3333% - 10px);
         height: 200px;
         cursor: pointer;
         margin-right: 15px;
         text-align: center;
}
#referenzbutton .item:last-child { margin-right: 0px; }
#referenzbutton .item .button2 { margin: 140px auto 20px auto; }

#referenzbutton .bannerdesign { background:#00B5E9 url(../images/referenzen_icon_bannerdesign.png) center 20px no-repeat; }
#referenzbutton .bannerdesign:hover { background:#00B5E9 url(../images/referenzen_icon_bannerdesign_hover.png) center 20px no-repeat; }
#referenzbutton .grafikdesign { background:#00B5E9 url(../images/referenzen_icon_grafikdesign.png) center 20px no-repeat; }
#referenzbutton .grafikdesign:hover { background:#00B5E9 url(../images/referenzen_icon_grafikdesign_hover.png) center 20px no-repeat; }
#referenzbutton .webdesign { background:#00B5E9 url(../images/referenzen_icon_webdesign.png) center 20px no-repeat; }
#referenzbutton .webdesign:hover { background:#00B5E9 url(../images/referenzen_icon_webdesign_hover.png) center 20px no-repeat; }

/* Overlay */
#overlay {
         display: none;
         position:fixed;
         top:0%;

         z-index:10;

         height: 100%;
         width: 100%;

         color: #FFFFFF;
         background:#00b5e9 url(../images/bg_overlay.png) right top;

         -webkit-box-shadow: inset 0px 0px 150px 0px rgba(0, 0, 0, 0.75);
	-moz-box-shadow:    inset 0px 0px 150px 0px rgba(0, 0, 0, 0.75);
	box-shadow:         inset 0px 0px 150px 0px rgba(0, 0, 0, 0.75);
}

#overlay #content {
         display: none;
         z-index:12;

         min-height: 200px;
         width: 100%;

         color: #FFFFFF;
	border: 0px #FFFFFF solid;
         margin: 20px 0px 20px 0px;
         text-align: center;
}

#overlay #content img {
         max-width: calc(100% - 40px);
         width: auto;
         height: auto;

         margin: 30px 20px 0px 20px;

         vertical-align: middle;

	-webkit-box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.55);
	-moz-box-shadow:    4px 4px 5px 0px rgba(0, 0, 0, 0.55);
	box-shadow:         4px 4px 5px 0px rgba(0, 0, 0, 0.55);
}

#overlay #content_text {
         position:absolute;
         display: none;
         z-index:12;
         left: 50%;
         width: 200px;

         min-height: 200px;
         color: #FFFFFF;

         color: #FFFFFF;
	border: 0px #FFFFFF solid;
}

#overlay #logo {
         position:absolute;
         top: 0;
         right: 0;
         z-index:11;

         height: 100%;
         width: 100%;
         background:transparent url(../images/logo_bg_hmn.png) right top no-repeat;

         margin: 100px -200px 0px 0px;

         -webkit-transform: rotate(15deg); /* chrome & safari*/
    	-moz-transform: rotate(15deg); /* firefox */
    	-o-transform: rotate(15deg); /* opera */
    	transform: rotate(15deg); /* explorer > 9 */

}

#overlay #auswahl {
         position:absolute;
         z-index:12;
         bottom: 0px;

         height: 190px;
         width: 100%;

         background: #FFFFFF;
         -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
	-moz-box-shadow:    0px 0px 15px 0px rgba(0, 0, 0, 0.75);
	box-shadow:         0px 0px 15px 0px rgba(0, 0, 0, 0.75);
}

#overlay #auswahl .items {
	display: none;
	border: 0px #000000 solid;
         height: 170px;
         margin: 10px auto 10px auto;
         width: 80%;
         text-align: center;
         font-size: 0;
         overflow: hidden;
}

.bubble_item {
         display: inline-block;
	width: 75px;
	height: 75px;
         margin: 5px;
         border-radius: 45px;
         -moz-border-radius: 45px;
         -khtml-border-radius: 45px;

         cursor: pointer;

         background-size: inherit;
         background-repeat: no-repeat;
         background-position: center center;

         -webkit-box-shadow: inset 0px 0px 15px 0px rgba(0, 0, 0, 0.50);
	-moz-box-shadow:    inset 0px 0px 15px 0px rgba(0, 0, 0, 0.50);
	box-shadow:         inset 0px 0px 15px 0px rgba(0, 0, 0, 0.50);

         opacity: 0.7;
  	-webkit-transition: opacity 300ms ease-in-out;
  	-moz-transition: opacity 300ms ease-in-out;
  	transition: opacity 300ms ease-in-out;
}

.bubble_item:hover {
  	opacity: 1;
         width: 85px;
	height: 85px;
         margin: 0px;
}

.bubble_item img { display: none; }

#overlay #close_button {
         position:absolute;
         top: 0;
         right: 20px;
         z-index:15;

	background: #FFFFFF;
         padding: 10px 20px;

         font-family: 'Questrial', sans-serif;
         font-size: 22px;
         font-weight: bold;
         color: #0F0F0F;
         line-height: 1.0em;

         cursor: pointer;
         opacity: 0.3;

         -webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
         -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);
	-moz-box-shadow:    0px 5px 5px 0px rgba(0, 0, 0, 0.75);
	box-shadow:         0px 5px 5px 0px rgba(0, 0, 0, 0.75);

         transition: opacity .25s ease-in-out;
         -moz-transition: opacity .25s ease-in-out;
   	-webkit-transition: opacity .25s ease-in-out;
}

#overlay #close_button:hover {
         opacity: 1.0;
}

#overlay #arrow_left, #overlay #arrow_right {
         position:absolute;
         top: 35%;
         z-index:15;

	background: #FFFFFF;
         padding: 8px 16px;

         font-family: 'Questrial', sans-serif;
         font-size: 28px;
         font-weight: bold;
         color: #0F0F0F;
         line-height: 1.0em;

         cursor: pointer;
         opacity: 0.1;

         -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);
	-moz-box-shadow:    0px 5px 5px 0px rgba(0, 0, 0, 0.75);
	box-shadow:         0px 5px 5px 0px rgba(0, 0, 0, 0.75);

         transition: opacity .25s ease-in-out;
         -moz-transition: opacity .25s ease-in-out;
   	-webkit-transition: opacity .25s ease-in-out;

         -webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
}

#overlay #arrow_left {
         position:absolute;
         top: 40%;
         left: 20px;
         z-index:15;
}

#overlay #arrow_right {
         position:absolute;
         top: 40%;
         right: 20px;
         z-index:15;
}

#overlay #arrow_left:hover, #overlay #arrow_right:hover {
         opacity: 1.0;
}

.bubble img{
	position:fixed;
	top:50%;
	left:50%;
	width:0px;
	height:0px;
         z-index:10;
}

/* Info Box */
.loading {
	width: 50px;
         height: 50px;
         margin: 10px auto;
	background:transparent url(../images/loading.gif) center center no-repeat;
         background-size:50px 50px;
}

#wait_box {
         top: 0;
         position: absolute;
         z-index:1000;
         display:none;

	min-width: 300px;
         max-width:500px;
         min-height: 150px;

	border: 5px solid #00B5E9;

	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;

	color: #000000;
    	font-size: 1.0em;
    	font-weight: bold;
         text-align: center;
    	background-color:#FFFFFF;
         text-shadow: #FFFFFF 0px 0px 0px;

         -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.50);
	-moz-box-shadow:    0px 0px 15px 0px rgba(0, 0, 0, 0.50);
	box-shadow:         0px 0px 15px 0px rgba(0, 0, 0, 0.50);
}


/* Tooltip */
.tooltip {
         position: absolute;
         left: 50% !important;
         padding:5px 10px;
         margin-top: 120px !important;

         background:rgba(0,0,0,.7);
    	border-radius:15px;

	font-size: 12pt;
         font-family: 'Questrial', sans-serif;
         font-weight: bold;
         color: #FFFFFF;

         text-shadow: #7F7F7F 0px 0px 0px;
}

.tooltip:before,
.tooltip:after {
    	content:'';
    	border-style:solid;
    	border-width:10px 10px 0;
    	position:absolute;
    	top:100%;
    	left:50%;
    	margin-left:-10px;
}
.tooltip:before {
    	border-color:rgba(0,0,0,.5) transparent transparent;
    	margin-top:0px;
}
.tooltip:after {
    	border-color:rgba(0,0,0,.5) transparent transparent;
    	margin-top:0px;
}

/* Formular */
input, select, textarea {
 	border: 1px #CFCFCF solid;
         width: 100%;

 	font-size: 1.0em;
 	font-family: 'Questrial', sans-serif;

 	background-color: #f9f9f9;
 	color: #000000;
 	padding: 7px 8px 5px 10px;
 	margin: 2px 0px;

         -webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

         -moz-box-shadow:    inset 2px 2px 3px #DFDFDF;
   	-webkit-box-shadow: inset 2px 2px 3px #DFDFDF;
   	box-shadow:         inset 2px 2px 3px #DFDFDF;
}

input[type="radio"] {
	background-color: #FFFFFF;
         -moz-box-shadow:    inset 0px 0px 0px #DFDFDF;
   	-webkit-box-shadow: inset 0px 0px 0px #DFDFDF;
   	box-shadow:         inset 0px 0px 0px #DFDFDF;
}

input[type="submit"], input[type="button"] {
 	padding: 7px 8px 5px 10px;
 	margin: 2px 0px;
         height: 40px;
         width: calc(100% + 0px) !important;

 	border: 0px #C5C6C9 solid;
 	font-size: 13pt;
         font-family: 'Questrial', sans-serif;
         font-weight: bold;
         color: #FFFFFF;

         text-shadow: #7F7F7F 1px 1px 0px;
	background: #b6b6b6;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I2YjZiNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZWNlY2UiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #b6b6b6 0%, #cecece 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6b6b6), color-stop(100%,#cecece));
	background: -webkit-linear-gradient(top,  #b6b6b6 0%,#cecece 100%);
	background: -o-linear-gradient(top,  #b6b6b6 0%,#cecece 100%);
	background: -ms-linear-gradient(top,  #b6b6b6 0%,#cecece 100%);
	background: linear-gradient(to bottom,  #b6b6b6 0%,#cecece 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6b6b6', endColorstr='#cecece',GradientType=0 );

         cursor: pointer;
         -moz-box-shadow:    inset 0px 0px 0px #DFDFDF;
   	-webkit-box-shadow: inset 0px 0px 0px #DFDFDF;
   	box-shadow:         inset 0px 0px 0px #DFDFDF;
}

input[type="submit"]:hover, input[type="button"]:hover {
 	border: 0px #C5C6C9 solid;
         font-weight: bold;
         color: #FFFFFF;


         text-shadow: #0B98BF 1px 1px 0px;
	background: #00b5e9;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYjVlOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMGFkZGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #00b5e9 0%, #00addd 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b5e9), color-stop(100%,#00addd));
	background: -webkit-linear-gradient(top,  #00b5e9 0%,#00addd 100%);
	background: -o-linear-gradient(top,  #00b5e9 0%,#00addd 100%);
	background: -ms-linear-gradient(top,  #00b5e9 0%,#00addd 100%);
	background: linear-gradient(to bottom,  #00b5e9 0%,#00addd 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b5e9', endColorstr='#00addd',GradientType=0 );
}

/* Datenschutz Formatierung */
#datenschutz h2 {
         display: inline-block;
         background: #27C1ED;

         font-size: 1.6em;
         text-shadow: #ffffff 0px 0px 0px;
         color: #FFFFFF;
         font-weight: bold;
         text-align: left;
         text-transform: uppercase;

         margin: 0px 0px 5px 0px;
         padding: 10px 10px 10px 10px;
}

#datenschutz h3 {
         display: inline-block;

	padding: 5px 10px;
	margin: 5px 0px 0px 0px;

         font-size: 1.4em;
	text-align: left;
 	font-weight: normal;
 	text-decoration:none;

	border:#DFDFDF 0px solid;
}

#datenschutz .highlight {
	padding: 10px;
         background: #DFDFDF;
}

#datenschutz {
	font-size: 0.9em;
         line-height: 1.2em;
         text-align: justify;
}

/* Datenschutz Info */
#cdi {
         z-index: 101;
         bottom: 25px;
         right: 25px;
         position: fixed;

         width: 250px;
         min-height: 50px;

         background: #FFFFFF;
         border-top: 0px #BFBFBF solid;

         color: #1F1F1F;
         font-size: 13px;
         font-weight: normal;
         text-shadow: #FFFFFF 1px 1px 0px;
         text-align: center;

         -webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.25), 0px 0px 25px 0px rgba(0, 0, 0, 0.35);
	-moz-box-shadow:    inset 0px 1px 1px 0px rgba(255, 255, 255, 0.25), 0px 0px 25px 0px rgba(0, 0, 0, 0.35);
	box-shadow:         inset 0px 1px 1px 0px rgba(255, 255, 255, 0.25), 0px 0px 25px 0px rgba(0, 0, 0, 0.35);
}

#cdi .cdi-clear { clear:both; line-height:0.0em; height: 0px; display: block; }

#cdi .cdi-info {
	float:none;
         width: calc(100% - 20px);
         padding: 10px 10px 10px 10px;
}

#cdi .cdi-info a, #cdi .cdi-info a:visited {
	color: #000000;
	font-weight: bold;
         text-decoration: underline;
         text-shadow: #FFFFFF 1px 1px 0px;
         border: 0px;
         padding: 0px 0px;
}

#cdi .cdi-info a:hover { color: #0070C0; }

#cdi .cdi-button {
	float:none;
         width: calc(100% - 20px);

         padding: 5px 10px 10px 10px;
         text-align: center;
}
#cdi .cdi-button form { margin: 0px; padding: 0px; }

#cdi .cdi-button a, #cdi .cdi-button a:visited, #cdi .cdi-button .button, #cdi .cdi-button input[type="submit"] {
	display: block;
         width: calc(100% - 0px);

         cursor: pointer;

	background: #00B5E9;

         font-size: 14px !important;
         color: #FFFFFF;
	font-weight: bold;
         text-shadow: #0091bb 1px 1px 0px;
         text-decoration: none;
         text-align: center;

         padding: 7px 0px;
         margin: 0px 0px;

         border: 1px #00B5E9 solid;
         -webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

         -webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.25);
	-moz-box-shadow:    inset 0px 1px 1px 0px rgba(255, 255, 255, 0.25);
	box-shadow:         inset 0px 1px 1px 0px rgba(255, 255, 255, 0.25);
}

#cdi .cdi-button a:hover, #cdi .cdi-button .button:hover, #cdi .cdi-button input[type="submit"]:hover {
	background: #5F5F5F;

         color: #FFFFFF;
         text-shadow: #000000 1px 1px 0px;

         border: 1px #1F1F1F solid;
}


/* Media Querys */
@media (max-width: 1300px) {
	#projekte .item { float: left; width: calc(25% - 10px); text-align: center; margin: 5px; }
         #referenzen2 .item, #referenzen2 .item .image { height: 220px; }
	#referenzen2 .item .info { margin-top: -220px; height: 220px; }
         #referenzen2 .item .info b { padding-top: 15px; }
}
@media (max-width: 1080px) {
	body { background:#FFFFFF url(../images/bg.png) center -60px no-repeat; }
         h1 { font-size: 2.4em; }
         #menu { margin-bottom: 100px; }
         #menu a:link, #menu a:visited { font-size: 1.3em; width: 130px; }

         #projekt_bg { background-size: 140% !important; }
         #projekte .item { float: left; width: calc(33% - 10px); text-align: center; margin: 5px; }

	#referenzen .item .image, #angebote .item .image { width: 200px; }
	#referenzen .item .info, #angebote .item .info { width: calc(100% - 220px); padding-right: 10px; }
         #referenzen .item .info .text, #angebote .item .info .text { height: 95px; margin: 8px 0px 8px 0px; font-size: 0.8em; }
         #referenzen .item .info b, #angebote .item .info b { font-size: 0.9em; }

         #overlay #auswahl { height: 140px; }
	#overlay #auswahl .items { height: 130px; width: 90%; margin: 5px auto 5px auto; }
	.bubble_item { width: 55px; height: 55px; }
	.bubble_item:hover { width: 65px; height: 65px; }

         #startseite .l, #startseite .m, #startseite .r { width: calc(33.333% - 15px); }
         #startseite h3 { font-size: 1.2em; }
	#startseite .m { margin: 0px 20px; }
}
@media (max-width: 940px) {
	#menu { margin-bottom: 80px; }
	#referenzbutton .item .button2 { width: 80px; padding: 7px 50px 7px 20px; height: 20px; overflow: hidden; font-size: 0.9em; }
         #referenzen2 .item { width: calc(50% - 0px); }
}
@media (max-width: 820px) {
       	#menu a:link, #menu a:visited { padding: 10px 15px; width: 120px; font-size: 1.3em; }

         #projekte .item { float: left; width: calc(33% - 10px); text-align: center; margin: 5px; }
         #projekte .item img { width: 100%; max-width: 250px; height: inherit; }
         #projekte .info, #dienstleistung .info { float: none; width: calc(100% - 0px); }
         #projekte .features { float: none; width: calc(100% - 30px); margin: 20px 0px; }

         #dienstleistung .features, #dienstleistungen .links, #dienstleistungen .rechts { float: none; width: calc(100% - 0px); margin: 20px 0px; padding: 0px; }

         #referenzen .item, #angebote .item { padding-top: 10px; padding-bottom: 10px; margin: 0px; }
         #referenzen .item:nth-child(odd), #angebote .item:nth-child(odd) { border-right: 2px #EFEFEF dotted; padding-right: 8px; }
         #referenzen .item:nth-child(even), #angebote .item:nth-child(even) { padding-left: 10px; }
         #referenzen .item .image, #angebote .item .image { float: none; width: 100%; text-align: center; }
         #referenzen .item .image img, #angebote .item .image img { max-width: 250px; }
	#referenzen .item .info, #angebote .item .info { float: none; width: calc(100% - 20px); padding: 10px; }
         #referenzen .item .info b, #angebote .item .info b { overflow: none; text-align: center; }
         #referenzen .item .info .button, #angebote .item .info .button { float: right; }


         #overlay #auswahl { height: 110px; }
	#overlay #auswahl .items { height: calc(100% - 10px); width: 90%; margin: 5px auto 5px auto; }
	.bubble_item { width: 40px; height: 40px; }
	.bubble_item:hover { width: 50px; height: 50px; }

         #startseite h3 { font-size: 1.1em; }
}

@media (max-width: 720px) {
	body { background:#FFFFFF url(../images/bg2.png) center -160px no-repeat; }
	#menu { margin: 30px auto 80px auto; }
         h1 { font-size: 2.8em; }
         #header h1 span { display: none; }
         #logo img { width: 500px; }
         #kontakt .l, #kontakt .r { float:none; margin: 20px 0px 20px 0px; padding: 10px 10px 30px 10px; width: calc(100% - 20px); text-align: center; }
         #kontakt .l { border-right: 0px #00B5E9 solid; border-bottom: 6px #00B5E9 solid; }
         #kontakt .r .clear { float: none; display: inline-block; }
         #kontakt .r .links { float: left; padding: 0px !important; margin: 0px !important; line-height: 0px !important; height: 40px; width: 40px; }
	#kontakt .r .rechts { float: left; padding: 0px 0px 0px 10px; margin: 0px !important; width: calc(50% - 50px); line-height: 40px !important; text-align: left; }
         #socialmedia a { width: calc(25% - 10px) !important; height: 120px !important; background-size: 100% !important; }
         #top { bottom: 0px; right: 0px; }

         #startseite .l, #startseite .m, #startseite .r { float: none; width: 450px; margin: 10px auto 30px auto; }
         #startseite h3 { font-size: 1.4em; }
}

@media (max-width: 560px) {
	body { background:#FFFFFF url(../images/bg2.png) center -180px no-repeat; }
	#projekte .item { float: left; width: calc(50% - 10px); text-align: center; margin: 5px; }
         h1 { font-size: 2.2em; }
         #logo img { width: 400px; }
         #kontakt .r .links { width: 40px; text-align: left; }
	#kontakt .r .rechts { width: calc(100% - 50px); text-align: right; }
         #socialmedia a { height: 100px !important; }

	h2 { font-size: 1.6em; }
	h3 { font-size: 1.3em; }
	.headline h3 { font-size: 1.4em; }
	h4 { font-size: 1.3em; }
	h5 { font-size: 1.1em; }

         #referenzbutton .item { width: calc(100%); margin-right: 0px; margin-bottom: 10px; }
         #referenzbutton .item .button2 { width: auto; padding: 7px 60px 7px 40px; height: 24px; overflow: hidden; font-size: 1.2em; }

         #referenzen .item, #angebote .item { float: none; width: 100%; margin-bottom: 10px; padding: 10px 0px; border-bottom: 3px #DFDFDF dotted; }
         #referenzen .item:nth-child(odd), #angebote .item:nth-child(odd) { border-right: 0px #EFEFEF dotted; }
         #referenzen .item:last-child, #angebote .item:last-child { border-bottom: 0px #DFDFDF dotted; }

         #referenzen2 .item { float:none; width: calc(100% - 0px); }

         #overlay #auswahl { height: 160px; }

         #startseite .l, #startseite .m, #startseite .r { width: calc(100% - 40px); }
         #startseite h3 { font-size: 1.4em; }
}

@media (max-width: 420px) {
	body { background:#FFFFFF url(../images/bg2.png) center -260px no-repeat; }
         #logo img { width: 300px; }
         #menu { margin-bottom: 40px; }
	#menu a:link, #menu a:visited { margin: 5px 5px; padding: 10px 15px; width: 100px; font-size: 1.2em; }
         #kontaktform { width: 90%; }
         #kontaktform label { display: block; width: 100%; padding-right: 0px; text-align: center; }
         #kontaktform input, #kontaktform textarea { width: calc(100% - 20px); } #kontaktform select { width: calc(100% - 0px); }
         #socialmedia a { height: 80px !important; }

         h2 { font-size: 1.4em; }
	h3 { font-size: 1.2em; }
	.headline h3 { font-size: 1.3em; }
	h4 { font-size: 1.2em; }
         #overlay #auswahl { height: 210px; }
}

@media (max-width: 360px) {
	#socialmedia a { height: 60px !important; }
         #startseite .l, #startseite .m, #startseite .r { width: calc(100% - 0px); }
}