@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700);
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
	height: 100%;
	margin: 0;
}
.container {
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	clear: both;
}

a:link, a:visited {
	border: none;
	text-decoration: none;
	font-weight: bold;
	color: #f4c500;
}

a:hover {
	color: #f4c500;
	border-bottom: 1px dotted #CCCCCC;
	text-decoration: none;
}
.header {
	width: 100%;
	background: url(../img/bg_des.jpg);
	background-size: cover;
}
.header.cover {
	min-height: 100%;
	margin: 0;
	position: relative;
}
.screen {
	position: absolute;
	top: 0;
	left: 0;
}
.header.dienst {
	background: none;
}
.header .inner, .mobile_intro .inner, .screen {
	background: rgba(244,197,0,.9);
	width: 100%;
	height: 100%;
}
.header.dienst .inner {
	background: rgba(244,197,0,1);
}
.header .inner .container, footer .container {
	width: 860px;
	padding:100px 0;	
}
.header.dienst .inner .container {
	padding: 30px 0;
}
.dienst_intro {
	margin-top: 50px;
	margin-bottom: 20px;
	overflow: hidden;
}
.dienst_intro h1 {
	margin-top: 8px;
	font-size: 2.250em;
	font-weight: bold;
	margin-left: 30px;
	display: inline-block;
	float: left;
	color: #333;
}
.dienst_intro.aanpak h1{
	display: block;
	margin: 0 auto;
	float: none;
	text-align: center;
}
.dienst_intro .service {
	margin-left: 0;
	float: left;
}
.header.dienst .nav {
	padding-bottom: 30px;
	border-bottom: 2px solid #fff;
}
.nav {
	overflow: hidden;
}
.logo {
	display: block;
	width: 61px;
	height: 54px;
	background: url(../img/sprites.png) no-repeat;
	background-position: 0 -1642px;
}
.menu {
	list-style: none;
	margin-left: -20px;
	float: right;
	margin-top: 15px;
}
.menu li {
	float: left;
	margin-left: 20px;
	color: #fff;
	font-size: 1.625em;
	font-weight: bold;
}
.menu li:hover {
	color: #333;
}
.menu li#active {
	color: #333;
}
.menu li a {
	text-decoration: none;
	color: inherit;
}
.intro {
	margin-top: 117px;
	color: #fff;
	font-size: 1.500em;
}
.intro h1 {
	font-weight: bolder;
	font-size: 2.250em;
}
.intro p {
	margin: 20px 0;
}
a.button:link, a.button:visited {
    border: 2px solid white;
    color: #fff;
}
.button {
	display: inline-block;
	padding: 20px;
	border: 2px solid white;
	color: #fff;
	border-radius: 10px;
	text-decoration: none;
}
article {
	padding: 50px 0;
}
article h2 {
	font-size: 1.875em;
	color: #f4c500;
	margin: 0 0 30px 0; 
}
section.diensten h3 {
	font-size: 1.875em;
	font-variant: small-caps;
	text-align: center;
}
h3 small {
	font-variant: normal;
	font-size: 14px;
}
section.diensten .container {
	width: 940px;
	padding: 100px 0
}
article p {
	font-size: 0.875em;
	line-height: 1.5em;
}
article h2 + p {
	margin-bottom: 40px;
}
article ul {
	color: #f4c500;
    list-style: none;
    padding:0;
    margin:0;
}
article li {
	font-size: 0.875em;
	color: #333;
	margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 1em;
}
article li span {
	color: #333;
}
article li:before {  
	content: "";
    line-height: 1em;
    width: .5em;
    height: .5em;
    background-color: #f4c500;
    float: left;
    margin: .25em .25em 0;
    border-radius: 50%;
}
article ul + p {
	margin-top: 40px;
}
section:nth-child(odd) {
	background: #fff;
}
section:nth-child(even) {
	background: #fafafa;
}
section article {
	margin: 0 auto;
	width: 860px;
	color: #333;
}
blockquote {
	font-style: italic;
}
article.hero {
	padding: 100px 0;
}
blockquote.bigq {
	font-size: 1.5em;
	line-height: 1.5em;
	margin-bottom: 40px;
}
ul.grid.services {
	width: 100%;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}
