@import 'normalize.css';

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Fira Sans', Helvetica, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation: fade 1s ease-in-out;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Martel', Georgia, serif;
  font-weight: 400;
}

p {
  padding: 0 0 10px 0;
}

ul {
  list-style-type: none;
}

.anchor {
  display: block;
  position: relative;
  top: -120px;
  visibility: hidden;
}

a, a:visited {
  text-decoration: none;
  color: #414141;
  cursor: pointer;
}

.row-hr {
  border-top: .5px solid #dedede;
  margin: 50px 30px;
  text-align: center;
}

/* Common */

.pad-bot10 {
  padding: 0 0 10px 0;
}
.pad-bot15 {
  padding: 0 0 15px 0;
}
.pad-bot20 {
  padding: 0 0 20px 0;
}
.pad-bot30 {
  padding: 0 0 30px 0;
}
.pad-bot40 {
  padding: 0 0 40px 0;
}
.pad-bot50 {
  padding: 0 0 50px 0;
}
.pad-bot75 {
  padding: 0 0 75px 0;
}
.pad-bot100 {
  padding: 0 0 100px 0;
}
.pad-bot150 {
  padding: 0 0 150px 0;
}
.pad-bot200 {
  padding: 0 0 200px 0;
}

.pad-top10 {
  padding-top: 10px;
}
.pad-top15 {
  padding-top: 15px;
}
.pad-top20 {
  padding-top: 20px;
}
.pad-top30 {
  padding-top: 30px;
}
.pad-top40 {
  padding-top: 40px;
}
.pad-top50 {
  padding-top: 50px;
}
.pad-top75 {
  padding-top: 75px;
}
.pad-top100 {
  padding-top: 100px;
}
.pad-top150 {
  padding-top: 150px;
}
.pad-top200 {
  padding-top: 200px;
}
.pad-top250 {
  padding-top: 250px;
}
.pad-top300 {
  padding-top: 300px;
}

.red {
  color: #ff3465;
}
.red-dk {
  color: #cc0132;
}
.grey-txt {
  color: #303030;
}
.grey-hd {
  color: #414141;
}
.grey-med {
  color: #858585;
}
.grey-lt {
  color: #efefef;
}

/* Viewport Wrapper*/
.wrapper {
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;     
  flex-direction: column;
  min-height: 100vh;
} 

.home-intro-container {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;     
  flex-direction: column;
  background: #fcf3f1 url('../assets/home-bg.png');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  background-position: bottom;
  background-attachment: fixed;
  background-repeat: no-repeat;
      position: relative;
      z-index: 0;
}

.logo-container {
  width: 100%;
  margin-right: auto;
  display: flex;
  justify-content: flex-start;
  position: relative;
  z-index: 2;
}

.logo {
  padding: 20px 30px;
  cursor: pointer;
}

.menu-container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  display: block;
  z-index: 3;
}

/*menu default state*/
.menu-icon {
  height: 30px;
  width: 30px;
  position: fixed;
  right: 30px;
  top: 30px;
  cursor: pointer;
  z-index: 4;
}

.menu-icon__line {
  height: 2px;
  width: 30px;
  display: block;
  background-color: #1e2023;
  margin-bottom: 4px;
  transition: background-color .5s ease, -webkit-transform .2s ease, -moz-transform .2s ease;
  transition: transform .2s ease, background-color .5s ease;
  transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease, -moz-transform .2s ease;
}

.menu-icon__line-left {
  width: 15px;
}

.menu-icon__line-right {
  width: 15px;
  float: right;
}

/*nav default state*/
.nav {
  position: fixed;
  top: 0;
  z-index: 1;
}

.nav:before, .nav:after {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #fafafa;
  background: rgba(234, 234, 234, 0.2);
  z-index: -1;

  transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
      transition: -moz-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
      transition: -ms-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
      transition: -o-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;

  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s, 

  -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;

  -webkit-transform: translateX(0%) translateY(-100%);
      -moz-transform: translateX(0%) translateY(-100%);
      -ms-transform: translateX(0%) translateY(-100%);
      -o-transform: translateX(0%) translateY(-100%);
  transform: translateX(0%) translateY(-100%);
}

.nav:after {
  background: white;
  transition-delay: 0s;
}

.nav:before {
  transition-delay: .1s;
}

