/*
# Base
  – normalize.css
  – layout.css
  – typography.css

# Components
  – alerts.css
  – buttons.css
  – forms.css
  – list.css
  – nav.css
  – tables.css

# Modules
  – aside.css
  – footer.css
  – header.css
*/

/* CHEATSHEET
	% box model hack
	$ targets safari
	& clearfix hack
	? targets IE 7
*/

/* ===============
    # BASE
   =============== */

/*-------------------layout.css---------------*/


/*-------------------typography.css------------------*/
/*---DINPro---*/
@font-face {
	font-family:'DINPro-CondBlack';
	src: url('../fonts/DINPro-CondBlack/DINPro-CondBlack.eot');
	src: url('../fonts/DINPro-CondBlack/DINPro-CondBlack.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DINPro-CondBlack/DINPro-CondBlack.woff') format('woff'),
		url('../fonts/DINPro-CondBlack/DINPro-CondBlack.otf') format('opentype'),
		url('../fonts/DINPro-CondBlack/DINPro-CondBlack.svg') format('svg');
		font-weight: normal/*900*/;
		font-style: normal;
		font-stretch: normal;
		unicode-range: U+000D-FB02;
}

@font-face {
	font-family:'DINPro-Regular';
	src: url('../fonts/DINPro-Regular/DINPro-Regular.eot');
	src: url('../fonts/DINPro-Regular/DINPro-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DINPro-Regular/DINPro-Regular.woff') format('woff'),
		url('../fonts/DINPro-Regular/DINPro-Regular.otf') format('opentype'),
		url('../fonts/DINPro-Regular/DINPro-Regular.svg') format('svg');
		font-weight: normal/*400*/;
		font-style: normal;
		font-stretch: normal;
		unicode-range: U+000D-FB02;
}

@font-face {
	font-family:'DINPro-Medium';
	src: url('../fonts/DINPro-Medium/DINPro-Medium.eot');
	src: url('../fonts/DINPro-Medium/DINPro-Medium.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DINPro-Medium/DINPro-Medium.woff') format('woff'),
		url('../fonts/DINPro-Medium/DINPro-Medium.otf') format('opentype'),
		url('../fonts/DINPro-Medium/DINPro-Medium.svg') format('svg');
		font-weight: normal/*500*/;
		font-style: normal;
		font-stretch: normal;
		unicode-range: U+000D-FB02;
}

@font-face {
	font-family:'DINPro-Bold';
	src: url('../fonts/DINPro-Bold/DINPro-Bold.eot');
	src: url('../fonts/DINPro-Bold/DINPro-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/DINPro-Bold/DINPro-Bold.woff') format('woff'),
		url('../fonts/DINPro-Bold/DINPro-Bold.otf') format('opentype'),
		url('../fonts/DINPro-Bold/DINPro-Bold.svg') format('svg');
		font-weight: normal/*700*/;
		font-style: normal;
		font-stretch: normal;
		unicode-range: U+000D-FB02;
}

/*---------Whitney--------*/
@font-face {
	font-family:'Whitney-Book';
	src: url('../fonts/Whitney-Book/Whitney-Book.eot');
	src: url('../fonts/Whitney-Book/Whitney-Book.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Whitney-Book/Whitney-Book.woff') format('woff'),
		url('../fonts/Whitney-Book/Whitney-Book.otf') format('opentype'),
		url('../fonts/Whitney-Book/Whitney-Book.svg') format('svg');
		font-weight: normal/*325*/;
		font-style: normal;
		font-stretch: normal;
		unicode-range: U+0020-FB04;
}

@font-face {
	font-family:'Whitney-Semibold';
	src: url('../fonts/Whitney-Semibold/Whitney-Semibold.eot');
	src: url('../fonts/Whitney-Semibold/Whitney-Semibold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Whitney-Semibold/Whitney-Semibold.woff') format('woff'),
		url('../fonts/Whitney-Semibold/Whitney-Semibold.otf') format('opentype'),
		url('../fonts/Whitney-Semibold/Whitney-Semibold.svg') format('svg');
		font-weight: normal/*375*/;
		font-style: normal;
		font-stretch: normal;
		unicode-range: U+0020-FB04;
}

