/*
 Theme Name:     Child Theme for SparcPay
 Author:         MoreSALES
 Author URI:     https://moresales.ca
 Template:       Divi
 Version:        1.0
*/

/*-----------------------------------------------*/
/*-----  Root Variables  -----*/
/*-----------------------------------------------*/

:root {
    /* Colour Palette */
        --blue: #0E2B62;
        --sunshine: #ffe340;
        --slate:#313131;
        --cloud:#f3f3f3;
        --off-white:#f7f7f7;
        --almost-black:#1f1f1f;
    
    /* Fonts */
        --fs-1: clamp(2rem, 5vw, 3.8rem); /*60.8px*/
        --fs-2: clamp(2rem, 5vw, 3.3rem);  /*48px*/
        --fs-3: clamp(1.7rem, 3vw, 3rem);  /*44.8px*/
        --fs-4: clamp(1.5rem, 2vw, 2.8rem);  /*40px*/
        --fs-5: clamp(1.2rem, 2vw, 2.4rem);  /*32px*/
        --fs-6: clamp(1rem, 2vw, 2rem);  /*36px*/
        --fs-b: clamp(.8rem, 1vw, 1rem);  /*16px*/
    }
    
/*-----------------------------------------------*/
/*-----  Set Heading Defaults  -----*/
/*-----------------------------------------------*/

/* Change colours by adjusting the variable above and selecting it in the color: variable below */
    .et_pb_text h1 {font-size: var(--fs-1);color: var(--slate);font-weight: 600;}
    .et_pb_text h2, .et_pb_post_content h2,.et_pb_text h3, .et_pb_post_content h3, .et_pb_text h4, .et_pb_post_content h4, .et_pb_text h5, .et_pb_post_content h5, .et_pb_text h6, .et_pb_post_content h6 {
        color: var(--slate);
        font-weight: 400;
        margin-bottom: 20px;
        line-height: 1.5;
    }
    .et_pb_text h2, .et_pb_post_content h2 {
        font-size: var(--fs-2);
        font-weight: 600;
    }
       .et_pb_text h3, .et_pb_post_content h3 {
        font-size: var(--fs-3);
        font-weight: 600;
    }
    .et_pb_text h4, .et_pb_post_content h4 {
        font-size: var(--fs-4);
        font-weight: 600;
    }
    .et_pb_text h5, .et_pb_post_content h5 {
        font-size: var(--fs-5);
        font-weight: 600;
    } 
    .et_pb_text h6, .et_pb_post_content h6 {
        font-size: var(--fs-6);
        font-weight: 600;
    } 
    
    body {font-size: var(--fs-b);}
    .et_pb_post_content p {
        margin-bottom: 20px;;
    }

/*-----------------------------------------------*/
/*-----  Set Divi Defaults  -----*/
/*-----------------------------------------------*/

/*----- Set Defaul Button Styling -----*/
.et_pb_button {
    font-size: var(--fs-6);
}

/*----- Set Divi Module Margin -----*/
.et_pb_module {
    margin-bottom:0;
    margin-top:0;
}

/*----- Set Divi Text to Not Break -----*/
.et_pb_text {
    word-wrap: initial!important;
}

/*----- Vertically Center Modules when Equal Columns are Checked -----*/
.et_pb_equal_columns >.et_pb_column {
    margin-top:auto;
    margin-bottom:auto;
    }

/*----- Set menu breakpoints: Make sure to add correct classes to Divi sections -----*/

@media (max-width: 1075px) {
    #et_mobile_nav_menu {
    display: block;
    }
    
   #top-menu {
    display: none;
    }
    .et_mobile_menu {
    background: var(--slate);
    }
}

/*-----------------------------------------------*/
/*-----  Header  -----*/
/*-----------------------------------------------*/
#main-header {
    box-shadow: none;
    background: none;
 }

 @media (min-width:981px) {
    .lsm-page-title {
        margin-top: -100px;
    }
 }
/*-----------------------------------------------*/
/*-----  Main Menu  -----*/
/*-----------------------------------------------*/

/*----- Logo -----*/
.et_header_style_left .logo_container {
    margin-top: 15px;
}

@media (max-width:980px) {
    .et_header_style_left .logo_container {
        margin-top: 0;
    }
}

#top-menu li a, #top-menu li a:hover, #top-menu li.current-menu-ancestor>a {
    color: #fff;
}

