/*-------------------------------------------------------------------------*/
/*	4	Box-1-2-3
/*-------------------------------------------------------------------------*/
.box-1, .box-2, .box-3{ position:relative; overflow:hidden; border-radius:var(--sq-rad); background:var(--clr-s);}
.box-1:hover {box-shadow:10px 40px 50px rgba(229, 233, 246, 0.4);}
.box-name {margin: 0 0 var(--margin-top);}
.box-block {overflow:hidden; width:100%;}
.box-img {overflow:hidden; position:relative;}
.box-img img {margin-bottom: 0px; justify-content: center; align-content: center; display: flex; width: 100%; height: 100%; object-fit: cover;}
.box-1:hover .box-img img, .box-2:hover .box-img img {transform: scale(1.1)}
.box-img iframe {}

.box-2 {display:grid}
.grid-2 .box-2, .grid-3 .box-2, .grid-4 .box-2, .grid-5 .box-2, .grid-6 .box-2, .grid-7 .box-2, .grid-8 .box-2 {display:flex; flex-wrap:wrap;}

.post-link {border: var(--sq-bor) solid var(--clr-m); padding:calc(var(--margin-top)/2);position:relative}
.box-text {margin: 0; height: 100%;}
.box-text h2, .box-text p, .box-text a {margin-top:var(--margin-top);}
.box-text h2 {text-align:center; font-size:1.5em; margin-top:0}
.box-teg, .box-text > a {margin-top:0px}
.box-teg > * {border:1px solid var(--clr-m); color:var(--clr-m); font-size: 0.9em; border-radius:50px; padding:5px 10px; display: inline-block; margin:10px 10px 0 0;}
.box-teg > *:hover {border:1px solid var(--clr-m); background: var(--clr-m); color:var(--clr-i)}
.box-date {color:var(--clr-g);}


