/* IMPORT RESET */
@import url("reset.css");

/* IMPORT 12 COLUMN RESPONSIVE GS */
@import url("responsive.gs.12col.css");

/* GLOBAL RULES */
body {
  position: relative;
  color: white;
  font-family: "Georgia", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.875em;
  /* 14/16 */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; }

a {
  color: white;
  text-decoration: none; }

a, a img, a span, input[type="submit"] {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out; }

h1, h2, h3, h4, h5, h6 {
  padding-bottom: .5em;
  font-family: "Trajan", "Georgia", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.3; }

h1 {
  font-size: 1.5em;
  /* 30/14 */ }

h2 {
  font-size: 1.5em;
  /* 23/14 */ }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

h6 {
  font-size: 1em; }

p {
  padding-bottom: 1.5em;
  -webkit-text-size-adjust: none; }

code {
  font-family: Consolas, monaco, "Andale Mono", AndaleMono, monospace;
  text-transform: none;
  line-height: 1; }

/*	12 COLUMN : RESPONSIVE GRID SYSTEM
	DEVELOPER : DENIS LEBLANC
	URL : http://responsive.gs
	VERSION : 3.0
	LICENSE : GPL & MIT */
/* 	SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc);
  /*	If you need support for IE7 and lower make
  	sure the boxsizing.htc file is linked properly.
  	More info here:  https://github.com/Schepp/box-sizing-polyfill */ }

/*	MAIN CONTAINER
	Set the width to whatever you want the width of your site to be. */
.container {
  max-width: 800px;
  margin: 0 auto; }

/*	SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after,
.row:after,
.col:after,
.clr:after,
.group:after {
  content: "";
  display: table;
  clear: both; }

/* 	DEFAULT ROW STYLES
	Set bottom padding according to preference */
.row {
  padding-bottom: 0em; }

/* DEFAULT COLUMN STYLES */
.col {
  display: block;
  float: left;
  width: 100%; }

@media (min-width: 768px) {
  .gutters .col {
    margin-left: 2%; }

  .gutters .col:first-child {
    margin-left: 0; } }
/*	COLUMN WIDTH ON DISPLAYS +768px
	You might need to play with media queries here to suite your design. */
@media (min-width: 768px) {
  .span_1 {
    width: 8.33333333333%; }

  .span_2 {
    width: 16.6666666667%; }

  .span_3 {
    width: 25%; }

  .span_4 {
    width: 33.3333333333%; }

  .span_5 {
    width: 41.6666666667%; }

  .span_6 {
    width: 50%; }

  .span_7 {
    width: 58.3333333333%; }

  .span_8 {
    width: 66.6666666667%; }

  .span_9 {
    width: 75%; }

  .span_10 {
    width: 83.3333333333%; }

  .span_11 {
    width: 91.6666666667%; }

  .span_12 {
    width: 100%; }

  .gutters .span_1 {
    width: 6.5%; }

  .gutters .span_2 {
    width: 15.0%; }

  .gutters .span_3 {
    width: 23.5%; }

  .gutters .span_4 {
    width: 32.0%; }

  .gutters .span_5 {
    width: 40.5%; }

  .gutters .span_6 {
    width: 49.0%; }

  .gutters .span_7 {
    width: 57.5%; }

  .gutters .span_8 {
    width: 66.0%; }

  .gutters .span_9 {
    width: 74.5%; }

  .gutters .span_10 {
    width: 83.0%; }

  .gutters .span_11 {
    width: 91.5%; }

  .gutters .span_12 {
    width: 100%; } }
/* MASTER RULES */
.top_bar {
  position: fixed;
  z-index: 3;
  width: 100%;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.4);
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)); }
  .top_bar p {
    padding: 1.5em 0;
    font-size: 0.9em;
    text-align: center;
    letter-spacing: .1em;
    line-height: 2; }
  .top_bar a.text_link {
    text-decoration: underline; }
  .top_bar a.piggy {
    margin: 0 0 -.5em 1em;
    display: inline-block;
    width: 2em;
    height: 2em;
    opacity: 0.8;
    background: url(../images/sprite.png) no-repeat;
    background: url(../images/sprite.svg) no-repeat;
    background-position: 0 -66px;
    background-size: 400%; }