.nav__content {
  position: fixed;
  top: 45%;
  -webkit-transform: translate(0%, -50%);
      -moz-transform: translate(0%, -50%);
      -ms-transform: translate(0%, -50%);
      -o-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: 100%;
  text-align: center;
  font-size: calc(2vw + 10px);
  font-weight: 300;
  /*cursor: pointer;*/
  visibility: hidden;
}

.nav__list-item {
  position: relative;
  display: inline-block;
  transition-delay: 0.8s;
  opacity: 0;
  -webkit-transform: translate(0%, 100%);
      -moz-transform: translate(0%, 100%);
      -ms-transform: translate(0%, 100%);
      -o-transform: translate(0%, 100%);
          transform: translate(0%, 100%);
  transition: opacity .2s ease, -webkit-transform .3s ease;
  transition: opacity .2s ease, transform .3s ease;
  transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease;
  margin-right: 25px;
}

.nav__list-item:before {
  content: "";
  position: absolute;
  background: #000000;
  width: 20px;
  height: 1px;
  top: 100%;
  -webkit-transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    -o-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  transition: all .3s ease; 
  z-index: -1;
}

.nav__list-item:hover:before {
  width: 100%;
}

/*active state*/
body.nav-active .menu-icon__line {
  background-color: #000;
  -webkit-transform: translateX(0px) rotate(-45deg);
  -moz-transform: translateX(0px) rotate(-45deg);
  -ms-transform: translateX(0px) rotate(-45deg);
  -o-transform: translateX(0px) rotate(-45deg);
  transform: translateX(0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
  -webkit-transform: translateX(1px) rotate(45deg);
  -moz-transform: translateX(1px) rotate(45deg);
  -ms-transform: translateX(1px) rotate(45deg);
  -o-transform: translateX(1px) rotate(45deg);
  transform: translateX(1px) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
  -webkit-transform: translateX(-2px) rotate(45deg);
  -moz-transform: translateX(-2px) rotate(45deg);
  -ms-transform: translateX(-2px) rotate(45deg);
  -o-transform: translateX(-2px) rotate(45deg);
  transform: translateX(-2px) rotate(45deg);
}
body.nav-active .nav {
  visibility: visible;
}
body.nav-active .nav:before, body.nav-active .nav:after {
  -webkit-transform: translateX(0%) translateY(0%);
  -moz-transform: translateX(0%) translateY(0%);
  -ms-transform: translateX(0%) translateY(0%);
  -o-transform: translateX(0%) translateY(0%);
  transform: translateX(0%) translateY(0%);
}
body.nav-active .nav:after {
  transition-delay: .1s;
}
body.nav-active .nav:before {
  transition-delay: 0s;
}

    body.nav-active .nav__content {
      cursor: pointer;
    	visibility: visible;
    }

body.nav-active .nav__list-item {
  opacity: 1;
  -webkit-transform: translateX(0%);
      -moz-transform: translateX(0%);
      -ms-transform: translateX(0%);
      -o-transform: translateX(0%);
  transform: translateX(0%);
  transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, transform .3s ease, color .3s ease;
  transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
  color: #414141; text-decoration: none;
}
body.nav-active .nav__list-item:nth-child(0) {
  transition-delay: 0.5s;
}
body.nav-active .nav__list-item:nth-child(1) {
  transition-delay: 0.6s;
}
body.nav-active .nav__list-item:nth-child(2) {
  transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(3) {
  transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(4) {
  transition-delay: 0.9s;
}
body.nav-active .nav__list-item a:hover {
  color: #fc5558; text-decoration: none;
}


/*---Home Intro---*/

.site-content {
  max-width: 1024px;
  height: 45vh;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.intro-suz {
  font-family: 'Fira Sans', Helvetica, sans-serif;
  font-weight: 400;
  color: #212121;
  line-height: 1.5;
  letter-spacing: -.01em;
  font-size: calc(1vw + 13px);
  text-align: center;
	text-transform: uppercase;
  padding: 15px 50px 10px;
  margin: 20% auto 0;
  animation-delay: 0.1s;
}

.site-content__headline {
  font-family: 'Fira Sans Extra Condensed', Helvetica, sans-serif;
  font-weight: 600;
  color: #212121;
  font-size: calc(6vw + 26px);
  line-height: 1.15;
  /*letter-spacing: .02em;*/
  text-align: center;
  text-transform: uppercase;
  padding: 0 50px; 
  margin: 0 auto;
  animation-delay:0.3s;
}

.intro-sub {
  font-family: 'Fira Sans', Helvetica, sans-serif;
  font-weight: 400;
  color: #212121;
  line-height: 1.5;
  letter-spacing: -.01em;
  font-size: calc(1vw + 13px);
  text-align: center;
	text-transform: uppercase;
  padding: 20px 50px 15px;
  margin-bottom: 1rem;
  animation-delay: 0.8s;
}

.intro-browse  {
  font-family: 'Fira Sans', Helvetica, sans-serif;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: .1rem;
  font-size: .9rem;
  text-transform: uppercase;
  text-align: center;
  animation-delay: 1.5s;
}

.intro-browse a {
  color: #ffffff;
  background-color: #ff3465;
  padding: 16px 20px;
}

.intro-browse a:hover{
  color: #ffffff; 
  background-color: #CC0132;
  padding: 16px 20px;
}

.arrow-down { 
  vertical-align: middle;
  padding-left: 6px;
}

/*---Work Home---*/

.work-container {
   max-width: 100%;
   margin: 1em auto;
   display: block;
}

#work {
  position: relative;
  top: 50px;
}

.anchor-row {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0;
}

.featured {
  font-family: "Fira Sans", Helvetica, sans-serif;
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: #414141;
  text-align: center;
  text-transform: uppercase;
  padding: 30px 0;
}

.caret-down-color {
  color: #fc5558;
  font-size: 1.5em;
  padding-top: 15px;
}

/* caret bounce */
.bounce {
  -moz-animation: bounce 2s ;
  -webkit-animation: bounce 2s ;
  animation: bounce 2s ;
  animation-delay:3s;
  animation-iteration-count: 2;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 50px 0;
}

/* two equal columns side by side*/
.column1 {
  flex: 50%;
  max-width: 50%;
  padding: 0 15px 0 0;
}

.column2 {
  flex: 50%;
  max-width: 50%;
  padding: 0 0 0 15px;
}

.column1 .column2 img {
  margin-top: 8px;
  vertical-align: middle;
  padding: 0;
}

/* .shrink for med - lg displays, see media query*/

.project-name {
  margin-top: 20px;
  font-family: 'Fira Sans', Helvetica, sans-serif;
  font-weight: 400;
  text-align: center;
  padding: 0 10px;  
}

.project-name a{
  color:#414141;
  text-decoration: none;
  cursor: pointer;
}

.project-name a:hover{
  color:#fc5558;
  padding: 5px;
  cursor: pointer;
}

.project-caption {
  font-family: 'Fira Sans', Helvetica, sans-serif;
  font-weight: 400;
  color:#969696;
  text-align: center;
  padding: 5px 0;
  font-size: .9em;
  visibility: hidden;
}

/*---Individual Work Pages---*/

.container-pages {
  max-width: 100%;
  margin: auto;
  display: block;
}

.row-work-pages {
  display: flex;
  flex-wrap: wrap;
  padding: 50px 0;
}

.column1-work-pages {
  flex: 50%;
  max-width: 50%;
  padding: 0 30px;
}

.column2-work-pages {
  flex: 50%;
  max-width: 50%;
  padding: 0 30px;
}

.order{
  order: 2;
}

.project-intro {
  font-family: 'Fira Sans Extra Condensed', Helvetica, sans-serif;
  font-weight: 600;
  color: #414141;
  text-align: left; 
  font-size: calc(4vw + 24px);   
  line-height: 1.2;
  letter-spacing: .02em;
  margin: .5em 0; 
}

.project-type {
  font-weight: 400;
  text-align: left;
  color: #414141; 
  font-size: calc(4vw + 15px);   
  line-height: 1.2;
  letter-spacing: -.02em; 
}

.project-description {
  display: inline-block;
  font-family: 'Fira Sans', Helvetica, sans-serif;
  font-weight: 300;
  text-align: left;
  color: #858585;
  font-size: calc(3vw + 10px);   
  line-height: 1.25;
  letter-spacing: -.03em;
  padding-top:5px;
}

.project-text {
  font-family: 'Fira Sans', Helvetica, sans-serif;
  font-weight: 300;
  color:#303030;
  text-align: left;
  font-size: 1em;
  line-height: 1.5;
  padding: 0 0 15px 0;
}

.project-tag {
  font-family: 'Fira Sans', Helvetica, sans-serif;
  font-weight: 400;
  color:#858585;
  text-align: left;
  font-size: .8em;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  padding: 10px 0 30px 0;
}

.browse-more {
  font-weight: 400;
  text-align: left;
  color: #414141;
  font-size: 1.7em;    
  line-height: 1.2;
  letter-spacing: -.03em;
  padding: 0 0 30px 0;
}

.project-list-current {
  font-family: 'Fira Sans', Helvetica, sans-serif;
  font-weight: 400;
  color:#cc0132;
  text-align: left;
  font-size: .8em;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
  padding: 10px 0 10px 0;
}

.project-list-current a:link {
  color:#cc0132;
  text-decoration: none;
  cursor: pointer;
  padding: 5px;
}

.project-list-current a:visited {
  color:#cc0132;
  text-decoration: none;
  cursor: pointer;
  padding: 5px;
}

.project-list-current a:hover {
  color:#cc0132;
  background-color: #fcf4f8;
  cursor: pointer;
  padding: 5px;
}

.project-list {
  font-family: 'Fira Sans', Helvetica, sans-serif;
  font-weight: 400;
  color:#858585;
  text-align: left;
  font-size: .8em;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
  padding: 10px 0 10px 0;
}

.project-list a:link {
  color:#858585;
  text-decoration: none;
  cursor: pointer;
  padding: 5px;
}

.project-list a:visited {
  color:#858585;
  text-decoration: none;
  cursor: pointer;
  padding: 5px;
}

.project-list a:hover {
  color:#ffffff;
  background-color: #ff3465;
  cursor: pointer;
  padding: 5px;
}

.see-all-sm {
  font-family: 'Fira Sans Extra Condensed', Helvetica, sans-serif;
  font-weight: 600;
  color: #303030;
  text-align: left;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  padding: 0 0 10px 0;
}

.see-all-sm a {
  color:#303030;
  text-decoration: none;
  cursor: pointer;
  padding: 5px;
}

.see-all-sm a:hover{
  color:#ffffff;
  background-color: #ff3465;
  padding: 5px;
  cursor: pointer;
}

/*---About Page---*/
.about-wrapper {
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;     
  flex-direction: column;
  margin: 0 auto;
  background: #fcf3f1 url('../assets/about-bg.png');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: bottom;
  background-attachment: fixed;
  background-repeat: no-repeat;
      position: relative;
      z-index: 0;
}

.row-about-page {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 20px;
}

.about-container {
  max-width: 1024px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  margin: 1em auto;
}


.about-sub {
  font-family: 'Fira Sans', Helvetica, sans-serif;
  font-weight: 400;
  text-align: center;
  color: #303030;
  font-size: calc(1vw + 12px);  
  line-height: 1.5;
  letter-spacing: -.01em;
	text-transform: uppercase;
  margin: 0 auto; 
  padding: 30px 30px 0 30px;
}

.about-headline {
  font-family: 'Fira Sans Extra Condensed', Helvetica, sans-serif;
  font-weight: 600;
  color: #212121;
  font-size: calc(6vw + 24px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: center;
  margin: .1em 0 ;
  padding: 0 50px;
}

.about-text {
  font-family: 'Fira Sans', Helvetica, sans-serif;
  font-weight: 300;
  text-align: left;
  color: #212121;
  font-size: 1em;
  line-height: 1.6;
  letter-spacing: 0.01em; 
  padding-top:15px;
}

.about-text a{
  font-weight: 400;
  color:#303030;
  text-decoration: none;
  border-bottom: 1px solid #303030;
  cursor: pointer;
} 

.about-text a:hover{
  color:#303030;
  background-color: #ffffff;
  border: none;
  cursor: pointer;
  padding: 5px;  
}

.work-includes {
  font-family: 'Fira Sans', Helvetica, sans-serif;
  font-weight: 400;
  color:212121;
  text-align: left;
  font-size: .8em;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  padding: 18px 0 25px 0;
}

.about-tags {
  font-family: 'Martel', Georgia, serif;
  font-weight: 400;
  text-align: left;
  color: #212121;
  font-size: calc(1vw + 13px);
  line-height: 1.7;
  letter-spacing: -0.01em;
}

.browse-work-container {
  max-width: 1024px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 70px auto 20px;
}

.browse-back  {
  font-family: 'Fira Sans', Helvetica, sans-serif;
  font-weight: 400;
  color: #303030;
  line-height: 1.2;
  letter-spacing: .1rem;
  font-size: .9rem;
  text-transform: uppercase;
  text-align: center;
  animation-delay: 1.5s;
}

.browse-back a {
  color: #ffffff;
  background-color: #ff3465;
  padding: 16px 20px;
}

.browse-back a:hover{
  color: #ffffff;
  /*border: 2px solid #303030;*/
  background-color: #cc0132;
  padding: 16px 20px;
}

.arrow-right { 
  /*vertical-align: bottom;*/
	vertical-align: middle;
  padding-left: 12px;
}

/*---Contact Form---*/
.contact-wrapper {
  width: 100%;
  min-height: 100vh; 
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;     
  flex-direction: column;
  margin: 0 auto;
  background-color: #fcf3f1;
} 

.contact-container {
  max-width: 1024px;
  margin: 20px auto 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.contact-headline {
  font-family: 'Fira Sans Extra Condensed', Helvetica, sans-serif;
  font-weight: 600;
  color: #414141;
  font-size: calc(6vw + 24px);
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
	text-transform:uppercase;
  padding: 0 50px;
  margin: 0 auto;
}

form-container {
  max-width: 90%;
  margin: 0 auto;
  display: block;
}

form {
  position: relative;
  margin: 0 auto;
  width: 80vw;
}

label {
  display: block;
  font-size: 1em;
  color: #858585; 
  text-align: center;
}

input, textarea {
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  color: #414141;
  width:100%;
  background: transparent;
  border: 1px solid #858585;
  padding: 15px 20px;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: none;
  border-radius: 0;
}

textarea {
  /* Align multiline text fields with their label */
  vertical-align: top;
  /* Allow room to type some text */
  height: 6em;
  /* Allow resize textarea vertically, works on Chrome FF Safari */     
  resize: vertical;
}

button {
  border: 0;
}

/*button:focus {
}*/

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.margin-top-n20 {
  margin-top: -20px;
}

#field_name {
  border-color: #858585;
  background: #ffffff;
}

#field_name:focus, active {
  background: #ffffff;
}

#field_email {
  border-color: #858585;
  background: #ffffff;
}

#field_email:focus, active {
  background: #ffffff;
}

#field_message {
  border-color: #858585;
  background: #ffffff;
}

