/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/**
 * Paragraphs
 */

/**
 * Elementor adds 1.5em margin bottom to paragraphs. That's great
 * because we don't want paragraphs to be all togeter, we need some
 * spacing between each paragraph.
 *
 * But it's not a good idea to have this margin bottom on the last
 * paragraph of a section. It adds extra spacing that breaks the
 * good design.
 *
 * For example, this looks specially bad on boxes like
 * the ones that have custom icons on "About Us". Comment this
 * CSS rule and you will see how the bottom padding of the boxes
 * look the double space than the top padding.
 *
 * This CSS rule removes that padding ONLY FOR THE LAST PARAGRAPH
 * on a div/section/etc. The rest of the paragraphs keep the margin.
 */
p:last-child{
	margin-bottom: 0;
}

/**
 * Multi-Row Sections
 *
 * Have you ever found yourself adding multiple Inner Section widgets
 * to create a grid? That looks good the most of the times (even when
 * it's semantically incorrect). But there is a BIGGER problem with this:
 * 
 * Let's suppose that you have 3 boxes on the first row, and 2 boxes
 * on the second row (the boxes that have custom icons in the
 * About Us page are a good example). On desktop, it looks like this:
 *
 * [box1] [box2] [box3]
 *  - [box4]  [box5] -
 *
 * (Imagine that the dashes are empty columns).
 *
 * All looks good in Desktop. But on tablet having those 3 columns on
 * 1 single row looks a bit tight, so we decided to have 2 boxes per
 * row. So we end with something like this:
 *
 * [box1] [box2]
 * [box3]
 * [box4] [box5]
 *
 * Oh no!!! See the problem? With the following classes we can add all
 * the boxes on 1 single Inner Section (that is better semantically speaking)
 * and we can control how many columns we want on phones, tablets and desktop.
 *
 * So, we can keep our original layout for desktop, but have this improved
 * layout for tablet:
 * [box1] [box2]
 * [box3] [box4]
 * [box5]
 *
 * HOW TO USE IT:
 * 1) Add one of the following classes to the Inner Section,
 * this controls the alignment of the boxes:
 * .multirow-left, .multirow-center, .multirow-right,
 * .multirow-around or .multirow-between.
 *
 * 2) By default phones will have 1 box per row,
 * but you can change adding the classes:
 * .multirow-phone-2 .multirow-phone-3 ... etc. (up to .multirow-phone-6)
 *
 * 3) Tablets will have the same number of boxes than
 * phones, but if you want to use a different number of
 * columns, use any of the following:
 * .multirow-tablet-2 .multirow-tablet-3 ... etc. (up to .multirow-tablet-6)
 *
 * 4) Desktop will have the same number of boxes than
 * tablets, but if you want to use a different number of
 * columns, use any of the following:
 * .multirow-desktop-2 .multirow-desktop-3 ... etc. (up to .multirow-desktop-6)
 */
.multirow-left .elementor-container{
	flex-wrap: wrap;
	justify-content: flex-start;
}
.multirow-center .elementor-container{
	flex-wrap: wrap;
	justify-content: center;
}
.multirow-right .elementor-container{
	flex-wrap: wrap;
	justify-content: flex-end;
}
.multirow-around .elementor-container{
	flex-wrap: wrap;
	justify-content: space-around;
}
.multirow-between .elementor-container{
	flex-wrap: wrap;
	justify-content: space-between;
}
.multirow-left .elementor-column,
.multirow-center .elementor-column,
.multirow-right .elementor-column,
.multirow-around .elementor-column,
.multirow-between .elementor-column{
	width: 100%;
}
.multirow-phone-2 .elementor-column{
	width: 50%;
}
.multirow-phone-3 .elementor-column{
	width: 33.33%;
}
.multirow-phone-4 .elementor-column{
	width: 25%;
}
.multirow-phone-5 .elementor-column{
	width: 20%;
}
.multirow-phone-6 .elementor-column{
	width: 16.66%;
}

@media( min-width: 768px ) {
	.multirow-tablet-1 .elementor-column{
		width: 100%;
	}
	.multirow-tablet-2 .elementor-column{
		width: 50%;
	}
	.multirow-tablet-3 .elementor-column{
		width: 33.33%;
	}
	.multirow-tablet-4 .elementor-column{
		width: 25%;
	}
	.multirow-tablet-5 .elementor-column{
		width: 20%;
	}
	.multirow-tablet-6{
		width: 16.66%;
	}
}

@media( min-width: 1025px ) {
	.multirow-desktop-1 .elementor-column{
		width: 100%;
	}
	.multirow-desktop-2 .elementor-column{
		width: 50%;
	}
	.multirow-desktop-3 .elementor-column{
		width: 33.33%;
	}
	.multirow-desktop-4 .elementor-column{
		width: 25%;
	}
	.multirow-desktop-5 .elementor-column{
		width: 20%;
	}
	.multirow-desktop-6 .elementor-column{
		width: 16.66%;
	}
}

/**
 * Main Menu
 *
 * Underline parent menu item if currently in a page from submenu.
 */
.elementor-nav-menu--main .current-page-ancestor > a::after{
	opacity: 1 !important;
}

@media( min-width: 768px ) {
	.elementor-location-header .elementor-widget-nav-menu .sub-arrow{
		display: none;
	}
}



/**
 * Latest Posts
 *
 * The boxes from latest posts had a different border-radius than
 * the images inside, making it look bad. This fixes that issue (there
 * was no way to set this in Elementor). This was not very visual on a
 * white background, but it was clear when the box was over a blob. See
 * the Asana task for a screenshot.
 */
.latest-posts article{
	border-top-left-radius: 35px !important;
	border-top-right-radius: 35px !important;
}


/**
 * Impact Boxes
 *
 * This is needed to add the top colored borders.
 */
.impact-boxes .elementor-inner-section .elementor-container{
    flex-wrap: wrap;
}
.impact-boxes .elementor-inner-section .elementor-column{
    width: 100%;
}
.impact-boxes .elementor-inner-section .elementor-widget-wrap{
    overflow: hidden;
}
.impact-boxes .elementor-inner-section .elementor-widget-wrap::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 20px;
}
.impact-boxes .elementor-inner-section .elementor-column:nth-child(3n+1) .elementor-widget-wrap::before{
     background: var(--e-global-color-accent);
}
.impact-boxes .elementor-inner-section .elementor-column:nth-child(3n+2) .elementor-widget-wrap::before{
     background: var(--e-global-color-89443e4);
}
.impact-boxes .elementor-inner-section .elementor-column:nth-child(3n+3) .elementor-widget-wrap::before{
     background: var(--e-global-color-7776893);
}

@media( min-width: 768px ) {
	.impact-boxes .elementor-inner-section .elementor-column{
		width: 50%;
	}
}

@media( min-width: 1025px ) {
	.impact-boxes .elementor-inner-section .elementor-column{
		width: 33.33%;
	}	
}

/**
 * Newsletter Popup
 */
.elementor-popup-modal .gform_ajax_spinner{
	margin-left: 10px;
}