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

/**
 * Description: Things used throughout.
 *
 *
 * $Colors:
 *    0. #69ac35
 *    1. #151515
 *    2. #e9e9e9  used for top border
 *    2. #959595 used on ghost form
 *    2. #bababa  used for footer link color
 *
 * $Media Queries:
 *    0. @media(max-width: 480px)
 *    1. @media(min-width: 768px) and (max-width:979px)
 *    2. @media(min-width: 979px) and (max-width:1200px)
 *
 * Check this file to reconcile against this file ::
 * https://app.hubspot.com/content/308777/template-builder/code/320389807
 */


/* ==========================================================================
   DZ Global Styles
========================================================================== */


/* Font imports */

@import url(http://fonts.googleapis.com/css?family=Merriweather:400italic,400,700,700italic);

@import url(http://fonts.googleapis.com/css?family=Raleway:700,400);

/* End Font imports */


html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

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


body {
    margin: 0;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700;
}


/* ==========================================================================
   END DZ Global Styles
========================================================================== */




/* ==========================================================================
   DZ Helper Styles
========================================================================== */

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.cf:before,
.cf:after,
.clearifx:before,
.clearfix:after {
    display: table; /* 2 */

    content: ' '; /* 1 */
}

.cf:after,
.clearfix:after {
    clear: both;
}

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


.center {
    text-align: center;
}

.fl,
.float-left {
    float: left;
}

.fr,
.float-right {
    float: right;
}

/* Font Colors */

.white {
    color: white;
}

.serif {
    font-family: 'Merriweather', sans-serif !important;
}

/* add yourself a border */
.border-top { border-top: 1px solid #e9e9e9; }
.border-bottom { border-bottom: 1px solid #e9e9e9; }

/*
 * DZ List style to be used with icon images in the list
 * <ul class="dz-list-image">
 *    <li><img> text is here </></>
 *    <li><img> text is here </></>
 *  </>
 */

.dz-list-image {
    padding-left: 12px;
    list-style-type: none;
    margin: 40px 0;
}

.dz-list-image li {
    font-weight: bold;
    margin-bottom: 30px;
    overflow: hidden;
    line-height: 1.7;
}

.dz-list-image img {
    margin: 0 25px 0 0 !important;
    float: left;
}

/* ==========================================================================
   END DZ Helper Styles
========================================================================== */


/* ==========================================================================
   DZ Objects
  ========================================================================== */

.btn {
    font-family: sans-serif;
    font-weight: bold;
    line-height: 1.5em;

    display: inline-block;

    padding: 6px 18px;

    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    color: rgb(255, 255, 255);
    border-radius: 6px;
    background-color: rgb(254,161,40);
    text-shadow: none;

    -webkit-font-smoothing: antialiased;
         -o-user-select: none;
}


/* ==========================================================================
   END DZ Objects
  ========================================================================== */




/* ==========================================================================
Layout
========================================================================== */

/**
* Must wrap each template section with this code
* This can be done by clicking the gear & down arrow to the right of the wrapping container of
* each section block in the template and then selecting "edit CSS declaration" then inserting
* the code below in the "Custom Wrapping HTML (advanced)" input
*
* <div class="dz-wrapper"><div class="dz-container cf"></div></div>
*
* Have to address issue where the row-fluid-wrapper class has a margin: 1% 2% and width: 96%
*
* @tag layout
*
* TODO: investigate if this fix works well or that we can leverage the hubspot grid better
* & get rid of hacky code below for the full width banner code...
*
*/

.dz-wrapper {
    position: relative;
    overflow: hidden; /* not used to clearfix -- use .cf or .clearfix for that */
    padding: 70px 0;
}

.dz-container {
    float: none; /* removes the existing float so we can center the content */
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 480px) {
    .dz-container {
        width: 480px;
    }
}

@media (min-width: 768px) {
    .dz-container {
        width: 768px;
    }
}

@media (min-width: 1024px) {
    .dz-container {
        width: 980px;
    }
}

@media (min-width: 1280px) {
    .dz-container {
        width: 1200px;
    }
}


/* ==========================================================================
   END Layout
  ========================================================================== */




/* ==========================================================================
  DZ header area
  ========================================================================== */

/* this is to override the header */

.header-container-wrapper {
    position: relative;
    z-index: 20;

    height: 60px !important;
    padding: 0 !important;

    background: none !important;
    background-color: #151515 !important;
    border-bottom: 1px solid #69ac35;
}


/* this is to override the logo */

.header-container .hs_cos_wrapper_type_logo {
    margin: 8px 0 0 0;
}

.hs_cos_wrapper_type_logo img {
    width: 215px !important;
    height: 31px !important;
}

/* ==========================================================================
   END DZ header area
  ========================================================================== */



/* ==========================================================================
   DZ Banner Container Styles
  ========================================================================== */

/* banner specific cta styling */

#banner-container .cta_button {
    font-size: 18px!important;

    max-width: 159px;
    margin-top: -20px;
    padding: 10px 30px;

    transition: all .2s ease-in-out 0s;

    -webkit-box-shadow: 0 3px 9px 0 rgba(50, 50, 50, .4);
       -moz-box-shadow: 0 3px 9px 0 rgba(50, 50, 50, .4);
            box-shadow: 0 3px 9px 0 rgba(50, 50, 50, .4);
}

@media (min-width: 768px) {
    #banner-container .cta_button {
        max-width: inherit;
        margin: 0;
        padding: 15px 100px;
        font-size: 24px!important;
    }
    #banner-container .cta_button .icon-download {
        background: url('//cdn2.hubspot.net/hub/308777/file-2177541135-png/images/icon_download.png') top left no-repeat;
        display: inline-block;
        padding-left: 46px;
    }
    
    .banner-content-left {
        margin-top: 0;
    }
}


@media (min-width: 1024px) {
    #banner-container .cta_button {
        font-size: 24px!important;
    }
}

