/* Wide */

@include breakpoint('<=wide') {

    /* Basic */

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

    /* Header */

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

}

/* Normal */

@include breakpoint('<=normal') {

    /* Banner */

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

    /* Header */

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

}

/* Narrow */

@include breakpoint('<=narrow') {

    /* Basic */

        body {
            background-color: #203936;
            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: 10em 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: 6em 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;
            }
        }

}