/*
    This CSS File will only display on Single Portfolio Pages for posts and custom posts
*/

/* Table of Contents
  - Defaults
  - Media Queries
*/

/* Defaults
---------------------------------------------------------------------------- */
body {
    font-family: var(--secondaryFont);
    font-weight: 400;
    font-size: 1.8rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--primaryFont);
    font-weight: 400;
}

.site-inner a.button {
    background-color: var(--primaryColor, #1a4c95);
}

.site-inner a.button:hover {
    background-color: var(--secondaryColor, #1eb886);
}

b,
strong {
    font-weight: 700;
}

.site-inner {
    max-width: none;
    padding: 0;
    margin: 0;
}

.project-section {
    padding: 4rem 0;
}

.project-section .section-title {
    font-size: 3.6rem;
    font-weight: 700;
}

.project-section.project-header,
.flexible-layout {
    overflow: hidden;
}

/* Portfolio Header
---------------------------------------------------------------------------- */
.project-section.project-header .flexcol .project-industry a {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--secondaryColor, #1eb886);
    line-height: 1;
}

.project-section.project-header .flexcol h1.project-title {
    font-size: 4rem;
}

.project-section.project-header .flexcol .portfolio-logo {
    margin-bottom: 2rem;
}

.project-section.project-header .flexcol .portfolio-testimonial {
    margin-top: 2rem;
    position: relative;
    font-style: italic;
}

.project-section.project-header .flexcol .portfolio-testimonial::after {
    content: '\f10e';
    font-family: var(--iconFont);
    color: var(--secondaryColor, #1eb886);
    font-weight: 900;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 3rem;
    line-height: 1;
    font-style: normal;
}

.project-section.project-header .flexcol .portfolio-testimonial .client-name {
    display: block;
    margin-top: 1rem;
    font-weight: 600;
    font-style: normal;
}

.project-section.project-header .flexcol .portfolio-testimonial .client-position {
    font-size: 1.6rem;
    line-height: 1;
}

.project-section.project-header .flexcol .portfolio-featured-image {
    position: relative;
    aspect-ratio: 1 / 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.project-section.project-header .flexcol .portfolio-featured-image::before,
.project-section.other-projects .flexcol .hexagon-graphic {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    aspect-ratio: 1 / 1;
    height: 100%;
    background: linear-gradient(45deg, var(--primaryColor, #1a4c95), var(--secondaryColor, #1eb886));
    border-radius: 50%;
    -webkit-clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);
    clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);
}

.project-section.other-projects .flexcol .hexagon-graphic {
    top: 0;
    right: 0;
}

.project-section.project-header .flexcol .portfolio-featured-image img {
    position: relative;
    filter: drop-shadow(1rem 1rem 2rem rgba(51, 51, 51, 0.75));
}

@keyframes MoveUpDown {

    0%,
    100% {
        bottom: 4rem;
    }

    50% {
        bottom: 2rem;
    }
}

/* Portfolio About
---------------------------------------------------------------------------- */
.project-section.project-about,
.project-section.project-results,
.project-section.project-cta,
.project-section.other-projects {
    background-color: #f1f3f4;
}

.project-section.project-about .section-title,
.project-section.project-results .section-title,
.project-section.project-style .section-title {
    text-align: center;
    margin-bottom: 4rem;
}

.project-section.project-about .flexcol .portfolio-logo,
.project-section.project-about .portfolio-description {
    margin-bottom: 2rem;
}

.project-section.project-about .flexcol .portfolio-services,
.project-section.project-about .flexcol .project-industry {
    margin-top: 3rem;
}

.project-section .flexcol h3 {
    margin-bottom: 1rem;
    font-size: 3rem;
}

.project-section.project-about .flexcol .portfolio-services ul,
.project-section.project-about .flexcol .project-industry ul {
    padding: 0;
    margin: 0;
}

.project-section.project-about .flexcol .portfolio-services ul>li,
.project-section.project-about .flexcol .project-industry ul>li {
    list-style-type: none;
    text-transform: uppercase;
    font-size: 1.5rem;
    line-height: 1.4;
}

.project-section.project-about .flexcol .portfolio-services ul>li::before,
.project-section.project-about .flexcol .project-industry ul>li::before {
    content: '';
    display: inline-block;
    height: 0.1rem;
    width: 2rem;
    background-color: var(--primaryColor, #1a4c95);
    vertical-align: super;
    margin-right: 1.5rem;
}

.project-section.project-about .flexcol .portfolio-services ul>li:not(:last-of-type),
.project-section.project-about .flexcol .project-industry ul>li:not(:last-of-type) {
    margin-bottom: 1rem;
}

.project-section.project-about .flexcol .portfolio-challenges-solutions ul>li {
    list-style-type: none;
    position: relative;
    padding-left: 2.5rem;
}

.project-section.project-about .flexcol .portfolio-challenges-solutions ul>li:not(:last-of-type) {
    margin-bottom: 1rem;
}

.project-section.project-about .flexcol .portfolio-challenges-solutions ul>li::before {
    content: '\f054';
    font-family: var(--iconFont);
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 900;
}

.project-section.project-about .flexcol .portfolio-objectives ul>li:not(:last-of-type) {
    margin-bottom: 2rem;
}

.project-section.project-about .portfolio-objectives {
    margin-top: 4rem;
}

.project-section.project-about .portfolio-objectives ul>li {
    list-style-type: none;
    position: relative;
    background-color: white;
    padding: 2rem 2rem 2rem 6rem;
    border-radius: 1rem;
    box-shadow: var(--boxShadow);
    font-size: 1.8rem;
}

.project-section.project-about .portfolio-objectives ul>li::before {
    content: '\f058';
    font-family: var(--iconFont);
    color: var(--secondaryColor, #1eb886);
    position: absolute;
    top: 2rem;
    left: 2rem;
    font-size: 2.6rem;
    text-align: center;
    font-weight: 300;
    z-index: 9;
    line-height: 1;
}

/* Portfolio Results
---------------------------------------------------------------------------- */
.project-section.project-results {
    padding-top: 0;
}

.project-section.project-results .flexcol {
    text-align: center;
}

.project-section.project-results .flexcol .counter {
    font-size: 4rem;
    text-align: center;
    color: var(--primaryColor, #1a4c95);
    font-weight: 700;
}

.project-section.project-results .flexcol h3.result-title {
    line-height: 1;
    margin: 1rem 0 1rem 0;
    text-transform: uppercase;
    font-size: 2rem;
}

/* Portfolio CTA
---------------------------------------------------------------------------- */
.project-section.project-cta {
    padding: 0;
    position: relative;
}

.project-section.project-cta>.wrap {
    text-align: center;
    background: linear-gradient(45deg, var(--primaryColor, #1a4c95), var(--secondaryColor, #1eb886));
    color: white;
    position: relative;
    padding: 4rem 5%;
}

.project-section.project-cta a.button {
    background-color: transparent;
    color: white;
    outline-color: white;
}

.project-section.project-cta a.button:hover {
    background-color: white;
    color: var(--primaryColor, #1a4c95);
}

/* Portfolio Style
---------------------------------------------------------------------------- */
.project-section.project-style .flexbox {
    align-items: center;
}

.project-section.project-style .flexcol .color {
    padding: 2rem;
    text-align: center;
    border-radius: 1rem;
    position: relative;
}

.project-section.project-style .flexcol .color .tooltip {
    position: absolute;
    top: 0;
    left: 0;
    background: #333;
    padding: 2rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 2rem;
    letter-spacing: 1;
    opacity: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    font-weight: 700;
}

.project-section.project-style .flexcol .color .tooltip.appear {
    animation: appear 1s ease;
}

@keyframes appear {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
        z-index: 9;
    }

    80% {
        opacity: 1;
        z-index: 9;
    }

    100% {
        opacity: 0;
    }
}

.project-section.project-style .flexcol .color {
    cursor: pointer;
}

.project-section.project-style .flexcol .color p,
.project-section.project-style .flexcol .color i {
    font-weight: 700;
    font-size: 2rem;
    margin: 0;
    color: #fff;
}

.project-section.project-style .flexcol .color i {
    display: block;
    height: 0;
    opacity: 0;
    transition: 0.5s ease all;
}

.project-section.project-style .flexcol .color:hover i {
    opacity: 1;
}

/* Portfolio Other Projects
---------------------------------------------------------------------------- */
.project-section.other-projects .flexcol {
    position: relative;
}

.project-section.other-projects .flexcol .portfolio-item {
    aspect-ratio: 1/1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 6rem;
}

.project-section.other-projects .flexcol img {
    filter: drop-shadow(1rem 1rem 2rem rgba(51, 51, 51, 0.75));
}

.project-section.other-projects .flexcol h3.portfolio-title {
    margin: 2rem 0 0 0;
    color: white;
    font-family: var(--headingFont);
    font-size: 2.4rem;
}

.project-section.other-projects .flexcol a.portfolio-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.project-section.other-projects .flexcol:first-of-type a {
    font-weight: 700;
    text-transform: uppercase;
}

/* Media Queries
---------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 660px) {
    .project-section.project-results .flexbox {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3rem;
    }

    .project-section.project-results .flexcol {
        flex-basis: calc(50% - 1.5rem);
        max-width: calc(50% - 1.5rem);
    }

    .project-section.project-style .flexcol .website-colors {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        gap: 2rem;
    }

    .project-section.project-style .flexcol .color {
        border-radius: 2rem;
        aspect-ratio: 1 / 1;
        flex: 1;
        flex-basis: 33.3%;
        max-width: 33.3%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
    }
}

@media only screen and (min-width: 960px) {
    .project-section {
        padding: 8rem 0;
    }

    .project-section.project-header .flexbox {
        align-items: center;
    }

    .project-section.project-header .flexcol h1.project-title,
    .project-section.project-header .flexcol .portfolio-testimonial::after {
        font-size: 5rem;
    }

    .project-section.project-header .flexcol .portfolio-featured-image::before {
        top: -6rem;
        right: -16rem;
    }

    .project-section.project-header .flexcol .portfolio-testimonial {
        font-size: 2rem;
    }

    .project-section .section-title {
        font-size: 5rem;
    }

    .project-section .flexbox {
        gap: 8rem;
    }

    .project-section.project-about {
        position: relative;
    }

    .project-section.project-about::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: -30rem;
        aspect-ratio: 1 / 1;
        height: 50rem;
        background-color: var(--secondaryColor, #1eb886);
        opacity: 0.25;
        border-radius: 50%;
        -webkit-clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);
        clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);
    }

    .project-section.project-about .flexbox {
        gap: 0;
        background-color: white;
        border-radius: 1rem;
        box-shadow: var(--boxShadow);
    }

    .project-section.project-about .flexcol:first-of-type {
        padding: 4rem;
    }

    .portfolio-challenges-solutions {
        list-style-type: none;
        position: relative;
        background-color: var(--primaryColor, #1a4c95);
        padding: 4rem;
        color: white;
        border-radius: 0 1rem 1rem 0;
        font-size: 1.8rem;
    }

    .project-section.project-about .flexcol:last-of-type {
        flex: 1.5;
    }

    .project-section.project-about .portfolio-objectives {
        margin-top: 8rem;
    }

    .project-section.project-about .portfolio-objectives ul {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .project-section.project-about .portfolio-objectives ul>li {
        flex-basis: calc(50% - 1rem);
        max-width: calc(50% - 1rem);
    }

    .project-section.project-results .flexcol.col-3,
    .project-section.project-results .flexcol.col-4,
    .project-section.project-results .flexcol.col-5 {
        flex-basis: calc(33.3% - 2rem);
        max-width: calc(33.3% - 2rem);
    }

    .project-section.other-projects .flexbox {
        display: block;
    }

    .project-section.other-projects .flexcol {
        float: left;
        max-width: 50%;
    }

    .project-section.other-projects .flexcol:not(:last-of-type) {
        margin-bottom: 6rem;
    }

    .project-section.other-projects .flexcol:nth-of-type(even) {
        float: right;
    }

    .project-section.other-projects .flexcol:first-of-type {
        min-height: 34rem;
        text-align: center;
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        max-width: 50%;
    }

    .project-section.project-cta::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background-color: white;
    }

    .project-section.project-cta>.wrap {
        max-width: 90rem;
        margin: 0 auto;
        padding: 4rem;
        border-radius: 2rem;
    }

    .fonts-used,
    .fonts-used h2 {
        font-size: 140%;
    }

    .project-section.other-projects .flexcol .hexagon-graphic {
        opacity: 0.8;
        transition: opacity 0.5s ease;
    }

    .project-section.other-projects .flexcol:hover .hexagon-graphic {
        opacity: 1;
    }

    .project-section.project-header {
        position: relative;
    }

    .project-section.project-header .anchor-link {
        animation: MoveUpDown 1s linear infinite;
        position: absolute;
        bottom: 4rem;
        left: 50%;
        transform: translate(-50%, 0);
        font-size: 3.6rem;
        line-height: 1;
    }

    .project-section.project-header .anchor-link a {
        outline: none;
    }
}

@media only screen and (min-width: 1280px) {
    .project-section.project-header .flexcol h1.project-title {
        font-size: 6rem;
    }

    .project-section.project-results .flexcol.col-4,
    .project-section.project-results .flexcol.col-5 {
        flex-basis: calc(25% - 2.3rem);
        max-width: calc(25% - 2.3rem);
    }
}

@media only screen and (min-width:1340px) {
    .project-section.project-results .flexcol.col-5 {
        flex-basis: calc(20% - 2.4rem);
        max-width: calc(20% - 2.4rem);
    }
}

@media only screen and (max-width: 959px) {

    .project-section .flexcol:not(:last-of-type),
    .project-section.project-about .portfolio-objectives ul>li:not(:last-of-type) {
        margin-bottom: 2rem;
    }

    .project-section.project-header .anchor-link {
        display: none;
    }

    .project-section.project-about .flexcol .portfolio-challenges-solutions ul>li::before {
        color: var(--primaryColor, #1a4c95);
    }

}

@media only screen and (max-width: 659px) {
    .project-section.other-projects .flexcol h3.portfolio-title {
        font-size: 1.6rem;
    }

    .project-section.project-style .flexcol .color:not(:last-of-type) {
        margin-bottom: 1.5rem;
    }

    .project-section.project-style .flexcol .color .tooltip,
    .project-section.project-style .flexcol .color i {
        display: none;
    }
}