/*#banner-container .cta_button span {}*/

#banner-container .cta_button:active,
#banner-container .cta_button:hover {
    color: #fff;
    border: none;
    background: none;
    background-color: #69ac35;
    /*box-shadow: none;*/
}


.widget-type-image_slider {
    overflow: hidden;
}

.widget-type-image_slider ul {
    margin: 0;
    padding: 0;

    list-style-type: none;
}


#banner-container {
    position: relative;
    z-index: 10;

    overflow: hidden;
    /*max-height: 515px;*/

    max-height: 350px;
}


@media (min-width: 768px) and (max-width: 1024px) {
    #banner-container {
        max-height: 375px;
    }
}

@media (min-width: 1024px) {
    #banner-container {
        max-height: 515px;
    }
}

#banner-container__text {
    position: absolute;
    z-index: 200;
    top: 20px;

    text-align: center;
}

@media (min-width: 768px) and (max-width: 1024px) {
    #banner-container__text {
        top: 82px;
        left: 50%;

        width: 750px;
        margin-left: -325px;
    }
    .banner-content-left {
        margin-top: 125px;
    }
}

@media (min-width: 1024px) {
    #banner-container__text {
        top: 140px;
        left: 50%;

        width: 1200px;
        margin-left: -600px;
    }
    .banner-content-left {
        margin-top: 125px;
    }
}

#banner-container__text h2 {
    font-family: 'Merriweather', sans-serif !important;
    font-size: 26px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;

    margin-bottom: 40px;

    color: #fff;
}

.banner-pre-headline {
    font-family: 'Merriweather', sans-serif !important;
    font-style: italic;
    font-size: 24px;
    font-weight: lighter;
    color: #fff;
    margin-bottom: 20px;
}

@media (min-width: 768px) and (max-width: 1024px) {
    #banner-container__text h2 {
        font-size: 40px;
        line-height: 1.2;
    }
}

@media (min-width: 1024px) {
    #banner-container__text h2 {
        font-size: 55px;
        line-height: 70px;
    }
}

@media (min-width: 768px) {
    #banner-container img {
        width: 100%!important;
    }
}

#banner-container:before {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;

    width: 2000px;
    height: 100%;
    margin-left: -1000px;

    content: '';
}

/* add the green arrow shaped bottom banner thing here */
#banner-container:after {
    /*content: '';
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    height: 100px;
    width: 2000px;
    margin-left: -1000px;
    background: url('//cdn2.hubspot.net/hub/308777/file-1852380991-png/Pinktober_2014/drips-pink.png') repeat-x center top/contain;*/
}

/* ==========================================================================
   END DZ Banner Container Styles
  ========================================================================== */





/* ==========================================================================
   Body Sections
  ========================================================================== */


.body-container-wrapper {
    padding: 20px 0;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .body-container-wrapper {
        padding: 40px 0;
    }
}

