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

/* HTML5 DISPLAY-ROLE RESET FOR OLDER BROWSERS */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

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

/*****************/
/* BOX MODEL FIX */
/*****************/
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/*************/
/* CLEAR FIX */
/*************/
.clear {
  clear: both; }

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

.clearfix:after {
  clear: both; }

.clearfix {
  zoom: 1; }

/* CB Additions */
input[type="submit"], input[type="button"], a {
  cursor: pointer; }

input[type="text"], input[type="password"], input[type="email"], input[type="submit"], input[type="button"], textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0; }

select {
  -webkit-border-radius: 0; }

strong {
  font-weight: bold; }

em {
  font-style: italic; }

fieldset {
  min-width: 0;
  /* Allows forms to scale down properly for mobile */ }

@-moz-document url-prefix() {
  fieldset {
    display: table-cell;
    /* Allows forms to scale down properly for mobile in Firefox */ } }

/* End of CB Additions */
/*****************************************************************

BRAND COLORS


For naming conventions, enter the hex code into this website: http://chir.ag/projects/name-that-color

If a color is directly tied to another color in its usage, append it with how it's being modified. For example: 

$teal: #009482;
$teal-light: #35a08b;

*****************************************************************/
/*****************************************************************

COLOR USAGE

Take the brand color variables from above and apply them below to the common color usages

*****************************************************************/
/* PRIMARY, SECONDARY, & ACCENT COLORS **************/
/* BACKGROUND COLORS **************/
/* BORDER COLORS **************/
/* TEXT COLORS **************/
/*****************************************************************

FONTS

*****************************************************************/
/* HEADINGS **************/
.font-heading {
  /* font-family: INSERT HEADING FONT HERE; */
  font-family: 'RobotoBold'; }

/* SUBHEADINGS **************/
.font-subheading {
  /* font-family: INSERT SUBHEADING FONT HERE; */
  font-family: 'RobotoMed'; }

/* BODY COPY **************/
.font-body {
  /* font-family: INSERT BODY FONT HERE; */
  font-family: 'RobotoLt'; }

/*****************************************************************

PADDING & MARGIN

The mixins and CSS classes below for padding and margin should not be used for the Header & Footer. 

*****************************************************************/
/* PADDING & MARGIN SMALL **************/
@media (min-width: 1024px) {
  .pad-sm {
    padding: 20px; } }

@media (max-width: 1023px) {
  .pad-sm {
    padding: 20px; } }

@media (max-width: 767px) {
  .pad-sm {
    padding: 10px; } }

@media (min-width: 1024px) {
  .pad-top-sm {
    padding-top: 20px; } }

@media (max-width: 1023px) {
  .pad-top-sm {
    padding-top: 20px; } }

@media (max-width: 767px) {
  .pad-top-sm {
    padding-top: 10px; } }

@media (min-width: 1024px) {
  .margin-top-sm {
    margin-top: 20px; } }

@media (max-width: 1023px) {
  .margin-top-sm {
    margin-top: 20px; } }

@media (max-width: 767px) {
  .margin-top-sm {
    margin-top: 10px; } }

@media (min-width: 1024px) {
  .pad-right-sm {
    padding-right: 20px; } }

@media (max-width: 1023px) {
  .pad-right-sm {
    padding-right: 20px; } }

@media (max-width: 767px) {
  .pad-right-sm {
    padding-right: 10px; } }

@media (min-width: 1024px) {
  .pad-bottom-sm {
    padding-bottom: 20px; } }

@media (max-width: 1023px) {
  .pad-bottom-sm {
    padding-bottom: 20px; } }

@media (max-width: 767px) {
  .pad-bottom-sm {
    padding-bottom: 10px; } }

@media (min-width: 1024px) {
  .margin-bottom-sm {
    margin-bottom: 20px; } }

@media (max-width: 1023px) {
  .margin-bottom-sm {
    margin-bottom: 20px; } }

@media (max-width: 767px) {
  .margin-bottom-sm {
    margin-bottom: 10px; } }

@media (min-width: 1024px) {
  .pad-left-sm {
    padding-left: 20px; } }

