*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

@font-face {font-family: IsidoraSans-Medium; src: url("../fonts/Isidora_Sans/IsidoraSans-Medium.otf");}
@font-face {font-family: IsidoraSans-SemiBold; src: url("../fonts/Isidora_Sans/IsidoraSans-SemiBold.otf");}
@font-face {font-family: IsidoraSans-Bold; src: url("../fonts/Isidora_Sans/IsidoraSans-Bold.otf");}
@font-face {font-family: IsidoraSans-Black; src: url("../fonts/Isidora_Sans/IsidoraSans-Black.otf");}

:root{
  --color-primario: #043F56;
}
/*:root {
  --color-primario: #007bff; celeste claro
                    #17718D     celeste ascensores
                    #043F56     azul ascensores
*/
/*
var(--color-primario);
assets/css/style.css:    background: #0038AE;

*/

h1, h2, h3, h4, p, a, b  {padding: 0; margin: 0; font-weight: 400; letter-spacing: normal;}
li, ul {padding: 0; margin: 0; list-style: none;}
h1.center, h2.center, h3.center, h4.center, p.center {text-align: center;}

h1          {font-size: 66px; line-height: 66px; text-transform: uppercase; font-family: 'IsidoraSans-Black', sans-serif; margin-bottom: 50px;}
h2          {font-size: 34px; margin-bottom: 30px; font-family: 'IsidoraSans-Bold', sans-serif;}
h3          {font-size: 14px; color: rgba(23, 28, 33, 0.7); text-transform: uppercase; letter-spacing: 5px; margin-bottom: 30px;}
h4          {font-size: 24px; line-height: 24px; font-family: 'IsidoraSans-Black', sans-serif; text-transform: uppercase;}
p           {font-size: 17px; color: rgba(23, 28, 33, 0.8); line-height: 26px; margin-bottom: 30px;}
strong      {font-family: 'IsidoraSans-Bold', sans-serif; color: #171C21;}
a           {text-decoration: none; outline: 0;}
p a         {text-decoration: underline; color: var(--color-primario);}
p a:hover   {color: var(--color-primario);}

main.dark strong {color: #fff;}
main.dark p a, main.dark p a:hover {color: #FF4D0F;}

@media screen and (max-width: 1220px){
    h1 {font-size: 54px !important; line-height: 54px !important;}
    h2 {font-size: 28px !important; line-height: 32px !important;}
    h3 { font-size: 13px !important;}
    p  {font-size: 16px !important; line-height: 26x !important; margin-bottom: 26px !important;}
}

@media screen and (max-width: 1040px){
    h1 {}
    h2 {}
    h3 {}
    p  {}
}

@media screen and (max-width: 640px){
    h1 { font-size: 38px; line-height: 38px;}
    h2 { font-size: 24px; line-height: 28px; margin-bottom: 20px;}
    h3 {}
    p  {}
}

body {
    font-family: 'IsidoraSans-Medium', sans-serif;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 400;
    background: #FFF;
    color: #171C21;
    -webkit-font-smoothing: antialiased;
    top: 0;
    left: 0;
}

html, body {
    width: 100%;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

::-webkit-scrollbar {
    display: none;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ------------------------- All -------------------------------------------------- */

.section {
    float: left;
    width: 100%;
    position: relative;
    background: #FFF;
    padding-top: 120px;
    padding-bottom: 120px;
}

.wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
}

.wrap-wide {
    max-width: 1220px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
}

.wrap-text {
    max-width: 740px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
}

.sub-wrap {
    width: 50%;
    position: relative;
    float: left;
}

.sub-wrap.spaced:first-child {
    width: calc(50% - 30px);
    margin-right: 30px;
}

.sub-wrap.spaced:last-child {
    width: calc(50% - 30px);
    margin-left: 30px;
}

.stripe {
    background: #E0E1E5;
    width: 100%;
    height: 1px;
    float: left;
}

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

    .section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .wrap {
        max-width: 980px;
        padding-right: 60px;
        padding-left: 60px;
    }

    .wrap-text {
        max-width: 680px;
    }
}

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

    .section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

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

    .sub-wrap {
        width: 100%;
    }

    .sub-wrap.spaced:first-child {
        width: 100%;
        margin-right: 0;
    }

    .sub-wrap.spaced:last-child {
        width: 100%;
        margin-left: 0;
    }
}

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

    .wrap {
        padding-right: 30px;
        padding-left: 30px;
    }
}

/* ------------------------- Textblock -------------------------------------------------- */


.textblock img {
    width: 100%;
    float: left;
}

.textblock figure {
    width: 100%;
    margin-bottom: 40px;
    margin-top: 15px;
    float: left;
}

.textblock figure:last-child {
    margin-bottom: 0px;
}

.textblock figcaption {
    margin-top: -20px;
    text-align: center;
    font-size: 14px;
    margin-bottom: 40px;
    color: rgba(23, 28, 33, 0.6);
}

.textblock figcaption:last-child {
    margin-bottom: 0px;
}

.textblock h3 {
    margin-bottom: 10px;
    letter-spacing: 4px;
}

.textblock p {
    opacity: 1;
    color: rgba(23, 28, 33, 0.8);
    margin-bottom: 30px;
}

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

.textblock a {
    color: var(--color-primario);
    text-decoration: none;
}

.textblock a:hover {
    color: #FF4D0F;
}

.textblock ul {
    padding-bottom: 30px;
    display: inline;
    width: 100%;
    float: left;
}

.textblock ul:last-child {
    padding-bottom: 0px;
}

.textblock ol {
    padding-bottom: 30px;
    display: inline;
    width: 100%;
    padding-left: 15px;
    float: left;
}

.textblock ol:last-child {
    padding-bottom: 0px;
}

.textblock ul li {
    padding-left: 24px;
    margin-bottom: 10px;
    position: relative;
    line-height: 26px;
    color: rgba(23, 28, 33, 0.8);
}

.textblock ol li {
    padding-left: 10px;
    list-style: decimal;
    margin-bottom: 10px;
    position: relative;
    color: rgba(23, 28, 33, 0.8);
    line-height: 26px;
    margin-bottom: 10px;
}

.textblock ul li:before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--color-primario);
    position: absolute;
    left: 0;
    top: 9px;
    border-radius: 3px;
}

@media screen and (max-width: 1220px){
}

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

}

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

}


/* ------------------------- Buttons -------------------------------------------------- */

.btn, .textblock .btn {
    height: 70px;
    color: #fff;
    display: inline-block;
    padding: 18px 40px 22px 40px;
    position: relative;
    font-size: 17px;
    line-height: 30px;
    text-decoration: none;
    background: var(--color-primario);
    overflow: hidden;
    font-family: 'IsidoraSans-SemiBold', sans-serif;
    border-radius: 35px;
    margin-right: 5px;
    margin-bottom: 10px;
    width: auto;
}

.btn:last-child {
    margin-bottom: 0;
}

.btn:hover, .textblock .btn:hover, .btn:focus, .textblock .btn:focus {
    cursor: pointer;
    transform: scale(.95);
    color: #fff;
    border-radius: 35px;
}

.btn.orange, .textblock .btn.orange {
    background: #FF4D0F;
    color: #fff;
}

.btn.orange:hover, .textblock .btn.orange:hover, .btn.orange:focus, .textblock .btn.orange:focus {
    color: #fff;
    border-radius: 35px;
}

.btn.dark, .textblock .btn.dark {
    background: #171C21;
    color: #fff;
}

.btn.dark:hover, .textblock .btn.dark:hover {
    color: #fff;
}

.btn.transparent {
    background: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn.transparent:hover {
    border: 1px solid rgba(255, 255, 255, .8);
}

.btn.white {
    background: transparent;
    border: 1px solid #E7EBEB;
    color: #171C21;
}

.btn.white:hover {
    color: #171C21;
}

.btn.gray {
    background: #E7EBEB;
    color: #171C21;
}

.btn.gray:hover {
    color: #171C21;
}


.btn .play-btn-svg {
    transform: translate(3px, 3px);
    margin-left: 10px;
}

@media screen and (max-width: 1220px){
    .btn {
        height: 60px;
        padding: 13px 30px 17px 30px;
        font-size: 16px;
        background: var(--color-primario);
        border-radius: 30px;
    }
}

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

}

@media screen and (max-width: 640px){
    .btn {
        margin-bottom: 10px;
    }
}

/* ------------------------- Dark Overlay -------------------------------------------------- */

.dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .6;
    background: #171C21;
    z-index: 6;

    background: #000;
    opacity: .4;
}

/* ------------------------- Social Icons / Socials -------------------------------------------------- */

.social-ico-block {
    text-align: center;
}

.social-ico {
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-block;
    background: #171C21;
    border-radius: 15px;
}

.social-ico .social-ico-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.8);
}

.social-ico .social-ico-svg .ico-fill {
    fill: #FFF;
}

.social-ico:hover {
    background: #FF4D0F;
    transform: scale(.9);
}

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

}

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

}

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

}

/* ------------------------- GDPR - Cookies Accept -------------------------------------------------- */

#gdpr-box {
    position: fixed;
    right: 40px;
    bottom: -100%;
    background: #fff;
    z-index: 15;
    padding: 30px 35px 27px 35px;
    -webkit-box-shadow: 0px 100px 200px 0px rgba(35,36,45,0.3);
    -moz-box-shadow: 0px 100px 200px 0px rgba(35,36,45,0.3);
    box-shadow: 0px 100px 200px 0px rgba(35,36,45,0.3);
    border-radius: 4px;
}

#gdpr-box.active {
    bottom: 40px;
    display: block;
}

.gdpr-text {
    float: left;
    line-height: 18px;
    max-width: 250px;
    font-size: 13px;
    padding: 3px 0;
    padding-left: 5px;
}

.gdpr-text span {
    opacity: .8 ;
    padding: 12px 0 0 0;
    float: left;
}

