.roogan-section{
    color: var(--color-txt);
    background: var(--color-bg);
    @extend %vertical-margin;
}
.section-meta span{
    color: var(--color-meta);
}
.section-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.roogan-content{
    max-width: 100%;
    padding: 0;
    width:100%;
    max-width: 250px;
    @include mq('md') {
        max-width: size-by-col(6, 'md');
    }
    @include mq('lg') {
        max-width: size-by-col(6, 'xl');
        padding:0;
    }
}
.roogan-content-small{
    max-width: 100%;
    padding: 0;
    width:100%;
    max-width: size-by-col(5, 'sm');
    @include mq('md') {
        max-width: size-by-col(4, 'md');
    }
    @include mq('lg') {
        max-width: size-by-col(4, 'xl');
        padding:0;
    }
}
.roogan-content-x-small{
    max-width: 100%;
    padding: 0;
    width:100%;
    max-width: size-by-col(4, 'sm');

    @include mq('md') {
        max-width: size-by-col(3, 'md');
    }
    @include mq('lg') {
        max-width: size-by-col(3, 'xl');
        padding:0;
    }
}
.roogan-content-alt{
    max-width: 364px;
    padding: 0;
    width:100%;

    @include mq('md') {
        max-width: size-by-col(6, 'xl');
        padding:0;
    }
    @include mq('lg') {
        max-width: size-by-col(8, 'xl');
    }
}

.section-items .section-item-vertical-rhythm,
.roogan-items .section-item-vertical-rhythm{
    @extend %vertical-margin;
}
.section-head{
    @extend %vertical-margin-x-small;
}

.layout-fa-3 + .rogan-section-gradient-overlay,
.layout-fa-4 + .rogan-section-gradient-overlay,
.layout-fa-5 + .rogan-section-gradient-overlay,
.layout-fa-6 + .rogan-section-gradient-overlay,
.rogan-section-gradient + .wa-2,
.rogan-section-gradient + .wa-3,
.rogan-section-gradient + .wa-4,
.rogan-section-gradient-overlay + .layout-fa-3,
.rogan-section-gradient-overlay + .layout-fa-4,
.rogan-section-gradient-overlay + .layout-fa-5,
.rogan-section-gradient-overlay + .layout-fa-6,
.rogan-section-gradient-overlay + .layout-fa-7,
.rogan-section-gradient-overlay + .layout-fa-8,
.rogan-section-gradient + .wa-2,
.rogan-section-gradient + .wa-3,
.rogan-section-gradient + .wa-4,
.rogan-section-gradient + .wa-5,
.wa-2 + .rogan-section-gradient,
.wa-3 + .rogan-section-gradient,
.wa-4 + .rogan-section-gradient,
.wa-5 + .rogan-section-gradient,
.roogan-newsletter + .roogan-subscribe,
.roogan-subscribe + .roogan-newsletter,
[class*=wa-] + [class*=layout-fa-],
[class*=layout-fa-] + [class*=wa-],
.roogan-section-featured + .roogan-subscribe,
.roogan-section-featured + .roogan-newsletter,
.roogan-subscribe + .roogan-footer,
.roogan-newsletter + .roogan-footer{
    margin-top: -30px;
    @include mq('md') {
        margin-top: -50px;
    }
}


.w-100{
    width: 100%;
}


.roogan-section-separator{
    width: 100%;
    height: 1px;
    background-color: var(--color-txt-01);
    display: block;
    @extend %vertical-margin;
}
.link-view-all{
    display: inline-flex;
    align-items: center;
}

.rogan-section-gradient{
    min-height: 500px;
}
.roogan-subscribe .h6{
    margin-right: 15px;
}
.roogan-subscribe li a{
    border-radius: 6px;
    justify-content: center;
    text-transform: uppercase;
    font-size: 1.4rem;
    padding: 0 15px;
    font-family: var(--button-font);
    font-weight: var(--button-font-weight);
    @extend %animation-main;
    color: #FFF;
    &:before{
        color: #FFF;
    }
}
.roogan-subscribe .justify-content-start li a{
    padding: 0 22px 0 13px;
}
.content-left-oriented .col-12{
    display: flex;
    text-align: left;
    align-items: center;
    .section-embed{
        flex: 0 0 72%;
        display: flex;
        margin-left: 50px;
    }

}
.roogan-newsletter .section-embed{
    input{
        height: 60px;
    }
    input[type=email],
    input[type=text]{
        flex: 0 0 75%;
        margin-right: 3%;
    }
    input[type=submit]{
        flex: 0 0 22%;
    }
}
.content-center-oriented .col-12{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .h3{
        @extend .mb--xl;
    }
    .section-embed{
        max-width: size-by-col(8, 'xl');
        display: flex;
        width: 100%;
        justify-content: center;
    }
    li a{
        width: 130px;
        height: 130px;
        justify-content: center;
        flex-direction: column;
        &:before{
            font-size: 5.4rem;
            margin-right: 0;
            line-height: 1;
        }
    }
}
.roogan-subscribe{
    .justify-content-start .h4 + .section-embed{
        @extend .ml--lg;
    }
}
.roogan-subscribe .content-center-oriented{
    .h4{
        @extend .mb--lg;
    }
}
.roogan-section.roogan-subscribe{
    overflow: hidden;
}
.roogan-parallax{
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}
.roogan-section.roogan-subscribe.subscribe-transparent{
    background: var(--color-txt-005);
    padding: 50px 0;
    height: auto;
}
.layout-fa-2 .owl-stage-outer{


    width:100%;
    @include mq('xl') {
        width: size-by-col(12, 'xl');
    }   
    margin: 0 auto;
}
.layout-fa-2 .owl-stage-outer .roogan-item{

    @include mq('xl') {
        margin-left: -50px!important;
    }
    @include mq('xl') {
        margin-left: -50px!important;
    }

}
.layout-fa-4 .owl-stage-outer{
    width: size-by-col(12, 'xl');   
    margin: 0 auto;
    .owl-item .container{
        @include mq('xl') {
            margin: 0 -50px!important;
        }
    }
}

.section-title,
.widget-title{
    position: relative;
}
.section-title:after{
    content: "";
    height: 12px;
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    background: var(--color-acc);
    opacity: .25;
}
.roogan-custom-content .section-title:after{
    z-index: initial;
}
.section-head-l{
    .roogan-link-special{
        color: var(--color-txt);
        font-size: 1.2rem;
        opacity: .5;
        line-height: 1;
        letter-spacing: 0;
        @extend %animation-main;
        .rf{
            margin-left: -3px;
            @extend %animation-main;
        }
        &:hover{
            opacity: 1;
            .rf{
                transform: translateX(1px);
            }
        }
    }
}