/*
Standard Responsive Template v 1.0
Stand: 11.05.2015

   Author: www.en-service.de

*/

/* Box sizing. Mehr zu erfahren gibt es hier: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp 
 * 
 * Die Box-Sizing Eigenschaft wird verwendet, um den Browser zu sagen, was 
 * die Dimensionierung Eigenschaften (Breite und Höhe) enthalten sollte.
 * */
* {	box-sizing:border-box;  -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box; }

body{ font-family:  sans-serif; }

h1  {  }
h2  {  }
h3  {  }
h4  {  }
h5  {  }
h6  {  }

/* ************************** RESPONSIVE IMAGES  ********************/
img{ max-width:100%; height:auto;}
/* ************************** RESPONSIVE IMAGES  ********************/

hr {
    border: none;
	border-bottom:1px dotted #999; 
	margin: 0 0 30px 0;			
}


/* ************************** floats löschen*************************/ 
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
/* ************************** floats löschen ************************/ 


/* ************************** Raster oder Grid-Funktion *************/
/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin-bottom:40px;
	/*positioning and padding*/
	position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}



.grid_1 { width: 8.33333333%; }
.grid_2 { width: 16.66666667%; }
.grid_3 { width: 25%; }
.grid_4 { width: 33.33333333%; }
.grid_5 { width: 41.66666667%; }
.grid_6 { width: 50%; }
.grid_7 { width: 58.33333333%; }
.grid_8 { width: 66.66666667%; }
.grid_9 { width: 75%; }
.grid_10 { width: 83.33333333%; }
.grid_11 { width: 91.66666667%; }
.grid_12 { width: 100%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	float: left;
	display: block;
}
/* ************************** Raster oder Grid-Funktion *************/


/* ************************** Wrapper *******************************/
.wrapper {
    width: 100%;
    margin: 0 auto;    
}
/* ************************** Wrapper *******************************/

.wrapperin {
	max-width: 1024px;
	margin: 0 auto;
}	

#headerbg {background-image:url('../images/logo2.png'); background-repeat:no-repeat; z-index:1;}

/* ************************** Header ********************************/
header {
    position: relative;
    //top:61px;
    width: 100%;
    max-height: 600px;
    //background: #444444;    
}
#netzwerkx { background: url(../images/banner_server_storage.jpg) no-repeat center center; background-size:cover; }
#netzwerk1 { background: url(../images/banner_netzwerke.jpg) no-repeat center center; background-size:cover; }

/* ************************** Header ********************************/

#full {
    width: 100%;
    height: 80px;
}


/*=============================================================================================================================================================================================*/
navi {
	height: 40px;
	width: 100%;
	
	background: #455868;
	font-size: 12pt;
	font-family: 'PT Sans', Arial, sans-serif;
	font-weight: 300;
	position: relative;
	border-bottom: 2px solid #283744;
}
navi ul {
	padding: 0;
	margin: 0 auto;
	width: 650px;
	height: 40px;
	margin-top:20px;
}
navi li {
	display: inline;
	float: left;
}
navi a {
	color: #fff;
	display: inline-block;
	width: 160px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}
navi li a {
	border-right: 1px solid #576979;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
navi li:last-child a {
	border-right: 0;
}
navi a:hover, nav a:active {
	background-color: #8c99a4;
}
navi a#pull {
	display: none;
}

/*=============================================================================================================================================================================================*/


/* ************************** Nav ***********************************/
nav {
    position: fixed;
    width: 100%;
    height: 80px;
    //border-bottom: 1px solid #000; 
    z-index: 999;   
}



ul.hmenu 		{ position: relative; display: block; margin: 0px; padding: 0px; float:left; margin-top:0px;  min-width: 900px;  }
ul.hmenu ul 	{ position: relative; display: none; }
ul.hmenu li 	{ position: relative; display: inline; float: left; }

/* Menupunkt stylen */
ul.hmenu li a 			{ font-family: arial, sans-serif; font-size: 10pt; color:#aaa; text-decoration: none; text-align: center; 
							display: block; padding-left:10px; padding-right: 20px; height: 23px; line-height:23px; }
