@charset "utf-8";

/* CSS Document */



#curve1 { width:200%; height:1200px; background:url(../images/header-bg.png) repeat-x bottom; border-radius:50%; transform:translate(-50%, -70.2%); position:absolute; left:50%; top:0; z-index:999;}

#curve2 { width:120%; height:1194px; border-radius:50%; overflow:hidden; transform:translate(-50%, 0%); margin:-230px 0 0; position:relative; left:50%; top:0;}

#curve3 { width:106%; background:#fff; border-radius:50%; overflow:hidden; transform:translate(-50%, 0%); position:relative; left:50%; top:0;}

#curve4 { width:200%; height:1200px; float:left; background:url(../images/header-bg.png) repeat-x bottom; z-index:99; border-radius:50%; transform:translate(-50%, 0%); overflow:hidden; margin:-32.5% 0 0; position:relative; left:50%; top:0; }

#curve5 { width:150%; border-radius:50% 50% 0 0; overflow:hidden; transform:translate(-50%, 0%); margin:0 0 160px; position:relative; left:50%; top:80px;}



/*Smartphone css*/

@media screen and (max-width: 480px) {

#curve1 { width:100%; height:auto; border-radius:inherit; overflow:inherit; transform:none; margin:auto; position:relative; left:inherit;

background: #9cdedc; /* Old browsers */

background: -moz-linear-gradient(top, #9cdedc 1%, #9cdedc 79%, #28b8b3 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #9cdedc 1%,#9cdedc 79%,#28b8b3 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #9cdedc 1%,#9cdedc 79%,#28b8b3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9cdedc', endColorstr='#28b8b3',GradientType=0 ); /* IE6-9 */}

#curve2 { width:100%; height:auto; border-radius:inherit; overflow:inherit; transform:none; margin:auto; left:inherit;}

#curve3 { width:100%; height:auto; border-radius:inherit; overflow:inherit; transform:none; margin:auto; left:inherit;}

#curve4 { width:100%; height:auto; border-radius:inherit; transform:none; margin:-85px auto auto; left:inherit;}

#curve5 { width:100%; height:auto; border-radius:inherit; overflow:inherit; transform:none; margin:auto; top:inherit; left:inherit;}

}



@media screen and (min-width:481px) and (max-width:600px) {

#curve1 { width:100%; height:auto; border-radius:inherit; overflow:inherit; transform:none; margin:auto; position:relative; left:inherit; 
background: #9cdedc; /* Old browsers */

background: -moz-linear-gradient(top, #9cdedc 1%, #9cdedc 79%, #28b8b3 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #9cdedc 1%,#9cdedc 79%,#28b8b3 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #9cdedc 1%,#9cdedc 79%,#28b8b3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9cdedc', endColorstr='#28b8b3',GradientType=0 ); /* IE6-9 */}

#curve2 { width:100%; height:auto; border-radius:inherit; overflow:inherit; transform:none; margin:auto; left:inherit;}

#curve3 { width:100%; height:auto; border-radius:inherit; overflow:inherit; transform:none; margin:auto; left:inherit;}

#curve4 { width:100%; height:auto; border-radius:inherit; transform:none; margin:-85px auto auto; left:inherit;}

#curve5 { width:100%; height:auto; border-radius:inherit; overflow:inherit; transform:none; margin:auto; top:inherit; left:inherit;}

}



@media screen and (min-width:601px) and (max-width:767px) {

#curve1 { width:100%; height:auto; border-radius:inherit; overflow:inherit; transform:none; margin:auto; position:relative; left:inherit; 

background: #9cdedc; /* Old browsers */

background: -moz-linear-gradient(top, #9cdedc 1%, #9cdedc 79%, #28b8b3 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #9cdedc 1%,#9cdedc 79%,#28b8b3 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #9cdedc 1%,#9cdedc 79%,#28b8b3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9cdedc', endColorstr='#28b8b3',GradientType=0 ); /* IE6-9 */}

#curve2 { width:100%; height:auto; border-radius:inherit; overflow:inherit; transform:none; margin:auto; left:inherit;}

#curve3 { width:100%; height:auto; border-radius:inherit; overflow:inherit; transform:none; margin:auto; left:inherit;}

#curve4 { width:100%; height:auto; border-radius:inherit; transform:none; margin:-85px auto auto; left:inherit;}

#curve5 { width:100%; height:auto; border-radius:inherit; overflow:inherit; transform:none; margin:auto; top:inherit; left:inherit;}

}



@media screen and (min-width:768px) and (max-width:900px) {

#curve1 { transform:translate(-50%, -72%);}

#curve2 { height:1049px; transform:translate(-50%, 0); margin:-306px auto auto;}

#curve4 { margin:-69.5% 0 0;}

}



@media screen and (min-width:901px) and (max-width:1024px) {

#curve1 { transform:translate(-50%, -72%);}

#curve2 { height:1049px; transform:translate(-50%, 0); margin:-306px auto auto;}

#curve4 { margin:-54.5% 0 0;}

}



@media screen and (min-width:1025px) and (max-width:1340px) {

#curve2 { height:1049px; transform:translate(-50%, 0); margin:-205px auto auto;}

#curve4 { margin:-42.5% 0 0;}

}