@media (min-width: 1024px) {
    .body-container-wrapper {
        padding: 75px 0;
    }
}

/* 100% width banner code
 ========================================================================== */

/*
 * this is hacky to make the banner region full width but the body section
 * constrained. Consider alternate method for doing this.
 *
 * if you are creating a full width banner page - add .full-width-banner-page
 * class to the body of the templae
 *
 * 1. need to remove the padding of the .body-container-wrapper for this
 * special layout with full width banner
 */

.full-width-banner-page .body-container-wrapper {
    padding: 0; /* 1 */
}

.full-width-banner-page .body-container-wrapper .row-number-1 {
    margin: 0 auto !important;
}

.full-width-banner-page .body-container > .row-number-1 {
    width: 100% !important;
}


@media (min-width: 768px) {
    .full-width-banner-page .container-fluid {
        max-width: 100%;
        margin: 0 auto;
    }
}


@media (min-width: 1024px) {
    .full-width-banner-page .body-container > div:nth-child(2) > div.row-fluid {
        width: 1200px;
        margin: 0 auto;
    }
}


.full-width-banner-page .body-container-wrapper .body-container > div:nth-child(2) {
    padding: 0 20px;
}

@media (min-width: 768px) {
    .full-width-banner-page .body-container-wrapper .body-container > div:nth-child(2) {
        margin: 70px auto 50px auto !important;
    }
}



/*
 * this is styled for layouts with two columns and content left
 * .full-width-banner - consider making this code less specific
 * relies on putting a class .body-content--left on the section
 */

.full-width-banner-page .body-content--left h2 {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;

    margin: 0 0 20px 0;

    text-align: center;
}

@media (min-width: 768px) {
    .full-width-banner-page .body-content--left h2 {
        font-size: 34px;

        text-align: left;
    }
}

.full-width-banner-page .body-content--left p {
    font-size: 16px;
    line-height: 1.8;
}

.full-width-banner-page .body-content--left img {
    margin: 40px 0;
}

@media (min-width: 979px) {
    .full-width-banner-page .body-content--left img {
        margin-bottom: 0;
    }
}

/* End of 100% width banner code
 ========================================================================== */

/* Ghost Form
 ========================================================================== */

#ghost-form-id {
    position: relative;
}

#ghost-form-id .hs_cos_wrapper_type_form {
    padding: 20px 20px;

    border: 2px solid #c7c7c7;
    border-radius: 0;
    background: none;
}

#ghost-form-id h3 {
    font-size: 18px;
    font-weight: 500;
    font-weight: normal;

    position: absolute;
    top: -26px;
    left: 50%;

    width: 50%;
    margin: 0;
    margin-left: -25%;
    padding: 10px;

    text-align: center;
    text-transform: uppercase;

    color: #959595 !important;
    border-radius: 0;
    background: white;
}


#ghost-form-id input[type='text'],
#ghost-form-id input[type='email'],
#ghost-form-id input[type='tel'],
#ghost-form-id textarea {
    font-size: 16px;

    padding: 10px 15px;

    border: 2px solid #c7c7c7;
    border-radius: 3px;
    box-shadow: none;
}

#ghost-form-id textarea {
    min-height: 135px;
}

#ghost-form-id .hs-form-field {
    margin-bottom: 20px;
}

#ghost-form-id .hs-button {
    font-family: sans-serif;
    font-size: 16px;

    width: 100%;
    padding: 20px 10px;

    cursor: pointer;

    color: white;
    background: none;
    background-color: rgb(254,161,40);
    box-shadow: none;
}

#ghost-form-id .hs-form fieldset{
    max-width:1000px;
}

@media (min-width: 1024px) {
    #ghost-form-id .hs-button {
        font-size: 24px;
    }
}


#ghost-form-id .hs-button:active,
#ghost-form-id .hs-button:hover {
    background-color: #69ac35;
}

/* ==========================================================================
   END Body Sections
========================================================================== */




/* ==========================================================================
   Page Specific
========================================================================== */


/* Webinar Template Specific Markup
========================================================================== */

.webinar--content__wrapper {
    margin-bottom: 40px;
}

@media (min-width: 480px) {
    .webinar--content__wrapper {
        margin-bottom: 0;
    }
}

.webinar--content__hostname-date {
    margin-bottom: 30px;

    text-align: center;

    border-bottom: 1px solid #e9e9e9;
}