.font-whitney-book {
  font-family: 'Whitney-Book', "Trebuchet MS", Helvetica, sans-serif;
}

.font-whitney-semibold {
  font-family: 'Whitney-Semibold', "Trebuchet MS", Helvetica, sans-serif;
}

.font-dinpro-regular {
  font-family: 'DINPro-Regular', "Trebuchet MS", Helvetica, sans-serif;
}

.font-dinpro-medium {
  font-family: 'DINPro-Medium', "Trebuchet MS", Helvetica, sans-serif;
}

.font-dinpro-bold {
  font-family: 'DINPro-Bold', "Trebuchet MS", Helvetica, sans-serif;
}

.font-dinpro-condblack {
	font-family: 'DINPro-CondBlack', "Trebuchet MS", Helvetica, sans-serif;
}

/* Grid via http://getskeleton.com
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.container-2 {
	position: relative;
	width: 80%;
	margin: 0 auto;
}

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

/* For devices larger than 400px */
@media(min-width: 400px) {
  .container {
    width: 85%;
    padding: 0;
  }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 84%;
    max-width: 2000px;
  }
	.container-2 {
		width: 58%;
		max-width: 2000px;
	}
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }
  .half.column                    { width: 50%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
	margin: .5rem 0 .5rem 0;
	font-size: .9rem;
  font-weight: normal;
	font-family: 'DINPro-Bold', "Trebuchet MS", Helvetica, sans-serif;
	text-transform: uppercase;
	}
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin: 0 0 0 .5rem;
  font-weight: normal;
	font-size: 1rem;
	font-family: 'Whitney-Book', "Trebuchet MS", Helvetica, sans-serif;
	text-transform:none;}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }

/* custom code begins here –––––––––––––––––––––––––––––––––––– */

/* p, h1 h2 h3 h4 */
* body {
  background-color: #F39019;
}

p, h1, h2, h3, h4, li, figure, blockquote {
	font-family: 'Whitney-Book', "Trebuchet MS", Helvetica, sans-serif;
	font-weight:normal;
	letter-spacing: 0;
}

p {
	margin: 0.8em 0;
}

sup {
		vertical-align: -5px;
}

a {
	text-decoration: underline;
}

a:hover {
	 cursor:pointer;
	 color: #f39019;
}

a:link {
}

a:visited {
}

a:active {
}

li {
}

.subheading{
	text-transform: uppercase;
	margin-bottom: -.5rem;
	letter-spacing: .02rem;
	font-size: .98rem;
  font-family: 'DINPro-Bold', "Trebuchet MS", Helvetica, sans-serif;
}

.right {
  float: right !important;
}

.header-container {
	position: relative;
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
	padding: 0;
  box-sizing: border-box;
}

nav ul {
  margin-bottom: 0;
  padding: 0;
	display: flex;
	width: 100%;
}

nav ul li{
  list-style-type: none;
  padding: 0;
	flex-grow: 1;
}

nav ul li a {
	text-decoration: none;
	font-size: .7rem;
	display: block;
	padding: .6rem .6rem;
	line-height: 1.2rem;
	text-align: center;
	font-family: 'DINPro-Regular', "Trebuchet MS", Helvetica, sans-serif;
}

nav ul li a:hover{
  text-decoration: underline;
}

@media (min-width: 600px) {
	.header-container {
		position: relative;
	  width: 100%;
	  max-width: 960px;
	  margin: 0 auto;
	  padding: 0 20px;
	  box-sizing: border-box;
	}

	nav ul {
		/* display: inline-block; */
    float: right;
    width: 40%;
    /* font-size: 3.2rem; */
	}

	nav ul li{
	  list-style-type: none;
	  float: right;
	  padding: 0;
	}
	/* ! figure out z-index getting dropshadow to overlap with other elements*/
	nav ul li:hover{
	  /*
	  -webkit-box-shadow: 7px -8px 2px -2px rgba(0,0,0,0.24);
	  -moz-box-shadow: 7px -8px 2px -2px rgba(0,0,0,0.24);
	  box-shadow: 7px -8px 2px -2px rgba(0,0,0,0.24);
	  z-index: 20;*/
	}

	nav ul li a {
		text-decoration: none;
    display: block;
    font-size: 1rem;
    line-height: 2.75rem;
    text-align: center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
	}

	nav ul li a:hover{
	  text-decoration: underline;
	  z-index: 20;
	  /* fold */
	  -ms-transform: matrix(1, 0, 0.2, 1, -8, 0); /* IE 9 */
	  -webkit-transform: matrix(1, 0, 0.2, 1, -8, 0); /* Safari */
	  transform: matrix(1, 0, 0.2, 1, -8, 0);
	}
}

