@charset "UTF-8";
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
  font-family: "GothamCondensedBold";
  src: url("../fonts/GothamCondensed-Bold.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/GothamCondensed-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/GothamCondensed-Bold.woff") format("woff"), url("../fonts/GothamCondensed-Bold.ttf") format("truetype"), url("../fonts/GothamCondensed-Bold.svg#GothamCondensed-Bold") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "BrandonGrotesqueRegular";
  src: url("../fonts/BrandonGrotesque-Regular.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/BrandonGrotesque-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/BrandonGrotesque-Regular.woff") format("woff"), url("../fonts/BrandonGrotesque-Regular.ttf") format("truetype"), url("../fonts/BrandonGrotesque-Regular.svg#BrandonGrotesque-Regular") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "BrandonGrotesqueMedium";
  src: url("../fonts/BrandonGrotesque-Medium.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/BrandonGrotesque-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/BrandonGrotesque-Medium.woff") format("woff"), url("../fonts/BrandonGrotesque-Medium.ttf") format("truetype"), url("../fonts/BrandonGrotesque-Medium.svg#BrandonGrotesque-Medium") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "BrandonGrotesqueBold";
  src: url("../fonts/BrandonGrotesque-Bold.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/BrandonGrotesque-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/BrandonGrotesque-Bold.woff") format("woff"), url("../fonts/BrandonGrotesque-Bold.ttf") format("truetype"), url("../fonts/BrandonGrotesque-Bold.svg#BrandonGrotesque-Bold") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "BrandonGrotesqueBlack";
  src: url("../fonts/BrandonGrotesque-Black.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/BrandonGrotesque-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/BrandonGrotesque-Black.woff") format("woff"), url("../fonts/BrandonGrotesque-Black.ttf") format("truetype"), url("../fonts/BrandonGrotesque-Black.svg#BrandonGrotesque-Black") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
/* ==========================================================================
   Imports and variables
   ========================================================================== */
/* Corrects `block` display not defined in IE6/7/8/9 & FF3.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

/*
 * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3.
 */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4.
 * Known issue: no IE6 support.
 */
[hidden] {
  display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */
/*
 * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}

/*
 * Addresses `font-family` inconsistency between `textarea` and other form
 * elements.
 */
html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}

/*
 * Addresses margins handled incorrectly in IE6/7.
 */