#field_message:focus, active {
  background: #ffffff;
}

.form-button-container{
  text-align: center;
  padding: 10px 0 0 0;
}

.form-button{
  font-family: 'Martel', Georgia, serif;
  font-weight: 400;
  color: #ffffff; 
  font-size: calc(3vw + 12px);  
  line-height: 1.5;
  letter-spacing: -.02em; 
  text-align: center;
  text-decoration: none;
  background: #ff3465;
  border: none;
  border-radius: 0;
  padding: .7rem 1.2rem .5rem;
  margin: 0;
  cursor: pointer;
  transition: background 250ms ease-in-out, transform 150ms ease;
  -webkit-appearance: none;
    -moz-appearance: none;
}

.form-button:hover,
.form-button:focus {
  background-color: #cc0132;
}

.form-button:active{
  transform: scale(0.98);
}


/*---Footer---*/ 

.footer-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; /* Prevent some browsers from letting these items shrink to smaller than their content's default minimum size. */
  padding: 30px;
  margin-top: auto;
  background-color: transparent;
}

.footer-secondary {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
}

.copyright {
  flex: 0 0 auto;     
  font-weight: 400;
  font-size: .7em;      
  color: #6e6e6e;         
  text-align: left; 
  padding: 20px 0; 
}

.copyright-icon {
  vertical-align: -0.3em;
}

