/* ----------- https://shapedividers.com/ -----------*/ 

.shd{overflow:hidden; position:relative;}
.shd::before, .shd::after{ 	content:''; position: absolute; bottom: -1px;	left: -1px;	right: -1px;	top: -1px;	z-index: 3; pointer-events: none; background-repeat: no-repeat; }
.shd::before{ background-position: 50% 0%; }
.shd::after{ background-position: 50% 100%; }

/***   SAW   ***/
.shd-saw-up::before{ 
	background-size: 100% 2rem;
	background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.8 22.4" preserveAspectRatio="none"><path fill="%23ffffff" d="M101 22L94 8 84 18 76 7l-9 9-7-15-10 17-8-16-8 9-9 11-8-20-9 14-8 6V0h101z"/></svg>'); 
}
.shd-saw-down::after{ 
	background-size: 100% 2rem;
	background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.8 22" preserveAspectRatio="none"><path fill="%23ffffff" d="M0 0l7 15L17 4l8 12 9-9 7 14 9-17 9 16 8-9 9-11 8 20 8-13 9-7v22H0z"/></svg>'); 
}

/***   WAVES   ***/
.shd-waves-up::before{ 
	background-size: 100% 10em;
	background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23ffffff"/></svg>'); 
}
.shd-waves-down::after{ 
	background-size: 100% 10rem;
	background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23ffffff"/></svg>'); 
}

/***   ARROWS   ***/
.shd-arrow-up::before{ 
	background-size: 100% 3rem;
	background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1134.63 158.42"><g fill="%23ffffff"><path d="M0 0h1134.63L565.17 111.32Z"/><path d="M0 0v51.38l565.17 107.04 569.46-115.6V0Z" opacity=".66"/></g></svg>'); 
}
.shd-arrow-down::after{ 
	background-size: 100% 3rem;
	background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1134.63 158.42"><g fill="%23ffffff"><path d="M1134.63 158.42H0L569.46 47.1Z"/><path d="M1134.63 158.42v-51.38L569.46 0 0 115.6v42.82Z" opacity=".66"/></g></svg>'); 
}

@media (min-width:768px){
	.shd-saw-up::before{ background-size: 100% 3rem; }
	.shd-saw-down::after{ background-size: 100% 3rem;  }  
}
@media (min-width:1025px){
	.shd-saw-up::before{ background-size: 120% 4rem; }
	.shd-saw-down::after{ background-size: 120% 4rem;  } 
}

/* SAW TOP WHITE */
.SD_SawTop-f{ overflow:hidden; position:relative;	}
.SD_SawTop-f::before{
	content:''; position: absolute;
	bottom: -1px;	left: -1px;	right: -1px;	top: -1px;	z-index: 3;
	pointer-events: none; 	background-repeat: no-repeat; 
	background-size: 100% 2rem;	background-position: 50% 0%;
	background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.8 22.4" preserveAspectRatio="none"><path fill="%23ffffff" d="M101 22L94 8 84 18 76 7l-9 9-7-15-10 17-8-16-8 9-9 11-8-20-9 14-8 6V0h101z"/></svg>'); 
}
	
@media (min-width:768px){
	.SD_SawTop-f::before{ background-size: 100% 2rem;	background-position: 50% 0%; }  
}

@media (min-width:1025px){
	.SD_SawTop-f::before{
		bottom: -0.1vw; left: -0.1vw;	right: -0.1vw; top: -0.1vw; 
		background-size: 122% 4.5rem; background-position: 50% 0%;  
		background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.8 22.4" preserveAspectRatio="none"><path fill="%23ffffff" d="M101 22L94 8 84 18 76 7l-9 9-7-15-10 17-8-16-8 9-9 11-8-20-9 14-8 6V0h101z"/></svg>'); 
	}
}
@media (min-width:2100px){
	.SD_SawTop-f::before{ background-size: 122% calc(2vw + 4.5rem);	}
}

/* SAW BOTTOM WHITE */
.SD_SawBottom-f{ overflow:hidden; position:relative; }
.SD_SawBottom-f::after{
	content:''; position: absolute;
	bottom: -1px;	left: -1px;	right: -1px;	top: -1px;	z-index: 3;
	pointer-events: none; 	background-repeat: no-repeat; 
	background-size: 100% 28px;	background-position: 50% 0%;
	background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.8 22" preserveAspectRatio="none"><path fill="%23ffffff" d="M0 0l7 15L17 4l8 12 9-9 7 14 9-17 9 16 8-9 9-11 8 20 8-13 9-7v22H0z"/></svg>'); 
}

@media (min-width:768px){
	.SD_SawBottom-f::after{ background-size: 100% 28px;	background-position: 50% 0%; } 
}
	
@media (min-width:1025px){
.SD_SawBottom-f::after{ 
	bottom: -0.1vw; left: -0.1vw;	right: -0.1vw; top: -0.1vw; 
	background-size: 150% 76px; background-position: 50% 100%;  
	background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.8 22" preserveAspectRatio="none"><path fill="%23ffffff" d="M0 0l7 15L17 4l8 12 9-9 7 14 9-17 9 16 8-9 9-11 8 20 8-13 9-7v22H0z"/></svg>'); 
}
}
@media (min-width:2100px){
	.SD_SawBottom-f::after{ background-size: 150% calc(2vw + 76px); }
}