/*----contactus----*/@keyframes contactus_show{
  0%{
    opacity:0;
    transform: scale(0);
  }
  100%{
    opacity:1;
    transform: scale(1);
  }
}

@keyframes contactus_show_bg{
  0%{
    opacity:0;
  }
  100%{
    opacity: 0.8;
  }
}

.content-block-contact_us > span{
    perspective: 2000px;
}

#contactus{
    max-width: 540px;
    margin: 80px auto;
    background: var(--background-section);
    border-radius: 4pt;
    box-shadow: 0px 50px 100px rgba(0,0,0,0.5);
    padding: 1px;
    width: 100%;
    color: white;
    border: none;
    display: block;
    position: relative;
    transform-style: preserve-3d;
}

#contactus:before{
    content: "";
    position: absolute; bottom: 0px; left: 0px; top: 0px; right: 0px;
    background-image: url(/images/stripes_bottom.webp);
    background-size: 600px;
    background-repeat: no-repeat;
    background-position: bottom left;
    opacity: 0.12;
    pointer-events: none;
}

#contactus[open]{
    position: fixed;
    animation: contactus_show 300ms ease;
    width: calc(100vw - 50px);
}

#contactus[open]::backdrop {
    background: var(--background-banner);
    animation: contactus_show_bg 2s ease;
    opacity: 0.8;
}

#contactus_form[loading="true"]{
    pointer-events: none;
    opacity: 0.5;
}
#contactus .contactus_title{
    display: none;
    padding: var(--gap-normal);
    background: rgba(255,255,255,0.1);
}

#contactus[open] .contactus_title{
    display: block;
}

#contactus .contactus_title > *{
    display: inline-block;
    line-height: 30px;
    min-width: 30px;
}

#contactus i:first-child{
    display: none;
}

#contactus i:last-child{
    display: none;
}


#contactus[open] i:last-child{
    display: block;
}

#contactus_form{
    margin: var(--gap-large);
}

#contactus_form_response{
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 2pt;
    margin-left: var(--gap-large);
    margin-right: var(--gap-large);
    background: rgba(20,50,200,0.1);
    color: white;
    transition: all 220ms ease;
    opacity: 0;
}

#contactus_form_response[status]{
    opacity: 1;
    padding: var(--gap-large);
    margin-top: var(--gap-large);
    margin-bottom: var(--gap-large);
}

#contactus_form_response[status="200"]{
    background: rgba(20,200,50,0.2);
}

#contactus_form_response[status="500"]{
    background: rgba(200,50,20,0.2);
}

#contactus_form .form_message{
    margin-bottom: var(--gap-large);
    text-align: left;
}

#contactus_form button{
    margin-top: var(--gap-normal);
    outline: none; border: none;
    background: var(--background-button);
    line-height: 40px;
    padding: 0px var(--gap-normal);
    border-radius: 4pt;
    color: white;
    font-weight: bold;
    transition: all 250ms ease;
    cursor: pointer;
    background: var(--background-button);
}

altcha-widget .altcha{
    max-width: 100%;
    border: none;
    background: rgba(0,0,0,0.2);
}

altcha-widget .altcha-main{
    line-height: 30px;
    vertical-align: middle;
}

altcha-widget .altcha-logo{
    display: inline-block;
    height: 30px;
    padding: 4px 0px;
    vertical-align: middle;
}

altcha-widget .altcha-label{
    text-align: left;
    color: var(--text-color-alt);
    padding-left: var(--gap-normal);
}

altcha-widget .altcha-footer{
    display: none;
}/*----input----*/.input_wrapper{
    display: block;
    min-height: 50px;
    position: relative;
    background: rgba(0,0,0,0.2);
    border-radius: 2pt;
    margin: var(--gap-normal) 0px;
    padding: calc(var(--text-size-normal) + var(--gap-small)) 0px 0px 0px;
}

.input_wrapper > label{
    display: block;
    position: absolute;
    top: 0px; left: 0px; right: 0px;
    font-size: var(--text-size-smaller);
    font-weight: bold;
    text-align: left;
    padding: var(--gap-small);
    color: var(--text-color-alt);
    pointer-events: none;
}