.copyright-w {
  flex: 0 0 auto;     
  font-weight: 400; 
  font-size: .7em;     
  color: #ffffff;         
  text-align: left;        
  padding: 20px 0; 
}

.chevron-grey {
  color: #969696;
  font-size: 0.9em;
  padding-right: 15px;
}

.chevron-w {
  color: #ffffff;
  font-size: 0.9em;
  padding-right: 15px;
}

.contact-sm {
  flex: 0 0 auto;
  font-family: 'Fira Sans Extra Condensed', Helvetica, sans-serif;
  font-weight: 600;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  color: #414141;
  text-align: left;
  text-transform: uppercase;
  padding: 5px;
} 

.contact-sm a{
  color:#414141;
  text-decoration: none;
  cursor: pointer;
  padding: 5px;
}

.contact-sm a:hover {
  color:#ffffff;
  background-color: #fc5558;
  padding: 5px;
  cursor: pointer;
}

.contact-w {
  flex: 0 0 auto;
  font-family: 'Fira Sans Extra Condensed', Helvetica, sans-serif;
  font-weight: 600;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  color: #ffffff;
  text-align: left;
  text-transform: uppercase;
  padding: 5px;
} 

.contact-w a{
  color:#ffffff;
  text-decoration: none;
  cursor: pointer;
  padding: 5px;
}

