* {
	
	box-sizing: border-box;
	
}

body {
	
	margin: 0;
	padding: 0;
	overflow-y: scroll;
	overflow-x: hidden;
	font-family: "Ubuntu","Helvetica Neue","Helvetica","Trebuchet MS", sans-serif;	
	padding-bottom:80px;

}

header {
	
	width: 100%;
	height: 290px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	display: block;
	position: relative;
}

#home header {
	
	background-position: center bottom;
	height: 600px;
}

#header-container {
	
	width: 100%;
	height: 105px;
	background: #36A37B;
	background: rgba(51, 176, 143, 0.94);
	background: -webkit-linear-gradient(right, rgba(51, 176, 143, 0.94) 0%, rgba(61,191,197,0.94) 100%);
	background: -moz-linear-gradient(right, rgba(51, 176, 143, 0.94) 0%, rgba(61,191,197,0.94) 100%);
	background: linear-gradient(right, rgba(51, 176, 143, 0.94) 0%, rgba(61,191,197,0.94) 100%);
	bottom: 0px;
	position: absolute;
	
}

#home #header-container {
	
	height: 318px;
	
}

.centreer {
	
	margin: 0 auto 0 auto;
	width: 1200px;
	overflow: hidden;
	
}

.payoff{
	text-align: center;
	font-size:1.2rem;
	color:#fff;
}

#zakelijk-opzeggen h1, #zakelijk-overstappen h1 {
	
	color: #fff;
	font-size: 32px;
	font-weight: 700;
	margin: 40px 0 0 0;
	
} 

#zakelijk-opzeggen p, #zakelijk-overstappen p {

	color: #bdffff;
	font-weight: 200;
	font-size: 19px;
	line-height: 25px;
	margin: 10px 0 0 0;
	
}

#zakelijk-overstappen:hover, #zakelijk-opzeggen:hover {

	margin-top: -3px;
	
}


#zakelijk-overstappen {
	
	width: 490px;
	float: left;
	height: 210px;
	margin-right: 60px;
	text-align: right;
	text-decoration: none;
	
	transition: 0.2s ease;
	
}

#zakelijk-opzeggen {
	
	margin-left: 60px;
	width: 490px;
	float: left;
	height: 210px;
	text-align: left;
	text-decoration: none;
	
	transition: 0.2s ease;
	
}

#header-graphic {
	
	float: left;
	margin: 20px 0 0 0;
	width: 100px;
	height: 201px;
	display: block;
	background-image: url("../images/header-graphic.png");
	background-size: 99px 201px;
	background-position: center bottom;
	background-repeat: no-repeat;
	
}

footer {
	
	width: 100%;
	height: 60px;
	background: #f7fcfb;
	position: fixed;
	bottom: 0px;
	border-top: 1px solid #c0e8e2;
	
}

#intro h2 {
	
	font-weight: 500;
	font-size: 26px;
	margin: 10px 0 0 0;
	padding: 0px;
	
}

#intro p {
	
	margin: 10px 0 20px 0;
	font-size: 18px;
	font-weight: 200;
	color: #6f6f6f;
	
}

#nummerbehoud-icoon-wit {
	
	display: inline-block;
	width: 58px;
	height: 56px;
	background-image: url("../images/nummerbehoud-icoon.png");
	background-repeat: no-repeat;
	background-size: 58px 56px;
	
}

#overstappen-icoon {
	
	display: inline-block;
	width: 58px;
	height: 56px;
	background-image: url("../images/overstappen-icoon.png");
	background-repeat: no-repeat;
	background-size: 58px 56px;
	
}

#opzeggen-icoon {
	
	display: inline-block;
	width: 48px;
	height: 56px;
	background-image: url("../images/opzeggen-icoon.png");
	background-repeat: no-repeat;
	background-size: 48px 47px;
	
}

#intro-overstappen h2 { color: #45bdc2; }
#intro-opzeggen h2 { color: #3bb191; }

#intro-overstappen {
	
	float: left;
	width: 550px;
	padding: 50px 60px 0px 30px;
	text-align: right;
	
}

