/* originally imported from url('https://fonts.googleapis.com/css?family=Varela+Round');*/
/* also originally downloaded these files:
    https://fonts.gstatic.com/s/varela/v16/DPEtYwqExx0AWHX5DR4ETvw.woff2
    https://fonts.gstatic.com/s/varela/v16/DPEtYwqExx0AWHX5Ax4E.woff2


TODO: Find out if we really need these files or if they can just be deleted  Are they just some special font (that I don't care about?)
*/

/* latin-ext */
@font-face {
    font-family: 'Varela';
    font-style: normal;
    font-weight: 400;
    src: url(DPEtYwqExx0AWHX5DR4ETvw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Varela';
    font-style: normal;
    font-weight: 400;
    src: url(DPEtYwqExx0AWHX5Ax4E.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


  /*I may need to remove these so they don't conflict with styles */
  /*I want the hamburger menu to match the regular menu exactly and not be different */
/*html, body {*/
/*    overflow-x: hidden;*/
/*    height: 100%;*/
/*}*/
body {
    background: #fff;
    padding: 0;
    margin: 0;
    font-family: 'Varela Round', sans-serif;
}

.main {
    margin: 0 auto;
    display: block;
    height: 100%;
    margin-top: 60px;
}
.mainInner{
    display: table;
    height: 100%;
    width: 100%;
    text-align: left;
}
.mainInner div{
    display:table-cell;
    vertical-align: middle;
    font-size: 3em;
    font-weight: bold;
    letter-spacing: 1.25px;
}
#sidebarMenu {
    height: 100%;
    position: fixed;
    top: 80px;
    left: 0px;
    width: 250px;
    margin-top: 60px; 
    transform: translateX(-250px);
    transition: transform 250ms ease-in-out;
    background: linear-gradient(180deg, #f7e8e8);
}
.sidebarMenuInner{
    margin:0;
    padding:0;
    padding-inline-start:40px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
    list-style: none;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
}
#openSidebarMenu:checked ~ #sidebarMenu {
    transform: translateX(0);
}

#openSidebarMenu {
    transition: all 0.3s;
    box-sizing: content-box;
    display: none;
    padding: 60px;
}
.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: content-box;
    cursor: pointer;
    position: fixed;
    z-index: 99;
    /*height: 100%;*/
    /*width: 100%;*/
    top: 8px;
    left: 20px;
    height:42px;
    width: 42px;
}
.spinner {
    transition: all 0.3s;
    box-sizing: content-box;
    position: absolute;
    top: 0px; left: 0px;
    height: 4px;
    width: 100%;
    background-color: #010101;
    }
.horizontal {
    transition: all 0.3s;
    box-sizing: content-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: content-box;
    float: left;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: content-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
#openSidebarMenu:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: content-box;
    opacity: 0;
}
#openSidebarMenu:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}
#openSidebarMenu:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}