/* GOOGLE FONTS REF.

font-family: 'Poppins', sans-serif;
    black: 900;
    regular: 400;

*/

/* COLOURS 

White:      #FEFFFE
Pink:       #FF8AF4
Turquoise:  #B5FFEB
liliac:     #918DFD
Yellow:     #FFEC8E
Orange:     #FFA08D

*/

/* TRANSITION

transition: all 600ms cubic-bezier(1, 0, 0, 1);

*/

/* MENU */
    
#nav
    {
        padding: 0;
        margin: -24px;
    }
    
#navlogo
    {
        padding: 0;
        margin: 16px 0;
    }
    
#navbg
    {
        position: fixed;
        z-index: 12000;
        width: 100%;
        opacity: 1;
        
        margin: 0;
        padding: 0;
        
        -webkit-transition: all 600ms cubic-bezier(1, 0, 0, 1);
        transition: all 600ms cubic-bezier(1, 0, 0, 1); 
    }
    
/* MENU ICON */
    
.burger
    {
        position: fixed;
        z-index: 10022;
        display: inline-block;
        cursor: pointer;
        bottom: 74px;
        left: calc(50% - 12px);
        margin: 2px 0;
        transition: all 600ms cubic-bezier(1, 0, 0, 1);
    }
    
.bar1, .bar2, .bar3, .bar4
    {
        width: 24px;
        height: 4px;
        border-radius: 0;
        background-color: #FEFFFE;
        margin: 2px 0;
        transition: all 600ms cubic-bezier(1, 0, 0, 1);
    }

.bar4
    {
        margin: -6px 0;   
    }

.change .bar1, .change .bar4
    {
        opacity: 0;
    }

.change .bar2
    {
        transform: rotate(-45deg) translate(0px, 4px);  
    }

.change .bar3
    {
        transform: rotate(45deg) translate(0px, -4px); 
    }

.bar1:hover
    {
        background-color: #FFA08D;
    }

.bar4:hover
    {
        background-color: #918DFD;
    }

.bar3:hover
    {
        background-color: #B5FFEB;
    }

.change .bar2:hover
    {
        background-color: #FFEC8E;
    }

.change .bar3:hover
    {
        background-color: #B5FFEB;    
    }
    
/* MENU */
    
menu
    {
        position: fixed;
        bottom: 48px;
        left: calc(50% - 30px);
        border-radius: 30px; 
        margin: 0;
        padding: 0;
        width: 60px;
        height: 60px;
        background-color: rgba(0,0,0,1);
        opacity: 1;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        -webkit-transition: all 600ms cubic-bezier(1, 0, 0, 1);
        transition: all 600ms cubic-bezier(1, 0, 0, 1);
        box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.12);
    }
    
menu.visible
    {
        bottom: 0;
        left: 0;
        border-radius: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,1); 
    }
    
menu a
    {
        font-family: Poppins, sans-serif;
        font-weight: 900;
        letter-spacing: -.012em;
        font-size: 2.4em;
        line-height: 2em;
        text-transform: uppercase;
        color: #FEFFFE;
        transition: all .24s;
    }

menu #menu1 a:hover
    {
        color: #FEFFFE;
        border-bottom: 4px solid #FEFFFE;
    }

menu #menu2 a:hover
    {
        color: #FFA08D;
        border-bottom: 4px solid #FFA08D;
    }

menu #menu3 a:hover
    {
        color: #B5FFEB;
        border-bottom: 4px solid #B5FFEB;
    }
    
#menulist
    {
        opacity: 0;
        -webkit-transition: all 600ms cubic-bezier(1, 0, 0, 1);
        transition: all 600ms cubic-bezier(1, 0, 0, 1);
    }
    
#menulist.visible
    {
        opacity: 1;
    }
    
.menuItem
    {
        padding: 0;
        margin: 0;
        margin-left: -18px;
        transition: all .8s;
    } 

/* Footer */

footer
    {
        background-color: black;
        color: #FEFFFE;
        display: block;
        text-align: center;
        padding: 120px 0;
        margin: auto;
        bottom: 0;
    }