.gdpr-text a {
    color: #23242D;
    text-decoration: underline;
}

.gdpr-text a:hover {
    color: #FF4D0F;
}

.gdpr-button {
    right: 40px;
    height: 30px;
    padding-left: 20px;
    position: absolute;
}

.gdpr-button-accept {
    float: left;
    font-size: 15px;
    padding: 5px 15px 9px 15px;
    height: 30px;
    text-transform: uppercase;
    line-height: 16px;
    font-family: 'IsidoraSans-Black', sans-serif;
}

#gdpr-box.notactive  {
    transform: translate(0px, calc(100% + 80px));
}

#gdpr-box.notactive {
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}

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

}

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

}

@media screen and (max-width: 640px){
    #gdpr-box {
        position: fixed;
        right: 50%;
        transform: translate(50%, 0);
        width: 315px;
    }

    #gdpr-box.notactive  {
        transform: translate(50%, calc(100% + 80px));
    }

    #gdpr-box.active {
        bottom: 40px;
        display: block;
    }
}



/* ------------------------- Page Transition -------------------------------------------------- */

.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 30;
    pointer-events: none;
}

.loading-screen {
    position: relative;
    padding: 0;
    background: var(--color-primario);
    width: 100%;
    height: 100%;
    left: 0;
}

.loading-screen .logo-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}

.loading-container .rec-shape-svg {
    transform: translate(-1px, 0);
}

.loading-container .rec-shape-svg.before {
    transform: scale(-1, -1) translate(-1px, 0);
}

.loading-screen .svg-fill {
    fill: var(--color-primario);
}

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

}

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

}

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

}

/* ------------------------- Circle Text -------------------------------------------------- */

.circle-text {
    width: 150px;
    height: 150px;
    background: var(--color-primario);
    padding: 20px;
    position: relative;
    border-radius: 75px;
    position: absolute;
}

.circle-text svg {
    float: left;
    transform: rotate(115deg);
}

.circle-text svg path {
    fill: transparent;
}

.circle-text svg textPath {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 4px;
    font-family: 'IsidoraSans-Bold', sans-serif;
    text-align: center;
    fill: #fff;
}

.circle-text.white {
    background: #fff
}

.circle-text.white svg textPath {
    fill: #FF4D0F;
}

.circle-text.orange {
    background: #FF4D0F
}

.circle-text.orange svg textPath {
    fill: #fff;
}

.circle-text.small {
    width: 110px;
    height: 110px;
    border-radius: 55px;
    padding: 15px;
}

.circle-text.small svg textPath{
    font-size: 13px;
    letter-spacing: 3px;
}

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

}

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

}

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

}

/* ------------------------- Image -------------------------------------------------- */

.image {
    float: left;
    width: 100%;
    position: relative;
}

.image .image-container {
    float: left;
    position: relative;
    width: 100%;
    background: #E7EBEB;
    overflow: hidden;
}

.image .image-container:before {
    content: "";
    padding-top: 40%;
    display: block;
}

.image .image-block {
    position: absolute;
    width: 101%;
    height: 101%;
    left: -0.5%;
    top: -0.5%;
}


.image-block.image-in {
    height: 200%;
    width: 200%;
    left: -50%;
    top: -50%;
    opacity: 0;
    transition-delay: .25s;
}

.image-block.image-in.appear {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 1;
}

.image.square .image-container:before {
    padding-top: 100%;
}

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

}

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

}

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

}

/* ------------------------- Text + Image -------------------------------------------------- */

.textimage {
    padding-top: 150px;
    padding-bottom: 150px;
}

.textimage .wrap {
    padding: 0;
    display: flex;
}

.textimage .sub-wrap {
    padding: 0 30px;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    order: 2;
}

.textimage .sub-wrap.true {
    order: 3;
}

.textimage .sub-wrap.false {
    order: 1;
}

.textimage .textimage-textblock {
    float: left;
    width: 100%;
}

.textimage .textimage-textblock p:last-child {
    margin-bottom: 0;
}

.textimage .circle-text {
    top: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 1220px){
    .textimage {
        padding-top: 90px;
        padding-bottom: 100px;
    }
}

@media screen and (max-width: 1040px){
    .textimage {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .textimage .wrap {
        padding: 0 30px;
    }
}

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


    .textimage .wrap {
        display: block;
        padding: 0 60px;
    }

    .textimage .sub-wrap {
        display: block;
    }

    .textimage .sub-wrap:first-child {
        padding-bottom: 40px;
    }

    .textimage .circle-text {
        top: 0;
        left: 50%;
    }

}

@media screen and (max-width: 640px){
    .textimage .wrap {
        display: block;
        padding: 0;
    }

    .textimage .circle-text {
        display: none;
    }
}

/* ------------------------- Default Header -------------------------------------------------- */

.default-header {
    padding-top: 240px;
    padding-bottom: 100px;
}

.header-title-wrap {
    width: 100%;
    min-height: 220px;
    float: left;
    position: relative;
}

.header-title-wrap-block {
    width: 100%;
    top: 50%;
    position: absolute;
    transform: translate(0%, -50%);
    z-index: 10;
}

.header-image-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(10, 10, 14, 0.3);
    z-index: 1;
}

.default-header p:last-child {
    margin: 0;
}


.default-header h1:last-child {
    margin-bottom: 15px;
}

.default-header .left-text, nav .left-text {
    position: absolute;
    top: 45%;
    transform: translate(0, -50%);
    left: 45px;
    margin: 0;
    width: 30px;
    opacity: .7;
}

.default-header .left-text span, nav .left-text span {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    position: absolute;
    line-height: 30px;
    width: 300px;
    height: 30px;
    display: block;
    text-align: center;
}

main.dark .default-header .left-text {
    color: #fff;
    opacity: .7;
}

nav .left-text span {
    color: #fff;
}

.scroll-indicator {
    position: absolute;
    top: calc(100vh - 120px);
    left: 52px;
    width: 14px;
    height: 80px;
    z-index: 10;
}

.scroll-indicator svg {
    animation: scroll 2s ease-in-out;
    animation-iteration-count: infinite;
    float: left;
    margin-bottom: 8px;
    fill: var(--color-primario);
}

.scroll-indicator svg path {
    fill: var(--color-primario);
}

.scroll-indicator svg:nth-child(2) {animation-delay: .1s;}
.scroll-indicator svg:nth-child(3) {animation-delay: .2s;}
.scroll-indicator svg:nth-child(4) {animation-delay: .3s;}

main.dark .scroll-indicator svg path {
    fill: #FFF;
}

@keyframes scroll {
    0% {opacity: 0;}
    20% {opacity: 1;}
    40% {opacity: 0;}
    100% {opacity: 0;}
}

.background-art {
    position: absolute;
    top: 0;
    left: calc(50% + 260px);
    transform: translate(-50%, 0);
    pointer-events: none;
    overflow: hidden;
    height: 650px;
    width: 400px;
}

.background-art svg {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: .15;
}

.background-art svg path {
    stroke-width: 1;
    stroke: #171C21;
}


@media screen and (max-width: 1220px){
    .default-header .left-text, nav .left-text {
        display: none;
    }

    .default-header {
        padding-top: 220px;
        padding-bottom: 100px;
    }
}

@media screen and (max-width: 1040px){
    .scroll-indicator {
        left: auto;
        right: 30px;
    }
}

@media screen and (max-width: 640px){
    .scroll-indicator {
        display: none;
    }

    main#home .scroll-indicator, main#single-project .scroll-indicator {
        display: block;
    }


    .default-header {
        padding-top: 200px;
        padding-bottom: 60px;
        overflow: hidden;
    }

    .header-title-wrap-block {
        position: relative;
        transform: translate(0, 0);
        top: 0;
    }
}


/* ------------------------- Default Header - Full Height -------------------------------------------------- */

.default-header.full-height, main.dark .default-header.full-height {
    height: 100vh;
    padding: 0;
}

.default-header.full-height .header-title-wrap-block {
    top: 50%;
    position: absolute;
    transform: translate(0%, -50%);
}

.default-header.full-height .header-title-wrap {
    height: 100vh;
}

.header-photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 66%;
    height: 100%;
    background: #171C21;
    z-index: 1;
    opacity: 1;
}

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

}

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

}

@media screen and (max-width: 640px){
}


/* ------------------------- Footer -------------------------------------------------- */


main#error .footer, main#default .footer {
    display: none;
}

/* ------------------------- Video Modal -------------------------------------------------- */


.video-modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(23, 28, 33, 0.9);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
}

.video-modal-bg .close-btn {
    width: 60px;
    height: 60px;
    background: #fff;
    top: 40px;
    right: 40px;
    position: absolute;
    border-radius: 30px;
}

.video-modal-bg .close-btn svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-modal-bg .close-btn:hover {
    transform: scale(.9);
}

.video-modal-bg.active {
    opacity: 1;
    visibility: visible;
}

.video-modal-bg:hover {
    cursor: pointer;
}

.video-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 980px;
    z-index: 41;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(.95);
}

.video-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.video-modal div {
    width: 100%;
    position: absolute;
}

@media screen and (max-width: 1260px){
    .video-modal-bg .close-btn {
        display: none;
    }
}

@media screen and (max-width: 1040px){
    .video-modal {
        width: calc(100% - 60px);
    }
}

@media screen and (max-width: 640px){
    .video-modal {
        width: 100%;
    }

    .video-modal-bg {
        background: rgba(23, 28, 33, 0.97);
    }
}


/* ------------------------- Image Slider -------------------------------------------------- */

.image-slider {
    overflow: hidden;
}

.image-slider .swiper-container {
    overflow: visible;
}

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

}

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

}

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

}

/* ------------------------- Slider Next/Prev Button -------------------------------------------------- */

