html,body {margin:0;padding:0;}

::-moz-selection {background: #DC3008; color:#fff;}
::selection {background: #DC3008; color:#fff;}

body {
  background:#e8e8e8;
  font-family: nimbus-sans, sans-serif;
  font-weight: 400;
  color:#363636;
  font-size:17px;
  line-height:1.75;
}

h1, h2, h3 {
  font-family: hero-new, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4em;
}

h2 {font-size:14px;}

a {
  text-decoration: none;
  color:#363636;
  transition: color .1s;
}

a:hover {
  color:#e16148;
}

p a {border-bottom:1px solid rgba(54,54,54,0.5);}

img {
  max-width:100%;
  height:auto;
}

body.work {
  background:#e8e8e8 url("img/mont_1.png") top no-repeat;
}

.flex {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.atmosphere {
  max-width:1440px;
  margin:0 auto;
}

@media (max-width:1480px){
  .atmosphere {
    max-width:none;
    margin:0 20px;
  }
}

.thermosphere, .stratosphere.work, .troposphere {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}


/* Thermosphere */
.thermosphere {
  align-content: stretch;
  align-items: center;
  height:49px;
  margin:30px auto;
  background:#fff;
  font-size:14px;
  font-family: hero-new, sans-serif;
  font-weight: 700;
  letter-spacing: .4em;
  text-transform:uppercase;
}

nav ul {
  margin:0 0 0 30px;
  padding:0;
  list-style:none;
}

nav li {display:inline-block;}

nav li a {
  color: #b1b1b1;
  margin-right:60px;
}

nav li.current a {color:#555555;}

.thermosphere .logo {margin-right:30px;}

@media (max-width:860px){
  .thermosphere {
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    height:auto;
    padding:10px 0;
  }

  .thermosphere .logo {
    width:100%;
    margin:5px 20px 0;
    border-top:1px solid #ccc;
    padding-top:5px;
  }

  nav ul {margin-left:20px;}
  nav li a {margin-right:10px;}
}

/* Stratosphere */

.stratosphere.work {
    align-content: stretch;
    align-items: flex-start;
}

.item {
  background:#fff;
  padding:40px 120px 0 120px;
  margin-top:30px;
  text-align: center;
}

.item.half, .work .text {
  padding:30px 30px 0 30px;
  width:calc(50% - 75px);
}

.title h1 {
  font-size:22px;
  margin-top:50px;
}

.title .year, .title .skills, .title .link {
  opacity: 0.8;
  font-size:16px;
  line-height: 3em;
}

.description h2 {
  font-size:14px;
  margin-top:50px;
}

.title .link::before {
  content:"";
  display:inline-block;
  width:14px;
  height:14px;
  background:url("img/link.svg") center no-repeat;
  background-size:contain;
  margin-right:10px;
  vertical-align: middle;
}

.work .collection {
  width:calc(25% - 23px);
  max-width:337px;
  margin-bottom:30px;
}

.collection img {
  max-width:calc(100% - 60px);
  height:auto;
  padding:30px 30px 0 30px;
  background:#fff;
  margin-bottom:20px;
}

.collection .title {
  font-family: hero-new, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4em;
  font-size:14px;
  margin-left:30px;
}

.collection .skills {
  opacity: 0.8;
  font-size:16px;
  margin-left:30px;
}

.return {
  width:100%;
  font-family: hero-new, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4em;
  font-size:14px;
  margin:120px auto 0;
  text-align: center;
}

@media (max-width:1080px){
  .item {
    padding:20px 20px 0 20px;
    margin-top:20px;
  }

  .item.half, .work .text {
    padding:20px 20px 0 20px;
    width:100%;
  }

  .work .collection {
    width:calc(50% - 10px);
    max-width:none;
  }

  .collection img {
    max-width:calc(100% - 40px);
    padding:20px 20px 0 20px;
  }
}

@media (max-width:600px){
  .description h2 {margin-top:20px;}
  .work .collection {width:100%;}
}

/* About */

.bigpicture {
  text-align: center;
  background:#2c2c2c url("img/lunar-ceiling.jpg") top no-repeat;
  background-size:contain;
  color:#fff;
  padding:180px 60px;
}

.bigpicture h1 {font-size:18px;}
.bigpicture h2 {margin-top:120px;}
.bigpicture p,
.bigpicture p a {color:#bebebe;}
.bigpicture p a:hover {color:#e16148;}

.bigpicture sup {
  font-size:7px;
  font-weight:400;
}

h2.philosophy + p {
  font-size:54px;
  line-height: 1.25em;
  color:#fff;
  margin:30px auto;
  font-family: hero-new, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4em;
  text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.8);
}

.bigpicture p em, .bigpicture .nutshell + p {
  font-style:normal;
  font-family: Courier New, monospace;
  font-size:15px;
}

h2.nutshell::before {
  content: "";
  display:block;
  width:54px;
  height:40px;
  margin:0 auto 10px;
  background: url(img/nutshell.svg) top no-repeat;
}

.toughnut {
  border: 1px solid #929292;
  padding:90px 60px;
}

.toughnut h2 {text-align: center;}

.toughnut p {
  max-width:600px;
  margin:1.5em auto;
}

h2.nutshell.big::before {
  width:74px;
  height:60px;
  background: url(img/larger-nutshell.svg) top no-repeat;
}

.services {margin:90px auto;}

.services h2 {
  text-align: center;
  margin-bottom:40px;
}

.services .flex div,
.personal .flex div {width:30%;}
.services h3 {font-size:16px;}

.personal h3 {
  font-size:14px;
  font-family: Courier New, monospace;
  text-transform: none;
  letter-spacing: normal;
}

.personal h3::first-line {
  font-size:16px;
  font-family: hero-new, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4em;
}

.services ul, .personal ul {
  margin:0;
  padding:0;
  list-style: none;
}

.services li, .personal li {
  margin:0;
  padding:8px 0;
  border-bottom: 1px solid #bababa;
  line-height: 1.25em;
}

.services li:last-child, .personal li:last-child {border-bottom:none;}

.disch {
  background:#fff;
  padding:90px;
  margin: 90px auto;
  text-align:center;
}

.disch p {
  max-width:600px;
  margin:1em auto;
  font-family: Courier New, monospace;
}

.disch p.credit {
  font-family: hero-new, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4em;
  font-size:12px;
  margin-top:40px;
}

@media (max-width:800px){
  .bigpicture {padding:90px 40px;}
  .bigpicture h2 {margin-top:60px;}

  h2.philosophy + p {
    font-size:36px;
    text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.8);
  }

  .toughnut {
    border: 1px solid #929292;
    padding:60px 40px;
  }

  .toughnut p {max-width:none;}
  .services {margin:60px auto;}
  .services h2 {text-align: left;}
  .services .flex div,.personal .flex div {width:100%;}

  .disch {
    padding:30px;
    margin: 60px auto;
  }

  .disch p {
    max-width:none;
    font-size:14px;
  }

  .flex {display:block;}
  .flex div {margin-bottom:40px;}
}

/* Contact */

.contactzone {
  padding:60px;
  background:#2c2c2c;
  text-align: center;
  color:#fff;
  margin-bottom:60px;
}

ul.notes {
	margin:0 auto;
	padding:0;
	list-style:none;
  max-width:600px;
}

ul.notes li {
	border-bottom:1px solid #bebebe;
	padding: 6px 0 6px 120px;
}

ul.notes li:last-child {border:none;}

ul.notes li span {
	font-family: hero-new, sans-serif;
	font-weight:700;
	text-transform: uppercase;
	font-size:14px;
	letter-spacing:0.4em;
	display:inline-block;
	width:120px;
	margin-left:-120px;
}

/* Home */
.orbital.mechanics {
  background:#2c2c2c url(img/one-small-toast.jpg) no-repeat;
  background-size:cover;
  padding:200px 90px;
  text-align: center;
  color:#fff;
}

.orbital.mechanics h1 {
  font-family: hero-new, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4em;
  text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.8);
  font-size:54px;
}

.orbital.mechanics p {
  font-family: Courier New, monospace;
  font-size:16px;
  opacity: 0.8;
  margin:80px auto;
}

a.btn {
  display:inline-block;
  padding:8px 20px;
  border:2px solid #fff;
  color:#fff;
}

a.btn:hover {
  background:#e16148;
  border-color:#e16148;
}

@media (max-width:800px){
  .orbital.mechanics {padding:100px 40px;}
  .orbital.mechanics h1 {font-size:32px;}
}


/* Troposphere */
.troposphere {
  margin:120px auto;
  text-align: center;
  align-content: stretch;
  align-items: flex-start;
  font-size:14px;
  border-top:1px solid #aaa;
  padding-top:40px;
}

.who::before {
  content:"";
  display:inline-block;
  width:24px;
  height:24px;
  background:url("img/toaster-1.png") center no-repeat;
  background-size:contain;
  margin-right:15px;
  vertical-align: middle;
}

.up {
  font-family: hero-new, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4em;
}

@media (max-width:600px){
  .troposphere {margin:50px auto;}
}