/**
Theme Name: Method Theme
Author: Method Integration
Author URI: https://www.method.me
Description: This is the child theme of Astra built for Method Integration.
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: method-theme
Template: astra

NOTE
----
To make this css live and overwrite cache, you need to update the version in functions.php

CHANGES
========
2020/07/21 - Errol Elumir - Added new button to look like the card style
2020/09/04 - Errol Elumir - Some update messed up site. Putting in new styles
2020/10/27 - Errol Elumir - Pricing Page Table Styles
2020/11/11 - Errol Elumir - Pricing Page Table Styles Header
2021/01/19 - Errol Elumir - New Palette Colours
2021/02/09 - Errol Elumir - Caron style
2021/04/13 - Errol Elumir - Updated mheader and body text should be greydark
2021/05/26 - Errol Elumir - I hate the mobile menu, get rid of blue colour in its buttons
2021/08/30 - Errol Elumir - Cleaning up pricing table 
2021/10/12 - Errol Elumir - Button Read
*/
:root {
	--mheader:  	#0F1B31;
	--mgreylighter: #EEF5F7;
	--mgreylight: 	#BACAD0;
	--mgrey: 	#545F67;
	--mgreydark: 	#2A394A;

	--mgreenlight:  #A9D9BF;
	--mgreen:  	#007B4A;
	--mgreendark:  	#115B40;

	--mainbluelighter: 	#E5F7FF;
	--mainbluelight: 	#B3E5FF;
	--mainblue: 		#0D71C8;
	--mainbluedark: 	#064499;
	--mainbluedarker: 	#022266;	
}

.disable-lightbox a {
pointer-events: none;
}

.disable-lightbox .et_overlay {
display: none !important;
}

/*-------------UI KIT-----------------*/

/*Links*/
.link {
	color: var(--mainblue) !important;
}

.default-link {
	color: var(--mainblue) !important;
	font-size: 18px !important;
	line-height: 24px;
	transition: all ease 0.3s;
}

.default-link a {
	color: var(--mainblue) !important;
	font-size: 18px !important;
	line-height: 24px;
	transition: all ease 0.3s;
}

.default-link:hover {
	color: var(--mainbluedark) !important;
	stroke: var(--mainblue);
	transition: all ease 0.3s;
}

.arrow-link {
	margin-left: 3px;
	transition: all ease 0.3s;
	position: relative;
	top: 0px;
	left: 3px;
	height: 10px;
	width: 7px;
}

.arrow-color-blue {
	fill:none;
	stroke: var(--mainblue);
}

.caron {
        fill:none;
        stroke: var(--mheader);
        margin-left: 3px;
        position: relative;
        top: 0px;
        left: 6px;
        height: 24px;
        width: 12px;
        stroke-width: 1.2;
}


.default-link:hover .arrow-color-blue {
	stroke: var(--mainbluedark);
}

.link--paragraph-large_margin  {
	padding-top: 3px !important;
}

.link--paragraph-regular_margin  {
	padding-top: 13px !important;
}

/*Buttons*/

/*Button Large*/

.btn-large a {
   	font-size: 16px !important;
	color: #fff;
	
	background: var(--mainblue);
	border-radius: 90px !important;
	font-weight: 600 !important;
	padding: 16px 32px !important;
}


.btn-large a:hover {
	background: var(--mainbluedark);
}

/*Button Read*/

.btn-read a {
	background: rgba(256,256,256,0) !important;
	border: 1px solid var(--mainblue);
	color: var(--mainblue) !important;

	font-size: 16px !important;

	border-radius: 90px !important;
	font-weight: 600 !important;
	padding: 16px 32px !important;
	margin-top: -20px;	
}

.btn-read a:hover {
	background: var(--mainbluedark) !important;
	border: 1px solid var(--mainbluedark) !important;
	color: #FFF !important;
}


/*Button Regular*/
.button-general a {
	padding: 11px 24px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	border-radius: 90px !important;
	transition: all ease 0.3s;
}

.button-general a span span {
	top: -1px;
    position: relative;
}

.button-regular a:hover {
	background: var(--mainbluedark) !important;
}

.button-small a {
	padding: 6px 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}


/*Button Regular Nav*/

.nav-btn {
	margin-top: 10px;
}

.nav-btn a {
	padding: 11px 24px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	border-radius: 90px !important;
	transition: all ease 0.3s;
	background: var(--mainblue);
	color: #fff !important;
    justify-content: center;
}

