/*General styling */

body { background-color: #E6E6E9; font-family: Segoe UI;}
h1,h2,h3,h4,button,legend{ font-weight: 100;}
body a{ color: #233974; text-decoration: none;}
body{ margin: 0;}
header { background-color: #fff; padding: 1em; display: flex; justify-content: space-between; }
header a { color: #0079d3; font-weight: 100; font-size: 1em; padding: .2em;}
body a:hover{ color: #98cbdb; text-decoration: underline;}
header nav a:first-child:hover,header a:hover{ color: #000; text-decoration: underline;}
header a:nth-child(1) { background-color: unset; }
body a:active{ outline: none;}
button:focus, input:focus,a:focus{ outline: dotted 2px}
button {
    margin: 1em auto 0 auto;
    background-color: #2575bb;
    padding: .5em 2em;
    color: #fff;
    font-size: 1em;
    border: 0.125em solid transparent;
    transition: 300ms;
    border-bottom: 2px solid #1a5d8f;
    display: block;
}
button:hover{ background-color:#FFC917; color: #000; border: 2px solid #000}

/*index*/

#index section:nth-child(2) {
    height: 20em;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("images/banners/banner.jpg");
}
#index main button { width: 15em;}
#index main label { color: #223a72; font-weight: 600; }
#index main {
    background-color: #FFC917;
    padding: 2em;
    position: relative;
    top: -4em;
    border-bottom: 3px solid #d0b25f;
    width: 30em;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: center;
}
#index main h1 { margin: 0; background-color: #ffd346; }
#index main input {
  margin: 2em 0;
  height: 3em;
  border: none;
  border-bottom: 2px solid #000;
  width: 8em;
}

#index section div{ display: flex; margin-bottom: 7em;}
#index h2{ text-align: center; margin-bottom: 2em;}
#index article {
    width: 25%;
    margin: 0 1em;
    background-color: #fff;
    border-bottom: 4px solid #a5a4a4;
    position: relative;
    padding: 0 2em 3em 2em;
    box-sizing: border-box;
}
#index article:first-child { border-bottom: 15px solid #223a72; }
#index article:nth-child(2) { border-bottom: 12px solid #223a72; }
#index article:nth-child(3) { border-bottom: 9px solid #223a72; }
#index article:nth-child(4) { border-bottom: 6px solid #223a72; }
#index article img {
    height: 7em;
    color: #233974;
    width: calc(100% + 4em);
    margin-left: -2em;
    margin-bottom: 1em;
}
#index article button {
    top: .5em;
    right: .5em;
    width: 2em;
    position: absolute;
    background-image: url("images/features/ster.png");
    height: 2em;
    background-size: cover;
    background-color: transparent;
    margin: 0;
    border: none;
    display: unset;
    padding: 0;
    color: #000;
}
#index article .fav{ background-image: url("images/features/ster2.png") !important; }

/*login*/

#login h1 { position: absolute; top: 0em; left: 2em; color: #223a72; }
#login legend { color: #223a72; font-size: 1.5em; margin: 1em; }
#login header{ background-color: transparent;}
#login label { display: block; color: #223a72;}
#login span { display: inline-block; width: 7em; }
#login fieldset { border: none; padding: 2em; }
#login main { background-color: #FFC917; width: 30em; }
#login section {
    display: flex;
    justify-content: center;
    background: #fff;
    margin: 2em auto;
    width: 60em;
    padding: 6em 0;
    position: relative;
}
#login #bevestig{ transition: 400ms; opacity: 0; height: 0;}
#login .checked{ opacity: 1 !important; height: 4em !important;} /* Een important class kan je wel zeggen :) */
#login #bevestig input:valid { background-color: #fff; }
#login input { padding: .7em 1em; margin: 1em 0 2em 0; border: none; border-bottom: 2px solid #a5a4a4; }
#login label > input:valid{ background-color: #7BF77B;}
#login .submit {
    background-color: #0079d3;
    border: 1px solid transparent;
    padding: .7em 2em;
    color: #fff;
    font-size: 1em;
    transition: .5s;
    margin-top: 3em;
}
#login .submit:hover{ background-color: #ffc917; border-color: #000; color: #000; }

/*filters*/

#filter section:nth-child(2) {
    height: 14em;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("images/banners/reading.jpg");
}
#filter h1{ text-align: center;}
#filter h2{ text-align: center; width: 100%; margin-top: 3em;}
#filter main,#filter section:nth-child(5) { display: flex; flex-wrap: wrap; width: 60em; margin: auto; }
#filter button{ background-color: #233974; flex: 1 0 20%; margin: 1em; height: 5em;}
#filter button:hover{ color: #ffc917; text-decoration: underline; text-decoration-color: #ffc917;}
#filter .keuze{ color: #ffc917; text-decoration: underline; text-decoration-color: #ffc917; border: 2px solid #ffc917;}
#filter section:nth-child(5) a {
    padding: 1.5em;
    background-color: #ffc917;
    color: #000;
    flex: 0 1 100%;
    margin: 1em;
    text-align: center;
    transition: 300ms;
}
#filter section:nth-child(5) a:hover{ background-color: #233974; color: #ffc917;}