blockquote {
	font-size: 1.5rem;
	margin-left: 20%;
	margin: 1.3em 0 0 20%;
	line-height: 1.28em;
}

@media (min-width: 700px) {
	blockquote {
		font-size: 2.2rem;
    line-height: 2.8rem;
	}
}

blockquote footer {
	text-align: right;
	text-transform: uppercase;
	font-family: 'DINPro-medium', "Trebuchet MS", Helvetica, sans-serif;
	font-size: 1rem;
}

@media (min-width: 700px) {
	blockquote footer {
    font-size: 1.4rem;
	}
}

.current-tab {
  text-decoration: none;
	font-family: 'DINPro-Bold', "Trebuchet MS", Helvetica, sans-serif;
}

.current-tab:hover {
	cursor: default;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

footer {
  padding: .5rem 0 .5rem 0;
  clear: both;
}

footer a:hover {
	color: #F7F2E5;
	cursor: pointer;
}

.wrapper {
	display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.flex {
	padding: 0;
}

.flex>p {
	margin: .5rem 0 .5rem 1rem;
}

@media (min-width: 600px) {
	  .flex { flex: 1 auto; }
	}

}

/* add sprites for different states */
button {
  background: url("https://i.stack.imgur.com/76j8t.jpg?s=32&g=1");
}

/* grids tables oh my */

#left, #center, #right{
  width: 100%;
  padding: 0 0px 0 20px;
  white-space: nowrap;
}

@media (min-width:600px) {
	#left{
	  display: table-cell;
	  width: 50%;
	  padding: 0 0px 0 20px;
	  white-space: nowrap;
	}

	#center {
	  display: table-cell;
	  width: 50%;
	  white-space: nowrap;
	  padding: 0 20px 0 0;
	}

	#right {
	  display: table-cell;
	  white-space: nowrap;
	  padding: 0 0px 0 10px;
	}
}

.img-width-48 {
	display: block;
	width: 48%;
}

.img-width-68 {
	display: block;
	width: 66%;
}

.img-width-68-center {
	display: block;
	width: 100%;
	margin: auto;
}

.img-width-80-center {
	display: block;
	width: 100%;
	margin: auto;
}

@media (min-width: 500px) {
	.img-width-68-center {
		width: 66%;
	}

	.img-width-80-center {
		width: 80%;
	}
}

.img-width-90 {
	display: block;
	width: 90%;
	margin: auto;
}

.txt-emphasis {

}

.txt-vertical-align-add {
	vertical-align: 1px;
}

strong {
	font-weight: 400;
}

.p-strong {
	font-family: 'Whitney-Semibold', "Trebuchet MS", Helvetica, sans-serif;
	font-weight: normal;
}

.p-strong-emphasis {
	text-align: center;
	font-size: 22px;
	font-weight: 500;
}

.txt-website-title {
  text-transform: uppercase;
  font-size: 1.3rem;
  letter-spacing: 2.5px;
	text-decoration:none;
	float:left;
	padding: .5rem 0 .5rem .5rem !important;
	font-family: 'DINPro-Bold', "Trebuchet MS", Helvetica, sans-serif;
	transition: all .2s ease-in-out;
}

@media (min-width: 400px){
	.txt-website-title {
		text-transform: uppercase;
	  font-size: 1.5rem;
		padding:0;
	}
}

@media (min-width: 800px){
	.txt-website-title {
	  text-transform: uppercase;
	  font-size: 2rem;
	}
}

.chinese-char {
	font-size: .9em;
	vertical-align: 1.24px;
}

.txt-website-title:hover {
	color: #F7F2E5;
}