/*----- Get Started Button -----*/
#top-menu .lsm-menulink-getstarted a {
    color: var(--slate);
}

#top-menu .lsm-menulink-getstarted a:hover {
    color: var(--blue);
}

#top-menu li.current-menu-item.lsm-menulink-getstarted>a {
    color: var(--almost-black);
}

.et-fixed-header #top-menu li.current-menu-item.lsm-menulink-getstarted>a {
    color: var(--almost-black) !important;
}

#top-menu li.lsm-menulink-getstarted {
    background-color:  var(--sunshine);
    padding: 15px 25px 0;
    margin-left: 15px;
}

.et_header_style_left #et-top-navigation nav>ul>li.lsm-menulink-getstarted>a {
    padding-bottom: 15px;
}

#top-menu li.current-menu-item>a {
    color: var(--sunshine);
}

/*----- Sticky Header Bar -----*/
@media (min-width:981px) {
.et-fixed-header #top-menu .lsm-menulink-getstarted a {
    color: var(--slate) !important;
}

.et-fixed-header #top-menu li a {
    color: #fff !important;
}

#main-header.et-fixed-header {
    padding-bottom: 20px;
}
}

/*-----------------------------------------------*/
/*-----  SubMenu  -----*/
/*-----------------------------------------------*/


/*-----------------------------------------------*/
/*-----  Mobile Menu  -----*/
/*-----------------------------------------------*/

/*----- Remove extra spacing under header on Mobile -----*/
@media (max-width:1075px) {
    #page-container #main-header {
        background-color: var(--slate);
    }

    .mobile_nav .mobile_menu_bar:before {
        color: #fff;
    }
    .et_header_style_left #logo {
        max-height: 54%;
    }
    .et_header_style_left .logo_container {
        margin-top: 0;
    }
}

/*----- Change Divi hamburger menu to a different icon when open (Any icon can be used by changing the content) -----*/
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
}

/*----- Make mobile menu full width and full height -----*/
#mobile_menu.et_mobile_menu {
    min-width: 100vw;
    margin-left: -10vw;
 }

/*----- Set dropdown menu on Mobile -----*/
#mobile_menu.et_mobile_menu li a {
    color: #fff;
}

/*-----------------------------------------------*/
/*-----  Blog  -----*/
/*-----------------------------------------------*/

/* Post title on Blog page */
.blog h2.entry-title {
    line-height: 1.2em;
}
/* Style Post Titles */
.post-template-default .lsm-page-title .et_pb_text_inner h1 {
    font-size: var(--fs-2);
    color: var(--slate);
    font-weight: 700;
    padding: 20px 25px;
    background-color: var(--sunshine);
    display: inline-block;
}

/*----- Homepage Blog layout -----*/
@media only screen and (min-width: 981px) {
	.home .et_pb_posts .et_pb_post img,
	.home .et_pb_posts .et_overlay {
		width: 38%;
		height: auto !important;
		margin-right: 4%;
		float: left;
	}
	.home .et_pb_posts .entry-title,
	.home .et_pb_posts .post-meta,
	.home .et_pb_posts .post-content { 
	    float: right; 
	    width: 58%; 
	}
	body.rtl.home .et_pb_posts .et_pb_post img,
	body.rtl.home .et_pb_posts .et_overlay {
		float: right;
		margin-left: 4%;
		margin-right: 0;
	}
	body.rtl.home .et_pb_posts .entry-title,
	body.rtl.home .et_pb_posts .post-meta,
	body.rtl.home .et_pb_posts .post-content { 
	    float: left; 
	}
}

.home h2.entry-title {
    font-size: 2rem;
    line-height: 1.1;
}

