/*
 * 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.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,
button,
input,
select,
textarea {
  color: #222;
}

body {
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * 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;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */
.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Image replacement
 */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}

/*
 * 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;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}
/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links for images, or javascript/internal links
   */
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
    /* h5bp.com/t */
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}
/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

/*
 * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

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

/*
 * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
 * and Safari 4.
 * Known issue: no IE 6 support.
 */
[hidden] {
  display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */
/*
 * 1. Corrects text resizing oddly in IE 6/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 IE 6/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.
 */
a:active,
a:hover {
  outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */
/*
 * Addresses font sizes and margins set differently in IE 6/7.
 * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */
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 IE 7/8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic;
}

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

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

/*
 * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
 */
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 IE 6/7.
 */
q {
  quotes: none;
}

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

/*
 * Addresses inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */
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 IE 6/7.
 */
dl,
menu,
ol,
ul {
  margin: 1em 0;
}

dd {
  margin: 0 0 0 40px;
}

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

/*
 * Corrects list images handled incorrectly in IE 7.
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */
/*
 * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improves image quality when scaled in IE 7.
 */
img {
  border: 0;
  /* 1 */
  -ms-interpolation-mode: bicubic;
  /* 2 */
}

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

/* ==========================================================================
   Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */
figure {
  margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/*
 * Corrects margin displayed oddly in IE 6/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 IE 6/7/8/9.
 * 2. Corrects text not wrapping in Firefox 3.
 * 3. Corrects alignment displayed oddly in IE 6/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 IE 6/7, Firefox 3+, Safari 5,
 *    and 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 Firefox 3+ 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 IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */
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 IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 * 3. Removes excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */
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 Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and 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 Firefox 3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

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

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

/*--------------------

Includes 
---------------------*/
/*  ======== Flexbox Mixins ==============
	------------------------
	Copyright (c) 2013 Brian Franco
	
	Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
	The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
	------------------------

	This is a set of mixins for those who want to mess
	around with flexbox using the native support of current
	browsers. For full support table check: http://caniuse.com/flexbox

	Basically this will use:
		Fallback, old syntax (IE10, Safari, mobile webkit browsers)
		Prefixed standard syntax (Chrome)
		Final standards syntax (FF, IE11, Opera 12.1)

	------------------------
	This was inspired by: 
		http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
	With help from: 
		http://www.w3.org/TR/css3-flexbox/
		http://the-echoplex.net/flexyboxes/
		http://msdn.microsoft.com/en-us/library/ie/hh772069%28v=vs.85%29.aspx
*/
/* ==========================================================================
   Variables
   ========================================================================== */
/*  Colors
-----------------------------*/
/* ==========================================================================
   Mixins
   ========================================================================== */
.inactive {
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  margin-top: 0.5em;
  z-index: -1;
}

.active {
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 1;
  margin-top: 0;
}

/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
  font-family: "grV-icons";
  src: url('../fonts/grV-icons.eot?1434585988');
  src: url('../fonts/grV-icons.eot?&1434585988#iefix') format("embedded-opentype"), url('../fonts/grV-icons.woff?1434585989') format("woff"), url('../fonts/grV-icons.ttf?1434585988') format("truetype"), url('../fonts/grV-icons.svg?1434585989#grV-icons') format("svg");
  font-weight: normal;
  font-style: normal;
}
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #8f2941;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-style: normal;
}
@media screen and (max-width: 67em) {
  html, body {
    font-size: 0.9em;
  }
}

.content {
  max-width: 1180px;
  width: 85%;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 900px) {
  .content {
    width: 90%;
  }
}
@media screen and (max-width: 700px) {
  .content {
    width: 95%;
  }
}

h3 {
  font-family: "Lobster Two", cursive;
  font-weight: 400;
  font-style: italic;
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  color: #069;
  font-size: 6em;
  margin: 0;
  line-height: 0.9em;
  margin: 0;
}

.subhead {
  font-size: 2em;
  color: #8f2941;
  line-height: 1.1em;
  margin-top: 0;
}