.slider-next-button, .slider-prev-button  {
    width: 90px;
    height: 90px;
    background: #fff;
    top: 50%;
    transform: translate(0, -50%);
    position: absolute;
    outline: none;
    z-index: 8;
}

.slider-next-button svg, .slider-prev-button svg {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.slider-next-button {
    right: -1px;
}

.slider-prev-button {
    left: -1px;
}

.slider-prev-button svg {
    transform: translate(-50%, -50%) rotate(-180deg);
}

.slider-next-button:hover, .slider-prev-button:hover  {
    cursor: pointer;
}
.slider-next-button:hover svg path, .slider-prev-button:hover svg path{
    fill: var(--color-primario);
}

.slider-next-button.swiper-button-disabled, .slider-prev-button.swiper-button-disabled {
    opacity: 0 !important;
    visibility: hidden !important;
}

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

}

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

}

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

    .image-slider .wrap-wide {
        padding-right: 0;
    }
    .slider-next-button, .slider-prev-button  {
        width: 60px;
        height: 60px;
    }

    .image-slider .swiper-container {
        overflow: hidden;
    }
}

/* ------------------------- Footer -------------------------------------------------- */

.footer {
    background: var(--color-primario);
    padding: 0;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

.footer .top-part {
    position: absolute;
    width: 100%;
    background: #fff;
    top: 0;
    left: 0;
    height: 180px;
}

/* --- Prefooter ---  */

.footer .prefooter {
    width: 100%;
    float: left;
    background: #171C21;
    position: relative;
    text-align: center;
    padding: 100px 0 80px 0;
    overflow: hidden;
}

.footer .prefooter .prefooter-block {
    position: relative;
    display: inline-block;
    width: 540px;
    transition: all .75s cubic-bezier(0.87, 0, 0.13, 1);
}

.footer .prefooter .prefooter-block.animate-in {
    transform: scale(.7);
    opacity: 0;
    display: inline-block;
}

.footer .prefooter .prefooter-block.animate-in.appear {
    transform: scale(1);
    opacity: 1;
}

.footer .prefooter .prefooter-block.animate-in.appear .btn{
    animation: btnBounce 2.5s ease-in-out;
    animation-delay: 1.5s;
}

@keyframes btnBounce {
    0% {padding: 18px 40px 22px 40px;}
    5% {padding: 18px 50px 22px 50px;}
    10% {padding: 18px 40px 22px 40px;}
    15% {padding: 18px 45px 22px 45px;}
    20% {padding: 18px 40px 22px 40px;}
}

.footer .prefooter h4 {
    font-size: 36px;
    line-height: 42px;
    margin-bottom: 30px;
}

.footer .prefooter .footer-img {
    top: 50%;
    left: 90px;
    width: 120px;
    height: 120px;
    border-radius: 60px;
    position: absolute;
    transform: translate(0, -50%);
}

.footer .prefooter svg {
    position: absolute;
    right: 30px;
    pointer-events: none;
    top: 50%;
    transform: translate(0, -50%);
}

.footer .prefooter svg path {
    stroke: #fff;
    opacity: .25;
}

/* --- Footer Dark BG ---  */

main#projects .prefooter, main#single-project .prefooter, main#services .prefooter{
    background: #fff;
    color: #171C21;
}

main#projects .footer .top-part, main#single-project .footer .top-part, main#services .footer .top-part{
    background: #171C21;
}

main#projects .prefooter svg path, main#single-project .prefooter svg path, main#services .prefooter svg path{
    stroke: #171C21;
    opacity: .15;
}

/* --- Credentials ---  */

.footer .credentials {
    float: left;
    width: 100%;
    padding: 120px 0;
}

.footer .credentials .sub-wrap {
    width: 33.333%;
}

.footer .credentials h4 {
    font-size: 21px;
    margin-bottom: 10px;
}

.footer .credentials li, .footer .credentials li a {
    font-size: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    line-height: 26px;
}

.footer .credentials li a:hover {
    color: #fff;
}

/* --- Credentials Top ---  */

.footer .credentials-top {
    padding-bottom: 0;
}

.footer .credentials-bottom {
    padding-top: 60px;
}

/* --- Afterfooter ---  */

.footer .afterfooter {
    float: left;
    width: 100%;
    padding: 0 0 50px 0;
}

.footer .afterfooter .sub-wrap:first-child {
    text-align: left;
    padding-left: 50px;
}

.footer .afterfooter .sub-wrap:first-child li {
    margin-right: 20px;
}

.footer .afterfooter .sub-wrap:last-child {
    text-align: right;
    padding-right: 160px;
}

.footer .afterfooter .sub-wrap:last-child li {
    margin-left: 20px;
}


.footer .afterfooter li, .footer .afterfooter li a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 30px;
    display: inline-block;
}

.footer .afterfooter li a {
    color: #fff;
}

.footer .afterfooter li a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.footer .afterfooter .social-ico-block {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
}

/* --- Logo right bottom ---  */

.footer .rec-shape-footer {
    height: 300px;
    right: 0;
    bottom: 0;
    width: 140px;
    position: absolute;
    z-index: 2;
}

.footer .rec-shape-footer .rec-shape-svg{
    left: auto;
    right: -1px;
    top: 1px;
    transform: scale(-1, -1);
}

.footer .rec-shape-footer .svg-fill {
    fill: #fff;
}

.footer .logo-svg-footer {
    position: absolute;
    bottom: 38px;
    right: 38px;
}

@media screen and (max-width: 1220px){
    .footer .prefooter h4 {
        font-size: 28px;
        line-height: 32px;
        margin-bottom: 30px;
    }

    .footer .credentials h4 {
        font-size: 18px;
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 1040px){
    .footer .prefooter .prefooter-block {
        width: 100%;
        padding: 0 200px;
    }

    .footer .prefooter .footer-img {
        left: 60px;
    }

    .footer .credentials {
        padding: 100px 0 60px 0;
    }

    .footer .afterfooter {
        padding: 0 0 30px 0;
    }

    .footer .afterfooter .sub-wrap:last-child, .footer .afterfooter .sub-wrap:first-child {
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

    .footer .afterfooter .sub-wrap:first-child li, .footer .afterfooter .sub-wrap:last-child li {
        margin: 0 10px;
    }

    .footer .afterfooter .social-ico-block {
        position: relative;
        margin: 5px 0;
        float: left;
    }
}

@media screen and (max-width: 840px){
    .footer .prefooter {
        padding-top: 170px;
        padding-bottom: 60px;
    }

    .footer .prefooter .footer-img {
        left: 50%;
        transform: translate(-50%, 0);
        top: 60px;
        width: 90px;
        height: 90px;
    }

    .footer .prefooter .prefooter-block {
        padding: 0 40px 0 40px;
    }

    .footer .credentials .sub-wrap {
        width: 100%;
        margin-bottom: 30px;
    }

    .footer .credentials .sub-wrap:last-child {
        margin-bottom: 0px;
    }

    .footer .prefooter .prefooter-block.animate-in.appear .btn{
        animation: none;
    }

    /* --- Credentials Top ---  */

    .footer .credentials-top {
        padding-bottom: 0;
    }

    .footer .credentials-bottom {
        padding-top: 30px;
    }
}

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

    .rec-shape-footer {
        display: none;
    }

    .footer .credentials {
        padding: 70px 0 70px 0;
    }


    .footer .credentials-top {
        padding-bottom: 0;
    }

    .footer .credentials-bottom {
        padding-top: 30px;
    }

    .footer .prefooter svg {
        right: 60px;
        transform: translate(100%, -50%);
    }
}

/* ------------------------- Breadcrumb -------------------------------------------------- */

.breadcrumb {
    position: absolute;
    left: 50%;
    transform: translate(-50%,0 );
    height: 30px;
    top: 55px;
}

.breadcrumb li {
    float: left;
    padding-right: 40px;
    position: relative;
}

.breadcrumb li a {
    line-height: 30px;
    float: left;
    color: rgba(23, 28, 33, 0.6);
    font-size: 15px;
}

.breadcrumb li:before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 7px;
    right: 10px;
    background: url("../img/arrow-small-right.svg") center center no-repeat;
}

.breadcrumb li.active a {
    font-family: 'IsidoraSans-SemiBold', sans-serif;
    color: #171C21;
}

.breadcrumb li:last-child{
    padding-right: 0;
}

.breadcrumb li:last-child:before {
    display: none;
}

.breadcrumb li a:hover {
    color: #FF4D0F;
}

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

}

@media screen and (max-width: 1040px){
    .breadcrumb {
        opacity: 0;
        visibility: hidden;
    }
}

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

}

/* ------------------------- Home - Video BG -------------------------------------------------- */

.home-header-bg.video {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: hidden;
    background: #171C21;
}

.home-header-bg.video .video-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    height: 0;
    width: 100%;
    padding: 0;
    padding-bottom: 56.25%;
}

.home-header-bg.video .video-wrapper iframe {
    height: calc(100% + 5px);
    width: 100%;
    position: absolute;
    top: -5px;
    left: 0;
    bottom: 0;
    pointer-events: none;
}

.video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #171C21;
    z-index: 1;
    opacity: 1;
}

.home-header-bg.loaded .video-thumbnail {
    opacity: 0;
}

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

}

@media screen and (max-width: 1040px){
}

@media screen and (max-width: 840px){
    .home-header-bg.video {
        position: absolute;
    }

    .home-header-bg.loaded .video-thumbnail,  .home-header-bg .video-thumbnail {
        opacity: 1;
    }

    .home-header-bg .video-wrapper, .home-header-bg .video-wrapper iframe {
        display: none;
    }
}

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

}

/* ------------------------- Home - Header -------------------------------------------------- */

main#home .default-header {
    overflow: hidden;
    background: #171C21;
}

main#home h1 {
    font-size: 110px;
    line-height: 110px;
    color: #fff;
    margin-bottom: 45px;
}

main#home .default-header p {
    font-size: 21px;
}

