/* Base */
h1.fit-text {
    font-size: 32px;
    /* font-size: calc(16px + (52 – 16) * ((100vw – 400px) / (1800 – 320))); */
}

@media (min-width: 770px) {
    h1.fit-text {
        font-size: 56px;
    }
}


p {
    margin-bottom: 1.625rem;
    /* 26px */
    font-size: 1.125rem;
    /* 18px */
}

p:last-child {
    margin-bottom: 0;
}

.f-directions {
    /* content: "view d" */
}

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

.container {
    width: 100%;
}

a:hover {
    cursor: url(../images/dot.svg), auto;
}

.no-dot {
    cursor: pointer;
}

a[href^="tel"] {
    color: inherit;
    text-decoration: none; 
}

a.text-white[href^="tel"] {
    color: #fff;
    text-decoration: none; 
}

.s-arrow {
    /* background: url('data:image/svg+xml;utf8,<svg width="13" height="10" xmlns="http://www.w3.org/2000/svg"><path d="M1.596 4.5L5.148 8 12 1" stroke="%23FFF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"/></svg>'); */
}

/* @media (min-width: 770px) {
    .container
} */


/* Decoration */

.dot {
    width: 12px;
    height: 12px;
    border-radius: 100%;
    display: inline-block;
    margin-right: 12px;
    margin-left: 12px;
    margin-bottom: 8px;
    background: #fff;
}

.dot-sm {
    background: #0EA3DF;
    height: 8px;
    width: 8px;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 4px;
}

.s-about {
    background: #F2F2F2 url(../images/voice.png) center no-repeat;
    background-size: cover;
}

.s-about-btn {
    top: 50%;
    left: 50%;
    background: rgba(14 ,163, 223, 0.9);
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(0.5);
    transition: all 0.2s ease-in-out;
}

.s-about-btn span {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s ease-in-out;
    transition-delay: 0.2s;
}


.s-about:hover .s-about-btn span {
    transform: translateY(0px);
    opacity: 1;
}


.s-about:hover .s-about-btn {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
}

.s-about-img-wrap {}

.s-about-img {
    height: 0;
    padding-bottom: 100%;
    background: url(../images/cover2.jpg) center center no-repeat;
    background-size: cover;
    overflow: hidden;
    border-radius: 100%;
    display: block;
    position: relative;
    margin-bottom: -60px;
    border: 4px white solid;
}

.s-about-bubble {
    width: 120px;
    height: 120px;
    background: url(../images/bubble-blue.svg) no-repeat;
    background-size: contain;
    top: 50%;
    left: 2%;
    transform: translateY(-50%);
    padding: 12px;
}

.bubble-right {
    right: 2%;
    left: auto;
    background: url(../images/bubble-red.svg) no-repeat;
    background-size: contain;
}



.deco-circle-blue {
    bottom: -80px;
    right: 0px;
}

#svg-dot {
    transition: all 0.2s ease-in-out;
    transform: scale(1);
}

#svg-arrow {
    transition: all 0.2s ease-in-out;
    transform: translateY(0px);
}

#more-work {
    cursor: pointer;
}

#more-work:hover #svg-dot {
    transform: translateX(16px) translateY(14px) scale(0.75)
}

#more-work:hover #svg-arrow {
    transform: translateY(5px);
}

@media (min-width: 770px) {
    /* .s-about .container {
        background: #F2F2F2 url(../images/white-mask.svg) center 60px no-repeat;
    } */
    .s-about-img {
        margin-bottom: -140px;
    }
    .s-about-bubble {
        width: 260px;
        height: 260px;
        padding: 32px;
    }
    .deco-grey-circle {
        width: 100%;
        height: 100px;
        bottom: 0;
        background: url(../images/grey-half.svg) no-repeat bottom center;
        transform: rotate(180deg);
    }
}

.deco-red-1 {
    bottom: -140px;
    right: 20%;
}

.deco-red-2 {
    bottom: 0px;
    right: 0;
    height: 100px;
}

.deco-red-3 {
    bottom: -100px;
    right: 0;
}

.deco-blue-large {
    width: 1200px;
    height: 1200px;
    right: -45%;
    top: 120px;
}

.deco-blue-half {
    margin-top: -160px;
    height: 180px;
}

.deco-blue-half-2 {
    margin-top: -260px;
    height: 180px;
}

.deco-blue-half-1 {
    margin-top: 150px;
    height: 220px;
}

.deco-h-1 {
    bottom: -20px;
    right: 140px;
}

.deco-h-2 {
    top: -20px;
    left: 140px;
}

.blue-pie {
    height: 300px;
    width: auto;
}

.bg-circle-grey {
    background: url(../images/grey-half.svg) center top no-repeat;
    background-size:400px 90px;
}

.deco-red-strenghts {
    top: -20px;
    right: 40px;
}


@media (min-width: 770px) {
    .deco-red-3 {
        bottom: -20px;
        right: 20%;
    }

    .deco-red-2 {
        bottom: 0px;
        right: 20%;
        height: auto;
    }

    .blue-pie {
        height: 500px;
        width: auto;
    }
    .deco-blue-half {
        margin-top: -120px;
        height: 220px;
    }
}


.h-banner-wrap {
    margin-left: 50%;
    top: 120px;
    left: 0;
    padding-right: 10%;
    z-index: 2;
    line-height: 0;
}

.arrow-more {
    top: -100px;
    left: 20%;
    cursor: pointer;
}