main.banner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  color: white;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Trajan Pro", "Georgia", serif;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  text-transform: uppercase;
  background: url("../images/bkb.jpg") no-repeat;
  background-position: center top;
  -webkit-background-size: cover;
  background-size: cover;
  /*background-attachment: fixed;*/
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  overflow: scroll; }
  @media (min-width: 600px) {
    main.banner {
      height: 100%; } }
  .section_heading svg {
    height: auto;
    width: 100% !important;
    max-width: 100%;
  }
  .screen_reader_text {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  main.banner aside {
    max-width: 80%;
    margin: 0 auto;
    padding: .5em 0 0 0;
    font-size: 1.2em;
    text-align: center;
    border-top: 1px solid white;
    border-top: 1px solid rgba(255, 255, 255, 0); }
    @media (min-width: 600px) {
      main.banner aside {
        font-size: 1.5em; } }
    @media (min-width: 600px) {
      main.banner aside {
        max-width: 70%; } }
    @media (min-width: 900px) {
      main.banner aside {
        max-width: 65%; } }
    @media (min-width: 1024px) {
      main.banner aside {
        max-width: 60%; } }
    @media (min-width: 1200px) {
      main.banner aside {
        max-width: 50%; } }
    main.banner aside em {
      font-size: 1.1em;
      letter-spacing: .25em; }

      main.banner aside em p{
        text-transform: capitalize;
        font-family: sans-serif;
        font-size: 1em;
        /*padding: 1em;*/
        letter-spacing: 0;
        text-align: center;}
        @media (min-width: 1024px) {
          main.banner aside em p {
            /*font-size: 1.1em;
            padding:2em; */
            } }

      main.banner aside em p br {
        display: none; }
        @media (min-width: 550px) {
          main.banner aside em p br {
            display: none; } }
        @media (min-width: 600px) {
          main.banner aside em p br {
            display: block; } }
        @media (min-width: 780px) {
          main.banner aside em p br {
            display: none; } }
  main.banner h1 {
    padding: 3em .5em 0 .5em;
    font-family: "Trajan Pro", "Georgia", serif;
		margin: 0 auto;
    font-weight: 700;
    font-style: normal;
    font-size: 2.5em;
    text-align: center;
    letter-spacing: .25em; }
		@media (min-width: 600px) {
      main.banner h1 {
				font-size: 3.5em;
        max-width: 70%;
        padding: 2em 0 0 0; } }
    @media (min-width: 900px) {
      main.banner h1 {
        max-width: 65%;} }
    @media (min-width: 1024px) {
      main.banner h1 {
        max-width: 60%;} }
    @media (min-width: 1200px) {
      main.banner h1 {
        max-width: 50%; } }
  #contact ul {
    width: 65%;
    margin: 0 auto;
    font-size: 1.1em;
    text-align: center;
    text-transform: none;
    letter-spacing: .125em;
    line-height: 2.5; }
    #contact ul br {
      display: none; }
      @media (min-width: 600px) {
        main.banner ul br {
          display: block; } }
    #contact ul li {
      text-align: center;
      white-space: nowrap; }
      #contact ul li::before {
        content: "\2022";
        padding: 0 .75em; }
      @media (min-width: 600px) {
        #contact ul li {
          display: block; }
          #contact ul li.no_bullet:before {
            content: "";
            padding: 0 .5em; } }

