/* ------------------------ 

COLOURS:


-------------------------------*/

/* ------------------------ BASE -------------------------------*/


/*
 * Font smoothing 
 * http://www.icondeposit.com/blog:how-to-properly-smooth-font-using-css3
 * http://stackoverflow.com/questions/8053389/how-to-reduce-font-weight-in-firefox-on-mac-with-css
 */

html,
html a {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}



/* ------------------------ LAYOUT -------------------------------*/



body {
    /* DUPLICATE blog.css */
    font-family: var(--body_font), 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: var(--body_font_weight_normal);
    font-size: 113%;
    line-height: 128%;
    color: var(--main_colour);
    letter-spacing: 0.04rem;
    /* END DUPLICATE blog.css */
    padding: 0;
    margin: 0 auto;
    background-color: var(--main_colour);
}

#page_wrap {
    background: #fff;
}

.page_width,
.wp-block-group-is-layout-constrained {
    max-width: var(--page_width);
    margin: 0 auto;
    padding: 0 var(--page_width_padding);
    box-sizing: border-box;
}

.narrow_width {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

.wide_width {
    max-width: var(--page_width_wide);
    margin: 0 auto;
    padding-left: var(--page_width_padding);
    padding-right: var(--page_width_padding);
}

.post_preview_inner {
    padding: var(--page_width_padding);
}

#page {
    margin: 0 auto;
}

header {
    padding: 25px var(--page_width_padding);
    display: flex;
}

.no_js_message {
    text-align: center;
    padding: 40px 15px 15px 15px;
    color: #fff;
    z-index: 2000;
    position: fixed;
    font-size: 1.8em;
    line-height: 1.5em;
    background: #888;
    opacity: 0.9;
    top: 0px;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    right: 0;
}
.no_js_message a {
    color: #fff;
}

.flex {
	display: flex;
}

.space_around {
    justify-content: space-around;
}

.space_between {
    justify-content: space-between;
}

.videoWrapper { 
    position: relative; 
    padding-bottom: 47.25%; 
    padding-top: 25px; 
    height: 0; 
}
.videoWrapper iframe { 
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

#logo a, #footer_logo a {
    width: 241px;
    height: 45px;
    background: no-repeat left top url('../images/matthias-garn-partner-logo.svg');
    display: inline-block;
    text-indent: -999em;
    background-size: contain;
}

#footer_logo a {
    background: no-repeat left top url('../images/matthias-garn-partner-logo-white.svg');
}

header {
    opacity: 0;
    transition: all 250ms ease-in-out;
}

header.active {
    opacity: 1;
}

.footer_insta {
    margin-bottom: 8px;
    display: block;
    margin-top: 4px;
}

/* ------------------------ BUTTON STYLES - DUPLICATE TO blog.css wp-block-file__button -------------------------------*/

button,
.button,
.wp-block-file__button,
.wp-block-file .wp-block-file__button,
.wp-block-button__link {
    border: none;
    background-color: var(--blue);
    text-transform: uppercase;
    cursor: pointer;
    padding: 8px 18px 10px 18px !important;
    /* change in IE STYLES  */
    color: #fff !important;
    font-family: var(--body_font), 'Helvetica Neue', Arial, Helvetica, sans-serif;
    width: auto;
    /* IE FIX  */
    overflow: visible;
    /* IE FIX  */
    font-size: 15px;
    text-decoration: none;
    transition: all 250ms ease-in-out;
    letter-spacing: 0.08rem;
    font-weight: var(--body_font_weight_bold);
    display: inline-block;
    border-radius: 0;
    line-height: 17px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
}

button:before,
.button:before,
.wp-block-file__button:before,
.wp-block-button__link:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border-top: 1px var(--blue) solid;
    border-right: 1px var(--blue) solid;
    transform: rotate(45deg);
    position: absolute;
    right: -18px;
    top: 8px;
    transition: all 250ms ease-in-out;
}

button:hover,
.button:hover,
.wp-block-file__button:hover,
.wp-block-button__link:hover {
    text-decoration: none;
    background-color: var(--blue);
}

button:hover:before,
.button:hover:before,
.wp-block-file__button:hover:before,
.wp-block-button__link:hover:before {
    right: -22px;
}

.btn_red a,
.btn_red a:hover {
    background: var(--red);
}

.btn_red a:before {
    border-color: var(--red);
}

