@charset "utf-8";

/* ============================================================
   section-course.css
   Styles for the #course section (Erawan Spa Packages).
   Requires section-menu.css (for .priceTable base styles).
   ============================================================ */

#course{
	padding: 100px 0;
	margin: 100px 0;
	background-color: #dcd4ce;
	background-image: url(/public/img/bg-flower.svg);
	background-size: 100% auto;
}

#course .twoCol .colL{
	width: 48%;
}
#course .twoCol .colR{
	width: 48%;
}

#course .courseTxt{
	margin: 0 auto;
	width: 90%;
	max-width: 800px;
	color: #87633d;
	margin-bottom: 50px;
}

#course .courseWrapper h3{
	text-align: center;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.2;
	color: #87633d;
	padding: 15px 0;
	margin-bottom: 20px;
	border-bottom: 1px dotted #87633d;
}
#course .courseWrapper h3 span{
	display: block;
	font-size: 13px;
	font-weight: normal;
}

#course .priceTable{
	margin: 0 auto 100px;
}
#course .courseWrapper .priceTable li:first-child{
	background-color: rgba(250,250,250,0.9);
	border-bottom: none;
}
#course .courseWrapper .priceTable li{
	background-color: rgba(250,250,250,0.2);
}
#course .courseWrapper .priceTable .handTitle{
	color: #87633d;
	text-align: center;
	background-color: rgba(250,250,250,0.5);
}


@media only screen and (max-width:450px){
	#course{
		padding: 50px 0;
		margin: 30px 0;
	}
	#course .twoCol .colL,
	#course .twoCol .colR{
		width: 100%;
	}
	#course .courseWrapper h3{
		font-size: 20px;
	}
	#course .priceTable{
		margin-bottom: 50px;
	}
}