.home .et_pb_posts a.more-link {
    border: 0;
    background: linear-gradient(#ffe340, #ffe340) 0 80% / 6em 10px no-repeat;
    color: var(--slate);
    margin-bottom: -10px;
    padding: 0 0.3em !important;
    font-size: 1rem;
    text-transform: capitalize;
}

.home .et_pb_posts a.more-link:hover {
    border-color: #1f1f1f !important;
}
/*-----------------------------------------------*/
/*-----  Page Content  -----*/
/*-----------------------------------------------*/

/*----- Add Padding to images -----*/
.lsm-image-left-padding.wp-block-image img {
	padding-left:15px;
}


/*----- Contact Page Form Elements -----*/
body:not(.et-fb) .rv_element { 
    display: none; 
}

.et_pb_button.rv_button_opened:after { 
    content:"\32"; 
}

.et_pb_button.rv_button_closed:after { 
    content:"\33"; 
}

/*----- QB Learn Page Elements -----*/
body:not(.et-fb) .rv_elementqb { 
    display: none; 
}

.et_pb_buttonqb.rv_buttonqb_opened:after { 
    content:"\32"; 
}

.et_pb_buttonqb.rv_buttonqb_closed:after { 
    content:"\33"; 
}

/*----- Logo Row Buttons -----*/
.lsm-row-logos a {
    border: 0;
    background: linear-gradient(#ffe340, #ffe340) 0 80% / 100% 10px no-repeat;
    color: var(--slate);
    margin-bottom: -16px;
    padding: 0 0.3em !important;
    font-size: 1.2rem;
    font-weight: 500;
}


/*----- Hompage Yellow Box Titles -----*/

.lsm-title-yellowbox h6 {
    margin-bottom: 0;
    padding: 10px;
    font-size: clamp(1rem, 2vw, 1.5rem);
    line-height: 1.6rem;
}

/*move and position the Text module over the center of the Image module*/
.lsm-text-over-image > .et_pb_text {
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -45%);
	z-index: 10;
	width: 60%;
	transition: opacity 0.3s ease-in-out;
}

@media (min-width:630px) and (max-width:980px) {
    .lsm-text-over-image > .et_pb_text {
        width: 30%;
    }
}

/*add an optional overlay over the image*/
.lsm-text-over-image > .et_pb_image .et_pb_image_wrap:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 9;
	transition: opacity 0.3s ease-in-out;
	opacity: 0.3; /*make this 0 for hover reveal effect*/
}

/*----- Pricing table -----*/
.lsm-compare-table a {
    color: var(--slate);
    text-decoration: underline;
}

.lsm-pricing-table table {
    width: 100%;
    border-bottom: 1px solid var(--cloud);
  }

.lsm-pricing-table th {
    background-color: var(--sunshine);
    color: var(--slate);
    height: 70px;
    text-align: left;
    padding: 1.3rem 1rem;
}

.lsm-pricing-table th.center,.lsm-pricing-table td.center  {
    text-align: center;
}

.lsm-pricing-table td {
   height: 45px;
   text-align: left;
   padding: 2rem 1rem;
   border-left: 1px solid var(--cloud);
   border-right: 1px solid var(--cloud);
} 

.lsm-pricing-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

/*----- Check Icon -----*/
.lsm-pricing-table span.check::before {
    font-family: 'ETMODULES';
    content: '\52';
    color: #000;
    font-size: 1rem;
    background-color: #ffe340;
    border-radius: 50%;
}

/*----- Comparison Table-----*/
.lsm-compare-table table {
    border: 1px solid var(--cloud)
}

.lsm-compare-table tr {
    border-bottom: 1px solid var(--cloud);
}

.lsm-compare-table td {
    padding: 2rem 1rem;
}

.lsm-compare-table th {
    background-color: var(--sunshine);
    color: var(--slate);
    height: 70px;
    text-align: left;
    padding: 1.3rem 1rem;
}

.lsm-compare-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

/*----- FAQ -----*/
.lsm-faq h5 {
    margin-bottom: 0;
    font-size: var(--fs-6);
}

/*----- White Underline Button -----*/
body #page-container .et_pb_section a.lsm-btn-whiteline {
    background: linear-gradient(white, white) 0 80% / 100% 10px no-repeat;
    border: 0;
    color: var(--slate);
    margin-bottom: -10px;
    padding: 0 0.3em !important;
    font-size: 1.2rem;
}


/*----- Yellow Underline Button -----*/
body #page-container .et_pb_section a.lsm-btn-yellowline {
    border: 0;
    background: linear-gradient(#ffe340, #ffe340) 0 80% / 100% 10px no-repeat;
    color: var(--slate);
    margin-bottom: -10px;
    padding: 0 0.3em !important;
    font-size: 1.2rem;
}

body #page-container .et_pb_section a.lsm-btn-yellowline-banner {
    border: 0;
    background: linear-gradient(#ffe340, #ffe340) 0 75% / 100% 10px no-repeat;
    color: var(--slate);
    margin-bottom: -10px;
    padding: 0 0.3em !important;
    font-size: 1rem;
}

