/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (min-width: 1200px) {
  .sidepanel{
    display:none;
  }
  .SubHeroFlexContainer {
    flex-wrap: none;
  ;
  }
}



@media screen and (max-width: 1200px) {
  .topnav {
    display: none;
  }
    
  nav #mobileIcon {
    display: block;
  }
    
  .subnav {
     display: none;
  }
    
  body .SubHeroFlexContainer {
    flex-direction: column;
  }

  body .EventContentBlock{
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
  }

  body .IndentContentBlock, 
  body .IndentContentBlockyellow, 
  body .IndentContentBlockorange, 
  body .IndentContentBlockblue {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
  }

  body .IndentSinglePanelBlock {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px
  }
  
  body .SinglePanelThreeLinks {
    font-size: 1.2rem;
  }
    
  body .EventContentBlock {
    margin-top: 30px;
  }

  .EventFlex {
        display:flex;
        flex-direction: column;
        flex-wrap: wrap;
      }
  

    body .InterestsFlex {
        display: block;
        flex-direction: column;
        flex-wrap: wrap;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 80px;
      }

     body .InterestBlock1 {
      width:100%;
       margin-top: 10px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
      }

      body .InterestBlock2 {
        width:100%;
        margin-top: 10px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
      }

      body .btn {
        font-size: 0.9rem;
      }

      body .btn.active {
        font-size: 0.9rem;
      }
      
      body .tag {
        padding-left: 20px;
        padding: 5px 10px 5px 10px;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 10px;
        margin-bottom: 0px;
        font-size: 0.8rem;
        float: none;
        text-overflow: none;
      }

      body .tagspacer {
        height: 10px;
        display: block;
      }

      body .searchresult {
        font-size: 0.9rem;
      }

      body .ResourceTitle {
        font-weight: bolder;
        text-decoration: underline;
        margin-left: 0px;
        margin-right: 10px;
        margin-bottom: 10px;
        text-underline-offset: 2px;
        font-size: 1rem;
      }

      .ThreePanelFlex {
        flex-direction: column;
  
      }

      .sbTwoColumnFlex {
        flex-direction: column;
  
      }
  
      body .ThreePanel {
        margin-top: 20px;
        font-size: 1.9rem;
      }
      body .ThreePanelContentBlock {
        font-size: 1.5rem;
      }
      
      body .ThreePanelContentLink {
        font-size: 1.5rem;
      }
  }

@media screen and (max-width: 600px) {
    
  .tagline {
    display: none;
  }

  .hero-text h1 {
    font-size: 1.5rem;
  }  

  .hero-text .HeroDescription {
  font-size: 1.3rem;
  } 
  
  body .searchresult {
    font-size: 0.9rem;
  }

  body .hero-image {
      height: 350px;
  }

  .SubHeroFlexContainer {
      flex-wrap: wrap;
  }
    
    body h2 {
      font-size: 1.45rem;
    }

    body h3 {
      font-size: 1.4rem;
    }

    body p{
      font-size: 0.9rem;
    }

    body .btn {
      font-size: 0.8rem;
    }

    body .btn.active {
      font-size: 0.8rem;
    }

    body .tag {
      padding-left: 20px;
      padding: 5px 10px 5px 10px;
      margin-top: 10px;
      margin-left: 0px;
      margin-right: 10px;
      margin-bottom: 0px;
      font-size: 0.8rem;
      float: none;
    }

    body .tagspacer {
      height: 10px;
      display: block;
    }

  body .searchresult {
    font-size: 0.9rem;
  }

    body .ResourceTitle {
      font-weight: bolder;
      text-decoration: underline;
      margin-left: 0px;
      margin-right: 10px;
      margin-bottom: 10px;
      text-underline-offset: 2px;
      font-size: 0.9rem;
    }

    body .IndentContentText {
      text-decoration: none;
      font-size: 1.2rem;
    }


    body .IndentContentBlockSmall {
      display: block;
      background-color: #E1E0E0;
      border-style: none;
      border-width: 2px;
      border-color: grey;
      padding-top: 30px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
      margin-top: -200px;
      margin-left: 2%;
      margin-right: 2%;
      margin-bottom: 10px;
    }

    body .SinglePanelThreeLinks {
      font-size: 0.8rem;
    }

    body .EventContentBlock p {
      text-decoration: none;
      font-size: 1.3rem;
      font-variant: normal;
    }

    body .SubHeroText {
      font-size: 1.25rem;
    }

    body .EventContentBlock{
      margin-left: 0px;
      margin-right: 0px;
    }

    .EventFlex {
        display:flex;
        flex-direction: column;
        flex-wrap: wrap;
      }

      .FooterFlexMenu {
        display:flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
    }

    .ThreePanelFlex {
      flex-direction: column;
    }

    .ThreePanelFlexSitemap {
      flex-direction: column;
    }

    body .sbThreePanelContent {
        font-size: 1.1rem;    
    }

    body .sbPanelContentBlock {
        font-size: 0.9rem;
    }
    
    body .ThreePanel {
      margin-top: 20px;
      font-size: 1.7rem;
    }
    body .ThreePanelContentBlock {
      font-size: 1.4rem;
    }
    
    body .ThreePanelContentLink {
      font-size: 1.4rem;
    }

    body .IndentSinglePanelBlock {
      flex-direction: column;
    }

    body .sbThreePanelFlex {
      flex-direction: column;
    }

    body .bulletlist {
      font-size: 1.2rem;
    }

    body .numberlist {
      font-size: 1.2rem;
    }


}

