/*media queries*/

//style @include laptop {

.content-wrapper {
    max-width: 800px;
}

.header {
    .wrapper {
        overflow: auto;
        max-width: 800px;
        padding: $base-spacing;
    }

    h1 {
        font-size: $big-font-size * 1.5;
    }
}

nav.many {
    max-width: 100%;
}

    .blog {
        .localnav {
            width: 20%;
        }
    }

    .post-wrapper {
        .localnav {
            width: 20%;
        }
    }
}

@include small-laptop {

.globalnav {

    max-width: $small-laptop-width;
    text-align: center;

    ul {
        display: block;
        float: none;

        a {
            margin-left: 0;
            margin-right: $base-spacing;
        }

    }
}

header {
    .wrapper {
        max-width: $small-laptop-width;
        text-align: center;
    }

    h1, aside {
        display: block;
        float: none;
    }
}

.projects-content {

    section.three {
        width: $content-width;
        max-width: 75%;
        float: none;
        margin: $center;
        margin-top: $base-spacing * 2;
        clear: both;

        ul {
            border-right-style: none;

            a {
                text-align: left;
            }

        }
    }

    section.three:last-of-type {
        border-bottom-style: none;
    }
}

nav.three, nav.many {
    width: $content-width;
    max-width: 75%;
    float: none;
    margin: $center;
    display: block;
}

.blog {
    .localnav {

        li, a, h3 {
            text-align: left;
            padding-right: $base-spacing;
        }
    }

    #posts {
        width: 75%;
    }
}

.post-wrapper {
    .localnav {

        li, a, h3 {
            text-align: left;
            padding-right: $base-spacing;
        }
    }

    .post {
        width: 75%;
    }
}

}

@include tablet {

.globalnav {
    ul {
        li {
            a {
                font-size: 1.5em;
            }
        }
    }
}

.projects-content {
    section.many, section.three, section.two {
        max-width: 100%;
    }

    section.two {
        width: $content-width;
        max-width: 75%;
        float: none;
        margin: $center;
        margin-top: $base-spacing * 2;
        clear: both;

        ul {
            border-right-style: none;

            a {
                text-align: left;
            }

        }
    }

    section.three:last-of-type {
        border-bottom-style: none;
    }
}

    .blog {
        .localnav {
            display: none;
            width: 0;
        }

        #posts {
            width: 100%;
        }
    }

    .post-wrapper {
        .localnav {
            display: none;
            width: 0;
        }

        .post {
            width: 100%;
            padding: 2em;

            h2 {
                font-size: $base-font-size * 1.6;
            }

            div {
                h3, h4, h5 {
                    margin-left: 0;
                    font-size: $base-font-size;
                }

                p {
                    padding-left: 0;
                }
            }
        }
    }

nav.two {
    width: $content-width;
    max-width: 75%;
    float: none;
    margin: $center;
    display: block;
}

nav.many {
    ul {
        li {
            display: block;
            float: none;
            margin: $base-spacing * 0.5;
            padding: 0;
        }
    }

}
}

@include phone {

.globalnav {
    ul {
        li {
            a {
                font-size: 1em;
            }
        }
    }
}

header {
    font-size: 1em;

    aside {

        img {
            height: 1.5em;
            width: auto;
        }
    }
}

nav.many, nav.three, nav.two {
    ul {
        li {
            display: block;
            float: none;
            margin: $base-spacing * 0.5;
            padding: 0;
        }
    }

}

}