.btn_green a,
.btn_green a:hover {
    background: var(--green);
}

.btn_green a:before {
    border-color: var(--green);
}

.btn_outline {
    background: transparent;
    border: 1px #fff solid;
}

.wp-block-button.is-style-outline--1 a,
.btn_outline {
    border-width: 1px !important;
}

.wp-block-button.is-style-outline--1 a:before,
.btn_outline:before {
    border-color: #fff;
}

.wp-block-button.is-style-outline--1 a:hover,
.btn_outline:hover {
    background: transparent;
}

/* ------------------------ GUTENBERG SWATCH COLOURS - copy colours function.php -------------------------------*/

.has-black-background-color {
    background-color: #656769;
}
.has-grey-background-color {
    background-color: #cccccc;
}
.has-black-color {
    color: #656769;
}
.has-grey-color {
    color: #cccccc;
}

/* ------------------------ GENERAL STYLES -------------------------------*/

.nav_wrap {
    margin: 0 0 0 auto;
}

#nav {
    margin-top: 10px;
}

#nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

#nav li {
    padding: 0;
    margin: 0;
}

#nav a {
    color: var(--main_colour);
    font-weight: var(--body_font_weight_bold);
    text-decoration: none;
    padding: 5px 0 5px 22px;
    letter-spacing: 0.05rem;
    font-size: 16px;
}

#nav a:hover {
    color: var(--blue);
}

.current-menu-item a,
.current-page-ancestor a,
.current_page_parent a {
    color: var(--blue) !important;
}

.menu_active .current-menu-item a,
.menu_active .current-page-ancestor a, 
.menu_active .current_page_parent a {
    color: #fff !important;
    opacity: 0.5;
}

.view_menu_btn {
    display: none;
    cursor: pointer;
    margin: 0 auto;
    position: relative;
    width: 20px;
    padding: 10px 0 0 0;
}

.bar1,
.bar2,
.bar3 {
    width: 30px;
    height: 1px;
    background-color: var(--blue);
    margin: 6px 0;
    transition: 0.4s;
    display: block;
}

.menu_active .bar1 {
    transform: rotate(-45deg) translate(-5px, 4px);
}

.menu_active .bar2 {
    opacity: 0;
}

.menu_active .bar3 {
    transform: rotate(45deg) translate(-6px, -5px);
}

#menu-item-26 {
    display: none;
}

footer {
    background: var(--main_colour);
    color: #fff;
    padding: 55px var(--page_width_padding);
    display: flex; 
    gap: 50px;
    font-size: 16px;
}

#footer_logo {
    margin-right: auto;
}

.imprint {
    width: 165px;
    font-size: 12px;
    line-height: 18px;
}

.imprint a {
    color: #fff;
}

.imprint span {
    display: block;
}

.menu-footer ul,
.menu-footer li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-footer a {
    display: block;
    color: #fff;
    padding: 2px 0;
    text-decoration: none;
    font-weight: var(--body_font_weight_bold);
}

.menu-footer li:first-of-type a {
    padding-top: 0;   
}

.footer_office h4 {
    font-size: 16px;
    margin: 0;
    letter-spacing: 0.04rem;
    line-height: 128%;
}

.footer_office p {
    margin: 5px 0;
}

.box_content {
    background: var(--blue);
    color: #fff;
    position: relative;
}


.box_content_lrg_txt {
    font-size: 30px;
    line-height: 35px;
}

.green_box_content {
    background: var(--green);
}

.purple_box_content {
    background: var(--purple);
}

.yellow_box_content {
    background: var(--yellow);
}

.box_content:after {
    content: '';
    width: 21px;
    height: 21px;
    background: no-repeat -29px -2px url('../images/mg-sprite.svg?v=5');
    display: inline-block;
    position: absolute;
    top: 16px;
    left: calc(50% - 35px);
}

.box_content_img_right.box_content:after {
    right: calc(50% - 35px);
    left: auto;
}

.box_content .wp-block-media-text__content {
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding: 0 var(--page_width_padding);
}

.box_content_line {
    height: 1px;
    background: #fff;
    position: absolute;
    left:  var(--page_width_padding);
    width: 0%;
    transition: all 550ms ease-out;
}    

.active .box_content_line {
    width: calc(100% + (((var(--vw) * 50) - 100%) / 2 - var(--page_width_padding)));
}  

.box_content_line_left .box_content_line {
    right:  var(--page_width_padding);
    left: auto;
}

