/*
Theme Name:     Shep Digital
Theme URI:      https://www.mahalomediagroup.com
Description:    Customizations to Salient Theme for Shep Digital
Author:         Mahalo Media Group
Author URI:     http://www.mahalomediagroup.com
Template:       salient                       
Version:        1.0
*/

.watch-video-overlay {
    display: none;
}

.watch-video-overlay video,
.watch-video-overlay .video-js {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
}
.watch-video-overlay .video-js {
padding-top: 56.25%;
}

.mfp-content .watch-video-overlay {
    display: block;
}

a.watch-video {
    display: flex;
    margin-top: 2rem;
    color: #fff !important;
    font-size: 2rem;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

a.watch-video:before {
    content: "\f144";
    font-family: "FontAwesome";
    position: relative;
    left: -1rem;
    top: 2px;
    font-size: 4rem;
}

.watch-video-overlay {
    background: #fff;
    border-radius: 20px;
    padding: 2rem;
}



#header-outer .menu-item-175 {
	display: none !important;
}

body.home .page-header-bg-image {
    background-position: -1px -2px !important;
}

body.home #page-header-wrap {
    margin-bottom: -3px;
}

#page-header-bg > div.container > div > div > div > span {
    max-width: 56rem;
    display: inline-block;
    line-height: 1.5 !important;
}

body {
    font-size: 16px !important;
}

body {
    background-color: #ccc !important;
}

body[data-header-color="dark"] #header-outer .sf-menu a {
    color: #2987e2 !important;
}

body[data-header-color="dark"] #header-outer {
    background-color: #fff !important;
}

body #header-outer, body[data-header-color="dark"] #header-outer {
    background-color: #fff !important;
}

body[data-header-color="dark"] #header-outer .starting-logo.dark-version.default-logo {
    opacity: 1 !important;
}

#header-outer[data-lhe="animated_underline"] #top nav > ul > li > a .menu-title-text:after {
    border-color: #2987e2 !important;
}

#wave-1 {
    position: relative;
    color: #fff;
    /**/
    /*z-index: 999;*/
    /*padding: 0 1rem;*/
    padding: 4rem 0 !important;
}

#what-we-do {
    margin-top: 5rem !important;
}

@media(min-width: 1663px) and (max-width: 1921px) {
    #wave-1 {
        /*height: 33vw;*/
        height: 633px;
        /*padding: 0 !important;*/
        top: -233px;
    }

    #wave-1 + div {
        margin-top: -233px !important;
    }

    #wave-1 .row-bg-wrap {
        background: url('wave/wave.svg') !important;
        background-repeat: no-repeat !important;
    }

    #wave-1 .vc_column-inner {
        /*padding-top: 9vw;*/
        padding-top: 172px;
    }
}

#wave-1 p {
    font-size: 20px;
    max-width: 53rem;
    margin: 0 auto;
}

/*#wave-1 .nectar-button {
    margin: 0 auto !important;
    display: block;
    width: 400px;
    padding: 30px 0 !important;
    line-height: 1 !important;
    text-align: center;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    background-color: white !important;
    color: black !important;
    font-family: "Exo 2" !important;
    font-size: 30px;
}*/
#wave-1 .nectar-button {
    margin: 0 auto !important;
    display: block;
    max-width: 211px;
    padding: 20px 0 !important;
    line-height: 1 !important;
    text-align: center;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    background-color: white !important;
    color: black !important;
    font-family: "Exo 2" !important;
    font-size: 20px;
    margin-top: 4rem !important;
}

#wave-1 .row-bg-wrap {
    background: linear-gradient(174deg, #2B89DB -21.72%, #4EA569 121.59%);
    background-color: blue;
    background-size: contain;
    background-repeat: no-repeat;
}

@media(min-width: 1333px) {
    #what-we-do {
        background-image: url('images/what-we-do-background.svg');
        background-size: 100% auto;
        background-repeat: no-repeat;
        height: 603px;
        background-position: center bottom;
    }
}

#what-we-do h2 {
    margin-bottom: 2rem;
}

#what-we-do p {
    max-width: 544px;
    text-align: left !important;
    margin: 0 auto;
    margin-bottom: 4rem;
}