.nav-btn a:hover {
	background: var(--mainbluedark) !important;
}

.arrow-btn {
	margin-left: 3px;
	transition: all ease 0.3s;
	position: relative;
    top: -1px;
	left: 3px;
}

.arrow-btn-regular {
	fill:none;
	stroke:#fff;
}

/*Button Ghost*/

.button-ghost a {
	background: rgba(256,256,256,0) !important;
	border: 1px solid var(--mainblue);
	color: var(--mainblue) !important;
}

.button-ghost-big a {
	background: rgba(256,256,256,0) !important;
	border: 1px solid var(--mainblue);
	color: var(--mainblue) !important;
	border-radius: 90px !important;
	font-weight: 600 !important;
	padding: 16px 32px !important;
	
}


.button-ghost_green a {
	background: rgba(256,256,256,0) !important;
	border: 1px solid var(--mgreenlight);
	color: var(--mgreenlight) !important;
}

.button-ghost_green a:hover {
	background: var(--mgreenlight) !important;
	border: 1px solid var(--mgreenlight) !important;
	color: #FFF !important;
}

.button-ghost-big_green a {
	background: rgba(256,256,256,0) !important;
	border: 1px solid var(--mgreenlight);
	color: var(--mgreenlight) !important;
	border-radius: 90px !important;
	font-weight: 600 !important;
	padding: 16px 32px !important;
	
}



.button-ghost a:hover {
	background: var(--mainbluedark) !important;
	border: 1px solid var(--mainbluedark) !important;
	color: #FFF !important;
}

.arrow-btn-ghost {
	fill:none;
	stroke: var(--mainblue);
	
}

.button-general a:hover .arrow-btn-ghost {
	stroke:#fff;
}

/*Button White*/

.button-white a {
	background: rgba(256,256,256,0) !important;
	border: 1px solid #fff;
	color: #fff !important;
}

.button-white a:hover {
	background: #fff !important;
	border: 1px solid #fff;
	color: var(--mainblue) !important;
}

.btn--hero_padding {
	padding-top: 18px !important; 	
}

/*Button BG White*/

.button--bg-white a {
	background: rgba(256,256,256,1) !important;
	border: 1px solid #fff;
	color: var(--mainblue) !important;
}

.button--bg-white a:hover {
	background: var(--mgreylighter) !important;
	border: 1px solid var(--mgreylighter);
	color: var(--mainbluedark) !important;
}

.arrow-btn-white {
	fill:none;
	stroke:#fff;
	
}
.button-general a:hover .arrow-btn-white {
	stroke: var(--mainblue) !important;
}

/*Button Card*/
.button-card a {
        background: #FFF !important;
        box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        border-top: 4px solid var(--mainblue);
        color: var(--mainblue) !important;
}

.button-card a:hover {
        background: var(--mgreylighter) !important;
        color: var(--mainbluedark) !important;
}

/* BUTTON with Input fields EEE 2020/09/04 */

.input-blog #form-field-email:focus{
    border-color: var(--mgrey) !important;
    color: var(--mheader) !important;
}

.input-blog .elementor-button {
    background-color: var(--mainblue);
}


/*BUTTONS MARGINS*/

.button-regular_margin {
	padding-top: 20px;
}


/*Cards*/
.card-style-one .elementor-column-wrap {
	background: #FFF;
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	border-top: 4px solid var(--mainblue);
	margin: 12px;
	}

.card-testimonial .elementor-column-wrap {
	background: #FFF;
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	border: 1px solid var(--mgreylight);
	margin: 12px;
}

.card-style-two .elementor-column-wrap {
	box-shadow: 0px 2px 15px rgba(15, 71, 111, 0.11);
	border-radius: 6px !important;
}

.card-step_text p {
    color: var(--mainblue) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600 !important;
    margin-bottom: -6px !important;
    
}
.card-border-green .elementor-column-wrap {
    border-top: 4px solid var(--mgreenlight) !important;
}



/*Titles*/
.h1-title h1 {
	line-height: 60px !important;
color: var(--mheader) !important;
font-weight: 600 !important;
}

.h1-title, .h2-title {
	margin-bottom: 17px !important;
}
.h3-title h3 {
	margin-bottom: 10px !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	color: var(--mheader) !important;
}

.h3--title_list {
	padding-top: 5px !important;
}

.h3-title-card_style_2 {
   margin-bottom: 12px !important;
}

