/*************************
==============================
TABLE OF CONTENTS
==============================
01A. General
02B. General Layout
03C. Forms / Buttons
04D. Header
05E. Navigation
    05Ea. Mobile Navigation
    05Eb. Mobile Nav Panels
    05Ec. Main Nav
    05Ed. Drop Downs
06F. Content
07G. Footer
08H. Login Page
09I. Contact Page
10J. Categories / Subpages
*************************/

/*************************01A. General *************************/
body {
    background: #fff;
    color: #202020;
    font: 1em/1.5 "PT Serif", arial, sans-serif;
    font-weight: 400;
}

p {
    margin: 15px 0;
}

    p:first-of-type {
        margin-top: 0;
    }

.image img, .icon svg, .logo svg, .logo img {
    display: block; /* Removes space under an image that can mess up some styles */
}

a {
    color: #823f35;
}

a.ntd {
    text-decoration: none;
}

    a:hover, a:focus {
        color: #666;
    }

h1, h2, h3, h4, h5, h6 {
    margin: 15px 0 25px;
}

    h1:first-of-type, h2:first-of-type, h3:first-of-type, h4:first-of-type, h5:first-of-type, h6:first-of-type {
        margin-top: 0;
    }

h2 {
    font-size: 30px;
}

h3 {
    font-size: 26px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
}

.section-header {
    border-bottom: 1px solid #ccc;
}

@media only screen and (min-width : 800px) {
    h1 {
        font-size: 48px;
    }

    h2 {
        font-size: 44px;
    }

    h3 {
        font-size: 40px;
    }

    h4 {
        font-size: 36px;
    }

    h5 {
        font-size: 32px;
    }

    h6 {
        font-size: 26px;
    }
}

/* Skip link for accessibility*/
#skip a {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

    #skip a:focus {
        position: static;
        width: auto;
        height: auto;
    }

/************************* 02B. General Layout *************************/
.full {
    margin: 0 auto;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    z-index: 2;
}

.interior .banner {
    background-attachment: fixed;
    margin-bottom: 25px;
}

.interior .title {
    text-align: center;
    max-width: 840px;
    margin: auto;
    padding: 200px 20px 25px;
}

    .interior .title h1 {
        line-height: 1;
        margin: 0;
        color: #edebc9;
        text-shadow: 3px 0 #333;
    }

.inner {
    margin: auto;
    padding: 0 15px;
    max-width: 1070px;
    width: 100%;
}

.interior .inner {
    max-width: 840px;
    padding: 0 20px 50px;
}

header.main .inner {
    padding: 0;
    max-width: 1720px;
}

@media only screen and (min-width: 800px) {
    .interior .title h1 {
        text-shadow: 5px 0 #333;
    }
}

@media only screen and (min-width: 1000px) {
    .full.interior {
        font-size: 20px;
    }

    .interior .banner {
        margin-bottom: 50px;
    }

    .interior .inner {
        max-width: 840px;
        padding: 0 20px 100px;
    }
}

@media only screen and (min-width : 1100px) {
    .inner {
        padding: 0;
    }
}

/************************* 03C. Forms / Buttons *************************/
/*
    reset.css and forms.css has base styles for buttons and form elements.  To override them, put them here, do not edit those stylesheets.
    To override styles properly, you need to grab the exact class/elements listed in those base stylesheets.  Below are some of them sans styles.
    If you don't need to override anything, delete the empty classes, don't leave unnecessary codes.
*/
button.btn, .btn a, a.btn, input[type="submit"], button[type="submit"] {
    background: transparent;
    border: 4px solid #823f35;
    font-style: italic;
    font-weight: 700;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
}

