/*
7-22-2014
Maureen Wang

available font families
font-family: 'Maven Pro', sans-serif; boring sans serif
font-family: 'Poiret One', cursive;  prety fancy curvy
*/
html{
	scroll-behavior: smooth;
}
body{
  /*background:#fff url(../img/dunhuanglarge.png) no-repeat;*/
  background:url(../img/loadingio.gif) center center no-repeat;
  width:80% !important;
  height:100%;
  margin-left:auto !important;
  margin-right:auto !important;
   text-rendering: optimizeLegibility;
}
body p{
	font-size:15px;
}
html,body{height:100%;}
.page{display:none; }
.container{padding-bottom:50px; width:auto !important;}

h2, h4, h5{
	/*font-weight:bold !important;*/
	font-family: 'Maven Pro', sans-serif;
}

h4, h5{
	font-weight:bold !important;
}

h3{
	font-family: 'Poiret One', cursive !important;
	/*font-weight:bold;*/
}
#dance .date{font-family: 'Maven Pro', sans-serif !important;}
p, h6{
	font-family: 'Maven Pro', sans-serif;  
}

a, .white, .caption, img{
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-ms-transition:all 0.2s;
	transition: all 0.2s;
	transition-property: color, opacity, visibility, text-decoration;
}

::selection {
  background: #f2322e; /* WebKit/Blink Browsers */
  color:#fff;
}
::-moz-selection {
  background: #f2322e; /* Gecko Browsers */
  color:#fff;
}
.description {width:60%; margin-top:120px; text-align:center; margin-left:auto; margin-right:auto;}
.description p{width:70%; margin-left:auto; margin-right:auto; }

.videoPlayer{ /*videos on dance & projects page*/
	padding-top:56.25%; /*16:9 aspect ratio*/
	height:0;
	overflow:hidden;
	position:relative;
	background:url(../img/loadingio.gif) center center no-repeat;
}
.videoPlayer iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #e3d8d7; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #f2322e; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #5a5a5a; 
}

/***************************************************************************************FLOATNAV*/

#floatnav{background-color:#f2322e; height:32px; position:fixed; right:0; top:0; width:100%; z-index:999999; padding-top:2px;}

#home #floatnav{background:transparent; font-size:30px;}
#home #floatnav .ttle a{font-size:45px;}

#home #floatnav a:hover{color:#070C18;}

#floatnav::after{
	content: "";
  clear: both;
  display: table;
}

#floatnav .ttle a{
	float:left;
	font-family: 'Poiret One', cursive !important;
	font-size:20px;
	color: #fff; 
	padding-left:0px;
}

#floatnav em{
	font-style:normal;
	text-decoration:none;
	border-bottom:2px solid #fff;
}

#floatnav .links{
	float:right;
	text-align:right;
}

#floatnav .links a, .ttle a{
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow:none;
  padding: 2px 10px;
}

/*#floatnav ul{position:relative; right:15px;}*/

#floatnav a:hover{
	text-decoration:none;
	color:#5a5a5a;
}

#floatnav li {
  display: inline;
  font-family:'Maven Pro', sans-serif;
}

#floatnav .fnav{
	width:80%;
	margin-left:auto; margin-right:auto;
}


/***************************************************************************************JUMBOTRON*/
.nav a {
  color: #5a5a5a;
  font-size: 30px;
  font-weight: bold;
  padding: 14px 10px;
  position:relative;
  bottom:80px;
  text-transform: uppercase;
  text-align:center;
  text-shadow:none;
}
.nav a:hover{
	color:#f2322e;
}

.nav li {
  display: inline;
  font-family: 'Maven Pro', sans-serif;
}

#home{
	background:url(../img/art/twice_large.png) center top no-repeat;
	height:100vh;
	min-height: 100vh;
	width:100vw;
	float:left;
	/*margin-left:-12.5%; /*to fix body width 80%*/
	margin-left:-12.5%; /*-6% to fix body width of 90%*/
	 background-size: cover;
	margin-right:auto;
}
#home ::-webkit-scrollbar{
	display:none;
}

.jumbotron {
  color: #454545;
  background-color:transparent !important;
}

