:root {
    --small-icon: 22px;
    --medium-icon: 32px;
    --big-icon: 42px;
}

/*Icon boxes sizes*/
.icon-box .elementor-widget-container {
    background: var(--e-global-color-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-box img,
.icon-box-html img {
    border-radius: 0 !important;
}

/*Small*/
.icon-box.small img {
    width: var(--small-icon);
}

.icon-box.small .elementor-widget-container,
.icon-box.html.small {
    border-radius: 8px;
    height: calc(var(--small-icon) * 2) !important;
    width: calc(var(--small-icon) * 2);

    /* Quick fix */
    right: 6px;
    position: relative;
}

/*Medium*/
.icon-box.medium img {
    width: var(--medium-icon);
}

.icon-box.medium .elementor-widget-container,
.icon-box.html.medium {
    border-radius: 16px;
    height: calc(var(--medium-icon) * 2) !important;
    width: calc(var(--medium-icon) * 2);
}

/*Big*/
.icon-box.big img {
    width: var(--big-icon);
}

.icon-box.big .elementor-widget-container,
.icon-box.html.big {
    border-radius: 22px;
    height: calc(var(--big-icon) * 2) !important;
    width: calc(var(--big-icon) * 2);
}


/*Icon box colours*/
.icon-box.html.orange,
.icon-box.orange>.elementor-widget-container {
    background-color: var(--e-global-color-9293a5c);
}

.icon-box.html.red,
.icon-box.red>.elementor-widget-container {
    background-color: var(--e-global-color-8ebd197);
}

.icon-box.html.lila,
.icon-box.lila>.elementor-widget-container {
    background-color: var(--e-global-color-4d6ba06);
}

.icon-box.html.pink,
.icon-box.pink>.elementor-widget-container {
    background-color: var(--e-global-color-bb1f7ac);
}

.icon-box.html.blue,
.icon-box.blue>.elementor-widget-container {
    background-color: var(--e-global-color-5648509);
}

.icon-box.html.lagoon,
.icon-box.lagoon>.elementor-widget-container {
    background-color: var(--e-global-color-5d30577);
}

.icon-box.html.green,
.icon-box.green>.elementor-widget-container {
    background-color: var(--e-global-color-a799471);
}

.icon-box.html.lime,
.icon-box.lime>.elementor-widget-container {
    background-color: var(--e-global-color-503d229);
}

.icon-box.html.black,
.icon-box.black>.elementor-widget-container {
    background-color: var(--e-global-color-text);
}

.icon-box.html {
    background: var(--e-global-color-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 767px) {
    /*Big*/
    .icon-box.big img {
        width: var(--medium-icon);
    }

    .icon-box.big .elementor-widget-container,
    .icon-box.html.big {
        height: calc(var(--medium-icon) * 2) !important;
        width: calc(var(--medium-icon) * 2);
    }
}