/* ------------------------ 
	FLEX
	------------------------ */ 
    .flex, 
    .flex-start,
    .flex-wrap { display: flex; }

    .flex-start { align-items: flex-start; }
    .flex-wrap { flex-wrap: wrap; }
    .flex-stretch { align-items: stretch; }
    .flex-column { flex-direction: column; }
    .flex-end { justify-content: flex-end; }

    .contain.row { align-items: stretch; }
    .contain.row > .col { 
        display: flex;
        flex-direction: column; 
        margin: 0; 
    }

    /*.flex-flow {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .flex-flow > .col { 
        flex: 1;
        display: flex;
        flex-direction: column;
        height: auto; 
    }*/

    /*e.g. topicon = start from top*/
    .contain.row.align-center > .col { 
        flex-direction: column;
        justify-content: flex-start;
    }


    /*center*/
    #textbox .contain.row.align-center > .col {
      justify-content: center;
      margin: auto;
    }
    .contain.row.align-center > .col > .box { 
       display: block;
    }
    .center > .button {
      justify-content: center;
    }
   
    #flexgrid .b-radius, 
    #flexgrid .b-radius .c-box {height: 100%;}
    #flexgrid .b-radius .c-box {width: 100%;}

    .row, 
    .row-left, .row-right,
    .inner.row > .col { display: flex; }
    .inner.row { align-items: stretch;}
    .inner.row > .col{ flex-direction: column; }
    
    .row-left,
    .row-right {
       justify-content: flex-end; 
       align-items: center;       
    }
    .row-left > div {margin-left: auto;  }
    .row-right > div {margin-right: auto;  }

    .inner { margin: auto; }
    .inner.row > .imagebox.col {margin: 0;}


    /* b-RADIUS */
    #flexgrid .b-radius,
    #flexgrid .b-radius #butbox.post p,
    #PostSwiper .b-radius,
    #PostSwiper .b-radius #butbox.post p,
    .about #flexgrid .b-radius img,
    .about #flexgrid .b-radius p.jobtitle {
        transition: .3s ease all;
		-moz-transition: .3s ease all;
		-webkit-transition: .3s ease all;
    }
    
    /* H:OVER */
    #flexgrid .b-radius:hover,
    #PostSwiper .b-radius:hover { box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;}
    #flexgrid .b-radius:hover #butbox.post p,
    #PostSwiper .b-radius:hover #butbox.post p { color: #f0aa00;}
    
    .about #flexgrid .b-radius:hover {box-shadow: rgba(149, 157, 165, 0.2) 0px 5px 12px;}
    .about #flexgrid .b-radius {cursor:pointer;}
    .about #flexgrid .b-radius:hover p.jobtitle {color: #E4A100;}
    .about #flexgrid .b-radius img {filter: grayscale(25%);}
    .about #flexgrid .b-radius:hover img {filter: grayscale(0%);}
    
    /* no H:OVER */
    #PostSwiper .swiper-slide.b-radius:hover { box-shadow: none;}

    /* ------------------------ 
    IMAGE/COPY top-bottom
	------------------------ */	
    #imgcopy .inner > .contain { 
        align-items: stretch;
        display: flex;
    }
    #imgcopy .inner > .contain > .col { 
        flex-direction: column;
        display: flex;
    }
    
    /* ------------------------ 
    FLEXBOX -> TABBOX + COPY/COPY *icon + COPY/COPY *image inside + COPY/COPY *single
	------------------------ */
    .flexbox,
    .flexbox #copy,
    .flexbox #copy .button {display: flex;}

    .flexbox {flex: 1; /* fill available height */}
    .flexbox #copy {
        flex-direction: column; 
        flex: 1; /* content grows */
    }
    
    .flexbox .button {margin-top: auto; /* 👈 magic line */}
    

    /*padding*/
    .flexbox #copy a.but { flex: none;}
    
    /*button*/
    /*body.single section#copyimg .contentbox a.but {
        margin-bottom: 1.5rem; 
    }
    body.single .flexbox #copy .button,
    body.single section#copyimg .contentbox a.but { margin-top: 2rem; }*/
     

    /* .single flex-button */
    body.single .flexbox #copy .button:has(> a:is(.top, .right, .left, .bottom, .center)) {
      display: block; /* before display flex */
      margin: 0;
      padding: 0;
      position: relative;
    }
    body.single .flexbox #copy .button:has(> a:is(.top, .right, .left, .bottom, .center)) > a {
      margin: 0;  
    }
    body.single .flexbox #copy .button:has(> a:is(.bottom))  {
      position: absolute;
      width: 100%;
      bottom: 2rem;
    }
    body.single .flexbox #copy .button:has(> a:is(.left))  {
      left: 2rem;
    }
    body.single .flexbox #copy .button:has(> a:is(.right))  {
      right: 2rem;
    }
    body.single .flexbox #copy .button:has(>a:is(.center))  {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    /* ------------------------ 
    FLEXBOX -> COPY/COPY *icon
	------------------------ */
    #textbox.icon .box.flexbox.center #copy {
        flex: unset;
    }
    #textbox.icon .contain.row {
      display: flex;
      flex-wrap: wrap;
    }
    #textbox.icon .box { 
        align-items: flex-start; 
        height: 100%; 
    }
   
    /* ------------------------ 
    TABBOX 
	------------------------ */
    .tab-content .box-repeat {
        display: none;
        width: 100%;
    }
    /* Fallback: show first tab if JS not loaded yet */
    body:not(.js-active) .tab-content .box-repeat:first-child {
        display: flex;
        flex-direction: row;
    }
    /* JS active controls */
    .tab-content .box-repeat.active {
        display: flex;
        flex-direction: row;
    }
    
    /*flex*/
    .tab-content {
        display: flex;
        flex-direction: column;
        overflow: hidden; 
    }
    
    /*padding*/
    .box-repeat .flexbox #copy {padding: 0 15px;}

    /* ------------------------ 
	BUTTON
	------------------------ */ 
    /*#butbox-contain {padding-top: 4rem;}*/
    #butbox-contain:has(.has_but) {padding-top: 3.5rem;}
    #butbox {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        padding: 0 1rem; 
    }
    #butbox a.but {margin-right: 0;}
    
    /*button post*/
    #butbox.post {
        padding: 1rem 0 .5rem;
        border-top: 1px solid #eee;
        width: 100%;
    }
    #butbox.post p {padding-bottom: 0px;}

    .masonry #butbox.post {border-top: 1px solid #ddd;}