/*Basic Stuff*/
.red {
  background-color: #ff7d7d;
}

.grey {
  background-color: rgb(184,181,181);
}

.white {
    background-color: rgb(255,255,255);
}
/*HEADER*/

header {
	text-align: center;
    padding-left: 250px;
    height: 150px;
    padding-top: 20px;
    font-family: 'Poppins', sans-serif;
    font-style: bold;
    font-size: 30px;
}
.uppercase {
    text-transform: uppercase;
    font-size: 48px;
    font-style: black;
    font-weight: 900;
    color: rgb(122,19,19);
}
.naam span{
    color: rgb(122,19,19);
}

/*LAYOUTING*/
nav {
   
    margin-top: -110px;
    float:left;
    z-index: 2; 
}
.pagewrapper {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh );
    
}

nav .fixmenu {
    background-color: rgba(122,19,19,0.8);
    height: calc(100% + 80px);
    color: white;
    z-index: 2;
    width: 250px;
}
.mainsection {
	flex-grow: 1;
    min-width: 250px;
  display: flex;
  
}

footer {
	background-color: rgba(122,19,19,0.8);
	height: 80px;
	z-index: -1;
}
/* HEADER Styling */

.sectionheader a {
	text-decoration: none;
	color: black;
}

/*MENU Styling*/
.fixmenu ul li a {
	color: white;
	display: block;
    font-family: 'Poppins', sans-serif;
	 text-transform: Uppercase;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 3px;
	pointer-events: auto;
}
.fixmenu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	padding-top: 140px;
}

.menuitem {
    pointer-events: none;
    margin: 0;
    padding-left:30px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 1px solid rgb(184,181,181);
    background-color: rgba(184,181,181,0.3);
}

.menuitem.selected {
    width: 260px;
    background-color: rgba(184,181,181,0.7);
}

.menuitem:hover {
    width: 260px;
    background-color: rgba(184,181,181,0.5);
}

.fixmenu ul > li:first-child {
    border-top: 1px solid rgb(184,181,181);
}

/* content styling */
.cell img {
	max-width: none;
}
.icon {
	display: flex;
    flex-direction: column;
}
.icon span img {
    width: 150px;
}
.icon .pagetitle {
    flex-grow: 1;
}
.icon .pagetitle {
    font-size: 25px;
    color: rgb(122,19,19);
    text-align: center;
}

.content {
    padding-top: 2%;
    padding-left: 5%;
    padding-right: 5%; 
    display: flex; 
   flex-grow: 1;
    margin-right: 20px;
    margin-top: 20px;
}

.content .text {
    margin-left: 20px;
    padding-left: 50px;
}

.content ul {
    list-style-position:  unset;
}
/*
.content table {
    border: 1px solid #ccc;
    border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

.content table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

.content table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

.content table th,
.content table td {
  padding: .625em;
  text-align: center;
}

.content table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
*/
.cell img {
  width: 150px;
}
.overzicht .content {
	display: flex;
}
.front_left {
  display: flex;
  flex-direction: column;
	flex-grow: 1;
}
.front_right {
  display: flex;
  flex-direction: column;
	flex-grow: 1;
}

.post {
    margin-bottom: 35px; 
	margin-left: 50px;
}
.post a {
  display: flex;
  /*! flex: 1; */
  flex-direction: row;
    color: black;
    text-decoration: none;
	color: rgb(122,19,19);
}
.cell {
  /*! flex: 1; */
  /*! flex-direction: row; */
  /*! flex-grow: 1; */
  height: 100%;
  display: flex;
}

.cell img:hover , .post:hover a img{
    opacity: 0.5;
}


.front_post_title {
  /*! flex-grow: 2; */
  align-self: center;
margin-left: 20px;
font-size: 1.5em;
}

.front_right {
	margin-top: 50px;
}

.front_right > div {
	display: flex; 
	justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

.front_right > div > span {
    width: 200px;
    text-align: center;
}

.front_right > .afspraak > span > img {
   width: 150px;
}
.front_right > .afspraak > p {
	color: rgb(122,19,19);
	font-size: 18px;
}

.front_right > .phone > span > img {
    width: 90px;
}

.front_right > .mail > span > img {
    width: 90px;
}
.front_right > div > p > a {
	color: rgb(122,19,19);
	font-weight: bold;
}

.phone:hover span img, .mail:hover span img{
	opacity: 0.5;
}

.front_right > div p {
    text-align: center;
    width: 200px;
}

.mobilemenutitle {
	position: absolute;
	top: 0;
	right: 0;
	margin-right: 50px;
	margin-top: 20px;
}
.image-cropper {
    width: 400px;
    height: 400px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.teamoverzicht {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

.team_lid {
/*    flex-grow: 2;*/ 
    margin: 10px;
	display: flex;
	flex-direction: column;
}

.team_lid .team_naam {
    text-align: center;
    font-size: 20px;
}

.contact .front_right {
	order: -1
}
.contactform {

    width: 40%;
    padding-left: 10px;

}
.form-input-wrapper > input, .form-textarea-wrapper > textarea  {

    width: 90%;
}
.form-textarea-wrapper > textarea  {
    height: 250px;
}
.footer {
    display: flex;
    align-content: center;
    align-items: center;
	color:white;
}
.footer a {
	color:white;
}
.footer .gegevens{
    margin-left: auto;
    margin-right: auto;
    display: flex;
justify-content: center; /* align horizontal */
        align-items: center; /* align vertical */
}
.footer .gegevens {
	padding-left: 260px;
}
.gegevens div {

    padding: 10px;

}

@media (min-width: 280px) and (max-width: 880px) {
  
    .navsection .fixmenu {
        width: 20px;
	height: 100%;
    }
    
    .navsection .fixmenu ul {
        display: none;
    }
    
     header {
        padding:  0;
        font-size: 20px;
	padding-top: 50px;
    }
    
    .uppercase {
        font-size: 140%;
    }
    
   .content {
	   display: flex;
       flex-direction: column;
       justify-content: center; /* align horizontal */
        align-items: center; /* align vertical */ 
    } 
	.contactform {
    width: 100%;
    }
   .content .text {
        margin: 0;   
	padding-left: 5px;
    } 
	.gegevens div{
	padding: 0;
	}
	footer {
        	height: 130px;
	}
	.footer .gegevens {
	display: flex;
	padding-left: 0;
	padding-top: 15px;
	flex-direction:column;
	justify-content: center; /* align horizontal */
        align-items: center; /* align vertical */
	}
@media (min-width: 280px) and (max-width: 460px) {
.image-cropper {
    width: 300px;
    height: 300px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}
}
}