body {
  margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */
/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  /*outline: thin dotted;*/
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 * people.opera.com/patrickl/experiments/keyboard/test
 */
a:active,
a:hover {
  outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */
/*
 * Addresses font sizes and margins set differently in IE6/7.
 * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

h4 {
  font-size: 1em;
  margin: 1.33em 0;
}

h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

h6 {
  font-size: 0.75em;
  margin: 2.33em 0;
}

/*
 * Addresses styling not present in IE7/8/9, S5, Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in FF3+, S4/5, Chrome.
 */
b,
strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

/*
 * Addresses styling not present in S5, Chrome.
 */
dfn {
  font-style: italic;
}

/*
 * Addresses styling not present in IE6/7/8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/*
 * Addresses margins set differently in IE6/7.
 */
p,
pre {
  margin: 1em 0;
}

/*
 * Corrects font family set oddly in IE6, S4/5, Chrome.
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  _font-family: "courier new", monospace;
  font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*
 * Addresses CSS quotes not supported in IE6/7.
 */
q {
  quotes: none;
}

/*
 * Addresses `quotes` property not supported in S4.
 */
q:before,
q:after {
  content: "";
  content: none;
}

small {
  font-size: 75%;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 * gist.github.com/413930
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ==========================================================================
   Lists
   ========================================================================== */
/*
 * Addresses margins set differently in IE6/7.
 */
dl,
menu,
ol,
ul {
  margin: 1em 0;
}

dd {
  margin: 0 0 0 40px;
}

/*
 * Addresses paddings set differently in IE6/7.
 */
menu,
ol,
ul {
  padding: 0 0 0 40px;
}

/*
 * Corrects list images handled incorrectly in IE7.
 */
/* ==========================================================================
   Embedded content
   ========================================================================== */
/*
 * 1. Removes border when inside `a` element in IE6/7/8/9, FF3.
 * 2. Improves image quality when scaled in IE7.
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */
img {
  border: 0;
  /* 1 */
  /* 2 */
  image-rendering: -webkit-optimize-contrast;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
img {
  vertical-align: middle;
}

/*
 * Corrects overflow displayed oddly in IE9.
 */
svg:not(:root) {
  overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE6/7/8/9, S5, O11.
 */
figure {
  margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/*
 * Corrects margin displayed oddly in IE6/7.
 */
form {
  margin: 0;
}

/*
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE6/7/8/9.
 * 2. Corrects text not wrapping in FF3.
 * 3. Corrects alignment displayed oddly in IE6/7.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  white-space: normal;
  /* 2 */
  *margin-left: -7px;
  /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers.
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
 * 3. Improves appearance and consistency in all browsers.
 */
button,
input,
select,
textarea {
  font-size: 100%;
  /* 1 */
  margin: 0;
  /* 2 */
  vertical-align: baseline;
  /* 3 */
  *vertical-align: middle;
  /* 3 */
}

/*
 * Addresses FF3/4 setting `line-height` on `input` using `!important` in the
 * UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Removes inner spacing in IE7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE6.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
  *overflow: visible;
  /* 4 */
}

/*
 * Re-set default cursor for disabled elements.
 */
button[disabled],
input[disabled] {
  cursor: default;
}

/*
 * 1. Addresses box sizing set to content-box in IE8/9.
 * 2. Removes excess padding in IE8/9.
 * 3. Removes excess padding in IE7.
 *    Known issue: excess padding remains in IE6.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
  *height: 13px;
  /* 3 */
  *width: 13px;
  /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
 *    to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  /* 2 */
  box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X.
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
 * Removes inner padding and border in FF3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9.
 * 2. Improves readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}

/* ==========================================================================
   Tables
   ========================================================================== */
/*
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/******************************************************************
CUSTOMIZED RESET VALUES
I added these extra styles as a more personalized reset. Feel free
to remove them if you like or add your own. If you want to update
the normalize styles, make sure to edit from this point up.
******************************************************************/
/*p {
	-webkit-hyphens: auto;
	-epub-hyphens:   auto;
	-moz-hyphens:    auto;
  hyphens:         auto;
}*/
b, strong, .strong {
  font-weight: bold;
}

dfn, em, .em {
  font-style: italic;
}

small, .small {
  font-size: 75%;
}

dd {
  margin: 0;
}

.sidebar ul,
.sidebar ol,
.commentlist {
  list-style: none;
}

/*********************
CLEARFIXIN'
*********************/
.clearfix {
  zoom: 1;
}
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

/*********************
TOOLS
*********************/
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.image-replacement {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

a {
  outline: 0;
}

body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
  outline: none;
}

/*********************
TYPOGRAPHY
*********************/
span.amp {
  font-family: Baskerville, "Goudy Old Style", Palatino, "Book Antiqua", serif !important;
  font-style: italic;
}

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

.text-center {
  text-align: center;
}

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

/*********************
TRANSITION
*********************/
/*
I totally rewrote this to be cleaner and easier to use.
You'll need to be using Sass 3.2+ for these to work.
Thanks to @anthonyshort for the inspiration on these.
USAGE: @include transition(all 0.2s ease-in-out);
*/
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdo it.
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
img {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html,
button,
input,
select,
textarea {
  color: #4d4d4f;
}

body {
  color: #4d4d4f;
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  background: #fff;
}
body strong {
  font-size: 15px;
}
body strong.blue {
  color: #2bcbe5;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 12px;
  line-height: 1.1;
  font-weight: lighter;
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
  display: block;
  font-size: 12px;
  font-weight: normal;
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 21px;
}

h3 {
  font-size: 30px;
  line-height: 32px;
  font-family: "BrandonGrotesqueBlack", Arial, sans-serif;
}

h4 {
  font-size: 20px;
  line-height: 19px;
  font-family: "BrandonGrotesqueBlack", Arial, sans-serif;
}

h5 {
  font-size: 13px;
}

h6 {
  font-size: 12px;
}

p, ul, ol, dl {
  margin: 0 0 12px;
}
p.blue, ul.blue, ol.blue, dl.blue {
  color: #2bcbe5;
}

blockquote {
  margin: 0 0 12px;
}
blockquote p {
  margin: 0;
}
blockquote strong {
  text-transform: uppercase;
}

a {
  color: #333;
}
ul {
  padding-left: 20px;
  list-style-type: square;
  margin-bottom: 30px;
}
ul li {
  margin-bottom: 6px;
}

/*
 * inner
 */
.inner {
  float: none;
  margin: 0 auto;
  max-width: 740px;
  width: 96%;
  position: relative;
}

.wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
}

/*
 * header
 */
.header {
  float: left;
  width: 100%;
  background: #fff;
  padding: 34px 0;
  z-index: 1;
  position: relative;
}

#Optimo {
  float: left;
  margin: 15px 0;
  width: 261px;
}
@media all and (max-width: 540px) {
  #Optimo {
    position: relative;
    margin: 0 auto;
    right: auto;
    display: block;
    float: none;
    margin-bottom: 20px;
  }
}

#black-swan-data {
  position: absolute;
  right: -90px;
  top: 0;
}
@media all and (max-width: 740px) {
  #black-swan-data {
    right: 0;
  }
}
@media all and (max-width: 540px) {
  #black-swan-data {
    position: relative;
    margin: 0 auto;
    right: auto;
    display: block;
    float: none;
  }
}