html * {
  font-family: 'Geologica';
}

/* Hamburger Icon */

.mobnavcontainer {
  background-color: none;
  float: right;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  padding-top: 25px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 25px;
  vertical-align: middle;   
}

#mobileIcon {
  display: inline;
  width:32px;
  height: 25px;
  position:relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  background-color: none;
}

#mobileIcon span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: #000000;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}



#mobileIcon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mobileIcon span:nth-child(2) {
  top: 10px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mobileIcon span:nth-child(3) {
  top: 20px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#mobileIcon.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 0px;
}

#mobileIcon.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#mobileIcon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 20px;
  left: 0px;
}

/* The sidepanel menu */
.sidepanel {
  height: 100%; /* Specify a height */
  width: 0px; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 50;
  right: 0;
  background-color: #000000; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 24px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
  z-index: 1000;
}

/* The sidepanel links */
.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 1.6rem;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
  color: #f1f1f1;
  text-decoration: underline;
  text-underline-offset: 10px;
}

nav {
    position: sticky;
    top:0px;
    z-index: 1000;
}

body{
    margin: 0px;
    padding: 0px
}

.none {
display: none !important;
}

.pinkminibar {
background-color: #EB005F;
margin-top: 5px;
height: 5px;
width: 70px;
}


.purpleminibar {
  background-color: #8800FF;
  margin-top: 10px;
  height: 5px;
  width: 70px;
  }

.underline{
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 10%; 
}

.bold{
font-weight: bolder;
}

ol li{
    padding-bottom: 1em;
}

.ImageCenter {
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
  width: 90%;
  min-width: 350px;
}

.topnav {
    background-color: #001230;
    overflow: hidden;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}

/* Hide the mobile links inside the navigation menu */
.topnav #myLinks {
  display: none;
}

.homeIcon {
    float: left;
    margin-top: 5px;
    margin-left: 30px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    background-color: none;
}

.signinIcon {
  float: left;
  margin-top: -2px;
  margin-left: 0px;
  margin-right: 5px;
  margin-bottom: -7px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  background-color: none;
}

.active {
    background-color: #FF7F00;
}

h1 {
    text-align: left;
    color: white;
    text-align: left;
    text-decoration: none;
    font-size: 2rem;
    font-weight: 400;
    margin: 0px;
}

.blackText {
  color: #000000;
}

img{
  padding: 0px;
  margin: 0px;
}

h2 {
  text-align: left;
  color: #000000;
  background-color: none;
  text-align: left;
  text-decoration: none;
  font-size: 1.9rem;
  font-weight: 400;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

h3 {
  text-align: left;
  color: #0C00CA;
  background-color: none;
  text-align: left;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0px;
}

.white {
  color: #ffffff;
}

h4 {
  text-align: left;
  color: #0C00CA;
  background-color: none;
  text-align: left;
  text-decoration: none;
  font-size: 1.7rem;
  font-weight: 100;
  margin: 0px;
  font-style: none;
}

h5 {
  text-align: left;
  color: #0C00CA;
  background-color: none;
  text-align: left;
  text-decoration: none;
  font-size: 1.7rem;
  font-weight: 100;
  margin: 0px;
  font-style: italic;
}

p {
  margin-bottom: 1em;
}

/* Style the links inside the navigation bar */
.topnav a {
    color: #ffffff;
    background-color: none;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-variant: normal;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

.topnav a:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 20%; 
    text-decoration-color:#8800FF ; 
  }

.title {
    display:block;
    float:left;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: none;
    color: #ffffff;
}

.title a {
    color: #ffffff;
    background-color: none;
    text-align: center;
    text-decoration: none;
}

.title a:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 20%; 
    text-decoration-color:#8800FF ; 
  }
 
/* Create a right-aligned (split) link inside the navigation bar */
.topnav a.split {
    float: right;  
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;  
}

