html, body {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  background-color: #3E2723;
  background: #3E2723 url(/images/bg.jpg) top center no-repeat;
  background-size: cover;
  color: #FFFDF7;
  margin:0 !important;
  margin-top: 0 !important;
}
body.slate {background-color:#222428; background-image: url(/images/bg-slate.jpg);}
.slate .mdl-color--brown-900 {background-color:#222428 !important;}
body.navy {background-color:#222642; background-image: url(/images/bg-navy.jpg);}
.navy .mdl-color--brown-900 {background-color:#222642 !important;}
body.crimson {background-color:#351a1d; background-image: url(/images/bg-crimson.jpg);}
.crimson .mdl-color--brown-900 {background-color:#351a1d !important;}
.mdl-color-text--white {
	color: #FFFDF7 !important;
}
/* Animations */
@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes rotateWords {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    4% { opacity: 0.3; width: 0px; }
	12% { opacity: 1; width: 100%; }
	27% { opacity: 1; width: 100%; }
    31% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}
@keyframes m-1-ball {
	0%, 65%, 100% {
	opacity: 0;
	}
	10%, 40% {
	opacity: 1;
	}
	0% {
	transform: translateY(5px) scale(0.7);
	}
	5% {
	transform: scale(0.7);
	}
	15%, 100% {
	transform: scale(1);
	}
	45%, 65% {
	transform: translateY(24px) scale(0.7);
	}
}
@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@keyframes rotateBackwards {
    from {transform: rotate(0deg);}
    to {transform: rotate(-360deg);}
}
/* Typography */
h1, h2, .mdl-layout-title, .drawer-header {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-weight: 900;
}
h3, h4, h5, h6 {font-weight: 600;}
.mdl-layout__header {
  background-color: rgba(0,0,0,0.2);
  border-bottom: solid 2px rgba(0,0,0,0.1);
}
.indented {margin-left: 40px;}
p {max-width: 600px;}
.highlight {color: #FFCC80;}
p.highlight {font-weight:500;}
/* Buttons & Links */
a {color: #FFCC80;}
a:hover, a:active, a:focus {text-decoration: none;}
.slate a {color: #e2cfb9;}
.navy a {color: #66b3ff;}
.crimson a {color: #ff836a;}
.mdl-button {font-weight: 600; line-height: 50px; height: 50px; position:relative;}
#about .mdl-button, #skills .mdl-button {font-size: 18px;}
.mdl-button--primary {background-color: #3E2723 !important;}
.mdl-button--primary:hover, .mdl-button--primary:active {background-color: #34211D !important;}
.mdl-button--white {background-color:white !important; color:#2E1F1C !important;}
.mdl-button::before, .mdl-button::after {content:''; display:block; position:absolute; top:20px; width:100px; transform:rotate(-45deg); transition:all 0.2s ease;}
.mdl-button::before {right:-226px; background-color:#3E2723; height:3px;}
.mdl-button[disabled]::before {background-color: rgba(0,0,0,0.15) !important;}
.mdl-button[disabled]::after {background-color: rgba(0,0,0,0.05) !important;}
.mdl-button::after {right:-194px; background-color:#fff; height:6px;}
.mdl-button:hover::before, .mdl-button:focus::before {right:-56px;}
.mdl-button:hover::after, .mdl-button:focus::after {right:-44px;}
.mdl-button.mdl-button--white::after {background-color:#C47118;}
.mdl-button.mdl-button--primary::before {background-color:#C47118;}
.mdl-button.back-button .material-icons {max-width: 36px;}
.slate .mdl-button.mdl-button--white {color: #222 !important;}
.slate .mdl-button.mdl-button--white::before {background-color:#CCAA83;}
.slate .mdl-button.mdl-button--white::after {background-color:rgba(204, 170, 131, 0.5);}
.navy .mdl-button.mdl-button--white {color: #222 !important;}
.navy .mdl-button.mdl-button--white::before {background-color:#3399FF;}
.navy .mdl-button.mdl-button--white::after {background-color:rgba(51, 153, 255, 0.5);}
.crimson .mdl-button.mdl-button--white {color: #222 !important;}
.crimson .mdl-button.mdl-button--white::before {background-color:#E73F3F;}
.crimson .mdl-button.mdl-button--white::after {background-color:#FF6E50;}
/* Drawer Button Customization */
.mdl-layout__header .mdl-layout__drawer-button {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.54);
}
/* iOS Safari specific workaround */
.mdl-menu__container {
  z-index: -1;
}
.demo-navigation {
  z-index: -2;
}
/* END iOS Safari specific workaround */
/* Navigation */
.mdl-layout__header {
  box-shadow: none;
}
.mdl-layout__header .mdl-layout__drawer-button {
  color: rgba(255,255,255,0.75);
}
.drawer {
  border: none;
  overflow: hidden;
}
.mobile-drawer-animation {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 240px;
  overflow: hidden;
  text-align: right;
}
.mobile-fox {
  z-index: 1;
  position: relative;
}
.brand-lines {
  display: none;
  animation: 0.4s ease-out 0s 1 slideInLeft;
  width: 160px;
  height: 160px;
  position: absolute;
  z-index: 0;
}
.brand-lines::before, .brand-lines::after {
  content: '';
  position: absolute;
  display: block;
  width: 360px;
  top: 50px;
  transform: rotate(-45deg);
}
.brand-lines::before {
  height: 4px;
  background-color: #4E342E;
  left: -67px;
}
.slate .brand-lines::before, .slate .brand-lines-2::before, .navy .brand-lines::before, .navy .brand-lines-2::before, .crimson .brand-lines::before, .crimson .brand-lines-2::before {background-color: rgba(0,0,0,0.3);}
.brand-lines::after {
  height: 12px;
  background-color: #5D4037;
  left: -90px;
}
.slate .brand-lines::after, .slate .brand-lines-2::after, .navy .brand-lines::after, .navy .brand-lines-2::after, .crimson .brand-lines::after, .crimson .brand-lines-2::after {background-color: rgba(0,0,0,0.2);}
.drawer.is-visible .brand-lines-2 {
  animation: 0.3s ease-out 0s 1 slideInRight;
}
.brand-lines-2 {
  width: 240px;
  height: 160px;
  position: absolute;
  z-index: 0;
}
.brand-lines-2::before, .brand-lines-2::after {
  content: '';
  position: absolute;
  display: block;
  width: 360px;
  top: 50px;
  transform: rotate(-45deg);
}
.brand-lines-2::before {
  height: 4px;
  background-color: #4E342E;
  right: -166px;
}
.brand-lines-2::after {
  height: 12px;
  background-color: #5D4037;
  right: -180px;
}
.fox {
  display: none;
  animation: 0.4s ease-out 0s 1 slideInLeft;
  position: relative;
  z-index: 1;
}
.brand-link {
  text-decoration: none;
  margin-bottom: -10px;
}
.drawer-header {
  position: relative;
  z-index: 1;
  font-size: 20px;
  padding-top: 0 !important;
  display: none;
  box-sizing: border-box;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 16px 30px;
  color: #FFF;
}
.navigation {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
a.mdl-js-ripple-effect {
  position: relative;
}
.navigation .mdl-navigation__link {
  position: relative;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: rgba(255, 255, 255, 0.56);
  font-weight: 500;
}
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
  color: rgba(255, 255, 255, 0.75);
  padding: 12px 30px 12px 54px;
}
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link::before, .mdl-layout__drawer .mdl-navigation .mdl-navigation__link::after {
  content: '';
  display: block;
  position: absolute;
}
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link::before {
  top: 50%;
  left: 30px;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-radius: 50%;
  border: solid 2px rgba(0,0,0,0.7);
  transition: border 0.3s ease;
}
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link:not(:last-child)::after {
    top: 31px;
    left: 36px;
    width: 2px;
    height: 34px;
    background: rgba(0,0,0,0.5);
}
.mdl-layout__drawer .mdl-navigation  .mdl-navigation__link:hover, .mdl-layout__drawer .mdl-navigation  .mdl-navigation__link:active, .mdl-layout__drawer .mdl-navigation  .mdl-navigation__link:focus {
  background-color: rgba(0,0,0,0.3);
  color: #FFF;
}
.mdl-layout__drawer .mdl-navigation  .mdl-navigation__link--current {
  opacity: 1;
  background-color: transparent;
  color: #FFF;
}
.mdl-layout__drawer .mdl-navigation  .mdl-navigation__link--current::before {
  border: solid 2px #C47118;
}
.slate .mdl-layout__drawer .mdl-navigation  .mdl-navigation__link--current::before {border-color: #CCAA83;}
.navy .mdl-layout__drawer .mdl-navigation  .mdl-navigation__link--current::before {border-color: #3399FF;}
.crimson .mdl-layout__drawer .mdl-navigation  .mdl-navigation__link--current::before {border-color: #FF6E50;}
/* Sections */
.mdl-layout--fixed-drawer>.mdl-layout__content {padding-left: 240px; margin-left: 0;}
main section {padding: 10vh 30px; position: relative;}
main section#about {min-height:80vh;}
main section::after {content: ''; position:absolute; height: 100%; width: calc(100% + 240px); top: 0; right: 0; background-color: transparent; z-index: -1;}
main section h2:first-of-type {margin-top: 0;}
	/* About Section */
    #about::after {background-color:transparent;}
	.rw-wrapper{
		position: relative;
		margin: 0 auto;
		text-shadow: 1px 1px 12px rgba(0,0,0,0.6);
	}
	.rw-sentence{
		margin: 0;
		color:#FFB13D;
		margin-top: -15px;
		margin-bottom: -15px;
	}
	.rw-sentence span{
		white-space: nowrap;
	}
	.rw-words{
		display: inline;
		text-indent: 10px;
	}
	.rw-words span{
		position: absolute;
		opacity: 0;
		overflow: hidden;
		width: 100%;
		animation: rotateWords 9s linear infinite 0s;
	}
	.rw-words span:nth-child(2) { 
		animation-delay: 3s;
	}
	.rw-words span:nth-child(3) { 
		animation-delay: 6s;
	}
	.scroll-for-more {
		display: block;
		position: absolute;
		bottom: 10vh;
		text-transform: uppercase;
		text-decoration: none;
		color: #FFFBF2;
	}
	.mouse {
	  width: 36px;
	  height: 60px;
	  border-radius: 24px;
	  border: 3px solid #FFFBF2;
	  position: relative;
	  top: calc(50% - 30px);
	  left: 0;
	  display: inline-block;
	  vertical-align: middle;
	  margin-right:10px;
	}
	.mouse:before, .mouse:after {
	  content: "";
	  display: block;
	  position: absolute;
	}
	.m-1:before {
	  width: 10px;
	  height: 10px;
	  border-radius: 50%;
	  top: 10px;
	  left: calc(50% - 5px);
	  background: #C47118;
	  animation: m-1-ball 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
	}
    /* Process Section */
    #process::after {background-color: rgba(0,0,0,0.05);}
    .bucket {
      position: relative;
      display: block;
      text-align: center;
      width: 220px;
      height: 220px;
      padding: 0;
      margin: 0 auto;
      outline: none;
    }
    .bucket-area {
      height: 220px;
      display: table;
      width: 100%;
    }
    .bucket h5 {
      font-family: 'Playfair Display', 'Georgia', serif;
      font-weight: 900;
      display: table-cell;
      vertical-align: middle; 
      text-align: center;
      line-height: 24px;
    }
    .bucket svg {
      width: 100%;
      height: 100%;
      opacity: 0.4;
      position: absolute;
      top: 0;
      left: 0;
      transition-property: all;
      transition-duration: 0.8s;
      z-index: -1;
    }
    .bucket svg + svg {
      opacity: 0;
      left: 20px;
    }
    .bucket svg + svg + svg {
      opacity: 0;
      left: 40px;
    }
    .bucket:hover svg, .bucket:active svg {
      opacity: 1.0;
      animation-name: rotate; 
      animation-duration: 2s; 
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    .bucket:hover svg + svg, .bucket:active svg + svg {
      opacity: 0.3;
      left: 40px;
    }
    .bucket:hover svg + svg + svg, .bucket:active svg + svg + svg {
      opacity: 0.15;
      left: 80px;
    }
    #bucket-2:hover svg, #bucket-2:active svg, #bucket-4:hover svg, #bucket-4:active svg {
      animation-name: rotateBackwards;
    }
    .mdl-tooltip {
      background: rgba(0,0,0,0.6);
      color: #FFCC80;
      max-width: 120px;
      font-size: 12px;
      line-height: 18px;
    }
    #bucket-2 {
      margin-top: -44px;
    }
    #bucket-3 {
      margin-top: -44px;
    }
    #bucket-4 {
      margin-top: -44px;
    }
    .process-clearfix {
      display: none;
    }
    /* Work Section */
    #work::after {background-color: rgba(0,0,0,0.10);}
    .mdl-card {max-width:100%; border-top-left-radius: 0; border-top-right-radius: 0;}
    .mdl-card__title {color: #fff; height: 180px;}
    .mdl-card__title-text {font-weight:600 !important;}
    /* Skills Section */
    #skills::after {background-color: rgba(0,0,0,0.15);}
    #skills h2 {margin-bottom: 40px;}
    #skills h4 {margin-bottom: 5px;}
    /* Personality Section */
    #personality::after {background-color: rgba(0,0,0,0.20);}
    #personality h2 {margin-bottom: 40px;}
    #personality h4 {margin-bottom: 0;}
    #personality h3 {margin-bottom:0; margin-top: 0;}
    /* Contact Section */
    #contact::after {background-color: rgba(0,0,0,0.25);}
    #contact img {max-width: 100%; max-height: 250px;}
    /* Intro Section */
    #intro::after {background-color: transparent;}
    /* Problem Section */
    #problem::after {background-color: rgba(0,0,0,0.05);}
    /* Research Section */
    #research::after {background-color: rgba(0,0,0,0.10);}
    /* Concept Section */
    #concept::after {background-color: rgba(0,0,0,0.15);}
    /* Prototype Section */
    #prototype::after {background-color: rgba(0,0,0,0.20);}
    .img-responsive {max-width: 100%; height: auto;}
    .invision-phone {display: none;}
    .invision-phone-link {display: block;}
    .invision-tablet-wide {display: none;}
    .invision-tablet-wide-link {display: block;}
    /* Back Section */
    #back::after {background-color: rgba(0,0,0,0.25);}

/* Media Queries */
@media screen and (max-width: 480px){
    h1 {font-size: 36px; line-height: 40px;}
    h2 {font-size: 30px; line-height: 34px;}
    h3 {font-size: 24px; line-height: 28px;}
    h4 {font-size: 20px; line-height: 24px;}
    h5 {font-size: 16px; line-height: 20px;}
    h6 {font-size: 12px; line-height: 16px;}
    main section {padding: 30px;}
    main section:not(#about) h2:first-of-type {margin-bottom: 20px;}
    .mdl-grid {padding: 0;}
    .mdl-grid .mdl-cell {margin-left: auto; margin-right: auto; width: 100%;}
    .rw-sentence {margin-top: -24px; margin-bottom: -30px;}
    .rw-words {height: 48px;}
    #about .mdl-button {margin-top: 10px;}
    #process::after {background-color: rgba(0,0,0,0.1);}
    #work::after {background-color: rgba(0,0,0,0.2);}
    #skills::after {background-color: rgba(0,0,0,0.3);}
    .indented {margin-left: 20px;}
    #personality::after {background-color: rgba(0,0,0,0.4);}
    #personality h2:first-of-type, #contact h2:first-of-type {margin-bottom: 0px !important;}
    #contact::after {background-color: rgba(0,0,0,0.5);}
    .invision-mobile {transform: scale(0.55);}
    .invision-tablet-wide {transform: scale(0.25);}
}
@media screen and (min-width: 481px) and (max-width: 1024px){
    .rw-sentence {margin-top: -24px; margin-bottom: -20px;}
    .rw-words {height: 75px;}
    .invision-phone {display: block;}
    .invision-phone-link {display: none;}
}
@media screen and (max-width: 1024px){
    .mdl-layout--fixed-drawer>.mdl-layout__content {padding-left: 0;}
    .hidden-mobile {display: none;}
    main section:first-child {min-height: 0 !important;}
    .rw-words {text-indent: 0px; display: block;}
    #about .mdl-button {margin-top: 10px;}
    #about .scroll-for-more {position: static; margin-top: 30px;}
    .mdl-card {margin-left: auto; margin-right: auto;}
}
@media screen and (min-width: 415px){
    /* Fits 2 of buckets */
    .bucket {
      margin-left: inherit;
      margin-right: inherit;
      float:left;
    }
    #bucket-2 {
      margin-left: -85px;
      margin-top: 110px;
    }
    #bucket-3 {
      margin-left: 0;
      margin-top: -110px;
    }
    #bucket-4 {
      margin-left: -85px;
      margin-top: 0px;
    }
}
@media screen and (min-width: 635px) and (max-width: 719px){
    .process-clearfix {
      display:block;
      height: 1px;
      width: 100px;
      clear: both;
      float: none;
    }
}
@media screen and (min-width: 720px){
    /* Fits 4 of buckets */
    #bucket-2 {
      margin-left: -75px;
      margin-top: 100px;
    }
    #bucket-3 {
      margin-left: -75px;
      margin-top: 0;
    }
    #bucket-4 {
      margin-left: -75px;
      margin-top: 100px;
    }
}
@media screen and (min-width: 1025px){
    p {font-size: 16px; line-height: 26px;}
    .hidden-desktop {display: none;}
	.mdl-layout__header {
	  display: none;
	}
	.drawer, .slate .drawer, .navy .drawer, .crimson .drawer {
	  background-color: transparent !important;
	  box-shadow: none;
	}
	.mobile-drawer-animation {
	  display: none;
	}
	.brand-lines {
	  display: block;
	}
	.fox {
	  display: block;
	}
	.drawer-header {
	  display: -webkit-flex;
	  display: -ms-flexbox;
	  display: flex;
	}
	.navigation {
	  background-color: transparent;
	}
    #work .mdl-grid {padding-left: 0;}
    #work .mdl-cell {max-width: 330px;}
    #work .mdl-grid .mdl-cell:first-child {margin-left: 0;}
    #work, #process, #contact {padding-right: 0;}
    #personality .mdl-cell {padding-right:60px;}
    #contact {padding-bottom: 40vh;}
    #contact .mdl-grid {padding-right: 0;}
    #contact .mdl-grid .mdl-cell:last-child {margin-right:0; position:relative;}
    /*#contact img {position: absolute; right: -8px; top: -110px; max-height: 300px;}*/
}
@media screen and (min-width: 1340px){
    .bucket {
      width: 260px;
      height: 260px;
    }
    .bucket-area {
      height: 260px;
    }
    .invision-tablet-wide {display: block;}
    .invision-tablet-wide-link {display: none;}
}