#intro-divider {
	
	float: left;
	width: 2px;
	margin: 0px 49px 0px 49px;
	height: 430px;
	background: -webkit-linear-gradient(#41AC9A 0%, #ffffff 100%);	
	background: -moz-linear-gradient(#41AC9A 0%, #ffffff 100%);	
	background: linear-gradient(#41AC9A 0%, #ffffff 100%);	
}

#intro-opzeggen {
	
	float: left;
	width: 550px;
	text-align: left;
	padding: 50px 30px 0px 60px;
	
}

#intro-opzeggen-cta {
	
	padding: 18px 22px 18px 22px;
	width: 330px;	
	border: 1px solid #3bb191;
	color: #3bb191;
	font-family: "Ubuntu","Helvetica Neue","Helvetica","Trebuchet MS", sans-serif;	
	font-weight: 200;
	border-radius: 5px;
	background: transparent;
	font-size: 18px;
	text-align: left;	
	text-decoration: none;
	display: inline-block;

}

#intro-opzeggen-cta:hover {
	
	background: #3bb191;
	color: #fff;
	cursor: pointer;
	
}

#intro-overstappen-cta:hover {
	
	background: #45bdc2;
	color: #fff;
	cursor: pointer;
	
}

#intro-overstappen-cta {
	
	display: inline-block;
	font-size: 18px;
	padding: 18px 22px 18px 22px;
	width: 330px;	
	border: 1px solid #45bdc2;
	color: #45bdc2;
	font-family: "Ubuntu","Helvetica Neue","Helvetica","Trebuchet MS", sans-serif;	
	font-weight: 200;
	border-radius: 5px;
	background: transparent;
	text-align: right;
	text-decoration: none;
		
}


#logos-coin {
	
	width: 132px;
	height: 25px;
	display: block;
	float: left;
	background-image: url("../images/coin.png");
	background-repeat: no-repeat;
	background-size: 132px 25px;
	margin: 17px 0 0 20px;
}

#logos-fist {
	
	float: left;
	display: block;
	width: 148px;
	height: 20px;
	background-image: url("../images/fist.png");
	background-repeat: no-repeat;
	background-size: 148px 20px;
	margin: 21px 0 0 20px;
}


#woordenlijst {
	
	float: right;
	margin: 20px 0 0 0;
	color: #44bcbe;
	text-decoration: underline;
	font-weight: 200;
	
}

#woordenlijst:hover {
	
	text-decoration: underline;
	cursor: pointer;
	
}

#opzeggen-icoon-wit {
	
	width: 48px;
	height: 47px;
	background-image: url("../images/opzeggen-icoon-wit.png");
	background-repeat: no-repeat;
	background-size: 48px 47px;
	float: left;
	display: block;
	margin: 30px 0 0 0;

}

#nummerbehoud-icoon-wit {
	
	width: 58px;
	height: 56px;
	background-image: url("../images/nummerbehoud-icoon.png");
	background-repeat: no-repeat;
	background-size: 58px 56px;	
	float: left;
	display: block;
	margin: 25px 0 0 0;
		
}


#overstappen-icoon-wit {
	
	width: 58px;
	height: 56px;
	background-image: url("../images/overstappen-icoon-wit.png");
	background-repeat: no-repeat;
	background-size: 58px 56px;	
	float: left;
	display: block;
	margin: 25px 0 0 0;
}

#header-container h2 {
	
	color: #fff;
	font-weight: 500;
	font-size: 30px;
	margin: 35px 0 0 25px;
	float: left;
	
}

nav {
	
	width: 100%;
	border-bottom: 1px solid #CAE9EA;	
}

nav ul {
	
	width: 1200px;
	position: relative;
	display: block;
	margin: 0px auto 0px auto;
	padding: 0px;
	list-style: none;
	overflow: hidden;
	
}

nav ul li {
	
	width: auto;
	float: left;
	padding-top: 34px;
	padding-left: 10px;
	font-size: 17px;
	padding-right: 25px;
	margin: 0px 3px 0 0;
	height: 85px;
	background-image: url("../images/arrow.png");
	background-repeat: no-repeat;
	background-size: 15px 85px;
	background-position: right center;
	color: #45bdc2;
	font-weight: 300;
	
}

nav ul li a {
	
	color: #45bdc2;
	font-weight: 300;
	text-decoration: none;	
}

nav ul li a:hover {
	
	text-decoration: underline;
	
}

