body {
  font-family: 'Archivo', sans-serif;
  font-size: 85%;
  color: #455A64;
  background: #ffffff no-repeat left top;
  background-size: cover;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: 'Lora', sans-serif;
  font-size: 60px;
  color: #ffffff;
  max-width: 300px;
  line-height: 1.2;
  margin-bottom: 0.5em;
  margin-top: 1em;
  font-weight: 300;
  letter-spacing:1.1px;
}

h2 {
  font-family: 'Lora', sans-serif;
  position: relative;
  font-size: 2em;
  color: #455A64;
  line-height: 1.5;
  text-align: left;
  margin: 2em 0 2em 0;
  letter-spacing: 0.8px;
  font-weight: 600;
}

h3 {
  font-size: 2em;
  width: 100%;
  color: #455A64;
  margin-bottom: 1em;
  line-height: 1.5;
  font-weight: 600;
}

h4 {
  font-size: 2.2em;
  color: #455A64;
  line-height: 1.25;
  text-align: left;
}

h5 {
  font-family: 'Lora', sans-serif;
  font-size: 1.5em;
  line-height: 1.5;
  text-align: left;
  color: #455A64;
}

h6 {
  font-size: 1.2em;
  color: #455A64;
  line-height: 1.6em;
  margin: 0 0 1em 0;
  font-weight: 600;
}

p {
  font-size: 1.5em;
  line-height: 1.5;
  margin: 0 0 1em 0;
  opacity: 1;
  font-weight: 300;
  letter-spacing: .02em;
}

ul {
  display: block;
  margin-bottom: 2em;
}

li {
  font-size: 22px;
  font-family: Lora;
}


a {
  color: #455A64;
  text-decoration: none;
  padding: 0.5em 0em 0em 0em;
  margin: 0em 0em 0em 0em;
  border-bottom: 2px solid #eee;
}

a:hover {
  color: #F2B536;
  text-decoration: none;
  transition: all 0.5s ease 0s;
}

img {
  max-width: 100%;
  opacity: 1;
  margin-top: 1em;
  margin-bottom: 1em;
  text-align: center;
  position: relative;
}

section {
  position: relative;
  z-index: 100;
  margin: 3em auto 1em auto !important;
}

hr {
  margin-top: 24px;
  border: 1px solid #eee;
  margin-bottom: 24px;
}

.desktop{
  display: table;
}

.mobile {
  display: none;
}


/* -------------------------------------------------- basic formatting -------------------------------------------------- */


.pull-left {
  float:left;
}

.pull-right {
  float: right;
}

.center {
  text-align: center;
}

.uppercase {
   text-transform: uppercase;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 0px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.displayNone {
  display: none;
}

.displayBlock {
  display: block;
}

.lightergrey {
  opacity: 0.3;
}

.darktext {
  color: #455A64;  
}

.hero p.darktext {
  color: #96acb6;
}

.padding-right {
  padding-right: 40px;
}

span.confidential {
  font-size: .8em;
  opacity: 0.5;
}

/* -------------------------------------------------- page config -------------------------------------------------- */


.container-100 {
  width: 100%;
  margin: 0px auto 0px auto;
}

.container-80 {
  width: 80%;
  margin: 0px auto 0px auto;
  max-width: 1200px;
}

.container-70 {
  width: 70%;
  margin: 0px auto 0px auto;
  max-width: 900px;
}

.container-50 {
  width: 70%;
  margin: 0px auto 0px auto;
  max-width: 800px;
}


.col-25 {
  position: relative;
  width: 20%;
  float: left;
  padding-right: 0%;
  text-align: left;
}

.col-75 {
  position: relative;
  width: 80%;
  float: right;
  padding-right: 0%;
  text-align: left;
}

.col-50 {
  position: relative;
  width: 42%;
  float: left;
  padding-right: 0%;
}

.col-50-2 {
  position: relative;
  width: 45%;
  float: right;
  padding-right: 0%;
}

.container::after {
  content: '';
  display: table;
  clear: both;
}

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}


/* -------------------------------------------------- header -------------------------------------------------- */