button, button:active, button:focus {
  outline: none;
}

button.primary {
  padding: 0.5em 1em;
  width: 100%;
  font-size: 1.3em;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #fff;
  color: #069;
  border: 1px solid #d7d3d3;
  padding: 1.0625em;
  text-align: right;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
button.primary:hover, button.primary:active, button.primary:focus {
  background: #eae8e8;
  border: 1px solid #069;
}

button.secondary {
  padding: 0.5em 1em;
  width: 100%;
  font-size: 1.3em;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: none;
  border: 1px solid #8f2941;
  color: #8f2941;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
button.secondary:hover, button.secondary:active, button.secondary:focus {
  background: #eae8e8;
  border: 1px solid #069;
}

.btn-secondary {
  padding: 0.5em 1em;
  width: 100%;
  font-size: 1.3em;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #fff;
  color: #069;
  border: 1px solid #d7d3d3;
  padding: 1.0625em;
  text-align: right;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  font-size: 1em;
  display: inline-block;
  width: auto;
  margin: 0.5em 0;
  padding: 0.5em 1em;
}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
  background: #eae8e8;
  border: 1px solid #069;
}

*:focus, *:active {
  outline: none !important;
}

/* Page/Section Specific Content
/////////////////////////////////////////////////////////////////////*/
header#hello {
  height: 120%;
  padding: 10% 0 1em;
  color: #fff;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 47em) {
  header#hello {
    font-size: 0.8em;
  }
}
header#hello h1 {
  font-family: "Lobster Two", cursive;
  font-weight: 700;
  font-style: italic;
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  font-size: 18em;
  line-height: 0.85em;
  margin: 0;
  text-align: center;
  text-indent: 0.08em;
}
header#hello h2 {
  width: 22em;
  padding: 2.09524em 0;
  height: 0;
  background-image: url('../images/../images/im_iain_eudailey.png?1434585984');
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: contain !important;
  text-indent: -9999em;
  margin: 0 auto 3em;
}
.svg header#hello h2 {
  background-image: url('../images/../images/im_iain_eudailey.svg?1434585986');
}
.ltie9 header#hello h2 {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(image-src='../images/im_iain_eudailey.png',sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/im_iain_eudailey.png',sizingMethod='scale')";
}
header#hello #say_my_name {
  position: relative;
  left: 50%;
  background: none;
  border: 1px solid #fff;
  color: #fff;
  padding: 0.5em 1em;
  top: -4.4em;
  margin: 0 -5.6em;
}
header#hello #i_like {
  display: block;
  overflow: hidden;
  max-height: 0;
  color: #77394b;
  background: #FFF;
  margin-bottom: 1em;
}
header#hello .width {
  display: block;
  margin: 0 auto;
  width: 800px;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.8em;
  padding: 0;
  position: relative;
  font-size: 6em;
  padding: 0.2em 0;
  top: -0.2em;
}
header#hello .width h3 {
  margin: 0;
  font-family: "Lobster Two", cursive;
  font-weight: 400;
  font-style: italic;
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  font-size: 1.1em;
  color: #8f2941;
}

