/*FED CSS Robin Ansems studentnummer:500780651 RET Website*/

body {
    background-color: #f5f5f5;
    color: #12689e;
    display: grid;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1em;
    grid-template-areas: 'navigation''header''aside''main''footer';
    margin: 0;
}

footer p {
    margin: 0 0 1em 0;
    padding: 0 14% 0 14%;
    width: 72%
}

footer img {
    margin: 0 1em;
    width: 1em;
}




/*NAVIGATIE*/

nav {
    background-color: white;
    font-family: 'Source Sans Pro', sans-serif;
    grid-area: navigation;
    justify-content: center;
    width: 100%;
}

nav:nth-child(1) ul {
    align-items: center;
    display: flex;
    height: 4.5em;
    justify-content: space-between;
    list-style-type: none;
    margin: 0;
    padding: 0 14% 0 14%;
    width: 72%;
}

nav:nth-child(1) ul li:nth-child(1) {
    list-style-type: none;
    margin: 0 1em;
}

nav:nth-child(1) ul li:nth-child(2) {
    list-style-type: none;
    margin: 0 1em;
}

nav:nth-child(1) ul li:nth-child(3) {
    list-style-type: none;
    margin: 0 1em;
}

nav:nth-child(1) ul li:nth-child(4) {
    list-style-type: none;
    margin: 0 1em;
}

nav:nth-child(1) ul li:first-child {
    margin-right: auto;
}

nav:nth-child(1) ul li img {
    width: 8em;
}

nav:nth-child(1) ul li:nth-child(2) img {
    width: 3em;
}

nav:nth-child(1) ul li:nth-child(3) img {
    width: 3em;
}

nav:nth-child(1) ul li:nth-child(4) img {
    background-color: red;
    border-radius: 0 0.2em 0.2em 0;
    padding: 1em;
    width: 1.3em;
}

nav:nth-child(1) ul li:nth-child(4) div {
    border: 10em black;
    display: flex;
    height: 3em;
    margin: 0;
    padding: 0;
}


nav:nth-child(1) ul li input {
    border-color: darkgray;
    border-radius: 0.2em 0 0 0.2em;
    border-right: red;
    border-style: solid;
    border-width: 0.2em;
    font-size: 1em;
    padding: 1em;
}




/*HEADER*/

header {
    align-items: center;
    background-color: red;
    background: url(/images/headerfoto1_1920x642.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'Source Sans Pro', sans-serif;
    grid-area: header;
    justify-content: space-around;
}

h1 {
    color: white;
    font-size: 2.5em;
    font-weight: 300;
    margin: 2em 1em 2em 1em;
}

header button {
    align-items: center;
    background-color: #04477f;
    border: none;
    border-radius: 0.2em;
    color: white;
    display: flex;
    font-size: 1em;
    font-weight: 600;
    justify-content: space-between;
    margin: 3em 1em 2.5em 1em;
    padding: 1em;
    width: 16em;
}

header button:hover {
    background-color: #d4effc;
    color: #04477f;
    cursor: pointer;
}


header button img {
    padding: 0 0 0 0.5em;
    width: 1.3em;
}






/*FILTER EN SORTEEROPTIES-KNOP*/

body main button:nth-child(1):hover {
    background-color: #d4effc;
    color: #04477f;
    cursor: pointer;
}

body main button:nth-child(1) {
    background-color: #04477f;
    border: none;
    border-radius: 0.2em;
    color: white;
    font-size: 1em;
    font-weight: 600;
    margin: 1em 1em 0 1em;
    padding: 0 1em 1em 0;
    width: 16em;
}

body main button:nth-child(2):hover {
    background-color: #d4effc;
    color: #04477f;
    cursor: pointer;
}

body main button:nth-child(2) {
    background-color: #04477f;
    border: none;
    border-radius: 0.2em;
    color: white;
    font-size: 1em;
    font-weight: 600;
    margin: 1em;
    padding: 0 1em 1em 0;
    width: 16em;
}

body main button img {
    padding: 1em 1em 0 1em;
    width: 1.3em;
}






/*FORMULIER*/

/*Filter- en sorteeropties in- en uitklapbaar, bron: https://www.youtube.com/watch?v=sxZhsBLg2Ls*/
#hideformulier {
    display: none;
}