.jumbotron .container {
  position: relative;
  top:100px;
  text-shadow:none;
}
.jumbotext{
    position:relative;
    left:35%;
	top:-20px;
    width:70%;
    text-align:center;
	text-shadow:none;
}
.jumbotext b{
    color:#f2322e;
}

.jumbotron h1{
  font-size: 60px;  
  font-family: 'Poiret One', cursive;
  text-shadow:none;
}

.jumbotron p {
  font-size: 20px;
  color: #fff;
  text-shadow:none;
  position:relative;
  top:30px;
  text-align:center;
  font-family: 'Maven Pro', sans-serif;  
  color: #454545;
}

/*********************************************************************************************ABOUT*/
/*#about{
	color:#fff;
	//background:#f2322e;
	height:400px;
}
#about .col-md-7{background:#f2322e; border-top:4px solid #e3d8d7; height:300px;}
#about img{float:right; position:relative; height:100%; margin-top:-53px; margin-right:-15px;}
#about p, #about h2{
	width:50%;
	margin:40px;
	text-align:right;
	float:left;
	position:relative;
	left:10%;
}
#about h2{font-weight:bold; margin-bottom:-20px;}*/
#about .description, #art .description{width:100%;}
#about .imgwrapper{
	overflow:hidden;
	width:80%;
	height:80%;
}
#about .col-lg-7 img {
	max-width:90%;
	margin-top:6%;
	max-height:auto;
	background:url(../img/loadingio.gif) center center no-repeat;
}
#about h2{
	color:#393c3d;
	text-align:left;
	font-family: 'Poiret One', cursive;
	font-size:60px;
}
#about h3, #art h3{
	color:#393c3d !important;
}

#about p{
	text-align:left;
	float:left;
	margin-top:10px;
	margin-bottom:15px;
	width:93%;
	margin-left:auto;
	margin-right:auto;
}

#about .abt {padding-bottom:30px; margin-top:-20px;}

#about .volunteering p{margin-bottom:2px;}

#about a{text-transform:none;}

#about li{
	list-style-type:none;
	margin-bottom:20px;
}

#about h4{
	text-align:left; 
	margin-bottom:0px;
	font-family: 'Maven Pro', sans-serif !important;
	font-weight:normal;
}

/***************************************************************************************projects*/

#projects, #art, #cosplay, #design, #dance, #games, #contact, #about{
    background-color:#fff;
	padding-bottom:20px;
}

#projects .row, #dance .row, #games .row {padding-right:5%; padding-left:5%;}
#projects h2, #art h2, #contact h2, #cosplay h2, #design h2, #dance h2, #games h2{
    color:#393c3d;
	text-align:center;
	margin-bottom:30px;
	font-family: 'Poiret One', cursive;
	font-size:60px;
	margin-top:40px;
}
#projects p, #art p , #contact p, #cosplay p, #design p, #dance p, #games p{
    font-size:15px;
    /*margin-bottom:10px;*/
	/*line-height:1.8em;*/
	text-align:center;
}
#projects .col-md-4 ul, #dance .col-md-4 ul{padding-left:15px;}
#projects .description, #cosplay .description, #art .description, #dance .description, #games .description, #design .description{margin-bottom:40px;}
#projects h3, #cosplay h3, #dance h3{text-align:center; font-weight:bold;}


#projects .container, #cosplay .container, #dance .container, #games .container{padding:0; }
#projects .col-md-8,#cosplay .col-md-8, #dance .col-md-8{padding:10px; }
#projects .row, #dance .row, #games .row{/*border-top:10px solid #f4f4f4;*/ margin-bottom:70px;  }
/*#projects .col-md-4{padding:30px; top:-30px;}*/
#projects .col-md-4 h3, #dance  .col-md-4 h3, #about h3, #art h3 {font-size:40px; text-align:left; color:#f2322e; font-family:'Poiret One', cursive;}
#projects .col-md-4  h6, #dance .col-md-4 h6, #about h6{font-size:20px; text-align:left; font-weight:bold; font-family: 'Maven Pro', sans-serif;  }
#projects .col-md-4 p, #dance  .col-md-4 p{text-align:left; font-family: 'Maven Pro', sans-serif; word-wrap:break-word;}
#dance li, #projects li, #about li{font-family: 'Maven Pro', sans-serif;}

