body{
font: 15px/1.5 Arial, Helvetica, snas-serif;
padding:0;
margin:0;
/* background-color:#35424a;  
background-color:#134c99;*/
background-color:#5B878D;
}

/* Global (can be put anywhere) */
/*.container . refers to a class */
.container{
width:80%;
margin:auto;
overflow:hidden;
}

ul{
margin:0;
padding:30px;
}

.button_1{
height:38px;
background:#e8491d;
border:0;
padding-left:20px;
padding-right:20px;
color:#ffffff;
}

.dark{
padding:15px;
height:400px;
background:#35424a;
/* #0431B4 
#35424a*/
color:#ffffff;
margin-top:0px;
margin-bottom:33%; 
}

/*Header */
header{
background:#35424a; /* bluish greyish */
color:#ffffff;/* white text */
min-height:70px;
border-bottom:#35424a 3px solid;
}

/* defination of link design */
header a{ 
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
font-size:16px;
}


header li{
float:left;
display:inline;
padding: 0 20px 0 20px; /*top right bottom left */
}

/* branding is an id therefor the number sign */
header #branding{
float:left;
}

header #branding h1{
margin:0;
}

header nav{
float:right;
margin-top:10px;
}

header .highlight, header .current a{
/*color:#58d3f7;*/
color:#5B878D;
font-weight:bold;
}

/* was passiert wenn man über ein a element mit dem mauszeiger fährt */
header a:hover{
color:#cccccc;
font-weight:bold;
}

/* Showcase */
#showcase{
min-height:750px;
/* background:url('../img/sem-logo.jpg'); */
/* right one: background:url('../img/home_logo.jpg'); */
background:url('http://sem.at/img/home_logo.jpg');

/*background-size: 1920px 800px; */
background-size: 1920px 1100px;

background-repeat: no-repeat;
background-position:center;
text-align:left;
color:#ffffff;
}
/*
#showcase h1{
margin-top:100px;
font-size:55px;
margin-bottom:10px;
}
*/

/* newsletter */
#newsletter{
padding:15px;
color:#ffffff;
background:#35424a;
}

#newsletter h1{
float:left;
}

#newsletter form{
float:right;
margin-top:15px;
}

#newsletter input[type="email"]{
padding:4px;
height:25px;
width:250px;
}

/* Boxes */
#boxes{
margin-top:20px;
}

#boxes .box{
float:left;
text-align:center;
width:30%;
padding:10px;
}
#boxes .box img{
width:90px;
height:90px;
}

/* sidebar */
aside#sidebar{
float:right;
width:30%;
margin-top:10px;
}

aside#sidebar .quote input, aside#sidebar .quote textarea{
width:90%;
padding:5px;

}

/*main-col */
article#main-col{
margin-top:20px;
color:#ffffff;
float:left;
width:30%;
}

/* Service */
ul#services li{
list-style:none;
padding:20px;
border:#cccccc solid 1px;
margin-bottom:5px;
background:#e6e6e6;
}


footer{

position: fixed;
left: 0;
right: 0;
bottom: 0;
height:100px;
color:#ffffff; 
background-color:#35424a;
text-align:right;
}
img{
float:left;
width:500px;
height:120px;
}

/* media Queries */
/* Definition which css styles will be used for which devices (depending on device size) */

/* tablet size */
@media(max-width: 768px){
	header #branding,
	header nav,
	header nav li,
	#newsletter h1,
	#newsletter form,
	#boxes .box,
	article#main-col,
	aside#sidebar{
		
		float:none;
		text-align:left;
		width:90%;
	}
	
	header{
		padding-bottom:20px;
	}
	
	#showcase h1{
		margin-top:40px;
	}
	
	#newsletter button, .quote button{
		display:block;
		width:100%;
	}
	
	#newsletter form input[type="email"], .quote input, .quote textarea{
		width:100%;
		margin-bottom:5px;
	}
	footer{
         height:50px;
    }
	img{
        float:left;
        width:240px;
        height:52px;
   }

}