/*
	Theme Name: Impax Theme
	Theme URI:
	Description: Customized theme for Impax websites
	Version: 1.0.0
	Author: Tony Lewis
	Author URI: http://www.exelana.com
	Tags: HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/* Robert's punch list:
   - ID Webinar not working: /invincible-divorcee-webinar/

  Sheryl's punch list:
   - Landing page unlock

  Tony's punch list:
   - Complete htimages and confirm all images are defined

  Move customizations (at end of file) to css/impax.css
*/

@charset "UTF-8";

/* By convention, all colors are defined in :root including well-established colors such as
   black, white, and red. Colors appearing in a style should be referenced using one of these
   variables. For example:
     color: var(--blue-robin);

   Keeping all colors in one place makes it easier to find the colors are in use as well as
   searching for use of a color since red might appear as 'red', '#f00', '#ff0000',
   'rgb(255,0,0)' (or something even more difficult to find: a subtle variation of red).

*/

:root
{
    --black:           #000;
    --blue:            #00f;
    --blue-robin:      #0cc;
    --canary:          #ff9;
    --gold:            #ffd700;
    --cornflower:      #6495ed;          /* Blog text */
    --gray-03:         rgba(0,0,0,0.03); /*  3% gray #f8f8f8 */
    --gray-07:         rgba(0,0,0,0.07); /*  7% gray #eeeeee */
    --gray-10:         rgba(0,0,0,0.10); /* 10% gray #e6e6e6 */
    --gray-14:         rgba(0,0,0,0.14); /* 14% gray #dcdcdc */
    --gray-19:         rgba(0,0,0,0.19); /* 19% gray #cfcfcf */
    --gray-20:         rgba(0,0,0,0.20); /* 20% gray #cccccc */
    --gray-40:         rgba(0,0,0,0.40); /* 40% gray #999999 */
    --gray-60:         rgba(0,0,0,0.60); /* 60% gray #666666 */
    --gray-84:         rgba(0,0,0,0.84); /* 84% gray #282828 */
    --mint:            #28a68c;          /* Invincible Divorcee */
    --purple:          #9f0061;          /* Invincible Divorcee */
    --red:             #f00;
    --white:           #fff;
    --yellow:          #ff0;

    --angle:           #f92723;          /* Media page: story angle */
    --body:            #333;             /* Body text */
    --bkground:        #f2f2f2;          /* Body background */
    --blog:            #3651ac;          /* Blog titles */
    --coaching-price:  #548dd4;          /* Coaching pricing */
    --coaching-promo:  #b8cce4;          /* Coaching promotion */
    --em-red:          #e60000;          /* Emphasized red text */
    --header-bg:       rgba(0,0,0,30);   /* Site header background */
    --nav-hover:       #f92723;          /* Hover over menu items */
    --input-focus:     #04a4cc;          /* Input field focus */
    --link:            #3651ac;          /* Hyperlinks */
    --media:           #c7d9e6;          /* Media page banner */
    --member-menu-bg:  #f18e39;          /* Member menu background */
 /* --member-box-bg:   #ccc;             /* Member menu box background (20% gray) */
    --menu-hover:      rgba(0,0,0,40);   /* Menu hovering */
    --menu-item-bg:    rgba(0,0,0,20);   /* Menu item background */
    --menu-item-hover: rgba(0,0,0,40);   /* Menu item hovering */
    --modality-bg:     #f2c833;          /* Home page modality table background */
    --modality-border: #0078d7;          /* Home page modality table border */
    --pricing-bg:      #61174c;          /* Join Us pricing box background */
    --pt-header-bg:    #6d8ac0;          /* Power Tapping header background */
    --rr-blue:         #020242;          /* Robert Rudelic blue; e.g., site banner */
    --select:          #3651ac;          /* Selection: text highlighted by user */
 /* --sites-sep:       #ccc;             /* Our Sites separator (20% gray) */
    --with:            #3b5f91;          /* Subtitle highlighting Robert */
}

.clear
{
    clear:   both;
    display: block;
}

img
{
    border:         0px;
    vertical-align: bottom;
}

area
{
    outline: none;
}

a
{
    color:              var(--link);
    text-decoration:    underline;
    transition:         color 0.5s; /* For modern browsers */
    -webkit-transition: color 0.5s; /* For Safari 3.0 to 6.0 */
}

a:hover
{
    background-color: var(--gray-20);
}

a:focus
{
    outline: 0;
}

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

/* TODO: What is this supposed to do? */
input:focus
{
    border:  1px solid var(--input-focus);
    outline: 0;
}

p
{
    font-family: 'Open Sans', sans-serif;
    font-size:   14px;
    font-weight: 600;
    line-height: 26px;
}

section li
{
    font-family:   'Open Sans', sans-serif;
    font-size:     14px;
    font-weight:   600;
    line-height:   20px;
    margin-bottom: 8px;
}