/* Effects */

/* Buttons */
.btn-play {
    width: 120px;
    height: 120px;
    display: block;
    background: url('data:image/svg+xml;utf8,<svg width="90" height="90" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle stroke="%23FFFFFF" stroke-width="8" cx="45" cy="45" r="41"/><path d="M58.746 46.623L39.169 60.72A2 2 0 0 1 36 59.096V30.904a2 2 0 0 1 3.169-1.623l19.577 14.096a2 2 0 0 1 0 3.246z" fill="%23FFFFFF"/></g></svg>') no-repeat center;
    transform: translateX(-50%) translateY(-50%) translateZ(20px);
}

@media (min-width: 770px) {
    .h-image .btn-play {
        display: none;
    }
}


.btn-red-arrow {
    background: #E63325 url("data:image/svg+xml,%3Csvg width='129' height='29' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='matrix(-1 0 0 1 126 2)'%3E%3Cpath stroke='%23FFF' stroke-width='3' stroke-linecap='round' d='M12.728 25.456L0 12.728 12.728 0'/%3E%3Crect fill='%23FFF' y='11' width='42' height='3' rx='1.5'/%3E%3C/g%3E%3Cg transform='matrix(-1 0 0 1 42 2)'%3E%3Cpath stroke='%23FFF' stroke-width='3' stroke-linecap='round' d='M12.728 25.456L0 12.728 12.728 0'/%3E%3Crect fill='%23FFF' y='11' width='42' height='3' rx='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center no-repeat;
    background-position: -33px center;
    background-size: 70px 20px;
    transition: all 0.2s ease-in-out;
}

.btn-red-arrow:hover {
    background: #0EA3DF url("data:image/svg+xml;utf8,%3Csvg width='112' height='29' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='matrix(-1 0 0 1 109 2)'%3E%3Cpath stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' d='M12.728 25.456L0 12.728 12.728 0'/%3E%3Crect fill='%2523FFFFFF' y='11' width='42' height='3' rx='1.5'/%3E%3C/g%3E%3Cg transform='matrix(-1 0 0 1 42 2)'%3E%3Cpath stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' d='M12.728 25.456L0 12.728 12.728 0'/%3E%3Crect fill='%23FFFFFF' y='11' width='42' height='3' rx='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    background-position: 10px center;
    background-size: 70px 20px;
}

@media (min-width: 770px) {
    .btn-red-arrow {
        background-position: -68px center;
        background-size: auto;
    }
    .btn-red-arrow:hover {
        background-position: 18px center;
        background-size: auto;
    }
}


