/*--------------------------------------------------*    DEFAULT STYLESHEET FOR MOBILE FIRST PAGES

    Keep it lean!

    =========

    CLASS NAMING CONVENTION
    There are many similarities about how design patterns are treated across different browser sizes.
    This syntax makes the CSS quick to write and the HTML easy to read.

    Use prefixes for different size browsers
        Mobile only  = .v-m-- = version-mobile--description
        Tablet only  = .v-t-- = version-template--description
        Desktop only = .v-d-- = version-desktop--description
        Tab + Desk   = .v-td-- = = version-table/desktop--description
        etc...

    Examples:
        .v-m--none = On mobile, don't display (reads version-mobile--none)
        This replaces a common ".none" class to make it relevent for only browser sizes that it applies to.

        .v-d--thirds  = on desktop only, divide its children into thirds (reads version-desktop--thirds)
        This replaces a common ".third" class to make it relevent for only browser sizes that it applies to.

    "This looks like madness!?" -- JG
        Shush. You'll love it as soon as you use it.

    =========

    CONTENTS
    Keep it organized.

    01. First Section
    02. Second Section
    03. Third Section
        etc.

\*--------------------------------------------------*/

html {
  box-sizing: border-box;
}

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

.clearfix {
  zoom: 1;
}

.clearfix:before,
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
  clear: both;
}


/* Variables
\*-----------------------------------*/

/*--------------------------------------------------*    NAV
\*--------------------------------------------------*/

.top-bar-section {
  height: 58px;
  margin: 0 auto;
  display: flex;
}

@media only screen and (min-width: 64.063em) {
  .top-bar-section {
    max-width: 980px;
  }
}

.top-bar {
  background: #333232;
  text-transform: uppercase;
  height: 58px;
}

.top-bar.on-black a:hover {
  color: rgba(255, 255, 255, 0.85);
}

.top-bar.on-black .dropdown a:hover {
  color: #fff;
}

.top-bar.transparent .dropdown,
.top-bar.on-grey .dropdown {
  background: #f4f5f0;
}

.top-bar.transparent .dropdown a:hover,
.top-bar.on-grey .dropdown a:hover {
  background: #fafaf8;
}

.top-bar.transparent .active,
.top-bar.on-grey .active {
  border-bottom-color: rgba(0, 0, 0, 0.25);
}

.top-bar.transparent a,
.top-bar.on-grey a {
  color: #333232;
}

.top-bar.transparent .title-area .name a,
.top-bar.on-grey .title-area .name a {
  background-image: url("main-logo-lg-black.png");
}

.top-bar.transparent {
  background: transparent;
}

.top-bar.transparent ul.divider:after {
  display: none;
}

.top-bar.on-grey {
  background: #f4f5f0;
}

.top-bar.on-grey ul.divider:after {
  border-left: solid 1px rgba(0, 0, 0, 0.1);
  border-right: solid 1px #fff;
}

.top-bar .jerry-can-image {
  display: none;
}

.top-bar .jerry-can-image .icn {
  font-size: 26px;
  position: absolute;
  top: 17px;
  left: -3px;
}

.top-bar ul {
  list-style: none;
  margin: 0;
  position: relative;
}

.top-bar a {
  color: #fff;
  line-height: 58px;
  font-size: 11px;
  transition: all 150ms linear;
}

.top-bar li {
  position: relative;
  white-space: nowrap;
}

.top-bar li:hover>.dropdown {
  display: block;
}

.top-bar .user-access {
  margin-top: 14px;
  text-align: center;
  overflow: hidden;
  width: 100%;
}

.top-bar .user-access:last-child {
  margin-right: 0;
}

.top-bar .user-access .button {
  display: block;
  height: 30px;
  line-height: 30px;
  letter-spacing: normal;
  border-radius: 2px;
  font-weight: 400;
  background-color: transparent;
}

.top-bar .user-access .log-in {
  padding: 0;
  float: left;
}

.top-bar .user-access .sign-up {
  border: solid 1px #71716c;
  padding: 0 10px;
  float: right;
}

.top-bar .user-access .sign-up:hover {
  border-color: #8b8b85;
}