.buttons_wrap {
  padding: 2em 0 0 0;
  text-align: center; }
  @media (min-width: 700px) {
    .buttons_wrap br {
      display: none; } }
  .buttons_wrap .button {
    display: -moz-inline-stack;
    display: inline-block;
    background: rgba(0, 0, 0, 0.25);
    height: 100px;
    width: 100px;
    padding: 25px;
    margin: 0 2em;
    border: 1px solid white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 100px; }
    .buttons_wrap .button:hover {
      background: rgba(0, 0, 0, 0.5); }
    .buttons_wrap .button .icon {
      display: block;
      width: 100%;
      height: 100%;
      background: url(../images/sprite.png) no-repeat;
      background: url(../images/sprite.svg) no-repeat;
      opacity: 1;
      background-size: 400%; }
    .buttons_wrap .button .icon_download {
      background-position: 2px 0; }
    .buttons_wrap .button .icon_code {
      background-position: -127px 11px; }
    .buttons_wrap .button .icon_puzzle {
      background-position: -64px 0px; }

      @media (min-width: 700px) {
        .buttons_wrap .button {
          border: none;
          background: transparent;
          width: auto;
          padding: 0px;
          margin: 0 1.2em;
          float: left;
        }
        .buttons_wrap {
          width:100%;
        }
        .buttons_wrap .button .icon {
          height: 30px;
          width: 30px;
          margin: 0 0 0 45%;
          background-position:0 -5em; }

          .buttons_wrap .button .icon_code {
            background-position: -80px 2px; }
          .buttons_wrap .button .icon_puzzle {
            background-position: -40px 0px; }
          .buttons_wrap .button:hover {
            background: transparent;}
        }
        @media (min-width: 800px) {
          .buttons_wrap .button {
            border: none;
            background: transparent;
            width: auto;
            padding: 0px;
            margin: 0 2.2em;
            float: left;
          }}

    .navText, .navText br{
      display: none;
    }
    .phoneNumber{
      letter-spacing: 1;
    }
    @media (min-width: 700px) {
      .navText, .navText br{
        display:block;
        text-align: center;
        text-decoration: none;
        font-variant: normal;
      }

.secondary {
  width: auto;
  font-family: "Trajan Pro", "Georgia", serif;;
  text-transform: none;
  background: #2B2A31;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }
  .secondary .container {
    padding: 3em .5em 4em .5em; }
    @media (min-width: 600px) {
      .secondary .container {
        padding: 5em 0 4em 0; } }
    .secondary .container#puzzle {
      padding-top: 0; }
  .secondary h1 {
    padding-bottom: 0;
    font-family: Consolas, monaco, "Andale Mono", AndaleMono, monospace;
    color: #666; }
    .secondary h1 span {
      font-style: italic; }
  .secondary h2 {
    padding-bottom: 0;
    margin-top: 3em;
    font-family: Consolas, monaco, "Andale Mono", AndaleMono, monospace;
    color: #666; }
    .secondary h2 span {
      font-style: italic; }
  @media (min-width: 600px) {
    .secondary code {
      font-size: 1.06666666666667em; } }

footer {
  padding: 1em;
  color: black; }
  footer p {
    padding-bottom: 1em; }
  footer a {
    color: black; }

/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
code[class*="language-"] {
  color: white;
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  white-space: pre;
  overflow: auto;
  width: auto;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none; }

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

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

@media print {
  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none; } }
/* Code blocks */
pre[class*="language-"] {
  overflow: auto; }

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em; }

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #666;
  font-style: italic; }

.token.punctuation {
  color: #ffc66d; }

.language-css .token.selector,
.language-css .token.punctuation {
  color: white; }

.namespace {
  opacity: .7; }

.token.tag,
.token.boolean,
.token.number {
  color: #ffc66d; }

.token.property,
.token.selector,
.token.attr-name,
.token.string {
  color: #cc7832; }

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #6e9cbe; }

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #a5c261; }

.token.regex,
.token.important {
  color: #e90; }

.token.important {
  font-weight: bold; }

.token.entity {
  cursor: help; }

.share .btn {
  display: block;
  float: left;
  padding: 1px 5px 1px 3px;
  margin-right: 5px;
  font-size: 0.85714285714286em;
  /* 12/14 */
  color: #333333;
  background: whitesmoke;
  border: 1px solid #cccccc;
  border-radius: 5px;
  box-shadow: white 0px 1px 0px inset; }
.share .btn:hover {
  background: #f0f0f0;
  border: 1px solid #bfbfbf; }
.share .btn .icon {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin: 1px 7px 0 0;
  background: url("../images/sprite-share.svg") no-repeat;
  background-size: 125px 25px; }
.share .btn.facebook .icon {
  background-position: -21px 0; }
.share .btn.google .icon {
  background-position: -75px 1px; }
.share .btn.linkedin .icon {
  background-position: -100px 0; }
.share .btn.pinterest .icon {
  background-position: -50px 0; }
.share .btn.twitter .icon {
  background-position: 0 0; }