.input_wrapper > input,
.input_wrapper > textarea{
    padding: var(--gap-small);
    display: block;
    outline: none; border: none;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    min-height: 30px;
    line-height: var(--text-size-large);
    font-size: var(--text-size-normal);
    background: transparent;
    color: var(--text-color);
    font-family: monospace;
    z-index: 1;
}

.input_wrapper > textarea{
    min-height: 120px;
}
/*----navigation----*/#nav {
    position: sticky;
    top: 0px; left: 0px; right: 0px;
    width: 100%;
    height: 70px;
    line-height: 70px;
    z-index: 1000;
    background: var(--background-body);
    color: var(--text-color-dark-alt);
}

#nav:after{
    content: "";
    display: block;
    position: absolute;
    top: 100%; left: 0px; right: 0px;
    height: 10px;
    opacity: 0.2;
    transition: all 240ms ease;
    transition-delay: 240ms;
    background: linear-gradient(black,transparent);
}

body[scroll="0"] #nav:after{
    opacity: 0;
    height: 0px;
    transition-delay: 0ms;
}

#nav > .nav-wrapper{
    display: flex;
    position: relative;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    width: var(--page-width);
    max-width: 100vw;
    margin: 0px auto;
    scrollbar-gutter: stable both-edges;
}

#nav .nav-logo{
    display: block;
    position: relative;
    left: 0px;
    width: var(--page-width-third);
    height: 60px;
    margin-left: 5px;
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    transition: all 300ms ease;
}

#nav .nav-list{
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style-type: none;
}

/*navigation links in general*/
#nav .nav-list .nav-item{
    display: block;
    text-decoration: none;
    color: var(--text-color);
    font-size: var(--text-size-large);
    line-height: 70px;
    margin: 0px 1px;
    border-radius: 5pt;
    z-index: 2;
    opacity: 1;
    transition: all 220ms ease;
}

#nav .nav-list .nav-item > *{
    display: block;
    text-decoration: none;
    color: inherit;
}

#nav .nav-list .nav-item > * > i{
    margin-right: 5px;
}

/*mobile list*/
#nav .nav-mobile{
    position: fixed;
    top: 70px; left: 0px; right: 0px;
    background: var(--background-body);
    text-align: center;
    height: 100%;
    overflow: hidden;
    max-height: 0px;
    transition: max-height 120ms ease 120ms;
}

#nav .nav-mobile .nav-list{
    position: absolute;
    top: 0px; left: 0px; right: 0px; bottom: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#nav .nav-mobile .nav-list .nav-item{
    width: 100%;
    line-height: 60px;
}

/*toggle mobile list*/
#nav .nav-burger:focus ~ .nav-mobile{
    max-height: 120px;
    transition-delay: 0ms;
}

/* disable desktop view*/
#nav .nav-desktop{
    display: none;
    opacity: 1;
    transition: opacity 240ms ease;
    position: absolute;
    top: 0px; right: 0px;
}

/*nav burger*/
#nav .nav-burger{
    height: 70px;
    width: 70px;
    outline: none;
    border: none;
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

body[scroll="0"] #nav .nav-burger{
    opacity: 0;
    pointer-events: none;
}

#nav .nav-burger > i{
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 3pt;
    background: black;
    margin: 3px auto;
    transform-origin: 5px 1.5px;
    transition: all 150ms ease;
    opacity: 1;
}

/*transition nav burger*/
#nav .nav-burger:focus{
    pointer-events: none;
}

#nav .nav-burger:focus > i:nth-child(1){
    transform: rotate(45deg);
}

#nav .nav-burger:focus > i:nth-child(2){
    opacity: 0;
}

#nav .nav-burger:focus > i:nth-child(3){
    transform: rotate(-45deg);
}

/*transition nav logo*/
body[scroll="0"] #nav .nav-desktop .nav-item:first-child{
    opacity: 0;
}

body[scroll="0"] #nav .nav-logo{
    height: 25vh;
    width: var(--page-width-half);
}

