/****************************************************************************/
/* This is the default custom CSS file that is included in every template.  */
/* It can be edited, but it cannot be renamed or deleted.                   */
/****************************************************************************/

html, body {
    margin: 0;
    padding: 0;
    color: #fff;
    overflow: hidden;
    font-family: 'Open Sans Condensed', Arial, sans-serif;
    font-weight: 300;
    font-size: 1em;
}

/* ==========================================================================
   Mobile Menu - Hubspot Standard Toggle Menu
   ========================================================================== */


/**
 * Special Note
 *
 * When the menu is open, a class of .mobile-open is applied to the body. You can 
 * use this for custom styling on any element when the menu is in the open position.                     
 */

@media (min-width: 768px) {

    a.mobile-trigger, a.child-trigger {
        display: none !important;
 /* Hide button on Desktop */
    }
}

@media (max-width: 767px) {

  /* Variables
     ========================================================================== */

  {%    set menuColorMobile = "#000000" %
}   /* Set Mobile Menu Background Color */
  {%set aColorMobile = "#ffffff" %
}      /* Set Link Color */
  {%set aColorHoverMobile = "#ffffff" %
} /* Set Link Hover Color */


  /* Menu Reset - Remove styling from desktop version of custom-menu-primary */
  /* Place any additional CSS you want removed from the mobile menu in this reset */
.custom-menu-primary, .custom-menu-primary * {
display: block;
float: none;
position: static;
top: auto;
right: auto;
left: auto;
bottom: auto;
padding: 0px;
margin: 0px;
background-image: none;
background-color: transparent;
border: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
max-width: none;
width: 100%;
height: auto;
line-height: 1;
font-weight: normal;
text-decoration: none;
text-indent: 0px;
text-align: left;
color: {{aColorMobile
}};
    }


  /* Toggle Button
     ========================================================================== */

a.mobile-trigger {
display: inline-block !important;
 /* Hide button on Desktop */
cursor: pointer;
 /* Mouse pointer type on hover */
position: absolute;
 /*******************************************/
top: 0px;
          /* Position Button at top right of screen  */
right: 10px;
        /*******************************************/
width: auto;
 /* Button width */
height: auto;
 /* Button height */
padding: 12px 10px;
background: {{ menuColorMobile
}}; /* Background color */
z-index: 99999999999; /* Z-index to keep button on top of other layers */
      -webkit-transition: background-color 0.2s linear; /* Button color transition effect */
      font-size: 16px;
      font-weight: normal;
      text-align: left;
      text-transform: uppercase;
      -webkit-border-bottom-right-radius: 6px;
      -webkit-border-bottom-left-radius: 6px;
      -moz-border-radius-bottomright: 6px;
      -moz-border-radius-bottomleft: 6px;
      border-bottom-right-radius: 6px;
      border-bottom-left-radius: 6px;
      -webkit-transition:color .2s ease-in; 
      -moz-transition:color .2s ease-in;
      transition:color .2s ease-in;
}

a.mobile-trigger:hover {
text-decoration: none;
 /* Removes link text underline on button */
color: {{ aColorHoverMobile
}};
  }

a.mobile-trigger span {
display: inline;
}

a.mobile-trigger span:before {
position: absolute;
content: 'Menu';
 /* Change the text on the closed toggle button */
}

a.mobile-trigger span:after {
position: relative;
right: 2px;
content: 'Close';
 /* Change the text on the open toggle button */
background-color: {{ menuColorMobile
}};

opacity: 0;
      transition: opacity .4s ease-in-out;
      -moz-transition: opacity .4s ease-in-out;
      -webkit-transition: opacity .4s ease-in-out;
}

  /* Change button when menu is open */
.mobile-open a.mobile-trigger {
-webkit-transition: background-color 0.2s linear;
 /* Button color transition effect */
-moz-transition: background-color 0.2s linear;
 /* Button color transition effect */
transition: background-color 0.2s linear;
 /* Button color transition effect */
background: transparent;
 /* Changes button background to be slightly darker than open menu color */
}

.mobile-open a.mobile-trigger span:after {
opacity: 1;
}


  /* Toggle Button Icon & Animations
     ========================================================================== */

a.mobile-trigger i {
display: inline;
position: relative;
top: -5px;
margin-left: 5px;
-webkit-transition-duration: 0s;
-webkit-transition-delay: .2s;
-moz-transition-duration: 0s;
-moz-transition-delay: .2s;
transition-duration: 0s;
transition-delay: .2s;
}

a.mobile-trigger  i:before, a.mobile-trigger i:after {
position: absolute;
content: '';
}

a.mobile-trigger  i, a.mobile-trigger  i:before, a.mobile-trigger  i:after {
width: 15px;
 /* Icon line width */
height: 2px;
 /* Icon line height */
background-color: {{ aColorMobile
}}; /* Icon color */
display: inline-block;
}

a.mobile-trigger  i:before {
margin-top: -6px;
 /* Position top line */
-webkit-transition-property: margin, -webkit-transform;
-webkit-transition-duration: .2s;
-webkit-transition-delay: .2s, 0;
}

a.mobile-trigger  i:after {
margin-top: 6px;
 /* Position bottom line */
-webkit-transition-property: margin, -webkit-transform;
-webkit-transition-duration: .2s;
-webkit-transition-delay: .2s, 0;
}

.mobile-open a.mobile-trigger i {
background-color: rgba(0,0,0,0.0);
-webkit-transition-delay: .2s;
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
}

.mobile-open a.mobile-trigger i:before {
margin-top: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition-delay: 0, .2s;
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
}

.mobile-open a.mobile-trigger i:after {
margin-top: 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition-delay: 0, .2s;
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
}

  /* Child Toggle Button
     ========================================================================== */

a.child-trigger {
display: block !important;
 /* Hide button on Desktop */
cursor: pointer;
 /* Mouse pointer type on hover */
position: absolute;
top: 0px;
right: 0px;
width: 55px !important;
 /* Button width */
min-width: 55px !important;
height: 45px !important;
 /* Button height */
padding: 0 !important;
border-left: 1px dotted rgba(255, 255, 255, .20);
}

a.child-trigger:hover {
text-decoration: none;
}


  /* Child Toggle Button Icon & Animations
     ========================================================================== */

a.child-trigger span {
position: relative;
top: 50%;
 /* Centers icon inside button */
margin: 0 auto !important;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
}

a.child-trigger span:after {
position: absolute;
content: '';
}

a.child-trigger span, a.child-trigger span:after {
width: 10px;
 /* Icon line width */
height: 1px;
 /* Icon line height */
background-color: {{ aColorMobile
}}; /* Icon color */
display: block;
}

a.child-trigger span:after {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
}

a.child-trigger.child-open span:after {
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
}

a.child-trigger.child-open span {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
}

    
  /* Menu Styles on Mobile Devices
     ========================================================================== */  


  /* Hide menu on mobile */
.custom-menu-primary.js-enabled .hs-menu-flow-horizontal,
  .custom-menu-primary.js-enabled .hs-menu-children-wrapper {
display: none;
}  

  /* Make child lists appear below parent items */
.custom-menu-primary ul.hs-menu-children-wrapper {
visibility: visible !important;
opacity: 1 !important;
position: static !important;
display: none;
}

  /* Mobile Menu Styles */
.custom-menu-primary.js-enabled .hs-menu-flow-horizontal {
position: absolute;
 /**************************************************************/
top: 0;
             /* Positions the menu to drop from the very top of the screen */
left: 0px;
          /**************************************************************/
width: 100%;
-webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.65);
-moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.65);
box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.65);
}

