/*-- FLEXBOX --*/
.flex_container{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;}
.flex_container.middle{
	align-content:center !important;}
.flex_container.center{
	justify-content: center;}
.flex_container.end{
	justify-content: flex-end !important;}
.flex_container.stretch{
	align-content:stretch;}

.flex_container.gap10{
	gap: 10px;}
.flex_container.gap010{
	gap: 0 10px;}
.flex_container.gap20{
	gap: 20px;}
.flex_container.gap020{
	gap: 0 20px;}
.flex_container.gap1020{
	gap: 10px 20px;}
.flex_container.gap30{
	gap: 30px;}
.flex_container.gap030{
	gap: 0 30px;}
.flex_container.gap1030{
	gap: 10px 30px;}


.flex_container.nowrap{
	flex-flow: nowrap;}
.flex_item.start{
  align-self: flex-start;}

.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%;}

.gap10 .width50{
	max-width:calc(100% / 2 - 10px);
}
.gap20 .width50{
	max-width:calc(100% / 2 - 20px);
	min-width:400px;
}
.gap20 .width33{
	max-width:calc(100% / 3 - 20px);
	min-width:300px;
}
.gap20 .width20{
	max-width:calc(100% / 5 - 20px);
	min-width:200px;
}

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

.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;}

/*-- DIRECTIONS --*/

.row{
  flex-direction: row;}
.column{
  flex-direction: column;}
.reverse,
.row-reverse{
  flex-direction: row-reverse;}
.column-reverse{
  flex-direction: column-reverse;}

/*-- LAYOUT --*/

body{}
#top{
	min-height:55px;
	background-color:#3D2670;
}
.border{
  position: relative;
  width: 100%;
  box-sizing: border-box;}
.border::before,
.border::after{
  position: absolute;
  content: "";
  width: 100%;
  height: 10px;
  background-color: inherit;}
.border::before {
  top: -10px;}
.border::after {
	/* background-color:#FFDDCA; */
  bottom: -10px;
  left: 0;}
