body {
  padding-top: 9.5rem;
  background-color: #fff;
  font-size: 1.2rem;
}

.navbar {
  background-color: rgba(255, 255, 255, 0.5)
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: .0;
    margin-right: 25px;
}

.nav-item {
  text-align: center;
  border-width: 2px;
  border-style: solid;
  margin-right: 3px;
  text-transform: uppercase;
  border-radius: 10px;
  /* font-weight: bold; */
}

@media (min-width: 992px) {
  .nav-link.nav-single {
    padding-top: 35px;
    padding-bottom: 35px;
  }
  .nav-link.nav-double {
    padding-top: 25px;
    padding-bottom: 25px;
  }
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.8);
}

h3 {
  color: #0070c0;
  padding-top: 20px;
}

h3.contrast {
  padding-top: 10px;
}

h3.outputs {
  color: #663399;
}

h3.buy-in {
  color: #ff6666;
}

h3.fit {
  color: #009966;
}

h3.alignment {
  color: #cc0099;
}

h3.outcomes {
  color: #0066cc;
}

h3.adoption {
  color: #ff6600;
}

h3.outputs span,
h3.buy-in span,
h3.fit span,
h3.alignment span,
h3.outcomes span,
h3.adoption span
 {
  padding: 4px 12px 4px 12px;
  background: rgba(255, 255, 255, .4);
}

h4.case-head {
  text-align:center;
}

h5 {
  font-size: 1.4rem;
  font-weight: 400;
  text-align: justify;
  text-justify: inter-word;
}

h6 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  padding-top: 20px;
}

p {
  text-align: justify;
  text-justify: inter-word;
}

.well p {
  line-height: 1.7;
}

.footnote {
  font-size: 1rem;
}

@media (max-width: 1400px) {
  h1 {
    font-size: 1.9rem;
  }
}

.nav-item {
  font-size: 12px;
}

.blue-text {
  color: #0070c0;
  font-weight: bold;
}


/* No media query for `xs` since this is the default in Bootstrap */

.navbar-nav .nav-link {
  padding-left: 10px;
  padding-right: 340px;
  font-size: 13px;
}
.navbar-nav .nav-outputs .nav-link {
  padding-right: 255px;
}
.navbar-nav .nav-buy-in .nav-link {
  padding-right: 200px;
}
.navbar-nav .nav-fit .nav-link {
  padding-right: 70px;
}
.navbar-nav .nav-alignment .nav-link {
  padding-right: 0px;
}
.navbar-nav .nav-outcomes .nav-link {
  padding-right: 215px;
}
.navbar-nav .nav-adoption .nav-link {
  padding-right: 215px;
}
.navbar-nav .nav-checklist .nav-link {
  padding-right: 185px;
}
.navbar-nav .nav-webinars .nav-link {
  padding-right: 185px;
}
.navbar-nav .nav-resources .nav-link {
  padding-right: 305px;
}

