/* Globals
=====================================================================*/
html, body {
  background: #fff;
  color: #5c5d60;
  font-family: 'Arvo', serif;
  font-size: 14px;
}
ul {list-style: none;}

/* Utilities
=====================================================================*/
.red {background:red;}
.blue {background:blue;}
.yellow {background:yellow;}
.green {background:green;}
.purple {background:purple;}
.pink {background:pink;}

a {color:#fff;text-decoration: none;}
a:hover {color:#fff;text-decoration:none;}

img {color: transparent;}
.table-header {
  border-bottom: 2px solid #5c5d5f;
  padding-bottom: 15px;
  font-weight: bold;
}
.table-data {
  padding: 20px 0;
}

/* Typography
=====================================================================*/
h1 {font-family: 'Arvo', serif; font-size: 1.25em; color: #f05123;font-weight: 500;}
h2 {font-family: 'Oswald', serif; font-size: 1.2em; color: #5c5d60;font-weight: 500;margin:0;padding:0 0 10px 0;}
h3 {font-family: 'Oswald', serif; font-size: 1.1em; color: #5c5d60;font-weight: 500;margin:0;padding:0 0 5px 0;}

.plain-list {
  list-style: none;
  margin:0 0 20px 0;
  padding:0;
}

/* Grid Layout
=====================================================================*/
section {
  margin:0 0 30px 0;
}
.large-copy-container, .small-copy-container {
  padding:20px;
}
.divider {
  background-image: url("../img/global/paper-bg.png");
  background-color: #eae8ed;
  padding: 50px 0;
  margin-bottom: 20px;
}
button {
  background: #050028;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 1.5em;
  padding:20px 40px;
}

/* Navigation
=====================================================================*/
.large-navigation a {
  font-family: 'Oswald', sans-serif;
  font-size: .8em;
  color: #fff;
}
.boxed-nav-link a {
  color: #f05123;
}

/* Header
=====================================================================*/
.header-mobile {
  position: fixed;
  width:100%;
  padding: 25px 10px;
  background: #050028;
  z-index: 9999;
}
.logo {
}
.logo img {
  height: 40px;
}

/* Footer
=====================================================================*/
.footer {
  padding: 50px 10px;
  background: #050028;
  color:#fff;
}
.footer i {
  font-size: 2.5em;
  padding:0 10px;
}
.hashtags {
  padding-top:20px;
}
.hashtags span {
  padding: 0 5px;
}


/* Sections
=====================================================================*/

/* Intro */
.intro {
  padding: 110px 0 0 0;
}
.plus img {
  width:45px;
  margin: 15px 0;
}
.small-copy-container h1 {
  padding: 20px 0 0 0;
}

/* About */
.bio-container h2 {
  padding-bottom:0;
}
.bio-container {
  margin-bottom:50px;
}

/* Work */
#work .large-copy-container {
  padding-bottom: 0;
}
.client-logos img, .client-websites img, .client-print img{
  margin-bottom: 20px;
}
.client-websites img, .client-print img{
  border:1px solid #eae8ed;
}

.client-list .plain-list {
  column-count:2;
  -moz-column-count:2;
  -webkit-column-count:2;
}

/* Contact */
.contact-container a{
  color:#5c5d60;
}
.contact-container a:hover{
  color:#050028;
}
.contact-container:first-child {
  padding:0 0 50px 0;
}

/* References */
.testimonial {
  margin-bottom: 50px;
}

/* Holiday Cards */
#holiday {
  padding-top: 90px;
}
#holiday a.anchor {
    display: block;
    position: relative;
    top: -240px;
    visibility: hidden;
}
#holiday a {color:#f05123 !important;text-decoration: none !important;}
#holiday a:hover {color:#f05123 !important;text-decoration:none !important;}

.letterpress-cards img, .letterpress-cards-border img {
  margin-bottom: 20px;
}
.letterpress-cards-border img{
  border:1px solid #5c5d5f;
}

.holiday-illustrations .cell {
  padding-bottom: 40px;
}
.holiday-illustrations img {
  padding-bottom: 10px;
}
.holiday-swatches img {
  margin-bottom: 20px;
  border: 2px solid #5c5d5f;
}

/*=====================================================================
 NON-MOBILE
=====================================================================*/

@media (min-width: 1024px) {

  h1 {font-family: 'Arvo', serif; font-size: 1.5em; color: #f05123;font-weight: 500;}
  .table-info {padding-top:95px;}

  /* Navigation
  =====================================================================*/
  .large-navigation a {
    font-family: 'Oswald', sans-serif;
    font-size: 1em;
    color: #fff;
  }
  .boxed-nav-link a {
    color: #f05123;
    border: 1px solid #fff;
  }

  /* Grid Layout
  =====================================================================*/
  section {
    margin:0 0 50px 0;
  }

  .large-copy-container {
    padding:0 40px 40px 40px;
  }
  .small-copy-container {
    padding:0 12em 40px 12em;
  }
  .divider {
    background-image: url("../img/global/paper-bg.png");
    background-color: #eae8ed;
    padding: 50px 0;
    margin-bottom: 70px;
  }
  .holiday-card-container {
    padding: 0 140px 50px 140px !important;
  }


  /* Header
  =====================================================================*/
  .header {
    position: fixed;
    width:100%;
    padding: 25px 0;
    background: #050028;
  }
  .logo {
    padding: 0 0 25px 0;
  }
  .logo img {
    height: 110px;
  }


  /* Sections
  =====================================================================*/

  /* Intro */
  #home {
    padding-top: 219px;
  }
  #home .small-copy-container {
    padding:40px 12em;
  }
  .intro {
    padding: 40px 0 0 0;
  }
  .principal img {
    width: 80%;
  }
  .plus img {
    width:5vw;
  }
  .small-copy-container h1 {
    padding: 20px 0 0 0;
  }

  /* About */
  .bio-container {
    padding:0 20px;
  }

  /* Services */
  #services .small-copy-container p, #services .small-copy-container ul {
    padding-bottom: 20px;
  }

  /* Process */

  /* Work */
  #clients .large-copy-container {
    padding-bottom: 0;
  }
  .client-list .plain-list {
    column-count:3;
    -moz-column-count:3;
    -webkit-column-count:3;
  }

  /* Contact */

  /* Holiday Cards */
  #holiday {
    padding-top: 220px;
  }

}