@media (min-width: 480px) {
    .webinar--content__hostname-date {
        text-align: left;
    }
}

.webinar--content__hostname-date .row-number-11,
.webinar--content__hostname-date .row-number-12 {
    float: none;
}

/* elminate the float so the content middle aligns in mobile */

@media (min-width: 480px) {
    .webinar--content__hostname-date .row-number-11,
    .webinar--content__hostname-date .row-number-12 {
        float: left;
    }
}

.webinar__host-image img {
    margin: 0 40px 0 0;
}

.webinar__host-name {
    font-size: 22px;
    font-weight: 700;

    color: #151515;
}

.webinar__host-title {
    font-size: 18px;
}

.webinar__date-time--wrapper {
    margin-top: 10px;
    padding: 10px 0;
    /*border-bottom: 1px solid #e9e9e9;*/

    color: #151515;
    border-top: 1px solid #e9e9e9;
}

.webinar__host-name-date-time {
    margin-top: 20px;
}

.webinar__date {
    background: url(//cdn2.hubspot.net/hub/308777/file-2030109526-png/images/icons--webinar-date.png) no-repeat 115px center transparent;
}


.webinar__time {
    background: url(//cdn2.hubspot.net/hub/308777/file-2027606053-png/images/icons--webinar-time.png) no-repeat 115px center transparent;
}

@media (min-width: 480px) {
    .webinar__date,
    .webinar__time {
        padding-left: 30px;

        background-position: left center;
    }
}


.webinar__benefits-list li {
    margin-bottom: 20px;
}

.webinar__benefits-list li:last-child {
    margin-bottom: 0;
}


/* END Webinar Template specific styles
========================================================================== */



/* thanks you page [eBook]
========================================================================== */

/*
 * ebook dl - main offer section
 */

.ebook-download__ebook--img {
    position: relative;
    top: 40px;
    left: 20px;
}



.ebook-download__main--header h1 {
    font-size: 35px;
    line-height: 1.3;
}

/* lap */
@media (min-width: 768px) and (max-width: 1024px) {
    .ebook-download__main--header h1 {
        font-size: 45px;
    }
}

/* desk */
@media (min-width: 1024px) {
    .ebook-download__main--header h1 {
        font-size: 55px;
    }
}



.cta__back--text {
    font-size: 14px;

    display: block;

    margin: 10px 0 30px;
}


/*
 * ebook CTA button styling - this shouldn't exist - need it to use default
 * style but for now it is here
 */

.ebook--down-load {
    font-size: 24px !important;
    font-weight: 700 !important;

    margin-top: 20px;
    padding: 10px 40px !important;
}


/*
 * additional resources section - bottom of main offer
 */

.section__additional-resources {
    margin-top: 90px;
    padding-top: 50px;

    border-top: 1px solid #e9e9e9;
}

@media (min-width: 768px) {
   .section__additional-resources {
        margin-top: 40px;
        padding-top: 60px;

        border-top: 1px solid #e9e9e9;
    }
}


/*
 * each book listing block
 */
.section__additional-resources .widget-type-cell {
    margin-bottom: 50px;
}

/* remove the mobile styling */
@media (min-width: 768px) {
    .section__additional-resources .widget-type-cell {
        margin-bottom: 0;
    }
}


/*
 * each book image link
 */
.additional-resources--ebook-img  a {
    display: block;

    margin-bottom: 20px;

    text-align: center;
}



.section__additional-resources div {
    position: relative;
}

.section__additional-resources .section__header {
    line-height: 1;

    margin-bottom: 60px;

    text-align: center;
}

.section__additional-resources .section__header h2 {
    font-size: 45px !important;
}

.additional-resources--ebook-title {
    font-weight: bold;

    text-align: center;
    text-transform: capitalize;

    color: #000;
}


.additional-resources--ebook-img {
    position: relative;
    top: 0;

    max-height: 320px;

    -webkit-transition: all .4s ease;
       -moz-transition: all .4s ease;
         -o-transition: all .4s ease;
            transition: all .4s ease;
}


.additional-resources--ebook-img:hover {
    top: -5px;
}



/* eBook Extended Design (with video in the banner) * need to refactor all code above
   ========================================================================== */

/*

@media (min-width: 480px) {
}

@media (min-width: 768px) {
}

@media (min-width: 1024px) {
}

@media (min-width: 1280px) {
}

*/

/*
 * This is to overwrite code from earlier that needs to be removed once i can address
 * the templages currently using it (ebook -regular / webinar) and change the markup
 * of the form section to use the <div class="dz-wrapper"><div class="dz-container"></></>
 */

.ebook-extended-page.full-width-banner-page .body-container-wrapper .body-container > div:nth-child(2) {
    margin: 0 !important;
}



/*
 * This is to fix a style that is universal but shouldn't be and this template is picking it up
 */

.ebook-extended-page.full-width-banner-page .body-content--left img {
    margin: 0;
}


/* general / basic container layout */
.interior-banner {
    padding: 40px 0;
    background-color: #eb903f;
}

@media (min-width: 1024px) {
    .interior-banner {
        padding: 80px 0;
    }
}

/* make the image a pseduo background image */
.interior-banner--bg-image img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    min-height: 100%;
    min-width: 100%;
}

/* content */
@media (min-width: 768px) {
    .interior-banner--content {
        width: 50% !important;
        margin: 0 auto !important;
        float: none !important;
    }
}

.interior-banner--content.white h2 {
    color: #fff;
    margin-bottom: 30px;
}


/* use of !important is to override an id selector that hubspot is using!! */
.interior-banner .btn-ghost--white,
.ghost-btn-white {
    text-transform: capitalize !important;
    padding: 15px 30px 10px 30px !important;
    line-height: 30px !important;
    background-color: transparent;
    border: 1px solid #fff;
    transition: all 0.5s;
}

.interior-banner .btn-ghost--white:hover,
.ghost-btn-white:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: #69ac35 !important;
}

