/* //////////////////////////////////////////////////////////// */
/* // Type , vars, main */
/* //////////////////////////////////////////////////////////// */
html {
    scroll-behavior : smooth;
    font-family     : 'Montserrat', sans-serif;
    color           : var(--primary-darker);
}

:target:before {
    content : "";
    display : block;
}

/* Fluid font size variables, for browsers that support clamp */
@supports (font-size: clamp(1rem, 1vw, 1rem)) {
    :root {
        --step-6 : clamp(0.81rem, 0.63vw + 0.67rem, 1.13rem);
        --step-5 : clamp(0.91rem, 0.71vw + 0.75rem, 1.27rem);
        --step-4 : clamp(1.03rem, 0.8vw + 0.85rem, 1.42rem);
        --step-3 : clamp(1.16rem, 0.9vw + 0.95rem, 1.6rem);
        --step-2 : clamp(1.3rem, 1.01vw + 1.07rem, 1.8rem);
        --step-1 : clamp(1.46rem, 1.14vw + 1.21rem, 2.03rem);
    }
}

/* Fallback variables for browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vw, 1rem)) {
    :root {
        --step-6 : 0.81rem;
        --step-5 : 0.91rem;
        --step-4 : 1.03rem;
        --step-3 : 1.16rem;
        --step-2 : 1.3rem;
        --step-1 : 1.46rem;
    }

    @media screen and (min-width : 1152px) {
        :root {
            --step-6 : 1.13rem;
            --step-5 : 1.27rem;
            --step-4 : 1.42rem;
            --step-3 : 1.6rem;
            --step-2 : 1.8rem;
            --step-1 : 2.03rem;
        }
    }
}

/*

https://www.fluid-type-scale.com/calculate?minFontSize=13&minWidth=360&minRatio=1.125&maxFontSize=18&maxWidth=1152&maxRatio=1.125&steps=6%2C5%2C4%2C3%2C2%2C1&baseStep=6&prefix=step&decimals=2&includeFallbacks=on&useRems=on&remValue=16&previewFont=Libre+Baskerville

*/
:root {
    --white              : #FFF;
    --black              : #000;
    --primary            : #7C7C7C;
    --primary-lighter    : #D6D6D6;
    --primary-darker     : #4A535D;
    --secondary          : #891B23;
    --secondary-lighter  : #EBE5E9;
    --secondary-darker   : #000;
    --tertiary           : #000;
    --tertiary-lighter   : #000;
    --tertiary-darker    : #000;
    --preloader-bg       : #fff;
    --preloader-circle   : rgba(30, 30, 30, 0.1);
    --form-error         : #891B23;
    --input-label        : white;
    --input-color        : white;
    --input-placeholder  : grey;
    --input-bg           : white;
    --input-borders      : grey;
    --header-size-large  : 0px;
    --header-size-medium : 0px;
    --header-size-small  : 0px;
    --swiper-theme-color : #FFF;
    --swiper-bullet      : #FFF;
    --swiper-bullet-off  : #000;
    --swiper-bullet-on   : #FFF;
    --nav-large          : 0px;
    --nav-small          : 0px;
    --alt-font           : Times;
    --popup-bg           : #000;
    --popup-colour       : #FFF;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-weight : 500;
}

h1, .h1 {
    font-size      : var(--step-1);
    line-height    : 1.35em;
    margin-top     : 1.5rem;
    text-transform : uppercase;
}

h2, .h2 {
    font-size      : var(--step-2);
    line-height    : 1.35em;
    margin-top     : 1.3rem;
    text-transform : uppercase;
    color          : var(--secondary);
    font-weight    : 700;
}

h3,
.h3 {
    font-size      : var(--step-3);
    line-height    : 1.35em;
    margin-top     : 1.1rem;
    text-transform : uppercase;
}

h4, .h4 {
    font-size   : var(--step-4);
    line-height : 1.35em;
    margin-top  : 1rem;
}

