*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border:0;
}

a{
  color:#428bca;
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

body{
  font-family: "Raleway", sans-serif;
  font-weight:200;
  font-size:18px;
  color:#e4e6e5;
  background-color:#2c3339;
  line-height:1.4;
  -webkit-font-smoothing: subpixel-antialiased;
}

h1{
  font-weight:600;
  font-size:4em;
  -webkit-font-smoothing: antialiased;
}

h1 img{
  max-width:65%;
}

@media (min-width: 700px){
  h1{
    font-size:6em;
  }
}

h2{
  font-weight:200;
  font-size:1.5em;
  margin-bottom:1em;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 700px){
  h2{
    font-size:2.5em;
  }
}

h3{
  font-weight:600;
  font-size:1.5em;
  margin-bottom:1em;
  -webkit-font-smoothing: antialiased;
}

h4{
  font-weight:200;
  font-size:1.5em;
  margin-bottom:1em;
  -webkit-font-smoothing: antialiased;
}

.font-semibold{
  font-weight:600;
}

img{
  max-width:100%;
}

/*  temp hiding some rows for breakpoint testing */

/* 
.section, .section .title{
  display:none;
}

#work{
  display:block;
}
 */

#navbar{
  position:fixed;
  width:100%;
  background-color: rgba( 0, 0, 0, .5 );
  border-bottom: 1px solid #20272c;
  text-transform:uppercase;
  font-size:0.75em;
  -webkit-font-smoothing: antialiased;
  transition: .25s all linear;
}

#navbar ul{
  width:100%;
  list-style-type:none;
  max-width:1600px;
  margin:0 auto;
}

#navbar li{
  display:inline-block;
  width:16.66666666%;
}

#navbar li a{
  display:block;
  text-align:center;
  padding:1em 0;
  color:#ddd;
  text-decoration:none;
  font-weight:600;
}

#navbar li:hover a{
  background-color:#000;
  padding-bottom:0.5em;
  border-bottom:0.5em solid #ddd;
}

.row.title{
  text-align:center;
  width:80%;
  max-width:1050px;
  margin:0 auto;
  padding-top:6em;
  padding-bottom:2em;
}

.row.title hr{
  border-bottom:0.3em solid #ddd;
  width:80%;
  max-width:480px;
  margin:2.5em auto;
}

.row.title p{
  font-size:1.2em;
  font-weight:200;
}

@media (min-width: 700px){
  .row.title p{
    font-size:2em;
    -webkit-font-smoothing: antialiased;
  }
}

.section{
  padding-bottom:2em;
}

#services{
  background-color:#2990cc; /* cyan */
}

#services .content-row{
  max-width:1600px;
  margin:0 auto;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* IE 10 */
  display: -webkit-flex;     /* Chrome */
  display:flex;
  -webkit-flex-flow: row wrap; /* Safari 6.1+ */
  flex-flow: row wrap;
  align-items:stretch;
  padding:0 1em;
}

#services .column{
  -webkit-box-flex:1 50%;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex:1 50%;         /* OLD - Firefox 19- */
  -webkit-flex:1 50%;          /* Chrome */
  -ms-flex:1 50%;              /* IE 10 */
  flex:1 50%;
  text-align:center;
  margin:1em 1em 3em;
}

@media (min-width: 600px){
  #services .column{
    -webkit-box-flex:1 32%;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex:1 32%;         /* OLD - Firefox 19- */
    -webkit-flex:1 32%;          /* Chrome */
    -ms-flex:1 32%;              /* IE 10 */
    flex:1 32%;
  }
}

@media (min-width: 1200px){
  #services .column{
    -webkit-box-flex:1 10%;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex:1 10%;         /* OLD - Firefox 19- */
    -webkit-flex:1 10%;          /* Chrome */
    -ms-flex:1 10%;              /* IE 10 */
    flex:1 10%;
  }
}

#services .column p{
  text-align:left;
  margin-top:1em;
  max-width:460px;
}

#work .content-row{
  padding:0 1em;
}

#work img{
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

.font-thin{
  font-weight:100;
}

#brands{
  background-color:#cc298b; /* magenta */
}

#brands .content-row{
  max-width:1600px;
  margin:0 auto;
  padding:0 1em;
}

#brands ul{
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* IE 10 */
  display: -webkit-flex;     /* Chrome */
  display:flex;
  -webkit-flex-flow: row wrap; /* Safari 6.1+ */
  flex-flow: row wrap;
  align-items:center;
  justify-content:space-around;
  list-style-type:none;
}