.splide__arrows {
    text-align: right;
    padding-bottom: 20px;
}

.splide__arrow {
    background: none;
    padding: 0;
}

.splide__arrow:hover {
    background: none;
}

.splide__arrow svg {
    display: none;
}

.splide__arrow--next:before, 
.splide__arrow--prev:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-top: 1px var(--green) solid;
    border-right: 1px var(--green) solid;
    transform: rotate(45deg);
    position: relative;
    left: -7px;
    transition: all 250ms ease-in-out;
    top: -1px;
}

.post_preview_inner .splide__arrow--next:before {
    border-top-color: #fff;
    border-right-color: #fff;
}

.splide__arrow--prev:before {
    transform: rotate(45deg);
    border-right: none;
    border-left: 1px var(--green) solid;
    transform: rotate(-45deg);
    left: 7px;
}
 
.post_preview_inner .splide__arrow--prev:before {
    border-top-color: #fff;
    border-left-color: #fff;
}


.splide__arrow--next:hover:before {
    left: -2px;
}

.splide__arrow--prev:hover:before {
    left: 2px;
}

.splide__arrow--next,
.splide__arrow--prev {
    width: 20px;
    height: 30px;
}

.project_preview {
    padding: var(--page_width_padding);
}

.project_preview h3,
.post_preview_inner h3 {
    margin: 0;
}