ul.hmenu li:hover > a 	{ color: #000; }

/* Untermenupunkt einblenden */
ul.hmenu li:hover > ul 	{ position: absolute; top: 20px; left: -30px; display: inline; }

/* ab zweite Ebene */
ul.hmenu li li:hover > ul { top: 0px; left: 120px; } /* Abstande 2te Ebene */
ul.hmenu li li a 		  { width: 260px; }
ul.hmenu li li li a 	  { width: 200px; }

/* Farben der einzelnen Ebenen (werden vererbt)*/
ul.hmenu a 			{ color: #aaa; /* background-color: #99e4e4; */ }		/* Menu-Hintergrund */
ul.hmenu ul a 		{ background: rgba(255, 255, 255, 0.9); text-align: left; border: 1px #111111 solid; } 		/* Hintergund 1 Ebene */
ul.hmenu ul ul a	{ background: rgba(255, 255, 255, 0.9); text-align:left; } 		/* Hintergund 2 Ebene */
ul.hmenu ul ul ul a	{ background: rgba(255, 255, 255, 0.9); text-align:left; } 		/* Hintergund 3 Ebene */
 
/* zusatzliche Styleangaben fur IE 6 */
/* das Menu wird dort untereinander dargestellt */
ul.hmenu 			{ _text-indent: 10px; }
ul.hmenu ul 		{ _display: inline; _margin-left: 0px; _text-indent: 20px; }
ul.hmenu ul ul 		{ _text-indent: 30px; }
ul.hmenu ul ul ul 	{ _text-indent: 40px; }
ul.hmenu li 		{ _float: none; }

/* Menupunkt stylen */
ul.hmenu li a 	 { _text-align: left; _width: 160px; }
ul.hmenu a:hover { _background-color: #161f2a; }




/* ************************** Nav ***********************************/

#logo { float: left; font-size: 3em; margin:7px 0 0 0; padding:0; }


#top-menu { float: right; margin-top: 10px; }
#top-menu ul { display: block; }
#top-menu ul li { display: inline-block; list-style: none; padding: 0 20px 0 20px; //line-height: 50px; }
#top-menu ul li a { text-decoration: none; font-size:110%; }
#top-menu ul li a:hover { text-decoration: none; }

/* ************************** Section ********************************/
section {
    position: relative;
    width: 100%;
    //height: 50px;
    //background: #444444;
}
section p {
    margin: 0;
}
/* ************************** Section ********************************/
#info-leiste {
    position: relative;
    width:100%;
    background: rgb(34,82,118);
    color: #eee;
    z-index: 888;
    margin-bottom: 0px;
}
#info-leiste p {
    padding: 10px 0 10px 0;
    margin: 0;
}

.info-leiste-left { }
.info-leiste-right { }

/* ************************** Aricle ********************************/
article h1, article h3, article p { font-weight: 300; }

article     { width: 100%; }
article h1  { font-size: 2.2em; }
article h2  { font-size: 1.7em; font-weight: 400; margin-top:0; }
article h3  { font-size: 1.3em; }
article p   { font-size: 1.07em; letter-spacing: 0.5px; word-spacing: 0.7px; line-height: 24px; }
article li   { font-size: 1.07em; letter-spacing: 0.5px; word-spacing: 0.7px; line-height: 24px; font-weight: 300; }

article img { margin-top: 20px; }


	/*================================================================================================================================================================*/
	article .box-left    {  }
	article .box-middel  {  }
	article .box-right   {  }
	/*================================================================================================================================================================*/



/* ************************** Aricle ********************************/


/* ************************** Aside ********************************/
aside {
    width: 100%;
    height: 50px;
    background: #ddd;
}
/* ************************** Aside ********************************/


/* ************************** Content *******************************/
.content {
    width: 100%;
    height: 50px;
    background: #eee;    
}
/* ************************** Content *******************************/


/* ************************** Footer ********************************/
footer {
    position: relative;
    width: 100%;
    //height: 150px;
    background: #222; 
    color: #ccc;
    border-top : 1px solid #000;   
}
footer li { list-style: none; line-height:23px; }
footer ul { padding-left:10px; }


	/*================================================================================================================================================================*/
	footer .box-left   	{  }
	footer .box-middel  {  }
	footer .box-right   {  }
	/*================================================================================================================================================================*/

/* ************************** Footer ********************************/


/* ************************** Tools *********************************/
.infoblock, .grayblock, .yellowblock { display: inline-block; padding: 10px 20px;}

.infoblock   { color: #fff; background: rgba(34,82,118,0.85); font-size: 1.3rem; margin-top: 20px; }
.grayblock   { color: #fff; background: rgba(75,75,75,0.95);  font-size: 1.0em;  max-width: 400px; margin-top: 10px; margin-bottom: 10px; }
.yellowblock { color: #555; background: rgba(254,204,0,0.95); font-size: 1.4em;  max-width: 400px; margin-bottom:10px; }

.links  { text-align:left }
.rechts { text-align:right }
.mitte  { text-align:center }
				
}

.xox {
	border:10px solid black;			
}
.style1 {
				margin: 3px;
				border: 10px solid black;
}
.rahmen { 
	margin: 0px;
	border:1px #aaa solid;
	box-shadow: 3px 3px 3px #444;
	-moz-box-shadow: 3px 3px 3px #999;
	-ms-box-shadow: 3px 3px 3px #999;
	-o-box-shadow: 3px 3px 3px #999;
	-webkit-box-shadow: 3px 3px 3px #999;
}

.rahmenshort  { padding: 2px; margin:0px; border: 1px #bbb solid;}


.titel-klein {
	color:#fff;
	font-weight:300;
	text-transform:uppercase;
	font-size:110%;			
}

.slider-pager { position:relative; bottom:70px; left:0; z-index:5000; background:rgba(255,255,255,.8); padding:10px 0; height:50px; width:100%;}

.cycle-prev, .cycle-next  { font-size:32px; line-height:34px; height:40px; color:#fff; float:left; width:40px; text-align:center;  background: rgba(51,51,51,.8); border-radius:3px; cursor:pointer;}
.cycle-prev:hover, .cycle-next:hover {background: rgba(51,51,51,.9);} 
.cycle-prev {padding:0 3px 0 0;  margin: 5px 10px 0 0;}
.cycle-next {padding:0 0 0 3px;  margin:5px 0 0 0;}
.cycle-prev [class^="icon-"]:before, .cycle-prev [class*=" icon-"]:before , .cycle-next [class^="icon-"]:before, .cycle-next [class*=" icon-"]:before { margin:0 0 0 0 !important; }

#pager { font-size:50px; line-height:1em; color:rgba(51,51,51,.5); margin:-5px 0 0 0; padding:0; cursor:pointer;}
#pager .cycle-pager-active {color:rgba(51,51,51,.9);}

.slider .item {width:100%; text-align:center; position:relative;}
.slider img { width:100%; height:auto; display:block;}
.slider .textbox { position:absolute;  top:10%; right:15%; background:rgba(236, 236, 236, .9); padding:10px 20px; width:460px; text-align:center; border:1px solid #fff;}
.slider .textbox h2 { color:#333;}

.dark { margin-top:-69px; padding-bottom:40px; }

.button1 { text-align:center; width:auto; border-radius:3px; font-size:.9em; text-transform:uppercase; text-decoration:none; border-bottom:none !important; }
.button1 { margin:0; padding:8px 15px; transition: padding 0.2s ease;  }
.button1:hover {  padding:8px 25px;}

.button2 { text-align:center; width:auto; border-radius:3px; font-size:.7em; text-transform:uppercase; text-decoration:none; border-bottom:none !important; }
.button2 { margin:0; padding:8px 15px; transition: padding 0.2s ease;  }
.button2:hover {  padding:8px 25px;}


.content p [class^="icon-"]:before, .content p [class*=" icon-"]:before  { font-size:22px; float:left; margin:0 15px 0 0; margin-left:0 !important; padding:0; }

.text01 {
	font-size: 1em;			
}
.text02 {
	font-size: 1em;
	color:#000;			
}

.big { font-weight:bold }
.big400 { font-weight:400; }

.lz20 { text-align:justify; margin-bottom:20px; }
.lz30 { text-align:justify; margin-bottom:30px; }
.lz60 { margin-bottom:60px; }

.abst01 { margin-top:20px; }
.abst02 { margin-top:68px; }

/*================================================================================================================================================================*/
.copyright       { }
.copyright-left  { }
.copyright-right { text-align:right; }
/*================================================================================================================================================================*/



/*********************************************************************
**********************************************************************
MEDIAQUERIES
**********************************************************************
*********************************************************************/
@media screen and (max-width:1024px) {
    body {
        //background: #FF0000;
    }
    .wrapper {
    max-width: 100%;
    }
   
	.wrapperin {
		max-width: 940px;
		margin: 0 auto;
	}	
	#top-menu ul li a { text-decoration: none; font-size:100%; }

	#info-leiste p {
	    font-size: 80%;
	}

	.slider .textbox { font-size: 90%; width:330px; }
	.slider .textbox h2 { font-size: 75%; }

	.button2 { font-size:.6em; }

	.text01 {
		font-size: 0.8em;			
	}
	.text02 {
		font-size: 0.8em;
	}
	
	.abst02 { margin-top:45px; }


}



@media screen and (max-width:768px) {
    body {
        //background: #FF0000;
    }
    
    	.textbox { display:none; }

    .wrapper {
    max-width: 100%;
    }
   
	.wrapperin {
		max-width: 740px;
		margin: 0 auto;
	}	
	
	#logo { float: none; text-align:center; width:100%; }
	
	
	
	
	
	
	.top-menu-block .grid_9 { float:none; width:100%; padding:0; margin:0; text-decoration:none; }
	
	#top-menu ul li a:hover { width:100%; background-color: green; }
	
	
	#top-menu {clear:both; float:none;	width:100%; padding:0; margin:0; background-color:black; text-align:center; line-height:24px; }
	
	#top-menu ul li { display: block;  background-color:black; width:100%;line-height:24px; }
	
	#top-menu ul li a { text-decoration: none; font-size:100%;width:100%; }
	
	#top-menu ul li a:hover { background-color: green; border:0;width:100%; }

	
	
	
	
	
	
	#info-leiste p {
	    font-size: 90%;
	}
	
	.info-leiste-left { width:100%; text-align:center; }
	.info-leiste-right { width:100%; text-align:center; }
	.info-leiste-right p { text-align:center; }

	.slider .textbox { font-size: 75%; width:330px; }
	.slider .textbox h2 { font-size: 85%; }
	.slider .textbox h1 { font-size: 97%; }

	.button2 { font-size:.5em; }
	.button2:hover {  padding:7px 15px;}	
	.text01 {
		font-size: 0.8em;			
	}
	.text02 {
		font-size: 0.8em;
	}
	
	.abst02 { margin-top:67px; }

	
	
	
	/*================================================================================================================================================================*/
	article .box-2-left h2   { font-size:140%; }
	article .box-2-left p    { color:#000; }
	article .box-2-right h2  { font-size:140%; }
	article .box-2-right p   { color:#000; }
	/*================================================================================================================================================================*/

	
	
	/*================================================================================================================================================================*/
	.copyright p     	{  }
	.copyright .grid_6 	{ margin-bottom: 5px; margin-top: 5px; }
	.copyright hr 		{ margin-bottom:5px !important; }
	.copyright-left  	{ width:100%; text-align:center; }
	.copyright-right 	{ width:100%; text-align:center; }
	/*================================================================================================================================================================*/

	/*================================================================================================================================================================*/
	article .box-left    { font-size: 100%; width:100%; font-size: 1.3em; text-align:center; }
	article .box-middel  { font-size: 100%; width:100%; font-size: 1.3em; text-align:center;  }
	article .box-right   { font-size: 100%; width:100%; font-size: 1.3em; text-align:center;  }
	/*================================================================================================================================================================*/

	/*================================================================================================================================================================*/
	footer .box-left   	{ font-size: 100%; width:100%; text-align:center; }
	footer .box-middel  { font-size: 100%; width:100%; text-align:center; }
	footer .box-right   { font-size: 100%; width:100%; text-align:center; }
	/*================================================================================================================================================================*/

	navi {
	width: 100%;
	background: #455868;
}

	#master-menu { width:100%; background:rgba(21, 31, 45, 1); }


}




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

	.textbox { display:none; }
	

 

	/*================================================================================================================================================================*/
	article .box-2-left h2   { font-size:120%; }
	article .box-2-left p    { color:#000; }
	article .box-2-left 	 { width:100%; }
	article .box-2-right h2  { font-size:120%; }
	article .box-2-right p   { color:#000; }
	article .box-2-right 	 { width:100%; }
	/*================================================================================================================================================================*/


		navi { 
  		height: auto;
  	}
  	navi ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	navi li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	navi li a {
		border-bottom: 1px solid #576979;
		border-right: 1px solid #576979;
	}
  	navi a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}



}



@media screen and (max-width:480px) {
    body {
        //background: #FF0000;
    }
    .wrapper {
    max-width: 100%;
    }
   
    
    .grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {

    padding-left: 5px;
    padding-right: 5px;
    width: 98%;
}
	.wrapperin {
		max-width: 460px;
		margin: 0 auto;
	}	

	#logo { float: none; text-align:center; width:100%; }

	#info-leiste p {
	    font-size: 70%; text-align:center;
	}

	.slider .textbox { display:none; }
	.slider .textbox h2 { display:none; }

	article p { font-size: 0.8em; letter-spacing: 0.5px; word-spacing: 0.3px; line-height: 20px; }
	
	.button2 { text-align: center;    font-size:.8em; }
	.button2:hover {  padding:7px 15px;}	
	.text01 {
		font-size: 0.8em;			
	}
	.text02 {
		font-size: 0.8em;
	}

	#logo img{ max-width:100%; height:auto;}
	
	
	
		navi {
		border-bottom: 0;
	}
	navi ul {
		display: none;
		height: auto;
	}
	navi a#pull {
		display: block;
		background-color: #283744;
		width: 100%;
		position: relative;
	}
	navi a#pull:after {
		content:"";
		background: url('../images/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}

}

/*Smartphone*/
@media only screen and (max-width : 320px) {
	navi li {
		display: block;
		float: none;
		width: 100%;
	}
	navi li a {
		border-bottom: 1px solid #576979;
	}
}