@font-face {
  font-family: "Europa";
  src: url("/wp-content/themes/five/dist/fonts/europa-light-webfont.woff2") format("woff2"),
       url("/wp-content/themes/five/dist/fonts/europa-light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Europa";
  src: /*url("/wp-content/themes/five/dist/fonts/europa-regular-webfont.woff2") format("woff2"),*/
       url("/wp-content/themes/five/dist/fonts/europa-regular-webfont_40d7f08f.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Europa";
  src: url("/wp-content/themes/five/dist/fonts/europa-bold-webfont.woff2") format("woff2"),
       url("/wp-content/themes/five/dist/fonts/europa-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
    --5ive-red: #c02025;
}

/* Hamburger */
.banner .menu-trigger:not(.active) .line.line-1 {
	right: auto;
	left: 2px;
}
.banner .menu-trigger:not(.active) .line.line-3 {
	right: 2px;
	left: auto;
}
/* Logo - UX Letters - default color */
.brand svg path.vtc_im {
    fill: #A5A5A5;
}
/* Logo - white */
.brand[data-color=white] svg path.vtc {
    fill: #fff;
}
.brand[data-color=white] svg path.vtc-im {
    fill: #C8C8C8;
}
/* Logo - black */
.brand[data-color=black] svg path.vtc {
    fill: #000;
}
/* May 2024 | Develops */
.button.regular-text {
    display: inline-block;
    font-family: din-condensed, sans-serif;
    font-size: 1.3em;
    text-transform: uppercase;
    font-weight: 700;
    color: #0b0b0b;
    line-height: initial;
    -webkit-transform: translateY(2.22222em);
    -o-transform: translateY(2.22222em);
    transform: translateY(2.22222em);
    opacity: 0;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
.services .section.active .contact-btn,
.services .section.active .button.regular-text {
    -webkit-transform: translate(0);
    -o-transform: translate(0);
    transform: translate(0);
    opacity: 1;
    -webkit-transition: .5s 1.1s;
    -o-transition: .5s 1.1s;
    transition: .5s 1.1s;
}
.button.regular-text.button-border {
	color: #0b0b0b !important;
}
.button.regular-text.button-border:after, .button.regular-text.button-border:before {
	background: #0b0b0b !important;
}
header.banner .button.contact-btn {
    margin: 0;
    float: right;
    display: inline-flex;
    opacity: 1;
    visibility: visible;
    padding: 0 15px;
    line-height: 45px;
    height: 40px;
    position: absolute;
    right: 90px;
    top: -11px;
    color: #fff;
    background: transparent;
    -webkit-transition: all .3s .3s, -webkit-transform .3s 0s;
    transition: all .3s .3s, -webkit-transform .3s 0s;
    -o-transition: all .3s .3s, -o-transform .3s 0s;
    transition: all .3s .3s, transform .3s 0s;
    transition: all .3s .3s, transform .3s 0s, -webkit-transform .3s 0s, -o-transform .3s 0s;
}
@media screen and (max-width: 991px) {
    header.banner .button.contact-btn.btnHide {
        opacity: 0;
        visibility: hidden;
    }
}
header.banner .button.white {
    color: #fff;
}
header.banner .button.black {
    color: #000;
}
header.banner .button.red {
    color: var(--5ive-red);
}
.banner .menu-trigger .line.red {
    background: var(--5ive-red);
}

.slides-pagination[data-color="red"] .scroller .slide-text {
    color: var(--5ive-red);
}
.slides-pagination[data-color="red"] .scroller:after{
    background: #000;
}
header.banner.scrolled .button.contact-btn {
	color: #000;
}
body.template-services:not(.fp-viewing-Services):not(.fp-viewing-contact) header.banner .button.contact-btn {
	color: #000;
}
.services .content ul:not(.social-links) {
    margin-top: 0;
}

body.home.fp-viewing-Clients header.banner .button.contact-btn,
body.home.fp-viewing-Awards header.banner .button.contact-btn,
body.home.fp-viewing-Testimonials header.banner .button.contact-btn,
body.home.fp-viewing-Experience header.banner .button.contact-btn {
	color: #000 !important;
}
body.home.fp-viewing-Clients header.banner .menu-trigger .line,
body.home.fp-viewing-Awards header.banner .menu-trigger .line,
body.home.fp-viewing-Testimonials header.banner .menu-trigger .line,
body.home.fp-viewing-Experience header.banner .menu-trigger .line {
	background: #000 !important;
}
body.home.fp-viewing-Testimonials header.banner .menu-trigger.active .line,
body.home.fp-viewing-Experience header.banner .menu-trigger.active .line {
	background: #fff !important;
}
/* Main menu */
body .banner .menu-trigger.active .line {
    background: #ffffff !important;
}

.stats-content .number-col,
.stats-content .p-title {
    -webkit-transform: translateY(.74074em);
    -o-transform: translateY(.74074em);
    transform: translateY(.74074em);
    opacity: 0;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
.fp-section.active .number-col {
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: .86;
}
.home .content .stats-content {
	position: relative;
	z-index: 2;
}
.home .about-us-top .project-numbers {
	padding-top: 20px;
}
.home .about-us-top .project-numbers .number-col {
	border: 0;
}
.fp-section p.p-title {
    color: #989898;
    text-align: center;
    max-width: 25em;
    margin: auto;
    font-size: 2em;
    font-weight: 500;
    line-height: 40px;
    font-family: "Barlow Condensed", sans-serif;
}
.case-study-hero .hero-bg.hero-bg-loaded { 
    transform: translate(0%, 0%) translate3d(0px, 0px, 0px) !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
}
.owl-carousel .owl-item video {
    width: 100%;
    /*max-width: 100%;*/
    height: 100%;
}
.fv-expand-video {
    opacity: 0;
    position: absolute;
    bottom: 34px;
    left: 42px;
    background: #ffffff;
    z-index: 1;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 0 10px color(srgb 0 0 0 / 0.2);
    transition: all 0.2s linear;
}
.owl-item .item .fv-expand-video::after {
    content: ' ';
    background: url(/wp-content/themes/five/dist/images/icon-expand.svg);
    background-position: 50%;
    background-size: 85%;
    background-repeat: no-repeat;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.project-mockups-slider-section .owl-carousel .owl-item.active {
    z-index: 1;
}
.owl-item.active .fv-expand-video {
	opacity: 1;
}
.owl-item .item {
    transition: all 0.2s linear;
}
.owl-item.active .item.expanded {
    width: calc(1280px + 1.0625em);
    position: absolute;
    height: 720px;
    left: calc(50% - 640px - (1.0625em * 0.5));
    top: calc((50vh - 720px) / 1.5);
    transition: all 0.2s linear;
}
.owl-item .item.expanded .fv-expand-video {
    top: 50%;
    left: -50px;
    transition: all 0.2s linear;
}
.owl-item .item.expanded .fv-expand-video::after {
    content: 'x';
    background: unset;
}

footer .footer-bottom .copyright a {
    color: #8991a0;
}
/* CF */
.wpcf7 .submit-form.button > p {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: wrap;
    width: 100%;
    height: 100%;
}
.wpcf7 .consent-row > p {
    display: flex;
    margin: 0;
}
@media screen and (min-width: 768px) {
    .wpcf7 .consent-row > p {
        align-items: center;
    }
}
/* CF7 Consent */
.cf7-must-check-message {
    color: #dc3232;
    text-align: left;
    font-family: europa, sans-serif;
    padding-left: 30px;
}
label[for="terms_and_conditions"] {
    font-family: europa, sans-serif;
    color: #0b0b0b;
    padding-left: 10px;
    user-select: none;
}
input[name="terms_and_conditions[]"] {
    width: 16px;
    height: 16px;
    margin-top: 6px;
    cursor: pointer;
}
.wpcf7-list-item {
    margin: 0 5px 0 0;
}
.wpcf7 form .wpcf7-response-output {
    margin: 0;
    padding: 0;
    position: initial;
    border: 0;
    color: var(--5ive-red);
    width: 100%;
    float: left;
    text-align: center;
}
/* Contact Us Fix */
@media screen and (min-width: 992px) and (max-width: 1024px)
    {
    header.banner .button.contact-btn {
        top: -30px;
    }
}
.contact-btn {
    -webkit-transform: translateY(2.22222em);
    -o-transform: translateY(2.22222em);
    transform: translateY(2.22222em);
    opacity: 0;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
@media screen and (min-width: 768px)
{
	.admin-bar .banner {
        margin-top: 32px !important;
	}
}
@media screen and (min-width: 481px) {
	header.banner.scrolled .button.contact-btn {
    top: -15px;
	}
}

@media screen and (max-width: 991px){
    .section-content .section-title {
        font-size: 24px;
    }
    .section-content .m-title-wrapper h3 {
        font-size: 24px;
    }
}
@media screen and (max-width: 767px){
    #Five-fp .full-h-section {
        height: 100vh !important;
    }
    .section h3 {
        font-size: 24px;
    }
    .project-numbers .number-col {
        padding-top: 0;
        padding-bottom: 0;
    }
	.fp-section p.p-title {
		font-size: 1.2em;
		line-height: 1.2em;
		margin-top: 20px;
	}
	.home .project-numbers .number-col {
		padding: 25px 30px;
	}
	.project-numbers .number-col .number {
		font-size: 3em;
	}
}
@media screen and (max-width: 992px) {
	.fp-enabled header.banner .button.contact-btn {
    	right: 0;
        top: -30px;
	}
	.home.fp-viewing-5ive header.banner .button.contact-btn,
    .template-services.fp-viewing-Services header.banner .button.contact-btn {
		opacity: 0;
		visibility: hidden;
        transition: unset;;
        color: #000;
	}
	
	.services .section .contact-btn, .services .section .button.regular-text {
        margin-top: 40px;
        left: 45px !important;
	}
	.services .section .contact-btn, .services .section .button.regular-text span {
		font-size: 13px
	}
	html:not(.fp-enabled) .scrolled .brand {
		opacity: 0;
		visibility: hidden;
	}	
	html:not(.fp-enabled) header.banner .button.contact-btn {
		opacity: 0;
		visibility: hidden;
        right: 5px;
	}
	html:not(.fp-enabled) header.banner.scrolled .button.contact-btn {
		opacity: 1;
		visibility: visible;
	}
}

@media screen and (min-width: 992px)
{
    .text-wrapper.main-pane-m {
        margin-top: -50px;
    }
    .flexiContent .section.fp-section .fp-tableCell > .section-content {
        /*height: 100%;
        padding-top: 130px;*/
    }
}
/*
.section .section-content {
    padding-top: 90px;
}
*/