body { 
    font-family: "BaskervilleMTW02-Roman"; 
    color: #666;
    margin:0; 
    background-color:#eeeeee; 
}

.ng-cloak { display:none !important; }

.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }


/* Global Layout */
.pagewrapper { max-width:1280px; margin:0 auto; -webkit-transition: margin .3s; transition: margin .3s; background-color:#fff; }
.pagemain { display:table; table-layout: fixed; width:100%; background-color:#fff; }
.pagecontent { display:table-cell; vertical-align:top; width:100%; }


/* Header */
.pageheader { 
    font-family: "Avenir LT W02 35 Light";
    display:block;
    position:relative;
    height:300px; 
}

.header-content { 
    position:absolute;
    width:100%;
    height:100%;
    background:url(/shared/fpo/header.jpg) #ccc no-repeat; background-size:cover;
    background-position:center center;
	-webkit-box-shadow: inset 0 0 40px rgba(0,0,0,.9);
	-moz-box-shadow: inset 0 0 40px rgba(0,0,0,.9);
	box-shadow: inset 0 0 40px rgba(0,0,0,.9);
}

#headerOverlay {
    background-color: rgba(0, 0, 0, .5);
    content: " ";
    position: absolute;
    z-index:1;
    top: 0; left: 0; right: 0; bottom: 0;
    /* opacity: 0; */
    display:none;
    /* -webkit-transition: opacity .4s .1s; */
    /* transition: opacity .4s .1s; */
}
.active .header-content:after {
    opacity: 1;
    /* -webkit-transition-delay: 0; */
    /* transition-delay: 0; */
}

.pageheader .logo  { text-indent:-999em; background:url(/shared/header/young-living.png) no-repeat; outline:none; position: absolute; top:25px; left:40px; width:260px; height:80px; z-index:2; border-bottom:0px; background-size:contain; }


/* HEADER MENU BUTTON */
.header-menu-button {
    color: #fff;
    -webkit-appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    text-align: left;
    text-decoration: none;
    width: 82px;
    height: 40px;
    background: url(http://www.youngliving.com/shared/header/icon-menu.png) 16px center no-repeat;
    font-weight: normal;
    padding-left: 32px;
    position: absolute;
    left: 0;
    display: none;
    -webkit-transition: left 0.3s;
    transition: left 0.3s;
    line-height:40px;
    font-size:14px;
    font-family: "Avenir LT W02 85 Heavy";
    outline: none;
}
.header-menu-button .icon-menu { display: inline-block; margin-right: 8px; vertical-align: top; }
/*.header-toolbar-div { position:absolute; left:0; display:none; height:100%; width:1px; background:#404040; }*/

/* HEADER TOOLBAR */
.header-toolbar { position:absolute; top:15px; left:0px; right:0px; height:40px; z-index:110; }
.header-toolbar-items { height: 40px; float:right; margin-right:20px; }
.header-toolbar-item { border-left: 1px solid rgba(255, 255, 255, .4); float: left; font-size:12px; height:24px; margin:8px 0; position: relative; padding: 0 10px; text-align: left; z-index:2; cursor:pointer; }
.header-toolbar-item a:hover { border-bottom: none; } /* SS Added */
.header-toolbar-item:first-child { border-left: 0; }
.header-toolbar-icon { display: inline-block; height: 16px; width: 16px; line-height: 16px; vertical-align:middle; background:url(/shared/header/icon-sprites.png) no-repeat; margin-right:4px; }
.header-toolbar-icon-email { background-position:-16px 0; margin-right:5px;  }
.header-toolbar-icon-cart { background-position:-32px 0; }
.header-toolbar-notification a { display:block; padding:2px 0; color:#fff; text-decoration:none; }
.header-toolbar-badge-blue, .header-toolbar-badge-green { display:inline-block; color:#fff; line-height:16px; border: 2px solid #fff; -webkit-border-radius:100px; border-radius:100px; font-family: "Avenir LT W02 85 Heavy"; font-size: 10px; padding: 0px 6px; }
.header-toolbar-badge-blue { background-color: #03cbe5; }
.header-toolbar-badge-green { background-color: #a0ba6f; }



/* Header Locale Selector */
.header-locale-button { display:block; font-size:14px; font-weight:normal; color:#fff; margin:0; width:80px; box-sizing:border-box; padding:2px 0px 2px 8px; vertical-align:top; line-height:20px; cursor:pointer; background:rgba(0,0,0,0.6); text-decoration:none; /*border:2px solid #666; -webkit-border-radius:2px; border-radius:2px;*/ }
.header-locale-button:hover { color: #fff;} /* SS Added */
.header-locale-button:after { content:" "; display:inline-block; background:url(/shared/header/drop-arrow.png) no-repeat; margin:0; height:20px; width:20px; vertical-align:top; background-position:center center; }
.header-locale-button:before, .header-locale-option:before { content: " "; display:inline-block; background:url(/shared/header/flag-sprites.png) no-repeat; margin: 0 4px 0 2px; height: 16px; width:20px; vertical-align:top; }
.header-locale-option:before { margin: -3px 4px 0 0; }
.header-toolbar-locale .flag-us:before { background-position: 0 -20px; }
.header-toolbar-locale .flag-ca:before { background-position: 0 -40px; }

.header-locale-menu { position:absolute; width:80px; top:24px; left:10px; background-color:rgba(0,0,0,0.8); list-style-type: none; margin:0; padding:8px 0px 5px 0px; display:none; opacity:0; overflow:hidden; -webkit-transition: opacity .3s; transition: opacity .3s; }
.header-locale-menu a, .header-user-menu a { color: #fff; display: block; padding:0; text-decoration: none; -webkit-transition: background .2s; transition: background .2s; padding: 4px 0 4px 10px; font-size:14px; line-height:14px; }
.header-locale-menu a:hover, .header-locale-menu a:focus, .header-user-menu a:hover, .header-user-menu a:focus { background-color: rgba(255, 255, 255, .5); color: #fff; } /* SS Added color */

.header-toolbar-locale.active .header-locale-menu { -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .4); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); display:block; opacity:1; }
.header-toolbar-locale.active .header-locale-button { background:rgba(0,0,0,0.8); }


/* Header Link */
.header-toolbar-signup a { display:inline-block; vertical-align:middle; color:#fff; line-height:24px; font-size:14px; text-decoration:none; }
.header-toolbar-signup a:hover { text-decoration:underline; color:#fff; }

.header-toolbar-signin a { display:inline-block; vertical-align:middle; color:#fff; line-height:24px; font-size:14px; text-decoration:none; }
.header-toolbar-signin a:hover { text-decoration:underline; color:#fff; }


/* User Menu */
.header-user-button { display:block; padding:2px 0 2px 2px; cursor:pointer; }
.header-user-button:after { content:" "; display:inline-block; background:url(http://www.youngliving.com/shared/header/drop-arrow.png) no-repeat; margin:0; height:20px; width:20px; vertical-align:top; background-position:center center; }

.header-user-avatar { display:inline-block; width:20px; height:20px; margin-right:3px; vertical-align:middle; background:#666; }
.header-user-avatar img { display:block; width:20px; height:20px; }
.header-user-name { display:inline-block; vertical-align:middle; color:#fff; line-height:20px; font-size:14px; }
.header-user-menu a { padding-left:28px; }

.header-user-menu {
	background-color:rgba(0,0,0,0.8); display:none; overflow:hidden; padding:8px 0 8px 0; /*-webkit-transition: opacity .3s; transition: opacity .3s;*/
	/* For IE 8, Added by Jacob*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
.header-toolbar-user.active .header-user-menu {
	-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .4); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); display:block;
}
.header-toolbar-user.active .header-user-button {
	background-color:rgba(0,0,0,0.8);
	/* For IE 8, Added by Jacob*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}



/* MAIN NAVIGATION */
/* Dropdown menus */
.nav-main > ul,
.nav-menu { list-style-type: none; margin: 0; padding: 0; }
.nav-main-outer { position:absolute; right:32px; top:68px; z-index:109; }
.nav-main { -webkit-box-sizing: border-box; box-sizing: border-box; padding:0;  }
.nav-main-top a { color: #fff; font-family: "Avenir LT W02 85 Heavy"; font-size: 18px; font-weight: bold; padding:0; text-decoration: none; text-shadow: 1px 2px 7px rgba(0, 0, 0, .5); }
.nav-main a:hover,
.nav-main a:focus { color: #b0c778; border-bottom: none; } /* SS Added Border Bottom */
.nav-main-top:hover > a, .nav-main-top:focus > a { padding-bottom:8px; border-bottom: 1px solid #fff; color: #b0c778; }
.nav-menu a { display: inline-block; font-family: "Avenir LT W02 35 Light"; font-size: 16px; font-weight: normal; padding-top: 2px; white-space: nowrap; }
.nav-main-top { display: inline-block; position: relative; margin-left: 18px; }
.nav-main-top:first-child { margin-left: 0; }
.nav-menu { 
    opacity: 0;
    /* display:none; */
    max-height: 0; min-width: 160px; 
    overflow: hidden; /* This is required for IE8 */
    padding-top:14px; position: absolute; top:100%; left: 0; -webkit-transition: opacity .3s; transition: opacity .3s; 
}
.nav-menu li { display: block; margin-left: 0; }
.last .nav-menu { left: auto; right: 0; text-align: right; }

/* Hover */
.active > .nav-menu { opacity: 1; max-height: 600px; }

.channel-toolbar-links-1 { }
.channel-toolbar-links-2 { margin-bottom:10px; display:none; }
.channel-toolbar-link a { margin-bottom:5px; color:#fff; }


/* SLIM HEADER */
.header-slim .pageheader { height: 140px; }
.header-slim .header-toolbar, .header-slim .nav-main-outer, .header-slim .breadcrumb-bar { display: none; }
.header-slim .pagebanner { padding: 30px 40px; }
.header-slim .pagebanner h1 { font-size: 50px; }


/* Breadcrumbs */
.breadcrumb-bar {
    color: #fff;
    font-size: 14px;
	display: block;
	position: absolute;
	bottom: 0;
	min-height: 30px;
	width: 100%;
	background: #000;
	background: rgba(0,0,0,.5);
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.breadcrumb-bar .sep {
    display: inline-block;
    margin: 0 4px;
}
.breadcrumb-bar a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    margin-top: 6px;
}
.breadcrumb-bar a:hover,
.breadcrumb-bar a:focus,
.breadcrumb-bar .active {
    color: #b0c778;
    border-bottom: none; display:inline-block; /* SS Added */
}
.breadcrumb-bar .active {
    font-weight: bold;
}


/* Footer */
.pagefooter { background: #b0c778 url(http://www.youngliving.com/global/img/common/footer/footer-bg.jpg) left bottom no-repeat; color: #fff; font-size: 1.3em; padding-bottom: 30px; font-family:'Avenir LT W02 35 Light'; }
.pagefooter a { color: #fff; text-decoration: none; }
.pagefooter ul { list-style-type: none; margin: 0; padding: 0; }
.pagefooter h3 { margin: 0; padding: 0; color:#fff; font-size:30px; }

.pagefooter-content { margin: 0 auto; padding: 0 20px; max-width: 940px; min-height: 380px; position: relative; }
.pagefooter-cols:after { content: " "; clear: both; display: table; }
.pagefooter-col1,
.pagefooter-col2 { -webkit-box-sizing: border-box; box-sizing: border-box; float: left; width: 45%; }

.pagefooter-col1 .pagefooter-links { margin-right: 20px; margin-top: 36px; }
.pagefooter-col1 .pagefooter-links a { display: block; border-bottom: 1px dotted rgba(255, 255, 255, .8); padding: 4px 0; }

.pagefooter-col2 { background-color: rgba(255, 255, 255, .1); padding: 40px; width: 55%; }
.pagefooter-col2 h3 { border-bottom: 1px solid rgba(255, 255, 255, .6); margin-bottom: 4px; padding-bottom: 8px;}
.pagefooter-col2 .pagefooter-contact-info { border-top: 1px solid rgba(255, 255, 255, .6); font-size: .8em; padding-top: 12px; }
.pagefooter-col2 .pagefooter-contact-info li { margin-top: 6px; }
.pagefooter-col2 .pagefooter-contact-info li:first-child { margin-top: 0; }
.pagefooter-col2 .pagefooter-label,
.pagefooter-col2 .pagefooter-label-data { display:table-cell; }
.pagefooter-col2 .pagefooter-label { padding-right: 8px; text-align: right; width: 170px; }
.pagefooter-col2 .pagefooter-label-data { font-family:'Baskerville MT W02 SmBd'; }
.pagefooter-col2 .pagefooter-label-data a { border-bottom: 1px dotted #fff; display: inline-block; margin-bottom: 6px; }

.pagefooter-copy { clear: both; font-size: .6em; position: absolute; bottom: -35px; text-align: center; width: 100%; }

.pagefooter .pagefooter-social-links { margin-top: 12px; overflow:hidden; }
.pagefooter-social-links li { display: inline-block; margin-left:0; }
.pagefooter-social-links li:first-child { margin-left: 0; }

/* swiched back to PNG sprites
let's use the existing icons and style already in place on live site for footer social icons
.pagefooter-social-links .ico { color: #dceeaf; font-size: 2.2em; text-shadow: 0 0 12px rgba(0, 0, 0, .05); }
.pagefooter-social-links .ico:hover,
.pagefooter-social-links .ico:focus { color: #fff; }
*/

.pagefooter-social-links a { display:block; text-indent:-999em; background-image:url(http://www.youngliving.com/shared/footer/social-sprites.png); background-repeat:no-repeat; width:48px; height:48px; opacity:0.7; outline:none; }
.pagefooter-social-links a:hover { opacity:1.0 }
.pagefooter-social-links a:hover { border: none; }
.footericon-facebook { background-position: 0 -50px; }
.footericon-twitter { background-position: 0 -100px; }
.footericon-linkedin { background-position: 0 -150px; }
.footericon-youtube { background-position: 0 -200px; }
.footericon-feed { background-position: 0 -250px; }


/* Left Channel Navigation */
.leftnav { display:table-cell; vertical-align:top; width:240px; padding-top:30px; background-color:#e2f8f9; }

/* 
 Need to discuss changing layout to float instead of table.. currently this is breaking the site.
.leftnav { float: left; width:25%; padding-top:30px; background-color:#e2f8f9; }
*/


ul.leftnav-1 { margin:0 0 30px 20px; padding:0; list-style:none; width:220px; box-sizing:border-box; }

ul.leftnav-1 > li { list-style:none; margin:0; padding:0; border-top:1px solid #d4e1e2;  display:block; }
ul.leftnav-1 > li:first-child { border-top:1px solid #a7bf69; }
ul.leftnav-1 > li:last-child { border-bottom:1px solid #a7bf69; }
ul.leftnav-1 > li > a { display:block; font-family:"Avenir LT W02 85 Heavy"; font-weight:normal; font-size:20px; line-height:20px; color:#797979; text-decoration:none; padding:13px 5px 12px 0px; }
ul.leftnav-1 > li > a { border-bottom: none; } /* SS Added */
ul.leftnav-1 > li > a:hover { color:#b0c778; }
ul.leftnav-1 > li.leftnav-active > a { color:#b0c778; }
ul.leftnav-1 > li.leftnav-open > a { padding-bottom:5px; }

ul.leftnav-2 { margin:0 0 20px 0px; padding:0; list-style:none; width:220px; box-sizing:border-box; display:none; }
ul.leftnav-1 > li.leftnav-open ul.leftnav-2 { display:block; }
ul.leftnav-2 > li { list-style:none; margin:0; padding:0; display:block; position:relative; }
ul.leftnav-2 > li a { display:block; font-family:"Avenir LT W02 35 Light"; font-weight:normal; font-size:16px; line-height:22px; color:#00c6d2; text-decoration:none; padding:0px 5px 0px 0px; }
ul.leftnav-2 > li a { color:#00c6d2; border-bottom: none; } /* SS Added */
ul.leftnav-2 > li a:hover { color:#797979; }
ul.leftnav-2 > li.leftnav-active > a { color:#797979; }
ul.leftnav-2 > li a:hover:before, ul.leftnav-2 > li.leftnav-active a:before { content:" "; display:block; position:absolute; left:-12px; top:6px; width:8px; height:10px; background:url(/shared/leftnav/arrow.png) no-repeat; }


/* Banner Area */
.pagebanner { display:block; padding:40px; background-color:#f6f6f6; }
.pagebanner .headline { display:block; }
.pagebanner h1 { font-family: "Avenir LT W02 35 Light"; margin:0; padding:0; line-height:normal; font-size:70px; font-weight:normal; color:#839D57; }

.header-toolbar { -webkit-transition:left 0.3s; transition:left 0.3s; } 

/* Responsive Styles */

@media (max-width: 1110px) { /* Changed from 979 due to too many top menus */
    .header-locale-menu { left:2px; }
    .header-locale-button { width:auto; }

    .pagebanner { padding:30px; }
    .pagebanner h1 { font-size: 60px; }
    .header-toolbar { background-color:#000; width:100%; position:fixed; top:0; right:0; }
    .pageheader { height:280px; }
    .pageheader .logo  { top:25px; }
    .header-content { top:40px; height:240px; }
    
    .leftnav { display:none; }
    /* .pagecontent { float: none; width: auto; }  - TODO: Discuss float; */

    .channel-toolbar-links-2 { display:block; }

    .pagewrapper { margin:0; }
    .header-locale-button { border:0; padding:2px 0px 2px 0px; }

    .pageoverlay { background:rgba(0, 0, 0, .5); width:0; height:0; opacity: 0; position:fixed; left:0; top:0; z-index:100; -webkit-transition: opacity .3s, height .3s 0, width .3s 0; transition: opacity .3s, height 0 .3s, width 0 .3s; }
    .navopen .pageoverlay { width:100%; height:100%; opacity: 1; -webkit-transition: opacity .3s; transition: opacity .3s; }

    /* Sidebar menu */
    .header-menu-button { display:block; }
    .header-user-button { display: inline-block; }

    .nav-main-outer {
        width: 270px;
        background: #303132 url(/shared/header/nav-linen.jpg) repeat-y top right;
        position: fixed;
        height: 100%;
        left:-270px;
        right:auto;
        top:0; 
        -webkit-transition: left 0.3s; transition: left 0.3s;
        -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,.6); -moz-box-shadow: inset 0 0 20px rgba(0,0,0,.6); box-shadow: inset 0 0 20px rgba(0,0,0,.6);
    }

    .nav-main {
        -webkit-box-sizing: border-box; box-sizing: border-box;
        display:block;
        position:absolute;
        width:100%;
        top:40px; bottom:0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1px 20px 0 20px;
    }

    .nav-main::-webkit-scrollbar { width:10px; }
    .nav-main::-webkit-scrollbar-button { height:0; }
    .nav-main::-webkit-scrollbar-track  { }
    .nav-main::-webkit-scrollbar-track-piece { /*background-color:rgba(255,255,255,0.1); -webkit-border-radius:4px; border-radius:4px;*/ }    
    .nav-main::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); -webkit-border-radius:5px; border-radius:5px; }
    .nav-main::-webkit-scrollbar-corner { background-color:#006; }
    .nav-main::-webkit-resizer  {  }


    .nav-main-top { display:block; padding:0; margin:0; border-bottom:1px solid #404040; }
    .nav-main-top:first-child { border-top:1px solid #404040; }
    .nav-main-top > a { display:block; padding:10px 0 !important; line-height:24px; }
    .nav-main-top.active > a { padding-bottom:0 !important; }
    .nav-main-top.active { padding-bottom:10px; }

    .nav-main .active > a { color: #b0c778; }
    .nav-main-top:hover a, .nav-main-top:focus a { border-bottom: 0;  }
    .nav-menu { line-height:25px; padding-top:40px; }
    .nav-menu, .last .nav-menu {
        padding-top: 0;
        position: relative;
        top: auto; left: auto; right: auto;
        text-align: left;
    }
    .nav-menu li { margin:0; }
    .nav-menu .nav-menu li:last-child { padding-bottom: 8px; }
    .nav-menu a { padding: 0; }
    .nav-menu .nav-menu a { font-size: 14px; }
    .nav-menu .nav-menu a:before { content: "-"; margin-right: 8px; }
    .nav-menu { display: block; margin-top: 4px; max-height:0; overflow: hidden; }
    .active > .nav-menu { opacity: 1; max-height: 600px; }

    /* Move User Nav to Top of Slideout Menu */
    .header-toolbar-user { border: 0; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 20px; padding: 8px 8px 0 0; height: 40px; width:230px; position:fixed; left:-270px; top:0; z-index:11; -webkit-transition:left 0.3s; transition:left 0.3s; }
    .navopen .header-toolbar-user { left: 0; }
    .navopen .pagewrapper { margin:0 -270px 0 270px; }
    .navopen .nav-main-outer { left:0; }
    .navopen .header-toolbar { left:270px; } 
    .navopen body,
    .navopen { overflow:hidden; height: 100%; width: 100%; }

    .header-slim .header-content { top:0; height: 140px; }
    .header-slim .pagebanner h1 { font-size: 40px; }
    .header-slim .pageheader .logo  { top:25px; }
} 

@media (max-width: 767px) {
    .pagebanner { padding:30px; }
    .pagebanner .headline { }
    .pagebanner h1 { font-size: 40px; }
    .pageheader { height:200px; }
    .pageheader .logo  { top:20px; left:50%; width:208px; height:64px; margin-left:-104px; }

    .header-content { height:160px; }

    .header-toolbar-signup { display:none; }
    .header-toolbar-signin { display:none; }
    .header-toolbar-item { padding:0 8px; }
    .header-toolbar-items { margin-right:10px; }

    .header-slim .header-content { top:0; height:120px; }
    .header-slim .pageheader { height:120px; }
    .header-slim .pageheader .logo  { top:17px; }
    .header-slim .pagebanner { padding: 20px 40px; }
    .header-slim .pagebanner h1 { font-size: 30px; }
    .pagefooter-col1,
    .pagefooter-col2 { background-color: transparent; float: none; padding-left: 0; padding-right: 0; width: auto; }
    .pagefooter-col1 .pagefooter-links { margin-right: 0; padding-top: 20px; }
}

@media only screen and (max-width: 479px) {
    .pagefooter-col2 .pagefooter-label,
    .pagefooter-col2 .pagefooter-label-data { display: block; text-align: left; }
    .pagefooter-col2 .pagefooter-label { margin-bottom: 2px; margin-top: 8px; }
    .pagefooter-copy { position: relative; bottom: auto; }
    .pagefooter { padding-bottom: 8px; }
    .pageheader .logo  { top:20px; width:130px; height:40px; margin-left:-65px; }
}