/**
 * @file
 * Landing Pages styles.
 */

:root {
    --color-gray: #040404E5;
    --color-blue: #3D88E8;

    --mobile-md: 480px;
    --mobile-lg: 640px;
    --tablet-sm: 760px;
    --tablet-md: 840px;
    --tablet-lg: 960px;
    --desktop-md: 1180px;
    --desktop-lg: 1400px;
    --mobile-bleed: 15px;
    --tablet-bleed: 30px;
    --tablet-lg-bleed: 40px;

    --mobile-padding: 21px;
    --tablet-padding: 30px;
    --tablet-lg-padding: 40px;
    --desktop-padding: 90px;


}

body.node-type-landing-pages #page-header{
    background: var(--color-gray) !important;
    font-family: 'Open Sans', Arial, sans;
      /* Safari */
  position: sticky;
  top: 0;
  z-index: 10;
}
body.node-type-landing-pages #page-navbar{
    /*background: transparent;*/
}
body.node-type-landing-pages #user-compact{
    display: none;
}
@media (max-width: 1199px){
    body.node-type-landing-pages #page-header .uk-navbar-left{
        width: 100%;
        justify-content: space-between;
    }
    body.node-type-landing-pages #page-header .uk-navbar-toggle{
        order: 2;
    }
    body.node-type-landing-pages #page-header .uk-navbar-right{
        display: none;
    }
}

.landing-pages-container{
    font-family: 'Open Sans', Arial, sans;
    margin-left: -15px;
    margin-right: -15px;
}
.landing-pages-container h1, .landing-pages-container h2,
.landing-pages-container h3, .landing-pages-container h4{
    font-family: 'Open Sans', Arial, sans;
}
@media (min-width: 640px){
    .landing-pages-container{
        margin-left: -30px;
        margin-right: -30px;
    }
}
@media (min-width: 960px){
    .landing-pages-container{
        margin-left: -40px;
        margin-right: -40px;
    }
}

/* STYLE: banner */
.banner {
    background: #666 center no-repeat;
    background-size: cover;
     /* height: 537px; */
    padding: 120px 15px;
    display: grid;
    grid-gap: 50px;
    padding-bottom: 0;
}
.banner h1,
.banner h5 {
    color: white;
 }
.banner h1 {
    font-weight: 600;
    font-size: 36px;
    line-height: 49.03px;
}
.banner h5 {
    font-size: 15px;
    line-height: 20px;
}
.banner .banner-cta {
    font-style: normal;
    font-weight: bold;
    font-size: 21px;
    line-height: 38px;
    background: #3D88E8;
    color: white;
    display: block;
    padding: 6px 25px;
    border-radius: 6px;
    text-align: center;
}
.banner .banner-cta:hover{
    text-decoration: none;
}
.banner .need-assessment-header {
    font-size: 23px!important;
    background: #ececec;
    color: black;
}
.banner .need-assessment-footer {
    font-size: 8px;
}
.banner .need-assessment-footer h3{
  font-size: 1em;
  line-height: 1;
  color: #000000;
  margin-bottom: 2px;
}
.banner .need-assessment-fields {
    margin: 20px!important;
}
.banner .form-submit {
    font-size: 20px;
    line-height: 1.2;
    padding: 7px 3px;
}
.banner .uk-form-width-large {
    width: 100%!important;
}
.banner .need-assessment-content {
    background: #ececec!important;
}
.banner .uk-form-stacked {
    margin-left: -15px;
    margin-right: -15px;
}
@media(min-width: 640px) {
    .banner {
        padding-left: 30px;

    }
    .banner .banner-cta {
        display: inline-block;
    }
    .banner .uk-form-stacked {
        margin-left: -30px;
    }
}
@media(min-width: 768px) {
    .banner {
        padding: 120px 60px;
        grid-template-columns: auto 35%;
    }
    .banner .need-assessment-header {
        background: #000000b0;
        color: white;
    }
    .banner .need-assessment-content {
        background: white!important;
    }
    .banner .uk-form-stacked {
        margin-left: 0;
        margin-right: 0;
    }
}
@media(min-width: 960px) {
    .banner {
        padding: 165px 90px;
    }
    .banner h1 {
        font-weight: 600;
        font-size: 62px;
        line-height: 84.43px;
    }
    .banner h5 {
        font-size: 32px;
        line-height: 43.58px;
    }
    .banner .banner-cta {
        padding: 11px 15px;
    }
}
/* END STYLE: banner */