body #page-container .et_pb_section a.lsm-btn-yellowline-banner:hover {
    background: linear-gradient(#ffffff, #ffffff) 0 75% / 100% 10px no-repeat;
}

/* Style Page Titles */
.lsm-page-title .et_pb_text h1 {
    font-size: var(--fs-1);
    color: var(--slate);
    font-weight: 700;
    padding: 20px 25px;
    background-color: var(--sunshine);
    display: inline-block;
}

/*----- CTA Button -----*/
a.et_pb_button.lsm-cta-button, a.et_pb_button.lsm-cta-button:hover {
    background: linear-gradient(white, white) 0 80% / 100% 10px no-repeat;
    border: 0;
    color: var(--slate);
    margin-bottom: -10px;
    padding: 0 0.4em !important;
}
a.et_pb_button.lsm-cta-button:hover {
    background: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)) 0 80% / 100% 10px no-repeat;
}

.et_pb_button.lsm-cta-button:hover {
    border-bottom: 5px var(--slate) solid;
}

.et_pb_button.lsm-cta-button:hover::after, .et_pb_button.lsm-cta-button::after {
    content: '';
}

/*----- Testimonials -----*/
.et_pb_slider .et_pb_slide_image,.et_pb_slider .et_pb_slide_video {
    width: 30%;
}

.et_pb_slider .et_pb_slide_with_image .et_pb_slide_description {
    width: 65%;
}

/*----- Yellow Icon Circles -----*/


.et_pb_section.lsm-section-benefits .et_pb_icon_wrap span.et-pb-icon {
    font-size: 2.5rem !important;
    color: var(--slate);
    background-color: var(--sunshine);
    padding: 2rem;
    border-radius: 50%;
}
/*-----------------------------------------------*/
/*-----  Footer  -----*/
/*-----------------------------------------------*/

#footer-widgets {
    padding: 4% 0 3%;
}

.et_pb_gutters3 .footer-widget, .et_pb_gutters3.et_pb_footer_columns2 .footer-widget .fwidget {
    margin-bottom: 0 !important;
}

.footer-widget .wp-block-image {
    margin: 0;
    padding: 0;
}

#footer-widgets .footer-widget li::before  {
    list-style: none;
    border: 0;
}
#footer-widgets .footer-widget li.menu-item  {
    font-size: 1.2rem;
    border: 0;
}

#footer-widgets .footer-widget li.menu-item a  {
    border: 0;
    background: linear-gradient(#ffe340, #ffe340) 0 90% / 100% 8px no-repeat;
    color: var(--slate);
    margin-bottom: -10px;
    padding: 0 0.3em !important;
}   

/* ------- Vertical Footer Menu (Make sure to add the lsm-vert-menu class to the footer menu in Divi -------- */

/* remove default 11px padding on each side of list items */
.lsm-vert-menu .et-menu > li {
	padding-left: 0px;
	padding-right: 0px;
}

/* make the menu items fullwidth and add space between them */
.lsm-vert-menu nav ul li {
	display: block;
	width: 100%;
	margin: 10px 0;
}

/* Hide vertical menu on mobile */
@media (max-width: 980px) {
.lsm-vert-menu {
    display: none;
}
}

/*-----------------------------------------------*/
/*-----  Gravity Forms  -----*/
/*-----------------------------------------------*/

.gform_heading {
    display: none;
}

.gform_wrapper.gravity-theme textarea, .gform_wrapper.gravity-theme input[type=email], .gform_wrapper.gravity-theme input[type=text], .gform_wrapper.gravity-theme input[type=tel] {
    background-color: #fff;
    font-weight: 700;
    border:1px solid #ddd;
    border-radius: 4px;
}

.gform_wrapper.gravity-theme .gform_footer input {
    background-color: var(--sunshine);
    color: var(--slate);
    border: 0;
    font-weight: 500;
    padding: 10px 20px;
    font-size: 1rem;
}

.gform_wrapper.gravity-theme .gform_footer input:hover {
    opacity: 0.8;
}

.lsm-form-asterisk {
    padding-top: 30px;
}

.gform_wrapper .gform_footer input[type="submit"]:hover {
    cursor: pointer;
}


/*-----------------------------------------------*/
/*-----  Woocommerce  -----*/
/*-----------------------------------------------*/