@charset "utf-8";
/* CSS Document */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}
@font-face {
    font-family:caviardreams; 
    src:url(Fonts/caviardreams-webfont.woff)
}
/*Responsive image gallery*/
/*http://css-tricks.com/seamless-responsive-photo-grid/*/
* { margin: 0; padding: 0; }

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}
/*End Responsive image gallery*/

/*Sticky Footer*/
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: black;
  /*overflow:hidden;*/
}
/*End Sticky Footer*/

html, body{height: 100%; font-family:"caviardreams";}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	
}
body {/*background-image:url(img/Carolyn%20Li%20Ming%20Geh%20op.jpg); background-position:center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;*/ 
		background-color: rgb(0,0,0);}

/*low resolution, 480px and below */
@media only screen and (max-width: 480px) {
header {width: 100%; 
 		position:absolute;}
header h1 {font-size:200%; 
 	margin-top:30px; 
	
	color: rgb(252,252,252);
	text-align:center;
	}
	
header	h1 a:link {color:rgb(252,252,252);text-decoration:none;}
header	h1 a:visited {color: rgb(252,252,252);}
header	h1 a:hover {color: rgb(252,252,252);}	

nav { 
	 margin-top:100px;
	 width:100%;
	 position:absolute;
	background-color:black;
	
    text-align:center;
	
	}

nav ul li {
	font-size: 14px;
	list-style-type: none;
	margin-right: 10px;
	border:none;
	line-height:8px;
	display:inline;
	
	}
		
nav a:link {text-decoration:none; border:none; color: rgb(252,252,252);}
nav a:visited {color: rgb(252,252,252);}
nav a:hover {color: rgb(252,252,252);}

#side-menu {
/*  position: absolute;*/
   left: -150px;  /* uncomment to default hidden */
}
#content-button {
    width: 100%;
    height: 100px;
}

#open-menu {
    width: 50px;
    height: 50px;
	margin-left:20px;
	font-size:26px;
	color: rgb(252,252,252);
}

section {
	width: 100%;
	padding-top:150px;

		}
section h1 {
	font-size: 150%;
	text-align: center;
	margin: 0 auto;
	color: rgb(252,252,252);}
	
section p {/*width: 250px;*/ 
			margin: 0 auto; 
			text-align:center; 
			padding:10px 10px ; 
			font-size:90%; 
			line-height:140%;
			color: rgb(252,252,252);
			}
			
	section a:link {color:rgb(252,252,252);text-decoration:none;}
	section a:visited {color: rgb(252,252,252);}
	section a:hover {color: rgb(252,252,252);}		

#gallery {width:320px; margin: 0 auto; }
#gallery img { width:120px;  margin-left:10px; border:none; margin-top:10px;}
.img5 img {width:100px !important;}

.sectionbio {width: 100%; margin: auto;  }
.sectionbio p {font-size:90%; text-align:justify; }
.sectionvideo {width: 350px; margin: 0 auto; display:block; }

iframe {display:block; width:350px; height: auto; margin: 0 auto; border:none;}
.videos p {width:400px;  margin-bottom: 10px; text-align: center; font-color: #ffffff;}
.name2 {margin-top:30px;}

footer {
	width: 100%;
	bottom:0;
	margin-top:30px;
	/*position:fixed;*/
	background: rgb(0,0,0);
	}

#socialdiv {/*width:300px;*/ 
			margin: 0 auto; }
#socialdiv ul {width:200px; margin: 0 auto; text-align:center; }

	ul.social li a {display: inline;  color: black;}
	ul.social li {display:inline;}
	
    ul.social li img {
	width: 30px;
	padding-top: 15px;
	margin-right: 10px;
	margin-bottom: 10px;
	border:none; /*to remove IE automatic border*/}
	#site-info {
	width: 100%;
	margin: 0 auto;}
	
	.copyright {width:100%; }
    p.copyright {
	font-size: 80%;
	text-align: center;
	float:right; margin: 0; padding:0; /*all three needed to make p and ul on the same line*/
	margin-bottom:0px;
	margin-top:15px;
	color: rgb(108,108,108);}
	
	p.copyright a:link {color: rgb(108,108,108); text-decoration:none;}
	p.copyright a:visited {color: rgb(108,108,108); text-decoration:none;}
	p.copyright a:hover {color: rgb(108,108,108); text-decoration:none;}
	p.copyright a:active {color: rgb(108,108,108); text-decoration:none;}

}
 

	
/*mediuam resolution/tablet 481px to 1023px*/
@media only screen and (min-width: 481px) {

 header {width: 100%; 
 		/*position:absolute;*/}
header h1 {font-size:36px; 
 	margin-top:50px; 
	
	color: rgb(252,252,252);
	text-align:center;
	}
	
header	h1 a:link {color:rgb(252,252,252);text-decoration:none;}
header	h1 a:visited {color: rgb(252,252,252);}
header	h1 a:hover {color: rgb(252,252,252);}	

nav {width:100%;
	 margin-top:20px;
	 /*padding-left:30px;*/
	 /*position:absolute;*/
	  }
	  nav ul {text-align:center;}
	  

nav ul li {
	font-size: 100%;
	display:inline;
	list-style-type: none;
	margin-right: 20px;
	margin-top: 20px;
	border:none;
	font-weight:500;
	
	 }
		
nav a:link {text-decoration:none; border:none; color: rgb(252,252,252);}
nav a:visited {color: rgb(252,252,252);}
nav a:hover {color: rgb(252,252,252);}

#side-menu {
/*  position: absolute;*/
   left: -300px;  /* uncomment to default hidden */
}
#content-button {
    width: 100%;
    height: 50px;
}

