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

:root {
	--primary-gradient: linear-gradient(135deg,#EC008C,#8D3B86,#703A80);
	--secondary-gradient: linear-gradient(135deg,#8D3B86, #531665);
	--primary-color:#ca0088;
	--secondary-color:#8D3B86;
	--text-light: #ffffff;
	--text-dark: #333333;
	--link-hover: #EC008C;
	--dark-bg: #1a1a1a;
	--heading-font: 'Open Sans Condensed';
	--body-font: Roboto;
	--popular-yellow: #ecd600;
	--mid-pink: #b82089;
	--online-color: #814AEB;
	--free-color: #0273E0;
	--planone-color: #8D3B86;
}

/*Fix Boostrap Overides for Join Page ---------------------*/

.page-id-45 p, bdi, div, a { font-family: var(--body-font); }
.page-id-45 p { font-size: 1rem!important; }
.page-id-45 h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); }

/*Slick Styling*/
.slick-list {
	margin-left: -10px;
	margin-right: -10px;
}

.slick-slide {
	margin-left: 10px;
	margin-right:10px;

}

/*Hide Columns until Jquery Loads*/

@media (max-width: 767px) {

	.price-plan-columns .free {
		display:none;
	}

	.price-plan-columns .online {
		display:none;
	}

	.join-info-box {
		margin-top : 80px!important;
	}
}

.price-changer-label {
	font-size: 1.5rem;
	margin-right: 10px;
	margin-left: -55px;
}

.join-intro {
	background: var(--primary-gradient);
	color: #fff;
	padding: 1.5% 0% 1% 0%;
}

.join-intro h3 {
	color: #fff;
}

.join-intro p strong {
	font-size: 2rem;
	margin: 0px 0 0 5px!important;
}

.join-intro p {
	margin-top: 4px;
	font-size: 1.3rem!important;
	width: 100%;
}

.join-intro h5 {
	color:#fff;
	font-size: 1.5rem;

}

.featured .plan-eq {
	color: var(--primary-color);
}

.one .plan-eq {
	color: #8D3B86;
}

.online .plan-eq {
	color: var(--online-color);
}

.free .plan-eq {
	color: var(--free-color);
}
/* --- Display Columns after Jquery has applied classes ---*/

.slick-slide .free {
	display: inline-block;
}

.slick-slide .online {
	display: inline-block;
}

.slick-arrow {
	color: white!important;
	font-size: 0rem!important; /* Hide Slick Text Label*/
	z-index: 9999!important;
	background: #33333388!important;
	height: 200px!important;
	min-height: 200px!important;
	padding: 90px 0px!important;
	width: 30px!important;
}

.slick-arrow.slick-prev::before{
	font-family: "fontawesome";
	content: "\f104";
	font-size: 2rem;
}

.slick-arrow.slick-next::before {
	font-family: "fontawesome";
	content: "\f105";
	font-size: 2rem;
}

.slick-prev {
	left: -6px!important;
	z-index: 9999!important;
}

.slick-next {
	right:-6px!important;
	z-index: 9999!important;
}

/*-----------------------------*/

/*Join Page Introduction Section*/

.join-intro  {
	text-align: center;
	width: 100%;
	margin-bottom: 40px!important;
}

.plan-eq {
	display: block!important;
	font-weight: 600!important;
	font-size: .9rem!important;
	opacity: 1!important;
	padding-top:20px!important;
}

.plan-excerpt {
	margin-top: 15px!important;
}

/*-----------------------------*/



body ul.slick-dots {
	margin-bottom: -20px!important;
	left: 0!important;
	right: 0!important;
}

body ul.slick-dots li:nth-child(1) {
	margin-right: 10px!important;
}

body ul.slick-dots li:nth-child(3) {
	margin-left: 10px!important;
}

.slick-dots li button::before {
	font-size: 2rem!important;
	opacity: 0.25!important;
}

.slick-dots li.slick-active:nth-child(1) button::before {
	color: var(--primary-color)!important;
	opacity: 1!important;
}