@media (max-width: 1023px) {
  .pad-left-sm {
    padding-left: 20px; } }

@media (max-width: 767px) {
  .pad-left-sm {
    padding-left: 10px; } }

/* PADDING & MARGIN MEDIUM **************/
@media (min-width: 1024px) {
  .pad-md {
    padding: 40px; } }

@media (max-width: 1023px) {
  .pad-md {
    padding: 30px; } }

@media (max-width: 767px) {
  .pad-md {
    padding: 20px; } }

@media (min-width: 1024px) {
  .pad-top-md {
    padding-top: 40px; } }

@media (max-width: 1023px) {
  .pad-top-md {
    padding-top: 30px; } }

@media (max-width: 767px) {
  .pad-top-md {
    padding-top: 20px; } }

@media (min-width: 1024px) {
  .margin-top-md {
    margin-top: 40px; } }

@media (max-width: 1023px) {
  .margin-top-md {
    margin-top: 30px; } }

@media (max-width: 767px) {
  .margin-top-md {
    margin-top: 20px; } }

@media (min-width: 1024px) {
  .pad-right-md {
    padding-right: 40px; } }

@media (max-width: 1023px) {
  .pad-right-md {
    padding-right: 30px; } }

@media (max-width: 767px) {
  .pad-right-md {
    padding-right: 20px; } }

@media (min-width: 1024px) {
  .pad-bottom-md {
    padding-bottom: 40px; } }

@media (max-width: 1023px) {
  .pad-bottom-md {
    padding-bottom: 30px; } }

@media (max-width: 767px) {
  .pad-bottom-md {
    padding-bottom: 20px; } }

@media (min-width: 1024px) {
  .margin-bottom-md {
    margin-bottom: 40px; } }

@media (max-width: 1023px) {
  .margin-bottom-md {
    margin-bottom: 30px; } }

@media (max-width: 767px) {
  .margin-bottom-md {
    margin-bottom: 20px; } }

@media (min-width: 1024px) {
  .pad-left-md {
    padding-left: 40px; } }

@media (max-width: 1023px) {
  .pad-left-md {
    padding-left: 30px; } }

@media (max-width: 767px) {
  .pad-left-md {
    padding-left: 20px; } }

/* PADDING & MARGIN LARGE **************/
@media (min-width: 1024px) {
  .pad-lg {
    padding: 80px; } }

@media (max-width: 1023px) {
  .pad-lg {
    padding: 60px; } }

@media (max-width: 767px) {
  .pad-lg {
    padding: 40px; } }

@media (min-width: 1024px) {
  .pad-top-lg {
    padding-top: 80px; } }

@media (max-width: 1023px) {
  .pad-top-lg {
    padding-top: 60px; } }

@media (max-width: 767px) {
  .pad-top-lg {
    padding-top: 40px; } }

@media (min-width: 1024px) {
  .margin-top-lg {
    margin-top: 80px; } }

@media (max-width: 1023px) {
  .margin-top-lg {
    margin-top: 60px; } }

@media (max-width: 767px) {
  .margin-top-lg {
    margin-top: 40px; } }

@media (min-width: 1024px) {
  .pad-right-lg {
    padding-right: 80px; } }

@media (max-width: 1023px) {
  .pad-right-lg {
    padding-right: 60px; } }

@media (max-width: 767px) {
  .pad-right-lg {
    padding-right: 40px; } }

@media (min-width: 1024px) {
  .pad-bottom-lg {
    padding-bottom: 80px; } }

@media (max-width: 1023px) {
  .pad-bottom-lg {
    padding-bottom: 60px; } }

@media (max-width: 767px) {
  .pad-bottom-lg {
    padding-bottom: 40px; } }

@media (min-width: 1024px) {
  .margin-bottom-lg {
    margin-bottom: 80px; } }

@media (max-width: 1023px) {
  .margin-bottom-lg {
    margin-bottom: 60px; } }

@media (max-width: 767px) {
  .margin-bottom-lg {
    margin-bottom: 40px; } }

