/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:

	Eric Meyer					:: http://meyerweb.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com

-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

article, aside, figure, footer, header, nav, section, details, summary {
  display: block; }

/* Handle box-sizing while better addressing child elements:
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  box-sizing: border-box; }

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

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {
  max-width: 100%; }

/* force a vertical scrollbar to prevent a jumpy page */
html {
  overflow-y: scroll; }

/* we use a lot of ULs that aren't bulleted.
	don't forget to restore the bullets within content. */
ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help; }

/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

th {
  font-weight: bold;
  vertical-align: bottom; }

td {
  font-weight: normal;
  vertical-align: top; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */ }

input[type="radio"] {
  vertical-align: text-bottom; }

input[type="checkbox"] {
  vertical-align: bottom; }

.ie7 input[type="checkbox"] {
  vertical-align: baseline; }

.ie6 input {
  vertical-align: text-bottom; }

select, input, textarea {
  font: 99% sans-serif; }

table {
  font-size: inherit;
  font: 100%; }

small {
  font-size: 85%; }

strong {
  font-weight: bold; }

td, td img {
  vertical-align: top; }

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* standardize any monospaced elements */
pre, code, kbd, samp {
  font-family: monospace, sans-serif; }

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
  cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {
  margin: 0; }

/* make buttons play nice in IE */
button,
input[type=button] {
  width: auto;
  overflow: visible; }

/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic; }

/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:before, .clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden; }

.clearfix:after {
  clear: both; }

.clearfix {
  zoom: 1; }

/*
Theme Name: The HTML5 Reset Theme
Theme URI: http://html5reset.org
Description: A style-free theme to get you started on an HTML5-based WordPress theme of your own.
Author: Monkey Do! + @ckhicks
Author URI: http://monkeydo.biz
Version: 2.0
*/
/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/
/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {
  font-family: 'Open Sans', 'Freesans', sans-serif;
  -webkit-font-smoothing: antialiased; }

/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */
/* We like off-black for text. */
body, select, input, textarea {
  color: #f9f8f8; }

a {
  text-decoration: none;
  color: #1ddfff; }

a:hover {
  color: #fff; }

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection {
  background: #fcd700;
  color: #fff;
  text-shadow: none; }

::selection {
  background: #fcd700;
  color: #fff;
  text-shadow: none; }

/*	j.mp/webkit-tap-highlight-color */
a:link {
  -webkit-tap-highlight-color: #fcd700; }

ins {
  background-color: #fcd700;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #fcd700;
  color: #000;
  font-style: italic;
  font-weight: bold; }

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder {
  color: #a9a9a9; }

textarea:-moz-placeholder {
  color: #a9a9a9; }

body {
  background-color: #1e1e1e;
  font-size: 0.8em; }
  @media only screen and (min-width: 360px) {
    body {
      font-size: 1em; } }
  @media only screen and (max-height: 400px) {
    body {
      font-size: 0.8em !important; } }

#wrapper {
  margin-bottom: 350px; }
  @media only screen and (min-width: 360px) {
    #wrapper {
      margin-bottom: 430px; } }
  @media only screen and (min-width: 650px) {
    #wrapper {
      margin-bottom: 350px; } }

.page-template-p-contact-php #wrapper {
  margin-bottom: 0; }

.noScroll {
  overflow: hidden;
  height: 100vh; }

.hamburgerLine {
  position: absolute;
  height: 3px;
  width: 20px;
  border-radius: 1px;
  fill: #303030; }
  @media only screen and (min-width: 576px) {
    .hamburgerLine {
      right: 30px;
      width: 30px;
      height: 5px; } }
  @media only screen and (max-height: 400px) {
    .hamburgerLine {
      height: 3px;
      width: 20px; } }
  @media only screen and (min-width: 1040px) {
    .hamburgerLine {
      display: none; } }

.lineTop {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  top: 27px; }
  @media only screen and (min-width: 576px) {
    .lineTop {
      top: 25px; } }
  @media only screen and (max-height: 400px) {
    .lineTop {
      top: 27px; } }

.lineBottom {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  bottom: 27px; }
  @media only screen and (min-width: 576px) {
    .lineBottom {
      bottom: 25px; } }
  @media only screen and (max-height: 400px) {
    .lineBottom {
      bottom: 27px; } }

#navToggle, #navToggle:visited {
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 4;
  position: fixed;
  color: #3c3c3c;
  background-color: #10ff92;
  height: 50px;
  width: 80px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  @media only screen and (min-width: 576px) {
    #navToggle, #navToggle:visited {
      margin-top: 30px;
      height: 70px;
      width: 100px; } }
  @media only screen and (max-height: 400px) {
    #navToggle, #navToggle:visited {
      margin-top: 0;
      height: 50px;
      width: 80px; } }
  #navToggle span, #navToggle:visited span {
    z-index: 4;
    -webkit-font-smoothing: antialiased;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: absolute;
    margin-left: -10000px;
    overflow: hidden;
    height: 0;
    width: 0; }
    @media only screen and (min-width: 1040px) {
      #navToggle span, #navToggle:visited span {
        margin: 0;
        position: relative; } }

#navToggle:hover,
#navToggle:focus,
#navToggle:active {
  background-color: #dcffef; }
  @media only screen and (min-width: 576px) {
    #navToggle:hover .lineTop,
    #navToggle:focus .lineTop,
    #navToggle:active .lineTop {
      top: 23px; }
    #navToggle:hover .lineBottom,
    #navToggle:focus .lineBottom,
    #navToggle:active .lineBottom {
      bottom: 23px; } }

#navToggle.selected {
  background-color: #3c3c3c;
  color: white; }
  #navToggle.selected:hover, #navToggle.selected:active, #navToggle.selected:focus {
    background-color: #898989; }
  #navToggle.selected .lineTop {
    top: 23px;
    transform: rotate(45deg); }
    @media only screen and (min-width: 576px) {
      #navToggle.selected .lineTop {
        top: 32px; } }
    @media only screen and (max-height: 400px) {
      #navToggle.selected .lineTop {
        top: 23px;
        transform: rotate(45deg); } }
  #navToggle.selected .lineBottom {
    bottom: 24px;
    transform: rotate(-45deg); }
    @media only screen and (min-width: 576px) {
      #navToggle.selected .lineBottom {
        bottom: 33px; } }
    @media only screen and (max-height: 400px) {
      #navToggle.selected .lineBottom {
        bottom: 24px;
        transform: rotate(45deg); } }
  #navToggle.selected .hamburgerLine {
    fill: #f9f8f8; }

.fixIt {
  position: fixed;
  left: 0; }