.custom-menu-primary .hs-menu-flow-horizontal {
padding: 40px 0 0 0;
 /* Padding to add room for close button */
background-color: {{ menuColorMobile
}}; /* Menu background color set off global mobile-menuColor variable */
width: 100%; /* Full screen width */
      z-index: 8888;
}

   /* Level 1 Menu List Styles */
.custom-menu-primary .hs-menu-flow-horizontal > ul > li {
position: relative;
}

.custom-menu-primary .hs-menu-flow-horizontal > ul > li a {
font-size: 22px;
 /* Font size of top level list items */
line-height: 45px;
overflow: visible;
}

  /* Level 1 and Higher Menu List Styles */
.custom-menu-primary .hs-menu-flow-horizontal ul li {
border-top: 1px dotted rgba(255, 255, 255, .35);
 /* Adds transparent dark highlights to top of top level list items */
}

.custom-menu-primary .hs-menu-flow-horizontal ul li a {
padding: 0 10px;
}

.custom-menu-primary .hs-menu-flow-horizontal ul li a:hover {
color: {{ aColorHoverMobile
}}; /* link hover color set by global mobile-aColorHover variable */
  }

  /* Level 2 and Higher Menu List Styles */
.custom-menu-primary .hs-menu-flow-horizontal > ul ul li {
background-color: rgba(255, 255, 255, .08);
}

.custom-menu-primary .hs-menu-flow-horizontal > ul ul li a {
text-indent: 10px;
 /* Indent Child lists */
font-size: 16px;
 /* Font size of child lists */
}

  /* Level 3 and Higher Menu List Styles */
.custom-menu-primary .hs-menu-flow-horizontal > ul ul ul li a {
text-indent: 30px;
 /* Indent Child lists */
}

.custom-menu-primary .hs-menu-flow-horizontal > ul ul ul ul li a {
text-indent: 50px;
 /* Indent Child lists */
}
}