/*!
 * Start Bootstrap - Modern Business (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
/* Global Styles */

html,
body {
    height: 100%;
}

body {
    padding-top: 0px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 2px; /* to force **retraction** rather than expansion which messes up slow connected devices */
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
}

h4 {
    font-weight: 300;
}

a {
    cursor: pointer;
    cursor: hand;

}

p a, li a, p b, li b, .alert-warning a {
    font-weight: 600;
}


p, li {
    font-size: 22px;
    font-weight: 300;
}

p {
  margin-bottom: 20px;
}

section {
    padding-top: 50px;
    padding-bottom: 50px;
}

.alert-warning {
    padding: 12px 0 12px 0;
}

.panel-default {
    padding: 0;
}

.panel-default>.panel-heading {
    background-color: #e5ecf1;
}

.panel-body {
    font-size: 16px;
}

/* this was an attempt to fade out when bio was long, but meh.
.panel-body::after {
    content: '';
    position: absolute;
    bottom: 21px;
    width: 83%;
    height: 31px;
    background: -webkit-linear-gradient(
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 100%
    );
    background-image: -moz-linear-gradient(
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 100%
    );
}
*/

.img-portfolio {
    margin-bottom: 30px;
}

.img-border {
    border: solid 1px #cfd5da;
}

.img-hover:hover {
    opacity: 0.8;
}

img {
    border-radius: 3px;
}

nav.navbar {
    background-color: white;
    border-bottom: #ddd 1px solid;
}

a:link, a:visited, a:hover, a:active, a span {
    color: rgb(7, 59, 94);
    font-weight: 500;
    text-decoration: none;
}
a.btn:link, a.btn:visited, a.btn:hover, a.btn:active, a.btn span {
    color: white;
}
a i.fa:link, a i.fa:visited, a i.fa:hover, a i.fa:active, a i.fa {
    color: rgb(212, 60, 116);
}

ul.navbar-nav li a {
    font-weight: bold;
    font-size: 14px;
}

button.navbar-toggle {
    border: solid 1px #e5ecf1;
}

span.icon-bar {
    background-color: #e5ecf1;
}

/* Customize the text color and shadow color and to optimize text legibility. */

.container>.navbar-collapse, .container>.navbar-header {
    margin-right: 0;
    margin-left: -15px;
}

.tagline {
    text-shadow: 0 0 10px #000;
    color: #fff;
    font-family: "Open Sans", sans-serif;
}

h1.tagline {
    margin-top: 20px;
    margin-bottom: 20px;
}

.btn-success {
    background-color: rgb(7, 59, 94);
    color: white;
    border: none;
}
.nav>li>a.btn-success:hover {
    background-color: #429be8;
    border: none;
}

#tagline-box {
    background-color: rgba(10, 10, 10, 0.6);
    margin: auto;
    padding: 10px;
    border-radius: 3px;
}

section.policy-content li {
    font-size: 22px;
    font-weight: 300;
}

section.covid-banner {
    background-color:  #e5ecf1; /*#eee; */
    padding: 2px 10px 2px 10px;
}

/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */

.business-header {
    min-height: 400px;
    background: url('../img/night-city.jpg') center center no-repeat scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: top;
    text-align: center;
    padding-top: 86px;

}
.business-header .stripe {
    background-color:rgba(6,18,30,0.7);
    padding: 17px 0 9px 0;

}
.business-header h1 {
    margin: 0;
    font-size: 30px;
    color: white;

}
.business-header h1 .save {
    color: rgb(212, 60, 116)
}

.business-header h2 {
    margin-bottom: 0px;
    color: white; /* color: rgb(7, 59, 94); /* white; */
    font-size: 80px;

    line-height: 1.1;
}

.business-header p {
    font-size: 18px;
    color: white;
}

header.business-header {
    position: relative;
}
.business-header div.photocredit {
    position: absolute;
    bottom: 5px;
    right: 25px;
    font-size: 8px;

}
.photocredit, .photocredit a {
    color: rgba(255,255,255,0.4)
}

@media only screen and (max-device-width: 375px) {
    .business-header {
        min-height: 250px;
    }
}

section.customer-logos {
    padding: 0;
    visibility: hidden;
}
section.customer-logos.slick-initialized {
    visibility: visible;
}

section.nutshell {
    background-color:  #e5ecf1; /*#eee; /* #e5ecf1;*/
}

section.nutshell hr {
    border-top: 1px solid #ddd;
}

section.what {
    background-color: white; /* #eee; /* #e5ecf1;*/
    padding-bottom: 60px;
}


.what h3 {
    padding-bottom: 0;
    color: rgb(212, 60, 116);
}

.what img {
    max-width: 120px;
}

#what p, #what li {
    font-size: 22px;
}

