/* breedte van de telefoon aanpassen */
/* laat de min-height staan zodat je kunt scrollen indien nodig */
body {
    box-sizing: border-box;
    max-width: 320px;
    min-height: 100vh;
    margin: 0 auto;
    background-color: #333333
}

/* geen witruimte & afbeeldingen centreren*/
img {
    display: block;
    margin: 0 auto;
}

/* de class .horizontal zet elementen binnen dat element naast elkaar */
.horizontal {
    display: flex;
    flex-direction: row;
}

/* de class .horizontal zet elementen binnen dat element onder elkaar */
.vertical {
    display: flex;
    flex-direction: column;
}

/* met de class .flex kun je één element alle overige ruimte in laten nemen */
.flex {
    flex-grow: 1;
}

/* met de class .space-between verdeel je de overige ruimte tussen de elementen */
.space-between {
    justify-content: space-between;
}

/* om de onderkant vast te zetten aan de pagina,
gebruik .bottom-fixed op de body en .fixed-bottom het element dat in beeld moet blijven */
body.bottom-fixed {
    padding-bottom: 60px;
}

*.fixed-bottom {
    position: fixed;
    bottom: 0;
}

/* om de bovenkant vast te zetten aan de pagina,
gebruik .top-fixed op de body en .fixed-top het element dat in beeld moet blijven */
body.top-fixed {
    padding-top: 60px;
}

*.fixed-top {
    position: fixed;
    top: 0;
}







.laadscherm {
    width: 320px;
    height: 568px;
}

.inlogscherm {
    width: 320px;
    height: 568px;
}

.registreer {
    width: 320px;
    height: 568px;
}

.registreersquare {
    position: absolute;
    width: 200px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -165px;
    margin-left: 60px;
}

.loginsquare {
    position: absolute;
    width: 200px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -230px;
    margin-left: 60px;
}

.terug1square {
    position: absolute;
    width: 150px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -69px;
    margin-left: 13px;
}

.verder1square {
    position: absolute;
    width: 150px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -69px;
    margin-left: 160px;
}

.terug2square {
    position: absolute;
    width: 150px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -69px;
    margin-left: 13px;
}

.verder2square {
    position: absolute;
    width: 150px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -69px;
    margin-left: 160px;
}

.terug3square {
    position: absolute;
    width: 150px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -69px;
    margin-left: 13px;
}

.verder3square {
    position: absolute;
    width: 150px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -69px;
    margin-left: 160px;
}

.i_home {
    width: 320px;
    height: auto;
}

.menu {
    width: 320px;
    height: auto;
    position: fixed;
    bottom: 0;
}

.scherm {
    width: 320px;
    height: auto;
}

.videoalanwalker {
    width: 80%;
    position: absolute;
    margin-top: -368px;
    margin-left: 20px
}

.videodualipa {
    width: 80%;
    position: absolute;
    margin-top: -375px;
    margin-left: 20px
}

.video80skaraoke {
    width: 80%;
    position: absolute;
    margin-top: -320px;
    margin-left: 20px
}

.i_home_alanwalkersquare {
    position: absolute;
    width: 130px;
    height: 150px;
    background-color: white;
    opacity: 0;
    margin-top: -690px;
    margin-left: 0px;
}

.i_home_alanwalkersquare2 {
    position: absolute;
    width: 320px;
    height: 150px;
    background-color: white;
    opacity: 0;
    margin-top: -495px;
    margin-left: 0px;
}

.i_home_dualipasquare {
    position: absolute;
    width: 320px;
    height: 150px;
    background-color: white;
    opacity: 0;
    margin-top: -345px;
    margin-left: 0px;
}

.i_home_80skaraokesquare {
    position: absolute;
    width: 320px;
    height: 150px;
    background-color: white;
    opacity: 0;
    margin-top: -195px;
    margin-left: 0px;
}

.alanwalkerterugsquare {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -825px;
    margin-left: 0px;
}

.dualipaterugsquare {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -945px;
    margin-left: 0px;
}

