/*--------------------------------------------------------------
  Spacing
--------------------------------------------------------------*/
:root {
    /* spacing values */
    --space-unit: 10px;
    --space-xxxs: calc(0.25 * var(--space-unit));
    --space-xxs:  calc(0.375 * var(--space-unit));
    --space-xs:   calc(0.5 * var(--space-unit));
    --space-sm:   calc(0.75 * var(--space-unit));
    --space-md:   calc(1.25 * var(--space-unit));
    --space-lg:   calc(2 * var(--space-unit));
    --space-xl:   calc(4 * var(--space-unit));
    --space-xxl:  calc(5 * var(--space-unit));
    --space-xxxl: calc(7 * var(--space-unit));

}

/* Mobile vertical spacings */

.mt{
    margin-top:var(--space-sm);
    &--xxxs,
    &--xxs,
    &--xs{
        margin-top:var(--space-xxs);
    }

    &--sm,
    &--md{
        margin-top:var(--space-sm);
    }
    
    &--lg,
    &--xl,
    &--xxl,
    &--xxxl{
        margin-top:var(--space-md);
    }

}

.mb{
    margin-bottom:var(--space-md);
    &--xxxs,
    &--xxs,
    &--xs{
        margin-bottom:var(--space-xxs);
    }

    &--sm{
        margin-bottom:var(--space-sm);
    }
    &--md,
    &--lg,
    &--xl,
    &--xxl,
    &--xxxl{
        margin-bottom:var(--space-md);
    }

}

.pt-xxl{
    padding-top: 20px;
}
/* Medium devices vertical spacings */
@include mq('md') {
    .mt{
        margin-top:var(--space-md);
        &--xxxs,
        &--xxs,
        &--xs{
            margin-top:var(--space-xs);
        }
    
        &--sm{
            margin-top:var(--space-sm);
        }
        &--lg,
        &--md,
        &--xl{
            margin-top:var(--space-md);  
        }
        
        &--xxl,
        &--xxxl{
            margin-top:var(--space-lg);
        }
    
    }
    
    .mb{
        margin-bottom:var(--space-md);
        &--xxxs,
        &--xxs,
        &--xs{
            margin-bottom:var(--space-xxs);
        }
    
        &--sm{
            margin-bottom:var(--space-sm);
        }
        &--md,
        &--lg{
            margin-bottom:var(--space-md);
        }
        &--xl,
        &--xxl,
        &--xxxl{
            margin-bottom:var(--space-lg);
        }
    
    }
    .pt-xxl{
        padding-top: var(--space-lg);
    }
}



@include mq('lg') {
    .mt, .mt--md {
        margin-top: var(--space-md);
    }

    .mt--sm {
        margin-top: var(--space-sm);
    }

    .mt--lg {
        margin-top: var(--space-lg);
    }

    .mt--xl {
        margin-top: var(--space-xl);
    }

    .mt--xxl {
        margin-top: var(--space-xxl);
    }

    .mt--xxxl {
        margin-top: var(--space-xxxl);
    }

    .mb, .mb--md {
        margin-bottom: var(--space-md);
    }
    .mb--xxxs{
        margin-bottom: var(--space-xxxs);   
    }
    .mb--xxs{
        margin-bottom: var(--space-xxs);   
    }
    .mb--xs{
        margin-bottom: var(--space-xs);   
    }
    .mb--sm {
        margin-bottom: var(--space-sm);
    }

    .mb--lg {
        margin-bottom: var(--space-lg);
    }

    .mb--xl {
        margin-bottom: var(--space-xl);
    }

    .mb--xxl {
        margin-bottom: var(--space-xxl);
    }
    .mb--xxxl {
        margin-bottom: var(--space-xxxl);
    }
    .ml--lg{
        margin-left: var(--space-lg);
    }
    .pt-xxl{
        padding-top: var(--space-xxl);
    }
}

.m--auto{
    margin-left: auto;
    margin-right: auto;
}
.mb--0{
    margin-bottom: 0 !important;
}
.mr--0{
    margin-right: 0 !important;
}


.inner{
    &--padding-xl{
        padding: 60px 0 60px;
    }
    &--padding-b-0{
        padding-bottom: 0 !important;
    }
    @include mq('lg') {
        &--padding-xl{
            padding: 100px 0 100px;
        }
        &--padding-b-0{
            padding-bottom: 0;
        }
    }
}
.m--media-special{
        margin-bottom: 110px !important;

    @include mq('md') {
        margin-bottom: 120px !important;
    }
    @include mq('lg') {
        margin-bottom: 140px !important;
    }
    .entry-media{
        margin-bottom: -100px;
    }
}
.rogan-section-gradient.h-auto{
    min-height: auto;
}
.row .p-l-50{
    padding-left: 0;
    @include mq('md') {
        padding-left: 15px;
    }
    @include mq('lg') {
        padding-left: 50px;
    }
}