/* ------------------------------------------------------
	julie-ho-master-stylesheet
	
	Last updated: 2013.5.3
-------------------------------------------------------*/

@import url(https://fonts.googleapis.com/css?family=Lato);
html { 
  background: url(../images/milk-bg-xm.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body {
	background: transparent;
}
#mast-head{
	overflow: hidden;

}
	.main-wrap {
		overflow: hidden;
		max-width: 500px;
		margin: auto;
		margin-top: 3em;
		text-align: center;
	}
	.main-wrap h1{
		color: #fff;
		font-size: 5em;
	}
	.main-wrap p {
		color: #fff;
		font-size: 1em;
	}



/* --- | Small_Section | --- */

/* --- Big_Section
-------------------------------------------------------*/
@media only screen and (min-width: 783px) {
	#header-bg {
		background:url(../images/a.png);
		margin-top: 20px;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		}
	#header {
		margin: auto; 
		width: 100%;
		max-width:960px;
		}
	#headersmall-box {display: none;}
		.julieho-logo{
			float: left;
			margin: 5px 0 5px 30px;
			}
		.julieho-logo_s{display: none;}
		#header-box{ 
			max-width: 600px;
			float:right;
			margin: -21px 30px 0 0;
			}
			.navbar-menu {
				float: right;}
			.navbar-items {
				display:block;
				list-style-type:none;
				text-align:center;
				float:left;
				color: #303030; 
				font-size: 1em;
				}
				.navbar-items a { font-size: 1.4em; color: #303030; margin:0; padding: 50px 15px 15px; width: 115px; display: block; text-align: right;text-decoration: none;}
				.navbar-items.portfolio	{background: #a66027;}
				.navbar-items.about	{ background: #215868; }			
				.navbar-items.contact  {  background: #943634; }
				
				.navbar-items.portfolio a,.navbar-items.about a,.navbar-items.contact a {color: #fff;}	

				.navbar-items a:hover{ color: #fff;}
				
				.navbar-items.portfolio-hover	a:hover {background: #a66027;}
				.navbar-items.about-hover	a:hover { background: #215868; }			
				.navbar-items.contact-hover a:hover {  background: #943634; }	
#container{
	max-width:960px; 
	width: 100%;
	min-height:100%;
	margin:auto;
	}
#header ul.navbar-menu{
	font-family: 
	"nudista-web-1","nudista-web-2","Helvetica Neue",Arial,sans-serif;
	}
	#tagline-box{
		margin:auto; 
		width: 100%;
		max-width:800px;
		padding: 70px 0;
		}
		#tagline-box-small{display: none;}
		.tagline{width:100%;height:auto; margin:auto;}
	#content-small{display: none;}
	#content, #portfolio-content {
		width:100%;
		 }
		 #content-pages{width:100%;}
		#content-box1,#content-box2, #content-box3{
			width: 30%;
			padding: 30px 0;
			float:left;
			overflow: hidden;
			}
		#content-box1, #content-box3{
			margin: 2.5%;
			}
		#content-box2{ 
			margin: 2.5% 0;
			}
			#titlebox{ 
			width: 100%; 
			margin-bottom:10px;
			}
				.index-title {
					color: #984806; 
					font-size:1.8em; 
					text-align:left;
					font-family: Helvetica, Arial, sans-serif;
					}
				.recentwork-content {
					border: 1px solid #ddd;
					}
					.recentwork-content:hover {opacity:0.8;}
					.box-link {
						float:right; 
						margin: 5px 0;
						font-size: .8em;}
					.box-link a:link {
						font-size: .8em;}

				#content-box2 ul li{
					border-bottom: 1px solid #ccc; 
					padding: 3px 0;
					list-style:none;
					}
				.instagram-pic{ 
					border: none; 
					overflow:hidden; 
					width:258px; 
					height: 258px;
					margin:0px 0px;
					}
					.media-grid a {border: 1px solid black; padding: 1px; }