/* STYLE: location */
.location {
    grid-gap: 35px;
}
.location iframe, .location .map {
    width: 100%;
}
.location .icon-location {
    margin-bottom: 13px;
}
.location .gmap_canvas,
.location .mapouter {
    width: 100%;
}
.location .address {
    padding: 0 15px;
    padding-top: 30px;
}
.location h3,
.location h2 {
    font-size: 24px;
    line-height: 33px;
    color: #3D88E8;
    margin: 0;
}
.location h3 {
    font-weight: 400;
}
.location h2 {
    font-weight: 700;
}
.location ul {
    list-style: unset;
    padding-left: 0;
}
.location svg {
    margin-right: 15px;
}
.location li {
    margin-bottom: 25px;
    position: relative;
}
.location p, .location li {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 22px;
    color: #000000;
}
.location li span {
    margin-left: 40px;
    display: block;
    line-height: 1.5;
}
.location .item-list .icon {
    position: absolute;
}
.location .hours-icon, .location .item-hour {
    display: flex;
}
.location .list {
    margin-left: 20px;
}
.location .list b {
    font-weight: 400;
}
.location .list p {
    margin-top: 0;
    margin-bottom: 10px;
}
/* @media(min-width: 768px) {
    .location .map {
        margin-right: -30px;
        margin-left: -30px;
    }
} */
@media(min-width: 640px) {
    .location {
    }
    .location .address {
        padding: 0 30px;
        padding-top: 30px;
    }
    .location p, .location li {
        font-size: 16px;
    }
}
@media(min-width: 768px) {
    .location {
        display: grid;
        grid-template-columns: 1fr 50%;
    }
    .location h3,
    .location h2 {
        font-size: 28px;
        line-height: 38px;
    }
}
@media(min-width: 960px) {
    .location .map {
        margin: 0;
    }
    .location .address {
        padding: 0 30px;
        padding-top: 30px;
    }
    .location .address{
        padding: 30px 0;
        padding-left: 90px;
    }
}
/* END STYLE: location */

/* STYLE: Explore Our Assessments */
.our-assessments{
    padding: 70px var(--mobile-padding);
    background: #0000000A;
}
.our-assessments h2{
    color: var(--color-blue);
    text-align: center;
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: 600;
}
.our-assessments .assessments{
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
}
.our-assessments .assessment{
    position: relative;
    overflow: hidden;
    background: #FFF;
    border: 2px solid #F1F1F1;
    box-shadow: 0px 0px 0px rgba(0, 41, 255, 0.13);
    border-radius: 8px;
    padding: 21px 38px;
    transition: background-color 0.3s;
}
.our-assessments .assessment-icon{
    position: absolute;
    background: transparent center no-repeat;
    background-size: contain;
    width: 64px;
    height: 64px;
    top: 21px;
    left: 38px;
    transition: opacity 0.4s;
}
.our-assessments .assessment .content{
    position: relative;
    margin-top: 74px;
    transition: transform 0.3s;
}
.our-assessments .assessment h4{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}
.our-assessments .assessment p{
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.4;
    transition: opacity 0.3s;
}
.our-assessments .assessment-cta{
    text-decoration: none;
    color: var(--color-blue);
    display: inline-block;
    padding: 7px 0;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid #FFF0;
    transition: border 0.3s, opacity 0.3s;
}
.our-assessments .assessment-cta:hover{
    border-bottom: 1px solid var(--color-blue);
}
.our-assessments .text-content{
    max-width: 800px;
    margin: 70px auto 0;
    font-size: 18px;
    line-height: 1.4;
}

@media (min-width: 760px){
    .our-assessments{
        padding: 70px var(--tablet-padding);
    }
    .our-assessments h2{
        font-size: 36px;
    }
    .our-assessments .assessments{
        grid-template-columns: 1fr 1fr;
    }
    .our-assessments .assessment-icon{
        top: 77px;
        opacity: 1;
    }
    .our-assessments .assessment .content{
        margin-top: 24px;
        transform: translateY(110px);
    }
    .our-assessments .assessment p,
    .our-assessments .assessment .assessment-cta{
        opacity: 0;
    }

    .our-assessments .assessment:hover{
        background: #e7effe;
    }
    .our-assessments .assessment:hover .assessment-icon{
        opacity: 0;
    }
    .our-assessments .assessment:hover .content{
        transform: translateY(0px);
    }
    .our-assessments .assessment:hover p,
    .our-assessments .assessment:hover .assessment-cta{
        opacity: 1;
    }
}
@media (min-width: 1180px){
    .our-assessments .assessments{
        grid-template-columns: 1fr 1fr 1fr;
    }
}
/* END STYLE: Explore Our Assessments */