nav ul li.active, nav ul li.active a {

	font-weight: 500;	
	
}

nav ul li:last-of-type {
	
	background-image: none;
	
}

nav ul li:first-of-type {
	
	padding-left: 0px;
	
}

main h3 {
	
	color: #575757;
	font-size: 18px;
	margin: 30px 0 0 0;
	font-weight: 500;
	
}

main h1 {
	
	font-weight: 500;
	font-size: 42px;
	margin: 30px 0 0 0;
	color: #45bdc2;
	
}


main p {
	
	color: #575757;
	font-size: 17px;
	line-height: 1.4em;
	margin: 4px 0px 20px 0px;
	font-weight: 300;
	
}

main blockquote {
	
	background: #daf2f3;
	border-radius: 8px;
	color: #288a8e;
	font-weight: 300;
	margin: 20px 0px 10px 0px;
	padding: 25px 30px 25px 30px;
	display: inline-block;
	font-size: 17px;
	line-height: 1.4em;
	
	
}

main a {
	
	color: #45bdc2;
	
}

#stap {
	
	width: 1200px;
	margin: 20px auto 130px auto;
	padding: 10px 90px 0px 90px;
	
}

.verderNaar {
	
	padding: 30px;
	border-radius: 5px;
	border: 1px solid #45bdc2;
	display: inline-block;
	text-decoration: none;
	color: #45bdc2;
	font-size: 17px;
	font-weight: 300;
	margin: 20px 0 0 0;
	
}

.verderNaar:hover {
	
	background: #45bdc2;
	color: #fff;
	
}


#terugKnop {
	
	color: #fff;
	float: right;
	margin: 40px 0px 0px 0px;
	font-weight: 300;
	font-size: 20px;
	display: block;
	text-decoration: none;
	
}

#terugKnop:hover {
	
	text-decoration: underline;
	
}

main ul, main ol {
	
	margin: 10px 0px 10px 0px;
	padding: 0px 0px 0px 25px;
	color: #575757;
	font-weight: 300;
	font-size: 17px;
	line-height: 1.4em;
	
}

main ul li, main ol li {
	
	margin-bottom: 10px;	

}


#overlay {
	
	width: 100%;
	height: 100%;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
	background: rgba(0, 0, 0, 0.81);
	z-index: 99999;
	display: none;
	
}


#woordenlijst-header {
	
	background: -webkit-linear-gradient(right, rgba(51, 176, 143, 0.94) 0%, rgba(61,191,197,0.94) 100%);
	background: -moz-linear-gradient(right, rgba(51, 176, 143, 0.94) 0%, rgba(61,191,197,0.94) 100%);
	background: linear-gradient(right, rgba(51, 176, 143, 0.94) 0%, rgba(61,191,197,0.94) 100%);
	width: 70%;
	padding: 30px 0px 30px 0px;
	color: #fff;
	font-size: 32px;
	font-weight: 700;
	margin: 0 auto 0 auto;
	text-align: center;
		
}

#woordenlijst-inhoud {
	
	max-height: 500px;
	height: 60%;
	overflow-y: scroll;
	width: 70%;
	background: #fff;
	margin: 0 auto 0 auto;
	padding: 40px 60px 50px 60px;
	
	
}

#woordenlijst-inhoud p {
	
	font-weight: 300;
	margin-bottom: 30px;
	
}

#woordenlijst-inhoud strong {
	
	
	color: #45bdc2;
	
}

#woordenlijst-sluiten {

	background: -webkit-linear-gradient(right, rgba(51, 176, 143, 0.94) 0%, rgba(61,191,197,0.94) 100%);
	background: -moz-linear-gradient(right, rgba(51, 176, 143, 0.94) 0%, rgba(61,191,197,0.94) 100%);
	background: linear-gradient(right, rgba(51, 176, 143, 0.94) 0%, rgba(61,191,197,0.94) 100%);
	width: 70%;
	margin: 0 auto 0 auto;
	color: #fff;
	font-size: 18px;
	padding: 30px 0px 30px 0px;
	text-align: center;
	opacity: 0.8;
	border-radius: 0px 0px 7px 7px;
}

#woordenlijst-sluiten:hover {

	opacity: 1;	
	cursor: pointer;

	
}




