:root {
     --dark-color: #0A369D;
     --dark-2-color: #4472CA;
     --dark-3-color: #5E7CE2;
     --dark-contrast-color: white;
     --white-color: white;
     --light-color: #92B4F4;
     --light-2-color: #CFDEE7;
     --light-contrast-color: darkSlateGrey;
     --important-color: gold;
     --important-hover-color: khaki;
     --important-contrast-color: maroon;
     --btn-hover-bg: white;
}
 body {
     text-align: center;
     font-family: Roboto;
     color: var(--body-color);
     margin:0;
     width: 100%;
     min-height: 100vh;
     max-width: 100%;
}
.page-container {
  position: relative;
  min-height: 100vh;
}

.wrapper {
    padding-bottom: 0rem !important;
}

 section {
     margin: 0;
     padding: 0;
     max-width: 100%;
}

@media (orientation: portrait) {
    section.outcomes {
        margin: 3vh 0;
        background: radial-gradient(rgba(255,255,255,0), rgba(240,240,255,0.7) 30% , rgba(255,255,255,1)), url("/intelygence/img/stockphotos/feedback-discussion-v.avif");
        background-blend-mode: screen;
        background-size: cover;
        background-position: center;
    }
    section.outcomes h2 {
        font-size: 1.2em;
        font-weight: 100;
    }
}