ul.grid.services li {
	width: 220px;
	float: left;
	height: 105px;
	margin-top: 50px;
	
}
ul.grid.services li a {
	display: block;
	position: relative;
	color: inherit;
	text-decoration: none;
}
.indicator {
	background: url(../img/tan_r_y.png) no-repeat;
	position: absolute;
	display: none;
	width: 15px;
	height: 25px;
	right: 40px;
	top: 20px;
}
ul.grid.services li:hover .indicator {
	display: block;
}
.service {
	background: url(../img/sprites.png) no-repeat top left;
	width: 61px;
	height: 61px;
	margin: 0 auto;
}
.service#strategie {
	background-position: 0 -1531px; 
}
.service.white#strategie {
	background-position: 0 -1420px; 
}
.service#concept {
	background-position: 0 -111px;
	width: 31px;
}
.service.white#concept {
	background-position: 0 0;
	width: 31px;
}
.service#design {
	background-position: 0 -333px;
}
.service.white#design {
	background-position: 0 -222px;
}
.service#development {
	background-position: 0 -538px;
}
.service.white#development {
	background-position: 0 -444px;
}
.service#onderhoud {
	background-position: 0 -931px;	
}
.service.white#onderhoud {
	background-position: 0 -820px;	
}
.service#hosting {
	background-position: 0 -709px;
}
.service.white#hosting {
	background-position: 0 -648px;
}
.service#stats {
	background-position: 0 -1309px;
}
.service.white#stats {
	background-position: 0 -1264px;
}
.service#seo {
	background-position: 0 -1153px;
}
.service.white#seo {
	background-position: 0 -1042px;
}
.service#dienst {
	background: url(../img/dienst_y.png) no-repeat top;
}
.service.white#dienst {
	background: url(../img/dienst_w.png) no-repeat top;
}
.service#contact {
	background: url(../img/contact_y.png) no-repeat top;
}
.service.white#contact {
	background: url(../img/contact_w.png) no-repeat top;
}
.service#aanpak {
	background: url(../img/aanpak_y.png);
	width: 41px;
}
.service.white#aanpak {
	background: url(../img/aanpak_w.png);
}
.services p {
	font-size: 1.125em;
	font-variant: small-caps;
	text-align: center;
	margin-top: 28px;
	font-weight: bold;
}
footer {
	background: #333;
	overflow: hidden;
}
footer h3 {
	font-size: 1.625em;
	color: #f4c500;
	font-weight: bold;
}
footer p {
	font-size: 18px;
	color: #fff;
	margin-top: 20px;
	line-height: 1.500em;
}
footer p span {
	color: #f4c500;
}
footer p a {
	text-decoration: none;
	color: inherit;
}
footer address {
	float: left;
}
.map {
	width: 380px;
	height: 271px;
	float: right;
	position: relative;
	top: 0;
}
.hamburger {
	display: none;
}
.logo_wrap {
	overflow: hidden;
	float: left;
}
.separator {
	display: none;
}
.mobile_intro {
	display: none;
}
.loginwrap {
	margin: 0 auto;
	width: 326px;
	margin-top: 180px;
}
.loginbox {
	border: 2px solid white;
	padding: 30px;
	background: #f4c500;
	overflow: hidden;
}
.loginwrap .logo {
	margin: 0 auto;
	margin-bottom: 60px;
}
.loginwrap h2 {
	color: #fff;
	font-weight: bold;
	font-size: 2em;
	text-align: center;
	margin-bottom: 60px;
}
.ilabel {
	width: 25px;
	height: 25px;
	float: left;
	margin-top: 2px;
	background: url(../img/form_icons.png) no-repeat top left;
}
.loginbox input[type="text"], .loginbox input[type="password"] {
	outline: 0;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	border-top: none;
	height: 24px;
	width: 217px;
	padding: 0 10px 10px 10px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	margin-left: 20px;
	border-radius: 0;
	box-shadow: 0;
	background: none;
}
.ilabel#user {
	background-position: 0 -300px;
}
.ilabel#pwd {
	background-position: 0 0;
}
.loginbox form div+div {
	margin-top: 20px;
}
::-webkit-input-placeholder {
   color: rgba(255,255,255,.6);
}