.slick-dots li.slick-active:nth-child(2) button::before {
	color: var(--planone-color)!important;
	opacity: 1!important;
	
}

.slick-dots li.slick-active:nth-child(3) button::before {
	color: var(--online-color)!important;
	opacity: 1!important;
	
}

.slick-dots li.slick-active:nth-child(4) button::before {
	color: var(--free-color)!important;
	opacity: 1!important;
	
}

/*Package Columns General Styling ------------------------*/

.price-plan-columns * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
 }

.price-plan-columns {
  color: #000000;
  text-align: center;
  font-size: 16px;
  width: 100%;
  max-width: 1920px;
  margin: 40px auto;
}



.plan {
  margin: 0;
  width: 20%;
  display: inline-block;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: top;
  border-radius: 30px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  margin: 0 10px;
  z-index: 100;
  
}

@media (max-width: 1475px) {
    .plan-excerpt {
        font-size: 14px;
        /* min-height: 200px; */
    }
    .join-info-box {
        min-height: 1500px;
    }
        
}

@media (max-width: 1200px) {
	.price-plan-columns {
		max-width: 100%;
	}

	#pricing-section {
		padding: 0 0%!important;
	}

	.plan {
		margin: 0 5px!important;
	}
	
}

@media (max-width: 1000px) {
	.plan-price {
		font-size: 1.8rem!important;
	}
	.join-info-box {
        min-height: 1775px;
    }
}

@media (max-width: 767px) {
	.plan {
		margin: 0 auto!important;
		width: 97%!important;
		
	}

	.plan-price {
		font-size: 2.4em!important;
	}

	.price-plan-columns {
		padding: 0 10px!important;
	}

	/*Hide Columns until Jquery Loads*/

	.price-plan-columns .free {
		display:none;
	}

	.price-plan-columns .online {
		display:none;
	}
}

.plan h3 {
	padding: 2%;
	margin: 0!important;
}

.plan p {
	/* height: 180px; */
	text-align: left;
	padding: 0 20px 0 20px;
}

.price-plan-columns .featured .plan-title {
	color: white!important;
}

.price-plan-columns .plan-title {
	text-align: left;
	padding-left: 20px;
	color: black;
 }