.top-bar .title-area {
  padding: 0 20px;
  width: 100%;
}

@media only screen and (min-width: 64.063em) {
  .top-bar .title-area {
    padding: 0 30px 0 0;
    width: auto;
    width: 180px;
  }
}

.top-bar .title-area .name a {
  float: left;
  display: block;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 150px;
  background-image: url("main-logo-lg.png");
  text-indent: -999em;
}

.top-bar .nav-items {
  max-width: 630px;
  display: flex;
  flex: 1;
  justify-content: space-between;
  text-align: center;
  padding: 0 30px;
}

.top-bar .nav-items>li:first-of-type {
  margin-left: 0;
}

.top-bar .nav-items>li:last-of-type {
  margin-right: 0;
}

.top-bar .nav-items>li>a.active {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 5px;
}

.top-bar .dropdown {
  text-align: left;
  display: none;
  padding: 0;
  position: absolute;
  left: -10px;
  top: 58px;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
  min-width: 140px;
}

.top-bar .dropdown:hover {
  display: block;
}

.top-bar .dropdown a,
.top-bar .dropdown li,
.top-bar .dropdown input[type='submit'] {
  display: block;
  width: 100%;
  line-height: 40px;
}

.top-bar .dropdown a,
.top-bar .dropdown input[type='submit'] {
  padding: 0 10px;
  white-space: nowrap;
}

.top-bar .dropdown a:hover,
.top-bar .dropdown input[type='submit']:hover {
  background: rgba(0, 0, 0, 0.5);
}

.top-bar .dropdown form {
  margin: 0;
}

.top-bar .dropdown input[type='submit'] {
  color: #fff;
  font-size: 11px;
  height: auto;
  background: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  position: inherit;
  text-transform: uppercase;
  font-family: "Gotham SSm A", "Gotham SSm B", "Proxima-Nova-n3", "Proxima-Nova-1", "Proxima-Nova-2", "Proxima Nova", sans-serif;
}

.top-bar .mycw-button {
  margin-top: 12px;
}

.top-bar .mycw-nav {
  display: none;
  padding-left: 30px;
}

@media only screen and (min-width: 64.063em) {
  .top-bar .mycw-nav {
    width: 170px;
  }
}

.top-bar .mycw-nav img {
  vertical-align: middle;
  margin-right: 10px;
}

.top-bar .mycw-nav .icn {
  font-size: 16px;
  position: relative;
  top: 2px;
  margin-left: 7px;
  color: rgba(255, 255, 255, 0.35);
}

.top-bar .nav-items,
.top-bar .mycw-nav {
  display: none;
}

@media only screen and (min-width: 64.063em) {

  .top-bar .nav-items,
  .top-bar .mycw-nav {
    display: flex;
  }
}

.top-bar .toggle-topbar {
  position: absolute;
  top: 0;
  right: 20px;
  cursor: pointer;
}

.top-bar .toggle-topbar .icn {
  font-size: 31px;
  position: relative;
  top: 10px;
}

@media only screen and (min-width: 64.063em) {
  .top-bar .toggle-topbar {
    display: none;
  }
}