@media (min-width: 1024px) {
  .pad-left-lg {
    padding-left: 80px; } }

@media (max-width: 1023px) {
  .pad-left-lg {
    padding-left: 60px; } }

@media (max-width: 767px) {
  .pad-left-lg {
    padding-left: 40px; } }

/* PADDING & MARGIN EXTRA LARGE **************/
@media (min-width: 1024px) {
  .pad-xl {
    padding: 120px; } }

@media (max-width: 1023px) {
  .pad-xl {
    padding: 80px; } }

@media (max-width: 767px) {
  .pad-xl {
    padding: 60px; } }

@media (min-width: 1024px) {
  .pad-top-xl {
    padding-top: 120px; } }

@media (max-width: 1023px) {
  .pad-top-xl {
    padding-top: 80px; } }

@media (max-width: 767px) {
  .pad-top-xl {
    padding-top: 60px; } }

@media (min-width: 1024px) {
  .margin-top-xl {
    margin-top: 120px; } }

@media (max-width: 1023px) {
  .margin-top-xl {
    margin-top: 80px; } }

@media (max-width: 767px) {
  .margin-top-xl {
    margin-top: 60px; } }

@media (min-width: 1024px) {
  .pad-right-xl {
    padding-right: 120px; } }

@media (max-width: 1023px) {
  .pad-right-xl {
    padding-right: 80px; } }

@media (max-width: 767px) {
  .pad-right-xl {
    padding-right: 60px; } }

@media (min-width: 1024px) {
  .pad-bottom-xl {
    padding-bottom: 120px; } }

@media (max-width: 1023px) {
  .pad-bottom-xl {
    padding-bottom: 80px; } }

@media (max-width: 767px) {
  .pad-bottom-xl {
    padding-bottom: 60px; } }

@media (min-width: 1024px) {
  .margin-bottom-xl {
    margin-bottom: 120px; } }

@media (max-width: 1023px) {
  .margin-bottom-xl {
    margin-bottom: 80px; } }

@media (max-width: 767px) {
  .margin-bottom-xl {
    margin-bottom: 60px; } }

@media (min-width: 1024px) {
  .pad-left-xl {
    padding-left: 120px; } }

@media (max-width: 1023px) {
  .pad-left-xl {
    padding-left: 80px; } }

@media (max-width: 767px) {
  .pad-left-xl {
    padding-left: 60px; } }

/************** 

Base button styles for the front-end of the site should go here. For example:

.button (this includes css used for all buttons, plus padding and font-size for a default button)
.button-lg (this dictates the button size and would be larger than ".button", so you'd include padding and font-size)
.button-primary (this dictates the button color, so you'd include background-color, color, and possibly border)
.button-secondary (this dictates the button color, so you'd include background-color, color, and possibly border)

***************/
.hcontent a.button,
.hcontent input.button[type="submit"],
.hcontent input.button[type="button"],
a.button,
input.button[type="submit"],
input.button[type="button"],
.hcontent a.btn,
.hcontent input.btn[type="submit"],
.hcontent input.btn[type="button"],
a.btn,
input.btn[type="submit"],
input.btn[type="button"] {
  font-size: 18px;
  padding: 16px 32px;
  line-height: 1.4;
  display: inline-block;
  font-family: 'RobotoBold';
  text-decoration: none;
  border: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s; }

