@charset "UTF-8";


/********************************************************************************************************
    
    00. WebpageFX Helper Classes

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


/********************************************************************************************************
    01. Grid System
*********************************************************************************************************/

/**********************************************
    01.01 Content wrapper

          It is important to wrap any new 
          content you may be implementing
          in a container with the class of
          "grid". This ensures padding
          applies correctly to your elements.

***********************************************/
* {
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}



/**
 * Grid wrapper
 */
.grid{
    margin-left: 0;
    list-style: none;
    margin-bottom: 0;
}


/**********************************************
    01.02 Widths

          These helper classes set percentage
          widths to any elements/content you 
          are implementing.

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

/**
* Whole
*/
.one-whole         { width: 100%; }


/**
* Halves
*/
.one-half          { width: 50%; }


/**
* Thirds
*/
.one-third         { width: 33.333%; }
.two-thirds        { width: 66.666%; }


/**
* Quarters
*/
.one-quarter       { width: 25%; }
.two-quarters      { width: 50%; }
.three-quarters    { width: 75%; }


/**
* Fifths
*/
.one-fifth         { width: 20%; }
.two-fifths        { width: 40%; }
.three-fifths      { width: 60%; }
.four-fifths       { width: 80%; }


/**
* Sixths
*/
.one-sixth         { width: 16.666%; }
.two-sixths        { width: 33.333%; }
.three-sixths      { width: 50%; }
.four-sixths       { width: 66.666%; }
.five-sixths       { width: 83.333%; }


/**
* Eighths
*/
.one-eighth        { width: 12.5%; }
.two-eighths       { width: 25%; }
.three-eighths     { width: 37.5%; }
.four-eighths      { width: 50%; }
.five-eighths      { width: 62.5%; }
.six-eighths       { width: 75%; }
.seven-eighths     { width: 87.5%; }


/**
* Tenths
*/
.one-tenth         { width: 10%; }
.two-tenths        { width: 20%; }
.three-tenths      { width: 30%; }
.four-tenths       { width: 40%; }
.five-tenths       { width: 50%; }
.six-tenths        { width: 60%; }
.seven-tenths      { width: 70%; }
.eight-tenths      { width: 80%; }
.nine-tenths       { width: 90%; }


/**
* Twelfths
*/
.one-twelfth       { width: 8.333%; }
.two-twelfths      { width: 16.666%; }
.three-twelfths    { width: 25%; }
.four-twelfths     { width: 33.333%; }
.five-twelfths     { width: 41.666% }
.six-twelfths      { width: 50%; }
.seven-twelfths    { width: 58.333%; }
.eight-twelfths    { width: 66.666%; }
.nine-twelfths     { width: 75%; }
.ten-twelfths      { width: 83.333%; }
.eleven-twelfths   { width: 91.666%; }


/********************************************************************************************************
    02. Helper Classes
*********************************************************************************************************/

/**********************************************
    02.01 Contain widths

          You probably won't need this, but
          if you're creating an element
          outside of a site's "wrapper" - 
          contain will center your content
          on the page.

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

.contain        { max-width: 1040px; margin-right: auto; margin-left: auto; padding: 0 20px; }
.contain--small { max-width: 820px;  margin-right: auto; margin-left: auto; padding: 0 20px; }


/**********************************************
    02.02 Hide or show  elements

          These classes will hide or show
          whatever element you apply it to.

***********************************************/
.hidden, 
.hidden-by-js { display: none; }
.visible      { display: block; }


/**********************************************
    02.03 Floats

          These classes will apply floats
          to any element you target.

          Floats make an element get positioned
          to the left, right, or center of
          whatever container it is within.
          Other content, such as text, will
          wrap around floated elements.

***********************************************/
.float--left    { float: left !important; }
.float--right   { float: right !important; }
.float--middle  { margin-right: auto !important; margin-left: auto !important; }  /*  Note: A .float--middle element must have a width applied to it as well  */