#open-menu {
    width: 100px;
    height: 100px;
	margin-left:40px;
	font-size:20px;
	color: rgb(252,252,252);
}

section {
	/*width: 100%;*/
	width: 98%;
	
	padding-top:50px;
	margin-bottom:10px;
	padding-left:1%;
	padding-right:1%;
		}
section h1 {
	font-size: 28px;
	text-align: center;
	margin: 0 auto;
	color: rgb(252,252,252);}
	
section p {width: 450px; 
			margin: 0 auto; 
			text-align:center; 
			padding:10px 10px ; 
			font-size:120%; 
			line-height:140%;
			color: rgb(252,252,252);
			}
			
	section a:link {color:rgb(252,252,252);text-decoration:none;}
	section a:visited {color: rgb(252,252,252);}
	section a:hover {color: rgb(252,252,252);}		

 
.sectionbio {width: 80%; margin: 0 auto;}
.sectionbio p {width: 90%; font-size:100%; text-align:justify; /*position:relative;*/}
.sectionvideo {width: 350px; margin: 0 auto; display:block; text-align:center; }

 
iframe {display:block; width:400px; height: 400px; margin: 0 auto; border:none; }

looper-control {left: -50px; margin-left:5px;}
looper-control.right {right: -15px;}
.videos p {margin-bottom:10px; width:400px; margin: auto; color: #ffffff;}
.name2 {margin-top:50px;}

#socialdiv {/*width:300px;*/ 
			margin: 0 auto; }
#socialdiv ul {width:200px; margin: 0 auto; text-align:center; }

	
	ul.social li a {display: inline;  color: black;}
	ul.social li {display:inline;}
	
    ul.social li img {
	width: 30px;
	padding-top: 15px;
	margin-right: 10px;
	margin-bottom: 10px;
	border:none; /*to remove IE automatic border*/
}
	#site-info {
	width: 100%;
	margin: 0 auto;
		}
	
	.copyright {width:100%; }
    p.copyright {
	font-size: 14px;
	text-align: center;
	float:right; margin: 0; padding:0; /*all three needed to make p and ul on the same line*/
	margin-bottom:0px;
	margin-top:15px;
	color: rgb(108,108,108);}
	
	p.copyright a:link {color: rgb(108,108,108); text-decoration:none;}
	p.copyright a:visited {color: rgb(108,108,108); text-decoration:none;}
	p.copyright a:hover {color: rgb(108,108,108); text-decoration:none;}
	p.copyright a:active {color: rgb(108,108,108); text-decoration:none;}

}
 
 /*large resolution/tablet 481px to 1023px*/
@media only screen and (min-width: 1024px) {
header {width: 100%; 
		/*position:fixed;*/
		background:rgb(0,0,0);
		/*height:160px;*/}
header h1 {font-size:46px; 
 	margin-top:50px; 
	margin-left: 40px;
	color: rgb(252,252,252);
	text-align:left;
	}
	
header	h1 a:link {color:rgb(252,252,252);text-decoration:none;}
header	h1 a:visited {color: rgb(252,252,252);}
header	h1 a:hover {color: rgb(252,252,252);}

nav {width:100%;
padding-left: 40px; }
nav ul {text-align:left;}

nav ul li {
	font-size: 100%;
	list-style-type: none;
	margin-right: 20px;
	margin-top: 20px;
	border:none;
	font-weight:600;
	line-height:10px; }
		
nav a:link {text-decoration:none; border:none; color: rgb(252,252,252);}
nav a:visited {color: rgb(252,252,252);}
nav a:hover {color: rgb(252,252,252);}

#side-menu {
/*  position: absolute;*/
   left: -300px;  /* uncomment to default hidden */
}
#content-button {
    width: 100%;
    height: 50px;
}

#open-menu {
    width: 100px;
    height: 100px;
	margin-left:40px;
	font-size:26px;
	color: rgb(252,252,252);
}


section {
	width: 98%;
	padding-top:80px;
	padding-bottom:10px;
	padding-left:1%;
	padding-right:1%;
}
section h1 {
	font-size: 28px;
	text-align: center;
	margin: 0 auto;
	color: rgb(252,252,252);}
	
section p {width: 450px; 
			margin: 0 auto; 
			text-align:center; 
			padding:10px 10px ; 
			font-size:120%; 
			line-height:140%;
			color: rgb(252,252,252);
			}
			
			
	section a:link {color:rgb(252,252,252);text-decoration:none;}
	section a:visited {color: rgb(252,252,252);}
	section a:hover {color: rgb(252,252,252);}	
	


.sectionbio {width: 50%;margin: 0 auto;}
.sectionbio p { font-size:16px; text-align:justify;}

.sectionvideo {width: 700px; margin: 0 auto; display:block; /*margin-left:20%;*/}
iframe {width:700px; height:507px;}
.name2 {margin-top:50px;}

}