#projects img, #cosplay  img, #dance img, #games img{ z-index:100; height:100%; width:100%; }
#projects  a:hover .white{visibility:visible; opacity:.5;}
#projects  a:hover .caption{visibility:visible;}
#projects a, #cosplay a, #dance a{text-decoration:none; height:100%; width:100%;}
#projects .gallery, #cosplay .gallery, #dance .gallery, #games .gallery{background-color:#fff;}

#projects #art .description{
	margin-top:0px;
}

/***************************************************************************************ART*/

#art h3, #design h3{text-align:center; font-size:50px; font-family: 'Poiret One', cursive !important; margin-top:15px;}

#art ul , #cosplay ul, #design ul, #dance .col-md-8 ul, #projects .col-md-8 ul{         
  padding:0 0 0 0;
  margin:0 0 0 0;
}
#art li, #cosplay li, #design li, #games li{     
  list-style:none;
  margin-bottom:25px;  
  height:200px;
	overflow:hidden;
}
#art .col-lg-6, #art .col-md-6, #art .col-sm-6, #art .col-xs-12{ /*height of gallery imgs!!!*/
	height:302px;
}
#art .col-lg-4, #art .col-md-4{ /*for other #projects*/
	height:195px;
}

#art  ul li img, #cosplay ul li img , #design ul li img, #dance ul li img, #projects ul li img, #games ul li img{
  cursor: pointer;
}
#art img, #cosplay img, #design img, #dance img, #games img, #projects img{
-webkit-box-sizing:content-box !important;
           box-sizing:content-box !important;
		   text-align:center;
}
#art img:hover, #design img:hover, #cosplay img:hover, #dance img:hover, #games img:hover, #projects img:hover{opacity:.8;}
.lb-data, .lb-caption{line-height:1.8em !important;}
#art .col-lg-6, #design .col-lg-6, #art .col-lg-4, #design .col-lg-4, #art .col-lg-3, #art .col-md-3 ,#art .col-sm-3,#art .col-xs-4, #design .col-lg-3 ,#design .col-md-3 ,#design .col-sm-3 ,#design .col-xs-4, #dance .col-lg-4 ,#dance .col-md-8 .col-md-4, #dance .col-sm-4, #dance .col-xs-6, #projects .col-lg-4, #projects .col-md-8 .col-md-4, #projects .col-sm-4, #projects .col-xs-6, #about .col-lg-4, #about .col-md-8 .col-md-4, #about .col-sm-4, #about .col-xs-6{
	padding:2px !important; margin-top:1px !important; margin-bottom:1px !important;
}

#art .container{padding-bottom:0px; margin-top:0px;}

#art h4{
	margin-top:-15px;
	font-size:25px; 
	font-family: 'Maven Pro', sans-serif;
	width:80%;
}
.lb-caption a{
	color: #f2322e !important;
	font-weight: bold;
	text-transform: uppercase;
}

#ui, #illust{
	margin-top:-200px;
}

#concept, #design, #sketches{
	margin-top:-50px;
}

/***************************************************************************************COSPLAY*/
#cosplay h6{font-size:20px; font-family: 'Maven Pro', sans-serif; text-align:center; }
#cosplay h5{font-size:15px; text-align:center;}
#cosplay .row{width:85%; padding: 0 0 20px 0; border-top:1px solid #f2322e; margin-left:auto; margin-right:auto;}
#cosplay .no-border{border:none;}
#cosplay p{font-size:14px; font-family: 'Maven Pro', sans-serif; }
#cosplay img{height:auto; width:100%; margin:2px;}
#cosplay h3 {font-size:40px; text-align:center; color:#f2322e; font-family:'Poiret One', cursive;}
#cosplay .col-md-3 p{text-align:left; font-family: 'Maven Pro', sans-serif; word-wrap:break-word;}
#cosplay .row p{line-height:1.1em;}
#cosplay .col-md-3, #cosplay .col-md-4,#cosplay .col-md-6,#cosplay .col-md-5{padding:2px !important;}

