/*font-family: canada-type-gibson,sans-serif;
Gibson Heavy
font-weight: 900;
Gibson Bold
font-weight: 700;
Gibson SemiBold
font-weight: 600;
Gibson Book
font-weight: 300;
Gibson Light
font-weight: 200;*/

body {
	margin: 0; padding: 0;
	font-family: canada-type-gibson, Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 10pt;
	color: #222629;
	/*background: #d9f3fd url(images/bg.png) repeat top left;*/
	background-color: #ffffff;
	}

h1, h2, h3, h4, h5, h6, p, a, ul, ol, table, form { margin: 0; padding: 0; }

a:link, a:visited {
	color: #808991;
	text-decoration: none;
	}
	a:hover { text-decoration: underline; }

a img { border: none; }

abbr { cursor: help; }

strong { font-weight: 600; }

#header {
	/*margin: 65px 90px 70px 90px;*/
	margin: 5% 5% 3% 5%;
	text-align: center;
	}
	#header .mark {
		padding-bottom: 20px;
		text-align: center;
		}
	#header h2 {
		font-weight: normal;
		font-size: 200%;
		text-align: center;
		padding-top: 15px;
		}
	#header p {
		font-weight: 200;
		font-size: 175%;
		line-height: 1.6em;
		text-align: left;
		margin: 20px 0px;
		}
		#header #more-bio {
			font-size: 75%;
			}
			/*#header #more-bio p {
				text-align: justify !important;
				-webkit-hyphens: auto;
				-moz-hyphens: auto;
        	    -ms-hyphens: auto;
				hyphens: auto;
				font-weight: 300;
				}*/
		#header #less-link {
			text-align: center;
			font-size: 75%;
			display: block;
			}
		#header #more-link {
			text-align: center;
			font-size: 75%;
			display: block;
			}
			#header a#more-link:hover, #header a#less-link:hover {
				text-decoration: none;
				color: #72598E;
				}
			#header #more-link span, #header a#less-link span {
				vertical-align: sub;
				}

#nav {
	position: absolute;
	margin-top: 15px;
	}
	#nav a img {
		width: 40px;
		height: 40px;
		}

.clear { clear: both; }

.section {
	/*border-top: 15px solid #eaf9ff;*/
	}
	.section hr {
    	border: 0;
    	height: 1px;
    	background-image: linear-gradient(to right, rgba(219, 205, 235, 0), rgba(219, 205, 235, 0.75), rgba(219, 205, 235, 0));
	    margin: 80px 0px 60px 0px;
		}
		
	/*.section hr {
	    padding: 0;
	    border: none;
	    border-top: medium double #8e7659;
	    color: #8e7659;
	    text-align: center;
	    margin: 80px 0px 60px 0px;
		}
		.section hr:after {
	    	content: "§";
	    	display: inline-block;
	    	position: relative;
	    	top: -0.7em;
	    	font-size: 1em;
	    	padding: 0 0.25em;
	    	background: transparent;
			}*/
	.section h2 {
		text-transform: uppercase;
		font-weight: normal;
		margin-bottom: 30px;
		}
		.section h2 a:link, .section h2 a:visited {
			color: #394043; color: #30200d;
			}
			.section h2 a:hover {
				text-decoration: none;
				color: #0075a2;
				}
	.section h3 {
		font-weight: normal;
		margin-bottom: 10px;
		font-size: 150%;
		color: #a5b3b8; color: #30200d;
		line-height: 1.3em;
		}
		.section h3.dark {
			color: #394043;
			font-size: 120%;
			margin-top: 30px;
		}
		.section h3 span {
			display: block;
			text-transform: uppercase;
			font-size: 75%;
			font-weight: 200;
			}
		.section h3.seemore {
			font-size: 125%;
			clear: both;
			padding-top: 60px;
			}
			.section h3.seemore.casestudy {
				font-size: 100%;
				clear: none;
				padding-top: 20px;
				display: inline-block;
				}
					.section h3.seemore.casestudy.last {
						margin-right: 0px;
						}
				.section h3.seemore.casestudy a {
					width: 170px;
					}
			.section.wines h3.seemore {
				padding-top: 40px !important;
				}
			
	.section p {
		font-size: 110%;
		line-height: 1.8em;
		text-align: left;
		margin: 15px 0px;
		}
		p.meta-link {
			padding-top: 30px;
			}
	.sub-section {
		/*width: 600px;*/
		width: 75%;
		min-width: 300px;
		max-width: 950px;
		margin: 0 auto;
		}
		#header .sub-section { width: 60%; }
		#header .intro { text-align: center; }
			.intro p { text-align: center !important; }
		.portfolio-description p {
			text-align: center;
			line-height: 1.3em;
		/*	-webkit-hyphens: auto;
			-moz-hyphens: auto;
        	-ms-hyphens: auto;
			hyphens: auto;*/
			}
		p.portfolio-credits {
			text-align: center !important;
			margin-top: 20px;
			font-style: italic;
			font-size: 1em !important;
			}
		.portfolio-thumbnail img.web {
			/*width: 565px;
			height: 333px;*/
			width: 120%;
			}
		.portfolio-thumbnail img.app {
			/*width: 423px;
			height: 412px;*/
			width: 100%;
			}