.project_preview h3:before {
    content: url(data:image/svg+xml,%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%22%3E%3Cg%3E%3Crect%20x%3D%220.567%22%20y%3D%220.567%22%20width%3D%2218.867%22%20height%3D%2218.867%22%20style%3D%22fill%3Anone%3Bstroke%3A%2342a342%3Bstroke-width%3A0.98px%3B%22%2F%3E%3Cpath%20d%3D%22M9.984%2C2.599l-0%2C14.801%22%20style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%2342a342%3Bstroke-width%3A0.98px%3B%22%2F%3E%3Cpath%20d%3D%22M7.517%2C5.33l5.116%2C-0%22%20style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%2342a342%3Bstroke-width%3A0.98px%3B%22%2F%3E%3Cpath%20d%3D%22M6.413%2C10.663l7.23%2C-2.782l-0.464%2C-0.987%22%20style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%2342a342%3Bstroke-width%3A0.98px%3B%22%2F%3E%3Cpath%20d%3D%22M10.05%2C12.834l4.527%2C4.244%22%20style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%2342a342%3Bstroke-width%3A0.98px%3B%22%2F%3E%3Cpath%20d%3D%22M9.95%2C12.834l-4.526%2C4.244%22%20style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%2342a342%3Bstroke-width%3A0.98px%3B%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
    margin-right: 10px;
    position: relative;
    top: 1px;
}

.project_preview .splide,
.post_preview_inner .splide {
    margin-top: -30px;
}

.project_header {
    position: relative;
    z-index: 1;
    margin-right: 75px;
}

.view_all {
    margin-left: auto;
    font-size: 16px;
    font-weight: var(--body_font_weight_bold);
    color: var(--green);
    text-decoration: none;
}

.view_all:hover {
    text-decoration: underline;
}

.project_preview .view_all {
    position: relative;
    top: 3px;
}

.post_preview_wrap .view_all {
    float: right;
    margin-top: 4px;
}

.project_preview_link {
    display: block;
    font-size: 17px;
    line-height: 19px;
    color: var(--main_colour);
    text-decoration: none;
    font-weight: var(--body_font_weight_bold);
}

.project_preview_link p {
    margin: 5px 0;
    padding-left: 15px;
    position: relative;
}

.project_preview_link p:before,
.team_name:before {
    content: '';
    display: inline-block;
    width:10px;
    height: 10px;
    border-top: 1px var(--green) solid;
    border-right: 1px var(--green) solid;
    transform: rotate(45deg);
    position: absolute;
    left: -4px;
    top: 5px;
    transition: all 250ms ease-in-out;
}

.team_name:before {
    top: 7px;
}

.project_preview_link:hover {
    color: var(--green);
}

.project_preview_link:hover p:before,
.team_card_flip:hover + .team_name:before {
    left: -2px;
}

.project_preview_img,
.post_img_wrap {
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 350ms ease-in-out;
    background-size: 100%;
    padding-bottom: 100%;
}

.project_preview_link:hover .project_preview_img,
.post_img_wrap:hover {
    background-size: 105%;
}

.mini_header {
    font-size: 17px;
    line-height: 19px;
    text-transform: uppercase;
    letter-spacing: 0.09rem;
}

.mini_header:before {
    content: '';
    width: 21px;
    height: 21px;
    background: no-repeat -1px -1px url('../images/mg-sprite.svg?v=5');
    display: inline-block;
    margin-right: 7px;
    position: relative;
    top: 4px;
}

.vert_line_blue .mini_header:before {
    background: no-repeat -55px -1px url('../images/mg-sprite.svg?v=5');
}

.vert_line_purple .mini_header:before {
    background: no-repeat -80px -1px url('../images/mg-sprite.svg?v=5');
}

.vert_line {
    position: relative;
}

.vert_line:before {
    content: '';
    position: absolute;
    left: 23px;
    background: var(--yellow);
    width: 1px;
    height: 0%;
    top: calc(var(--spacer_height) * -1);
    transition: all 550ms ease-out;
    transition-delay: 500ms;
}

.vert_line.active:before {
    height: calc(100% + var(--spacer_height));
}

.vert_line_blue:before {
    background: var(--blue);
}

.vert_line_blue .mini_header_rotate.mini_header:after {
    background: no-repeat -55px -1px url('../images/mg-sprite.svg?v=5');
}

.vert_line_green:before {
    background: var(--green);
}

.vert_line_green .mini_header:before {
    background: no-repeat -105px -1px url('../images/mg-sprite.svg?v=5');
}

.vert_line_purple:before {
    background: var(--purple);
}

.vert_line_purple .mini_header_rotate.mini_header:after {
    background: no-repeat -80px -1px url('../images/mg-sprite.svg?v=5');
}

.mini_header_rotate {
    margin: 0;
    left: -36px;
    top: 5px;
    position: absolute;
    transform-origin: top left;
    transform: rotate(-90deg) translateY(-100%)  translateX(-100%);
}

.mini_header_rotate.mini_header:before {
    display: none;
}

.mini_header_rotate.mini_header:after {
    content: '';
    width: 21px;
    height: 21px;
    background: no-repeat -1px -1px url('../images/mg-sprite.svg?v=5');
    display: inline-block;
    margin-left: 7px;
    position: relative;
    top: 4px;
}

.vert_line_who .mini_header_rotate {
    top: 8px;
}

div:has(> .mini_header_rotate) {
    position: relative;
}

.wp-block-column > .wp-block-heading,
.no_margin_top {
    margin-top: 0;
}

.post_preview_wrap {
    background: var(--red);
    color: #fff;
}

.post_preview_wrap a {
    color: #fff;
}

.post_preview_inner > h3 {
    margin: 0 0 var(--page_width_padding) 0;
}

.post_preview_inner > h3 a {
    text-decoration: none;
}

.post_preview_inner > h3 a:before {
    content: '';
    width: 21px;
    height: 21px;
    background: no-repeat -29px -2px url('../images/mg-sprite.svg?v=5');
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: 3px;
}

.post_preview {
    display: grid;
    gap: 2px;
    grid-template-columns: 1fr 1fr 1fr;
}    

.post_box_info {
    padding: 26px;
}

.post_box img {
    vertical-align: bottom;
}

.post_box_info h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.post_box_info p:first-of-type {
    margin-top: 0px;
}

.post_box_info p:last-of-type {
    margin-bottom: 0px;
}

.post_box_info .button {
    margin-top: 17px;
}

.post_img_wrap {
    
}

.blog .post_box_info h3 a {
    color: var(--red);
    text-decoration: none;
}

.expertise_overview_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.expertise_item {
    display: block;
    background: var(--blue);
    color: #fff;
    text-decoration: none;
}

.expertise_item:hover {
    color: #fff !important;
}

.expertise_image {
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 350ms ease-in-out;
    background-size: 100%;
    padding-bottom: 60%;
}

.expertise_overview_wrap > :first-child .expertise_image {
    padding-bottom: 50%;
}

.expertise_item:hover .expertise_image {
    background-size: 105%;
}

.expertise_overview_wrap > :first-child {
    grid-column: span 2; 
}

.expertise_item h3,
.projects_item h3 {
    margin: 0;
    font-weight: var(--body_font_weight_normal);
    font-size: 21px;
    padding: 13px 26px 17px 42px;
    position: relative;
    transition: all 350ms ease-in-out;
}

.projects_item h3 {
    padding-bottom: 0;
}

.expertise_item h3:before,
.projects_item h3:before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 1px #fff solid;
    border-right: 1px #fff solid;
    transform: rotate(45deg);
    position: absolute;
    left: 18px;
    top: 19px;
    transition: all 250ms ease-in-out;
}

