﻿
:root {
    --btf-d-green: rgb(8,102,52);
    --btf-m-green: rgb(12,142,54);
    --btf-l-green: rgb(47,173,102);
    --btf-l-green80: rgba(47,173,102,0.8);
    --btf-turquoise: rgb(18,161,155);
    --btf-turquoise50: rgba(18,161,155,0.5);
    --btf-turquoise20: rgba(18,161,155,0.2);
    --btf-blue: rgb(0,154,216);
    --btf-blue80: rgba(0,154,216,0.8);
    --btf-orange: rgb(246,140,17);
    --btf-orange80: rgba(246,140,17,0.8);
    --btf-purple: rgb(140,82,255);
    --btf-purple80: rgba(140,82,255,0.8);
}

.text-d-green {color:var(--btf-d-green);}
.text-m-green {color:var(--btf-m-green);}
.text-l-green {color:var(--btf-l-green);}
.text-turquoise {color:var(--btf-turquoise);}
.text-blue {color:var(--btf-blue);}
.text-orange {color:var(--btf-orange);}
.text-purple {color:var(--btf-purple);}

.bg-d-green {background-color:var(--btf-d-green);}
.bg-m-green {background-color:var(--btf-m-green);}
.bg-l-green {background-color:var(--btf-l-green);}
.bg-l-green80 {background-color:var(--btf-l-green80);}
.bg-turquoise {background-color:var(--btf-turquoise);}
.bg-turquoise20 {background-color:var(--btf-turquoise20);}
.bg-turquoise50 {background-color:var(--btf-turquoise50);}
.bg-blue {background-color:var(--btf-blue);}
.bg-orange {background-color:var(--btf-orange);}
.bg-orange80 {background-color:var(--btf-orange80);}
.bg-purple {background-color:var(--btf-purple);}
.bg-purple80 {background-color:var(--btf-purple80);}