.h3-title-card_style_2 h3 {
	font-size: 18px !important;
	font-weight: 600 !important; 
	color: var(--mheader) !important;
}

.h2-title h2{
	font-size: 32px !important;
	font-weight: 600 !important;
	color: var(--mheader) !important;
	line-height: 1.2 !important;

}



.h3-title-card {
	margin-bottom: 24px !important;
}

.h3-title-card h3{
	font-size: 18px !important;
	font-weight: 600 !important; 
	color: var(--mheader) !important;

}

.h4-title {
	margin-bottom: 16px !important;
}

.h4-title h4{
	font-size: 18px;
	font-weight: 600;
	color: var(--mheader);

}

.member-name_position {
	
	margin-bottom: 5px !important;
	
}


/*Paragraphs*/
p {
	margin-bottom: 0 !important;
}

.paragraph-larger{
	margin-bottom: 16px !important;
}

.paragraph-larger p{
	font-size: 22px;
	line-height:28px;
	color: var(--mgreydark);
	
}

.paragraph--white p{
	color: #fff;
}

.paragraph-regular {
	margin-bottom: 32px !important;
}

.paragraph-regular p {
	font-size: 18px;
	line-height:28px;
	color: var(--mgreydark);
}

.paragraph-block {
	margin-bottom: 32px !important;
}

.paragraph-block p {
	font-size: 18px;
	line-height:24px;
	color: var(--mgreydark);
	margin-bottom: 16px !important;
}

.paragraph-block h2 {
	color: var(--mgreydark);
    font-size: 32px;
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: 600 !important;	
}

.paragraph-block h3 {
	color: var(--mgreydark);
    font-size: 24px;
    margin-top: 25px;
    margin-bottom: 15px;
    font-weight: 600 !important;
}

.paragraph-block h4 {
	color: var(--mgreydark);
    font-size: 20px;
    margin-top: 25px;
    margin-bottom: 15px;
    font-weight: 600 !important;
}

.paragraph-small {
	font-size: 16px;
   line-height:24px;

}

.paragraph-small p {
	font-size: 16px;
   line-height:24px;

}

.paragraph_list ul li {
  color: var(--mgreydark); 
  /* set color of list item text */

  display: inline-block;
  list-style: none; 
  margin-left: 5px;
  /* Give the bullet room on the left hand side */

  padding: 0;
  position: relative;
}

.paragraph_list ul li::before {
  content: url('https://www.method.me/wp-content/uploads/2019/09/blue_dot_list.svg'); 
  /* Unicode of character to precede the list item */

  display: inline-block;
  font-size: 1em; 
  /* use em or % */
 
  left: -1.1225em; 
  /* use em, line up bullet flush with left hand side */

  position: absolute;
  /* Set the bullet positioned absolutely top left */

  top: -3px; 
  /* use em or % */

}

.elementor-widget-testimonial-carousel .elementor-testimonial__text {
	font-size: 18px;
	line-height:28px;
	font-style:normal;
	color: var(--mgreydarker);
}

.elementor-widget-testimonial-carousel .elementor-testimonial__name {
	color: var(--mgreydarker);
    font-size: 18px;
    font-weight: 700;
}

.elementor-widget-testimonial-carousel .elementor-testimonial__title {
	color: var(--mgreydarker);
    font-size: 18px;
    font-weight: 400;
}

.paragraph-testimonials .elementor-swiper-button-next {
    background: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 90px;
    right: -25px !important;
}


.paragraph-testimonials .elementor-swiper-button-prev {
    background: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 90px;
    left: -25px !important;
}

.quote_author p {
	font-size: 22px;
	font-weight: 400;
	color: var(--mainblue);
} 

/* QUOTE - NOTE: YOU NEED TO ADD THE QUOTES ICON ABOVE THE TEXT FIRST  */
.quote_txt {
	margin-top: 20px;
	margin-bottom: 10px !important;
}

.quote_txt p {
	color: var(--mgreydark);
	font-size: 28px;
	font-style: italic;
	line-height: 1.4;
 }

.quote_txt p::after {
    height: 2px;
    width: 77px;
    content: '';
    background: var(--mainblue);
    display: block;
    margin: 20px auto 0 auto;
}


/* JOB POST - Single Template */
.job-post_content h2 {
	font-size: 32px !important;
	font-weight: 600 !important;
	color: var(--mheader) !important;
	margin-top: 20px;
	margin-bottom: 20px;
}

