/* - - - - - - - - - - - - - - -- - - - --  -
 *	
 * Styles for block-expanded
 *	
 */	
.xpan-box{ text-align:center; color:black; background-color:#FFFFFFE0; z-index: 800;
			-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }    

.xpan-box{ width:100%; position: relative; text-align: center; margin:0 0 40px;
	       padding:20px 50px; cursor: pointer; height: auto; }

.xpan-box .xpan-title{ color:black; }
.xpan-box .xpan-line { color:black; font-size:var(--font-sm);}
.xpan-box .xpan-info { color:black; font-size:var(--font-md); padding-bottom: 20px;}

.xpan-ctrl{ position:absolute; display:inline-block; bottom:-12px; width:24px; height:24px; cursor: pointer;  }
.xpan-ctrl .arrow{ display: inline; }
.xpan-ctrl .cross{ display: none; }
			  
.xpan-ctrl.open .arrow{ display: none;  }
.xpan-ctrl.open .cross{ display: inline;  }



/* - - - - - - - - - - - - - - -- - - - --  -
 *	
 * Styles for block-featured
 *	
 */	

.shape-left{ position:absolute; top:0; left:0; width:60vw; height:40vw;  background-color: orange; 
			opacity: 0.8; clip-path: polygon(38% 0, 100% 0, 18% 100%, 0 100%, 0  19%);                                                                                                                                                                           } 
.shape-right{ position:absolute; top:50%; margin-top:-500px; left:50%; width:1000px; height:1000px;  background-color: orange; 
			opacity: 0.8; clip-path: polygon( 57% 0, 100% 0, 100% 100%, 57% 100%, 0  49% );                                                                                                                                                                           } 

.shape-lite   { background-color:var(--lite);  }
.shape-light  { background-color:var(--light); }
.shape-grey   { background-color:var(--grey);  }
.shape-dark   { background-color:var(--dark);  }
.shape-blue   { background-color:var(--blue);  }
.shape-orange { background-color:var(--orange);}
.shape-white  { background-color:var(--white); }
.shape-black  { background-color:var(--black); }

@media ( max-width: 600px ){

	.shape-left { width:110vw; height:150vw; opacity: 0.8; } 
	.shape-right{ left:0;  }	

}