/* Standard */
body {
    margin: 0;
    font-family: sans-serif;
}

.leftContainer {
    margin-left: 5em;
}

.listItem {
    border-bottom: 2px solid #333;
    line-height: 5em;
}

.listItem:nth-child(even) {
    background: #ddd;
}

.listItem input {
    width: 3em;
}

.listItem .checkbox {
    width: 2em;
}

/* menu */


#menu {
    text-align: center;
    padding: 0.5%;
    background: linear-gradient(to right, #fd8c1b, rgb(199, 6, 199)); 
    height: 35px;
}

#menu ul {
    list-style-type: none;
}


#menuknop {
  transition: 0.3s;
text-align: center;
background-color: #f6d4b2; 
font-size: 30px;
width: 300px;
overflow: hidden;
padding: 0;
width: 100%;
}


#menuknopClick {
background-color: #f6d4b2; 
font-size: 30px;
}

#menuknop ul li a {
transition: 0.3s;
margin-left: -100px;
flex-direction: column;
text-align: center;
transition: 0.3s;
color: black;
height: 1.8em;
line-height: 1.8em;
text-decoration: none;
display: flex;
overflow: hidden;
white-space: nowrap;
}

#menuknop ul li a{
  border-bottom: 1px solid #333;
}

#menu ul li a {
  display: block;
  text-align: center;
  transition: 0.3s;
  color: black;
  height: 1.8em;
line-height: 1.8em;
  text-decoration: none;
  font-size: 20px;
  margin-right: 1em;
}


#menu ul {
  display: flex;
  margin: 0;
  padding: 0;
}

#menu ul ul { 
flex-direction: column;
}

#menu ul ul a {
height: 0;
overflow: hidden;
}

#menu ul li:hover ul li a{
height: 1.8em;
z-index: 200;
}

.menuItems {
    transition: 0.2s; 
    padding-left: 5px;
    padding-right: 3%;
    padding-top: 0.5%;
    padding-bottom: 0.5%
}

#menu ul li a:hover,
#menu ul li a.active {
  transition: 0.3s;
  color: white;
  text-decoration: underline;
}

footer ul li a {
  transition: 0.3s;
  color: black;
  text-decoration: none;
  font-size: 20px;
}

footer ul li {
  transition: 0.3s;
  color: black;
  text-decoration: none;
  font-size: 20px;
}

footer ul li a:hover {
  transition: 0.3s;
  color: #e02dd7bb;
  text-decoration: underline;
  font-size: 25px;
}

/* cms */

.cms-menu {
    width: 390px;
    background: #eee;
    display: inline-block;
}

.cms-menu .btn {
    display: block;
    border-radius: 0;
    width: 300px;
    font-size: 20px;
    border: 1px solid #000;
    background: #eee;
    color: #000;
    font-style: normal;
    text-align: center;
}

.cms-menu ul {
    list-style-type: none;
}

.cms-info {
    display: inline-block;
    border-radius: 0;
    width: 900px;
    font-size: 20px;
    border: 1px solid #000;
    background: #eee;
    color: #000;
    font-style: normal;
    text-align: center;
    vertical-align: top;
    padding: 20px;
    margin-left: 180px;
}

.cms-info ul{
    list-style-type: none;
    padding:0;
}

.cms-info h1 {
    color: #fa9632;
}

.createnews {
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
}

.createnews input {
    margin-top: 20px;
    width: 600px;
    display: block;
}

.createnews textarea {
    margin-top: 20px;
    width: 600px;
    height:200px;
    display: block;
    font-family: 'roboto', sans-serif;
}

.createnews .btn {
    margin-top: 20px;
    width: 600px;
}

.createnews h2 {
    display: block;
}

.creategegevens {
    margin-top: 0px;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
}

.creategegevens input {
    margin-top: 20px;
    width: 600px;
    display: block;
}

.creategegevens textarea {
    margin-top: 20px;
    width: 600px;
    height:200px;
    display: block;
    font-family: 'roboto', sans-serif;
}