.interior button.btn, .interior .btn a, .interior a.btn, .interior input[type="submit"], .interior button[type="submit"] {
    background: transparent;
    border: 4px solid #823f35;
    color: #202020;
    font-style: italic;
    font-weight: 700;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
} 

    button.btn-secondary, .btn-secondary a, a.btn-secondary, input[type="submit"].btn-secondary, button[type="submit"].btn-secondary {
    }

    button.btn-cancel, .btn-cancel a, a.btn-cancel, input[type="submit"].btn-cancel, button[type="submit"].btn-cancel {
    }

    button.btn-small, .btn-small a, a.btn-small, input[type="submit"].btn-small, button[type="submit"].btn-small {
    }

    button:hover.btn, .btn a:hover, a:hover.btn, input[type="submit"]:hover, button[type="submit"]:hover,
    button:focus.btn, .btn a:focus, a:focus.btn, input[type="submit"]:focus, button[type="submit"]:focus {
        background: #823f35;
        color: #fff;
    }

input[type=submit][disabled], input[type=button][disabled], button[disabled], a[disabled],
input[type=submit][disabled]:hover, input[type=button][disabled]:hover, button[disabled]:hover, a[disabled]:hover
/* Usually the stylings are the same as the button styles from above so there is no hover styles, or you can do a separate syle for disabled buttons */ {
}

    button[disabled].btn-secondary:hover, .btn-secondary a.disabled:hover, a.btn-secondary.disabled:hover, input[type="submit"][disabled].btn-secondary:hover, input[type="button"][disabled].btn-secondary:hover, button[type="submit"][disabled].btn-secondary:hover {
    }

/************************* 04D. Header *************************/
header.main {
    padding: 20px 0;
    text-align: center;
    position: absolute;
    top: 50px;
    width: 100%;
    z-index: 10;
}

    header.main .logo {
        max-width: 177px;
        margin: auto;
    }

@media only screen and (min-width: 800px) {
    header.main {
        position: fixed;
        top: 0;
        padding: 20px 15px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

        header.main .logo {
            width: 177px;
            float: left;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }

    header.main.change-it {
        background: rgba(51,51,51,0.5);
        padding: 10px 15px;
    }
        
        header.main.change-it .main-nav {
            margin: 15px 0 0;
        }

        header.main.change-it .logo {
            width: 100px;
        }
}

/************************* 05E. Navigation *************************/
.main-nav, /* Hide desktop menu to start */
#main-nav ul p, .main-nav ul br { /* Clients accidentally insert p or br tags when editing the menus so this hides them */
    display: none;
}