#footer-small{display:none;}		
#footer-big { background: #303030; min-height: 60px; margin: auto;}
			#footer-contain {max-width: 960px; margin: auto;}
				#social-box {
				display: block; 
				float:left; 
				margin: 20px 0 0 30px;
				max-width: 500px;}
				.social-media {			
						list-style-type:none;
						display:block;
						float:left;
						margin: 0 0 5px 0;
						padding: 2px 25px;
						font-size:1.1em;
						font-family:"nudista-web-1","nudista-web-2","Helvetica Neue",Arial,sans-serif;
						}
						.facebooki { background:url(../images/sprites.png) no-repeat scroll 0 0 transparent; }
						.linkedini { background:url(../images/sprites.png) no-repeat scroll -115px 0 transparent; }
						.instagrami { background:url(../images/sprites.png) no-repeat scroll -230px 0 transparent; }
						.lastfmi { background:url(../images/sprites.png) no-repeat scroll -345px 0 transparent; }
		
						.social-media a {  }	/* SET */
						.social-media a:link { color: #a0a0a0; font-size: 1.1em; text-decoration:none;outline: none; }	/* SET */
						.social-media a:visited { color: #a0a0a0; font-size: 1.1em; text-decoration:none;outline: none;  }	/* SET */
						.social-media a:hover { color: #fbfbfb; text-decoration: none; }	/* SET */
						.social-media a:active { color: #a0a0a0; font-size: 1.1em; text-decoration:none;outline: none;  }	/* SET */  	
	#footer-copyright{
		display:block;
		width:80px; 
		float:right;
		margin:22px 30px 0 0;
		
		}
	.copyright{
		display:block;
		float:right;
		color: #fbfbfb;
		}
}
@media only screen and (max-width: 782px) {
	#headersmall-bg,{ 
		background:url(../images/a.png);
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		}
		#header-small{width:100%;}
			#logo-contain-small {margin: auto;width: 200px;}
				#headersmall-box {
					width: 100%;
					margin:auto;
					}
					#navbox-small{max-width: 220px; margin: auto;}
				#header {display: none;}
						.navbar-menu-small{ margin:auto; width: 225px;}
							.navbar-items-small {
							display:block;
							list-style-type:none;
							text-align:center;
							float:left;
							color: #303030; 
							font-size: 1em;
							padding:2% 4%;
							}
	#tagline-box-small {display:none;}
		#tagline-box {display: none;}

		#content{display:none;}
		#content-small, #portfolio-content, #about-content, #contact-content, #content-pages{
			width:100%;
			background: url(../images/a.png);
			border-top: 1px solid #ddd; 
			}
			#content-box1-small,#content-box2-small, #content-box3-small{
				padding: 30px 0;
				margin:auto;
				width: 280px;
				}
				#content-box3container-small {margin:auto; width: 260px;}
				#titlebox-small{ 
				width: 100%; 
				margin-bottom:10px;
				text-align:center;
				}
					.index-title-small {
						color: #984806; 
						font-size:1.5em; 
						text-align:center;
						font-family: Helvetica, Arial, sans-serif;
						margin: 1% 0;
						}
					.recentwork-content-small, .lastfm-content-small, .instagram-pic-small {width:100%; margin: auto;}
					#content-box2-small ul li {
						border-bottom: 1px solid #ccc; 
						padding: 3px 0;
						list-style:none;
						}
					.instagram-pic-small {
						border: none; 
						overflow:hidden; 
						width:271px; 
						height: 813px;
						margin:0px 0px;
						margin-left:10px; 
						}
						.media-grid a {border: 1px solid black; padding: 1px; }

	#footer-big {display:none;}				
	#footer-small { 
		background: #303030; 
		min-height: 60px;}
				#social-box-small {
				display: block;  
				margin: auto;
				max-width: 361px;}
				.footer-menu-small {margin-top:16px ;}
					.social-media {			
							list-style-type:none;
							display:block;
							float:left;
							margin: 0 0 1px 0;
							padding: 3px 20px;
							font-size:1.1em;
							font-family:"nudista-web-1","nudista-web-2","Helvetica Neue",Arial,sans-serif;
							}
							.facebooki { background:url(../images/sprites.png) no-repeat scroll 0 0 transparent; }
							.linkedini { background:url(../images/sprites.png) no-repeat scroll -115px 0 transparent; }
							.instagrami { background:url(../images/sprites.png) no-repeat scroll -230px 0 transparent; }
							.lastfmi { background:url(../images/sprites.png) no-repeat scroll -345px 0 transparent; }
			
							.social-media a {  }	/* SET */
							.social-media a:link { color: #a0a0a0; font-size: 1.1em; text-decoration:none;outline: none; }	/* SET */
							.social-media a:visited { color: #a0a0a0; font-size: 1.1em; text-decoration:none;outline: none;  }	/* SET */
							.social-media a:hover { color: #fbfbfb; text-decoration: none; }	/* SET */
							.social-media a:active { color: #a0a0a0; font-size: 1.1em; text-decoration:none;outline: none;  }	/* SET */  	
		
		
		#footer-copyright-small{
				display:block;
				width:80px; 
				margin:auto;
				padding:10px;
				color:#fbfbfb;
				}
}


@media only screen and (max-width: 362px) {
	#social-box-small{ width: 183px;}
	}
/*-----Contact page-----*/
	.page-title {
		display:block; 
		font-size:3em;
		text-align:center;
		margin: 1.1em 0 0 0;
		color: #303030;
		font-family: Helvetica, "Times New Roman", Times, serif;
		font-weight:600;
		}
			.page-sub-title {max-width: 15em; margin:auto;}
	#contact-leftbox{
		float:left;
		padding:0 40px 40px 40px;}
		label.label-short{
			display: block;
			font-size:1.7em;
			color: #303030;
			max-width:200px; 
			padding:5px 5px 5px 0; 
			}
			.text,.text-qa{
				background:#ddd;
				width:350px;
				max-width:350px;
				border: 1px inset white;
				margin-bottom:15px;
				color:#fff;
				font-size:1.4em;
				padding: 0 0 0 3px;
				}
			.text{height: 25px;}
			textarea.text-qa{height: 200px;}
			input#contact-submit.submit{
				background: url(../images/submitbutton.png);
				width:98px;
				height:39px;
				border:none;
				text-indent: 8000px;
				cursor: pointer;
				float:right;
				 }
				 input#contact-submit.submit:hover{	
				 background-position: center bottom;
}
	#contact-rightbox{
		float:right;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		padding: 0 25px;
		margin: 34px 100px 0 40px;
		}
		#contactbox1,#contactbox2{margin:30px 0;}
			.contact-titles{
				font-size:1.4em;
				padding: 0 0 5px 0;
				}
	#contact-submission{
		padding: 100px;
		text-align:center;
		font-size:2.2em;
		}
			