h5, .h5,
blockquote p {
    font-size     : var(--step-5);
    line-height   : 1.35em;
    margin-bottom : 1rem;
}

h6, .h6 {
    font-size     : var(--step-6);
    line-height   : 1.35em;
    margin-bottom : 1rem;
}

blockquote {
    margin-bottom : 15px;
    margin-top    : 15px;
}

/* //////////////////////////////////////////////////////////// */
/* // Header and Main Navigation */
/* //////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////// */
/* // Content */
/* //////////////////////////////////////////////////////////// */
body,
.generic {
    font-size   : clamp(0.85rem, 0.76vw + 0.39rem, 0.94rem);
    line-height : clamp(1.3rem, 1.18vw + 0.61rem, 1.46rem);
}

b, strong {
    font-weight : 600;
}

/* //////////////////////////////////////////////////////////// */
/* // Footer */
/* //////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////// */
/* // Header and Main Navigation */
/* //////////////////////////////////////////////////////////// */
.main-nav {
    padding : 15px 15px 0px 15px;
}

.navbar-items {
    font-weight : 500;
}

.navbar-items li.active a {
    color       : var(--secondary);
    font-weight : bold;
}

.navbar-items li:hover a {
    color : var(--secondary);
}

nav .navbar-items ul li {
    padding-left  : 10px;
    padding-right : 10px;
}

/* //////////////////////////////////////////////////////////// */
/* // Buttons */
/* //////////////////////////////////////////////////////////// */
.button {
    background-color : var(--secondary);
    color            : #fff;
    font-size        : var(--step-2);
    line-height      : 1.35em;
    margin-top       : 1.3rem;
    text-transform   : uppercase;
    font-weight      : 700;
    padding: 21px;
}

.button:hover {
    background-color : var(--secondary-darker);
    color            : #fff;
}

/* //////////////////////////////////////////////////////////// */
/* // Forms */
/* //////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////// */
/* // Custom */
/* //////////////////////////////////////////////////////////// */
.big-image {
    color : #fff;
}

.ql-align-center {
    text-align : center;
}

.ql-align-left {
    text-align : left;
}

.ql-align-right {
    text-align : right;
}

.big-image h1,
.big-image h2,
.big-image h3 {
    color          : #fff;
    text-transform : none;
}

.big-image blockquote {
    border-left : var(--secondary) 10px solid;
}

blockquote {
    transition : all 0.2s ease-in-out;
}

blockquote > :last-child {
    padding-bottom : 0px;
    margin-bottom  : 0px;
}

blockquote > :first-child {
    padding-top : 0px;
    margin-top  : 0px !important;
}

blockquote h2 {
    color         : var(--secondary);
    font-weight   : 700;
    margin-bottom : 1rem;
}

blockquote p {
    font-weight : 500;
}

.blockquote.text-right {
    padding-right : 40px;
    padding-left  : 0px;
    width         : calc(100% - 40px);
    max-width     : 900px;
    margin-right  : 110px;
    margin-left   : auto;
}

.blockquote.text-left {
    padding-left  : 40px;
    padding-right : 0px;
    width         : calc(100% - 40px);
    margin-right  : auto;
    max-width     : 900px;
    margin-left   : 110px;
}

blockquote.text-right {
    border-right  : 10px solid #4A535D;
    border-left   : 0px solid #4A535D;
    padding-right : 30px;
    max-width     : 900px;
    margin-right  : 110px;
    margin-left   : auto;
}

/*blockquote,*/
blockquote.text-left {
    border-left  : 10px solid #4A535D;
    padding-left : 30px;
    width        : 100%;
    max-width    : 900px;
    margin-left  : 110px;
    margin-right : auto;
}

blockquote.text-right:hover {
    padding-right : 40px;
}

blockquote,
blockquote.text-left:hover {
    padding-left : 40px;
}