#main {
  box-sizing: content-box;
  min-height: 100%;
  padding: 3em 0 0;
  border-top: 5px solid #069;
  position: relative;
  background: #f4f4f4;
  overflow: hidden;
}
#main .content {
  padding: 3em 0;
}
#main h3 {
  margin-bottom: 0.5em;
}
#main ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#main li {
  display: block;
  width: 47%;
}
#main .choice.main {
  padding: 0.5em 1em;
  width: 100%;
  font-size: 1.3em;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #fff;
  color: #069;
  border: 1px solid #d7d3d3;
  padding: 1.0625em;
  text-align: right;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  padding: 1.0625em;
  font-size: 1.8em;
  text-decoration: none;
  display: block;
  text-align: right;
  position: relative;
}
#main .choice.main:hover, #main .choice.main:active, #main .choice.main:focus {
  background: #eae8e8;
  border: 1px solid #069;
}
#main .choice.main:before {
  content: "";
  position: absolute;
  left: 1em;
  top: 0.5em;
  bottom: 0.5em;
  width: 5em;
  display: block;
  background-position: center left;
  background-size: contain;
}
#main #web a:before {
  background-image: url('../images/icon-web_design.png?1434585982');
  background-repeat: no-repeat;
  background-color: transparent;
}
.svg #main #web a:before {
  background-image: url('../images/icon-web_design.svg?1434585987');
}
#main #illustration a:before {
  background-image: url('../images/icon-illustration.png?1434585987');
  background-repeat: no-repeat;
  background-color: transparent;
}
.svg #main #illustration a:before {
  background-image: url('../images/icon-illustration.svg?1434585985');
}
#main #print a:before {
  background-image: url('../images/icon-print_design.png?1434585986');
  background-repeat: no-repeat;
  background-color: transparent;
}
.svg #main #print a:before {
  background-image: url('../images/icon-print_design.svg?1434585987');
}
#main #photo a:before {
  background-image: url('../images/icon-photography.png?1434585985');
  background-repeat: no-repeat;
  background-color: transparent;
}
.svg #main #photo a:before {
  background-image: url('../images/icon-photography.svg?1434585986');
}
#main #web, #main #print {
  float: left;
}
#main #illustration, #main #photo {
  float: right;
}
#main #web, #main #illustration {
  padding-bottom: 5%;
}
#main #nothing {
  clear: both;
  width: 100%;
  display: block;
  text-align: center;
  padding-top: 2em;
}
#main #nothing .choice {
  display: block;
  padding: 0.5em 1em;
  width: 100%;
  font-size: 1.3em;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: none;
  border: 1px solid #8f2941;
  color: #8f2941;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  text-decoration: none;
}
#main #nothing .choice:hover, #main #nothing .choice:active, #main #nothing .choice:focus {
  background: #eae8e8;
  border: 1px solid #069;
}

.hire_me, .work {
  min-height: 100%;
  background: #f4f4f4;
  padding: 2em;
}