/*=====================================================================
 MOBILE NAVIGATION
=====================================================================*/
aside {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(200deg, #050028, #050028, #050028);
	opacity: 0;
	visibility: hidden;
	transition: all .5s ease;
	z-index: 2;
}
.open {
	opacity: 1;
	visibility: visible;
}
nav {
	text-align: center;
	height: 95vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
nav	ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li  {
	align-items: center;
	flex: 1;
	line-height: 10vh;
}
nav ul li a {
  font-size: 1.75em;
  transition: all 0.5s ease;
  display: block;
  text-decoration: none;
  color: rgba(255, 255, 255, 1);
  font-family: 'Oswald', sans-serif;
}
nav ul li a:hover {
	color: rgba(255, 255, 255, .9);
	transform: scale(1.1);
}
nav ul li a:before {
	visibility: visible;
	transform: scaleX(1);
}

.close {
	position: fixed;
	top: 40px;
	right: 60px;
	color: white;
	z-index: 3;
	cursor: pointer;
	font-family: sans-serif;
  span,
  span:before,
  span:after {
    border-radius: 4px;
    height: 5px;
    width: 35px;
    background: white;
    position: absolute;
    display: block;
    content: '';
  }
  span {
    background: transparent;
  }
  span:before {
  transform: rotate(45deg);
  }
  span:after {
  transform: rotate(-45deg);
  }
}
.toggle-overlay {
  width: 40px;
  /* margin-top: 5px; */
  text-align: right;
  float: right;
}
.outer-close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 9999;
}