@media screen and (min-width: 900px){
    #nav .nav-desktop{
        display: block;
    }

    #nav > .nav-wrapper{
        flex-direction: row;
    }
        
    #nav .nav-desktop .nav-item > .button{
        display: inline-block;
        line-height: 45px;
        padding: 0px 20px;
        border-radius: 5pt;
        cursor: pointer;
        font-weight: bold;
        transition: background 180ms ease;
    }

    #nav .nav-desktop .nav-item > .button:hover{
        background: var(--background-color-highlight);
    }

    #nav .nav-mobile,
    #nav .nav-burger{
        display: none;
    }
}

@media screen and (min-width: 1300px){
    body[scroll="0"] #nav .nav-logo{
        left: -89px;
    }
}

#footer{
    display: block;
    text-align: center;
    background: var(--background-banner);
    font-size: var(--text-size-small);
}

#footer .footer-wrapper{
    display: flex;
    flex-direction: column;
    text-align: center;
    background: var(--background-banner);
    padding: var(--gap-larger);
}

#footer .footer-item > *{
    display: block;
    padding: var(--gap-smaller);
    color: inherit;
    text-decoration: none;
    transition: 120ms ease;
}

#footer .footer-item > a:hover{
    opacity: 0.5;
}/*----root----*/:root{
    --path: "/images/";

    --text-color-main: white;
    --text-color-alt: #ffcfb7;

    --text-color-dark: black;
    --text-color-dark-alt: #221f20;

    --background-color: #ee8243;
    --background-color-alt: #e68535;
    --background-color-highlight: #f0a86d;

    --background-section-color: #3c3f48;

    --background-button: #f05a28;

    --background-body: linear-gradient(-90deg, var(--background-color),  var(--background-color-alt));
    --background-section: linear-gradient(90deg, var(--background-section-color), #354042, #3c3f48);
    --background-banner: #222828;
    --background-text-gradient: linear-gradient(290deg, #ffffff, #cc967a);

    --text-size-title: 20pt;
    --text-size-heading: 17pt;
    --text-size-subtitle: 15pt;
    --text-size-subheading: 12pt;

    --text-size-larger: 12pt;
    --text-size-large: 11pt;
    --text-size-normal: 10pt;
    --text-size-small: 9pt;
    --text-size-smaller: 8pt;

    --page-width: 100%;
    --page-width-half: 50vw;
    --page-width-third: 25vw;
    --page-width-two-thirds: 60vw;

    --gap-smaller: 4px;
    --gap-small: 6px;
    --gap-normal: 12px;
    --gap-large: 24px;
    --gap-larger: 48px;
    --gap-huge: 128px;

    --shadow-flat: 0px 0px 10px rgba(20,50,50,0.5);
    --shadow-title-text: 0px 4px 10px rgba(20,50,50,0.5);

    --shadow-layer-1: 5px 5px 10px rgba(20,50,50,0.5);
    --shadow-layer-2: 10px 10px 20px rgba(20,50,50,0.4);
    --shadow-layer-3: 15px 15px 30px rgba(20,50,50,0.3);
}

@media screen and (min-width: 1100px){
    :root{
        --page-width: 1080px;
        --page-width-half: 540px;
        --page-width-third: 360px;
        --page-width-two-thirds: 720px; 

        --text-size-title: 32pt;
        --text-size-heading: 25pt;
        --text-size-subtitle: 21pt;
        --text-size-subheading: 18pt;

        --text-size-larger: 15pt;
        --text-size-large: 13pt;
        --text-size-normal: 11pt;
        --text-size-small: 10pt;
        --text-size-smaller: 8pt;
    }
}/*----section_about_us----*/.section-about_us{
    background: var(--background-section);
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    padding: var(--gap-larger) var(--gap-large);
}

.section-about_us .content-block{
    max-width: var(--page-width);
    width: var(--page-width);
    font-size: var(--text-size-larger);
    padding: var(--gap-normal) 0px;
    letter-spacing: 0.4pt;
    font-weight: lighter;
    margin: 0px auto;
}

.section-about_us .content-block-title{
    font-size: var(--text-size-subtitle);
}

.section-about_us .sub-block-title{
    font-size: var(--text-size-subheading);
}

.section-about_us .content-block-taranaki_local{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 480px;
}

.section-about_us .content-block-taranaki_local > span{
    position: relative;
    display: block;
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: all 240ms ease;
    width: 100%;
    padding-top: 66%;
    overflow: hidden;
    border-radius: 8pt;
    outline: 5px solid var(--background-color);
}

.section-about_us .content-block-taranaki_local > span > img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px; left: 0px; right: 0px;
    z-index: 0;
}

@media screen and (min-width: 1240px){
    .section-about_us{
        flex-direction: row;
        justify-content: center;
    }

    .section-about_us .content-block{
        margin: 0px;
        padding: var(--gap-larger) 0px;
        max-width: var(--page-width-half);
        min-width: var(--page-width-half);
        padding-right: 20px;
    }

    .section-about_us .content-block:last-child{
        padding-right: 0px;
        padding-left: 20px;
    }
    

    .section-about_us .content-block-taranaki_local > span{
        width: 100%;
        padding-top: 70%;
    }
}/*----section_contact_us----*/.section-contact_us{
    text-align: center;
    padding: var(--gap-huge) var(--gap-normal);
    width: 100%;
    background-color: var(--background-color-alt);
}

.section-contact_us .content-block{
    margin: var(--gap-large) auto;
    width: var(--page-width);
    color: var(--text-color-dark-alt);
}

.section-contact_us .content-block-title{
    color: var(--text-color-dark-alt);
}

.section-contact_us .content-block-contact_us{
    min-height: 650px;
}

.section-contact_us .content-block[depth="3"] > span{
    display: block;
    font-size: var(--text-size-larger);
    padding: var(--gap-normal);
}

.section-contact_us .sub-block{
    text-align: left;
    background: var(--background-banner);
    margin: var(--gap-larger) auto;
    padding: var(--gap-large);
}

.section-contact_us .sub-block > h5{
    margin-top: 0px;
}/*----section_hero----*//*hero*/
.section-hero{
    height: 50vh;
    margin: 0px auto;
    position: relative;
    z-index: 1;
    color: var(--text-color-dark-alt);
    overflow: hidden;
    background-image: var(--background-body);
}

.section-hero .content-block{
    position: relative;
    display: block;
    width: 100%;
    height: 50vh;
    max-width: var(--page-width);
    padding: 0px var(--gap-large);
    margin: 0px;
    z-index: 1;
}

.section-hero .content-block-title{
    color: var(--text-color-dark-alt);
}

/*hero text*/
.section-hero .content-block:last-child{
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 550px;
    z-index: 1;
}


/*hero button*/
.section-hero button{
    display: block;
    position: relative;
    background: none;
    margin-top: var(--gap-normal);
    padding: var(--gap-normal);
    outline: none;
    border: none;
    height: 50px;
    width: 120px;
}

.section-hero button:after{
    content: "Get in Touch";
    line-height: 50px;
    padding: 0px var(--gap-normal);
    position: absolute;
    top: 0px; left: 0px; right: 0px; bottom: 0px;
    border-radius: 4pt;
    background: var(--background-body);
    color: white;
    font-weight: bold;
    transition: all 250ms ease;
    cursor: pointer;
    background: var(--background-button);
}

.section-hero button:before{
    content: "";
    position: absolute;
    top: 0px; left: 0px; right: 0px; bottom: 0px;
    background: var(--background-banner);
    transform: translate(8px, 12px);
    filter: blur(20px);
    transition: all 250ms ease;
    opacity: 0.6;
}

/*hero button hover*/
.section-hero button:hover:after{
    filter: brightness(1.2);
}

.section-hero button:hover:before{
    transform: translate(16px, 24px);
    opacity: 0.5;
}

/*hero button active*/
.section-hero button:active:after{
    filter: brightness(1.5);
}

.section-hero button:active:before{
    transform: translate(0px, 0px);
    opacity: 0.1;
}

/*subtitle*/
.section-hero  .sub-block-title{
    font-size: var(--text-size-subheading);
    margin: 0px;
}

/*hero image*/
.section-hero .content-block-image{
    position: absolute;
    z-index: 0;
}

.section-hero .content-block-image > span{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    opacity: 0.5;
    overflow: hidden;
}

.section-hero .content-block-image > span > img{
    max-width: var(--page-width-half);
    position: absolute;
    bottom: 0px; right: 0px;
    transition: all 120ms ease;
}

/*bg img*/
.section-hero .content-block-image > span > img:first-child{
    max-height: none;
    width: 50vw;
    max-width: var(--page-width-half);
    min-width: 740px;
    bottom: calc(0px - var(--scroll-index) / 8);
}

/*fg img*/
.section-hero .content-block-image > span > img:last-child{
    max-height: max(420px, 40vh);
    opacity: 1;
    bottom: calc(0px - var(--scroll-index) / 16);
    min-width: 260px;
}

.section-hero .content-block-image > h4{
    display: none;
}

@media screen and (min-width: 1080px){
    .section-hero{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .section-hero > .content-block{
        left: calc(50vw - var(--page-width-half));
        top: 50px;
    }

    .section-hero .content-block-image > span{
        opacity: 1;
    }
        
    .section-hero .content-block:last-child .content-block-title{
        font-size: 3em;
    }

    .section-hero .content-block:last-child .content-block-title ~ span{
        font-size: 1.4em;
    }

    .section-hero .content-block{
        padding: 0px;
    }
}/*----section_our_scope----*//*section our scope - list*/
.section-our_scope{
    background: var(--background-section);
}

/*our scope - list container*/
.section-our_scope .content-block-our_scope_list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--gap-huge) var(--gap-larger);
    gap: 10px;

    max-width: calc((var(--page-width-half) * 3) + 30px);
}