.projects_item:hover h3,
.expertise_item:hover h3 {
   /* padding-left: 48px;*/
}

.expertise_item:hover h3:before,
.projects_item:hover h3:before {
    left: 20px;
}

.two_images_wrap {
    position: relative;
    padding-bottom: 100%;
}

.two_images_wrap figure {
    position: absolute;
}

.expertise_block {
    gap: 0;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    margin-bottom: 0;
    align-items: center !important;
}

.projects_overview_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.projects_item {
    display: block;
    background: var(--green);
    color: #fff;
    text-decoration: none;
}

.projects_item:hover {
    color: #fff !important;
}

.projects_image {
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 350ms ease-in-out;
    background-size: 100%;
    padding-bottom: 60%;
}

.projects_item:hover .projects_image {
    background-size: 105%;
}

.project_location,
.project_expertise {
    margin: 3px 0;
    padding-left: 42px;
    font-size: 14px;
    line-height: 16px;
    font-weight: var(--body_font_weight_bold);
    max-width: 650px;
}

.project_location {
    margin-top: 7px;
}

.project_expertise {
    color: var(--yellow);
}

.projects_info {
    padding-bottom: 13px;
    padding-right: 20px;
}

.expertise_list {
    font-weight: var(--body_font_weight_bold); 
    color: var(--yellow);
    font-size: 0.9rem;
    font-size: 17px;
    line-height: 22px;
    padding-left: 15px;
    position: relative;
    margin: 20px 0 40px 0;
}

.expertise_list:before {
    content: '';
    width: 1px;
    background: var(--yellow);
    height: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: all 450ms ease-in-out;
    transition-delay: 500ms;
}

.expertise_list.active:before {
    height: calc(100% + 15px);
}

figure {
    position: relative;
    overflow: hidden;
}    

figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    font-size: 16px;
    line-height: 18px;
    font-weight: var(--body_font_weight_bold);
    padding: 9px 15px;
    margin: 0 !important;
    background: #4b72c2a8;
    transition: all 450ms ease-in-out;
    transform: translateY(100%);
}

.single-project figcaption {
    background: #42a342b8;
}

figcaption.active {
    transform: translateY(0%);
}

.image_row {
    gap: 2px;
    margin-bottom: 2px;
}

.image_row img {
    width: 100%;
}

.has-font-size-large-font-size {
    line-height: 117%;
    font-weight: var(--body_font_weight_light);
}

.parent-pageid-10 .entry .wp-block-button,
.single-project .entry .wp-block-button {
    width: 152px;
}

.image_info_block {
    background: var(--green);
    color: #fff;
    font-size: 18px;
    line-height: 22px;
    font-weight: var(--body_font_weight_bold);
}

p + .image_info_block,
p + figure {
    margin-top: 30px;
}

.projects_button_wrap {
    margin-bottom: 0px;
    margin-top: 30px;
}

.image_info_block > .wp-block-media-text__content {
    align-self: flex-start;
    padding-top: calc(8% - 7px);
    padding-bottom: calc(8% - 7px);
    padding-right: 16%;
    max-width: 270px;
}

.image_info_block > .wp-block-media-text__content p:first-of-type {
    margin-top: 0;
}

.image_info_block > .wp-block-media-text__content p:last-of-type {
    margin-bottom: 0;
}

.has-media-on-the-right.image_info_block > .wp-block-media-text__content {
    align-self: flex-end;
    text-align: right;
    padding-right: 8%;
    padding-left: 16%;
    margin-left: auto;
}

.image_info_block_yellow {
    background: var(--yellow);
}

.image_info_block_purple {
    background: var(--purple);
}

.navigation {
    padding: 26px;
    background: var(--red);
    display: flex;
}

.next-entries {
    display: inline-block;
    margin-left: auto;
    padding-right: 20px;
}

.previous-entries {
    display: inline-block;
    padding-left: 20px;
}

.previous-entries a.button:before {
    left: -18px;
    right: auto;
    transform: rotate(-135deg);
}

.previous-entries a.button:hover:before {
    left: -22px;
 } 

