/*
 Theme Name:  Divi Child Theme
 Theme URI:    https://divilife.com
 Description:  Child Theme for Divi
 Author:       Tim Strifler
 Author URI:   https://divilife.com
 Template:     Divi
 Version:      1.0.0
*/


/*****This snip aligns all content vertically*****/
.ds-vertical-align { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
}
/*****End Snip*****/

/*****Keep pages from horizontally scrolling ever*****/
#page-container {
    overflow-x: hidden;
}
/*****End Snip*****/

/*****This snip allows us to keep column structure through responsive breakpoints*****/
@media only screen and (max-width: 980px) {
 
.two-columns .et_pb_column {
width: 50%!important;
}
 
.three-columns .et_pb_column {
width: 33.333%!important;
}
 
.four-columns .et_pb_column {
width: 25%!important;
}

.one-column .et_pb_column {
width: 100%!important;
}
	
.two-column .et_pb_column {
width: 50%!important;
}

.three-column .et_pb_column {
width: 33.333%!important;
}
}
/*****End Snip*****/

/*****This allows us to reorder column structure on responsive design*****/
@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}
 
/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}
 
.second-on-mobile {
-webkit-order: 2;
order: 2;
}
 
.third-on-mobile {
-webkit-order: 3;
order: 3;
}
 
.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
 
}
/*****End Snip*****/

/* === Tab Icons Starts Here ===*/
.et_pb_tabs.icon-tabs {
 border: none;
}
 
.icon-tabs .et_pb_tabs_controls li {
 border-right: none;
}
 
.icon-tabs ul.et_pb_tabs_controls {
 background-color: transparent;

}
.icon-tabs img.alignleft {
 margin-right: 70px;

}
.icon-tabs .et_pb_all_tabs {
 border-top: none;
}

.icon-tabs .et_pb_tabs_controls li {
 width: 20% !important;
}
.icon-tabs .et_pb_tabs_controls li a {
 width: 100% !important;
 text-align:center;
}
.icon-tabs .et_pb_tab_active a {
 color: #051450 !important;
}

.icon-tabs .et_pb_tabs_controls li a:before {
 display:block;
 padding-top: 10px;
 padding-bottom: 10px;
}
 
ul.et_pb_tabs_controls::after { 
border-top: none !important;
} 
 
.et_pb_tabs .et_pb_all_tabs .et_pb_tab {
background-color: #F5F6F8;
}
 
/*
* === Change Icons Here ===
*/
 