.txt-nav {
  float: right !important;
  text-transform: uppercase;
  letter-spacing: 1.4px;
	font-family: 'DINPro-Regular', "Trebuchet MS", Helvetica, sans-serif;
}

.txt-footer {
	font-family: 'Whitney-Book', "Trebuchet MS", Helvetica, sans-serif;
}

.txt-footer-title {
  font-size: 24px;
  line-height: 40px;
}

.txt-title {
  font-size: 5rem;
  top: -75px !important;
  margin: 0;
  text-transform: uppercase;
  z-index: 1;
  width: 30%;
	font-family: 'DINPro-CondBlack', "Trebuchet MS", Helvetica, sans-serif;
}

@media (min-width: 400px) {
	.txt-title {
	  font-size: 6rem;
	}
}

@media (min-width: 700px) {
	.txt-title {
	  font-size: 9rem;
	}
}

@media (min-width: 2000px) {
	.txt-title {
		font-size: 14rem;
    top: -120px !important;
	}
}

.position-absolute {
	position: absolute;
}

.txt-hero {
  font-size: 1.45rem;
  clear: both;
  line-height: 2.1rem;
	font-family: 'Whitney-Book', "Trebuchet MS", Helvetica, sans-serif;
}

@media (min-width: 600px) {
	.txt-hero {
    font-size: 1.4rem;
    line-height: 2.2rem;
    width: 85%;
	}
}

@media (min-width: 1500px) {
	.txt-hero {
    font-size: 1.8rem;
    line-height: 3.4rem;
    width: 85%;
	}
}

.txt-resume-h1 {
	font-family: 'DINPro-CondBlack', "Trebuchet MS", Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-size: 21px;
}

.txt-resume-h2 {
	font-family: 'DINPro-CondBlack', "Trebuchet MS", Helvetica, sans-serif;
	font-size: 40px;
}

.txt-resume-p {
	font-family: 'Whitney-Book', "Trebuchet MS", Helvetica, sans-serif;
	font-size: 17px;
	line-height: 24px;
}

.text-shadow {
	text-shadow: 2px 2px 6px rgba(100, 100, 100, 1);
}

/* margin */
.margin-sub-bottom-4 {
  margin-bottom: -16px;
}

.margin-add-bottom-4 {
  margin-bottom: 16px;
}

.margin-sub-bottom-5 {
  margin-bottom: -9px;
}

.margin-add-bottom-5 {
  margin-bottom: 9px;
}

/* padding top */
.padding-t-1 {
  padding-top: 1.5rem;
}

.padding-t-2{
	padding-top: 1rem;
}

.padding-t-3 {
  padding-top: .5rem;
}

.padding-t-4 {
  padding-top: .25rem;
}

/* padding bottom */
.padding-b-1 {
  padding-bottom: 1.5rem;
}

.padding-b-2{
	padding-bottom: 1rem;
}

.padding-b-3 {
  padding-bottom: .5rem;
}

.padding-b-4{
	padding-bottom: .25rem;
}

@media (min-width:600px) {
	/* padding top */
	.padding-t-1 {
	  padding-top: 2.625rem;
	}

	.padding-t-2{
		padding-top: 1.75rem;
	}

	.padding-t-3 {
	  padding-top: 0.875rem;
	}

	.padding-t-4 {
	  padding-top: 0.4375rem;
	}

	/* padding bottom */
	.padding-b-1 {
	  padding-bottom: 2.625rem;
	}

	.padding-b-2{
		padding-bottom: 1.75rem;
	}

	.padding-b-3 {
	  padding-bottom: 0.875rem;
	}

	.padding-b-4{
		padding-bottom: 0.4375rem;
	}
}

.effect-drop-shadow{
  /* ! work on this */
  -webkit-box-shadow: 0px 5px 14px 0px rgba(50, 50, 50, 0.68);
  -moz-box-shadow: 0px 5px 14px 0px rgba(50, 50, 50, 0.68);
  box-shadow: 0px 5px 14px 0px rgba(50, 50, 50, 0.68);
}

