/* Wide */

@include breakpoint('<=wide') {

/* Basic */

    body, input, textarea, select {
        font-size: 16pt;
    }

/* Header */

    #header {
        padding: 2em 0 12em 0;
    }

}

/* Normal */

@include breakpoint('<=normal') {

/* Banner */

    #banner {
        padding: 4em 0 4em 0;
        background-size: auto, 175% auto;
    }

/* Header */

    #header {
        padding: 2em 0 10em 0;
    }

}

/* Narrow */

@include breakpoint('<=narrow') {

/* Basic */

    body {
        background-color: _palette(bg);
        background-image: url('images/overlay.png'), url('../images/bg-alt.jpg');
        background-repeat: repeat, no-repeat;
        background-size: auto, 100% auto;
        background-position: top left, top center;
        background-attachment: scroll, scroll;
        font-size: 14pt;
    }

    input, textarea, select {
        font-size: 14pt;
    }

    h1, h2, h3, h4, h5, h6 {
        line-height: 1.5em;
    }

    header {
        p {
            margin: 0.25em 0 0 0;
            padding: 0 0 0.5em 0;
        }
    }

/* Box */
    .box {
        position: relative;

        section {
            margin: 0 0 2em 0;
        }

        &.style1 {
            padding: 2.5em 2em 2.5em 2em;

            &.right {
                .inner {
                    padding-left: 2em;
                }
            }

            &.left {
                .inner {
                    padding-right: 2em;
                }
            }
        }

        &.style2 {

            header {
                padding: 2em;
            }

            .inner {
                position: relative;
                padding: 30px 0 0 0;
            }
        }

        &.style3 {
            padding: 2.5em 2em 2.5em 2em;
        }
    }

/* Header */

    #header {
        padding: 2em 0 12em 0;
    }

/* Banner */

    #banner {
        padding: 3.5em;
        background-size: 200% auto;

        br {
            display: none;
        }
    }

}

/* Mobile */

@include breakpoint('<=mobile') {

/* Basic */

    * {
        text-shadow: none !important;
    }

    body, input, textarea, select {
        line-height: 1.5em;
        font-size: 12pt;
        letter-spacing: 0;
    }

    h2, h3, h4, h5, h6 {
        font-size: 1em;
    }

    h2 {
        font-size: 1.25em;
        letter-spacing: 4px;
    }

/* List */

    ul {
        li {
            padding-left: 0.5em;
        }
    }

    ol {
        li {
            padding-left: 0.25em;
        }
    }

/* Icons */

    ul.icons {
        a {
            width: 2em;
            height: 2em;
            line-height: 2em;
        }
    }

/* Menu */

    ul.menu {
        li {
            display: block;
            padding: 0;
            border: 0;
            margin: 1em 0 0 0;

            &:first-child {
                margin-top: 0;
            }
        }
    }

/* Actions */

    ul.actions {
        li {
            display: block;
            margin: 1em 0 0 0;

            &:first-child {
                margin-top: 0;
            }
        }
    }

/* Button */

    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    button,
    .button {
        padding: 0.75em 0 0.75em 0;
        width: 100%;
        max-width: 320px;
    }

/* Box */

    .box {
        margin-top: 4.5em;

        &:after {
            top: -4.5em;
            height: 4.5em;
        }

        &:before {
            width: 45px;
            height: 33px;
            top: -2.25em;
            margin-left: -22.5px;
            margin-top: -16.5px;
            background-size: 45px 33px;
        }

        &.style1 {
            padding: 0;
            text-align: center;

            .image {
                position: relative !important;
                left: 0 !important;
                width: 100% !important;
                height: auto !important;

                img {
                    position: relative;
                    height: auto;
                    width: 100%;
                }
            }

            .inner {
                margin: 0 !important;
                padding: 2em 1.25em 2em 1.25em !important;
            }
        }

        &.style2 {
            .inner {
                .row:before {
                    display: none;
                }

                .image {
                    padding: 0;
                    max-width: 250px;
                    margin: 0 auto 20px auto;
                }
            }
        }

        &.style3 {
            padding: 2em 1.25em 2em 1.25em;
        }
    }

/* Header */
    #header {
        padding: 2em 0 6em 0;

        header {
            padding-left: 2em;
            padding-right: 2em;

            h1 {
                font-size: 1.75em;
                letter-spacing: 6px;
            }
        }

        footer {
            bottom: 4.5em;
            padding: 0 2em 0 2em;

            &:after {
                bottom: -4.5em;
                left: 50%;
                height: 4.5em;
            }

            &:before {
                width: 45px;
                height: 33px;
                bottom: -2.25em;
                margin-left: -22.5px;
                margin-bottom: -16.5px;
                background-size: 45px 33px;
            }
        }
    }

/* Banner */
    #banner {
        padding: 3em 2em 3em 2em;
        background-size: auto 150%;

        header {
            margin: 0 0 1em 0;

            h2 {
                font-size: 1.5em;
                letter-spacing: 6px;
            }
        }
    }

/* Footer */

    #footer {
        .icons {
            padding: 0.5em 1.25em 0.5em 1.25em;
        }

        .copyright {
            font-size: 1em;
            margin: 0 0 4em 0;
        }
    }

/* Poptrox */
    .poptrox-popup {
        .nav-next,
        .nav-previous {
            opacity: 1.0;

            &:before {
                display: none;
            }
        }

        .closer {
            opacity: 0.5;
        }
    }

}