html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
ul {
	margin: 0 0 0 1em;
}
li {
	padding: 0 0 .25em 0;
}
a:link {
	text-decoration: none;
	color: #ffffff;
}
a:visited {
	text-decoration: none;
	color: #ffffff;
}
a:hover {
	text-decoration: underline;
	color: #cccccc;
}
html,body {
	font-family: 'Kanit';
	width: 100%;
	height: 100%;
	line-height: normal;
}
.slide {
	background-attachment: fixed;
	max-width: 650px;
	width: 100%;
	height: auto;
	position: relative;
	box-shadow: inset 0px 10px 10px rgba(0,0,0,0.5);
}
.sliding-contain {
	width: 650px;
	height: 700px;
	margin: 0 auto;
	padding: 2em 0;
	position: relative;
}
.sliding-contain2 {
	width: 650px;
	height: 900px;
	margin: 0 auto;
	padding: 2em 0;
	position: relative;
}
.contain {
	max-width: 650px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 1em 0;
	position: relative;
	overflow: hidden;
}
.col-1 {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	float: left;
}
.col-2 {
	display: block;
	width: 95%;
	height: auto;
	margin: 0 auto;
	padding: 0 1em;
	float: left;
	text-align: justify;
}
.col-3 {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.col-4 {
	display: block;
	width: 100%;
	height: auto;
	margin: 10% auto 1% auto;
	float: left;
}
table {
	width: 98%;
	margin: 2em auto 0 auto;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: .9em;
	border: 1px solid #494949;
	color: #ffffff;
}
td, th {
	padding: .3em 0 .2em 2%;
	font-family: 'Kanit';
}
th.table-head {
    text-align: center;
    padding: .5em 0;
    font-size: 1.5em;
	font-weight: bold;
    background-color: #fdb813;
	color: #004d35;
	box-shadow: 0 5px 5px 1px rgba(0, 0, 0, 0.5);
}
thead tr.top-row {
    background-color: rgba(0, 77, 53, 1);
	color: #ffffff;
	text-align: left;
}
thead tr.bottom-row {
    background-color: rgba(253, 184, 19, 1);
    box-shadow: inset 0 5px 5px -1px rgba(0, 0, 0, 0.5);
	color: #004d35;
	font-weight: bold;
	text-align: left;
}
thead th:nth-child(4) {
    background-color: rgba(253, 184, 19, 1);
    box-shadow: inset 0 5px 5px -4px rgba(0, 0, 0, 0.5);
}
tbody td:nth-child(4) {
    background-color: #ffc20e;
	color: #004d35;
}
tr:nth-child(even) {
	background-color: rgba(0, 77, 53, 0.85);
}
tr:nth-child(odd) {
	background-color: rgba(0, 77, 53, 0.7);
}
.video-contain {
	position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    /*padding-top: 25px;*/
	margin: 5% auto;
}
.video-contain iframe {
	position: absolute;
	width: 100% !important;
	height: 100% !important;
}
.text-contain {
	width: 95%;
	height: auto;
	margin: 0 auto;
	text-align: justify;
}
.slide-title {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.col-1 img, .col-2 img, .col-3 img  {
	width: 100%;
	height: 100%;
	margin: 1em 0 0 0;
}
.col-4 img {
    width: 50%;
    height: auto;
    margin: 0;
    float: left;
}
.header-text {
	display: block;
	margin: 20% auto;
	width: 90%;
	height: auto;
}
.reading-pane {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 300px;
	height: auto;
	margin: 1%;
	padding: 1%;
	border: 1px solid #004d35;
	border-radius: 10px;
	background-color: rgba(0, 77, 53, 0.6);
	color: #ffffff;
	letter-spacing: 0.1em;
	font-family: 'Kanit';
	font-size: 0.85em;
}
h1 {
	font-size: 5em;
	margin: 1em 0 .3em 0;
	padding: 0;
	text-align: center;
	letter-spacing: 4px;
	color: #ffffff;
	font-family: 'Cinzel';
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}
h2 {
	font-size: 2.5em;
	padding: 0em 0em 0.5em 0em;
	color: #ffffff;
	font-family: 'Shadows Into Light Two';
	text-align: center;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}
h3 {
	font-size: 2em;
	padding: .5em 0;
	color: #ffffff;
	font-family: 'Shadows Into Light Two';
	text-align: center;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}
p {
	margin: 1em 0;
	font-family: 'Kanit';
	font-size: 1.2em;
}
.green {
	color: #004d35; 
}
.yellow {
	color: #fdb813;
}	
.white {
	color: #fff;
}
.slideno {
    display: block;
    width: 98%;
    height: auto;
    margin: 0 0 0 2%;
	padding: 0;
    top: 0px;
    font-size: 1.8em;
    font-weight: bold;
	font-family: 'Shadows Into Light Two';
	color: #ffffff;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}
.button {
    display: block;
    width: 50px;
    height: 50px;
    bottom: 0;
    background-color: #333333;
    background-image: url(../images/arrow.png);
    margin: 0 auto;
}
.button:hover {
	background-color: #494949;
	cursor: pointer;
}
.upbutton {
    display: block;
    width: 50px;
    height: 50px;
    bottom: 0;
    background-color: #333333;
    background-image: url(../images/uparrow.png);
    margin: 0 auto;
}
.upbutton:hover {
	background-color: #494949;
	cursor: pointer;
}
.bold {
	font-weight: bold;
	font-size: .9em;
}

/******************************
 SLIDE 1 
*******************************/
#slide1 {
	background-image: url(../images/slide1/slide-1-650x800.jpg);
	background-size: 650px;
	background-repeat: no-repeat;
	background-color: #990000;
}

/******************************
 SLIDE 2 
*******************************/
#slide2 {
	background-image: url(../images/slide2/slide-2-650x900.jpg);
	background-size: 650px;
	background-color: #990000;
}

/******************************
 SLIDE 3 
*******************************/
#slide3 {
	background-image: url(../images/slide3/slide-3-650x900.jpg);
	background-size: 650px;
	background-color: #0033cc;
}

