/*-- FLEXBOX --*/
.flex_container{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;}
.flex_container.nowrap{
	flex-flow: nowrap;}
.flex_container.start{
  justify-content: flex-start;}
.flex_container.centered{
	justify-content: center;}
.flex_container.evenly{
	justify-content: space-evenly;}

.flex_item{
	flex: 1 auto;}
.flex_item.middle{
	align-self: center;}
.flex_item.end{
	align-self: flex-end;}

.container{
  width:100%;
  max-width:100%;
  margin:auto;}
.container_1600{
  width:100%;
  max-width:1600px;
  margin:auto;}
.container_1400{
  width:100%;
  max-width:1400px;
  margin:auto;}
.container_1300{
  width:100%;
  max-width:1300px;
  margin:auto;}
.container_1200{
  width:100%;
  max-width:1200px;
  margin:auto;}
.container_1100{
  width:100%;
  max-width:1100px;
  margin:auto;}
.container_1000{
  width:100%;
  max-width:1000px;
  margin:auto;}
.container_900{
  width:100%;
  max-width:900px;
  margin:auto;}
.container_800{
  width:100%;
  max-width:800px;
  margin:auto;}

.width10{width:10%;}
.width15{width:15%;}
.width20{width:20%;}
.width25{width:25%;}
.width30{width:30%;}
.width33{width:33.33%;}
.width35{width:35%;}
.width40{width:40%;}
.width45{width:45%;}
.width50{width:50%;}
.width55{width:55%;}
.width60{width:60%;}
.width65{width:65%;}
.width66{width:66.66%;}
.width70{width:70%;}
.width75{width:75%;}
.width80{width:80%;}
.width85{width:85%;}
.width90{width:90%;}
.width100{width:100%;}

/* Alle blokken naar 100% */
@media (max-width : 850px) {
	.width10, .width15, .width20, .width25, .width30, .width33, .width35, .width40, .width45, .width50,
	.width55, .width60, .width65, .width66, .width70, .width75, .width80, .width85, .width90, .width100{
		width:100%;
		max-width:100%;}
	.respReverse{
		flex-direction: column-reverse;
	}
}

.minWidth100{min-width:100px;}
.minWidth150{min-width:150px;}
.minWidth200{min-width:200px;}
.minWidth250{min-width:250px;}
.minWidth300{min-width:300px;}
.minWidth350{min-width:350px;}
.minWidth400{min-width:400px;}

/*-- LAYOUT --*/

body{background-color: #D0D2D1;}
.flex_container{align-content: center;}
.wrapcontainer{height:100vh;width:100vw;}
.chesscontainer{
	background-repeat: no-repeat;
	background-image: url("../img/chess.png");
	background-position: right bottom;
	background-size:75%;
	min-height: 550px;}
.contentcontainer{
	background-color:#fff;
	border-radius:10px;
	background-repeat: no-repeat;
	background-image: url("../img/bg.png");
	background-position: left top;
	background-size:69%;
	box-shadow: 0px 15px 11px -5px rgba(0,0,0,0.5);}
.logo{max-width:400px;}
.footer p{
	margin:10px 0;}
.footer p .sitename,
.footer p a{
	color:#005085;
	text-decoration: none;}

@media (max-width : 850px){
	.contentcontainer{
		background-image: none;
	}
	.welcome{
		/* background-color:#f9f9f9; */
		background-color:rgba(239,239,239,0.5);
	}
	.chesscontainer{
		background-size:80%;
	}
}
@media (max-width : 600px){
	.chesscontainer{
		background-size:100%;
	}
}

@media (max-width : 900px) {

}
@media (max-width : 750px) {

}

section,
main{
  min-height:100px;}

/*-- TYPO --*/
body{
	/* font-family: 'Barlow Condensed regular', sans-serif; */
	font-family: 'Titillium regular', sans-serif;
	font-size:110%;}
article p b,
article p .vet{
	font-family: 'Titillium semibold', sans-serif;}
article p strong{
	font-family: 'Titillium bold', sans-serif;}
article ol{
	margin-left: 15px;}
article ul li:before{
	font-family: "fontAwesome";
	content: "\f111";
	font-size:0.3em;
	vertical-align: middle;
	margin-right:5px;
	color:#444;
}
article p a,
article li a{
	color:rgb(53, 170, 229);}

/*-- MISCELLANEOUS --*/

hr{
  display:block;
  height:1px;
  border:0;
  border-top: 1px solid #22bbdd;
  margin:1em 0;
  padding:0;}
hr.fat{
  border-width:5px;}
hr.lichtgroen{
	border-color:#E4EFC4;}
hr.lichtgrijs{
	margin:0;
	border-color:#e9e9e9;}
.objcentered{
  margin:auto;
}

.margin10_30{
    margin:10px 30px;}
.margin15_30{
    margin:15px 30px;}
.margin20_30{
    margin:20px 30px;}
.margin10_40{
    margin:10px 40px;}
.margin15_40{
    margin:15px 40px;}
.margin20_40{
    margin:20px 40px;}
.margin10_50{
    margin:10px 50px;}
.margin15_50{
    margin:15px 50px;}
.margin20_50{
    margin:20px 50px;}
.margin10{
    margin:10px;}
.margin20{
    margin:20px;}
.margin30{
    margin:30px;}
.margin40{
    margin:40px;}
.margin50{
    margin:50px;}
.nomargin{
	margin:auto;}
@media (max-width : 720px) {
    .margin10_30,
    .margin15_30,
    .margin20_30,
    .margin10_40,
    .margin15_40,
    .margin20_40,
    .margin10_50,
    .margin15_50,
    .margin20_50,
    .margin10,
    .margin20,
    .margin30,
    .margin40,
    .nomargin{
        margin:20px;
    }
}
article.marginauto{
	margin-left:auto;
	margin-right:auto;}

.padding10{
  padding:10px;}
.padding20{
  padding:20px;}
.padding30{
  padding:30px;}
.padding40{
  padding:40px;}
.nopadding{
  padding:0;}
@media (max-width : 720px) {
  .padding10,
  .padding20,
  .padding30,
  .padding40,
  .nopadding{
    padding:20px;}
}

.clear{clear:both;}
.clear_5{clear:both;height:5px}
.clear_10{clear:both;height:10px}
.clear_15{clear:both;height:15px}
.clear_20{clear:both;height:20px}
.clear_30{clear:both;height:30px}
.clear_40{clear:both;height:40px}
.clear_50{clear:both;height:50px}

.centered{
	text-align: center;}
.lefted{
	text-align: left;}
.righted{
	text-align: right;}
figure img,
figure a img{
	display:block;
	max-width:100%;}
.objectfit img{
	object-fit: cover;}
.blocked{
	display: block;}