/***************************************************************************************DANCE*/
.topimg{display:block; text-align:center; margin-left: auto;  margin-right: auto; width:auto !important;}
#dance  .col-md-4{padding:0px 0 30px 30px; margin:0;}
#dance  .col-md-4 p{line-height:1em;}
/*#dance h6{font-weight:normal !important;}*/
#dance img, #projects img{height:auto;}
#dance .col-md-8  li, #projects .col-md-8  li{     
  list-style:none;
  margin-bottom:25px;  
  height:180px;
	overflow:hidden;
}

#dance a , #cosplay a, .links, #contact a, #games a, .description a, #projects a, #footer a, #art a{
  color: #f2322e;
  font-weight: bold;
  text-transform: uppercase;
}
#dance a:hover, #cosplay  a:hover, #contact a:hover,#games a:hover, .description a:hover, #projects a:hover, #about a:hover{
	color:#5a5a5a;
}
#dance h4 a,#cosplay h4 a{color:#f2322e; text-transform:uppercase; font-size:20px; font-family: 'Maven Pro', sans-serif;  text-align:center; margin-top:100px;}
#cosplay h4 a:hover{text-decoration:underline;}
#dance h4, #cosplay h4  {text-align:center; color:#f2322e;}

/***************************************************************************************CONTACT/RESUME*/
#contact h3{color:#f2322e; text-transform:uppercase; font-size:20px; font-family: 'Maven Pro', sans-serif;  text-align:center;}
#contact .description{padding-bottom:30px;}
/*#contactpage iframe{
		width:90%;
		height:600px;
		}*/
#artResume, #productionResume{ display:none; }
#contact button, #about button{
	background-color:#f2322e;
	color:#fff;
	width: 140px;
	padding:5px;
	text-decoration: none;
	border-width:2px;
	border-radius:2px;
	border-style:solid;
	border-color:#f2322e;
}
#contact button:hover, #about button:hover{
	background-color:#5a5a5a;
	border-color:#5a5a5a;
}
#contact button:focus, #about button:focus{
	background-color:#fff;
	color: #f2322e;
	border-color:#f2322e;
	outline:none;
}
#contact iframe{display:block; width:100%;background:url(../img/loadingio.gif) center center no-repeat;} /*get rid of whitespace bug*/


.resume{ 
	padding-top:129.41%; /*8.5 x 11 fixed aspect ratio*/
	height:0;
	/*overflow:hidden;*/
	position:relative;
	background:url(../img/loadingio.gif) center center no-repeat;

}
.resume iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


/*.resume iframe{ videos on dance & projects page
	height:20vw;
	width:25.88vw;
}*/

/***************************************************************************************FOOTER*/

#footer {
  background-color: transparent;
  position:relative;
  bottom:10px;
  width:100%;
  text-align:center;
  font-family: 'Maven Pro', sans-serif;
}

#home #footer {
	position:fixed; margin-left:auto; margin-right:auto; right:0; left:0; text-align:center; color:#fff; 
	/*hiding to remove redundancy:*/display:none;
}
#home #footer a{color:#070C18;}

#footer h5{font-weight:bold; margin-bottom:0;}

#footer a {
  color: #f2322e;
  font-family: 'Maven Pro', sans-serif;
  margin-left:1%;
}

/******************************************************************************************SMALLER SCREENS*/

@media only screen
and (min-width:1201px)
and (max-width:1400px){
	body{overflow-x:hidden;}
	#art li, #cosplay li, #design li, #dance .col-md-8  li, #projects .col-md-8 li{     
	  list-style:none;
	  margin-bottom:25px;  
	  max-height:240px;
		overflow:hidden;
	}
	#art .col-lg-4, #art .col-md-4{height:168px;}
	#projects .col-md-8 li{
		max-height:160px;
	}
	/*#projects .row li{list-style:none;}*/
	.topimg{ width:100% !important;}
	.description {width:80%;}
	#cosplay .row{width:80%; }
	/************************************index**/
	/************************************ABOUT*/

}