#what-we-do .nectar-button {
    margin: 0 auto !important;
    display: block;
    width: 300px;
    padding: 20px 0 !important;
    line-height: 1 !important;
    text-align: center;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    font-family: "Exo 2" !important;
    font-size: 20px;
}

#footer-outer {
    background: linear-gradient(190deg, #2B89DB 8.28%, #4EA569 92.59%);
    min-height: 583px;
    z-index: 999;
    background-color: transparent;
    color: #fff !important;
    /*margin-top: -100px;*/
}

#footer-widgets .widget_nav_menu li.menu-item > a:hover {
    color: #ccc !important;
}

@media(min-width: 900px) {
    #footer-outer {
        background-image: url('footer-background.svg');
        background-position: 0px 1px;
        background-size: 100%;
        background-repeat: no-repeat;
        padding-top: 200px;
    }
}

#footer-outer .wp-block-social-links li {
    background: transparent;
}

#footer-outer .wp-block-social-links li:hover svg {
    color: #ddd;
}

#footer-outer .row {
    display: flex;
    flex-wrap: wrap;
}

#footer-widgets .col {
    width: 100%;
    margin-left: 0 !important;
}

@media(min-width: 900px) and (max-width: 1199px) {
    #footer-widgets .col, #footer-outer .one-fourths.span_3 {
        width: calc(50% - 2rem) !important;
        margin-right: 2rem !important;
    }

    #footer-widgets .col:last-child {
        margin-right: 0 !important
    }
}

@media(min-width: 1200px) {
    #footer-widgets .col {
        width: calc(25% - 2rem) !important;
        margin-right: 2rem !important;
    }

    #footer-widgets .col:last-child {
        margin-right: 0 !important
    }
}

#footer-outer #copyright {
    color: #fff;
}

#footer-outer #copyright .col {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
}

#footer-outer .row .col {
    margin-bottom: 2rem;
}

#footer-outer .row .col:nth-child(2) {
    height: 100%;
    align-self: flex-end;
    margin-left: 4rem;
}

#footer-widgets .col:nth-child(3) {
    display: none !important;
}

@media(min-width: 1200px) {
    #footer-widgets .col:nth-child(4) {
        margin-left: auto !important;
    }
}

@media(min-width: 900px) {
    /*.top-wave-white .row-bg-wrap {
        background-image: url("./top-wave-white.svg");
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 1920px;
        top: calc(-136px);
        height: calc(136px);
    }*/
    .top-wave-white .row-bg-wrap {
        background-image: url("./top-wave-white.svg");
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
        top: calc(-7.1vw);
        height: calc(9vw);
    }
}

@media(min-width: 1000px) {
    #lets-work-together-form {
        width: 70%;
        margin: 80px auto 0 auto;
    }

    #lets-work-together-form .row {
        text-align: center;
        display: flex;
    }
}

#lets-work-together-form h2, #lets-work-together-form p {
    text-align: center;
}

#lets-work-together-form h2 {
    font-size: 40px;
    color: #000;
    line-height: 1.25;
    margin-bottom: 1rem;
}

#lets-work-together-form input[type="submit"] {
    display: block;
    margin: 0 auto;
    background-color: #3787E2 ;
    text-transform: uppercase;
    border-radius: 2rem !important;
    padding-left: 4rem !important;
    padding-right: 4rem !important;
    font-size: 1.2rem;
}

.wpb_row.full-width-section.team-member {
    padding-top: 5rem !important;
}

.wpb_row.full-width-section.team-member, .team-member {
    margin-bottom: 5rem !important;
}

.team-member img {
    display: block;
    margin: 0 auto;
    height: 240px !important;
    width: auto;
}

.team-member h2, .team-member h3 {
    line-height: 1;
    color: #3787E2
}

.team-member h3 {
    font-size: 1rem;
    margin-bottom: 1rem !important;
}

/* what we do */
.what-we-do-template-default .heading-title {
    display: none;
}

.what-we-do-template-default h1 {
    color: #3787e2;
    font-weight: 800;
}

#infographic .wpb_row {
    margin-bottom: 5rem !important;
}

#infographic {
    width: 80%;
    margin: 0 auto;
}