.hcontent a.button-primary,
.hcontent input.button-primary[type="submit"],
.hcontent input.button-primary[type="button"],
a.button-primary,
input.button-primary[type="submit"],
input.button-primary[type="button"],
.hcontent a.btn-primary,
.hcontent input.btn-primary[type="submit"],
.hcontent input.btn-primary[type="button"],
a.btn-primary,
input.btn-primary[type="submit"],
input.btn-primary[type="button"] {
  background: #6300cc;
  color: #fff; }

.hcontent a.button-primary:hover,
.hcontent input.button-primary[type="submit"]:hover,
.hcontent input.button-primary[type="button"]:hover,
a.button-primary:hover,
input.button-primary[type="submit"]:hover,
input.button-primary[type="button"]:hover,
.hcontent a.btn-primary:hover,
.hcontent input.btn-primary[type="submit"]:hover,
.hcontent input.btn-primary[type="button"]:hover,
a.btn-primary:hover,
input.btn-primary[type="submit"]:hover,
input.btn-primary[type="button"]:hover,
.hcontent a.button-primary:focus,
.hcontent input.button-primary[type="submit"]:focus,
.hcontent input.button-primary[type="button"]:focus,
a.button-primary:focus,
input.button-primary[type="submit"]:focus,
input.button-primary[type="button"]:focus,
.hcontent a.btn-primary:focus,
.hcontent input.btn-primary[type="submit"]:focus,
.hcontent input.btn-primary[type="button"]:focus,
a.btn-primary:focus,
input.btn-primary[type="submit"]:focus,
input.btn-primary[type="button"]:focus {
  background: #7902F7;
  color: #fff; }

.hcontent a.button-secondary,
.hcontent input.button-secondary[type="submit"],
.hcontent input.button-secondary[type="button"],
a.button-secondary,
input.button-secondary[type="submit"],
input.button-secondary[type="button"],
.hcontent a.btn-secondary,
.hcontent input.btn-secondary[type="submit"],
.hcontent input.btn-secondary[type="button"],
a.btn-secondary,
input.btn-secondary[type="submit"],
input.btn-secondary[type="button"] {
  background: #00d2e2;
  color: #fff; }

.hcontent a.button-secondary:hover,
.hcontent input.button-secondary[type="submit"]:hover,
.hcontent input.button-secondary[type="button"]:hover,
a.button-secondary:hover,
input.button-secondary[type="submit"]:hover,
input.button-secondary[type="button"]:hover,
.hcontent a.btn-secondary:hover,
.hcontent input.btn-secondary[type="submit"]:hover,
.hcontent input.btn-secondary[type="button"]:hover,
a.btn-secondary:hover,
input.btn-secondary[type="submit"]:hover,
input.btn-secondary[type="button"]:hover,
.hcontent a.button-secondary:focus,
.hcontent input.button-secondary[type="submit"]:focus,
.hcontent input.button-secondary[type="button"]:focus,
a.button-secondary:focus,
input.button-secondary[type="submit"]:focus,
input.button-secondary[type="button"]:focus,
.hcontent a.btn-secondary:focus,
.hcontent input.btn-secondary[type="submit"]:focus,
.hcontent input.btn-secondary[type="button"]:focus,
a.btn-secondary:focus,
input.btn-secondary[type="submit"]:focus,
input.btn-secondary[type="button"]:focus {
  background: #01e24f;
  color: #fff; }

a.button.button-sm,
input.button.button-sm[type="submit"],
input.button.button-sm[type="button"] {
  font-size: 14px;
  padding: 12px 20px; }

a.button.button-lg,
input.button.button-lg[type="submit"],
input.button.button-lg[type="button"] {
  font-size: 20px;
  padding: 20px 40px; }

/************** 

This would be for Components or UC's (User Controls) we have built in our backend. 

Standard components in here as of 3/28:

1. Thank You Page UC - Styling for the thank you page after a form has been filled out.
2. Page Banner UC - Styling for a full width banner image + H1 and subheading. 
3. CTA Banner UC - Styling for a full width banner image + H1, subheading, and CTA buttons. 

***************/
/************************************************

THANK YOU PAGE UC

************************************************/
#wrapper_thank_you {
  text-align: center;
  padding: 40px 0 80px 0; }

#wrapper_thank_you .thank-you-link {
  display: inline-block;
  width: 15%;
  margin: 0 2%; }

#wrapper_thank_you .thank-you-link h2 {
  font-size: 18px; }

#wrapper_thank_you .thank-you-link img {
  max-width: 100%;
  height: auto;
  -moz-transition: all .3s;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

#wrapper_thank_you .thank-you-link img:hover {
  opacity: .90; }

@media (max-width: 768px) {
  #wrapper_thank_you .thank-you-link {
    display: inline-block;
    width: 43%;
    margin: 0 2%; }
  #wrapper_thank_you .thank-you-link h2 {
    font-size: 21px; } }

