/* 1. SKIP NAVIGATION
===============================================================================================*/
/* Hide in browser but show for screenreaders */
.screen-reader {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

/* 2. GLOBAL NAVIGATION
===============================================================================================*/
/* PRIMARY
_______________________________________________________________________________________________*/
ul#primary {
    float: left;
    padding-left: 3.90625%; /* (40px/1024px) x 100) */
    position: relative; /* Establish relative positioning on the primary unordered list */
    width: 100%;
    z-index: 120;
}

ul#primary li {
    float: left;
    margin: 0;
    padding: 0;
}

ul#primary li a {
    position: relative;
    color: #111;
    display: block;
    font-size: 0.9em;
    padding: 1.05em 1.2em 1.05em 1.2em;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
}

ul#primary > li > a::before {
    content: "";
    display: none;
    position: absolute;
    left: 1.2em;
    right: 1.2em;
    bottom: 1em;
    border-bottom: 1px solid #111;
}

ul#primary > li:first-child > a::before {
    left: 0;
}

.images-on ul#primary li:first-child a, ul#primary li:first-child a {
    padding-left: 0;
}

.images-on ul#primary li a {
    padding: 1.2em;
}

ul#primary li a span {
    display: inline;
}

ul#primary li.last a {
    background: none;
}

ul#primary li.current > a {
    color: #e10032;
}

ul#primary li.current > a::before {
    border-color: #e10032;
}

@media screen and (min-width: 768px) {
    ul#primary li.current > a::before {
        display: block;
    }
    ul#primary > li:hover > a::before {
        display: block;
    }
}

/* SECONDARY
_______________________________________________________________________________________________*/
/* Absolutely position secondary nav and hide by default */
ul#primary li ul.secondary {
    background: #e10032 url(../../img/global/nav/ul-secondary.gif) repeat-x top left;
    /* Add shadow to nav uls */
    -moz-box-shadow: 0 2px 4px 0 rgba(163, 144, 127, 0.7); /* #a3907f*/
    -webkit-box-shadow: 0 2px 4px 0 rgba(163, 144, 127, 0.7); /* #a3907f*/
    box-shadow: 0 2px 4px 0 rgba(163, 144, 127, 0.7); /* #a3907f*/
    clear: both;
    color: #ffffff;
    float: left;
    left: 0;
    top: 2.8em;
    position: absolute;
    padding-left: 3.90625%; /* (40px/1024px) x 100) */
    width: 100%;
    z-index: 110;
}

ul#primary li ul.secondary li {
    float: left;
    font-size: 0.75em;
}

ul#primary li ul.secondary li.last a {
    background: none;
}

/* Since we declared a link style on the parent list link, we will correct it back to its original state */
ul#primary li ul.secondary a {
    background: url(../../img/global/nav/a-secondary.gif) no-repeat center right;
    color: #ffffff;
    display: block;
    padding: 0.9em 1em 0.7em 1em;
    text-align: center;
}

ul#primary li ul.secondary li:first-child a {
    padding-left: 0;
}

ul#primary li ul.secondary {
    display: none; /* Hide by default */
}

/* INTERACTION STATES */
/* If the current primary nav li has a sub nav, then display it by default */
ul#primary li.current ul.secondary, ul#primary li.current:hover ul.secondary {
    display: block;
    z-index: 100;
}

/* Display secondary nav on hover */
ul#primary li.hovering ul.secondary {
    display: block;
}

ul#primary li ul.secondary a:hover {
    text-decoration: underline;
}

/* 3. BREADCRUMB
===============================================================================================*/
.level-3 #content .breadcrumb, .level-5 #content .breadcrumb, #anniversary-80-terms #content .breadcrumb {
    overflow: hidden;
    padding-bottom: 1em;
}

.level-3 #content .breadcrumb ul, .level-5 #content .breadcrumb ul, #anniversary-80-terms #content .breadcrumb ul {
    clear: both;
    overflow: hidden;
}

