/* to edit this, you will need to SSH tunnel */

.hp-hero h1 {
  text-shadow: 2px 2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, -2px -2px 0 #FFF !important;
  -webkit-text-stroke: 0 !important;
}

.project-technologies .project-tech:not(.techology-blog) .logo {
background-size: 581px auto !important;
}

 /* IMPACTFUL Page */
.flexdiv {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding-left: 0;
}
.flexdiv img {
    max-width: 80%;
    padding-bottom: 10px;
}
.impactful-focus {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #003e52;
}
.impactful-focus span {
    width: 70%;
    display: block;
    margin: 0 auto;
}
.impactful-actions {
    text-align: center;
}
.impactful-actions > div {
    margin: 0 15px;
}
.impactful-actions .action-header {
    height: 78px;
    color: #ffffff;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    min-width: 200px;
    background-image: linear-gradient(8deg, transparent 50%, #003e52 50%), linear-gradient(-8deg, transparent 50%, #003e52 50%);
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 50% 144%;
}
.impactful-projects {
    margin-top: 50px;
}
div[class*='vignette'] .color-blue h5 {
    color: #4fb3e4;
}
div[class*='vignette'] .color-blue p.icon {
    background-color: #4fb3e4;
}
div[class*='vignette'] .color-yellow h5 {
    color: #f0d83f;
}
div[class*='vignette'] .color-yellow p.icon {
    background-color: #f0d83f;
}
div[class*='vignette'] .color-red h5 {
    color: #c6243a;
}
div[class*='vignette'] .color-red p.icon {
    background-color: #c6243a;
}
div[class*='vignette'] .color-orange h5 {
    color: #f86d42;
}
div[class*='vignette'] .color-orange p.icon {
    background-color: #f86d42;
}
div[class*='vignette'] .color-purple h5 {
    color: #662d91;
}
div[class*='vignette'] .color-purple p.icon {
    background-color: #662d91;
}
hr.clear {
    clear: both;
}
@media screen and (max-width: 1112px) {
    .flexdiv {
        display: block;
    }
    .flexdiv > div,
    .flexdiv > li {
        width: 45%;
        float: left;
        margin-bottom: 30px;
    }
}
@media screen and (max-width: 885px) {
    .flexdiv > div {
        width: 92%;
        float: none;
    }
}