#brands li{
  -webkit-box-flex:1 40%;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex:1 40%;         /* OLD - Firefox 19- */
  -webkit-flex:1 40%;          /* Chrome */
  -ms-flex:1 40%;              /* IE 10 */
  flex:1 40%;
  background-color:#fff;
  margin:1em;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* IE 10 */
  display: -webkit-flex;     /* Chrome */
  display:flex;
  align-content:center;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1em 1.2em;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

/*  some specific query foolery here to prevent the flex rows 
    from breaking in numbers not evenly divisible into 12 */

@media (min-width: 500px){
  #brands li{
    -webkit-box-flex:1 20%;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex:1 20%;         /* OLD - Firefox 19- */
    -webkit-flex:1 20%;          /* Chrome */
    -ms-flex:1 20%;              /* IE 10 */
    flex:1 20%;
  }
}

@media (min-width: 1200px){
  #brands li{
    -webkit-box-flex:1 12%;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex:1 12%;         /* OLD - Firefox 19- */
    -webkit-flex:1 12%;          /* Chrome */
    -ms-flex:1 12%;              /* IE 10 */
    flex:1 12%;
  }
}

@media (min-width: 1570px){
  #brands li{
    -webkit-box-flex:1 14%;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex:1 14%;         /* OLD - Firefox 19- */
    -webkit-flex:1 14%;          /* Chrome */
    -ms-flex:1 14%;              /* IE 10 */
    flex:1 14%;
  }
}

#speaking .content-row{
  max-width:1600px;
  margin:0 auto;
  padding:0 1em;
}

#speaking .calendar{
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* IE 10 */
  display: -webkit-flex;     /* Chrome */
  display:flex;
  -webkit-flex-flow: row wrap; /* Safari 6.1+ */
  flex-flow: row wrap;
  margin-bottom:3em;
}

#speaking .column{
  -webkit-box-flex:1 80%;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex:1 80%;         /* OLD - Firefox 19- */
  -webkit-flex:1 80%;          /* Chrome */
  -ms-flex:1 80%;              /* IE 10 */
  flex:1 80%;
  margin:1em;
  max-width:500px;
}

@media (min-width: 1150px){
  #speaking .column{
    margin:1em auto;
  }
}

#speaking .column ul{
  list-style-type:none;
  margin-bottom:1em;
}

#speaking .column li{
  padding-bottom:0.5em;
}

@media (min-width: 900px){
  #speaking .column{
    -webkit-box-flex:1 30%;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex:1 30%;         /* OLD - Firefox 19- */
    -webkit-flex:1 30%;          /* Chrome */
    -ms-flex:1 30%;              /* IE 10 */
    flex:1 30%;
  }
}

#speaking .content-row .feature{
  display:block;
  margin:1em;
}

#speaking .content-row img{
  width:100%;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

#connect{
  background-color:#e5d117; /* yellow */
  color:#4e4e4e;
}

#connect hr{
  border-color:#4e4e4e;
}

#connect .content-row{
  max-width:1600px;
  margin:0 auto;
  padding:0 1em;
}

#connect ul{
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* IE 10 */
  display: -webkit-flex;     /* Chrome */
  display:flex;
  -webkit-flex-flow: row wrap; /* Safari 6.1+ */
  flex-flow: row wrap;
  align-items:center;
  justify-content:space-around;
  list-style-type:none;
}

#connect li{
  -webkit-box-flex:1 20%;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex:1 20%;         /* OLD - Firefox 19- */
  -webkit-flex:1 20%;          /* Chrome */
  -ms-flex:1 20%;              /* IE 10 */
  flex:1 20%;
  margin:1em;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* IE 10 */
  display: -webkit-flex;     /* Chrome */
  display:flex;
  align-content:center;
  align-items:center;
  justify-content:center;
  text-align:center;
}

@media (min-width: 700px){
  #connect li{
    -webkit-box-flex:1 10%;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex:1 10%;         /* OLD - Firefox 19- */
    -webkit-flex:1 10%;          /* Chrome */
    -ms-flex:1 10%;              /* IE 10 */
    flex:1 10%;
  }
}

#connect img{
  width:100%;
  max-width:80px;
}

#footer{
  background-color:#ccbc29; /* dark yellow */
  color:#4e4e4e;
  padding:2em 0;
  font-size:0.9em;
  text-align:center;
}

/* =============================================
 *
 *   FIXED RESPONSIVE NAV
 *
 *   (c) 2014 @adtileHQ
 *   http://www.adtile.me
 *   http://twitter.com/adtilehq
 *
 *   Free to use under the MIT License.
 *
 * ============================================= */

body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
  margin: 0;
  padding: 0;
  border: 0;
}