/* STYLE: Why ND */
.why-nd{
    padding: 70px var(--mobile-padding);
}
.why-nd h2{
    color: var(--color-blue);
    text-align: center;
    font-size: 24px;
    margin-bottom: 50px;
    font-weight: 600;
}
.why-nd h2.alt{
    color: #000;
}
.why-nd .boxes{
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: center;
}

.why-nd .box-icon{
    background: transparent center no-repeat;
    background-size: contain;
    display: inline-block;
    width: 82px;
    height: 82px;
    margin-bottom: 20px;
}
.why-nd .box h4{
    font-weight: 700;
    font-size: 23px;
    line-height: 31px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 15px;
}
.why-nd .box p{
    margin: 0 auto 30px auto;
    font-size: 18px;
    line-height: 1.4;
    max-width: 550px;
}

@media (min-width: 1180px){
    .why-nd{
        padding: 70px var(--tablet-padding) 100px;
    }
    .why-nd h2{
        font-size: 36px;
    }
    .why-nd .boxes{
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 0;
    }
    .why-nd .box{
        padding: 0 40px;
    }
    .why-nd .box-icon{
    }
    .why-nd .box p{
        margin-bottom: 10px;
        font-weight: 400;
        font-size: 18px;
        line-height: 25px;
        text-align: center;
    }
    .why-nd .boxes .box:nth-child(3n + 2){
        border-left: 1px solid #dedede;
        border-right: 1px solid #dedede;
    }
}
@media (min-width: 1400px){
    .why-nd .box{
        padding: 0 66px;
    }
}
/* END STYLE: Why ND */

/* STYLE: video */
.video {
    background-color: rgba(0, 178, 255, 0.05);
    padding-bottom: 0;
    align-items: center;
    padding: 30px 15px 0 15px;
}
.video h2 {
    font-weight: 600;
    font-size: 24px;
    line-height: 33px;
    color: #3D88E8;
}
.video .text {
    margin-bottom: 35px;
}
.video p {
    font-size: 16px;
    line-height: 22px;
    color: #000000;
}
.video p:last-child {
    margin-bottom: 0;
}
.video .right-side {
    filter: drop-shadow(0 px 22 px 57 px rgba(1, 45, 118, 0.28));
}
@media(min-width: 640px) {
    .video {
        padding: 70px  var(--tablet-bleed);
        padding-bottom: 0;
    }
    .video h2 {
        font-size: 34px;
        line-height: 46px;
    }
}
@media(min-width: 960px) {
    .video {
        padding: 70px 90px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 60px;
    }
    .video h2 {
        margin-bottom: 10px;
    }
    .video .text {
        margin-bottom: 0;
    }
}
/* END STYLE: video */

/* STYLE: FAQ */
.faq {
    background: rgba(0, 178, 255, 0.05);
    padding: 80px 15px 40px 15px;
    margin-bottom: 30px;
}
.faq .accordion {
    border-bottom: 1px solid #DEDEDE;
}
.faq .accordion.active h4 {
    color: #3D88E8;
}
.faq .accordion.active .icon-toggle {
    border-color: #3D88E8;
}
.faq .accordion.active .icon-cross {
    transform: rotate(45deg);
}
.faq .accordion.active .icon-cross path {
    stroke: #3D88E8;
}
.faq .accordion-header {
    padding-bottom: 25px;
    padding-top: 25px;
    position: relative;
    padding-right: 45px;
    cursor: pointer;
}
.faq .icon-toggle {
    position: absolute;
    right: 0;
    border: 2px solid;
    border-radius: 50%;
    padding: 5px 6px;
    top: 50%;
    transform: translateY(-50%);
}
.faq .icon-cross {
    transition: transform .3s ease-out;
}
.faq .accordion-content {
    display: none;
}
.faq h2 {
    font-weight: 600;
    font-size: 34px;
    line-height: 46px;
    color: #000000;
}

.faq h4 {
    font-weight: bold;
    font-size: 16px;
    line-height: 27px;
    color: #000000;
    margin-bottom: 0;
    transition: transform .3s ease-out;
}
.faq p {
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
}
@media(min-width: 640px) {
    .faq {
        padding: 60px  var(--tablet-bleed);
    }
    .faq h2 {
        font-size: 34px;
        line-height: 46px;
    }

    .faq h4 {
        font-size: 20px;
        line-height: 27px;
    }
    .faq p {
        font-size: 16px;
        line-height: 22px;
    }
}
@media(min-width: 960px) {
    .faq {
        padding: 60px 90px;
    }
}
/* END STYLE: FAQ */