/*.effect-drop-shadow-hover:hover {
  -webkit-box-shadow: 10px -9px 9px 0px rgba(50, 50, 50, 0.46);
  -moz-box-shadow:    10px -9px 9px 0px rgba(50, 50, 50, 0.46);
  box-shadow:         10px -9px 9px 0px rgba(50, 50, 50, 0.46);
}*/

.current-tab .current-body {
  background-color: #21ec79;
  /* fold */
  -ms-transform: matrix(1, 0, 0.2, 1, -8, 0); /* IE 9 */
  -webkit-transform: matrix(1, 0, 0.2, 1, -8, 0); /* Safari */
  transform: matrix(1, 0, 0.2, 1, -8, 0);
}

.color-mono-1-txt {
  color: #F7F2E5;
}

.color-mono-2-txt {
  color: #A6AAA9;
}

.color-mono-3-txt {
  color: #53585F;
}

.color-mono-4-txt {
	color: #000000;
}

.color-mono-1-bg {
  background-color: #F7F2E5;
  z-index: 4;
}

.color-mono-1-bg a:hover {
	color: #F39019;
}

.color-mono-2-bg {
  background-color: #A6AAA9;
  z-index: -3;
}

.color-mono-3-bg {
  background-color: #53585F;
  z-index: -2;
}

.color-mono-4-bg {
  background-color: #000000;
  z-index: -1;
}

.color-sfd-bg {
  background-color: #C9E1E9;
}

.color-sfd-bg-2 {
	background-color: #BC9C74;
}

.color-sfd-bg-3 {
	background-color: #655641;
}

.color-sfd-bg-4 {
	background-color: #FFF6F0;
}

.color-aspire-bg {
  background-color: #791A7B;
}

.color-aspire-bg-2 {
  background-color: #ddc6de;

}

.color-aspire-bg-3 {
  background-color: #791A7B;
}

.color-aspire-bg-4 {
  background-color: #213;
}

/*#303060*/
.color-occipital-bg {
  background-color: #1398D3;
}

.color-occipital-bg-2 {
  background-color: #132539;
}

.color-occipital-bg-3 {
  background-color: #666666;
}

.color-occipital-bg-4 {
  background-color: #000000;
}

.color-occipital-bg-5 {
  background-color: #054458;
}

.bg-sfd {
	background: url("images/thumb-sfd-1-4.jpg") no-repeat top center;
  background-size:cover;
}

.bg-aspire {
	background: url("images/thumb-aspire-2-2.jpg") no-repeat center center;
  background-size:cover;
}

.bg-occipital {
	background: url("images/thumb-occipital-1.jpg") no-repeat center center;
  background-size:cover;
}

.bg-resume-sfd {
	background: url("images/free-dental-day-2.jpg") no-repeat 85% 499%;
  background-size:250px;
}

.bg-resume-fts {
	background: url("images/prototype-testing-2.gif") no-repeat right bottom;
  background-size:225px;
}

.bg-resume-risd {
	/*background: url("images/grid-room.jpg", "images/egg-tray.gif") no-repeat right top;
  background-size:auto 200px;*/
	background-image: url("images/grid-room-2.jpg"), url("images/egg-tray-2.gif");
	background-size: auto 300px, auto 125px;
	background-position: 78% 0%, 100% 85%;
	background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, scroll;
}

.section-projects-thumb p{
	margin: 2px 0 0 0;
	text-transform: uppercase;
	font-size: .8rem;
}

@media (min-width: 600px) {
	.section-projects-thumb p{
		margin: 2px 0 0 0;
		text-transform: uppercase;
		font-size: 14px;
	}
}

.section-projects-thumb a:hover h2{
	text-decoration: underline;
}

.section-projects-thumb h2 {
	font-size: 30px;
	font-weight: normal;
	margin: 0 0 .08rem 0;
	font-family: 'Whitney-Semibold', "Trebuchet MS", Helvetica, sans-serif;
}

.section-projects a {
    text-decoration: none;
		transition: all .2s ease-in-out;
}

.section-projects a:hover h2{
	text-decoration: underline;
}

.section-projects a:hover{
	transform: scale(1.02);
	box-shadow: 0px 0px 38px -1px #242424;
	-webkit-box-shadow: 0px 0px 38px -1px #242424;
	-moz-box-shadow: 0px 0px 38px -1px #242424;
	-o-box-shadow: 0px 0px 38px -1px #242424;
}