/*our scope - list items*/
.section-our_scope .content-block-our_scope_list .sub-block[depth="4"]{
    width: 100%;
    max-width: 450px;
    height: 280px;
    position: relative;
    /*flipcard container*/
    perspective: 2000px;
	cursor: pointer;
}

/*list item title*/
.section-our_scope .content-block-our_scope_list .sub-block-title[depth="4"]{
    display: flex;
    position: absolute;
    top: 0px; left: 0px; right: 0px; bottom: 0px;

    font-size: var(--text-size-subtitle);
    align-items: center;
    justify-content: center;

    background: none;
    color: white;
    text-shadow: 0px 10px 10px black, 0px 30px 30px black;

    /*also flipable*/
    transform:rotateX(0deg) translateZ(50px); 
	backface-visibility: hidden;
	transition: all 520ms cubic-bezier(.6,.15,.65,1.4) 100ms;
	transform-style: preserve-3d;
    pointer-events: none;
    z-index: 1;
}

.section-our_scope .content-block-our_scope_list .sub-block[depth="4"] > div{
    position: absolute;
    top: 0px; left: 0px; right: 0px; bottom: 0px;
    perspective: 2000px;
}

/*list item container*/
.section-our_scope .content-block-our_scope_list .sub-block[depth="4"] > div > span{
    font-size: var(--text-size-large);
    color: var(--text-color-alt);
    letter-spacing: 1pt;
    line-height: 1.6;
}