body.portfolio .sub-section {
	width: 100%;
	max-width: 1200px;
	}
	body.portfolio .sub-section h2 span {
		display: block;
		margin-top: 5px;
		line-height: 3em;
		border-top: 1px solid #DBCDEB;
		border-bottom: 1px solid #DBCDEB;
		text-transform: none;
		}
.portfolio-hero {
	margin: 0px !important;
	padding: 0px !important;
	}
	.portfolio-hero img {
		width: 100%;
		height: 100%;
		}
	.portfolio-hero-tall { text-align: center !important; }
	.portfolio-hero-tall img {
		width: 75%;
		height: 75%;
		}
.portfolio-identity-section {
	width: 100%;
	background-color: #fff;
	padding: 30px 0px 20px 0px;
	text-align: center !important;
	margin: 50px 0px 30px 0px !important;
	border-top: 1px solid #d1d1d1;
	border-bottom: 1px solid #d1d1d1;
	}
	.portfolio-identity-section img {
		width: 90%;
		height: 90%;
		}
		
.portfolio h4 {
	font-weight: 500;
	color: #72598E;
	text-align: left;
	font-size: 110%;
	}
	
.portfolio ol {
	text-align: left;
	margin: 20px 0px 40px 15px;
	line-height: 1.3em;
	font-size: 110%;
	}
	.portfolio ol li {
		padding: 12px 0px 12px 12px;
		}
		.portfolio ol li ul {
			margin: 0px 0px 0px 20px;
			}

.inline-nav {
	list-style: none;
	text-transform: lowercase;
	font-size: 1.2em;
	margin-bottom: 30px;
	}
	.inline-nav li {
		display: inline-block;
		margin-right: 25px;
		}
		.inline-nav li i {
			font-size: 60%;
			color: #BA4848;
			}
			.inline-nav li i.fa-lock-open {
				font-size: 60%;
				color: #7AB86F;
				}
		.inline-nav li:last-child {
			margin-right: 0px;
			}
		.inline-nav li.about a.about, .inline-nav li.work a.work {
			color: #121315;
			border-bottom: 1px solid #121315;
			}
		.inline-nav li a:hover {
			text-decoration: none;
			color: #121315;
			}

.social { text-align: center !important; }
.social img {
	opacity:0.4;
	filter:alpha(opacity=40); /* For IE8 and earlier */
	}
	.social img:hover {
		opacity:1.0;
		filter:alpha(opacity=100); /* For IE8 and earlier */

		}
.social a {
	display: inline-block;
	border-bottom: 1px solid #ffffff;
	color: #59758E;
	}
		.social a.last {
			margin-right: 0px;
			}
	.social a:hover {
		border-bottom: 1px solid #222629;
		color: #222629;
		}

.footer-meta {
	padding-top: 20px;
	font-size: .9em !important;
	color: #59758E;
	text-align: center !important;
	line-height: 1.2em !important;
	}

.ui-tooltip {
		padding: 10px;
    	color: #222629;
	    border-radius: 4px;
    	font: normal 1em "Quattrocento Sans", Helvetica, Arial, Sans-Serif;
	    text-transform: none;
    	box-shadow: 0 0 8px #848f95;
		}

body.portfolio h1 {
	font-weight: normal;
	font-size: 1.6em;
	padding-bottom: 15px;
	}
body.portfolio h2 {
	font-size: 1.2em;
	}
	body.portfolio h3.toc {
		font-size: 1.2em;
		text-align: left;
		margin-bottom: 0px;
		border-top: 1px solid #E3D4C3;
		margin-top: 20px;
		padding-top: 20px;
		}
	body.portfolio h3 span.toc-meta {
		font-size: 75%;
		text-transform: none;
		vertical-align: 9%;
		display: inline-block;
		}
	body.portfolio h3 span.specialchar {
		text-transform: none;
		display: inline;
	}

body.portfolio h2.mini-toc {
	text-align: left;
	font-size: 100%;
	margin-bottom: 0px;
	}