.karaoketerugsquare {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -710px;
    margin-left: 0px;
}

.alanwalkergaatsquare {
    position: absolute;
    width: 320px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -660px;
    margin-left: 0px;
}

.alanwalkergaatnietsquare {
    position: absolute;
    width: 320px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -660px;
    margin-left: 0px;
}

.i_kalender_maandagquare {
    position: absolute;
    width: 40px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -520px;
    margin-left: 0px;
}

.i_kalender_dinsdagquare {
    position: absolute;
    width: 40px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -520px;
    margin-left: 40px;
}

.i_kalender_woensdagquare {
    position: absolute;
    width: 40px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -520px;
    margin-left: 90px;
}

.i_kalender_donderdagquare {
    position: absolute;
    width: 40px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -520px;
    margin-left: 140px;
}

.i_kalender_vrijdagquare {
    position: absolute;
    width: 40px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -520px;
    margin-left: 190px;
}

.i_kalender_zaterdagquare {
    position: absolute;
    width: 40px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -520px;
    margin-left: 240px;
}

.i_kalender_zondagquare {
    position: absolute;
    width: 40px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -520px;
    margin-left: 280px;
}

.i_kalender_alanwalkersquare {
    position: absolute;
    width: 320px;
    height: 85px;
    background-color: white;
    opacity: 0;
    margin-top: -310px;
    margin-left: 0px;
}

.i_kalender_alanwalkerterugsquare {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -825px;
    margin-left: 0px;
}

.i_kalender_dualipasquare {
    position: absolute;
    width: 320px;
    height: 85px;
    background-color: white;
    opacity: 0;
    margin-top: -380px;
    margin-left: 0px;
}

.i_kalender_dualipaterugsquare {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -945px;
    margin-left: 0px;
}

.i_kalender_80skaraokesquare {
    position: absolute;
    width: 320px;
    height: 85px;
    background-color: white;
    opacity: 0;
    margin-top: -310px;
    margin-left: 0px;
}

.i_kalender_80skaraoketerugsquare {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -710px;
    margin-left: 0px;
}

.i_zoeken_zoekknop_square {
    position: absolute;
    width: 200px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -106px;
    margin-left: 50px;
}

.i_zoeken_80skaraokesquare {
    position: absolute;
    width: 320px;
    height: 150px;
    background-color: white;
    opacity: 0;
    margin-top: -445px;
    margin-left: 0px;
}

.i_zoeken_dualipasquare {
    position: absolute;
    width: 320px;
    height: 150px;
    background-color: white;
    opacity: 0;
    margin-top: -295px;
    margin-left: 0px;
}

.i_zoeken_80skaraoketerugsquare {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -710px;
    margin-left: 0px;
}

.i_zoeken_dualipaterugsquare {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -945px;
    margin-left: 0px;
}

.i_zoeken_terugsquare {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-top: -565px;
    margin-left: 0px;
}

.i_favorieten_alanwalkersquare {
    position: absolute;
    width: 320px;
    height: 150px;
    background-color: white;
    opacity: 0;
    margin-top: -495px;
    margin-left: 0px;
}

.i_profiel_alanwalkersquare {
    position: absolute;
    width: 150px;
    height: 150px;
    background-color: white;
    opacity: 0;
    margin-top: -415px;
    margin-left: 0px;
}

.i_homemenusquare {
    position: fixed;
    bottom: 0;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-left: 0px;
}


.i_kalendermenusquare {
    position: fixed;
    bottom: 0;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-left: 70px
}

.i_zoekenmenusquare {
    position: fixed;
    bottom: 0;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-left: 135px
}

.i_favorietenmenusquare {
    position: fixed;
    bottom: 0;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-left: 200px
}

.i_profielmenusquare {
    position: fixed;
    bottom: 0;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-left: 265px
}

.uitlogsquare {
    position: fixed;
    width: 50px;
    height: 50px;
    background-color: white;
    opacity: 0;
    margin-left: 270px;
    margin-top: -770px;
}