@media only screen and (min-width: 64.063em) {
  ul.divider.after:after {
    content: '';
    border-left: solid 1px #000;
    border-right: solid 1px #515151;
    height: 58px;
    width: 0;
    position: absolute;
    top: 0;
    right: 0;
  }

  ul.divider.before:after {
    content: '';
    border-left: solid 1px #000;
    border-right: solid 1px #515151;
    height: 58px;
    width: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
}

.top-bar.minimal {
  background: transparent;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 100000;
}

@media only screen and (min-width: 64.063em) {

  .top-bar.minimal .divider:before,
  .top-bar.minimal .divider:after {
    display: none;
  }

  .top-bar.minimal .nav-items,
  .top-bar.minimal .mycw-nav {
    display: none;
  }

  .top-bar.minimal .title-area {
    width: 100%;
    padding: 0;
  }

  .top-bar.minimal .toggle-topbar {
    display: block;
    right: 0;
  }

  .top-bar.minimal .top-bar-section {
    max-width: none;
    padding: 0 20px;
  }
}

@media only screen and (min-width: 64.063em) {
  .no-flexbox .top-bar-section {
    display: block;
  }

  .no-flexbox .top-bar .nav-items,
  .no-flexbox .top-bar .mycw-nav {
    display: block;
    float: left;
  }

  .no-flexbox .nav-items {
    padding-left: 50px;
    padding-right: 20px;
  }

  .no-flexbox .nav-items>li {
    float: left;
    padding: 0 10px;
  }
}

.right-off-canvas-menu {
  background: #202020;
  font-family: "Gotham SSm A", "Gotham SSm B", "Proxima-Nova-n3", "Proxima-Nova-1", "Proxima-Nova-2", "Proxima Nova", sans-serif;
  font-size: 14px;
  z-index: 0;
  width: 240px;
  padding-left: 0;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.right-off-canvas-menu .name a {
  border-top: solid 1px #0c0c0c;
}

.right-off-canvas-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.right-off-canvas-menu a,
.right-off-canvas-menu form {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 20px;
  border-bottom: solid 1px #0c0c0c;
  transition: background 150ms linear;
  font-size: 16px;
  line-height: 1;
}

.right-off-canvas-menu a:hover,
.right-off-canvas-menu form:hover {
  background: #252525;
}

.right-off-canvas-menu .profile-link a,
.right-off-canvas-menu .cw-home a {
  background: #000;
}

.right-off-canvas-menu .profile-link a {
  position: relative;
}

.right-off-canvas-menu .profile-link span {
  padding-left: 35px;
  line-height: 1.35;
}

.right-off-canvas-menu .profile-link img {
  position: absolute;
  top: 50%;
  margin-top: -12.5px;
}

.right-off-canvas-menu .cw-text {
  display: inline-block;
  vertical-align: middle;
}

.right-off-canvas-menu .cw-home .icn {
  font-size: 22px;
  vertical-align: middle;
  margin-right: 7px;
  color: #efd213;
}

.right-off-canvas-menu .user-access {
  padding: 20px;
  display: flex;
  text-align: center;
}

.right-off-canvas-menu .user-access .button {
  background-color: #2e2e2e;
  background-image: linear-gradient(#2e2e2e, #202020);
  font-size: 12px;
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
  border: solid 1px #000;
  padding: 0;
  height: 40px;
  line-height: 40px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 4px;
  width: 50%;
}

.right-off-canvas-menu .user-access .button:first-child {
  margin-right: 20px;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes open {
  0% {
    transform: translate3d(0, 0, 0);
  }

  70% {
    transform: translate3d(-240px, 0, 0);
  }

  100% {
    transform: translate3d(-240px, 0, 0);
  }
}

@keyframes close {
  0% {
    transform: translate3d(-240px, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.right-off-canvas-menu {
  transform: translate3d(0, 0, 0);
}

.off-canvas-open .right-off-canvas-menu {
  transform: translate3d(0, 0, 0);
  animation: slide 300ms ease-in-out;
}

.off-canvas-animating .right-off-canvas-menu {
  transform: translate3d(0, 0, 0);
  animation: slide 300ms ease-in-out alternate;
}

.off-canvas-closed .right-off-canvas-menu {
  display: none;
}

.right-off-canvas-menu input[type="submit"] {
  background: none;
  font-family: "Gotham SSm A", "Gotham SSm B", "Proxima-Nova-n3", "Proxima-Nova-1", "Proxima-Nova-2", "Proxima Nova", sans-serif;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 0;
  color: #fff;
}

.wrapper {
  transform: translate3d(0, 0, 0);
  z-index: 1;
}

.off-canvas-open .wrapper {
  transform: translate3d(-240px, 0, 0);
  animation: open .5s ease-in-out;
}

.off-canvas-animating .wrapper {
  transform: translate3d(0, 0, 0);
  animation: close 300ms ease-in-out;
}

.off-canvas-open {
  overflow: hidden;
}

.off-canvas-open .wrapper {
  height: 100vh;
  overflow-y: scroll;
}

.off-canvas-open .off-canvas-list {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  height: 100vh;
}

.touch .off-canvas-open .off-canvas-list {
  padding-bottom: 100px;
}

@media only screen and (min-width: 64.063em) {
  .off-canvas-open .wrapper {
    transform: translate3d(0, 0, 0);
  }

  .minimal-nav.off-canvas-open .wrapper {
    transform: translate3d(-240px, 0, 0);
  }
}

html {
  box-sizing: border-box;
}

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

.clearfix {
  zoom: 1;
}

.clearfix:before,
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
  clear: both;
}

html {
  height: 100%;
}

body {
  backface-visibility: hidden;
  min-height: 100%;
  position: relative;
}

.wrapper {
  min-height: 100%;
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  background-color: #fff;
  z-index: 10;
}

.top-bar .title-area .name a {
  line-height: 58px;
}

.top-bar .user-access .button {
  letter-spacing: 1px;
  background: none;
}

.top-bar-section {
  padding: 0;
}

.top-bar .dropdown input[type=submit] {
  font-family: "Proxima-Nova-n3", "Proxima-Nova-1", "Proxima-Nova-2", "Proxima Nova", sans-serif;
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 12px;
}

.top-bar a {
  font-family: "Proxima-Nova-n3", "Proxima-Nova-1", "Proxima-Nova-2", "Proxima Nova", sans-serif;
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 12px;
  line-height: 62px;
}

.top-bar a:hover {
  text-decoration: none;
}

.top-bar a.button {
  border: none;
}

.top-bar .mycw-nav {
  line-height: 0;
}

.right-off-canvas-menu a,
.right-off-canvas-menu input[type=submit] {
  font-family: "Proxima-Nova-n3", "Proxima-Nova-1", "Proxima-Nova-2", "Proxima Nova", sans-serif;
  font-weight: 300;
  text-align: left;
  font-size: 18px;
}

.right-off-canvas-menu .user-access .button {
  text-align: center;
  font-size: 14px;
  font-family: "Proxima-Nova-n6", "Proxima-Nova-1", "Proxima-Nova-2", "Proxima Nova", sans-serif;
  font-weight: 600;
}

.off-canvas-open .right-off-canvas-menu,
.off-canvas-close .right-off-canvas-menu {
  opacity: 1;
}

@media (min-width: 64.063em) {
  .m-no-flexbox .top-bar-section {
    display: block;
  }

  .m-no-flexbox .top-bar {
    overflow: hidden;
  }

  .m-no-flexbox .top-bar .nav-items,
  .m-no-flexbox .top-bar .mycw-nav {
    display: block;
    float: left;
  }

  .m-no-flexbox .top-bar .nav-items {
    padding-left: 50px;
    padding-right: 20px;
  }

  .m-no-flexbox .top-bar .nav-items>li {
    float: left;
    padding: 0 10px;
  }
}


/*--------------------------------------------------*    SOCIAL ICONS
\*--------------------------------------------------*/

/*! SocialCount - v0.1.5 - 2013-01-22
* https://github.com/filamentgroup/SocialCount
* Copyright (c) 2013 zachleat; Licensed MIT */

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

.socialcount {
  height: 40px;
}

@media only screen and (max-device-width: 480px),
only screen and (max-width: 480px) {
  .socialcount {
    height: auto;
  }
}

.socialcount {
  list-style: none;
  padding-left: 0;
  margin: 0 0 .6em 0;
  overflow: hidden;
}

.post.single .socialcount {
  padding: 0;
}

.socialcount>li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  position: relative;
  vertical-align: top;
  text-align: center;
  white-space: nowrap;
  line-height: 30px;
  margin-right: 6px;
}

@media only screen and (max-device-width: 480px),
only screen and (max-width: 480px) {
  .socialcount>li {
    display: block;
    margin: 0 0 10px;
  }

  .socialcount>li:last-child {
    margin-bottom: 0;
  }
}

.socialcount>li>a {
  display: block;
  position: relative;
  top: 0;
  text-decoration: none;
  font-size: 10px;
  line-height: 30px;
  padding: 2px 15px 0;
  background-color: #333232;
  border-radius: 2px;
  -webkit-transition: 0.2s all ease-in;
  -moz-transition: 0.2s all ease-in;
  transition: 0.2s all ease-in;
  z-index: 1;
  cursor: pointer;
}

.socialcount>li>a:hover {
  background-color: #484646;
}

@media only screen and (max-device-width: 480px),
only screen and (max-width: 480px) {
  .socialcount>li>a {
    padding: 5px 15px;
  }
}

.socialcount .count {
  color: #fff;
  font-family: "Proxima-Nova-n6", "Proxima-Nova-1", "Proxima-Nova-2", "Proxima Nova", sans-serif;
  font-weight: 600;
  line-height: 1em;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  *display: inline;
  zoom: 1;
  text-align: center;
  margin-left: 5px;
  letter-spacing: 1px;
}

.socialcount i {
  color: #fff;
  position: relative;
  top: 4px;
  font-size: 1.5em;
}

.SL-grey .socialcount>li>a {
  background-color: #f4f4f4;
  border: 1px solid #d7d7d7;
}

.SL-grey .socialcount>li>a:hover {
  background-color: #f9f9f9;
  border-color: #e7e7e7;
}

.SL-grey .socialcount .count {
  color: #676767;
}

.SL-grey .socialcount i {
  color: #676767;
}

.socialcount>li.hover.active a {
  /*top: 33px; padding: 0px 10px; */
  opacity: 0;
}

.socialcount .button {
  display: block;
  width: 100%;
  position: absolute;
  top: 7px;
  text-align: center;
  pointer-events: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
  margin: 0;
  padding: 0;
}

.socialcount .button iframe {
  pointer-events: auto;
  cursor: pointer;
}

.socialcount .facebook iframe {
  height: 21px;
  width: 48px;
}


/*--------------------------------------------------*    RESET
\*--------------------------------------------------*/

* {
  box-sizing: border-box;
}


/*  Gen Reset    */

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


/*  HTML5 Block  */

article,
aside,
audio,
canvas,
command,
datalist,
details,
embed,
figcaption,
figure,
footer,
header,
hgroup,
keygen,
meter,
nav,
output,
progress,
section,
source,
video {
  display: block;
}


/*  Links        */

a:hover,
a:active {
  outline: none;
}


/*  Headings    */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}


/*  Quotes      */

blockquote,
q {
  quotes: none;
}

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


/*  Help Text   */

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


/*  Code        */

pre,
code,
kbd,
samp {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: monospace, sans-serif;
}


/*  Sub/Sup     */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}


/*  Tables      */

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

td {
  vertical-align: top;
}

th {
  font-weight: bold;
}

th,
td,
caption {
  border: none;
  padding: 0;
}


/*  Forms       */

input,
select {
  vertical-align: middle;
}

select,
input,
textarea {
  vertical-align: baseline;
}

textarea {
  overflow-x: none;
}

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

label,
input[type="button"],
input[type="submit"],
input[type="image"] {
  cursor: pointer;
  width: auto;
}

label {
  vertical-align: top;
  display: block;
}


/*  Images+Media*/

img {
  max-width: 100%;
  display: inline-block;
  height: auto;
}

a img {
  border: 0;
  outline: 0;
}

audio,
canvas,
video {
  display: inline-block;
}


/*  Clearfixin' */

br.clear {
  clear: both;
  display: block;
  height: 1px;
  margin: -1px 0 0 0;
}

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

.cf:after {
  clear: both;
}


/*--------------------------------------------------*    GENERIC CLASSES
\*--------------------------------------------------*/

.always-hide {
  display: none;
}


/* .even-rag: Use this class along with an inline style for the width to even out ugly rags

BAD RAG:
Our partners are local experts and professionals with years of exceptional work and proven progress. They are our eyes, ears and
calloused hands on the ground.

GOOD RAG:
Our partners are local experts and professionals with years of exceptional work
and proven progress. They are our eyes, ears and calloused hands on the ground. */

.even-rag {
  margin-left: auto;
  margin-right: auto;
}


/*--------------------------------------------------*    CONTAINERS
\*--------------------------------------------------*/

html {
  height: 100%;
}

body,
html {
  margin: 0;
  padding: 0;
}

body {
  font-size: 125%;
  line-height: 150%;
  max-width: 64em;
  margin: 0 auto;
  background: #FAFAFA url("html-BG.gif") center repeat-y;
}

.wrapper {
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  min-height: 100%;
}

.container {
  width: auto;
  margin: 0 auto;
  padding: 0 .5em;
}


/*--------------------------------------------------*    TYPE
\*--------------------------------------------------*/

body {
  color: #333232;
  font-family: "Proxima-Nova-n3", "Proxima-Nova-1", "Proxima-Nova-2", "Proxima Nova", sans-serif;
  font-weight: 300;
}

a {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}


/*--------------------------------------------------*    BLOCKS
\*--------------------------------------------------

/* Positioning
\*-----------------------------------*/

.ir {
  display: block;
  text-indent: -999em;
  overflow: hidden;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
}

.fl-l {
  float: left;
}

.fl-r {
  float: right;
}

.overlay-test {
  position: absolute;
  top: 0;
  left: 0;
  opacity: .5;
  z-index: 1000000;
}


/* Buttons
\*-----------------------------------*/

.btn {
  display: inline-block;
  padding: .5em 1em;
  background: #333232;
  color: #fff;
  font-family: "Proxima-Nova-n6", "Proxima-Nova-1", "Proxima-Nova-2", "Proxima Nova", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  border-radius: 4px;
  text-decoration: none;
  -webkit-transition: 0.1s linear background;
  -moz-transition: 0.1s linear background;
  transition: 0.1s linear background;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  cursor: pointer;
  text-rendering: optimizeLegibility;
}

.btn:hover {
  text-decoration: none;
}

.btn.blue {
  background-color: #2e9df7;
}

.btn.blue:hover {
  background-color: #5fb4f9;
}

.btn.green {
  background-color: #59c780;
}

.btn.green:hover {
  background-color: #7fd49d;
}

.btn.orange {
  background-color: #ff902a;
}

.btn.orange:hover {
  background-color: #ffab5d;
}

.btn.purple {
  background-color: #b52572;
}

.btn.purple:hover {
  background-color: #d6378c;
}

.btn.red {
  background-color: #f5402c;
}

.btn.red:hover {
  background-color: #f76c5d;
}


/* Tooltips
\*-----------------------------------*/

[data-tooltip] {
  cursor: pointer;
}

#comment_box {
  display: none;
  width: 275px;
  z-index: 9999;
  padding: 10px 12px 10px;
  border: 1px solid #f2f1f1;
  border-radius: 4px;
  background: #fff;
  font-family: "Proxima-Nova-n3", "Proxima-Nova-1", "Proxima-Nova-2", "Proxima Nova", sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #333232;
  position: absolute;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

#comment_box .tool-title {
  color: #333232;
  font-family: "Proxima-Nova-n6", "Proxima-Nova-1", "Proxima-Nova-2", "Proxima Nova", sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  font-size: 11px;
  line-height: 16px;
  display: block;
  padding: 1px 20px;
}

#comment_box .tool-desc {
  text-align: center;
  display: block;
  color: #b3b3b3;
}

#comment_box p {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 18px;
}

#comment_box p:after {
  border: solid transparent;
  content: ' ';
  height: 0;
  bottom: -16px;
  position: absolute;
  width: 0;
  left: 50%;
  margin-left: -8px;
  border-width: 8px;
  border-top-color: #ffffff;
}

#comment_box.left p:after {
  right: auto;
  left: 58px;
}

#comment_box.dark {
  background-color: rgba(0, 0, 0, 0.8);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000);
  border: none;
}

#comment_box.dark p {
  color: #ffffff;
}

#comment_box.dark p:after {
  border-top-color: #000000;
}

.ie8 #comment_box,
.ie7 #comment_box {
  border-color: #ccc;
}


/*--------------------------------------------------*    MEDIA QUERIES
\*--------------------------------------------------*/

@media (min-width: 62.5em) {
  .container {
    max-width: 49em;
    padding-left: 0;
    padding-right: 0;
  }
}