.center
{
    text-align: center;
}

.imgright
{
    float:              right;
    margin-bottom:      10px;
    margin-left:        15px;
}

.imgleft
{
    float:              left;
    margin-bottom:      10px;
    margin-right:       15px;
}

.font-Courgette
{
    font-family: 'Courgette', cursive;
}

/*------------------------------------*\
    $STRUCTURE
\*------------------------------------*/

.logo
{
    float: left;
    width: 50%;
    padding: 20px 0px 0px 0px;
}

.logo2
{
    padding-top: 5px;
    width: 50% padding: 20px 0px 0px 0px;
}

.impax-menu-bug
{
  display:  none;
  position: absolute;
  right:    5px;
  top:      20px;
}

.wrapper
{
    margin:   0 auto;
    position: relative;
    width:    100%;
}

header
{
    background-color:   var(--header-bg);
    border-bottom:      1px solid var(--white);
    box-shadow:         0px 4px 10px var(--gray-40);
    color:              var(--gray-40);
    height:             125px;
    margin:             0px 0px 0px 0px;
    width:              100%;
    -moz-box-shadow:    0px 4px 10px var(--gray-40);
    -webkit-box-shadow: 0px 4px 10px var(--gray-40);
}

header.no-header
{
    display: none;
}

.headerContainer
{
    margin:  0px auto;
    padding: 0px;
    width:   1100px;
}

.slogan
{
    color:       var(--white);
    color: blue;
    display:     block;
    font-family: 'Courgette', cursive;
    font-size:   30px;
    font-weight: 700;
    line-height: 40px;
    margin:      8px 0px 0px 0px;
    padding:     0px;
    text-align:  left;
}

div.footer
{
    background-color: var(--gray-20);
    margin:           0px auto;
    padding-bottom:   5px;
    width:            100%;
}

#site_footer_menu a
{
    color:           var(--white);
    font-family:     'Lato', sans-serif;
    font-size:       14px;
    font-weight:     700;
    padding:         0px 20px 0px 0px;
    text-decoration: none;
    text-transform:  uppercase;
}

#site_footer_menu a:hover
{
    color: var(--menu-hover);
}

section,
#content
{
    background-color:      var(--white);
    behavior:              url(/content/images/border-radius.htc);
    border-radius:         5px;
    box-shadow:            0px 0px 10px var(--gray-20);
    margin:                20px auto;
    max-width:             1100px;
    min-height:            600px;
    padding:               20px 40px;
    width:                 100%;
    -khtml-border-radius:  5px;
    -moz-border-radius:    5px;
    -moz-box-shadow:       0px 0px 10px var(--gray-20);
    -webkit-border-radius: 5px;
    -webkit-box-shadow:    0px 0px 10px var(--gray-20);
}

p.copyright
{
    color:       var(--white);
    font-family: 'Open Sans', sans-serif;
    font-size:   14px;
    font-weight: 400;
    text-align:  center;
}

#sidebar
{
    border-left:  1px solid var(--gray-06);
    float:        right;
    margin-left:  20px;
    padding-left: 20px;
    width:        240px;
}

span.date,
span.author,
span.comments,
span.author a,
span.comments a
{
    color:     var(--gray-60);
    font-size: 13px;
}

#sidebar h3
{
    border-bottom: 2px dotted var(--gray-20);
    color:         var(--gray-60);
    font-family:   'Open Sans', sans-serif;
    font-size:     18px;
    font-weight:   700;
    margin:        0px;
}

#sidebar ul
{
    margin-left: -20px;
}

div#comments
{
    width: 100%;
}

/*------------------------------------*\
    $PAGES
\*------------------------------------*/

.navi
{
    float:        right;
    margin-right: 40px;
/* TDL: added to fix right alignment of menus */
}

nav
{
    float:           right;
    list-style:      none;
    margin-bottom:   0px;
    margin-left:     -40px;
    margin-right:    -20px;
    text-decoration: none;
}

nav ul
{
    list-style-type: none;
}

nav ul li
{
    float:        left;
    margin-right: 0px;
    padding:      0px 0px 0px 0px;
    position:     relative;
    width:        auto;
}

nav ul a
{
    color:              var(--black);
    display:            block;
    font-family:        'Lato', sans-serif;
    font-size:          14px;
    font-weight:        700;
 /* margin:             -16px 0px 0px 0px; */
    padding:            5px 10px 0px 0px;
    text-decoration:    none;
    text-transform:     uppercase;
    transition:         all 0.5s;
    -webkit-transition: all 0.5s;
}

nav ul a:hover
{
    color:           var(--nav-hover);
    text-decoration: none;
}

nav ul li.current-menu-item a
{
    color:           var(--blue-robin);
    text-decoration: none;
}