.hire_me #hireMeForm {
  position: relative;
}
@media (min-width: 53em) {
  .hire_me #hireMeForm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
  }
  .hire_me #hireMeForm .leftFormElements {
    width: 43%;
  }
  .hire_me #hireMeForm .rightFormElements {
    width: 50%;
  }
}
.hire_me .onSecondThought {
  margin-top: 4em;
  padding-top: 2em;
  border-top: 1px solid #d7d3d3;
}
.hire_me .btn-submit {
  text-align: right;
}
.hire_me .btn-submit button {
  display: inline-block;
  width: auto;
  padding-left: 4em;
  position: relative;
}
.hire_me .btn-submit button:before {
  content: "";
  position: absolute;
  display: block;
  left: 1em;
  line-height: inherit;
  width: 2em;
  padding: 0.67324em 0;
  height: 0;
  background-image: url('../images/icon-mail.png?1434585984');
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: contain !important;
}
.svg .hire_me .btn-submit button:before {
  background-image: url('../images/icon-mail.svg?1434585986');
}
.ltie9 .hire_me .btn-submit button:before {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(image-src='icon-mail.png',sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon-mail.png',sizingMethod='scale')";
}

@-moz-keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.form-complete {
  display: none;
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2em 3em;
  background: rgba(255, 255, 255, 0.95);
  text-align: right;
}
.form-complete h3 {
  font-size: 4em;
  margin-top: auto;
}
.form-complete p {
  margin-bottom: 0;
}
.form-complete.show {
  -moz-animation: show 600ms;
  -webkit-animation: show 600ms;
  animation: show 600ms;
  opacity: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.work #images > div {
  display: inline-block;
}

.cat:not(:last-of-type) {
  margin-right: 0.3em;
}

/* Form styles 
/////////////////////////////////////////////////////////////////////*/
input, textarea {
  padding: 0.5em 1em;
  width: 100%;
  font-size: 1.3em;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #fff;
  color: #069;
  border: 1px solid #d7d3d3;
  padding: 1.0625em;
  text-align: right;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  text-align: left;
  width: 100%;
  border: 1px solid #d7d3d3;
  background: #fff;
  outline: none;
  padding: 0.7em;
  font-size: 1.2em;
}
input:hover, input:active, input:focus, textarea:hover, textarea:active, textarea:focus {
  background: #eae8e8;
  border: 1px solid #069;
}
input:hover, textarea:hover {
  background: #f4f4f4;
}
input:active, input:active:hover, input:focus, input:focus:hover, textarea:active, textarea:active:hover, textarea:focus, textarea:focus:hover {
  border: 1px solid #069;
  background: #fff;
}

textarea {
  height: 6.2em;
  resize: none;
}

.form-group {
  padding: 0.5em 0;
}
.form-group.are_you_what {
  display: none;
}

label {
  color: #8f2941;
  width: 100%;
  margin-bottom: 0.2em;
  display: block;
  font-size: 1.125em;
}

/* Custom Radios/Checkboxes */
input[type="checkbox"], input[type="radio"] {
  border: none;
}

input[type="checkbox"], input[type="radio"] {
  position: absolute;
  width: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
input[type="checkbox"] + label, input[type="radio"] + label {
  padding: 0.5em 1em;
  width: 100%;
  font-size: 1.3em;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #fff;
  color: #069;
  border: 1px solid #d7d3d3;
  padding: 1.0625em;
  text-align: right;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  cursor: pointer;
  padding: 0;
  display: inline-block;
  padding: 0.5em 1em 0.5em 2.5em;
  position: relative;
  font-size: 1.1em;
  text-align: left;
}
input[type="checkbox"] + label:hover, input[type="checkbox"] + label:active, input[type="checkbox"] + label:focus, input[type="radio"] + label:hover, input[type="radio"] + label:active, input[type="radio"] + label:focus {
  background: #eae8e8;
  border: 1px solid #069;
}
input[type="checkbox"] + label:hover, input[type="radio"] + label:hover {
  background: #f4f4f4;
}
input[type="checkbox"] + label:before, input[type="radio"] + label:before {
  font-family: "grV-icons";
  position: absolute;
  left: 0.8em;
  color: #6c9db6;
}
input[type="checkbox"]:focus + label, input[type="radio"]:focus + label {
  border-color: #069;
}

input[type="checkbox"] + label:before {
  content: "\e609";
  font-family: "grV-icons";
  margin-right: 0.7em;
  font-size: 1.1em;
}

input[type="checkbox"]:checked + label, input[type="checkbox"]:checked + label:hover {
  background: #fff;
}
input[type="checkbox"]:checked + label:before {
  content: "\e608";
  color: inherit;
  color: #8f2941;
}

input[type="radio"] + label:before {
  content: "\e607";
  font-family: "grV-icons";
  font-size: 0.9em;
}
input[type="radio"]:checked + label:before {
  content: "\e606";
  color: inherit;
  color: #8f2941;
}

.work {
  text-align: center;
}
.work #images a {
  cursor: zoom-in;
}

#catagories {
  max-width: 1180px;
  width: 85%;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
}
@media screen and (max-width: 900px) {
  #catagories {
    width: 90%;
  }
}
@media screen and (max-width: 700px) {
  #catagories {
    width: 95%;
  }
}
#catagories .hire-me-btn {
  margin-left: auto;
}
@media (max-width: 50em) {
  #catagories > *:not(.hire-me-btn) {
    display: none;
  }
  #catagories .hire-me-btn {
    margin: auto;
  }
}

#lightboxOverlay {
  cursor: zoom-out;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10000;
}

#lightbox {
  position: absolute;
  width: 100%;
  pointer-events: none;
  z-index: 10000;
}

#lightbox-secNav-btnClose img, #lightbox-secNav img {
  display: none;
}

.lb-outerContainer, .lb-dataContainer {
  margin: 0 auto;
  color: #fff;
}

.lb-dataContainer {
  padding-top: 0.5em;
}