$below-banner:2em;

// reset
body,h1,h2,h3,h4,h5,h6,ul {
    margin:0;
    padding:0;
}

#main-nav {
    //dev:
//    display: none;
    @media #{$view-mobile} {
        display: none;
    }
}

//////////////////////////////////////////////
// basic site layout

h1 { margin: .5em 0 0 1em; }

.card {
    max-width:600px;
    img { width: 100%; }
    &::after {
        content:"";
        clear: both; 
        display:table;
    }
}

#page-wrap {
}
///////////////////////////////////////////////


.featherlight .featherlight-content {
    background: none;
    overflow: visible;
    .featherlight-close-icon {
        background: none;
        top: -10px;
        right: -10px;
        color: $white;
        font-size: 1.5em;
    }
    @media #{$view_mobile} {
        iframe { width:100%; height:100%;}
    }
}

/////////////////////////////////////////////////////////////////////
#mobile-nav {
    display: none;
    @media #{$view-mobile} {
        display: block;
        // dev
        display: none;  
        a.menu-toggle {
            display: block;
        }
    }
    font-family: $sans;
    font-size:1.2em;
    
    .the_list {
        .home-link,
        >ul:last-child {
            font-family:$cursive;
            font-size: 1.4em;
            margin-top: -.7em;
            color: $spkt02;
            a {
                color: $spkt02;
                display: inline-block;
                margin-top: 8px;
            }
        }
        .home-link {
            display: inline-block;
            text-transform: lowercase;
            margin-bottom: 8px;
        }
        display:none;
        padding: 2em;
        ul { margin-bottom: 1.7em; }
        li {
            margin:0.5em;
            list-style:none;
            ul { margin-bottom: 1em; }
        }
        a {
            color:$black;
            text-decoration:none;
            font-weight: normal;
        }
        .active>a {
            color:$spkt02;
            font-weight: bold;
        }
    }
    &.open .the_list {
        display:block;
        position:fixed;
        top:0;
        left:0;
        z-index:99;
        background: rgba(255,255,255,0.9);
        height:100%;
        width: 100%;
        overflow:scroll;
    }
    a.menu-toggle {
        position:fixed;
        top:0;
        right:0;
        width:50px;
        height:50px;
        z-index:100;
        cursor:pointer;
        background:$white;
        background: rgba(255,255,255,0.9);
        background-image: url('img/menu-icon.png');
        background-position: top;
    }
    &.open a.menu-toggle {
        background-position:bottom;
    }
}