/**
 * Parallax Scrolling Tutorial
 * For NetTuts+
 *  
 * Author: Mohiuddin Parekh
 *	http://www.mohi.me
 * 	@mohiuddinparekh   
 */

@charset "UTF-8";
@font-face{

	font-family:"Thai Sans Neue";
	src:url("../inc/font/ThaiSansNeue/OpenType/ThaiSansNeue.woff") format("woff"),
	url("../inc/font/ThaiSansNeue/OpenType/ThaiSansNeue-Regular.svg#ThaiSansNeue-Light") format("svg"),
	url("../inc/font/ThaiSansNeue/OpenType/ThaiSansNeue-Regular.ttf") format("truetype");
} 

html,
body{
    width: 100%;
    height: 100%;
	margin:0; padding:0; 
	background: #0D1D26;
    font-family: 'Sukhumvit Set', 'Kanit', sans-serif;
 }

#formRes { font-family: 'Sukhumvit Set', 'Kanit', sans-serif; font-size:20px; color:#fc608c; }
.input { font-family: 'Sukhumvit Set', 'Kanit', sans-serif; background:#A3B8D0; color:#000033; width:100%; padding:10px; margin:5px; border:none; border-radius: 3px; font-size:16px; }

.fontTitle { font-family: 'Sukhumvit Set', 'Kanit', sans-serif; font-size:38px; 
	font-weight:600; 
}
.fontSubtitle { font-family: 'Sukhumvit Set', 'Kanit', sans-serif; font-size:28px; }
.fontNormal { font-family: 'Sukhumvit Set', 'Kanit', sans-serif; font-size:20px; }
.fontSmall { font-family: 'Sukhumvit Set', 'Kanit', sans-serif; font-size:14px; }

.white { color:#fff;}

.icColorA { color:#faaf40;}
.icColorB { color:#009AFF;}
.icColorC { color:#ffdd15;}

.icBgColorA { background:#faaf40;}
.icBgColorB { background:#009AFF;}
.icBgColorC { background:#ffdd15;}

.icBgColorBLite { background:#fff8cf;}


::-webkit-input-placeholder { color:#999; }
::-moz-placeholder { color:#999; } /* firefox 19+ */
:-ms-input-placeholder { color:#999; } /* ie */
input:-moz-placeholder { color:#999; }

.cradit { margin:10px 20px; font-size:14px; font-weight:200;}
.box { width:1000px; }
#back-top { position:fixed; bottom:20px; right:20px; width:auto; display:none; cursor:pointer; opacity:0.7; }

#home { 
	background: url(https://ichurch.cc/support/lamplearn/img/cover.jpg) no-repeat;
	background-size: 100%; 
    background-position: top center;
	background-attachment: fixed;
	width: 100%; margin: 0 auto;
	padding-top:40%;
}

#homeContentBox { 
	color:#333; float:right; padding:200px 0;
	background:none;  margin-bottom:50px;
	text-shadow: 2px 2px #000000;
}

#mainLogo { width:400px; background:none; }

.textShadow { text-shadow: 1px 1px #666666; }

#visionBox { 
	background: url(../img/story_blur.jpg);
	background-size: cover; 
    background-position: center center;
	background-attachment: scroll;    	
	width: 100%; margin: 0 auto;	
}

#visionWrap { 
	background: url(../img/story.jpg) no-repeat;
	background-size: 100%; 
    background-position: center center;
	background-attachment: scroll;    	
	width: 100%; margin: 0 auto;	
	padding:0 0 50px 0;
}

#visionContentBox {
	color:#333; float:left; padding:50px 50px 10px 50px;
	width:650px; background:none; background: rgba(0, 0, 0, .5); 	
	text-shadow: 2px 2px #000000;
}

#connectBox { 
	background: url(../img/connect.jpg) no-repeat;
	background-size: 50%; 
    background-attachment: fixed;
    background-position: left top;
	background-attachment: scroll;
	width: 100%; margin: 0 auto;
    padding:50px 0;
}
#connectImg { display:none; width:100%; margin:0px auto; float:left; }

#connectContentBox { width:450px; background: rgba(255, 255, 255, .9); }
#serviceBox { color:#333; padding:0px 0px 50px 0px; }
#serviceContentBox {
	color:#333; text-align:center;
	width:100%; background:none;
}
.serviceListBox {
	color:#333; float:right; width:50%; background:none;
}

.appBox { width:50%; float:left; margin:10 auto; }
.appicon { width:100px; margin:10px; margin-right:20px;  float:left; display:block; }
.appTitle { padding:0px; display:block; font-family: 'Sukhumvit Set', 'Kanit', sans-serif; font-size:20px; font-weight:600; line-height:42px; }
.appText { width:100%; padding:10px 0px; display:block; font-family: 'Sukhumvit Set', 'Kanit', sans-serif; font-size:16px; }

#contriBox {
	background: url(../img/contri1.jpg) no-repeat;
    background-position: right;
    background-size:100%;
    padding:50px 0 20px 0;
	width: 100%; margin: 0 auto;
}
#contriImg {
}


#contriContentBox{
	color:#333; float:left; width:500px; background:none; margin-bottom:40px;
}


#devBox {
	background: url(../img/dev.png) no-repeat;
    background-position: left;
    background-size:550px;
    padding:50px 0;
	width: 100%; margin: 0 auto;
}

#devContentBox{
	color:#333; float:right;
	width:500px; background:none;
}

#startupBox {
	background: url(../img/startup.jpg) no-repeat;
	background-size:cover;
	width: 100%; margin: 0 auto;
    padding: 0;
}

#startupWrap {

    padding:50px 0 10px 0;
	width:100%;

}

#startupContentBox {
	color:#333; float:left; padding:50px 50px 0px 50px;
	width:50%; background:none; background: rgba(0, 0, 0, .6); 	
	text-shadow: 2px 2px #000000; margin-bottom:40px;
}