.btn-toggle {
    width: 14px;
    height: 8px;
    background: url("data:image/svg+xml;utf8,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.657 1L7 6.657 1.343 1' stroke='%2331C09A' stroke-width='2' fill='none' fill-rule='evenodd' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.btn-more:hover {
    opacity: 0.9;
}

.btn-social {
    width: 40px;
    height: 40px;
    transform: scale(1);
}

.btn-social:hover {
    transform: scale(1.1);
}

.btn-insta {
    width: 40px;
    height: 40px;
    background: url("data:image/svg+xml;utf8,%3Csvg width='43' height='43' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23009DDD' fill-rule='nonzero'%3E%3Cpath d='M27.94 11.496H15.149a3.705 3.705 0 0 0-3.703 3.702v12.79a3.707 3.707 0 0 0 3.703 3.704h12.79a3.709 3.709 0 0 0 3.703-3.705V15.198a3.707 3.707 0 0 0-3.702-3.702zm-6.397 16.746a6.658 6.658 0 0 1-6.649-6.65 6.658 6.658 0 0 1 6.649-6.648 6.656 6.656 0 0 1 6.649 6.649 6.658 6.658 0 0 1-6.65 6.649zm6.864-11.923a1.574 1.574 0 0 1 0-3.147c.866 0 1.573.707 1.573 1.574 0 .868-.707 1.573-1.573 1.573z'/%3E%3Cpath d='M21.543 17.755a3.842 3.842 0 0 0-3.838 3.838 3.844 3.844 0 0 0 3.838 3.84 3.845 3.845 0 0 0 3.84-3.84 3.844 3.844 0 0 0-3.84-3.838z'/%3E%3Cpath d='M21.543.077C9.693.077.086 9.684.086 21.535c0 11.85 9.607 21.457 21.457 21.457C33.393 42.992 43 33.385 43 21.535 43 9.685 33.393.077 21.543.077zm12.908 27.91a6.519 6.519 0 0 1-6.511 6.514H15.149a6.52 6.52 0 0 1-6.514-6.514V15.198a6.522 6.522 0 0 1 6.514-6.513h12.79c3.591 0 6.512 2.923 6.512 6.513v12.79z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
}

.btn-li {
    width: 40px;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg width='43' height='43' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 36'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.852 26.474v-7.02c0-3.76-2.01-5.51-4.69-5.51-2.162 0-3.131 1.188-3.671 2.021v-1.734h-4.075c.055 1.149 0 12.243 0 12.243h4.075v-6.838c0-.365.026-.73.134-.991.294-.732.964-1.489 2.09-1.489 1.474 0 2.063 1.123 2.063 2.768v6.55h4.074zM12.125 12.563c1.42 0 2.305-.942 2.305-2.118-.026-1.202-.885-2.116-2.278-2.116s-2.305.914-2.305 2.116c0 1.176.885 2.118 2.252 2.118h.026zm6.625 23.416c-9.941 0-18-8.05-18-17.98S8.809.022 18.75.022c9.94 0 18 8.049 18 17.979s-8.06 17.979-18 17.979zm-4.588-9.505V14.232h-4.074v12.242h4.074z' fill='%23009DDD'/%3E%3C/svg%3E%0A");
    background-size: contain;
}

.btn-fb {
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml;utf8,<svg width="43" height="43" xmlns="http://www.w3.org/2000/svg"><path class="fill" d="M21.5 43C9.626 43 0 33.374 0 21.5S9.626 0 21.5 0 43 9.626 43 21.5 33.374 43 21.5 43zm2.587-35.379c-.903 0-1.77.109-2.781.506-2.06.83-3.107 2.781-3.107 5.815v2.962h-2.89v4.949h2.89V36.12h5.888V21.853h4.01l.541-4.949h-4.551v-2.24c0-.686.072-1.191.253-1.48.253-.434.758-.65 1.553-.65h2.673V7.62h-4.48z" fill="%23009DDD" fill-rule="evenodd"/></svg>');
    background-size: contain;
}

.btn-tw {
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml;utf8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M20 40C8.954 40 0 31.046 0 20S8.954 0 20 0s20 8.954 20 20-8.954 20-20 20zm-5.88-25.122c-3.844-1.942-4.778-3.696-4.778-3.696s-.597 1.045-.336 2.987c.262 1.941 2.098 4.439 2.098 4.439l-2.21-.893s.112 1.232.97 2.502c.86 1.27 3.884 2.874 3.884 2.874l-2.875.038s.261.597 1.307 1.605c1.045 1.008 3.957 1.904 3.957 1.904s-2.048 1.434-3.472 1.979c-1.424.544-3.659.672-3.659.672s3.328 2.07 8.438 1.568c5.11-.503 8.627-2.89 11.349-6.87 2.722-3.978 2.464-9.146 2.464-9.146s.298-.343 1.021-1.006c.723-.663.946-.989.946-.989l-1.807.192 1.173-2.095s-.716.326-1.21.508c-.495.182-1.16.365-1.16.365s-2.62-3.21-6.428-1.306-2.576 6.197-2.576 6.197-3.25.112-7.095-1.83z" fill="%23009DDD" fill-rule="evenodd"/></svg>');
    background-size: contain;
}

.btn-pin {
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml;utf8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M20 0C8.958 0 0 8.954 0 20c0 8.188 4.925 15.226 11.974 18.318-.056-1.395-.01-3.074.346-4.593.385-1.623 2.572-10.897 2.572-10.897s-.637-1.277-.637-3.165c0-2.964 1.72-5.177 3.858-5.177 1.817 0 2.697 1.366 2.697 3.003 0 1.828-1.167 4.563-1.767 7.096-.5 2.124 1.064 3.852 3.157 3.852 3.79 0 6.342-4.866 6.342-10.633 0-4.381-2.953-7.662-8.322-7.662-6.066 0-9.846 4.522-9.846 9.575 0 1.745.513 2.972 1.318 3.923.371.44.42.613.286 1.117-.094.365-.315 1.254-.406 1.604-.134.506-.544.689-1 .5-2.796-1.14-4.097-4.2-4.097-7.641 0-5.68 4.792-12.496 14.293-12.496 7.637 0 12.663 5.53 12.663 11.459 0 7.846-4.361 13.708-10.793 13.708-2.157 0-4.189-1.167-4.886-2.492 0 0-1.161 4.608-1.406 5.497-.424 1.541-1.254 3.083-2.013 4.283 1.8.532 3.7.821 5.668.821C31.046 40 40 31.046 40 20S31.046 0 20 0" fill="%23009DDD" fill-rule="nonzero"/></svg>');
    background-size: contain;
}

.btn-you {
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml;utf8,<svg width="39" height="39" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M39.01 19.505c0 10.772-8.733 19.504-19.505 19.504C8.733 39.01 0 30.277 0 19.505 0 8.733 8.733 0 19.505 0 30.277 0 39.01 8.733 39.01 19.505z" fill="%23009DDD"/><path d="M30.933 14.921V12.455a.955.955 0 0 0-.952-.953h-3.093l-.049.001H9.03a.955.955 0 0 0-.953.953v14.099c0 .524.429.952.953.952h3.092c.03 0 .06-.001.09-.004h14.6l.077.003h3.093a.955.955 0 0 0 .952-.952V14.92zM17.218 23.37v-8.607l6.528 4.304-6.528 4.303z" fill="%23FFFFFF"/></g></svg>');
    background-size: contain;
}

.btn-li:hover {
    width: 40px;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg width='43' height='43' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 36'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.852 26.474v-7.02c0-3.76-2.01-5.51-4.69-5.51-2.162 0-3.131 1.188-3.671 2.021v-1.734h-4.075c.055 1.149 0 12.243 0 12.243h4.075v-6.838c0-.365.026-.73.134-.991.294-.732.964-1.489 2.09-1.489 1.474 0 2.063 1.123 2.063 2.768v6.55h4.074zM12.125 12.563c1.42 0 2.305-.942 2.305-2.118-.026-1.202-.885-2.116-2.278-2.116s-2.305.914-2.305 2.116c0 1.176.885 2.118 2.252 2.118h.026zm6.625 23.416c-9.941 0-18-8.05-18-17.98S8.809.022 18.75.022c9.94 0 18 8.049 18 17.979s-8.06 17.979-18 17.979zm-4.588-9.505V14.232h-4.074v12.242h4.074z' fill='%23E63325'/%3E%3C/svg%3E%0A");
    background-size: contain;
}

.btn-insta:hover {
    background: url('data:image/svg+xml;utf8,<svg width="43" height="43" xmlns="http://www.w3.org/2000/svg"><g fill="%23E63325" fill-rule="nonzero"><path d="M27.94 11.496H15.149a3.705 3.705 0 0 0-3.703 3.702v12.79a3.707 3.707 0 0 0 3.703 3.704h12.79a3.709 3.709 0 0 0 3.703-3.705V15.198a3.707 3.707 0 0 0-3.702-3.702zm-6.397 16.746a6.658 6.658 0 0 1-6.649-6.65 6.658 6.658 0 0 1 6.649-6.648 6.656 6.656 0 0 1 6.649 6.649 6.658 6.658 0 0 1-6.65 6.649zm6.864-11.923a1.574 1.574 0 0 1 0-3.147c.866 0 1.573.707 1.573 1.574 0 .868-.707 1.573-1.573 1.573z"/><path d="M21.543 17.755a3.842 3.842 0 0 0-3.838 3.838 3.844 3.844 0 0 0 3.838 3.84 3.845 3.845 0 0 0 3.84-3.84 3.844 3.844 0 0 0-3.84-3.838z"/><path d="M21.543.077C9.693.077.086 9.684.086 21.535c0 11.85 9.607 21.457 21.457 21.457C33.393 42.992 43 33.385 43 21.535 43 9.685 33.393.077 21.543.077zm12.908 27.91a6.519 6.519 0 0 1-6.511 6.514H15.149a6.52 6.52 0 0 1-6.514-6.514V15.198a6.522 6.522 0 0 1 6.514-6.513h12.79c3.591 0 6.512 2.923 6.512 6.513v12.79z"/></g></svg>');
    background-size: contain;
}

.btn-fb:hover {
    background: url('data:image/svg+xml;utf8,<svg width="43" height="43" xmlns="http://www.w3.org/2000/svg"><path class="fill" d="M21.5 43C9.626 43 0 33.374 0 21.5S9.626 0 21.5 0 43 9.626 43 21.5 33.374 43 21.5 43zm2.587-35.379c-.903 0-1.77.109-2.781.506-2.06.83-3.107 2.781-3.107 5.815v2.962h-2.89v4.949h2.89V36.12h5.888V21.853h4.01l.541-4.949h-4.551v-2.24c0-.686.072-1.191.253-1.48.253-.434.758-.65 1.553-.65h2.673V7.62h-4.48z" fill="%23E63325" fill-rule="evenodd"/></svg>');
    background-size: contain;
}

.btn-tw:hover {
    background: url('data:image/svg+xml;utf8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M20 40C8.954 40 0 31.046 0 20S8.954 0 20 0s20 8.954 20 20-8.954 20-20 20zm-5.88-25.122c-3.844-1.942-4.778-3.696-4.778-3.696s-.597 1.045-.336 2.987c.262 1.941 2.098 4.439 2.098 4.439l-2.21-.893s.112 1.232.97 2.502c.86 1.27 3.884 2.874 3.884 2.874l-2.875.038s.261.597 1.307 1.605c1.045 1.008 3.957 1.904 3.957 1.904s-2.048 1.434-3.472 1.979c-1.424.544-3.659.672-3.659.672s3.328 2.07 8.438 1.568c5.11-.503 8.627-2.89 11.349-6.87 2.722-3.978 2.464-9.146 2.464-9.146s.298-.343 1.021-1.006c.723-.663.946-.989.946-.989l-1.807.192 1.173-2.095s-.716.326-1.21.508c-.495.182-1.16.365-1.16.365s-2.62-3.21-6.428-1.306-2.576 6.197-2.576 6.197-3.25.112-7.095-1.83z" fill="%23E63325" fill-rule="evenodd"/></svg>');
    background-size: contain;
}

.btn-pin:hover {
    background: url('data:image/svg+xml;utf8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M20 0C8.958 0 0 8.954 0 20c0 8.188 4.925 15.226 11.974 18.318-.056-1.395-.01-3.074.346-4.593.385-1.623 2.572-10.897 2.572-10.897s-.637-1.277-.637-3.165c0-2.964 1.72-5.177 3.858-5.177 1.817 0 2.697 1.366 2.697 3.003 0 1.828-1.167 4.563-1.767 7.096-.5 2.124 1.064 3.852 3.157 3.852 3.79 0 6.342-4.866 6.342-10.633 0-4.381-2.953-7.662-8.322-7.662-6.066 0-9.846 4.522-9.846 9.575 0 1.745.513 2.972 1.318 3.923.371.44.42.613.286 1.117-.094.365-.315 1.254-.406 1.604-.134.506-.544.689-1 .5-2.796-1.14-4.097-4.2-4.097-7.641 0-5.68 4.792-12.496 14.293-12.496 7.637 0 12.663 5.53 12.663 11.459 0 7.846-4.361 13.708-10.793 13.708-2.157 0-4.189-1.167-4.886-2.492 0 0-1.161 4.608-1.406 5.497-.424 1.541-1.254 3.083-2.013 4.283 1.8.532 3.7.821 5.668.821C31.046 40 40 31.046 40 20S31.046 0 20 0" fill="%23E63325" fill-rule="nonzero"/></svg>');
    background-size: contain;
}

.btn-you:hover {
    background: url('data:image/svg+xml;utf8,<svg width="39" height="39" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M39.01 19.505c0 10.772-8.733 19.504-19.505 19.504C8.733 39.01 0 30.277 0 19.505 0 8.733 8.733 0 19.505 0 30.277 0 39.01 8.733 39.01 19.505z" fill="%23E63325"/><path d="M30.933 14.921V12.455a.955.955 0 0 0-.952-.953h-3.093l-.049.001H9.03a.955.955 0 0 0-.953.953v14.099c0 .524.429.952.953.952h3.092c.03 0 .06-.001.09-.004h14.6l.077.003h3.093a.955.955 0 0 0 .952-.952V14.92zM17.218 23.37v-8.607l6.528 4.304-6.528 4.303z" fill="%23FFFFFF"/></g></svg>');
    background-size: contain;
}

.has-line {
    position: relative;
    transition: all 0.3s ease-in-out;
}

.has-line::after {
    /* content: "";
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    transition: all 0.4s ease-in-out; */
}

.has-line:hover {
    opacity: 0.5;
}


.has-line:hover::after {
    width: 100%;
}

/* Custom utilities */

.element-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.img-responsive {
    max-width: 100%;
    height: auto;
}

.has-overlay {
    position: relative;
}

.has-overlay::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(27, 40, 73, 0.25);
}

.service-row .dot:last-child {
    display: none;
}
 
/* Slider */
.slider-proj-wrap {
    /* margin-bottom: -70px; */
}

.proj-box:hover {
    cursor: url(../images/red-pattern.svg), auto;
}

.bg-blue .proj-box:hover .proj-title {
    color: #fff;
    opacity: 0.75;
}

.js-tilt {
    transform-style: preserve-3d;
}

.proj-img {
    height: 0;
    padding-bottom: 80%;
}

.proj-img-1 {
    background: url(../images/cover2.jpg) no-repeat;
    background-size: cover;
}

.proj-img-2 {
    background: url(../images/cover3.jpg) no-repeat;
    background-size: cover;
}

.proj-img-3 {
    background: url(../images/cover4.jpg) no-repeat;
    background-size: cover;
}

.proj-img-4 {
    background: url(../images/cover5.jpg) no-repeat;
    background-size: cover;
}

.proj-meta {
    bottom: 0px;
    left: 0;
    right: 0;
    padding: 32px;
    transform: translateZ(20px);
    color: #fff;
    position: absolute;
    width: 100%;
}

.proj-title {
    transition: all 0.2s ease-in-out;
}

.proj-box:hover .proj-title {
    color: #0EA3DF;
}

.slick-arrow {
    position: absolute;
    bottom: 0px;
    transform: translateY(-50%);
    height: 48px;
    width: 48px;
    /* background: url("data:image/svg+xml,%3Csvg width='47' height='29' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(3 2)' fill='none' fill-rule='evenodd'%3E%3Cpath stroke='%231B2849' stroke-width='3' stroke-linecap='round' d='M12.728 25.456L0 12.728 12.728 0'/%3E%3Crect fill='%25231B2849' y='11' width='44' height='3' rx='1.5'/%3E%3C/g%3E%3C/svg%3E") center no-repeat; */
    background-image: url("data:image/svg+xml,%3Csvg width='47' height='29' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(3 2)' fill='none' fill-rule='evenodd'%3E%3Cpath stroke='%231B2849' stroke-width='3' stroke-linecap='round' d='M12.728 25.456L0 12.728 12.728 0'/%3E%3Crect fill='%231B2849' y='11' width='44' height='3' rx='1.5'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    text-indent: 100%;
    overflow: hidden;
    border-radius: 100%;
    z-index: 3;
    transition: all 0.2s ease-in-out;
}

.slick-arrow:focus {
    outline: none;
}

.slick-next {
    right: 50%;
    transform: translateY(-50%) rotate(180deg);
    margin-right: -70px;
}

.slick-prev {
    left: 50%;
    margin-left: -70px;
}



@media (min-width: 770px) {
 .slick-prev:hover {
     margin-left: -80px;
 }

 .slick-next:hover {
     margin-right: -80px;
 }
}


.slider-dot {
    width: 20px;
    height: 20px;
    background: #E63325;
    border-radius: 100%;
    position: absolute;
    bottom: 38px;
    left: 50%;
    margin-left: -10px;
    transform: scale(1);
    transition: all 0.2s ease-in-out;
}

.slider-dot.is-active {
    transform: scale(0.75);
}

.slick-dots {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.slick-dots li {
    text-indent: 100%;
    overflow: hidden;
    width: 8px;
    height: 8px;
    background: #E7E7E7;
    display: inline-block;
    margin-right: 8px;
    border-radius: 100%;
}

.slick-dots li.slick-active {
    background: #31C09A;
}

.slick-track {
    padding-bottom: 20px;
}

/* Forms*/
.form-control {
    border: 2px solid #E7E7E7;
    transition: all 0.2s ease-in-out;
}

div.wpcf7-mail-sent-ok {
    border: 2px solid #0EA3DF !important;
    border-radius: 3px;
}

.form-control:active,
.form-control:focus {
    border: 2px solid #0EA3DF;
    outline: none;
}

/* Grids */

/* Mobile navigation  */
.logo-wrap:hover .logo-icon-left {
    /* transform: translateX(50px); */
    animation: logo 0.5s ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.logo-wrap:hover .logo-icon-right {
    animation: logo-right 0.5s ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes logo {
    0% {transform: translateX(0px);}
    50% {transform: translateX(50px);}
    100% {transform: translateX(0px);}
}

@keyframes logo-right {
    0% {transform: translateX(0px);}
    50% {transform: translateX(-52px);}
    100% {transform: translateX(0px);}
}

.logo-icon {
    width: 46px;
    height: 46px;
    background:url(../images/logo-left.svg) no-repeat center;
    background-size: contain;
    transition: all 0.2s ease-in-out;
}

.logo-icon-right {
    background:url(../images/logo-right.svg) no-repeat center;
    /* display: none; */
}

body.nav-open {
    overflow: hidden;
}

.nav-mobile {
    background: #fff;
    position: fixed;
    height: 100vh;
    top: 0;
    left: 10%;
    width: 90%;
    z-index: 100;
    /* display: none; */
    transform: translateX(100%);
    transition: all 0.4s ease-in-out;
	line-height: 50px;
}

.nav-mobile-cover {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(65,69,111,0.25);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: 20;
    pointer-events: none;
}

.nav-open .nav-mobile {
    display: block;
    transform: translateX(0);
}

.nav-open .nav-mobile-cover {
    opacity: 1;
    left: 0;
    
}

.nav-main {
    display: none;
}


.btn-nav {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 4px;
    right: 6px;
    transition-duration: 0.25s;
    z-index: 20;
    display: block;
}

.btn-nav .icon {
    transition-duration: 0.25s;
    position: absolute;
    height: 3px;
    width: 26px;
    top: 30px;
    border-radius: 10px;
    background-color: #0EA3DF;
}

.btn-nav .icon:before {
    transition-duration: 0.25s;
    position: absolute;
    width: 26px;
    height: 3px;
    background-color: #0EA3DF;
    content: "";
    border-radius: 10px;
    top: -10px;
}

.btn-nav .icon:after {
    transition-duration: 0.25s;
    position: absolute;
    width: 26px;
    height: 3px;
    background-color: #0EA3DF;
    content: "";
    border-radius: 10px;
    top: 10px;
    right: 0;
}

.nav-open .btn-nav .icon {
    transition: 0.25s;
    background: transparent;
}

.nav-open .icon:before {
    -webkit-transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
    transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
}

.nav-open .icon:after {
    -webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
    transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
}

.btn-nav:hover {
    cursor: pointer;
}

@media (min-width: 768px) {
    .nav-main {
        display: block;
    }
    .nav-main,
    .nav-main a {
        cursor: url(../images/dot.svg), auto;
    }
    .btn-nav {
        display: none;
    }
}

/* Dropdown */

.dropdown {
    width: 220px;
    right: 0;
    transform: translateY(-2px);
    transition: all 0.2s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

.has-dropdown {
    position: relative;
}

.has-dropdown:hover .dropdown {
    opacity: 1;
    transform: translateY(0px);
    pointer-events: initial;
}

.has-menu {
    position: relative;
    z-index: 50;
}

.has-menu.is-open .btn-toggle {
    transform: rotate(180deg);
}

.menu {
    top: 44px;
    transform: translateY(-5px);
    transition: all 0.2s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

.has-menu.is-open .menu {
    transform: translateY(0px);
    pointer-events: initial;
    opacity: 1;
}

/* Contact page */

.contact-img {
    height: 0;
    padding-bottom: 670px;
    width: 100%;
}

.contact-map {
    height: 400px;
    background: url(../images/map.png) no-repeat center center;
    background-size: cover;
}

.contact-map iframe {
    height: 400px;
    width: 100%;
}

.contact-map-img {
    height: 0;
    padding-bottom: 400px;
}

.contact-bubble {
    width: 200px;
    height: 200px;
    background-image: url("data:image/svg+xml,%3Csvg width='201' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M185.703 153.059l13.17 28.363a2 2 0 0 1-2.558 2.698l-27.304-10.956C151.06 189.814 126.976 200 100.5 200 44.995 200 0 155.228 0 100S44.995 0 100.5 0 201 44.772 201 100c0 19.491-5.604 37.68-15.297 53.059z' fill='%230EA3DF' fill-rule='evenodd'/%3E%3C/svg%3E"); 
    transform: translateZ(20px)
}

.contact-bubble-1 {
    left: -20px;
    top: 65px;
}

.contact-bubble-2 {
    right: -20px;
    top: 85px;
    background-image: url("data:image/svg+xml,%3Csvg width='201' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.297 153.059l-13.17 28.363a2 2 0 0 0 2.558 2.698l27.304-10.956C49.94 189.814 74.024 200 100.5 200c55.505 0 100.5-44.772 100.5-100S156.005 0 100.5 0 0 44.772 0 100c0 19.491 5.604 37.68 15.297 53.059z' fill='%23E63325' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.pattern-contact {
    left: -40px;
    bottom: 100px;
}

.deco-contact-blue {
    top: -100px;
    transform: rotate(180deg)
}

.red-pattern-4 {
    top: -80px;
}

/* Project details */

.proj-header {
    height: 400px;
}

.btn-scroll {
    position: absolute;
    left: 50%;
}

.proj-wrap {
    margin-top: -200px;
}

.header-main,
.header-inner {
    overflow-x: hidden;
}

@media (min-width: 770px) {
    .proj-header {
        height: 600px;
    }
    .header-inner {
        min-height: 600px
    }
}





/* About us */
.approach-wrap {
    background-color: #0F0D0C;
    background-image: url(https://www.2inbeweging.nl/wp-content/uploads/2026/03/2inB-Danielle-Portret1-scaled.jpg), url(https://www.2inbeweging.nl/wp-content/uploads/2026/03/2inB-Martin-portret1-scaled.jpg);
    background-position: left bottom, right bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: 180px 250px, 180px 250px;
    height: 440px;
}

@media (min-width: 770px) {
    .approach-wrap {
        background-position: left center, right center;
        background-repeat: no-repeat, no-repeat;
        background-size: contain, contain;
        height: 600px;
    }
}


.approach-text {
    top: 20%; 
}

.approach-text-left {
    left: 20px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    /* transform-origin: center; */
}

.approach-text-right {
    right: 20px;
    writing-mode: vertical-rl;
    /* transform: rotate(90deg); */
    /* transform-origin: bottom right; */
}
.approach-wheel {
    margin-top: -40px;
    z-index: 10px;
}

@media (min-width: 770px) {
    .approach-wheel {

    }
}


.approach-wheel:hover {
    /* transform: rotate(120deg);
    transform-origin: center; */
}

.approach-img {
    width: 326px;
    height: 326px;
}

.approach-wheel-center {
    width: 177px;
    height: 177px;
    background: #0EA3DF;
    background-size: cover;
    border-radius: 100%;
    top: 75px;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.2s ease-in-out;
}

.approach-wheel-center::before {
    content:"";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background:  url(https://www.2inbeweging.nl/wp-content/uploads/2026/03/2inB-M-D-Portret1-scaled.jpg) no-repeat center;
    background-size: cover;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}


.approach-wheel-center:hover {
    color: rgba(256,256,256,0)
}

.approach-wheel-center:hover::before {
    opacity: 1;
} 

@media (min-width: 770px) {
    .approach-img {
        width: 526px;
        height: 526px;
    }
    .approach-wheel-center {
        width: 277px;
        height: 277px;
        top: 124px;
    }
}


.approach-img #pie1-group,
.approach-img #pie2-group,
.approach-img #pie3-group {
    cursor: pointer;
}

svg.approach-img #pie1,
svg.approach-img #pie2,
svg.approach-img #pie3 {
    transition: all 0.2s ease-in-out;
}

svg.approach-img #pie1-group:hover #pie1 {
    opacity: 0;
}
svg.approach-img #pie2-group:hover #pie2 {
    opacity: 0;
}
svg.approach-img #pie3-group:hover #pie3 {
    opacity: 0;
}

.approach-img {
    transition: all 1.5s ease-in-out;
}

/* .one-top #pie1 {
    opacity: 0;
}
.two-top #pie2 {
    opacity: 0;
}
.three-top #pie3 {
    opacity: 0;
} */

.proj-quote {
    margin-top: -200px;
}

.slider-quotes {
    padding: 40px 0 70px;
    margin-top: -100px;
    margin-bottom: -54px;
    /* background: #000; */
}

.slider-quotes .slick-next,
.slider-quotes .slick-prev {
    bottom: -30px;
}

.slider-quotes .slider-dot {
    bottom: 8px;
}

.slide-quote {
    padding: 0 36px;
    margin-top: 0;
    z-index: 10;
}

.slide-quote::after {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 100%;
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    background: #E63325;
}

/* Header Image */
.h-image {
    height: 0;
    width: 100%;
    padding-bottom: 66%;
    /* overflow: hidden; */
}

.h-image video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.h-image-video {
    padding-bottom: 56.2%;
}

.h-image-wrap .deco-white {
    top: -30px;
    left: -30px;
    position: absolute;
}

.h-image-wrap .deco-red {
    bottom: -30px;
    right: -30px;
    position: absolute;
}



.deco-white-1 {
    bottom: 40px;
    z-index: 1;
    right: -20px;
    pointer-events: none;
}

@media (min-width: 770px) {
    /* .h-image {
        width: 100%;
        height: 0;
        padding-bottom: 66%;
    } */
}

@media (min-width: 992px) {
    /* .h-image {
        width: 760px;
        height: 540px;
    } */
}

@media (min-width: 1200px) {
    /* .h-image {
        width: 660px;
        height: 440px;
    } */
}

/* Effects */
.fly-left {
    transform: translateX(-80px) rotateY(60deg) skewY(7deg);
    transition: all 1.4s cubic-bezier(.48,0,.12,1);
    opacity: 0;
}

.fly-right {
    transform: translateX(80px) rotateY(-60deg) skewY(-7deg);
    /* transition: all 0.4s ease-in-out; */
    transition: all 1.4s cubic-bezier(.48,0,.12,1);
    opacity: 0;
}

.fly-right.is-active,
.fly-left.is-active {
    transform: translateX(0) rotateY(0deg) skewY(0deg);
    opacity: 1;
}

.fly-up {
    /* transform: 0 */
}

.has-delay-1 {
    transition-delay: 0.1s;
}


/*Page Load*/
.fade-in-load {
	opacity: 0;
}

.fade-up-load {
	transform: translateY(20px);
	opacity: 0;
}

.fade-down-load {
	transform: translateY(-20px);
	opacity: 0;
}

.fade-in-load-left,
.fade-in-load-right {
    opacity: 0;
}

.has-loaded .fade-in-load-left {
	animation: fadeSideLeft 1s cubic-bezier(0.22, 1, 0.36, 1);
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
}

.has-loaded .fade-in-load-right {
	animation: fadeSideRight 1s cubic-bezier(0.22, 1, 0.36, 1);
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
}


@keyframes fadeSideLeft {
	0% {
		opacity: 0;
		transform: translateX(-80px) rotateY(60deg) skewY(7deg);
	}
	100% {
		opacity: 1;
		transform: translateX(0) rotateY(0deg) skewY(0deg);
	}
}

@keyframes fadeSideRight {
	0% {
		opacity: 0;
		transform: translateX(80px) rotateY(-60deg) skewY(-7deg);
	}
	100% {
		opacity: 1;
		transform: translateX(0) rotateY(0deg) skewY(0deg);
	}
}


.has-loaded .has-load-delay-1 {
	animation-delay: 0.2s;
}

.has-loaded .has-load-delay-2 {
	animation-delay: 0.4s;
}

.has-loaded .has-load-delay-3 {
	animation-delay: 0.6s;
}

.has-loaded .has-load-delay-4 {
	animation-delay: 0.8s;
}

/* Men walking  */
.men-wrap {
    padding-top: 20px;
}

.men {
    
}

.man {
    transform: translateX(-200px); 
}

.is-active .man {
    animation: walk 1.2s forwards ease-in-out;
}

.men .man:nth-child(5) {
    animation-delay: 0.1s;
}
.men .man:nth-child(4) {
    animation-delay: 0.2s;
}
.men .man:nth-child(3) {
    animation-delay: 0.3s;
}
.men .man:nth-child(2) {
    animation-delay: 0.4s;
}
.men .man:nth-child(1) {
    animation-delay: 0.5s;
}


.is-active .bubble {
    animation: grow 0.5s forwards ease-in-out;
    animation-delay: 1.2s;
}

.bubble {
    transform: translateY(-10px) translateX(0px) scale(0);
    transform-origin: bottom left;
    opacity: 0;
   
}


@keyframes walk {
    0% {transform: translateX(-200px);}
    100% {transform: translateX(0px)};
}

@keyframes grow {
    0% {transform: translateX(-30px) translateY(-20px) scale(0); opacity: 1;}
    100% {transform: translateX(0px) translateY(-20px) scale(1); opacity: 1;};
}



/* Featherlight */

/* ------------------------------------------------------------------------ */
/*  MODALS
/* ------------------------------------------------------------------------ */
.featherlight {
    /* padding: 40px; */
}

.featherlight-iframe .featherlight-content {
    position: relative;
    text-align: left;
    vertical-align: middle;
    display: inline-block;
    padding: 0;
    border-bottom: 0px solid transparent;
    margin-left: 0;
    margin-right: 0; 
    max-height: 800px;
    width: 100%;
    background: #000;
    cursor: auto;
    white-space: normal;
    box-shadow:0 0 15px 0px rgba(0, 0, 0, 0.12);
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}



.featherlight-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}



.featherlight-next, 
.featherlight-previous {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: auto;
    height: 50px;
    width: 50px;
    display: block;
    background-color: rgba(0,0,0,0.15);
    opacity: 1;
    visibility: visible;
    opacity: 0;
    border-radius: 100px;
    transition: all 0.2s ease-in-out;
}

.featherlight .featherlight-content:hover .featherlight-next, 
.featherlight .featherlight-content:hover .featherlight-previous {
	opacity: 1;
}

.has-loaded .featherlight-previous {
    left: 20px;
    right: auto;
}

.has-loaded .featherlight-next {
    left: auto;
    right: 20px;
}

.has-loaded .featherlight-previous:hover,
.has-loaded .featherlight-next:hover {
	background-color: rgba(0,0,0,0.25);
}

.has-loaded .featherlight-next span, 
.has-loaded .featherlight-previous span {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
    width: 20px;
    text-align: left;
    font-size: 20px;
    line-height: 20px;
    margin-top: 0%;
    text-shadow: none;
    color: #fff;
    font-style: normal;
    font-weight: 400;
}

.has-loaded .featherlight-next span {
	width: 12px;
}

/* .has-loaded .featherlight .featherlight-close-icon {
    position: absolute;
    z-index: 999;
    top: 10px;
    right: 10px;
    line-height: 40px;
    width: 40px;
    cursor: pointer;
    text-align: center;
    font-family: Helvetica, Arial,sans-serif;
    background:#0EA3DF;
    color: #fff;
    border-radius: 100px;
    font-size: 18px;
    border: 0;
    padding: 0;
    transition: all 0.2s ease-in-out;
}

.has-loaded .featherlight .featherlight-close-icon:hover {
	background: #E63325;
} */

/* --- Mobile nav: bullets weg + extra ruimte tussen items --- */
.nav-mobile ul,
.nav-mobile ul li {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.nav-mobile .menu-item {
    margin-bottom: 1.25rem;
}

.nav-mobile .menu-item:last-child {
    margin-bottom: 0;
}

/* --- Contact bubbles hoger plaatsen --- */
.contact-bubble-1 {
    top: -20px;
}

.contact-bubble-2 {
    top: -20px;
}