.header-service {
	width:100%;
	height:846px;
	background:url(../img/showcase-back1.1service.png) repeat-x 0 0px;
	margin-bottom:-175px;
}
@media only screen and (max-width: 649px) {
	.header-service {
		background:none!Important;
		margin-bottom:-450px;
	}
}
		/*Hack zur Positionierung des gedehnten / allgemeinen Hintergrundes*/
		/*FIREFOX*/
 		@media screen and (-webkit-min-device-pixel-ratio:0) {
     	.header-service {background:url(../img/showcase-back1.1service.png) repeat-x 0 -1px;}
		}
		/*SAFARI*/
		@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
    	.header-service {background:url(../img/showcase-back1.1service.png) repeat-x 0 -1px;}
    	}
		/* IE HACK */
		*.header-service {
			background:url(../img/showcase-back1.1service.png) repeat-x 0 -1px;
		}

#container1 {
	width:940px;
	height:846px;
	overflow:visible;
	margin:0 auto;
	padding:0 0 0 20px;
}
@media only screen and (max-width: 649px) {
	#container1 {
		width:100%;
		height:40%;
		padding:0;
	}
}
@media only screen and (max-width: 480px) {
	#container1 {
		height:30%;
	}
}
@media only screen and (max-width: 400px) {
	#container1 {
		height:25%;
	}
}
#screendesign{
  margin:0 0 0 -160px;
  width:1245px;
  height:846px;
  overflow:visible;
  background-image: url(../img/screendesign-infografik/main-back.jpg);
  z-index:0;
  position:relative;
}
@media only screen and (max-width: 649px) {
	#screendesign{
	  margin:0 auto;
	  width:100%!Important;
	  height:100%!Important;
	  background-size:100%; 
	}
}

#monitor{
  position:absolute;
  width:541px;
  height:338px;
  z-index:1;
  left:311px;
  top:127px;
  display:none;
  
}

.links{
  position:absolute;
  z-index:2;
  	  font-family: "Source Sans Pro", "sans-serif";
	  font-size:16px;
	  color:#8f7967;
	  font-style:normal!Important;
	  font-weight:300!Important;
	  text-decoration:none!Important;
	  text-shadow: #f2efea 1px 1px 0px;
	  line-height:21px;
	-khtml-opacity: 0.50;
	-moz-opacity: 0.50;
	-webkit-opacity: 0.50;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: 0.50;
}
.links:hover{
	-khtml-opacity: 1.00;
	-moz-opacity: 1.00;
	-webkit-opacity: 1.00;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1.00;
}
#link1{
  left:171px;
  top:450px;
}

#link2{
  position:absolute;
  left:171px;
  top:497px;
}

#link3{
  position:absolute;
  left:746px;
  top:75px;
}

#link4{
  position:absolute;
  left:916px;
  top:140px;
}

#link1, #link2, #link3, #link4,#punkte1, #punkte2, #punkte3, #punkte4, #hoverText1, #hoverText2, #hoverText3, #hoverText4 {
  cursor:pointer!Important;
}
@media only screen and (max-width: 649px) {
	#link1, #link2, #link3, #link4,#punkte1, #punkte2, #punkte3, #punkte4, #hoverText1, #hoverText2, #hoverText3, #hoverText4 {
	  display:none;
	}
}

#fragezeichen1, #fragezeichen2, #fragezeichen3, #fragezeichen4 {
  cursor:pointer!Important;
  	  font-family: "Source Sans Pro", "sans-serif";
	  font-size:20px;
	  color:#8f7967;
	  font-style:normal!Important;
	  font-weight:300!Important;
	  text-decoration:none!Important;
	  text-shadow: #f2efea 1px 1px 0px;
	  line-height:21px;
	-khtml-opacity: 0.50;
	-moz-opacity: 0.50;
	-webkit-opacity: 0.50;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: 0.50;
  
}

.fragezeichen{
  position:absolute;
  z-index:12;
  padding:10px 10px 0px 10px;
  top:578px;
  font-weight:bold;
}
#fragezeichen1{
  left:175px;
}
#fragezeichen2{
  left:290px;
}
#fragezeichen3{
  left:555px;
}
#fragezeichen4{
  left:895px;
}
@media only screen and (max-width: 649px) {
	#fragezeichen1, #fragezeichen2, #fragezeichen3, #fragezeichen4, #fragezeichen5 {
	  display:none;
	}
}