.contact-w a:hover {
  color:#303030;
  background-color: #ffffff;
  padding: 5px;
  cursor: pointer;
}

.contact-k-w {
  flex: 0 0 auto;
  font-family: 'Fira Sans Extra Condensed', Helvetica, sans-serif;
  font-weight: 600;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  color: #303030;
  text-align: left;
  text-transform: uppercase;
  padding: 5px;
} 

.contact-k-w a{
  color:#303030;
  text-decoration: none;
  cursor: pointer;
  padding: 5px;
}

.contact-k-w a:hover {
  color:#303030;
  background-color: #ffffff;
  padding: 5px;
  cursor: pointer;
}

.social-icons a{
  cursor: pointer;
}

.social-icons a:hover {
  opacity: 0.5;
  cursor: pointer;
}


/* === Small Displays one col layout === */
@media screen and (max-width: 600px) {
    .row {
      display: flex;
      flex-wrap: wrap;
      padding: 30px 0;
    }

    .column1 {
      flex: 100%;
      max-width: 100%;
      padding: 0;
    }

    .column2 {
      flex: 100%;
      max-width: 100%;
      padding: 0;
    }

    .column1-work-pages {
      flex: 100%;
      max-width: 100%;
    }

    .column2-work-pages {
      flex: 100%;
      max-width: 100%;
    }
}