body.portfolio h3.mini-toc {
	text-align: left;
	text-transform: uppercase;
	margin-bottom: 40px;
	color: #394043;
	font-size: 100%;
	}

h3.seemore a:hover {
	-webkit-transition-duration:0.7s;
	transition-duration: 0.7s;
	}

.tact {
	background-color: #EB6072;
	color: #fff;
	/*background: rgb(255,124,74);
	background: linear-gradient(180deg, rgba(255,124,74,1) 30%, rgba(214,129,206,1) 68%);*/
	}
	.tact a:link, .tact a:visited {
		color: #fff;
		}
	.tact h3.seemore a:link, .tact h3.seemore a:visited {
		color: #fff;
		background-color: #F58796;
		border-color: #F58796;
		}
		.tact h3.seemore a:hover {
			background-color: #C64051;
			border-color: #C64051;
			}

.goodies {
	background-color: #76cccf;
	}
	.goodies .portfolio-description {
		margin-top: 10px;
	}
	.goodies a:link, .goodies a:visited {
		color: #1d7679;
		}
	.goodies h3.seemore a:link, .goodies h3.seemore a:visited {
		color: #fff;
		background-color: #4cabae;
		border-color: #4cabae;
		}
		.goodies h3.seemore a:hover {
			background-color: #2b8e91;
			border-color: #2b8e91;
			}

.wines {
	background-color: #DE583E;
	color: #ffd7cf;
	}
	.wines a:link, .wines a:visited {
		color: #fff;
		}
	.wines h3.seemore a:link, .wines h3.seemore a:visited {
		color: #fff;
		background-color: #EE6D55;
		border-color: #EE6D55;
		}
		.wines h3.seemore a:hover {
			background-color: #B34632;
			border-color: #B34632;
			}

.section.hsu {
	background-color: #d8ae40;
	color: #fff;
	}
	.section.hsu a:link, .section.hsu a:visited {
		color: #fff;
		}
	.section.hsu h3.seemore a:link, .section.hsu h3.seemore a:visited {
		color: #fff;
		background-color: #E8B941;
		border-color: #E8B941;
		}
		.section.hsu h3.seemore a:hover {
			background-color: #8b6a13;
			border-color: #8b6a13;
			}

.branding {
	background-color: #F4F4F4;
	color: #222629;
	}
	.branding a:link, .branding a:visited {
		color: #222629;
		}
	.branding h3.seemore a:link, .branding h3.seemore a:visited {
		color: #222629;
		background-color: #B2C0CD;
		border-color: #B2C0CD;
		}
		.branding h3.seemore a:hover {
			background-color: #9DADBC;
			border-color: #9DADBC;
			}

.yesvideo {
	background-color: #cab6ed;
	color: #555c5f;
	}
	.yesvideo a:link, .yesvideo a:visited {
		color: #101214;
		}
	.yesvideo h3.seemore a:link, .yesvideo h3.seemore a:visited {
		color: #fff;
		background-color: #b299dd;
		border-color: #b299dd;
		}
		.yesvideo h3.seemore a:hover {
			background-color: #9175c0;
			border-color: #9175c0;
			}

body.portfolio .hero {
	font-size: 115%;
	color: #101214;
	line-height: 1.4em;
	}
	body.portfolio .wines .hero, body.portfolio .goodies .hero, body.portfolio .hsu .hero, body.portfolio .tact .hero {
		color: #fff;
		}
	body.portfolio .hero h1 {
		font-weight: normal;
		margin-bottom: 40px;
		line-height: 1.3em;
		}
		body.portfolio .hero h1 span {
			display: block;
			text-transform: uppercase;
			font-size: 75%;
			font-weight: 200;
			}

.fin {
	height: 1px;
	text-align: center;
	margin: 40px 0px;
	background-color: #72598E;
	color: #72598E;
	}
	/*body.portfolio .fin.yv {
		background-color: #d87360;
		color: #d87360;
		}
	body.portfolio .fin.wines {
		background-color: #76cccf;
		color: #76cccf;
		}
	body.portfolio .fin.goodies {
		background-color: #d8ae40;
		color: #d8ae40;
		}
	body.portfolio .fin.hsu {
		background-color: #cab6ed;
		color: #cab6ed;
		}*/
	.fin span {
		background-color: #ffffff;
		position: relative;
		top: -0.6em;
		padding: 0px 15px;
		font-size: 150%;
		text-transform: uppercase;
		}
	.fin.nav {
		background-color: #DBCDEB;
		color: #DBCDEB;
		font-size: 80%;
		}

