html {
  overflow-y: scroll;
}

body {
	font-family: 'Outfit', sans-serif;
	color: #444;
	background: #fff;
	margin:0;
	font-size:20px;
	font-weight: 400;
	line-height: 1.4em;
	padding-top: 150px;
	padding-bottom: 50px;
}

h1 { font-weight: 700; font-size: 65px; line-height: 1.25em; letter-spacing: -1.5px; color: #555;}
.hero h2 { font-weight: 700; font-size: 65px; line-height: 1.1em; letter-spacing: -1.5px; color: #555;}
.hero-mobile h2 { font-weight: 700; font-size: 45px; line-height: 1.1em; letter-spacing: -1.5px; color: #23D1AF; margin-bottom: 50px;}
h2 { font-weight: 700; font-size: 30px; line-height: 1.4em; color: #5c6a8a; margin-bottom: 15px;}
.hero p, .hero-mobile p { font-weight: 400; font-size: 22px; line-height: 1.4em; letter-spacing: -0.5px;  color: #555;}
h3 { font-weight: 700; font-size: 24px; line-height: 1.4em; margin-bottom: 20px; }
p { margin-bottom: 20px; line-height: 1.5em;}
h4 { font-weight: 700; font-size: 24px; line-height: 1.4em; margin-bottom: 20px; }

a.link, a.link:active, button.link, button.link:active {
  color: #EF44A2;
  font-weight: 600;
  word-break: normal;
  hyphens: none;
}

a.link:hover, a.link:focus  {
    color: #EF44A2;
    text-decoration: none;
    border-bottom: 2px dotted #EF44A2;
}

.menu-bar {
	background: #fff;
	height: 85px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
	}
	

.logo:hover, .logo:focus { outline: none; }
	
.logo { position: absolute; top: 19px; left: -17px; width: 350px; display: inline-block; transform-origin: center; transform: scale(0.8); }

.logo #dots { position: absolute; top: -2px; left: 0; z-index: 1; animation: zoom-dots 0.5s cubic-bezier(0.62, 0.06, 0.26, 1.3); opacity: 0.5;}
.logo #cube { position: absolute; top: 13px; left: 13px; z-index: 2; transform: rotate(0deg); animation: cube-spin 2s cubic-bezier(0.2, 0.06, 0.26, 1);  animation-direction: alternate; animation-iteration-count: 1; }
.logo #type { position: absolute; top: 15px; left: 60px; z-index: 2; transform: scale(1.05); transform-origin: left; }

.logo #type path { fill: #444;}

.logo:hover #type path, .logo:focus #type { opacity: 0.9 }


.logo:hover #dots, .logo:focus #dots { transform: scale(0.8); transition: transform 0.5s cubic-bezier(0.2, 0.06, 0.26, 2);  animation: zoom-dots 1s cubic-bezier(0.62, 0.06, 0.26, 1.8);  animation-iteration-count: 2; animation-direction: alternate; opacity: 1;}

.logo #cube.animate { transform: rotate(360deg);  transition: all 1.6s cubic-bezier(0.2, 1, 0.66, 1.1); }

@keyframes zoom-dots {
  0% { transform: scale(0);  }
  100% { transform: scale(1); }
}

@keyframes cube-spin {
  0% { transform: rotate(-360deg); }
  100% { transform: rotate(0deg); }
}




.nav { 
	position: fixed;
	right: 32px;
	top: 28px;
	}
.nav a { position: relative; display: inline-block; text-decoration: none !important; color: #333;  font-size: 18px; font-weight: 400; padding: 5px 10px 8px; border-radius: 16px; outline: 0; margin-right: 10px; }

.nav a:after { content: ''; display: block; height: 3px;  border-radius: 6px; position: absolute; left: 10px; bottom: 3px; width: calc(100% - 20px); transform: scaleX(0); transform-origin: left; background: #23D1AF; transition: all 0.4s cubic-bezier(0.62, 0.06, 0.26, 1); transition-delay: 0.15s;}

.nav a:hover:after, .nav a:focus:after, .nav a.active:after  { transform: scaleX(1); transition-delay: 0s;  transition: all 0.4s cubic-bezier(0.62, 0.06, 0.26, 1.3); }

.nav a.green:after { background: #23D1AF;} 
.nav a.orange:after { background: #FFC756;} 
.nav a.pink:after { background: #EF44A2;} 


#mobile-nav-switch { height: 60px; width: 40px; position: absolute; top: 5px; right: 25px; z-index: 1; transform: scaleX(1); transform-origin: center; transition: all 0.3s cubic-bezier(0.2, 0, 0, 1.85) }
#mobile-nav-switch div { height: 3px; width: 25px; background: #EF44A2;  border-radius: 6px; position: relative; transform: scaleX(1); transform-origin: left; transition: all 0.3s cubic-bezier(0.2, 0, 0, 1.85)  }
#mobile-nav-switch div:before { content: ''; height: 3px; width: 25px; background: #23D1AF; position: absolute; top: 9px; left: 0; border-radius: 6px; transform: scaleX(1); transform-origin: left; transition: all 0.3s cubic-bezier(0.2, 0, 0, 1.85) }
#mobile-nav-switch div:after { content: ''; height: 3px; width: 25px; background: #FFC756; position: absolute; top: 18px; left: 0; border-radius: 6px; transform: scaleX(1); transform-origin: left; transition: all 0.3s cubic-bezier(0.2, 0, 0, 1.85) }

#mobile-nav-switch:hover { transform: scale(1.15); #mobile-nav-switch:focus  }
#mobile-nav-switch:hover div:before { top: 8px;}
#mobile-nav-switch:hover div:after { top: 16px;}

#mobile-nav-switch.in div { transform: rotate(45deg);}
#mobile-nav-switch.in div:before  { transform: rotate(-90deg); top: 12px; left: 12px;}
#mobile-nav-switch.in div:after  { transform: rotate(-90deg); top: 12px; left: 14px;}

.nav a span {display: inline-block; background: #333; color: #fff; position: absolute; top: 40px; right: 0px; padding: 2px 8px 3px; border-radius: 15px; text-indent: 0; text-align: center; transition: opacity 0.5s ease; opacity: 0; font-size: 14px; line-height: 1.1em;}

.main { display: block;}
.mobile-nav-content { visibility: hidden; opacity: 0; transition: all 0s linear;  height: calc(100vh - 200px); width: 100vw; max-width: 100%; position: absolute; z-index: -1; top: 120px; left: 0; padding: 80px; text-align: center; }

.mobile-nav-content a { font-size: 28px; width: 100%; font-weight: 600; transform: scale(1); transform-origin: center; transition: all 0.4s cubic-bezier(0.62, 0.06, 0.26, 1.3); }
.mobile-nav-content a:after { content:''; display: block; width: 100%; height: 40px;}


.mobile-nav-content a.green:hover, .mobile-nav-content a.green:focus { color: #23D1AF;  transform: scale(1.2); }
.mobile-nav-content a.orange:hover, .mobile-nav-content a.orange:focus { color: #ecab2a;  transform: scale(1.2); }
.mobile-nav-content a.pink:hover, .mobile-nav-content a.pink:focus { color: #EF44A2;  transform: scale(1.2); }

body.mobile-nav-in .main { opacity: 0; height: 0px; overflow: hidden;}
body.mobile-nav-in .hero { opacity: 0; height: 0px; overflow: hidden;}
body.mobile-nav-in .hero-mobile { opacity: 0; height: 0px; overflow: hidden;}
body.mobile-nav-in .footer { opacity: 0; height: 0px; overflow: hidden;}
body.mobile-nav-in .mobile-nav-content {  visibility: visible; opacity: 1; z-index: 1; transition: all 0.5s ease-in-out; }


#verb { position: relative; opacity: 0; transition: all 0.5s cubic-bezier(0.2, 0, 0, 1.2); transition-delay: 0s; text-shadow: 2px 2px 0 #fff;  }

#verb.in { top: 0; opacity: 1; transition: all 0.4s ease-in; transition-delay: 0.4s; }

#typewrite { min-height: 75px; display: block;}


@keyframes blink {
  0% { opacity: 0; }
  100% { opacity: 0.8; }
}

#typewrite::after {
  content: "";
  display: inline-block;
  margin-left: 10px;
  margin-bottom: -2px; 
  background: #333;
  height: 52px; 
  width: 30px;  
  animation: blink infinite alternate 0.4s;
}



#typewrite.green { color: #23D1AF; }
#typewrite.green::after { background: #23D1AF; }

#typewrite.pink { color: #EF44A2; }
#typewrite.pink::after { background: #EF44A2; }

#typewrite.orange { color: #FDBA34; }
#typewrite.orange::after { background: #FDBA34; }

#typewrite.grey { color: #656565; }
#typewrite.grey::after { background: #656565; }


.hero {
  margin: 0 auto 40px;
  max-width: 1100px;
  width: calc(100vw - 40px);
  padding-left: 20px;
  padding-right: 20px;
}

.hero-mobile { padding: 30px 50px; text-align: center; margin-bottom: 30px;}

.main { 
  margin: 0 auto 40px;
  width: calc(100vw - 40px);
  min-height: calc(100vh - 381px);
  max-width: 1100px;
  padding-left: 20px;
  padding-right: 20px;
  }

.footer  {
  width: 100%;
  margin: 100px 0 0;
  background: #343d53;
}

.footer .wrap { 
  margin: 0 auto;
  max-width: 1100px;
  padding: 40px 20px 30px;
}

.footer p { font-size: 14px; color: #999; margin-bottom: 3px; line-height: 1.25em;}


/* homepage */
  	
.matrix {background: #f5f5f5; border-radius: 20px; padding: 30px 70px; margin-top: 80px; margin-bottom: 100px}

.context { display: flex; position: relative; justify-content: space-between; height: 600px; width: calc(100% - 70px); padding-top: 50px; margin-bottom: 50px;}
.context .spacer { flex: 0 0 250px;}
.context .heading { border-right: 1px solid #e1e1e1; box-shadow: 1px 0 0 #fff }
.context .heading span { position: absolute; transform: translate(-50%, -35px); }

.skills { position: absolute; top: 0; left: 0; text-align: left; width: calc(100% - 230px);}
.skill { margin-bottom: 12px; position: relative; width: 100%;}
.skill .level { position: absolute; left: 280px; top: 10px; height: 10px; width: 0px; background: #23D1AF; border-radius: 20px; transition: width 1.4s cubic-bezier(0.2, 1.46, 0.4, 0.99);}
.skills h3 { margin-top: 40px; margin-bottom: 17px; font-size: 20px;}

.skill a { display: block; width: calc(100% + 270px);}
.skill a:hover, .skill a:focus   { font-weight: 600; }
.skill a:hover + .level, .skill a:focus + .level { background: #FFC756;}
.skill .level { pointer-events: none;}

.logos { 
  text-align: center;
  padding-top: 40px;
  padding-bottom: 50px;
  }

.logos img {
  display: inline-block;
  max-height: 48px;
  margin: 0 30px;
}

@media only screen and (max-width: 767px) {
  .matrix { display: none; }
}
  
@media only screen and (max-width: 990px) {
  .logos img { 
    display: block; 
    margin: 0 auto 40px; 
    }
}

@media only screen and (max-width: 500px) {
  .logos img { 
    max-height: 45px;
    }
}


@media only screen and (max-width: 600px) {
  .hero { 
    display: none; 
    }
    
  .hero-mobile { 
    display: block; 
    }
}

@media only screen and (min-width: 601px) {
  .hero { 
    display: block; 
    }
    
  .hero-mobile { 
    display: none; 
    }
}



/* ---- */
	




.whatwedo { padding: 40px 30px 40px; margin: 0 auto; max-width: 960px; margin-bottom: 50px;}

.whatwedo .aui-menu-bar { margin-bottom: 40px;}

.whatwedo ul { text-align: left; }

.whatwedo ul li { margin-bottom: 20px; width: 250px; padding-left: 60px; }

.whatwedo ul li span { width: 30px; margin-right: 20px; margin-left: -40px; }

.whatwedo h2 { color: #5c6a8a; font-weight: 700; font-size: 30px; margin-bottom: 30px; }


.what-list li a { display: inline-block; position: relative; padding: 8px 26px; border-radius: 24px; font-weight: 600; font-size: 23px; margin-bottom: 10px;}

.what-list li a:hover { color: #000; background: #f5f5f5; }


ul.cubes { padding-top: 10px; margin-left: 20px; margin-bottom: 30px;}

ul.cubes li { margin-bottom: 20px; margin-left: 34px;}

ul.cubes li svg { margin-left: -34px; margin-right: 13px; vertical-align: -2px; }


/* buttons */

.fancy-button { position: relative; text-align: center; z-index: 1; font-size: 20px; font-weight:  600; margin-left: 40px; margin-right: 50px; line-height: 1.5em; color: #fff; }
.fancy-button:before { content: ''; height: calc(100% + 10px); width: 100%; background: #23D1AF; position: absolute; display: block; z-index: -1; transform: scale(1.4); left: 0; top: -5px;  transform-origin: center; transition: all 0.5s cubic-bezier(0.2, 0, 0, 1.85); border-radius: 20px; }

.fancy-button:hover:before, .fancy-button:focus:before { transform: scaleX(1.45) scaleY(1.5); transition: all 0.3s ease-in-out; }

.fancy-button:hover, .fancy-button:focus { color: #fff; }

.fancy-button.outline { color: #23D1AF; }
.fancy-button.outline:before { border: 1px solid #23D1AF; background: transparent;  }

@media only screen and (max-width: 500px) {
  .fancy-button {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    min-width: 140px;
  }
}



/* what */

#what-menu {
  max-width: 280px;
  border-right: 2px solid #ededed;
  padding-right: 40px;
}

@media only screen and (min-height: 874px) {
  #what-menu .sticky-menu {
    position: sticky;
    top: 120px;
  }
}

#what-menu li {
  font-weight: 600;
  margin-bottom: 20px;
}

#what-menu li a {
  display: block;
  padding: 8px 18px;
  border-radius: 24px;
}

#what-menu li.active a, #what-menu li.active a:hover, #what-menu li.active a:focus { background: #23D1AF; }
#what-menu li a:hover, #what-menu li a:focus { background: #f5f5f5; }

#what-menu li.active a { color: #fff;}

#what-content { padding-left: 60px; padding-right: 30px }

#what-content h3 { font-size: 30px;} 
#what-content h4 { font-size: 26px;} 

.controls-holder { max-width: 650px}
@media only screen and (max-width: 651px) {
  .controls-img {
      display:none;
    }
}


/* --- */ 
 
 

.process-row { position: relative; z-index: 0; padding-left: 80px;}
.big-number { position: absolute; opacity: 0.13; font-size: 80px; font-weight: 900; left: 0; top: 19px; z-index: -1;}
ul.bulleted { margin-left: 40px;}  
ul.bulleted li:before { background: #FFC756; top: 11px;}
ul.bulleted li { margin-bottom: 15px; max-width: calc(100% - 40px); min-width: 248px;}
.process-row h5 { color: #444; margin-bottom: 15px; padding-top: 10px; font-size: 23px;}
.magic { float: right;  width: 220px; margin-right: -30px; padding-left: 30px; position: relative; z-index: 1; }
.magic svg { width: 90%; height: auto;}
h5 > span { display: block; font-size: 15px; font-weight: 400; color: #999; line-height: 1.15em; padding-top: 8px;}



.magic #star1 { animation: sparkle1 5s infinite; transform-origin: 80% 50%; }

@keyframes sparkle1 {
  0%   {transform: scale(0)}
  7%   {transform: scale(0)}
  15%  {transform: scale(0.5)}
  20%  {transform: scale(0)}
  25%  {transform: scale(0)}
  30%  {transform: scale(0)}
  100% {transform: scale(0)}
}

.magic #star2 { animation: sparkle2 3s infinite; transform-origin: 55% 65%; }

@keyframes sparkle2 {
  0%   {transform: scale(0)}
  15%  {transform: scale(0)}
  20%  {transform: scale(1)}
  25%  {transform: scale(1)}
  35%  {transform: scale(0)}
  100% {transform: scale(0)}
}

.magic #star3 { animation: sparkle3 7s infinite; transform-origin: 20% 27%; }

@keyframes sparkle3 {
  0%   {transform: scale(0)}
  5%  {transform: scale(1)}
  15%  {transform: scale(0)}
  20%  {transform: scale(0)}
  80%  {transform: scale(0)}
  85%  {transform: scale(1)}
  95%  {transform: scale(0)}
  100% {transform: scale(0)}
}

.magic #star4 { animation: sparkle4 3s infinite; transform-origin: 80% 10%;}

@keyframes sparkle4 {
  0%   {transform: scale(0)}
  5%  {transform: scale(1)}
  15%  {transform: scale(0)}
  20%  {transform: scale(0)}
  80%  {transform: scale(0)}
  85%  {transform: scale(0)}
  95%  {transform: scale(0)}
  100% {transform: scale(0)}
}

#bubble1 {
  position: absolute;
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.4);
  height: 10px;
  width: 10px;
  border-radius: 10px;
  opacity: 0;
  left: 50%;
  z-index: 1;
  animation: bubble1 2.2s infinite;
}


@keyframes bubble1 {
  0%   { bottom: 33px; opacity: 0.6 }
  100% { bottom: 100px; opacity: 0; }
}

#bubble2 {
  position: absolute;
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.4);
  height: 8px;
  width: 8px;
  border-radius: 10px;
  opacity: 0;
  left: 57%;
  z-index: 1;
  animation: bubble2 2.6s infinite;
}


@keyframes bubble2 {
  0%   { bottom: 33px; opacity: 0.4 }
  100% { bottom: 100px; opacity: 0; }
}

#bubble3 {
  position: absolute;
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.4);
  height: 6px;
  width: 6px;
  border-radius: 10px;
  opacity: 0;
  left: 46%;
  z-index: 1;
  animation: bubble3 2.3s infinite;
  animation-delay: 0.3s;
}


@keyframes bubble3 {
  0%   { bottom: 33px; opacity: 0.3 }
  100% { bottom: 100px; opacity: 0; }
}

#bubble4 {
  position: absolute;
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.4);
  height: 8px;
  width: 8px;
  border-radius: 10px;
  opacity: 0;
  left: 60%;
  z-index: 1;
  animation: bubble4 2.1s infinite;
}


@keyframes bubble4 {
  0%   { bottom: 33px; opacity: 0.4 }
  100% { bottom: 100px; opacity: 0; }
}

#bubble5 {
  position: absolute;
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.4);
  height: 8px;
  width: 8px;
  border-radius: 10px;
  opacity: 0;
  left: 40%;
  z-index: 1;
  animation: bubble5 2.1s infinite;
  animation-delay: 1.2s;
}


@keyframes bubble5 {
  0%   { bottom: 33px; opacity: 0.4 }
  100% { bottom: 100px; opacity: 0; }
}



#launch { 
  position: relative; 
  height: 343px; 
  width: 220px;
  z-index: 1;
  margin-bottom: 20px;
  }

#puter { 
  position: absolute; 
  top: 173px;
  left: 3px;
  width: 190px;
  height: auto; 
  z-index: 1
  }
  
#rocket { 
  position: absolute; 
  top: 24px;
  left: 69px;
  width: 156px;
  height: auto; 
  z-index: 3;
  }

#flame { 
  position: absolute; 
  top: 152px;
  left: 96px;
  width: 53px;
  height: auto; 
  z-index: 2;
  animation: flame 7s infinite;
  }

@keyframes flame {
  0%   { top: 152px; left: 96px; width: 53px; }
  10% { top: 150px; left: 99px; width: 49px;}
  15%   { top: 152px; left: 96px; width: 53px; }
  27%   { top: 150px; left: 99px; width: 49px; }
  30% { top: 150px; left: 96px; width: 53px;}
  40%   { top: 152px; left: 96px; width: 53px; }
  60%   { top: 152px; left: 96px; width: 53px; }
  65% { top: 150px; left: 99px; width: 49px;}
  78%   { top: 152px; left: 96px; width: 53px; }
  100% { top: 150px; left: 96px; width: 53px;}
}



/* contact */

#respond {
  max-width: 400px;
  margin: 70px auto;
  opacity: 0;
}

#respond img { transform: scale(0); transition: all 0.4s cubic-bezier(0.62, 0.06, 0.26, 1.3); }

#respond.in { opacity: 1;}

#respond.in img { transform: scale(1);}

.phone-only { display: none; }


@media only screen and (min-width: 1024px) {
  .nav .multi-column { display: inline-block}
  .nav .single-column { display: none;}
}

@media only screen and (max-width: 1024px) {
  .nav .single-column { display: inline-block;}
  .nav .multi-column { display: none; }
    #cta { text-align: center;}
  
  .multi-column { display: none;}
  #what-content { padding-left: 10px; padding-right: 10px}
}

@media only screen and (max-width: 768px) {
  .nav {
      display:none;
    }
    
  #mobile-nav-switch {
      display:block;
    }
    
  #contact-buttons button { display: block; margin-left: auto; margin-right: auto; margin-bottom: 60px; } 
}

@media only screen and (min-width: 767px) {
  .nav {
      display:block;
    }
    
  #mobile-nav-switch {
      display:none;
    }
}


@media only screen and (max-width: 550px) {
  .hide-on-phone {
      display:none;
    }
  .phone-only {
      display: block;
    }
  .magic { float: none; display: block; width: 220px; margin: 20px auto; padding-left: 30px; position: relative; z-index: 1; }
  
  .process-row { padding-left: 60px;}
  .big-number {font-size: 60px; }
  
  ul.bulleted { margin-left: 10px;}  
  
}

@media only screen and (max-width: 330px) {
  .hide-on-xs {
      display:none;
    }  
  
  
}