.job-post_content p {
    line-height: 28px;
    margin-bottom: 10px !important;
}

.job-post_content ul {
	margin-left: 20px;
}


.job-post_content li {
    margin-bottom: 9px;
    line-height: 28px;
}

.job-post_content a {
	color: var(--mainblue);
}

/*Links*/


/*Testimonial Card*/
.testimonial-author img {
	width: 72px !important;
}

/*Columns*/

.left-column .elementor-column-wrap {
	padding: 0px 50px 0px 0px !important; 
}

.right-column .elementor-column-wrap {
	padding: 0px 0px 0px 50px !important; 
}

@media (max-width: 768px) {
	.left-column .elementor-column-wrap {
	padding: 0px 0px 24px 0px !important;
	
	}
	.right-column .elementor-column-wrap {
	padding: 0px 0px 0px 0px !important; 
}

	
}

 @media only screen and (min-width: 769px) and (max-width: 1024px){
	.left-column .elementor-column-wrap {
	padding: 0px 18px 0px 0px !important;
}
	 .right-column .elementor-column-wrap {
	padding: 0px 0px 0px 18px !important; 
}

}


/** Media Query **/ 

@media only screen and (max-width: 768px) {
		.h1-title h1 {
	line-height: 1.3 !important;
	color: var(--mheader) !important;
	font-weight: 600 !important;
	font-size: 48px !important;
	}
}

@media (max-width: 544px) {
		.h1-title h1 {
	line-height: 1.2;
	font-size: 30px !important;
	}
}

/* Pricing Cards */ 

.pricing-cards-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media only screen and (max-width: 1024px) and (min-width: 721px) { 
.pricing-cards-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.popular-pricing-column {
    margin: 22px auto 10px auto!important;
    width: 47% !important;
    background: #fff;
}
  .pricing-column {
    margin: 20px auto !important;
    width: 47% !important;
    background: #fff;
}
.column-4 {
    margin: 50px auto 10px auto!important;
    width: 47% !important;
}
} 
 @media only screen and (max-width: 720px) and (min-width: 100px) { 
   .pricing-cards-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.popular-pricing-column { 
    width: 90% !important;
   margin: 20px auto !important;
    }
    .pricing-column{ 
    width: 90% !important;
        margin: 20px auto !important;
    }
} 

@media only screen and (min-width: 1024px) {
    .pricing-card_info {
    text-align: center;
    margin: auto 50px;
}
}

.pricing-column {
-webkit-box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.15);
box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.15);
    margin: 00px 12px 12px 12px;
    width: 50%;
    border-radius: 8px;
    background: #fff;
}

.pricing-card_header {
    background-color: var(--mheader);
    margin: auto;
    padding: 24px 0 6px 0;
    width: 100%;
    border-radius: 3px 3px 0 0;
    margin-bottom: 8px;
}

.pricing-card_header h3 {
    text-align: center;
color: #fff !Important;
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--mgreylight);
}

.pricing-card_header p {
    font-size: 16px;
    font-weight: 300;
    color: var(--mgreendarke);
    
    text-align: center;
    margin-bottom: 0px;
    line-height: 21px;
}
.pricing-card_body .price  {
    text-align: center;
    margin-bottom: -4px;
}


.price-style {
color: var(--mheader) !important;
font-weight: 600 !important;
}

.pricing-card_info {
    text-align: center;
}

.pricing-card_body {
    padding-bottom: 45px;
    border-radius: 0px 3px 3px 3px;
    color: var(--mgreydark);
}

.project-list_container {
    padding: 0 40px;
}

.pricing-card_body li {
    list-style-type: none;
    font-size: 16px;
    font-weight: 400;
    color: var(--mgreydark);
}
.pricing-card_body ul {

    max-width: fit-content;
    margin: auto !important;
}

.price_btn-container  {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 10px;
}

.project-list_title {
    font-weight: 700;
    font-size: 18px;
    color: var(--mheader);
    margin-bottom: 10px !important;
}

.price_btn:hover {
     color: #1769FF;
     background: #ecf3ff;
}

.price_btn {
    text-transform: capitalize;
    background: #ffffff;
    color: #1769FF;
    font-size: 18px;
    text-align: center;
    padding: 11px 75px;
    font-weight: 500;
    border-radius: 50px;
    border: 1px solid #1769FF;
}