body.portfolio .teaser {
	float: left;
	width: 46.1%;
	min-height: 100px;
	margin-bottom: 60px;
	text-align: center;
	padding: 2%;
	}
	body.portfolio .teaser h3 {
		font-weight: normal;
		margin-bottom: 40px;
		font-size: 150%;
		color: #fff;
		line-height: 1.3em;
		}
		body.portfolio .teaser h3 span {
			display: block;
			text-transform: uppercase;
			font-size: 75%;
			}


.random-section {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	background-color: #000;
	}

.other-works a, .other-works-tact a {
	float: left;
	width: 25%;
	min-height: 150px;
	text-decoration: none;
	line-height: 1.4em;
	}

	.other-works span, .other-works-tact span {
		position: relative;
		width: 100%;
		min-height: 200px;
		display: block;
		opacity: 0.3;
		}
		.other-works span:hover, .other-works-tact span:hover {
			-webkit-transition-duration:0.6s;
			transition-duration: 0.6s;
			opacity: 1.0;
			}

	.other-works button, .other-works-tact button {
		position: absolute;
    	padding: 10px 20px;
    	margin: 0 40%;
    	cursor: pointer;
    	top: 40%;
	    border: 2px solid #fff;
    	text-transform: uppercase;
    	color: #fff;
    	background-color: rgba(0,0,0,0.5);
	    letter-spacing: 1px;
    	font-weight: bold;
		}

	.other-works.pasture a:link, .other-works.pasture a:visited {
		color: #10749a;
		background-color: #000;
		}
		.other-works.pasture span {
			background: transparent url("/images/portfolio/other/pasture-thumb.jpg") 40% 90% no-repeat;
			background-size: cover;
			}
		.other-works.pasture span.under {
			background: transparent url("/images/portfolio/other/pasture-thumb.jpg") 40% 90% no-repeat;
			background-size: cover;
			}
	.other-works.type a:link, .other-works.type a:visited {
		color: #f7931e;
		background-color: #000;
		}
		.other-works.type span {
			background: transparent url("/images/portfolio/other/type-poster-thumb.jpg") 0% 43% no-repeat;
			background-size: cover;
			}
	.other-works.descender a:link, .other-works.descender a:visited {
		color: #231f20;
		background-color: #000;
		}
		.other-works.descender span {
			background: transparent url("/images/portfolio/other/descender-thumb.jpg") 0% 50% no-repeat;
			background-size: cover;
			}
	.other-works.ambassadors a:link, .other-works.ambassadors a:visited {
		color: #5b6554;
		background-color: #000;
		}
		.other-works.ambassadors span {
			background: transparent url("/images/portfolio/other/hsu-ambassadors-thumb.jpg") 50% 50% no-repeat;
			background-size: cover;
			}
	.other-works.macy a:link, .other-works.macy a:visited {
		color: #fff;
		background-color: #000;
		}
		.other-works.macy span {
			background: transparent url("/images/portfolio/other/macy-painted-thumb.jpg") 0% 50% no-repeat;
			background-size: cover;
			}
	.other-works.mag-feature a:link, .other-works.mag-feature a:visited {
		color: #3a1e0c;
		background-color: #000;
		}
		.other-works.mag-feature span {
			background: transparent url("/images/portfolio/other/mag-feature.jpg") 0% 50% no-repeat;
			background-size: cover;
			}
	.other-works.propaganda a:link, .other-works.propaganda a:visited {
		color: #4c0907;
		background-color: #000;
		}
		.other-works.propaganda span {
			background: transparent url("/images/portfolio/other/propaganda.jpg") 0% 80% no-repeat;
			background-size: cover;
			}
	.other-works.drawing a:link, .other-works.drawing a:visited {
		color: #231f20;
		background-color: #000;
		}
		.other-works.drawing span {
			background: transparent url("/images/portfolio/other/drawing.jpg") 0% 80% no-repeat;
			background-size: cover;
			}
	.other-works.hsugreen a:link, .other-works.hsugreen a:visited {
		color: #231f20;
		background-color: #000;
		}
		.other-works.hsugreen span {
			background: transparent url("/images/portfolio/other/green-scene-thumb.jpg") 50% 50% no-repeat;
			background-size: cover;
			}
	.other-works.explore a:link, .other-works.explore a:visited {
		color: #231f20;
		background-color: #000;
		}
		.other-works.explore span {
			background: transparent url("/images/portfolio/other/explore-thumb.jpg") 50% 50% no-repeat;
			background-size: cover;
			}
	.other-works.kra a:link, .other-works.kra a:visited {
		color: #231f20;
		background-color: #000;
		}
		.other-works.kra span {
			background: transparent url("/images/portfolio/other/kra-thumb.jpg") 50% 50% no-repeat;
			background-size: cover;
			}
	.other-works.admissions a:link, .other-works.admissions a:visited {
		color: #231f20;
		background-color: #000;
		}
		.other-works.admissions span {
			background: transparent url("/images/portfolio/other/admissions-thumb.jpg") 50% 50% no-repeat;
			background-size: cover;
			}
	.other-works.membeers a:link, .other-works.membeers a:visited {
		color: #231f20;
		background-color: #000;
		}
		.other-works.membeers span {
			background: transparent url("/images/portfolio/other/mem-beers-thumb.jpg") 50% 50% no-repeat;
			background-size: cover;
			}
	.other-works.memmeals a:link, .other-works.memmeals a:visited {
		color: #231f20;
		background-color: #000;
		}
		.other-works.memmeals span {
			background: transparent url("/images/portfolio/other/mem-meals-thumb.jpg") 50% 50% no-repeat;
			background-size: cover;
			}
	.other-works.pfi a:link, .other-works.pfi a:visited {
		color: #231f20;
		background-color: #000;
		}
		.other-works.pfi span {
			background: transparent url("/images/portfolio/other/pfi-thumb.jpg") 50% 50% no-repeat;
			background-size: cover;
			}
	.other-works.giving a:link, .other-works.giving a:visited {
		color: #231f20;
		background-color: #000;
		}
		.other-works.giving span {
			background: transparent url("/images/portfolio/other/hsu-giving-thumb.jpg") 50% 50% no-repeat;
			background-size: cover;
			}




	.other-works-tact.android a:link, .other-works-tact.android a:visited {
		color: #231f20;
		background-color: #000;
		}
		.other-works-tact.android span {
			background: transparent url("/images/portfolio/other-tact/android-thumb.jpg") 50% 50% no-repeat;
			background-size: cover;
			}
	.other-works-tact.website a:link, .other-works-tact.website a:visited {
		color: #231f20;
		background-color: #000;
		}
		.other-works-tact.website span {
			background: transparent url("/images/portfolio/other-tact/website-thumb.jpg") 50% 50% no-repeat;
			background-size: cover;
			}
	.other-works-tact.fcd a:link, .other-works-tact.fcd a:visited {
		color: #231f20;
		background-color: #000;
		}
		.other-works-tact.fcd span {
			background: transparent url("/images/portfolio/other-tact/fcd-thumb.jpg") 50% 50% no-repeat;
			background-size: cover;
			}
	.other-works-tact.assistant a:link, .other-works-assistant.fcd a:visited {
		color: #231f20;
		background-color: #000;
		}
		.other-works-tact.assistant span {
			background: transparent url("/images/portfolio/other-tact/assistant-thumb.jpg") 50% 50% no-repeat;
			background-size: cover;
			}




