/*Elementor Custom CSS
1. Set browser sizing method to border-box
2. Add the same 20px left and right padding to elementor "sections"
3. Hack to fix how elementor create gaps between columns
*/

/* Use the same method of sizing elements as Elementor does */
body * {
    box-sizing: border-box;
}

/* Elementor - set some default left and right padding on mobile - same as in GeneratePress */
.elementor-top-section.elementor-section-boxed>.elementor-container {
    padding: 0 20px;
}

/* 1. Don't set padding if an Elementor library item is embedded within another section via shortcode */
/* 2. Don't set padding if an Elementor library item is embedded within a standard non-full width page */
.elementor-top-section .elementor-top-section.elementor-section-boxed>.elementor-container,
body:not(.full-width-content) .entry-content .elementor-top-section.elementor-section-boxed>.elementor-container {
    padding: 0;
}

/* 3. Don't set padding if the section has a class of 'nopad' */
.elementor-top-section.elementor-section-boxed.nopad>.elementor-container {
    padding: 0;
}

/* Make Elementor elements expand to fit the full available width. This is due to how Elementor puts padding all the way around columns */
.elementor-section-boxed .elementor-column-gap-default .elementor-row {
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
}

.elementor-section-boxed .elementor-column-gap-narrow .elementor-row {
    width: calc(100% + 10px);
    margin-left: -5px;
    margin-right: -5px;
}

.elementor-section-boxed .elementor-column-gap-extended .elementor-row {
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
}

.elementor-section-boxed .elementor-column-gap-wide .elementor-row {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
}

.elementor-section-boxed .elementor-column-gap-wider .elementor-row {
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px;
}