.rec-shape {
    width: calc((100% - 1020px) / 2);
    height: 100%;
    position: absolute;
    z-index: 9;
    left: 0;
    top: 0;
    background: var(--color-primario);
}

.rec-shape-svg {
    position: absolute;
    left: 100%;
    width: auto;
    height: 100%;
    top: 0;
    left: 100%;
    transform: translate(-.5px, -.5px);
}

.rec-shape-svg.before {
    left: auto;
    right: 100%;
    transform: scale(-1, -1);
}

.play-shape-header {
    top: 50%;
    right: 0;
    position: absolute;
    transform: translate(0, -50%);
    opacity: .5;
    pointer-events: none;
}

@media screen and (max-width: 1220px){
    main#home h1 {
        font-size: 94px;
        line-height: 94px;
        margin-bottom: 30px;
    }
}

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

}

@media screen and (max-width: 840px){
    .play-shape-header {
        display: none;
    }

    main#home h1 {
        font-size: 72px;
        line-height: 72px;
    }
}

@media screen and (max-width: 640px){
    main#home h1 {
        font-size: 46px;
        line-height: 46px;
        margin-bottom: 40px;
    }

    main#home .default-header {
        height: 80vh;
    }

    main#home .home-header-bg.video {
        height: 80vh;
    }

    main#home .scroll-indicator {
        top: calc(80vh - 120px);
    }

    main#home .default-header.full-height .header-title-wrap-block {
        top: 45%;
    }
}

/* ------------------------- Home - Intro -------------------------------------------------- */

.home-intro {
    background: 0;
    overflow: hidden;
    padding: 200px 0;
}

.home-intro svg {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
}

.home-intro .sub-wrap:first-child {
    padding-right: 30px;
}

@media screen and (max-width: 1220px){
    .home-intro {
        padding: 160px 0;
    }
}

@media screen and (max-width: 1040px){
    .home-intro svg {
        left: 40%;
    }
}

@media screen and (max-width: 840px){
    .home-intro svg {
        display: none;
    }

    .home-intro {
        padding: 80px 0 50px 0;
        background: #fff;
    }
}

@media screen and (max-width: 640px){
    .home-intro {
        padding: 55px 0 30px 0;
        background: #fff;
    }
}

/* ------------------------- Error - Header -------------------------------------------------- */

main#default .default-header, main#error .default-header{
    color: #fff;
}

main#default .default-header .left-text, main#error .default-header .left-text{
    color: #fff;
}

main#default .default-header h1, main#error .default-header h1{
    font-size: 72px;
    line-height: 72px;
}

main#default .default-header p, main#error .default-header p{
    font-size: 21px;
}

main#default .default-header .circle-text, main#error .default-header .circle-text{
    right: 0;
    top: 10px;
}

.header-image-overlay {
    background: linear-gradient(90deg, rgba(23,28,33,1) 0%, rgba(23,28,33,0.5956757703081232) 100%);
}

@media screen and (max-width: 1220px){
    main#default .default-header h1, main#error .default-header h1{
        font-size: 54px;
        line-height: 54px;
    }
}

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

}

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

}

/* ------------------------- About - Header -------------------------------------------------- */

main#about-us .default-header {
    padding-bottom: 240px;
}

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

}

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

}

@media screen and (max-width: 640px){
    main#about-us .default-header {
        padding-bottom: 60px;
    }

    main#about-us .header-title-wrap {
        min-height: auto;
    }
}

/* ------------------------- About - Intro -------------------------------------------------- */

.about-image {
    background: #E7EBEB;
    padding: 0;
}

.about-image .wrap-wide {
    margin-top: -140px;
}

.about-image .image-container:before {
    padding-top: 33.333%;
}

.about-image .circle-text {
    transform: translate(0,-50%);
    right: 200px;
    right: 20%;
}

.home-intro .sub-wrap:first-child {
    padding-right: 30px;
}

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

}

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

}

@media screen and (max-width: 840px){
    .home-intro .sub-wrap:first-child {
        padding-right: 0;
    }
}

@media screen and (max-width: 640px){
    .about-image .circle-text {
        display: none;
    }

    .about-image .wrap-wide {
        padding: 0;
        margin-top: 0;
    }

    .about-image .image-container:before {
        padding-top: 50%;
    }
}

/* ------------------------- About - Numers -------------------------------------------------- */

.numbers {
    background: #E7EBEB;
    text-align: center;
}

.numbers-block {
    border-right: 1px solid #C2C7C7;
    width: 100%;
    height: 200px;
    float: left;
    margin-top: 10px;
}

.numbers-block .single-number {
    float: left;
    width: 25%;
    border-left: 1px solid #C2C7C7;
    height: 100%;
    padding: 40px 0;
}

.numbers-block .single-number h2 {
    font-size: 64px;
    line-height: 64px;
    color: var(--color-primario);
    margin-bottom: 20px;
}

.numbers-block .single-number p {
    margin-bottom: 0;
}

@media screen and (max-width: 1220px){
    .numbers-block .single-number h2 {
        font-size: 54px;
        line-height: 54px;
    }
}

@media screen and (max-width: 1040px){
    .numbers-block {
        border-right: 0px solid #C2C7C7;
    }

    .numbers-block .single-number:first-child {
        border-left: 0px solid #C2C7C7;
    }
}

@media screen and (max-width: 640px){
    .numbers-block {
        height: 300px;
    }
    .numbers-block .single-number {
        width: 50%;
        height: 50%;
        padding: 30px 0;
    }

    .numbers-block .single-number:nth-child(3) {
        border-left: 0px solid #C2C7C7;
        border-top: 1px solid #C2C7C7;
    }

    .numbers-block .single-number:nth-child(4) {
        border-top: 1px solid #C2C7C7;
    }

    .numbers-block .single-number h2 {
        margin-bottom: 5px;
    }
}

/* ------------------------- About - Slider -------------------------------------------------- */

.about-slider {
    text-align: center;
    padding-bottom: 0;
}

.about-slider .wrap-text {
    margin-bottom: 60px;
}

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

}

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

}

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

}


/* ------------------------- About - Team -------------------------------------------------- */

.about-team {
    background: #171C21;
    text-align: center;
    color: #fff;
    z-index: -2;
    padding-bottom: 60px;
}

.about-team h2 {
    margin-bottom: 60px;
}

.about-team h3 {
    color: rgba(255, 255, 255, 0.5);
}

.about-team .wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.about-team .teammember {
    width: 240px;
    text-align: center;
    position: relative;
    padding-bottom: 60px;
}

.about-team .photo-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding-bottom: 30px;
}

.about-team .photo {
    height: 160px;
    width: 160px;
    border-radius: 80px;
    background: #23242D;
    position: relative;
}

.about-team .photo:after {
    content: "";
    height: 160px;
    width: 160px;
    border-radius: 80px;
/*    border: 1px solid #fff;*/
    display: block;
    transform: translate(15px, 15px);
    position: absolute;
    z-index: -1;
    opacity: .25;
}

.about-team h4 {
    margin-bottom: 10px;
}

.about-team p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

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

}

@media screen and (max-width: 840px){
    .about-team {
        padding-bottom: 0px;
    }
}

@media screen and (max-width: 640px){
}

/* ------------------------- Projects - Header -------------------------------------------------- */


main#projects .default-header, main#services .default-header {
    background: #171C21;
    color: #fff;
    text-align: center;
}

main#projects .default-header h1, main#services .default-header h1 {
    margin-bottom: 40px;
    font-size: 92px;
    line-height: 92px;
}

main#services .default-header h1 {
    font-size: 82px;
    line-height: 82px;
}

main#projects .default-header h1.outlined, main#services .default-header h1.outlined {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 30%);
    z-index: -1;
    opacity: .25;
    -webkit-text-stroke: 1px #fff;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
    width: 100%;
}

main#projects .default-header h1.outlined.animate-in, main#services .default-header h1.outlined.animate-in {
    transform: translate(-50%, 0);
    transition: all 1s cubic-bezier(0.87, 0, 0.13, 1);
    transition-delay: .75s;
}

main#projects .default-header h1.outlined.animate-in.appear, main#services .default-header h1.outlined.animate-in.appear {
    transform: translate(-50%, 30%);
}

main#projects .default-header p, main#services .default-header p {
    color: rgba(255, 255, 255, 0.8);
}

main#services .services-grid {
    background: #171C21;
    padding-top: 0;
    padding-bottom: 50px;
}

@media screen and (max-width: 1220px){
    main#projects .default-header h1, main#serviecs .default-header h1 {
        font-size: 68px;
        line-height: 68px;
    }
}

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

}

@media screen and (max-width: 640px){
    main#projects .default-header h1, main#services .default-header h1 {
        font-size: 48px;
        line-height: 48px;
    }
}

/* ------------------------- Projects - Grid -------------------------------------------------- */

.projects-grid {
    padding-top: 0;
    background: #171C21;
}

.projects-grid ul {
    float: left;
    width: 100%;
    position: relative;
}

.projects-grid ul li {
    float: left;
    width: 100%;
    margin-bottom: 40px;
    position: relative;
}

