/*

Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

*/



/***************************************************************
 TYPOGRAPHY 
****************************************************************/

* {
	outline: none; 
	-webkit-font-smoothing: subpixel-antialiased; 
	text-rendering: optimizeLegibility;
	font-family: 'Avenir Next W01', Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, 
blockquote {
	font-family: inherit!important;
	font-weight: 700; 
}

input, 
button, 
select, 
textarea {
	font-family: inherit!important;
	font-weight: 400; 
}

.x-column p,
.x-column ul,
.x-column ol { 
	font-size: 15px; 
}

@media (min-width: 1440px) {
.x-column p,
.x-column ul,
.x-column ol {
	font-size: 18px;
}
}

.x-column .small-print p {
	font-size: 12px; 
	color: #959595; 
}

.fft-banner .x-column .small-print p {
	color: #fff; 
	opacity: 0.8;
	margin: 0;
}

.x-icon-chevron-right + a {
	font-weight: 700; 
}

/*@media (min-width: 979px) {
	.menu-item-691,
	.menu-item-9746,
	.menu-item-12733,
	.menu-item-9741,
	.menu-item-9775 {
		margin-right: 10px;
	}*/
}

/***************************************************************
 END TYPOGRAPHY 
****************************************************************/

/***************************************************************
 ANIMATIONS 
****************************************************************/
@keyframes scale-up
{
0%   {opacity: 0; transform: scale(1,0.5);}
100% {opacity: 1; transform: scale(1,1);}
}

@keyframes scale-down
{
0%   {opacity: 0; transform: scale(1,0.5); transform-origin: 50% 0%;}
100% {opacity: 1; transform: scale(1,1); transform-origin: 50% 0%;}
}

@keyframes flip-in-horz
{
0%   {opacity: 0; transform: rotateY(180deg); transform-style: preserve-3d;}
100%   {opacity: 1; transform: none;}
}

@keyframes hover 
{
0% {top: 0;}
50% {top: 10px;}
100% {top: 0;}
}

/***************************************************************
 END ANIMATIONS
****************************************************************/

/***************************************************************
 BUTTONS
****************************************************************/
.x-btn {
	border-radius: 2px; 
	font-weight: 700;
}

.x-btn.btn-secondary:not(:hover), 
.fft-contrast-bar .x-btn.btn-secondary:not(:hover) {
	color: #2daae1; 
	background-color: #fff;
}

.x-btn.btn-tertiary:not(:hover),
.fft-contrast-bar .x-btn.btn-tertiary:not(:hover) {
	color: #fff; 
	background-color: transparent;
	border: #fff 1px solid; 
}

.x-btn.btn-tertiary--dark:not(:hover),
.fft-contrast-bar .x-btn.btn-tertiary--dark:not(:hover) {
	color: #2daae1; 
	background-color: transparent;
	border: #2daae1 1px solid; 
}

.x-btn.btn-disabled {
	background-color: #d9d9d9; 
	pointer-events: none;
}

.x-btn-large {
	font-weight: 700; 
}

.x-btn.x-btn-transparent.btn-light,
.x-btn.x-btn-transparent.btn-light:hover {
	color: #fff; 
}

.btn-multiple {
	margin: 0 20px 10px; 
}

@media (min-width: 1280px) {
.btn-multiple {
	margin: 0 40px 10px; 
}
}

/***************************************************************
 END BUTTONS
****************************************************************/

/***************************************************************
 DROPDOWN MENU 
****************************************************************/
.dropit {
	list-style: none;
	padding: 0;
	margin: 0;
	float: left; 
	padding: 30px 20px 20px; 
}

.dropit .dropit-trigger {
	position: relative; 
}

.dropit .dropit-submenu {
    position: absolute;
    top: 100%;
    left: -20px; /* dropdown left or right */
    z-index: 1000;
    display: none;
    min-width: 150px;
    list-style: none;
}

.dropit .dropit-open .dropit-submenu { display: block; }


/* custom */

.menu--main-nav:not(.dropit) {
	display: none; 
}

.menu--main-nav > li > a {
	display: block; 
	line-height: 1.4;
	font-size: 13px;
}

.menu--main-nav > li > a span {
	display: none;
	color: #535353; 
	font-size: 18px; 
	font-weight: 700; 
}

