/* GENERAL */


/*HEADER */

/* branding */
.logo{
    width:200px;
}

.logo img{
    width:100%;
}


/* CONTENT */

.test-app{
    display:flex;
    width:100%;
    height:600px;
    background-image: url(../img/phone.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}


.screen{
    position: relative;
    width:255px;
    height:550px;
    margin:18px auto;
    z-index: -1;
    background-image: url(../img/HOME.png);
    background-size: contain;
}

.screen.active-menu{
    background-image: url(../img/MENU.png);
}

.screen.active-fav{
    background-image: url(../img/MENU%20FAVORIS.png);
}

.screen.active-profil{
    background-image: url(../img/MENU%20PROFIL.png);
}


.elements{
    width:254px;
    height:550px;
    z-index: 1;
    position:absolute;
    left:50%;
    margin-left:-127px;
    margin-top:15px;    
}

.top{
    display: flex;
    flex-direction: row;
    height:30px;
    margin-top:20px;

}

.menu{
    width:30px;
    height:30px;
    margin-left:15px;
    border: solid 1px green;
}


.profil{
    width:30px;
    height:30px;
    margin-left:160px;
    border: 2px solid purple;
    
}

.favoris{
    width:30px;
    height:30px;
    margin-top:452px;
    margin-left:207px;
    border:2px solid pink;
}

.menu-elements div{
    border:2px solid red;
    width:30px;
    height:30px;
}