:-moz-placeholder { /* Firefox 18- */
   color: rgba(255,255,255,.6);
}

::-moz-placeholder {  /* Firefox 19+ */
   color: rgba(255,255,255,.6);
}

:-ms-input-placeholder {  
   color: rgba(255,255,255,.6);
}
.send {
	float: right;
}
.loginbox input[type="submit"] {
	outline: 0;
	border: 0;
	background: 0;
	padding-right: 45px;
	height: 25px;
	background: url(../img/form_submit_f.png) no-repeat center right;
	cursor: pointer;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	padding-left: 0;
}
/* Dienst Sprite CSS
#container li {
    background: url(csg-5284dee56a290.png) no-repeat top left;
}
.dienst-d_con_w{ background-position: 0 0; width: 31px; height: 61px; } 
.dienst-d_con_y{ background-position: 0 -111px; width: 31px; height: 61px; } 
.dienst-d_des_w{ background-position: 0 -222px; width: 61px; height: 61px; } 
.dienst-d_des_y{ background-position: 0 -333px; width: 61px; height: 61px; } 
.dienst-d_dev_w{ background-position: 0 -444px; width: 61px; height: 52px; } 
.dienst-d_dev_y{ background-position: 0 -546px; width: 61px; height: 52px; } 
.dienst-d_hos_w{ background-position: 0 -648px; width: 60px; height: 36px; } 
.dienst-d_hos_y{ background-position: 0 -734px; width: 60px; height: 36px; } 
.dienst-d_ond_w{ background-position: 0 -820px; width: 61px; height: 61px; } 
.dienst-d_ond_y{ background-position: 0 -931px; width: 61px; height: 61px; } 
.dienst-d_seo_w{ background-position: 0 -1042px; width: 61px; height: 61px; } 
.dienst-d_seo_y{ background-position: 0 -1153px; width: 61px; height: 61px; } 
.dienst-d_stat_w{ background-position: 0 -1264px; width: 60px; height: 28px; } 
.dienst-d_stat_y{ background-position: 0 -1342px; width: 60px; height: 28px; } 
.dienst-d_strat_w{ background-position: 0 -1420px; width: 61px; height: 61px; } 
.dienst-d_strat_y{ background-position: 0 -1531px; width: 61px; height: 61px; } 
.dienst-logo{ background-position: 0 -1642px; width: 61px; height: 54px; }

Loginform Sprite CSS

.sprite-form_pwd_f{ background-position: 0 0; width: 25px; height: 25px; } 
.sprite-form_pwd_o{ background-position: 0 -75px; width: 25px; height: 25px; } 
.sprite-form_submit_f{ background-position: 0 -150px; width: 25px; height: 25px; } 
.sprite-form_submit_o{ background-position: 0 -225px; width: 25px; height: 25px; } 
.sprite-form_user_f{ background-position: 0 -300px; width: 25px; height: 25px; } 
.sprite-form_user_o{ background-position: 0 -375px; width: 25px; height: 25px; } 

Loginform 2x 

.sprite-form2x_0000_submit_f{ background-position: 0 0; width: 50px; height: 50px; } 
.sprite-form2x_0001_pwd_f{ background-position: 0 -100px; width: 50px; height: 50px; } 
.sprite-form2x_0002_user_o{ background-position: 0 -200px; width: 50px; height: 50px; } 
.sprite-form2x_0003_submit_o{ background-position: 0 -300px; width: 50px; height: 50px; } 
.sprite-form2x_0004_pwd_o{ background-position: 0 -400px; width: 50px; height: 50px; } 
.sprite-form2x_0005_user_f{ background-position: 0 -500px; width: 50px; height: 50px; } 

*/