.level-3 #content .breadcrumb ul li, .level-5 #content .breadcrumb ul li, #anniversary-80-terms #content .breadcrumb ul li {
    background: url(../../img/icons/arrows/breadcrumb.png) no-repeat 0.6em center;
    float: left;
    padding-left: 1.4em;
}

.level-3 #content .breadcrumb ul li:first-child, .level-5 #content .breadcrumb ul li:first-child, #anniversary-80-terms #content .breadcrumb ul li:first-child {
    background: none;
    padding-left: 0.6em;
}

.level-3 #content .breadcrumb ul li a:hover, .level-5 #content .breadcrumb ul li a:hover, #anniversary-80-terms #content .breadcrumb ul li a:hover {
    text-decoration: underline;
}

/* 4. ASIDE NAVIGATION
===============================================================================================*/
.aside .nav ul li {
    background: #fff; /* Old browsers */
    background: -moz-linear-gradient(left, #ffffff 0%, #edeceb 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ffffff 0%, #edeceb 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ffffff 0%, #edeceb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#edeceb', GradientType=1); /* IE6-9 */
    margin-bottom: 1em;
    overflow: hidden;
    padding: 0;
    text-decoration: none;
}

.aside .nav ul li.sign-up-visible {
    overflow: visible;
}

.aside .nav ul li a,
.aside .nav ul li form {
    display: block;
    padding: 0.4em 10% 0.4em 21.9047619%; /* (21px and 46px/210px) x 100 */
    position: relative; /* IE cleartype fix */
    width: 68.0952381%; /* (143px/210px) x 100 */
}

.level-3 .aside .nav ul li a, .level-5 .aside .nav ul li a {
    padding: 1.2em 10% 0.4em 21.9047619%; /* (21px and 46px/210px) x 100 */
}

.aside .nav ul li a:hover {
    cursor: pointer;
}

.aside .nav ul li a span, .aside .nav ul li span {
    background: url(../../img/icons/arrows/arrows-sprite-new.png) no-repeat 0 center;
    right: 0.6em;
}

/* LOCAL STYLES */
.aside .nav ul li a.around-world {
    background: url(../../img/icons/aside-nav/around-the-world.png) no-repeat 4% 35%;
    padding: 4.2em 10% 0.4em 21.9047619%; /* (21px and 46px/210px) x 100 */
}

.aside .nav ul li a.around-world-long {
    background: url(../../img/icons/aside-nav/around-the-world.png) no-repeat 4% 35%;
    padding: 2em 10% 0.8em 41.9048%;
    width: 48.0952381%;
}

.aside .nav ul li a.tv-ad {
    background: url(../../img/icons/aside-nav/tv-ad-new.png) no-repeat 2% center;
}
.aside .nav ul li:hover a.tv-ad {
    background-image: url(../../img/icons/aside-nav/tv-ad-new-active.png);
}

.aside .nav ul li a.healthcare-professionals {
    background: url(../../img/icons/aside-nav/hcp.png) no-repeat 2% center;
}
.aside .nav ul li:hover a.healthcare-professionals {
    background-image: url(../../img/icons/aside-nav/hcp-active.png);
}

.aside .nav ul li a.culture-icon {
    background: url(../../img/icons/aside-nav/culture.png) no-repeat 2% center;
}
.aside .nav ul li:hover a.culture-icon {
    background-image: url(../../img/icons/aside-nav/culture-active.png);
}

.aside .nav ul li a.little-book {
    background: url(../../img/icons/aside-nav/ball.png) no-repeat 2% center;
}

.aside .nav ul li a.about-yakult {
    background: url(../../img/icons/aside-nav/yakult-bottle.png) no-repeat 2% center;
}
.aside .nav ul li:hover a.about-yakult {
    background-image: url(../../img/icons/aside-nav/yakult-bottle-active.png);
}

.aside .nav ul li a.your-digestion {
    background: url(../../img/icons/aside-nav/gut.png) no-repeat 2% center;
}
.aside .nav ul li:hover a.your-digestion {
    background-image: url(../../img/icons/aside-nav/gut-active.png);
}

.aside .nav ul li a.healthy-living {
    background: url(../../img/icons/aside-nav/heart.png) no-repeat 2% center;
}
.aside .nav ul li:hover a.healthy-living {
    background-image: url(../../img/icons/aside-nav/heart-active.png);
}
.aside .nav ul li a.paint-brush {
    background: url(../../img/icons/aside-nav/paint-brush.png) no-repeat 3% center/40px auto;
}
.aside .nav ul li:hover a.paint-brush {
    background-image: url(../../img/icons/aside-nav/paint-brush-active.png);
}
.aside .nav ul li a.mask {
    background: url(../../img/icons/aside-nav/mask.png) no-repeat 3% center;
}
.aside .nav ul li:hover a.mask {
    background-image: url(../../img/icons/aside-nav/mask-active.png);
}
.aside .nav ul li a.japanCinema {
    background: url(../../img/icons/aside-nav/ticket.png) no-repeat 2% center;
}
.aside .nav ul li:hover a.japanCinema {
    background-image: url(../../img/icons/aside-nav/ticket-active.png);
}

.aside .nav ul li a.faqs {
    background: url(../../img/icons/aside-nav/question-mark.png) no-repeat 2% center;
}
.aside .nav ul li:hover a.faqs {
    background-image: url(../../img/icons/aside-nav/question-mark-active.png);
}

.aside .nav ul li a.hcp {
    background: url(../../img/icons/aside-nav/hcp.png) no-repeat 2% center;
}
.aside .nav ul li:hover a.hcp {
    background-image: url(../../img/icons/aside-nav/hcp-active.png);
}


.aside .nav ul li a.pdf {
    background: url(../../img/icons/aside-nav/pdf.png) no-repeat 2% center;
}

.aside .nav ul li .sign-up {
    background: url(../../img/icons/aside-nav/sign-up-new.png) no-repeat 2% center;
}
.aside .nav ul li:hover .sign-up {
    background-image: url(../../img/icons/aside-nav/sign-up-new-active.png);
}

.aside .nav ul li .sunrise {
    background: url(../../img/icons/aside-nav/sunrise.png) no-repeat 2% center;
}
.aside .nav ul li .festive {
    background: url(../../img/icons/aside-nav/festive.png) no-repeat 2% center/40px auto;
}

.aside .nav ul li .anniversary-80 {
    background: url(../../img/icons/aside-nav/anniversary-80.png) no-repeat 2% center;
}

.aside .nav ul li a.brighter-breakfast, .aside .nav ul li a.brighter-starts, .aside .nav ul li a.culture {
    padding: 0.4em 10% 0.8em 8%; /* (21px/210px) x 100 */
    width: 82%; /* (168px/210px) x 100 */
}

.aside .nav ul li a.brighter-breakfast img {
    padding: 0.4em 0 0 0;
}

.aside .nav ul li a.brighter-starts img,
.aside .nav ul li a.culture img {
    display: block;
    padding: 0.4em 0 0 0;
    margin: 0 auto;
}

.aside .nav ul li a.brighter-starts p,
.aside .nav ul li a.culture p {
    padding: 0 0 15px;
    font-size: 2em;
    font-weight: 800;
    line-height: 1.3em;
}

.aside .nav ul li .breakfast-selector {
    background: url(../../img/icons/aside-nav/breakfast-selector.png) no-repeat 2% center;
}
.aside .nav ul li:hover .breakfast-selector {
    background-image: url(../../img/icons/aside-nav/breakfast-selector-active.png);
}

.aside .nav ul li .breakfast-recipe {
    background: url(../../img/icons/aside-nav/breakfast-recipe-new.png) no-repeat 2% center;
}
.aside .nav ul li:hover .breakfast-recipe {
    background-image: url(../../img/icons/aside-nav/breakfast-recipe-new-active.png);
}
.aside .nav ul li .breakfast-recipe.bottleImg {
    background: url(../../img/icons/aside-nav/breakfast-recipe-new-home.png) no-repeat 2% center;
}
.aside .nav ul li:hover .breakfast-recipe.bottleImg {
    background-image: url(../../img/icons/aside-nav/breakfast-recipe-new-active-home.png);
}

.aside .nav ul li .breakfast-nutrients {
    background: url(../../img/icons/aside-nav/breakfast-nutrients.png) no-repeat 2% center;
}

.aside .nav ul li .example-recipe {
    background: url(../../img/icons/aside-nav/example-recipe.png) no-repeat 2% center;
}

.aside .nav ul li a.big-breakfast-giveaway {
    padding: 0.6em 10% 0.6em 2%;
    width: 88%; /* (143px/210px) x 100 */
}

.aside .nav ul li .big-breakfast-giveaway strong.yakult-font {
    background: none;
    display: block;
    font-size: 1.6em;
    line-height: 1em;
    padding-bottom: 0.2em;
}

/* INTERACTIONS */
.aside .nav ul li:hover {
    background: #fff; /* Old browsers */
    background: -moz-linear-gradient(left, #ffffff 0%, #edeceb 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ffffff 0%, #edeceb 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ffffff 0%, #edeceb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#edeceb', GradientType=1); /* IE6-9 */
    cursor: pointer;
}

.aside .nav ul li:hover span,
.aside .nav ul li:hover .sign-up-button {
    background-position-x: -13px;
}

.aside .nav ul li a:hover {
    color: #e10032;
}

/* 45. CATEGORY SELECT
===============================================================================================*/
#category-select ul li {
    float: left;
    min-width: 5.5em;
    padding-right: 8%;
    width: 25%;
}

#category-select ul li a {
    color: #777777;
    display: block;
    padding: 0.4em 0 0.4em 2em;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}

