@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
footer {margin:0 auto;max-width:970px;padding-top:10px;}
html, body { width:100%; height:100%; font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 100%; }
body { background: url(../images/background-main.png) repeat-x 0 19.5em #ffffff; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { 	quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; } 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
* { margin: 0; padding: 0; }
.main, .ccm-page { height: 100%; width:100%; }
.main .homecontainer { height: 100%; background: url(../images/background-splash.png) no-repeat center #c93e39; }
.homecenter{ position:absolute; }
.centercontent {margin: 0 auto;}
.main .content ul {	list-style:none; }
.main .content li { margin-bottom: 1em; }
.main .content li.last { margin-bottom: 0; }
.main .selection a { color: #ffffff; text-decoration: none; }
.main .selection a .info { background: url(../images/list-icon-large-orange.png) no-repeat left center; }
.main .selection a:hover, .main .selection a:active { color: #000000; }
.main .selection a:hover .info, .main .selection a:active .info { background: url(../images/list-icon-large-black.png) no-repeat left center; }
.main .intro { margin-top: 1em;	margin-bottom: 1.5em; }
.main .intro .logo { position: relative; width: 13.75em; height: 15em; float: left; }

.main .intro .logo .visual { position: absolute; background: url(../images/background-splash-logo.png) no-repeat center; }
.main .intro .welcome {	background: url(../images/background-splash-welcome.png) no-repeat left; float: right; }
.main .selection { margin-bottom: 6.5em; }
.main .selection .select { position:relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; background: url(../images/background-splash-select-klein.png) repeat ; }
.main .selection .society ,.main .selection .medical, .main .selection .patient { position: relative; float: left; }
.main .selection .medical .visual { position: absolute;	background: url(../images/background-medical.png) no-repeat; }
.main .selection .patient .visual { position: absolute;	background: url(../images/background-patient.png) no-repeat;right: -5.75em; }
h1.heading { margin-bottom: 2em;	padding-bottom: 1.5em; background: url(../images/page-title.png) no-repeat left bottom; }
h1 span { font-size: 2em; color: #4d4d4d; }
	

/*desktop*/
@media screen and (min-width:981px){
	.main {	min-width: 60em; min-height: 40em;}
	.main .homecontainer { min-height: 40em;}
	.homecenter{ width:100%;	max-width:60em;	height:40em;	left:50%; top:50%; margin:-20em 0 0 -30em; }
	.main .intro { margin-top: 1em;	margin-bottom: 1.5em; }
	.main .selection .info { display: block; padding-left: 1.5em; }
	.main .selection .arrow { display: block; padding-left: 1.5em; }
	.main .selection .audience { font-size: 1.5em; font-weight: bold; }
	.main .intro .logo { width: 13.75em; height: 15em;}
	.main .intro .logo .visual { top: -0.5em; left: -0.5em; width: 14.75em; height: 16em; }
	.main .intro .welcome {	margin-top: 3em; width: 41.75em; height: 5.75em;	}
	.main .selection { margin-bottom: 6.5em; }
	.main .selection .select { padding: 4em 1em; height: 7em; }
	.main .selection .society {	margin-right: 4.5em; width: 13.75em;	}
	.main .selection .medical {	width: 13.75em;	margin-right: 9.25em; }
	.main .selection .medical .visual {	right: -5.75em;	top: -6em; width: 10em;	height: 27.5em; }
	.main .selection .patient {	margin-right: 1em; width: 13.75em; }
	.main .selection .patient .visual {	right: -5.75em;	top: -6em; width: 11.25em; height: 27.5em; }
	footer .naw {float:left;width:70%;font-size:0.875em;font-family:'Arial', serif;color:#000;line-height:55px;display:block;}
footer .logo {float:left;width:30%;text-align:right;line-height:55px;}

}

/*tablet staand*/
@media screen and (max-width:980px){
	.homecenter{ width:100%; padding-top:7em;}
	.main { position:fixed;background: url(../images/background-splash.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;overflow-y:auto; }	
	.main .homecontainer { height: 100%; background:none; min-height: 40em;}
	.centercontent {max-width:707px;margin: 0 auto; }
	.main .intro { margin-top: 1em;	margin-bottom: 1.5em;}
	.main .selection .info { display: block; padding-left: 1.2em; }
	.main .selection .arrow { display: block; padding-left: 1.2em; }
	.main .selection .audience { font-size: 1.2em; font-weight: bold; }
	.main .intro .logo { float:left;width: 30%; height: 240px;}
	.main .intro .logo .visual { top: 0px; left: 0px; width: 100%; height: 256px; }
	.main .intro .welcome {	float:left;margin-left:30px;margin-top: 70px; width: 60%; height: 92px; }
	.main .selection { margin-bottom: 104px; }
	.main .selection .select { padding: 64px 16px; height: 112px; }
	.main .selection .society {	margin-right: 15px; width: 27%; }
	.main .selection .medical {	width: 27%;	margin-right: 6%; }
	.main .selection .medical .visual {	right: -50px;	top: -50px; width: 120px; height: 400px; background-size: 105%;}
	.main .selection .patient {	margin-right: 16px; width:27%; }
	.main .selection .patient .visual {	right: -92px;	top: -50px; width: 140px; height: 400px; background-size: 105%;}
	footer .naw {float:left;width:70%;font-size:0.875em;font-family:'Arial', serif;color:#000;margin-top:15px;line-height:15px;display:block;}
	footer .logo {float:left;width:30%;text-align:right;line-height:55px;}
	
}

/*mobiel groot*/
@media screen and (max-width:773px){
	.homecenter{ width:100%; padding-top:1em; }
	.main { position:fixed;background: url(../images/background-splash.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;overflow-y:auto; }	
	.main .homecontainer { height: 100%; background:none; min-height: 440px; }
	.centercontent {width:100%;margin-left:10px;margin-right:10px; }
	.main .intro { margin-top: 0px;	margin-bottom: 24px; }
	.main .intro .logo { float:left;width: 30%; height: 240px; }
	.main .intro .logo .visual { top: 0px; left: 0px; width: 100%; height: 256px; background-size: 95%; }
	.main .intro .welcome {	float:left;margin-left:30px;margin-top: 70px; width: 60%; height: 135px; background-size: 85%;	}
	.main .selection { margin-left:2%;margin-bottom: 24px; }
	.main .selection .select { padding: 64px 4%; height: 112px; }
	.main .selection .society {	margin-right: 3%; width: 27%; }
	.main .selection .medical {	width: 27%;	margin-right: 8%; }
	.main .selection .medical .visual {	right: -55px;	top: 12px; width: 100px; height: 300px; background-size: 95%; }
	.main .selection .patient {	margin-right: 5%; width:27%; }
	.main .selection .patient .visual {	right: -62px;	top: 0px; width: 120px; height: 300px; background-size: 95%; }
}
@media screen and (max-width:773px){
	.homecenter{ width:100%; padding-top:7em;}
}
/*mobiel groot*/
@media screen and (max-width:767px){
	.homecenter{ width:100%; padding-top:1em; }
	.main { position:fixed;background: url(../images/background-splash.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;overflow-y:auto; }	
	.main .homecontainer { height: 100%; background:none; min-height: 640px; }
	.centercontent { width:100%; margin-left:10px; margin-right:10px; }
	.main .intro { margin-top: 0px;	margin-bottom: 24px; }
	.main .intro .logo { float:left;width: 30%; height: 240px; }
	.main .intro .logo .visual { top: 0px; left: 0px; width: 100%; height: 256px; background-size: 95%; }
	.main .intro .welcome {	float:left;margin-top: 70px; width: 60%; height: 132px; background-size: 95%; }
	.main .selection { margin-left:2%;margin-bottom: 24px; }
	.main .selection .select { padding: 64px 4%; height: 112px; }
	.main .selection .society {	margin-right: 3%; width: 26%; }
	.main .selection .medical {	width: 26%;	margin-right: 7%; }
	.main .selection .medical .visual {	right: -60px; top: 10px; width: 100px; height: 300px; background-size: 95%; }
	.main .selection .patient {	margin-right: 5%; width:26%; }
	.main .selection .patient .visual {	right: -72px; top: 0px; width: 120px; height: 300px; background-size: 95%; }
}

/*mobiel groot*/
@media screen and (max-width:640px){
	.homecenter{ width:100%; padding-top:0em;}
	.main { position:fixed;background: url(../images/background-splash.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;overflow-y:auto; }	
	.main .homecontainer { height: 100%; background:none; min-height: 360px; }
	.centercontent {width:100%;margin-left:10px;margin-right:10px; }
	.main .intro { margin-top: 0px;	margin-bottom: 24px; }
	.main .intro .logo { float:left;width: 30%; height: 240px; }
	.main .intro .logo .visual { top: 0px; left: 0px; width: 100%; height: 256px; background-size: 85%; }
	.main .intro .welcome {	float:left;margin-top: 70px; width: 60%; height: 112px; background-size: 85%;	}
	.main .selection { margin-left:2%;margin-bottom: 20px; }
	.main .selection .select { padding: 64px 16px; height: 112px; }
	.main .selection .society {	margin-right: 15px; width: 25%; }
	.main .selection .medical {	width: 25%;	margin-right: 10%; }
	.main .selection .medical .visual {	right: -82px;	top: 40px; width: 100px; height: 240px; background-size: 85%; }
	.main .selection .patient {	margin-right: 16px; width:25%; }
	.main .selection .patient .visual {	right: -68px;	top: 30px; width: 120px; height: 240px; background-size: 85%; }
	footer .naw {float:left;width:70%;font-size:0.875em;font-family:'Arial', serif;color:#000;margin-top:15px;line-height:15px;display:block;}
	footer .logo {float:left;width:30%;text-align:right;line-height:55px;}
	
}

/*mobiel klein*/
@media screen and (max-width:435px){
	.main .homecontainer { min-height: 40em; }
	.homecenter{ width:100%; padding-top:0em; }
	.main .homecontainer { height: 100%; background:none; min-height: 360px; }
	.centercontent {width:100%;max-width:260px;margin: 0 auto; }
	.main .intro { margin-top: 0px;	margin-bottom: 24px; }
	.main .intro .logo { float:left; width: 220px; height: 240px; }
	.main .intro .logo .visual { top: 0px; left: 0px; width: 260px; height: 256px; background-position:center center;}
	.main .intro .welcome {	float:left;margin-top: 0px; margin-left:0px;width: 260px; height: 130px; background-size: 100%; }
	.main .selection { margin-bottom: 104px; }
	.main .selection .select { padding: 64px 16px; height: 112px; }
	.main .selection .society {	margin-right: 72px; width: 220px; }
	.main .selection .medical {	float:left; padding-top:60px; width: 220px; margin-right: 148px; }
	.main .selection .medical .visual {	right: -92px; top: 30px; width: 160px; height: 440px; background-size: 70%; }
	.main .selection .patient {	float:left; padding-top:60px; margin-right: 16px; width: 220px; }
	.main .selection .patient .visual {	right: -92px; top: 30px; width: 180px; height: 320px; background-size: 70%; }
	footer .naw {float:left;width:70%;font-size:0.875em;font-family:'Arial', serif;color:#000;margin-top:15px;line-height:15px;display:block;}
	footer .logo {float:left;width:30%;text-align:right;line-height:55px;}
	
}