.projects-grid ul li a {
    float: left;
    width: 100%;
    height: 320px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.projects-grid .project-textblock {
    width: 380px;
    top: 50%;
    position: absolute;
    transform: translate(0, -50%);
    left: 90px;
    z-index: 8;
}

.projects-grid .project-textblock h3 {
    margin-bottom: 10px;
    color: #fff;
    transition: all .5s cubic-bezier(0.87, 0, 0.13, 1);
    transition-delay: .25s;
}

.projects-grid .project-textblock h2 {
    margin: 0;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 38px;
    font-family: 'IsidoraSans-Black', sans-serif;
}

.projects-grid .project-shape {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 180px;
    background: #171C21;
    transition: all .5s cubic-bezier(0.87, 0, 0.13, 1);
    transition-delay: .25s;
    z-index: 7;
}

.projects-grid .project-shape .svg-fill {
    fill: #171C21;
    transition: all .5s cubic-bezier(0.87, 0, 0.13, 1);
    transition-delay: .25s;
}

.projects-grid span {
    position: absolute;
    right: 90px;
    top: 50%;
    transform: translate(0, -61%);
    color: rgba(255, 255, 255, 0);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
    font-size: 320px;
    line-height: 320px;
    font-family: 'IsidoraSans-Black', sans-serif;
    z-index: 6;
    text-align: right;
}

.projects-grid .circle-text {
    position: absolute;
    left: calc(100% + 68px);
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg) scale(.5);
    opacity: 0;
    z-index: 9;
    background: #FF4D0F;
    transition: all .5s cubic-bezier(0.87, 0, 0.13, 1);
    transition-delay: 0s;
}

.projects-grid .dark-overlay {
    z-index: 5;
}

/* --- Hover --- */

.projects-grid ul li a:hover .project-shape {
    width: 50%;
    background: var(--color-primario);
    transition-delay: 0s;
}

.projects-grid ul li a:hover .project-shape .svg-fill  {
    fill: var(--color-primario);
    transition-delay: 0s;
}

.projects-grid ul li a:hover .project-textblock h3 {
    color: #fff !important;
    transition-delay: 0s;
}

.projects-grid ul li a:hover .circle-text {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
    transition-delay: .15s;
}

@media screen and (max-width: 1220px){
    .projects-grid .project-textblock h2 {
        font-size: 28px;
        line-height: 32px;
    }

    .projects-grid ul li a {
        height: 260px;
    }
}

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

    .projects-grid span {
        right: 30px;
        font-size: 240px;
        line-height: 240px;
    }
}

@media screen and (max-width: 640px){
    .projects-grid span {
        right: 0;
        transform: translate(50%, -61%);
    }

    .projects-grid .circle-text {
        display: none;
    }

    .projects-grid ul li a:hover .project-shape {
        background: #171C21;
        width: 180px;
    }

    .projects-grid ul li a:hover .project-shape .svg-fill  {
        fill: #171C21;
    }

}

/* ------------------------- Projects - Grid (recent) -------------------------------------------------- */

.projects-grid.recent {
    padding-top: 120px;
    padding-bottom: 100px;
}

.projects-grid.recent.single-project-recent {
    padding-top: 120px;
    padding-bottom: 120px;
}

.projects-grid.recent .wrap-text {
    text-align: center;
}

.projects-grid.recent .wrap-text h3{
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 60px;
}

.projects-grid.recent .wrap-text .btn{
    margin-top: 60px;
}

.projects-grid.recent ul li {
    float: left;
    width: calc(50% - 15px);
    margin-bottom: 0px;
    margin-right: 30px;
}

.projects-grid.recent ul li:last-child {
    margin-right: 0;
}

.projects-grid.recent .project-textblock {
    left: 70px;
}

.projects-grid.recent .project-textblock h2 {
    font-size: 32px;
    line-height: 34px;
}

.projects-grid.recent span {
    right: 0;
    transform: translate(50%, -61%);
    text-transform: uppercase;
}

/* --- Hover --- */

.projects-grid.recent ul li a:hover .project-shape {
    width: calc(100% - 160px);
}

@media screen and (max-width: 1220px){
    .projects-grid.recent .project-textblock h2 {
        font-size: 28px;
        line-height: 32px;
    }

    .projects-grid.recent {
        padding-top: 80px;
        padding-bottom: 60px;
    }

    .projects-grid.recent.single-project-recent {
        padding-top: 80px;
        padding-bottom: 80px;
    }

}

@media screen and (max-width: 1040px){
    .projects-grid.recent .project-textblock h2 {
        font-size: 24px;
        line-height: 28px;
    }

    .projects-grid .project-textblock {
        width: calc(100% - 160px);
        left: 40px;
    }

    .projects-grid.recent {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .projects-grid.recent.single-project-recent {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

@media screen and (max-width: 840px){
    .projects-grid.recent ul li {
        width: 100%;
        margin: 0;
        margin-bottom: 30px;
    }

    .projects-grid.recent ul li:last-child {
        width: 100%;
        margin-bottom: 0px;
    }

    .projects-grid.recent .wrap-text h3 {
        margin-bottom: 30px;
    }

    .projects-grid.recent .wrap-text .btn {
        margin-top: 30px;
    }

}

@media screen and (max-width: 640px){
    .projects-grid.recent .project-textblock {
        left: 0px;
        width: calc(100% - 60px);
    }

    .projects-grid .project-textblock {
        left: 0px;
        width: calc(100% - 60px);
    }

    .projects-grid.recent span {
        font-size: 220px;
        line-height: 220px;
    }

    .projects-grid.recent ul li a:hover .project-shape {
        width: 180px;
    }

}

/* ------------------------- Single Project - Header -------------------------------------------------- */

main#single-project .default-header {
    background: #171C21;
    color: #fff;
    height: calc(100vh + 60px);
}

main#single-project .scroll-indicator {
    top: calc(100vh - 180px);
}

main#single-project .default-header .dark-overlay {
    background: linear-gradient(90deg, rgba(23,28,33,1) 0%, rgba(23,28,33,0.6) 100%);
    width: calc(66% + 1px);
    left: auto;
    right: 0;
    opacity: 1;
}

main#single-project .default-header .sub-wrap {
    width: 60%;
}

main#single-project .default-header .sub-wrap .case-info {
    float: left;
    height: 70px;
    padding: 5px 40px 5px 0;
}

main#single-project .default-header .sub-wrap h3{
    margin-bottom: 0;
    line-height: 27px;
    color: #fff;
}

main#single-project .default-header .sub-wrap p{
    line-height: 27px;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
}

.default-header .bottom-bar {
    width: calc((100% - 1160px) / 2 + 1160px);
    height: 120px;
    background: #fff;
    bottom: 0;
    left: 0;
    z-index: 9;
    position: absolute;
}

.letter-block {
    position: absolute;
    right: calc((100% - 1160px) / 2 - 60px);
    top: 50%;
    transform: translate(0, -50%);
    z-index: 9;
    pointer-events: none;
    width: 560px;
    height: 400px;
}

.letter-block svg {
    float: left;
    width: 560px;
    height: 400px;
    position: absolute;
    z-index: 9;
}

.big-letter {
    color: #171C21;
    font-size: 540px;
    line-height: 540px;
    font-family: 'IsidoraSans-Black', sans-serif;
    text-align: center;
    text-transform: uppercase;
}

.big-letter-back {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(calc(-50% - -30px), calc(-61% - -10px));
    color: rgba(255, 255, 255, 0);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
    font-size: 540px;
    line-height: 540px;
    font-family: 'IsidoraSans-Black', sans-serif;
    text-align: center;
    z-index: 8;
    text-transform: uppercase;
}

.big-letter-back.animate-in {
    transform: translate(calc(-50% - -1px), calc(-61% - 18px));
    transition: all 1s cubic-bezier(0.87, 0, 0.13, 1);
    transition-delay: .75s;
}

.big-letter-back.animate-in.appear {
    transform: translate(calc(-50% - -30px), calc(-61% - -10px));
}


@media screen and (max-width: 1440px){
    main#single-project .default-header {
        height: calc(100vh + 90px);
    }

    main#single-project .scroll-indicator {
        top: calc(100vh - 150px);
    }

    .letter-block {
        top: calc(50% + -30px);
    }
}

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

}

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

}

@media screen and (max-width: 840px){
    .letter-block {
        display: none;
    }

    main#single-project .default-header .sub-wrap {
        width: 100%;
    }

    main#single-project .default-header {
        height: 80vh;
    }

    main#single-project .scroll-indicator {
        top: calc(80vh - 120px);
    }

    .default-header .bottom-bar {
        display: none;
    }
    main#single-project .default-header.full-height .header-title-wrap-block {
        top: 47%;
    }
}

@media screen and (max-width: 640px){
    main#single-project .default-header .sub-wrap .case-info {
        height: 60px;
        padding: 0px 40px 0px 0;
        margin-bottom: 20px;
    }

    main#single-project .default-header .dark-overlay {
        width: 100%;
    }

    .header-photo {
        width: 100%;
    }
}


/* ------------------------- Single Project - Intro -------------------------------------------------- */

.project-intro {
    padding-top: 0;
    padding-bottom: 0;
}

.project-intro h2 {
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 10px;
}

.project-intro p:last-child {
    margin-bottom: 0;
}

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

}

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

}

@media screen and (max-width: 840px){
    .project-intro {
        padding-top: 60px;
    }

    .project-intro .sub-wrap:first-child {
        margin-bottom: 30px;
    }
}

/* ------------------------- Single Project - Quotes -------------------------------------------------- */

.quotes {
    background: #E7EBEB;
    text-align: center;
    padding-top: 140px;
    padding-bottom: 150px;
}

.quotes .swiper-pointer-events {
    overflow: hidden;
}

.margin_true {
    margin-bottom: 120px;
}

#single-service-alt .quotes {
    background: #FFF;
}

.quotes .slider-next-button {
    right: 30px;
}

.quotes .slider-prev-button {
    left: 30px;
}

.quotes p {
    font-size: 21px;
    line-height: 30px;
    font-family: 'IsidoraSans-SemiBold', sans-serif;
    color: #171C21;
}

.quotes span  {
    color: rgba(23, 28, 33, 0.7);
}

@media screen and (max-width: 1220px){
    .quotes {
        padding-top: 120px;
        padding-bottom: 130px;
    }

    .margin_true {
        margin-bottom: 80px;
    }
}

