html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden; // hide vertical
        backface-visibility: hidden;
      }

      #map {
        height: 100%;
        z-index: 1;
        overflow: hidden;
      }

      #wrapper{
        height: 100vh;
        width: 100%;
        overflow: hidden;
      }

      .blueButton{
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: rgb(61,135,213);
        border: 1px solid rgb(61,135,213);
        z-index: 10;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center; /* Safari 6.1+ */
        justify-content: center;
        text-decoration: none;
        transition: 0.3s linear;
      }

      .blueButton:hover{
        background-color: white;
      }

      .blueButton:hover > .blueIcon{
        color: rgb(61,135,213);
      }

      .blueIcon{
        color: white;
        font-size: 20px;
        transition: 0.3s linear;
      }

      #menuButton{
        position: absolute;
        right: 20px;
        top: 20px;
      }
      #eventListButton{
        position: absolute;
        right: 90px;
        top: 20px;
      }

      #addEventMenuButton{
        position: absolute;
        right: 20px;
        top: 20px;
      }

      #addFriendButton{
        position: absolute;
        top: 20px;
        right: 20px;
      }

      .blueButton:hover > .blueIcon{
        color: rgb(61,135,213);
      }


      #addEventBar{
        height: 100%;
        width: 400px;
        max-width: 100vh;
        position: absolute;
        overflow-y: visible;
        left: 0;
        top: 0;
        z-index: 4;
        background-color: rgb(250,250,250);
        display: block;
        -webkit-transform: translateX(-500px);
        transform: translateX(-500px);
        transition: 0.4s linear;
      }

      #addEventBar > h1{
        display: block;
        position: relative;
        padding: 0;
        margin-top: 30px;
        margin-left: 20px;
        font-size: 30px;
        font-family: "Roboto";
        font-weight: 300;
        color: rgb(20,20,20);
      }

      #friendList{
        min-height: 100%;
        width: 400px;
        max-width: 100vh;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 4;
        background-color: rgb(250,250,250);
        -webkit-transform: translateX(-500px);
        transform: translateX(-500px);
        display: block;
        transition: 0.4s linear;
        overflow-x: visible;
      }

      #friendList > h1{
        display: block;
        position: relative;
        padding: 0;
        margin-top: 30px;
        margin-left: 20px;
        font-size: 30px;
        font-family: "Roboto";
        font-weight: 300;
        color: rgb(20,20,20);
      }

      #eventList{
        min-height: 100%;
        width: 400px;
        max-width: 100vh;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 4;
        -webkit-transform: translateX(-500px);
        transform: translateX(-500px);
        background-color: rgb(250,250,250);
        display: block;
        transition: 0.4s linear;
      }

      #eventList > h1{
        display: block;
        position: relative;
        padding: 0;
        margin-top: 30px;
        margin-left: 20px;
        font-size: 30px;
        font-family: "Roboto";
        font-weight: 300;
        color: rgb(20,20,20);
      }

      #friends{
        display: block;
        margin-top: 25px;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column; /* Safari 6.1+ */
        flex-direction: column;
      }

      .friend{
        width: 100%;
        height: 80px;
        background-color: white;
        border-radius: 3px;
        margin-top: 2px;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        transition: 0.2s linear;
        text-decoration: none;
      }

      .friend:hover{
        cursor: pointer;
        transform: scale(1.05);
        box-shadow: 2px 3px 10px 1px rgb(220,220,220);
      }

      .friend:hover > h2{
        color: rgb(61,135,213);
      }

      #events{
        display: block;
        margin-top: 25px;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column; /* Safari 6.1+ */
        flex-direction: column;
      }

      .event{
        width: 100%;
        height: 80px;
        background-color: white;
        margin-top: 2px;
        border-radius: 3px;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex;
        display: flex;
        transition: 0.2s linear;
        -webkit-box-align: center;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .event:hover{
        cursor: pointer;
        transform: scale(1.05);
        box-shadow: 2px 3px 10px 1px rgb(220,220,220);
      }

      .event:hover > h2{
        color: rgb(61,135,213);
      }

      .inviteFriendButton{
        margin-right: 20px;
        margin-left: auto;
        height: 35px;
        width: 35px;
        background-color: white;
      }

      .inviteFriendIcon{
        font-size: 16px;
        color: rgb(61,135,213);
      }

      .inviteFriendButton:hover{
        background-color: rgb(61,135,213);
      }

      .inviteFriendButton:hover > .inviteFriendIcon{
        color: white;
      }

      .checkFriendsEventsButton{
        margin-right: 20px;
        margin-left: auto;
        height: 35px;
        width: 35px;
        background-color: white;
      }

      .friendsEventsIcon{
        font-size: 16px;
        color: rgb(61,135,213);
      }

      .checkFriendsEventsButton:hover{
        background-color: rgb(61,135,213);
      }

      .checkFriendsEventsButton:hover > .friendsEventsIcon{
        color: white;
      }

      .avatar{
        height: 60px;
        width: 60px;
        border-radius: 50%;
        background-color: rgb(230,230,230);
        margin-left: 20px;
        background-size: cover;
        background-position: center center;
      }

      .erikImg{
        background-image: url("images/erik.jpg");
      }

      .stevenImg{
        background-image: url("images/steven.jpg");
      }

      .iremImg{
        background-image: url("images/irem.jpg");
      }

      .andreaImg{
        background-image: url("images/andrea.jpg");
      }

      .abhaImg{
        background-image: url("images/abha.jpg");
      }

      .chocolateImg{
        background-image: url("images/chocolate.jpg");
      }

      .friend > h2{
        margin-left: 30px;
        font-family: "Roboto";
        color: rgb(40,40,40);
        font-weight: 300;
        transition: 0.2s linear;
      }      

      .event > h2{
        margin-left: 30px;
        font-family: "Roboto";
        color: rgb(40,40,40);
        font-weight: 300;
      }     

      #eventWrapper{
        padding: 20px 0 20px 0;
        width: 100%;
        max-height: 100vh;
        background: linear-gradient(to bottom, transparent 14%, rgb(245,245,245) 0);
        transition: 0.4s linear;
        z-index: 2;
        position: absolute;
        bottom: 0;
        -webkit-transform: translateY(600px);
        transform: translateY(600px);
      }


      #navbar{
        position: fixed;
        width: 80px;
        height: 80px;
        border-radius: 4px;
        background-color: rgba(61,135,213, 0.4);
        bottom: 20px;
        right: 20px;
        border-radius: 50%;
        z-index: 2;
        text-align: center;

        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center; /* Safari 6.1+ */
        justify-content: center;
        border: 1px solid rgb(61,135,213);
        cursor: default;
      }

      #navbar > strong{
        margin: auto;
        font-family: "Oswald";
        font-weight: 300;
        font-size: 28px;
        letter-spacing: 2px;
        color: rgb(61,135,213);
        display: block;
      }

      #eventImg{
        padding: 0;
        margin: 20px auto 0 auto;
        width: 100px;
        height: 100px;
        background-color: rgb(240,240,240);
        border-radius: 50%;
        background-size: cover;
        background-position: center center;
      }

      #eventCard{
        font-weight: 300;
        font-family: "Roboto";
        padding: 20px 0 20px 0;
        position: relative;
        margin: auto auto auto auto;
        width: 500px;
        max-width: 1000px;
        min-height: 200px;
        background-color: white;
        border-radius: 3px;
        text-align: center;
        box-shadow: 2px 3px 10px 1px rgb(220,220,220);
      }


      #eventName{
        padding: 0;
        display: block;
        margin: 20px auto 0 auto;
        font-size: 30px;
        color: rgb(40,40,40);
      }

      #eventDescription{
        margin: 10px auto 10px;
        font-size: 16px;
        color: rgb(80,80,80);
      }

      #eventTime{
        margin: 0 auto 5px auto;
        font-size: 14px;
        color: rgb(100,100,100);
      }

      #eventText{
        font-size: 14px;
        width: 500px;
        max-width: 80%;
        margin-right: auto;
        margin-left: auto;
        padding-bottom: 0px;
        line-height: 20px;
        display: block;
      }


      #friendWrapper{
        padding: 20px 0 20px 0;
        width: 100%;
        max-height: 100vh;
        background: linear-gradient(to bottom, transparent 14%, rgb(245,245,245) 0);
        transition: 0.4s linear;
        z-index: 2;
        position: absolute;
        bottom: 0;
        -webkit-transform: translateY(600px);
        transform: translateY(600px);
      }

      #friendCard{
        font-weight: 300;
        font-family: "Roboto";
        padding: 20px 0 20px 0;
        position: relative;
        margin: auto auto auto auto;
        width: 500px;
        min-height: 200px;
        background-color: white;
        border-radius: 3px;
        text-align: center;
        box-shadow: 2px 3px 10px 1px rgb(220,220,220);
      }

      #friendImg{
        margin: 20px auto 0 auto;
        width: 100px;
        height: 100px;
        background-color: rgb(240,240,240);
        border-radius: 50%;
        background-size: cover;
        background-position: center center;
      }

      #friendName{
        padding: 0;
        display: block;
        margin: 20px auto 0 auto;
        font-size: 30px;
        color: rgb(40,40,40);
      }

      #friendDescription{
        margin: 20px auto 20px auto;
        font-size: 16px;
        color: rgb(80,80,80);
      }

      #friendButtons{
        margin: 10px auto;
        width: 200px;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row; /* Safari 6.1+ */
        flex-direction: row;
      }

      #friendButtons > a{
        margin: auto;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: rgb(61,135,213);
        border: 1px solid rgb(61,135,213);
        cursor: pointer;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center; /* Safari 6.1+ */
        justify-content: center;
        text-decoration: none;
        transition: 0.1s linear;
      }

      #joinIcon, #inviteFriendIcon{
        color: white;
        font-size: 22px;
        transition: 0.1s linear;
      }

      #contactButton:hover, #contactIcon:hover{
        background-color: white;
      }

      #joinButton:hover > #joinIcon, #inviteFriend:hover > #inviteFriendIcon{
        color: rgb(61,135,213);
      }

      #friendButtons > a > i{
        color: white;
        font-size: 22px;
        transition: 0.1s linear;
      }

      #contactButton:hover, #facebookButton:hover, #calendarButton:hover{
        background-color: white;
      }

      #contactButton:hover > #contactIcon, #facebookButton:hover > #facebookIcon, #calendarButton:hover > i{
        color: rgb(61,135,213);
      }

      #eventButtons{
        margin: 10px auto;
        width: 130px;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row; /* Safari 6.1+ */
        flex-direction: row;
      }

     #eventButtons > a{
        margin: auto;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: rgb(61,135,213);
        border: 1px solid rgb(61,135,213);
        cursor: pointer;
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center; /* Safari 6.1+ */
        justify-content: center;
        text-decoration: none;
        transition: 0.1s linear;
      }


      #joinIcon, #inviteFriendIcon{
        color: white;
        font-size: 22px;
        transition: 0.1s linear;
      }

      #joinButton:hover, #inviteFriend:hover{
        background-color: white;
      }

      #joinButton:hover > #joinIcon, #inviteFriend:hover > #inviteFriendIcon{
        color: rgb(61,135,213);
      }

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

        #contactButton{
          width: 50px;
          height: 50px;
        }

        #contactButton, #joinButton, #inviteFriend{
          right: 20px;
        }

        .friend, .event{
          height: 80px;
        }

        #joinIcon, #inviteFriendIcon{
          font-size: 16px;
        }

        #contactIcon{
          font-size: 22px;
        }

        #inviteFriend{
          margin-bottom: 10px;
        }

        #friendName, #eventName{
          font-size: 22px;
        }

        #eventCard{
          width: 90%;
        }
 
      }


      @media screen and (max-width: 640px){
        #friendCard{
          width: 90%;
        }
      }

      @media screen and (max-width: 414px){
        #friendList{
          width: 100%;
        }

        #eventCard{
          width: 95%;
        }

        #eventList{
          width: 100%;
        }

        #friendList > h1, #eventList > h1{
          font-size: 26px;
        }

        .friend > h2, .event > h2{
          font-size: 16px;
        }

        #addFriendButton, #addEventMenuButton{
          right: 160px;
        }
      }
      @media screen and (max-width: 640px){
        #friendCard{
          width: 90%;
        }
      }

      @media screen and (max-width: 320px){
        #eventImg{
          margin-top: 10px;
        }
        #eventWrapper{
          padding-bottom: 5px;
          padding-top: 5px;
        }
        #eventButtons{
          margin-bottom: 0px;
        }
      }