.menu--main-nav > li > a:hover span {
	color: #e6007e;
}

.menu--main-nav > li > a > span.active {
	display: block; 
}

.menu--main-nav> li > a > span.active::after {
	content: '';
	color: #2daae1;
	display: inline-block;
	vertical-align: middle; 
	width: 30px; 
	height: 16px; 
	background: url(/wp-content/uploads/caret_down.png) center center no-repeat;
	background-size: 18px 10px;
	transition: all 0.4s ease; 
	transform-origin: 50% 50%; 
}

.menu--main-nav> li.dropit-open > a > span.active::after {
	transform: rotate(180deg);
}

.menu--main-nav > li > a > i.label {
	font-style: normal; 
	display: none; 
	color: #959595;
}

@media (min-width: 1024px) {
.menu--main-nav > li > a > i.label {
	display: block; 
}
}

.menu--main-nav.dropit {
	padding: 0;
	margin: 0;
	float: left; 
	padding: 30px 0 20px 20px; 
	font-size: 13px;
}

@media (min-width: 1280px) {
.menu--main-nav.dropit {
	padding: 25px 20px 22px 50px; 
	/* width: 250px;*/
}
}

.menu--main-nav ul.dropit-submenu {
	padding: 20px;
	margin: 0;
	background-color: #fff;
	border: #f3f3f3 1px solid;
	border-radius: 4px;
	box-shadow: rgba(0,0,0,0.15) 0 20px 60px 0;
	list-style: none!important; 
}

.menu--main-nav ul.dropit-submenu li {
    list-style-image: url(data:0);
}

.menu--main-nav .dropit-submenu a {
	display: block; 
	padding: 5px 0;
	font-size: 18px; 
}

.menu--main-nav .dropit-submenu li:first-child {
	margin-bottom: 10px; 
}

@media (min-width: 480px) {
.dropit .dropit-submenu {
    min-width: 370px;
}
}

.is-clean .menu--main-nav {
	display: none; 
}

.is-clean-generic .contact-bar {
	display: none; 
}

.is-clean-generic .x-brand {
	pointer-events: none; 
}

body.page-id-9757 .menu--main-nav {
	opacity: 0;
	transition: opacity 0.4s ease; 
	pointer-events: none;
}

body.page-id-9757 .x-navbar-fixed-top .menu--main-nav {
	opacity: 1;
	pointer-events: auto;
}

/***************************************************************
 END DROPDOWN MENU 
****************************************************************/

/***************************************************************
 KEY STAGE CONFIRM  
****************************************************************/

.ks-confirm {
	opacity: 0;
	position: fixed; 
	top: 0; 
	left: 0; 
	background: #ffa500; 
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-align: center; 
	padding: 5px 10px;
	width: 100%;
	z-index: 1;
	transition: opacity 0.4s ease, top 0.4s ease;
}

@media (min-width: 1440px) {
.ks-confirm {
	font-size: 18px;
}
}

.ks-confirm.ks-confirm--active {
	opacity: 1;
}

.x-navbar-fixed-top .ks-confirm {
	top: 90px 
}

/***************************************************************
 END KEY STAGE CONFIRM 
****************************************************************/

/***************************************************************
 KS SELECT BLOCK 
****************************************************************/

.ks-select-block p {
	margin: 0; 
	font-size: 16px;
	color: #fff; 
	text-align: center; 
}

.ks-select-block p > a {
	display: inline-block; 
	padding: 0 12px; 
	margin: 0 0 4px 8px; 
	border-radius: 2px; 
	border: #fff 1px solid; 
	color: #fff; 
	transition: all 0.2s ease;
}

.ks-select-block p > a:hover {
	background: rgba(0,0,0,0.4); 
}

.ks-select-block p > a.active {
	background: #fff; 
	color: #535353; 
}

/***************************************************************
 END KS SELECT BLOCK 
****************************************************************/