/* Large desktop */
@media (min-width: 1200px) {
	.menu {
		display: block !important;
	}
}
@media (min-width: 980px) {
	.menu {
		display: block !important;
	}
}
 
/* Landscape phones and down */
@media (max-width: 979px) {
	.header .inner .container {
		width: 100%;
		padding: 10px 0 0 0;
	}
	.header.dienst .inner .container {
		padding-top: 0;
		padding-bottom: 0;
	}
	.logo {
		background: url(../img/logo_m.png) no-repeat;
		width: 34px;
		height: 30px;
		display: inline-block;
	}
	ul.menu {
		display: block;
		float: none;
		display: none;
		clear: both;
		padding: 0;
	}
	ul.menu li {
		float: none !important;
		padding:20px;
	}
	ul.menu li:nth-child(odd) {
		background: rgba(255,255,255,.3);
	}
	ul.menu li a {
		display: block;
	}
	.header {
		background: none;
	}
	.header .inner {
		background: rgba(244,197,0,1);
	}
	.hamburger {
		display: block;
		float: right;
		background: url(../img/menu_m.png);
		width: 31px;
		height: 19px;
	}
	.hamburger:hover {
		background: url(../img/menu_m_fill.png);
	}
	.logo_wrap {
		width: 100%;
		padding: 20px;
	}
	.separator {
		display: block;
		outline: 0;
		background: #fff;
		height: 1px;
		border: none;
	}
	.intro {
		display: none;
	}
	section article {
		width: 100%;
	}
	article {
		padding: 40px 20px 30px 20px;
	}
	section.diensten .container {
		padding: 30px 0 0 0;
	}
	article.hero blockquote {
		font-size: 1.2em;
		margin-bottom: 20px;
	}
	section.diensten .container {
		width: 100%;
	}
	ul.grid.services {
		margin-top: 20px;
	}
	ul.grid.services li {
		width: 100%;
		margin-top: 0px;
		height: auto;
		padding: 20px;
		border-top: 1px solid #ccc;
	}
	ul.grid.services li a {
		overflow: hidden;
	}
	.service {
		margin-left: 0;
		display: block;
		width: 61px !important;
		float: left;
	}
	.services p {
		margin-top: 20px;
		float: left;
		margin-left: 30px;
	}
	.indicator {
		right: 10px;
	}
	footer .container {
		padding: 20px;
	}
	.mobile_intro {
		display: block;
		background: url(../img/bg_tab.jpg) !important;
		background-size: cover;
		height: 460px;
	}
	.mobile_intro .inner {
		padding: 60px 20px 30px 20px;
		color: #fff;
		text-align: center;
	}
	.mobile_intro .inner h1 {
		font-weight: bold;
		font-size: 2em;
	}
	.mobile_intro .inner p {
		font-size: 1.5em;
		margin: 20px 0;
	}
	.mobile_intro .inner a.button {
		padding: 20px 30px;
		width: 50%;
		text-align: center;
	}
	.dienst_intro {
		padding: 20px;
		clear: both;
		margin: 0;
	}
	.dienst_intro h1, .dienst_intro .service {
		float: none;
	}
	.dienst_intro .service {
		margin: 0 auto;
		margin-bottom: 20px;
	}
	.dienst_intro h1 {
		display: block;
		text-align: center;
		padding: 10px 0;
		margin: 0 auto !important; 	
	}
	.header.dienst .nav {
		padding-bottom: 0;
	}
	article ul {
		margin-left: 20px;
	}
	.loginwrap .logo {
		margin: 0 auto;
		margin-bottom: 60px;
		display: block;
	}
	.loginwrap {
		margin: 50px 0 0 0;
		width: 100%;
	}
	.loginbox {
		border-right: none;
		border-left: none;
		width: 100%;
	}
	.loginbox form {
		margin: 0 auto;
		width: 260px;
		overflow: hidden;
	}
	.loginbox input[type="text"], .loginbox input[type="password"] {
		display: inline-block;
		width: 215px;
	}
}