.topnav a.button {
    float:right;  
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #FF2469;
    vertical-align: middle;
    text-align: center;  
    text-decoration: none;
}

.subcontainer {
    background-color: #ffffff;
    height: 80px;
    padding-top:0px;
    padding-left: 30px;
    padding-right: 10px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    border-style: none none solid none;
    border-color: #dddddd;
    border-width: 1px;
  }

.logo {
    float:left;
    background-color: #ffffff;
    padding-top: 20px;
    padding-left: 0px;
    padding-right: 20px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
  }

  .tag {
    color: #000000;
    background-color:#ffb700;padding-left: 20px;
    padding: 5px 10px 5px 10px;
    margin-top: 0px;
    margin-left: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    font-size: 1rem;
    float: right;
  }

  .tagspacer {
    display:none;
  }

  .searchresult {
    font-size: 1rem;
  }

  .ResourceTitle {
    font-weight: bolder;
    text-decoration: underline;
    text-underline-offset: 8px;
    font-size: 1.0rem;
  }

  .tagline {
    float:left;
    background-color: #ffffff;
    vertical-align: middle;
    text-align: left;
    text-decoration: none;
    font-size: 16px;
    font-variant: normal;
    padding-top: 18px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
  }

  /* Style the right hand white nav bar */
.subnav {
    float: right;
    background-color:  #ffffff;
    color: #000000;
    vertical-align: middle;
    padding-top: 25px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    text-align: center;
    text-decoration: none;
    font-size: 21px;
    font-variant: normal;
  }

.subnav a:hover {
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 20%; 
    text-decoration-color: #FF7F00; 
  }

  .subnav a {
    padding-top: 15px;
    padding-left: 0px;
    padding-right: 20px;
    padding-bottom: 10px;
    color: #000000;
    font-variant: normal;
    text-decoration: none;
  }

.footnote {
  margin-top: 10px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: -10px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  font-size: 0.8rem;
}

form {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
}

.searchinput {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  border-style: solid;
  border-color: #000000;
  border-width: 2px;
}

.formclear {
  background-image: url("ClearCross.png");
  background-color: #ffffff;
  color: #0C00CA;
  font-size: 1.3rem;
  height: 44px;
  width: 50px;
  border: none;
  margin-top: 3px;
  margin-left: -56px;
  margin-right: 0px;
  margin-bottom: 10px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  vertical-align: top;
}

  /* The hero image */
.hero-image {
    background-image: url("HeroImageGlobe.jpg");
    float:none;
    /* Set a specific height */
    height: 360px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: left;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
  }

  .WhoWeAreImage {
    background-image: url("WhoWeAreHero.jpg");
    float:none;
    color: #ffffff;
    /* Set a specific height */
    height: 400px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    z-index: 1;
  }

   /* The hero text */
.hero-text {
    padding-top: 30px;
    padding-left: 35px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;  
  }

  /* The hero text paragraph */
.HeroDescription {
    text-align: left;
    color: #f4f4f4;
    text-decoration: none;
    font-size: 1.6rem;
    font-variant: medium;
    padding-top: 20px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 24px;  

  }

.PrimaryButton {
    display:inline-block;
    text-align: middle;
    color: #ffffff;
    border: none;
    background-color: #8800FF ;
    text-decoration: none;
    font-size: 1.1rem;
    font-variant: normal;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
  }

.PrimaryButton a {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 10%; 
    text-decoration-color: #ffffff !important; 
  }

.PrimaryButton a:hover{
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 10%; 
  text-decoration-color: #ffffff !important; 
}

.WhiteOutlineSecondaryButton {
    text-align: middle;
    color: #ffffff;
    border-style: solid;
    border-color: #ffffff;
    border-width: 2px;
    background-color: transparent;
    text-decoration: none;
    font-size: 1.1rem;
    font-variant: normal;
    padding-top: 8px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 8px;
    margin-top: 30px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;  
  }

  .SecondaryButton {
    text-align: middle;
    color: #000000;
    border-style: solid;
    border-color: #8800FF;
    border-width: 2px;
    background-color: none;
    text-decoration: none;
    font-size: 1.1rem;
    font-variant: normal;
    padding-top: 8px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 8px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
  }

.SubHeroFlexContainer {
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    padding-top: 0px;
    padding-left: 35px;
    padding-right: 35px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
  }

.SubHeroFlexContainerReverse {
  display: flex;
  flex-direction: row;
  background-color: #fafafa;
  padding-left: 35px;
  padding-right: 35px;
}