/* === Small Displays two col layout === */
@media screen and (min-width: 601px) {

    .site-content__headline {
      font-size: calc(5vw + 25px);
    }

    .intro-sub .intro-suz .about-sub {
      font-size: calc(2vw + 8px);
    }

    .intro-suz {
      margin: 10% auto 0;
    }

    .order{
      order: initial;
    }

    .project-type { 
      font-size: calc(3vw + 12px);   
      line-height: 1.2;
      letter-spacing: -.02em; 
    }

    .about-text { 
      font-size: 1.2rem; 
      line-height: 1.5;
      letter-spacing: -.01em;
    }

    form-container {
      max-width: 1024px;
    }

    form {
      width: 60vw
    }

}


/* === Medium Displays === */
/* === add padding on sides, show captions === */
@media screen and (min-width: 800px) {

    .logo-container {
      max-width: 1024px;
      margin: 0 auto;
      display: block;
      position: relative;
      z-index: 2;
    }

    .logo {
      padding: 25px 25px 25px 30px;
      cursor: pointer;
    }

    .menu-container {
      max-width: 1024px;
      margin: 0 auto;
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 3;
    }

    .menu-icon {
      position: absolute; 
      top: 30px;
      margin-left: auto;
      cursor: pointer;
      z-index: 4;
    }

    .site-content {
      margin: 30px auto 0;
    }

    .site-content__headline {
      font-size: calc(5vw + 24px);
    }

    .intro-sub .intro-suz {
      font-size: calc(2vw + 8px);
      letter-spacing: -0.02em;
      margin-bottom: 2em;
    }

    .intro-browse {
      padding-top: 30px;
    }
    
    .work-container {
      max-width: 1300px;
      position: relative;
      margin: 2em auto;
      display: block;
    } 

    .column1 {
      flex: 50%;
      max-width: 50%;
      padding: 0 15px 0 50px;
    }

    .column2 {
      flex: 50%;
      max-width: 50%;
      padding: 0 50px 0 15px;
    }

    .shrink  {
      -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
      transition: all 0.2s linear;
      -webkit-transform: scale3d(1, 1, 1);
          -moz-transform: scale3d(1, 1, 1);
          -ms-transform: scale3d(1, 1, 1);
          -o-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }

    .shrink:hover  {
      -webkit-transform: scale3d(.98, .98, 1);
          -moz-transform: scale3d(.98, .98, 1);
          -ms-transform: scale3d(.98, .98, 1);
          -o-transform: scale3d(.98, .98, 1);
      transform: scale3d(.98, .98, 1);
    }

    .project-caption {
      visibility: visible;
    }

    .container-pages {
      max-width: 1024px;
      padding-top: 30px;
    }

    .row-work-pages {
      max-width: 1024px;
      display: flex;
      flex-wrap: wrap;
      padding: 50px 0;
    }

    .column1-work-pages {
      flex: 50%;
      max-width: 50%;
      padding: 0 30px;
    }

    .column2-work-pages {
      flex: 50%;
      max-width: 50%;
      padding: 0 30px;
    }

    .order{
      order: initial;
    }

    .project-intro {
      font-family: 'Fira Sans Extra Condensed', Helvetica, sans-serif;
      font-weight: 600;
      color: #414141;
      text-align: left;
      font-size: calc(4vw + 20px);    
      line-height: 1.15;
      letter-spacing: .01em;
    }

    .project-type {
      font-weight: 400;
      color: #414141;
      text-align: left;
      font-size: calc(2vw + 17px);  
      line-height: 1.2;
      letter-spacing: -.03em;
    }

    .project-description {
      font-family: 'Fira Sans', Helvetica, sans-serif;
      font-weight: 300;
      text-align: left;
      color: #858585;
      font-size: calc(1vw + 15px);   
      line-height: 1.2;
      letter-spacing: -.03em;
    }

    .project-text {
      font-size: 1.1em;
      line-height: 1.5;
    }

    .about-headline {
      font-size: calc(5vw + 18px);
      padding: 0 60px;
    }

    .about-text {
      font-weight: 300;
      font-size: 1.1rem;
      line-height: 1.5;
    }

    .about-tags {
      font-size: calc(1vw + 10px);  
      line-height: 1.6;
      letter-spacing: -.01em;
    }

    form-container {
      max-width: 1024px;
    }

    form {
      width: 50vw
    }

    .contact-subhead { 
        font-size: calc(3vw + 4px);
    }

    .form-button{ 
      font-size: calc(2vw + 4px);
      padding: .7rem 1.2rem .5rem;
    }

    .footer-secondary {
      max-width: 1024px;
      padding: 50px 30px 0 30px;
    }

}