a:active,
a:hover {
  outline: 0;
}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/* ------------------------------------------
  RESPONSIVE NAV STYLES
--------------------------------------------- */

.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

.nav-collapse li {
  width: 100%;
  display: block;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media screen and (min-width: 875px) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}


/* ------------------------------------------
  DEMO STYLES
--------------------------------------------- */

body{
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: "Raleway", sans-serif;
  font-weight:200;
  font-size:18px;
  color:#e4e6e5;
  background-color:#2c3339;
  line-height:1.4;
  -webkit-font-smoothing: subpixel-antialiased;
}

/* ------------------------------------------
  FIXED HEADER
--------------------------------------------- */

header {
  background-color: rgba( 0, 0, 0, .5 );
  border-bottom: 1px solid #20272c;
  text-transform:uppercase;
  font-size:0.75em;
  -webkit-font-smoothing: antialiased;
  font-weight:600;
  position: fixed;
  z-index: 3;
  width: 100%;
  left: 0;
  top: 0;
}

.logo {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  text-decoration:none;
  text-transform:none;
  font-weight:600;
  font-size:1.25em;
  line-height: 2.7em;
  padding: 0 20px;
  color: #fff;
  float: left;
}

/* ------------------------------------------
  MASK
--------------------------------------------- */

.mask {
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  transition: opacity 300ms;
  background: rgba(0,0,0, .5);
  visibility: hidden;
  position: fixed;
  opacity: 0;
  z-index: 2;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.android .mask {
  -webkit-transition: none;
  transition: none;
}

.js-nav-active .mask {
  visibility: visible;
  opacity: 1;
}

@media screen and (min-width: 875px) {
  .mask {
    display: none !important;
    opacity: 0 !important;
  }
}


/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-collapse,
.nav-collapse * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
}

@media screen and (min-width: 875px) {
  .nav-collapse {
    float: right;
    width: auto;
  }
}

.nav-collapse li {
  float: left;
  width: 100%;
}

@media screen and (min-width: 875px) {
  .nav-collapse li {
    width: auto;
  }
}

.nav-collapse a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  border-top: 1px solid #333;
  text-decoration: none;
  padding: 0.7em 1.5em;
  color: #fff;
  width: 100%;
  float: left;
}

.nav-collapse a:hover{
  background-color:#000;
}

@media screen and (min-width: 875px) {
  .nav-collapse a:hover{
    border-bottom:0.4em solid #2c3339;
  }
  .nav-collapse .color-cyan a:hover{
    border-color:#2990cc;
  }
  .nav-collapse .color-magenta a:hover{
    border-color:#cc298b;
  }
  .nav-collapse .color-yellow a:hover{
    border-color:#e5d117;
  }
}

.nav-collapse a:active,
.nav-collapse .active a {
  background-color:#2c3339;
}

@media screen and (min-width: 875px) {
  .nav-collapse a:active,
  .nav-collapse .active a {
    border-bottom:0.4em solid #e4e6e5;
  }
}

@media screen and (min-width: 875px) {
  .nav-collapse a {
    padding: 1.02em 2em 0.5em;
    text-align: center;
    border-top: 0;
    float: left;
    margin: 0;
  }
}

.nav-collapse ul ul a {
  background: #fff;
  padding-left: 2em;
}

@media screen and (min-width: 875px) {
  .nav-collapse ul ul a {
    display: none;
  }
}


/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

@font-face {
  font-family: "responsivenav";
  src:url("../icons/responsivenav.eot");
  src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("../icons/responsivenav.ttf") format("truetype"),
    url("../icons/responsivenav.woff") format("woff"),
    url("../icons/responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}

.nav-toggle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-indent: -300px;
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 3em;
  float: right;
}

.nav-toggle:before {
  color: #fff; /* Edit this to change the icon color */
  font: normal 2em/45px "responsivenav"; /* Edit font-size (28px) to change the icon size */
  text-transform: none;
  text-align: center;
  position: absolute;
  content: "\2261"; /* Hamburger icon */
  text-indent: 0;
  speak: none;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-toggle.active:before {
  font-size: 2em;
  content: "\78"; /* Close icon */
}

a.button{
  font-size:0.75em;
  font-weight:400;
  display:inline-block;
  padding:0.5em 1em;
  text-decoration: none;
  border:2px solid #e4e6e5;
  color:#e4e6e5;
  background-color:#2c3339;
  margin-top:1.5em;
}

a.button:hover{
  background-color: rgba( 0, 0, 0, .5 );
  color:#fff;
}

@media (min-width: 700px){
  #speaking a.button{
    font-size:27px;
  }
}