h3.seemore a:link, h3.seemore a:visited {
	width: 120px;
	/*height: 100px;*/
	padding: 15px 40px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	display: inline-block;
	}
	h3.seemore a:hover {
		text-decoration: none;
		}


/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
	padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
	top: 0;
	bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
	padding: 0;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0.001; /* chrome opacity transition bug */
	-webkit-backface-visibility: hidden;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
		opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
		opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}

#more-bio img, .intro img, img.headshot {
	width: 160px;
	height: 160px;
	margin: 0 auto 30px auto;
    display: block;
	}

body.portfolio .sub-section.hero a:link, body.portfolio .sub-section.hero a:visited {
	text-decoration: underline;
	}

.video {
	width: 100%;
	background-color: #000;
	text-align: center;
	margin: 40px 0px 20px 0px;
	}
	.video video {
		cursor: pointer;
		width: 100%;
		height: 100%;
		}

.blog {
	font-size: 1.1em !important;
}
.blog .sub-section {
	width: 55%;
	padding-top: 20px;
}
.blog p {
	margin: 20px 0px;
}
.blog p.byline {
	text-align: center;
	font-size: 90%;
	margin: 0;
	padding: 20px 0px 0px 0px;
}
.blog blockquote {
	line-height: 1.8em;
	text-align: left;
	margin: 15px;
	border-left: 2px solid #8e7659;
	padding-left: 15px;
	font-style: italic;
}
.blog h2 a:link, .blog h2 a:visited {
	cursor: pointer;
	color: #8e7659;
}
.blog h2 a:hover {
	text-decoration: underline;
}
.blog h2 abbr {
	color: #8e7659 !important;
}