@media only screen
and (min-width:965px)
and (max-width:1200px){
	body{width:95% !important; overflow-x:hidden;}
		#art li, #cosplay li, #design li, #dance .col-md-8  li, #projects .col-md-8 li{     
	  list-style:none;
	  margin-bottom:25px;  
	  max-height:230px;
		overflow:hidden;
	}
	#art .col-lg-4, #art .col-md-4{height:158px;}
	#projects .col-md-8 li{max-height:155px;}
	/*#projects .row li{list-style:none;}*/
	#dance .col-md-4{padding-top:0px;}
	.topimg{ width:100% !important;}
	.description {width:80%;}
	#cosplay .row{width:80%; }
	#list{width:70%;}
	body{ text-rendering: optimizeSpeed;}
	#contact button{margin:2px; width: 125px;}
	/************************************index**/
	#home #floatnav{font-size:25px;}
	#home #floatnav .ttle a{font-size:30px;}
	/*********************************ABOUT*/
	#about{width: 90%;   margin-left: auto; margin-right: auto;}
	
}

@media only screen
and (min-width:851px)
and (max-width:964px){
	body{overflow-x:hidden;}
		#art li, #cosplay li, #design li, #dance .col-md-8  li, #projects .col-md-8 li{     
	  list-style:none;
	  margin-bottom:25px;  
	  max-height:170px;
		overflow:hidden;
	}
	#art .col-lg-4, #art .col-md-4{height:150px;}
	#projects .col-md-8 li{max-height:160px;}
	/*#projects .row li{list-style:none;}*/
	#dance .col-md-4{padding-top:0px;}
	.topimg{ width:100% !important;}
	.description {width:80%;}
	#cosplay .row{width:80%; }
	#list{width:70%;}
	#art h4 {font-size:24px;}
	body{ text-rendering: optimizeSpeed;}
	#contact button{margin:3px; font-size:13px; width: 110px;}
	/************************************index**/
	#home #floatnav{font-size:20px;}
	#home #floatnav .ttle a{font-size:25px;}
	
}


@media only screen 
and (min-width : 751px) 
and (max-width : 850px) {
	body{overflow-x:hidden;}
		#art li, #cosplay li, #design li, #dance .col-md-8  li, #projects .col-md-8 li {     
	  list-style:none;
	  margin-bottom:25px;  
	  max-height:145px;
		overflow:hidden;
	}
	/*#projects .row li{list-style:none;}*/
	#dance ul{font-size:17px;}
	#dance .col-md-4{padding-top:0px;}
	.topimg{ width:100% !important;}
	#list{width:80%;}
	#cosplay .row{width:70%; }
	.description {width:70%;}
	#art h4 {font-size:19px;}
	body{ text-rendering: optimizeSpeed;}
	#contact button{margin:3px; font-size:13px; width: auto;}
	/************************************index**/
	/************************************general**/
		body{margin-left:0; margin-right:0;}
		#home #floatnav{font-size:17px;}
		#home #floatnav .ttle a{font-size:20px;}
		#floatnav .links a, .ttle a{font-size:17px; padding:3px;}
	/*********************************************************************************************ABOUT*/
}


@media only screen 
and (min-width : 571px) 
and (max-width : 750px) {
	body{width:95% !important; overflow-x:hidden;}
	body{margin-left:0; margin-right:0;}
		#art li, #cosplay li, #design li, #dance .col-md-8  li, #projects .col-md-8 li{     
	  list-style:none;
	  margin-bottom:25px;  
	  max-height:185px;
		overflow:hidden;
	}
	#art .col-xs-6{height:138px;}
	#projects .col-md-8 li{max-height:140px;}
	/*#projects .row li{list-style:none;}*/
	#dance ul{font-size:15px;}
	#dance .col-md-4{padding-top:0px;}
	.topimg{ width:100% !important;}
	#cosplay .row{width:90%; }
	#list{width:90%;}
	.description {width:90%;}
	#art h4 {font-size:16px;}
	body{ text-rendering: optimizeSpeed;}
	#contact button{margin:3px; font-size:16px; width: auto;}
	/************************************index**/
	#floatnav{height:70px;}
	#floatnav a{text-align:center; float:none;}
	#floatnav .ttle a{display:block; left:0; right:0; text-align:center; float:none;}
	#floatnav .links{float:none; left:0; right:0; text-align:center;}
	#floatnav ul{padding-inline-start:0px;}
	#floatnav .links a, .ttle a{padding:3px;}
	#home{width:120%;}

	/*********************************************************************************************ABOUT*/
}

