/* Box */

.box {
    position: relative;
    margin-top: 9em;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: 3em;

    &:after {
        content: '';
        display: block;
        position: absolute;
        top: -9em;
        height: 9em;
        border-left: solid 1px _palette(accent);
    }

    &:before {
        content: '';
        display: block;
        width: 90px;
        height: 66px;
        position: absolute;
        top: -4.5em;
        margin-left: -45px;
        margin-top: -33px;
        background: url('images/circles.svg') no-repeat;
    }

    :last-child {
        margin-bottom: 0;
    }

    &.right {
        &:before, &:after {
            left: 3em;
        }
    }

    &.left {
        &:before, &:after {
            right: 3em;
        }
    }

    &.style1 {
        background: _palette(bg);
        padding: 3em;

        .image {
            display: block;
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
            background: _palette(bg);
            overflow: hidden;

            img {
                position: absolute;
                top: 0;
                height: 100%;
                width: auto;
            }
        }

        .inner {
            > :last-child {
                margin: 0;
            }
        }

        &.right {
            .image {
                left: 0;

                img {
                    right: 0;
                }
            }

            .inner {
                margin-left: 50%;
                padding-left: 3em;
            }
        }

        &.left {
            .image {
                right: 0;

                img {
                    left: 0;
                }
            }

            .inner {
                margin-right: 50%;
                padding-right: 3em;
            }
        }
    }

    &.style2 {
        text-align: center;

        header {
            display: inline-block;
            background: _palette(bg);
            padding: 2em 3em 2em 3em;
            margin: 0;

            p {
                padding: 0;
            }
        }

        .inner {
            position: relative;
            padding: 40px 0 0px 0;

            &:after {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: 50%;
                height: 100%;
                border-left: solid 1px _palette(border);
            }

            .row {
                position: relative;

                &:before {
                    content: '';
                    display: block;
                    position: absolute;
                    top: 50%;
                    left: 20px;
                    width: calc(100% - 40px);
                    border-bottom: solid 1px _palette(border);
                }
            }

            .image {
                position: relative;
                z-index: 1;
                padding: 20px;
            }
        }
    }

    &.style3 {
        background: _palette(bg);
        padding: 3em;

        header {
            text-align: center;
        }
    }


    &.style4 {
        background: _palette(bg);
        padding: 0;

        svg {
            position: absolute;
            z-index: 0;
        }

        h2 {
            position: relative;
            z-index: 10;
        }

        p {
            position: relative;
            z-index: 10;
        }

        .upper, .lower {
            display: block;
            position: relative;
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 0;
            margin: 0;
        }

        .upper {
            color: _palette(bg);
            background-color: _palette(accent);

            svg {
                bottom: 0;
            }
        }

        .lower{
            color: _palette(accent);
            background-color: _palette(bg);

            svg {
                top: 0;
            }
        }

        &.right {
            svg {
                left: 0;
            }

            h2 {
                left: 0;
                margin-left: 2.4em;
                padding-left: 0.5em;
                border-left: solid 1px _palette(bg);
            }

            p {
                right: 0;
                margin-left: 12em;
            }
        }

        &.left {
            svg {
                right: 0;
            }

            h2 {
                right: 0;
                margin-right: 2.4em;
                padding-right: 0.5em;
                border-right: solid 1px _palette(bg);
            }

            p {
                left: 0;
            }
        }
    }
}