@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

:root{
	--max-container-width: 1250px;
}

body{
	font-family: Helvetica, Sans-Serif;
}

/*** Navigation left rotate 90 deg ***/
nav {
	height: 70px;
	position:fixed;
	-webkit-transform-origin: left top;
	-webkit-transform:rotate(-90deg) translateX(-100%);
	background-color: black;
	color: white;
	padding-left: 30px;
	width: max-content; /* Check with: https://caniuse.com/#search=max-content */
	text-transform: uppercase;
}
nav a, nav a:hover, nav a:visited{
	color: white;
	font-size: 10px;
	padding: 0;
	margin: 0;
	text-decoration: none;
}

nav ul{
	float: right;
	margin: 0;
	padding: 0;
}

nav li {
	float: right;
	margin: 20px 20px 20px 20px;
	list-style: none;
}

nav img{
	float: right;
	-webkit-transform:rotate(90deg);
	width: 15px;
	margin: 27px 10px 28px 10px;
}

nav #logo_nav {
	width: 20px;
	margin: 25px;
}

/*** content block ***/



div#container {
	left: 70px;
	width: calc(100% - 70px);
	height: 100%;
	position: fixed;
	overflow-y: auto;
	color: white;
	background-color: #00516e;
	font-weight: lighter;
	font-size: 17px;
}

div#container .header,
div#container .content{
	/*padding: 50px;*/
}

div.padding{
	padding: 50px;
}

div#container .header{

}

div#container .content{
	min-height: calc(100vh - 84px - 193px - 70px - 79px); /* 100% - logo - header - footer - somethingrandom(margins?) */
}

div#container .logo{
	padding-top: 40px;
}
div#container .logo .row{
	max-width: var(--max-container-width)
}

div#container #logo{
	margin-left: auto;
	margin-right: auto;
	display: block;
}
h1{
	font-family: 'Open Sans', sans-serif;
	font-weight: lighter;
	font-size: 50px;
}

h2{
	font-weight: lighter;
	text-transform: uppercase;
	font-size: 17px;
}

h3{
	font-size: 20px;
	color: #00516e;
	opacity: .5;
}


/** footer **/
div#container .footer{
	background-color: black;
	height: 70px;
	color: #8d8d8d;
	width: 100%;
	bottom: 0;
	padding-left: 50px;
}
div#container .footer .row{
	height: 100%;
	max-width: var(--max-container-width);
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: 0;
}
div#container .footer a{
	color: #8d8d8d;
}

/* blue style */
div#container.blue{
	background-color: #00516e;
}
div#container.blue .logo,
div#container.blue .header{
	background-color: white;
	color: black;
}
div#container.blue .header h1{
	color: #00516e;
}
div#container.blue .content h1{
	color: white;
}

/* black style */
div#container.black{
	background-color: black;
	color: white;
}
div#container.black .logo,
div#container.black .header{
}
div#container.black .header h1{
	color: white;
}
div#container.black .content h1{
	color: white;
}

/* white style */
div#container.white{
	background-color: white;
	color: black;
}
div#container.white .logo,
div#container.white .header{
	background-color: #00516e;
	color: white;
}
div#container.white .header h1{
	color: white;
}
div#container.white .content h1{
	color: #00516e;
}

/** Sub styles */
.singlecolumn{
	padding: 50px;
}
.twocolumnrow,
.threecolumnrow{
	display: flex;
	column-gap: 20px;
	padding: 50px;
	margin: 0;
	max-width: var(--max-container-width);
}
.twocolumnrow.nopadding{
	padding: 0;
}

.twocolumnrow img,
.threecolumnrow img{
	max-width: 100%;
}
.twocolumnrow img.right{
	width: 50%;
	float: right;
}
.twocolumnrow .left{
	width: 40%;
}
.twocolumnrow .right{
	width: 60%;
}
.twocolumnrow .borderl{
	border-left: .5px solid rgba(255, 255, 255, 0.3);
}

.twocolumnrow .left50,
.twocolumnrow .right50{
	width: 50%;
}
.twocolumnrow .leftsmall,
.twocolumnrow .rightsmall{
	width: 33%;
}
.twocolumnrow .leftwide,
.twocolumnrow .rightwide{
	width: 67%;
}

.threecolumnrow .left,
.threecolumnrow .middle,
.threecolumnrow .right{
	width: 33%;
}

a.button,
button.button{
	font-size: 17px;
	border: .5px solid rgba(255, 255, 255, 0.3);
	background-color: transparent;
	color: white;
	padding: 10px;
}

a.button.selected,
button.button.selected{
	background-color: white;
	color: black;
}


div.review{
	display: flex;
	padding: 50px;
	margin: 0;
	background-color: #00516e;
	color: white;
	height: 250px;
}

div.review .left{
	width: 250px;
}

div.review .right{
	max-width: 800px;
}

div.bluetext p,
div.bluetext h2,
div.bluetext h1{
	color: #00516e;
}

div.review p,
div.review h2,
div.review h1{
	color: white;
}

img.vertical_baseline{
	vertical-align: baseline;
}

div#carouselWerkwijze img{
	height: 423px;
}