.smallFont { font-size:16px; }

#call { 
	background:#47778F;
	width: 100%;
	margin: 0 auto; 
    position: relative; box-shadow: 0 0 5px rgba(0,0,0,0.5);
}


#callText{
	width:40%; font-size:32px; font-family: 'Sukhumvit Set', 'Kanit', sans-serif;
	margin:50px 50px;
	float:left; 
}
#callForm{
	width:40%; text-align:center; float:right; 
}

#footer { 
	background:#222; 
	background-repeat: no-repeat; background-position: center; background-size: cover;
	max-width: 1920px; width: 100%;
	margin: 0 auto; padding-bottom:100px; 
	text-align:center;
    position: relative; box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.overlay { width:100%; height:100%; z-index:1500; position:fixed; background:#fff; background: rgba(255, 255, 255, .8); display:none; }

#registerBox {
	position:fixed; background:#fff; top:50%; margin-top:-200px; left:50%; margin-left:-205; z-index:6000; width:410px; height:400px;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; display:none;
	background: rgba(255, 255, 255, .9); -moz-box-shadow: 0 0px 30px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0px 30px rgba(0,0,0,0.2);
}

.vdoBtn { cursor:pointer; color:#fc0; margin:10px 0; display:inline-block; }
.vdoBtn:hover { cursor:pointer; color:#fa0; }

.linkBtn { cursor:pointer; color:#fc0; margin:10px 0; display:inline-block; }
.linkBtn:hover { cursor:pointer; color:#fa0; }


#vdoBox {
	position:fixed; background:#fff; top:50%; margin-top:-180px; left:50%; margin-left:-320px; z-index:6000; width:640px; height:360px; padding:30px;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; display:none; background: #fff;
}


#registeriFrame {
	width:410px; height:400px;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
}
#registerContentBox {  }

.thisbtn {
	display:inline-block; border:solid 1px; border-color:#fff; padding:3px 15px; cursor:pointer;
	background:none; font-size:18px; line-height:22px; 
	color:#fff;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

.slideBtn {
	display:inline-block; width:150px; border:none; background:#0099FE; padding:10px 15px; cursor:pointer;
	margin:15px 0; text-shadow:none;
	font-size:18px; line-height:22px; 
	color:#333;	
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

.getStartBtn {
	display:inline-block; border:solid 1px; border-color:#fff; width:200px; padding:15px 55px 5px 55px; cursor:pointer;
	background:none; font-size:24px; line-height:32px; 
	color:#fff; margin:0 auto;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

.FBshareBtn { width:auto; cursor:pointer; }
.FBshareBtn :link { color:#fff; }
.FBshareBtn :hover { color:#fc0; }


.test { background:#3b5998; }

#topBar { display:none; }


.box {
	width:1000px;  background:none;
	padding:50px 0 0 0; margin: 0 auto; }


.LessionTitle { width:100%; margin:0; font-size:28px; line-height:38px; font-weight:bold; background:none; border:none; }


#content { width:100%; font-size:28px; list-style:none; text-align:left; text-align:center; background:none; margin:0;}
#content li{ font-size:22px;  line-height:24px; padding:0; border:none; white-space:normal; }
#content h1{ font-size:38px; line-height:50px; padding:10px 0 10px 0; white-space:normal; }
#content h2{ font-size:30px; line-height:38px; padding:5px 0px 5px 0px; white-space:normal; }

#content b{ font-size:36px; line-height:26px; padding:5px 0px 5px 0px; white-space:normal; }
#content sub{ font-size:28px; line-height:14px; }
#content p{ font-size:28px; line-height:18px; padding:5px 0px 5px 0px; }
#content quote{ padding:5px 20px 5px 20px; display:block; }

.note { font-size:22px; line-height:32px; margin:10px 0px 10px 0px; }
.img { margin:15px 0 15px 0; display:block; width:100%; }

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

	#visionWrap { 
		background-size: 120%; 
	}

}

@media screen and (max-width: 1024px) {
	.box { width:95%; background:none; }
	.boxWrap { width:100%; margin-left:20px; margin-right:20px; }
	
	#mainLogo { width:100%; margin-top:20px; margin: 0 0; }

	#homeContentBox { 
		float:right; padding:100px 0;
		width:50%; margin-right:10%;
	}
	#visionWrap { background-size: 150%; }
	
	.appicon { width:90px; margin:10px; }
	
	
	#devBox {
		background: url(../img/dev_t.png) no-repeat;
	    background-size:100%;
		background-position: center top; padding-top:200px;
    }
	#contriBox {
	    background-position: left center;
	    background-size:110%;
	}

	#visionContentBox { width:80%; float:none; padding:50px 7.5%; margin-left:auto; margin-right:auto; }
	#connectContentBox { width:40%; margin-left:50px; margin-right:auto; }
	#contriContentBox { width:50%; margin-left:50px; margin-right:auto; }
	#devContentBox { width:80%; float:none; margin-left:auto; margin-right:auto; }	

}

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

	#home { background-size: 120%; }
	#homeContentBox {  width:55%; margin-right:7%; padding:50px 0; }
	#visionWrap { 
		background-size: 100%; 
		background-position: center 0px;
		padding-top:100px;
	}
	
	#startupContentBox { width:80%; float:none; padding:50px 7.5% 0px 7.5%; margin-left:auto; margin-right:auto; }

}

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

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

	#callText{ float:none; width:90%; margin:0 auto; text-align:center; padding-bottom:50px; font-size:20px; }
	#callForm{ float:none; width:90%; margin:0 auto; text-align:center; padding-bottom:50px; }
	.FBshareBtn { width:100%; margin:10px auto; }
	.FBpageBtn { width:100%; margin:10px auto; }


	#contriBox {
	    background-position: left top;
	    background-size:100%;
	}


	.appBox { width:100%; float:left; margin:5px auto; background:none; }
	.appicon { width:25%; margin:10px; float:left; display:block; }
	.appTitle { padding:0px; display:block; font-family: 'Sukhumvit Set', 'Kanit', sans-serif; font-size:20px; line-height:28px; }
	.appText { background:none; width:95%; margin:0; display:block; font-family: 'Sukhumvit Set', 'Kanit', sans-serif; font-size:16px; }

	#homeContentBox {  padding:0; }

	#connectBox { 
		background:none;
		padding-top:0px;
		padding-bottom:0px;
	}
	#connectImg { display:block; }

	#devBox {
		background: url(../img/dev.png) no-repeat;
		background-size:100%;		
		padding-bottom:10px;
    }
	#startupBox {
		background-size:cover; padding-top:0px;
    }

	#startupWrap {
		background: url(../img/startup.jpg) no-repeat;
		background-position: center top;
		background-size:100%;
		width: 100%; margin:0; padding-top:100px;
	}
    

	#visionContentBox { padding:30px 7.5%; background: rgba(0, 0, 0, .7); }
	#connectContentBox { width:90%; float:none; padding:20px;  }
	#contriContentBox { width:90%; float:none; padding-top:50px; padding-bottom:0px; margin-left:auto; margin-right:auto; }
	#startupContentBox { width:80%; float:none; margin-left:auto; margin-right:auto; padding:30px 7%; 0px 7%; background: rgba(0, 0, 0, .7);  }

	#mainLogo { width:100%; padding:20px 0; }

	#registerBox { width:100%; height:100%; top:0px; left:0px; margin:0;  }
	#registeriFrame { width:100%; height:100%; top:0px; left:0px; margin:0;  }
	
	.fontTitle { font-size:32px; line-height:36px; font-weight:400; }
	.fontSubtitle { font-size:20px; line-height:32px; }
	.fontNormal { font-size:16px; line-height:28px; }
	.smallFont { font-size:10px; line-height:26px; }

	#content h1{ font-size:30; line-height:38px; }
	#content h2{ font-size:24px; line-height:32px; }
	
	.getStartBtn { width:100px; padding:7px 55px 0px 55px;  }
	
	.slideBtn { display:block; width:150px; margin:10px auto; }
	.note { font-size:20px; line-height:30px; margin:10px 0px 10px 0px; }


}