* {
margin:0;
padding:0;
}
html {
height:100%;
overflow-x:hidden;
}
body {
height:100%;
min-width:1400px;
}
#wrap {
min-height:100%;
width:400%;
overflow:hidden;
height:800px;

}


#home {
width:25%;
float:left;
height:1000px;

}

#home article {
width:445px;
	padding:20px 20px;
	background-color:#545454;
	top:0;	
	position:fixed;
	margin-top:100px;
	height:55%;
	opacity:0.9;
}


#home article p {
	width:405px;
	height:65%;
	color:#fff;
	overflow:scroll;
	font-family: 'Roboto', sans-serif;
	padding:10px;
	}

#home article h2{
padding: 10px;
display: inline-block;
font-family: "Play", sans-serif;
font-weight: 900;
letter-spacing: 2px;
color:#8CA1D3;

}

.intro {
position: absolute;
left: 55%;
top: 450px;
width: 1000px;
height: 400px;
margin-left: -380px;
margin-top: -260px;
opacity:0.7;
}

.intro h2 {
osition: absolute;
display: inline-block;
font-family: "Play", sans-serif;
font-weight: 900;
letter-spacing: 2px;
color: #D7DFE7;
font-size: 36px;
padding: 10px 20px;
margin-top: 137px;
margin-left: -73px;
}

.intro .intro-content .btn {
background-color: #274558;
position: absolute;
padding: 10px 10px;
text-decoration: none;
display: inline-block;
letter-spacing: 3px;
font-family: "Play", sans-serif;
font-weight: bold;
cursor: pointer;
color: #fff;
border-radius: 20px;
margin-left:-50px;

}

.btn {

position: absolute;
padding: 5px;
text-decoration: none;
display: inline-block;
font-family: "Roboto", sans-serif;
font-weight: bold;
cursor: pointer;
color:#A17941;
}

.btn2{
padding: 6px;
margin-left: 94px;
font-size: 16px;
}


#closeabout{
float:right;
padding:5px;
color:#8CA1D3;
}

#david{
width:25%;
float:left;
height:1080px;
background:url("img/davidtran1.jpg") 50% 0 no-repeat fixed;}

#david article{
top: 100px;
width: 445px;
padding: 20px 20px;
background-color: #545454;
float: right;
margin-right: 100px;
margin-top: 150px;
background-color:rgba(50,50,50,0.5);
height:250px;
}

#david article p{
	width:400px;
	color:#fff;
	padding:10px;
	font-size:18px;
	font-family: 'Roboto Condensed', sans-serif;
	opacity:0.7;
}

#david article h2 {
display: inline-block;
font-family: 'Play', sans-serif;
font-weight: 900;
letter-spacing: 1px;
color: #fff;
font-size: 32px;
padding: 15px 10px;
margin-top: -10px;
margin-left: -1px;
color:#148881;
}


#chris {

width:25%;
float:left;
height:1080px;
background:url("img/chriskim.jpg") 50% 0 no-repeat fixed;}

#chris article {
	width:445px;
	padding:20px 20px;
	background-color:#545454;
	top:0;	
	position:fixed;
	margin-top:100px;
	height:78%;
	opacity:0.9;
	
}

#chris article h2{
padding: 10px;
display: inline-block;
font-family: "Play", sans-serif;
font-weight: 900;
letter-spacing: 2px;
color: #A17941;
}


#chris article p {
	width:405px;
	height:475px;
	color:#fff;
	overflow:scroll;
	font-family: 'Roboto', sans-serif;
	padding:10px;
	}
	
#close2{
float:right;
padding:5px;
color:#A17941;

}
	
.kim h2 {
position: absolute;
display: inline-block;
font-family: "Play", sans-serif;
font-weight: 900;
letter-spacing: 2px;
font-size: 34px;
padding: 40px 5px;
margin-top: -37px;
margin-left: -1px;
color: #A17941;
}

.kim{
position:absolute;
left: 3200px;
margin-top: 240px;
width: 700px;
height: 350px;
overflow: hidden;
padding: 20px;
cursor: pointer;
opacity:0.8;
background-color:#545454;

}

.kim .kim-content{
color: #fff;
padding: 100px 270px 20px 20px;
font-size:18px;
font-family:'Roboto Condensed', sans-serif;
}


.hidden{
display:none;

}


.photogallery{
padding: 20px 20px;
left: 810px;
margin-top: 320px;
position: relative;
}

	
#angela {
width:25%;
float:left;
height:1080px;
background:url("img/angelazhu.jpg") 50% 0 no-repeat fixed;}

/****#angela article{
	position: absolute;
top: -400px;
width: 445px;
padding: 20px 20px;
background-color: #545454;
margin-left: -350px;
}

#angela article p{
	width:400px;
	margin-bottom:25px;
	color:#fff;
}
***********/

.zhu{
position:absolute;
left: 4650px;
margin-top: 270px;
width: 700px;
height: 330px;
overflow: hidden;
padding: 10px;
cursor: pointer;
background-color:#545454;
opacity:0.8;

}

.zhu .zhu-content {
margin-top: 80px;
margin-left: 30px;
color: #fff;
width:380px;
font-family:"Roboto Condensed", sans-serif;
font-size:20px;
opcaity:0.7;
font-size:18px;
letter-spacing: 1px;
}

.zhu h2 {
position: absolute;
display: inline-block;
font-family: "Play", sans-serif;
font-weight: 900;
letter-spacing: 2px;
color: #AE2E77;
font-size: 34px;
padding: 30px 20px 0;
margin-top: -7px;
margin-left: -1px;
}


