@charset "utf-8";

/* CSS Document */

#curve1 {
	width: 120%;
	float: left;
	background: #ffffff;
	transform: rotate(352deg);
	overflow: hidden;
	margin: -188px 0 0 -10.1%;
	position: relative;
	z-index: 99;

	padding: 1px;
    backface-visibility: hidden;
    background-clip: content-box;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;
}
#curve1:after {
	content: "";
	width: 100%;
	height: 140px;
	background: #96cecb;
	transform: rotate(362deg);
	position: absolute;
	top: -18%;
	right: 0;
	left: 0;
	z-index: 99;

	padding: 1px;
    backface-visibility: hidden;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;
}
#curve1:before {
	content: "";
	width: 100%;
	height: 260px;
	background: #beece9;
	transform: rotate(366deg);
	position: absolute;
	top: -28%;
	right: 0;
	left: 0;

	padding: 1px;
    backface-visibility: hidden;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;
}
#curve2 {
	width: 120%;
	float: left;
	background: #ffffff;
	transform: rotate(364deg);
	overflow: hidden;
	margin: -200px 0 0 -10.1%;
	position: relative;
	z-index: 99;

	padding: 1px;
    backface-visibility: hidden;
    background-clip: content-box;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;
}
#curve2:after {
	content: "";
	width: 100%;
	height: 7vh;
	background: #e8f2f5;
	transform: rotate(360deg);
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;

	padding: 1px;
    backface-visibility: hidden;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;
}
#curve3 {
	width: 120%;
	float: left;
	background: #ffffff;
	transform: rotate(356deg);
	overflow: hidden;
	margin: -190px 0 0 -10.1%;
	position: relative;
	z-index: 99;

	padding: 1px;
    backface-visibility: hidden;
    background-clip: content-box;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;
}
#curve4 {
	width: 120%;
	float: left;
	background: #ffffff;
	transform: rotate(364deg);
	overflow: hidden;
	margin: 0 0 -200px -10.1%;
	position: relative;
	z-index: 99;

	padding: 1px;
    backface-visibility: hidden;
    background-clip: content-box;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;
}
#curve6 {
	width: 140%;
	float: left;
	background: #ffffff;
	transform: rotate(352deg);
	overflow: hidden;
	margin: -188px 0 0 -20%;
	position: relative;
	z-index: 99;

	padding: 1px;
    backface-visibility: hidden;
    background-clip: content-box;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;
}
#curve6:after {
	content: "";
	width: 100%;
	height: 140px;
	background: #96cecb;
	transform: rotate(362deg);
	position: absolute;
	top: -11.3%;
	right: 0;
	left: 0;
	z-index: 9999;

	padding: 1px;
    backface-visibility: hidden;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;
}
#curve6:before {
	content: "";
	width: 100%;
	height: 260px;
	background: #beece9;
	transform: rotate(366deg);
	position: absolute;
	top: -16.3%;
	right: 0;
	left: 0;
	z-index: 9999;

	padding: 1px;
    backface-visibility: hidden;
    outline: transparent solid 1px;
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;
}
/*Smartphone css*/

@media screen and (max-width: 480px) {
	#curve1 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve1:after {
		height: 20px;
		transform: none;
		top: 0;
	}
	#curve1:before {
		height: 40px;
		transform: none;
		top: 0;
	}
	#curve2 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve2:after {
		height: 40px;
	}
	#curve3 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve5 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve5:after {
		height: 20px;
		transform: none;
		top: 0;
	}
	#curve5:before {
		height: 40px;
		transform: none;
		top: 0;
	}
	#curve4 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve6 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve6:after {
		height: 20px;
		transform: none;
		top: 0;
	}
	#curve6:before {
		height: 40px;
		transform: none;
		top: 0;
	}
}
@media screen and (min-width: 481px) and (max-width: 600px) {
	#curve1 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve1:after {
		height: 20px;
		transform: none;
		top: 0;
	}
	#curve1:before {
		height: 40px;
		transform: none;
		top: 0;
	}
	#curve2 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve2:after {
		height: 40px;
	}
	#curve3 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve5 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve5:after {
		height: 20px;
		transform: none;
		top: 0;
	}
	#curve5:before {
		height: 40px;
		transform: none;
		top: 0;
	}
	#curve4 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve6 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve6:after {
		height: 20px;
		transform: none;
		top: 0;
	}
	#curve6:before {
		height: 40px;
		transform: none;
		top: 0;
	}
}
@media screen and (min-width: 601px) and (max-width: 767px) {
	#curve1 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve1:after {
		height: 20px;
		transform: none;
		top: 0;
	}
	#curve1:before {
		height: 40px;
		transform: none;
		top: 0;
	}
	#curve2 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve2:after {
		height: 40px;
	}
	#curve3 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve5 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve5:after {
		height: 20px;
		transform: none;
		top: 0;
	}
	#curve5:before {
		height: 40px;
		transform: none;
		top: 0;
	}
	#curve4 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve6 {
		width: 100%;
		transform: none;
		margin: 0 0 0;
	}
	#curve6:after {
		height: 20px;
		transform: none;
		top: 0;
	}
	#curve6:before {
		height: 40px;
		transform: none;
		top: 0;
	}
}
@media screen and (min-width: 768px) and (max-width: 900px) {
	#curve1 {
		margin: -80px 0 0 -10.1%;
	}
	#curve5 {
		margin: -152px 0 0 -20%;
	}
}
@media screen and (min-width: 901px) and (max-width: 1024px) {
	#curve1 {
		margin: -90px 0 0 -10.1%;
	}
	#curve5 {
		margin: -160px 0 0 -20%;
	}
}
@media screen and (min-width: 1025px) and (max-width: 1340px) {
	#curve1 {
		margin: -100px 0 0 -10.1%;
	}
	#curve5 {
		margin: -160px 0 0 -20%;
	}
}
@media screen and (min-width: 1804px) and (max-width: 1906px) {
	#curve6:after {
		top: -11.3%;
	}
	#curve6:before {
		top: -15.2%;
	}
}