/**********************************************
    02.04 Clears

          These classes help "clear" elements
          that are floating. 

          For instance, if you need a text 
          block to appear below a "floated" 
          element, you need to "clear" the
          direction in which it's floating.

***********************************************/
.clear--left    { clear: left !important; }
.clear--right   { clear: right !important; }
.clear--both    { clear: both !important; }
.clear--contain { overflow: hidden !important; }


/*  Note: The .cf class is used to contain floated elements so the container receives the proper height  */

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

.cf:after{
	clear:both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}


/**********************************************
    02.05 Text alignment

          These classes help control your text
          alignment.

***********************************************/
.text--left     { text-align:left  !important; }
.text--center   { text-align:center!important; }
.text--right    { text-align:right !important; }


/**********************************************
    02.06 Font weights

          These classes help control the
          boldness of your text.

***********************************************/
.weight--light      { font-weight:300!important; }
.weight--normal     { font-weight:400!important; }
.weight--semibold   { font-weight:600!important; }
.weight--bold       { font-weight:700!important; }
.weight--extrabold  { font-weight:800!important; }


/**********************************************
    02.07 Margins

          These classes help you control the
          spacing around the outside of an
          element.

          Margin is the amount of space
          outside of an element.
          It can be applied to the 
          top, right, bottom, and left
          of elements.

***********************************************/
.push           { margin:       2em!important; }
.push--top      { margin-top:   2em!important; }
.push--right    { margin-right: 2em!important; }
.push--bottom   { margin-bottom:2em!important; }
.push--left     { margin-left:  2em!important; }
.push--ends     { margin-top:   2em!important; margin-bottom:2em!important; }
.push--sides    { margin-right: 2em!important; margin-left:  2em!important; }

.push-half          { margin:       1em!important; }
.push-half--top     { margin-top:   1em!important; }
.push-half--right   { margin-right: 1em!important; }
.push-half--bottom  { margin-bottom:1em!important; }
.push-half--left    { margin-left:  1em!important; }
.push-half--ends    { margin-top:   1em!important; margin-bottom:1em!important; }
.push-half--sides   { margin-right: 1em!important; margin-left:  1em!important; }

.flush          { margin:       0!important; }
.flush--top     { margin-top:   0!important; }
.flush--right   { margin-right: 0!important; }
.flush--bottom  { margin-bottom:0!important; }
.flush--left    { margin-left:  0!important; }
.flush--ends    { margin-top:   0!important; margin-bottom:0!important; }
.flush--sides   { margin-right: 0!important; margin-left:  0!important; }


/**********************************************
    02.08 Padding

          These classes help you control the
          spacing inside of an element.

          Padding is the amount of space
          between the edge of an element and
          the content within it.
          It can be applied to the 
          top, right, bottom, and left
          of elements.

***********************************************/
.soft           { padding:       2em!important; }
.soft--top      { padding-top:   2em!important; }
.soft--right    { padding-right: 2em!important; }
.soft--bottom   { padding-bottom:2em!important; }
.soft--left     { padding-left:  2em!important; }
.soft--ends     { padding-top:   2em!important; padding-bottom:2em!important; }
.soft--sides    { padding-right: 2em!important; padding-left:  2em!important; }

.soft-half           { padding:       1em!important; }
.soft-half--top      { padding-top:   1em!important; }
.soft-half--right    { padding-right: 1em!important; }
.soft-half--bottom   { padding-bottom:1em!important; }
.soft-half--left     { padding-left:  1em!important; }
.soft-half--ends     { padding-top:   1em!important; padding-bottom:1em!important; }
.soft-half--sides    { padding-right: 1em!important; padding-left:  1em!important; }

.hard           { padding:       0!important; }
.hard--top      { padding-top:   0!important; }
.hard--right    { padding-right: 0!important; }
.hard--bottom   { padding-bottom:0!important; }
.hard--left     { padding-left:  0!important; }
.hard--ends     { padding-top:   0!important; padding-bottom:0!important; }
.hard--sides    { padding-right: 0!important; padding-left:  0!important; }


