@charset "UTF-8";
/* CSS Document */
@import url("https://use.typekit.net/ndv0emg.css");
body {
  margin: 0 5%;
  font-family: myriad-pro, sans-serif;
  font-size: 100%;
  font-weight: 400;
  line-height: 1.3rem;
}
.container-fluid {
  max-width: 1400px;
  margin: 0 auto;
}
.topnav {
  overflow: hidden;
  margin: 13px 0px;
  width: 350px;
}
.banner {
  float: left;
  width: 40%;
  color: white;
}
.banner h1 {
  font-family: filson-soft, sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  margin-left: 10%;
  border-bottom: 2pt solid rgba(255, 255, 255, 0.10);
  padding-bottom: 10px;
  margin-bottom: 0;
}
.container-fluid .banner h1 a {
  font-family: filson-soft, sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  margin-left: 0;
  border: none;
  padding-bottom: 10px;
  margin-bottom: 0;
  padding-left: 0;
}
.container-fluid .banner h1 a:hover {
  background: none;
  color: lightblue;
}
.banner p, .banner a {
  font-family: myriad-pro, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  padding-left: 10%
}
.top {
  height: 155px;
  width: 100%;
  background-color: rgba(39, 127, 161, 1.00);
  background: linear-gradient(90deg, rgba(64, 40, 122, 1.00) 0%, rgba(39, 127, 161, 1.00) 30%, rgba(39, 127, 161, 1.00) 30%, rgba(78, 157, 192, 1.00) 55%, rgba(39, 127, 161, 10.00) 95%);
}
nav {
  float: right;
  background-image: url("images/cc-logo.svg");
  background-size: 105px;
  background-position: top 15px left 20px;
  background-repeat: no-repeat;
}
.topnav a {
  display: list-item;
  list-style: none;
  color: rgba(255, 255, 255, 1.00);
  border-bottom: 2px solid rgba(255, 255, 255, 0.20);
  text-align: left;
  padding: 2px 30px;
  text-decoration: none;
  font-size: .9rem;
  margin-left: 125px
}
.active {
  background-color: rgba(0, 0, 0, 0.1);
  color: white;
}
.topnav .icon {
  display: none;
    padding: 10px
}
.dropdown {
  overflow: hidden;
}
.dropdown .dropbtn {
  border: none;
  outline: none;
  color: white;
  border-bottom: 2px solid rgba(255, 255, 255, 0.20);
  text-align: left;
  padding: 2px 0px 2px 30px;
  background-color: inherit;
  font-family: inherit;
 font-size: .9rem;
  margin-left: 125px;
  width: 100%;
}
 .topnav .menulink {
   font-size: .9rem!important;
}
.dropdown-content {
  width: 215px;
  display: none;
  position: absolute;
  background-color: rgba(161, 198, 212, 1.00);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-left: 175px;
  z-index: 1;
}
.dropdown-content a {
  float: none;
  color: rgba(23, 99, 129, 1.00);
  font-size: .9rem;
  margin: 0;
  padding: 4px 20px 4px 20px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: rgba(0, 0, 0, 0.1);
}
.dropdown-content a:hover {
  background-color:
    rgba(181, 210, 224, 1.00);
}
.dropdown:hover .dropdown-content {
  display: block;
}
.container-fluid .banner a {
  margin: 0 0 0 5px;
  padding: 5px 10px;
  color: white;
  text-decoration: none;
  border: 1pt solid white;
  border-radius: 10px;
}
.container-fluid .banner a:hover {
  background: rgba(23, 99, 129, 1.00);
}
.contact-info {
  background: url("images/counsellors_connections.svg")no-repeat, linear-gradient(90deg, rgba(150, 193, 209, 1.00) 0%, rgba(255, 255, 255, 1.00) 35%);
  padding: 42% 30px 55px 30px;
  border: 1pt solid rgba(255, 255, 255, 0.00);
  border-radius: 20px;
}
.contact-break {
  border-bottom: 1pt solid rgba(61, 47, 133, 1.00);
  min-width: 100%;
  padding: 0px 0 10px 0;
}
.main {
  min-height: 450px;
  background-color: rgba(255, 255, 255, 1.00);
  background: linear-gradient(90deg, rgba(150, 193, 209, 1.00) 0%, rgba(255, 255, 255, 0.00) 35%), linear-gradient(360deg, rgba(206, 230, 191, 1.00) 0%, rgba(255, 255, 255, 0.00) 400px);
  padding-bottom: 13%;
}
.mainGraphic {
  width: 47%;
  min-height: 490px;
  background: url("images/home.svg") no-repeat;
  background-position: top 1rem right .5rem;
  float: left;
}
.secondGraphic {
  width: 30%;
  min-height: 300px;
  background: url("images/wellness-content.svg") no-repeat;
  background-position: top 1rem right .5rem;
  float: left;
}
.mainGraphic p {
  padding-top: 110%;
}
.mainContent {
  padding: 2% 7% 13% 4%;
  border-left: 3pt solid rgba(108, 189, 71, 0.40);
  background: url("images/sides-logo.svg") no-repeat right 4rem bottom 3.5rem;
  background-size: 100px;
  margin-left: 47%;
  max-width: 1400px;
}
.secondContent {
  padding: 2% 7% 13% 4%;
  border-left: 3pt solid rgba(108, 189, 71, 0.40);
  background: url("images/sides-logo.svg") no-repeat right 4rem bottom 3.5rem;
  background-size: 100px;
  margin-left: 30%;
  max-width: 1400px;
}
.mainContent p, .secondContent p, .mainContent ol, .mainContent ul, .secondContent ol, .secondContent ul {
  font-size: .9rem;
  color: rgba(35, 35, 35, 1.00);
   
}
.mainContent ol, .mainContent ul, .secondContent ol, .secondContent ul {
  margin-left: -.5rem;

}
.mainContent li, .secondContent li {
  padding-bottom: 7px;
}
.mainContent h2 {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4rem;
  color: rgba(63, 42, 123, 1.00);
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -.5rem;
  padding-bottom: 0px;
}
.secondContent h2 {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4rem;
  color: rgba(63, 42, 123, 1.00);
  margin-top: 30px;
  margin-bottom: 0px;
  margin-left: -.5rem;
  padding-bottom: 0px;
}
.mainContent h3, .secondContent h3 {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3rem;
  color: rgba(32, 95, 119, 1.00);
  margin-top: 30px;
  margin-bottom: 0px;
  margin-left: -.5rem;
  padding-bottom: 0px;
}
.mainContent h4, .secondContent h4 {
  margin-bottom: 0px;
}
.mainContent a, .secondContent a {
  color: rgba(32, 95, 119, 1.00);
}
.acknowledge {
  display: block;
  position: absolute;
  margin: 0 6% 0 6%;
  padding-top: 46%;
  max-width: 30%;
  font-size: .7rem;
  line-height: 1rem;
  text-align: center;
  color: rgba(19, 93, 121, 1.00);
}
.icons img {
  height: auto;
  width: 100%;
  margin: 0px;
  border: none;
}
.icons a:hover {
opacity: .7;
filter:contrast(1.5);
cursor: pointer;
}
.icons a:active {
opacity: 1;
filter:contrast(1.5);
 cursor: pointer;
}
.icon-scale {
  width: 100%;
  height: auto;
  max-width: 110px;
} 
.callout {
  background-color: rgba(255, 255, 255, 1.00);
  background: linear-gradient(90deg, rgba(150, 193, 209, 0.50) 0%, rgba(255, 255, 255, 0.00) 80%);
  border-left: 10px solid rgba(108, 189, 69, 1.0);
  border-radius: 10px;
  padding: 1rem 0rem 1rem 2rem ;
}