@media (orientation: landscape) {
    section.outcomes {
        margin: 3vh 0;
        padding-bottom: 5vh;
        background: radial-gradient(rgba(255,255,255,0), rgba(240,240,255,0.7) 30% , rgba(255,255,255,1)), url("/intelygence/img/stockphotos/feedback-discussion.avif");
        background-blend-mode: screen;
        background-size: cover;
        background-position: center;
    }
}

    section.pagetop * {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    section.pagetop h1 {
        width: 100%;
        position: absolute;
        top: 3vw !important;
        font-size: 10vw;
    }
    section.pagetop h2 {
        width: 100%;
        position: absolute;
        top: calc(2 * 10vw + 1.5 * 10vw) !important;
        font-size: 3vw;
        font-weight: 100;
    }
    section.pagetop div a {
        position: absolute;
        bottom: 10% !important;
        left: calc(50% - 200px/2);
        margin-left: auto;
        margin-right: auto;
        width: 200px !important;
        font-size: clamp(16px);
        border-radius: 4px;
    }

@media (orientation: portrait) {
    section.pagetop {
        background: rgba(10, 54, 158, .75) url("/intelygence/img/stockphotos/looking-at-postits-v.avif") !important;
        background-blend-mode: darken;
        background-size: cover !important;
        background-position: center;
        width: 100vw;
        height: 100vh;
        text-align: center;
        position: relative;
    }
}

@media (orientation: landscape) {
    section.pagetop {
        background: rgba(10, 54, 158, .75) url("/intelygence/img/stockphotos/looking-at-postits.avif") !important;
        background-blend-mode: darken;
        background-size: cover !important;
        background-position: center;
        width: 100vw;
        height: 100vh;
        text-align: center;
        position: relative;
    }
    section.pagetop h1 {
        margin-top: 0;
        }
    section.pagetop h2 {
        top: calc(2 * 10vw + 0.65 * 10vw) !important;
        }
}



@media (orientation: portrait) {
    section.references {
        background: rgba(10, 54, 158, .25) url("/intelygence/img/stockphotos/seaside-sundown-v.avif");
        background-blend-mode: darken;
        background-size: cover;
        background-position: center;
    }
    section.references h2 {
        font-size: 1.2em;
        font-weight: 100;
    }
}

@media (orientation: landscape) {
    section.references {
        background: rgba(10, 54, 158, .25) url("/intelygence/img/stockphotos/seaside-sundown.avif");
        background-blend-mode: darken;
        background-size: cover;
        background-position: left center;
    }
}

.headline-light
{
    color: var(--white-color);
    text-shadow: 0 0 2px #000;
    font-size: 3em;
}

.headline-dark
{
    color: var(--white-color);
    text-shadow: 0 0 3px #AAA;
    font-size: 3em;
}


 .btn {
     padding-left: 1rem;
     padding-right: 1rem;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     display: inline-block;
     text-align: center;
     border: none;
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
 .btn-cta {
     background: var(--important-color);
     color: var(--important-contrast-color);
     --bs-btn-hover-bg: var(--important-hover-color);
     --bs-btn-hover-border-color: var(--important-color);
}
 .btn-decent {
     background: var(--light-2-color);
     color: var(--important-contrast-color);
     --bs-btn-hover-bg: var(--dark-2-color);
     --bs-btn-hover-border-color: var(--important-contrast-color);
}
 .btn-dark {
     background: var(--dark-color);
     color: var(--dark-contrast-color);
     --bs-btn-hover-bg: var(--dark-2-color);
     --bs-btn-hover-border-color: var(--white-contrast-color);
}
 .btn:hover {
     box-shadow: 3px 3px 4px 0px rgba(0,0,0,0.66);
     background: var(--btn-hover-bg);
     border-color: var(--btn-hover-bg);
     color: var(--light-contrast-color);
     cursor: pointer;
}

.btn.focused {
     box-shadow: 5px 0px 0px 0px rgba(0,0,80,.36);
     background: var(--btn-hover-bg);
     border-color: var(--btn-hover-bg);
     color: var(--light-contrast-color);
}


 .marker {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 4%,
    rgba(255, 225, 0, 0.3)
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
 }

 .marker.green {
  background-image: linear-gradient(
    to right,
    rgba(45, 225, 0, 0.1),
    rgba(45, 225, 0, 0.7) 4%,
    rgba(45, 225, 0, 0.3)
  );
 }

 .marker.blue {
  background-image: linear-gradient(
    to right,
    rgba(0, 45, 225, 0.1),
    rgba(0, 45, 225, 0.7) 4%,
    rgba(0, 45, 225, 0.3)
  );
 }


 .thumbnail {
     top:-50px;
     left:-35px;
     display:block;
     z-index:999;
     -webkit-transition-property: all;
     -webkit-transition-duration: 0.3s;
     -webkit-transition-timing-function: ease;
}

/*change the number below to scale to the appropriate size*/
 .thumbnail:hover {
     width: 100%;
     cursor: auto;
     transition: width 1.5s;
}
 .text-primary {
     color: var(--dark-color);
}
 .text-secondary {
     color: var(--dark-2-color);
}
 .text-inactive {
    color: gray;
}
 .text-on-dark {
    color: var(--dark-contrast-color);
 }
 .text-on-light {
    color: var(--light-contrast-color);
 }
 .text-black {
    color: black;
 }

 .text-big {
     font-size: 2vw !important;
}
 .text-large {
     font-size: 2.5vw !important;
}
 .text-huge {
     font-size: 4vw !important;
}
 .text-normal {
     font-size: 1.25vw;
     font-weight: 100 !important;
}
.text-small {
     font-size: 1vw !important;
}
 .text-bold {
     font-weight: bolder !important;
}
 .text-left {
     text-align:left;
}
 .text-right {
     text-align:right;
}
 .text-center {
     text-align: center !important;
}
 .text-justify {
     text-align: justify !important;
}
 .text-truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}
 .text-wrap {
     white-space: normal !important;
}
 .d-none {
     display: none !important;
}
 .d-block {
     display: block !important;
}
 .ml-5 {
     margin-left: 3rem !important;
}
 .mb-0 {
     margin-bottom: 0px !important;
}
 .mb-1 {
     margin-bottom: 0.5rem !important;
}
 .mb-2 {
     margin-bottom: 1rem !important;
}
 .mb-3 {
     margin-bottom: 1.5rem !important;
}
 .mb-5 {
     margin-bottom: 3rem !important;
}
 .mt-0 {
    margin-top:0px !important;
}
 .mt-2 {
    margin-top:1rem !important;
}

 .mt-3 {
     margin-top: 1.5rem !important;
}
 .mt-5 {
     margin-top: 2.5rem !important;
}
 .mx-0 {
    margin-left: 0;
    margin-right: 0;
 }
 .mx-a {
    margin-left: auto !important;
    margin-right: auto !important;
 }
 .my-0 {
    margin-top:0px !important;
    margin-bottom:0px !important;
 }
 .my-5 {
     margin-top: 3rem !important;
     margin-bottom: 3rem !important;
}
 .px-2 {
     padding-right: 1rem !important;
     padding-left: 1rem !important;
}
 .px-3 {
     padding-right: 1.5rem !important;
     padding-left: 1.5rem !important;
}
 .px-5 {
     padding-right: 3rem !important;
     padding-left: 3rem !important;
}
 .py-0 {
     padding-top: 0px !important;
     padding-bottom: 0px !important;
}
 .py-1 {
     padding-top: 0.5em !important;
     padding-bottom: 0.5em !important;
}
 .py-3 {
     padding-top: 1.5em !important;
     padding-bottom: 1.5em !important;
}
 .py-5 {
     padding-top: 2.5em !important;
     padding-bottom: 2.5em !important;
}
 .p-5 {
     padding: 2.5rem !important;
}
 .pt-3 {
     padding-top: 1.5em !important;
}
 .pt-5 {
     padding-top: 2.5em !important;
}
 .img-fluid {
     max-width: 95%;
     height: auto;
}
 .img-contained {
     max-width: 90%;
     object-fit: contain;
     display: block;
     margin: auto;
}
 .container {
     --bs-gutter-x: 1.5rem;
     --bs-gutter-y: 0;
     max-width: 100%;
     padding-right: 1.5rem;
     padding-left: 1.5rem;
     margin-right: auto;
     margin-left: auto;
}
 .row {
     display: flex;
     flex-wrap: wrap;
     max-width: 100%;
}
 .row > * {
     flex-shrink: 0;
     width: 100%;
     max-width: 100%;
     padding-right: calc(var(--bs-gutter-x) * 0.5);
     padding-left: calc(var(--bs-gutter-x) * 0.5);
     margin-top: var(--bs-gutter-y);
}
.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}
 .col {
     flex: 1 0 0%;
}
 .faq-table {
     text-align: left;
}
 .faq-table tbody tr td:first-child{
     vertical-align:top;
     font-weight: bold;
     font-size: 1.5em;
     padding-right: 1em;
     color: tan;
     padding-bottom: 2em;
}
 .faq-table tbody tr td:nth-child(2){
     vertical-align:top;
     color: slateGray;
}
 .scheme-dark-1 {
     background: var(--dark-color);
     color: var(--dark-contrast-color);
}
 .scheme-dark-2 {
     background: var(--dark-2-color);
     color: var(--dark-contrast-color);
}
 .scheme-dark-3 {
     background: var(--dark-2-color);
     color: var(--dark-contrast-color);
}
 .scheme-light-1 {
     background: var(--white-color);
     color: var(--light-contrast-color);
}
 .scheme-light-2 {
     background: var(--light-color);
     color: var(--light-contrast-color);
}
 .scheme-light-3 {
     background: var(--light-2-color);
     color: var(--dark-color);
}
 .scheme-light-4 {
     background: var(--light-2-color);
     color: var(--dark-2-color);
}
 .bg.important {
    background: var(--important-color);
 }
 .text.important {
    color: var(--important-color);
 }


 .shaded {
     box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
     border-radius:0.1em;
}

