/*

Shape height needs to be at least as tall as div height
If the shape is taller than the container a gap in the shape is created
If there is a thin "divider" line: make shape 1 pixel taller

*/


/* SHAPES */
	.shape-bg_clr-1 {
		fill: #003A60;
	}
	.shape-bg_clr-2 {
		fill: #fff;
	}	
	.shape-bg_clr-3 {
		fill: #FEBE40;
	}		
	
	.shape_page-top {
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
		line-height: 0;
		transform: rotate(180deg);		
		width: 100%;
		transition: 1s;
		z-index: 100;		
	}

	.shape_transp-top {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		line-height: 0;
		z-index: 100;
	}

	.shape_transp-bottom {
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
		line-height: 0;
		width: 100%;
		transform: rotate(180deg);
		z-index: 10;
	}

	.shape-arrow {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		line-height: 0;
		transform: rotate(180deg);
		z-index: 10000;
	}
	
	.shape-round {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	transform: rotate(180deg);
	z-index: 10;
	}
	
	.shape_page-top svg {
		position: relative;
		display: block;
		width: 100%;
		transform: rotateY(180deg);
	}
	
	.shape_transp-top svg {
		position: relative;
		display: block;
		width: 100%;
		transform: rotateY(180deg);
	}
	
	.shape_transp-bottom svg {
		position: relative;
		display: block;
		width: 100%;
		transform: rotateY(180deg);
	}	
	
	.shape-arrow svg {
		position: relative;
		display: block;
		width: 100%;
	}
	
	.shape-arrow svg {
		position: relative;
		display: block;
		width: 100%;
	}
	
	.shape-round svg {
		position: relative;
		display: block;
		width: 100%;
	}	
	
	/** SHAPE DIMENSIONS for mobile devices **/
	.shape_page-top {
		height: 120px;
	}
	.shape_page-top svg {
		height: 120px;
	}
	
	.shape_transp-top {
		height: 120px;
	}
	.shape_transp-top svg {
		height: 100px;
	}
	
	.shape_transp-bottom {
	height: 100px;
	}
	.shape_transp-bottom svg {
		height: 102px;
	}
	
	.shape-arrow {
		height: 50px;
	}
	.shape-arrow svg {
		height: 30px;
	}
	
	.shape-round {
		height: 70px;
	}
	.shape-round svg {
		height: 60px;
	}	
	
	/** SHAPE DIMENSIONS for large devices **/
	@media (min-width: 660px) {	
		.shape_page-top {
			height: 140px;
		}
		.shape_page-top svg {
			height: 140px;
		}
		
		.shape_transp-top {
			height: 120px;
		}	
		.shape_transp-top svg {
			height: 100px;
		}	

		.shape_transp-bottom {
			height: 140px;
		}
		.shape_transp-bottom svg {
			height: 141px;
		}

		.shape-arrow {
			height: 70px;
		}
		.shape-arrow svg {
			height: 40px;
		}
		
		.shape-round {
			height: 100px;
		}
		.shape-round svg {
			height: 100px;
		}	
	}