@media screen and (min-width: 1400px) {
	
	#home header { height: 670px; }
	
	
}



@media screen and (max-width: 1200px) {
	
	
	.centreer, nav ul, #stap { width: 1080px; }
	#stap { padding: 10px 0px 0px 0px; }
	nav ul li { font-size: 15px; height: 55px; padding-top: 20px; }
	#zakelijk-overstappen, #zakelijk-opzeggen { width: 370px; }
	#zakelijk-overstappen br, #zakelijk-opzeggen br, #intro-overstappen h2 br, intro-opzeggen h2 br, #intro-overstappen p br, intro-opzeggen p br { display: none; }
	#logos-coin { margin-left: 0px; }
	#zakelijk-opzeggen h1, #zakelijk-overstappen h1 { font-size: 37px; margin-top: 50px; }
	#zakelijk-opzeggen p, #zakelijk-overstappen p { font-size: 17px; line-height: 19px; }
	
	#intro-overstappen, #intro-opzeggen { width: 430px; padding: 30px 0 0 0; }
	
}




@media screen and (max-width: 960px) {
	
	header, #home header { height: auto; overflow: hidden; }

	#home header #header-container, header #header-container { height: auto; position: relative; }
	header #header-container { padding-bottom: 20px; }
	
	.centreer, nav, #stap { width: 100%; }
	.centreer, nav, #stap { padding: 0px 30px 0px 30px; }
	nav { overflow: scroll; -webkit-overflow-scrolling: touch; }
	nav ul { width: 1080px; }
	.verderNaar { width: 100%; text-align: center; }
	
	#header-graphic {
		position: absolute;
		float: none;
		margin: 30px 0px 0px -50px;
		width: 100px;
		height: 180px;
		background-position: center top;
		left: 50%;
	}
	
	#zakelijk-overstappen, #zakelijk-opzeggen {
		
		width: 50%;
		float: left;
		height: auto;
		margin: 190px 0px 10px 0px;
				
	}
	
	#zakelijk-overstappen { text-align: left; }
	#zakelijk-opzeggen { text-align: right; }
	
	#zakelijk-overstappen:hover, #zakelijk-opzeggen:hover { margin-top: 190px; }
	#zakelijk-opzeggen h1, #zakelijk-overstappen h1 { font-size: 21px; }
	#zakelijk-opzeggen p, #zakelijk-overstappen p { display: none; }
	#header-container h2 { font-size: 18px; margin: 40px 0 0 20px; }
	
	#terugKnop { display: none; float: left; clear: both; width: 100%; text-align: center; font-size: 16px; border-top: 1px solid rgba(255, 255, 255, 0.43); }
	
	#intro-overstappen, #intro-opzeggen { width: 100%; text-align: left; }
	#intro-overstappen-cta, #intro-opzeggen-cta { width: 100%; font-size: 16px; text-align: center;}
	#intro-opzeggen-cta { margin-bottom: 90px; }
	#intro-divider { display: none; }


	footer { width: 100vw; overflow: scroll; -webkit-overflow-scrolling: touch; height:auto; }
	footer .centreer { width: 100vw; text-align:center;}
	#woordenlijst, #logos-coin, #logos-fist{
		float:none;
		display: block;
		clear:both;
		margin:10px auto 0;
	}

	#woordenlijst-header { width: 100%; font-size: 20px; padding: 20px 30px 20px 30px; }
	#woordenlijst-inhoud { width: 100%; height: auto; max-height: 400px; overflow: scroll; -webkit-overflow-scrolling: touch; padding: 30px; }
	#woordenlijst-sluiten { width: 100%; border-radius: 0px;}


#intro p br { display: none; }












	
}









@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
    
	#header-graphic { background-image: url("../images/header-graphic@2x.png"); }
	
	#opzeggen-icoon-wit { background-image: url("../images/opzeggen-icoon-wit@2x.png"); }
	
	#overstappen-icoon-wit { background-image: url("../images/overstappen-icoon-wit@2x.png"); }

	nav ul li { background-image: url("../images/arrow@2x.png"); }
	
	#logos-coin { background-image: url("../images/coin@2x.png"); }

	#logos-fist { background-image: url("../images/fist@2x.png"); }	
	
}