.section-our_scope .sub-block[depth="5"] .sub-block-title{
    display: none;
}

/*list item wrapper */
.section-our_scope .sub-block[depth="5"]{
    /*flipcard wrapper*/
    position: absolute;
    top: 0px; left: 0px; right: 0px; bottom: 0px;
	backface-visibility: hidden;
	transition: all 520ms cubic-bezier(.6,.15,.65,1.4);
	transform-style: preserve-3d;
}

/*list item > image*/
.section-our_scope .sub-block[depth="5"]:first-child{
    box-shadow: var(--shadow-flat);
    /*flipcard front*/
    transform:rotateX(0deg) translateZ(10px); 
    pointer-events: none;

    overflow: hidden;
    border: 5px solid var(--background-banner);
    border-radius: 8pt;
}

.section-our_scope .sub-block[depth="5"]:first-child span{
    width: 100%;
    display: flex;
    position: absolute;
    top: 0px; left: 0px; right: 0px; bottom: 0px;
    z-index: 1;
}

.section-our_scope .sub-block[depth="5"]:first-child span img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/*list item > text*/
.section-our_scope .sub-block[depth="5"]:last-child{
    /*flipcard back*/
    transform:rotateX(180deg) translateZ(10px); 
	opacity: 0;
    pointer-events: none;
    overflow: hidden;
    border: 5px solid var(--background-color);
    border-radius: 8pt;
}