.what p.nutshell {
    padding-bottom: 20px;
}

section#what-page-head {
    background-color: #e5ecf1;
}




section.customer-vids {
    background-color: #e5ecf1;
}

section.customer-vids div.panel-heading {
    background-color: #d43c74;
}
section.customer-vids div.panel-heading h4, section.customer-vids div.panel-heading h5 {
    color: white;
}

section.difference {
    background-color: #e5ecf1;
}

section.difference h2 {
}
.difference h3 {
    padding-bottom: 20px;
    color: rgb(212, 60, 116);
    font-weight: bold;
}

/* Home Page Carousel */

header.carousel {
    height: 50%;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
    height: 100%;
}

header.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

/* how we do */
section.how-we-do {
    background-color: white;
}
div#how-we-do {
    background-color: #e5ecf1;
}

div#how-we-do div.col-md-4 {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.how-we-do h4, .how-we-do h3, .how-we-do h2, .how-we-do h1, .how-we-do p {
    font-family: "Open Sans", sans-serif;
    text-align: center;
}

.how-we-do h3 {
    color: rgb(212, 60, 116);
    font-size: 22px;
    font-weight: normal;
    margin-top: 10px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.how-we-do h3.two-l {
    line-height: 3em;
}

.how-we-do h2 {
    font-weight: normal;
    margin-bottom:10px;
    margin-top: 10px;
}

#find-share-fix h2 {
    color: rgb(212, 60, 116);
}


.how-we-do a.btn, .nutshell a.btn, a.btn-cta {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 23px;
    color: white;
    background-color: rgb(212, 60, 116);
    padding: 18px;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 10px;
}

#how-page-head p {
    font-size: 22px;
}

img#dlbi {
    float: left;
    padding: 40px;
}

#how-for-who h3 {
    font-weight: bold;
    padding-bottom: 0;
    margin-bottom: 0;
}

#call-to-demo a.btn {
    color: white;
    background-color: rgb(212, 60, 116);
    padding: 10px;
    margin-top: 4px;
    margin-right: 10px;
    margin-left: 10px;
    border-width: 1px;
}

a#login {
    padding: 10px;
    margin-top: 4px;
    margin-right: 10px;
    margin-left: 10px;
}



/* logos */

img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  opacity: 0.5;
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
  opacity: 1;
  cursor: pointer;
  cursor: hand;
}

div.logos img {
    margin-left: 35px;
    margin-right: 35px;
    margin-top: 50px;
    margin-bottom: 50px;
}

section.logos {
    margin-bottom: 50px;
}
/*
.logos h4 {
    color: rgb(212, 60, 116);
    font-size: 20px;
    font-weight: normal;
    margin-top: 10px;
    line-height: 1.5;
    margin-bottom: 30px;
}
*/

/* customer quotes */
section.customers {
    border-top: 2px #e5ecf1 solid;
/*    background-color: #e5ecf1; */
}

div.customers {
}

div.customers h2 {
}
div.customers h3 {
    color: rgb(212, 60, 116);
    margin-bottom: 40px;
    font-size: 20px;
}

div.customers h4 {
    font-size: 20px;
}

div.customers h5 {
    color: rgb(212, 60, 116);
}

div.hoverPlayVideo img {
    display: inline-block;
}
div.hoverPlayVideo div.videoWrapper {
    display: none;
}


div.hoverPlayVideo.nowPlaying img {
    display: none;
}

div.hoverPlayVideo.nowPlaying div.videoWrapper {
    display: block;
}


div.customer, div.team {
    margin-bottom: 10px;
}

.videoWrapper {
  position: relative;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.headshots h4 {
    font-weight: normal;
}

/* contact */

#contactForm {
    padding: 5px;
}

#gmap {
    border: solid 1px #e5ecf1;
    border-radius: 3px;
    padding: 2px;
}

#contact h4 {
    color: rgb(212, 60, 116);
    font-size: 22px;
    margin-bottom: 15px;
}

#contactForm div.col-md-6 {
    padding: 0;
}
#contactForm div.col-md-6 {
    padding-left: 5px;
}
#contactForm div.col-md-6:first-child {
    padding-left: 0;
    padding-right: 5px;
}

#contact .fa {
    margin-right: 10px;
}

#contact-details {
    font-size: 18px;
}

#contact-details div {
    margin-bottom: 5px;
}

/* 404 Page Styles */

.error-404 {
    font-size: 100px;
}

/* Pricing Page Styles */

.price {
    display: block;
    font-size: 50px;
    line-height: 50px;
}

.price sup {
    top: -20px;
    left: 2px;
    font-size: 20px;
}

.period {
    display: block;
    font-style: italic;
}


/* who */
.ping {
    float: right;
    margin-top: -42px;
}