/******************************
 SLIDE 4 
*******************************/
#slide4 {
	background-image: url(../images/slide4/slide-4-650x1050.jpg);
	background-size: 650px;
	background-color: #990000;
}

/******************************
 SLIDE 5 
*******************************/
#slide5 {
	background-image: url(../images/slide5/slide-5-650x800.jpg);
	background-size: 650px;
	background-color: #0033cc;
}

/******************************
 SLIDE 6 
*******************************/
#slide6 {
	background-image: url(../images/slide6/slide-6-650x800.jpg);
	background-size: 650px;
	background-color: #990000;
}

/******************************
 SLIDE 7 
*******************************/
#slide7 {
	background-image: url(../images/slide7/slide-7-650x1050.jpg);
	background-size: 650px;
	background-color: #0033cc;
}

/******************************
 SLIDE 8 
*******************************/
#slide8 {
	background-image: url(../images/slide8/slide-8-650x730.jpg);
	background-size: 650px;
	background-color: #990000;
}

/******************************
 SLIDE 9 
*******************************/
#slide9 {
	background-image: url(../images/slide9/slide-9-650x800.jpg);
	background-size: 650px;
	background-color: #0033cc;
}

@media only screen and (max-width: 620px) {
	#slide1 {
	  background-image: url(../images/slide1/slide-1-620x730.jpg);  
    }
	#slide2 {
	  background-image: url(../images/slide2/slide-2-620x1000.jpg);  
    }
	#slide3 {
	  background-image: url(../images/slide3/slide-3-620x1000.jpg);  
    }
	#slide4 {
	  background-image: url(../images/slide3/slide-3-620x730.jpg);  
    }
	#slide5 {
	  background-image: url(../images/slide5/slide-5-620x800.jpg);  
    }
	#slide6 {
	  background-image: url(../images/slide6/slide-6-620x730.jpg);
    }
	#slide7 {
	  background-image: url(../images/slide7/slide-7-620x900.jpg);
    }
	#slide8 {
	  background-image: url(../images/slide8/slide-8-620x730.jpg);
    }
	#slide9 {
	  background-image: url(../images/slide9/slide-9-620x730.jpg);
    }
	#slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9 {
		background-size: 620px;
	}
	.col-1 {
		width: 100%;
		margin: 0;
	}
	.col-2 {
		width: 95%;
		padding: 0 .5em;
	}	
	.col-1 img {
		margin: 0;
	}
	h1 {
		font-size: 4em;
	}
	h2 {
		font-size: 3em;
	}
	.slideno {
    font-size: 1.5em;
    }
}
@media only screen and (max-width: 500px) {
	#slide1 {
	  background-image: url(../images/slide1/slide-1-500x660.jpg);
    }
	#slide2 {
	  background-image: url(../images/slide2/slide-2-500x1000.jpg);
    }
	#slide3 {
	  background-image: url(../images/slide3/slide-3-500x1000.jpg);
    }
	#slide4 {
	  background-image: url(../images/slide4/slide-4-500x660.jpg);
    }
	#slide5 {
	  background-image: url(../images/slide5/slide-5-500x700.jpg);
    }
	#slide6 {
	  background-image: url(../images/slide6/slide-6-500x660.jpg);
    }
	#slide7 {
	  background-image: url(../images/slide7/slide-7-500x900.jpg);
    }
	#slide8 {
	  background-image: url(../images/slide8/slide-8-500x700.jpg);
    }
	#slide9 {
	  background-image: url(../images/slide9/slide-9-500x660.jpg);
    }
	#slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9 {
		background-size: 500px;
	}
	.slideno {
    font-size: 1.1em;
    }
	h1 {
		font-size: 3em;
	}
	h2 {
		font-size: 2em;
	}
}

@media only screen and (max-width: 385px) {
	#slide1 {
	  	background-image: url(../images/slide1/slide-1-385x535.jpg);
    }
	#slide2 {
	  	background-image: url(../images/slide2/slide-2-385x1000.jpg);
    }
	#slide3 {
	  	background-image: url(../images/slide3/slide-3-385x1000.jpg);
    }
	#slide4 {
	  	background-image: url(../images/slide4/slide-4-385x535.jpg);
    }
	#slide5 {
	  	background-image: url(../images/slide5/slide-5-385x800.jpg);
    }
	#slide6 {
	  	background-image: url(../images/slide6/slide-6-385x535.jpg);
    }
	#slide7 {
	  	background-image: url(../images/slide7/slide-7-385x1000.jpg);
    }
	#slide8 {
	  	background-image: url(../images/slide8/slide-8-385x700.jpg);
    }
	#slide9 {
	  	background-image: url(../images/slide9/slide-9-385x535.jpg);
    }
	#slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9 {
		background-size: 385px;
	}
	td, th {
		font-size: .8em;
	}
	.slideno {
		font-size: 1.7em;
	}
	h1 {
		font-size: 2em;
	}
	h2 {
		font-size: 1.25em;
	}
	h3 {
		font-size: .9em;
	}
}