/*
 * Globals
 */

/* Fonts */

@font-face {
    font-family: 'SilkaBold';
    src: url('fonts/silka-bold-webfont.eot');
    src: url('fonts/silka-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/silka-bold-webfont.woff2') format('woff2'),
         url('fonts/silka-bold-webfont.woff') format('woff'),
         url('fonts/silka-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SilkaLight';
    src: url('fonts/silka-light-webfont.eot');
    src: url('fonts/silka-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/silka-light-webfont.woff2') format('woff2'),
         url('fonts/silka-light-webfont.woff') format('woff'),
         url('fonts/silka-light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SilkaMedium';
    src: url('fonts/silka-medium-webfont.eot');
    src: url('fonts/silka-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/silka-medium-webfont.woff2') format('woff2'),
         url('fonts/silka-medium-webfont.woff') format('woff'),
         url('fonts/silka-medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SilkaRegular';
    src: url('fonts/silka-regular-webfont.eot');
    src: url('fonts/silka-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/silka-regular-webfont.woff2') format('woff2'),
         url('fonts/silka-regular-webfont.woff') format('woff'),
         url('fonts/silka-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SilkaSemibold';
    src: url('fonts/silka-semibold-webfont.eot');
    src: url('fonts/silka-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/silka-semibold-webfont.woff2') format('woff2'),
         url('fonts/silka-semibold-webfont.woff') format('woff'),
         url('fonts/silka-semibold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SilkaThin';
    src: url('fonts/silka-thin-webfont.eot');
    src: url('fonts/silka-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/silka-thin-webfont.woff2') format('woff2'),
         url('fonts/silka-thin-webfont.woff') format('woff'),
         url('fonts/silka-thin-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Headings & Content */

body.yellow-theme h1 {
	font-family: 'SilkaRegular', Helvetica, sans-serif;
	line-height: 1.4em;
}

body.yellow-theme h2 {
	font-family: 'SilkaRegular', Helvetica, sans-serif;
	line-height: 120%;
	padding-bottom: 20px;
}

body.yellow-theme h2 sup {
	font-size: 1.2rem;
}

body.yellow-theme h3 {
	font-family: 'SilkaRegular', Helvetica, sans-serif;
	padding-bottom: 18px;
}

body.yellow-theme #services h3 {
	font-family: 'SilkaMedium', Helvetica, sans-serif;
}

body.yellow-theme h4 {
	font-family: 'SilkaThin', Helvetica, sans-serif;
}

body.yellow-theme p {
	font-family: 'SilkaLight', Helvetica, sans-serif;
	font-size: 1.4rem;
	padding-bottom: 15px;
}

body.yellow-theme p.larger {
	font-size: 1.6rem;
}

body.yellow-theme p.make-font-thin {
	font-family: 'SilkaThin', Helvetica, sans-serif;
}

body.yellow-theme .headline-stat {
	font-family: 'SilkaSemibold', Helvetica, sans-serif;
	font-size: 6.0rem;
}

/* Links & tags */

a,
a:hover {
	color: #000;
}

a.yellow-theme-btn {
	display: inline-block;
	padding: 7px 20px;
	background-color: #ffd700;
	color: #000;
	text-decoration: none;
	border-radius: 25px;
	border: 2px solid #ffd700;
	font-size: 1.0rem;
}

a.yellow-theme-btn:hover {
	background-color: transparent;
	color: #ffd700;
}

a.yellow-theme-btn-outline {
	background-color: transparent;
	color: #ffd700;
}

a.yellow-theme-btn-outline:hover {
	background-color: #ffd700;
	color: #000;
}

a.yellow-theme-btn-white {
	background-color: #fff;
	color: #000;
	border: 2px solid #fff;
}

a.yellow-theme-btn-white:hover {
	background-color: transparent;
	color: #fff;
}

a.yellow-theme-btn-white-outline {
	background-color: transparent;
	color: #fff;
	border: 2px solid #fff;
}

a.yellow-theme-btn-white-outline:hover {
	background-color: #fff;
	color: #000;
}

a.yellow-theme-btn-black {
	background-color: #000;
	color: #fff;
	border: 2px solid #000;
}

a.yellow-theme-btn-black-outline {
	color: #000;
	border: 2px solid #000;
}

a.yellow-theme-btn-black:hover {
	background-color: #fff;
	color: #000;
}

.yellow-theme-tag {
	display: inline-block;
	padding: 7px 14px;
	color: #999;
	text-decoration: none;
	border-radius: 25px;
	border: 1px solid #999;
	font-size: 0.9rem;
}

.yellow-theme-tag-yellow {
	color: #ffa905;
	border: 1px solid #ffa905;
}

/* Heros & Rows */

body.yellow-theme .yellow-header-nav {
	background-color: #000;
	padding-top: 40px;
}

.yellow-header-nav span:hover {
	cursor: pointer;
	color: #ffd700;
}

body.questions-layout .yellow-header-nav {
	background-color: #ffd700;
}

body.questions-layout .yellow-header-nav p {
	color: #000;
}

body.yellow-theme .header-menu {
	color: #fff;
	font-size: 2.0rem;
}

body.yellow-theme .alt-header .header-menu {
	color: #000;
}

.yellow-header-nav.alt-header span:hover {
	color: #000;
}

body.yellow-theme .header-menu p,
body.yellow-theme .footer-contact p {
	line-height: 100%;
}

body.yellow-theme .yellow-hero-black {
	background-color: #000;
	padding-top: 200px;
	padding-bottom: 160px;
	color: #ffd700;
}

body.yellow-theme .yellow-hero-black.section-hero {
	color: #fff;
}

body.yellow-theme .yellow-hero-black h1 {
	font-size: 2.4rem;
	font-family: 'SilkaLight', Helvetica, sans-serif;
}

body.yellow-theme .yellow-hero-black.section-hero h2 {
	font-size: 1.5rem;
	font-family: 'SilkaThin', Helvetica, sans-serif;
}

body.yellow-theme .yellow-row-yellow {
	background-color: #ffd700;
	padding-top: 50px;
	padding-bottom: 50px;
}

body.yellow-theme .yellow-row-white {
	background-color: #fff;
	padding-top: 50px;
	padding-bottom: 50px;
}

body.yellow-theme .yellow-row-black {
	background-color: #000;
	padding-top: 50px;
	padding-bottom: 50px;
	color: #fff;
}

body.yellow-theme .yellow-row-footer {
	background-color: #000;
	padding-top: 30px;
	padding-bottom: 30px;
	color: #fff;	
}

body.yellow-theme .yellow-row-footer p {
	font-size: 0.8rem;
}

/* Q&A Layout */
body.questions-layout .yellow-row-yellow,
body.questions-layout .yellow-row-white {
	padding-top: 200px;
	padding-bottom: 300px;	
}

body.questions-layout .yellow-row-yellow h1,
body.questions-layout .yellow-row-white h1 {
	color: #fff;
	font-size: 4.2rem;
	font-family: 'SilkaRegular', Helvetica, sans-serif;
}

body.questions-layout .yellow-row-yellow h2,
body.questions-layout .yellow-row-white h2 {
	font-family: 'SilkaRegular', Helvetica, sans-serif;
}

body.questions-layout .yellow-row-white h1 {
	color: #ffd700;
}

body.questions-layout .last-row,
body.questions-layout .last-row {
	padding-bottom: 100px;
}

.yellow-card {
	background-color: #000;
	max-width: 80%;
	border-radius: 25px;
	padding: 30px;
	color: #fff;
}

.yellow-card p {
	line-height: 120%;
}

body.yellow-theme .yellow-card p {
	font-size: 1.2rem;
}

.yellow-card img {
	margin-bottom: 100px;
}

.yellow-card a {
	color: #fff;
	text-decoration: none;
}

.show-me-more-arrow {
	z-index: 10000;
}

body.yellow-theme details {
	font-family: 'SilkaLight', Helvetica, sans-serif;
	font-size: 1.4rem;
}

body.yellow-theme details p {
	font-size: 1.2rem;
}

/* Icons */

.icon-wrapper {
    display: flex !important;
    align-items: center;
}

.icon-wrapper ion-icon {
	margin-right: 6px;
}

.list-display li {
	margin-bottom:.5rem;
	font-size:1.1rem;
}
.list-checkmarks {
	padding-left:1.0rem;
}
.list-checkmarks li {
	list-style-type:none;
	padding-left:1rem;
}
.list-checkmarks li:before {    
	font-family: 'FontAwesome';
	content: "\f00c";
	margin:0 10px 0 -28px;
	color: #17aa1c;
}

/** Mrs Eaves Adobe Font CSS 
Mrs Eaves OT Roman
font-family: "mrs-eaves", serif;
font-weight: 400;
font-style: normal;

Mrs Eaves OT Italic
font-family: "mrs-eaves", serif;
font-weight: 400;
font-style: italic;

Mrs Eaves OT Bold
font-family: "mrs-eaves", serif;
font-weight: 700;
font-style: normal;

Mrs Eaves OT Bold Italic
font-family: "mrs-eaves", serif;
font-weight: 700;
font-style: italic;
**/

body.yellow-theme h1.mrs-eaves-ot-italic {
	font-family: 'mrs-eaves', serif;
	font-weight: 400;
	font-style: italic;
	font-size: 5.2rem;
	line-height: 110%;
}

body.yellow-theme h2.mrs-eaves-ot-italic {
	font-family: 'mrs-eaves', serif;
	font-weight: 400;
	font-style: italic;
	font-size: 3.2rem;
	line-height: 110%;
}

body.yellow-theme h2.mrs-eaves-ot-italic a {
	color: #000;
}

/** Brands row **/
body.yellow-theme .yellow-row-brands {
	padding-top: 80px;
	padding-bottom: 80px;	
}

sup {
	font-size: 0.8rem;
}

.the-problem {
	color: #fff;
}

.the-problem h2 {
	font-size: 1.4rem;
}

body.yellow-theme .yellow-hero-black .the-problem p {
	font-size: 1.2rem;
}

/** Image Grid **/

.image-grid-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.image-grid-column {
  flex: 33%;
  max-width: 33%;
  padding: 0 4px;
}

.image-grid-column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .image-grid-column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .image-grid-column {
    flex: 100%;
    max-width: 100%;
  }
}

body.yellow-theme .project-label {
	background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0, 0, 0, 0.4));
}

body.yellow-theme .project-label p {
	font-family: 'mrs-eaves', serif;
	font-weight: 400;
	font-style: italic;
	font-size: 2.2rem;
	line-height: 110%;
}

/* Animations etc */

.animated-heading {
    height: 100vh;
}

.arrow-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow {
	box-sizing: border-box;
	height: 4vw;
	width: 4vw;
	border-style: solid;
	border-color: #000;
	border-width: 0px 2px 2px 0px;
	border-radius: 0 0 3px 0;
	transform: rotate(45deg);
	transition: border-width 150ms ease-in-out;
}

.section-hero .arrow {
	border-color: #fff;
}

.yellow-hero-black .arrow {
	border-color: #ffd700;
}

.arrow-container,
.footer-icon {
	animation: bounce 4s infinite;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-15px);
	}
	60% {
		transform: translateY(-10px);
	}
}

.rocket-container svg {
	rotate: 5deg;
	margin-left: 10px;
}

.rocket-container {
	animation: float 2s infinite;
}

@keyframes float {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0);
	}
}

.ball {
  position: absolute;
  border-radius: 100%;
  opacity: 0.2;
}

/** Nav Begin **/
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 0;
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-family: 'SilkaLight', Helvetica, sans-serif;
  font-size: 36px;
  color: #fff;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover,
.overlay a:focus {
  color: #ffd700;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
/** Nav End **/

.our-manifesto ol {
	margin-left: 20px;
}

.our-manifesto li {
	font-family: 'SilkaLight', Helvetica, sans-serif;
	font-size: 1.4rem;
	line-height: 140%;
	padding-bottom: 20px;
}

.manifesto {
	box-shadow: 20px 20px 60px #bebebe,
	               -20px -20px 60px #ffffff;
}

.big-number {
	font-family: 'SilkaSemibold', Helvetica, sans-serif;
	font-weight: 400;
	font-size: 6.0rem;
	opacity: 0.1;
}

/** B*ll*cks to Boring **/
body.yellow-theme h1.btb {
	font-family: 'mrs-eaves', serif;
	font-weight: 400;
	font-style: italic;	
	font-size: 8.0rem;
}

body.yellow-theme h1.btb sup{
	line-height: ;
	align: top;
}