#showformulier {
    display: true;
}

#formulier {
    display: none;
}

form {
    background-color: white;
    border-radius: 0.2em;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1em;
    margin: 0 0 1em 0;
    padding: 1em;
    width: 72%;
}

h2 {
    color: #12689e;
    font-size: 2em;
    font-weight: 500;
    margin: 0;
    padding: 0;
    padding-bottom: 0.5em;
    text-decoration: none;
    text-shadow: none;
}

/*SORTEREN OP-KNOP*/

/*Dropdownknop, bron: https://www.w3schools.com/css/css_dropdowns.asp*/
body form div button:first-child:hover {
    background-color: #d4effc;
    color: #04477f;
    cursor: pointer;
}

body form div button:first-child {
    background-color: #04477f;
    border: none;
    border-radius: 0.2em;
    color: white;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    margin: 0 0 1em 0;
    padding: 1em;
    width: 8em;
}

body form div {
    max-width: 10em;
}

body form div div {
    background-color: #f9f9f9;
    box-shadow: 0 0.4em 0.8em 0 rgba(0, 0, 0, 0.2);
    display: none;
    min-width: 7em;
    position: absolute;
}

body form div div a {
    color: #12689e;
    display: block;
    padding: 0.6em 0.8em;
    text-decoration: none;
}

body form div div a:hover {
    background-color: #f1f1f1
}

body form div:hover div {
    display: block;
}

/*FILTEROPTIES*/

body form fieldset {
    background-color: #d3d3d3;
    border: none;
    border-radius: 0.2em;
    color: #12689e;
    height: 5.8em;
    margin: 0 0 1em 0;
    max-width: 20em;
    padding: 1em;
}

body form fieldset label:nth-child(1) {
    font-size: 1.3em;
}

body form fieldset label {
    font-size: 1em;
}

body form fieldset span label:nth-child(1) {
    margin: 0;
}

body form fieldset span label {
    margin: 0.5em 0 0 0.5em;
}

body form fieldset span input {
    margin: 0.5em 0 0 0;
}

body form fieldset div {
    align-items: center;
    display: flex;
}

/*Slider, bron: https://www.w3schools.com/howto/howto_js_rangeslider.asp*/
body form fieldset div input {
    -moz-appearance: none;
    -moz-transition: .2s;
    -webkit-appearance: none;
    -webkit-transition: .2s;
    background: #12689e;
    border-radius: 0.2em;
    height: 0.75em;
    opacity: 0.7;
    transition: opacity .2s;
    width: 10em;
}

body form fieldset div input::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: red;
    border-radius: 50%;
    cursor: pointer;
    height: 1.25em;
    width: 1.25em;
}

body form fieldset div input::-moz-range-thumb {
    background: red;
    border-radius: 50%;
    cursor: pointer;
    height: 1.25em;
    width: 1.25em;
}

body form fieldset div p:first-child {
    padding: 0 1em 0 0;
}

body form fieldset div p:nth-child(3) {
    margin: 0;
    padding: 0 0 0 1em;
}

body form fieldset p:nth-child(3) {
    margin: 0 0 0 0;
}

body form fieldset:nth-child(3) {
    height: 6.2em;
}

body form fieldset:nth-child(4) {
    height: 4.2em;
}

body form fieldset:nth-child(5) {
    height: 22.7em;
}

body form fieldset:nth-child(6) {
    height: 7em;
}

body form fieldset:nth-child(5) span {
    align-items: center;
    display: flex;
}

body form fieldset:nth-child(6) span {
    align-items: center;
    display: flex;
}

/*FILTERKNOP*/

body button:nth-child(7):hover {
    background-color: #d4effc;
    color: #04477f;
    cursor: pointer;
}

body form button:nth-child(7) {
    background-color: #04477f;
    border: none;
    border-radius: 0.2em;
    color: white;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    padding: 1em;
}






/*VERHALEN*/

main {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    font-family: 'Source Sans Pro', sans-serif;
    justify-content: center;
}

main article {
    background-color: white;
    border-radius: 0.3em 0.3em 0.3em 0.3em;
    box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.15);
    display: block;
    float: left;
    margin-top: 2em;
    width: 22%;
}

main article:nth-child(4) {
    margin-top: 1em;
}