@media only screen 
and (min-width : 411px) 
and (max-width : 570px) {
	body{width:100% !important; overflow-x:hidden;}
	html{overflow-x:hidden;}
	#page{margin-top:42px;}
		#art li, #cosplay li, #design li, #dance .col-md-8  li, #projects .col-md-8 li {     
	  list-style:none;
	  margin-bottom:25px;  
	  max-height:190px;
		overflow:hidden;
	}
	#art .col-xs-6{height:105px;}
	#projects .col-md-8 li{max-height:110px;}
	#projects h2, #art h2, #contact h2, #dance h2{margin-top:0px;}
	/*#projects .row li{list-style:none;}*/
	.topimg{ width:100% !important;}
	#dance ul{font-size:15px;}
	#dance .col-md-4{padding-top:0px;}
	#cosplay .row{width:90%; }
	#list{width:90%;}
	.description {width:90%; margin-top:115px;}
	.description p{width:100%;}
	#art h4 {font-size:16px;}
	body{ text-rendering: optimizeSpeed;}
	#contact button{margin:3px; font-size:13px; width: auto;}
	#footer a{margin-left:1px;}
	#footer h5{ font-size:11px;}
	/************************************index**/
	#floatnav{height:60px;}
	#floatnav a{text-align:center; float:none;}
	#floatnav .ttle a{display:block; left:0; right:0; text-align:center; float:none;}
	#floatnav .links{float:none; left:0; right:0; text-align:center;}
	#floatnav ul{padding-inline-start:0px;}
	#floatnav .links a, .ttle a{padding:1px; font-size:14px;}
	#home{width:120%;}
	#home #floatnav .ttle a{font-size:25px;}
	#home #floatnav{font-size:14px;}
	 /*********************************************************************************************ABOUT*/
	 #about h3{
		 padding-top:15px;
	 }
	 

}

@media only screen 
and (min-width : 200px) 
and (max-width : 410px) {
	body{width:100% !important; overflow-x:hidden;}
	html{overflow-x:hidden;}
	#page{margin-top:42px;}
		#art li, #cosplay li, #design li, #dance .col-md-8  li, #projects .col-md-8 li {     
	  list-style:none;
	  margin-bottom:25px;  
	  max-height:135px;
		overflow:hidden;
	}
	#art .col-xs-6{height:75px;}
	#projects .col-md-8 li{max-height:75px;}
	#projects h2, #art h2, #contact h2, #dance h2{margin-top:0px;}
	/*#projects .row li{list-style:none;}*/
	.topimg{ width:100% !important;}
	#dance ul{font-size:15px;}
	#dance .col-md-4{padding-top:0px;}
	#cosplay .row{width:90%; }
	#list{width:90%;}
	.description {width:90%; margin-top:115px;}
	.description p{width:100%;}
	#art h4 {font-size:16px;}
	body{ text-rendering: optimizeSpeed;}
	#contact button{margin:3px; font-size:13px; width: auto;}
	#footer a{margin-left:1px;}
	#footer h5{ font-size:11px;}
	/************************************index**/
	#floatnav{height:60px;}
	#floatnav a{text-align:center; float:none;}
	#floatnav .ttle a{display:block; left:0; right:0; text-align:center; float:none;}
	#floatnav .links{float:none; left:0; right:0; text-align:center;}
	#floatnav ul{padding-inline-start:0px;}
	#floatnav .links a, .ttle a{padding:1px; font-size:14px;}
	#home{width:120%;}
	#home #floatnav .ttle a{font-size:25px;}
	#home #floatnav{font-size:14px;}
	 /*********************************************************************************************ABOUT*/
	 #about h3{
		 padding-top:15px;
	 }
	 

}