@media screen and (max-width: 1040px){
    .quotes {
        padding-top: 100px;
        padding-bottom: 110px;
    }

    .quotes .wrap-text {
        max-width: calc(100% - 180px);
    }

    .quotes .slider-next-button {
        right: 0px;
    }

    .quotes .slider-prev-button {
        left: 0px;
    }

    .margin_true {
        margin-bottom: 60px;
    }
}

@media screen and (max-width: 840px){
    .quotes .wrap-wide {
        padding: 0;
    }
}

@media screen and (max-width: 640px){
    .quotes .wrap-text {
        max-width: 100%;
    }

    .quotes p, .quotes span {
        font-size: 16px;
        line-height: 24px;
    }

    .quotes {
        padding-top: 60px;
        padding-bottom: 150px;
    }

    .quotes .slider-next-button {
        right: 50%;
        bottom: -30px;
        top: auto;
        transform: translate(100%, 100%);
    }

    .quotes .slider-prev-button {
        left: 50%;
        bottom: -30px;
        top: auto;
        transform: translate(-100%, 100%);
    }
}

/* ------------------------- Single Project - More Projects -------------------------------------------------- */

.recent-projects {
    background: #171C21;
}

#single-project .projects-grid.recent .dark-overlay{
    width: 100%;
    background: #000;
    opacity: .4;
}

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

}

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

}

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

}

/* ------------------------- Single Service - Header -------------------------------------------------- */

.service-header:after{
    content: "";
    position: absolute;
    width: 100%;
    bottom: -1px;
    height: 1px;
    background: #E7EBEB;
    left: 0;
}

.service-header .wrap{
    display: flex;
}

main#single-service-sub .service-header {
    margin-bottom: 150px;
}

main#single-service-alt .service-header {
    margin-bottom: 150px;
}

.service-header .wrap .sub-wrap{
    display: flex;
    flex-flow: row wrap;
    align-content: center;
}

.single-service-photo-back {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50% - 80px);
    background: #E7EBEB;
    height: 100vh;
}

.single-service-back {
    position: absolute;
    top: 0;
    width: calc(50vw + 80px);
    height: 100vh;
    background: #fff;
    left: 0;
}

.single-service-back .svg-fill {
    fill: #fff;
}

.single-service-thumb {
    width: 100%;
    position: relative;
    margin-bottom: 80px;
}

.single-service-thumb:before {
    content: "";
    padding-top: 100%;
    display: block;
}

.service-header .circle-text {
    position: absolute;
    left: calc(50vw + 80px);
    top: calc(50vh + 160px);
    z-index: 11;
}

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

}

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

}


@media screen and (max-width: 840px){
    .service-header .circle-text {
        display: none;
    }

    .service-header .wrap{
        display: block;
    }

    main#single-service .default-header.full-height, main#single-service-sub .default-header.full-height, main#single-service-alt .default-header.full-height {
        height: auto;
        padding-top: 200px;
    }

    main#single-service .default-header.full-height .header-title-wrap, main#single-service-sub .default-header.full-height .header-title-wrap, main#single-service-alt .default-header.full-height .header-title-wrap {
        height: auto;
    }

    main#single-service .default-header.full-height .header-title-wrap-block, main#single-service-sub .default-header.full-height .header-title-wrap-block, main#single-service-alt .default-header.full-height .header-title-wrap-block {
        top: auto;
        position: relative;
        transform: translate(0, 0);
    }

    main#single-service .single-service-photo-back {
        display: none;
    }

    main#single-service .single-service-back, main#single-service-sub .single-service-back, main#single-service-alt .single-service-back {
        display: none;
    }

    .service-header .single-service-thumb {
        margin-bottom: 0;
    }

    main#single-service .services-grid {
        padding-bottom: 0;
    }

    .service-header h1 {
        margin-bottom: 30px;
    }

    .single-service-photo-back {
        width: 100%;
        position: relative;
        height: 300px;
        float: left;
    }

    main#single-service-sub .default-header.full-height .header-title-wrap {
        padding-bottom: 60px;
    }

    main#single-service-sub .service-header {
        margin-bottom: 60px;
    }

    main#single-service-alt .service-header {
        margin-bottom: 60px;
    }

}

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

}

/* ------------------------- Single Service - Services Grid ------------------------------------------ */

.services-grid {
    padding-bottom: 50px;
}

main#home .services-grid {
    background: #E7EBEB;
}

.services-grid h3 {
    text-align: center;
    margin-bottom: 60px;
}

.services-grid ul {
    float: left;
    width: 100%;
    position: relative;
}

.services-grid ul li {
    float: left;
    width: 33.2%;
    margin-bottom: 60px;
    position: relative;
    padding: 0px 15px;
}

.services-grid ul li a {
    float: left;
    width: 100%;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.services-grid ul li a:before {
    content: "";
    padding-top: 100%;
    display: block;
}

.services-grid ul li a .block {
    position: absolute;
    bottom: 40px;
    width: 100%;
    padding: 0 40px;
    z-index: 8;
    transition: all .5s cubic-bezier(0.87, 0, 0.13, 1);
}

.services-grid ul li a:hover {
    color: #fff;
}


.services-grid ul li a:hover .block {
    bottom: 70px;
}

.services-grid ul li a .block h3 {
    color: #fff;
    text-align: left;
    margin: 0 0 10px 0;
    opacity: 1;
}

.services-grid ul li a .block h2 {
    margin: 0;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 38px;
    font-family: 'IsidoraSans-Black', sans-serif;
}

.services-grid ul li p {
    margin: 0;
}

.services-grid ul li .services-shape {
    height: 100%;
    position: absolute;
    left: calc(-43% - 120px);
    top: 0;
    width: 120px;
    background: var(--color-primario);
    transition: all .5s cubic-bezier(0.87, 0, 0.13, 1);
    z-index: 8;
}

.services-grid ul li .services-shape .svg-fill {
    fill: var(--color-primario);
}

.services-grid ul li a:hover .services-shape {
    left: 0;
}

.services-grid ul li a .dark-overlay {
    opacity: .3;
    transition: all .5s cubic-bezier(0.87, 0, 0.13, 1);
}

.services-grid ul li a:hover .dark-overlay {
    opacity: .6;
}

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

    .services-grid ul li a .block h2 {
        font-size: 28px;
        line-height: 32px;
    }
}

@media screen and (max-width: 1040px){
    .services-grid ul li a .block h2 {
        font-size: 24px;
        line-height: 28px;
    }
}

@media screen and (max-width: 840px){
    .services-grid ul li {
        width: 50%;
        margin-bottom: 50px;
    }

    .services-grid ul li a:before {
        padding-top: 50%;
    }

    main#home .services-grid ul li {
        margin-bottom: 30px;
    }

    .services-grid h3 {
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 640px){
    .services-grid ul li {
        width: 100%;
        margin-bottom: 50px;
        padding: 0;
    }

    .services-grid ul li a:before {
        padding-top: 60%;
    }

    main#home .services-grid ul li {
        margin-bottom: 10px;
    }

    .services-grid ul li a:hover .services-shape {
        left: calc(-43% - 120px);
    }

    .services-grid ul li a:hover .dark-overlay {
        opacity: .3;
    }

    .services-grid ul li a:hover .block {
        bottom: 40px;
    }

}

/* ------------------------- Contact - Header -------------------------------------------------- */

main#contact .default-header {
    text-align: center;
    padding-bottom: 240px;
}

main#contactformulier .contact-form {
    padding-top: 140px;
}

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

}

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

}

@media screen and (max-width: 640px){
    main#contact .default-header {
        padding-bottom: 80px;
    }

    main#contactformulier .contact-form {
        padding-top: 140px;
    }
}

/* ------------------------- Contact - Intro -------------------------------------------------- */

.contact-image {
    background: #E7EBEB;
    padding: 0;
}

.contact-image .wrap-wide {
    height: 380px;
}

.contact-credentials {
    width: 50%;
    float: left;
    height: 380px;
    background: var(--color-primario);
}
.contact-image .image-fullwidth {
    width: 50%;
}

.contact-image .wrap-wide {
    margin-top: -140px;
}

.contact-image .image-container:before {
    padding-top: 380px;
}

.contact-image .circle-text {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #FFF;
}

.contact-image .circle-text textPath {
    fill: #FF4D0F;
}


/* --- Credentials ---  */

.contact-credentials .block {
    position: relative;
    display: inline-block;
    padding: 40px 80px;
    top: 50%;
    transform: translate(0, -50%);
}

.contact-credentials h4 {
    font-size: 21px;
    margin-bottom: 10px;
    color: #fff;
    margin-top: 40px;
}

.contact-credentials h4:first-child {
    margin-top: 0px;
}

.contact-credentials li, .contact-credentials li a {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 26px;
}

.contact-credentials li a:hover {
    color: #fff;
}

@media screen and (max-width: 1220px){
    .contact-credentials h4{
        font-size: 18px;
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 1040px){
    .contact-credentials {
        width: 60%;
    }
    .contact-image .image-fullwidth {
        width: 40%;
    }

    .contact-image .circle-text {
        left: 60%;
    }
}

@media screen and (max-width: 640px){
    .contact-image .wrap-wide {
        margin-top: 0;
        padding: 0;
    }

    .contact-image .circle-text {
        top: 0;
        left: 50%;
    }

    .contact-credentials .block {
        transform: translate(0, 0);
    }

    .contact-credentials {
        width: 100%;
        text-align: center;
        padding-top: 70px;
        padding-bottom: 30px;
        height: auto;
    }
    .contact-image .image-fullwidth {
        width: 100%;
    }

    .contact-image .image-container:before {
        padding-top: 300px;
    }

    main#contact .header-title-wrap {
        min-height: auto;
    }


}

/* ------------------------- Contact - Footer -------------------------------------------------- */

main#contact .footer .wrap-wide, main#contactformulier .footer .wrap-wide {
    display: none;
}

main#contact .footer .top-part, main#contactformulier .footer .top-part {
    display: none;
}