#phone{
  position:absolute;
  z-index:10;
  height:248px;width:262px;
  left:775px;
  top:424px;
  background-image: url(../img/screendesign-infografik/iphone-ipad.png);
  background-repeat:no-repeat;
}
@media only screen and (max-width: 649px) {
	#phone{
	  display:none;
	}	
}

.leiste{
  position:absolute;
  top:620px;
  height:58px;
  cursor:pointer!Important;
}

#leiste1{
  left:153px;
  width:89px;
  z-index:4;
}
#leiste2{
  left:222px;
  width:179px;
  z-index:5;
}
#leiste3{
  left:382px;
  width:391px;
  z-index:6;
}
#leiste4{
  left:755px;
  width:241px;
  z-index:7;
}
#leiste5{
 left:755px;
 width:241px;
 z-index:11; 
}
@media only screen and (max-width: 649px) {
	#leiste1, #leiste2, #leiste3, #leiste4, #leiste5 {
	  display:none;
	}
}

.punkte{
  position:absolute;
  z-index:8
}

#punkte1{
  left:248px;top:307px;
  width:62px;height:153px;
  background-image: url(../img/screendesign-infografik/line-scribble.png);
  -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5;
  filter:alpha(opacity=50);
}

#punkte2{
  left:280px;top:500px;
  width:73px;height:8px;
  background-image: url(../img/screendesign-infografik/line-moodboard.png);
  -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5;
  filter:alpha(opacity=50);
}

#punkte3{
  left:638px;top:82px;
  width:92px;height:44px;
  background-image: url(../img/screendesign-infografik/line-mockup.png);
  -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5;
  filter:alpha(opacity=50);
}

#punkte4{
  left:828px;top:147px;
  width:73px;height:1px;
  background-image: url(../img/screendesign-infografik/line-screendesign.png);
  -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5;
  filter:alpha(opacity=50);
}


.hoverText{
  position:absolute;
  top:260px;
  height:300px;width:600px;
  z-index:100;
  background-color:white;
  -moz-opacity:0.9; -khtml-opacity:0.9; opacity:0.9;
  filter:alpha(opacity=90);
  padding:20px 30px;
  
      font-family: "Source Sans Pro", "sans-serif";
	  font-size:16px;
	  color:#7c6755;
	  font-style:normal!Important;
	  font-weight:300!Important;
	  text-decoration:none!Important;
	  text-shadow: #f2efea 1px 1px 0px;
	  line-height:22px;
	  
	  -moz-border-radius:6px; /* Firefox */
      -webkit-border-radius:6px; /* Safari, Chrome */
	  -khtml-border-radius:6px; /* Konqueror */
	  border-radius:6px; /* CSS3 */
}

.hoverText ul {
  margin:0 0 0 10px;
  padding:0;
}
.hoverText li {
  margin:0 0 15px 68px;
  padding:0;
  list-style-type:square;
}

.hoverText h2 {
	font-size:16px;
	font-weight:bold;	
	color:#8f7967;
}

.hoverText span {
	font-size:120px;
	color:#eae5dd;
	float:left;	
	margin:50px 15px 0 -10px;
	padding:0;
	display:block;
}
#hoverText1 span {
	height:70px;
}
#hoverText2 span {
	height:170px;
}
#hoverText3 span {
	height:220px;
}
#hoverText4 span {
	height:220px;
}

#hoverText1{ left:150px; top:442px!Important; display:none; height:129px; width:422px;}
#hoverText2{ left:220px; top:281px!Important;display:none; height:290px; width:570px;}
#hoverText3{ left:270px; top:232px!Important; display:none; height:330px; width:570px;}
#hoverText4{ left:511px; top:302px!Important; display:none; height:270px; width:425px;}

.hoverText span.close {
	font-size:18px!Important;
	color:#000000!Important;
	line-height:200px!Important;
	overflow:hidden!Important;
	margin:0 -10px 0 0!Important;
	padding:6px!Important;
	background:url(../img/tooltip-service-close.png) no-repeat 6px 6px!Important;
	width:12px!Important;
	height:11px!Important;
	position:relative!Important;
	top:0px!Important;
	float:right!Important;
	display:block!Important;
	z-index:999999999999!Important;
	-moz-opacity:0.6; -khtml-opacity:0.6; opacity:0.6;
    filter:alpha(opacity=60);
}
.hoverText span.close:hover {
	-moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0;
    filter:alpha(opacity=100);
}