/*=== Large Displays ===*/
@media screen and (min-width: 1300px) {

    .site-content {
      margin: 50px auto 0;
    }

    .site-content__headline {
      font-size: calc(5vw + 18px);
    }

    .intro-sub .intro-suz {
      font-size: calc(2vw + 5px);
      letter-spacing: -0.02em;
      margin-bottom: 2.5em;
    }

    .intro-browse {
      padding-top: 30px;
    }

    .work-container {
      position: relative;
      margin: 2em auto;
      display: block;
    }

    .project-intro {
      font-family: 'Fira Sans Extra Condensed', Helvetica, sans-serif;
      font-weight: 600;
      color: #414141;
      text-align: left;
      font-size: calc(3vw + 15px);    
      line-height: 1.15;
    }

    .project-type {
      font-weight: 400;
      color: #414141;
      text-align: left; 
      font-size: calc(2vw + 5px);   
      line-height: 1.2;
      letter-spacing: -.03em;
    }

    .about-headline {
      font-size: calc(5vw + 6px);
    }

    .about-sub {
      font-size: calc(2vw + 4px);
      padding: 0 60px;
    }
    
    .about-text {
      font-size: calc(1vw + 5px);
    }

    .about-tags {
      font-size: calc(1vw + 8px);  
      line-height: 1.7;
      letter-spacing: -.01em;
    }

    form-container {
       max-width: 1024px;
    }

    form {
      width: 33vw
    }

    .form-button{ 
      font-size: calc(2vw + 4px);
      padding: .7rem 1.2rem .5rem;
    }
    
    .contact-headline {
      font-size: calc(5vw + 5px);
    }

    .contact-subhead { 
      font-size: calc(3vw + 2px);
    }

    .form-button{
      font-size: calc(2vw + 4px);
    }

}