/**********************************************
    02.09 Borders

          These classes apply a grey border
          to any element you target.

          Feel free to adjust color, width,
          and style.
          (solid, dotted, dashed, double)

***********************************************/
.border           { border:       1px solid #dfdfdf!important; }
.border--top      { border-top:   1px solid #dfdfdf!important; }
.border--right    { border-right: 1px solid #dfdfdf!important; }
.border--bottom   { border-bottom:1px solid #dfdfdf!important; }
.border--left     { border-left:  1px solid #dfdfdf!important; }
.border--ends     { border-top:   1px solid #dfdfdf!important; border-bottom:1px solid #dfdfdf!important; }
.border--sides    { border-right: 1px solid #dfdfdf!important; border-left:  1px solid #dfdfdf!important; }


/**********************************************
    02.10 Font styling

          These classes control the way
          your text renders.

          uppercase - all letters capitalized
          lowercase - all letters lowercase
          capital   - first letter of each word
                      is capitalized
          underline - underlines the text

***********************************************/
.uppercase { text-transform:  uppercase!important; }
.lowercase { text-transform:  lowercase!important; }
.capital   { text-transform: capitalize!important; }
.underline { text-decoration: underline!important; }


/**********************************************
    02.11 Display

          Sets the display style of elements

          inline -        element is "inline" with content
          block  -        element will appear on a new "line"
                          in your content
          inline-block -  element will be "inline" with content,
                          but can recieve "block" style properties,
                          such as padding

***********************************************/
.display--inline       { display:       inline!important; }
.display--block        { display:        block!important; }
.display--inline-block { display: inline-block!important; }

.display--table           { display:      table!important; }
.display--table-row       { display:  table-row!important; }
.display--table-row > div { display: table-cell!important; }


/**********************************************
    02.12 Additional helpers

          Less used, but still helpful

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

/**
 * Add a help cursor to any element that gives the user extra information on
 * `:hover`.
 */
.informative{
    cursor:help!important;
}


/**
 * Mute an object by reducing its opacity.
 */
.muted{
    opacity:0.5!important;
}


/**
 * Align items to the right where they imply progression/movement forward, e.g.:
 *
   <p class="proceed"><a href="#">Read more...</a></p>
 *
 */
.proceed{
    text-align:right!important;
}


/**
 * Add a right-angled quote to links that imply movement, e.g.:
 *
   <a href=# class=go>Read more</a>
 *
 */
.go:after{
    content:"\00A0" "\00BB"!important;
}


/**
 * Apply capital case to an element (usually a `strong`).
 */
.caps{
    text-transform:uppercase!important;
}


/**
 * Deny Mouse From selecting
 */

.unselectable {
    -o-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}


/**
 * Hide content off-screen without resorting to `display:none;`, also provide
 * breakpoint specific hidden elements.
 */
.accessibility,
.visuallyhidden{
    border:0!important;
    clip:rect(0 0 0 0)!important;
    height:1px!important;
    margin:-1px!important;
    overflow:hidden!important;
    padding:0!important;
    position: absolute!important;
    width:1px!important;
}


/********************************************************************************************************
    03. Font sizes
    Apply these classes to any elements you wish (such as buttons, paragraph text, or headlines).
    Feel free to change the values on a site-by-site basis.
*********************************************************************************************************/
.giga  { font-size: 60px !important; }
.mega  { font-size: 46px !important; }
.kilo  { font-size: 24px !important; }
.med   { font-size: 21px !important; }
.milli { font-size: 13px !important; }
.micro { font-size: 12px !important; }



/********************************************************************************************************
    04. Backgrounds
    Common background colors used for this particular site
*********************************************************************************************************/
.bg--grey   { background-color: #f0f0f0; }
.bg--coal   { background-color: #464646; }
.bg--navy   { background-color: #1d3b61; }
.bg--aqua   { background-color: #4db2e8; }
.bg--white  { background-color: #ffffff; }
.bg--orange { background-color: #ed7816; }
.bg--red    { background-color: #c4231b; }



/********************************************************************************************************
    05. Colors
    Common colors used for this particular site
*********************************************************************************************************/
.color--grey   { color: #f0f0f0 !important; }
.color--coal   { color: #464646 !important; }
.color--navy   { color: #1d3b61 !important; }
.color--aqua   { color: #4db2e8 !important; }
.color--white  { color: #ffffff !important; }
.color--orange { color: #ed7816 !important; }
.color--red    { color: #c4231b !important; }



/**************************************************************
  3. Generic Element Styles
***************************************************************/

/************************************
  Typography
*************************************/

body {  
  font-family: 'Open Sans', sans-serif; 
  color: #464646;
  font-size: 14px;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 { 
    color: #062751; 
    margin: 1em 0 .5em;
}

h1 { font-size: 39px; font-weight: 300; }
h2 { font-size: 26px; font-weight: 600; }
h3 { font-size: 26px; font-weight: 600; }
h4 { font-size: 21px; font-weight: 600; }
h5 { font-size: 18px; font-weight: 600; }
h6 { font-size: 16px; font-weight: 600; }

p  { margin-bottom: 1.5em; line-height: 1.8; }

a,
a * { 
    text-decoration: none; 
    color: #ed7816;
    cursor: pointer;
}

a:hover { color: #4db2e8; }

a img {
    display: block;
    border: 0;
}

hr { 
    border-top:     1px solid #c5c5c5;
    border-right:   0;
    border-bottom:  0;
    border-left:    0;
    clear: both;
}

address { font-style: normal; }

.intro { color: #3392c5; font-size: 19px; }

blockquote {
    background: #f3f3f3;
    padding: 1.5em 2em;
    font-size: 18px;
    font-weight: 300;
    font-style: italic;
    margin: 1.5em 0;
}

blockquote span {
    display: block;
    text-align: right;
    font-size: 15px;
    margin-top: .8em;
}


/************************************
  Lists
*************************************/
 
/**************************
    Unordered Lists
***************************/
ul { list-style: none; }

ul li {
    padding-left: 1em;
    background: url(../img/bullet.gif) no-repeat left 7px ;
    margin-bottom: 1.5em;
}

.intro li {
    background-position: left 12px;
}


/**************************
    Ordered Lists
***************************/
ol li { margin-bottom: 1.5em; }


/**************************
    Nav Lists
***************************/
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin: 0;
  padding: 0;
  list-style: none;
    background-image: none;
}


/**************************
    Definition Lists
***************************/
dl { margin: 2em 0; }

dt {
    font-weight: bold;
    font-size: 16px;
    border-bottom: 1px solid #f3f3f3;
}

dd {
    margin: .5em 0 2em 1.5em;
}


/************************************
  Tables
*************************************/
table { 
    background: white; 

    border-left:  1px solid #efefef; 
    border-right: 1px solid #efefef; 
}

tr { border-bottom: 1px solid #ededed; }
td { padding: 15px 10px; background: white; }
th { background: #1d3b61; color: white; padding: 15px 10px;}
tr:nth-child(odd) td { background: #f9f9f9; }

tfoot { background: #efefef; }



/************************************
    Buttons
*************************************/

/**************************
    Main CTA Button
***************************/
.button {
    background-color: #f6891e;
    color: white !important;
    text-transform: uppercase;
    text-align: center;

    padding: .3em 1em;

    display: inline-block;
    border-radius: 3px;

    background-image: background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.1)));
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%);
    background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%);
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%);
}

    .button:hover {
        background-color: #fa932e;
    }

    .button:active {
        background-color: #fa932e;
    }
  a.button.push--top.float--middle.display--block.kilo.beacon {
        text-transform: none;
        }

/**************************
    Secondary Button
***************************/
.button.secondary           { background-color: #1d3b61; }
.button.secondary:hover     { background-color: #274d7d; }
.button.secondary:active    { background-color: #152f4f; }


/**************************
    Tertiary Button
***************************/
.button.tertiary           { background-color: #f0f0f0; color: #464646 !important; }
.button.tertiary:hover     { background-color: #f7f6f6; color: #464646 !important; }
.button.tertiary:active    { background-color: #dcdcdc; color: #464646 !important; }



/************************************
    Form Elements
*************************************/
form div { position: relative; }

label {
    display: block;
    font-weight: 600;
}

input,
select,
textarea {
    background: #f1f1f1;
    border: 1px solid #c5c5c5;
    color: #464646;
    
    padding: 10px;
    width: 100%;
}

textarea { min-height: 150px; resize: vertical; }

input:hover,
select:hover,
textarea:hover {
    border: 1px solid #b5b5b5;
}

input:focus,
select:focus,
textarea:focus {
    border: 1px solid #1d3b61;
    background: #f8f8f8;
}

input.button,
button.button {
    border: 0;
    font-weight: 600;
    padding: 10px;
}

input.button:hover,
button.button:hover {
    border: 0;
    background-color: #fa932e;
}

input.button:focus,
button.button:focus {
    border: 0;
    background-color: #fa932e;
}

.radio,
.checkbox,
input[type="radio"],
input[type="checkbox"] {
    display: inline;
    width: auto;
    border: 0;
}

/**************************
    Error Handling
***************************/
label.error {
    position: absolute;
    top: 1em;
    right: -160px;
    width: 150px;

    font-size: 12px;
    font-weight: normal;

    color: #c4231b !important;
    padding: 0 !important;
}

input.error,
select.error,
textarea.error {
    border: 1px solid #c4231b;
}



/************************************
    Transitions
*************************************/
a, 
a *,
.sub-nav,
input,
select,
textarea,
.faq dt,
.faq dt img {
    -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
         -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}

.read-more-content {
    -webkit-transition: all .4s ease-in-out;
       -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
         -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
}



/**************************************************************
  4. GUI Styles
***************************************************************/

/************************************
    Header
*************************************/
.site__header {
    border-top: 5px solid #0e3463;
    background: white;
    padding: 20px 0;
}

.branding--phone,
.branding--phone a {
    color: #0e3463;
    font-size: 20px;
    font-weight: 700;
}

.site__top-nav {
    padding-top: 10px;
	margin:30px 0 0 0;
}

.site__top-nav li {
    float: right;
    padding: 0 13px;
}
    
    .site__top-nav li:first-child {
        padding-right: 0;
    }


.site__top-nav li:after {
    content: "|";
    color: #ed7816;
    display: inline-block;
    position: relative;
    left: 10px;
}

        .site__top-nav li:first-child:after {
            display: none;
            padding-right: 0;
        }


.site__top-nav a {
    color: #ed7816;
    padding-top: 3px;
}

    .site__top-nav a:hover {
        color: #fa932e;
    }

.site__top-nav .button {
    margin-top: -3px;
}

.branding--logo {
    padding-top: 10px;
    display: inline-block;
}

li.read-more{
  background: #f6891e;
  color: white !important;
  text-transform: uppercase;
  text-align: center;
  padding: .3em 1em;
  display: inline-block;
  border-radius: 3px;
  margin-left: -40px;
}
li.read-more a{
  color: white !important;

}

li.hide-this{
  background: #f6891e;
  color: white !important;
  text-transform: uppercase;
  text-align: center;
  padding: .3em 1em;
  display: inline-block;
  border-radius: 3px;
  margin-left: -40px;
}
li.hide-this a{
  color: white !important;
  
}
/************************************
    Main Navigation
*************************************/

.site__main-nav {
    border-top: 4px solid white;
}

.main-nav {
    background: #1e3c61;
    border-top: 4px solid #4db2e8;
    position: relative;
    margin-top: -3px;
}

.main-nav > ul {
    text-align: center;
}

.main-nav > ul > li {
    display: inline-block;
    position: relative;
}

.main-nav a {
    color: white;
    display: inline-block;
    font-weight: 600;
    padding: 20px 25px;
    text-transform: uppercase;
}

    .main-nav li:hover > a,
    .main-nav a.active {
        background: #4db2e8;
    }



/**************************
    Sub Navigation
***************************/

.sub-nav {
    position: absolute;
    background: #f0f0f0;
    min-width: 200px;

    /*
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    */
    display: none;
    border: 10px solid #4db2e8;

    border-top: 0;

    z-index: 200;
}

li:hover .sub-nav {
    /*
    opacity: 1;
    max-height: 700px;
    */
    display: block;
}

.sub-nav a {
    font-weight: 400;
    display: block;
    color: #464646;
    padding: 5px 10px;
    
    text-decoration: normal;
    text-align: left;
    text-transform: none;
}

.sub-nav li:hover > a,
.sub-nav a.active {
    color: white;
}



/**************************
    Mega Menu
***************************/
.mega-menu {
    /*min-width: 600px;*/
    padding: 0;
    min-width: 500px;
    font-size: 12px;
}

li:hover .mega-menu {
    padding: 5px 0;
}

.mega-menu li {
    text-align: left;
}

.nav-headline {
    padding: 10px 10px 5px;
    font-weight: 700;
    color: #1d3b61;
}



/************************************
    Footer
*************************************/

.page__footer { padding: 30px 0; margin-top: 100px; }
.page__footer * { color: white; font-size: 13px; }

.page__footer a:hover,
.page__footer a.active {
    color: #fe7300;
}

.footer-nav li {
    float: left;
    width: 50%;
    margin-bottom: 5px;
}

address dl { margin: 0; }

.footer--address dl > dd:first-child {
    margin-left: -6.8%;
    margin-top: 0;
}

address dt {
    float: left;
    width: 2.5%;
    border: 0;
}

address img {
    max-width: 100%;
    height: auto;
}

address dd {
    margin: 7px 0;
    width: 97%;
    padding-left: 30px;
}

.footer--social { margin: 18px 0; }

.social {
    display: block;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    margin-right: 10px;
}
    
    .social:hover {
        opacity: .8;
    }

.social img {
    display: inline-block;
    vertical-align: middle;
}

    .facebook { background: #4b6daa; padding-top: 4px; }
    .twitter  { background: #00adf2; padding-top: 3px; }
    .linkedin { background: #0086b0; padding-top: 3px; }

.footer--copyright { font-size: 13px; }

.footer--copyright li {
    display: inline-block; 
    margin-left: 10px;
}

    .footer--copyright li:first-child { margin-left: 0; }



/************************************
    Sidebar
*************************************/

/**************************
    Call Us Button
***************************/

.call-us {
    display: block;
    font-size: 16px;
    color: #ec7716;
    text-transform: uppercase;
    line-height: 1;
    padding: 1em;

    background-repeat: no-repeat;
    background-position: 90% center;
}

.call-us strong {
    color: #1d3b61;
    font-size: 42px;
    display: block;
    font-weight: 800;
}

.call-us:hover {
    background-color: white;
}

/**************************
    Live Chat Button
***************************/

.live-chat {
    display: block;
    font-size: 16px;
    color: #ec7716;
    text-transform: uppercase;
    line-height: 1;
    padding: 1em;

    background-image: url(../img/live-chat-bubbles.png);
    background-repeat: no-repeat;
    background-position: 90% center;
}

.live-chat strong {
    color: #1d3b61;
    font-size: 42px;
    display: block;
    font-weight: 800;
}

.live-chat:hover {
    background-color: white;
}

.olrk-state-compressed{
  display: none;
}

.olrk-state-compressed.olrk-state-expanded{
  display: block;
}

#habla_expanded_div, #habla_chatform_form{
  display: block !important;
}

#habla_window_div #habla_topbar_div{
  background: #4db2e8 !important;
}

/*
#habla_window_div {
    right: auto !important;
    left: 0 !important;
    position: static !important;
}
*/

#habla_window_div {
}

#habla_panel_div,
#habla_both_div {
    display: block !important; 
}

body {
    position: relative;
}

#habla_beta_container_do_not_rely_on_div_classes_or_names {
    /*
    background: red;
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    */
}
@media print {
    #habla_beta_container_do_not_rely_on_div_classes_or_names.habla-browser-iphone {
        display: block !important;
    }
}

/**************************
    Testimonials
***************************/

.testimonial,
.testimonial p {
    position: relative;
}

.testimonial {
    padding: 2em 2em 70px;
    margin-bottom: 100px;
    font-size: 13px;
    border-top: 3px solid #c5c5c5;
}

.testimonial p:first-child {
    margin-top: 0;
    text-indent: 32px;
}

.testimonial p:first-child:before {
    content: "";
    background: url(../img/quote-left.png) no-repeat center top;

    position: absolute;
    top: -6px;
    left: -10px;

    width: 32px;
    height: 25px;
}

.testimonial:after {
    content: "";
    background: url(../img/quote-right.png) no-repeat center top;

    position: absolute;
    bottom: 60px;
    right: 30px;

    width: 32px;
    height: 25px;   
}

.badge {
    position: absolute;
    bottom: -90px;
    left: 0;

    width: 100%;
    height: auto;
    text-align: center;
}


/**************************
    Rep Chat CTA
***************************/

.rep-cta {
    font-size: 24px;
    color: #1d3b61;
    font-weight: 700;
    line-height: 1.2;
}

.rep-cta strong { font-size: 32px; }


/**************************
    Certificate CTA
***************************/

.certificate-cta {
    font-size: #1d3b61;
    font-size: 20px;
    line-height: 1.2;
}

.certificate-cta strong {
    font-size: 31px;
    display: block;
}

.certificate-cta span {
    font-size: 35px;
    font-weight: 600;
    color: #1d3b61;
}

.certificate-cta span strong {
    display: inline;
    font-size: 40px;
    font-weight: 800;
    color: #1d3b61;
}

.certificate-cta:hover,
.certificate-cta:hover * {
    color: #4db2e8;
}


/**************************
    Registered Offices
***************************/

.sidebar-address dt { width: 5%; }
.sidebar-address dd { width: 95%; padding-left: 35px; font-size: 14px; }


/**************************************************************
  5. Homepage Styles
***************************************************************/

/************************************
    Hero
*************************************/

.homepage__hero {
    border-bottom: 4px solid #f2f2f2;
    overflow: hidden;
}

.homepage__hero .contain {
    padding:  130px 0 200px;
    background: url(../img/homepage-header-bg.jpg) no-repeat right 10px;
}

.homepage__hero h1 { 
    font-size: 39px;
    font-weight: 400;
    line-height: 1;
    margin: 0;
    padding-left: 20px;
    text-transform: uppercase;
	float:left;
}

.royalSlider .slide-with-text h1 {
    margin-top: 20px;
}

.royalSlider .slide-with-text p {
    float: left;
    clear: both;
    font-size: 12px;
    color: #062751;
    width: 50%;
    padding-left: 20px;
}

.homepage__hero h1,
.homepage__hero h1 span {
    color: #1E3C61;
}

.slider-small {
    display: block;
}

.margin-bottom{
  margin-bottom: 0px;
}

h1.slide-three {
  text-transform: none;
}

span.code{
  color: red;
  font-weight: 700;

}

a.button.slide-button {
position: absolute;
top: 3%;
margin-left: 33%;
}

/************************************
    Homepage CTA Section
*************************************/

.homepage__cta { 
    margin-top: -85px; 
    position: relative;

    z-index: 100;
}

.cta-block { 
    border-left: 1px solid white; 
    position: relative;
    height: 200px;
    display: block;
    text-align: center;
    overflow: hidden;
}

    .cta-block:first-child { border: 0; }

.cta-block * {
    color: white;
}

.cta-block img {
    position: absolute;
}

.cta-block .aqua-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(77,178,232,.8);

    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    -webkit-transition: all .5s cubic-bezier(0.850, 0, 0.360, 1); /* older webkit */
    -webkit-transition: all .5s cubic-bezier(0.850, -0.430, 0.360, 1.475);
       -moz-transition: all .5s cubic-bezier(0.850, -0.430, 0.360, 1.475);
         -o-transition: all .5s cubic-bezier(0.850, -0.430, 0.360, 1.475);
            transition: all .5s cubic-bezier(0.850, -0.430, 0.360, 1.475); /* custom */
}

.cta-block span {
    position: absolute;
    top: 42%;
    width: 100%;

    left: 0;
}

.cta-block strong {
    display: block;
}

    .cta-block:hover div {
        width: 93%;
        height: 40%;
        border: 1px solid white;
        border-radius: 1px;
    }

    .cta-block:hover .bw {
        opacity: 0;
    }

/************************************
    Homepage Orange Callout Boxe Styles
*************************************/

.orange-callout {
    background-color: #ed7916;
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.orange-callout p {
    color: #FFF;
    font-size: 16px;
    margin: 0 0 12px 0;
}

.orange-callout a.btn {
    display: inline-block;
    color: #FFF;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 12px;
    text-transform: uppercase;
    border: 2px solid #FFF;
    font-weight: 700;
    transition: 0.2s all;
    cursor: pointer;
}

.orange-callout a.btn:hover {
    background-color: #FFF;
    color: #ed7916;
} 

/**************************************************************
  6. Innerpage Styles
***************************************************************/

.innerpage__header { 
    position: relative;
    border-top: 1px solid #f5f5f5;
}

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

.innerpage__header h1 {
    color: white;
    font-weight: 300;
    padding: 20px;
    margin: 0;

    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(29,59,97,.75);
}

.large-text {
    font-size: 19px;
    line-height: 1.4;
}

.read-more-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.read-more-content.shown {
    max-height: 4000px;
    opacity: 1;
}

.hidden-cg-text{
  display: none;
}


/************************************
    Contact Form Styles
*************************************/

.contact-form label {
    color: #1d3b61;
    padding-top: 10px;
}

.radio-buttons label { display: inline; margin-right: 20px;}


/************************************
    FAQ Page Styles
*************************************/
.faq dt {
    cursor: pointer;
    padding-top: 20px;
}

.faq dt img {
    position:relative;
    top: 4px;
    opacity: .2;
}

.faq dt:hover,
.faq dt.shown {
    color: #1e3c62;   
}

.faq dt:hover img {
    opacity: .5;
}

.faq dt.shown img {
    opacity: 1;

    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.faq dd {
    display: none;
    margin-top: 0;
    margin-bottom: 0;
}


/************************************
    Resources Page Styles
*************************************/
.resources-list img { 
    max-width: 100%; 
    height: auto; 
}

.resources-list .display--table-row > div { 
    vertical-align: middle; 
    border-bottom: 1px solid #efefef; 
}


/************************************
    Sitemap Styles
*************************************/
.sitemap li {
    margin-bottom: .5em;
    font-size: 16px;
    background: none;
    padding: 0;
}

.sitemap li ul {
    margin-top: 0;
}

.sitemap li li {
    font-size: 13px;
}

.sitemap a { color: #1d3b61; }
.sitemap a:hover { color: #4db2e8; }

.sitemap .parent-title {
    font-size: 15px;
    border-bottom: 1px solid #c5c5c5;
    padding-top: 20px;
}