a.home {
  padding: 1em 1em;
  font-size: 22px;
  margin-top: 20px;
  position: fixed;
  margin-left: 30px;
  color: #cccccc;
  z-index: 100;
  opacity: 0.5;
  border-bottom: none;
}

a.home:hover {
  opacity: 1;
}

.hero.template {
  background: url('http://cat-shen.com/images/amazon-index1.png') 50% no-repeat;
  background-size: cover;
  height: 90vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}


.hero.dalberg {
  background: url('http://cat-shen.com/assets/images/dalberg-hero-2.png') 50% no-repeat;
  background-size: cover;
  height: 90vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}


.hero.converge {
  background: url('http://cat-shen.com/assets/images/converge-hero.png') 50% no-repeat;
  background-size: cover;
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}


.hero.together {
  background: url('http://cat-shen.com/assets/images/together-hero.png') 50% no-repeat;
  background-size: cover;
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hero.kara {
  background: url('http://cat-shen.com/assets/images/kara-hero-3.png') 50% no-repeat;
  background-size: cover;
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hero.lendable {
  background: url('http://cat-shen.com/assets/images/lendable-hero.png') 50% no-repeat;
  background-size: cover;
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hero.utilityco {
  background: url('http://cat-shen.com/assets/images/utilityco-hero.png') 50% no-repeat;
  background-size: cover;
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hero.realestate {
  background: url('http://cat-shen.com/assets/images/realestate-index2.png') 50% no-repeat;
  background-size: cover;
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hero.predata {
  background: url('http://cat-shen.com/assets/images/predata-index-2.png') 50% no-repeat;
  background-size: cover;
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hero.ckd {
  background: url('http://cat-shen.com/assets/images/ckd-hero.png') 50% no-repeat;
  background-size: cover;
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hero.inrai {
  background: url('http://cat-shen.com/assets/images/inrai-3-gradient.png') 50% no-repeat;
  background-size: cover;
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hero .title {
  position: absolute;
  top: 15%;
}

.hero h1 {
  max-width: 500px;
}

.hero p {
  font-size: 2em;
  color: #ccc;
  max-width: 500px;
  letter-spacing: 0em;
  line-height: 1.6;
  margin-top:1.5em;
}

.process-divider {
  font-family: Lora;
  padding: 1em 0 0 0;
  margin-top: 2em;
  font-size: 2em;
}

.prev-project, .next-project {
  font-size: 2.2em;
  padding: 5em 0em;
  position: relative;
  width: 50%;
  display: inline;
}

.prev-project {
  text-align: left;
}

.next-project {
  text-align: right;
}


footer {
  position: relative;
  bottom: 0px;
  text-align: center;
  vertical-align: text-bottom;
  color: #c3cfd5;
  padding-bottom: 15px;
  padding-top: 40px;
  font-size: 0.8em;
}

.context {
  border-top: 1px solid #eee;
  border-bottom: 0px solid #eee;
  margin: 3em auto 0em auto;
}

section.context-bottom {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin: 3em 3em;
  text-align: center;  
}

section.context-bottom h6 {
  margin-top: 2em;
}


/* -------------------------------------------------- page transitions -------------------------------------------------- */

.image-fade {
  visibility: hidden;
}

.fadeIn {
  -webkit-animation: animat_show 0.8s;
  animation: animat_show 0.8s;
  visibility: visible !important;
}

@-webkit-keyframes animat_show {
  0% {
    opacity: 0;
    transform: translate3d(0, 10%, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 10%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(-10%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

}

/*
 * CSS Page Transitions
 * Don't forget to add vendor prefixes!
 */
.m-scene {
  /** Reverse "exit" animations */
}
.m-scene .scene_element {
  animation-duration: 0.25s;
  transition-timing-function: ease-in;
  animation-fill-mode: both;
}
.m-scene .scene_element--fadein {
  animation-name: fadeIn;
}
.m-scene .scene_element--fadeinup {
  animation-name: fadeInUp;
}
.m-scene .scene_element--fadeinright {
  animation-name: fadeInRight;
}
.m-scene .scene_element--fadeinleft {
  animation-name: fadeInLeft;
}
.m-scene.is-exiting .scene_element {
  animation-direction: alternate-reverse;
}