/* Use sparingly, just for deunioning layers to improve performance in most cases */
nav {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

html, body {
  overflow-x: hidden; }

* {
  box-sizing: border-box; }

/* group is amore sematic name for clearfix by @simplebits */
.group:before,
.group:after {
  content: ' ';
  display: table; }

.group:after {
  clear: both; }

.group {
  *zoom: 1; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

body {
  font-family: 'Open Sans', Arial, sans-serif;
  line-height: 1.4; }

h1, h2, h3, h4, h5, p {
  margin: 0 0 .4em; }

.canon {
  font-size: 3.25em;
  line-height: 1.03846; }

.trafalgar {
  font-size: 2.875em;
  line-height: 1.08696; }
  @media (max-height: 35em) {
    .trafalgar {
      font-size: 2.375em;
      line-height: 1.10526; } }

.paragon {
  font-size: 2em;
  line-height: 1; }

.primer {
  font-size: 2em;
  line-height: 1.3125; }
  @media (max-height: 35em) {
    .primer {
      font-size: 1.625em;
      line-height: 1.38462; } }

.pica {
  font-size: 1.5em;
  line-height: 1.33333; }

.long-primer {
  font-size: 1em;
  line-height: 1.5; }

/* typeface */
.canon, .trafalgar, .paragon, long-primer {
  font-family: 'Dosis'; }

/* tracking */
.canon, .trafalgar, .paragon, .long-primer {
  letter-spacing: 0.02em; }

.primer, .pica {
  letter-spacing: 0.01em; }

/* case */
.canon, .trafalgar, .paragon, .long-primer {
  text-transform: uppercase; }

strong {
  font-weight: bold; }

em {
  font-style: italic; }

form {
  margin: 30px auto 0; }

form * {
  font-family: 'Dosis', sans-serif;
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase; }

@media (max-height: 31.99em) {
  form * {
    font-size: 1.25em; } }
@media (min-height: 32em) {
  form * {
    font-size: 1.75em; } }
input[type="email"] {
  background: #000;
  border: 4px solid #fff;
  color: #fff;
  display: block;
  height: 60px;
  margin: 0 auto;
  text-align: center;
  transition: all 0.2s ease;
  width: 350px; }
  @media (max-width: 399px) {
    input[type="email"] {
      width: 100%; } }
  input[type="email"]:focus {
    border-color: #FF005A; }

input[type="submit"] {
  background: #fff;
  border: none;
  color: #000;
  display: block;
  height: 54px;
  margin: 10px auto 0;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 350px; }
  @media (max-width: 399px) {
    input[type="submit"] {
      width: 100%; } }
  input[type="submit"]:hover {
    color: #fff;
    background: #FF005A; }

.btn, .btn--disabled {
  background: #FF005A;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  -webkit-transition: background 200ms ease-in;
  -moz-transition: background 200ms ease-in;
  -ms-transition: background 200ms ease-in;
  -o-transition: background 200ms ease-in;
  transition: background 200ms ease-in; }
  .btn:hover, .btn--disabled:hover {
    background: #111; }

.btn--disabled {
  background: #333; }
  .btn--disabled:hover {
    background: #333; }

body {
  padding-top: 2.8em; }

.container {
  margin: 0 auto;
  max-width: 60em; }

nav {
  background: #111;
  border-bottom: 1px solid #FF005A;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000; }
  nav.active .nav-list {
    display: block; }
  nav.active .nav-list__title {
    color: #FF005A; }

.nav-list__title {
  display: none;
  color: #fff;
  text-transform: uppercase; }
  @media (max-width: 31.25em) {
    .nav-list__title {
      display: block;
      text-align: center;
      cursor: pointer;
      padding: 10px; } }

.nav-list {
  display: block;
  margin: 0 auto;
  max-width: 60em;
  width: 100%; }
  @media (max-width: 31.25em) {
    .nav-list {
      display: none; } }
  .nav-list li {
    list-style: none; }
    @media (max-width: 31.25em) {
      .nav-list li {
        display: inline-block;
        width: 100%; } }

.nav-list__item {
  color: #fff;
  display: block;
  float: left;
  padding: 0.6em 0.7em;
  text-decoration: none; }
  @media (max-width: 31.25em) {
    .nav-list__item {
      width: 100%; } }
  .nav-list__item:focus, .nav-list__item:hover {
    color: #FF005A; }
  .nav-list__item--selected {
    background: #FF005A;
    color: #fff; }
    .nav-list__item--selected:focus, .nav-list__item--selected:hover {
      color: #fff; }

.nav-list__item--active {
  background-color: #ccc;
  color: #111; }
  .nav-list__item--active:focus, .nav-list__item--active:hover {
    color: #111; }

.nav-list__ticket-btn {
  float: right; }

.header {
  margin: 0 auto;
  max-width: 50em;
  text-align: center; }

.upfront {
  background: url(../img/logo.png) no-repeat top center;
  height: 180px;
  margin: 2em auto;
  overflow: hidden;
  text-align: left;
  text-indent: -10em;
  width: 190px; }
  @media (max-width: 499px), (max-height: 299px) {
    .upfront {
      background-size: 90%;
      height: 140px;
      width: 175px; } }
  .upfront a {
    display: block;
    height: 100%;
    text-indent: -10em; }

.topline-info {
  color: #FF005A;
  margin-bottom: 1.5em; }

article {
  background-color: #000;
  color: #fff;
  position: relative; }

article:before {
  background: url("../img/top.png") 0 0 repeat-x black;
  content: "";
  display: block;
  height: 60px;
  position: relative;
  top: -10px;
  transform: rotate(-1deg); }

article:after {
  background: url("../img/bottom.png") 100% 100% repeat-x black;
  bottom: -10px;
  content: "";
  display: block;
  height: 60px;
  position: relative;
  transform: rotate(1deg); }

.speakers {
  margin: 80px auto 0;
  max-width: 100em;
  width: 100%; }
  @media (max-width: 399px) {
    .speakers {
      margin-top: 40px; } }

.speaker {
  color: #fff;
  float: left;
  position: relative; }
  @media (max-width: 399px) {
    .speaker {
      background-color: #111;
      border-bottom: 2px solid #999;
      width: 100%; } }
  @media (min-width: 400px) {
    .speaker {
      width: 50%; } }
  @media (min-width: 900px) {
    .speaker {
      width: 25%; } }
  @media (min-width: 1500px) {
    .speaker {
      width: 12.5%; } }
  .speaker:hover img {
    filter: blur(1px); }
  .speaker img {
    float: left;
    width: 35%; }
    @media (min-width: 400px) {
      .speaker img {
        width: 100%; } }
  @media (min-width: 400px) {
    .speaker:nth-child(odd) {
      margin-top: -20px; } }
  @media (min-width: 400px) {
    .speaker:hover .speaker__hover {
      display: block;
      position: absolute; } }

.speaker--tbc {
  background-color: #111; }
  .speaker--tbc .speaker__wrapper {
    text-align: center; }
  .speaker--tbc .speaker__name {
    margin-top: 40%; }

@media (min-width: 400px) {
  .speaker--call:before,
  .speaker--tbc:before {
    content: '';
    display: block;
    padding-top: 100%; } }

.speaker--call {
  background-color: #FF005A; }
  .speaker--call .speaker__name:hover {
    text-decoration: none; }

.speaker__wrapper {
  height: 100%;
  padding: 2em;
  top: 0;
  width: 100%; }
  @media (min-width: 400px) {
    .speaker__wrapper {
      position: absolute; } }
  @media (min-width: 1500px) {
    .speaker__wrapper {
      padding: 1.5em; } }

.speaker__content {
  text-align: center; }
  @media (max-width: 399px) {
    .speaker__content {
      margin: 0;
      max-width: none;
      padding: 1em; } }
  @media (min-width: 400px) {
    .speaker__content {
      left: 50%;
      position: absolute;
      top: 50%;
      transform: rotate(-3deg); } }
  @media (min-width: 400px) and (max-width: 34.99em) {
    .speaker__content {
      margin: -4em 0 0 -5em;
      max-width: 11em; } }
  @media (min-width: 35em) and (max-width: 1499px) {
    .speaker__content {
      margin: -3em 0 0 -6em;
      max-width: 12em; } }
  @media (min-width: 1500px) {
    .speaker__content {
      margin: -2em 0 0 -5.5em;
      max-width: 11em; } }
  .speaker__content .speaker__name {
    margin-bottom: 0; }

.speaker__hover {
  color: #fff;
  height: 100%;
  padding: 3em .5em .5em;
  width: 100%; }
  @media (max-width: 399px) {
    .speaker__hover {
      float: left;
      font-size: .7em;
      padding: 3em 1em 1em;
      width: 65%; } }
  @media (min-width: 400px) {
    .speaker__hover {
      background-color: rgba(0, 0, 0, 0.6);
      opacity: 0;
      position: absolute;
      text-align: center; } }
  @media (min-width: 1500px) {
    .speaker__hover {
      font-size: .7em; } }
  @media (min-width: 400px) {
    .speaker--show:hover .speaker__hover {
      opacity: 1;
      transition: opacity .3s ease; } }

.speaker__name,
.speaker__twitter {
  color: #fff;
  text-decoration: none; }
  .speaker__name:focus, .speaker__name:hover,
  .speaker__twitter:focus,
  .speaker__twitter:hover {
    text-decoration: underline; }

.speaker__name {
  display: block; }
  @media (min-width: 400px) {
    .speaker__name {
      margin-top: 40%; } }
  @media (min-width: 1500px) {
    .speaker__name {
      margin-top: 20%;
      font-size: 1.5em; } }
  @media (max-width: 1060px) and (min-width: 900px) {
    .speaker__name {
      margin-top: 20%;
      font-size: 1.5em; } }
  @media (max-width: 540px) {
    .speaker__name {
      margin-top: 20%;
      font-size: 1.5em; } }
  .speaker--call .speaker__name {
    margin: 0; }
  @media (max-width: 399px) {
    .speaker--show .speaker__name {
      margin: 0; } }

@media (min-width: 1500px) {
  .speaker__twitter {
    font-size: 1em; } }
@media (max-width: 1060px) and (min-width: 900px) {
  .speaker__twitter {
    font-size: 1em; } }
@media (max-width: 540px) {
  .speaker__twitter {
    font-size: 1em; } }

/* speakers page */
.speakers-page .speaker__island {
  float: left;
  width: 100%;
  padding-top: 2em;
  margin-bottom: 2em;
  border-top: 3px solid #FF005A; }
  @media (min-width: 700px) {
    .speakers-page .speaker__island {
      padding-top: 0; } }
.speakers-page .speaker__image-wrap {
  text-align: center; }
.speakers-page .speaker__image {
  margin: 0;
  float: none;
  width: 100%;
  max-width: 280px; }
  @media (min-width: 700px) {
    .speakers-page .speaker__image {
      float: left;
      margin: 0 3% 1em 0;
      width: auto; } }
.speakers-page .speaker__content-wrap {
  padding: 1em; }
.speakers-page .speaker__twitter {
  color: #222; }

.google-maps {
  background: url(../img/google-maps.png) 50% 50% no-repeat;
  float: left;
  min-height: 600px;
  width: 100%;
  z-index: -1; }
  @media (min-width: 400px) {
    .google-maps {
      margin-top: -20px; } }

.island {
  background: #fff;
  margin: 5%;
  padding: 3%;
  width: 90%; }
  @media (min-width: 900px) {
    .island {
      width: 40%; } }
  .island address {
    margin-bottom: 1.5em; }
  .island .btn, .island .btn--disabled {
    padding: .5em 3em; }

.tickets {
  float: left;
  width: 100%; }

.tickets__intro {
  margin: 4em 0 2em;
  text-align: center; }

.tickets__embed {
  top: -500px;
  position: absolute; }

.tickets__promo {
  float: left;
  margin: 2.5% 5% 5%;
  width: 40%; }
  .tickets__promo .btn, .tickets__promo .btn--disabled {
    margin-top: 1em; }
  @media (max-width: 37.5em) {
    .tickets__promo {
      margin: 2.5% 5% 10%;
      width: 90%; } }

.sponsors {
  background: #eee;
  float: left;
  padding: 3%;
  text-align: center;
  width: 100%; }
  .sponsors .sponsor {
    background: none;
    text-decoration: none;
    margin: 2%; }
    .sponsors .sponsor img {
      max-width: 170px;
      width: 100%; }
  .sponsors .container {
    display: table;
    width: 100%; }
    .sponsors .container a {
      display: inline-block; }
  .sponsors .headline {
    margin-bottom: 1em; }
    .sponsors .headline .sponsor img {
      border: 5px solid #FF005A; }
  .sponsors .silver {
    margin-bottom: 1em; }
    .sponsors .silver .sponsor img {
      max-width: 150px;
      border: 2px solid silver; }
  .sponsors .bronze {
    margin-bottom: 1em; }
    .sponsors .bronze .sponsor img {
      max-width: 130px;
      border: 1px solid #cd7f32; }
  .sponsors .partners {
    margin-bottom: 1em; }
    .sponsors .partners .sponsor img {
      max-width: 120px;
      border: 1px solid #bbb; }

.about {
  background-color: #111;
  color: #999;
  float: left;
  width: 100%; }
  .about .about__panel {
    float: left;
    margin: 5%;
    width: 40%; }
    @media (max-width: 37.5em) {
      .about .about__panel {
        margin: 2.5% 2.5% 7.5%;
        width: 95%; } }
  .about .btn, .about .btn--disabled {
    margin-top: 1em; }
  .about .btn:focus, .about .btn--disabled:focus,
  .about .btn:hover,
  .about .btn--disabled:hover {
    background-color: #999; }

.mailing-list {
  background: #111;
  color: #fff;
  float: left;
  padding: 3%;
  text-align: center;
  width: 100%; }

footer {
  clear: both;
  overflow: hidden;
  padding: 60px 30px 50px;
  text-align: center; }
  footer p {
    padding: 0 0 10px; }

.copyright {
  font-size: .8em;
  margin-top: 2em; }

.content {
  margin: 2em auto 5em;
  max-width: 60em; }
  .content p {
    margin: .5em 0 1em; }
  @media (max-width: 65.5em) {
    .content {
      margin: 2em 7.5% 5em; } }

.schedule {
  margin: 2em auto;
  max-width: 60em;
  position: relative;
  width: 80%; }
  @media (max-width: 700px) {
    .schedule {
      width: 95%; } }

.schedule__intro {
  margin-bottom: 2em; }

.session {
  margin-top: 1.5em;
  position: relative;
  width: 100%; }
  @media (min-width: 540px) {
    .session {
      margin-top: .8em; } }
  .session:nth-child(1) {
    margin-top: 2em; }

@media (min-width: 540px) {
  .session__time {
    left: 0;
    position: absolute;
    top: 1.7em; } }

.wrapper--session {
  padding: 1em;
  width: 100%; }
  @media (min-width: 540px) {
    .wrapper--session {
      margin-left: 20%;
      padding: 1.5em;
      width: 80%; } }
  .session .wrapper--session {
    background-color: #eee; }
  .session--talk .wrapper--session {
    background-color: #FFE5EE; }

.session__heading {
  line-height: 1.1; }
  @media (max-width: 540px) {
    .session__heading {
      font-size: 1.6em; } }

.session__speaker {
  color: #FF005A;
  display: block;
  font-weight: bold;
  text-decoration: none; }
  .session__speaker:focus, .session__speaker:hover {
    text-decoration: underline; }

.session__info p {
  margin-bottom: 1em; }

.workshop-points {
  clear: both;
  margin: 1em 0 2em;
  width: 100%; }
  .workshop-points li {
    margin-bottom: .8em; }

.workshop-tickets {
  clear: both;
  margin-bottom: 2em;
  text-align: center; }

.workshop-leader {
  background-color: #eee;
  padding: 1em 1.5em; }

.extras-page .extra__island {
  float: left;
  width: 100%;
  padding-top: 2em;
  margin-bottom: 2em;
  border-top: 3px solid #FF005A; }
  @media (min-width: 700px) {
    .extras-page .extra__island {
      padding-top: 0; } }
.extras-page .extra__image-wrap {
  text-align: center; }
.extras-page .extra__image {
  margin: 0;
  float: none;
  width: 100%;
  max-width: 280px; }
  @media (min-width: 700px) {
    .extras-page .extra__image {
      float: left;
      margin: 0 3% 1em 0;
      width: auto; } }
.extras-page .extra__content-wrap {
  padding: 1em; }
.extras-page .extra__twitter {
  color: #222; }

.body-mini {
  box-shadow: inset 0 0 0 10px #FF005A; }
  .body-mini a {
    color: #FF005A; }
  .body-mini .upfront {
    background-image: url(../mini/img/logo.png); }
  .body-mini .tagline {
    color: #FF005A;
    font-size: 3em; }
    @media (max-width: 420px) {
      .body-mini .tagline {
        font-size: 2em; } }
  .body-mini .topline-info {
    color: #111; }
    @media (max-width: 650px) {
      .body-mini .topline-info {
        font-size: 1.5em; } }
    @media (max-width: 490px) {
      .body-mini .topline-info {
        font-size: 1em;
        margin: 42px; } }
  .body-mini .btn--tickets {
    color: #fff; }
  .body-mini .spacer {
    float: left;
    height: 50px;
    width: 100%; }
  .body-mini .speakers {
    float: left;
    width: 100%; }
    .body-mini .speakers li {
      float: left;
      margin-bottom: 20px;
      width: 100%; }
  .body-mini .speaker {
    margin: 1em 0;
    min-height: 90px;
    padding-left: 85px;
    position: relative; }
    @media (max-width: 399px) {
      .body-mini .speaker {
        background: none;
        border: none; } }
  .body-mini .speaker__link {
    display: inline-block;
    float: left;
    margin-bottom: .2em;
    width: 100%; }
    @media (min-width: 920px) {
      .body-mini .speaker__link {
        width: 40%; } }
  .body-mini .speaker__title {
    color: #000;
    float: left;
    width: 100%; }
    @media (min-width: 920px) {
      .body-mini .speaker__title {
        width: 60%; } }
  .body-mini .speaker__image {
    left: 0;
    max-width: 70px;
    position: absolute;
    top: 0; }
  .body-mini .google-maps {
    float: left;
    margin: 20px 0;
    min-height: auto;
    width: 100%; }
  .body-mini .sponsors {
    background: #fff;
    text-align: left;
    padding-left: 0;
    padding-right: 0; }
    .body-mini .sponsors .container {
      text-align: center; }
  .body-mini .sponsors .silver .sponsor > img {
    border: 0; }
  .body-mini .mailing-list {
    border-left: 10px solid #FF005A;
    border-right: 10px solid #FF005A; }