.section-our_scope .sub-block[depth="5"]:last-child span{
    display: flex;
    align-items: center;
    position: absolute;
    top: 0px; left: 0px; right: 0px; bottom: 0px;
    z-index: 2;
    padding: var(--gap-larger);
    background: linear-gradient(35deg,rgba(0, 10, 10, 0.5), rgba(0, 10, 10, 0.1));
    font-size: var(--text-size-larger);
}

/*smaller than desktop*/
@media screen and (max-width: 850px){
    /*trigger flipcard*/
    .section-our_scope .content-block-our_scope_list .sub-block[depth="4"][current_view="true"]
    .sub-block[depth="5"]:first-child{
        transition-delay: 0ms;
        transform:rotateX(-180deg) translateZ(10px); 
        opacity: 0;
    }
    .section-our_scope .content-block-our_scope_list .sub-block[depth="4"][current_view="true"]
    .sub-block[depth="5"]:last-child{
        transition-delay: 0ms;
        transform:rotateX(0deg) translateZ(10px); 
        opacity: 1;
    }
    /*trigger flip of title*/
    .section-our_scope .content-block-our_scope_list .sub-block[depth="4"][current_view="true"]
    .sub-block-title[depth="4"]{
        transition-delay: 0ms;
        transform: rotateX(-180deg) translateZ(50px); 
        opacity: 0;
    }
}

/*desktop*/
@media screen and (min-width: 850px){

    /*replace with autoflip with hoverflip*/
    .section-our_scope .content-block-our_scope_list .sub-block[depth="4"]:hover 
    .sub-block[depth="5"]:first-child{
        transition-delay: 0ms;
        transform:rotateX(-180deg) translateZ(10px); 
        opacity: 0;
    }

    .section-our_scope .content-block-our_scope_list .sub-block[depth="4"]:hover 
    .sub-block[depth="5"]:last-child{
        transition-delay: 0ms;
        transform:rotateX(0deg) translateZ(10px); 
        opacity: 1;
    }

    .section-our_scope .content-block-our_scope_list .sub-block[depth="4"]:hover
    .sub-block-title[depth="4"]{
        transition-delay: 0ms;
        transform: rotateX(-180deg) translateZ(50px); 
        opacity: 0;
    }

    /*our scope - list items*/
    .section-our_scope .content-block-our_scope_list .sub-block[depth="4"]{
        width: calc(var(--page-width-half));
        height: calc(var(--page-width-half) * 0.6);
    }
}

/*ultra wide*/
@media screen and (min-width: 3320px) {
    .section-our_scope .content-block-our_scope_list{
        max-width: none;
    }
}
/*----section_our_services----*//*section our services title - banner*/
.section-banner.section-our_services_title{
    background-color: var(--background-color-alt);
    color: var(--text-color-dark-alt);
    text-shadow: var(--shadow-layer-2);
}

.section-banner.section-our_services_title .content-block-title{
    color: inherit;
}

/*section our services - list*/
.section-our_services{
    background: var(--background-section);
}

/*our services - list container*/
.section-our_services .content-block-our_services_list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--gap-normal);
    max-width: calc(var(--page-width) + 80px);
    gap: 10px;
}

/*our services - list items*/
.section-our_services .content-block-our_services_list .sub-block[depth="4"]{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--gap-large);
    border: 1px solid rgba(155,155,155,0.1);
    box-shadow: var(--shadow-flat);
}

.section-our_services .content-block-our_services_list .sub-block[depth="4"] .sub-block-title{
    position: relative;
    min-height: 40px;
    max-width: 250px; /*forces line breaks*/
    margin-top: 0px;
    padding-left: 50px;
    margin-bottom: var(--gap-normal);
    font-size: var(--text-size-larger);
    vertical-align: middle;
    line-height: 20px;
}

.section-our_services .content-block-our_services_list .sub-block[depth="4"] .sub-block-title > i{
    position: absolute;
    top: 0px; left: 0px; right: 0px;
    width: 40px; height: 40px; line-height: 40px;
    color: var(--text-color-alt);
    font-size: calc(40px - 10px);
    text-align: center;
    vertical-align: middle;
}

