/*!
 * fields/section.less
 *
 * Copyright 2016 Achraf Chouk
 * Achraf Chouk (https://github.com/crewstyle)
 */

.olz-wrap.olz-section-field {
    .olz-main-nav {
        background-color: transparent;
        background-image: none;
        box-shadow: none;
    }

    #poststuff {
        max-width: 100%;
        min-width: 100%;
        padding: 0;
    }
}

.olz-field-content.section {
    font-family: @fontmain;
    font-size: 0;
    margin: 0;
    padding: 100px 25px 160px;
    position: relative;

    h1 {
        font-size: 32px;
        font-weight: 400;
        line-height: 34px;
        padding: 0 15px;
        text-align: center;
        text-shadow: 0 2px 4px fade(@black, 50%);
    }

    &.green {
        background-color: @primary;
        background-image: url(../img/section-square.png);
        box-shadow: inset 0 -14px 4px -10px fade(@black, 30%);
        color: @white;
        margin-top: -60px;
        padding-top: 160px;
        text-align: center;

        h1, h2 {
            color: @white;
            position: relative;
            z-index: 1;
        }

        a.button {
            font-size: 16px;
            margin-top: 30px;
            position: relative;
            z-index: 1;
        }

        small {
            bottom: 5px;
            color: @white;
            position: absolute;
            right: 0;
            z-index: 1;
        }

        &:before {
            bottom: 0px;
            background-image: url(../img/bg.png);
            background-position: 50% 0;
            background-repeat: no-repeat;
            background-size: cover;
            content: "";
            left: 0;
            position: absolute;
            right: 0;
            top: -61px;
            z-index: 0;
        }
    }

    &:last-child {
        padding-bottom: 40px;
    }

    .olz-section {
        clear: both;
        display: block;
        font-size: 18px;
        line-height: 20px;
        margin: 0 auto 100px;
        max-width: 932px;
        text-align: left;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        .svg {
            float: right;
            width: 180px;

            object {
                height: auto;
                max-width: 100%;
                width: 180px;

                svg {
                    height: 140px;
                    width: 180px;
                }
            }
        }

        .text {
            margin-right: 200px;

            p {
                font-size: 14px;
                margin: 0;
            }
        }

        &.odd {
            .svg {
                float: left;
            }

            .text {
                margin-left: 200px;
                margin-right: 0;
            }
        }

        &:last-child {
            margin-bottom: 40px;
        }
    }
}

#poststuff .olz-field-content.section {
    h2 {
        font-size: 22px;
        line-height: 30px;
        margin: 0 0 20px;
        padding: 0;

        a {
            color: @main;
            text-decoration: none;
        }
    }
}