* {
    border: 0;margin: 0; padding: 0; box-sizing: border-box;
}

body {
    background-color: #2E3840; font-family: Verdana;
}

/* color pallete
    #4E6E81
    #F9DBBB
    #FF0303
    #2E3840 
    */

 #container {
    width: 1400px; height: 900px; border: 4px solid #222;
    border-radius: 4px; background-color: #fff;
    margin: 20px auto;
    background-image: url(/images/phoneframes.png);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
 }

 #mainbutton {
    position: absolute; top: 0; left: -105px;
    width: 100px; height: 100px;
 }

 #phone1,  #phone2, #phone3 {
    width: 300px; height: 700px;
    position: absolute;
    overflow: hidden;
 }

 header{
    background-color: #FF0303;
    height: 60px;
    position: relative;
    z-index: 10;
 }

 header button{
    position: absolute; top: 4px; right: 12px;
    width: 50px; height: 50px;
    border: 1px solid #000;
    border-radius: 5px;
    
 }

 nav.mobilemenu li{
    outline: 1px solid #000;
    list-style-type: none;
    height: 56px;
 }

 nav.mobilemenu a{
   color: #f1e8e8;
    display: block;
    height: 100%; 
    font-size: 35px;
    text-decoration: none;
    line-height: 54px;
    text-indent: .5em;
 }

/*--------------unique styles for phone frame #1 -----------------------*/

 #phone1 {
    top: 70px; left: 70px;
    width: 378px; height: 790px;
    border-radius: 0px 0px 42px 43px;
 }

#phone1 nav.mobilemenu {
    background-color: #4E6E81;
    width: 100%;
    position: relative;
    transition: left 1s ease-in-out;
}

#phone1 nav.mmclosed {
    position: absolute; top: 60px; left: -600px;
}

#phone1 nav.mmopen {
    position: absolute; top: 60px; left: 0px;
}

#button1 {
   background-image: url(/images/icons/menu222.svg);
   background-position: center;
   background-size: cover;
}


 
/*--------------unique styles for phone frame #2 -----------------------*/

 #phone2 {
    top: 110px; left: 616px;
    width: 315px; height: 558px;
 }

 #phone2 nav a span{
    display: none;
 }

 #phone2 nav.mobilemenu {
   background-color: #146CF6;
   width: 100%;
   transition: top .8s ease-in-out;
}

#phone2 nav.mmclosed {
   position: absolute; top: -600px; left: 0px;
}

#phone2 nav.mmopen {
   position: absolute; top: 60px; left: 0px;
}

#button2 {
   background-image: url(/images/icons/menu222.svg);
   background-position: center;
   background-size: cover;
}

/*--------------unique styles for phone frame #3 -----------------------*/

 #phone3 {
    top: 110px; left: 1096px;
    width: 226px; height: 396px;
 }

 #phone3 nav a span{
    display: none;
 }

 #phone3 nav.mobilemenu {
   background-color: #00D4B0;
   
   transition: top .7s ease-in-out;
}

#phone3 nav.mmclosed {
   position: absolute; top: -600px; left: 0px;
   width: 100%;
}

#phone3 li{
   transition: transform .5s ease-in-out .7s;
}

#phone3 .mmclosed li{
   transform: translateX(-500px);
}

#phone3 nav.mmopen {
   position: absolute; top: 60px; left: 0px;
   width: 100%;
}

#phone3 .mmopen li{
   transform: translateX(0px);
}



#button3 {
   background-image: url(/images/icons/menu222.svg);
   background-position: center;
   background-size: cover;
}