#category-select ul li a:hover {
    text-decoration: underline;
}

#category-select ul li.product a {
    background: url(../../img/icons/your-questions/product.gif) no-repeat center left;
}

#category-select ul li.nutrition a {
    background: url(../../img/icons/your-questions/nutrition.gif) no-repeat center left;
}

#category-select ul li.suitability a {
    background: url(../../img/icons/your-questions/suitability.gif) no-repeat center left;
}

#category-select ul li.probiotics a {
    background: url(../../img/icons/your-questions/probiotics.gif) no-repeat center left;
}

/* 6. FOOTER NAVIGATION
===============================================================================================*/
.footer .nav {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    float: left;
    padding-left: 2.9296875%; /* (30px/1024px) x 100) */
    padding-right: 26.07421875%; /* (267px/1024px) x 100 */
    width: 100%;
}

.footer .nav li {
    float: left;
    font-size: 0.7em;
    line-height: 0.8em;
    padding: 1.6em 0;
}

.footer .nav li span {
    display: none;
}

.footer .nav li a {
    display: block;
    float: left;
    line-height: 0.8em;
    padding: 0 1em;
    text-decoration: none;
    text-transform: none;
}

.footer .nav li:first-child a {
    padding-left: 0;
}

.footer .nav li a:hover {
    text-decoration: underline;
}
.footer .nav li.socialIcons{
	padding:1.25em 10px;
}
.footer .nav li.socialIcons a{
	padding:0;
	text-indent: -999em;
	float:left;
	width:20px;
	height:20px;
	display:inline-block;
	margin-right:15px;
}
.footer .nav li.socialIcons a.fb{	
	background: url(../../img/icons/facebook.png) no-repeat center center/100% auto;	
	margin-top:2px;
}
.footer .nav li.socialIcons a.fb:hover{	
	background-image: url(../../img/icons/facebook-active.png);	
}
.footer .nav li.socialIcons a.youtube{
	background: url(../../img/icons/youtube.png) no-repeat center center/100% auto;	
	width:24px;
	height:24px;
}
.footer .nav li.socialIcons a.youtube:hover{
	background-image: url(../../img/icons/youtube-active.png);	
}
.footer .nav li.socialIcons a.instagram{
	background: url(../../img/icons/instagram.png) no-repeat center center/100% auto;	
	width:24px;
	height:24px;
}
.footer .nav li.socialIcons a.instagram:hover{
	background-image: url(../../img/icons/instagram-active.png);	
}