.icon-tabs .et_pb_tab_0 a:before {
 content: url(https://gogetolive.com/wp-content/uploads/2019/12/PL-Icon-A-Rating.png) ;
}
.icon-tabs .et_pb_tab_1 a:before {
 content: url(https://gogetolive.com/wp-content/uploads/2020/01/OLIVE-Icon-Unchanging.png);
}
.icon-tabs .et_pb_tab_2 a:before {
 content: url(https://gogetolive.com/wp-content/uploads/2019/12/PL-Icon-Transfer.png);
}
.icon-tabs .et_pb_tab_3 a:before {
 content: url(https://gogetolive.com/wp-content/uploads/2019/12/PL-Icon-Olive-the-Power.png);
}
.icon-tabs .et_pb_tab_4 a:before {
 content: url(https://gogetolive.com/wp-content/uploads/2019/12/PL-Icon-Simplicity-is-Bliss.png);
}
.icon-tabs .et_pb_tab_5 a:before {
 content: url(https://gogetolive.com/wp-content/uploads/2019/12/PL-Icon-Thrifty.png);
}
.icon-tabs .et_pb_tab_6 a:before {
 content: url(https://gogetolive.com/wp-content/uploads/2019/12/PL-Icon-Thrifty.png);
}
 
/*
* === Mobile Styles ===
*/
@media (max-width: 768px) {
 
.icon-tabs .et_pb_tabs_controls li {
 width: 100% !important;
}
 
.icon-tabs .et_pb_tabs_controls {
 padding: 0 !important;
}
 
.icon-tabs .et_pb_tabs_controls li {
 margin-bottom: 35px;
}
}
/* * === Tab Icons Ends Here === * */

/**scroll anchor**/
.et_pb_button[href^="#anchor"] {
	width: 100%;
}

.et_pb_column.active {
    background-image: initial;
    background-color: #f5f6f8;
    border-bottom-width: 5px;
    border-bottom-color: #00dcc8;
}

/**compare_select**/
#compare_select {
	width: 100%;
    margin-bottom: 20px;
    border-radius: 10px;
    font-size: 20px;
    padding: 10px 15px;
    background: #5028f0;
    color: #fff;
	-webkit-appearance:none;
	background-image: url(/wp-content/themes/Divi-Child-Theme/assets/images/chevron-arrow-down.png);
    background-position: calc(100% - 10px) 50%;
    background-size: 16px;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
	#compare_select {
		display: none;
	}
}

.tabs-nav li span img {
	max-height: 20px;
	display: block;
}

#compare_select, .tabs-table .tabs-nav li, .tabs-table .tabs-content table tr th p {
	font-family: 'laca medium italic',Helvetica,Arial,Lucida,sans-serif;
}

.tabs-table .tabs-content {
	font-family: 'laca book',Helvetica,Arial,Lucida,sans-serif;
}

@media (max-width: 1120px) {
	.tabs-table .tabs-content table tr th p {
		font-size: 80%;
	}
}

@media screen and (max-width: 767px) {
	.tabs-table .tabs-content table tr th:not(:first-child) p {
		right: 50%;
		margin-right: -8px;
	}
}

.dollar .percent-value:before { content:'$';}

.et-l.et-l--footer {
	position: relative;
	z-index: 999;
}

.column {
  float: left;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* et_pb_equal_columns */
.et_pb_equal_columns .et_pb_with_border {
	position: relative;
	height: 100%;
}

sup {
	vertical-align: super;
	font-size: 25%;
}

body .gform_wrapper .gform_body {
	color: #051450;
	font-weight: 300;
}

body .gform_wrapper .gform_body input {
    font-size: 14px !important;
	color: #051450;
	padding: 20px !important;
	border: none !important;
	border-radius: 3px;
}

body .gform_wrapper .gform_footer input[type=submit] {
    font-size: 16px !important;
	text-transform: uppercase;
	background-color: #4b1ed2;
	color: #ffffff;
	padding: 10px 50px !important;
	border: none !important;
	border-radius: 3px;
	text-align: right;
	letter-spacing: 1px;
}

body .gform_wrapper .gform_footer input[type=submit]:hover {
    color: #ffffff;
  	box-shadow: 0px 0px 6px #4b1ed2;
}

/*-----------------------------------------------*/ 
/*-----Scrolling Module Carousel by Divi Soup----*/ 
/*-----------------------------------------------*/


/*Carousel settings, adjust these values only*/

:root {
    --or-module-number: 18; /*Your TOTAL number of modules, so if you have 8 modules duplicated, this number should be 16*/
    --or-columns-desktop: 6; /*The number of modules you want displayed at any one time on desktop*/
    --or-columns-tablet: 3; /*The number of modules you want displayed at any one time on tablet*/
    --or-columns-mobile: 1; /*The number of modules you want displayed at any one time on mobile*/
    --or-speed-desktop: 30s; /*The speed you want your carousel to move on desktop (increase value for slower, decrease for faster)*/
    --or-speed-tablet: 30s; /*The speed you want your carousel to move on tablet (increase value for slower, decrease for faster)*/
    --or-speed-mobile: 30s; /*The speed you want your carousel to move on mobile (increase value for slower, decrease for faster)*/
}

/**************************************************/
/*You do not need to edit anything below this line*/
/**************************************************/

/*Variables for desktop*/

@media all and (min-width: 981px) {
    :root {
        --or-column-width: auto;
        --or-module-width: calc(100vw / var(--or-columns-desktop));
        --or-column-animation: calc(var(--or-module-width) - (var(--or-module-width) * 2));
        --or-scroll-speed: var(--or-speed-desktop);
    }
}


/*Variables for tablets*/

@media all and (max-width: 980px) {
    :root {
        --or-column-width: auto;
        --or-module-width: calc(100vw / var(--or-columns-tablet));
        --or-column-animation: calc(var(--or-module-width) - (var(--or-module-width) * 2));
        --or-scroll-speed: var(--or-speed-tablet);
    }
}


/*Variables for mobile*/

@media all and (max-width: 479px) {
    :root {
        --or-module-width: calc(100vw / var(--or-columns-mobile));
        --or-scroll-speed: var(--or-speed-mobile);
    }
}


/*Hide the row overflow*/

.or-carousel {
    overflow: hidden;
}


/*Define the grid and apply animation*/

.or-carousel .et_pb_column {
    display: grid;
    grid-template-columns: repeat(var(--or-module-number), var(--or-module-width));
    width: var(--or-column-width);
    -webkit-animation: scroll var(--or-scroll-speed) linear infinite;
    animation: scroll var(--or-scroll-speed) linear infinite;
}


/*Apply the module width*/

.or-carousel .et_pb_module {
    width: var(--or-module-width) !important;
}


/*Define the animation*/

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(var(--or-column-animation) * (var(--or-module-number) / 2)));
        transform: translateX(calc(var(--or-column-animation) * (var(--or-module-number) / 2)));
    }
}

@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(var(--or-column-animation) * (var(--or-module-number) / 2)));
        transform: translateX(calc(var(--or-column-animation) * (var(--or-module-number) / 2)));
    }
}


/*Pause animation on hover*/

