/* Structure CSS Document Table of Contents:
	Reset
    HTML Tags	
	IDs & Classes
    Media Queries

==================================
	 Reset 
================================== */

#nav ul,
#nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ================================== 
HTML Tags	
================================== */

body {
    display: flex;
    flex-direction: column;
    margin: 0px auto;
}

/* ================================== 
	IDs and Classes (in Alphabetical order)
================================== */

/* ========== B  ==========  */

#banner {
    order: 1;
    flex-grow: 0;
}

#banner,
#nav,
#content,
#footer {
    padding: .75em 5%;
}


/* ========== C  ==========  */

#content,
#footer {
    order: 2;
}
.clear-left{
    clear: left;
}

/* ========== F  ==========  */

#footer {
    order: 3;
}

/* ========== N  ==========  */

#nav {
    order: 1;
    flex-grow: 1;
}

#nav ul {
    display: flex;
    justify-content: space-between;
}

/* ========== S  ==========  */
.sr-only{
	margin:-1px !important;
	padding:0 !important;
	width:1px !important;
	height:1px !important;
	overflow:hidden !important;
	clip:rect(0 0 0 0) !important;
	clip:rect(0, 0, 0, 0) !important;
	position:absolute !important;
}

/* ================================== 
Media Queries (Mobile First)
================================== */

@media (min-width:480px) {}

/*480*/

/*600*/

@media (min-width:600px) {
    /* ----- C  -----  */
    [class*='col-'] {
        float: left
    }

    [class*='col-'],
    .grid-flex > div {
        margin: 0 2%;
    }
    .col-half {
        width: 45%;
        /*calc (49 - 2 - 2)%;*/
    }

    .col-fourth {
        width: 20%;
        /*calc (24 - 2 - 2)%;*/
    }

    .col-3fourth {
        width: 71%;
        /* calc (75 - 2 - 2)%;*/
    }
    /* ----- R -----  */
    .row {
        margin: 0 -2% 1em -2%;
    }

    .row:after {
        display: block;
        clear: left;
        /*note: IE compatability mode  content doesn't work*/
        content: " ";
    }
}

/*768*/

@media (min-width:1024px) {
    body {
        max-width: 1200px;
        height: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        align-content: flex-start;



    }
    /* ----- B ---- */
    #banner,
    #nav,
    #content,
    #footer {
        padding: 1em 2.5%;

    }

    /* ----- F ---- */
    #footer {
        align-self: flex-end;
        width: 100%;
    }


    /* ----- G ---- */
    .grid-flex {
        display: flex;
        margin: 0 -2% 1em -2%;
    }

    /* ----- N ---- */
    #nav ul {
        justify-content: space-around;
    }
    /* ----- P ---- */
    #pg-resume .col-main {
        width: 60%;
    }
    #pg-resume .col-side {
        width: 30%;
    }
}


@media print {
    body {
        display: block;
    }
    body h1 {
        position: static;
        width: auto;
        height: auto;
        padding: 0 0 .5em 0;
        margin: auto;
        overflow: visible;
        clip: auto;
        border: 0;
    }
     body #banner,
     body #nav {
        display: none;
    }
}