.online .plan-title { color: var(--online-color)!important; }
.one .plan-title { color: #8D3B86!important; }
.free .plan-title { color: var(--free-color)!important; }


.popular {
	font-weight: 700;
	color: white;
	display: block;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	width: 100%;
	margin: 1px auto 2px auto;
	font-size: 1.1rem;
	background:  var(--primary-color);
}

.popular i {
	color: var(--popular-yellow)!important;
	font-size: .95rem;
	margin: 0 4px;
}

.price-plan-columns .plan-cost {
  padding: 15px 20px;
  text-align: left;
  
}

small.charges {
	display: block!important;
	text-align: left!important;
	font-size: .95rem;
	font-weight: 100!important;
	max-width: 1200px;
	margin: 10px auto!important;
	padding-left: 10px!important;
}

.price-plan-columns .plan-price {
  font-weight: 800;
  font-size: 2.4em;
  text-align: left;
}

.price-plan-columns .plan-type { opacity: 0.6; }
.select-plan-button { width: 100%; }
.select-btn-container { padding: 2%; }

.price-plan-columns .plan-features {
  padding: 0;
  margin: 0;
  text-align: center;
  list-style: outside none none;
  font-size: 0.8em;
}
.price-plan-columns .plan-features li {
  border-top: 1px solid #d2d7e2;
  padding: 10px 5%;
  text-align: left;
  display:flex;
}

.price-plan-columns .plan-features i {
  margin-right: 8px;
  font-weight: 700;
  align-self: center;
  width: 5%;
}

.price-plan-columns .plan-features i.fa-info-circle {
	text-align: right;
	margin-left: auto;
}

.plan-title {
	padding-top :0!important;
	padding-bottom: 0!important;
}

.featured .plan-features i { color: var(--primary-color); }
.online .plan-features i { color: var(--online-color); }
.one .plan-features i { color: #8D3B86; }
.free .plan-features i { color: var(--free-color); }

.plan-features li span {
	display: block!important;
	width: 85%!important;
}

.price-plan-columns .plan-select {
  border-top: 1px solid #d2d7e2;
  padding: 10px 10px 0;
}

.price-plan-columns .plan-select a {
  background-color: #222f3d;
  color: #ffffff;
  text-decoration: none;
  padding: 0.5em 1em;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  font-weight: 800;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 1.5em;
}

.price-plan-columns .plan-select a:hover { background-color: #46627f; }

@media only screen and (max-width: 767px) {
  .price-plan-columns .plan { width: 50%; }
  .price-plan-columns .plan-title,
  .price-plan-columns .plan-select a { -webkit-transform: translateY(0); transform: translateY(0); }
  .price-plan-columns .plan-cost { padding: 20px 10px 20px; }
  .price-plan-columns .plan-select { padding: 10px 10px 10px; }
}

@media only screen and (max-width: 440px) {
  .price-plan-columns .plan {
    width: 100%;
  }
} 

/*popup*/
 .pricing-popup {
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  background: #eee;
  border-radius: 6px;
  position: absolute;
  padding: 5px;
  width: 335px;
  transition: 350ms;
  color: #333;
  right: -30%;
  top: 0;
  font-size: 19px;
  transition: all .3s ease;
}

.show.pricing-popup {
  opacity: 1;
  pointer-events: all;
  z-index: 9999;
  transition: all .3s ease;
}

.price-changer {
  display: flex;
  max-width: 280px;
  margin: 0 auto 30px auto;
  align-items: center;
  justify-content: space-evenly;
  background: #ebebeb;
  border-radius: 50px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.price-select {
  background: #ebebeb;
  padding: 10px 15px;
  margin: 0 4px;
  font-size: 22px;
  cursor: pointer;
  border-radius: 1.5em;
}

.price-select.active {
  background: linear-gradient(135deg,#ec008c,#9c2a92);
  color: #fff;
  
}

.plan-select, h3.plan-title, span.plan-type { font-family: Roboto, sans-serif!important; }

/*------------------------------------*/

 .page-id-45  { font-family: var(--font-body)!important; }

.price-plan-columns .l-section-h.i-cf {
	color: #f2d5f2!important;
	font-size: 0.8rem!important;
}

.price-plan-columns a.w-socials-item-link { font-size: 16px!important; }

.g-cols.via_grid.cols_1.laptops-cols_inherit.tablets-cols_inherit.mobiles-cols_1.valign_top.type_default p { margin-bottom: 0!important; }

.price-plan-columns h3.plan-title,.price-select {   font-family: Roboto,sans-serif; }

.price-plan-columns .plan-features li { font-family: 'Roboto'!important; } 

.price-plan-columns .plan-features li { margin-bottom: 0!important;}

.price-plan-columns ul.plan-features { margin-bottom: 0!important; }

.price-plan-columns span.w-post-elm-value p {
	color: var(--color-content-text);
	font-size: 16px;
	font-weight: 700!important;
}

.price-plan-columns .what-people-say {
	font-size: 48px;
	font-family: Roboto,sans-serif;
	color: rgb(51, 51, 51);
}

.select-plan-button {
	border-radius: 50px!important;
	font-family: Roboto, sans-serif!important;
	font-weight: 700!important;
	font-size: max(1rem, 1vw)!important;
	color: #fff;
}

.plan.free { border-top: 28px solid var(--free-color); }
.plan.online { border-top: 28px solid var(--online-color); }
.plan.one { border-top: 28px solid #8D3B86; }
.plan.featured { border-top: 0px solid var(--primary-color); }

.featured .btn, .complete-col a { background: var(--primary-color); color: white!important}
.featured .btn:hover, .complete-col a:hover { background: #d533a0; color:white!important; }
.online .btn, .online-col a { background: var(--online-color); color:white!important;}
.online .btn:hover, .online-col a:hover { background: #9a6eef; color:white!important }
.one .btn, .one-col a { background: #8D3B86; color:white!important;}
.one .btn:hover, .one-col a:hover { background: #a54a9d; color:white!important }
.free .btn, .free-col a { background: var(--free-color); color:white!important;}
.free .btn:hover, .free-col a:hover { background: #358fe6; }

.featured h3 { background: var(--primary-color); color: #ffffff; }

/*----------------------------------------*/

/*Smooth Animation for Price*/

.plan-cost {
	max-height: 200px;
	overflow: hidden;
}

.plan-cost div.hide-price {
	height: 0;
	max-height: 0!important;
	opacity: 0!important;
	transition: opacity .3s ease-in-out;
}

.plan-cost > div, .plan-cost > span {
	height: 150px;
	/* display: inline!important;
	opacity: 1!important;
	max-height: 500px!important;
	transition: opacity .3s ease-in-out;
	position: absolute; */
}

.plan .difference-item {
	margin: 4px inherit;
	/* border-radius: 10px; */
	color: white!important;
}

.plan .difference-item i {
	color: white!important;
}


.plan.online .difference-item {
	background: var(--online-color);
}

.plan.one .difference-item {
	background: #8D3B86;
}

.plan.featured .difference-item {
	background: var(--primary-color);
}


/*Features Table General Styling -------------------------*/

.price-table-wrapper table {
	max-width: 1200px;
	margin: 0 auto!important;	
}

.price-table-wrapper { margin-top: 50px!important; }

.price-table-wrapper tr td:nth-child(1) i {
	font-size: .8rem;
	font-weight: 700;
	margin-right: 10px;
}

.price-table-wrapper  th, td, table { border: none; }
.price-table-wrapper  td, th { padding: 1%; }
.price-table-wrapper  td { font-size: max(.8rem, .8vw); }
.price-table-wrapper  td i { font-size: max(1.5rem, 1.5vw); }
.tick-cell { vertical-align: middle; }
.complete-col { text-align: center; }
.one-col { text-align: center; }
.online-col { text-align: center; }
.free-col { text-align: center; }

/*Column Widths*/

.benefit-col{ width:22.5%; }
.complete-col { width: 22.5%; color: var(--primary-color)!important; color: var(--text-light); border: 1px solid white; }
.online-col { width: 16.25%; color: var(--online-color)!important; color: var(--text-light); border: 1px solid white;  }
.one-col { width: 16.25%; color: #8D3B86!important; color: var(--text-light); border: 1px solid white;  }
.free-col { width: 16.25%; color: var(--free-color)!important; color: var(--text-light); border: 1px solid white;  }

@media (max-width: 767px) {

	.price-table-wrapper table {
		max-width: 700px!important;
		margin: 0 auto!important;	
	}

	#pricing-section {
		padding: 10px!important;
	}
	
	.price-table-wrapper  th { padding: .5% .2%; font-size: .2rem!important; }
	.price-table-wrapper td { font-size: max(.6rem, .8vw); }
	.benefit-col{ width:20%!important; }
	.complete-col { width: 10%!important;  }
	.online-col { width: 10%!important;   }
	.free-col { width: 10%!important;   }
	.complete-col i { font-size: .8rem!important;  }
	.online-col i { font-size: .8rem!important;   }
	.one-col i { font-size: .8rem!important;   }
	.free-col i { font-size: .8rem!important;   }
	table .benefit-title-row th {
		font-size: max(.65rem, .65vw)!important;
	}

	table .benefit-title-row th:nth-child(1) {
		font-size: max(.65rem, .65vw)!important;
		padding: 1%;
	}
	table .select-plan-button {
		font-size: .6rem!important;
		padding: .5%!important;
	}
	.select-plan-button span {
		display: none;
	}

	.bottom-join-row .select-plan-button::before {
		content: "Join";
	}

	tr td.benefit-col:nth-child(1) {
		font-size: .7rem!important;
	}

	.charges {
		padding-right: 0!important;
	}
}

.expandable-outdoor, .expandable-indoor, .expandable-online { font-weight: 700; }

.expandable-title-indoor .benefit-col, .expandable-title-outdoor .benefit-col, .expandable-title-online .benefit-col {
	background: var(--primary-color);
	color: white;
	cursor: pointer;
}

.expandable-indoor .benefit-col:hover, .expandable-outdoor .benefit-col:hover, .expandable-online .benefit-col:hover {
	padding-left: 20px;
	transition: all .3s ease;
}

.expandable-indoor , .expandable-outdoor, .expandable-online  {
	background: #ebebeb;
	cursor: pointer;
	transition: all .3s ease;
}

.sub-row-indoor, .sub-row-outdoor, .sub-row-online { background: #ebebeb; }

.empty { border: none!important; }

#pricingTable {
	padding: 10% 15%;
	display: table;
	width:100%;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	border-left: 1px solid #444!important;
}

.price-table-wrapper td, th { border: 1px solid #22222222!important; }

th.complete-col {
	background: var(--primary-color);
	color: white!important;
}

th.online-col {
	background: var(--online-color);
	color: white!important;
}

th.one-col {
	background: #8D3B86;
	color: white!important;
}

th.free-col {
	background: var(--free-color);
	color: white!important;
}

/*Popular Row ------------------------------*/
.popular-head th {
	background-color: #fff;
	border: none!important;
}

.popular-head .complete-col span {
	display: block!important;
	padding: 10px;
	background: var(--popular-yellow);
	color: var(--text-dark);
	text-align: center;	
	font-size: max(1.3rem, 1.3vw);
	font-weight: 700;

}

/*Package Title Row ------------------------*/
.package-heads th { padding: 0%; }

.package-heads th span {
	padding: 0%;
	color: var(--text-light);
	text-align: center;
	border: none!important;
	display: block;
}

.package-heads th.complete-col span {background: var(--primary-color); box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;}
.package-heads th.one-col span {background: #8D3B86; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;}
.package-heads th.online-col span {background: var(--mid-pink); box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;}
.package-heads th.free-col span {background: var(--secondary-color); box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;}

/*Package Pricing Row ------------------------*/
.package-price-row .i-col { text-align: right; }

/*Dropdown Rows ----------------------------------------*/
.benefit-title-row th:nth-child(1) {
	/* background: linear-gradient(135deg,#703A80,#8D3B86,#EC008C); */
	/* background: var(--text-dark);
	color: white; */
	color: white;
	background: #a2006d;
	font-size: max(.9rem, .9vw)!important;
	text-align: center;
	font-weight: 700;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.benefit-title-row th {
	font-size: max(.95rem, .95vw)!important;
}

/*Dropdown Functionality ----------------------------*/
.sub-row-outdoor, .sub-row-indoor, .sub-row-online { display: none; }
.open-row { display: table-row; }

/*Join Button Rows ------------------------*/
.bottom-join-row td { background : #fff; }
.package-join-row td { padding: 0; }

.join-button {
	border-radius: 1.5em;
	background-image: var(--primary-gradient);
	color: var(--text-light);
	width: 100%;
	font-weight: 700;
	font-family: var(--heading-font);
	padding: 4%;
}

.join-button-top {
	background-image: var(--primary-gradient);
	color: var(--text-light);
	width: 100%;
	font-weight: 700;
	font-family: var(--heading-font);
	padding: 10px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.join-button-top:focus {
	box-shadow: none;
	transition: all .3s ease;
}

.join-info-box {
	padding: 5% 10% 10% 10%;
	text-align: center;
	background: linear-gradient(155deg, rgb(236, 0, 140), rgb(141, 59, 134));
	color: var(--text-light);
}
	

.join-info-box p {
	margin: 10px auto;
	font-size: 1.5rem!important;
	font-family: Roboto, sans-serif!important;
	max-width: 1140px;
}

.one-membership {
	text-decoration: underline;
	color: #FFFFFF;
}

.one-membership:hover {
	color: #ca0088 !important;
}