.footer-triangle {
    height    : auto;
    width     : 100%;
    top       : -33px;
    left      : 0;
    max-width : 381px;
}

.header-triangle {
    height : auto;
    width  : 300px;
    bottom : -71px;
    right  : 83%;
}

.swiper-pagination-bullet {
    border-radius : 0;
}

.has-text-image,
.big-image.has-text .swiper-wrapper {
    filter           : blur(10px);
    background-color : #000;
    margin           : -10px 0;
}

.big-image.has-text .swiper-slide {
    background-color : rgba(0, 0, 0, 100%);
}

.has-text-image,
.big-image.has-text .swiper-wrapper img {
    opacity : 0.5;
}

.big-image img {
    /*aspect-ratio : 2/1;*/
    object-fit : cover;
}

.big-image {
    max-width  : 1800px;
    background : #000;
}

.big-image img {
    max-height : 400px;
}

/*.grid-product-nav,*/
.grid-clients {
    grid-template-columns : 1fr 1fr 1fr;
    grid-gap              : 15px;
}

.grid-clients > div {
    position : relative;
}

.grid.grid-clients a:hover .white-area {
    height : 100%;
}

.tile-text > div {
    width : 100%;
}

.tile-text {
    padding : 17px 55px;
    height  : 100%;
    width   : 100%;
    color   : #fff;
}

.tile-text * {
    margin  : 0px;
    padding : 0px;
    display : block;
    color   : #fff;
}

.triangle-nugget,
.tile-text {
    transition : all 0.2s ease-in-out;
    position   : absolute;
}

.tile-text h2 {
    transition : all 0.2s ease-in-out;
    opacity    : 0;
    max-height : 0;
    overflow   : hidden;
}

.grid.grid-clients > div:hover .tile-text h2 {
    opacity    : 1;
    max-height : 100px;
}

.grid.grid-clients > div:hover .tile-text {
    padding : 55px 55px;
}

.triangle-nugget {
    width  : 15px;
    height : 15px;
}

.grid,
.grid > div {
    transition : all 0.1s ease-in-out;
}

.white-area {
    position         : absolute;
    bottom           : 0;
    left             : 0;
    height           : 0;
    width            : 100%;
    background-color : rgba(0, 0, 0, 0.7);
    transition       : all 0.5s ease-in-out;
}

.max-w-6xl {
    max-width : 80rem;
}

/*/////////////////*/
.grid.grid-clients .top-left .triangle-nugget {
    top       : 23px;
    left      : 26px;
    transform : rotate(270deg);
}

.grid.grid-clients .top-left a:hover .triangle-nugget {
    top       : 23px;
    left      : 26px;
    transform : rotate(360deg);
}

/*/////////////////*/
.grid.grid-clients .top-right .triangle-nugget {
    top       : 23px;
    right     : 26px;
    transform : rotate(180deg);
}

.grid.grid-clients .top-right a:hover .triangle-nugget {
    top       : 23px;
    right     : 26px;
    transform : rotate(90deg);
}

.grid.grid-clients .top-right .tile-text {
    text-align : right;
}

/*/////////////////*/
.grid.grid-clients .bottom-left .triangle-nugget {
    bottom    : 23px;
    left      : 26px;
    transform : rotate(0deg);
}

.grid.grid-clients .bottom-left a:hover .triangle-nugget {
    bottom    : 26px;
    left      : 23px;
    transform : rotate(-90deg);
}

.grid.grid-clients .bottom-left .tile-text {
    display     : flex;
    align-items : flex-end;
}

/*/////////////////*/
.grid.grid-clients .bottom-right .triangle-nugget {
    bottom    : 23px;
    right     : 26px;
    transform : rotate(90deg);
}

.grid.grid-clients .bottom-right a:hover .triangle-nugget {
    bottom    : 23px;
    right     : 26px;
    transform : rotate(180deg);
}

