@import url(/assets/css/reset.css);
@import url(//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic);
@import 'https://fonts.googleapis.com/css?family=Euphoria+Script:wght@200;300;400;500;600;700;800;900&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap';

:root{
    --stdcol-dark: #10454f;
    --stdcol-dark-gray: #506266;
    --col-alt1: #818274;
    --lime-gray: #a3ab78;
    --lime: #bde038;
    --white: #fff;
    --light-gray: #f7f7f7;
    --dark-gray: #808080;
    --medium-grey; #ededed;
    --primary-font: 'Inter', sans-serif;
    --heading-font: 'Jost', sans-serif;
    --std-border:1px solid #e0e0e0;
    --alt-font:"Plus Jakarta Sans";
    --script-font:"Euphoria Script"
}

body,html {
	width: 100%;
	height: 100%;
	font-family:var(--primary-font);
	font-size:16px;
    box-sizing:border-box;
	padding:0;
	margin:0;
}

h1,h2,h3,h4,h5,h6 {margin:0 0 1em 0;}
h1 {font-size:42px;}
h2 {font-size:32px;}
h3 {font-size:28px;}
h4 {font-size:24px;}
h5 {font-size:17px; font-weight:700;}
h6 {font-size:14px; font-weight:700;}
h1,h2,h3 {font-family:var(--heading-font), sans-serif;}

img {
	max-width:100%;
	height:auto;
	-ms-interpolation-mode:bicubic;
}
a,
a:visited,
a:focus {cursor:pointer; transition:all 0.3s ease; text-decoration:none;}
a:hover {text-decoration:none;}
a.button {line-height:42px; display:inline-block; text-align:center; padding:0 20px; margin-top:1em;}
a.button.big {line-height:62px; display:block; max-width:300px; border-radius:8px; margin:1.5em auto 0 auto;}

* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
    
.wrapper {width:100%;}
.inner {width:100%; max-width:1200px; margin:0 auto;}
p {margin-bottom:1.5em;}
.noscroll {overflow: hidden; width:100%;}

/*************************************
	         HEADER
*************************************/
    
nav {position:absolute; top:0; left:0; width:100%; height:90px; z-index:100;}

.nav-inner {position:relative;}
.nav-inner .logo {position:absolute; left:50px; top:0;}
.nav-inner .logo img {float:left; height:70px; margin-top:10px;}
.nav-inner .logo a {line-height:90px; font-size:22px;}
.nav-inner .logo span {font-family:var(--heading-font); padding-left:20px;}
.nav-inner .logo-sg {position:absolute; right:50px; top:32px;}

.nav-inner > ul  {position:absolute; left:50%; transform:translateX(-50%); height:90px; text-align:center;}
.nav-inner ul li a {display:block;}
.nav-inner > ul > li > a {font-size:17px; line-height:90px; padding:0 20px;}
.nav-inner > ul > li {position:relative; float:left;}

.nav-inner ul ul {display:none; position:absolute; top:80px; width:220px;}

.nav-inner ul ul li {float:none; text-align:left;}
.nav-inner ul ul li:first-child {padding-top:10px;}
.nav-inner ul ul li:last-child {padding-bottom:10px;}
.nav-inner ul ul li:first-child {}
.nav-inner ul ul li:last-child {}
.nav-inner ul ul li a {display:block; line-height:34px; padding:0 30px;}
.nav-inner ul ul li a:hover {padding-left:33px;}

#mobnav-trigger {display:none; position:absolute; right:160px; top:26px; font-size:26px; color:#fff;}
#nav-mobile {display:none; position:fixed; width:100%; height:100%; background-color:#000; opacity:0.9; z-index:200;}
.nav-mobile {position:relative; height:100%; padding-top:80px;}
.nav-mobile ul {width:80%; max-width:479px; margin:0 auto}
.nav-mobile ul li,
.nav-mobile ul li a {color:#fff; font-size:21px; display:block; line-height:42px; white-space:nowrap; border-bottom:1px solid rgba(255,255,255,0.3);}
.nav-mobile ul li a:hover {color:var(--lime);}
#mobnav-close {position:absolute; top:0; right:0; display:block; font-size:21px; width:50px; line-height:50px; text-align:center; color:#fff; background-color:#bb0000; z-index:201;}

/*************************************
	         SLIDER
*************************************/

.slider {
    height:540px;
	position:relative;
	background-position: center center;
	background-repeat: no-repeat;
	background-size:cover;
	overflow: hidden;
}
.slider .overlay {
	position: relative;
	display:table;
	width:100%;
	height:100%;
	padding-right:0;
	padding-left:0;
    background-color:rgba(0,0,0,0.5);

}
.slider .content {
	position:absolute;
	top:calc(50% + 45px);
	width:100%;
   	animation: come-in 2s ease forwards;
}
.come-in {animation: come-in 1.5s ease forwards;}
.numbers {animation: numbers 0.3s ease forwards;}

@keyframes come-in {0% {transform: translateX(0px);} 100% {transform: translateY(calc(-50% + 15px));}}
@keyframes numbers {0% {transform: translateX(0px);} 0% {transform: translateY(60px);}}

.slider .content h1 {font-size:72px;}
.slider .content h1 span {font-size:22px;}
.slider .content h1 i {font-size:17px;}

.slider video {position:absolute; top:0; left:50%; transform: translateX(-50%); z-index:-1;}

.slider a.video-control {position:absolute; bottom:10px; right:10px; width:40px; height:40px; line-height:38px; color:rgba(255,255,255,0.8); font-size:15px; text-align:center; border:2px solid rgba(255,255,255,0.8); border-radius:20px; cursor:pointer; z-index:100;}
.slider a.video-control:hover {background-color:#000;}

.inner-selection {margin:80px auto 0 auto;}

.main-selection li {width:25%; height:200px; float:left;  text-align:center;}
.main-selection li a {display:block; font-weight:700; line-height:50px; font-family:'Lato', helvetica, sans-serif; font-size:17px; padding:30px 0 20px 0; white-space:nowrap; transition:all 0.5s ease;}
.main-selection li a i {height:100px; width:100px; border-radius:50px; font-size:35px; display:block; line-height:100px; margin:0 auto;}

/*************************************
	         CONTENT
*************************************/

section {padding:60px 0;}

h1 span {display:block; font-weight:normal; line-height:34px; font-size:19px;}

/*
section#testimonials {}
section#baneguide-ex {}
*/

.boxed {
	text-align:center;
	padding:20px;
}

.boxed span {display:block; line-height:2em;}
.boxed a,
.boxed a:visited,
.boxed a:focus {text-decoration:none !important;}

.framed {padding:20px;}

.framed a,
.framed a:visited,
.framed a:focus {text-decoration:none !important;}

.customers {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    flex-direction: row;
    gap:20px;
}
.club-wrap {
    position:relative;
    width:calc(33.3333% - 20px);
	height:113px;
    border-radius:5px;
	padding:10px;
}
.club-wrap .head {padding-bottom:10px; height:60px;}
.club-wrap .head a {position:absolute; top:10px; left:70px; font-size:15px; height:50px; line-height:50px; display:block; max-width:200px;}
.club-wrap .foot {font-size:13px; padding-top:10px;}
.club-wrap .foot a {font-size:13px;}
.club-wrap a {white-space:nowrap; text-decoration:none !important; }

.video-container {
	position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
table {border-spacing: 0; border-collapse: separate; margin-bottom: 20px;}
table th,
table td {display: table-cell; vertical-align: top; border-spacing: 0; padding: 4px 6px;}
table a {text-decoration:none;}

.pricetable {
	width:100%;
	max-width:850px;
}
.pricetable tr td,
.pricetable tr th {
	text-align:center;
}
.pricetable tr td:first-child,
.pricetable tr th:first-child {
	text-align:left;
}
.pricetable tr td:first-child {
	font-size:14px;
}
.pricetable tr td,
.pricetable tr th {padding:8px;}

td.gr1,th.gr1 {width:150px;}
td.gr2,th.gr2 {width:150px;}
td.gr3,th.gr3 {width:150px;}
td.gr1 span,td.gr2 span,td.gr3 span {white-space:nowrap;}
td.gr1 strong,td.gr2 strong,td.gr2 strong {font-size:17px; white-space:nowrap;}

@media (max-width: 767px) {
	td.gr1,th.gr1 {width:120px;}
	td.gr2,th.gr2 {width:120px;}
	td.gr3,th.gr3 {width:120px;}
}

/***** LOGOS ***********/

.logos {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap:20px;    
}    
.logos .logo {flex:0 0 calc(25% - 20px);}


/***** TILES ***********/

.tiles {display:flex; flex-wrap:wrap; height:520px; overflow:hidden;}
.tiles.h720 {height:720px;}
.tiles.auto-height,
.tiles.auto-height .tile {height:auto;}

.tiles.tiles-2.img-right {flex-direction:row-reverse;}
.tiles.tiles-2 .tile {width:50%; flex-grow:1;}
.tiles .tile.image {position:relative;}
.tiles .tile.image img {height:520px; width:100%; object-fit:cover;}
.tiles.h720 .tile.image img {height:720px;}

.tiles .tile.content {display:table; height:100%; padding:45px 5%;}
.tiles .tile.content .col-text {display:table-cell; font-size:18px; vertical-align:middle;}
.tiles .tile.content .col-text h1 {letter-spacing:-1px; margin-bottom:0.5em;}
.tiles .tile.content p {font-size:18px;}
.tiles .tile.bg-img {background: transparent url(../images/pills.png) 50% 50% no-repeat;}

/***** TESTIMONIALS ***********/

.testimonials p {
	width: 100%;
	float: left;
	position: relative;
	padding-left: 55px;
	font-style: italic;
	margin: 0px;
	line-height: 21px;
	background:transparent url(/assets/images/quotes.png) no-repeat left top;
}
.testimonials p i {
	width: 55px;
	text-align: center;
	font-size: 36px;
	position: absolute;
	left: 10px;
	top: 0px;
}
.testimonials p span {
	width: 100%;
	float: left;
	font-family: 'Euphoria Script', cursive;
	font-size: 27px;
	line-height: 24px;
	margin-bottom: 10px;
	text-transform: capitalize;
	margin-top: 20px;
	font-style: normal;
}
.testimonials p small {
	font-size:13px;
	display:block;
	margin-top: 0px;
	font-style: normal;
}

.testimonials .argument {
    line-height:30px;
    position:relative; 
    border-radius:10px;
    -webkit-box-shadow:0 20px 60px rgba(0,0,0,.08); box-shadow:0 20px 60px rgba(0,0,0,.08); -webkit-transition:all 350ms cubic-bezier(.37,0,.63,1); transition:all 350ms cubic-bezier(.37,0,.63,1);
    padding:30px 50px;
    background-color:var(--white);
    color:var(--dark-gray);
}
.testimonials .testimonial-arrow:after {content:"";top:100%;left:50px;height:0;width:0;z-index:9;margin-left:-9px;position:absolute;pointer-events:none;border:solid transparent;border-width:14px;border-top-color:var(--white)}
.testimonials .client-detail {font-size:17px; padding:20px 15px; margin-top:10px;}
.testimonials .client-detail span {font-size:15px;}
.testimonials .client-detail img {border-radius:50%; width:80px; height:80px; margin-right:15px;}
.testimonials .client-sign {display:inline-block; vertical-align:middle; line-height:22px; font-weight:500;}
.testimonials .client-sign div {font-family:var(--script-font); font-weight:600; font-size:25px; margin-bottom:5px;}
.testimonials .client-sign span {color:var(--dark-gray);}

/*************************************/

.anim-numbers {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
}
.anim-numbers > div {
    flex-grow: 1;
    position:relative;
    max-width:200px;
    min-width:200px;
    max-height:200px;
    min-height:200px;
    text-align:center;
    box-shadow:3px 0 25px rgba(0,0,0,0.2);
    border-radius:50%;
    padding:30px 0;
    margin:0 10px;
}
.anim-numbers > div div {position:absolute; top:48%; left:50%; transform:translate(-50%, -50%); white-space:nowrap;}
.anim-numbers > div div i {font-size:42px; opacity:0.5; margin-bottom:10px;}
.anim-numbers > div div .num-counter {font-style:normal; font-size:32px; font-weight:bold; white-space:nowrap; margin-bottom:10px;}
.anim-numbers > div div span {display:block; font-size:17px;}

/*************************************
	         FORMS
*************************************/

.inp-group {display:block; margin-bottom:15px;}
.inp-group.submit {text-align:right; width:100%; max-width:800px;}
.inp-group label {display:block; padding-left:5px;}
.inp-group textarea,
.inp-group input[type=text] {display:block; width:100%; max-width:400px; padding:0 10px; font-family:sans-serif}
.inp-group input[type=text] {height:42px; line-height:42px;}
.inp-group textarea {height:100px; max-width:100%; line-height:21px; padding:10px;}
.inp-group input[type=submit] {height:62px; line-height:62px; padding:0 40px;}

.email {display:none;}

.list-cols {width:100% !important;}
.list-cols ul {width:calc(50% - 20px); float:left;}
.list-cols ul:last-child {margin-left:20px;}

ul.checklist {--icon-space: 1.5em;}
ul.checklist li {padding-left:var(--icon-space);}
ul.checklist li:before {
    font-family:'Font Awesome 5 Free';
    font-weight:900;
    content:'\f00c';
    display: inline-block;
    margin-left: calc( var(--icon-space) * -1 );
    width: var(--icon-space);
}

/*************************************
	         FOOTER
*************************************/

.footer {width:60%; padding:50px 0; margin:0 auto;}

/*************************************
	         MISC
*************************************/

.txt-c {text-align:center;}
.txt-r {text-align:right;}
.ls-m1px {letter-spacing:-1px;}
.ls-1px {letter-spacing:1px;}
.m-tb {margin:30px auto;}
.n-p {padding:0;}
.n-m {margin:0;}

/*************************************
            ANIMATION
*************************************/

.anim {opacity: 0; transition: opacity 1s, transform 1s; /* Smooth transition */}
.move-up            {transform:translateY(100px);}
.move-left          {transform:translateX(100px);}
.move-right          {transform:translateX(-100px);}
.move-up.activate   {opacity:1; transform:translateY(0);}
.move-left.activate {opacity:1; transform:translateX(0);}
.move-right.activate {opacity:1; transform:translateX(0);}

/*************************************
	         RESPONSIVE
*************************************/

@media only screen and (max-width: 1350px) {
    .slider {height:calc(100vh - 135px);}
    .anim-numbers > div {
        max-width:160px;
        min-width:160px;
        max-height:160px;
        min-height:160px;
    }
    .anim-numbers > div div i {font-size:32px; margin-bottom:5px;}
    .anim-numbers > div div .num-counter {font-size:24px; margin-bottom:5px;}
    .anim-numbers > div div span {font-size:15px;}
}

@media only screen and (max-width: 1199px) {
    .inner-selection {width:100%; max-width:1200px; margin:0 auto;}
    .inner {padding:0 50px;}
    .anim-numbers > div {max-width:160px; min-width:160px; max-height:160px; min-height:160px; padding:25px 0; margin:0 5px;}
    .testimonials .argument {padding:20px 30px;}
    .tiles .tile.sm-4 {width:33.3333%}
    .tiles .tile.sm-8 {width:66.6666%}
    .nav-inner > ul > li > a {padding:0 10px;}
}
@media only screen and (max-width: 991px) {
    .nav-inner .logo span {display:none;}

    .tiles.tiles-2.img-right {flex-direction:row;}
    .tiles.tiles-2 .tile {width:100%;}
    .tiles,
    .tiles.h720 {height:auto;}
    .tiles .tile.content {width:100%; height:auto; display:block;}
    .tiles .tile.image {width:100%;}
    .tiles .tile.image img,
    .tiles.h720 .tile.image img {height:auto;}
    .tiles .col-text {font-size:15px;}
    .tiles .col-text h2 {font-size:28px; letter-spacing:2px;}

	.main-selection li {height:135px;}
	.main-selection li a {line-height:35px; font-size:15px; padding:20px 0 10px 0;}
	.main-selection li a i {height:70px; width:70px; border-radius:35px; font-size:25px; line-height:70px;}

    .anim-numbers > div {max-width:120px; min-width:120px; max-height:120px; min-height:120px; margin:5px;}
    .anim-numbers > div div i {font-size:26px; margin-bottom:0;}
    .anim-numbers > div div .num-counter {font-size:24px; margin-bottom:0;}
    .anim-numbers > div div span {font-size:14px;}

	.testimonials p {margin-bottom:20px;}
    .club-wrap {width:calc(50% - 20px);}
	.footer {width:100%;}
}
@media only screen and (max-width: 767px) {
   .inner {padding:0 30px;}

    .nav-inner > ul  {display:none;}
    .nav-inner .logo {left:30px;}
    .nav-inner .logo-sg {right:30px;}
    #mobnav-trigger {display:block;}

    .slider .content h1 {font-size:52px;}
    .slider .content h1 span {font-size:22px;}

    .anim-numbers > div {max-width:160px; min-width:160px; max-height:160px; min-height:160px;}
    .anim-numbers > div div i {font-size:32px; margin-bottom:5px;}
    .anim-numbers > div div .num-counter {font-size:24px; margin-bottom:5px;}
    .anim-numbers > div div span {font-size:15px;}

    .club-wrap {width:100%;}
    
	.row [class*="col-"] {margin-bottom:30px;}
	.row [class*="col-"]:last-child {margin-bottom:0;}
}
@media only screen and (max-width: 579px) {
    .slider {height:calc(100vh - 200px);}
    .slider .content {text-align:center;}
	nav .logo span {display:none;}
    .nav-inner .logo {left:20px;}
    .nav-inner .logo-sg {right:20px;}
    inner {padding:0 20px;}
    h1 {font-size:32px;}
    h2 {font-size:28px;}
    h3 {font-size:24px;}
    h4 {font-size:21px;}

    .main-selection li {width:50%;}
	.main-selection li {height:100px;}
	.main-selection li a {line-height:35px; font-size:15px; padding:8px 0 10px 0;}
	.main-selection li a i {height:52px; width:52px; border-radius:26px; font-size:20px; line-height:49px;}

    .list-cols ul {width:100% !important; float:none;}
    .list-cols ul:last-child {margin-left:0;}

    .logos .logo {flex:0 0 calc(50% - 20px);}
}
@media only screen and (max-width: 479px) {
	nav a div {display:none}
	nav .buttons a {right:0; top:50px; line-height:23px;}
	.hide-mobile {display:none;}
	.hide-desktop {display:block;}
}