main article:nth-child(5) {
    margin-top: 1em;
}

main article:nth-child(6) {
    margin-top: 1em;
}

main article img {
    border-radius: 0.3em 0.3em 0 0;
    width: 100%;
}

h3 {
    border-bottom: 0.1em solid #e52231;
    font-size: 1.5em;
    margin: 1em 0.5em;
    padding-bottom: 0.5em;
    width: 85%;
}

h4 {
    font-size: 1.3em;
    margin: 0;
    padding: 0 14% 0 14%;
    width: 72%;
}

main article span label {
    align-items: center;
    display: flex;
    margin: 0 1em 1em 1em;
}

main article span label b {
    padding-right: 0.3em;
}

main article nav ul li {
    list-style-type: none;
}

main article nav ul li a img {
    float: right;
    margin: 1em 0 1em 0;
    padding: 0 2em 0 0;
    width: 2em;
}






/*FOOTER*/

body footer {
    background-color: white;
    grid-area: footer;
    margin: 1em 0 0 0;
    padding: 1em;
}






/*Verhaal87.html*/

.verhaal87 main img:nth-child(1) {
    display: flex;
    margin-top: 1em;
    width: 100%;
}

.verhaal87 main img:nth-child(2) {
    display: flex;
    margin-top: 1em;
    width: 100%;
}

.verhaal87 main img:nth-child(3) {
    display: flex;
    margin-top: 1em;
    width: 100%;
}

.verhaal87 main img:nth-child(4) {
    display: flex;
    margin-top: 1em;
    width: 100%;
}

.verhaal87 footer nav ul {
    align-items: center;
    display: flex;
    height: 4.5em;
    justify-content: space-between;
    list-style-type: none;
    margin: 0;
    padding: 0 14% 0 14%;
    width: 72%;
}

.verhaal87 footer nav ul li {
    list-style-type: none;
    margin: 0 1em;
}

.verhaal87 footer nav ul li:first-child {
    margin-right: auto;
}

.verhaal87 footer nav ul li img:nth-child(1) {
    background-color: white;
    padding: 0;
    width: 2em;
}

.verhaal87 footer {
    background-color: white;
    bottom: 0;
    font-size: 1.5em;
    grid-area: footer;
    left: 0;
    margin: 1em 0 0 0;
    padding: 0;
    position: fixed;
    text-align: center;
    width: 100%;
}






/*profiel.html*/

.profiel main img {
	height: 30%;
	margin-top: 1em;
	margin: 1em 20em;
	width: 100%;
 }






/*Microinteracties*/

/*Favorieten van verhaal*/
#favorieten:hover {
    -webkit-transform: scale(1.75);
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease-out;
    -moz-transform: scale(1.75);
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: ease-out;
    transition-delay: 0.5s;
}

#notificatie:hover {
    -webkit-transform: scale(1.5);
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease-out;
    -moz-transform: scale(1.5);
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: ease-out;
    transition-delay: 0.5s;
}

/* Reactie achterlaten */
/*Reactie achter laten popup, bron: https://www.w3schools.com/howto/howto_css_modals.asp*/
.popup {
	background-color: rgba(0, 0, 0, 0, 0.4);
	display: none;
	height: 100%;
	overflow: auto;
	padding-top: 5em;
	position: fixed;
	width: 100%;
 }

.popup-content {
	-moz-animation-duration: 0.4s;
	-moz-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	-webkit-animation-name: animatetop;
	animation-duration: 0.4s;
	animation-name: animatetop;
	background-color: #fefefe;
	border-radius: 0.3em;
	box-shadow: 0 0.2em 0.4em 0 rgba(0, 0, 0, 0.2), 0 0.3em 1em 0 rgba(0, 0, 0, 0.19);
	margin: auto;
	padding: 1em 2em 1em 0;
	position: relative;
	width: 40%;
 }