div.left {
  float: left;
  width: 48%;
}
@media all and (max-width: 540px) {
  div.left {
    width: 100%;
  }
}

div.right {
  float: right;
  width: 48%;
}
@media all and (max-width: 540px) {
  div.right {
    width: 100%;
  }
}

/*
 * main
 */
.top {
  float: left;
  width: 100%;
  color: #fff;
  font-size: 23px;
  line-height: 32px;
  font-family: "BrandonGrotesqueMedium", Arial, sans-serif;
  padding: 74px 0 30px;
  text-transform: uppercase;
  position: relative;
  overflow-y: visible;
  margin-bottom: 70px;
}
.top strong {
  color: #2bcbe5;
  font-family: "BrandonGrotesqueBold", Arial, sans-serif;
  font-size: 23px;
}
.top .left {
  max-width: 310px;
}
@media all and (max-width: 640px) {
  .top .left {
    max-width: 640px;
    width: 100%;
  }
}
.top img {
  position: absolute;
  top: -74px;
  right: 0;
}
@media all and (max-width: 640px) {
  .top img {
    position: relative;
    right: auto;
    margin: 0 auto;
    display: block;
  }
}
.top:before {
  position: absolute;
  width: 110%;
  height: 110%;
  background: #1c262e;
  left: -5%;
  top: -10%;
  display: block;
  content: "";
  z-index: 0;
  transform: rotate(-2deg);
  border-bottom: 4px solid #2bcbe5;
}

.white {
  float: left;
  width: 100%;
  background: #fff;
  color: #4d4d4f;
}
.white h3 {
  color: #2bcbe5;
}
.white ul {
  font-size: 15px;
  line-height: 19px;
  column-count: 2;
  column-gap: 50px;
  list-style-type: none;
}
.white ul li:before {
  content: "▪";
  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #2bcbe5;
  /* Change the color */
  display: inline-block;
  /* Needed to add space between the bullet and the text */
  font-size: 1.2em;
  width: 1em;
  /* Also needed for space (tweak if needed) */
  margin-left: -1em;
  /* Also needed for space (tweak if needed) */
}
.white ul.blue {
  color: #2bcbe5;
  font-weight: 700;
}
.white ul.col1 {
  column-count: 1;
}
.white ul.normsize {
  font-size: 13px;
}
.white ul.normsize li {
  margin-bottom: 0;
}
.white .left ul {
  column-count: 1;
}