.grid.grid-clients .bottom-right .tile-text {
    text-align  : right;
    display     : flex;
    align-items : flex-end;
}

/* //////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////// */
.grid-services {
    grid-template-columns : 1fr 1fr 1fr;
    grid-gap              : 15px;
}

.grid-services > div {
    position         : relative;
    background-color : #EBE5E9;
    aspect-ratio     : 1/1;
}

.grid-services .arrow {
    margin   : auto;
    position : absolute;
    /*opacity  : 0.2;*/
    padding  : 6px;
    /* filter: brightness(100) drop-shadow(0px 0px 2px rgb(0 0 0 / 0.4)); */
}

.grid-services .service-on {
    top        : 30px;
    left       : 30px;
    width      : calc(100% - 60px);
    text-align : left;
}

.grid-services .service-on,
.grid-services .service-off {
    transition : all 0.1s ease-in-out;
}

.grid-services .service-on,
.grid-services > div:hover .service-off {
    opacity    : 0;
    visibility : hidden;
}

.grid-services .service-off,
.grid-services > div:hover .service-on {
    opacity    : 1;
    visibility : visible;
}

.nav-left::after,
.nav-right::after {
    font-family    : swiper-icons;
    font-size      : var(--swiper-navigation-size);
    text-transform : none !important;
    letter-spacing : 0;
    text-transform : none;
    font-variant   : initial;
    line-height    : 1;
}

.nav-left::after {
    content : 'prev';
}

.nav-right::after {
    content : 'next';
}

body[folder-1="projects"] .grid-projects-text p strong,
body[folder-1="projects"] .grid-projects-text p b {
    font-size     : var(--step-6);
    line-height   : 1.35em;
    margin-bottom : 1rem;
}

/* Pop */
@-webkit-keyframes hvr-pop {
    50% {
        -webkit-transform : scale(1.04);
        transform         : scale(1.04);
    }
}

@keyframes hvr-pop {
    50% {
        -webkit-transform : scale(1.04);
        transform         : scale(1.04);
    }
}

.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
    -webkit-animation-duration        : 0.4s;
    animation-duration                : 0.4s;
    -webkit-animation-timing-function : linear;
    animation-timing-function         : linear;
}

.grad-area {
    position   : absolute;
    top        : 0;
    left       : 0;
    height     : 33%;
    width      : 100%;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
    background : -moz-linear-gradient(top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); /* FF3.6-15 */
    background : -webkit-linear-gradient(top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); /* Chrome10-25,Safari5.1-6 */
    background : linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter     : progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0); /* IE6-9 */
}

body[folder-1="news"] .grad-area,
body[blade="news"] .grad-area {
    height : 75%;
}

.video-js-holder {
    position     : relative;
    max-width    : 1500px;
    margin-left  : auto;
    margin-right : auto;
}

.navbar-items a.active,
.navbar-items a:hover {
    color : var(--secondary);
}

.navbar-items a.active {
    font-weight : bold;
}

.service-contents {
    max-height    : 0px;
    /*display    : inline-block;*/
    overflow      : hidden;
    margin-bottom : 30px;
}

.service-header {
    cursor : pointer;
}

.service:not(.on) .service-header {
    background-color : var(--secondary-lighter);
    color            : var(--secondary);
}

.service.on .service-header {
    background-color : var(--secondary);
    color            : #fff;
}

.service.on .service-header h2 {
    color : #fff;
}

.service.on .service-contents {
    max-height : 1000px;
}

.service, .service * {
    transition : all 0.2s ease-in-out;
}

body:not(.home):not(body[folder-1="projects"]) .big-image img {
    max-height : 300px;
}

body[blade="contact"] .big-image img {
    max-height : 350px !important;
}

/* //////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////// */
.grid-products {
    grid-template-columns : 1fr 1fr 1fr;
    grid-gap              : 15px;
}