.section-our_services .content-block-our_services_list .sub-block[depth="4"] > div > span{
    font-size: var(--text-size-large);
    color: var(--text-color);
    letter-spacing: 1pt;
    line-height: 1.6;
}

.section-our_services .content-block-our_services_list .sub-block[depth="4"]:nth-child(7),
.section-our_services .content-block-our_services_list .sub-block[depth="4"]:nth-child(2){
    background: linear-gradient(90deg, transparent, rgba(155,155,155,0.1));
}

.section-our_services .content-block-our_services_list .sub-block[depth="4"]:nth-child(6),
.section-our_services .content-block-our_services_list .sub-block[depth="4"]:nth-child(3){
    background: linear-gradient(180deg, transparent, rgba(155,155,155,0.1));
}
    
.section-our_services .content-block-our_services_list .sub-block[depth="4"]:nth-child(8),
.section-our_services .content-block-our_services_list .sub-block[depth="4"]:nth-child(4){
    background: linear-gradient(0deg, transparent, rgba(155,155,155,0.1));
}


.section-our_services .content-block-our_services_list .sub-block[depth="4"]:nth-child(9),
.section-our_services .content-block-our_services_list .sub-block[depth="4"]:nth-child(5){
    background: linear-gradient(270deg, transparent, rgba(155,155,155,0.1));
}

@media screen and (min-width: 650px){
    
    .section-our_services .content-block-our_services_list{
        padding: var(--gap-larger) 0px;
    }

    .section-our_services .content-block-our_services_list .sub-block[depth="4"]{
        width: 300px;
    }
}

@media screen and (min-width: 1160px){
    .section-our_services .content-block-our_services_list .sub-block[depth="4"]{
        width: calc(var(--page-width-third));
    }

    .section-our_services .content-block-our_services_list{
        padding: var(--gap-huge) 0px;
    }
}/*----section_why_us----*//*section why us - list*/
.section-why_us{
    background: var(--background-section);
    overflow: hidden;
}

/*item container*/
.section-why_us .sub-block[depth="4"]{
    padding: var(--gap-larger);
}

.section-why_us .sub-block[depth="4"]:nth-child(odd){
    background: var(--background-banner);
    box-shadow: var(--shadow-flat);
}

.section-why_us .sub-block[depth="4"] > div{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--page-width);
    margin: 0px auto;
}

/*item container*/
.section-why_us .sub-block-title[depth="4"]{
    text-align: center;
    display: block;
    font-size: var(--text-size-heading);
    margin-top: 0px;
    margin-bottom: var(--gap-large);
}

/*sub-item*/
.section-why_us .sub-block[depth="5"]{
    display: block;
    align-content: center;
}

/*sub-item title*/
.section-why_us .sub-block-title[depth="5"]{
    display: none;
}

/*sub-item image*/
.section-why_us .sub-block[depth="5"]:first-child > div > span{
    display: block;
    position: relative;
    width: 280px;
    height: 280px;
    perspective: 5000px;
    margin: var(--gap-larger) auto;
}

.section-why_us .sub-block[depth="5"]:first-child img:first-child{
    outline: 5px solid var(--background-color);
    filter: grayscale(1) brightness(0.1);
}

/*before visible*/
.section-why_us .sub-block[depth="5"]:first-child img{
    /*3d*/
    transform: rotate3d(2,1,0,90deg) translateZ(-1000px);
    transform-style: preserve-3d;
    transition: all 1s ease;
    display: block;
    width: 100%;
    position: absolute;
    top: 0px; left: 0px; right: 0px; bottom: 0px;
    border-radius: 8pt;
    opacity: 0;
}

/*when seen*/
.section-why_us .sub-block[depth="4"][seen="true"] .sub-block[depth="5"]:first-child img{
    transform: rotate3d(1,1,0,15deg) translateZ(100px);
    opacity: 1;
}

.section-why_us .sub-block[depth="4"][seen="true"] .sub-block[depth="5"]:first-child img:last-child{
    transform: rotate3d(1,1,0,15deg) translateZ(135px);
    opacity: 1;
}

/*current_view*/
.section-why_us .sub-block[depth="4"][current_view] .sub-block[depth="5"]:first-child img{
    transform: rotate3d(0,0,0,0deg) translateZ(100px) ! important;
    filter: grayscale(0);
}

