@charset "utf-8";
/* CSS Document
SVG: https://www.shapedivider.app
Curve: https://cssmatic.net/css-curved-background-generator/
*/

/* top of page
	place immediately after header start tag */
.divider-curve-top_header {
	/* [disabled]position: absolute; */
	width: 300px;
	overflow: hidden;
	line-height: 0;
	box-sizing: border-box;
	height: 90px;
	/* [disabled]background-color: rgba(255,255,255,0.90); */
	clip-path: ellipse(40% 80% at 50% 0%);
	margin-right: auto;
	margin-left: auto;
	/* Curvature (lower=steeper)  LEAVE at Offset (0=down 100=up)
	the last flips it vertically = 0 or 100% */
	/* need larger height to make steep */
	transition: height 1s;
}


/* bottom slider shape
	place inside page-title at top */
.divider_page-name_shape-top {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	box-sizing: border-box;
	height: 50px;
	background-color: #38673A;
	clip-path: ellipse(60% 100% at 50% 100%);
	transition: height 1s;
}

/* add immediately after 'page-name'' inside 'page-name_wrapper' */
.divider-curve-top_content {
	display: block;
	box-sizing: border-box;
	height: 70px;
	background-color: #FFFFFF;
	clip-path: ellipse(60% 100% at 50% 100%);
	margin-top: 20px;
}


/* SVG 
add immediately after 'page-name'' inside 'page-name_wrapper' --- */
.divider-curve_SVG-top_content {
	position: absolute;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	transform: rotate(180deg);
	z-index: 10000;
	/* [disabled]background-color: #ccc; */
}

.divider-curve_SVG-top_content svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 88px;
}

.divider-curve_SVG-top_content .shape-fill {
    fill: #38673A;
}
/* -- END SVG content top --- */


@media (min-width: 660px) {
	.divider-curve-top_header {
	height: 110px;
	width: 336px;
	clip-path: ellipse(40% 80% at 50% 0%);
	margin: auto;
	/* [disabled]min-width: 300px; */
	}
	
	.divider-bottom_page-name {
		height: 30px;
	}
}


/** For tablet devices **/
@media (min-width: 768px) and (max-width: 1023px) {

}

/** For mobile devices **/
@media (max-width: 767px) {

}