.interior-banner .btn-ghost--white span,
.ghost-btn-white {
    font-size: 28px !important;
    font-weight: 800 !important;
}

.interior-banner h2 {
    font-family: 'Merriweather', sans-serif !important;
    font-style: italic;
}


/* partner logos */


.partner-logos--wrapper {
    padding: 60px 0;
}

.partner-logos .hs_cos_wrapper_type_linked_image {
    text-align: center;
}



@media (min-width: 480px) {
    .partner-logos {
        margin: 0 auto !important;
        width: 97% !important;
        float: none !important;
    }
}


.partner-logos img {
    margin: 1.4%;
}

@media (min-width: 480px) {
    .partner-logos img {
        width: 79px !important;
        float: left;
    }
}

@media (min-width: 768px) {
    .partner-logos img {
        width: 125px !important;
    }
}

@media (min-width: 1024px) {
    .partner-logos img {
        width: 168px !important;
    }
}

@media (min-width: 1280px) {
    .partner-logos img {
        width: 200px !important;
    }
}


/*
 * this is a hack to remove the padding that the row-fluid-container gives to all elments
 * on the page! Have to target just this template for now so i can address other templates
 * using the same css sheet later
 */

@media (min-width: 480px) {
    .ebook-extended-page .body-container-wrapper .body-container > .row-fluid-wrapper {
        width: 100%;
        margin: 0;
    }
}


/* this is here cause it relates a little but needs to be evaluated to see... */
.ebook-extended-page .footer-container-wrapper .footer-container > .row-fluid-wrapper {
    margin: 0 auto !important;
}


/* rebuild the full width banner !!!
   ========================================================================== */


.banner-wrap .dz-wrapper {
    background-color: #eb903f;
}

.ebook-extended-page .banner-wrap h2 {
    font-family: 'Merriweather', sans-serif !important;
    font-size: 26px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.2;

    margin-bottom: 20px;

    color: #fff;
}

.banner-content-left,
.banner-content-right {
    z-index: 10;
    position: relative;
}

.banner-content-left {
    margin-bottom: 20px;
}

.banner-content-left .banner-cta .cta_button {
    background: transparent;
    border: 1px solid #fff;
    padding: 13px 51px;
    color: white;
    transition: all 0.5s;
    font-size: 28px;
    font-weight: bold;
}

.banner-content-left .banner-cta .cta_button:hover {
    background: #fff;
    color: #69ac35;
}

.banner-pre-headline {
    font-family: 'Merriweather', sans-serif !important;
    font-style: italic;
    font-size: 24px;
    font-weight: lighter;
    color: #fff;
    margin-bottom: 20px;
}



/* position the image */

.banner-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.banner-image img {
    display: none;
    top: 0;
    left: 0;
    min-height: 100%;
    min-width: 100%;
}