.blog h3 {
	text-align: left;
	text-transform: none;
	font-size: 140%;
	color: #30200d;
	margin-top: 60px;
}
.blog h3.archiveyear {
    border-top: 1px solid #8e7659;
    border-bottom: 1px solid #8e7659;
    padding: 10px 10px;
    margin-top: 25px;
    margin-bottom: 0px;
    text-align: center;
    }

.blog h4 {
	text-align: left;
	text-transform: none;
	font-size: 115%;
	color: #72598E;
	margin-top: 45px;
}

.blog h5 {
	text-align: left;
	text-transform: none;
	font-size: 100%;
	color: #30200d;
	margin-top: 20px;
}

.blog ul, .blog ol {
	text-align: left;
	margin: 15px 0px;
	margin-left: 25px;
}
.blog li {
	line-height: 1.8em;
	padding: 5px 0px;
	}
	.blog ul li {
		list-style-type: circle;
	}
.blog p img {
	display: block;
	margin: 0 auto;
	/*border: 1px solid #8e7659;*/
    max-width: 100%;
}


#footer form, form.login {
	width: 50%;
	margin: 40px auto 30px auto;
	font-size: 90%;
	}
	#footer form h3, form.login h3 {
		font-size: 130%;
		color: #30200d;
		margin: 0 0 8px 0;
		padding: 0;
		}
	#footer form p, form.login p {
		text-align: center;
		margin: 0 0 8px 0;
		padding: 0;
		}
		form.login p.error {
			text-color: #BA4848 !important;
			}
	#footer form input, form.login input {
		border: 1px solid #72598E;
		border-radius: 6px;
		padding: 6px 10px;
		display: inline-block;
		margin: 6px 12px 6px 0px;
		font-size: 120%;
		}
		form.login input {
			margin-left: 0px;
			}
		#footer form input.submit-button, form.login input.submit-button {
			background-color: #59758E !important;
			color: #fff !important;
			text-align: center !important;
			padding: 12px 18px;
			}
			#footer form input.submit-button:hover, form.login input.submit-button:hover {
				color: #fff !important;
				background-color: #222629 !important;
				cursor: pointer;
				}
	#footer form label, form.login label {
		display: none;
		font-size: 90%;
	}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #DBE2E9;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #DBE2E9;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #DBE2E9;
}


table {
	width: 100%;
	text-align: left;
	margin: 40px auto;
	}
	td {
		padding: 16px 0px 16px 10px;
		border-bottom: 1px solid #F2E9FC;
		vertical-align: top;
		}
		td span {
			font-weight: 200;
			color: #808991;
			font-style: italic;
			font-size: 85%;
			}
		tr:first-child td {
			border-top: 1px solid #F2E9FC;
			}
		tr.combine td {
			border-bottom: none;
			padding: 8px 0px 8px 10px;
			}
			tr.combine:first-child td {
				padding-top: 16px;
				}
			tr.combine:last-child td {
				padding-bottom: 16px;
				}
		tr.extended td {
			border-bottom: none;
			}
		tr:nth-child(odd) {
			background-color: #FBF7FF;
			}
		td.extended {
			color: #3D464F;
			font-style: italic;
			padding: 0px 30px 16px 30px;
			font-size: 90%;
			}	
			
			
			
			
.testimonial {
	width: 90%;
	margin: 80px auto 20px auto;
	}
	.portfolio .testimonial {
		margin-top: 40px;
		padding-top: 40px;
		border-top: 1px solid #B2C0CD;
		}
		.portfolio .testimonial.hsu {
			margin-top: 0px;
			border-top: none;
			}
	.testimonial img {
		float: left;
		margin: 10px 30px 100px 0px;
		width: 100px;
		height: 100px;
		}
	.testimonial p {
		font-style: italic;
		line-height: 1.5em;
		font-size: 100%;
		text-align: center;
		}
		.testimonial p.attribution {
			font-style: normal;
			}
		.testimonial p i {
			color: #CBAAF0;
			}
		.testimonial p span {
			color: #808991;
			display: block;
			}
			
			
ul.case-studies {
	list-style: none;
	}
		ul.case-studies li.last-child {
			margin-right: 0px;
			}
			ul.case-studies li a {
				display: inline-block;
				padding: 40px;
				border-radius: 10px;
				color: #EB6072;
				}
				ul.case-studies.yv li a {
					color: #5A3C8E;
					}
				ul.case-studies li a:hover {
					text-decoration: none;
					background-color: #F2E9FC;
					background-color: #EB6072;
					color: #fff;
					}
				ul.case-studies.yv li a:hover {
					background-color: #F2E9FC;
					color: #5A3C8E;
					}
		
		
