/* TO DO: figure out font sizes */
/* TO DO: make responsive */
/* TO DO: figure out positioning */
*{
    margin: 0;
    padding: 0;
}

.content-container-menu{
    /*background-color: #FFFFFF;*/
    background-color: rgba(255,255,255,0.85);
    /* max-width: 100vw; */
    width: 100vw;
    /*text-align: center;*/
    position: fixed;
    z-index: 200;
}
.content-container-menu-open{
    background-color: #AECD37;
    z-index: 200;
    height: 100vh;
}

body{
    /* background-color: #AECD37; */
    display: grid;
    
    margin: 0;
    /* place-items: center center; */
}
nav{
    /*width: 100%;*/
    /*background-color: blue;*/
}

nav ul {
    /*float: left;*/
    /*display: inline;*/
    /*text-align: center;*/
}

nav ul li{
    list-style: none;
    float: left;
    /*width: 400px;*/
    /*background-color: orange;*/
    /*border: 1px solid orange;*/
    /*height: 72px;*/
    /*display: inline;*/
    margin-bottom: 10px;
}

nav ul li:first-child{
    /*background-color: pink;*/
}

nav ul li a{
    color: #FFF;
    font-family: Graphik;
    font-size: 48px;
    /*padding: 22px 14px;*/
    /*margin: 22px 14px;*/
    text-decoration: none;
    /*float: left;*/
    text-align: center;
    display: block;
}

nav ul li a:hover{
    color: #3c3c3c;
    text-decoration: underline;
    /*background-color: purple;*/
    /*font-weight: 100;*/
}


.col-4,.col-6{
    width: 100%;
}

.col-12{
    padding: 0 20px;
}

#menu-links{
    display: none;
}

#menu-contact{
    text-align: center;
    display: none;
}


/*********************************   progress bar  ************************************/
.progress-bar{
    /*border: 2px solid #AECD37;*/
    height: 10px;
    display: block;
    z-index: 400;
}
#progress-bar-fill{
    position: absolute;
    background-color: #AECD37;
}

/*********************************   MENU  ************************************/
.wrapper{
    border-radius: 50px;
    /*margin: 0 35px 35px 35px;*/
    margin: 50px;
    padding: 10px;
    position: relative;
    /*border: 5px solid #333;*/
}

.icon-container{
    width: 50px;
    height: 50px;
    position: relative;
    margin: auto;
}

.line{
    position: absolute;
    width: 100%;
    height: 7px;
    background-color: #333;
    border-radius: 10px;
    /*transition: all ease 0.27s;*/
    transition: all cubic-bezier(0.25, 0.1, 0.07, 1.5) 0.27s;;
}

.line-top{
    top:20%;
}

.line-mid{
    top:50%;
}

.line-btm{
    top:80%;
    /*background-color: pink;*/
}

.menu-btn.close .line-top{
    transform:rotate(45deg);
    top:50%;
    background-color: white;
}

.menu-btn.close .line-mid, .menu-btn.close .line-btm{
    transform:rotate(-45deg);
    top:50%;
    background-color: white;
}
/******************************************************************************/



/* media queries */
/* breakpoint for tablet size */
@media all and (min-width: 600px) {
    .col-4{
        width:33.33%;
        /*border: 1px solid red;*/
    }
    .col-6{
        width:50%;
        border: 1px solid purple;
    }
    body{
        /*height: 50vh;*/
    }
    nav ul li a{
        /*text-align: right;*/
        /*padding-right: 200px;*/
        line-height: 1.25em;
        font-size: 64px;
    }
    .wrapper{
        margin-right: 215px;
    }
    .icon-container{
        margin-left: auto;
        margin-right: 0;
    }
}