main#contact .footer, main#contactformulier .footer {
    padding-top: 40px;
}

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

}

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

}

@media screen and (max-width: 640px){
    main#contact .footer, main#contactformulier .footer {
        padding-top: 10px;
    }
}

/* ------------------------- Contact - Form -------------------------------------------------- */

.contact-form {
    background: #E7EBEB;
    padding-top: 100px;
}

.hidden-field {
    position: absolute;
    left: -9999px;
}

.grecaptcha-badge {
    top: calc(100% - 120px) !important;
    transform: translate(0, -50%);
    box-shadow: rgba(0, 0, 0, 0.20) 0px 2px 5px !important;
    visibility: hidden;
}

form {
    padding-top: 20px;
}

.field {
    float: left;
    width: 100%;
    position: relative;
    margin-bottom: 30px;
}

.field:nth-child(3), .field:nth-child(4)  {width: calc(50% - 10px);}
.field:nth-child(3) {margin-right: 20px;}

input, textarea, select {
    border:0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    font-size: 16px;
    width: 100%;
    float: left;
    border: none;
    background: 0;
    line-height: 20px;
    padding: 18px 20px 22px 20px;
    background: #fff;
}

label {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
    float: left;
    font-family: 'IsidoraSans-SemiBold', sans-serif;
}

label span {
    color: #FF4D0F;
}

select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none calc(100% - 20px) center no-repeat;
}

textarea {
    resize: vertical;
    min-height: 240px;
    line-height: 22px;
    padding: 18px 20px;
}

.btn-submit {
    width: auto;
    float: left;
    border: 0;
}

textarea:focus, select:focus, input:focus{
    outline: 1px solid rgba(23, 28, 33, 0.2);
    outline-width: 1px !important;
    outline-offset: 0px;
    border-radius: 0;
}

.alert {
    color: #ff0012;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 0 0 0;
    float: left;
}

.bottom-alert {
    padding: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #292C30;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}

::placeholder {color: rgba(0, 0, 0, 0.5); }
::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.5);}
::-moz-placeholder {color: rgba(0, 0, 0, 0.5);}
:-ms-input-placeholder {color: rgba(0, 0, 0, 0.5);}
:-moz-placeholder {color: rgba(0, 0, 0, 0.5);}

@media screen and (max-width: 1220px){
    .contact-left {
        width: calc(100% - 290px);
        padding-right: 40px;

    }
}

@media screen and (max-width: 1400px){
    .contact-form {
        display: flex;
        padding: 60px 0;
    }

    .contact-left {
        width: 100%;
        padding-right: 0px;
    }
    .btn-submit {
        width: 100%;
    }
}

@media screen and (max-width: 640px){
    .field:nth-child(1), .field:nth-child(2), .field:nth-child(3), .field:nth-child(4), .field:nth-child(5)  {width: 100%;}
    .field:nth-child(1), .field:nth-child(3) {margin-right: 0px;}

    .field {
        margin-bottom: 15px;
    }

    input, textarea, select {
        font-size: 14px;
        line-height: 50px;
        padding: 0 20px 0 20px;
    }

    textarea {
        padding: 15px 20px;
        line-height: 22px;
        min-height: 200px;
    }
}

/* ------------------------- Contact - Success -------------------------------------------------- */

main#success .default-header {
    text-align: center;
}

/* ------------------------- Landingspage -------------------------------------------------- */


main#landingspage .default-header h1 {
    font-size: 52px;
    line-height: 52px;
}

main#landingspage .section {
    position: static;
}

main#landingspage .section.footer, main#landingspage .section.default-header {
    position: relative;
}

main#landingspage .section {
    position: static;
}

.onenav {
    position: fixed;
    padding: 40px 0;
    width: 100%;
    top: 0;
    z-index: 15;
    text-align: center;
    height: 140px;
    pointer-events: none;
}

.onenav ul {
    position: relative;
    display: inline-block;
    background: #fff;
    border-radius: 30px;
    padding: 0 20px;
    -webkit-box-shadow: 0px 50px 200px 0px rgba(35,36,45,0.3);
    -moz-box-shadow: 0px 50px 200px 0px rgba(35,36,45,0.3);
    box-shadow: 0px 50px 200px 0px rgba(35,36,45,0.3);
    counter-reset: section;
    pointer-events: all;
}

.onenav a {
    height: 60px;
    float: left;
    position: relative;
    line-height: 20px;
    padding: 20px 10px;
    text-decoration: none;
    font-size: 14px;
    font-family: 'IsidoraSans-Bold', sans-serif;
    text-transform: uppercase;
    color: rgba(23, 28, 33, 0.5);
    outline: 0;
}

.onenav a:before {
    counter-increment: section;
    content: counter(section) ". ";
}

.onenav a:hover {
    color: #FF4D0F;
    outline: 0;
}

.onenav a.active {
    color: var(--color-primario);
    outline: 0;
}

@media screen and (max-width: 1140px){
    .onenav ul{
        width: 160px;
        height: 60px;
        padding: 0;
        background: 0;
        -webkit-box-shadow: 0px 50px 200px 0px rgba(35,36,45,0);
        -moz-box-shadow: 0px 50px 200px 0px rgba(35,36,45,0);
        box-shadow: 0px 50px 200px 0px rgba(35,36,45,0);
    }

    .onenav ul a {
        width: 100%;
        position: absolute;
        left: 0;
        opacity: 0;
        visibility: hidden;
        background: #fff;
        border-radius: 30px;
        -webkit-box-shadow: 0px 50px 200px 0px rgba(35,36,45,0.3);
        -moz-box-shadow: 0px 50px 200px 0px rgba(35,36,45,0.3);
        box-shadow: 0px 50px 200px 0px rgba(35,36,45,0.3);
    }

    .onenav ul a.active {
        opacity: 1;
        visibility: visible;
    }

}

@media screen and (max-width: 840px){
    .onenav {
        display: none;
    }
    main#landingspage .default-header.full-height{
        height: auto;
        padding-top: 200px;
    }

    main#landingspage .default-header.full-height .header-title-wrap {
        height: auto;
    }

    main#landingspage .default-header.full-height .header-title-wrap-block {
        top: auto;
        position: relative;
        transform: translate(0, 0);
    }

    main#landingspage .single-service-back {
        display: none;
    }

    main#landingspage .default-header.full-height .header-title-wrap {
        padding-bottom: 60px;
    }

}


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

    main#landingspage .default-header h1 {
        font-size: 28px;
        line-height: 28px;
    }
}


/* ------------------------- Landingspage - Phases List -------------------------------------------------- */

.phases-list {
    background: #E7EBEB;
    text-align: center;
    overflow: hidden;
    padding-bottom: 80px;
}

.phases-list .textblock {
    text-align: left;
}

.phases-list .wrap-wide {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding-top: 40px;
}

.phases-list .stripe {
    background: #C2C7C7;
    position: absolute;
    top: 100px;
    width: 100vw;
    left: 50%;
    transform: translate(-50%, 0);
}

.phases-list .single-phase {
    text-align: center;
    position: relative;
    padding-bottom: 60px;
    flex: 1 0 190px;
}

.phases-list .single-phase .phase-icon {
    display: inline-block;
    width: 120px;
    height: 120px;
    border-radius: 60px;
    background: #fff;
    margin-bottom: 30px;
}

.phases-list .single-phase h3 {
    margin-bottom: 10px;
    font-size: 13px;
}

.phases-list .single-phase h4 {
    font-size: 18px;
}

@media screen and (max-width: 1200px){
    .phases-list .stripe {
        display: none;
    }
}

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

    .phases-list {
        padding-bottom: 20px;
    }

    .phases-list .single-phase {
        width: 150px;
        padding-bottom: 40px;
    }

    .phases-list .single-phase .phase-icon {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        margin-bottom: 15px;
    }

    .phases-list .single-phase h3 {
        margin-bottom: 10px;
    }

    .phases-list .single-phase h4 {
        font-size: 18px;
        line-height: 20px;
    }
}



/* ------------------------- Textpage -------------------------------------------------- */

main#textpage .default-header {
    padding-bottom: 70px;
    background: #E7EBEB
}

main#textpage .default-header h1 {
    text-align: center;
}

.textblock-section {
    padding-top: 120px;
}

@media screen and (max-width: 1220px){
    .textblock-section {
        padding-top: 100px;
    }
}

@media screen and (max-width: 1040px){
    .textblock-section {
        padding-top: 60px;
    }
}

@media screen and (max-width: 640px){
    main#textpage .default-header .header-title-wrap {
        min-height: auto;
    }

}

/* ------------------------- Textpage + Image -------------------------------------------------- */

main#textpage-image .default-header, main#textpage-service .default-header, main#textpage-questions .default-header {
    padding-bottom: 0px;
}

main#textpage-image .default-header h1, main#textpage-service .default-header h1, main#textpage-questions .default-header h1 {
    text-align: center;
    font-size: 52px;
    line-height: 52px;
}

main#textpage-image .default-header .background-art, main#textpage-service .default-header .background-art, main#textpage-questions .default-header .background-art {
    height: 450px;
}

main#textpage-image .default-header .background-art svg, main#textpage-service .default-header .background-art svg, main#textpage-questions .default-header .background-art svg {
    transform: scale(0.75) translate(0, 15%);
}

main#textpage-image .default-header .background-art svg path, main#textpage-service .default-header .background-art svg path, main#textpage-questions .default-header .background-art svg path {
    stroke-width: 1.5px;
}

.textblock-image-intro {
    padding: 0;
    text-align: center;
}

.textblock-image {
    padding-bottom: 0;
    padding-top: 70px;
}

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

}

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

}