@media (min-width: 320px) and (max-width: 480px) {
  #wrapper_thank_you .thank-you-link {
    display: inline-block;
    width: 70%;
    margin: 2% auto; }
  #wrapper_thank_you .thank-you-link h2 {
    font-size: 18px; } }

/************************************************

PAGE BANNER UC

************************************************/
.page-banner {
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  padding: 50px 0;
  position: relative; }

.page-banner .setcontainer {
  text-align: center;
  position: relative;
  z-index: 2; }

.overlay-page-banner {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.page-banner .setcontainer h1 {
  font-size: 40px;
  margin: 0 0 15px 0; }

.page-banner .setcontainer span {
  font-size: 24px; }

@media (max-width: 480px) {
  .page-banner {
    padding: 30px 0; } }

/* END OF PAGE BANNER UC */
/************************************************

CTA BANNER UC

************************************************/
.cta-banner {
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  padding: 50px 0;
  position: relative; }

.cta-banner .setcontainer {
  text-align: center;
  position: relative;
  z-index: 2; }

.overlay-cta {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.cta-banner .setcontainer h2 {
  font-size: 36px;
  margin: 0 0 15px 0; }

.cta-banner .button-wrapper a {
  display: inline-block;
  margin: 0 10px; }

@media (max-width: 480px) {
  .cta-banner {
    padding: 30px 0; }
  .cta-banner .button-wrapper a {
    display: block;
    margin: 10px 0; } }

/************************************************

FLEXIMAGE

************************************************/
/***************************

START SITE SPECIFIC CSS

***************************/
html {
  height: 100%; }

body {
  background: #fff;
  color: #6b7c92;
  text-align: center;
  /* font-family: INSERT BODY FONT HERE; */
  font-family: 'RobotoLt';
  font-size: 100%;
  height: 100%;
  line-height: 1;
  -webkit-font-size-adjust: none;
  /* FIX: iOS Mobile Safari Font Adjustment */ }

/* Reusable Container Wrapper */
.setcontainer {
  max-width: 1320px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0 auto;
  text-align: left; }

/* Anchor (Link) Settings & Focus */
:focus {
  outline: none; }

a,
a:visited,
a:active,
a:hover {
  color: #6300cc;
  text-decoration: none; }

/* Default Heading Setup - Styling for standard content sections should be done in typography.css */
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  cursor: default;
  /* font-family: INSERT HEADING FONT HERE; */
  font-family: 'RobotoBold'; }

h1 {
  font-size: 36px; }

h2 {
  font-size: 30px; }

h3 {
  font-size: 24px; }

h4 {
  font-size: 18px; }

h5 {
  font-size: 14px; }

h6 {
  font-size: 12px; }

/* Front End Form Styling */
.front-end-form .hh-required-fields {
  margin-bottom: 10px; }

.front-end-form .input-row {
  clear: left;
  display: block;
  margin-bottom: 15px;
  padding: 0 0 5px 0; }

.front-end-form label {
  display: inline-block;
  margin-bottom: 5px;
  line-height: 1.2;
  color: #6b7c92; }

.front-end-form input[type="text"],
.front-end-form input[type="password"],
.front-end-form input[type="email"],
.front-end-form select,
.front-end-form textarea,
.front-end-form:not(#wrapper-submittruck) #hhImageController {
  border: 2px solid #cdcfd2;
  font-size: 16px;
  background-color: #fff;
  padding: 15px;
  width: 100%;
  max-width: 100%;
  border-radius: 2px;
  color: #4b4f54;
  height: auto;
  /* font-family: INSERT BODY FONT HERE; */
  font-family: 'RobotoLt'; }

.front-end-form select {
  background: #fff url("/pub/design/select-dropdown-caret.png") no-repeat right 15px center;
  -webkit-background-size: 11px 15px;
  background-size: auto 7px;
  cursor: pointer;
  padding: 14px 36px 14px 15px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none; }
  .front-end-form select::-ms-expand {
    display: none; }
  .front-end-form select.select-default option[disabled],
  .front-end-form select option[disabled] {
    color: #999; }
  .front-end-form select.select-default {
    color: #999; }
    .front-end-form select.select-default option {
      color: #4b4f54; }

/*Header styling started here*/
.nav-close-icon, .mobile-nav-icon {
  display: none; }

.mobile-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
  display: none; }

header.header {
  padding: 30px 0; }
  header.header .logo-wrapper a {
    display: inline-block;
    padding: 5px 0; }
    header.header .logo-wrapper a img {
      height: 35px; }
  header.header .mobile-app-icons {
    display: none; }
  header.header .main-menu-wrapper ul {
    padding: 0;
    display: inline-block;
    margin: 0;
    vertical-align: middle; }
    header.header .main-menu-wrapper ul li {
      display: inline-block;
      list-style: none; }
  header.header .main-menu-wrapper .right-nav-bar {
    display: inline-block;
    margin-right: 15px;
    float: right; }
    header.header .main-menu-wrapper .right-nav-bar li a {
      color: #6b7c92;
      padding: 10px 15px;
      display: inline-block;
      font-size: 20px;
      /* font-family: INSERT SUBHEADING FONT HERE; */
      font-family: 'RobotoMed';
      -webkit-transition: all .3s;
      -o-transition: all .3s;
      transition: all .3s; }
      header.header .main-menu-wrapper .right-nav-bar li a:hover {
        color: #6300cc;
        text-decoration: none; }
    header.header .main-menu-wrapper .right-nav-bar .active a {
      color: #6300cc;
      background-image: url("/Pub/design/diamond-purple-icon2.png");
      background-repeat: no-repeat;
      background-position: top center;
      background-size: 10px; }
  header.header .main-menu-wrapper .right-social-wrapper {
    display: inline-block;
    padding-top: 3px;
    float: right; }
    header.header .main-menu-wrapper .right-social-wrapper li a {
      font-size: 28px;
      color: #6b7c92;
      padding: 0 10px;
      -webkit-transition: all .3s;
      -o-transition: all .3s;
      transition: all .3s; }
      header.header .main-menu-wrapper .right-social-wrapper li a:hover {
        color: #6300cc;
        text-decoration: none; }

/*Responsive started here*/
@media screen and (max-width: 767px) {
  header.header .main-menu-wrapper {
    position: fixed;
    width: 300px;
    right: -100%;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 2;
    padding: 10px 0;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s; }
  header.header .main-menu-wrapper ul li {
    width: 100%; }
  header.header .main-menu-wrapper .right-nav-bar {
    float: none; }
  header.header .main-menu-wrapper .right-nav-bar li a {
    width: 100%;
    font-size: 16px;
    padding: 10px 20px; }
  header.header .main-menu-wrapper .right-nav-bar .active a {
    background-image: none; }
  header.header .main-menu-wrapper ul.right-social-wrapper {
    padding: 0 10px;
    float: none; }
  header.header .main-menu-wrapper ul.right-social-wrapper li {
    width: auto; }
  header.header .main-menu-wrapper ul.right-social-wrapper li a {
    font-size: 26px; }
  .nav-close-icon {
    position: absolute;
    top: 10px;
    left: -30px;
    font-size: 24px;
    color: #ffffff;
    cursor: pointer;
    display: block; }
  .col.grid3-12.logo-wrapper {
    width: 100%; }
  header.header .mobile-app-icons {
    display: inline-block;
    float: right;
    margin-right: 20px; }
    header.header .mobile-app-icons a img {
      height: 30px; }
    header.header .mobile-app-icons a.iphone {
      margin-right: 25px; }
  .mobile-nav-icon {
    display: inline-block;
    padding: 13px 10px;
    float: right;
    font-size: 20px;
    cursor: pointer; }
  header.header {
    background-color: #ffffff;
    padding: 20px; } }

@media screen and (max-width: 480px) {
  header.header {
    padding: 15px 10px; } }

@media screen and (max-width: 360px) {
  header.header .main-menu-wrapper {
    width: 250px; }
  header.header .logo-wrapper a img {
    height: 25px; } }