.grid-projects-text {
    grid-template-columns : 1fr 1fr 1fr;
    grid-gap              : 45px;
}

.grid-logos {
    grid-template-columns : 1fr 1fr 1fr;
    grid-gap              : 50px 150px;
}

.grid-project {
    grid-template-columns : 1fr 1fr;
    grid-gap              : 15px;
}

.grid-project .magnific-image img {
    aspect-ratio : 1/1;
    object-fit   : cover;
}

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

body.about .video-js-holder {
    max-width : 500px;
}

@media (min-width : 1600px) {
}

@media (min-width : 1400px) {
}

@media (min-width : 1201px) {
    .blockquote.text-right {
        margin-right : 0px;
        max-width    : 900px;
        margin-right : 110px;
        margin-left  : auto;
    }

    blockquote.text-righ1t {
        margin-right : 10px;
        max-width    : 900px;
        margin-left  : auto;
    }

    .blockquote.text-left {
        margin-left  : 110px;
        max-width    : 900px;
        margin-right : auto;
    }

    blockquote.text-left {
        margin-left  : 110px;
        max-width    : 900px;
        margin-right : auto;
    }

    .grid-products .project-text {
        padding : 30px 30px 30px 30px;
    }

    .swiper-horizontal > .swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom : 35px;
    }

    /*/// ARrOW RIGHT ///*/
    .grid-services > div:nth-child(1) .arrow,
    .grid-services > div:nth-child(2) .arrow,
    .grid-services > div:nth-child(7) .arrow,
    .grid-services > div:nth-child(8) .arrow {
        transform : rotate(315deg);
        right     : -15px;
        top       : 0;
        bottom    : 0;
    }

    /*/// ARrOW left ///*/
    .grid-services > div:nth-child(5) .arrow,
    .grid-services > div:nth-child(6) .arrow,
    .grid-services > div:nth-child(11) .arrow,
    .grid-services > div:nth-child(12) .arrow,
    .grid-services > div:nth-child(17) .arrow,
    .grid-services > div:nth-child(18) .arrow {
        transform : rotate(135deg);
        left      : -15px;
        top       : 0;
        bottom    : 0;
    }

    /*/// ARrOW down ///*/
    .grid-services > div:nth-child(3) .arrow,
    .grid-services > div:nth-child(4) .arrow,
    .grid-services > div:nth-child(9) .arrow,
    .grid-services > div:nth-child(10) .arrow {
        transform : rotate(45deg);
        right     : 0;
        left      : 0;
        bottom    : -15px;
    }
}

@media (min-width : 1024px) {
    .banner-fix {
        padding-left : calc(50vw - 288px);
        margin-right : auto;
        margin-left  : 0;
    }
}

@media (min-width : 961px) {
}

@media (min-width : 769px) {
    .header-bar-1 > div {
        padding-left : 28px;
    }
}

@media (max-width : 1600px) {
    .fix-1 {
        display : none;
    }

    footer .w-7\/12 {
        width : 100%;
    }
}

@media (max-width : 1250px) {
    .fix-3 {
        display : none;
    }
}

@media (max-width : 1200px) {
    .grid-products {
        grid-template-columns : 2fr 1fr;
        grid-gap              : 30px;
    }

    .grid-services {
        grid-template-columns : 1fr 1fr;
        grid-gap              : 15px;
    }

    .grid-products .project-text {
        padding : 0 30px 30px 0px;
    }

    /*/// ARrOW RIGHT ///*/
    .grid-services > div:nth-child(1) .arrow,
    .grid-services > div:nth-child(5) .arrow,
    .grid-services > div:nth-child(9) .arrow,
    .grid-services > div:nth-child(13) .arrow,
    .grid-services > div:nth-child(17) .arrow {
        transform : rotate(315deg);
        right     : -15px;
        top       : 0;
        bottom    : 0;
    }

    /*/// ARrOW left ///*/
    .grid-services > div:nth-child(4) .arrow,
        /*.grid-services > div:nth-child(7) .arrow,*/
    .grid-services > div:nth-child(8) .arrow,
    .grid-services > div:nth-child(12) .arrow,
    .grid-services > div:nth-child(16) .arrow {
        transform : rotate(135deg);
        left      : -15px;
        top       : 0;
        bottom    : 0;
    }

    /*/// ARrOW down ///*/
    .grid-services > div:nth-child(2) .arrow,
    .grid-services > div:nth-child(3) .arrow,
    .grid-services > div:nth-child(6) .arrow,
    .grid-services > div:nth-child(7) .arrow,
    .grid-services > div:nth-child(10) .arrow,
    .grid-services > div:nth-child(11) .arrow {
        transform : rotate(45deg);
        right     : 0;
        left      : 0;
        bottom    : -15px;
    }
}