.fullPageNav {
  overflow-y: scroll;
  z-index: 3;
  display: none;
  -webkit-font-smoothing: antialiased;
  top: 0;
  left: 0;
  position: fixed;
  text-align: center;
  background-color: rgba(16, 255, 146, 0.9);
  width: 100%;
  height: 110vh; }
  .fullPageNav .section {
    border: 1px solid #303030 !important;
    border-bottom: 5px solid #1e1e1e !important; }
  .fullPageNav .lineSeperator {
    background: #3c3c3c;
    border-top: none;
    width: 50px;
    -moz-animation-name: lineFade;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-duration: 1.5s;
    -webkit-animation-name: lineFade;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 1.5s;
    animation-name: lineFade;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: 1s; }
@-moz-keyframes lineFade {
  0% {
    opacity: 0; }
  50% {
    opacity: 0;
    width: 0; }
  100% {
    opacity: 1;
    width: 50px; } }
@-webkit-keyframes lineFade {
  0% {
    opacity: 0; }
  50% {
    opacity: 0;
    width: 0; }
  100% {
    opacity: 1;
    width: 50px; } }
@keyframes lineFade {
  0% {
    opacity: 0; }
  50% {
    opacity: 0;
    width: 0; }
  100% {
    opacity: 1;
    width: 50px; } }
  .fullPageNav a, .fullPageNav a:visited {
    display: block;
    text-decoration: none;
    margin: 20px auto;
    padding: 5px;
    font-weight: 200;
    font-size: 1.2em;
    letter-spacing: 0.1em;
    width: 45%;
    max-width: 190px;
    color: #3c3c3c;
    border: 1px solid #3c3c3c;
    border-radius: 2px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -moz-animation-name: slideSection;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-duration: 0.6s;
    -webkit-animation-name: slideSection;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 0.6s;
    animation-name: slideSection;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: 0.6s; }
@-moz-keyframes slideSection {
  0% {
    opacity: 0.2;
    -moz-transform: translateY(-70px); }
  100% {
    opacity: 1;
    -moz-transform: translateY 0; } }
@-webkit-keyframes slideSection {
  0% {
    opacity: 0.2;
    -webkit-transform: translateY(-70px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }
@keyframes slideSection {
  0% {
    opacity: 0.2;
    transform: translateY(-70px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
    @media only screen and (min-width: 576px) {
      .fullPageNav a, .fullPageNav a:visited {
        margin: 20px auto;
        padding: 10px;
        font-weight: 200;
        font-size: 1.4em;
        letter-spacing: 0.1em;
        max-width: 200px;
        border: 1px solid #3c3c3c;
        text-decoration: none;
        display: block; } }
    @media only screen and (max-height: 470px) {
      .fullPageNav a, .fullPageNav a:visited {
        font-size: 0.8em;
        text-transform: uppercase;
        display: inline-block;
        font-weight: 400;
        margin: 6px; } }
  .fullPageNav a:nth-child(2) {
    -webkit-animation-delay: 0.01s; }
  .fullPageNav a:nth-child(3) {
    -webkit-animation-delay: 0.02s; }
  .fullPageNav a:nth-child(4) {
    -webkit-animation-delay: 0.03s; }
  .fullPageNav a:nth-child(5) {
    -webkit-animation-delay: 0.04s; }
  .fullPageNav a:nth-child(6) {
    -webkit-animation-delay: 0.05s; }
  .fullPageNav a:nth-child(7) {
    -webkit-animation-delay: 0.06s; }
  .fullPageNav a:nth-child(8) {
    -webkit-animation-delay: 0.07s; }
  .fullPageNav a:hover, .fullPageNav a:active {
    background-color: #3c3c3c;
    color: #10ff92;
    fill: #10ff92; }
  .fullPageNav .table {
    margin: 0 auto;
    display: table;
    width: 100%;
    height: 110vh; }
    @media only screen and (max-height: 470px) {
      .fullPageNav .table {
        max-width: 700px; } }
    .fullPageNav .table .tableCell {
      top: -5vh;
      display: table-cell;
      vertical-align: middle; }

#homeButton {
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 4;
  position: fixed;
  background-color: #272727;
  height: 50px;
  width: 60px;
  margin-left: 80px;
  padding: 10px 15px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  @media only screen and (min-width: 576px) {
    #homeButton {
      margin-top: 30px;
      height: 70px;
      padding: 15px 20px;
      width: 80px;
      margin-left: 100px; } }
  @media only screen and (max-height: 400px) {
    #homeButton {
      height: 50px;
      width: 60px;
      margin-left: 80px;
      padding: 10px 15px;
      top: 0;
      lef: 0;
      margin-top: 0; } }
  #homeButton:hover, #homeButton:active, #homeButton:focus {
    background-color: #6b6b6b; }

.homeIcon {
  width: 30px;
  height: 30px; }
  @media only screen and (min-width: 576px) {
    .homeIcon {
      width: 40px;
      height: 40px; } }
  @media only screen and (max-height: 400px) {
    .homeIcon {
      width: 30px;
      height: 30px; } }

.pageTitle {
  display: none; }
  @media only screen and (min-width: 1040px) {
    .pageTitle {
      top: 0;
      left: 0;
      z-index: 2;
      background-color: #272727;
      border-left: 4px solid #1e1e1e;
      display: block;
      text-align: center;
      position: fixed;
      margin-top: 30px;
      margin-left: 180px;
      height: 70px;
      min-width: 100px;
      padding: 23px 23px 0 23px;
      font-weight: 500;
      letter-spacing: 2px;
      -moz-animation-name: slideTitle;
      -moz-animation-iteration-count: 1;
      -moz-animation-timing-function: ease;
      -moz-animation-duration: 0.6s;
      -webkit-animation-name: slideTitle;
      -webkit-animation-iteration-count: 1;
      -webkit-animation-timing-function: ease;
      -webkit-animation-duration: 0.6s;
      animation-name: slideTitle;
      animation-iteration-count: 1;
      animation-timing-function: ease;
      animation-duration: 0.6s; } }
  @media only screen and (min-width: 1040px) and (max-height: 470px) {
    .pageTitle {
      margin-top: 0; } }
  @media only screen and (min-width: 1040px) {
    @-moz-keyframes slideTitle {
      0% {
        opacity: 0.2;
        -moz-transform: translateX(-100px); }
      100% {
        opacity: 1;
        -moz-transform: translateX 0; } }
    @-webkit-keyframes slideTitle {
      0% {
        opacity: 0.2;
        -webkit-transform: translateX(-100px); }
      100% {
        opacity: 1;
        -webkit-transform: translateX(0); } }
    @keyframes slideTitle {
      0% {
        opacity: 0.2;
        transform: translateX(-100px); }
      100% {
        opacity: 1;
        transform: translateX(0); } } }

.titleHero {
  text-align: center;
  margin: 0;
  height: 95vh;
  width: 100%;
  position: relative;
  display: block;
  background-repeat: no-repeat;
  background-size: auto 100%;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: cover;
  background-position: center center;
  background-color: #1e1e1e;
  overflow: hidden; }
  @media only screen and (min-width: 576px) {
    .titleHero {
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-attachment: fixed; } }
  @media only screen and (min-width: 732px) {
    .titleHero {
      height: 98vh; } }
  @media only screen and (min-width: 1040px) {
    .titleHero {
      height: 100vh; } }

.backgroundWrap {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: #303030; }

.table {
  padding: 30px;
  z-index: 1;
  position: relative;
  margin: 0 auto;
  display: table;
  width: 100%;
  height: 100vh; }
  .table .tableCell {
    position: relative;
    display: table-cell;
    vertical-align: middle; }

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #3c3c3c;
  opacity: 0.3;
  width: 100%;
  height: 98vh;
  z-index: 0; }
  @media only screen and (min-width: 1040px) {
    .overlay {
      height: 100vh; } }

.arrow-up {
  position: relative;
  margin: 0 auto;
  margin-top: -12px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #10ff92; }
  @media only screen and (min-width: 1040px) {
    .arrow-up {
      display: none; } }

.titleBreak {
  background-color: #10ff92;
  padding: 30px; }
  @media only screen and (min-width: 732px) {
    .titleBreak {
      padding: 80px; } }

.titleDescription {
  font-size: 1em;
  line-height: 1.7em;
  margin: 0 auto;
  text-align: center; }
  @media only screen and (min-width: 1040px) {
    .titleDescription {
      width: 100%;
      max-width: 820px;
      line-height: 1.5; } }
  .titleDescription h2 {
    color: rgba(48, 48, 48, 0.6) !important; }
  .titleDescription p {
    text-align: left;
    color: rgba(48, 48, 48, 0.6) !important; }
    @media only screen and (min-width: 576px) {
      .titleDescription p {
        text-align: center; } }
  .titleDescription .lineSeperator {
    border-top: none;
    display: block;
    margin: 15px auto 10px auto;
    width: 20%;
    height: 2px;
    background: rgba(48, 48, 48, 0.3); }

.headerLogo {
  max-width: 230px;
  max-height: 200px;
  -moz-animation-name: slideLogo;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-out;
  -moz-animation-duration: 1s;
  -webkit-animation-name: slideLogo;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-duration: 1s;
  animation-name: slideLogo;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 1s; }
@-moz-keyframes slideLogo {
  0% {
    opacity: 0.2;
    -moz-transform: translateY(-50px); }
  100% {
    opacity: 1;
    -moz-transform: translateY 0; } }
@-webkit-keyframes slideLogo {
  0% {
    opacity: 0.2;
    -webkit-transform: translateY(-50px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }
@keyframes slideLogo {
  0% {
    opacity: 0.2;
    transform: translateY(-50px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
  @media only screen and (min-width: 576px) {
    .headerLogo {
      max-width: 300px; } }
  @media only screen and (min-width: 732px) {
    .headerLogo {
      max-width: 500px; } }
  @media only screen and (min-width: 1040px) {
    .headerLogo {
      max-width: 700px; } }

.mainDescription {
  background-color: #3c3c3c;
  display: block;
  padding: 30px;
  margin: 0 auto; }
  @media only screen and (min-width: 929px) {
    .mainDescription {
      padding: 80px; } }
  .mainDescription .sectionHead {
    margin-bottom: 30px; }
  .mainDescription li {
    text-align: left; }

.desCon {
  margin: 0 auto;
  max-width: 1040px;
  text-align: center; }
  .desCon h2 {
    margin: 25px 0 10px 0;
    font-size: 0.9em; }
  .desCon p {
    text-align: left; }

.sectionHead {
  display: block;
  margin: 0;
  background-color: #ff17a1;
  border: 1px solid #ff17a1;
  padding: 14px 20px;
  border-radius: 2px;
  text-align: center; }
  @media only screen and (min-width: 1040px) {
    .sectionHead {
      display: inline-block;
      margin: 0 0 30px 0;
      padding: 14px 20px; } }
  .sectionHead h2 {
    display: inline-block; }

.sectionHeadCon {
  padding: 30px 0;
  width: 100%;
  margin: 0 auto;
  text-align: center; }
  @media only screen and (min-width: 732px) {
    .sectionHeadCon {
      padding: 0 0; } }

.bottomButton {
  overflow: hidden;
  background-color: #10ff92;
  border: 0;
  border-bottom: 5px solid #00dc78;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  @media only screen and (min-width: 1040px) {
    .bottomButton {
      width: 340px; } }
  .bottomButton h2 {
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.2em;
    font-weight: 700;
    color: rgba(48, 48, 48, 0.6);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  .bottomButton .baContainer {
    background-color: rgba(48, 48, 48, 0.1);
    padding: 18px 20px 14px 20px; }
    .bottomButton .baContainer .buttonArrow {
      fill: rgba(48, 48, 48, 0.6);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease; }
  .bottomButton:hover, .bottomButton:focus {
    background-color: #00eb80;
    border-bottom: 5px solid #00c36a; }
    .bottomButton:hover .baContainer, .bottomButton:focus .baContainer {
      background-color: rgba(48, 48, 48, 0.1) !important;
      padding: 18px 16px 14px 24px !important; }

.sectionContainer .buttonArrow {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  fill: #f9f8f8; }
  @media only screen and (min-width: 1040px) {
    .sectionContainer .buttonArrow {
      fill: #1ddfff; } }
.sectionContainer:hover .baContainer, .sectionContainer:active .baContainer {
  padding: 35px 35px 35px 30px; }
@media only screen and (min-width: 1040px) {
  .sectionContainer:hover .buttonArrow, .sectionContainer:active .buttonArrow {
    fill: #f9f8f8; } }

.rp {
  padding-top: 0; }

.xm {
  margin-left: 30px;
  margin-right: 30px; }
  @media only screen and (min-width: 732px) {
    .xm {
      margin-left: 0;
      margin-right: 0px; } }

.bp {
  padding-bottom: 0; }
  @media only screen and (min-width: 732px) {
    .bp {
      padding-bottom: 80px; } }
  @media only screen and (min-width: 1040px) {
    .bp {
      padding-bottom: 100px; } }

.bm {
  margin-bottom: 30px; }
  @media only screen and (min-width: 732px) {
    .bm {
      margin-bottom: 80px; } }
  @media only screen and (min-width: 1040px) {
    .bm {
      margin-bottom: 100px; } }

.bullet-heading {
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 30px 30px;
  border: 1px solid #1ddfff;
  border-radius: 2px;
  margin: 10px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-color: #1ddfff; }
  @media only screen and (min-width: 1040px) {
    .bullet-heading {
      color: #1ddfff;
      background-color: #1e1e1e; } }

.bullet-heading {
  overflow: hidden; }
  .bullet-heading .baContainer {
    padding: 35px 30px;
    margin: -54px -35px; }

.buttonNoStyle {
  -webkit-appearance: none;
  border: none;
  background: none;
  outline: 0;
  transition: all 0.3s ease;
  font-weight: 400;
  font-size: 1em;
  font-family: 'Open Sans', 'Freesans', sans-serif;
  -webkit-font-smoothing: antialiased; }

.goToButton {
  padding: 15px 20px;
  color: #ff17a1;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 1em;
  text-align: center;
  border: 2px solid #ff17a1;
  border-radius: 2px; }
  .goToButton:hover, .goToButton:active {
    background-color: #ff17a1;
    color: #f9f8f8; }

.cf:before,
.cf:after {
  content: "";
  display: table; }

.cf:after {
  clear: both; }

.cf {
  *zoom: 1; }

.buttonPlay {
  margin: 20px auto;
  text-align: center;
  position: relative;
  display: block; }
  .buttonPlay svg {
    fill: #f9f8f8;
    height: 50px;
    width: 50px;
    transform: rotate(0deg);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
    .buttonPlay svg:hover, .buttonPlay svg:active {
      fill: rgba(249, 248, 248, 0.8);
      transform: rotate(120deg); }

.vidOverlay {
  z-index: 5;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(48, 48, 48, 0.8);
  padding: 30px;
  display: none; }
  @media only screen and (min-width: 732px) {
    .vidOverlay {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .vidOverlay {
      padding: 100px; } }

.playVidCon {
  z-index: 5;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 290px;
  margin: -80px 0 0 -145px; }
  @media only screen and (min-width: 732px) {
    .playVidCon {
      width: 500px;
      padding: 30px;
      margin: -155px 0 0 -250px; } }
  @media only screen and (min-width: 929px) {
    .playVidCon {
      width: 600px;
      padding: 30px;
      margin: -180px 0 0 -300px; } }
  @media only screen and (min-width: 1040px) {
    .playVidCon {
      width: 700px;
      padding: 30px;
      margin: -210px 0 0 -350px; } }
  @media only screen and (min-width: 1200px) {
    .playVidCon {
      width: 1000px;
      padding: 30px;
      margin: -300px 0 0 -500px; } }

.vidClose {
  margin: 0 auto;
  z-index: 6;
  position: absolute;
  top: -40px;
  right: 0px;
  background-color: #ff17a1;
  padding: 6px 6px 0 6px;
  border-radius: 2px; }
  @media only screen and (min-width: 732px) {
    .vidClose {
      top: 40px;
      right: 40px; } }
  @media only screen and (min-width: 929px) {
    .vidClose {
      padding: 8px 8px 2px 8px; } }
  @media only screen and (min-width: 1040px) {
    .vidClose {
      padding: 12px 12px 8px 12px; } }
  .vidClose .closeIcon {
    transform: rotate(0deg);
    height: 18px;
    width: 18px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    fill: rgba(60, 60, 60, 0.6); }
  .vidClose:hover, .vidClose:active, .vidClose:focus {
    background-color: white; }
    .vidClose:hover .closeIcon, .vidClose:active .closeIcon, .vidClose:focus .closeIcon {
      transform: rotate(90deg);
      fill: rgba(60, 60, 60, 0.8); }

.element-invisible {
  position: absolute !important;
  margin-left: -10000px !important;
  overflow: hidden;
  height: 0;
  width: 0; }

/*.pad {
    padding: 1.5em;
    
     @media only screen and (min-width: $mamaBear) {
         padding: 2em;
     }
}*/
.disable-hover,
.disable-hover * {
  pointer-events: none !important; }

.noScroll {
  overflow-x: hidden;
  overflow-y: auto; }

.sectionWewd {
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px;
  text-align: center;
  background-color: #232323; }
  @media only screen and (min-width: 1040px) {
    .sectionWewd {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .sectionWewd {
      padding: 100px; } }
  .sectionWewd .sectionContainer {
    width: 100%; }
    @media only screen and (min-width: 929px) {
      .sectionWewd .sectionContainer {
        width: 46%; } }

.wewd {
  display: block;
  margin: 0 auto; }
  @media only screen and (min-width: 1040px) {
    .wewd {
      padding: 0;
      max-width: 1040px; } }
  .wewd h4 {
    -webkit-font-smoothing: antialiased;
    text-align: center;
    color: #f9f8f8;
    font-weight: 600;
    text-transform: uppercase; }
  @media only screen and (min-width: 929px) {
    .wewd {
      color: #1ddfff;
      flex-direction: row; } }
  @media only screen and (min-width: 1040px) {
    .wewd h4 {
      color: #1ddfff; } }

.sectionHeadBottom {
  display: block;
  padding: 0 0 14px 0;
  color: #1ddfff; }
  @media only screen and (min-width: 1040px) {
    .sectionHeadBottom {
      display: inline-block; } }

.thirds {
  width: 100%; }
  @media only screen and (min-width: 929px) {
    .thirds {
      width: 30% !important; } }
  @media only screen and (min-width: 1040px) {
    .thirds {
      width: 30% !important; } }
  @media only screen and (min-width: 1200px) {
    .thirds {
      width: 31%; } }

.gradient {
  width: 100%;
  background-image: url("/wp-content/themes/html5reset/_/img/gradient.png");
  background-repeat: no-repeat;
  background-position: center bottom; }

.whiteGradient {
  width: 100%;
  background-image: url("/wp-content/themes/html5reset/_/img/white_gradient.png");
  background-repeat: no-repeat;
  background-position: center bottom; }

h1 {
  display: inline-block;
  margin: 0 auto;
  padding: 5px 12px;
  text-align: center;
  font-size: 1.5em;
  font-weight: 300;
  letter-spacing: 1px;
  border-radius: 2px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.3);
  border-bottom: 5px solid rgba(48, 48, 48, 0.4);
  -moz-animation-name: fadeTitle;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-duration: 2s;
  -webkit-animation-name: fadeTitle;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 2s;
  animation-name: fadeTitle;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-duration: 2s; }
  @media only screen and (min-width: 732px) {
    h1 {
      padding: 10px 17px; } }
  @media only screen and (min-width: 1040px) {
    h1 {
      font-size: 2em; } }
@-moz-keyframes fadeTitle {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes fadeTitle {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeTitle {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
h2 {
  font-size: 1em;
  text-transform: uppercase;
  color: #f9f8f8;
  letter-spacing: 0.2em;
  font-weight: 700; }
  @media only screen and (min-width: 1040px) {
    h2 {
      font-size: 1.1em; } }

h3 {
  font-size: 0.9em;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  margin: 10px 0; }
  @media only screen and (min-width: 1040px) {
    h3 {
      font-size: 1em; } }

h4 {
  font: 1.5em;
  font-weight: 400;
  letter-spacing: 0.3em; }

h5 {
  color: rgba(249, 248, 248, 0.8);
  font-weight: 600;
  font-size: 0.8em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center; }

p {
  font-size: 1em;
  line-height: 1.6em;
  margin-bottom: 20px; }
  p:last-child {
    margin-bottom: 0; }
  @media only screen and (min-width: 1040px) {
    p {
      font-size: 1.1em; } }
  p a {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    border-bottom: 2px solid #1ddfff;
    border-radius: 1px;
    box-shadow: inset 0 0 0 0 #1ddfff; }
    p a:hover, p a:focus, p a:active {
      box-shadow: inset 0 -30px 0 0 #1ddfff; }
    @media only screen and (min-width: 1040px) {
      p a {
        padding: 2px 6px;
        margin: 3px; } }

b, strong {
  font-weight: 600; }

ol, ul {
  display: block;
  list-style-type: decimal;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px; }

.mainTagline {
  position: absolute;
  top: 0;
  margin: 0 auto;
  width: 100%;
  margin-top: 54vh;
  z-index: 2;
  text-align: center;
  font-size: 1.2em;
  -moz-animation-name: fadeTag;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-duration: 2s;
  -webkit-animation-name: fadeTag;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 2s;
  animation-name: fadeTag;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-duration: 2s; }
@-moz-keyframes fadeTag {
  0% {
    opacity: 0; }
  40% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes fadeTag {
  0% {
    opacity: 0; }
  40% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeTag {
  0% {
    opacity: 0; }
  40% {
    opacity: 0; }
  100% {
    opacity: 1; } }
  .mainTagline p {
    font-weight: 400; }
  @media only screen and (min-width: 732px) {
    .mainTagline {
      margin-top: 56vh;
      font-size: 2em; }
      .mainTagline p {
        font-weight: 100;
        text-transform: none; } }

.moIcon {
  display: block;
  margin: 0 auto;
  position: relative;
  height: 180px;
  width: 180px; }
  .moIcon .whiteCircle {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    cursor: pointer;
    fill: #fff; }
    .moIcon .whiteCircle:hover, .moIcon .whiteCircle:active {
      fill: #10ff92; }
  .moIcon .greenFill {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    cursor: pointer;
    fill: #10ff92; }
    .moIcon .greenFill:hover, .moIcon .greenFill:active {
      fill: #fff; }
  @media only screen and (min-width: 732px) {
    .moIcon {
      height: 250px;
      width: 250px; } }
  @media only screen and (min-width: 1040px) {
    .moIcon {
      height: 300px;
      width: 300px; } }

.arrow-up {
  position: relative;
  margin: 0 auto;
  margin-top: -12px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #10ff92; }
  @media only screen and (min-width: 1040px) {
    .arrow-up {
      display: none; } }

.titleDescription.main {
  padding: 0px;
  text-align: center !important; }
  .titleDescription.main h2 {
    color: #3c3c3c; }
  @media only screen and (min-width: 732px) {
    .titleDescription.main {
      padding: 15px 20px; } }

.wwd {
  text-align: center;
  display: block;
  flex-direction: column;
  padding: 30px;
  margin: 0 auto;
  width: 100%;
  background-color: #303030; }
  @media only screen and (min-width: 732px) {
    .wwd {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .wwd {
      padding: 100px; } }
  .wwd h4 {
    -webkit-font-smoothing: antialiased;
    text-align: center;
    color: #f9f8f8;
    font-weight: 600;
    text-transform: uppercase; }
    @media only screen and (min-width: 929px) {
      .wwd h4 {
        margin-left: -50px; } }
    @media only screen and (min-width: 1040px) {
      .wwd h4 {
        margin-left: 0; } }
  @media only screen and (min-width: 929px) {
    .wwd {
      color: #1ddfff; } }
  @media only screen and (min-width: 1040px) {
    .wwd h4 {
      color: #1ddfff; } }

.sectionContainer {
  display: block;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  margin-bottom: 10px;
  text-align: left;
  background-color: #1e1e1e;
  overflow: hidden;
  border-radius: 2px;
  vertical-align: top;
  border: 0.1em solid #3c3c3c;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  @media only screen and (min-width: 929px) {
    .sectionContainer {
      height: 300px;
      display: inline-block;
      width: 30%; } }
  @media only screen and (min-width: 732px) {
    .sectionContainer {
      margin: 10px; } }

.sectionOverlay {
  z-index: 0;
  position: absolute;
  width: 100%;
  height: 300px; }
  @media only screen and (min-width: 1040px) {
    .sectionOverlay {
      background-color: rgba(60, 60, 60, 0.4);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease; } }

.sectionContainer:hover .sectionOverlay {
  background-color: rgba(60, 60, 60, 0); }

@media only screen and (min-width: 929px) {
  .services {
    background: url("/wp-content/themes/html5reset/_/img/agency_thumb.png") no-repeat;
    background-size: 180%;
    background-position: center center; } }
@media only screen and (min-width: 1040px) {
  .services {
    background-size: 160%; } }

@media only screen and (min-width: 929px) {
  .platform {
    background: url("/wp-content/themes/html5reset/_/img/mo_platform_thumb.png") no-repeat;
    background-size: 180%;
    background-position: center center; } }
@media only screen and (min-width: 1040px) {
  .platform {
    background-size: 160%; } }

@media only screen and (min-width: 929px) {
  .studio {
    background: url("/wp-content/themes/html5reset/_/img/studio_thumb.png") no-repeat;
    background-size: 180%;
    background-position: center center; } }
@media only screen and (min-width: 1040px) {
  .studio {
    background-size: 160%; } }

.sectionContainer:hover {
  border: 0.1em solid #1ddfff; }
  .sectionContainer:hover h4 {
    color: #f9f8f8; }

.sectionTag {
  position: absolute;
  padding: 20px 10px;
  margin-top: -10px;
  color: #f9f8f8;
  width: 100%;
  position: relative;
  text-align: center;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  @media only screen and (min-width: 929px) {
    .sectionTag {
      margin-top: 142px;
      background-color: rgba(48, 48, 48, 0.9); } }
  @media only screen and (min-width: 1040px) {
    .sectionTag {
      margin-top: 180px;
      background-color: rgba(48, 48, 48, 0); } }

@media only screen and (min-width: 1040px) {
  .sectionContainer:hover .sectionTag {
    margin-top: 142px;
    background-color: rgba(48, 48, 48, 0.9); } }

.sectionContainer:hover .bullet-heading {
  color: #fff;
  background-color: #1ddfff; }

.aboutUs {
  padding: 0 0 30px 0;
  background-color: #303030;
  margin: 0 auto; }
  @media only screen and (min-width: 732px) {
    .aboutUs {
      padding: 80px; } }
  @media only screen and (min-width: 929px) {
    .aboutUs {
      padding: 100px;
      margin: 0 auto; } }

.aboutUs .sectionHeadCon {
  padding-bottom: 0; }

.auContainer {
  background-color: #3c3c3c;
  display: block;
  position: relative;
  margin: 0 auto;
  border-radius: 2px;
  overflow: hidden; }

.auTab {
  background-size: 100%;
  background-size: cover;
  min-height: 320px;
  width: 100%;
  background-position: center center;
  position: relative;
  display: block;
  background-color: #f9f8f8;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  @media only screen and (min-width: 732px) {
    .auTab {
      min-height: 0px;
      height: 400px;
      float: left;
      width: 50%;
      background-size: 150%;
      background-size: cover; } }
  @media only screen and (min-width: 1040px) {
    .auTab {
      height: 420px;
      background-size: 100%;
      overflow: hidden;
      background-size: cover; } }

.auTab:hover .infoAu,
.auTab:focus .infoAu {
  opacity: 1; }

.bioCon {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(48, 48, 48, 0.95);
  margin: 0 auto;
  height: 100vh;
  z-index: 2;
  overflow: auto; }
  @media only screen and (min-width: 732px) {
    .bioCon {
      padding: 80px;
      padding-bottom: 0; } }
  @media only screen and (min-width: 929px) {
    .bioCon {
      padding: 150px 100px;
      padding-bottom: 0;
      margin: 0 auto; } }
  .bioCon .siIconContainer {
    margin: 0;
    margin-right: 10px;
    width: 55px;
    height: 55px; }
    @media only screen and (min-width: 732px) {
      .bioCon .siIconContainer {
        width: 80px;
        height: 80px; } }
  .bioCon .gradientCon {
    z-index: -1;
    bottom: 0;
    left: 0; }
    @media only screen and (min-width: 732px) {
      .bioCon .gradientCon {
        margin: 0 -80px; } }
    @media only screen and (min-width: 1040px) {
      .bioCon .gradientCon {
        margin: 0 -100px; } }
    .bioCon .gradientCon .whiteGradient {
      background-position: center top;
      height: 200px;
      background-size: 200%;
      margin: 0 auto;
      display: block;
      opacity: 0.1; }
      @media only screen and (min-width: 732px) {
        .bioCon .gradientCon .whiteGradient {
          background-size: 100%; } }
      @media only screen and (min-width: 1040px) {
        .bioCon .gradientCon .whiteGradient {
          height: 500px; } }

.bioClose {
  margin: 0 auto;
  z-index: 6;
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #ff17a1;
  padding: 6px 6px 0 6px;
  border-radius: 2px; }
  @media only screen and (min-width: 732px) {
    .bioClose {
      top: 40px;
      right: 40px; } }
  @media only screen and (min-width: 929px) {
    .bioClose {
      padding: 8px 8px 2px 8px; } }
  @media only screen and (min-width: 1040px) {
    .bioClose {
      padding: 12px 12px 6px 12px; } }
  .bioClose .closeIcon {
    transform: rotate(0deg);
    height: 18px;
    width: 18px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    fill: rgba(60, 60, 60, 0.6); }
  .bioClose:hover, .bioClose:active, .bioClose:focus {
    background-color: white; }
    .bioClose:hover .closeIcon, .bioClose:active .closeIcon, .bioClose:focus .closeIcon {
      transform: rotate(90deg);
      fill: rgba(60, 60, 60, 0.8); }

.bioTab {
  background-size: 100%;
  background-size: cover;
  min-height: 320px;
  background-position: center center;
  position: relative;
  display: block;
  background-color: #f9f8f8;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  @media only screen and (min-width: 732px) {
    .bioTab {
      display: inline-block;
      min-height: 0px;
      height: 400px;
      float: left;
      width: 50%;
      background-size: 150%;
      background-size: cover;
      border-radius: 2px; } }
  @media only screen and (min-width: 1040px) {
    .bioTab {
      height: 420px;
      background-size: 100%;
      overflow: hidden;
      background-size: cover; } }
  .bioTab h2 {
    margin-bottom: 20px; }

.bioAbout {
  padding: 30px;
  background-color: #1e1e1e; }
  @media only screen and (min-width: 732px) {
    .bioAbout {
      height: 400px;
      padding: 50px;
      display: inline-block;
      width: 50%; } }
  @media only screen and (min-width: 1040px) {
    .bioAbout {
      height: initial;
      width: 63%;
      margin-left: 30px;
      border-radius: 2px;
      padding: 30px; } }

.bioCopy {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  padding: 0 30px;
  margin-bottom: -30px; }
  @media only screen and (min-width: 732px) {
    .bioCopy {
      padding: 30px 0; } }
  @media only screen and (min-width: 1040px) {
    .bioCopy {
      width: 66%;
      padding: 0 30px; } }

.ourProcess {
  padding: 30px;
  text-align: center;
  background-color: #3c3c3c; }
  @media only screen and (min-width: 732px) {
    .ourProcess {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .ourProcess {
      padding: 100px; } }
  .ourProcess .sectionHeadCon {
    padding-top: 0; }
    .ourProcess .sectionHeadCon .sectionHead {
      margin-bottom: 0; }
      @media only screen and (min-width: 732px) {
        .ourProcess .sectionHeadCon .sectionHead {
          margin-bottom: 30px; } }
  .ourProcess .opContainer {
    position: relative;
    display: block;
    max-width: 1040px;
    margin: 0 auto; }
    .ourProcess .opContainer .opIcon {
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
      background-color: #303030;
      border-radius: 2px;
      width: 100%;
      overflow: hidden;
      position: relative;
      margin-bottom: 30px; }
      @media only screen and (min-width: 732px) {
        .ourProcess .opContainer .opIcon {
          display: inline-block;
          margin: 10px;
          width: 46%; } }
      @media only screen and (min-width: 1040px) {
        .ourProcess .opContainer .opIcon {
          height: 300px; } }
      .ourProcess .opContainer .opIcon svg {
        fill: #f9f8f8;
        height: 150px;
        margin: 30px; }
        @media only screen and (min-width: 1040px) {
          .ourProcess .opContainer .opIcon svg {
            margin: 45px; } }
      .ourProcess .opContainer .opIcon h2 {
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
        font-size: 1em;
        letter-spacing: 0.4em;
        text-transform: uppercase;
        background-color: #1ddfff;
        padding: 20px; }
      .ourProcess .opContainer .opIcon p {
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
        padding: 30px;
        background-color: #009cb6;
        margin-bottom: 0; }
        @media only screen and (min-width: 732px) {
          .ourProcess .opContainer .opIcon p {
            min-height: 180px; } }
        @media only screen and (min-width: 1040px) {
          .ourProcess .opContainer .opIcon p {
            height: 240px;
            margin-top: -240px;
            padding: 60px; } }
      .ourProcess .opContainer .opIcon:hover p, .ourProcess .opContainer .opIcon:focus p, .ourProcess .opContainer .opIcon:active p {
        margin-top: 0; }
    .ourProcess .opContainer .processIcon {
      display: none; }
      @media only screen and (min-width: 1040px) {
        .ourProcess .opContainer .processIcon {
          display: inline-block; } }
    .ourProcess .opContainer .stethIcon {
      width: 159px; }
    .ourProcess .opContainer .magnifierIcon {
      width: 127px; }
    .ourProcess .opContainer .pencilIcon {
      width: 87px; }
    .ourProcess .opContainer .tickIcon {
      width: 152px; }

.newsViews {
  background-color: #303030;
  z-index: 1;
  position: relative;
  display: block;
  width: 100%; }
  @media only screen and (min-width: 732px) {
    .newsViews {
      text-align: center;
      padding: 80px; } }
  @media only screen and (min-width: 929px) {
    .newsViews {
      padding: 100px; } }

.nandvContainer {
  background-color: #565656;
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 0;
  border-radius: 2px;
  overflow: hidden;
  width: 100%; }
  @media only screen and (min-width: 732px) {
    .nandvContainer {
      margin-top: 30px; } }
  @media only screen and (min-width: 1040px) {
    .nandvContainer {
      margin-top: 0; } }

.nandvTab {
  overflow: hidden;
  background-size: 130%;
  min-height: 320px;
  background-size: cover;
  background-position: center center;
  position: relative;
  display: block;
  background-color: #f9f8f8;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  @media only screen and (min-width: 732px) {
    .nandvTab {
      min-height: 0px;
      height: 350px;
      float: left;
      width: 50%;
      background-size: 190%;
      background-size: cover; } }
  @media only screen and (min-width: 929px) {
    .nandvTab {
      width: 33.33333%; } }
  @media only screen and (min-width: 1475px) {
    .nandvTab {
      height: 400px;
      background-size: 150%;
      overflow: hidden;
      width: 25%;
      background-size: 200%;
      background-size: cover; } }

.quote {
  padding: 50px 60px;
  background-color: #10ff92; }
  .quote p {
    text-align: left;
    color: rgba(48, 48, 48, 0.5);
    font-size: 1.3em;
    font-weight: 400; }
    @media only screen and (min-width: 732px) {
      .quote p {
        font-size: 1.1em; } }
    @media only screen and (min-width: 1475px) {
      .quote p {
        font-size: 1.5em; } }
  .quote h3 {
    color: rgba(48, 48, 48, 0.3);
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 60px 50px 0; }

.blogPost {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-color: #898989;
  padding: 20px; }
  @media only screen and (min-width: 732px) {
    .blogPost {
      padding: 145px 30px; } }
  @media only screen and (min-width: 1475px) {
    .blogPost {
      padding: 170px 30px; } }
  .blogPost .bpTitle {
    z-index: 1;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    border-left: 10px solid #1ddfff;
    font-size: 1.2em;
    position: relative;
    display: inline-block;
    text-align: left;
    margin: 0 auto;
    color: #f9f8f8;
    padding: 10px 20px;
    background-color: rgba(48, 48, 48, 0.6);
    border-radius: 2px; }
    @media only screen and (min-width: 732px) {
      .blogPost .bpTitle {
        border-left: none;
        text-align: center;
        background-color: rgba(29, 223, 255, 0.8); } }
  .blogPost .bpOverlay {
    z-index: 0;
    width: 100%;
    height: 120%;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    background-color: rgba(48, 48, 48, 0.3);
    opacity: 0.5;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  .blogPost:focus .bpTitle, .blogPost:active .bpTitle, .blogPost:hover .bpTitle {
    background-color: #1ddfff; }
  .blogPost:focus .bpOverlay, .blogPost:active .bpOverlay, .blogPost:hover .bpOverlay {
    opacity: 1; }

.videoTile {
  width: 100%; }
  @media only screen and (min-width: 1475px) {
    .videoTile {
      height: 400px;
      width: 50%;
      float: left; } }

.tweet {
  text-align: left;
  padding: 30px;
  background-color: #efefef; }
  .tweet p {
    text-align: left;
    color: rgba(48, 48, 48, 0.5);
    font-size: 1.3em;
    font-weight: 400; }
    @media only screen and (min-width: 732px) {
      .tweet p {
        font-size: 1.1em; } }
  .tweet .tweetIconContainer {
    vertical-align: top;
    margin: 0 10px 20px 0;
    display: inline-block;
    position: relative;
    background-color: #55acee;
    width: 50px;
    height: 50px;
    border-radius: 2px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
    @media only screen and (min-width: 732px) {
      .tweet .tweetIconContainer {
        padding: 0px; } }
    @media only screen and (min-width: 1040px) {
      .tweet .tweetIconContainer {
        width: 70px;
        height: 70px; } }
    .tweet .tweetIconContainer:hover, .tweet .tweetIconContainer:active {
      background-color: #83c3f3; }
  .tweet .siIcon {
    top: 50%;
    left: 50%;
    position: absolute;
    fill: #f9f8f8; }
  .tweet .twitterIcon {
    margin: -12px 0 0 -15px;
    height: 25px;
    width: 30px; }
  .tweet .twitterHandle {
    vertical-align: top;
    position: relative;
    display: inline-block;
    color: #55acee; }

.infoOW {
  background-color: rgba(48, 48, 48, 0.9);
  color: #f9f8f8;
  padding: 10px 20px;
  margin: 20px;
  border: 2px solid #1ddfff;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: inline-block; }
  @media only screen and (min-width: 732px) {
    .infoOW {
      text-align: center;
      display: inline-block;
      padding: 10px 15px;
      float: left;
      clear: both; } }
  @media only screen and (min-width: 1040px) {
    .infoOW {
      background-color: rgba(255, 23, 161, 0.9);
      width: 100%;
      opacity: 0;
      margin: 0 auto;
      padding: 165px 50px;
      border: none; } }
  .infoOW p {
    font-size: 1em;
    display: none;
    margin: 0; }
    @media only screen and (min-width: 1040px) {
      .infoOW p {
        display: block; } }

.gitTab {
  text-align: center;
  padding: 125px 50px;
  background-color: #1e1e1e;
  min-height: 320px;
  position: relative;
  display: block;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  @media only screen and (min-width: 732px) {
    .gitTab {
      min-height: 0px;
      height: 400px;
      float: left;
      width: 50%;
      background-size: 170%; } }
  @media only screen and (min-width: 1040px) {
    .gitTab {
      height: 400px;
      background-size: 150%;
      overflow: hidden;
      background-size: 200%;
      width: 33.33333333%;
      background-size: cover; } }

.gitIcon {
  display: block;
  margin: 0 auto 20px auto;
  fill: #f9f8f8;
  height: 73px;
  width: 50px; }

.auHeadCon {
  text-align: center; }

.auHead {
  text-align: center;
  display: block;
  background-color: #ff17a1;
  color: #f9f8f8;
  border-radius: 2px;
  padding: 10px 15px;
  margin-bottom: 30px; }
  @media only screen and (min-width: 929px) {
    .auHead {
      display: inline-block;
      margin: 0 auto; } }

.gitHead {
  font-size: 1.1em;
  letter-spacing: 0.5px;
  font-weight: 600;
  text-align: center;
  display: inline-block;
  background-color: #ff17a1;
  border: 2px solid #ff17a1;
  color: #f9f8f8;
  border-radius: 2px;
  padding: 10px 15px;
  margin-bottom: 30px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  @media only screen and (min-width: 1040px) {
    .gitHead {
      font-size: 1.2em; } }
  @media only screen and (min-width: 929px) {
    .gitHead {
      display: inline-block;
      margin: 0 auto; } }

.gitHead:hover,
.gitHead:focus {
  background-color: transparent; }

@media only screen and (min-width: 1040px) {
  .c {
    width: 33.33333333% !important;
    background-size: 100%;
    background-size: cover; } }

.infoAu {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(48, 48, 48, 0.9);
  color: #f9f8f8;
  padding: 10px 20px;
  margin: 20px;
  border-left: 10px solid #ff17a1;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: inline-block; }
  @media only screen and (min-width: 732px) {
    .infoAu {
      text-align: center;
      display: inline-block;
      padding: 10px 15px;
      float: left;
      clear: both; } }
  @media only screen and (min-width: 1040px) {
    .infoAu {
      position: relative;
      background-color: rgba(255, 23, 161, 0.9);
      width: 105%;
      opacity: 0;
      margin: -5px -10px;
      padding: 177px 50px;
      border: none; } }
  .infoAu .twitterLink {
    display: none; }
    @media only screen and (min-width: 1040px) {
      .infoAu .twitterLink {
        display: block; } }
  .infoAu .emailLink {
    display: none; }
    @media only screen and (min-width: 1040px) {
      .infoAu .emailLink {
        display: block; } }
  .infoAu p {
    font-size: 1em;
    display: none;
    margin: 0; }
    @media only screen and (min-width: 1040px) {
      .infoAu p {
        display: block; } }
  .infoAu h2 {
    font-size: 0.9em !important; }
  .infoAu h3 {
    margin: 0; }

.auWewd .sectionContainer {
  width: 100%; }
  @media only screen and (min-width: 929px) {
    .auWewd .sectionContainer {
      width: 30%; }
      .auWewd .sectionContainer h4 {
        margin-left: -50px; } }

.mainDescription {
  background-color: #3c3c3c;
  position: relative;
  display: block;
  flex-direction: row;
  margin: 0 auto;
  padding: 30px; }
  @media only screen and (min-width: 732px) {
    .mainDescription {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .mainDescription {
      padding: 100px 30px; } }

.mdContainer {
  margin: 0 auto;
  width: 100%;
  max-width: 1040px; }

.mainInfo {
  position: relative;
  display: inline-block;
  width: 100%; }
  @media only screen and (min-width: 732px) {
    .mainInfo {
      width: 70%;
      float: left;
      padding: 30px 0; } }

.peopleCentered {
  display: none;
  margin-right: -40px;
  padding: 40px 0; }
  @media only screen and (min-width: 732px) {
    .peopleCentered {
      position: absolute;
      display: inline-block;
      padding: 20px;
      margin: -30px 0 0 30px;
      max-height: 300px;
      width: 30%;
      max-width: 300px;
      float: right; } }

.person {
  fill: #f9f8f8; }

.wed {
  display: block;
  background-color: #4e4e4e;
  padding: 30px;
  text-align: center;
  margin: 0 auto; }
  @media only screen and (min-width: 732px) {
    .wed {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .wed {
      padding: 100px 30px; } }

.tm {
  margin-top: 0;
  margin-bottom: 0; }
  @media only screen and (min-width: 732px) {
    .tm {
      margin-top: 80px; } }
  @media only screen and (min-width: 1040px) {
    .tm {
      margin-top: 100px; } }

.wed .bm {
  margin-bottom: 0; }
  @media only screen and (min-width: 732px) {
    .wed .bm {
      margin-bottom: 80px; } }
  @media only screen and (min-width: 1040px) {
    .wed .bm {
      margin-bottom: 100px; } }

.ourWork .bm {
  margin-bottom: 0; }
  @media only screen and (min-width: 732px) {
    .ourWork .bm {
      margin-bottom: 80px; } }
  @media only screen and (min-width: 1040px) {
    .ourWork .bm {
      margin-bottom: 100px; } }

.wedBullets {
  margin: 0 auto;
  width: 100%;
  max-width: 1040px;
  text-align: center; }

.wedBullet {
  width: 100%;
  cursor: pointer;
  display: inline-block;
  margin: 5px 0;
  background-color: #303030;
  color: #1ddfff;
  border: 1px solid #1ddfff;
  padding: 65px;
  height: 150px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border-radius: 2px; }
  @media only screen and (min-width: 732px) {
    .wedBullet {
      height: 250px;
      width: 48%;
      font-size: 1em;
      display: inline-block;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      padding: 115px 20px;
      margin: 5px; } }
  @media only screen and (min-width: 1040px) {
    .wedBullet {
      width: 32%; } }
  .wedBullet:hover, .wedBullet:active, .wedBullet:focus {
    background-color: #1ddfff;
    color: #f9f8f8; }

.ourWork {
  background-color: #3c3c3c;
  z-index: 1;
  position: relative;
  display: block;
  width: 100%; }
  @media only screen and (min-width: 732px) {
    .ourWork {
      text-align: center;
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .ourWork {
      padding: 100px; } }

.baContainer {
  float: right;
  padding: 20px 20px 15px 20px;
  margin: -16px -21px -22px 15px;
  clear: both;
  display: inline-block;
  overflow: hidden;
  background-color: rgba(48, 48, 48, 0.1);
  -webkit-transition-delay: all 1s ease;
  -moz-transition-delay: all 1s ease;
  -ms-transition-delay: all 1s ease;
  -o-transition-delay: all 1s ease;
  transition-delay: all 1s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  @media only screen and (min-width: 1040px) {
    .baContainer {
      margin: -17px -21px -22px 15px;
      padding: 21px 20px 14px 20px; } }

.sectionHead:hover .baContainer {
  background-color: rgba(48, 48, 48, 0); }

.buttonArrow {
  fill: #f9f8f8;
  position: relative;
  width: 10px;
  height: 15px; }

.owContainer {
  position: relative;
  margin: 0 auto;
  padding: 0;
  border-radius: 2px;
  overflow: hidden;
  width: 100%; }

.owTab {
  background: url("/wp-content/themes/html5reset/_/img/Alfi_Main1") no-repeat center center;
  background-size: 110%;
  min-height: 320px;
  background-size: cover;
  background-position: center center;
  position: relative;
  display: block;
  background-color: #f9f8f8;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  overflow: hidden; }
  @media only screen and (min-width: 732px) {
    .owTab {
      min-height: 0px;
      height: 350px;
      float: left;
      width: 50%;
      background-size: 130%;
      background-size: cover; } }
  @media only screen and (min-width: 929px) {
    .owTab {
      background-size: 140%;
      background-size: cover;
      width: 33.33333%; } }
  @media only screen and (min-width: 1475px) {
    .owTab {
      height: 400px;
      overflow: hidden;
      width: 25%;
      background-size: 200%;
      background-size: cover; } }
  .owTab:hover .infoOW, .owTab:active .infoOW, .owTab:focus .infoOW {
    opacity: 1; }

.largeTile {
  background-size: 220%; }
  @media only screen and (min-width: 929px) {
    .largeTile {
      background-size: 190%;
      background-size: cover;
      width: 33.33333%; } }
  @media only screen and (min-width: 1475px) {
    .largeTile {
      width: 50%;
      background-size: 200%;
      background-size: cover; } }

.infoOW {
  background-color: rgba(48, 48, 48, 0.9);
  color: #f9f8f8;
  padding: 10px 20px;
  margin: 20px;
  border: 2px solid #1ddfff;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: inline-block; }
  @media only screen and (min-width: 732px) {
    .infoOW {
      text-align: center;
      display: inline-block;
      padding: 10px 15px;
      float: left;
      clear: both; } }
  @media only screen and (min-width: 1040px) {
    .infoOW {
      background-color: rgba(255, 23, 161, 0.9);
      width: 100%;
      opacity: 0;
      margin: 0 auto;
      padding: 145px 50px;
      border: none; } }
  @media only screen and (min-width: 1475px) {
    .infoOW {
      padding: 165px 50px; } }
  .infoOW p {
    font-size: 1em;
    display: none;
    margin: 0; }
    @media only screen and (min-width: 1040px) {
      .infoOW p {
        display: block; } }

.tabTitle {
  margin: 0; }

.owContainer {
  background-color: rgba(48, 48, 48, 0.2);
  display: block;
  position: relative;
  margin: 0 auto;
  border-radius: 2px;
  overflow: hidden;
  width: 100%; }

.cta {
  position: absolute;
  top: 0;
  margin: 0 auto;
  width: 100%;
  margin-top: 75vh;
  z-index: 2; }
  .cta .sectionHead {
    display: inline-block !important;
    border: 0px;
    border-bottom: 5px solid #e30087;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
    .cta .sectionHead:hover, .cta .sectionHead:focus, .cta .sectionHead:active {
      background-color: #e30087;
      border-bottom: 5px solid #b00069; }
  @media only screen and (min-width: 732px) {
    .cta {
      margin-top: 80vh; } }
  @media only screen and (max-height: 570px) {
    .cta {
      margin-top: 65vh; } }

.trustedByCon {
  background-color: #1c1c1c;
  text-align: center;
  width: 100%; }

.trustedBy {
  margin: 0 auto;
  max-width: 1040px;
  padding: 30px; }
  @media only screen and (min-width: 732px) {
    .trustedBy {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .trustedBy {
      padding: 100px; } }

.companyLogos {
  margin-top: 30px;
  text-align: center; }

.logoCon {
  text-align: center;
  display: inline-block;
  margin: 20px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 35%; }
  .logoCon img {
    max-height: 120px; }
  @media only screen and (min-width: 732px) {
    .logoCon {
      width: 20%;
      margin-right: 80px; }
      .logoCon:last-child {
        margin-right: 0; } }

.usp {
  display: block;
  background-color: #4e4e4e;
  text-align: center;
  margin: 0 auto;
  padding: 30px 30px; }
  @media only screen and (min-width: 732px) {
    .usp {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .usp {
      padding: 100px; } }
  .usp .sectionHeadCon {
    padding: 0; }

.uspBullets {
  margin: 0 auto -10px auto;
  width: 100%;
  max-width: 1040px;
  text-align: center; }

.uspCon {
  vertical-align: top;
  background-color: rgba(48, 48, 48, 0.6);
  color: #f9f8f8;
  width: 100%;
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin: 5px 0;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border-radius: 2px;
  overflow: hidden; }
  @media only screen and (min-width: 732px) {
    .uspCon {
      width: 47%;
      margin: 5px 5px;
      height: 150px; } }
  @media only screen and (min-width: 1040px) {
    .uspCon {
      width: 31%;
      height: 250px; } }
  .uspCon:hover .uspBullet, .uspCon:active .uspBullet, .uspCon:focus .uspBullet {
    margin-top: 0; }
  .uspCon:hover .uspIcon, .uspCon:active .uspIcon, .uspCon:focus .uspIcon {
    margin-top: 240px; }

.uspBullet {
  text-align: left;
  color: #f9f8f8;
  width: 100%;
  display: block;
  position: relative;
  padding: 30px 30px;
  height: 100%;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  @media only screen and (min-width: 732px) {
    .uspBullet {
      text-align: center;
      padding: 45px 30px; } }
  @media only screen and (min-width: 1040px) {
    .uspBullet {
      color: rgba(48, 48, 48, 0.5);
      margin-top: -240px;
      padding: 85px 50px; } }

.btPink {
  border-left: 10px solid #ff17a1; }
  @media only screen and (min-width: 732px) {
    .btPink {
      border-left: 0;
      border-top: 10px solid #ff17a1; } }

.btGrey {
  border-left: 10px solid #10ff92; }
  @media only screen and (min-width: 732px) {
    .btGrey {
      border-left: 0;
      border-top: 10px solid #10ff92; } }

.btYellow {
  border-left: 10px solid #ffd800; }
  @media only screen and (min-width: 732px) {
    .btYellow {
      border-left: 0;
      border-top: 10px solid #ffd800; } }

.btBlue {
  border-left: 10px solid #1ddfff; }
  @media only screen and (min-width: 732px) {
    .btBlue {
      border-left: 0;
      border-top: 10px solid #1ddfff; } }

@media only screen and (min-width: 1040px) {
  .pink {
    background-color: #ff17a1;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; } }

@media only screen and (min-width: 1040px) {
  .grey {
    background-color: #10ff92;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; } }

@media only screen and (min-width: 1040px) {
  .yellow {
    background-color: #ffd800;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; } }

@media only screen and (min-width: 1040px) {
  .blue {
    background-color: #1ddfff;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; } }

.uspIcon {
  display: none; }
  @media only screen and (min-width: 1040px) {
    .uspIcon {
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
      height: 100%;
      width: 100%;
      display: block;
      position: absolute;
      padding: 80px;
      top: 0;
      left: 0; }
      .uspIcon svg {
        fill: #f9f8f8; } }

.uspLamp {
  height: 80px;
  width: 53px; }

.uspHeart {
  margin-top: 10px;
  height: 65px;
  width: 71px; }

.uspProfile {
  height: 80px;
  width: 55px; }

.uspConnect {
  height: 80px;
  width: 85px; }

.uspHandshake {
  height: 80px;
  width: 92px; }

.moDescription {
  max-width: 929px;
  padding: 30px;
  margin: 0 auto; }
  @media only screen and (min-width: 732px) {
    .moDescription {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .moDescription {
      padding: 100px 0; } }

.moTestimonialCon {
  overflow: hidden;
  width: 100%;
  background-color: #282828; }
  @media only screen and (min-width: 732px) {
    .moTestimonialCon:hover .top, .moTestimonialCon:focus .top, .moTestimonialCon:active .top {
      margin-top: 0;
      opacity: 1; }
    .moTestimonialCon:hover .bot, .moTestimonialCon:focus .bot, .moTestimonialCon:active .bot {
      margin-bottom: 0;
      opacity: 1; }
    .moTestimonialCon:hover h2, .moTestimonialCon:focus h2, .moTestimonialCon:active h2 {
      background-color: #10ff92;
      color: #303030; } }

.moTestimonial {
  text-align: center;
  max-width: 929px;
  padding: 30px;
  margin: 0 auto; }
  @media only screen and (min-width: 732px) {
    .moTestimonial {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .moTestimonial {
      padding: 100px 0; } }

.quoteMarksCon {
  display: block; }
  @media only screen and (min-width: 732px) {
    .quoteMarksCon {
      display: inline-block; } }

.top {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  vertical-align: top;
  opacity: 0.4;
  position: absolute;
  left: 30px; }
  @media only screen and (min-width: 732px) {
    .top {
      margin-top: -15px;
      position: relative; } }

.bot {
  margin-top: -35px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  vertical-align: bottom;
  opacity: 0.4;
  position: absolute;
  right: 30px; }
  @media only screen and (min-width: 732px) {
    .bot {
      margin-bottom: -15px;
      margin-top: 0;
      position: relative; } }

.quoteMarks {
  width: 50px;
  height: 31px;
  fill: #10ff92; }

.testimonial {
  padding: 20px;
  display: inline-block;
  margin-bottom: 0 !important; }
  @media only screen and (min-width: 732px) {
    .testimonial {
      width: 80%; } }

.testimonialName {
  text-align: center;
  margin-top: 20px; }
  .testimonialName h2 {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    color: #10ff92;
    display: inline-block;
    border-radius: 2px;
    margin-bottom: 10px;
    border: 2px solid #10ff92;
    padding: 7px 12px; }
  .testimonialName p {
    font-style: italic;
    margin-bottom: 0 !important;
    font-size: 0.8em; }

.moSubT {
  margin: 20px; }

.moFor {
  text-align: center;
  display: block;
  background-color: #303030;
  padding: 30px; }
  @media only screen and (min-width: 732px) {
    .moFor {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .moFor {
      padding: 100px; } }

.moForCon {
  max-width: 1040px;
  margin: 0 auto;
  display: block; }
  @media only screen and (min-width: 929px) {
    .moForCon {
      display: table;
      border-spacing: 10px; } }

.mobullet-container {
  cursor: pointer;
  display: block;
  margin-bottom: 20px;
  text-align: left;
  background-color: #1e1e1e;
  overflow: hidden;
  border-radius: 2px;
  vertical-align: top;
  border: 0.1em solid #1e1e1e;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  .mobullet-container ul {
    display: none; }
  @media only screen and (min-width: 929px) {
    .mobullet-container {
      margin: 0 5px 5px 5px;
      display: table-cell;
      width: 31.5%; }
      .mobullet-container ul {
        display: block;
        margin: 30px;
        padding: 0 20px;
        border-left: 0px;
        background-color: transparent; }
        .mobullet-container ul li {
          font-size: 0.97em;
          margin-left: 0;
          padding: 0;
          margin-bottom: 20px; } }
  .mobullet-container .buttonArrow {
    fill: #f9f8f8 !important; }

.mobullet-container:hover {
  border: 0.1em solid #1ddfff; }

.mobullet-heading {
  text-align: center;
  text-transform: uppercase;
  padding: 20px 30px 20px 0;
  color: #f9f8f8;
  border: 1px solid #1ddfff;
  border-radius: 2px;
  margin: 5px;
  -webkit-transition: 0.2s ease;
  background-color: #1ddfff;
  position: relative;
  overflow: hidden; }
  @media only screen and (min-width: 1040px) {
    .mobullet-heading {
      padding: 20px; } }
  @media only screen and (min-width: 1040px) {
    .mobullet-heading {
      color: #1ddfff;
      background-color: #1e1e1e; } }
  .mobullet-heading .baContainer {
    position: absolute;
    float: none;
    top: 50%;
    right: -2px;
    height: 70px;
    margin: -35px 0 0 0;
    padding: 0 18px; }
    .mobullet-heading .baContainer .buttonArrow {
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
      position: relative;
      top: 50%;
      margin: -6px 0 0 0;
      display: block;
      fill: #1ddfff; }

.mobullet-container:hover .mobullet-heading {
  color: #f9f8f8;
  background-color: #1ddfff; }
  .mobullet-container:hover .mobullet-heading .baContainer {
    padding: 0 22px; }

ol {
  list-style-type: none; }
  ol li {
    counter-increment: step-counter; }
    ol li::before {
      content: counter(step-counter);
      font-size: 80%;
      margin-left: -40px;
      position: absolute;
      background-color: #10ff92;
      color: #1e1e1e;
      font-weight: bold;
      padding: 3px 8px;
      border-radius: 3px;
      border-bottom: 3px solid #00c36a; }
      @media only screen and (min-width: 1040px) {
        ol li::before {
          margin-right: 30px; } }

ul, ol {
  display: block;
  margin: 30px 0;
  padding: 20px;
  background-color: rgba(249, 248, 248, 0.2);
  border-left: 5px solid #10ff92;
  -webkit-margin-after: 20px;
  -webkit-margin-before: 0;
  -webkit-padding-start: 20px; }

ul {
  list-style: square; }
  ul h2 {
    display: inline-block; }

li {
  color: rgba(249, 248, 248, 0.8);
  padding: 0 0 0.6em 0.6em;
  border-radius: 2px;
  margin-bottom: 20px;
  margin-left: 30px; }
  @media only screen and (min-width: 732px) {
    li {
      margin-left: 40px;
      padding: 0.6em 1em 0.6em 1em; } }
  li:last-child {
    margin-bottom: 0; }

.mobullet-container:hover li {
  color: #f9f8f8; }

.imageModule {
  background-color: #3c3c3c; }
  .imageModule .subContent {
    float: right; }
    .imageModule .subContent .tabOne {
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 120%;
      background-size: cover; }
    .imageModule .subContent .tabTwo {
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 120%;
      background-size: cover; }
  .imageModule .csTextLogo {
    display: none; }
  .imageModule .lineSeperator {
    display: none; }
  .imageModule .mainImage {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 120%;
    background-size: cover;
    float: left; }

.DL {
  display: block;
  background-color: #ff17a1; }
  @media only screen and (min-width: 929px) {
    .DL {
      min-height: 230px; } }
  @media only screen and (min-width: 1040px) {
    .DL {
      min-height: 270px; } }

.DLCon {
  text-align: center;
  max-width: 1040px;
  margin: 0 auto;
  padding: 30px; }
  @media only screen and (min-width: 732px) {
    .DLCon {
      padding: 80px 30px; } }
  @media only screen and (min-width: 1040px) {
    .DLCon {
      padding: 100px 30px; } }

.DLLamp {
  display: none;
  fill: #f9f8f8;
  height: 100px;
  width: 68px; }
  @media only screen and (min-width: 1040px) {
    .DLLamp {
      display: inline-block;
      margin: 45px 30px; } }

.DLHead {
  text-align: left;
  display: block;
  background-color: #f9f8f8;
  color: #ff17a1;
  border-radius: 2px;
  padding: 10px 15px;
  margin-bottom: 20px; }
  @media only screen and (min-width: 929px) {
    .DLHead {
      display: inline-block; } }

.DLDescription {
  text-align: left;
  display: inline-block;
  width: 100%;
  vertical-align: top; }
  .DLDescription p {
    margin: 0; }
  @media only screen and (min-width: 732px) {
    .DLDescription {
      width: 80%; } }
  @media only screen and (min-width: 1040px) {
    .DLDescription {
      padding: 0 30px;
      max-width: 732px; } }

.iconDownload {
  fill: #f9f8f8;
  display: block;
  height: 50px;
  width: 50px;
  margin: 30px auto 0 auto;
  transform: rotate(0deg);
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  @media only screen and (min-width: 929px) {
    .iconDownload {
      margin: 50px 30px;
      display: inline-block; } }
  @media only screen and (min-width: 1040px) {
    .iconDownload {
      margin: 70px 0 70px 30px; } }
  .iconDownload:hover, .iconDownload:active, .iconDownload:focus {
    fill: rgba(249, 248, 248, 0.8);
    transform: rotate(-90deg); }

.imageTile {
  background-color: #3c3c3c;
  position: relative;
  overflow: hidden; }
  @media only screen and (min-width: 576px) {
    .imageTile {
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 120%;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover; } }
  @media only screen and (min-width: 732px) {
    .imageTile {
      min-height: 100vh; } }

.imageTile .overlay {
  opacity: 1;
  height: 1000vh !important; }
  @media only screen and (min-width: 732px) {
    .imageTile .overlay {
      opacity: 0.8; } }

.pageAnchor {
  width: 10px;
  height: 20px;
  top: 0;
  left: 0; }

.sectionTable {
  position: relative;
  margin: 0 auto;
  display: block;
  width: 100%; }
  @media only screen and (min-width: 732px) {
    .sectionTable {
      min-height: 100.1vh;
      display: table; } }

.sectionTableCell {
  display: block; }
  @media only screen and (min-width: 732px) {
    .sectionTableCell {
      display: table-cell;
      vertical-align: middle; } }

.sectionDes {
  padding: 20px 0; }

.sectionInfoCS {
  padding: 30px;
  margin: 0 auto; }
  @media only screen and (min-width: 732px) {
    .sectionInfoCS {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .sectionInfoCS {
      width: 1040px; } }

.sectionInfo {
  width: 100%;
  display: block; }
  @media only screen and (min-width: 1040px) {
    .sectionInfo {
      display: inline-block;
      float: left;
      width: 62%; } }

.sectionTitle {
  background-color: #1ddfff;
  display: block;
  top: 0;
  left: 0;
  padding: 14px 20px;
  border-radius: 2px; }

.sectionCS {
  background-color: #dedede;
  cursor: pointer;
  display: inline-block;
  width: 100%;
  float: none;
  height: 100px;
  border-radius: 2px;
  overflow: hidden; }
  @media only screen and (min-width: 1040px) {
    .sectionCS {
      float: right;
      display: table;
      margin-top: 0;
      width: 300px;
      height: 300px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100%;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover; } }
  .sectionCS .baContainer {
    padding: 42px 30px;
    margin: -100px 0;
    background-color: #ff17a1; }
    @media only screen and (min-width: 1040px) {
      .sectionCS .baContainer {
        display: none; } }

.infoCS {
  display: block;
  text-align: left;
  height: 100%;
  width: 100%;
  color: #3c3c3c;
  padding: 30px 90px 30px 30px;
  border-radius: 2px;
  background-color: #c7c3b9; }
  .infoCS .table {
    height: 100%;
    padding: 0; }
  @media only screen and (min-width: 732px) {
    .infoCS {
      padding: 25px 30px; } }
  .infoCS h3 {
    margin: 0; }
  .infoCS p {
    font-size: 1em;
    display: none; }
    @media only screen and (min-width: 732px) {
      .infoCS p {
        display: block; } }
  @media only screen and (min-width: 1040px) {
    .infoCS {
      background-color: rgba(255, 23, 161, 0.8);
      border: none;
      color: #f9f8f8;
      text-align: center;
      opacity: 0;
      display: table-cell;
      vertical-align: middle;
      padding: 40px;
      margin-top: -100px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease; } }

@media only screen and (min-width: 1040px) {
  .sectionCS:hover .infoCS,
  .sectionCS:focus .infoCS {
    overflow: hidden;
    opacity: 1; } }

.lineSeperator {
  margin: 0 auto;
  display: none; }
  @media only screen and (min-width: 1040px) {
    .lineSeperator {
      display: block;
      margin: 10px auto;
      width: 3em;
      height: 2px;
      background: #f9f8f8; } }

.imageTile:nth-child(even) .overlay {
  background-color: #505050; }
.imageTile:nth-child(even) .sectionCS {
  float: none; }
  @media only screen and (min-width: 1040px) {
    .imageTile:nth-child(even) .sectionCS {
      float: left; } }
.imageTile:nth-child(even) .sectionInfo {
  float: none; }
  @media only screen and (min-width: 1040px) {
    .imageTile:nth-child(even) .sectionInfo {
      float: right; } }

.csLogo {
  vertical-align: middle;
  position: relative;
  display: block;
  margin: 0 auto 20px auto; }
  @media only screen and (min-width: 732px) {
    .csLogo {
      margin: 0 20px 0 0;
      vertical-align: middle;
      display: inline-block; } }

.alfiLogo {
  height: 150px;
  width: 146px; }

.csTitle {
  display: block; }
  @media only screen and (min-width: 732px) {
    .csTitle {
      vertical-align: middle;
      display: inline-block; } }

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #3c3c3c;
  opacity: 0.3;
  width: 100%;
  height: 98vh;
  z-index: 0; }
  @media only screen and (min-width: 1040px) {
    .overlay {
      height: 100vh; } }

.arrow-up {
  position: relative;
  margin: 0 auto;
  margin-top: -12px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #10ff92; }
  @media only screen and (min-width: 1040px) {
    .arrow-up {
      display: none; } }

.introModule {
  background-color: #303030;
  width: 100%;
  display: block;
  padding: 30px; }
  @media only screen and (min-width: 732px) {
    .introModule {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .introModule {
      min-height: 100vh;
      padding: 0 100px; } }

.imageModule {
  width: 100%;
  display: block;
  padding: 30px; }
  @media only screen and (min-width: 732px) {
    .imageModule {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .imageModule {
      min-height: 100vh;
      padding: 0 100px; } }
  .imageModule .tabOne {
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #ededed;
    background-size: 130%;
    height: 177px; }
  .imageModule .tabTwo {
    height: 177px;
    margin-top: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #ededed;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center; }
    @media only screen and (min-width: 1040px) {
      .imageModule .tabTwo {
        margin-top: 20px; } }
  .imageModule .mainImage {
    background-repeat: no-repeat;
    background-position: center center; }

.imageModule:nth-child(3n) .mainImage {
  float: right;
  margin-right: 0;
  margin-left: 20px; }

.imgTable {
  margin: 0 auto;
  position: relative;
  display: block;
  width: 100%;
  height: 100%; }
  @media only screen and (min-width: 1040px) {
    .imgTable {
      display: table;
      min-height: 100vh;
      padding: 0 100px; } }

.imgTableCell {
  position: relative;
  display: block; }
  @media only screen and (min-width: 1040px) {
    .imgTableCell {
      display: table-cell;
      vertical-align: middle; } }

.mainImage {
  position: relative;
  display: inline-block;
  float: left;
  height: 300px;
  width: 100%;
  border-radius: 2px;
  background: url("/wp-content/themes/html5reset/_/img/Alfi_Main1") no-repeat center center;
  background-size: 120%;
  background-size: cover;
  background-position: center center;
  margin-bottom: 20px; }
  @media only screen and (min-width: 732px) {
    .mainImage {
      margin-bottom: 0;
      height: 400px; } }
  @media only screen and (min-width: 1400px) {
    .mainImage {
      margin-right: 20px;
      width: 49%;
      height: 500px;
      background-attachment: scroll;
      background-size: 120%;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover; } }

.subContent {
  position: relative;
  display: inline-block;
  float: left;
  width: 100%;
  margin: 0 auto;
  padding: 0 auto; }
  @media only screen and (min-width: 1040px) {
    .subContent {
      margin-top: 0; } }
  .subContent .table {
    height: 100% !important; }
  .subContent .tabOne {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 120%;
    background-size: cover;
    background-color: #08a2cd;
    position: relative;
    border-radius: 2px;
    text-align: center;
    min-height: 177px;
    width: 100%; }
    @media only screen and (min-width: 732px) {
      .subContent .tabOne {
        width: 48.5%;
        min-height: 177px;
        margin-top: 20px;
        float: right; } }
    @media only screen and (min-width: 1400px) {
      .subContent .tabOne {
        height: 240px !important;
        margin-top: 0;
        width: 100%; } }
    .subContent .tabOne .csTagline {
      padding: 0;
      margin: 0; }
    .subContent .tabOne .lineSeperator {
      display: block;
      margin: 10px auto;
      width: 3em;
      height: 1px;
      background: #f9f8f8; }
    .subContent .tabOne p {
      padding: auto 30px;
      font-size: 0.9em; }
  .subContent .tabTwo {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 120%;
    background-size: cover;
    background-color: #edeaea;
    position: relative;
    border-radius: 2px;
    margin-top: 20px;
    width: 100%;
    min-height: 177px;
    text-align: center; }
    @media only screen and (min-width: 732px) {
      .subContent .tabTwo {
        width: 48.5%;
        min-height: 177px;
        float: left; } }
    @media only screen and (min-width: 1400px) {
      .subContent .tabTwo {
        width: 100%;
        height: 240px !important; } }
    .subContent .tabTwo h2 {
      display: inline-block;
      text-align: center;
      margin: 0 auto;
      color: #f9f8f8;
      padding: 10px 20px;
      background-color: rgba(48, 48, 48, 0.6);
      border-radius: 2px; }
    .subContent .tabTwo ul {
      display: block;
      margin: 0 !important;
      list-style: square;
      padding: 20px; }
      @media only screen and (min-width: 1040px) {
        .subContent .tabTwo ul {
          display: block;
          padding: 0; } }
    .subContent .tabTwo li {
      padding: 5px 9px;
      display: inline-block;
      background-color: #EAEAEA;
      color: rgba(48, 48, 48, 0.6);
      margin: 4px;
      border: 1px solid rgba(48, 48, 48, 0.6);
      border-radius: 2px; }
  @media only screen and (min-width: 1400px) {
    .subContent {
      width: 49%; } }
  @media only screen and (max-height: 762px) {
    .subContent {
      min-height: 200px; } }

.csInfoContainer {
  background-color: #5b5b5b; }

.csInfo {
  padding: 30px 30px;
  margin: 0 auto; }
  @media only screen and (min-width: 732px) {
    .csInfo {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .csInfo {
      width: 1040px;
      padding: 100px 30px; } }
  .csInfo h2 {
    margin: 25px 0 10px 0;
    font-size: 0.9em; }

.d .xm {
  margin-left: 30px !important;
  margin-right: 30px !important;
  margin-bottom: 0 !important; }

.d {
  background-color: #303030; }

.sectionHeadCon.d {
  padding: 30px !important; }
  @media only screen and (min-width: 732px) {
    .sectionHeadCon.d {
      padding: 80px !important; } }
  .sectionHeadCon.d .sectionHead {
    margin-bottom: 0 !important; }

#map-canvas {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 70vh;
  background-color: #ccc; }

.gm-style canvas {
  margin: -40px 0 0 -33px !important; }

.siarrow-up {
  z-index: 1;
  position: relative;
  margin: 0 auto;
  margin-top: -12px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #3c3c3c; }

.titleBreak.contact {
  z-index: 1;
  margin-top: 70vh;
  position: relative;
  padding: 30px;
  bottom: 0;
  left: 0;
  height: 20vh;
  min-height: 240px;
  width: 100%; }
  @media only screen and (min-width: 576px) {
    .titleBreak.contact {
      padding: 50px; } }

.socialIconsTab {
  position: relative;
  background-color: #3c3c3c;
  z-index: 1;
  display: block;
  padding: 20px;
  text-align: center; }
  @media only screen and (min-width: 576px) {
    .socialIconsTab {
      padding: 30px; } }
  @media only screen and (min-width: 732px) {
    .socialIconsTab {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .socialIconsTab {
      padding: 100px; } }

.siIconContainer {
  margin: 5px;
  padding: 20px;
  display: inline-block;
  position: relative;
  background-color: #ffd800;
  width: 80px;
  height: 80px;
  border-radius: 2px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  @media only screen and (min-width: 576px) {
    .siIconContainer {
      margin: 20px; } }
  @media only screen and (min-width: 732px) {
    .siIconContainer {
      padding: 0px;
      margin: 0 20px 40px 20px;
      width: 100px;
      height: 100px; } }
  .siIconContainer:hover, .siIconContainer:active {
    background-color: white; }

.siIcon {
  top: 50%;
  left: 50%;
  position: absolute;
  fill: #3c3c3c; }

.emailIcon {
  margin: -14px 0 0 -18px;
  height: 26px;
  width: 34px; }

.twitterIcon {
  margin: -15px 0 0 -20px;
  height: 30px;
  width: 36px; }

.linkedInIcon {
  margin: -18px 0 0 -14px;
  height: 30px;
  width: 30px; }

.facebookIcon {
  margin: -18px 0 0 -9px;
  height: 35px;
  width: 18px; }

.vimeoIcon {
  margin: -10px 0 0 -13px;
  height: 21px;
  width: 24px; }

.flickrIcon {
  margin: -6px 0 0 -13px;
  height: 12px;
  width: 24px; }

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  min-height: 355px;
  background-color: #1e1e1e;
  padding: 30px;
  z-index: -10; }
  @media only screen and (min-width: 360px) {
    footer {
      padding: 40px; } }
  @media only screen and (min-width: 732px) {
    footer {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    footer {
      padding: 100px; } }
  footer .footerIcons {
    float: right;
    width: 100%;
    text-align: center;
    padding: 0; }
    @media only screen and (max-width: 360px) {
      footer .footerIcons {
        padding: 0; } }
    @media only screen and (min-width: 732px) {
      footer .footerIcons {
        text-align: right;
        width: 280px;
        padding: 0; } }
    @media only screen and (min-width: 1335px) {
      footer .footerIcons {
        width: 50%; } }
  footer .socialIconsTab {
    position: relative;
    background-color: #3c3c3c;
    z-index: 2;
    display: block;
    padding: 20px;
    text-align: center; }
    @media only screen and (min-width: 576px) {
      footer .socialIconsTab {
        padding: 30px; } }
    @media only screen and (min-width: 732px) {
      footer .socialIconsTab {
        padding: 80px; } }
    @media only screen and (min-width: 1040px) {
      footer .socialIconsTab {
        padding: 100px; } }
  footer .siIconContainer {
    margin: 5px !important;
    padding: 20px;
    display: inline-block;
    position: relative;
    background-color: #ffd800;
    width: 50px;
    height: 50px;
    border-radius: 2px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
    footer .siIconContainer:hover, footer .siIconContainer:active {
      background-color: white; }
    @media only screen and (min-width: 360px) {
      footer .siIconContainer {
        width: 80px;
        height: 80px; } }
  footer .siIcon {
    top: 50%;
    left: 50%;
    position: absolute;
    fill: #3c3c3c; }
  footer .emailIcon {
    margin: -14px 0 0 -18px;
    height: 26px;
    width: 34px; }
  footer .twitterIcon {
    margin: -15px 0 0 -20px;
    height: 30px;
    width: 36px; }
  footer .linkedInIcon {
    margin: -18px 0 0 -14px;
    height: 30px;
    width: 30px; }
  footer .facebookIcon {
    margin: -18px 0 0 -9px;
    height: 35px;
    width: 18px; }
  footer .vimeoIcon {
    margin: -10px 0 0 -13px;
    height: 21px;
    width: 24px; }
  footer .flickrIcon {
    margin: -6px 0 0 -13px;
    height: 12px;
    width: 24px; }
  footer .companyInfo {
    text-align: left;
    display: inline-block;
    margin-bottom: 30px; }
    @media only screen and (min-width: 732px) {
      footer .companyInfo {
        width: 50%; } }
  footer .whiteGradient {
    position: absolute;
    z-index: -1;
    height: 400px;
    background-size: 110%;
    background-position: center top !important;
    margin: -80px -30px;
    opacity: 0.1; }
    @media only screen and (min-width: 360px) {
      footer .whiteGradient {
        margin: -150px -40px; } }
    @media only screen and (min-width: 732px) {
      footer .whiteGradient {
        height: 300px;
        margin: -200px -80px;
        background-size: 100%; } }
    @media only screen and (min-width: 1040px) {
      footer .whiteGradient {
        height: 400px;
        margin: -200px -100px; } }

.bpTitleHero {
  text-align: center;
  margin: 0;
  height: 70vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-color: #303030; }
  .bpTitleHero .table {
    height: 70vh; }
  .bpTitleHero .overlay {
    height: 70vh; }

.entryContentCon {
  background-color: #3c3c3c;
  text-align: center; }

.entryContent {
  max-width: 1040px;
  text-align: left;
  width: 100%;
  margin: 0 auto;
  padding: 30px; }
  .entryContent h2 {
    margin: 25px 0 10px 0;
    font-size: 0.9em; }
  @media only screen and (min-width: 732px) {
    .entryContent {
      padding: 80px; } }
  @media only screen and (min-width: 1040px) {
    .entryContent {
      padding: 80px 100px; } }

.postedOn {
  border-top: 3px solid rgba(249, 248, 248, 0.3);
  margin-top: 40px;
  padding-top: 20px; }

.bottomActionsCon {
  display: none;
  background-color: #303030;
  text-align: center;
  padding: 30px; }
  @media only screen and (min-width: 732px) {
    .bottomActionsCon {
      padding: 80px 30px; } }
  @media only screen and (min-width: 1040px) {
    .bottomActionsCon {
      padding: 100px 30px; } }

.bottomActions {
  text-align: left;
  max-width: 1040px;
  width: 100%;
  margin: 0 auto; }

#nav-posts {
  padding: 40px 30px;
  width: 100%; }
  @media only screen and (min-width: 732px) {
    #nav-posts {
      padding: 40px 0; } }
  #nav-posts a {
    background-color: #ff17a1;
    padding: 10px 13px;
    border-radius: 2px;
    color: #f9f8f8;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    border-left: 0px solid #b00069; }
    #nav-posts a:hover {
      background-color: #e30087;
      border-left: 10px solid #b00069; }
  #nav-posts .prev {
    float: left; }
  #nav-posts .next {
    float: right; }

.fofPage {
  height: 105vh;
  background-color: #3c3c3c; }

.fofMessageCon {
  z-index: 1;
  padding: 100px 30px;
  -moz-animation-name: fadeDown;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-duration: 0.6s;
  -webkit-animation-name: fadeDown;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 0.6s;
  animation-name: fadeDown;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-duration: 0.6s; }
  @media only screen and (min-width: 732px) {
    .fofMessageCon {
      padding-top: 30vh; } }
  @media only screen and (min-width: 1040px) {
    .fofMessageCon {
      padding-top: 35vh; } }
  @media only screen and (max-height: 500px) {
    .fofMessageCon {
      padding-top: 20vh; } }
@-moz-keyframes fadeDown {
  0% {
    opacity: 0.2;
    margin-top: -30px; }
  100% {
    opacity: 1;
    margin-top: 0; } }
@-webkit-keyframes fadeDown {
  0% {
    opacity: 0.2;
    margin-top: -30px; }
  100% {
    opacity: 1;
    margin-top: 0; } }
@keyframes fadeDown {
  0% {
    opacity: 0.2;
    margin-top: -30px; }
  100% {
    opacity: 1;
    margin-top: 0; } }
.fofMessage {
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
  z-index: 1;
  position: relative;
  display: block;
  background-color: rgba(48, 48, 48, 0.95);
  padding: 30px;
  border-radius: 2px; }
  .fofMessage h1 {
    margin-bottom: 20px; }
  .fofMessage p {
    color: rgba(249, 248, 248, 0.9); }
    @media only screen and (min-width: 732px) {
      .fofMessage p {
        padding-right: 60px; } }
  .fofMessage a {
    color: #f9f8f8;
    font-weight: 700 !important; }
  .fofMessage .lineSeperator {
    display: block;
    margin: 10px auto;
    width: 100%;
    height: 1px;
    background: #f9f8f8;
    -moz-animation-name: widthLine;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-duration: 0.6s;
    -webkit-animation-name: widthLine;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 0.6s;
    animation-name: widthLine;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: 0.6s; }
@-moz-keyframes widthLine {
  0% {
    opacity: 0.2;
    width: 60%; }
  100% {
    opacity: 1;
    width: 100%; } }
@-webkit-keyframes widthLine {
  0% {
    opacity: 0.2;
    width: 60%; }
  100% {
    opacity: 1;
    width: 100%; } }
@keyframes widthLine {
  0% {
    opacity: 0.2;
    width: 60%; }
  100% {
    opacity: 1;
    width: 100%; } }
.pageLink {
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f9f8f8;
  padding: 10px 15px;
  background-color: #ff17a1;
  border-radius: 2px;
  display: inline-block;
  position: relative;
  margin-right: 10px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border-bottom: 5px solid #e30087; }
  .pageLink:hover, .pageLink:focus, .pageLink:active {
    background-color: #e30087;
    border-bottom: 5px solid #b00069; }

.fofCon {
  z-index: 0;
  display: block;
  position: fixed;
  width: 100%;
  height: 1000px;
  bottom: 0;
  left: 0;
  background-image: url("/wp-content/themes/html5reset/_/img/404.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 200%;
  -moz-animation-name: fadeUp;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-duration: 0.6s;
  -webkit-animation-name: fadeUp;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 0.6s;
  animation-name: fadeUp;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-duration: 0.6s; }
  @media only screen and (min-width: 732px) {
    .fofCon {
      background-size: 150%;
      bottom: -100px; } }
  @media only screen and (min-width: 929px) {
    .fofCon {
      background-size: 100%; } }
  @media only screen and (min-width: 1040px) {
    .fofCon {
      bottom: -150px; } }
  .fofCon svg {
    fill: #10ff92; }
@-moz-keyframes fadeUp {
  0% {
    opacity: 0.2;
    margin-bottom: -30px; }
  100% {
    opacity: 1;
    margin-top: 0; } }
@-webkit-keyframes fadeUp {
  0% {
    opacity: 0.2;
    margin-bottom: -30px; }
  100% {
    opacity: 1;
    margin-top: 0; } }
@keyframes fadeUp {
  0% {
    opacity: 0.2;
    margin-bottom: -30px; }
  100% {
    opacity: 1;
    margin-top: 0; } }
.spCon {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: table;
  height: 100vh;
  width: 100%;
  background: linear-gradient(263deg, #5cb5ff, #3c3c3c);
  background-size: 1500% 400%;
  -webkit-animation: colorChange 5s ease;
  -moz-animation: colorChange 5s ease;
  animation: colorChange 5s ease; }
@-webkit-keyframes colorChange {
  0% {
    background-position: 100% 0%; }
  50% {
    background-position: 100% 0%; }
  100% {
    background-position: 0 100%; } }
@-moz-keyframes colorChange {
  0% {
    background-position: 100% 0%; }
  50% {
    background-position: 100% 0%; }
  100% {
    background-position: 0% 100%; } }
@keyframes colorChange {
  0% {
    background-position: 100% 0%; }
  50% {
    background-position: 100% 0%; }
  100% {
    background-position: 0% 100%; } }
.sp {
  display: table-cell;
  max-width: 1040px;
  vertical-align: middle;
  text-align: center; }

.spTitle {
  display: block;
  text-align: center;
  font-family: "myriad-pro",sans-serif;
  color: #fff;
  font-size: 1.5em; }

.newLogo {
  display: block;
  height: 40px;
  margin: 0 auto;
  margin-top: 10px; }

.seaLogo {
  display: inline-block;
  width: 200px;
  margin-bottom: 40px; }

.change {
  display: inline-block;
  text-align: center;
  margin: 0 80px;
  margin-bottom: 50px;
  vertical-align: bottom;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: 800; }

.changeCon {
  height: 150px;
  margin: 40px 0; }

.newIcon {
  display: inline-block;
  width: 150px; }

.buttonSiteCon {
  display: block;
  width: 100%;
  text-align: center;
  height: 50px; }
  .buttonSiteCon h2 {
    margin-top: 5px;
    box-sizing: border-box;
    display: inline-block;
    font-family: 'Open Sans';
    font-size: 1em;
    background-color: #ff17a1;
    padding: 20px 25px;
    text-transform: uppercase;
    border-radius: 2px;
    font-weight: 700;
    border-bottom: 0px solid #e30087;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
    .buttonSiteCon h2:hover {
      margin-top: 0;
      border-bottom: 5px solid #e30087; }

/* And here begins the WordPress fun.
-------------------------------------------------------------------------------*/