/* 05Ea. Mobile Navigation */
.toggle-menu {
    background: #333;
    color: #fafafa;
    font-size: 16px;
    left: 0;
    position: fixed;
    text-decoration: none;
    text-transform: uppercase;
    top: 0;
    width: 100%;
    z-index: 10;
}

    .toggle-menu li {
        float: left;
    }

    .toggle-menu li:first-child {
        width: 100px;
    }

        .toggle-menu li:last-child {
            text-align: right;
            width: calc(100% - 100px);
        }

    .toggle-menu .icon, .toggle-menu .menu-text {
        display: inline-block;
        vertical-align: middle;
    }

    .toggle-menu p {
        margin: 0;
    }

    .toggle-menu a {
        color: #fafafa;
        display: block;
        padding: 10px 15px;
        text-decoration: none;
    }

    /* Hamburger menu icon */
    .toggle-menu .icon, .toggle-menu .icon:after, .toggle-menu .icon:before {
        background: #fafafa;
        -webkit-transition: all 0s .3s;
        transition: all 0s .3s;
        width: 18px;
        height: 2px;
    }

        .toggle-menu .icon:after, .toggle-menu .icon:before {
            background: #fafafa;
            content: "";
            position: absolute;
            left: 0;
        }

        .toggle-menu .icon:before {
            bottom: 5px;
            -webkit-transition: bottom .3s .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: bottom .3s .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .toggle-menu .icon:after {
            top: 5px;
            -webkit-transition: top .3s .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: top .3s .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s cubic-bezier(0.23, 1, 0.32, 1);
        }

    /* When clicked, hamburger icon animates into an X */
    .toggle-menu .is-clicked .icon {
        background: rgba(255, 255, 255, 0);
    }

        .toggle-menu .is-clicked .icon:after {
            background: #edebc9;
            top: 0;
            -ms-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-transition: top .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: top .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .toggle-menu .is-clicked .icon:before {
            background: #edebc9;
            bottom: 0;
            -ms-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-transition: bottom .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: bottom .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1);
        }

/* 05Eb. Mobile Nav Panels */
[id$="nav-copy"] {
    background: #fff;
    box-shadow: 5px 0 5px -5px rgba(0,0,0,.5);
    left: 0;
    overflow-y: auto;
    padding: 42px 0;
    position: fixed;
    top: 0;
    -webkit-transform: translateX(-280px);
    -ms-transform: translateX(-280px);
    transform: translateX(-280px);
    -webkit-backface-visibility: hidden;
    -webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s;
    transition: transform .4s 0s, visibility 0s .4s;
    width: 230px;
    height: 100%;
    z-index: 9;
}

    [id$="nav-copy"] ul li a {
        border-bottom: 1px solid #e3e3e3;
        color: #202020;
        display: block;
        padding: 15px;
        text-decoration: none;
    }

        [id$="nav-copy"] ul li a:hover {
            background: #823f35;
            color: #fff;
        }

    [id$="nav-copy"] ul li ul {
        font-size: 14px;
        line-height: 1.2;
    }

        [id$="nav-copy"] ul li ul li a {
            padding-left: 30px;
        }

    [id$="nav-copy"].open-menu {
        -webkit-transform: translateX(0) !important;
        -ms-transform: translateX(0) !important;
        transform: translateX(0) !important;
        -webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s;
        transition: transform .4s 0s, visibility 0s 0s;
        -webkit-overflow-scrolling: touch;
    }

.dd-wrap {
    display: block;
    width: 100%;
}

.open-dd {
    background: #e3e3e3;
    cursor: pointer;
    display: block;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 50px;
    height: 100%;
    z-index: 10;
}

    /* Icon to indicate there's drop downs to open */
    .open-dd::after {
        content: "\f103";
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 50%;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .open-dd:hover, .open-dd:focus {
        background: #307ba4;
        color: #fff;
    }

.has-sub ul {
    display: none;
}

.has-sub span {
    display: block;
}

.has-sub > span {
    height: 100%;
}

/* 05Ec. Main Nav */
.main-nav {
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 20px auto 0;
    z-index: 15;
}

    .main-nav > ul > li {
        display: inline-block;
        margin: 0 -5px 0 20px;
    }

        .main-nav > ul > li:first-child {
            margin: 0 -5px 0 0;
        }

        .main-nav > ul > li:last-child {
            margin: 0 0 0 20px;
        }

        .main-nav > ul > li a {
            display: block;
            text-decoration: none;
            color: #fff;
            -webkit-transition: opacity 0.3s;
            transition: opacity 0.3s;
        }

            .main-nav > ul > li a:hover, .main-nav > ul > li a:focus {
                opacity: 0.5;
            }

    /* 05Ed. Drop Downs */
    .main-nav ul > li > ul {
        background-color: none;
        display: block;
        font-size: 16px;
        left: 0;
        line-height: 1.2;
        margin: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
        pointer-events: none;
        position: absolute;
        text-align: left;
        top: auto;
        -webkit-transition: max-height .1s ease-in-out 0s, opacity .1s ease-in-out 0s;
        transition: max-height .1s ease-in-out 0s, opacity .1s ease-in-out 0s;
        width: 230px;
        height: auto !important;
        z-index: 100;
    }

        .main-nav ul > li > ul li {
            display: inline-block;
            height: auto !important;
            margin: 0;
            padding: 0;
            position: relative;
            width: 100%;
        }

            .main-nav ul > li > ul li:last-child {
                border-bottom: 0;
            }

            .main-nav ul > li > ul li a {
                background: #edebc9;
                border-bottom: 1px solid #494949;
                color: #202020 !important;
                display: block;
                opacity: 1;
                padding: 12px !important;
                -webkit-transition: none;
                transition: none;
            }

            .main-nav ul > li > ul li:last-of-type a {
                border-bottom: 0;
            }

            .main-nav ul > li > ul li:hover a, .main-nav ul > li > ul li a:focus {
                background: #823f35;
                color: #fafafa !important;
                opacity: 1;
            }

    .main-nav ul > li:hover > ul, .main-nav ul > li > a:focus + ul {
        max-height: 700px;
        opacity: 1;
        pointer-events: visible;
        -webkit-transition: max-height .7s ease-in-out 0s;
        transition: max-height .7s ease-in-out 0s;
    }

@media only screen and (min-width : 800px) {
    [id$="nav-copy"], .toggle-menu {
        display: none;
    }

    .main-nav {
        display: block;
        width: calc(100% - 177px);
        float: right;
        text-align: right;
        margin: 35px auto 0;
    }
}

@media only screen and (min-width: 1200px) {
    .main-nav {
        font-size: 18px;
    }
    
    .main-nav > ul > li {
        margin: 0 20px;
    }

        .main-nav > ul > li:first-child {
            margin: 0 20px;
        }
}

/************************* 06F. Content *************************/
.loader-overlay {
    position: absolute;
    background: #fff;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
}

.loader {
    border: 10px solid #e3e3e3;
    border-top: 10px solid #823f35;
    border-radius: 50%;
    width: 100px;
    margin: auto;
    height: 100px;
    animation: spin 2s linear infinite;
}

.logo-pa {
    max-width: 177px;
    margin: 0 auto 50px;
    position: relative;
}

.loader-overlay .pa {
    position: fixed;
    top: 50px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/************************* 07Ga. Banner / Slideshow *************************/
.banner h2 {
    font-size: 24px;
    line-height: 1.2;
    text-shadow: 3px 0 #333;
}

.slideshow h2 {
    font-size: 20px;
    line-height: 1.2;
    text-shadow: 2px 0 #333;
    font-weight: 700;
    font-style: italic;
}

.banner .slick-list li, .slideshow .slick-list li {
    height: 100vh;
    width: 100vw;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    z-index: 0;
    position: relative;
}

.edge .slideshow .slick-list li {
    background-attachment: scroll;
}

.touchevents .banner .slick-list li, .touchevents .slideshow .slick-list li {
    background-attachment: scroll;
}

.banner .text, .slideshow .text {
    position: absolute;
    color: #fff;
    top: 75%;
    left: 50%;
    -ms-transform: translate(-50%,-75%);
    -webkit-transform: translate(-50%,-75%);
    transform: translate(-50%,-75%);
    z-index: 2;
    text-align: center;
    width: 75%;
}

.slideshow .text {
    top: 25px;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

@media only screen and (min-width: 1200px) {
    .banner .text {
        max-width: 800px;
        padding: 25px;
    }

        .slideshow .text {
            max-width: 90%;
            padding: 0;
        }

    .banner h2 {
        font-size: 48px;
        text-shadow: 5px 0 #333;
    }
}

.testimonials {
    background: url(../images/warmwood-bg.jpg) no-repeat center center;
    background-size: cover;
    padding: 50px 20px;
    color: #fff;
}

    .testimonials li p:last-child {
        color: #edebc9;
        text-align: right;
        font-size: 24px;
    }

    .testimonials header {
        text-align: center;
        margin-bottom: 20px;
    }

    .testimonials .icon img {
        width: 45px;
        height: 35px;
    }

    .testimonials .arrow, .slideshow .arrow {
        width: 20px;
        height: 35px;
        position: absolute;
        top: -58px;
        cursor: pointer;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }

        .slideshow .arrow {
            width: 30px;
            height: 52px;
            top: 60px;
            z-index: 3;
        }

        .slideshow .text {
            top: 60px;
        }

        .testimonials .arrow:hover, .slideshow .arrow:hover {
            opacity: 0.5;
        }

        .testimonials .arrow.arrow-prev {
            left: 0;
        }

            .slideshow .arrow.arrow-prev {
                left: 10px;
            }

        .testimonials .arrow.arrow-next {
            right: 0;
        }

        .slideshow .arrow.arrow-next {
            right: 10px;
        }

        .testimonials .arrow.arrow-prev:before, .testimonials .arrow.arrow-next:before {
            content: '';
            display: block;
            background: #823f35;
            position: absolute;
            top: 50%;
            -ms-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            width: 50px;
            height: 4px;
        }

        .testimonials .arrow.arrow-prev:before {
            left: 40px;
        }

        .testimonials .arrow.arrow-next:before {
            right: 40px;
        }

    .testimonials ul {
        max-width: 400px;
        margin: auto;
    }

    .testimonials .btn {
        text-align: center;
        margin-top: 25px;
    }

@media only screen and (min-width: 400px) {
    .testimonials .arrow.arrow-prev:before, .testimonials .arrow.arrow-next:before {
        width: 100px;
    }
}

@media only screen and (min-width: 800px) {
    .testimonials {
        padding: 75px 20px;
    }
    
    .testimonials .icon img {
        width: 90px;
        height: 70px;
    }

    .testimonials .arrow {
        width: 40px;
        height: 70px;
        top: -100px;
    }

        .testimonials .arrow.arrow-prev:before, .testimonials .arrow.arrow-next:before {
            width: 200px;
        }

        .testimonials .arrow.arrow-prev:before {
            left: 100px;
        }

        .testimonials .arrow.arrow-next:before {
            right: 100px;
        }
    
    .testimonials ul {
        max-width: 800px;
    }

    .slideshow .arrow {
        top: 100px;
        width: 40px;
        height: 70px;
    }

    .slideshow .text {
        top: 100px;
    }

        .slideshow .arrow.arrow-prev {
            left: 25px;
        }

        .slideshow .arrow.arrow-next {
            right: 25px;
        }

    .slideshow h2 {
        font-size: 24px;
    }
}

@media only screen and (min-width: 1000px) {
    .slideshow h2 {
        font-size: 36px;
        text-shadow: 3px 0 #333;
    }
}

@media only screen and (min-width: 1200px) {
    .testimonials li p {
        font-size: 24px;
    }

        .testimonials li p:last-child {
            font-size: 36px;
        }

    .testimonials .arrow.arrow-prev:before, .testimonials .arrow.arrow-next:before {
        width: 300px;
    }

    .testimonials .arrow.arrow-prev {
        left: -100px;
    }

    .testimonials .arrow.arrow-next {
        right: -100px;
    }

    .testimonials .btn {
        margin-top: 50px;
    }

    .testimonials .btn a {
        font-size: 24px;
        padding: 10px 20px;
    }
}

@media only screen and (min-width: 1500px) {
    .slideshow h2 {
        font-size: 48px;
        text-shadow: 4px 0 #333;
    }
}

/************************* 07G. Footer *************************/
footer.main {
    padding: 15px;
    text-align: center;
    width: 100%;
    color: #202020;
}

        footer.main .half:first-child li {
            margin-bottom: 15px;
        }

        footer.main .half:first-child a {
            text-decoration: none;
        }

    footer.main .half:last-child span {
        display: block;
    }

    footer.main a {
        color: #202020;
        text-decoration: underline;
    }

        footer.main a:hover, footer.main a:focus {
            color: #823f35;
        }

.bg footer.main {
    background: rgba(82,63,56,0.5);
    color: #fff;
}

    .bg footer.main a {
        color: #fff;
    }

    .interior .bg footer.main a:hover, .interior .bg footer.main a:focus {
        color: #edebc9;
    }

@media only screen and (min-width: 1000px) {
    footer.main {
        position: absolute;
        bottom: 0;
        z-index: 3;
        width: 100%;
        background: rgba(82,63,56,0.5);
        color: #fff;
        padding: 15px 0;
    }

        footer.main .half {
            width: 50%;
            float: left;
            padding: 0 15px;
        }

            footer.main .half:first-child {
                text-align: left;
            }

            footer.main .half:last-child {
                text-align: right;
            }

            footer.main .half:first-child li {
                margin-bottom: 10px;
            }

                footer.main .half:first-child li:last-child {
                    margin-bottom: 0;
                }

        footer.main a {
            color: #fff;
        }

            footer.main a:hover, footer.main a:focus {
                color: #999;
            }

            .interior footer.main a:hover, .interior footer.main a:focus {
                color: #edebc9;
            }

        footer.main .half:last-child span:first-of-type {
            margin-bottom: 10px;
        }
}

@media only screen and (min-width: 1200px) {
    footer.main .half:first-child li {
        display: inline-block;
        margin-bottom: 0;
    }

        footer.main .half:first-child li:last-child {
            margin-left: 15px;
        }

    footer.main .half:last-child span {
        display: inline-block;
    }

        footer.main .half:last-child span:first-of-type {
            margin-bottom: 0;
        }
}

/************************* 08H. Login Page *************************/
.login-wrapper {
    max-width: 350px;
}

.login-form {
    margin-bottom: 30px;
}

.login-create-link a {
    text-decoration: none;
}

@media only screen and (min-width : 800px) {
    .login-wrapper {
        max-width: none;
    }

    .login-form, .login-create-link {
        float: left;
        margin-bottom: 0;
        max-width: 350px;
        width: 50%;
    }

    .login-create-link {
        padding-left: 50px;
    }
}

/*********************** 09I. Contact Page ***********************/
.contact-content {
    margin-bottom: 40px;
}

@media only screen and (min-width: 850px) {
    .contact-form, .contact-content {
        float: left;
        width: 45%;
    }

    .contact-form {
        padding-left: 30px;
        width: 55%;
    }
}

@media only screen and (min-width : 900px) {
    .contact-form, .contact-content {
        float: left;
        width: 45%;
    }

    .contact-form {
        padding-left: 30px;
        width: 55%;
    }
}

/*********************** 10J. Categories / Subpages ***********************/
.categories {
    margin-top: 30px;
    text-align: center;
}

    .categories a {
        text-decoration: none;
    }

    .categories li {
        margin: 0 auto 30px;
        max-width: 350px;
        width: 100%;
    }

    .categories .title a {
        background: rgba(0,0,0,.5);
        color: #eaeaea;
        display: block;
        font: 18px/1.2 arial, sans-serif;
        margin: auto;
        padding: 15px 20px;
    }

        .categories .title a:hover, .categories .title a:focus {
            background: #286986;
        }

@media only screen and (min-width : 550px) {
    .categories li {
        float: left;
        margin-left: 15px;
        margin-right: 15px;
        max-width: none;
    }
}

@media only screen and (min-width : 550px) and (max-width : 850px) {
    .categories li {
        width: calc(100% / 2 - 16px);
    }

        .categories li:nth-of-type(2n+1) {
            clear: both;
            margin-left: 0;
        }

        .categories li:nth-of-type(2n+2) {
            margin-right: 0;
        }
}

@media only screen and (min-width : 851px) and (max-width : 1050px) {
    .categories li {
        width: calc(100% / 3 - 21px);
    }

        .categories li:nth-of-type(3n+1) {
            clear: both;
            margin-left: 0;
        }

        .categories li:nth-of-type(3n+3) {
            margin-right: 0;
        }
}

@media only screen and (min-width : 1051px) {
    .categories li {
        width: calc(100% / 4 - 24px);
    }

        .categories li:nth-of-type(4n+1) {
            clear: both;
            margin-left: 0;
        }

        .categories li:nth-of-type(4n+4) {
            margin-right: 0;
        }
}

.aside {
    background: #eee;
    padding: 15px;
    text-align: center;
}