.hero h3 {
	font-size: 100%;
	margin-top: 0px;
	padding-top: 0px;
	}



@media screen and (min-width: 320px) {


	.section.tact img.web {
		margin-top: 20px;
		margin-bottom: 40px;
		}
		
		
				.section h3.seemore.casestudy {
					margin-right: 0px;
					}

	#header h2 {
		font-size: 150%;
		text-align: center;
		}
	#header p {
		font-size: 125%;
		margin-right: 15px;
		}
	#header .mark img {
		width: 175px;
		height: 16px;
		}
	.section {
		text-align: center;
		padding: 5.5% 5% 5% 5%;
		font-size: 100%;
		}
		.section.work-open {
			border-top: 1px solid #F2E9FC;
			}
		.section.nav {
			padding: 40px 0 0 0;
			}
		#footer.section, .section.login {
			background-color: #FBF7FF;
			border-top: 1px solid #F2E9FC;
			border-bottom: 2px solid #F2E9FC;
			}
		body.portfolio .section {
			padding: 5.5% 0 5% 0;
			}
		body.portfolio .section.nav {
			padding: 40px 0 0 0;
			}
		body.portfolio #header {
			margin: 5% 5% 3% 5%;
			}
		.seemore {
			text-align: center !important;
			margin-bottom: 30px !important;
			}
	.sub-section {
		width: 100%;
	}
    .blog .sub-section {
       width: 100%;
     }
	.portfolio-section {
		width: 100%;
		max-width: 850px;
		margin: 0 auto;
		}
	.portfolio-section .right, .portfolio-section .left {
		width: inherit;
		float: none;
		}
		.portfolio-thumbnail.left {
			position: relative;
			left: 0px;
			}

	.portfolio-thumbnail { margin-top: 10%; }

	.portfolio-thumbnail img.web {
		/*width: 565px;
		height: 333px;*/
		width: 100%;
		}

	#footer { text-align: center; font-size: 90% }

	.social a { 
		display: inline-block;
		margin-right: 25px; 
		font-size: 140%;
		}
	.social img {
		width: 30px;
		height: 30px;
		}

	body.portfolio .sub-section {
		max-width: 300px;
		}

	body.portfolio .teaser {
		padding-top: 40px;
		font-size: 50%;
		min-height: 125px;
		}

.teaser h3.seemore a:link, .teaser h3.seemore a:visited {
	width: 50px;
	height: 50px;
	padding: 5px 20px;
	}

.other-works a {
	width: 100%;
	}

.fin {
	margin-bottom: 80px;
	}
	body.portfolio .fin {
		margin-bottom: 40px;
		}


	.video video {
		min-height: 10px;
		}


			
ul.interests {
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	list-style-type: none;
	margin: 20px 0px 20px 0px;
	}
	ul.interests li {
		width: 100%;
		margin-top: 8px;
		padding: 12px 0;
		}
		ul.interests li:nth-child(odd) {
			margin-right: 0px;
			}
		ul.interests li span {
			font-weight: 600;
			}
			
			
		
.work-open h3.seemore.primary, .work-open h3.seemore.secondary {
	display: inline-block;
	}
.work-open h3.seemore.primary a, .work-open h3.seemore.secondary a {
	width: 100px;
	}
	
.work-open h3.primary {
	padding-top: 0px;
	}
.work-open h3.seemore.secondary a {
	padding-top: 8px;
	}
.work-open h3.seemore.primary a:link, .work-open h3.seemore.primary a:visited {
	color: #fff;
	background-color: #59758E;
	border-color: #59758E;
	}
	.work-open h3.seemore.primary a:hover {
		background-color: #222629;
		border-color: #222629;
		}

.work-open h3.seemore.secondary a:link, .work-open h3.seemore.secondary a:visited {
	color: #59758E;
	background-color: #DBE2E9;
	border-color: #DBE2E9;
	margin-right: 0px;
	}
	.work-open h3.seemore.secondary a:hover {
		background-color: #B2C0CD;
		border-color: #B2C0CD;
		}
	.work-open h3.seemore.secondary i {
		font-size: 70%;
		}
		
.testimonial {
	margin-top: 40px;
	}		
				
	ul.interests.skills {
		list-style-type: circle;
		margin-left: 60px;
		}
		ul.interests.skills li {
			width: 75%;
			padding-bottom: 6px;
			}
			ul.interests.skills li:nth-child(odd) {
				margin-right: 0px;
				}
				
	
	ul.case-studies li {	
		display: inline-block;
		width: 90%;
		margin-right: 0px;
		margin-bottom: 20px;
		border: 1px solid #EB6072;
		border-radius: 10px;
		background-color: #fff;
		filter: drop-shadow(0px 0px 10px #DBE2E9);
		}
		ul.case-studies.yv li {
			border: 1px solid #5A3C8E;
			color: #5A3C8E;
			}


}