.section-projects h2 {
	font-size: 30px;
	font-weight: normal;
	margin: 0 0 .08rem 0;
	font-family: 'Whitney-Semibold', "Trebuchet MS", Helvetica, sans-serif;
}

.section-projects p{
	margin: 2px 0 0 0;
	text-transform: uppercase;
	font-size: .8rem;
}

@media (min-width: 600px) {
	.section-projects p{
		margin: 2px 0 0 0;
		text-transform: uppercase;
		font-size: 14px;
	}
}

.section-case-study {

}

.section-case-study header {
	text-align: center;
}

.section-case-study header h1 {
  font-size: 3em;
  font-weight: normal;
  font-family: 'Whitney-Semibold', "Trebuchet MS", Helvetica, sans-serif;
}

.section-case-study header h2{
  text-transform: uppercase;
  font-size: 1.2em;
  font-family: 'DINPro-Regular', "Trebuchet MS", Helvetica, sans-serif;
  font-weight: normal;
  letter-spacing: .065em;
  margin: 0 0 13px 0;
}

.section-case-study header p{
	margin: 3px 0 6px 0;
}

.section-case-study p {
  line-height: 26px;
  font-weight: 200;
  font-size: 1.28em;
}

.section-case-study li {
  margin-bottom: 12px;
  font-size: 1.28em;
  font-weight: 200;
  line-height: 1.2em;
}

.section-case-study h1 {
}

.section-case-study h2 {
  /* text-align: center; */
  font-family: 'Whitney-book', "Trebuchet MS", Helvetica, sans-serif;
  margin: 2em 0 .3em 0;
  font-size: 3.2em;
  /* line-height: 1.2em; */
}

.section-case-study h3 {
  text-transform: uppercase;
  font-family: 'DINPro-Bold', "Trebuchet MS", Helvetica, sans-serif;
  font-size: 1.2em;
  letter-spacing: .02em;
  margin: 10px 0 20px 0;
  /* letter-spacing: .06em; */
  /* text-align: center; */
}

.section-case-study .section-case-study-lg-txt {
	font-size: 24px;
	font-weight: 200;
	margin: 1em 0 -.2em 0;
	line-height: 1.2em;
}

.section-case-study figure{
	font-size: .8em;
	text-align:center;
	margin: 28px 0 20px 0;
}

.section-case-study figcaption{
  text-align: center;
  margin: 10px 0 0 0;
  font-size: 1.4em;
}

.section-case-study .section-case-study-contents {
	font-size: 22px;
	font-family: 'DINPro-Medium', "Trebuchet MS", Helvetica, sans-serif;
	line-height: 1.6em;
	text-align: center;
}

.section-about p{
	line-height: 1.4em;
	margin: 0 0 .8em 0;
}

.section-about h2 {
	font-family: 'DINPro-CondBlack', "Trebuchet MS", Helvetica, sans-serif;
	font-weight: 600;
	font-size: 2.2em;
	margin: .2em 0 .7em 0;
}


.txt-transform-uppercase {
  text-transform: uppercase;
}

.txt-size-1 {
  font-size: 45px;
}

.txt-size-2 {
  font-size: 36px;
}

.txt-size-3 {
  font-size: 27px;
}

.txt-size-4 {
  font-size: 16px;
}

.txt-decoration-none {
	text-decoration:none;
}

/*-- custom containers --*/

.container-full-width {
  clear: both;
  width: 100%;
  display: block;
  float: left;
}

.container-100 {
  margin: 0 auto;
  height: 15rem;
  text-align: center;
}

.container-50 {
  margin: 0 auto;
  float: left;
  width: 100%;
  height: 12rem;
  text-align: center;
}

@media (min-width: 600px) {
	.container-50 {
	  display:inline-block;
	  width: 50%;
	  height: 300px;
	  text-align: center;
	}

	.container-100 {
	  height: 20rem;
	}
}

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.btn-opacity-change {
  opacity: .8;
}

.btn-opacity-change:hover {
  opacity: 1;
}

.spacer {
  margin-top: 58px;
}

.content-float-under {
  margin-top: 80px;
}