.photogallery2{
padding: 10px 20px;
left: 20px;
position: relative;
color: #AE2E77;
float: right;
width: 262px;
margin-top: -280px;
font-family: "Roboto Condensed", sans-serif;
font-size: 16px;
}

ul {
position:fixed;
width:100%;
height:50px;
line-height:40px;
text-align:center;
background:#ccc;
opacity:0.4;
z-index:100;
}

ul li{
float:left;
list-style:none;
margin-right:1em;
font-family: 'Montserrat', sans-serif;
font-size:25px;
padding:12px;
}

li {
display:inline;
margin:0 50px;
}

li a{
color:#544738;
text-decoration:none;
float:left;

}

li a:hover{
color:#7eb9be;
}

.left a:hover{
/**Transition**/
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;

/**Transform**/
-webkit-transofrm:rotate(-10deg) scale(1.2);
-moz-transform:roate(-10deg) scale(1.2);
-o-transform:roate(-10deg) scale(1.2);
}

.right a:hover{

/**Transition**/
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;

/**Transform**/
-webkit-transofrm:rotate(10deg) scale(1.2);
-moz-transform:roate(10deg) scale(1.2);
-o-transform:roate(10deg) scale(1.2);
}

p {
text-align:left;
margin-left:!5px;
}

/**********home control starts here*********/

.home-next-control {
display: none;
position: absolute;
z-index: 300;
top: 50%;
left: 1300px;
margin-top: 300px;
width: 20px;
height: 20px;
overflow: hidden;
padding: 20px;
cursor: pointer;
background-color:#000;
opacity:0.6;
}

.home-next-control .shape {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;

}


.home-next-control .shape .arrow {
width: 28px;
height: 36px;
background: url('img/prearrow.jpg') 0 -95px;
position:relative;
}

.home-prev-control{
display: none;
position: absolute;
z-index: 300;
top: 50%;
left: 1200px;
margin-top: 300px;
width: 20px;
height: 20px;
overflow: hidden;
padding: 20px;
cursor: pointer;
background-color:#000;
opacity:0.6;
}

.home-prev-control .shape {
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;

}

.home-prev-control .shape .arrow {
width: 28px;
height: 36px;
background: url('img/prearrow.jpg') 0 -153px;
margin-top:5px;
position:relative;
}

video{
position: absolute no-repeat;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: url('img/beyond.jpg') 50% no-repeat fixed;
background-size: cover;
-webkit-transition: 1s opacity;
transition: 1s opacity;


}

/**********david control starts here*********/
.david-next-control {
display: none;
position: absolute;
z-index: 300;
top: 50%;
left: 2730px;
margin-top: 300px;
width: 20px;
height: 20px;
overflow: hidden;
padding: 20px;
cursor: pointer;
background-color:#000;
opacity:0.6;
}

.david-next-control .shape {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;

}


.david-next-control .shape .arrow {
width: 28px;
height: 36px;
background: url('img/prearrow.jpg') 0 -95px;
position:relative;
}

.david-prev-control{
display: none;
position: absolute;
z-index: 300;
top: 50%;
left: 2630px;
margin-top: 300px;
width: 20px;
height: 20px;
overflow: hidden;
padding: 20px;
cursor: pointer;
background-color:#000;
opacity:0.6;
}

.david-prev-control .shape {
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;

}

.david-prev-control .shape .arrow {
width: 28px;
height: 36px;
background: url('img/prearrow.jpg') 0 -153px;
margin-top:5px;
position:relative;
}

/**********chris control starts here*********/
.chris-next-control {
display: none;
position: absolute;
z-index: 300;
top: 50%;
left: 4160px;
margin-top: 300px;
width: 20px;
height: 20px;
overflow: hidden;
padding: 20px;
cursor: pointer;
background-color:#000;
opacity:0.6;
}

.chris-next-control .shape {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;

}


.chris-next-control .shape .arrow {
width: 28px;
height: 36px;
background: url('img/prearrow.jpg') 0 -95px;
position:relative;
}

.chris-prev-control{
display: none;
position: absolute;
z-index: 300;
top: 50%;
left: 4060px;
margin-top: 300px;
width: 20px;
height: 20px;
overflow: hidden;
padding: 20px;
cursor: pointer;
background-color:#000;
opacity:0.6;
}

.chris-prev-control .shape {
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;

}

.chris-prev-control .shape .arrow {
width: 28px;
height: 36px;
background: url('img/prearrow.jpg') 0 -153px;
margin-top:5px;
position:relative;
}

/**********angela control starts here*********/
.angela-next-control {
display: none;
position: absolute;
z-index: 300;
top: 50%;
left: 5590px;
margin-top: 300px;
width: 20px;
height: 20px;
overflow: hidden;
padding: 20px;
cursor: pointer;
background-color:#000;
opacity:0.6;
}

.angela-next-control .shape {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;

}


.angela-next-control .shape .arrow {
width: 28px;
height: 36px;
background: url('img/prearrow.jpg') 0 -95px;
position:relative;
}

.angela-prev-control{
display: none;
position: absolute;
z-index: 300;
top: 50%;
left: 5490px;
margin-top: 300px;
width: 20px;
height: 20px;
overflow: hidden;
padding: 20px;
cursor: pointer;
background-color:#000;
opacity:0.6;
}

.angela-prev-control .shape {
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;

}

.angela-prev-control .shape .arrow {
width: 28px;
height: 36px;
background: url('img/prearrow.jpg') 0 -153px;
margin-top:5px;
position:relative;
}




* html ul {position:absolute;left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');} 
* html {}
* html #full {height:100%;}