@media (max-width : 1024px) {
    .navbar-items a {
        padding   : 4px;
        font-size : 14px;
    }
}

@media (max-width : 960px) {
    .grid-logos {
        grid-template-columns : 1fr 1fr 1fr;
        grid-gap              : 120px;
    }

    .footer-flex-1 {
        flex-direction : column;
        text-align     : center;
    }

    .footer-flex-1 > div {
        padding : 5px;
    }

    .footer-flex-1 > .flex {
        flex-direction : column;
        text-align     : center;
        line-height    : 1.5em;
    }

    .footer-flex-1 * {
        text-align : center;
    }

    .grid-clients:not(.bottom-page) {
        grid-template-columns : 1fr 1fr;
        grid-gap              : 15px;
    }
}

@media (max-width : 768px) {
    .grid-projects-text {
        grid-template-columns : 1fr;
        grid-gap              : 30px;
    }

    .grid-clients.bottom-page .top-left,
    .grid-clients.bottom-page .top-right {
        display : none;
    }

    .grid-clients.bottom-page,
    .grid-services {
        grid-template-columns : 1fr;
        grid-gap              : 15px;
    }

    /*/// ARrOW down ///*/
    .grid-services > div .arrow {
        transform : rotate(45deg) !important;
        right     : 0 !important;
        left      : 0 !important;
        top       : auto !important;
        bottom    : -15px !important;
    }

    .navbar-logo img {
        max-height : 50px !important;
        margin-top : -15px;
    }

    .blockquote.text-right {
        margin-left   : auto;
        padding-right : 20px;
    }

    .blockquote.text-left {
        margin-right : auto;
        padding-left : 20px;
    }

    .blockquote,
    blockquote {
        max-width    : 100%;
        margin-left  : auto !important;
        margin-right : auto !important;
    }
}

@media (max-width : 640px) {
    .grid-products {
        grid-template-columns : 1fr;
        grid-gap              : 15px;
    }

    .grid-products .project-text {
        padding : 28px 0px 0px 0px;
    }

    .grid-logos {
        grid-template-columns : 1fr 1fr 1fr;
        grid-gap              : 40px;
    }

    .grid.grid-clients > div:hover .tile-text {
        padding : 56px 15px 15px 15px;
    }

    .big-image img {
        height : 50vh;
    }
}

@media (max-width : 480px) {
    body[folder-1="news"] .big-image,
    body[blade="news"] .big-imagee {
        max-height : 33vh;
    }

    .grid-logos {
        grid-template-columns : 1fr 1fr;
        grid-gap              : 40px;
    }

    .grid-clients {
        grid-template-columns : 1fr;
        grid-gap              : 15px;
    }

    .big-image img {
        /*aspect-ratio : 1/1;*/
        object-fit : cover;
    }

    .blockquote.text-right {
        padding-right : 20px;
        padding-left  : 0px;
        width         : calc(100% - 40px);
    }

    .blockquote.text-left {
        padding-right : 0px;
        width         : calc(100% - 40px);
        margin-right  : auto !important;
    }
}