@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');

:root {
    --mainOrange: #EEBC32;
    --mainBlauw: #2F4EA4;
    --lightBlauw: #566FB3;
    --ctaBlauw: #2699FB;
    --lightGrey: #F1F1F1;
    --darkGrey: #707070;
    --shadowGrey: #C4C4C4;
    --snowWhite: #FAFAFA;
    --errorRood: #FB2626;
    --shadowBlauw: #007FEB;
  
    --hoofdTitel: 2em;
    --subTitel: 1.5em;
    --leesTekst: 1em;
}

* {
    font-family: 'Ubuntu', sans-serif;
}

body {
    background-color: var(--PaarsBlauw);
}

nav {
    margin-left: 4em;
    margin-right: 4em;
}

nav svg {
    background-color: var(--shadowBlauw);
    margin-top: -1.5em;
}

.algemeneKnopStyling {
    text-decoration: none;
    text-transform: uppercase;
}

fieldset {
    position: relative;
    margin: 2em;
    border: none;
}

p {
    line-height: 1.5em;
}

legend {
    position: relative;
    font-size: 2em;
    color: var(--wit);
    padding-top: 1em;
}

label, input {
    position: relative;
    display: block;
}

label {
    margin-top: 2em;
    margin-bottom: 0.5em;
    font-size: var(--leesTekst);
    color: #FAFAFA;
}

input {
    display: inline;
    padding: 0.5em 2em;
    height: 3em;
    background-color: var(--wit);
    box-shadow: 0px 3px 0px #C4C4C4;
    border: 1px solid #F1F1F1;
    border-radius: 5px;
    font-size: var(--leesTekst);
    color: var(--grijs);
}

input:active, input:focus {
    box-shadow: 0px 4px 0px var(--shadowBlauw);
    color: var(--shadowBlauw);
    outline: 0;
    outline-color: transparent;
    outline-style: none;
}

#hoofdKnop {
    color: var(--wit);
    background-color: var(--shadowBlauw);
    border-radius: 4px;
    box-shadow: 0px 3px 0px #007FEB;
    box-sizing: border-box;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    opacity: 1;    
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    text-align: center;
    text-decoration: none;
}

#hoofdKnop:hover, #hoofdKnop:focus, #subKnop:hover, #subKnop:focus {
    opacity: 0.8;
}

.knopSectie {
    margin-top: 4em;
    display: flex;
    flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
}

#subKnop {
    box-sizing: border-box;
    color: var(--shadowBlauw);
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 1em;
    padding-top: 1em;
    text-transform: uppercase;
}

select {
    height: 3em;
    width: 101%;
    background-color: var(--wit);
    border: 2px solid var(--borderGrijs);
    border-radius: 5px;
    padding-left: 1em;
    font-size: var(--leesTekst);
    color: var(--grijs);
    box-shadow: 0px 3px 0px var(--schaduw);
}

.center {
    margin: 6.9em auto;
    width: 40%;
  }

.hide {
    display: none;
}

.navigation {
    display: inline-block;
    margin-top: 4em;
    margin-left: 0em;
    margin-right: 0em;
    margin-bottom: 2em;
    display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: stretch;
      align-content: stretch;
  }

.btn-next {
    display: inline-block;
    background: var(--ctaBlauw) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 0px var(--shadowBlauw);
    border-radius: 4px;
    opacity: 1;
    text-align: center;
    box-sizing: border-box;
    color: var(--snowWhite);
    padding: 1em 2em;
  }
  
  .btn-previous {
    color: var(--snowWhite);
    padding: 1em 0em;
  }
  
  .btn-previous:focus, .btn-next:focus {
    box-shadow: 0px 3px 0px var(--snowWhite);
  }
  
  .btn-previous:hover, .btn-next:hover {
    cursor: pointer;
  }
  
  .btn-next:hover {
    box-shadow: 0px 3px 0px var(--ctaBlauw);
    background: var(--shadowBlauw) 0% 0% no-repeat padding-box;
  }
  
  .btn-previous:hover {
      color: var(--mainOrange);
  }