/***************************************************************
 KS-DRIVEN ITEMS 
****************************************************************/
@keyframes fade-in {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.ks-view {
	animation: fade-in 0.8s ease; 
}


/***************************************************************
 END KS-DRIVEN ITEMS 
****************************************************************/

/***************************************************************
 FORMS 
****************************************************************/

.form-group {
	margin: 0 0 30px; 
}

.form-item {
	margin: 0 0 15px;
}

label:hover {
	cursor: pointer; 
}

input[type=radio] ~ label {
	display: inline-block; 
	vertical-align: middle;
	margin-left: 10px; 
}

.task-box-content {
	margin: 0 auto; 
	max-width: 470px; 
	padding: 0 10px;
}

.task-box-content h2 {
	text-align: center;
	margin: 15px 0 30px; 
}

.task-box-content select {
	font-size: 120%;
}

input[type=text].task-box-content__text-box, 
input[type=email].task-box-content__text-box {
	width: 100%; 
	padding: 15px 10px;
	line-height: normal;
	border: #d9d9d9 1px solid; 
	height: auto;
	border-radius: 2px; 
}

input[type=text].task-box-content__text-box:focus, 
input[type=email].task-box-content__text-box:focus {
	border-color: #2daae1;
}

input[type=text].task-box-content__text-box.error:focus, 
input[type=email].task-box-content__text-box.error:focus {
	border-color: #ed5050;
}

.no-labels label {
	display: none; 
}

input[type=submit].task-box-content__button {
	width: 100%; 
	padding: 15px 10px; 
	margin: 0 0 20px; 
	line-height: normal;
	text-align: center; 
	font-weight: 700;
	border-radius: 2px; 
}

.chunky-radio .form-item {
	position: relative; 
}

.chunky-radio input[type=radio] + label {
	display: block; 
	margin: 0; 
	padding: 15px 10px 15px 50px; 
	border: #d9d9d9 1px solid; 
	border-radius: 2px; 
	transition: border 0.2s linear; 
}

.chunky-radio input[type=radio]:checked + label {
	border-color: #2daae1; 
}

.chunky-radio input[type=radio] {
	position: absolute; 
	top: 15px; 
	left: 10px;
	opacity: 0; 
}

.chunky-radio input[type=radio] + label::before {
	content: ''; 
	display: block; 
	width: 3px; 
	height: 20px; 
	background: #d9d9d9;
	position: absolute; 
	top: 20px; 
	left: 26px;
	transform: rotate(90deg);
	transition: all 0.2s ease;
}

.chunky-radio input[type=radio] + label::after {
	content: ''; 
	display: block; 
	width: 3px; 
	height: 20px; 
	position: absolute; 
	top: 20px; 
	left: 26px;
	background: #d9d9d9; 
	transform: rotate(90deg);
	transition: all 0.2s ease;
}

.chunky-radio input[type=radio]:checked + label::before {
	width: 3px; 
	height: 10px; 
	top: 27px; 
	left: 19px;
	background: #96c11f; 
	transform: rotate(135deg);
}

.chunky-radio input[type=radio]:checked + label::after {
	width: 3px; 
	height: 20px;  
	top: 17px; 
	left: 29px;
	background: #96c11f; 
	transform: rotate(45deg);
}

.chunky-checkbox .form-item {
	position: relative; 
}

.chunky-checkbox input[type=checkbox] + label {
	display: block; 
	margin: 0; 
	padding: 15px 10px 15px 50px; 
	border: #d9d9d9 1px solid; 
	border-radius: 2px; 
	transition: border 0.2s linear; 
}

.chunky-checkbox input[type=checkbox]:checked + label {
	border-color: #2daae1; 
}

.chunky-checkbox input[type=checkbox] {
	position: absolute; 
	top: 15px; 
	left: 10px;
	opacity: 0; 
}

.chunky-checkbox input[type=checkbox] + label::before {
	content: ''; 
	display: block; 
	width: 3px; 
	height: 20px; 
	background: #d9d9d9;
	position: absolute; 
	top: 20px; 
	left: 26px;
	transform: rotate(90deg);
	transition: all 0.2s ease;
}

.chunky-checkbox input[type=checkbox] + label::after {
	content: ''; 
	display: block; 
	width: 3px; 
	height: 20px; 
	position: absolute; 
	top: 20px; 
	left: 26px;
	background: #d9d9d9; 
	transform: rotate(90deg);
	transition: all 0.2s ease;
}

.chunky-checkbox input[type=checkbox]:checked + label::before {
	width: 3px; 
	height: 10px; 
	top: 27px; 
	left: 19px;
	background: #96c11f; 
	transform: rotate(135deg);
}

.chunky-checkbox input[type=checkbox]:checked + label::after {
	width: 3px; 
	height: 20px;  
	top: 17px; 
	left: 29px;
	background: #96c11f; 
	transform: rotate(45deg);
}

.chunky-radio textarea {
	display: block; 
	width: 100%; 
	margin: 0; 
	padding: 15px 10px; 
	border: #d9d9d9 1px solid; 
	border-radius: 2px; 
	height: 80px; 
	transition: all 0.2s ease; 
}

.chunky-radio textarea:focus {
	border: #2daae1 1px solid; 
	height: 110px; 
}

/***************************************************************
 END FORMS 
****************************************************************/

/***************************************************************
 BANNERS 
****************************************************************/

.fft-banner h1, 
.fft-banner h2, 
.fft-banner h3 {
	color: #fff; 
	word-wrap: break-word;
}

.fft-banner h2 {
	font-weight: 400;
	line-height: 1.4;
	margin-left: auto; 
	margin-right: auto; 

}

@media (min-width: 1024px) {
.fft-banner h2 {
	max-width: 70%;
}
}

.fft-banner {
	background-size: cover;
}

.fft-banner--blog a {
	color: #fff; 
	display: block;
}

.fft-banner--blog a:hover {
	color: #2daee1; 
}

.fft-banner--blog span.title a:after {
	content: '\00A0\00A0\203A';
}

.fft-banner--start {
	/*background-color: #2daae1;*/
	background: linear-gradient(160deg, 
    #75883d 8%, 
    #96c11f 8%, 
    #96c11f 25%, 
    #9b3f73 25%,
    #9b3f73 75%, 
    #2daae1 75%);
}

blockquote {
	border-left: none; 
	border-right: none;
}

.hidden {
  display: none!important;
}

.fft-contrast-bar h1,
.fft-contrast-bar h2,
.fft-contrast-bar h3,
.fft-contrast-bar h4,
.fft-contrast-bar h5,
.fft-contrast-bar p,
.fft-contrast-bar a,
.fft-contrast-bar blockquote,
.fft-contrast-bar ul,
.fft-contrast-bar ol,
.fft-contrast-bar .x-cite {
	color: #fff; 
}

.fft-bar h1,
.fft-bar h2,
.fft-bar h3,
.fft-bar h4,
.fft-bar h5
{
	margin: 0 0 40px; 
}

@keyframes bounce {
	0%  {transform:translateY(0%);}
	25%  {transform:translateY(0%);}
	35%  {transform:translateY(-10%);}
	40% {transform:translateY(15%);}
	50% {transform:translateY(0%);}
	60% {transform:translateY(15%);}
	70% {transform:translateY(0%);}
	100%  {transform:translateY(0%);}
}

.scroll-down {
	display: block; 
	width: 200px; 
	height: 80px; 
	margin: 0 auto; 
	position: relative; 
	top: 50px;
}

.scroll-down span {
	display: block; 
	background: url(/wp-content/uploads/2017/04/point_down.png) center center no-repeat; 
	background-size: 106px 55px; 
	width: 110px; 
	height: 60px; 
	position: absolute; 
	top: 5px; 
	left: 50%; 
	margin-left: -55px;
	animation: bounce 2s linear infinite; 
}

.scroll-down.dark span {
	background: url(/wp-content/uploads/point_down_dark.png) center center no-repeat; 
	background-size: 106px 55px; 
}

/***************************************************************
 END BANNERS
****************************************************************/

/***************************************************************
 CONTACT BAR
****************************************************************/

.contact-bar, 
.contact-bar h1 {
	color: #959595; 
	background-color: #fff; 
	font-size: 13px;
	font-weight: normal; 
	display: none; 
}

@media (min-width: 1024px) {
.contact-bar{
	display: block; 
	border-bottom: #ebebeb 1px solid;
}
}

.contact-bar {
	padding: 0;
}

.contact-bar h1 {
	display: inline-block;
	margin: 0; 
	padding: 4px 0; 
	line-height: 1.8;
}

.contact-bar__options {
	float: right;
}

.contact-bar a,
.contact-bar span:not(#status) {
	display: inline-block; 
	color: #959595; 
	margin: 0 0 0 -4px;
	padding: 4px 16px; 
}

/***************************************************************
 END CONTACT BAR
****************************************************************/

/***************************************************************
 COOKIE CONSENT 
****************************************************************/
.fft-cookie {
	padding: 5px 20px; 
}

/***************************************************************
 END COOKIE CONSENT
****************************************************************/

/***************************************************************
 PASSWORD PROTECTED 
****************************************************************/
.post-password-required form.post-password-form {
	padding: 40px; 
	max-width: 1024px;
	margin: 0 auto;
}

/***************************************************************
 END PASSWORD PROTECTED
****************************************************************/

/***************************************************************
 VALIDATION
****************************************************************/
.message {
	border: #959595 1px solid; 
	border-left: #959595 8px solid; 
	padding: 15px 10px 15px 15px;
	margin: 0 0 30px;
	border-radius: 2px; 
}
.message--error {
	border-color: #ed5050; 
}
.message--success {
	border-color: #96c11f; 
}

.error {
	color: #ed5050; 
}

/***************************************************************
 END VALIDATION
****************************************************************/

/***************************************************************
 SCROLL SWITCH 
****************************************************************/
.scroll-switch-wrapper {
	position: relative; 
}
.scroll-switch-wrapper img {
	position: absolute; 
	width: 70%; 
	top: 0; 
	left: 15%;
}
.scroll-switch {
	transition: opacity 0.5s ease; 
}
.scroll-switch.switch-on {
	opacity: 1;
}
.scroll-switch.switch-off {
	opacity: 0;
}
/***************************************************************
 END SCROLL SWITCH
****************************************************************/

/***************************************************************
 HELPERS
****************************************************************/
@media (min-width: 768px) {
.icon-large {
	max-width: 350px; 
}
}

.icon-med {
	max-width: 120px; 
	margin-left: auto; 
	margin-right: auto; 
}

@media (min-width: 768px) {
.fft-bar--image {
	max-width: 70%; 
}
}

.marginless { 
	margin: 0; 
}

.image-text {
	/*text-shadow: #000 0 0 14px; */
	text-shadow: 0 0 2px rgba(0,0,0,0.5); 
}

.hang-quote {
	text-indent: -0.4em;
}

.cta-logo {
	max-width: 180px; 
	margin: 0; 
}

.content-logo {
	width: 200px; 
	margin: 0; 
}

.intro-text {
	padding-left: 20px; 
	border-left: #d9d9d9 4px solid; 
	color: #959595;
}

.white-text {
	color: #fff; 
}

.alert-text {
	color: #ed5050; 
	font-weight: 700;
}

.explain {
	color: #959595; 
}

.arrow-after::after {
    content: '\00A0\00A0\203A';
}

@media (min-width: 768px) {
	.equal-height {
		display: flex;
	}

	.two-columns {
		column-count: 2; 
		column-gap: 70px;
	}

	.three-columns {
		column-count: 3; 
		column-gap: 70px;
	}

	.three-columns > div,
	.two-columns > div{
		break-inside: avoid-column;
	}
}


/***************************************************************
 END HELPERS
****************************************************************/

/***************************************************************
 DATA
****************************************************************/
.tick {
	display: block; 
	width: 24px; 
	height: 24px; 
	background: transparent; 
	border: #fff 2px solid;
	margin: 0 auto; 
	border-radius: 50%; 
	position: relative; 
}

.tick::before {
	content: '';
	display: block; 
	width: 2px; 
	height: 6px; 
	background: #fff; 
	position: absolute; 
	top: 10px; 
	left: 5px;
	transform: rotate(-45deg);
}

.tick::after {
	content: '';
	display: block; 
	width: 2px; 
	height: 12px; 
	background: #fff; 
	position: absolute; 
	top: 4px; 
	left: 11px;
	transform: rotate(45deg);
}


.tick--neutral { 
	border-color: #959595; 
}


.tick--neutral::before, 
.tick--neutral::after { 
	background: #959595; 
}

.cross {
	color: rgba(0,0,0,0.2);
	display: block; 
	width: 20px; 
	height: 20px; 
	margin: 0 auto; 
	font-size: 26px;
	line-height: 0.8;
}

.cross::before {
	content: '\d7';
}

.tablepress.fft-feature-comparison thead th {
	background: none;
	border-bottom: none;
	text-align: center; 
	padding-top: 40px; 
	font-size: 21px; 
}

.tablepress.fft-feature-comparison thead th.column-2 {
	background: #e6007e;
	color: #fff;
	width: 20%;
}

.tablepress.fft-feature-comparison thead th.column-3 {
	width: 20%;
}

.tablepress.fft-feature-comparison tbody td {
	vertical-align: middle; 
}

.fft-feature-comparison .column-1 {
	max-width: 400px; 
}

body.is-infant .fft-feature-comparison .row-2,
body.is-infant .fft-feature-comparison .row-23,
body.is-infant .fft-feature-comparison .row-34,
body.is-infant .fft-feature-comparison .row-38,
body.is-infant .fft-feature-comparison .row-48,
body.is-primary .fft-feature-comparison .row-2,
body.is-primary .fft-feature-comparison .row-23,
body.is-primary .fft-feature-comparison .row-34,
body.is-primary .fft-feature-comparison .row-38,
body.is-primary .fft-feature-comparison .row-48,
body.is-secondary .fft-feature-comparison .row-2,
body.is-secondary .fft-feature-comparison .row-26,
body.is-secondary .fft-feature-comparison .row-37,
body.is-secondary .fft-feature-comparison .row-47

 {
	font-size: 18px;
	font-weight: 700; 
	border-top: #535353 2px solid; 
}

.fft-feature-comparison td:nth-child(2) { 
	background: #e6007e; 
}

/***************************************************************
 END DATA
****************************************************************/

/***************************************************************
 BOOKING BLOCK
****************************************************************/
.booking-block p {
	margin: 0; 
}

.booking-block .x-btn {
	margin: 0 1em 1.5em 0; 
}

.promo-text .h-custom-headline {
	line-height: 1.4; 
}

.promo-text .x-column p, 
.promo-text .x-column ul,
.promo-text .x-column ol,
.promo-text .x-col p, 
.promo-text .x-col ul,
.promo-text .x-col ol {
	font-size: 18px; 
}

.promo-text .x-column li {
	margin-bottom: 1em; 
}

.more-soon, 
.last-few {
	margin-bottom: 5px; 
	font-weight: 600; 
}

.more-soon p::before {
	content: '\2022\0020';
	color: #96c11f;
}

.last-few p::before {
	content: '\2022\0020';
	color: #ffa500;
}

/***************************************************************
 END BOOKING BLOCK
****************************************************************/

/***************************************************************
 NEWSLETTERS 
****************************************************************/
.page-newsletter .site {
	background-color: #f3f3f3; 
}
/***************************************************************
 END NEWSLETTERS 
****************************************************************/

/***************************************************************
 RSS
****************************************************************/


/***************************************************************
 END RSS
****************************************************************/

/***************************************************************
 SLIDER NAV
****************************************************************/
.slider-links .x-btn {
	margin: 0 5px 10px; 
}

body.slide-1 .x-btn#slider-nav-01,
body.slide-2 .x-btn#slider-nav-02,
body.slide-3 .x-btn#slider-nav-03,
body.slide-4 .x-btn#slider-nav-04,
body.slide-5 .x-btn#slider-nav-05,
body.slide-6 .x-btn#slider-nav-06,
body.slide-7 .x-btn#slider-nav-07,
body.slide-8 .x-btn#slider-nav-08 {
	border-color: #2daae1;
	background-color: #2daae1;
	color: #fff;
}

.slider-text {
	display: none; 
}

body.slide-1 .slider-text.slider-text--01,
body.slide-2 .slider-text.slider-text--02,
body.slide-3 .slider-text.slider-text--03,
body.slide-4 .slider-text.slider-text--04,
body.slide-5 .slider-text.slider-text--05,
body.slide-6 .slider-text.slider-text--06,
body.slide-7 .slider-text.slider-text--07,
body.slide-8 .slider-text.slider-text--08 {
	display: block; 
	animation: fade-in 0.8s ease-in-out; 
}

/***************************************************************
 END SLIDER NAV
****************************************************************/

/***************************************************************
 SLIDER CONTENT
****************************************************************/

.ls-nav-prev, 
.ls-nav-next {
	background: rgba(0,0,0,0.2);
	top: 40% !important; 
	height: 20% !important; 
	margin-top: 0 !important; 
}

.ls-nav-prev:hover, 
.ls-nav-next:hover {
	transform: none!important; 
}

.ls-nav-prev:active, 
.ls-nav-next:active {
	background: rgba(0,0,0,0.3);
}

@media (min-width: 768px) {

}

@media (min-width: 768px) and (max-height: 700px) {
.slider-screenshot {
	transform: scale(0.55)!important; 
	transform-origin: 50% 0; 
}

/*.ls-slide, .ls-container {
	height: 450px!important;
}*/
}

@media (min-width: 768px) and (min-height: 701px) and (max-height: 900px) {
.slider-screenshot {
	transform: scale(0.65)!important; 
	transform-origin: 50% 0; 
}

/*.ls-slide, .ls-container {
	height: 550px!important;
}*/
}

@media (min-width: 768px) and (min-height: 901px) and (max-height: 1000px) {
.slider-screenshot {
	transform: scale(0.8)!important; 
	transform-origin: 50% 0; 
}

/*.ls-slide, .ls-container {
	height: 650px!important;
}*/

}

/***************************************************************
 END SLIDER CONTENT
****************************************************************/

/***************************************************************
 TERM OF BIRTH SPECIAL FEATURE
****************************************************************/
.tob-nav-bg img {
	border-radius: 10px; 
} 

.click-instruction {
	display: none; 
}

@media (min-width: 481px) {
.click-instruction {
	display: inline-block; 
	position: absolute; 
	top: -4px; 
	right: -4px; 
	background: #fff; 
	padding: 0 8px; 
	border-radius: 4px;
	transform: rotate(3deg);
}
}

@media (min-width: 1500px) {
.click-instruction {
	right: 9%; 
}
}

.image-nav {
	position: relative; 
}

.bulb, 
.bulb__inner,
.bulb__label {
	display: block; 
}

.bulb__label {
	padding: 5px 10px; 
}

.bulb {
	transition: transform 0.2s ease; 
}

.bulb:hover {
	color: #fff;
	transform: scale(1.1);
}

@media (min-width: 481px) and (max-width: 1023px) {
.bulb {
	transform: scale(0.7) translate(0,-20%);
}
.bulb:hover {
	transform: scale(0.8) translate(0,-20%);
}
}

@media (min-width: 481px) {

.bulb {
	width: 120px; 
	height: 230px;
	position: absolute; 
	padding: 10px 0;
	top: 0; 
	left: 0;
}
.bulb__inner {
	display: block;
	width: 120px; 
	height: 120px;
	position: absolute; 
	padding: 10px 0;
	top: 0; 
	left: 0;
	animation: hover 2s ease infinite;
}

.bulb__inner {
	display: block; 
	position: absolute; 
	top: 0; 
	left: 0; 
}

.bulb__label {
	display: block; 
	width: 120px; 
	position: absolute; 
	top: 160px; 
	left: 0; 
	text-align: center; 
	line-height: 1.2;
	padding: 20px 5px 10px;
	background: #535353;
	border-radius: 4px; 
}

.bulb__label::before {
	content: ''; 
	display: block; 
	width: 6px; 
	height: 6px; 
	background: #535353; 
	position: absolute; 
	top: 5px; 
	left: 60px; 
	margin-left: -3px; 
	border-radius: 50%; 
}

.bulb__label::after {
	content: ''; 
	display: block; 
	width: 2px; 
	height: 47px; 
	background: #fff; 
	position: absolute; 
	top: -40px; 
	left: 50%; 
	margin-left: -1px; 
	border-radius: 0 0 2px 2px;
}

.bulb--01 {
	top: 5%;
	left: 10%;
}

.bulb--02 {
	top: 30%; 
	left: 28%; 
}

.bulb--03 {
	top: 0%; 
	left: 45%; 
}

.bulb--04 {
	top: 42%; 
	left: 60%; 
}

.bulb--05 {
	top: 7%; 
	left: 75%; 
}
}

.bulb--01 .bulb__inner {
	background: url(/wp-content/uploads/xmas_bulbs_yellow.png) 0 0 no-repeat; 
	background-size: 240px 120px;
}

.bulb--01:hover .bulb__inner {
	background-position: 100% 0; 
	background-size: 240px 120px;
}

.bulb--02 .bulb__inner {
	background: url(/wp-content/uploads/xmas_bulbs_red.png) 0 0 no-repeat; 
	background-size: 240px 120px;
	animation-delay: 0.2s;
}

.bulb--02:hover .bulb__inner {
	background-position: 100% 0; 
	background-size: 240px 120px;
}

.bulb--03 .bulb__inner {
	background: url(/wp-content/uploads/xmas_bulbs_purple.png) 0 0 no-repeat; 
	background-size: 240px 120px;
	animation-delay: 0.6s;
}

.bulb--03:hover .bulb__inner {
	background-position: 100% 0; 
	background-size: 240px 120px;
}

.bulb--04 .bulb__inner {
	background: url(/wp-content/uploads/xmas_bulbs_green.png) 0 0 no-repeat; 
	background-size: 240px 120px; 
	animation-delay: 0.8s;
}

.bulb--04:hover .bulb__inner {
	background-position: 100% 0; 
	background-size: 240px 120px;
}

.bulb--05 .bulb__inner {
	background: url(/wp-content/uploads/xmas_bulbs_blue.png) 0 0 no-repeat; 
	background-size: 240px 120px;
	animation-delay: 0.4s;
}

.bulb--05:hover .bulb__inner {
	background-position: 100% 0; 
	background-size: 240px 120px;
}

.bulb--01 span.bulb__label {
	background-color: #734a9c;
}

.bulb--02 span.bulb__label {
	background-color: #337a37;
}

.bulb--03 span.bulb__label {
	background-color: #50a49d;
}

.bulb--04 span.bulb__label {
	background-color: #cc3808;
}

.bulb--05 span.bulb__label {
	background-color: #c5a802;
	font-size: 18px;
	font-weight: bold; 
}

.chart-wrapper {
	position: relative; 
}

.chart__columns,
.chart__gap, 
.chart__absolute {
	position: absolute; 
	top: 0; 
	left: 0; 
	opacity: 0; 
	transform-origin: 50% 100%;
}

.chart__absolute.chart__circles {
	opacity: 1;
}

.chart__columns.chart__columns--mid { 
	transform-origin: 50% 50%;
}

.chart__area-between {
	opacity: 0; 
}

@media (min-width: 900px) {

.chart__columns,
.chart__gap,
.chart__absolute {
	left: 50%; 
	margin-left: -400px;

}

}

.chart-wrapper.in-view .chart__columns,
.chart-wrapper.in-view .chart__area-between {
	animation: scale-up 2s ease; 
	animation-fill-mode: forwards;
}

.chart-wrapper.in-view .chart__columns--mid {
	animation-duration: 1s;
}

.chart-wrapper.in-view .chart__gap {
	animation: flip-in-horz 1s ease 2s; 
	animation-fill-mode: forwards;
	display: none;
}

.term-of-birth .x-dropcap {
	background-color: rgba(0,0,0,0.5); 
	border-radius: 4px; 
}

.stripe-bg-red-top {
	position: relative;
	background: 
  /* On "top" */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 30px,
    #d13614 30px,
    #d13614 60px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
    #da4524,
    #d13614 
  );
	z-index: 2!important; /* put in front of dropdown image */
}

.stripe-bg-red-bottom {
	background: 
  /* On "top" */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 30px,
    #d13614 30px,
    #d13614 60px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
    #d13614,
    #e35c3e
  );
}

.x-modal-content h3 .x-icon {
	color: #e6007e;
}

.x-modal .x-modal-close {
	transform: scale(2.5)!important;
	transform-origin: 100% 0;
}

.where-toggle.x-active .x-anchor-text-primary::after {
	content: 'CLOSE'; 
	display: inline-block; 
	background: #fff; 
	color: #2daae1; 
	padding: 2px 4px; 
	margin-left: 10px;
	font-weight: 700; 
	border-radius: 2px; 
	animation: fade-in 0.2s ease; 
}

/***************************************************************
 END TERM OF BIRTH SPECIAL FEATURE
****************************************************************/