nav ul ul
{
    background-color: var(--menu-item-bg);
    color:            var(--white);
    left:             -9999px;
    list-style:       none;
    margin:           0px 0px 0px 34px;
    padding:          10px;
    position:         absolute;
    z-index:          999;
}

nav ul ul li
{
    color:       var(--white);
    float:       none;
    padding-top: 1px;
}

nav ul ul a
{
    color:          var(--white);
    font-family:    'Lato', sans-serif;
    font-size:      15px;
    font-weight:    400;
    margin:         0px 0px 0px 0px;
    padding:        3px 6px 3px 6px;
    text-transform: capitalize;
    white-space:    nowrap;
}

nav ul li:hover ul
{
    left:            0;
    text-decoration: none;
}

nav ul li:hover a
{
    color:           var(--white);
    text-decoration: none;
}

nav ul li a:hover
{
    color:           var(--menu-hover);
    text-decoration: none;
}

nav ul li:hover ul a
{
    color:           var(--white);
    text-decoration: none;
}

nav ul li:hover ul li a:hover
{
    text-decoration: none;
}

nav ul li ul li a:hover
{
    background-color: var(--menu-item-hover);
    color:            var(--gray-03);
    margin:           0px -10px;
    padding:          3px 16px;
}

/*------------------------------------*\
    $FORM
\*------------------------------------*/

.wpcf7-form
{
    color:       var(--body);
    font-family: 'Open Sans', sans-serif;
    font-size:   14px;
    text-align:  left;
    width:       100%;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea
{
    behavior:              url(/content/images/border-radius.htc);
    border:                var(--gray-20) 1px solid;
    border-radius:         10px;
    font-family:           'Open Sans', sans-serif;
    font-size:             14px;
    padding:               4px 12px;
    width:                 100%;
    -khtml-border-radius:  10px;
    -moz-border-radius:    10px;
    -webkit-border-radius: 10px;
}

span.wpcf7-list-item
{
    display: block;
}

.wpcf7-submit
{
    background-color:   var(--black);
    border:             none;
    color:              var(--white);
    font-family:        'Open Sans', sans-serif;
    font-size:          16px;
    font-weight:        400;
    padding:            5px 20px;
    text-align:         center;
    transition:         background-color 0.5s; /* For modern browsers */
    -webkit-transition: background-color 0.5s; /* For Safari 3.0 to 6.0 */
}

.wpcf7-submit:hover
{
    background-color: var(--gray-60);
}

.contactform1 .wpcf7-form
{
    color:       var(--white);
    font-family: 'Open Sans', sans-serif;
    font-size:   14px;
    text-align:  left;
    width:       100%;
}

.contactform1 .wpcf7-form p
{
    color: var(--white);
}

.contactform1 .wpcf7-submit
{
    background-color:   var(--white);
    border:             none;
    font-family:        'Open Sans', sans-serif;
    font-size:          16px;
    font-weight:        400;
    padding:            5px 20px;
    text-align:         center;
    transition:         background-color 0.5s; /* For modern browsers */
    -webkit-transition: background-color 0.5s; /* For Safari 3.0 to 6.0 */
}

/*------------------------------------*\
    $WORDPRESS CORE
\*------------------------------------*/

.alignnone
{
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter
table.aligncenter
{
    display: block;
    margin:  5px auto 5px auto;
}

.alignright
{
    float:  right;
    margin: 5px 0 20px 20px;
}

.alignleft
{
    float:  left;
    margin: 5px 20px 20px 0;
}

.aligncenter
{
    display: block;
    margin:  5px auto 5px auto;
}

a img.alignright
{
    float:  right;
    margin: 5px 0 20px 20px;
}

a img.alignnone
{
    margin: 5px 20px 20px 0;
}

a img.alignleft
{
    float:  left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter
{
    display:      block;
    margin-left:  auto;
    margin-right: auto;
}

.wp-caption
{
    background: VAR(--WHITE);
    border:     none;
    max-width:  96%;
    padding:    5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone
{
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft
{
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright
{
    margin: 5px 0 20px 20px;
}

.wp-caption img
{
    border:  0 none;
    height:  auto;
    margin:  0;
    padding: 0;
    width:   auto;
}

.wp-caption .wp-caption-text,
.gallery-caption
{
    font-size:   12px;
    line-height: 17px;
    margin:      0;
    padding:     0 4px 5px;
}

.sticky
{

}

.bypostauthor
{

}

.shipping-calculator-form
{
    width: 230px;
}

.woocommerce-breadcrumb
{
    display: none;
}

/*------------------------------------*\
    TDL Customizations
\*------------------------------------*/
/* mimic style of the header menu in the footer */
/* Table formatting */
table.top td
{
    vertical-align: top;
}

/* Media banner */
#media-banner img
{
    height:    auto;
    max-width: 20%;
}