.announceimage  {
    max-width:150px; 
    float:left;
    padding: 0px 20px 10px 0px;
}
.announcedate {
    color:rgba(39,127,161,1.00)!important;
    float:right;
    font-size: .8em!important;    
    letter-spacing: .1rem;
}
#Tabsa .tablink a, #Tabs1 .tablink a, #Tabs2 .tablink a, #Tabs3 .tablink a,  #Tabs4 .tablink a, #Tabs5 .tablink a, #Tabs6 .tablink a, #Tabs7 .tablink a, #Tabs8 .tablink a, #Tabs9 .tablink a, #Tabs10 .tablink a, #Tabs11 .tablink a, #Tabs12 .tablink a, #Tabs13 .tablink a, #Tabs14 .tablink a, #Tabs15 .tablink a, #Tabs16 .tablink a, #Tabs17 .tablink a, #Tabs18 .tablink a, #Tabs19 .tablink a   {
  font-family: myriad-pro, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4rem;
  color: rgba(32, 95, 119, 1.00);
  border: 2px solid rgba(134, 200, 102, 1.00);
  border-radius: 15px;
  background: rgba(59, 194, 244, 0.10);
  white-space: pre-wrap;
    margin-left: -1.2rem;
}
#Tabsa .tablink a:hover, #Tabs1 .tablink a:hover, #Tabs2 .tablink a:hover, #Tabs3 .tablink a:hover, #Tabs4 .tablink a:hover, #Tabs5 .tablink a:hover, #Tabs6 .tablink a:hover, #Tabs7 .tablink a:hover, #Tabs8 .tablink a:hover, #Tabs9 .tablink a:hover, #Tabs10 .tablink a:hover, #Tabs11 .tablink a:hover, #Tabs12 .tablink a:hover, #Tabs13 .tablink a:hover, #Tabs14 .tablink a:hover, #Tabs15 .tablink a:hover, #Tabs16 .tablink a:hover, #Tabs17 .tablink a:hover, #Tabs18 .tablink a:hover, #Tabs19 .tablink a:hover {
  color: rgba(2, 95, 119, 0.70);
  background: rgba(224, 242, 211, 0.20);
  border: 2px solid rgba(32, 95, 119, 0.50);
}