.section-why_us .sub-block[depth="4"][current_view] .sub-block[depth="5"]:first-child img:last-child{
    transform: rotate3d(0,0,0,0deg) translateZ(125px) ! important;
}

/*sub-item text*/
.section-why_us .sub-block[depth="5"]:last-child{
    flex-grow: 1;
    font-size: var(--text-size-larger);
    line-height: 1.8;
    letter-spacing: 1.1pt;
}

/*full display*/
@media screen and (min-width: 880px){
    /*item container*/
    .section-why_us .sub-block[depth="4"] > div{
        flex-direction: row;
        padding: var(--gap-larger);
    }

    /*item container reverse*/
    .section-why_us .sub-block[depth="4"]:nth-child(odd) > div{
        flex-direction: row-reverse;
    }

    /*sub-item image*/
    .section-why_us .sub-block[depth="5"]:first-child > div > span{
        width: 280px;
        padding-top: 100%;
        margin: 0px;
    }

    /*before visible odd*/
    .section-why_us .sub-block[depth="4"]:nth-child(odd) .sub-block[depth="5"]:first-child img{
        transform: rotate3d(2,-1,0,90deg) translateZ(-1000px);
    }

    .section-why_us .sub-block[depth="4"]:nth-child(odd) .sub-block[depth="5"]:first-child img:last-child{
        transform: rotate3d(2,-1,0,90deg) translateZ(-1035px);
    }

    /*when seen odd*/
    .section-why_us .sub-block[depth="4"][seen="true"]:nth-child(odd) .sub-block[depth="5"]:first-child img{
        transform: rotate3d(1,-1,0,15deg) translateZ(100px);
    }

    .section-why_us .sub-block[depth="4"][seen="true"]:nth-child(odd) .sub-block[depth="5"]:first-child img:last-child{
        transform: rotate3d(1,-1,0,15deg) translateZ(135px);
    }

    /*sub-item text*/
    .section-why_us .sub-block[depth="5"]:last-child{
        max-width: var(--page-width-half);
        padding: var(--gap-small) var(--gap-larger);
    }
}

/*extra wide*/
@media screen and (max-width: 1930px) {
    .section-why_us .sub-block[depth="4"]:nth-child(odd){
        background: var(--background-banner);
    }
}/*----style----*/*{
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

body{
    font-family: sans-serif;
    color: white;
    line-height: 1.4;
    letter-spacing: 0.1em;
    background-color: var(--background-color);
}

.page-container{
    overflow-y: hidden;
}

.page-title,
.section-title{
    display: none;
}

.content-block{
    margin: 0px auto;
}

[unselectable="on"]{
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

[ezaction]{
    cursor: pointer;
}/*----theme----*//*title gradient font*/
.sub-block-title,
.content-block-title{
    background: var(--background-text-gradient);
    background-clip: text;
    color: transparent;
    text-shadow: var(--shadow-text-title);
}

/*base styles for titles*/
.content-block-title{
    font-size: var(--text-size-title);
}

.sub-block-title{
    font-size: var(--text-size-subtitle);
    margin-bottom: var(--gap-large);
}

/*hide elements when specified by the document*/
[title^="#"]{
    display: none;
}

/*section-banner*/
.section-banner{
    background: var(--background-banner);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.section-banner:before,
.section-banner:after{
    content: "";
    position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;  
    width: 40vw;  
    max-width: 800px;
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.2;
}

.section-banner:before{
    right: auto;
    background-image: url(/images/stripes_bottom.webp);
    background-position: bottom left;
}

.section-banner:after{
    left: auto;
    background-image: url(/images/stripes_top.webp);
    background-position: top right;
}

.section-banner .content-block{
    padding: var(--gap-large);
}

.section-banner .content-block > h4{
    position: relative;
    font-size: var(--text-size-title);
    padding-top: var(--gap-huge);
    margin: 0px 0px var(--gap-normal) 0px;
    line-height: 1.2;
    z-index: 1;
}

.section-banner .content-block > span{
    display: block;
    padding-bottom: var(--gap-huge);
    font-size: var(--text-size-subheading);
    opacity: 0.6;
}