@-webkit-keyframes animatetop {
    from {
        top: -15em;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -15em;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

.sluiten {
    color: #04477f;
    float: right;
    font-size: 3em;
    font-weight: bold;
}

.sluiten:hover, .sluiten:focus {
    cursor: pointer;
    text-decoration: none;
}

body div:first-of-type div div:nth-child(1) h3 {
    color: #12689e;
    margin: 0 0 0 1em;
}

body div:first-of-type div div:nth-child(2) p {
    color: #12689e;
    font-size: 1em;
    font-weight: bold;
    margin: 1em 0 1em 1.5em;
}

body div:first-of-type div div:nth-child(2) img {
    margin: 0 0 1em 0;
    width: 3em;
}

body div:first-of-type div div:nth-child(2) img:nth-child(2) {
    margin: 0 0 1em 1.5em;
    width: 3em;
}

body div:first-of-type div div:nth-child(2) textarea {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1em;
    color: #04477f; 
    height: 10em;
    width: 20em;
    margin: 1em 0 0 1.5em;
}

body div:first-of-type div div:nth-child(3) button {
    align-items: right;
    background-color: #04477f;
    border: none;
    border-radius: 0.2em;
    color: white;
    display: flex;
    font-size: 1em;
    font-weight: 600;
    justify-content: space-between;
    margin: 2em 1em 0 1.5em;
    padding: 1em;
    width: 13em;
}

body div:first-of-type div div:nth-child(3) button:hover {
    background-color: #d4effc;
    color: #04477f;
    cursor: pointer;
}

body div:first-of-type div div:nth-child(3) button img {
    padding: 0 0 0 0.5em;
    width: 1.3em;
}







/*MEDIAQUERY'S*/

@media (min-width: 20em) {

    body nav:nth-child(1) ul {
        padding: 0;
        width: 100%;
    }

    body main button:nth-child(1) {
        margin-right: 3em;
        min-width: 16em;
    }

    body main {
        flex-direction: row;
        justify-content: space-between;
        margin: 0 auto;
        width: 95%;
    }

    body main article {
        width: 100%;
    }

    body main div {
        width: 100%;
    }

    body main form div button:nth-child(1) {
        min-width: 10em;
    }

    h1 {
        margin: 1.5em 1em 0.5em 0.5em;
    }

    header button {
        margin: 0.5em 1em 1em 2em;
    }

    main article:nth-child(4) {
        margin-top: 1em;
    }

    main article:nth-child(5) {
        margin-top: 2em;
    }

    main article:nth-child(6) {
        margin-top: 2em;
    }

    .popup-content {
        width: 70%;
    }
    
    body div:first-of-type div div:nth-child(2) textarea {
        width: 23em;
    }
}

@media (min-width: 40em) {

    body nav:nth-child(1) ul {
        padding: 0;
        width: 100%;
    }

    body main button:nth-child(1) {
        margin-right: 20em;
        min-width: 16em;
    }

    body main {
        flex-direction: row;
        justify-content: space-between;
        margin: 0 auto;
        width: 95%;
    }

    body main article {
        width: 48%;
    }

    body main form {
        width: 100%;
    }

    body main form div button:nth-child(1) {
        min-width: 10em;
    }

    h1 {
        margin: 1.5em 1em 0.5em 0.5em;
    }

    header button {
        margin: 0.5em 1em 1em 1em;
    }

    main article:nth-child(4) {
        margin-top: 1em;
    }

    main article:nth-child(5) {
        margin-top: 1em;
    }

    main article:nth-child(6) {
        margin-top: 2em;
    }
    
    .popup-content {
        width: 55%;
    }

    body div:first-of-type div div:nth-child(2) textarea {
        width: 18em;
    }
}

@media (min-width: 60em) {

    body nav:nth-child(1) ul {
        padding: 0 14% 0 14%;
        width: 72%;
    }

    body main button:nth-child(1) {
        margin-right: 50em;
        min-width: 16em;
    }

    body main form {
        width: 100%;
    }

    body main {
        width: 72%;
    }

    body main article {
        width: 31.5%;
    }

    body main form div button:nth-child(1) {
        min-width: 10em;
    }

    h1 {
        margin: 2em 1em 2em 1em;
    }

    header button {
        margin: 3em 1em 2.5em 1em;
    }

    main article:nth-child(4) {
        margin-top: 1em;
    }

    main article:nth-child(5) {
        margin-top: 1em;
    }

    main article:nth-child(6) {
        margin-top: 1em;
    }

    .popup-content {
        width: 40%;
    }
    
    body div:first-of-type div div:nth-child(2) textarea {
        width: 20em;
    }
}