/* Small devices (landscape phones, 576px and up)   */
@media (min-width: 576px) {
  .navbar-nav .nav-link {
    padding-left: 8px;
    padding-right: 440px;
  }
  .navbar-nav .nav-outputs .nav-link {
    padding-right: 365px;
  }
  .navbar-nav .nav-buy-in .nav-link {
    padding-right: 305px;
  }
  .navbar-nav .nav-fit .nav-link {
    padding-right: 175px;
  }
  .navbar-nav .nav-alignment .nav-link {
    padding-right: 100px;
  }
  .navbar-nav .nav-outcomes .nav-link {
    padding-right: 320px;
  }
  .navbar-nav .nav-adoption .nav-link {
    padding-right: 320px;
  }
  .navbar-nav .nav-checklist .nav-link {
    padding-right: 290px;
  }
  .navbar-nav .nav-webinars .nav-link {
    padding-right: 290px;
  }
  .navbar-nav .nav-resources .nav-link {
    padding-right: 410px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .navbar-nav .nav-link {
    padding-left: 8px;
    padding-right: 620px;
  }
  .navbar-nav .nav-outputs .nav-link {
    padding-right: 525px;
  }
  .navbar-nav .nav-buy-in .nav-link {
    padding-right: 465px;
  }
  .navbar-nav .nav-fit .nav-link {
    padding-right: 335px;
  }
  .navbar-nav .nav-alignment .nav-link {
    padding-right: 280px;
  }
  .navbar-nav .nav-outcomes .nav-link {
    padding-right: 490px;
  }
  .navbar-nav .nav-adoption .nav-link {
    padding-right: 490px;
  }
  .navbar-nav .nav-checklist .nav-link {
    padding-right: 450px;
  }
  .navbar-nav .nav-webinars .nav-link {
    padding-right: 450px;
  }
  .navbar-nav .nav-resources .nav-link {
    padding-right: 580px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .navbar-nav .nav-link {
    padding-top: 1px;
    padding-bottom: 0;
  }
  .navbar-nav .nav-outputs .nav-link {
    padding-right: 8px;
  }
  .navbar-nav .nav-buy-in .nav-link {
    padding-right: 8px;
  }
  .navbar-nav .nav-fit .nav-link {
    padding-right: 8px;
  }
  .navbar-nav .nav-alignment .nav-link {
    padding-right: 8px;
  }
  .navbar-nav .nav-outcomes .nav-link {
    padding-right: 8px;
  }
  .navbar-nav .nav-adoption .nav-link {
    padding-right: 8px;
  }
  .navbar-nav .nav-checklist .nav-link {
    padding-right: 8px;
  }
  .navbar-nav .nav-webinars .nav-link {
    padding-right: 8px;
  }
  .navbar-nav .nav-resources .nav-link {
    padding-right: 8px;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 2px;
    padding-right: 2px;
  }  
  .navbar-expand-lg .navbar-nav .nav-alignment .nav-link {
    padding-left: 3px;
    padding-right: 3px;
  } 
  .navbar-expand-lg .navbar-nav .nav-home .nav-link,  
  .navbar-expand-lg .navbar-nav .nav-resources .nav-link {
    padding-top: 45px;
    padding-bottom: 45px;
  }
  .navbar-expand-lg .navbar-nav .nav-outputs .nav-link,  
  .navbar-expand-lg .navbar-nav .nav-buy-in .nav-link,  
  .navbar-expand-lg .navbar-nav .nav-checklist .nav-link,  
  .navbar-expand-lg .navbar-nav .nav-webinars .nav-link {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .navbar-expand-lg .navbar-nav .nav-outcomes .nav-link,  
  .navbar-expand-lg .navbar-nav .nav-adoption .nav-link {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

/* Large devices (desktops, 1200px and up) */
@media (min-width: 1200px) {
  .navbar-expand-lg .navbar-nav .nav-home .nav-link,  
  .navbar-expand-lg .navbar-nav .nav-checklist .nav-link,  
  .navbar-expand-lg .navbar-nav .nav-webinars .nav-link,  
  .navbar-expand-lg .navbar-nav .nav-resources .nav-link {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .navbar-expand-lg .navbar-nav .nav-outputs .nav-link,  
  .navbar-expand-lg .navbar-nav .nav-buy-in .nav-link,
  .navbar-expand-lg .navbar-nav .nav-fit .nav-link,
  .navbar-expand-lg .navbar-nav .nav-outcomes .nav-link {
    padding-top: 17px;
    padding-bottom: 17px;
  }
  .navbar-expand-lg .navbar-nav .nav-alignment .nav-link,
  .navbar-expand-lg .navbar-nav .nav-adoption .nav-link {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}


/* Large devices (desktops, 992px and up) */
@media (min-width: 1400px) {
  .navbar-nav .nav-link {
    font-size: 15px;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 8px;
    padding-right: 8px;
  }
  .navbar-expand-lg .navbar-nav .nav-home .nav-link,  
  .navbar-expand-lg .navbar-nav .nav-checklist .nav-link,  
  .navbar-expand-lg .navbar-nav .nav-webinars .nav-link,  
  .navbar-expand-lg .navbar-nav .nav-resources .nav-link {
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .navbar-expand-lg .navbar-nav .nav-outputs .nav-link,  
  .navbar-expand-lg .navbar-nav .nav-buy-in .nav-link {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .navbar-expand-lg .navbar-nav .nav-fit .nav-link,
  .navbar-expand-lg .navbar-nav .nav-alignment .nav-link,
  .navbar-expand-lg .navbar-nav .nav-outcomes .nav-link,  
  .navbar-expand-lg .navbar-nav .nav-adoption .nav-link {
    padding-top: 9px;
    padding-bottom: 9px;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .nav-item {
    font-size: 15px;
  }
}

@media (max-width: 991px) {
  .navbar-nav {
    margin-top: 10px;
  }
  .nav-item {
    margin-bottom: 10px;    
  }
}

.nav-home {
  background-color: #ccccff;
  border-color: #9999cc;
}

.nav-outputs {
  background-color: #663399;
  border-color: #9966cc;
}

.nav-buy-in {
  background-color: #ff6666;
  border-color: #ff9999;
}

.nav-fit {
  background-color: #009966;
  border-color: #33ffcc;
}

.nav-alignment {
  background-color: #cc0099;
  border-color: #ff33cc;
}

.nav-outcomes {
  background-color: #0066cc;
  border-color: #0099ff;
}

.nav-adoption {
  background-color: #ff6600;
  border-color: #ff9933;
}

.nav-checklist {
  background-color: #33CCFF;
  border-color: #6699ff;
}

.nav-webinars {
  background-color: #66CCFF;
  border-color: #6699ff;
}

.nav-resources {
  background-color: #99CCFF;
  border-color: #6699ff;
}

.navbar-light .navbar-nav .nav-outputs .nav-link,    
.navbar-light .navbar-nav .nav-buy-in .nav-link,
.navbar-light .navbar-nav .nav-fit .nav-link,
.navbar-light .navbar-nav .nav-alignment .nav-link,
.navbar-light .navbar-nav .nav-outcomes .nav-link,
.navbar-light .navbar-nav .nav-adoption .nav-link {
    color: #fff;
}

.navbar-light .navbar-nav .nav-outputs .nav-link:focus,
.navbar-light .navbar-nav .nav-outputs .nav-link:hover,
.navbar-light .navbar-nav .nav-buy-in .nav-link:focus,
.navbar-light .navbar-nav .nav-buy-in .nav-link:hover,
.navbar-light .navbar-nav .nav-fit .nav-link:focus,
.navbar-light .navbar-nav .nav-fit .nav-link:hover,
.navbar-light .navbar-nav .nav-alignment .nav-link:focus,
.navbar-light .navbar-nav .nav-alignment .nav-link:hover,
.navbar-light .navbar-nav .nav-outcomes .nav-link:focus,
.navbar-light .navbar-nav .nav-outcomes .nav-link:hover,
.navbar-light .navbar-nav .nav-adoption .nav-link:focus,
.navbar-light .navbar-nav .nav-adoption .nav-link:hover {
    color: #000;
}

.nav-home:focus, .nav-home:hover,
.nav-outputs:focus, .nav-outputs:hover,
.nav-buy-in:focus, .nav-buy-in:hover,
.nav-fit:focus, .nav-fit:hover,
.nav-alignment:focus, .nav-alignment:hover,
.nav-outcomes:focus, .nav-outcomes:hover,
.nav-adoption:focus, .nav-adoption:hover,
.nav-checklist:focus, .nav-checklist:hover,
.nav-webinars:focus, .nav-webinars:hover,
.nav-resources:focus, .nav-resources:hover {
  background-color: #fff;
  border-color: #9999cc;
  color: #000;
}

.nav-item.active {
  border-width: 6px;
}
/*
.navbar-light .navbar-nav .nav-item:focus .nav-link,
.navbar-light .navbar-nav .nav-item:hover .nav-link {
    color: #fff;
    font-weight: 500;
}
*/
.navbar-light .navbar-toggler {
    color: #333399;
    border-color: #6666cc;
}

.vertical-center {
  display: flex;
  align-items: center;
}

h1 {
  color: #333399;
}

.btn-info {
    color: #defdfd;
    background-color: #3399cc;
    border-color: #006699;
}

.footer {
  background-color: #FFF;
}

.footer .col-md-6,
.col-md-6.paint-border {
  padding: 3px;
}

.accordion-button {
  font-size: 1.4rem;
  color: #0070c0;
  background-color: #fff;
}

.accordion-button:not(.collapsed) {
  color: #006699;
}

li {
  padding-bottom: 5px;
}

li:last-child {
  padding-bottom: 0;
}

li.nav-item {
  padding-bottom: 0;
}

.embed-responsive-item {
  background-color: black;
}

p.no-margin-bottom {
  margin-bottom: 0;
}

.support-org {
  font-size: 20px;
  color: #333399;
  font-weight: bold;
}

.resource-img {
    margin-top: 9px;
    border: 3px solid #333399;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2);
    border-radius: 8px;  
}

.img-max {
  max-width: 400px;
  width:100%;
}

.img-max-300 {
  max-width: 300px;
  width:100%;
}

.img-max-400 {
  max-width: 400px;
  width:100%;
}

.img-max-150 {
  max-width: 150px;
  width:100%;
}

.img-fluid-mob {
  max-width: 60%;
  height: auto;
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .img-fluid-mob {
    max-width: 80%;
    height: auto;
  }
}

.contrast-section {
  background-color: #d9eafb;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.well {
  border: 2px solid #421c52;
  background: rgb(255, 255, 255);
  padding: 20px 25px 5px 25px;
  border-radius: 15px;
  font-style: italic;
}

.well-outputs {
  border-color: #663399;
}

.well-buy-in {
  border-color: #ff6666;
  overflow: hidden;
}

.well-fit {
  border-color: #009966;
}

.well-alignment {
  border-color: #cc0099;
}

.well-outcomes {
  border-color: #0066cc;
}

.well-adoption {
  border-color: #ff6600;
}

a.popovers, a.popovers:hover {
    color: #663399;
    text-decoration: none;
    font-weight: bold;
    cursor: help;
}

.popover{
  background-color: white;
  font-size: 1.1rem;
  border-color: #421c52;
  border-width: 2px;
  white-space: pre-wrap;
}
.popover-header {
  background-color: white;
  color: black;
  font-size: 1.1rem;
  border-color: #421c52;
  border-width: 2px;
}
.popover-body {
  color: black;
  border-color: #421c52;
  border-width: 2px;
}

ul.italic-list {
  font-style: italic; 
}

figure {
  margin: 0 2rem 1rem 2rem;
}

#myTooltip {
  padding: 15px;
  background: white;
  color: black;
  font-size: 1.1rem;
  border-style: solid;
  border-color: #421c52;
  border-radius: 15px;
  border-width: 2px;
  white-space: pre-wrap;
  position: absolute;
  width: 300px;
  display: none;
  z-index: 9999;
}

.resource-img {
  border: 3px solid #6699ff;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .video-height {height:330px;}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .video-height {height:480px;}
  figure {
      margin: 0 0 1rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .video-height {height:520px;}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .video-height {height:560px;}
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .video-height {height:640px;}
}