/************
LAYOUT STYLES
************/

/***
FLEX
***/
.flex {
    display: -webkit-box;
	display: -moz-box;
	display: box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.flex.flexo>* {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
}

.flex.nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex.grow>* {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1
}

.flexcol {
	-webkit-box-orient: vertical;
	box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}
.flexrow {
	-webkit-box-orient: horizontal;
	box-orient: horizontal;
	-ms-flex-direction: row;
	flex-direction: row;
}
.flexdirection {
	-webkit-box-direction: normal;
	box-direction: normal;
}
.flexdirectionreverse {
	-webkit-box-direction: reverse;
	box-direction: reverse;
}
.flexstretch {
	-webkit-box-pack: justify;
	box-pack: justify;
	-ms-flex-pack: stretch;
	justify-content: space-between;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-box-align: stretch;
	box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}
.flexstart {
	-ms-flex-line-pack: flex-start;
	align-content: flex-start;
	-webkit-box-align: flex-start;
	box-align: flex-start;
	-ms-flex-align: flex-start;
	align-items: flex-start;
}
.flexwrap {
	-webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}
.flexfirst {
	-webkit-box-ordinal-group: 0;
	box-ordinal-group:-1;
	-ms-flex-order: -1;
	order: -1;
}
.flexorder {
	-webkit-box-ordinal-group: 1;
	box-ordinal-group:0;
	-ms-flex-order: -1;
	order: -1;
}
.flexistretch {
	-webkit-align-self: stretch;
	-ms-flex-item-align: stretch;
	-ms-grid-row-align: stretch;
	    align-self: stretch;
}
.flexaround {
	-moz-justify-content: space-around;
	-ms-justify-content: space-around;
 -ms-flex-pack: distribute;
     justify-content: space-around;
}
.flexspaceb {
	-webkit-box-pack: space-between;
	box-pack: space-between;
	-ms-flex-pack: space-between;
	-moz-flex-pack: space-between;
	justify-content: space-between;
}
.flexevenly {
	-webkit-box-pack: space-evenly;
	box-pack: space-evenly;
	-ms-flex-pack: space-evenly;
	-moz-flex-pack: space-evenly;
	justify-content: space-evenly;
}
.flexcenter {
	-moz-justify-content: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.flexend {
	-moz-justify-content: flex-end;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}

.flexvcenter {
	-webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
/* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */
/* https://codepen.io/dbushell/pen/YzWVzdY */
.wp-block-columns,
.wp-block-column {
    /*all: initial;
    color: inherit;*/
}
.wp-block-column {
    margin:0 !important;
}
.grid,
.wp-block-columns {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
    gap: var(--gridgap,0);
    gap: 0 var(--pad,0);
}
@supports (display: -ms-grid) {
    .grid,
    .wp-block-columns,
    .blocks-gallery-grid {
        display: -ms-grid;
    }
}
@supports (display: grid) {
    .grid,
    .wp-block-columns,
    .blocks-gallery-grid {
        display: grid !important;
    }
}
.grid > *
.wp-block-columns > *,
.wp-block-column,
.blocks-gallery-grid > * {
    overflow-wrap: break-word;
}
.blocks-gallery-item {
    width: 100% !important;
}  
@media screen and (min-width:640px) {
  .wp-block-columns {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .wp-block-column {
    grid-column-start: auto;
    grid-column-end: span 6;
  }
  
  .wp-block-gallery + * {
      margin-top: var(--pad);
  }
  .blocks-gallery-grid {
    grid-template-rows: masonry;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pad);
  }  

  .wp-block-column:only-child ,
  .columns-1 .blocks-gallery-grid {
    grid-template-columns: 1fr;
  }
  /*.blocks-gallery-item {
    align-self: start !important;
  } */ 
}
@media screen and (min-width: 960px) {
  /* Three column layout */
  .wp-block-column:not([style*='flex-basis']):nth-last-child(3):first-child,
  .wp-block-column:not([style*='flex-basis']):nth-last-child(3):first-child
    ~ .wp-block-column {
    grid-column-end: span 4;
  }

  /* "25 / 50 / 25" layout */
  .wp-block-column[style*='25%'] {
    grid-column-end: span 3;
  }
  .wp-block-column[style*='50%'] {
    grid-column-end: span 6;
  }

  /* "30 / 70" and "70 / 30" layouts */
  .wp-block-column[style*='33.33%'] {
    grid-column-end: span 4;
  }
  .wp-block-column[style*='66.66%'] {
    grid-column-end: span 8;
  }
    
  .columns-3 .blocks-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (min-width: 1280px) {
  .columns-4 .blocks-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.blocks-gallery-grid.is-cropped .blocks-gallery-image a, 
.blocks-gallery-grid.is-cropped .blocks-gallery-image img, 
.blocks-gallery-grid.is-cropped .blocks-gallery-item a, 
.blocks-gallery-grid.is-cropped .blocks-gallery-item img, 
.wp-block-gallery.is-cropped .blocks-gallery-image a, 
.wp-block-gallery.is-cropped .blocks-gallery-image img, 
.wp-block-gallery.is-cropped .blocks-gallery-item a, 
.wp-block-gallery.is-cropped .blocks-gallery-item img {
    /*height: auto !important;*/
}
.is-cropped .blocks-gallery-item a img {
    border-radius: var(--pad);
}  
.is-cropped .blocks-gallery-item a:hover img {
    border-radius: calc(var(--pad) / 2);
    box-shadow: 0 5px 5px 5px rgba(0,0,0,0.5);
    filter: contrast(1.5);
}
/*.blocks-gallery-grid.is-cropped .blocks-gallery-image a, 

.blocks-gallery-grid.is-cropped .blocks-gallery-image img, 

.blocks-gallery-grid.is-cropped .blocks-gallery-item a, 
.blocks-gallery-grid.is-cropped .blocks-gallery-item img, 
.wp-block-gallery.is-cropped .blocks-gallery-image a, 
.wp-block-gallery.is-cropped .blocks-gallery-image img, 
.wp-block-gallery.is-cropped .blocks-gallery-item a, 
.wp-block-gallery.is-cropped .blocks-gallery-item img {
    width: 100%;
}*/
.reverse {
    direction: rtl;
}
.reverse > * {
    direction: ltr;
}
.gridcenter {
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
    justify-items: center;
}
.gridstretch {
	-webkit-box-pack: stretch;
	-webkit-justify-content: stretch;
	-ms-flex-pack: stretch;
	justify-content: stretch;
}
.gridvcenter {
	-webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.gridgap {
	--gridgap: var(--pad);
}
.grid,
.grid21,
.grid31,
.grid321,
.grid4321,
.grid421 {
    gap: var(--gridgap);
	-ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
}
.grid2 {
	-ms-grid-columns: 1fr var(--gridgap) 1fr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid3 {
	-ms-grid-columns: 1fr var(--gridgap) 1fr var(--gridgap) 1fr;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (min-width:640px) {
    .gridauto {
        /*grid-template-columns: repeat( auto-fill, minmax(min(calc(180px + 12vmin), 100%), 1fr));*/
        grid-template-columns: repeat( auto-fit, minmax(236px, 1fr) );
    }
	.grid4321,.grid421 {
		-ms-grid-columns: 1fr var(--gridgap) 1fr;
    	grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.grid21 {
		-ms-grid-columns: 1fr var(--gridgap) 1fr;
    	grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media screen and (max-width:960px) {
	.grid21 .grid21 {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}
}
@media screen and (min-width:768px) {
	.grid31 {
		-ms-grid-columns: 1fr var(--gridgap) 1fr var(--gridgap) 1fr;
    	grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media screen and (min-width:640px) {
	.grid321 {
		-ms-grid-columns: 1fr var(--gridgap) 1fr;
    	grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media screen and (min-width:960px) {
	.grid4321,.grid321 {
		-ms-grid-columns: 1fr var(--gridgap) 1fr var(--gridgap) 1fr;
    	grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media screen and (min-width:1280px) {
	.grid421 {
		-ms-grid-columns: 1fr var(--gridgap) 1fr var(--gridgap) 1fr var(--gridgap) 1fr;
    	grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media screen and (min-width:1600px) {
	.grid4321 {
		-ms-grid-columns: 1fr var(--gridgap) 1fr var(--gridgap) 1fr var(--gridgap) 1fr;
    	grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.grid > *:only-child {
    grid-column: 1/-1;
}