.single-post #content,
body.error404 #content {
    padding-top: var(--spacer_height);
    padding-bottom: var(--spacer_height);
}

.banner_image_wrap img,
.slideshow img {
    width: 100%;
}

/* team_card_flip */

.team_card_flip_wrap {
	opacity: 0;
    transform: translateY(20px);
    transition: all 350ms ease-in-out;
	transition-delay: var(--delay); 
}

.team_card_flip_wrap.active {
	opacity: 1;
    transform: translateY(0px);
}

.team_card_flip {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    perspective: 1000px;
    cursor: pointer;
}

.team_card_flip .team_img,
.team_card_flip .team_content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform .6s ease;
    overflow: hidden;
}

.team_card_flip .team_img {
    transform: rotateY(0deg);
}

.team_card_flip .team_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team_card_flip .team_content {
    transform: rotateY(180deg);
    background: var(--green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    text-align: center;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 17px;
}

/* Desktop hover */
@media (hover:hover) {

    .team_card_flip:hover .team_img {
        transform: rotateY(-180deg);
    }

    .team_card_flip:hover .team_content {
        transform: rotateY(0deg);
    }

}

/* Mobile click */
.team_card_flip.is-flipped .team_img {
    transform: rotateY(-180deg);
}

.team_card_flip.is-flipped .team_content {
    transform: rotateY(0deg);
}

/* Optional */
.team_content p {
    margin: 0;
}

.team_name {
    margin: 5px 0;
    padding-left: 15px;
    position: relative;
}

.team_members_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.team_card_flip:hover + .team_name {
    color: var(--purple);
}

/* END team_card_flip */

.contact_insta {
    display: block;
    margin: 0 0 5px 0;
    text-decoration: none;
    position: relative;
    padding-left: 35px;
    padding-top: 8px;
    min-height: 25px;
}

.contact_insta_1 {
    margin-top: -15px;
}

.contact_insta svg {
    position: absolute;
    top: 7px;
    left: 0;
    margin-right: 5px;
}

/* ------------------------ .slideshow STYLES -------------------------------*/

/**
 * Styling the container (the wrapper)
 * 
 * position is used to make this box a containing block (it becomes a reference for its absolutely positioned children). overflow will hide part of the images moving outside of the box.
 */

.slideshow {
    position:relative;
    width:100%;
    height: 50vw;
    overflow:hidden;
}

.slideshow {
    height: 44vw;
}

/**
 * Styling the images
 *
 * position:absolute is to put all images in a stack. Dimensions are set to increase the size of these images so their edges do not appear in the parent box when we move them inside the said box.
 * Because the images are now larger than their parent container, we use top, left and margin values to align them in the center of the box.
 * Finally, we set the transition (property and duration). Note that duration values are different for opacity and transform as we want the "fade-in" effect to be faster than the "panning" effect.
 */

.slideshow > figure {
    position:absolute;
    width:100%;
    height: 50vw;
    top:50%;
    left:50%;
    margin-left: -50%;
    margin-top: -25vw;
    opacity:0;
    transition-property: opacity, transform;
    transition-duration: 3s, 10s;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/**
 * We change the point of origin using four corners so images do not move in the same direction. 
 * This technique allows us to create various paths while applying the same translate() values to all images (see the 'fx' class further below).
 */

.slideshow > figure  {
    transform-origin: bottom left;
}

.slideshow :nth-child(2n+1) {
    transform-origin: top right;
}

.slideshow :nth-child(3n+1) {
    transform-origin: top left;
}
.slideshow :nth-child(4n+1) {
    transform-origin: bottom right;
}


/**
 * Because images are styled with a different point of origin, the following rule will create different panning effects.
 */

.slideshow .fx {
    opacity:1;
    transform: scale(1.05);
}

/* ------------------------ RESPONSIVE STYLES -------------------------------*/

/* Stops iphone trying to resize text when rotating */

html { -webkit-text-size-adjust:none; }

/* smartphones, touchscreens */

@media (hover: none) and (pointer: coarse) {

}


@media all and (max-width: 1510px) {
    .vert_line_who .mini_header_rotate {
        transform: none;
        position: static;
        margin-bottom: 25px;
    }
    .vert_line_who .mini_header_rotate.mini_header:after {
        display: none;
    }
    .vert_line_who .mini_header_rotate.mini_header:before {
        display: inline-block;
    }
    .vert_line_who .vert_line:before {
        left: 15px;
    }
}

@media all and (max-width: 1111px) {
    .mini_header_rotate {
        transform: none;
        position: static;
        margin-bottom: 25px;
    }
    .mini_header_rotate.mini_header:after {
        display: none;
    }
    .mini_header_rotate.mini_header:before {
        display: inline-block;
    }
    .vert_line:before {
        left: 15px;
    }
}

@media all and (max-width: 950px) {
    .box_content {
        grid-template-columns: 100% !important;
    }
    .box_content > * {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .box_content .wp-block-media-text__content {
        padding-top: var(--spacer_height);        
        padding-bottom: var(--spacer_height);        
    }
    .box_content:after,
    .box_content_img_right.box_content:after {
        left: 16px;
        top: 18px;
    }
    .reverse_order_mobile > :first-child {
        order: 2;
    }
    .box_content_line,
    .box_content_line_left .box_content_line {
        width: 1px;
        height: 0%;
        right: auto;
        left: 15px;
        top: calc(var(--spacer_height) + 7px);
    }
    .active .box_content_line {
        height: calc(100% - var(--spacer_height) - 7px);
        width: 1px;
    }      
    .box_content p {
        margin-top: 0;
    }
}

@media all and (max-width: 840px) {
    /** NAV **/
    #nav {
        margin-top: 0;
    }
    header {
        display: block;
        text-align: center;
        padding: 20px;
    }
    .view_menu_btn {
        display: block;
        position: relative;
    }
    
    .view_menu_btn.menu_active {
        z-index: 1500;
    }
    
    .menu_active .bar1, .menu_active .bar2, .menu_active .bar3 {
        background-color: #fff; 
    }

    #nav {
        display: block;
        position: fixed;
        background: var(--blue);
        top: 100%;
        left: 0;
        bottom: 0;
        right: 0;
        padding: 120px 20px 20px 20px;
        z-index: 1000;
        overscroll-behavior: contain;
        overflow: auto;
    }
    
    #nav.menu_active {
        top: 0%;
    }
    
    #nav ul {
        display: block;
    }
    
    #nav a {
        color: #fff;
        padding: 10px;
        font-size: 34px;
        display: block;
    }
    
    #nav a:hover {
        color: #fff;
        opacity: 0.5;
    }

    #nav li {
        display: block;
    }
    #menu-item-26 {
        display: block;
        margin-top: 15px;
    }
    #menu-item-26 a {
        width: 22px;
        height: 22px;
        background: no-repeat -1px 0px url(../images/mg-sprite.svg?v=5);
        display: inline-block;
        text-indent: -999em;
        padding: 0px;
        margin-top: 28px;
    }
    header {
        padding-bottom: 15px;    
    }
    /* END NAV */
    footer {
        display: block;
        text-align: center;
        padding: 35px var(--page_width_padding);
    }
    footer > div {
        border-bottom: 1px solid #ffffff2b;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    #footer_logo {
        margin-right: unset;
    }
    .imprint {
        width: auto;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0px;
    }
    .team_members_wrap {
        grid-template-columns: 1fr 1fr;
    }
}
@media all and (min-width: 839px) {
    /** NAV - make sure it's displayed even if it has and inline style via js  **/
	#nav { display: block !important; }
}

@media all and (max-width: 781px) {
    .text_only_columns {
        gap: 0;
    }
}

@media all and (max-width: 750px) {
    .post_preview {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .home .post_box_info {
        padding: 15px 0;
    }
}

@media all and (max-width: 550px) {
    .team_members_wrap {
        grid-template-columns: 1fr;
    }
}

@media all and (max-width: 500px) {
    .expertise_overview_wrap,
    .projects_overview_wrap {
        grid-template-columns: 1fr;
    }
    .expertise_overview_wrap > :first-child {
        grid-column: span 1;
    }
}

@media all and (max-width: 440px) {
    :root {
        --page_width_padding: 25px;
        --spacer_height: 65px;
    }
    .main_spacer {
        height: 65px !important;
    }
    .box_content_lrg_txt {
        font-size: 26px;
        line-height: 31px;
    }
    .project_header {
        margin-right: 68px;
    }
    
}

/*** prevents FOUC ****/
html {
    visibility: visible;
    opacity: 1;
}

/*** no ie support ****/

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #old_browser { display: block; }
}



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/* splidejs */

@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}