/*Verhalenlijst*/

#lijst section:nth-child(2) {
    height: 14em;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("images/banners/book.jpg");
}
#lijst h1{ text-align: center;}
#lijst main{ display: flex; justify-content: center;}
#list #del, #list2 #del2 {
    position: absolute;
    top: 1em;
    right: 1em;
    height: 2em;
    transition: 300ms;
}
#list #del:hover, #list2 #del2:hover{ height: 2.5em;}
#list button { display: unset; background: none; border: none; padding: 0; margin: 0; }
#lijst section a:nth-child(3),#lijst main a {
    padding: 1.5em;
    background-color: #233974;
    color: #fff;
    width: 10em;
    margin: 1em;
    text-align: center;
    transition: 300ms;
    border-bottom: 4px solid transparent;
}
#lijst section a:nth-child(3), #lijst main a:first-child {
    background-color: #ffc917;
    color: #000;
    border-bottom: 4px solid #d7a507;
}
#lijst section a:nth-child(3):hover{ background-color: #233974; border-color: #2565bb; color: #fff;}
#lijst main a:hover{ background-color: #2575bb; border-color: #233974; }
#lijst section:nth-child(5), #lijst section:nth-child(6) {
    display: flex;
    justify-content: center;
    margin-top: 5em;
    align-items: center;
    transition: 300ms;
    position: relative;
}
#lijst section article {
    background-color: #fff;
    width: 25em;
    position: absolute;
    right: 5em;
    top: 2em;
    padding: 1em;
}
#lijst section article h3 { margin: 0; }
#lijst .deleted {
    opacity: 0;
    height: 0em;
}
#lijst main .saved{ color: #0baa0b; background-color: #fff; border-bottom: 4px solid #0baa0b;}
#lijst main .saved:hover{ color: #0baa0b; background-color: #fff; border-bottom: 4px solid #0baa0b;}
#lijst section div {
    position: relative;
    height: 15em;
    width: 60em;
    margin: 0 5em;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("images/verhalen/droom.jpg");
    border-bottom: 4px solid #a5a4a4;
}
#lijst section:nth-child(6) div { background-image: url("images/verhalen/stoned.jpg"); }
#lijst section p:first-child { font-size: 10em; margin: 0;}

/*lijsten download */

#lijst section  .nodownload { opacity: 0; transition: 300ms;}
#lijst section .download { opacity: 1; margin: 0 2em; }

/* notification blink */
.blink{
  animation: blink 1s linear infinite;
  background-color: #FFC917;
  color: #000;
}
@keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}

/* Media queries */

@media (max-width:62em) {

  #index section div { flex-wrap: wrap; justify-content: space-evenly; }
  #index article { box-sizing: border-box; width: 45%; margin: 0 0 1em 0; }
  div:nth-child(4) { display: unset; }


  #login section{ width: 90%; }

  #filter main, #filter section:nth-child(5) { width: 90%; }

  #lijst section:nth-child(5),#lijst section:nth-child(6) { flex-direction: column; }
  #lijst section article{ right: 1em;}
  #lijst section div{ margin: 0; width: 100%;}
  #lijst section p:first-child { font-size: 5em;}

}
@media (max-width:50em) {

  #index section:nth-child(2) {background-image: url("images/banners/banners.jpg"); height: 15em;}
  #filter section:nth-child(2){ display: none;}
  #filter button { flex: 1 0 30%;}
  #filter h2{ margin-top: 2em;}

}

@media (max-width:30em) {

  #index section:nth-child(5),#index section div { justify-content: center; }
  #index article {  width:90%; }
  #index section:nth-child(2){ background-position: unset;}
  #index main{ width: 90%;}
  #index main h1{ font-size: 2em;}
  body main { top: unset; margin: 2em auto; }

  #login section{ width: 90%; }
  #login main{ width: 90%;}
  #login h1 { left: 1em; }
  #login legend { margin: 1em 0 0 0; }

  #filter button { flex: 1 0 39%; margin: .2em; height: 4em; }
  #filter h2{ margin-top: 1em;}

  #lijst section article { width: 70%; right: 2em; }
  #lijst section:nth-child(5){ margin-top: 2em;}
  #lijst section p:first-child{ display: none;}

  header a{ font-size: .9em; }
}