.or-carousel .et_pb_column:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

/*-----------------------------------------------*/ 
/*---End Scrolling Module Carousel by Divi Soup--*/


/*---Info Icon Hover Module--*/
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #ffffff;
  color: #051450;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top:-150%;
  left: 500%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 2px 2px 4px #051450;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 50%;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent; 
  border-right:7px solid #051450;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/*---Info Icon Hover Module CENTERED*/
.tooltip-center {
  position: relative;
  display: inline-block;
}

.tooltip-center .tooltiptext-center {
  visibility: hidden;
  width: 300px;
  background-color: #ffffff;
  color: #051450;
  text-align: center;
  border-radius: 6px;
  padding: 7px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: -400%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 2px 2px 4px #051450;
}

.tooltip-center .tooltiptext-center::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: 5px solid;
  border-color: #051450 transparent transparent transparent;
}

.tooltip-center:hover .tooltiptext-center {
  visibility: visible;
  opacity: 1;
}

/* Avatar Display  CSS */

/*Set the image postion and width*/
.ds-avatar-grid .ds-avatar {
    width: 30px;
    float: left;
    margin-right: 15px;
}
/*Make the image round - remove this declaration if you want a square image*/
.ds-avatar-grid .ds-avatar img {
    border-radius: 50%;
}
/*Clear the float so the excerpt sits below the avatar*/
.ds-avatar-grid .post-content {
    clear: left;
}

/*Set the image postion and width*/
.ds-avatar-fullwidth .ds-avatar {
    width: 30px;
    float: left;
    margin: 30px 15px 0 0;
}
/*Make the image round - remove this declaration if you want a square image*/
.ds-avatar-fullwidth .ds-avatar img {
    border-radius: 50%;
}
/*Clear the float so the excerpt sits below the avatar*/
.ds-avatar-fullwidth .post-content {
    clear: left;
}


.ds-avatar {
    width: 30px;
    float: left;
    margin-right: 15px;
}
/*Make the image round - remove this declaration if you want a square image*/
.ds-avatar img {
    border-radius: 50%;
}

/*-----------------------------------------------*/ 
/*-----Scrolling Module Carousel----*/ 
/*-----------------------------------------------*/
/*Carousel settings, adjust these values only*/
:root {
	--ds-module-number: 62; /*Your TOTAL number of modules, so if you have 8 modules duplicated, this number should be 16*/
    --ds-columns-desktop:9; /*The number of modules you want displayed at any one time on desktop*/
    --ds-columns-tablet: 6; /*The number of modules you want displayed at any one time on tablet*/
    --ds-columns-mobile: 3; /*The number of modules you want displayed at any one time on mobile*/
    --ds-speed-desktop: 90s; /*The speed you want your carousel to move on desktop (increase value for slower, decrease for faster)*/
    --ds-speed-tablet: 90s; /*The speed you want your carousel to move on tablet (increase value for slower, decrease for faster)*/
    --ds-speed-mobile: 90s; /*The speed you want your carousel to move on mobile (increase value for slower, decrease for faster)*/
}
/**************************************************/
/*You do not need to edit anything below this line*/
/**************************************************/

/*Variables for desktop*/
@media all and (min-width: 981px) {
    :root {
        --ds-column-width: auto;
        --ds-module-width: calc(100vw / var(--ds-columns-desktop));
        --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
        --ds-scroll-speed: var(--ds-speed-desktop);
    }
}
/*Variables for tablets*/
@media all and (max-width: 980px) {
    :root {
        --ds-column-width: auto;
        --ds-module-width: calc(100vw / var(--ds-columns-tablet));
        --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
        --ds-scroll-speed: var(--ds-speed-tablet);
    }
}
/*Variables for mobile*/
@media all and (max-width: 479px) {
    :root {
        --ds-module-width: calc(100vw / var(--ds-columns-mobile));
        --ds-scroll-speed: var(--ds-speed-mobile);
    }
}
/*Hide the row overflow*/
.ds-carousel {
    overflow: hidden;
}
/*Define the grid and apply animation*/
.ds-carousel .et_pb_column {
    display: grid;
    grid-template-columns: repeat(var(--ds-module-number), var(--ds-module-width));
    width: var(--ds-column-width);
    -webkit-animation: scroll var(--ds-scroll-speed) linear infinite;
    animation: scroll var(--ds-scroll-speed) linear infinite;
}
/*Apply the module width*/
.ds-carousel .et_pb_module {
    width: var(--ds-module-width) !important;
}
/*Define the animation*/
@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
        transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
    }
}
@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
        transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
    }
}
/*Pause animation on hover*/
.ds-carousel .et_pb_column:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
/*-----------------------------------------------*/ 
/*---End Scrolling Module Carousel by Divi Soup--*/ 
/*-----------------------------------------------*/