/* CSS splusmedia.de */ 

/* ############################## BODY ########## */
* {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body {
	background-image:url(../img/backgr_03.jpg);
	background-size:conver;
	width:100%;
	font-family:Arial, Helvetica, sans-serif;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#body-medien {
	background-image:url(../img/medien_backgr_03.jpg);
	background-repeat:no-repeat;
	width:100%;

}
body, div, img, p, a {
	margin:0;
    padding:0;
    border:0;
    outline:0;
}
a:link, a:visited, a:active {
	color:rgb(40,40,40);
	text-decoration:none;
}
ul li {
	list-style-position:outside;
	list-style-type:disc;
}
ul li ul li {
	list-style-type:circle;
}

.main {
	color:rgb(40,40,40);
	position:relative;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
@font-face {
	font-family:splus_wfont;
	src:url('../font/splus_wfont.eot'); /* IE9 */
	src:url('../font/splus_wfont?#iefix') format('embedded-opentype'), /* IE no comprende & give up */
		url('../font/splus_wfont.woff') format('woff'),
		url('../font/splus_wfont.ttf') format('truetype'),
		url('../font/splus_wfont.svg#splus_wfont') format('svg');
	font-weight: normal;
	font-style: normal;
}
.foto {
	width:100%;
	margin:0 0 2% 0;
}


/* ############################## PAGES GENERAL ########## */
	/* no multiple pages */
	
/* ############################## HD ########## */
.hd {
	position:fixed;
	z-index:100;
	left:5%;
	top:3%;
	width:90%;
	height:11vw;
	background-color:rgb(255,255,255);
	opacity:1;
	border-radius:10px;

}
#logo {
	position:relative;
	width:23%;
	margin:1.5em 0 0 2em;
}
#panel {
	z-index:100;
	width:80%;
	position:absolute;
	right:0;
	top:33%;
}
.icon {
	font-family:splus_wfont;
	font-size:2.45vw;
	text-shadow:rgb(153,153,153) 0.2em 0.2em 0.2em;
}
.p-icon {
	float:right;
	margin:1.7% 5% 0 0;
	opacity:1;
	cursor:pointer;
	transition: 0.2s;
	-moz-transition: 0.2s;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
}
.p-icon:hover {
	color:rgb(128,128,128);
}
.actual-icon {
	color:rgb(128,128,128) !important;
}
.m-product{
	font-weight:bold;
	font-size:2.5vw;
	text-shadow:rgb(153,153,153) 0.2em 0.2em 0.2em;
}
.content {
	width:43%;
	border-radius:10px;
	padding:2em 2em 2em 2em;
	background-color:rgb(255,255,255);
	opacity:1;
}	
.content-double-float, .content-double-still {	
	float:left;
	margin:0 0 2% 5%;
}
.content-double-float:hover {
	background-color:rgb(235,235,235);
	cursor:pointer;
	transition: 0.1s;
	-moz-transition: 0.1s;
	-webkit-transition: 0.1s;
	-o-transition: 0.1s;
}
.content-single {
	position:absolute;
	left:28.5%;
	top:50vh;
}
.content-single a:link, .content-single a:active, .content-single a:visited {
	color:rgb(40,40,240);}
}
.content-double-left {
	position:absolute;
	left:5%;
	top:75%;
}	
.content-double-right {
	position:absolute;
	left:53%;
	top:87%;
}
.content-double-left-02 {
	margin:0 0 2% 5%;
}	
.content-double-right-02 {
	position:absolute;
	width:30%;
	right:5%;

}

.img-center {
	position:absolute;
	width:65%;
	bottom:-7em;
	left:45%;
}
.img-center-02 {
	z-index:50;
	position:absolute;
	left:36%;
	top:55%;
	width:30%;
	opacity:1;
}

.img-center-03 {
	z-index:51;
	position:absolute;
	left:34%;
	top:65%;
	width:30%;
	opacity:1;
}
.txt-desktop {
	width:60%;
	float:left;
}
.img-desktop {
	width:30%;
	float:right;
}
#medien .hd, #websites .hd, #cc .content {
	border-width:1px;
	border-style:solid;
	border-color:rgb(128,128,128);
}
#cc .content div {
	font-size:x-large;
}