@import url("fonts.css");

* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

article, aside, details, footer, header, nav, section {display: block;}
img {display: block;}

::selection {background: #c5ebf6;}

html, body {
	margin: 0;
	padding: 0;
}
	
.wrap {
	margin: 0 auto;
	width: 960px;
}

.row {overflow: hidden;}
.col {
	float: left;
	padding: 0 10px;
}
	.nop {padding: 0;}
	.col-1-3 {width: 33.3%;}
	.col-2-3 {width: 66.6%;}
	
	.col-1-4 {width: 25%;}
	.col-2-4 {width: 50%;}
	.col-3-4 {width: 75%;}
		
	.col-1-5 {width: 20%;}
	.col-2-5 {width: 40%;}
	.col-3-5 {width: 60%;}
	.col-4-5 {width: 80%;}
	
	.col-100 {width: 100%;}

body {background: #4ccae3 url("../images/top_bg.png") left 105px no-repeat;}
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}

.feedback {position: fixed; background: url("../images/feedback.png") no-repeat; width: 57px; height: 133px; top: 40%; right: 0; z-index: 10000;}
.feedback a {display: block; width: 57px; height: 133px;}

h2 {font-family: "Museo-500"; font-size: 24px; line-height: 22px; color: #55b5cf; margin-bottom: 25px; text-transform: none;}
p.intro {font-size: 14px; line-height: 22px;}
p {color: #307081; font-size: 12px; line-height: 22px; margin-bottom: 25px;}
.button {color: #ffffff; font-size: 14px; line-height: 20px; background: #339a00; font-family: "Museo-500"; text-transform: uppercase; padding: 15px 45px;
			border: #000000 1px solid; border-radius: 30px; transition: 0.5s ease; cursor: pointer; text-align: center;
			-webkit-box-shadow: 0 9px 6px -6px #9e9e9e;-moz-box-shadow: 0 9px 6px -6px #9e9e9e;box-shadow: 0 9px 6px -6px #9e9e9e;}
.button:hover, .button.active,
.button.blue:hover, .button.blue.active,
.button.darkBlue:hover, .button.darkBlue.active {color: #004f64; background: #ffffff; transition: 0.5s ease;}
.button.disabled {cursor: default; background: #c4c4c4; color: #9e9e9e; border-color: #c4c4c4;}
.button.disabled:hover {cursor: default; background: #c4c4c4; color: #9e9e9e;}
.button.blue { background: #4ccae3; color: #0e667c; transition: 0.5s ease;}
.button.darkBlue {color: #ffffff; background: #0e667c; transition: 0.5s ease;}

.icon-security:after {background: url("../images/icons/beveiliging.png") no-repeat;}
.icon-relevance:after {background: url("../images/icons/bedrijfsrelevantie.png") no-repeat;}
.icon-competencies:after {background: url("../images/icons/competenties.png") no-repeat;}
.icon-law:after {background: url("../images/icons/wetgeving.png") no-repeat;}
.icon-engineering:after {background: url("../images/icons/techniek.png") no-repeat;}
.icon-propositions:after {background: url("../images/icons/cloud_proposities.png") no-repeat;}
.icon-finance:after {background: url("../images/icons/financien.png") no-repeat;}

/* ### Header ### */
header {height: 105px; background: #ffffff;}
header .title {float: left; font-family: "Museo-700"; font-size: 25px; line-height: 105px; color: #00add0; margin: 0;}
header .logo {float: right; margin: 35px 0 0 0;}

/* ### Breadcrumbs ### */
.breadcrumbs {margin-bottom: 40px; color: #626262; font-family: "Museo-500"; font-size: 12px; line-height: 22px; padding: 10px 0;}
.breadcrumbs span a {color: #626262;}

/* ### Intro ### */
.content {background: url("../images/cloud_top.png") no-repeat bottom center; padding-bottom: 200px;}
.content .left {float: left; width: 460px;}
.content .right {float: left; width: 470px; padding-right: 30px;}
.content p {font-size: 14px; line-height: 22px;}
.content p.intro {font-size: 16px;}

.content .wrap.index {padding-top: 90px;}

.actionStart {height: 100px; position: relative; width: 520px; margin-bottom: 100px;}
.actionStart .organisationNumber {font-size: 18px; color: #ffffff; font-weight: bold; position: absolute; right: 0; font-family: 'Bradley Hand Bold'}
.actionStart .dotted {position: absolute; bottom: 10px; left: 140px;}

.explanation {margin: 0 auto; width: 1010px; margin-bottom: 150px;}
.explanation .checklist {width: 320px; height: 430px; background: #0e667c; padding: 30px 30px 30px 20px; margin-right: 30px; float: left;}
.explanation .checklist p.title {font-size: 16px; line-height: 22px; font-family: 'Museo-700'; color: #ffffff; margin: 0;}
.explanation .checklist hr {background: url("../images/straight_dots.png"); width: 93px; height: 3px; margin: 15px 0; border: none;}
.explanation .checklist ul {list-style: none; padding: 0;}
.explanation .checklist ul li {font-family: 'Museo-500'; padding-left: 60px; margin-bottom: 25px; background: url("../images/checklist_item.png") 5px 10px no-repeat; min-height: 30px; font-size: 14px; line-height: 22px; color: #ffffff;}

.explanation .impression {width: 660px; height: 430px; background: #0e667c; float: right; min-height: 200px; padding: 30px 0;}
.explanation .impression p.title {font-size: 30px; line-height: 38px; font-family: 'Museo-300'; color: #ffffff; margin: 0 0 25px 0; text-align: center;}
.explanation .impression .flexslider {width: 485px; height: 295px; margin: 0 auto; border: none;}
.explanation .impression .flexslider .flex-control-paging li a {background: url("../images/slider_controls.png"); box-shadow: none; width: 12px; height: 12px;}
.explanation .impression .flex-control-paging li a.flex-active,
.explanation .impression .flex-control-paging li a:hover {background: #ffffff; box-shadow: none;}

.explanation .impression .flexslider .flex-direction-nav a:before {content: '';}
.explanation .impression .flexslider .flex-prev {background: url("../images/slider_left.png"); left: -50px; opacity: 1; transition: none; width: 14px; height: 21px;}
.explanation .impression .flexslider:hover .flex-prev {left: -50px; opacity: 1; }
.explanation .impression .flexslider .flex-next {background: url("../images/slider_right.png"); right: -50px; opacity: 1; transition: none; width: 14px; height: 21px;}
.explanation .impression .flexslider:hover .flex-next {right: -50px; opacity: 1;}

/* ### Cloud tabs ### */
.cloudTabs {background: #ffffff; padding-top: 100px; position: relative;}
.cloudTabs .headers {margin: 0 auto; text-align: center; width: 100%; position: absolute; top:0; transition: background 0.8s ease;}
.cloudTabs .headers.fixed {position: fixed; top: 0; z-index: 9999; background: #307081; transition: background 0.8s ease;
		-webkit-box-shadow: 0 3px 6px -6px black;-moz-box-shadow: 0 3px 6px -6px black;box-shadow: 0 3px 6px -6px black;}
.cloudTabs .headers p {margin: 0;}
.cloudTabs .headers a {display: inline-block; background-color: #307081; padding: 57px 40px 15px; font-family: 'Museo-500';
						color: #ffffff; font-size: 14px; line-height: 22px; position: relative; margin-right: -5px;}
.cloudTabs .headers a.first {padding-left: 30px;}
.cloudTabs .headers a.last {padding-right: 30px;}
.cloudTabs .headers a:after {content:'';display:block;position:absolute;opacity: 1;left: 0; top: 0; width:100%; height: 100%; background-position: center 17px; transition: 500ms ease}
.cloudTabs .headers a.completed:after,
.cloudTabs .headers a.completed span {opacity: 0.3; transition: 500ms ease;}
.cloudTabs .headers a span.checkbox {display: none; opacity: 1; transition: 500ms ease;}
.cloudTabs .headers a.completed span.checkbox {display: block; transition: 500ms ease;}
.cloudTabs .headers a span.checkbox:after {content:'';display:none;position:absolute; opacity: 1; left: 0; top: 0; width:100%; height: 100%; background: url("../images/completed.png") center center no-repeat; z-index: 999}
.cloudTabs .headers a.completed span.checkbox:after {display: block;}
.cloudTabs .headers a.active,
.cloudTabs .headers a:hover {background-color: #004051;}
.cloudTabs .headers a img {position: absolute;}
.cloudTabs .headers a:before {content:'';display:block;position:absolute;right: -24px; top: -3px; width:48px; height: 102px; background: url("../images/tab_seperator.png") no-repeat; z-index: 999}
.cloudTabs .headers a.last:before {display: none;}

.cloudTabs .contents {min-height: 750px;}
.cloudTabs .tabContent {display: none; padding-top: 80px;}
.cloudTabs .tabContent.active {display: block;}

.cloudTabs .tabContent .top {text-align: center; width: 725px; margin: 0 auto; padding-bottom: 110px;}
.cloudTabs .tabContent .top h2 {font-size: 30px;}
.cloudTabs .tabContent .top p {font-size: 14px;}
.cloudTabs .tabContent .top p.intro {font-size: 16px;}
.cloudTabs .tabContent .bottom {background: #004f64; padding: 75px 0;}
.cloudTabs .tabContent .questions {width: 1000px; margin: 0 auto;}
.cloudTabs .tabContent .questions .question {width: 400px; margin-bottom: 80px; float: left; clear: left;}
.cloudTabs .tabContent .questions .question.right {float: right; clear: right;}
.cloudTabs .tabContent .questions h3 {font-size: 18px; line-height: 22px; color: #ffffff; font-family: "Museo-300"; margin-left: 5px; margin-bottom: 45px;
										position: relative; text-shadow: 5px 5px 5px #353535;}
.cloudTabs .tabContent .questions h3:after {content:'';display:block;position:absolute;left: 0; bottom: -20px; width:93px; height: 3px;
											background: url("../images/question_bottom.png") no-repeat;}
.cloudTabs .tabContent .questions input[type="radio"] {margin-right: 5px; position: absolute; left:-9999px; display: none;}
.cloudTabs .tabContent .questions label {background: url('../images/checkbox.png') no-repeat; min-height:36px; padding: 0 0 0 50px; display: block;
							margin: 0 0 20px; cursor: pointer; line-height: 22px; font-size: 14px; color: #55b5cf; font-family: 'Museo-300';}
.cloudTabs .tabContent .questions label:hover {color: #c1f2ff;}
.cloudTabs .tabContent .questions label.active {background-position: 0 -400px; color: #c1f2ff; text-shadow: 5px 5px 5px #353535;}

.cloudTabs .tabContent .tabBottom {margin: 0 0 50px 0;}
.cloudTabs .tabContent .tabBottom img {margin: 0 auto;}

.controls {width: 100%; background: #ffffff;}
.controls p {margin: 0;}

.controls .buttons {width: 1000px; margin: 0 auto; height: 200px; text-align: center; position: relative;}
.controls .buttons .button {margin-right: 15px;}
.controls .buttons .button.nextQuestion {margin-right: 0;}

.controls .company {position: absolute; left: 0; top: 100px; width: 100%; font-size: 14px;}


/* ### Forms ### */
form {
	margin: 0;
	padding: 0;
}

input, textarea, .dropdown .selected {
	font: 14px 'Museo-500';
	line-height: none;
	color: #7297a2;
	padding: 15px 30px;
	background: #f1f4f5;
	width: 600px;
    margin-bottom: 10px;
	border: 1px solid #bfdae3;
	-moz-box-shadow:	inset 0 2px 5px #eee;
	-webkit-box-shadow:	inset 0 2px 5px #eee;
	box-shadow:			inner 0 2px 5px #eee;
	-webkit-border-radius:	4px;
	-moz-border-radius:		4px;
	border-radius:			4px;
	-webkit-transition:	all 0.2s;
	-moz-transition:	all 0.2s;
	-ms-transition:		all 0.2s;
	-o-transition:		all 0.2s;
	transition:			all 0.2s;
}
input:focus, textarea:focus {
	background: #e3eaec;
	color: #215f72;
	-moz-box-shadow:	inset 0 2px 5px #ddd;
	-webkit-box-shadow:	inset 0 2px 5px #ddd;
	box-shadow:			inner 0 2px 5px #ddd;
}
input:focus, button:focus, textarea:focus, select:focus {outline: none;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder	{color: #7297a2;}
input:-moz-placeholder, textarea:-moz-placeholder		    			{color: #7297a2;}
input::-moz-placeholder, textarea::-moz-placeholder					{color: #7297a2;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder			{color: #7297a2;}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder	{color: #215f72;}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder			{color: #215f72;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder			{color: #215f72;}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder		{color: #215f72;}

.dropdown{position:relative;cursor:pointer;text-align:left;}
.dropdown .selected{display:block; background: #e5f7fb;border-color: #b0e3f4;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;}
.dropdown .old{display:none;}
.dropdown .carat{position:absolute;right:21px;top:18px;width:15px;height:10px;background:url('../images/select-carat.png');transition: 400ms;}
.dropdown.open .selected{border-bottom-left-radius:0;border-bottom-right-radius:0; background: #cef0f8;}
.dropdown.open .carat{transform: rotate(180deg)}
.dropdown > div{position:absolute;left:0;top:48px;right:0;z-index:10;overflow:hidden;height:0;}
.dropdown.open > div{border:1px solid #b0e3f4;border-top:none;border-bottom-left-radius:4px;border-bottom-right-radius:4px;}
.dropdown > div ul{margin:0;padding:0;}
.dropdown > div ul li{list-style:none;padding:15px 30px;line-height:21px;border-top:1px solid #b0e3f4;background:#f0fafd;}
.dropdown > div ul li:hover{background:#e5f7fb;}
.dropdown > div ul li.active{background:#e5f7fb;}
.dropdown{font-size:14px;}
.dropdown.filled .selected{color:#7297a2;}

.profileForm {text-align: center; padding-top: 30px;}
.formItem {margin-bottom: 10px; width: 100%; padding: 0 180px; text-align: center;}
.formItem.error input, .formItem.error textarea, .formItem.error .dropdown .selected {background: #ffbabc; border-color: #ff0000;}
input.button {width: auto;}

.error {background: #ffbabc; border-color: #ff0000;}

/* ### Profile ### */
.wrap h2 {color: #004f64;}
p.return {margin: 0 0 10px 0;}
p.return a {font-family: 'Museo-700'; color: #0e667c; text-transform: uppercase;}

.resultsOnline ul {margin-top: 0;}
.resultsOnline .theme ul li {font-size: 15px;}
.resultsOnline .themeAspect ul li {font-size: 12px;}

.leftContent {width: 600px; float: left;}
.leftContent p {color: #004f64;}
.leftContent .resultActions {padding: 40px 20px;}
.leftContent .resultActions img {float: left;}
.leftContent .resultActions a.button.online {float: left; margin: 90px 0 0 25px; padding: 15px 25px;}
.leftContent .resultActions .options {padding-top: 50px}
.leftContent .resultActions .options a.button {display: inline-block; padding: 15px 20px; font-size: 12px; line-height: 14px;}

.leftContent .resultActions .mail {position: relative; display: none; padding-top: 20px;}
.leftContent .resultActions .mail input {width: 200px;}
.leftContent .resultActions .mail span.small {font-size: 11px; position: absolute; width: 250px; left: 210px;}

.leftContent .resultButton {padding-top: 50px;}

.leftContent .themeScore {margin-bottom: 50px;}
.leftContent .themeScore .text {width: 350px; float: left;}
.leftContent .themeScore.odd .score,
.leftContent .themeScore.even .text {float: left;}
.leftContent .themeScore.even .score,
.leftContent .themeScore.odd .text {float: right;}

.leftContent .score {width: 250px; float: left;}
.leftContent .score .grade {font-size: 80px; line-height: 160px; height: 160px; width: 160px; display: block; color: #ffffff;
                                        background: #327f92; border-radius: 100px; margin: 0 auto; text-align: center;}

.leftContent .themeScore .text h3 {font-family: 'Museo-700'; font-size: 16px; line-height: 22px; color: #0e667c;}
.leftContent .themeScore .text p {font-size: 12px; margin-top: 0;}
.leftContent .themeScore .text a.button {font-size: 10px; line-height: 14px;}

.leftContent > .score {margin-bottom: 50px;}
.leftContent .themeIntro {width: 350px; float: left; margin-bottom: 50px;}
.leftContent .themeIntro p {font-size: 14px; line-height: 22px;}
.leftContent .themeAspect {width: 100%; min-height: 40px; padding: 0 45px; position: relative; margin-bottom: 65px;}
.leftContent .themeAspect:after {content:'';display:block;position:absolute;left: 0; top: 0; width:100%; height: 100%; background-position: top left;}
.leftContent .themeAspect h3 {color: #0e667c; margin: 0; font-size: 16px; line-height: 22px;}
.leftContent .themeAspect p {color: #0e667c; font-size: 12px; line-height: 22px; margin: 0;}

/* ### Widget ### */
.sideBar {width: 310px; float: right;}
.widget {width: 100%; margin-bottom: 80px;}
.widget h2 {font-size: 24px; line-height: 38px;}

.widget.consultant {min-height: 300px; padding-top: 30px;}
.widget.consultant p.small {width: 180px; font-size: 14px;}
.widget.consultant span.name {font-family: 'Museo-500';}
.widget.consultant a.button {display: inline-block; margin-bottom: 15px;}
.widget.consultant a.button.blue {padding: 10px 25px; font-size: 12px; line-height: 14px;}

.widget.download h2 {margin-bottom: 40px;}
.widget.download .widgetContent {padding-top: 25px; background: url("../images/magazine_widget.png") top left no-repeat; min-height: 125px;}
.widget.download a.button {padding: 15px 20px; font-size: 14px; line-height: 18px; float: right;}

/* ### Footer ### */
footer {height: 100px; background: #ffffff;}
footer p {font-family: "Museo-700"; color: #004f64; text-transform: uppercase; line-height: 100px; margin: 0;}
footer p a {color: #004f64;}
footer .copyright {float: left;}
footer .pxlReference {float: right;}

@media screen and (min-width: 1500px) {
    .content {background-size: 100% auto;}
}