/*-----------------header---------------*/
/* GO BACK */
*{
    font-weight: 300;
    font-family: 'Circular', Helvetica;
}


header .headernav{
    margin: 20px 52px 20px 50px;
}

header .headernav .back{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

header .headernav .back .arrow-left{
    width: 10px;
    height:10px;
    margin-right: 8px;
}

header .headernav .back .header-p:hover{
    text-decoration: underline;
}

/* Sign Up */

header .headernav .aanmelden{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

header .headernav .aanmelden .header-p{
    margin-right: 15px;
}

header .headernav .aanmelden .h-btn:hover{
    text-decoration: underline;
}

select {
  width: 400px;
  max-width: 100%; /* So it doesn't overflow from it's parent */
}

option {
  /* wrap text in compatible browsers */
  -moz-white-space:pre-wrap; 
  -o-white-space:pre-wrap; 
  white-space:pre-wrap; 

  /* hide text that can't wrap with an ellipsis */
  overflow: hidden;
  text-overflow:ellipsis;

  /* add border after every option */
  border-bottom: 1px solid #DDD;
}

/* --------------inlog forum -------------*/

/*logo*/
section.hero-logo{
    margin-top: 50px;
    height: 200px;
}

.hero-logo .logo{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.hero-logo .logo img{
    width: 150px;
}

/*form*/
.loginform {
    width: 100%;
    margin-top: 150px;
    margin-bottom: 200px;
}
.loginform #content{
    max-width: 50%;
    margin: 0 auto;
}

.loginform  h1{
    font-size: 2em;
    text-align: center;
}

.loginform form{
    margin-top:75px;
}


.loginform form .invul{
    margin-bottom: 40px;
}

.loginform form input[type=text], .loginform form input[type=password]{
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgb(0, 0, 0);
    font-size: 2em;
} 

.loginform form #submit{
    width: 26%;
    background-color: white;
    border: none;
    border-radius: 1px;
    padding: 9px 22px;
    cursor: pointer;
    border: 1px solid black;
    float: right;
    font-family: 'circular';
    font-weight: lighter;
}

.loginform form #submit:hover{
    background-color: black;
    color: white;
}

a.overline:hover{
    text-decoration: underline;
}

.loginform #content #aanmeldbox{
    display: flex;
    justify-content: space-around;
}

/*errors*/
.error{
    color: red;
    margin-bottom: 25px;
}

.knoppen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: right;
    -ms-flex-pack: right;
    justify-content: right;
}

.aanmelden button{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 180px;
    background-color: white;
    border: none;
    border-radius: 1px;
    padding: 9px 10px;
    cursor: pointer;
    border: 1px solid black;
    font-family: 'circular';
    font-weight: lighter;
    height: 50px;
    margin-left: 20px;
}

.aanmelden button:hover{
    background-color: black;
    color: white;
}

.verwijderPar {
    font-size: 1.1em;
}

@media screen and (max-width: 1000px) {
    .loginform #content{
        max-width: 80%;
    }
}
@media screen and (max-width: 850px) {

    .loginform #content{
        max-width: 90%;
    }

    nav.aanmelden{
        display: none;
        float:right;
    }

    .loginform form #submit {
        float: none;
        width:100%;
        font-size:0.9rem;
    }

    .loginform{
        margin-top: 80px;
        margin-bottom: 50px;
    }

    .loginform form{
        margin-top: 30px;
    }

    header .headernav{
        margin:15px 15px;
    }

    .loginform h1{
        font-size:1.5rem;
    }

    .loginform form .invul{
        margin-bottom: 30px;
    }
    .loginform form input[type=text], .loginform form input[type=password]{
        font-size:1.5rem;
    }

    .header-p#hide{
        display:none;
    }

    header .headernav .btnResp{
        padding: 5px 15px;
        border: 1px solid black;
    }

    header .headernav .btnResp:hover{
        text-decoration: none;
        background-color: black;
        color:white;
    }
    header .headernav .aanmelden .btnResp.h-btn{
        text-decoration: none;
    }

    header .headernav .back{
        display: inline;
    }
}
@media screen and (max-width: 600px) {
    .loginform form .invul .invulTit, .titBeschr, label.label{
        font-size: 0.9em;
    }
    .loginform form input[type=text], .loginform form input[type=password]{
        font-size:1.2rem;
    }
}