.SubHeroHeader {
    padding-top: 30px;
    padding-left: 0px;
    padding-right: 20px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

.SubHeroText {
    font-size: 1.25rem;
    font-variant: normal;
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 10px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;

}

.BlackButton {
  background-color: black;
  color: #ffffff;
  font-size: 1.2rem;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  margin-top: 15px;
  margin-left: 0px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.backgroundyellow {
  background-color:#ffe26d;
  color: #000000;
}

.whiteText{
   color: #ffffff !important;
}

.GreyOutlineButton {
    text-align: middle;
    color: #000000;
    border-color: #000000;
    border-width: 2px;
    background-color: transparent;
    text-decoration: none;
    font-size: 1.1rem;
    font-variant: normal;
    padding-top: 8px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 8px;
    margin-top: 10px;
    margin-left: 25px;
    margin-right: 0px;
    margin-bottom: 30px;  
}

  .IndentImage {
    background-image: url("IndentImage.jpg");
    float:none;
    color: #ffffff;
    /* Set a specific height */
    height: 260px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    z-index: -1;
  }

  .ContactUsImage {
    background-image: url("ContactUs.jpg");
    float:none;
    color: #ffffff;
    /* Set a specific height */
    height: 250px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    z-index: -1;
  }

  .SitemapImage {
    background-image: url("SitemapHero.jpeg");
    float:none;
    color: #ffffff;
    /* Set a specific height */
    height: 250px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    z-index: -1;
  }

  .JoinUsImage {
    background-image: url("JoinUs.jpg");
    float:none;
    color: #ffffff;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    z-index: -1;
  }

  .PartnershipImage {
    background-image: url("Partnership.jpg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: middle;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
  }

  .SkillsAndTrainingImage {
    background-image: url("SkillsAndTrainingHero.jpg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
  }

  .EventsImage {
    background-image: url("Events.jpg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
  }

  .ToolsImage {
    background-image: url("Tools.jpeg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position:center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
  }

  .ResourcesImage {
    background-image: url("ResourcesHero.jpg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
  }

  .LeadingATeamImage {
    background-image: url("Leading-A-Team.jpeg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
    
  }

  .WorkforceRedesignImage {
    background-image: url("Workforce-Redesign.jpg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
    
  }

  .LeadingAnOrganisationImage {
    background-image: url("Leading-An-Organisation.jpeg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
    
  }

  .DevelopingAWorkforcePlanImage {
    background-image: url("Developing-A-Workforce-Plan.jpeg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
    
  }

  .DesigningANewHospitalImage {
    background-image: url("Designing-A-New-Hospital.jpg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
    
  }

  .AnnualPlanSubmissionImage {
    background-image: url("Annual-Plan-Submission2.jpg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
    
  }

  .BuildingAWorkforceCollaborativeHubImage {
    background-image: url("Building-A-Workforce-Collaborative-Hub.jpeg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
    
  }

  .mr20px {
    margin-right: 20px;
  }

  .tag2 {
    color: #ffffff;
    background-color:#000000;padding-left: 20px;
    padding: 5px 10px 5px 10px;
    margin-top: 0px;
    margin-left: 10px;
    margin-right: 0px;
    margin-bottom: 10px;
    font-size: 1.2rem;
    float: right;
    display:block;
  }

  .topneg36 {
    margin-top:-36px;
  }

  .rightneg40 {
    margin-right:-40px;
  }

  .HRBusinessPartnerImage {
    background-image: url("HRBusinessPartner.jpeg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
  }


  .FrontlineManagerImage {
    background-image: url("Images/FrontlineManager.jpg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
  }

  .OrganisationWorkforcePlanningLeadImage {
    background-image: url("OrganisationWorkforcePlanningLead.jpeg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
  }

  .SystemWorkforceLeadImage {
    background-image: url("SystemWorkforceLead.jpeg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
  }

  .TransformationLeadImage {
    background-image: url("TransformationLead.jpeg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
  }


  .ExecutiveLeadImage {
    background-image: url("ExecutiveLead.jpeg");
    float:none;
    color: #000000;
    /* Set a specific height */
    height: 300px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position:relative;
    z-index: -1;
  }


.grad1 {
    height: 200px;
    background-color: red; /* For browsers that do not support gradients */
    background-image: linear-gradient(to right, blue 50%, lightblue 50%);
  }

  .CookiePolicyImage {
    background-image: url("PrivacyPolicyHero.jpg");
    float:none;
    color: #ffffff;
    /* Set a specific height */
    height: 250px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    z-index: -1;
  }

  .PrivacyPolicyImage {
    background-image: url("PrivacyPolicyHero.jpg");
    float:none;
    color: #ffffff;
    /* Set a specific height */
    height: 250px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    z-index: -1;
  }


  .IndentImageTitleContainer {
    padding-top: 36px;
    padding-left: 30px;
    padding-right: 70px;
    padding-bottom: 40px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
  }

  .IndentContentBlock {
    display: block;
    background-color: #E1E0E0;
    border-style: none;
    border-width: 2px;
    border-color: grey;
    padding-top: 36px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    margin-top: -35px;
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
  }

  .IndentContentBlockSmall {
    display: block;
    background-color: #E1E0E0;
    border-style: none;
    border-width: 2px;
    border-color: grey;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    margin-top: -200px;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 10px;
  }

  .ContentBlockWhite {
    display: block;
    background-color: #ffffff;
    border-style: none;
    border-width: 2px;
    border-color: grey;
    padding-top: 36px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 40px;
    margin-top: 0px;
    margin-left: 7%;
    margin-right: 7%;
    margin-bottom: 80px;
  }

  .IndentContentBlockyellow{
    display: block;
    background-color: #ffe26d;
    border-style: none;
    border-width: 2px;
    border-color: grey;
    padding-top: 36px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    margin-top: -75px;
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 80px;
  }

  .IndentContentBlockcyan{
    display: block;
    background-color: #92D4D4;
    border-style: none;
    border-width: 2px;
    border-color: grey;
    padding-top: 36px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    margin-top: -75px;
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 80px;
  }

  .IndentContentBlockblue{
    display: block;
    background-color: #63C1F4;
    border-style: none;
    border-width: 2px;
    border-color: grey;
    padding-top: 36px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    margin-top: -75px;
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 80px;
  }

  .IndentContentBlocklilac{
    display: block;
    background-color: #C7B6F3;
    border-style: none;
    border-width: 2px;
    border-color: grey;
    padding-top: 30px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    margin-top: -75px;
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 80px;
  }

  .IndentContentBlockorange{
    display: block;
    background-color: #F5BD56;
    border-style: none;
    border-width: 2px;
    border-color: grey;
    padding-top: 36px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    margin-top: -75px;
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 80px;
  }


  .IndentContentBlock a, 
  .IndentContentBlockyellow a, 
  .IndentContentBlockblue a,
  .IndentContentBlocklilac a,
  .IndentContentBlockorange a {
    text-decoration: none;
    color: #000000;
  }

  .IndentContentBlock a:hover,
  .IndentContentBlockyellow a:hover, 
  .IndentContentBlockblue a:hover,
  .IndentContentBlocklilac a:hover,
  .IndentContentBlockorange a:hover {
    text-decoration: underline;
    text-underline-offset: 18%;
    text-decoration-thickness: 10%; 
    text-decoration-color: #8800FF; 
  }

  .IndentContextText  {
    text-decoration: none;
    font-size: 1.25rem;
    margin-top: 20px;
    z-index: 1;
  }

  .indentSpacer {
    padding-top: 40px;
  }

  .eventSpacer {
    padding-right: 40px;
    padding-top: 20px;
  }

  .EventContentBlock {
    display: block;
    text-decoration: none;
    font-variant: normal;
    background-color: #E1E0E0;
    border-style: none;
    border-width: 2px;
    border-color: grey;
    padding-top: 30px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    margin-top: 80px;
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 70px;
  }

  .EventContentBlock p {
    text-decoration: none;
    font-size: 1.5rem;
    font-variant: normal;
  }

  .EventFlex {
    display: flex;
  }

  .EventBlock1 {
    text-decoration: none;
    color: #ffffff;
    font-size: 30px;
    font-variant: normal;
    background-color: #360076;
    border-style: none;
    border-width: 2px;
    border-color: grey;
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    margin-top: 20px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
  }

  .EventBlock2 {
    color: #ffffff;
    font-size: 30px;
    font-variant: normal;
    background-color: #001523;
    border-style: none;
    border-width: 2px;
    border-color: grey;
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    margin-top: 20px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
  }

  .EventBlock3 {
    text-decoration: none;
    font-size: 30px;
    font-variant: normal;
    background-color: #fafafa;
    border-style: none;
    border-width: 2px;
    border-color: grey;
    padding-top: 20px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 40px;
    margin-top: 0px;
    margin-left: 20px;
    margin-right: 0px;
    margin-bottom: 0px;
  }

  .UnderlinePink {
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 15%; 
    text-decoration-color: #E000FF; 
  }

  .UnderlineLinkedInBlue {
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 15%; 
    text-decoration-color: #0072b1; 
    color: #000000;
  }

  .HighlightPink {
    color: #FF2469;
  }

  .HighlightGreen {
    color: #32CA00;
  }

  .UnderlineOrange {
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 15%; 
    text-decoration-color: #FF7F00;
    margin-bottom: 20px;
  }

  .InterestsFlex {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 80px;
  }

  .InterestBlock1 {
    width:63%;
    text-decoration: none;
    color: #000000;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 0px;
    padding-bottom: 40px;
    font-variant: normal;
    background-color: #E1E0E0;
    border-style: none;
    margin-top: 10px;
    margin-left: 70px;
    margin-right: 20px;
    margin-bottom: 0px;
  }

  .InterestBlock2 {
    width:29%;
    text-decoration: none;
    color: #000000;
    font-variant: normal;
    background-color: #E1E0E0;
    border-style: none;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 0px;
    padding-bottom: 40px;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 70px;
    margin-bottom: 0px;
  }

.InterestBlockTitle {
    margin-bottom: 20px;
    padding-right: 10px;
    font-size: 1.8rem;
}

.BlackFilledButtonContainer {
    background-color: none;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;  
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}

.BlackFilledButton {
    display:inline-block;
    height: 24px;
    vertical-align:top;
    text-align:center;
    color: #ffffff;
    background-color: #000000;
    border-style: none;
    text-decoration: none;
    font-size: 1.1rem;
    font-variant: normal;
    padding-top: 10px;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 8px;
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 15px;
    margin-bottom: 10px;
}

.BlackFilledButton:hover {
  background-color: #8800FF;
}

  .WhiteTitle{
    color: #ffffff;
    font-size: 18px;
    font-variant: normal;
    padding-top: 20px;
    padding-left: 30px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
  }

  .ResourcesIndentContentBlock {
    display: block;
    text-decoration: none;
    font-size: 30px;
    font-variant: normal;
    background-color: #fafafa;
    border-style: solid;
    border-width: 2px;
    border-color: grey;
    padding-top: 10px;
    padding-left: 40px;
    padding-right: 20px;
    padding-bottom: 10px;
    margin-top: -142px;
    margin-left: 80px;
    margin-right: 80px;
    margin-bottom: 0px;
  }

  .ResourcesIndentContentBlock p {
    text-decoration: none;
    font-size: 24px;
    font-variant: normal;
  }

.ThreePanelContainer {
    display: block;
}

.ThreePanelFlex {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 80px;
  }

  .ThreePanelFlexLinks {
    display: flex;
    justify-content: left;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 20px;
    margin-bottom: 0px;
  }

  .ThreePanelFlexSitemap {
    display: flex;
    justify-content:space-evenly;
    margin-top: 2%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 3%;
  
  }

.ThreePanel {
    text-decoration: none;
    color: #000000;
    font-size: 30px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    font-variant: normal;
    background-color: #E1E0E0;
    border-style: none;
    margin-top: 0px;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 0px;
    height: 100%;
}

.ThreePanelSitemap {
  text-decoration: none;
  color: #000000;
  font-size: 30px;
  line-height:1.25em;
  padding-top: 0px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 0px;
  font-variant: normal;
  background-color: none;
  border-style: none;
  margin-top: 0px;
  margin-left: 0%;
  margin-right: 0%;
  margin-bottom: 0px;
  height: 100%;
 
}

.pt2 {
padding-top: 1.3em;
}

.ThreePanelImage {
    width:100%
}

.ThreePanelContent {
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    
}

.ThreePanelContentBlock {
    margin-top: 20px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    color: #000000;
    font-size: 22px;
}


.ThreePanelButtonContainer {
    display: block;
    text-align: right;
    margin-top: 20px;
    padding-top: 20px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 10px;

}

.ThreePanelContent a {
    text-decoration: none;
}

.ThreePanelContentLink {
    border-style: solid;
    border-width: 2px;
    border-color: #8800FF;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    color: #000000;
    font-size: 1.2rem;
}

.SinglePanelThreeLinks {
  border-style: solid;
  border-width: 2px;
  border-color: #8800FF;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  color: #000000;
  font-size: 1.2rem;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 20px;
}

.IndentSinglePanelBlock {
  display: flex;
  background-color: none;
  border-style: none;
  border-width: 2px;
  border-color: none;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  margin-top: -55px;
  margin-left: 70px;
  margin-right: 70px;
  margin-bottom: 80px;
}

.IndentSinglePanelImage {
  padding: 0px;
  border-style: solid;
  border-width: 1px;
  border-color: #E1E0E0;
}

.IndentSinglePanelTitle {
    border-style: none;
  }

.IndentSinglePanelContent {
  background-color: #E1E0E0;
  padding-top: 30px;
  padding-left: 30px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

.IndentSinglePanelText {
    text-decoration: none;
    font-size: 1.25rem;
    margin-top: 20px;
    margin-bottom: 20px;
  }

.IndentSinglePanelButtonContainer {
  display: block;
  text-align: right;
  margin-top: 30px;
  margin-bottom: 40px;
  margin-right: 7px;
  padding-left: 0px;
  padding-right: 0px;

}

.IndentSinglePanelContent a {
  text-decoration: none;
}

.IndentSinglePanelContentLink {
  border-style: solid;
  border-width: 2px;
  border-color: #8800FF;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 18px;
  padding-bottom: 10px;
  color: #000000;
}

.PanelOurResources {
    text-decoration: none;
    color: #000000;
    font-size: 30px;
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    font-variant: normal;
    background-color: #dddddd;
    border-style: solid;
    border-width: 2px;
    border-color: grey;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 40px;
    margin-bottom: 0px;
}

.PanelHelp {
    text-decoration: none;
    color: #000000;
    font-size: 30px;
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    font-variant: normal;
    background-color: #dddddd;
    border-style: solid;
    border-width: 2px;
    border-color: grey;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

.FooterBackgroundBlack {
    background-color: #001230;
    color: #ffffff;
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    margin-top: 0px;
}

.FooterContainer {
    display:block
}

.FooterFlexMenu {
    display:flex
}

.FooterColumn {
    width: 300px;
    padding-top: 0px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 20px;
    background-color: none;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 10px;
    margin-bottom: 0px;
}

.FooterColumnTitle {
    color:#ffffff;
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 10px;
}

ul {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0em;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0em;
}

ol {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0em;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
}

li {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0em;
}

li a {
  text-decoration: none;
  color: #000000;
}

li a:hover {
  text-decoration: underline;
  text-underline-offset: 8px;
}

.indentli {
  margin-left: 1em;
  padding-left: 1em;
}

.bulletlist {
    text-indent: 0em;
    padding-left: 2em;
}

.numberlist {
  text-indent: 0em;
  padding-left: 2em;
}

.FooterColumn a {
    list-style: none;
    color: #B8B6B6;
    text-decoration: none;
    line-height:1.75em ;
    font-size: 1.4rem;
    font-variant: light;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    
}

.FooterSocialIcons {
    display: block;
    padding-top: 0px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 20px;
    background-color: none;
}

.FooterSocialContainer {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
}

.FooterIcon {
    padding-top: 20px;
    padding-left: 0px;
    padding-right: 30px;
    padding-bottom: 0px;
}

ul {
    list-style: none;
}

.FooterComplianceLinks {
    display: block;
    color: #f4f4f4;
    text-decoration: none;
    line-height:1.75em ;
    font-size: 1.4rem;
    font-variant: light;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    
}

.FooterComplianceLinks a {
    list-style: none;
    color: #B8B6B6;
    text-decoration: none;
    line-height:1.75em ;
    font-size: 1.4rem;
    font-variant: light;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 40px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    
}

.FooterComplianceFlexContainer {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    margin-left: 30px;
    margin-right: 30px;
}

.Copyright {
    color: #f4f4f4;
    text-decoration: none;
    line-height:1.75em ;
    font-size: 20px;
    font-variant: light;
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 20px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 20px;
    
}

.sbImage {
    background-image: url("SkillsBuilder.jpg");
    float:none;
    color: #ffffff;
    /* Set a specific height */
    height: 150px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    z-index: -1;
  }

.sbHeroFlexContainer {
    display: flex;
     flex-direction: row;
     background-color: #ffffff;
     padding-top: 0px;
     padding-left: 35px;
     padding-right: 35px;
     margin-top: 0px;
     margin-left: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
}

.sbHeroDescription {
    text-align: left;
    color: #FF7F00;
    text-decoration: none;
    font-size: 1.6rem;
    font-variant: medium;
    padding-top: 15px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 20px;  
  }

  .sbSubHeroText {
    font-size: 1.25rem;
    font-variant: normal;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}


.sbTwoColumnFlex {
    display: flex;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #ffffff;
}

.sbContainerColumn {
    background-color:none;
}

.sbSpacer {
    margin-top: 0px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 0px;
}

.sbThreePanelContainer {
    display: block;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    background-color: #E1E0E0;
}

.sbThreePanelFlex {
    display: flex;
    justify-content: space-between;
    margin-top: 0px;
    margin-left: 0%;
    margin-right: 0%;
    margin-bottom: 20px;
}

.sbThreePanel {
    text-decoration: none;
    color: #000000;
    font-size: 30px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    font-variant: normal;
    background-color: none;
    border-style: none;
    margin-top: 10px;
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 0px;
    height: 100%;
}

.sbTitle {
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    text-align: left;
    font-size: 1rem;
    min-width: 100px; 
}


.sbThreePanelContent {
    padding-top: 20px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 1.3rem;
    min-width: 100px;
    background-color: #E1E0E0;
}


.sbThreePanelContentblue {
  padding-top: 20px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 1.3rem;
  min-width: 100px;
  background-color: #92D4D4;
  border-style: solid;
  border-width: 2px;
  border-color: #000000;

}

.sbThreePanelContentlightblue {
  padding-top: 20px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 1.3rem;
  min-width: 100px;
  background-color: #BDE2F7;
  border-style: solid;
  border-color: #000000;
  border-width: 2px;
}

.sbThreePanelContentdarkblue {
  padding-top: 20px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 1.3rem;
  min-width: 100px;
  background-color: #003788;
  color: #ffffff;
}

.sbThreePanelContent2 {
    padding-top: 10px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 1.3rem;
    min-width: 100px;
    background-color: #001230;
    color: #E1E0E0;
    border-radius: 4px;
}

.sbPaneltitle {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    background-color: none;
    text-align: center;
    font-size: 1.6rem;
}

.sbUnderlineOrange {
    text-decoration: underline;
    text-underline-offset: 7px;
    text-decoration-thickness: 15%; 
    text-decoration-color: #0066FF;
    margin-bottom: 20px;
  }

.sbPanelContentBlock
{
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 7px;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 7px;
    color: #000000;
    font-size: 1rem;
    background-color: #ffffff;
    border-radius: 4px;
    border-style: solid;
    border-width:2px;
    border-color: #001523;
}

.blackoutlinebutton {
  border: #000000;
  border-style: solid;
  border-width: 0.5px;
  margin-top: 10px;
  border-radius: 3px;
}

.sbPanelContentBlockorange {
  margin-top: 10px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  padding-top: 7px;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 7px;
  color: #000000;
  font-size: 1rem;
  background-color: #ffffff;
  border-radius: 4px;
  border-style: solid;
  border-color: #FF7F00;
  text-align: middle;
}

.sb_screenshot {
  margin-top: 0px;
  margin-left: 70px;
  margin-right: 40px;
  margin-bottom: 70px;
}

.sbPanelContentBlockgrey
{
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 7px;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 7px;
    color: #000000;
    font-size: 1rem;
    background-color: #ffffff;
    border-radius: 0px;
    text-align: middle;
}

.sbTitleunderline {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 10%;
  text-decoration-color: #8800FF;
}

.sbPanelContentBlockblue
{
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 7px;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 7px;
    color: #000000;
    font-size: 1rem;
    background-color: #0099FF;
    border-style: solid;
    border-radius: 4px;
    border-color: #001523;
    border-width: 2px;
}

.sbPanelContentBlocklightblue
{
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 7px;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 7px;
    color: #000000;
    font-size: 1rem;
    background-color: #BDE2F7;
    border-style: solid;
    border-radius: 4px;
    border-color: #001523;
    border-width: 2px;
}

.sbGreen {
    background-color: #32CA00;
}

.sbAmber {
    background-color: #ffb700;
    border-radius: 4px;
}

.sbRed {
    background-color: #f90303;
}

.sbLightblue {
    background-color: #92D4D4;
    border-style: solid;
  border-color: #001523;
  border-width: 2px;
}

.sbLightgrey {
  background-color: #D7D5D5;
  border-style: solid;
  border-color: #001523;
  border-width: 2px;
}

.sbWhitegrey {
  background-color: #fafafa;
  border-style: solid;
  border-color: #001523;
  border-width: 2px;
}

.sbBlue {
    background-color: #0099FF;
    border-style: solid;
    border-color: #001523;
    border-width: 2px;
   
}

.sbDarkblue {
    background-color: #003788;
    border-style: solid;
    border-color: #ffffff;
    border-width: 2px;
    color: #ffffff;
}

.sbPurple {
    background-color: #8800FF;
    color: #ffffff;
    margin-left: 30px;
    margin-right: 30px;
   
}

.sbLightpurple {
  background-color: #C2A2F1;
  color: #000000;
  border-style: solid;
  border-color: #000000;
  border-width: 2px;
 
}

input {
  margin: 0px 0px 2px 0px;
  vertical-align: middle;
}

.sbPanelContentBlockgreylabel
{
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 7px;
    color: #000000;
    font-size: 0.9rem;
    background-color: #ffb700;
    text-align: middle;
    border-color: #000000;
    border-width: 2px;
}
.sbcheckbox {
    display: inline;
    position: relative;
    padding-left: 0px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 1rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sbcheckbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;

  }

.FilterRight {
  float:right;
}

 /* Style the buttons */
 .btn {
  border: none;
  outline: none;
  padding: 10px 10px;
  margin: 5px 5px 5px 2px;
  background-color: #ffffff;
  cursor: pointer;
  font-size: 1rem;
}

/* Add a light grey background on mouse-over */
.btn:hover {
  background-color: #8800FF;
  color: white;
}

/* Add a dark background to the active button */
.btn.active {
  background-color: #8800FF;
  color: white;
  font-size: 1rem;
}