@media screen and (max-width: 640px){
    main#textpage-image .default-header .header-title-wrap {
        min-height: auto;
    }

    main#textpage-service .default-header .header-title-wrap {
        min-height: auto;
    }

    main#textpage-questions .default-header .header-title-wrap {
        min-height: auto;
    }

    .textblock-image {
        padding-top: 30px;
    }

    .textblock-image .wrap-wide{
        padding: 0;
    }

    .textblock-image .image .image-container:before {
        padding-top: 50%;
    }

    main#textpage-image .default-header h1, main#textpage-service .default-header h1, main#textpage-questions .default-header h1 {
        font-size: 28px;
        line-height: 28px;
    }

}

/* ------------------------- Questions Textpage -------------------------------------------------- */

.questions {
    padding-top: 40px;
}

.questions ul {
    float: left;
    width: 100%;
    background: var(--color-primario);
}

.questions ul li {
    float: left;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.questions ul li:last-child {
    border-bottom: 0px solid rgba(255, 255, 255, 0.2);
}

.questions ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    padding: 19px 30px 21px 30px;
    float: left;
    width: 100%;
    font-family: 'IsidoraSans-SemiBold', sans-serif;
    position: relative;
}

.questions ul li a:hover {
    background: rgba(0, 0, 0, 0.1);
}

.questions ul li a svg {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(0, -50%);
}

@media screen and (max-width: 640px){
    .questions .wrap {
        padding: 0;
    }
}


/* ------------------------- Mailchimp aanmelden -------------------------------------------------- */

.mailchimp {
    background: #E7EBEB;
    text-align: center;
}

.mailchimp h2 {
    margin-bottom: 15px;
}


.mailchimp + .footer .top-part {
    background: #E7EBEB;
}

main#projects .mailchimp + .footer .top-part, main#services .mailchimp + .footer .top-part, main#single-project .mailchimp + .footer .top-part {
    background: #E7EBEB;
}

.mailchimp form {
    float: left;
    width: 100%;
    padding: 0;
}

.mailchimp-btn {
    width: 160px;
    margin-left: 20px;
    float: left;
}

.mailchimp-btn .btn {
    height: 60px;
    padding: 13px 30px 17px 30px;
    width: 100%;
}

.mc-field-group {
    float: left;
    width: calc(100% - 180px);
}

.mc-field-group label {
    display: none;
}

@media screen and (max-width: 640px){
    .mc-field-group {
        width: 100%;
    }

    .mailchimp-btn {
        width: 100%;
        margin-left: 0;
        text-align: center;
        margin-top: 20px;
    }

    .mailchimp-btn .btn {
        width: auto;
        float: none;
    }
}

/* ------------------------- Block - Video -------------------------------------------------- */

.block-video {
    text-align: center;
    padding-top: 0;
}

main#single-project .block-video h2 {
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 10px;
}

.block-video .wrap-text p {
    margin-bottom: 50px;
}

#single-project .block-video .wrap-text h2:last-child {
    margin-bottom: 30px;
}

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

}

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

}

@media screen and (max-width: 640px){
    .block-video .wrap {
        padding: 0;
    }
}


/* ------------------------- Block - Text + Image -------------------------------------------------- */

.block-textimage {
    padding-top: 30px;
    padding-bottom: 140px;
}

main#single-project .block-textimage h2{
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 10px;
}

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

}

@media screen and (max-width: 1040px){
    .block-textimage {
        padding-bottom: 100px;
    }
}

@media screen and (max-width: 640px){
    .block-textimage {
        padding-bottom: 60px;
        padding-top: 0;
    }
}


/* ------------------------- Block - Text + Text -------------------------------------------------- */

.block-texttext {
    padding-top: 0px;
    padding-bottom: 120px;
}

.block-texttext .wrap {
    display: block;
}

main#single-project .block-texttext h2{
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 10px;
}

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

}

@media screen and (max-width: 1040px){
    .block-texttext {
        padding-bottom: 100px;
    }
}

@media screen and (max-width: 640px){
    .block-texttext {
        padding-bottom: 60px;
    }
}

/* ------------------------- Block - Video -------------------------------------------------- */

.block-textarea {
    padding-top: 0;
}

/* ------------------------- Block - Panorama Fullwidth -------------------------------------------------- */

.block-panorama-fullwidth {
    padding-top: 0;
}

.block-panorama-fullwidth + .projects-grid {
    padding-bottom: 0;
}

.block-panorama-fullwidth iframe {
    float: left;
}

.block-panorama-fullwidth .iframe-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 40px);
    height: 100%;
    background: rgba(23, 28, 33, 0);
    z-index: 10;
}

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

}

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

}

@media screen and (max-width: 640px){
    .block-panorama-fullwidth iframe {
        float: left;
        height: 240px;
    }
}

/* ------------------------- Block - Image Fullwidth -------------------------------------------------- */

.block-image-fullwidth .image .image-container:before{
    padding-top: 440px;
}

@media screen and (max-width: 640px){
    .block-image-fullwidth .image .image-container:before{
        padding-top: 240px;
    }
}


/* ------------------------- Block - Panorama -------------------------------------------------- */

.block-panorama {
    padding-top: 0;
    text-align: center;
}
.block-panorama iframe {
    float: left;
}

main#single-project .block-panorama h2 {
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 10px;
}

.block-panorama .wrap-text p {
    margin-bottom: 50px;
}

#single-project .block-panorama .wrap-text h2:last-child {
    margin-bottom: 30px;
}

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

}

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

}

@media screen and (max-width: 640px){
    .block-panorama iframe {
        float: left;
        height: 240px;
    }
}

/* ------------------------- Block - Phase -------------------------------------------------- */

.phases {
    padding: 0;
}

.block-phase {
    padding-top: 120px;
    padding-bottom: 120px;
}

.block-phase h3 {
    margin-bottom: 13px;
}

.block-phase h2 {
    margin-bottom: 20px;
}


.block-phase .video-div {
    width: 100%;
    padding: 20% 0;
}

.block-phase:nth-child(odd) .sub-wrap:first-child {
    order: 1;
}

.block-phase:nth-child(even) .sub-wrap:first-child {
    order: 3;
}

.block-phase:nth-child(even)  {
    background: #E7EBEB;
}

.block-phase:nth-child(3), .block-phase:nth-child(5)  {
    background: #171C21;
    color: #fff;
}

.block-phase:nth-child(3) p, .block-phase:nth-child(5) p, .block-phase:nth-child(3) h3, .block-phase:nth-child(5) h3   {
    color: #fff;
}

.block-phase:last-child {
    background: #fff;
    color: #171C21;
}

.block-phase:last-child p {
    color: rgba(23, 28, 33, 0.8);
}

.block-phase:last-child h3 {
    color: rgba(23, 28, 33, 0.7);
}

@media screen and (max-width: 1220px){
    .block-phase{
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media screen and (max-width: 840px){
    .block-phase {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .block-phase .video-div {
        width: 100%;
        padding: 0 0;
    }
}

/* ------------------------- Block - Image/GIF 3x -------------------------------------------------- */

.block-image-three {
    padding-top: 0;
}

.block-image-three .sub-wrap {
    width: calc(33.333% - 20px);
    margin-right: 30px;
}

.block-image-three .sub-wrap:last-child {
    margin-right: 0px;
}

.block-image-three .image {
    margin-bottom: 30px;
}

.block-image-three .image:last-child {
    margin-bottom: 0px;
}

.block-image-three .image .image-container:before {
    padding-top: 100%;
}

.block-image-three h4 {
    margin-bottom: 15px;
    text-transform: none;
    font-family: 'IsidoraSans-Bold', sans-serif;
}

@media screen and (max-width: 840px){
    .block-image-three .sub-wrap {
        width: calc(50% - 15px);
        margin-bottom: 60px;
    }

    .block-image-three .sub-wrap:nth-child(2) {
        margin-right: 0px;
    }

    .block-image-three .sub-wrap:last-child {
        margin-bottom: 0px;
    }

}

@media screen and (max-width: 640px){
    .block-image-three .sub-wrap {
        width: 100%;
        margin-right: 0;
    }

}

/* ------------------------- Block - Video 3x -------------------------------------------------- */

.block-video-three .image .image-container .play-btn-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(3);
    z-index: 10;
}

.block-video-three .image:hover .image-container .play-btn-svg {
    transform: translate(-50%,-50%) scale(3.5);
    cursor: pointer;
}

.block-video-three .image:hover .image-container .dark-overlay {
    opacity: .6;
    cursor: pointer;
}

.block-video-three h4 {
    text-align: center;
}

.block-video-three p {
    text-align: center;
}

/* ------------------------- Block - Embed -------------------------------------------------- */

.block-embed {
    text-align: center;
    padding-top: 0;
}

.block-embed .wrap-text p {
    margin-bottom: 50px;
}

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

}

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

}

@media screen and (max-width: 640px){
    .block-embed .wrap {
        padding: 0;
    }
}

/* ------------------------- Homepage Logo's -------------------------------------------------- */

.logos-section {
    text-align: center;
    padding-top: 0;
}

.logos-section .row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: center
}

.logos-section .row li {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

.logos-section .row li img {
    max-width: 130px;
    max-height: 70px;
    object-fit: contain;
}

.logos-section .row li a:hover {
    transform: scale(.9);
}

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

    .logos-section .row li {
        width: 33.33%;
    }

}

@media screen and (max-width: 680px){
    .logos-section .row li {
        width: 50%;
        padding: 20px 0;
    }

    .logos-section .row li img {
        max-width: 90px;
        max-height: 55px;
        object-fit: contain;
    }
}


/* ------------------------- Animations -------------------------------------------------- */


.slide-in, .image-in {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.project-thumb-overlay, .projects-thumb-block h2, .project-thumb-block h3, .video-thumbnail, .video-modal-bg, .video-modal, .swiper-button-disabled, .image-container .dark-overlay {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.btn, .social-ico-svg, .ico-fill, .footer a, .home-left-text, #arrow-down-svg, .icon-fill, .play-btn-svg, .close-btn, .logos-section a {
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -ms-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}