@media screen and (min-width: 560px) {


	.section.tact img.web {
		margin-top: 80px;
		margin-bottom: 0px;
		}

	.section h3.seemore.casestudy {
		margin-right: 20px;
		}
					
					
	ul.case-studies li {	
		width: 30%;
		margin-right: 20px;
		margin-bottom: 0px;
		}

.work-open h3.seemore.secondary a:link, .work-open h3.seemore.secondary a:visited {
	margin-right: 30px;
	}
	
.work-open h3.primary {
	padding-top: 60px;
	}
		
.testimonial {
	margin-top: 80px;
	}		
				
	ul.interests.skills {
		list-style-type: circle;
		margin-left: 60px;
		}
		ul.interests.skills li {
			width: 33%;
			}
			ul.interests.skills li:nth-child(odd) {
				margin-right: 0px;
				}


	body {
		/*border-top: 20px solid #eaf9ff;*/
		}
	#header h2 {
		text-align: center;
		font-size: 180%;
		}
	#header p {
		font-size: 125%;
		margin-right: 0px;
		}
	#header .mark img {
		width: 30%;
		height: 30%;
		}
	.section {
		padding: 4% 0%;
		text-align: center;
		font-size: 120%;
		}
		.section.wines {
			padding: 2% 0%;
			}
		.seemore {
			margin-bottom: 0px;
			}
	.sub-section {
		width: 90%;
	}
    .blog .sub-section {
       width: 90%;
     }

	.portfolio-section {
		/*width: 960px;*/
		width: 75%;
		margin: 0 auto;
		}
	.portfolio-section .right {
		float: right; width: 50%;
		}
	.portfolio-section .left {
		float: left; width: 50%;
		}
	.portfolio-thumbnail img.web {
		/*width: 565px;
		height: 333px;*/
		width: 120%;
		}

	.portfolio-thumbnail img.web, .portfolio-thumbnail img.app {
		margin-top: 10%;
		}
		.portfolio-thumbnail.left img.app {
			position: relative;
			left: -50px;
			margin-top: 15%;
			}
		.portfolio-thumbnail.left img.web {
			position: relative;
			left: -80px;
			margin-top: 20%;
			}


	.portfolio-thumbnail { margin-top: 0; }

	.portfolio-description {
		font-size: 70%;
		padding-top: 40px;
		}

	#footer { font-size: 110% }

	.social a { 
		display: inline-block;
		margin-right: 25px; 
		font-size: 160%;
		}
	.social img {
		width: 30px;
		height: 30px;
		}

	body.portfolio .sub-section {
		max-width: 708px;
		}

	body.portfolio .teaser {
		font-size: 100%;
		}

.teaser h3.seemore a:link, .teaser h3.seemore a:visited {
	width: 200px;
	height: 100px;
	padding: 15px 40px;
	}

.other-works a {
	width: 50%;
	}


	.video video {
		min-height: 400px;
		}
			
ul.interests {
	margin: 20px 0px 20px 40px;
	}
	ul.interests li {
		width: 48%;
		}
		ul.interests li:nth-child(odd) {
			margin-right: 20px;
			}
				

}

@media screen and (min-width: 1024px) {

	#header p {
		font-size: 160%;
		}
	.sub-section {
		width: 75%;
	}
    .blog .sub-section {
       width: 55%;
     }
	.portfolio-description {
		font-size: 100%;
		padding-top: 0px; 
		}
	.portfolio-thumbnail img.web {
		margin-top: 20px;
		}
	.portfolio-thumbnail.left img.app {
		left: -80px;
		margin-top: 30px;
		}
	.portfolio-thumbnail.left img.web {
		left: -80px;
		margin-top: 40px;
		}
	.portfolio-thumbnail img.app {
		margin-top: 0;
		}
	.portfolio-section h2 {
		margin-bottom: 60px;
		}
	.portfolio-section h3 {
		margin-top: 30px;
		}
	.social img {
		width: 30px;
		height: 30px;
		}

	body.portfolio .sub-section {
		max-width: 964px;
		}

	body.portfolio .teaser {
		width: 46%;
		}

.other-works a {
	width: 25%;
	}

.fin {
	margin-bottom: 40px;
	}
	
	


	.section.tact img.web {
		margin-top: 80px;
		margin-bottom: 0px;
		}


}

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


.portfolio-description {
	width: 80% !important;
	margin: 0 auto;
}
	
}