.what-we-do-template-default .infographic {
    /*width: 900px;*/
    max-width: 875px;
    margin: 0 auto;
}

.infographic > .span_12 > .vc_column_container > .vc_column-inner > .wpb_wrapper > .wpb_row {
    margin-bottom: 5rem;
}

.infographic img {
    max-width: 300px !important;
}

@media(max-width: 999px) {
    .infographic img {
        margin: 0 auto;
    }

    .infographic h1 {
        margin: 0 auto !important;
        text-align: center !important;
    }

    .infographic p {
        text-align: center;
    }

    .infographic > .span_12 > .vc_column_container > .vc_column-inner > .wpb_wrapper > .wpb_row:nth-child(2) > .col > .col:nth-child(1) {
        order: 1;
    }

    .infographic > .span_12 > .vc_column_container > .vc_column-inner > .wpb_wrapper > .wpb_row:nth-child(2) > .col > .col:nth-child(2) {
        order: 0;
        margin-bottom: 5rem;
    }
}

#page-header-bg {
    /*background: linear-gradient(150.49deg, #2B89DB 8.28%, #4EA569 92.59%);*/
    background: linear-gradient(190deg, #4EA569 8.28%, #2B89DB 92.59%);
}

body.home #page-header-bg, body.page-id-7 #page-header-bg {
    background: #fff !important;
}

.what-we-do-template-default #page-header-bg {
    text-align: center;
}

.what-we-do-template-default #page-header-bg .container {
    margin-top: -4rem;
}

#what-we-do-nav ul {
    position: relative;
    z-index: 99999;
    list-style: none;
    margin: 0;
}

#what-we-do-nav ul li {
    list-style: none;
}



#what-we-do-nav ul li a {
    color: #000;
    font-weight: bold;
    font-size: 1.2rem;
    display: block;
}


#what-we-do-nav ul li.active:before {
    content: "\f054";
    font-family: "FontAwesome";
    color: #3787e2;
    position: absolute;
    left: -18px;
    top: 0;
    font-size: 1rem;
}


#what-we-do-nav ul li {
        position: relative;
        margin-bottom: 0.5rem;
    }

@media(min-width: 1000px) {
    

    #what-we-do-nav ul {
        display: flex;
        justify-content: space-between;
    }

    #what-we-do-nav ul li {
        width: 7.8rem;
        margin-bottom: 0;
    }

    #what-we-do-nav ul li.active:before {
        content: '';
        width: 30px;
        height: 30px;
        background-image: url("./images/chevron-right.svg");
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        left: -5rem;
        top: 0.5rem;
        font-size: 2rem;
    }

    #what-we-do-nav ul li.active a {
        color: #3787e2;
    }
}

#top .col.span_9 {
    margin-left: 0 !important;
}

img[src$="marketing-automation-icon-1b.svg"] {
    height: 150px !important;
}

img[src$="content-procurement-icon-1.svg"] {
    width: 170px !important;
}

img[src$="content-procurement-icon-2.svg"] {
    height: 200px !important;
}

#footer-widgets .col {
    align-self: flex-end;
}


@media only screen and (min-width: 1px) and (max-width: 999px) {
    #header-outer[data-transparent-header="true"][data-permanent-transparent="false"] #logo .dark-version, #header-outer #top #logo img {
        height: 40px !important;
    }
}

#intro-overlay {
    background: #fff;
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    
    margin: 0 auto;
}

#intro-overlay h1 {
    color: #3787E2;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: bold;

}

#intro-overlay img {
    margin-bottom: 2rem;
    max-width: 100%;
}

#intro-overlay p {
    color: #000;
    font-size: 14px;
    margin: 0 auto;
}

@media(min-width: 999px) {
    #intro-overlay img, #intro-overlay p {
        max-width: 487px;
    }
}



@media(min-width: 999px) {

    #intro-overlay h1 {
        font-size: 44px;
    }

}

#intro-overlay .home-overlay-btn {
    background-color: #2987E2;
    display: inline-block;
    padding: 1rem 4rem;
    color: #fff;
    border-radius: 1rem;
    cursor: pointer;

}

ul.wp-block-social-links svg {
    width: 40px !important;
    height: 40px !important;
}