/*-----Portfolio page-----*/	

.portfolio-box1, .portfolio-box2 {
	margin: 30px auto; 
	max-width:700px;
	padding: 10px;
	overflow: hidden;
	}	
	.portfolio-client { border: 1px solid #ddd; width: 100%;}
		
	.portfolio-subbox1, .portfolio-subbox2 {max-width:700px; padding:10px 0; }
	
		.portfolio-description {
			list-style: none;
			font-size: 1.2em; 
			display:block;
			}
			.portfolio-description a {font-size:1em;  }
			ul.portfolio-description li {margin:8px 0;}
			
			
/*-----About page-----*/			
		#aboutcontainer {
			max-width:900px; 
			margin:0 auto; 
			float:none;
			overflow: hidden;
		}
		#about-topbox {
			float:left;
			max-width: 50%;
			}
		#bio-picbox{
			max-width:350px;
			margin: 30px;
			float: left;}
		.about-pic{ 
			border: 1px solid #BBBBBB;
			width:100%; 
			height: auto; 
			float: left;
			}
			#about-rightbox { width: 380px; float:left; margin: 0 30px;}	
				#biobox{
					text-align:justify; 
					font-size: 1.4em;
					margin: 17px 0;
					float:left;
					padding:0 3%;
					}
					.aboutbio{
						margin: 3% 0;  
						}
				#skillbox{
					padding:3%;
					clear:both;
					}
					#skillbox ul li {
						list-style-type: none;
						display: block;
						float: left;
						margin-right:5%;
						font-size:1.3em;
						}
						#skillbox ul li.last {margin:0;}
					.h2title{
					color: #984806; 
					font-size:1.6em; 
					text-align:left;
					font-family: Helvetica, Arial, sans-serif;
					text-transform:uppercase;
					}
@media only screen and (max-width: 825px) {
	#about-topbox, #aboutcontainer { max-width: 350px; margin: auto;}
	}