/* STYLE: Footer Banner */
.footer-banner {
    background: linear-gradient(91.76deg, #0D79C8 5.78%, #07375A 96.79%);
    padding: 30px 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    align-items: center;
    overflow: hidden;
    text-align: center;
}
.footer-banner h3 {
    font-style: normal;
    font-weight: 600;
    color: #FFFFFF;
    font-size: 24px;
    line-height: 33px;
    margin-bottom: 60px;
}
.footer-banner .footer-banner-cta {
    border: 2px solid #FFFFFF;
    border-radius: 8px;
    font-style: normal;
    font-weight: bold;
    font-size: 21px;
    line-height: 38px;
    color: #FFFFFF;
    padding: 9px 35px;
    display: inline-block;
    margin: 0 auto;
}
.footer-banner .footer-banner-cta:hover{
    text-decoration: none;
}
.footer-banner .icon-top {
    display: none;
    position: absolute;
    top: -99px;
    left: -20px;
}
.footer-banner .icon-bottom {
    display: none;
    position: absolute;
    bottom: -8px;
    left: -27px;
}
@media(min-width: 640px) {
    .footer-banner {
        padding: 60px var(--tablet-bleed);
        text-align: left;
    }
    .footer-banner .footer-banner-cta {
        margin: 0;
    }

}
@media(min-width: 960px) {
    .footer-banner {
        padding: 80px 90px;
    }
    .footer-banner h3 {
        font-size: 34px;
        line-height: 46px;
        font-weight:600px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .footer-banner .icon-top {
        display: block;
    }
    .footer-banner .icon-bottom {
        display: block;
    }
}

@media(min-width: 1180px) {
    .footer-banner h3 {
        flex: 0 1 70%;
    }
}
/* END STYLE: Footer Banner */

/* STYLE: Footnote */

.footnote-container{
    margin: 50px auto 30px;
    text-align: center;
    font-size: 14px;
    width: 80%;
    max-width: 800px;
}
.footnote-container .text{
}

/* END STYLE: Footnote */

/* STYLE: Get Assesment - 2 cols */
.get-assessment{
    padding: 50px var(--mobile-padding);
}
.get-assessment h2{
    color: #000;
    text-align: center;
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: 600;
}
.get-assessment .left-side{
    font-size: 16px;
    margin-bottom: 30px;
}
.get-assessment .left-side ul{
    padding-left: 0;
    list-style: none;
}
.get-assessment .left-side  li{
    position: relative;
    padding-left: 30px;
    list-style: none;
	background-image: url("/sites/all/themes/custom/ndsbs/css/images/check_mark.svg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 22px;
}

.get-assessment .left-side li p {
  margin-bottom: 0;
}
.get-assessment .right-side{
    background: #F5F5F5;
    padding: 14px;
}
.get-assessment .right-side h3 {
    color: #FF9212;
}
.get-assessment .right-side h3, .get-assessment .right-side h4{
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: 700;
}
.get-assessment .right-side .item-list{
    padding-left: 0;
    list-style: none;
}
.get-assessment .right-side .item-list li{
    position: relative;
    padding-left: 60px;
    min-height: 60px;
    margin-bottom: 20px;
    list-style: none;
	background-image: url("/sites/all/themes/custom/ndsbs/css/images/check_mark.svg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 40px;
}
.get-assessment .right-side .item-list li svg{
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: auto;
}

@media (min-width: 640px){
    .get-assessment{
        padding: 30px var(--tablet-padding);
    }
    .get-assessment h2{
        font-size: 36px;
    }
}
@media (min-width: 960px){
    .get-assessment{
        padding: 30px 0;
    }
    .get-assessment h2{
        padding: 0px var(--desktop-padding);
    }
    .get-assessment .columns{
        display: grid;
        grid-template-columns: 50% 50%;
    }
    .get-assessment .left-side{
        padding: 10px 50px 10px var(--desktop-padding);
        font-weight: 400;
        font-size: 20px;
        line-height: 30px;
    }
    .get-assessment .right-side{
        padding: 30px var(--desktop-padding) 20px 50px;
    }
}

@media (min-width: 1140px){
    .get-assessment .left-side{
        padding: 10px var(--desktop-padding);
        font-weight: 400;
        font-size: 20px;
        line-height: 30px;
    }
    .get-assessment .right-side{
        padding: 30px var(--desktop-padding) 20px;
    }
    .get-assessment .right-side h3{
        font-weight: 700;
        font-size: 27px;
        line-height: 37px;
    }
    .get-assessment .right-side h4{
        font-weight: 700;
        font-size: 22px;
        line-height: 30px;
    }
    .get-assessment .right-side .item-list li{
        font-weight: 400;
        font-size: 22px;
        line-height: 30px;
    }
}
/* END STYLE: Get Assesment - 2 cols */

/* STYLE: Location List */
.location-list{
    padding-top: 30px;
    background: rgba(0, 178, 255, 0.05);
}
.location-list h2{
    color: #000;
    text-align: center;
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 600;
}
.location-list h3{
    margin: 0 0 30px;
    font-size: 24px;
    font-weight: 400;
}
.location-list h4{
    font-weight: bold;
    font-size: 24px;
    margin: 0 0 30px;
}
.location-list .list-container{
    padding: 0 var(--mobile-padding);
}
.location-list .list-container .main-icon{
    margin-bottom: 10px;
}
.location-list .locations{
    overflow-y: scroll;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    /* max-height: 280px; */
}
.location-list .locations::-webkit-scrollbar {
    /* WebKit */
    width: 0;
    height: 0;
}
.location-list .location-item{
    border: 2px solid var(--color-blue);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.location-list .location-info{
    font-size: 14px;
}
.location-list .location-info .extra-info-cols{
    display: grid;
    grid-template-columns: 40px 1fr;
}
.location-list .location-info .location-name{
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 10px;
}
.location-list .location-info .location-address{
    margin-bottom: 15px;
}
.location-list .location-info .location-phone{
    margin-bottom: 15px;
}

.location-list .location-info .hours-icon .list-label{
    margin-bottom: 15px;
}

.location-list .location-info .extra-info{
    display: none;
}

.location-list .location-info .location-hours p{
    margin-bottom: 6px;
}
.location-list .location-info .location-hours *+p{
    margin-top: 0;
}

/* listying styles */
.location-text .location-info .location-name{
    cursor: pointer;
    font-weight: bold;
}
.location-text .location-info .location-name:hover{
    color: var(--color-blue);
}

/* popup styles  */
.gm-style .gm-style-iw .location-popup-info{
    font-family: 'Open Sans', Arial, sans;
    font-weight: 400;
}
.location-popup-info .location-info .extra-info{
    display: block;
}

.location-list .map {
    z-index: -1;
}

.location-list #locations-map{
    height: 360px;
}

.location .caption-location-list {
    width: 100%;
    display:flex;
    margin-top: 20px;
}

.location .caption-location-list ul {
    width: 65%;
    margin-right: 40px;
}

.location .caption-location-list .location-image {
    width: 40%;
}

@media (max-width: 639px){
    .location .caption-location-list {
        margin-bottom: 20px;
    }
}

@media (min-width: 640px){
    .location-list .list-container{
        padding: 0 var(--tablet-padding);
    }
    .location-list h2{
        font-size: 36px;
    }
}

@media (min-width: 760px){
    .location-popup-info .location-info .hours-icon{
        display: grid;
        grid-template-columns: 122px 1fr;
    }
}
@media (min-width: 960px){
    .location-list{
        padding-top: 40px;
        padding-bottom: 50px;
    }
    .location-list > .columns{
        display: grid;
        grid-template-columns: 50% 50%;
    }
    .location-list .list-container{
        padding: 0 30px 0 var(--desktop-padding);
    }
    .location-list h2{
        margin-bottom: 30px;
    }
    .location-list .locations{
        max-height: 450px;
    }
    .location-list #locations-map{
        height: 100%;
    }
}
@media (min-width: 1180px){
    .location-list h3{
        font-weight: 400;
        font-size: 28px;
        line-height: 38px;
    }
    .location-list .location-name{
        font-weight: 700;
        font-size: 22px;
        line-height: 30px;
    }
    .location-list .location-address{
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
    }
    .location-list .list-container{
        padding: 0 var(--desktop-padding);
    }


}
/* END STYLE: Location List */


/* Style footer menu */
@media (max-width: 639px){
    .node-type-landing-page-tpl2 #footer-menu{
        text-align: center;
        margin-bottom: 20px;
    }
    .node-type-landing-page-tpl2 #footer-menu .leaf{
        width: 100%;
        letter-spacing: 0.145em;
        padding-left: 0px;
        line-height: 38px;
    }
    .node-type-landing-page-tpl2 #block-bdg-ndsbs-ndsbs-copyright {
        width: 100% !important;
        margin-left: 0px;
    }
}