@media (min-width: 480px) {
    .banner-image img {
        display: block;
    }
}


@media (min-width: 768px) {
    .banner-wrap .dz-wrapper {
        padding: 90px;
    }
}


@media (min-width: 1024px) {
    .ebook-extended-page .banner-wrap h2 {
        font-size: 55px;
    }
}


@media (min-width: 1280px) {
}


/* this is page specific content for the child care layout template ebook
   ========================================================================== */

@media (min-width: 768px) {
    .ebook-ex--ebook-content--wrap #hs_cos_wrapper_module_14249682748906073 img {
        margin-top: 16%;
    }
}


/* ==========================================================================
   END Page Specific
========================================================================== */



/* ==========================================================================
   DZ footer :: custom module
   ========================================================================== */

/* @media() chanage footer contact info display
 *
 * 1. remove the margin top on large displays
 */

.dz_footer {
    margin: 20px 0 0 0;
    padding: 40px 0 0 0;

    text-align: center;

    border-top: 1px solid #e9e9e9; ;
}

@media (min-width: 768px) {
    .dz_footer {
        margin: 0; /* 1 */
    }
}



/* footer site links menu section
========================================================================== */

.footer__social-media {
    margin: 20px 0;
}

.footer__social-media a {
    margin: 0 10px 0 0;
}



/* contact information section
========================================================================== */

.footer__contact-link {
    margin-top: 20px;
}

@media (min-width: 1024px) {
    .footer__contact-link {
        margin-top: 0;
    }
}

.footer__contact-link a {
    display: block;

    padding: 5px;
}

/* @media() chanage footer contact info display
 *
 * 1. make inline-block so info moves to flow next to each other
 * 2. add padding and margin for layout and borders / dividers
 * 3. add borders to the left as dividers between content
 * 4. remove the extra padding and margins
 * 5. remove the extra borders for non mobile displays on last item
 */

@media (min-width: 768px) {
    .footer__contact-link a {
        display: inline-block; /* 1 */

        margin: 0; /* 2 */
        padding: 0 10px 0 0;

        border-top: 0; /* 3 */
        border-right: 1px solid #e9e9e7;
        border-bottom: 0;
    }

    .footer-contact-info__link:last-child {
        margin-right: 0; /* 4 */
        padding-right: 0; /* 4 */

        border: none; /* 5*/
    }
}



/* footer site links menu section
========================================================================== */

.footer-site-links {
    margin-top: 20px;
}

.footer-site-links ul {
    list-style: none;
}

.footer-site-links .menu {
    margin: 0;
    padding: 0;
}

.footer-site-links .leaf {
    display: block;

    margin: 0;
    padding: 10px;

    border-top: 1px solid #e9e9e9;
    border-right: none;
    border-left: none;
}

.footer-site-links .leaf.last {
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
}

/* @media() chanage footer menu display
 *
 * 1. make inline-block so info moves to flow next to each other
 * 2. add padding and margin for layout and borders / dividers
 * 3. add borders to the left as dividers between content
 * 4. remove the extra borders for non mobile displays on last item
 */

@media (min-width: 768px) {
    .footer-site-links .leaf {
        display: inline-block; /* 1 */

        margin: 10px 10px 10px 0; /* 2 */
        padding: 0 10px 0 0; /* 2 */

        border-top: 0; /* 3 */
        border-right: 1px solid #e9e9e7;
        border-bottom: 0;
    }

    .footer-site-links .leaf.last {
        border: none; /* 4*/
    }
}

.footer-site-links .last {
    margin-right: 0;

    border: none;
}

.footer-site-links li a {
    font-size: 14px;

    color: #bababa;
}

.footer-site-links li a:hover {
    color: #69ac32;
}



/* copyright / dz link section
========================================================================== */

/* @media() copyright section
 *
 * 1. control the width of the divider and make it reponsive
 * 2. add hr
 */

.copyright-info {
    font-size: 12px;
    line-height: 1.6;

    margin: 20px auto 0 auto;

    color: #bababa;
}


@media (min-width: 768px) {
    .copyright-info {
        max-width: 90%; /* 1 */
        padding: 40px 0 0 0;

        border-top: 1px solid #e9e9e9; /* 2 */
    }
}


.copyright-info .footer-copyright {
    margin: 0 0 20px 0;
}

/* ==========================================================================
   END DZ footer :: custom module
   ========================================================================== */