.box-icon {width:100%; height:0px; padding-bottom:50px; background:no-repeat center; background-size:contain; background-size:auto}
.box-title {}
.box-separator {background:var(--clr-m); width:60px; max-width:100%; margin:0 auto; margin-top:2vh; height:2px; display:block; border:0}
/*wp-block-separator*/
.box-expert {/*flex: 1 0 auto;*/}
.box-more {position:absolute; bottom:calc(var(--margin-top)/2); text-transform: uppercase; font-weight: 600; right:calc(var(--margin-top)/2)}
.box-smm {display:flex; margin-top:var(--margin-top); justify-content:center;}
.box-smm > * {width: 20px; height: 20px; background: #f00; text-align: center; margin: 0 10px;}
.box-smm > * p {margin-top: 0;}
.box-1 a:hover .box-more:after, .box-2 a:hover .box-more:after {margin-left:20px;}
.box-button {background:var(--clr-m); color:var(--clr-i); align-items:center; width:fit-content; padding:10px 20px; border-radius:var(--sq-rad); margin:0 auto; margin-top:var(--margin-top);
	
display: inline-block

}
.box-button:after {content:''; padding:calc(26px/2); margin-left:10px; background-size:contain; background-repeat:no-repeat; background-position:center; background-color: #f0f; background-image:url(arr-1b.png);}



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

.box-1 {/*background: ; padding: ; color: ; box-shadow: ;*/}
.box-1 .box-block {/*background: ; padding: ; color: ; box-shadow: ;*/}
.box-1 .box-img {/*background: ; padding: ; color: ; box-shadow: ;*/}
.box-1 .box-text, .box-2 .box-text {/*background: ; padding: ; color: ; box-shadow: ;*/}
.box-1:hover, .box-2:hover, .box-3:hover {box-shadow: 0px 10px 6px 2px rgb(0 0 0 / 20%);}
.box-1 > div:last-child {padding-bottom: calc(var(--margin-top)*2);}

/*wp-block-separator*/
.box-1 a:hover .box-more:after {margin-left:20px;}
/*--------------------------------------------------*/
.box-1 > a.box-block {height: 100%; display: block;}
/*--------------------------------------------------*/

.box-1 .box-block, .box-2 .box-block {height:100%;}

.box-1:hover .box-button {background:var(--clr-s); color:var(--clr-i)}
.box-1:hover .box-button:after {content:''; margin-left: 10px;}
.box-2:hover .box-button {background:var(--clr-s); color:var(--clr-i)}
.box-2:hover .box-button:after {content:''; margin-left: 10px;}

.box-2 > h2 {justify-content: space-between; width: 100%;}
.box-2 {--box-wi:33%;}
.box-2 .box-img { border-radius:var(--sq-rad); width:var(--box-wi); height:100%;}
.box-2 .box-text {width:100%;}
.box-2 .box-img + .box-text{width:calc(100% - var(--box-wi));}
.box-2 .box-block {display:flex; justify-content:space-between; flex-wrap:wrap;}
.box-2 .box-block > div:last-child {padding-bottom: calc(var(--margin-top)*4);}
.box-2[class*="sq"] .box-block {position:absolute; height:100%;}
.box-2[class*="sq"] .box-text {position:relative;}





.box-3 .sq20 .box-text {height:calc(100% - var(--sq-pad)/0.2*2); top:calc(var(--sq-pad)/0.2);}
.box-3 .sq25 .box-text {height:calc(100% - var(--sq-pad)/0.25*2); top:calc(var(--sq-pad)/0.25);}
.box-3 .sq30 .box-text {height:calc(100% - var(--sq-pad)/0.3*2); top:calc(var(--sq-pad)/0.3);}
.box-3 .sq33 .box-text {height:calc(100% - var(--sq-pad)/0.33*2); top:calc(var(--sq-pad)/0.33);}
.box-3 .sq50 .box-text {height:calc(100% - var(--sq-pad)/0.5*2); top:calc(var(--sq-pad)/0.5);}
.box-3 .sq66 .box-text {height:calc(100% - var(--sq-pad)/0.66*2); top:calc(var(--sq-pad)/0.6);}
.box-3 .sq70 .box-text {height:calc(100% - var(--sq-pad)/0.7*2); top:calc(var(--sq-pad)/0.7);}
.box-3 .sq80 .box-text {height:calc(100% - var(--sq-pad)/0.8*2); top:calc(var(--sq-pad)/0.8);}
.box-3 .sq100 .box-text {height:calc(100% - var(--sq-pad)/1*2); top:calc(var(--sq-pad));}
.box-3 .sq120 .box-text {height:calc(100% - var(--sq-pad)/1.2*2); top:calc(var(--sq-pad)/1.2);}
.box-3 .sq140 .box-text {height:calc(100% - var(--sq-pad)/1.4*2); top:calc(var(--sq-pad)/1.4);}
.box-3 .sq150 .box-text {height:calc(100% - var(--sq-pad)/1.5*2); top:calc(var(--sq-pad)/1.5);}
.box-3 .sq160 .box-text {height:calc(100% - var(--sq-pad)/1.6*2); top:calc(var(--sq-pad)/1.6);}
.box-3 .sq180 .box-text {height:calc(100% - var(--sq-pad)/1.8*2); top:calc(var(--sq-pad)/1.8);}
.box-3 .sq200 .box-text {height:calc(100% - var(--sq-pad)/2*2); top:calc(var(--sq-pad)/2);}


.box-3 .box-block {display: block; position: relative; background-color:var(--clr-i); background-size: cover;}
.box-3 .box-img {position:absolute; z-index:1; height:100%; width:100%}
.box-3:hover .box-img img {transform: scale(1.1)}
.box-3 .box-text {padding: 0 var(--sq-pad); height:calc(100% - var(--sq-pad)*2); top:var(--sq-pad); width: calc(100% - var(--sq-pad)*2); position:absolute; z-index:2; left:var(--sq-pad); text-align: center; min-height:50px; background-color:rgb(0, 0, 0, 0.64); color:var(--clr-i); overflow:hidden; transition-duration: 0.5s; transition: 0.5s;}	

.box-3 .box-text[class*="grid-"] {display:grid;}
.box-3 .box-text.grid-f {align-content:space-between;}
.box-3 .box-text.grid-c {align-content: center;}
.box-3 .box-expert, .box-3 .box-more {color: #fff}
.box-3 .box-pad {}
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! - де саме ставити */
.column-center .box-3 .box-block {position:absolute; height:100%;}


/*squeeze box-z*/
.box-3 [class*="box-z"] {height:5%}
.box-3 .box-text.box-z-t {top:var(--sq-pad)}
.box-3 .box-text.box-z-c {top:calc(50% - var(--sq-pad));}
.box-3 .box-text.box-z-b {bottom:var(--sq-pad); top:auto}
.box-3:hover .box-z-c {top:var(--sq-pad);}

.box-text[class*="box-z"] .box-teg, .box-3 [class*="box-z"] .box-icon, .box-3 [class*="box-z"] .box-date {max-height:0%; padding-bottom:0px; overflow: hidden; margin-top:0;}
.box-3 [class*="box-z"] .box-text a, .box-3 [class*="box-z"] .box-text h2 {margin-top:0;}
/*.box-3 .box-text > a {width: calc(100% - var(--sq-pad)*2);}*/
.box-3 [class*="box-z"] .box-more {opacity: 0;}


.box-3:hover [class*="box-z"] {height:calc(100% - var(--sq-pad)*2)}
.box-3:hover [class*="box-z"] .box-teg, .box-3:hover [class*="box-z"] .box-icon, .box-3:hover [class*="box-z"] .box-date, .box-3:hover [class*="box-z"] .box-text > a{-webkit-transition: all 0.4s ease; transition: all 0.4s ease; max-height: 100%; margin-top: var(--margin-top);}
.box-3:hover [class*="box-z"] .box-icon {-webkit-transition: padding 2.4s ease; transition: padding 2.4s ease; padding-bottom:50px}
.box-3:hover [class*="box-z"] .box-more {opacity:1;}






/*box-on-img - only box-1*/
.box-1 .box-on-img {width:80%; margin:0 auto; margin-top:-20%; z-index:2; position:relative; background:#fff; padding:0 10px 10px;}
.box-2 .box-on-img {width: 80%; height: 75%; overflow: hidden; margin: 10% 0 10% 20%; z-index: 2; position: absolute; background: #fff; padding: 10px;}
.box-1 > h2 + .box-block .box-img {border-radius: var(--sq-rad) var(--sq-rad) var(--sq-rad) var(--sq-rad);}

/*Poloroid - only box-3*/
.box-pol {--pol-color:var(--clr-i); --pol-rad:20px}
.box-pol {border-radius:var(--sq-rad); border:var(--sq-bor) solid var(--clr-m);}
.box-pol .box-block {position:absolute; height:100%; display:grid; border-radius:var(--sq-rad); border:var(--pol-rad) solid; border-color:var(--pol-color); z-index: 1;}
.box-pol > h2, .box-pol > a > h2 {bottom:0; position:absolute; justify-content:space-between; align-items:center; background:var(--pol-color); border:var(--pol-rad) solid; border-color:var(--pol-color); width:100%; z-index:2}
.box-pol:hover {border-color:var(--clr-m);}
.box-pol:hover .box-block {height:100%; padding:0; border-color:var(--clr-m);}
.box-pol:hover > h2 {background:var(--clr-m); color:var(--pol-color); border-color:var(--clr-m);}