html,body{
  height:100%;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  font-size: 16px;
}

#consentWidgetDiv {width: 400px; height: 140px;}

/* colors */

.btn-link {
  color: #7c9717;
  text-transform:uppercase;
}

.text-main{color:#9ebc2e}
.text-alt{color:#7c9717}
.text-focused{color:#677f0e}
.text-sub{color:#57680e}
.text-medium{color:#ccc}
.text-light{color:#777 !important}
.text-orange{color:orange}
.text-orange-dark{color: rgba(255,102,0,1)}
.text-blue-dark{color: #121628}
.text-blue-light{color: #26304a}
.text-mf-green-bright{color:#b0da13}
.text-mf-green-dark{color:#7b9617}
.text-mf-green-fade{
  background: -webkit-linear-gradient(270deg,#b0da13,#7b9617);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-green-1 {color:#7b9617!important;}

.bg-main{background-color:#9ebc2e}
.bg-alt{background-color:#7b9617}
.bg-focused{background-color:#677f0e}
.bg-sub{background-color:#57680e}
.bg-medium{background-color:#ccc}
.bg-light{background-color:#eee}
.bg-dark{background-color:#555 !important}
.bg-orange{background:orange}
.bg-orange-dark{background: rgba(255,102,0,1)}
.bg-blue-dark{background: #1e2132}
.bg-blue-light{background: #26304a}

.border-main{border-color:#9ebc2e !important}
.border-alt{border-color:#7b9617 !important}
.border-focused{border-color:#677f0e !important}
.border-sub{border-color:#57680e !important}
.border-medium{border-color:#ccc !important}
.border-dark{border-color:#555 !important}
.border-secondary{border-color:#999 !important}
.border-light{border-color:#f8f9fa !important}

.bg-tp-main{background: rgba(148,188,46,.7)}
.bg-tp-alt{background: rgba(124,151,23,.7)}
.bg-tp-sub{background: rgba(87,104,14,.7)}
.bg-tp-medium{background: rgba(108,117,125,.3)}
.bg-tp-secondary{background: rgba(108,117,125,.6)}
.bg-tp-orange{background: rgba(255,102,0,.95)}

.bg-hover-main:hover{background-color:#9ebc2e !important}
.bg-hover-alt:hover{background-color:#7b9617 !important}
.bg-hover-focused:hover{background-color:#677f0e !important}
.bg-hover-sub:hover{background-color:#57680e !important}
.bg-hover-medium:hover{background-color:#ccc !important}
.bg-hover-dark:hover{background-color:#555 !important}
.bg-hover-white:hover{background-color:#fff !important}
.bg-hover-orange:hover{background-color:orange !important}
.bg-hover-orange-dark:hover{background-color: rgba(255,102,0,1) !important}
.bg-hover-success:hover{background-color:#28a745 !important}



.bg-hover-tp-main:hover{background: rgba(148,188,46,.9)}
.bg-hover-tp-alt:hover{background: rgba(124,151,23,.85)}
.bg-hover-tp-sub:hover{background: rgba(87,104,14,.85)}
.bg-hover-tp-medium:hover{background: rgba(108,117,125,.6)}
.bg-hover-tp-secondary:hover{background: rgba(108,117,125,.85)}
.bg-hover-tp-orange:hover{background: rgba(255,102,0,.95)}
.bg-hover-tp-white:hover{background: rgba(255,255,255,.1);}

.hover-main:hover{color:#9ebc2e !important;}
.hover-alt:hover{color:#7c9717 !important;}
.hover-focused:hover{color:#677f0e !important;}
.hover-sub:hover{color:#57680e !important;}
.hover-medium:hover{color:#ccc !important;}
.hover-danger:hover{color:#dc3545 !important;}
.hover-white:hover{color:#fff !important;}
.hover-secondary:hover{color:#6c757d!important;}

/* BLENDING */

.isolate{isolation: isolate !important}
.blend-normal{mix-blend-mode:normal !important}
.blend-multiply{mix-blend-mode:multiply}
.blend-screen{mix-blend-mode:screen}
.blend-overlay{mix-blend-mode:overlay}
.blend-darken{mix-blend-mode:darken}
.blend-lighten{mix-blend-mode:lighten}
.blend-color-dodge{mix-blend-mode:color-dodge}
.blend-color-burn{mix-blend-mode:color-burn}
.blend-difference{mix-blend-mode:difference}
.blend-exclusion{mix-blend-mode:exclusion}
.blend-hue{mix-blend-mode:hue}
.blend-saturation{mix-blend-mode:saturation}
.blend-color{mix-blend-mode:color}
.blend-luminosity{mix-blend-mode:luminosity}

/* sizes */
.font-double{font-size:200% !important;}
.font-large{font-size:125% !important;}
.font-half{font-size:50% !important;}
.font-third{font-size:66% !important;}
.font-sm{font-size:90% !important;}

/* headings */

h1,h2,h3,h4,h5,h6{
  font-family: 'Magra', sans-serif;
}

/* special styles */

.shadowed{box-shadow:0 0 20px rgba(0,0,0,.1);}
.shadowed-dark{box-shadow:0 0 20px rgba(0,0,0,.25);}
.opacity-none{opacity:0}
.strong{font-weight:bold}
.z-upper{z-index:10}
.text-shadow-1{text-shadow: 2px 2px 4px #000000;}
.card-header.bg-blue-fade-1 {background-color:transparent;background:linear-gradient(to top,rgba(15,43,101,0.15),rgba(15,43,101,0.0));}
.card-header.bg-green-fade-1 {background-color:transparent;background:linear-gradient(to top,rgba(123,150,23,0.15),rgba(123,150,23,0.0));}
a.element-anchor {display:block;position:relative;top:-160px;visibility:hidden;}
.bead::after,
.bg-topper h1::after{
  display:block;
  margin:1rem auto 0;
  width:50%;
  height:2px;
  content: ' ';
  background-image: linear-gradient(to right,rgba(158,188,46,0),rgba(158,188,46,1),rgba(158,188,46,0));
}

li.list-group-item.fade-to-right-grey-light{background:linear-gradient(90deg,rgba(255,255,255,0.75),rgba(255,255,255,0.5),transparent);}
li.list-group-item.fade-to-right-grey-light li{background-color:transparent !important;}

.page-anchor:target::before {
	pointer-events: none;
    content: '';
    display: block;
    height:      130px;
    margin-top: 0px;
}

.btn-text-wrap {
	white-space:normal !important; 
	word-wrap:break-word;
}

/* extending */

@media (min-width: 1600px){
.container {
    max-width: 1540px !important;
}
}

/* progress */

#progress-page{
  position:absolute;
  z-index:40;
  height:5px;
  width:100%;
  
}
#progress-page-perc{
  height:5px;
  width:0;
  background:#cf0;
  background-image: linear-gradient(to right,#7b9617,#9ebc2e);
}

/*animations */

a{text-decoration:none !important}

.triggermation:not([data-animated]){opacity:0}


.fadeOut{
  animation-name: fadeOut;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
.fadeIn{
  animation-name: fadeIn;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}

  @keyframes fadeOut{
    from{opacity:1}
    to{opacity:0}
  }
  @keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
  }
  
.trigger-fadeDown{
  animation-name: fadeDown;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
  @keyframes fadeDown{
    from{transform: translateY(-20rem);}
    to{opacity:1;}
  }
.trigger-fadeLeft{
  animation-name: fadeLeft;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
.trigger-fadeUp{
  animation-name: fadeUp;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
  @keyframes fadeUp{
    from{transform: translateY(20rem);}
    to{opacity:1;}
  }
.trigger-fadeLeft{
  animation-name: fadeLeft;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
  @keyframes fadeLeft{
    from{transform: translateX(-20rem);}
    to{opacity:1;}
  }
.trigger-fadeIn{
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
  
  
/* NAV ////////////////////////////////////////////////////////////////////////////////////////*/

#teaser{
  position:absolute;
  z-index:50;
  height:3rem;
  /*background:#111;*/
  background: linear-gradient(0deg,rgba(176,218,19,0.3),rgba(176,218,19,0.1),rgba(176,218,19,0.05),rgba(176,218,19,0.0),rgba(176,218,19,0.0)), linear-gradient(0deg,rgba(155,155,155,0.0),rgba(155,155,155,0.45)),  linear-gradient(90deg,rgba(0,0,0,0.2),rgba(0,0,0,0.2),rgba(0,0,0,0.3),rgba(0,0,0,0.5),rgba(0,0,0,0.65),rgba(0,0,0,0.75),rgba(0,0,0,0.9),rgba(0,0,0,0.95),rgba(0,0,0,0.95),rgba(0,0,0,0.95),rgba(0,0,0,95)), 
	linear-gradient(0deg,rgba(206,255,19,.25),rgba(176,218,19,.3),rgba(176,218,19,.2),rgba(176,218,19,.1),rgba(176,218,19,.0)), 
	linear-gradient(180deg,rgba(0,0,0,0.8),rgba(0,0,0,0.25));
  line-height:3rem;
}

  #teaser i{
    line-height:3rem;
    font-size:1.5rem;
  }

#topnav{
  position:absolute;
  z-index:50;
  top:3rem;
  height:6rem;
  background:rgba(255,255,255,.9);
}
  
  #topnav.navfixed{
    top:0;
    position:fixed;
    width:100%;
    margin:0;
  }

  .logobox{
    position:relative;
    z-index:50;
    height:7.5rem;
    padding:1.5rem 2.5rem;
    width:25rem;
    /*background-image: linear-gradient(#7b9617,#57680e);*/
    background-image: linear-gradient(#b0da13,#7b9617);
    border-bottom-right-radius: 1.5rem;
  }
    .logo{
      height:100%;
      width:100%;
      background-image: url(/assets/matchfit/logo_full_tp.svg);
      background-position:center center;
      background-repeat:no-repeat;
    }
    
  #topnav .nav-link{
    line-height:calc(6rem - 5px);
    padding:0 1.5rem;
    margin:0;
    text-transform:uppercase;
    color:#222;
    box-sizing:border-box;
    border-bottom:5px solid rgba(123,150,23,0);
    font-size:105%;
  }
  #topnav .nav-link.active{
      color:#7b9617;
      text-shadow:0 1px #fff;
    }
  #topnav .nav-link:hover{
      color:#7b9617;
      border-bottom:5px solid rgba(123,150,23,1);
      text-shadow:0 1px #fff;
    }
    
  .footer .nav-link{
    text-transform:uppercase;
    color:#666;
  }
  
  .footer .nav-link:hover{
    color:#ccc;
  }

/* BODY ////////////////////////////////////////////////////////////////////////////////////////*/

#welcome{
  position:relative;
  z-index:1;
  width:100%;
  background:#000;
  overflow:hidden;
  border-bottom:1px solid #222;
}

.task-content.layout-default #welcome{
  position:relative;
  z-index:1;
  width:100%;
  background:#000;
  overflow:hidden;
  border-bottom:1px solid #222;
}

  .bg-topper{
    padding:10rem 0 5rem;
    background-blend-mode: multiply;
    background-image: url(/templates/matchfit/images/slide_track.jpg), radial-gradient(#666,#333);
    background-position: center top;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size: cover;
    }

  #slides-welcome{
    height:50rem;
  }
    #slides-welcome .carousel-inner,
    #slides-welcome .carousel-item{
      height:100%;
    }
  
    .swoosh{
      width:1000px;
      position:absolute;
      z-index:45;
      animation-name:swoosh;
      animation-duration: 10s;
      animation-iteration-count: infinite;
      left:-1000px;
      opacity:0;
    }
    @keyframes swoosh{
      0%{
        left:-1000px;
        opacity:0;
      }
      50%{
        opacity:1;
      }
      100%{
        left:2000px;
        opacity:0;
      }
    }

  /* SLIDES */
  
  .carousel-item .intro-text{
    top:15rem;
    left:10rem;
  }
  
  .carousel-item .intro-text-2{
    bottom:3rem;
    right:10rem;
  }
  
  .bg-slide{
    position:absolute;
    height:100%;
    width:100%;
  }

  .bg-students{    
    opacity:.2;
    background-blend-mode: lighten;
    background-image: url(/templates/matchfit/images/students.jpg), radial-gradient(#333,#000);
    background-position:center bottom;
    background-size:cover;
    background-repeat:no-repeat;
  }
  .bg-group{
    opacity:.3;
    background-blend-mode: lighten;
    background-image: url(/templates/matchfit/images/slide_gathering.jpg), radial-gradient(#333,#000);
    background-position:center bottom;
    background-size:cover;
    background-repeat:no-repeat;
  }
  .bg-soccer{
    opacity:.75;
    background-blend-mode: darken;
    background-image: linear-gradient(to right,rgba(0,0,0,.8),transparent), url(/templates/matchfit/images/slide_soccer_girls.jpg);
    background-position:center bottom;
    background-size:cover;
    background-repeat:no-repeat;
  }
  .bg-track{
    opacity:.6;
    background-blend-mode: lighten;
    background-image: url(/templates/matchfit/images/slide_track.jpg), radial-gradient(#333,#000);
    background-position:center bottom;
    background-size:cover;
    background-repeat:no-repeat;
  }
  .bg-football{
    opacity:.6;
    background-blend-mode: darken;
    background-image: linear-gradient(to right,rgba(0,0,0,.8),transparent), url(/templates/matchfit/images/slide_football.jpg);
    background-position:center bottom;
    background-size:cover;
    background-repeat:no-repeat;
  }
  .bg-football2{
    opacity:.7;
    background-image: url(/templates/matchfit/images/slide_football.jpg);
    background-position:center bottom;
    background-size:cover;
    background-repeat:no-repeat;
  }
  .bg-slide_overhead{
    opacity:.6;
    background-blend-mode: overlay;
    background-image: linear-gradient(to right,#000,#fff), url(/templates/matchfit/images/slide_overhead.jpg);
    background-position:center bottom;
    background-size:cover;
    background-repeat:no-repeat;
  }
  .bg-football_qb1{
    opacity:.65;    
    background-image: url(/templates/matchfit/images/slide_football_qb3.jpg);
    background-position:center top;
    background-size:cover;
    background-repeat:no-repeat;
  }
  .bg-student1{
    opacity:1;    
    background-image: url(/templates/matchfit/images/slide_studentlibrary1.jpg);
    background-position:center top;
    background-size:cover;
    background-repeat:no-repeat;
  }
   .bg-student1rev{
    opacity:.9;    
    background-image: url(/templates/matchfit/images/slide_studentlibrary1rev.jpg);
    background-position:right top;
    background-size:cover;
    background-repeat:no-repeat;
  }
  .bg-soccergirl1{
    opacity:1;
    background-image: linear-gradient(150deg,rgba(0,0,0,0.4),rgba(0,0,0,0)), url(/templates/matchfit/images/slide_soccergirl1.jpg);
    background-position:center top;
    background-size:cover;
    background-repeat:no-repeat;
  }
  .bg-linkshareconnect{
	  margin-left: auto;
	  margin-right: 0;	  
	  opacity:1.0;    
    background-image: url(/templates/matchfit/images/linkshareconnect.png);
    background-position:right bottom;
    background-size:contain;
    background-repeat:no-repeat;	
  }
  .bg-linkshareconnect::before{
	visibility: hidden;
	content: url(/templates/matchfit/images/linkshareconnect.png);
  }
  .bg-jointhesquad-surrogate{visibility:hidden;}
  .bg-jointhesquad{	  
    position: relative;
	opacity:1.0;    
  }  
  .bg-jointhesquad::after {
	background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    content: attr(data-content);
    position: absolute;
    top: 0;
    left: 0;
  }
  .bg-jointhesquad::before {
    text-shadow: 2px 2px 4px #000;
    content: attr(data-content);
    position: absolute;
    top: 0;
    left: 0;
  }

  .bg-spinner{
    opacity:.2;
    background-blend-mode: lighten;
    background-image: url(/templates/matchfit/images/shimmer.jpg);
    background-position:center center;
    background-repeat:no-repeat;
    background-size:100%;
    animation: spin 300s linear infinite;
  }
  
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }    

  /* SLIDES */

#intro{
  border-top:10px solid #000;
  background-position:right center;
  background-repeat:no-repeat;
  background-size:cover;
}
  .bg-ball{  
    position:absolute;
    right:-25rem;
    top:-40rem;
    width:120rem;
    height:140rem;
    opacity:.1;
    background-image: url(/templates/matchfit/images/ball.png);
    background-position:center bottom;
    background-repeat:no-repeat;
    background-size:cover;
    animation: spin-ball 360s linear infinite;
  }
  @keyframes spin-ball{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
  }
  
#content{
  background-image: url(/templates/matchfit/images/grad-left.png);
  background-position:top left;
  background-repeat:no-repeat;
}

#device-showcase{
  top:2rem;
}

#main{
  width: calc(100% - 60rem);
  margin:0 10rem;
}  
  .homewrap{
  }

  #bar{}
  #bar-under{
    top:0rem;
    left: -1rem;
    width: calc(100% + 1.5rem);
    background: #333;
  }
    .topgrad{
      height:.75rem;
      width:100%;
      background-image: linear-gradient(to right,#888,#333);
    }
  #minfo{
    width: 30rem;
    margin-right:10rem;
  }
  
#post{
  overflow-x:hidden;
  background:#222;
  background-image: url(/templates/matchfit/images/head-to-head-banner.jpg);
  background-attachment:fixed;
  background-position:center bottom;
  background-blend-mode:color-dodge;
  background-repeat:no-repeat;
  background-size:cover;
}
  .post-transition{
    height:0;
    width:100%;
    border-top: 0 solid transparent;
    border-bottom: 5rem solid transparent;
    border-left:1920px solid #fff; 
  }
  
#after{
  border-top:1rem solid #111;
  background-image: linear-gradient(to right,#333,black), url(/templates/matchfit/images/head-to-head-banner.jpg);
  background-attachment:fixed;
  background-position:center bottom;
  background-blend-mode:hue;
  background-repeat:no-repeat;
  background-size:cover;
}
  #after-effects{
    background-image: linear-gradient(to right,#555,#111);
    mix-blend-mode:overlay;
    height:100%;
  }
  
#features .col:hover i{
  color:orange;
}
#plugs .col-4:hover{
  background-image:linear-gradient( to bottom,#eee,#fff);
  mix-blend-mode:multiply;
  border-radius:2rem;
}

/* TESTIMONIALS */

.testimonial{
  background: rgba(255,255,255,.1);
  padding:2rem;
  color:#fff;
  margin-bottom:2rem;
  box-shadow:0 0 20px rgba(0,0,0,.1);
  float:left;
  width:calc(50% - 1rem);
  min-height:20rem;
} 

  .testimonial-title{
  margin-bottom:.5rem;
  font-weight:bold;
  }
  
  .testimonial-author{
  margin-top:1rem;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
  }

/* PRICING */

.card-group-interact .card.position-relative.active{
  position:absolute;
  z-index:5;
  margin:-2rem;
  border-left: 1px solid rgba(0,0,0,.125) !important;
}

/* FOOTER */

.footer{
  background:#111;
}