@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Voltaire);
@font-face {
    font-family: 'discoregular';
    src: url('DISCO___-webfont.eot');
    src: url('DISCO___-webfont.eot?#iefix') format('embedded-opentype'),
         url('DISCO___-webfont.woff') format('woff'),
         url('DISCO___-webfont.ttf') format('truetype'),
         url('DISCO___-webfont.svg#discoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* =Clearfix -----------------------------------------------------------*/
.clear { clear: both; }
.clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; }/* ----- clear fix for floats ----- */
.clearfix { display:inline-block; }
* html .clearfix { height:1%; }/* hides clearfix from IE-mac */
.clearfix { display:block; }/* end hide from IE-mac */

/* =Preloader ----------------------------------------------------------------------------*/
#preloader { position:absolute; top:0; left:0; right:0; bottom:0; background-color:#1b1c1e; z-index:99; }
#status { width:200px; height:200px; position:absolute; left:50%; top:50%; background-image:url(../img/ajax-loader.gif); background-repeat:no-repeat; background-position:center; margin:-100px 0 0 -100px; }

/**** Typography *****/

html,body{
  height: 100%;
}
body { 
  background: #1b1c1e url(../img/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg', sizingMethod='scale')";	
	font: 18px 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; 
	color:#999; 
}
#body-wrapper{
 background:url(../img/grid.png) repeat;
 min-height: 100%;
 overflow: visible;
}
.underline { text-decoration:underline;}
strong { font-weight:bold; }
a, a > * {-webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
.title p {font-size:15px; color:#a3a3a3; padding:0px 20px 0px 20px; font-weight:400; }
p span {color:#fc6f1a; font-style:italic;}
ul { padding-bottom: 12px;}
p, .tallBox ul { line-height:1.5; letter-spacing:1px }
ul.education li { font-size:14px; line-height: 1.3;}
p {font-size: 18px;}
a { color:#c7c7c7; text-decoration:none; }
a:hover { text-decoration:none; color:#119bb0; }


/* =Headings---------------------------------------------------------------------------*/
#logo-container { width:100%; background-color:rgba(255, 255, 255, 0.6) !important; text-align:center;}
h1, h4 {font-family: 'Voltaire', sans-serif;}
h1 { display:inline-block; color:#242527; font-size:60px; font-weight:700; text-decoration:none; letter-spacing:-1px; margin:0 auto; padding-top:35px; margin-bottom:0px;  }
h2 { padding:0px 20px 10px 0px; font-size:28px; text-transform:none; font-weight:700; color:#c7c7c7;}
.slogan { font-family: 'discoregular', 'Open Sans', Arial, Helvetica, sans-serif; color:#222; font-size:22px; padding:0; margin-top:2px; line-height:11px; letter-spacing:0; }
.design h2 {padding-bottom:23px; }
h3 { font-size:18px; font-weight:300; color:#999; padding:14px 50px 34px 40px; }
h4 { font-size:20px; font-weight:400; color:#c7c7c7;}
h5 { font-family: 'discoregular', 'Open Sans', Arial, Helvetica, sans-serif; font-size:13px; color:#c7c7c7; }
.title h4 { color:#1b1c1e; padding:21px 20px 3px 20px; line-height:1; letter-spacing:-1px }

/* =Main Content ----------------------------------------------------------------------*/
#wrapper { margin-top:0px; width:100%; /*height:221px;*/ position:relative; z-index:29; margin-bottom:29px;}
.container { padding:0px; width:960px; position:relative; margin:0 auto;}
#container { padding-bottom:80px;}
.element { background-color: rgba(16, 16, 16, 0.3);
}
.element.photography{ background-color: transparent;}
.col1-1 { width:938px; margin:10px; border:1px solid #47484b; }
.col1-1.no-border {width:940px; border:0; }
.col1-3 { width:300px; height:300px; margin:10px; float:left; }
.col1-3.border { width:298px; height:298px; margin:10px; float:left; border:1px solid #47484b; }
.tallBox.col1-3.border { height: 618px;}
.element .text { padding: 30px;}
.col2-3 { width:618px; height:298px; margin:10px; float:left; border:1px solid #47484b; }
.break { height:50px; position:relative; }
.images { display:block; position:relative; }
.col1-3 .images { width: 298px; height: 298px; overflow:hidden;}
.overflow {overflow:hidden; }
.experience, .uxStep {padding-bottom: 15px;}
.uxStep a { height: 100px; width: 100px;}
.experience img, .experience div, .uxStep a, .uxStep div{ vertical-align: middle; display:inline-block; padding-right: 6px;}
.uxStep div{ max-width: 750px;}
.expandableX, .expandableY, .expandableFull { cursor:pointer;}
.expandableX.large {
	width: 618px;
}
.expandableY.large {
	height: 618px;
}
.expandableFull.large {
	width: 936px;
}
.expandableFull.large.googleMaps{
	height: 460px;
}
.expandableFull.large.daishoApp {
	height: 980px;
}
.description{
	display:none;
}
.expandableX.large .images,
.expandableY.large .images {
	display:inline-block; float:left;
}
.expandableX.large .description{
	float:left;
	max-width: 280px;
	display:inline-block;
	padding: 20px;
}
.expandableFull.large .description{
	float:left;
	max-width: 900px;
	display:inline-block;
	padding: 20px;
}
.expandableFull .uxProcess {
	width: 298px;
	height:298px;
	cursor:pointer;
	transition:width 1s, height 0.5s;
	-webkit-transition:width 1s, height 0.5s;
}
.expandableFull.large .uxProcess {
	width: 100%;
	height:60px;
	background-color: rgba(255, 255, 255, 0.6);
}
.expandableFull.large .uxProcess .close {
	text-align: center;
	margin: 0 auto;
	padding: 16px 0;
	color: #242527;
	cursor:pointer;
}
.expandableFull.large .uxProcess .thumb {
	display:none;
}

.photo { height:138px; width:138px; border: 1px solid #47484b; float: left; margin: 0 20px 20px 0;}
.photo.last {margin-right: 0px;}
.photo.bottom{ margin-bottom: 0px;}

/* =Isotope ----------------------------------------------------------------------------*/
.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }
/**** Isotope CSS3 transitions ****/
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property:    -moz-transform, opacity; -ms-transition-property:     -ms-transform, opacity; -o-transition-property:         top, left, opacity; transition-property:         transform, opacity; }
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }
/* End: Recommended Isotope styles */

/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }


#options { width:100%; height:98px; z-index:300; text-align:center; margin-top:0px;background-color:rgba(255, 255, 255, 0.6) !important; -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); box-shadow:0 1px 0 rgba(0, 0, 0, 0.1);border-bottom: 1px solid #47484b;
}
#options ul { margin: 0; list-style: none; display:inline-block; padding-top:25px; }
#options li { float: left;  }
#options li a { color:#242527; font-family: 'Voltaire', sans-serif; font-size:22px; font-weight:normal; letter-spacing:0.05em; text-decoration:none; text-transform:uppercase; display:inline-block; padding:5px 17px;  margin:0px; }
#options li a:hover, #options li a.selected { color:#119bb0;}
#options.fixed { position: fixed; top: 0px; }

.social img { 
	width: 64px;
	height:64px;
	background-color: rgba(17,155,176,0.5);
	border:1px solid #47484b;
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { padding:0px; width:640px; position:relative; }
.col1-1 {width:618px; }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 767px) {
#wrapper {margin-bottom:5px; height:199px; }
/*.container { padding:0px; width:300px; position:relative;} */
.container { padding:0px; width:640px; position:relative;}
.col1-1 {width:298px; }
.col1-3, .col1-3.border { height:auto; } 
.col1-3.no-padding, .col1-3.photography, .col1-3.about {padding-bottom:0px; }
.col1-3.photography, .col1-3.about {height:300px; }
.responsive-col { height:auto !important; }
.col2-3 { width:298px; height:620px; }
.element {margin:10px 0px !important; }

h1 { font-size:50px; padding-top:19px;  }
h3 { font-size:24px; padding:14px 20px 20px 20px; position:relative; }
h3.blockquote {padding-top:0px; }
h2 { font-size:28px; font-weight:700; color:#c7c7c7; padding:21px 20px 0px 20px !important; }
.col1-3 h2 {font-size:24px; }
.design h2 {padding-bottom:23px !important; }

p { font-size:18px; letter-spacing:-1px; padding-left:20px !important; padding-top:20px !important; position:relative !important }
.slogan, .title p { padding-top:0px !important; padding-left:0px !important; padding-right:0px !important; }

.images img {max-height:300px; }
#options ul {padding-top: 16px;}
#options li a { font-size: 18px;}
.nav-bar {background-color:#f5f5f5; border-radius:1px; box-shadow:0 1px 0 rgba(0, 0, 0, 0.25); display:block; width:18px; height:2px; margin:2px auto; }
#logo-container {height:106px;}

#wrapper:before {display:none; }
}