/* general css layout */

@import url('gmi.css');
body{ color: #121212;}
.container-fluid{padding:0px 30px }
.py-80{padding-top:80px;padding-bottom:80px;}
.pb-80{padding-bottom:80px;}
.py-100{padding-top:100px;padding-bottom:100px;}
.px-100{padding-left:100px;padding-right:100px;}
.mb-80{margin-bottom:80px;}
.mt-80{margin-top:80px;}
.btn{
    border-radius: 30px;
}
a{
    color:#4f4980;text-decoration:none
}
.display-1,.display-2,.display-3{
    letter-spacing: -2px;
}
.rounded-30{
    border-radius:30px;
}
.px-30{padding-left:30px; padding-right:30px}
.btn-red{background-color: #E60303;color:#fff !important;}
.btn-outline-red{border-color: #E60303;color:#E60303 ;background-color: #fff;}
.btn-outline-red:hover{background-color: #E60303; color :#fff }
.big-btn {font-size: 20px; padding: 10px 20px; border-radius: 30px; font-weight: 500;}
.btn-primary{color: #fff;background-color: #337ab7;border-color: #337ab7;}
.btn-primary.active, .btn-primary:focus, .btn-primary:hover {color: #fff;background-color: #3769ac;border-color: #3769ac;}
.text-light-blue{color:  #2ba9e5}
.bg-dark-blue{
    background-color: #131b42;
}
.banner-section{
    color:#040f23
}
.gradient-blue-to-purple{
    background: #ccedfc;background-image: linear-gradient(to bottom right, #ccedfc,#cde8f9,#c9c0dd, #9d99bc); border-radius:30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.display-3,.display-2{ font-weight:400}
.banner-feature-pills li{ padding: 0px 15px;}
.banner-feature-pills button{font-size:20px; max-width:135px; line-height: 1.3;}
.banner-feature-pills button i{ font-size:24px;padding: 10px; border-radius: 10px;}
.banner-feature-pills button:hover,.banner-feature-pills button.active{
    color: #4f4980;
}
.banner-feature-pills button:hover i,.banner-feature-pills button.active i{
    color: #fff;
    background-color: #4f4980;
}
.banner-feature-pills button:focus{ outline: none !important; box-shadow: none !important;}
img{max-width:100%; height:auto}
p{font-size:20px;}
.position-lg-absolute{position: absolute;right:0;bottom:0;}
.sprite {background-image: url('../img/gymmaster-spritesheet.png'); background-repeat: no-repeat; display: block;}
.sprite-Fitness247 {width: 155px;height: 20px; background-position: -170px -5px;}
.sprite-Group-577 {width: 43px;height: 43px; background-position: -335px -5px;}
.sprite-Path-152 { width: 40px; height: 47px; background-position: -388px -5px;}
.sprite-gideon { width: 125px; height:120px; background-position: -430px -289px;}
.sprite-joe_laxton { width: 120px;height: 120px; background-position: -395px -424px;}
.sprite-melissa_percival { width: 120px; height: 120px; background-position: -568px -90px;}
.sprite-border{border: 3px solid #fff;border-radius: 100%;}
.sprite-lock {  width: 16px; height: 16px;background: url('../img/header-sprite.png') -84px -160px;display: inline-block;}
.sprite-features_menu_arrow { width: 10px; height: 6px;background: url('../img/header-sprite.png') -142px -115px;display: inline-block;margin-top: -4px; margin-left: 10px;vertical-align: middle;}
.sprite-cross_white {width: 35px; height: 35px;background: url('../img/header-sprite.png') -10px -10px;display: inline-block;}
.sprite-section_down_arrow {width: 13px; height: 8px;background:  url('../img/header-sprite.png') -176px -131px;display: inline-block;margin-left: 4px;margin-top: -4px; vertical-align: middle;}
.sprite-banner_down_arrow {width: 41px; height: 23px;background: url('../img/header-sprite.png') -65px -10px;display: inline-block;}
.unordered-blue {margin-left:-15px;}
.unordered-blue li{font-size:20px;}
.unordered-blue li::marker { color: #3F76B8;font-size: 24px;;}
/* subpage header */
.subpage-header { background: url(../img/gymmaster-header-background.webp);background-repeat: no-repeat;background-size: cover;padding: 100px 0px;color: #fff;background-color: #112234;}
/* subpage header end */
.add-left-arrow,.add-right-arrow{position:relative; }
@keyframes float {
    0% {
      box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
      transform: translatey(0px);
    }
    50% {
      box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
      transform: translatey(-20px);
    }
    100% {
      box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
      transform: translatey(0px);
    }
  }

@keyframes ripple {
    0% {
      box-shadow: 0 0 0 0 rgba($white, 0.1),
                  0 0 0 20px rgba($white, 0.1),
                  0 0 0 40px rgba($white, 0.1),
                  0 0 0 60px rgba($white, 0.1);
    }
    100% {
      box-shadow: 0 0 0 20px rgba($white, 0.1),
                  0 0 0 40px rgba($white, 0.1),
                  0 0 0 60px rgba($white, 0.1),
                  0 0 0 80px rgba($white, 0);
    }
  }
  .bounce {-moz-animation: bounce 3s infinite;-webkit-animation: bounce 3s infinite;animation: bounce 3s infinite; height:30px;}
  @keyframes bounce {0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);-ms-transform: translateY(0); -webkit-transform: translateY(0);transform: translateY(0);}40% {-moz-transform: translateY(-30px);-ms-transform: translateY(-30px);-webkit-transform: translateY(-30px);transform: translateY(-30px);}
  60% {-moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -webkit-transform: translateY(-15px); transform: translateY(-15px);}}
.add-left-arrow::before{width: 189px;height:630px;content: " ";position:absolute;top:-100px;left:0px;background-image: url("../../img/LEFT-SIDE-GRAPHIC.webp");}
.add-right-arrow::before{ width: 120px;height:334px;content: " "; position:absolute;top:100px;right:0px; background-image: url("../../img/RIGHT-SIDE-GRAPHIC.webp");}
/*top navbar */
.navbar.up {top: -120px;}
.top-navbar-light{padding:15px 0;background-color:#fff !important;z-index: 9999;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease;}
.top-navbar-light .navbar-nav a.nav-link{text-transform: capitalize;font-size:22px;color:rgb(41, 34, 34);padding:10px 15px;}
.top-navbar-light .navbar-nav a.nav-link:hover, .top-navbar-light .navbar-nav a.active{color: #2d5184}
.top-navbar-light .navbar-nav a.btn-lg{padding:8px 20px;}
.top-navbar-dark{padding:20px 0;background-color:#000d20 !important;z-index: 9999;}
.top-navbar-light .nav > li > a.dropdown-toggle:after {content: ""; display:none;}
ul.dropdown-menu {background: #ffffff;margin-top: 25px !important;padding: 0px;border: 0px;min-width:250px;}
ul.dropdown-menu li a {padding: 18px 20px; display:block;    color: #444; text-decoration: none;}
.dropdown-menu{ font-size: 16px;}
ul.dropdown-menu li:hover, ul.dropdown-menu li a:hover { background-color: #347ab6; color: #fff !important;}
ul.dropdown-menu li:hover::before{right: -30px;position: absolute;width: 0;height: 0;content: " ";border-top: 30px solid transparent;border-bottom: 30px solid transparent;border-left: 30px solid #347ab6;}
.email_form{width: 300px; position: relative;}
.email_form .form-control{border-radius:15px; padding:8px 16px;}
.email_form .btn{border-top-right-radius: 15px;border-bottom-right-radius: 15px;padding:8px 16px;font-weight:600;}
/* demo form */
.demo-form  .error:not(:empty),.email_form .error:not(:empty){width: 100%;padding: 5px;background-color: #FFC2B2;margin-top: 2px;color: #E31414;border: 1px solid #E62E00;border-radius: 15px;text-align: center; position: absolute; z-index: 9;}
.demo-form .form-control,.demo-form .btn{padding:8px 16px; font-size:16px; border-radius: 30px;}
.demo-form .btn{border-radius: 30px; font-weight:bold}
.demo-form{width:400px; position: relative;}
.demo-form input:focus{background-color: lightyellow;}
/* counter section */
.counter-section .content{background: #131b42;padding:40px ;border-radius:30px; color:#fff}
.counter-section .content .display-3 { line-height: 1;}
.counter-section .content .count-text{ color: #afa0cd; font-size: 28px; font-weight:lighter;}
/* footer  css*/
.footer-top{padding:0px 30px;}
.footer-top-content{z-index:999;position: relative; background: #ccedfc;
background-image: none;
  background-image: linear-gradient(to bottom right, #ccedfc,#cde8f9,#c9c0dd, #9d99bc);
  border-radius: 30px; padding-bottom:100px !important}
  footer{padding: 0px 30px;}
.footer-content {  background: #ccedfc;background-image: linear-gradient(to right, #2e3a6a,#2d3468,#2e2661, #1c213e);  padding: 80px 0px;color: #fff; border-radius: 30px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0;}
footer h3 { font-size: 20px; color: #fff !important; text-transform: uppercase; }
footer ul {list-style-type: none; margin-left: -30px; margin-top: 30px;}
footer ul li { padding: 5px 0px; font-size: 14px;  margin: 0px !important;}
footer ul li a { color: #98bae7 !important; text-decoration: none; }
.footer-top .container-fluid, footer .container-fluid, .footer-bottom .container-fluid {  padding-left: 100px; padding-right: 100px; }
.footer-bottom{padding:0px 30px;}
.absolute-footer{margin-top:-45px; z-index:999; width: 100%;}
.footer-bottom-content{ background: #ccedfc;background-image: linear-gradient(to right, #252e57,#242754,#2e2461, #141831);   padding: 25px 0px; color: #ccc; font-size: 15px;border-radius: 30px; border-top-left-radius: 0;border-top-right-radius: 0; }
.footer-bottom ul {list-style-type: none; margin: 0px;}
.footerbottom_links ul li {display: inline; padding: 0px 5px;}
footer .socialicons li { display: inline; padding-right: 10px;}
footer .socialicons li img{ height:30px ; width:30px}
.sprite-fb {width: 30px; height: 30px; background: url('../img/header-sprite.png') -10px -65px;display: inline-block;}
.sprite-twt { width: 30px; height: 30px;background: url('../img/header-sprite.png') -60px -65px; display: inline-block;}
.sprite-lnk {width: 30px; height: 30px;background: url('../img/header-sprite.png') -126px -10px;display: inline-block;}
.footerbottom_links ul li::after { content: "|";margin-left: 15px;}
.footerbottom_links ul li:last-child::after { content: "";}
.footerbottom_links ul li a { color: #ccc; text-decoration: none;;}
/* end footer  css*/
/* Feature Section with tabs and slides */
.feature-pills .nav-item {margin: 5px 0;margin-bottom:10px}
.feature-pills .nav-item .btn{position: relative; background-color: #fff; font-size:18px;margin-right:15px; color:#676769; border:2px solid #fff; font-weight:500;padding:8px 16px;}
.feature-pills .nav-item .btn.active{ background-color: #fff; color:#3F76B8; border-color:#3F76B8}
.feature-pills .nav-item .btn.active:after{position:absolute;
    width: 20px;
    height: 20px;
    border-top: 0px solid #ffff;
    border-right: 2px solid #3F76B8;
    border-bottom: 2px solid #3F76B8;
    border-left: 0px solid #ffff;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    content: '';
    transform: rotate(45deg);
    margin-top: -9px;
    background: #fff;}

#featurestab .carousel-inner{
    overflow:initial !important
}
/* testimonials section */
.testimonial-section .carousel-control-next,.testimonial-section .carousel-control-prev{

background-color: #5b5490;
width: 60px;
height: 60px;
border-radius: 100%;
border: 1px solid #000;
opacity: 1;
top: calc(50% - 30px)
}
.testimonial-section .carousel-control-next{
    right:-30px;
}
.testimonial-section .carousel-control-prev{
    left:-30px;
}
.testimonial-section  .carousel .carousel-indicators button {
    width: 15px;
   height: 15px;
   border-radius: 100%;
 }
 .testimonial-box{
    background-color: rgba(248, 252, 255, 0.7);
    padding:20px;
    border: 2px solid #fff;
    border-radius: 25px;
    height:100%

 }
 .testimonial-box .sprite-border:nth-child(2n+1){
    border-color: #2ba8dd;
 }
 .testimonial-box .sprite-border:nth-child(2n){
    border-color: #e9848b;
 }
 .testimonial-box .client-name{color:#2ba8dd; font-weight:  bold;}
/* Start of Media Queries */
@media only screen and (min-width: 1520px) {
    .container{max-width: 1400px !important;}
}
@media only screen and (min-width: 1780px) {
    .container{max-width: 1600px !important;}
}

@media only screen and (min-width: 1920px) {
     .container{max-width: 1800px !important;}
     .main p,.main h4 { font-size: 24px; }
}
@media only screen and (min-width: 2200px) {
    .container{max-width: 80% !important;}
}
@media only screen and (max-width: 2400px){
    .display-1{ font-size:6.5rem; }
    .display-2{ font-size:4.5rem; }
    .display-3{ font-size:4rem; }
    .display-4{ font-size:3.5rem; }
    .display-5{ font-size:3rem; }
}
@media only screen and (max-width: 2200px){
    .display-1{ font-size:6rem; }
    .display-2{ font-size:4rem; }
    .display-3{ font-size:3.5rem; }
    .display-4{ font-size:3rem; }
    .display-5{ font-size:2.5rem }
}
@media screen and (max-width: 2150px){
    #featurestab .carousel-control-prev {width: 50px !important;left: -60px !important;}
    #featurestab .carousel-control-next {width: 50px !important;right: -60px !important;}
    .add-left-arrow::before{ left:-80px } 
}
@media screen and (max-width: 2000px){ .add-left-arrow::before{ left:-115px } .add-right-arrow::before{ right:-20px }}
@media screen and (max-width: 1960px){ .add-left-arrow::before{ left:-125px } .add-right-arrow::before{ right:-40px }}
@media only screen and (max-width: 1920px){
    .display-1{ font-size:6rem; }
    .display-2{ font-size:4rem; }
    .display-3{ font-size:3rem; }
    .display-4,.h1,h1{ font-size:3rem; }
    .display-5,.h2,h2{ font-size:2.5rem; }
    .main img { max-width: 100%; height: auto;}
}
@media only screen and (max-width: 1780px){
    .display-1{ font-size:5rem; }
    .display-2{ font-size:3.5rem; }
    .display-3{ font-size:2.75rem; }
    .display-4,.h1,h1{ font-size:2.5rem; }
    .display-5,.h2,h2{ font-size:2rem }
    .add-left-arrow::before,.add-right-arrow::before{background-image: none;width:0;} 
}
@media only screen and (max-width: 1520px){
   
    /* footer  css*/
    footer ul li, .footer-bottom { font-size: 14px; }
    footer .socialicons li { padding-right: 5px; }
    footer .socialicons li img { height: 22px;width: 22px; }
    .sprite-twt { width: 22px; height: 22px; background: url('../img/header-sprite.png') -176px -10px; display: inline-block; }
    .sprite-lnk { width: 22px; height: 22px; background: url('../img/header-sprite.png') -176px -52px;display: inline-block; }
    /* end footer  css*/
    .main img{max-width:100%; height:auto}
    .display-1{ font-size:4rem; }
    .display-2{ font-size:3rem; }
    .display-3{ font-size:2.5rem; }
    .display-4,.h1,h1{ font-size:2rem; }
    .display-5,.h2,h2{ font-size:1.5rem }
    #featurestab .carousel-control-prev { width: 50px !important;left: -50px !important; }
    #featurestab .carousel-control-next { width: 50px !important; right: -50px !important;}
}
@media only screen and (max-width: 1380px) {
    /* footer  css*/
    .footer-top .container-fluid, footer .container-fluid, .footer-bottom .container-fluid, .footer-top-subpage .container-fluid { padding-left: 50px; padding-right: 50px;}
    footer h3 { font-size: 15px; }
    footer ul li, .footer-bottom { font-size: 12px; }
    footer .socialicons li img { height: 17px;width: 17px; }
    .sprite-twt { width: 17px; height: 17px; background: url('../img/header-sprite.png') -10px -160px; display: inline-block; }
    .sprite-lnk { width: 17px; height: 17px; background: url('../img/header-sprite.png') -47px -160px; display: inline-block; } 
    .display-1{ font-size:52px; }
    .display-2{ font-size:42px; }
    .display-3{ font-size:40px; }
    .display-4,.h1,h1{ font-size:36px;}
    .display-5,.h2,h2{ font-size:32px }
    p,.unordered-blue li{ font-size:18px; }
    /* end footer  css*/
    .top-navbar-light .navbar-nav a.nav-link, .top-navbar-light .navbar-nav a.btn{ font-size:20px; padding: 8px 14px; }
    .counter .count-text {
        font-size: 24px !important;
    }
    .add-left-arrow::before,.add-right-arrow::before{background-image: none;width:0;}
}
@media only screen and (max-width: 1200px) {
    .top-navbar-light .navbar-nav a.nav-link, .top-navbar-light .navbar-nav a.btn{ font-size:20px; padding: 6px 12px;}
    .container-fluid { padding-left: 15px; padding-right: 15px; }
    .navbar-brand img { height: 40px; width:auto; }
}

@media only screen and (max-width: 992px){
    .navbar-left{width:100%; display: block !important;}
    p, .unordered-blue li, .counter .count-text {font-size:16px !important;}
    .container{max-width:100%; overflow: hidden;}
    .container-fluid,.footer-top .container-fluid, footer .container-fluid, .footer-bottom .container-fluid, .footer-top,footer,.footer-bottom, .px-30{ padding-left: 15px; padding-right: 15px;}
    .footer-content{ padding:40px 0}
    h3{ font-size:24px !important }
    h4,.h4{ font-size:18px; }
    .display-1{ font-size:42px; }
    .display-2{ font-size:38px;}
    .display-3{ font-size:32px; letter-spacing: -1px; }
    .display-4,.h1,h1{ font-size:32px; }
    .display-5,.h2,h2{ font-size:28px }
    .main img { max-width: 100%; height: auto; }
    .navbar-toggler { border:0; padding:0; }
    .top-navbar .email_form {margin:30px auto; position: relative; }
    .navbar-brand img {height: 39px;width:auto }
    /* footer  css*/
    .footer-top {background: none; }
    .footer-bottom,.footer-top,footer{ text-align: center;}
    footer .socialicons li img { height: 25px; width: 25px;}
    .sprite-twt { width: 25px; height: 25px; background: url('../img/header-sprite.png') -10px -115px; display: inline-block;}
    .sprite-lnk { width: 25px; height: 25px; background: url('../img/header-sprite.png') -55px -115px; display: inline-block;}
    /* end footer  css*/
    .py-80,.py-100{ padding: 30px 0px !important; }
    .position-lg-absolute{position: relative !important}
    .section .container{ text-align:center !important }
    .bg-grey-mobile{ background-color: #eef2f6 !important;}
    .big-btn { font-size: 16px; padding: 12px 24px; border-radius: 15px; font-weight: 600;}
    .unordered-blue{text-align: left;}
    .mobile-navigation .navbar-nav{display: block !important;}
    .mobile-navigation .nav > li > a{display: inline-block; width: 100%; border:0; text-decoration: none;}
    .mobile-navigation .nav > li > a.active {color: #fff !important;padding: 10px 30px;background-color: #122b4d;width:100%}
    .mobile-navigation .nav > li > a:hover,.mobile-navigation .nav > li > a:focus {color: #fff !important;padding: 10px 30px;background-color: #122b4d; border:0}
    .mobile-nav{background: #2d4e78;text-align:center; display:none;height:100vh; padding-top:40px; position: sticky;top: 0px;width: 100%;right: 0;z-index: 10000;}
    .mobile-navigation .nav > li > a,.dropdown-menu > li > a{color:#fff !important;padding: 10px 30px;text-transform: uppercase;}
    .mobile-close{position: absolute; right:15px; font-size:40px;top:15px;z-index:10000;background-color: #2d4e78; border: none; color:#fff}
    .mobile-navigation .navbar-nav .dropdown-menu.show { position: static !important; float: none; width: auto; margin-top: 0 !important; background-color: #122b4d; border: 0; -webkit-box-shadow: none; box-shadow: none; text-align: center;  transform: translate(0,0) !important;}
    .mobile-navigation .nav  > ul > li > a:hover{background-color: #000;}
    .navbar-nav  .dropdown-menu .dropdown-header, .navbar-nav .dropdown-menu > li > a {padding: 5px 15px 5px 25px;color: #fff !important;}
    .navbar-nav  .dropdown-menu > li > a {text-transform: capitalize; display: block; text-decoration: none;}
    .navbar-nav .dropdown-toggle::after{ display: none;}
    .navbar-nav .dropdown-menu > li > a.active, .navbar-nav .open .dropdown-menu > li > a:hover { background-color: #000000; }
    .testimonial-section .quote{margin-top:-100px; z-index:999}
    .testimonial-section .box {margin-bottom: 80px; text-align: center;}
    .testimonial-section .box:last-child{margin-bottom:20px}
    .testimonial-section .quote{margin-bottom:20px; }
    .testimonial-section .quote .sprite{margin:auto}
    .testimonial-section .carousel-inner{
       padding-top:100px !important;
    }
}

@media only screen and (max-width: 520px){
    .display-1{ font-size: 40px; }
    .display-2{ font-size: 36px;}
    .display-3{ font-size:30px  }
    .display-4,.h1,h1{ font-size:28px }
    .display-5,.h2,h2{ font-size:24px }
    h4,.h4{ font-size:16px; font-weight:bold }
    .demo-form{width:100%; position: relative;}
    .unordered-blue li::marker{ font-size:18px;}
}
@media only screen and (max-width: 450px){
    .display-1{ font-size: 36px; }
    .display-2{ font-size: 30px; }
    .display-3{ font-size:26px; }
    .display-4,.h1{ font-size:25px; }
    .display-5,.h2,h2{ font-size:24px; }
    h3{ font-size: 22px !important}
    h4,.h4{ font-size:15px;  font-weight:bold }
    .demo-form,.email_form {width:100%; position: relative;}
    .email_form .form-control,.demo-form .form-control { border-radius: 15px; padding: 6px 12px;}
    .email_form .btn, .demo-form .btn{ border-top-right-radius: 15px; border-bottom-right-radius: 15px; padding: 6px 12px; font-weight: 600;}
}
@media only screen and (max-width: 390px){
    .display-3{ font-size:22px }
    .display-4,.h1{ font-size:20px  }
    .display-5,.h2,h2{ font-size:18px; }
    h3{ font-size: 18px !important }
    h4,.h4{ font-size:14px; font-weight:bold }
    .demo-form{width:100%; position: relative;}
    p, .unordered-blue li { font-size: 14px; }
    .unordered-blue li::marker{ font-size:14px; }
}
@media only screen and (max-width: 340px){
    .feature-pills .nav-item .btn{ font-size:14px;padding: 7px 8px; }
}
@media only screen and (max-width: 300px){
    .display-3{ font-size:18px }
    .display-5{ font-size:17px; }
    h3{ font-size: 16px !important }
    h4,.h4{ font-size:14px; font-weight:bold }
    p, .unordered-blue li { font-size: 14px; }
    .demo-form{width:100%; position: relative;} 
}
@media only screen and (min-width: 992px)
{
    .w-87 { width: 87%;}
    .w-13 { width: 13%;}
    .mobile-nav{ display:none !important}
}


/* Part of the image (using divs as overlays) */
 /* Container holding the two parts of the image */

/* Positioning the first part */
.part1 {
    width: 258px;
    height:246px;
    background: url('../img/gymmaster-integrations.png') 239px 97px;
}

/* Positioning the second part */
.part2 {
    width: 258px;
    height:246px;
    background: url('../img/gymmaster-integrations.png') 585px 19px;
}