.ping-2 {
    margin-top: -53px;
}

.ping-3 {
    margin-top: -60px;
}

.ping-4 {
    margin-top: -71px;
}

.ping ul {
    list-style: none;
}

.ping li {
    font-size: 14px;
}

#founders {
    margin-bottom: 35px;
    border-bottom: 1px solid #e5ecf1;
}

#team {
    margin-bottom: 35px;
    margin-top: 50px;
    border-bottom: 1px solid #e5ecf1;
}

div.team img {
    width: 100%;
    max-width: 262px;
}

#who-intro p, #what-intro p {
    font-size: 22px;
}

/* how */


.how-detail h2 {
    color: rgb(212, 60, 116);
    margin-top: 20px;
    margin-bottom: 25px;
}

.how-detail h3 {
    margin-top:10px;
    margin-bottom: 20px;
}

.how-detail img {
    margin: auto;
}

.how-detail a.btn {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 23px;
    color: white;
    background-color: rgb(212, 60, 116);
    padding: 18px;
    padding-left: 40px;
    padding-right: 40px;
    margin-top:40px;
}

.how-detail p {
    font-size: 22px;
}

#actions-progress {
    margin-bottom: 10px;
}

section.how-detail:nth-child(odd) {
    background-color: #e5ecf1;
}

/* jobs */

div.jd-main {
    margin-top: 20px;
}

section.jobs-followup p, section.jobs-followup li {

}
section.jd p, section.jd li {
    font-size: 14px;
    font-weight: normal;
    color: rgb(7, 59, 94);
}

section.jd h1, section.jd h2, section.jd h3 {
    color: rgb(212, 60, 116);
}

section.jd h2#ref {
    color: rgb(7, 59, 94);
}

section.jd a#mailto {
    color: rgb(212, 60, 116);
    font-weight: bold;
}


.job-title.text-center.col-md-6.col-sm-12 a h3 {
    background-color: rgb(212, 60, 116);
    padding: 10px;
    color: white;
    border-radius: 3px;
    border: solid 1px rgb(212, 60, 116);
}
.job-title.text-center.col-md-6.col-sm-12 a h3:hover {
    background-color: rgb(240, 70, 113);
}

.jd-meta h3 {
    color: rgb(212, 60, 116);
}
section.jd .jd-meta p {
    font-weight: bold;
}


/* Footer Styles */

footer {
    /* background-color: rgb(7, 59, 94); */
    background-color: rgb(212, 60, 116);
    color: white;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 10px;
}

footer a:link, footer a:visited, footer a:hover, footer a:active, footer a span {
    color: white;
}

footer button.btn-primary {
    background-color: rgb(7, 59, 94);
    color: white;
    font-weight: bold;
}
footer button.btn-primary:hover {
    color: rgb(7, 59, 94);
    background-color: white;
}

/* Newsletter */

.display_archive {font-family: arial,verdana; font-size: 12px;}
.campaign {line-height: 125%; margin: 5px;}
iframe#newsletter-latest, iframe#signup {
border: solid 1px #bbb;
}

a.btn#subscribe {
    padding: 20px;
    font-size: 18px;
    margin-top: 40px;
    margin-bottom: 40px;
    font-weight: bold;
}

a.btn#subscribe:hover,
a.btn#subscribe:active,
a.btn#subscribe:focus
{
    color: white;
    background-color: rgb(212, 60, 116);
}


/* Responsive Styles */
.nav li.dropable {
    display: block;
}

@media(max-width:991px) {

    .nav>li>a {
        padding: 15px 10px;
    }

    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }

    div.logos img {
        max-width: 340px;
        height: auto;
        max-height: 125px;
        margin-top: 0;
    }

    #how-detail h3 {
        margin-top:30px;
        margin-bottom: 20px;
    }
    .nav li.dropable {
        display: none;
    }
}


@media(max-width:767px) {
    .nav>li>a {
        padding: 10px;
    }
    .img-portfolio {
        margin-bottom: 15px;
    }

    .navbar {
        min-height: 60px;
    }

    header.carousel .carousel {
        height: 70%;
    }

    div.logos img {
        max-width: 285px;
        height: auto;
        max-height: 106px;
        margin-top: 0;
    }

    #contactForm div.col-md-6 {
        padding: 0;
    }
    #contactForm div.col-md-6 {
        padding-left: 0;
    }
    #contactForm div.col-md-6:first-child {
        padding-left: 0;
        padding-right: 0;
    }

    .panel-default {
        margin: 20px;
    }


}

@media(max-width:414px) {
    div.logos img {
        max-width: 200px;
        height: auto;
        margin-left: 0;
        margin-right: 0;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .panel-default {
        margin: 10px;
    }

    .business-header {
        min-height: 495px;
    }
}