div.bluebox {
  float: left;
  width: 100%;
  color: #fff;
  margin: 36px 0;
}
div.bluebox .box {
  background: #2bcbe5;
  padding: 6px;
  float: left;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div.bluebox .left {
  padding: 20px;
  font-size: 15px;
}
div.bluebox h3 {
  color: #1c262e;
}
div.bluebox .right {
  padding: 15px;
  font-size: 15px;
  background: #1c262e;
  width: 45%;
  position: relative;
}
@media all and (max-width: 540px) {
  div.bluebox .right {
    width: 100%;
  }
}
div.bluebox .right h4 {
  font-size: 22px;
  font-family: "BrandonGrotesqueMedium", Arial, sans-serif;
}
div.bluebox .right ul {
  list-style-type: none;
  padding-left: 37px;
  margin-bottom: 0;
}
div.bluebox .right li {
  position: relative;
  margin-bottom: 12px;
}
div.bluebox .right li:before {
  display: block;
  width: 20px;
  height: 22px;
  position: absolute;
  left: -31px;
  top: 4px;
  content: "";
  background-image: url(../images/question.png);
  background-size: contain;
}
div.bluebox .right:after {
  display: block;
  content: "";
  width: 44px;
  height: 17px;
  background: #2bcbe5;
  position: absolute;
  bottom: 0px;
  right: -1px;
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
          clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

div.blue {
  float: left;
  width: 100%;
  background: #fff;
  color: #fff;
  padding: 74px 0 30px;
  position: relative;
  overflow-y: visible;
  margin-bottom: 70px;
}
div.blue svg {
  width: 152px;
  height: 152px;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
div.blue p {
  display: block;
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  padding-left: 184px;
}
div.blue:before {
  position: absolute;
  width: 110%;
  height: 100%;
  background: #2bcbe5;
  left: -5%;
  top: 5%;
  display: block;
  content: "";
  z-index: 0;
  transform: rotate(-2deg);
}

div.navy {
  float: left;
  width: 100%;
  color: #fff;
  padding: 74px 0 30px;
  position: relative;
  overflow-y: visible;
  margin-bottom: 0;
}
div.navy h3 {
  color: #fff;
  font-style: normal;
}
div.navy .blue {
  color: #2bcbe5;
  font-size: 18px;
  line-height: 23px;
  font-style: italic;
}
div.navy p {
  display: inline-block;
}
div.navy img {
  display: inline-block;
  margin-right: 12px;
  margin-bottom: 12px;
  vertical-align: top;
}
div.navy:before {
  position: absolute;
  width: 110%;
  height: 100%;
  background: #1c262e;
  left: -5%;
  top: 10%;
  display: block;
  content: "";
  z-index: 0;
  transform: rotate(-2deg);
  border-top: 4px solid #2bcbe5;
}

div.greybox {
  float: left;
  width: 100%;
  background: #fff;
  color: #4d4d4f;
  margin: 32px 0;
}
div.greybox .box {
  background: #f8f7f7;
  padding: 22px;
  float: left;
  width: 100%;
}
div.greybox .left, div.greybox .right {
  display: flex;
}
div.greybox .left p, div.greybox .right p {
  width: 120px;
}
div.greybox ul {
  column-count: 2;
  padding: 0;
  list-style-type: none;
}
div.greybox ul li {
  margin-bottom: 0;
}

.front {
  z-index: 1;
  position: relative;
  padding: 20px 0;
}
.front h3 {
  color: #6d6e71;
}
.front h3.blue {
  color: #2bcbe5;
}

/*
 * footer
 */
div.footer {
  float: left;
  width: 100%;
  background: #f8f7f7;
  color: #4d4d4f;
  font-size: 25px;
  font-family: "BrandonGrotesqueRegular", Arial, sans-serif;
  padding: 50px 0;
}
div.footer strong {
  font-family: "BrandonGrotesqueBold", Arial, sans-serif;
  font-size: 25px;
}
div.footer p {
  width: 100%;
  float: left;
  margin-bottom: 20px;
}
div.footer a.button {
  text-transform: uppercase;
  color: #fff;
  display: block;
  padding: 20px 22px;
  border: 2px solid #2bcbe5;
  font-family: "BrandonGrotesqueBlack", Arial, sans-serif;
  background: #1c262e;
  float: left;
  margin-bottom: 40px;
  text-decoration: none;
  position: relative;
  -webkit-transition: all, 0.2s;
  -ms-transition: all, 0.2s;
  -o-transition: all, 0.2s;
  -transition: all, 0.2s;
  transition: all, 0.2s;
}
div.footer a.button:after {
  display: block;
  content: "";
  width: 44px;
  height: 17px;
  background: #2bcbe5;
  position: absolute;
  bottom: 0px;
  right: -1px;
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
          clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
div.footer a.button:hover {
  background: #2bcbe5;
}

/*
 * form
 */
form {
  float: right;
  width: 47%;
  background: #f0eded;
  padding: 24px;
}
@media all and (max-width: 540px) {
  form {
    width: 100%;
  }
}
form p {
  font-family: "BrandonGrotesqueBold", Arial, sans-serif;
  font-size: 18px;
}
form label {
  float: left;
  width: 100%;
  font-size: 15px;
  font-family: "BrandonGrotesqueRegular", Arial, sans-serif;
}
form input, form textarea {
  background: #fff;
  border: 0;
  float: left;
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
}
form textarea {
  height: 150px;
}
form input[type=submit] {
  background: #2bcbe5;
  font-family: "BrandonGrotesqueBold", Arial, sans-serif;
  font-size: 21px;
  text-transform: uppercase;
  width: 100%;
  max-width: 195px;
  float: none;
  margin: 0 auto;
  padding: 14px;
  color: #fff;
  display: block;
  -webkit-transition: all, 0.2s;
  -ms-transition: all, 0.2s;
  -o-transition: all, 0.2s;
  -transition: all, 0.2s;
  transition: all, 0.2s;
}
form input[type=submit]:hover {
  background: #1c262e;
}
.g-recaptcha {
  clear: both;
  margin-bottom: 10px;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
  display: none !important;
  visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
  *zoom: 1;
}

body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
  outline: none;
}

/* ==========================================================================
   Media queries
   ========================================================================== */