.bg-grey {background-color:#f9f9f9;}


html {
  scroll-behavior: smooth;
}


body {font-family: "Open Sans",sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 16px;    line-height: 1.5; color: #333; font-weight: inherit;}

p, li {font-size:1rem;}
h1, h2, h3, h4, h5, h6 {font-family: 'Archivo Black', sans-serif; color:#333;}

h2 {line-height:1.2;}
h2.steps {font-size:2rem;}
h5 {font-size:1.2rem;}

.navbar {background-color: white;}
.navbar-brand img {width:50px}
.navbar-stuck .navbar-brand img {width:60px;}
.nav-link {color:#222; font-size:1.1rem;}

.navbar-toggler-icon, .navbar-toggler-icon::before, .navbar-toggler-icon::after {background:var(--btf-d-green)}

.ValidationError2 {
    font-size: 0.8rem;
    font-weight: 400;
    color: #de2724;
    background: #fff;
    border-radius: 5px;
    margin-left: 0;
}

.sub-nav .nav .nav-link {padding:0.25rem 0; width:100%; display:block; color:#999}
.sub-nav .nav .nav-link.active {color:var(--btf-turquoise); border-radius:16px;}
.sub-nav .nav .nav-link:hover {color:var(--btf-turquoise50)}

@media (min-width: 992px) {
	
	.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item {font-size: 1rem; color:#222; font-weight:700;}


	}

footer {background:#12A19B;}
footer h6 {font-family: "Open Sans",sans-serif; margin-bottom:2rem; }


.btn-social {color:#fff;}

.btn {background-color: #12A19B; color: white; font-size: .88em; line-height: 1.2;  padding: 0.85em 2em; -webkit-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out;  transition: all .1s ease-in-out; border-radius: 50px;
    display: inline-block; font-family: "Archivo Black",sans-serif; font-weight:700; font-size:1.1rem; white-space:initial;}

.btn-primary {}
.btn-primary:hover {background-color:#0d736f}

.btn-start {background:#fff; color:var(--btf-turquoise); max-width:300px; margin:0 auto; font-size:1.5rem; box-shadow:6px 6px 0 #000; transition:ease-in-out .25s; transform: translatey(0px);  -webkit-animation: float 2s ease-in-out infinite;  animation: float 2s ease-in-out infinite;}
.btn-start:hover {box-shadow:3px 3px 0 #000; animation-play-state: paused;}

.btn-social:hover {color:#333;}
.welcome img {max-height:500px;}

.welcome-box {width:100%; padding:6% 6% 0; position:absolute; margin:0; font-size:inherit; background-color:rgba(8,102,52,0.3); width:50%; min-width:500px; top:50%; -webkit-transform:translateY(-50%);-ms-transform: translateY(-50%); transform:translateY(-50%);
    height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; left: 0; -webkit-box-pack: start; -ms-flex-pack: start;  justify-content: flex-start;
    right: 0; left:auto;  }
.welcome-box > div {max-width:450px;}

.welcome-box h1 {color:#fff; font-size: 2.29em;}




.bg-flip {-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-ms-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);}

.bg-graphic1 {background-image:url('../images/bg-graphic1a.png'); background-position:center center; background-size:cover; background-repeat:no-repeat;}
.bg-graphic1b {background-image: url('../images/bg-graphic1b.png'); background-position: center center; background-size: cover; background-repeat: no-repeat;}

.bg-graphic2.flip {transform:scaleX(-1);}
.bg-graphic2 {background-image:url('../images/bg-graphic2.png'); background-position:center center; background-size:cover; background-repeat:no-repeat;}
.bg-graphic3 {background-image:url('../images/bg-graphic3.png'); background-position:center center; background-size:cover; background-repeat:no-repeat;  }
.bg-graphic4 {background-image:url('../images/bg-graphic4.png'); background-position:center center; background-size:cover; background-repeat:no-repeat;}

.contain {background-size:contain;}
.botlef {background-position:bottom left;}
.toprig {background-position:top right;}

.icon-list {position:relative; padding-left:2.5rem; margin:0 5%;}
.icon-list li {list-style-type:none; position:relative; margin-bottom:1rem; }
.icon-list li::before {position:absolute; left:-2.5rem; font-size:1.5rem; color:#222;}

.icon-list.white li,
.icon-list.white li::before {color:#fff;} 
.icon-list li.mha-yellow::before {color:var(--mha-yellow);}
.icon-list.large {font-size:1.4rem;}

.icon-list.bordered {padding-left:0; margin:0;}
.icon-list.bordered li {border-top:solid 1px var(--l-grey); margin-bottom:0; padding:1.5rem;}
.icon-list.bordered li::before {left:0; color:var(--mha-yellow); font-size:2rem;}
.icon-list.bordered li span {padding-left:4rem; display:block;}




.register-link p {margin: 0 0 20px; font-size: 1.1rem;font-family: "Archivo Black",sans-serif; font-weight:700;}
.register-link p:last-child {margin: 0;}
.register-link p a {position: relative; overflow: hidden; text-decoration: none; color: var(--btf-m-green);}
.register-link p a::after {content: ""; background: var(--btf-turquoise20); position: absolute; left: 12px; bottom: -6px; width: calc(100% - 8px); height: calc(100% - 8px); z-index: 0; transition: 0.35s cubic-bezier(0.25, 0.1, 0, 2.05);}
.register-link p a:hover:after {left: 0; bottom: -2px; width: 100%; height: 100%; color:#000;}
.register-link p i {font-size:1rem;}



blockquote.green {border:3px solid var(--btf-l-green); border-radius:10px;}

blockquote.orange {
    border: 3px solid var(--btf-orange);
    border-radius: 10px;
}


@media (min-width: 1200px) {

blockquote {background: white; padding: 20px 30px 20px 30px;margin: 50px auto; max-width: 500px; }
.stacked {border: solid 3px var(--btf-d-green); padding: 20px 30px 20px 30px; box-shadow: 13px 13px 0 0 white, 15px 15px 0 0 var(--btf-d-green), 15px 11px 0 0 var(--btf-d-green), 11px 15px 0 0 var(--btf-d-green);}
.bq-shadow {border: solid 3px var(--btf-d-green); box-shadow: 15px 15px 0 0 var(--btf-d-green);}
.rule {position: relative; left: 7px; background: #ccccff; box-shadow: -2px 0 0 #0000FF, -4px 0 0 #ccccff, -7px 0 0 #0000FF;}

blockquote.green {background-image:url('../images/quotation-box5.png'); background-position:center center; background-size:cover; background-repeat:no-repeat; width:400px; height:215px; background-color:transparent; display:flex; align-items:center; margin:0 auto; border:none;}
blockquote.green.large {width:600px; height:322px; max-width:unset;}
.step {background-image:url('../images/green-speech-bubble.png'); background-position:center center; background-size:cover; background-repeat:no-repeat;}


blockquote.orange {
    background-image: url('../images/quotation-box6.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 400px;
    height: 215px;
    background-color: transparent;
    display: flex;
    align-items: center;
    margin: 0 auto;
    border: none;
}

blockquote.orange.large {
    width: 600px;
    height: 322px;
    max-width: unset;
}


}





/* .week-header {height:70vh;} */
.week-header h1 {
    font-size:4rem; color:#fff; 
    /*text-shadow: 6px 6px 0px #086634;*/
}
.week-header h2 {font-size:2rem;}



@media (min-width: 992px) {
	 
/* .week-header {height:calc(100vh - 170px);} */
.week-header h1 
{
    font-size:7rem; 
    /*text-shadow: 10px 10px 0px #086634;*/
}
.week-header h2 {font-size:3rem;}

}


.accordion-button::after {background-color:#fff;}

.accordion-body {padding:0;}


.accordion-button::after {background-size:2rem; width:4rem; height:4rem;}

h2.accordion-header {font-size:3rem; }
.accordion-button {align-items:center; justify-content:center;}
.accordion-item .accordion-button {color:#fff;}

.accordion-item .accordion-button h2 {/*text-shadow: 2px 2px 0px #086634;*/ color:#fff; font-size:1.8rem;}
.accordion-item .accordion-button:hover h2 {/*text-shadow: 0px 0px 0px #086634;*/ }

.accordion-item .accordion-button.collapsed h5 {color:var(--btf-d-green); font-size:1.2rem;}
.accordion-item .accordion-button img 
{
  /*  box-shadow:10px 10px 0 var(--btf-d-green); */
    border:5px solid #fff;
}


.accordion-button::after {display:none;}


.accordion-button.collapsed.green, .accordion-button.green, .accordion-button.green:hover {background-color:var(--btf-l-green)}
.accordion-button.collapsed.green:hover {background-color:var(--btf-l-green80)}
.accordion-button.collapsed.purple, .accordion-button.purple, .accordion-button.purple:hover {background-color:var(--btf-purple)}
.accordion-button.collapsed.purple:hover {background-color:var(--btf-purple80)}
.accordion-button.collapsed.orange, .accordion-button.orange, .accordion-button.orange:hover {background-color:var(--btf-orange)}
.accordion-button.collapsed.orange:hover {background-color:var(--btf-orange80)}


.accordion-button.collapsed.blue, .accordion-button.blue, .accordion-button.blue:hover {background-color: var(--btf-blue)}
.accordion-button.collapsed.blue:hover {background-color: var(--btf-blue80)}

.accordion-item:last-of-type .accordion-button.collapsed {border-radius:0;}
.btn-open {color:#000;}






/*.social-icon-x {
    background-image: url('../images/bg-graphic4.png');
    background-repeat: no-repeat;
    padding-left: 30px;*/ /* width of the image plus a little extra padding */
    /*display: block;*/ /* may not need this, but I've found I do */
/*}*/


.social-icon-x {
    content: url('../images/x-twitter-brands2.svg');
    width: 20px;
}

.social-icon-BlueSky {
    content: url('../images/bluesky-brands.svg');
    width: 20px;
}

.social-icon-Threads {
    content: url('../images/threads-brands.svg');
    width: 20px;
}



@media (min-width: 992px) {

	.accordion-item .accordion-button  {height:33vh; }
	.accordion-item .accordion-button h2 {font-size:2.4rem;}
	}



@-webkit-keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-10px);
  }
  100% {
    transform: translatey(0px);
  }
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-10px);
  }
  100% {
    transform: translatey(0px);
  }
}












.pulse {cursor: pointer; box-shadow: 0 0 0 rgba(255,255,255, 0.9); animation: pulse 2s infinite;}
.pulse:hover {animation: none;}

@-webkit-keyframes pulse {
  0% {-webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.9); }
  70% {-webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0);}
  100% {-webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0);}
}
@keyframes pulse {
  0% {-moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0.9); box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);  }
  70% { -moz-box-shadow: 0 0 0 10px rgba(255,255,255, 0);  box-shadow: 0 0 0 10px rgba(255,255,255, 0); }
  100% { -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0); box-shadow: 0 0 0 0 rgba(255,255,255, 0); }
}