.align-txt-center {
  text-align: center;
}

.align-txt-right {
  text-align: right;
}

/*--- hide on mobile and smaller screen sizes -------*/
.expendable {
	display:none;
}

@media (min-width: 800px) {
	.expendable {
		display:inline;
	}
}
/* weather
  Docs at http://http://simpleweatherjs.com

  Look inspired by http://www.degreees.com/
  Used for demo purposes.

  Weather icon font from http://fonts.artill.de/collection/artill-weather-icons

  DO NOT hotlink the assets/font included in this demo. If you wish to use the same font icon then download it to your local assets at the link above. If you use the links below odds are at some point they will be removed and your version will break.
*/
/*
@font-face {
    font-family: 'weather';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/

#weather {
}

i {
  font-family: weather;
  line-height: 1.0;
  font-weight: normal;
  font-style: normal;
  text-transform: none;
}

.icon-0:before { content: ":"; }
.icon-1:before { content: "p"; }
.icon-2:before { content: "S"; }
.icon-3:before { content: "Q"; }
.icon-4:before { content: "S"; }
.icon-5:before { content: "W"; }
.icon-6:before { content: "W"; }
.icon-7:before { content: "W"; }
.icon-8:before { content: "W"; }
.icon-9:before { content: "I"; }
.icon-10:before { content: "W"; }
.icon-11:before { content: "I"; }
.icon-12:before { content: "I"; }
.icon-13:before { content: "I"; }
.icon-14:before { content: "I"; }
.icon-15:before { content: "W"; }
.icon-16:before { content: "I"; }
.icon-17:before { content: "W"; }
.icon-18:before { content: "U"; }
.icon-19:before { content: "Z"; }
.icon-20:before { content: "Z"; }
.icon-21:before { content: "Z"; }
.icon-22:before { content: "Z"; }
.icon-23:before { content: "Z"; }
.icon-24:before { content: "E"; }
.icon-25:before { content: "E"; }
.icon-26:before { content: "3"; }
.icon-27:before { content: "a"; }
.icon-28:before { content: "A"; }
.icon-29:before { content: "a"; }
.icon-30:before { content: "A"; }
.icon-31:before { content: "6"; }
.icon-32:before { content: "1"; }
.icon-33:before { content: "6"; }
.icon-34:before { content: "1"; }
.icon-35:before { content: "W"; }
.icon-36:before { content: "1"; }
.icon-37:before { content: "S"; }
.icon-38:before { content: "S"; }
.icon-39:before { content: "S"; }
.icon-40:before { content: "M"; }
.icon-41:before { content: "W"; }
.icon-42:before { content: "I"; }
.icon-43:before { content: "W"; }
.icon-44:before { content: "a"; }
.icon-45:before { content: "S"; }
.icon-46:before { content: "U"; }
.icon-47:before { content: "S"; }

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }

.clear-margin{
  margin: 0;
}

.clear-margin-left{
  margin-left: 0;
}

.clear-margin-right{
  margin-right: 0;
}

/*-- Animations --*/
.animation-scale {
transition:all 0.25s ease-out;
-webkit-transition:all 0.25s ease-out;
-moz-transition:all 0.25s ease-out;
-o-transition:all 0.25s ease-out;
transform:rotate(0deg) scale(1) skew(0deg) translate(0px) ;
 -webkit-transform:rotate(0deg) scale(1) skew(0deg) translate(0px) ;
-moz-transform:rotate(0deg) scale(1) skew(0deg) translate(0px) ;
-o-transform:rotate(0deg) scale(1) skew(0deg) translate(0px) ;
-ms-transform:rotate(0deg) scale(1) skew(0deg) translate(0px) ;
}
.animation-scale:hover {
transform:rotate(0deg) scale(1.1) skew(0deg) translate(0px) ;
-webkit-transform:rotate(0deg) scale(1.1) skew(0deg) translate(0px) ;
-moz-transform:rotate(0deg) scale(1.1) skew(0deg) translate(0px) ;
-o-transform:rotate(0deg) scale(1.1) skew(0deg) translate(0px) ;
-ms-transform:rotate(0deg) scale(1.1) skew(0deg) translate(0px) ;
}