.divider_container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.divider {
    /* padding: 40px 0; */
    border-top: 1px solid var(--mgreylight);
    margin-top: 30px;
    width: 100%;
    margin-bottom: 20px;
  
}

.pricing-card_credits {
text-align: center; 
font-weight: 600; 
color: var(--mgreydark); 
font-size: 20px;

margin-bottom: 0px !Important;
}

.pricing-card_credits strong{
box-shadow: inset 0 0px 0 white, inset 0 -1px 0 var(--mgreydark);
}

/* List with Check Icon */ 

.bullet-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0px !important;
    margin-bottom: 0px;
}

.ordered-list {
    padding-left: 0;
    margin-left: 18px !important;
    margin-bottom: 0px;
}
.ordered-list li {
	line-height: 24px;
	margin-bottom: 14px;
	color: var(--mgreydark);
	font-family: "Source Sans Pro", Sans-serif;
}


.ordered-list  li:last-child {
	margin-bottom: 0;
}

.list-inside {
	margin-top: 15px;
}

.bullet-list li {
	background-image: url(https://www.method.me/wp-content/uploads/2019/09/bullet-list.svg);
    background-repeat: no-repeat;
    padding-left: 20px;
	line-height: 24px;
	margin-bottom: 14px;
    background-position-y: 9px;
	color: var(--mgreydark);
	font-family: "Source Sans Pro", Sans-serif;
}

.bullet-list li:last-child {
	margin-bottom: 0;
}

strong {
	color: var(--mheader);
}

/* 2021/08/30 - Errol Elumir - Cleaning up Pricing Tables */
/*
.table-pricing {
    padding: 15px 24px 15px 24px;
    background-color: #FFF;		
    border-style: none;
    border-spacing: 0;
    margin: 0;
    table-layout: auto;
    font-size: 20px;
}
*/
.table-pricing-border { /* 2021/08/30 used */
    background-color: #FFF;		
    border-style: none;
    border-spacing: 0;
	border: none;
    margin: 0;
    table-layout: auto;
    font-size: 20px;
}


.pricing-col-icon { /* 2021/08/30 used */
    width: 10%;
    text-align: center;
}
/*
.pricing-col-text {
    width: 60%;
    text-align: left;
}
.pricing-table-row {
	border: none;
	border-bottom: 1px solid #eee;
	border-left: 1px solid white;
	padding: 4px 0px 4px 0px;
	vertical-align: middle;
}
*/
.pricing-header-row { /* 2021/08/30 used */
	border-width: 0 0 1px 0;
	padding: 20px 20px 20px 20px;
	vertical-align: middle;
}

.pricing-header-mobile { /* 2021/08/30 used */
	vertical-align: middle;
}

.pricing-title-mobile { /* 2021/08/30 used */
    color: var(--mheader);
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: 3px;
    padding-left: 8px;
}
/*
.pricing-title-only {
    color: var(--mheader);
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: 3px;
}
*/
.sticky-th { /* 2021/08/30 used */
    background: #022266;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    color: white;
    height: 73px;
    font-weight: 700;
    font-size: 18px;
    line-height: 1em;
    padding: 15px 24px 15px 24px;
    vertical-align: middle;
    z-index: 10;
}
/*
.table-pricing-title { 
    border-radius: 5px 5px 0 0!important;
    background-color: var(--mainbluedarker);
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    top: 3px;
    line-height: 1em;
    padding: 15px 24px 15px 24px;
    vertical-align: middle;
    margin: 0px;
} */

.table-pricing-titles { /* 2021/08/30 used */
    color: var(--mheader);
    font-weight: 700;
    font-size: 22px;
    position: relative;
    top: 3px;
    padding-left: 8px;
}

.table-integrations-titles {
    color: var(--mheader);
    font-weight: 700;
    font-size: 24px;
    position: relative;
    top: 3px;
    margin-bottom: 0px;
    padding-left: 8px;
}

/* 2021/03/24 - Errol - Search and filter styles */
.searchandfilter ul {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    list-style-type: none;
}


/* 2021/05/26 - Errol - I hate the mobile menu */
.ast-header-break-point .main-header-bar .main-header-bar-navigation .menu-item-has-children>.ast-menu-toggle {
    display: inline-block;
    position: absolute;
    font-size: inherit;
    top: -1px;
    right: 20px;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 0 .907em;
    font-weight: 400;
    line-height: inherit;
    transition: all .2s;
	background-color: #f9f9f9;
	border-color: #f9f9f9;	
}