.creategegevens .btn {
    margin-top: 20px;
    width: 600px;
}

.creategegevens h2 {
    display: block;
}

.gegevens2 {
    margin-top: 20px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #9932cc;
    width: 20%;
    background-color: #eee;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
}

.btncms {
    display: block;
    border: 2px solid #9932cc;
    background-color: #99be4d;
    height: 40px;
    width: 300px;
    text-align: center;
    font-size: 25px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
}

.nieuwsItem .btn {
    display: inline-block;
    text-align: center;
    width: 360px;
    padding: 10px;
}

.fas {
    transition: 0.3s;
    color: #9932cc;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 30px;
}

.fas:hover {
    transition: 0.3s;
    color: #f87c00;
}

/*media functies*/

@media screen and (max-width: 900px) {
    .welkom {text-align: center;}
    body {margin: 1em;}
    .cms-menu {max-width: 100%;}
    .cms-menu .btn {width: 285px;}
    .cms-info {display: none;}
    .menuItems{width: 30vw;}
    .creategegevens input{font-size: 20px; margin-top: 100px;}
    .creategegevens textarea{font-size: 20px; margin-top: 100px;}
    .createnews input{font-size: 20px; margin-top: 100px; max-width: 340px;}
    .createnews textarea {font-size: 20px; height: 200px; margin-top: 100px; max-width: 340px;}
    body p{ font-size: 35px;}
    body h1{ font-size: 45px;}
    body h2{ font-size: 40px;}
    #menu {display: none;}
    #menuknop a {font-size: 45px;}
    #menuknopClick {display: block; }
    #menuknopClick i { font-size: 30px; margin: 5px 5px 5px 10px;}
    .contactbtn {display: none;}
    .gegevens1 {display: none;}
    .info {width: 70%;}
    .nieuwsItem {width: 90%;}
    .contactbtn1 {width: 200px;}
    .shadow {display: none;}
    .formulier {display: block; width: 90%; font-size: 25px;}
    }

@media screen and (min-width:900px) and (max-width:1024px) {
    .welkom {margin: 0; text-align: center;}
    .cms-menu {width: 100%;}
    .cms-menu .btn {width: 90%; font-size: 60px; padding: 20px; height: fit-content;}
    .cms-info {display: none;}
    .menuItems{width: 30vw;}
    .creategegevens input{font-size: 45px; margin-top: 100px;}
    .creategegevens textarea{font-size: 45px; margin-top: 100px;}
    .createnews input{font-size: 45px; margin-top: 100px;}
    .createnews textarea {font-size: 45px; height: 600px; margin-top: 100px; width: 950px;}
    body p{ font-size: 35px;}
    body h1{ font-size: 45px;}
    body h2{ font-size: 40px;}
    #menu {display: none;}
    #menuknop a {font-size: 45px;}
    #menuknopClick {display: block;}
    #menuknopClick i { font-size: 75px; margin: 5px 5px 5px 10px;}
    .contactbtn {display: none;}
    .gegevens1 {display: none;}
    .info {width: 70%;}
    .nieuwsItem {width: 90%;}
    .contactbtn1 {width: 300px;}
    .shadow {display: none;}
    .formulier {display: block; width: 90%;}
    }

@media screen and (min-device-width: 1024px) and (max-device-width: 1100px) {
    .menuItems{width: 30vw;}
    body p{ font-size: 35px;}
    body h1{ font-size: 45px;}
    body h2{ font-size: 40px;}
    #menu {display: block;}
    #menuknop {display: none}
    #menuknopClick {display: none;}
    .contactbtn {display: none;}
    .gegevens1 {display: none;}
    .info {width: 70%;}
    .nieuwsItem {width: 90%;}
    .contactbtn1 {width: 400px;}
    .shadow {display: none;}
    .formulier {display: block; width: 90%;}
    }

@media screen and (min-width: 1100px) {
    .menuItems{width: 12vw;}
    #menu {display: block;}
    #menuknop {display: none}
    #menuknopClick {display: none;}
    .shadow {display: block;}
}