.story-card {
     margin: 1em;
     padding: 1em;
     border-radius: 0.2em;
     border: 1px solid var(--light-2-color);
     background: var(--white-color);
}

.reference-box {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 auto auto 0;
    text-align: center;
    display: block;
}

.reference-card {
    margin: 55px auto;
    padding-bottom: 0em;
    max-width: 80%;
    border: 1px solid var(--light-contrast-color);
    background: rgba(253,253,255,1);
    border-radius: 4px;
    box-shadow: 15px 15px 34px -7px rgba(0,0,0,0.41);
}

.reference-card > img {
    position: relative;
    top: -50px;
    left: 0;
    width: 100px;
    height: 100px;
    border: 0;
    margin-bottom: -40px;
    border-radius: 50%;
    box-shadow: 9px 11px 24px -7px rgba(0,0,0,0.41);
    filter: sepia(100%) hue-rotate(190deg) saturate(30%);
}
.reference-card > div {
    padding-top: 0;
    margin: 5px 1em 1em 1em;
}

.reference-card .quote {
    text-align: justify;
}
.reference-card .source {
    margin-top: 1em;
    font-weight: bold;
    text-align: right;
}
.reference-card .position {
    font-size: 0.8em;
    text-align: right;
    opacity: 0.5;
}


 .sub-heading {
     overflow-wrap: anywhere;
     font-size: 1.5em;
}

 .bordered-img {
     border: 0.6em solid var(--light-color);
     border-radius:50%;
     -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
     -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
     box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
.testimony-img {
    width: 150px;
    max-width: 80%;
    height: auto;
}

.benefit-box {
    width: 100%;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
}

.benefit-card {
    width: 150px;
    height: 150px;
    background: var(--light-2-color);
    margin: 1em  auto;
    display: flex;
    position: relative;
    text-align: center;
    border-radius: 50%;
    box-shadow: 15px 15px 34px -7px rgba(0,0,0,0.41);
}

.benefit-card > object {
    position: relative;
    height: 50px;
    top: 5px;
    left: 2px;
    margin-left: auto;
    margin-right: auto;
}

.benefit-card > .gain {
    color: var(--dark-color);
    width: 100%;
    position: absolute;
    font-weight: bold;
    left: 0;
    font-size:40px;
    bottom: 50px;
}

.benefit-card > .what {
    color: var(--light-contrast-color);
    width: 100%;
    font-size: 15px;
    position: absolute;
    left: 0;
    bottom: 35px;
    margin: 0;
}

.big-picture {
    text-align: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 80vw;
    max-height: 90vh;
}

.img-big-picture {
        max-height: 100%;
        max-width: 80%;
    }


 @media screen and (min-width:767px){
     .page-header {
         font-size: 10vw;
         padding: 100px 0 0 !important;
         width: 90%;
    }
     .faq-table tbody tr td:first-child{
         padding-right: 2em;
    }
     .col-md {
         flex: 1 0 0%;
    }
     .col-md-1 {
         flex: 0 0 auto;
         width: 8.33333333%;
    }
     .col-md-2 {
         flex: 0 0 auto;
         width: 16.66666667%;
    }
     .col-md-3 {
         flex: 0 0 auto;
         width: 25%;
    }
     .col-md-5 {
         flex: 0 0 auto;
         width: 41.66666667%;
    }
     .col-md-9 {
         flex: 0 0 auto;
         width: 75%;
    }
     .imessage {
         padding: 0.5rem 1.5rem;
    }
}
 @media screen and (min-width:1200px){
     .col-lg-3 {
         flex: 0 0 auto;
         width: 25%;
    }
     .story-card {
         width: 80%;
         margin-left: auto;
         margin-right: auto;
    }
     .imessage {
         width: 80%;
    }
}
 @media (min-width: 576px) {
     .d-sm-block {
         display: block !important;
    }
     .d-sm-none {
         display: none !important;
    }
  .col-sm {
    flex: 1 0 0%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
}