@media screen and (max-width: 1600px) {

}

@media screen and (max-width: 1440px) {

}

@media screen and (max-width: 1366px) {

}

@media screen and (max-width: 1196px) {
    div.streak-level { left: 700px;}
}


@media screen and (max-width: 1024px) {
    
    div.streak-level {left: initial; right: 320px;}
    h1 {margin:30px 0;}
    div.streakstory div.inner {width: calc(100% - 40px);}
}

@media screen and (max-width: 1023px) {
 
}

@media screen and (max-width: 820px) {
  
    

}

@media screen and (max-width: 800px) {

   
}

@media screen and (max-width: 768px) {

}


@media screen and (max-width: 767px) {
    div.select.level, div.select.periode {width:100px;}
    ul.takenlijst div.grid-2 {display:block;}
    div#smartboard div.inner { grid-template-columns: repeat(1, 1fr); display: grid;row-gap: 30px;}
    ul.progression {grid-template-columns: repeat(1, 1fr);row-gap: 60px;}
    ul.progression li {margin: 0 40px 40px 0;}
    ul.progression.deelnemer { margin: 60px 0 0px;}
    div.trajectinfo {display:block;}
    div.traject-container.switchtraject div.select { margin: 0 0 20px;}
}

@media screen and (max-width: 680px) {

   
}

@media screen and (max-width: 600px) {

}

@media screen and (max-width: 540px) {
  
}

@media screen and (max-width: 480px) {
body {font-size:18px;}
h1 { margin: 60px 0 30px;line-height: 1.2rem;}
div.streak-level {top: 40px; left: 20px; right: 0;}
div.newcomer h1 {margin: 80px 0 30px;}
ul.takenlijst span.tag, ul.takenlijst span.taakscore {position:initial;display:inline-block;}
ul.takenlijst span.title {width: 100%; margin: 20px 0 0;padding: 0 0 0 30px;}
ul.takenlijst span.title:after {left:0;}
}

@media screen and (max-width: 414px) {

}

@media screen and (max-width: 375px) {

}

@media screen and (max-width: 360px) {
 
}

@media screen and (max-width: 320px) {
    

}