@media screen and (max-width: 649px) {
  body {
   margin: 0 auto;
   font-family: myriad-pro, sans-serif;
   font-weight: 400;
   font-size:80%;
  }
.topnav a {

  list-style: none;
  color: rgba(255,255,255,1.00);
  border-bottom: 2px solid rgba(255, 255, 255, 0.20);
  text-align: left;
  padding: 2px 30px;
  text-decoration: none;
  font-size: 1rem;
}
  nav {
    float: none;
    background-image: none;
  }
  .banner {
    width: 100%;
  }
  .top {
    height: auto;
    background-color: rgba(39, 127, 161, 1.00);
    background: linear-gradient(90deg, rgba(64, 40, 122, 1.00) 0%, rgba(39, 127, 161, 1.00) 40%, rgba(39, 127, 161, 10.00) 95%);
  }
  .topnav {
    width: 100%;
    background-color: rgba(39, 127, 161, 1.00);
    margin-bottom: 0px;
  }
  .topnav a:not(:last-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: none;
    text-align: right;
    display: block;
    font-size: 1.5rem!important;
    border-bottom: none;
  }
  .topnav a {
    margin-left: 0;
    font-size: 1rem!important;
  }
  .dropdown-content {
    width: 100%;
    margin-left: 0;
  }
  .banner p, .banner a {
    font-size: .8rem;
  }
  .main {
    padding: 0 14% 13% 3%
  }
  .mainGraphic {
    width: 100%;
    background: url("images/home-mobile.svg") no-repeat;
    background-position: top right 0rem;
    min-height: 0;
    padding-top: 40%;
    margin-left: 5%
  }
  .secondGraphic {
    width: 0%;
    background: none;
    min-height: 0;
    padding-top: 3%;
    margin-left: 5%
  }
  .mainContent {
    width: 100%;
    padding: 2% 12% 13% 7%;
    border-left: none;
    margin-left: 0;
    background: url("images/sides-logo.svg") no-repeat right 4rem bottom 0;
    background-size: 100px;
  }
  .secondContent {
    width: 100%;
    padding: 5% 12% 13% 7%;
    border-left: none;
    margin-left: 0;
    background: url("images/sides-logo.svg") no-repeat right 4rem bottom 0;
    background-size: 100px;
  }
  .acknowledge {
    display: none;
  }

}
@media screen and (max-width: 840px) {
  .banner p, .banner a {
    font-size: .8rem;
  }
    .announceimage   {
    width: 100%;
    float:none;
    max-width:250px; 
    padding: 0px 0px 0px 0px;
}
}
@media screen and (max-width: 649px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    font-size: 1.5rem!important;
      margin-right:10px;
    top: 0;
    color:rgba(255,255,255,1.00);
  }
  .topnav.responsive .menulink {
color:rgba(255,255,255,1.00);
      margin-left: -10px;
      font-size: 1.5rem;
  }
  .topnav.responsive a {
    display: block;
    text-align: left;
    font-size:1rem!important;
    padding: 10px 20px 10px 40px;
   color:rgba(39,127,161,1.00);
      
  }
  .topnav.responsive .dropdown {}
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
      font-size: 1rem;
    text-align: left;
    color:rgba(255,255,255,1.00);
    padding: 10px 30px;
    margin-left: 0;

      
  }
}
@media screen and (min-width: 1100px) {
  .acknowledge {
    margin-left: 13%;
    padding-top: 500px;
    max-width: 300px;
    text-align: left;
  }
}
@media screen and (max-width: 1200px) {
  .icons {
    height: auto;
    width: 100%;
    margin: 0px;
  }
.icon-scale {
    width: 100%;
    height: auto;
    max-width: 90px;
  }
}
@media screen and (min-width: 1400px) {
  .acknowledge {
    margin-left: 17rem;
  }
  .secondContent {
    padding: 2% 15% 13% 7%;
  }
}