.white.border::after {
	background-color:#FFF;}

.bordertop::before{-webkit-mask: url('../img/bordertop.svg'); mask: url('../img/bordertop.svg')}
.borderbottom::after{-webkit-mask: url('../img/borderbottom.svg'); mask: url('../img/borderbottom.svg')}


/* SLIDER */

.poster .white, .poster .caption.white h1, .poster .white h2, .poster .white h3, .poster .caption.white p{color:#fff;}


.button {
    color: #fff;
    min-height: 44px;
    /* line-height: 46px; */
    border-radius: 26px;
    display: inline-block;
    font-weight: 300;
    /* text-transform: uppercase; */
    white-space: nowrap;
    text-decoration: none;
    padding: 0 15px 0 20px;
    /* margin: 0 20px; */
    border: none;
}
.button a {
    color: #fff;
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    overflow: hidden;
}
	.logo_wrap{
		flex:1 auto;
		min-width:120px;
		max-height:150px;
		max-width:300px;
		z-index: 999;}
    .logo_wrap a{
      display:block;}
      .logo_wrap .logo{
        margin:-25px 0}

	.menu_wrap{
		flex:2 auto;
		padding:0;}
		/* hamburger */
    .mini-menu_wrap{
      display:none;}
		.mini-menu_wrap .fa-bars{
			color:#FA6103;
			cursor:pointer;
			font-size:2em;}

		/* menu */
		.main-nav ul {
			margin: 0 20px;
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-end;
			list-style: none;
			/* align-items: stretch; */
      height: 125px;
		}
		.main-nav ul li{
      display: flex;
      flex-direction: column;
			justify-content: center;
			background-repeat:no-repeat;
			background-size: contain;
			background-position: center;
		}
		.main-nav ul li a{
			font-family: 'Pangolin', sans-serif;
			width:100%;
			padding:0 10px;
			color: #3D2670;
			font-size:1.3em;
			text-decoration: none;
			border-right: 1px solid #3D2670;}
			.main-nav ul li:last-of-type a{
				border-right: 0px solid #3D2670;
			}
.submenu{
	padding:30px 0;}
	.submenu .submenuItem{}
	.submenu .submenuItem a{
		display:block;
		color:#fff;
		background-color:#DE7DAF;
		padding:0 10px;
		border-radius:5px;
		text-decoration: none;}
		.submenu .submenuItem a.active{
			background-color:#3D2670;}


@media (max-width : 1200px) {
	.logo_wrap{
		max-width:280px;}
}
@media (max-width : 1150px) {
	.logo_wrap{
		max-width:50%;}
	.mini-menu_wrap{
		display:block;
    height:150px;
    display:flex;
    flex-direction: column;
    justify-content: center;
		text-align:right;
		margin-right:20px;}
    .menu_wrap{
			display:none;
      width:100%;
      background-color:#FFF;}
    .main-nav ul{
      height:auto;
			justify-content: space-around;}
    .main-nav ul li.active,
    .main-nav ul li{
			text-align: center;
      line-height:55px;
      height:55px;
			padding:4px;
			/* border-top:5px solid #888;
			border-bottom:5px solid #888; */
		}
		.main-nav ul li.active{
			/* border-bottom:5px solid #97B72A; */
		}
		.main-nav ul li a{
			/* color:#fff; */
      height:55px;
			text-align: center;
			display:block;}
}

@media (max-width : 800px) {
	.main-nav ul{
  	justify-content: flex-start;}
	.main-nav ul li{
		height:auto;
		line-height:1.5;
		width:33%;
		}
	.main-nav ul li a{
		height:auto;
		border-right: 0px solid #3D2670;
		border-top: 1px solid #3D2670;
	}
}
@media (max-width : 720px) {
	.main-nav ul li{
		width:50%;}
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
	background-color:rgba(255,255,255,0.8);
	z-index: 999;
}
.sticky:before,
.sticky:after {
  content: '';
  display: table;}
sidebar .submenu{
  border-right:1px solid #C2C6C9;}
sidebar .submenu li a{
  display:block;
  height:60px;
  line-height:60px;
  font-size:1.4rem;
  color:#000;
  font-weight:400;
  text-decoration: none;
  border-bottom:1px dashed #C2C6C9;}
sidebar .submenu li a:before{
  font-family: "fontAwesome";
  content: "\f105";
  font-size: 1.4rem;
  color: #959CA2;
  font-weight:800;
  padding-right:10px;}
sidebar .submenu li a.active{
	font-weight:500;
}
sidebar .submenu li a.active:before{
  color: #97B72A;
  font-weight:800;}


@media (max-width : 900px) {
  sidebar .submenu{
    margin:0 20px;}
}
@media (max-width : 750px) {
  sidebar{}
  sidebar .submenu{
    margin:-20px 20px 20px;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width:calc(100% - 40px);
    border-right:0px solid #C2C6C9;}
  sidebar .submenu li a{
    height:40px;
    line-height:40px;
    white-space: nowrap;
    padding:0 10px;}
  sidebar .submenu li a.active{
    border-bottom:1px solid #97B72A;}
  sidebar .submenu li a:before{
    content: "";
    padding-right:0px;}
	sidebar .sticky{
		background-color: deeppink;
		position:sticky !important;
		align-self: flex-start;
		top:-1px;
	}
}

section,
main{
  min-height:100px;}
.splash{
	background-image:url('../img/splash.png');
	background-repeat:no-repeat;
	background-position: center;
	background-size: auto 80%;
}

.teamLid{}
	.teamLid .teamLidFig{
		border:7px solid #fff;
		border-radius:50%;
		max-width:160px;
		max-height:160px;}
		.teamLid .teamLidFig img{
			object-fit: cover;
			object-position: 50% 10%;
			max-width:146px;
			max-height:146px;
			height:146px;
			border-radius:50%;}

footer{
	font-size:90%;
	line-height:1.6em;
  background-color:#3E2670;}
footer span{
	display:block;}
footer .small_logo{
	max-width: 80px;
	max-height:80px;
	margin:auto;}
footer .socials a{
	display:block;}
footer .socials .fa{
	color:#fff;
	font-size:1.8em;
	padding:0 5px 5px 0;}
footer .footernav ul li a{
	color:#fff;
}
footer .footernav ul li:before{
	content: '';
}

@media (max-width : 750px) {
	footer .socials{
		text-align: center;
	}
	footer .socials a{
		display:inline-block;
	}
}

/*-- TYPO --*/



article{}
article p,
article ul,
article ol{
	font-weight: 400;}
article p .light{
	font-weight: 300;}
article p .medium{
	font-weight: 500;}
article p b,
article p .vet{
	font-weight: 600;}
article p strong,
article p .strong{
	font-weight: 700;}
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{
	color:#FA6103;}

.link{
	color:#777;
	height:44px;
	line-height:46px;
	border-radius:22px;
	border:1px solid #777;
	display:inline-block;
	font-weight:300;
	text-decoration: none;
	padding:0 20px;
	white-space: nowrap;
  background-color:#fff;}
.link:hover{
    background-color:#f3d083;
}
.link:after{
  line-height:19px;
  display:inline-block;
	font-family: 'fontAwesome';
	content: "\f105";
	margin-left:15px;}

.sub{
	color:#777;
	min-height:33px;
/*	line-height:35px;*/
	border-radius:17px;
	border:1px solid #777;
	display:inline-block;
	font-weight:300;
	text-decoration: none;
	padding:4px 15px;
	margin:0 15px 10px 0;
    line-height:1.5;
/*	white-space: nowrap;*/
    background-color:#fff;
/*	min-width:250px;*/
/*	max-width:280px;*/
}
.sub.active,
.sub:hover{
  color:#1c5661;
	font-weight:500;}
.sub:before{
  line-height:19px;
  display:inline-block;
	font-family: 'fontAwesome';
	content: "\f105";
	margin-right:8px;}

.chart{
	text-align: center;
}
/* .chart img{
	max-width:calc(100% - 50px);
	margin: auto;
	border:10px solid white;
	transform: rotate(3deg);
	box-shadow: 15px 15px 0px 0px rgba(0,0,0,1); */
}
.bg_lichtoranje .chart img{
	box-shadow: 5px 5px 0px 0px orange;
}

.album ul{
  display: flex;
  flex-wrap: wrap;}
.album li{
	height: 40vh;
	flex-grow: 1;}
.album ul li:last-child{
	flex-grow: 10;}
.album img{
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
	object-position: 50% 70%;
  /* vertical-align: bottom;
  vertical-align: center; */
	border:1px solid #fff;}

@media (max-aspect-ratio: 1/1) {
	.album li{
		height: 30vh;}
}
@media (max-height: 480px) {
	.album li{
	  height: 80vh;}
}
@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
	.album ul{
		flex-direction: row;}
	.album li {
  	height: auto;
    width: 100%;}
	.album img {
    width: 100%;
    max-height: 75vh;
    min-width: 0;}
	}

	.sidebar{
		position:fixed;
		top:0;
		right:0;
		background-color:#000;
		height:400px;
		color:#fff;
	}
	.sidebar:before{
		content
	}


/*-- MISCELLANEOUS --*/
.bg_lichtgrijs{
	background-color:#efefef;}
.bg_lichtlichtgrijs{
	background-color:#f9f9f9;}
.bg_lichtoranje{
	background-color:#FFDDCA;}
.bg_white{
	background-color:#FFF;}

.miniArticle.orange,
main.orange{background-color:#FFDECB;}
.miniArticle.dorange,
main.dorange{background-color:#FFD0B4;}
.miniArticle.purple,
main.purple{background-color:#E1C9DF;}
.miniArticle.dpurple,
main.dpurple{background-color:#b28ec0;}
.miniArticle.white,
main.white{background-color:#FFF;}

/* .minwidth33{
	min-width:250px;
	max-width:calc(100% / 3);}
.gap20 .minwidth33{
	min-width:250px;
	max-width:calc(100% / 3 - 20px);} */

.bg_gifgroen{
	background-color:#97B72A;}
.bg_lichtgroen{
	background-color:#E4EFC4;}

.zigzag{
  position: relative;
	display:inline-block;
	min-width:auto;
  z-index: 1;}
main.white .zigzag{
	color:#F7A9B9;}
main.orange .zigzag{
	color:#FA6103;}
main.dpurple .zigzag,
main.purple .zigzag{
	color:#3E2576;}
main.blue .zigzag{
	color:#213B86;}
.zigzag:before, .zigzag:after{
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
	width:100%;}
.zigzag:before {
	height: 12px;
  top: calc(100% + 2px);}
.zigzag:after{
	height: 16px;
  top: 100%;}
main.white .zigzag:before{
  background: linear-gradient(-135deg, #F7A9B9 8px, transparent 0) 0 8px, linear-gradient(135deg, #F7A9B9 8px, transparent 0) 0 8px;
	background-position: top left;
  background-repeat: repeat-x;
  background-size: 16px 16px;}
main.dorange .zigzag:before,
main.orange .zigzag:before{
  background: linear-gradient(-135deg, #FA6103 8px, transparent 0) 0 8px, linear-gradient(135deg, #FA6103 8px, transparent 0) 0 8px;
	background-position: top left;
  background-repeat: repeat-x;
  background-size: 16px 16px;}
main .zigzag.dpurple:before,
main.dpurple .zigzag:before,
main .zigzag.purple:before,
main.purple .zigzag:before{
	background: linear-gradient(-135deg, #3E2576 8px, transparent 0) 0 8px, linear-gradient(135deg, #3E2576 8px, transparent 0) 0 8px;
	background-position: top left;
  background-repeat: repeat-x;
  background-size: 16px 16px;}
main .zigzag.blue:before,
main.blue .zigzag:before{
	background: linear-gradient(-135deg, #213B86 8px, transparent 0) 0 8px, linear-gradient(135deg, #213B86 8px, transparent 0) 0 8px;
	background-position: top left;
  background-repeat: repeat-x;
  background-size: 16px 16px;}

main.orange .zigzag:after{
  background: linear-gradient(-135deg, #FFDECB 8px, transparent 0) 0 8px, linear-gradient(135deg, #FFDECB 8px, transparent 0) 0 8px;
	background-position: top left;
  background-repeat: repeat-x;
  background-size: 16px 16px;}
main.dorange .zigzag:after{
  background: linear-gradient(-135deg, #FFD0B4 8px, transparent 0) 0 8px, linear-gradient(135deg, #FFD0B4 8px, transparent 0) 0 8px;
	background-position: top left;
  background-repeat: repeat-x;
  background-size: 16px 16px;}
main.purple .zigzag:after{
	background: linear-gradient(-135deg, #E1C9DF 8px, transparent 0) 0 8px, linear-gradient(135deg, #E1C9DF 8px, transparent 0) 0 8px;
	background-position: top left;
  background-repeat: repeat-x;
  background-size: 16px 16px;}
main.dpurple .zigzag:after{
	background: linear-gradient(-135deg, #b28ec0 8px, transparent 0) 0 8px, linear-gradient(135deg, #b28ec0 8px, transparent 0) 0 8px;
	background-position: top left;
  background-repeat: repeat-x;
  background-size: 16px 16px;}
main.white .zigzag:after,
main .bg_white .zigzag:after{
  background: linear-gradient(-135deg, #FFF 8px, transparent 0) 0 8px, linear-gradient(135deg, #FFF 8px, transparent 0) 0 8px;
	background-position: top left;
  background-repeat: repeat-x;
  background-size: 16px 16px;}

.miniArticle.dpurple:hover{
	background-color: #fff;}
	.miniArticle.dpurple:hover h4,
	.miniArticle.dpurple:hover p,
	.miniArticle.dpurple:hover a{
		color: #444;}
.miniArticle.dorange:hover{
	background-color: #fff;}
	.miniArticle.dorange:hover h4,
	.miniArticle.dorange:hover p,
	.miniArticle.dorange:hover a{
		color: #444;}

.border_dashed{
  border-width:0px;
  border-style: dashed;}
.border_dotted{
  border-width:0px;
  border-style: dotted;}
.border_gifgroen{
  border-width:1px;
	border-color:#97B72A;}
.border_bottom_gifgroen{
	border-bottom-width:1px;
	border-bottom-color:#97B72A;}
.border_top_gifgroen{
	border-top-width:1px;
	border-top-color:#97B72A;}
.border_left_gifgroen{
	border-left-width:1px;
	border-left-color:#97B72A;}
.border_right_gifgroen{
	border-right-width:1px;
	border-right-color:#97B72A;}

.gray{
	color:#888;}
.black{
	color:#000;}
.firebrick{
	color: firebrick;}
.gifgroen{
  color:#97B72A;}

/* RADIUSSES */
.radius10{
	border-radius:10px;}
.radiusTop10{
	border-radius:10px 10px 0 0;}
.radiusBottom10{
	border-radius:0 0 10px 10px;}
.radius7{
	border-radius:7px;}
.radiusTop7{
	border-radius:7px 7px 0 0;}
.radiusBottom7{
	border-radius:0 0 7px 7px;}

/* SHADOWS */
.shadow{
	/* box-shadow: 15px 15px 0px 0px rgba(0,0,0,0.1); */
	box-shadow: 10px 10px 15px -1px rgba(0,0,0,0.3);}

img.pic.shadow{
	box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.2);
	border-width:10px 10px 30px 10px;
	border-style:solid;
	border-color:white;
	margin:auto;}
#contactmap{
	box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.2);
	border-width:10px 10px 30px 10px;
	border-style:solid;
	border-color:white;
}

.documenten{}
.documenten .document{}
.documenten .document a{
	flex-wrap: nowrap;
	/* width: 95%; */
	height: 100%;
	background-color:#fff;
	vertical-align: top;
	color: #333;
	text-decoration: none;}
.documenten .document a .document_band{
	flex: 1 0 60px;
  max-width: 60px;
  background-color: #ececec;
  text-align: center;
  position: relative;}
.documenten .document a .document_text{
	flex: 1 0 calc(100% - 60px);}
.documenten .document a:hover .document_band{
	flex:1 0 60px;
	max-width:60px;
	text-align: center;}
.documenten .document a .document_band.orange{
	background-color:#FFD0B4;}
.documenten .document a .document_band.purple{
	background-color:#E1C9DF;}
.documenten .document a:hover .document_band.orange{
	background-color:#FA6103;}
.documenten .document a:hover .document_band.purple{
	background-color:#3E2576;}
.documenten .document a:hover .document_band .datum{
	color:#fff;}
.documenten .document a .document_band .circle{
	background-color:#fff;
	border-radius:50%;
	margin:10px auto 5px auto;
	padding:5px;
	height:30px;
	width:30px;
	text-align: center;
	line-height:20px;
	font-size:1em;}
.documenten .document a .document_band .datum{
	display: block;
	font-size: 0.75em;
	margin-bottom: 10px;}
.documenten .document a .document_text p{
	margin:0;
	padding:0 20px 10px 15px;
	font-size:1em;
	font-weight:700;
	line-height:1.4em;}


hr{
  display:block;
  height:1px;
  border:0;
  border-top: 1px solid #777;
  margin:1em 0;
  padding:0;}
hr.fat{
  border-width:5px;}
hr.licht{
	border-color:#ccc;}
hr.donker{
	border-color:#444;}
.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{
	display:block;
	max-width:100%;}
.objectfit img{
	object-fit: cover;
	object-position: 50% 50%;
	width:100%;}
.picWithNr{
	position:relative;}
	.picWithNr .picNr{
		color:#FFF;
		position: absolute;
		top:10px;
		right:10px;
		width:50px;
		height:50px;
		border-radius: 50%;
		/* background-color: aqua; */
		text-align: center;
		line-height:50px;}
	.picNr.orange{
		background-color:#fc8f50;}
	.picNr.purple{
		background-color:#b08dbf;}
	.picNr.blue{
		background-color:#4466c4;}

/*-- TEMPLATE	--*/
.example{
  min-height:200px;
	min-width:360px;
  display:inline-block;
  resize:horizontal;
  overflow:auto;
  border-radius:8px 8px 0 8px;
  border:1px solid #ccc;}

.example .flex_container{
	margin:10px;
	border:px solid rebeccapurple;}
.example .flex_container .flex_container{
	margin:0;
	border:1px solid blueviolet;}

.example .flex_container .flex_item{
  background-color: deeppink;
	border:5px solid rebeccapurple;
  min-height: 100px;}
.example .flex_container .flex_item .flex_container .flex_item{
  background-color: hotpink;
	border:5px solid blueviolet;
  min-height: 100px;}

.example .flex_item span{
	margin:5px;
	padding:5px;
	display:block;
	height:80px;}
pre{
	font-family: monospace;
  background-color:#efefef;
  display:inline-block;
  margin:10px;
  padding-right:20px;
  border-radius:8px;
  border:1px solid #ccc;}
code{
  font-family: monospace;
	font-style: normal;
  font-size:110%;}
.example .legende{
	margin:10px;}
.example .legende .rebeccapurple{
	color:rebeccapurple;}
.example .legende .blueviolet{
	color:blueviolet;}
.example .legende .deeppink{
	color:deeppink;}
.example .legende .hotpink{
	color:hotpink;}

@media (max-width : 850px) {
	.example{
		width:100%;}
	.example .flex_container .width50{
		width:50%;}
	.example .flex_container .width25{
		width:25%;}
}
@media (max-width : 850px) {
	.example .flex_container{
		max-width:100%;
	}
	.example .flex_container .width25,
	.example .flex_container .width50{
		width:100%;
	}
	.example .nested .width100,
	.example .nested .width50{
		width:33%;
	}
}
@media (max-width : 650px) {
	.example .nested .width100,
	.example .nested .width50{
		width:100%;
	}
}