/* Minification failed. Returning unminified contents. (2933,1): run-time error CSS1019: Unexpected token, found '@charset' (2933,10): run-time error CSS1019: Unexpected token, found '"UTF-8"' (2933,17): run-time error CSS1019: Unexpected token, found ';' (5268,1): run-time error CSS1019: Unexpected token, found '@keyframes' (5269,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (5404,1): run-time error CSS1019: Unexpected token, found '@keyframes' (5405,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (5586,1): run-time error CSS1019: Unexpected token, found '@keyframes' (5587,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (6118,1): run-time error CSS1019: Unexpected token, found '@keyframes' (6119,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (6156,1): run-time error CSS1019: Unexpected token, found '@keyframes' (6157,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (6179,1): run-time error CSS1019: Unexpected token, found '@keyframes' (6180,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (6437,1): run-time error CSS1019: Unexpected token, found '@keyframes' (6438,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' */ .ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-autocomplete{position:absolute;top:0;left:0;cursor:default}.ui-button{display:inline-block;position:relative;padding:0;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;overflow:visible}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2.2em}button.ui-button-icon-only{width:2.4em}.ui-button-icons-only{width:3.4em}button.ui-button-icons-only{width:3.7em}.ui-button .ui-button-text{display:block;line-height:normal}.ui-button-text-only .ui-button-text{padding:.4em 1em}.ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text{padding:.4em;text-indent:-9999999px}.ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 1em .4em 2.1em}.ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 2.1em .4em 1em}.ui-button-text-icons .ui-button-text{padding-left:2.1em;padding-right:2.1em}input.ui-button{padding:.4em 1em}.ui-button-icon-only .ui-icon,.ui-button-text-icon-primary .ui-icon,.ui-button-text-icon-secondary .ui-icon,.ui-button-text-icons .ui-icon,.ui-button-icons-only .ui-icon{position:absolute;top:50%;margin-top:-8px}.ui-button-icon-only .ui-icon{left:50%;margin-left:-8px}.ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary{left:.5em}.ui-button-text-icon-secondary .ui-button-icon-secondary,.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary{right:.5em}.ui-buttonset{margin-right:7px}.ui-buttonset .ui-button{margin-left:0;margin-right:-.3em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.ui-menu{list-style:none;padding:2px;margin:0;display:block;outline:none}.ui-menu .ui-menu{margin-top:-3px;position:absolute}.ui-menu .ui-menu-item{margin:0;padding:0;width:100%;list-style-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)}.ui-menu .ui-menu-divider{margin:5px -2px 5px -2px;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}.ui-menu .ui-menu-item a{text-decoration:none;display:block;padding:2px .4em;line-height:1.5;min-height:0;font-weight:normal}.ui-menu .ui-menu-item a.ui-state-focus,.ui-menu .ui-menu-item a.ui-state-active{font-weight:normal;margin:-1px}.ui-menu .ui-state-disabled{font-weight:normal;margin:.4em 0 .2em;line-height:1.5}.ui-menu .ui-state-disabled a{cursor:default}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item a{position:relative;padding-left:2em}.ui-menu .ui-icon{position:absolute;top:.2em;left:.2em}.ui-menu .ui-menu-icon{position:static;float:right}.ui-slider{position:relative;text-align:left}.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:default}.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0}.ui-slider.ui-state-disabled .ui-slider-handle,.ui-slider.ui-state-disabled .ui-slider-range{filter:inherit}.ui-slider-horizontal{height:.8em}.ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}.ui-slider-horizontal .ui-slider-range{top:0;height:100%}.ui-slider-horizontal .ui-slider-range-min{left:0}.ui-slider-horizontal .ui-slider-range-max{right:0}.ui-slider-vertical{width:.8em;height:100px}.ui-slider-vertical .ui-slider-handle{left:-.3em;margin-left:0;margin-bottom:-.6em}.ui-slider-vertical .ui-slider-range{left:0;width:100%}.ui-slider-vertical .ui-slider-range-min{bottom:0}.ui-slider-vertical .ui-slider-range-max{top:0}.ui-widget{font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;font-size:1.1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;font-size:1em}.ui-widget-content{border:1px solid #ddd;color:#333}.ui-widget-content a{color:#333}.ui-widget-header{border:1px solid #e78f08;/*background:#f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;*/color:#fff;font-weight:bold}.ui-widget-header a{color:#fff}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#1c94c4;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited{color:#c77405;text-decoration:none}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fed22f;background:#ffe45c url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;color:#363636}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#363636}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#b81900 url(images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;color:#fff}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#fff}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#fff}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url(images/ui-icons_222222_256x240.png)}.ui-widget-header .ui-icon{background-image:url(images/ui-icons_ffffff_256x240.png)}.ui-state-default .ui-icon{background-image:url(images/ui-icons_ef8c08_256x240.png)}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url(images/ui-icons_ef8c08_256x240.png)}.ui-state-active .ui-icon{background-image:url(images/ui-icons_ef8c08_256x240.png)}.ui-state-highlight .ui-icon{background-image:url(images/ui-icons_228ef1_256x240.png)}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url(images/ui-icons_ffd27a_256x240.png)}.ui-icon-blank{background-position:16px 16px}.ui-icon-carat-1-n{background-position:0 0}.ui-icon-carat-1-ne{background-position:-16px 0}.ui-icon-carat-1-e{background-position:-32px 0}.ui-icon-carat-1-se{background-position:-48px 0}.ui-icon-carat-1-s{background-position:-64px 0}.ui-icon-carat-1-sw{background-position:-80px 0}.ui-icon-carat-1-w{background-position:-96px 0}.ui-icon-carat-1-nw{background-position:-112px 0}.ui-icon-carat-2-n-s{background-position:-128px 0}.ui-icon-carat-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-64px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-64px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:0 -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:4px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:4px}.ui-widget-overlay{background:#666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;opacity:.5;filter:Alpha(Opacity=50)}.ui-widget-shadow{margin:-5px 0 0 -5px;padding:5px;background:#000 url(images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x;opacity:.2;filter:Alpha(Opacity=20);border-radius:5px} /* RESET */ :root { box-sizing: border-box; } *, ::before, ::after { margin: 0; padding: 0; box-sizing: inherit; font-size: 100%; line-height: 1; } /* adjacent stacked items */ /* https://alistapart.com/article/axiomatic-css-and-lobotomized-owls */ html { font-size: 62.5%; /* 10px based on user-agent 16px; */ } button:hover, a:hover, a:active { outline: none; } body { font-size: 1.6rem; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.5; } header, footer, nav, section { display: block; } ul { list-style-type: none; } .caps { text-transform: uppercase; } .ui-autocomplete.ui-corner-all { border-radius: 0 !important; } .clearfix { clear: both; } select { -webkit-appearance: none; background-repeat: no-repeat; background-position: 98%; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAAeCAYAAAB9hg0IAAAACXBIWXMAAAsSAAALEgHS3X78AAABBklEQVRYheXZuxGCUBCF4V/HWiiDVjQg11I0J5BWKINmcHCQ8YFwH7sX7uWEG+zsNxueXdu2bCGHzpiXzRU4J+q91UV2GT6al80dOC5+lmyqushO3cb9a20/qNLwPTMgeYeSFvYDyTeUNLA/SMagxI0dRfIPSpzYv0imoMSFnUQyByUO7CwSEyjrxhohMYWyTqwxEhso68JaIbGFsg6sNRIXKMtinZC4QlkG64zEB0pYrBcSXyhhsN5IJKDoYkWQSEHRwYohkYQiixVFIg1FBiuORAOKH1YFiRYUN6waEk0odlhVJNpQzLDqSEJAmcYGQRIKyjg2GLJL8O6lbwQIieyyjZIJeABbnI05UcVn5QAAAABJRU5ErkJggg=="); } /* END RESET */ /****************/ @font-face { font-family: "Futura-Book"; src: url("/Content/fonts/Futura-Book.otf"); } @font-face { font-family: "Futura-Bold"; src: url("/Content/fonts/Futura-Bold.otf"); } /* @font-face { font-family: 'HelveticaNeueLTStd-LtCn'; src: url('http://www.pepsicobeveragefacts.com/Content/Fonts/32B3AB_0_0.eot'); src: url('http://www.pepsicobeveragefacts.com/Content/Fonts/32B3AB_0_0.eot?#iefix') format('embedded-opentype'),url('http://www.pepsicobeveragefacts.com/Content/Fonts/32B3AB_0_0.woff2') format('woff2'),url('http://www.pepsicobeveragefacts.com/Content/Fonts/32B3AB_0_0.woff') format('woff'),url('http://www.pepsicobeveragefacts.com/Content/Fonts/32B3AB_0_0.ttf') format('truetype'); } @font-face { font-family: 'HelveticaNeueLTStd-HvCn'; src: url('http://www.pepsicobeveragefacts.com/Content/Fonts/32B3AB_1_0.eot'); src: url('http://www.pepsicobeveragefacts.com/Content/Fonts/32B3AB_1_0.eot?#iefix') format('embedded-opentype'),url('http://www.pepsicobeveragefacts.com/Content/Fonts/32B3AB_1_0.woff2') format('woff2'),url('http://www.pepsicobeveragefacts.com/Content/Fonts/32B3AB_1_0.woff') format('woff'),url('http://www.pepsicobeveragefacts.com/Content/Fonts/32B3AB_1_0.ttf') format('truetype'); } @font-face { font-family: 'HelveticaNeueLTStd-Cn'; src: url('http://www.pepsicobeveragefacts.com/Content/Fonts/32B3AB_2_0.eot'); src: url('http://www.pepsicobeveragefacts.com/Content/Fonts/32B3AB_2_0.eot?#iefix') format('embedded-opentype'),url('http://www.pepsicobeveragefacts.com/Content/Fonts/32B3AB_2_0.woff2') format('woff2'),url('http://www.pepsicobeveragefacts.com/Content/Fonts/32B3AB_2_0.woff') format('woff'),url('http://www.pepsicobeveragefacts.com/Content/Fonts/32B3AB_2_0.ttf') format('truetype'); } */ @keyframes fade-opacity-in { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } .dark-blue { color: #000b52; } .med-blue { color: #1c82ba; } /****************/ html, body { font-family: "futura-pt", Helvetica, Sans-Serif; min-width: 240px; background-color: #fff; font-size: 14px; } .content-container { display: block; position: relative; padding: 0 10px; min-width: 240px; width: 100%; margin: calc( 60px + 10px) auto 0; } .content { width: 100%; margin-bottom: 20px; } /****************/ .header { width: 100%; height: 60px; position: absolute; background-color: #fff; display: flex; padding: 0 0 0 40px; align-items: center; justify-content: space-between; } .site-logo { width: auto; height: auto; flex: 0; padding: 5px; } .site-logo img { width: 100px; height: auto; display: block; cursor: pointer; } .site-tagline { font-family: "futura-pt"; font-weight: 700; font-size: 0.85em; line-height: 1.25em; letter-spacing: -0.01em; text-align: center; flex: 1; } .site-header-text { font-family: "futura-pt"; font-weight: 700; } .fixed-asset-container { width: 100%; position: fixed; top: 0; left: 0; z-index: 1; } .mobile-container { position: relative; width: 100%; height: 0; max-width: 480px; margin-left: auto; margin-right: auto; } .header { width: 100%; height: 60px; position: absolute; background-color: #fff; display: flex; padding: 0 0 0 40px; align-items: center; justify-content: space-between; } .site-logo { width: auto; height: auto; flex: 0; padding: 5px; } .site-logo img { width: 100px; height: auto; display: block; cursor: pointer; } .site-tagline { font-family: "futura-pt"; font-weight: 700; font-size: 0.85em; line-height: 1.25em; letter-spacing: -0.01em; text-align: center; flex: 1; } .site-header-text { font-family: "futura-pt"; font-weight: 700; } .footer { background-color: #1c82ba; font-size: .75em; color: #dcdcdc; position: relative; text-align: center; padding: 2px 10px; margin: 10px; min-width: 240px; clear: both; margin: 0; } .footer span { margin: 3px auto; font-family: "droid-sans"; display: block; } .footer .copyright { padding: 3px 0; } .footer .links { padding: 3px 0; } .footer .links a { text-decoration: none; color: #dcdcdc; padding: 0 1rem; line-height: 1.5; margin: 10px 0; } .footer .links a:not(:last-child) { border-right: 1px solid #dcdcdc; } .footer .links a:hover { color: #000b52; } .footer .links-two a:nth-child(even) { text-align: left; } .footer .links-two a:nth-child(odd) { text-align: right; } /* @media only screen and (min-device-width: 500px) { .footer { .link-group { display: flex; justify-content: center; } .links a { flex: auto; } .links-two a:nth-child(even) { text-align: center; } .links-two a:nth-child(odd) { text-align: center; } .links:not(:last-child) { a { border-right: 1px solid $light-gray; } } span { margin: 3px 0; } } }*/ .slide-wrapper { padding: 10px; height: 100%; display: flex; width: calc(100vw - 40px); flex: 1; } .slide-content { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } .slide-content a img { width: 100%; } .slide-heading { flex: 0; } .slide-heading h2 { font-size: 40px; font-weight: 800; font-family: "futura-pt"; margin: 0; margin-bottom: 5px; display: block; } .slide-image { flex: 1; align-self: center; /*margin-top: -10px;*/ } .slide-image img { width: 95%; max-height: 200px; object-fit: contain; } .slide-image .productSet { max-height: 242px; margin-bottom: 5px; } .slide-copy { flex: 1; align-self: center; } .slide-copy p { font-family: "droid-sans"; font-size: .9em; font-weight: 400; line-height: 1.4; } .slide-button { flex: 0; margin: 10px auto; } .slide-button a { background-color: #000b52; color: #fff; font-family: "futura-pt"; font-weight: 400; padding: 6px; text-decoration: none; outline: none; transition: background-color .6s ease-out; display: inline-block; } .home-slider { height: 100%; overflow: hidden; position: relative; color: #000b52; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMzIlIiBzdG9wLWNvbG9yPSIjZmVmZmZmIiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4OCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(left, rgba(254, 255, 255, 0.3) 0%, rgba(254, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(254, 255, 255, 0.3)), color-stop(32%, rgba(254, 255, 255, 0.5)), color-stop(88%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(254, 255, 255, 0.3) 0%, rgba(254, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(254, 255, 255, 0.3) 0%, rgba(254, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(254, 255, 255, 0.3) 0%, rgba(254, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(254, 255, 255, 0.3) 0%, rgba(254, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dfeffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */ transition: all .1s ease-out; background: radial-gradient(ellipse at top, #fff 15%, #d1e2ea 55%, #1c82ba 95%, #006fb7 100%); } .home-slider .pagination { left: 50%; margin-left: -62px; bottom: -5px; } .home-slider .swiper-slide { display: flex; flex-direction: column; } .swiper-container .swiper-pagination { position: relative; } span.swiper-pagination-bullet { height: 10px; width: 10px; margin: 0 8px !important; } .innovation-imgs { margin-bottom: 10px; display: flex; justify-content: center; align-items: baseline; padding: 0; margin-left: -15px; margin-top: 8px; } .innovation-imgs div { position: relative; } .innovation-imgs div img { width: 100%; max-height: 180px; object-fit: contain; margin: 0 15px; margin-top: 5px; } .innovation-imgs div .flyout { position: absolute; top: 50%; right: 50%; background: rgba(255, 255, 255, 0.9); font-size: 11px; padding: 10px; font-family: "droid-sans"; line-height: 12px; text-transform: lowercase; text-align: center; z-index: 1; min-width: 80px; opacity: 0; } .innovation-imgs div .flyout.product1 img { left: -11px; right: inherit; } .innovation-imgs div .flyout img { height: 22px; width: 22px; position: absolute; top: -11px; right: -11px; } .timeline-img { margin-top: 4px; } .swiper-container.factsblock { padding-bottom: 20px; } .swiper-container.factsblock .slide-container { border: 1px solid #1c82ba; } .swiper-container.factsblock .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-container.factsblock .swiper-pagination-custom, .swiper-container.factsblock .swiper-pagination-fraction { margin-bottom: 5px; left: 0; width: 100%; } .swiper-slide .flyout { opacity: 0; animation: none; } .swiper-slide.swiper-slide-active .flyout { animation: pulse 10s infinite; } .swiper-slide.swiper-slide-active .product1.flyout { animation-delay: 1s; left: 25px; } .swiper-slide.swiper-slide-active .product2.flyout { animation-delay: 4s; } .swiper-slide.swiper-slide-active .product3.flyout { animation-delay: 7s; } @keyframes pulse { 0% { opacity: 1; } 25% { opacity: 1; } 26% { opacity: 0; } 100% { opacity: 0; } } .home-slider .highlight .flyout { margin: 0 5px; } .home-slider .highlight .flyout p { padding-bottom: 0; margin-top: 10px; margin-bottom: 10px; } .home-slider .highlight.right .flyout { left: auto; right: 14px; } .home-slider .highlight.highlight1 { left: 20px; top: 30px; } .home-slider .highlight.highlight1 .flyout { width: 240px; } .home-slider .highlight.highlight2 { left: 25px; top: 38px; } .home-slider .highlight.highlight2 .flyout { width: 160px; } .home-slider .highlight.highlight3 { left: 35px; top: 45px; } .home-slider .highlight.highlight3 .flyout { width: 180px; } .flexbox { display: flex; flex-wrap: wrap; justify-content: space-evenly; } .catgblock .box-item { flex: 1 0 30vw; background-color: #000b52; color: #fff; height: 50px; } .catgblock .box-item a { height: auto; } .box-item { margin: 5px; flex: 1; display: flex; justify-content: center; align-items: center; height: 100px; } .box-item a { font-size: 1.6rem; outline: none; color: #fff; text-align: center; text-decoration: none; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; transition: background-color 0.6s ease-out; } .box-item a span { flex: 1; height: 100%; } .box-item a span img { height: 100%; } /****************/ /* SITE NAV */ .nav { background: white; color: black; width: 100vw; margin: 0; } .nav .nav-wrap { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding: 0px 15px; } @media only screen and (max-width: 767px) { .nav .nav-wrap { padding: 0px 0px; } } .nav .nav-wrap .search-bar { position: relative; width: 100%; } .nav .nav-wrap .search-bar input { border: none; border-radius: 15px; padding: 0px 13px; width: 100%; height: 21px; color: #474747; position: relative; z-index: 1; margin-right: 50px; transition: border 25ms ease-in-out; } .nav .nav-wrap .search-bar input.active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .nav .nav-wrap .search-bar .search-suggestions { position: absolute; width: 100%; height: 0px; display: none; overflow-y: scroll; background: white; color: #474747; border: 1px solid #999999; border-top-color: white; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; transition: height 250ms ease-in-out; z-index: 0; } .nav .nav-wrap .search-bar .search-suggestions.active { display: block; height: 450px; } .nav .nav-wrap .search-bar .search-suggestions a.suggestion { width: 100%; color: #474747; display: inline-block; padding: 4px; } .nav .nav-wrap .search-bar .search-suggestions a.suggestion:hover { background: #dcdcdc; color: #474747; text-decoration: none; } .nav .nav-wrap .search-bar .search-icon, .nav .nav-wrap .search-bar .search-icon2 { display: inline-block; width: 12px; right: 8px; bottom: 3px; position: absolute; opacity: .5; cursor: pointer; height: 14px; line-height: 12px; z-index: 1; } @media screen and (max-width: 767px) { .nav .nav-wrap .search-bar .search-icon, .nav .nav-wrap .search-bar .search-icon2 { line-height: 25px; } } .nav.pre-nav .nav-wrap { display: flex; justify-content: flex-start; align-items: flex-end; padding: 5px 15px 5px 15px; position: relative; } @media screen and (max-width: 767px) { .nav.pre-nav .nav-wrap { padding: 5px; } } .nav.pre-nav .nav-wrap .navbar-tag-line { text-align: right; font-family: "Open Sans", Helvetica, sans-serif; font-weight: 700; color: black; padding-bottom: 2px; } @media screen and (max-width: 767px) { .nav.pre-nav .nav-wrap .navbar-tag-line { font-size: 13px; line-height: 14px; text-align: center; } } .nav.pre-nav .nav-wrap .navbar-toggler { margin-left: 0; } @media screen and (min-width: 768px) { .nav.pre-nav .nav-wrap .navbar-toggler { display: none; pointer-events: none; } } .nav.pre-nav .nav-wrap .navbar-toggler .navbar-toggler-icon { fill: black; } .nav.search-nav { display: none; background: gray; } @media screen and (max-width: 767px) { .nav.search-nav { display: block; } } @media screen and (max-width: 767px) { .nav.search-nav .nav-wrap { padding-left: 15px; padding-right: 15px; } } .nav.search-nav .nav-wrap .nav-link.search-bar { padding-left: 0; padding-right: 0; } .nav.search-nav .nav-wrap .nav-link.search-bar .search-icon, .nav.search-nav .nav-wrap .nav-link.search-bar .search-icon2 { bottom: initial; top: 4px; } .nav.main-nav { background: gray; } @media screen and (min-width: 768px) { .nav.main-nav .nav-wrap .navbar-collapse { /* Bootstrap Hack. Doesn't remove height: 0px if triggered from mobile view */ height: auto !important; } } .nav.main-nav .nav-wrap .navbar-collapse ul { display: flex; width: 100%; justify-content: flex-start; text-align: left; padding-left: 5px; align-items: center; } .nav.main-nav .nav-wrap .navbar-collapse ul li { color: white; margin-right: 2%; } @media screen and (max-width: 767px) { .nav.main-nav .nav-wrap .navbar-collapse ul li { margin-right: 0%; } } .nav.main-nav .nav-wrap .navbar-collapse ul li.active { pointer-events: none; } .nav.main-nav .nav-wrap .navbar-collapse ul li.dropdown a { color: white; outline: none; } .nav.main-nav .nav-wrap .navbar-collapse ul li.dropdown.open .dropdown-menu { display: block !important; background-color: gray; } .nav.main-nav .nav-wrap .navbar-collapse ul li.search-bar { width: auto; margin-left: auto; margin-right: 0; } @media screen and (max-width: 767px) { .nav.main-nav .nav-wrap .navbar-collapse ul li.search-bar { display: none; } } .nav.main-nav .nav-wrap .navbar-collapse ul li a { color: #fff; outline: none; } .nav.main-nav .nav-wrap .navbar-collapse ul li a:hover { color: #d1e2ea; } @media screen and (max-width: 767px) { .nav.main-nav .nav-wrap .navbar-collapse ul li { width: 100%; text-align: left; padding-left: 5px; } .nav.main-nav .nav-wrap .navbar-collapse ul li.dropdown.open .dropdown-menu { width: 100%; border: none; text-align: left; padding-left: 5px; background-color: transparent; } } .nav.pbf { color: white; } .nav.pbfa { color: white; } .nav.pbf.pre-nav .navbar-toggler-icon .ico-fill { fill: #000b52; } .nav.pbf.search-nav { background-color: #000b52; } @media screen and (max-width: 767px) { .nav.pbf.search-nav .nav-wrap .nav-link.search-bar .search-icon, .nav.pbf.search-nav .nav-wrap .nav-link.search-bar .search-icon2 { top: 9px; } } .nav.pbf.main-nav { background-color: #000b52; color: white; } @media screen and (max-width: 767px) { .nav.pbf.main-nav .dropdown.open .dropdown-menu { background-color: gray !important; } } .nav.pbf.main-nav .nav-wrap .navbar-collapse ul li.dropdown a { color: white; text-decoration: none; } .nav.pbf.main-nav .nav-wrap .navbar-collapse ul li.dropdown .dropdown-menu a.dropdown-item { text-decoration: none; } .nav.pbf.main-nav .nav-wrap .navbar-collapse ul li.dropdown .dropdown-menu a.dropdown-item:hover, .nav.pbf.main-nav .nav-wrap .navbar-collapse ul li.dropdown .dropdown-menu a.dropdown-item:focus { background: transparent; color: white; } .nav.pbf.main-nav .nav-wrap .search-bar .search-icon, .nav.pbf.main-nav .nav-wrap .search-bar .search-icon2 { bottom: 5px; } .nav-logo { display: block; cursor: pointer; width: 122px; height: 32px; background-image: url("/content/image/logo-pepsico-sprite.png"); background-position: 0px 0px; } .nav.ppf { color: #18861a; } .nav.ppf.pre-nav .nav-logo { display: block; cursor: pointer; width: 122px; height: 32px; background-image: url(/content/image/logo-pepsico-ppf.png); background-position: 0px 0px; } .nav.ppf.pre-nav .navbar-toggler-icon .ico-fill { fill: #18861a; } .nav.ppf.search-nav { background-color: #18861a; } @media screen and (max-width: 767px) { .nav.ppf.search-nav .nav-wrap .nav-link.search-bar .search-icon, .nav.ppf.search-nav .nav-wrap .nav-link.search-bar .search-icon2 { top: 9px; } } .nav.ppf.main-nav { font-family: 'Nunito', sans-serif; font-weight: 500; background-color: #18861a; color: white; } @media screen and (max-width: 767px) { .nav.ppf.main-nav .dropdown.open .dropdown-menu { background-color: gray !important; width: 100%; } } .nav.ppf.main-nav .dropdown-item:focus, .nav.ppf.main-nav .dropdown-item:hover { color: #474747; text-decoration: none; background-color: #dcdcdc; } .nav.ppf .nav-wrap .navbar-collapse ul li .dropdown-menu a.dropdown-item:hover { color: #474747; } .nav.ppf .nav-wrap .navbar-collapse ul li.dropdown a { color: white; outline: none; } .nav.ppf .nav-wrap .navbar-collapse ul li.dropdown.open a.dropdown-toggle { background-color: transparent; } .nav.ppf .logos { margin-left: auto; } @media (max-width: 875px) { .nav.ppf .logos { display: none; } } .ppf.mobile h2 { font-size: 24px; } .ppf.mobile .ingredient-content { margin-bottom: 10px; margin-top: 10px; } .ppf.mobile .ingredient-content .summary { background: #dcdcdc; line-height: 1.4em; } .ppf.mobile .ingredient-content .summary p { padding: 20px 10px; line-height: 1.4em; } .ppf.mobile .ingredient-accordion { background-color: #dcdcdc; } .ppf.mobile .ingredient-comparison-chart { background: #fff; } .page-home.section-home-mobile .content-container { padding-top: 35px; } /****************** * Home Page Block * ******************/ .hpblock { background-color: #d1e2ea; color: #000b52; padding: 10px; margin: 10px auto; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMzIlIiBzdG9wLWNvbG9yPSIjZmVmZmZmIiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4OCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(left, rgba(254, 255, 255, 0.3) 0%, rgba(254, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(254, 255, 255, 0.3)), color-stop(32%, rgba(254, 255, 255, 0.5)), color-stop(88%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(254, 255, 255, 0.3) 0%, rgba(254, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(254, 255, 255, 0.3) 0%, rgba(254, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(254, 255, 255, 0.3) 0%, rgba(254, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(254, 255, 255, 0.3) 0%, rgba(254, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dfeffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */ transition: all .1s ease-out; background: radial-gradient(ellipse at top, #fff 15%, #d1e2ea 55%, #1c82ba 95%, #006fb7 100%); } .hpblock h2 { margin-bottom: 5px; font-size: 1.4em; text-align: center; text-transform: uppercase; } .hpblock-white { background-color: transparent; } .hpblock.swiper-container.home-slider .swiper-slide { height: auto; } .hpblock.swiper-container.home-slider .swiper-slide .slide-button { width: 100%; text-align: center; } .hpblock.swiper-container.home-slider .swiper-slide .slide-button a { min-width: 50%; } .hpblock.catgblock .flexbox .box-item a span { font-size: 16px; } .hpblock.whatsnewbloc { /*background: $white;*/ /* Mobile, swiper */ /* End mobile, swiper */ } .hpblock.whatsnewbloc h2 { margin-bottom: 5px; } .hpblock.whatsnewbloc .swiper-container.whatsnew-slider .swiper-slide { width: 30%; } .hpblock.whatsnewbloc .swiper-container.whatsnew-slider .swiper-slide .prodset { margin: 0; } .hpblock.factsblock { background: #fff; } .hpblock.featureblock .flexbox .box-item, .hpblock.brandblock .flexbox .box-item { flex-basis: 100px; } .bttm-row { text-align: center; } .bttm-row a, .bttm-row a:hover, .bttm-row a:link, .bttm-row a:visited { text-align: center; font-size: 1.25em; margin: 10px; color: #000b52; display: inline-block; text-decoration: none; line-height: 1.25; } .home-search { width: 100%; position: relative; display: block; margin: 10px auto; padding: 20px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMzIlIiBzdG9wLWNvbG9yPSIjZmVmZmZmIiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4OCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(left, rgba(254, 255, 255, 0.3) 0%, rgba(254, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(254, 255, 255, 0.3)), color-stop(32%, rgba(254, 255, 255, 0.5)), color-stop(88%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(254, 255, 255, 0.3) 0%, rgba(254, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(254, 255, 255, 0.3) 0%, rgba(254, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(254, 255, 255, 0.3) 0%, rgba(254, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(254, 255, 255, 0.3) 0%, rgba(254, 255, 255, 0.5) 32%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dfeffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */ transition: all .1s ease-out; background: radial-gradient(ellipse at top, #fff 15%, #d1e2ea 55%, #1c82ba 95%, #006fb7 100%); } .home-search form { height: 30px; } .home-search img { opacity: 1 !important; } .home-search input { margin: 0; text-transform: uppercase; } .findSbmtButton { height: 30px; width: 56px; background-image: url("/Content/image/alreadyknow.png"); background-repeat: no-repeat; padding: 0px; border: none; } .input-group { display: flex; } .searchTextInput1 { flex: 1; font-size: 10pt; padding: 0 1rem; } .ui-widget-content { border: 1px solid #CCC; background-color: #dcdcdc; color: #000b52; font-family: "Droid-sans"; font-size: 100%; } .prodset { display: flex; justify-content: space-evenly; align-content: center; /*background-color: $white;*/ padding: 25px; margin: 5px 10px 5px 20px; } .prodset a img { width: 100%; } .slide-content { display: flex; flex-direction: column; } .slide-content a { align-self: center; } .slide-content a img { width: 100%; } .whatsnew-slider .swiper-button-next, .whatsnew-slider .swiper-button-prev { width: 20px; height: 35px; background-size: 20px 35px; } .title-bar { width: 100%; background-color: #1c82ba; color: #fff; font-family: "futura-pt"; padding-left: 10px; } .title-bar .product-name { font-size: 1.4em; font-weight: bold; text-transform: uppercase; position: relative; line-height: 1em; padding-top: 5px; padding-bottom: 5px; display: block; } .prod-img { height: 65vw; width: auto; margin: auto; margin-top: 10px; position: relative; display: block; } .product-links { margin: auto; text-align: center; position: relative; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 10px; } .product-link, .size-links a { display: inline-block; min-width: 69px; padding-left: 5px; padding-right: 5px; height: 35px; background-color: #fff; color: #000b52; text-decoration: none; text-align: center; font-weight: bold; font-size: 12px; line-height: 35px; /*border-bottom: 2px solid #d4d4d4;*/ margin-right: 5px; margin-top: 0px; position: relative; border: 1px solid #1c82ba; margin: 3px; } .product-link.selected, .product-link .size-links > a, .size-links a.selected, .size-links a .size-links > a { background-color: #000b52; color: #fff; cursor: default; } .product-link.custom-size span, .size-links a.custom-size span { padding: 8px 1px; line-height: 1; display: block; } .product-link:only-child, .size-links a:only-child { margin: 15px 0 5px; } .product-content-overlay .calculator { display: none; } .product-content-overlay .calculator.active { display: block; margin-top: 10px; } .product-content-overlay .calculator .fountain-calculator { background: #d1e2ea; } .product-content-overlay .calculator .fountain-calculator .title-bar { padding-top: 5px; padding-bottom: 5px; margin-bottom: 5px; } .product-content-overlay .calculator .fountain-calculator .label-oz { margin-top: 10px; margin-bottom: 5px; display: inline-block; } .product-content-overlay .calculator .fountain-calculator label { color: #ee2839; display: block; padding-top: 3px; } .product-content-overlay .calculator .fountain-calculator input.oz { margin-top: 5px; } .product-content-overlay .calculator .fountain-calculator .label-ice { margin-top: 10px; margin-bottom: 5px; display: inline-block; } .product-content-overlay .calculator .fountain-calculator select, .product-content-overlay .calculator .fountain-calculator .oz { margin-top: 5px; margin-left: 8px; font-size: 12px; height: 37px; padding-left: 5px; border-radius: 0px; width: 25%; color: #000b52; } .product-content-overlay .calculator .fountain-calculator .fountain-submit { /*background-color: $dark-blue; color: $white; font-family: "futura-pt"; font-weight: 400; padding: 6px; text-decoration: none; outline: none; border: none; display: inline-block;*/ margin: 10px auto; } .product-content-overlay .calculator .fountain-calculator .fountain-submit a { background-color: #000b52; color: #fff; font-family: "futura-pt"; font-weight: 400; padding: 6px; text-decoration: none; outline: none; border: none; display: inline-block; } .product-more-info { color: #000; width: 75%; background-color: #fff; font-size: 2vh; margin: 10px auto; padding: 10px; border: 1px solid #000; } .product-more-info h2 { text-align: left; color: #000; font-weight: bold; font-size: 8vw; font-family: "franklin-gothic-urw"; margin: .5rem 0; } .product-more-info .line1 { text-transform: uppercase; font-size: 3vw; } .product-more-info .serving-container { display: none; } .product-more-info .minerals-nutrients { border-top: 10px solid #000; border-bottom: 10px solid #000; margin: .5rem 0; } .product-more-info .minerals-nutrients div { line-height: 5vw; font-size: 4vw; } .product-more-info .minerals-nutrients div:first-child { border-top: none; } .mn { display: flex; justify-content: space-between; } .mn:not(:last-child) { border-bottom: 2px solid #000; } .more-info-sweeteners { margin: .5rem 0; } #prod-mktg-txt { background-color: #d1e2ea; padding: 10px; margin-top: 10px; margin-bottom: 20px; } .product-links-informational { font-size: 1em; font-weight: bold; color: #000b52; padding-top: 10px; text-align: center; margin-bottom: 0px; } .website-link { text-align: center; margin-top: 10px; } .website-link a, .website-link a:link, .website-link a:visited, .website-link a:hover { color: #000b52; text-decoration: none; } .home-search.product-embed { margin: 30px auto; background: #d1e2ea; } .related-prod { text-align: center; } .related-prod-img { max-height: 222px; } h2 { font-weight: 800; font-family: "futura-pt"; margin: 0; margin-bottom: 20px; font-size: 1.4em; text-align: center; } .website-link { text-align: center; margin-top: 10px; } .website-link a, .website-link a:link, .website-link a:visited, .website-link a:hover { color: #000b52; text-decoration: none; } .bttm-links { margin: auto; text-align: center; position: relative; display: table; } .bttm-links a { display: inline-block; margin-right: 5px; margin-top: 10px; position: relative; } .bttm-links a.facebook-link, .bttm-links a.twitter-link { width: 45px; height: 45px; } .bttm-links a.facebook-link { background: url("/content/image/product-link-facebook.jpg") no-repeat; } .bttm-links a.twitter-link { background: url("/content/image/product-link-twitter.png") no-repeat; } .bttm-links .pdf-link, .bttm-links .email-link { display: block; width: 45px; height: 45px; float: right; background: url("/content/image/icon-pdf-wht.png"); background-repeat: no-repeat; background-position: 12px 7px; background-color: #1c82ba; } .bttm-links .email-link { background: url("/content/image/icon-email-share-wht.png"); background-repeat: no-repeat; background-position: 8px 8px; background-color: #1c82ba; } .disclaimer { display: block; list-style-type: disc; margin: 5px auto; padding: 10px 40px; } .disclaimer li { margin: 10px auto; } .product-custom-size-text { font-weight: bold; font-size: 1.25em; padding-bottom: 10px; margin-top: -10px; } /***************/ /* BRANDS PAGE */ /***************/ .brands .ingredient-content { background: #d1e2ea; padding-top: 10px; } #brand-grid { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 10px; } #brand-grid .brand-box { width: 33%; padding: 3px; display: flex; justify-content: center; } #brand-grid .brand-box .brand-box-image-container a { width: 100%; } #brand-grid .brand-box .brand-box-image-container a img { width: 100%; height: auto; } .brand-box { display: flex; flex-direction: row; margin: 0 auto; } /*******************/ /* Contact Us Page */ /*******************/ .contact .ingredient-content { background: #d1e2ea; margin-top: 10px; } .contact .ingredient-content.contact-nobg { background: transparent; } .contact-row { margin-top: 10px; width: 100%; margin-bottom: 20px; display: flex; position: relative; } .contact-row .line { position: absolute; right: 5%; width: 45%; top: 0; height: 2px; background-color: #CCC; border-bottom: 1px solid #dcdcdc; } .contact-row h2 { font-size: 120%; font-family: 'futura-pt'; border-bottom: 1px solid silver; color: #000b52; text-transform: uppercase; } .contact-row ul { list-style-type: none; margin: 0px; padding: 0px; } .contact-row ul li { display: inline; color: #000b52; margin-right: 2px; /*border: 1px solid red;*/ height: 35px; } .contact-row ul li a { color: #000b52; font-weight: bold; text-decoration: none; } .contact-row ul li a div { /*width:55px !important;*/ position: relative; display: inline-block; /*word-wrap: break-word;*/ font-size: 80%; height: 24px; } .contact-row .links { flex: .5; position: relative; left: auto; padding-left: 15px; padding-right: 15px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .contact-row .links div { float: left; width: 300px; } .contact-row .links .site-links, .contact-row .links .social-links { flex: 1; text-align: center; } .contact-row .links .site-links a, .contact-row .links .social-links a { width: 47%; display: inline-block; text-align: center; position: relative; text-decoration: none; font-size: 12.45px; font-family: "futura-pt"; line-height: .98em; color: #000b52; font-weight: bold; } .contact-row .links .site-links a img, .contact-row .links .social-links a img { width: 100%; max-width: 40px; } .contact-row .links .social-links { margin-top: 0; } .contact-row .contact-image-container { flex: .5; } .contact-row .contact-image-container a img { width: 100%; max-width: 250px; height: auto; border: 1px solid #CCC; } /*******************************/ /* Styles for Ingredient pages */ /*******************************/ .mobile.generic-content-container, .mobile.ingredient-content-container { position: relative; font-family: "droid-sans"; background-color: #fff; /*rgba(237,237,237,.8); $light-gray;*/ color: #000b52; padding: 0px; /*opacity: 0.90;*/ -webkit-transition: height 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */ -moz-transition: height 0.3s ease-out; /* Firefox 4-15 */ -o-transition: height 0.3s ease-out; /* Opera 10.50-12.00 */ transition: height 0.3s ease-out; } .mobile.generic-content-container h2, .mobile.ingredient-content-container h2 { color: #000b52; font-size: 24px; font-weight: bold; text-transform: uppercase; text-align: left; margin-top: 10px; margin-bottom: 0; padding: 20px 10px; padding-bottom: 0; } .mobile.generic-content-container .ingredient-header-bar, .mobile.ingredient-content-container .ingredient-header-bar { height: 52px; line-height: 4.2vw; position: relative; font-family: "futura-pt"; font-size: 4.2vw; font-weight: bold; text-align: left; background-color: #000b52 !important; color: #fff; text-transform: uppercase; border-bottom: none; padding: 4% 0; font-size: 4.8vw; height: auto; } .ingredient-content-wide { margin: 20px; float: left; min-width: 80%; } .ingredient-content { margin-bottom: 10px; margin-top: 10px; } .ingredient-content .summary { background: #d1e2ea; line-height: 1.4em; } .ingredient-content .summary p { padding: 20px 10px; line-height: 1.4em; } .ingredient-content .button { background-color: #000b52; padding: 10px; color: #fff; margin: 10px 0; } .ingredient-accordion-icon-plus, .ingredient-accordion-icon-minus { width: 32px; height: 32px; background-color: #000b52; border-bottom: 2px solid #CCC; text-align: center; content: "\002B" !important; background-image: url("/content/image/icon-accordian-plus.png") !important; background-position: 10px 8px; margin-bottom: 20px; } .ingredient-accordion-icon-minus { content: "\002D" !important; background-image: url("/content/image/icon-accordian-minus.png") !important; background-position: 13px 13px; } .ingredient-accordian { background-color: #d1e2ea; } .ingredient-accordian-item:last-of-type h3 { border-bottom: none; box-shadow: none; } .ingredient-accordian-item a { color: #1c82ba; } .ingredient-accordian-item h3 { font-family: "droid-sans"; border: none; min-height: 55px; color: #000b52; font-size: 14px; font-weight: bold; margin-top: 5px; margin-left: 8px; margin-right: 8px; /*background-color:$light-gray;*/ box-shadow: #909090 0 -1px inset; border-bottom: #fff 2px solid; border-radius: 0; cursor: pointer; } .ingredient-accordian-item h3.ui-accordion-header-active { box-shadow: none; border-bottom: none; } .ingredient-accordian-item h3 span { position: relative; float: left; top: 10px; margin-right: 10px; } .ingredient-accordian-item h3 p { margin: 0px; padding: 0px; padding-top: 15px; line-height: 1.4em; margin-bottom: 5px; } .ingredient-accordian-item div p { color: #000b52; line-height: 1.4em; padding: 0 5px 10px; } .ingredient-accordian-item > div { border: none; box-shadow: #909090 0 -1px inset; border-bottom: #fff 2px solid; padding-bottom: 10px; padding-top: 10px; padding-left: 5px; padding-right: 5px; border-radius: 0; color: #000b52; } .ingredient-accordian-item li { line-height: 1.4em; padding: 0 5px; } .ingredient-accordian-item table { border-collapse: collapse; text-align: left; } .ingredient-accordian-item table thead { border-bottom: 2px solid #909090; } .ingredient-accordian-item table tr td { padding: 8px; line-height: 1.428571429; vertical-align: top; border-top: 1px solid #909090; } .ingredient-accordian-item .other-prods-table { border-collapse: collapse; text-align: left; font-size: 85%; width: 100%; margin-top: -0.5em; } .ingredient-accordian-item .other-prods-table thead { border-bottom: 2px solid #909090; } .ingredient-accordian-item .other-prods-table tr td { padding: 8px; line-height: 1.428571429; vertical-align: top; border-top: 1px solid #909090; } .ingredient-accordian-item .legaltxt { font-size: 75%; } #glossaryContainer .ingredient-accordian div p { font-weight: normal; } #glossaryContainer .ingredient-accordian > div { font-weight: bold; } #glossaryContainer .ingredient-accordian div p:first-child { font-weight: bold; margin-bottom: -10px; } .ingredient-content.second-section { margin-top: 10px; } .ingredient-comparison-chart { height: 320px; width: 100%; position: relative; margin: auto; background: #dcdcdc; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #fff 0%, #d1e2ea 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(50%, 20%, #fff 0%, #d1e2ea 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at top, #fff 0%, #d1e2ea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$light-gray', endColorstr='$med-blue',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .ingredient-comparison-chart h2 { text-align: left; margin-left: 10px; padding: 10px 0; } .ingredient-comparison-chart .chart-canvas { margin-top: 10px; position: absolute; width: 100%; top: 40px; bottom: 0px; overflow: hidden; font-size: 16px; font-family: futura-pt; } .ingredient-comparison-chart .chart-canvas .comparison-bar { height: 36px; border-bottom: 7px solid #2b86b8; background-color: #5bb3e9; } .ingredient-comparison-chart .chart-canvas .comparison-bar.ppf { border-bottom: 7px solid #117840; background-color: #8dc642; } .ingredient-comparison-chart .chart-canvas .static-comparison-bar { height: 36px; border-bottom: 7px solid #2b86b8; background-color: #5bb3e9; position: absolute; left: 0px; } .ingredient-comparison-chart .chart-canvas .static-labels { position: absolute; visibility: inherit; opacity: 1; } .ingredient-tabbed-content { min-height: 300px; border-radius: 0 !important; background: none !important; border: none !important; margin-top: 20px; } .ingredient-tabbed-content li { width: auto; border: none !important; float: left; height: 36px; color: #474747; font-size: 11px; font-weight: bold; line-height: 36px; } .ui-tabs-panel:after { content: ""; display: table; clear: both; } .select-container { margin-top: 12px; margin-left: 5px; margin-right: 12px; margin-bottom: 20px; padding-bottom: 80px; } .select-container.glossary { padding: 0; margin: 0; } .select-container.glossary h3 { font-weight: normal; padding: 15px 0 5px; font-family: Droid-sans; } .select-container.glossary .search-container { display: flex; border: 1px solid #CCC; } .select-container.glossary .search-container input { padding: 7px; border: 1px solid #CCC; width: 70%; margin: 0; flex: 1; } .select-container.glossary .search-container .searchbttn { background-image: url(/Content/image/alreadyknow.png); display: inline-block; height: auto; border: none; background-repeat: no-repeat; background-position: center; background-color: #000b52; width: 40px; cursor: none; } .select-container .glossary { margin-left: 40px; } .select-container select { margin-top: 10px; margin-left: 8px; font-size: 12px; height: 37px; padding-left: 5px; border-radius: 0px; width: 47%; } .select-container select.left { float: left; } .select-container select.right { float: right; } .generic-content-container.ppf #glossaryContainer .select-container.glossary .search-container .searchbttn { background-image: url(/Content/image/alreadyknow_ppf.png); background-color: #18861a; } .ingredient-wide-table-container .select-container { max-width: 800px; margin-left: auto; margin-right: auto; } .electrolyte-graphic, .juice-graphic { width: 100%; position: relative; opacity: 0; margin-top: 20px; overflow: hidden; } .electrolyte-graphic { height: 270px; } .electrolyte-graphic .elements { width: 92%; height: 160px; position: absolute; top: 43px; left: 8%; -webkit-transform: scale(1.3); transform: scale(1.18); } .electrolyte-graphic .elements .element { position: relative; width: 30%; height: 77px; background-color: #000b52; color: #fff; text-align: center; line-height: 54px; font-family: "futura-pt"; font-weight: 800; font-size: 2.4em; margin-left: 1%; margin-bottom: 24px; float: left; } .electrolyte-graphic .elements .element.clear { background-color: rgba(0, 0, 0, 0); } .electrolyte-graphic .elements .element .foot { position: absolute; bottom: -20px; width: 100%; background-color: #1c82ba; border-top: 1px solid #909090; height: 22px; font-size: 14px; line-height: 18px; font-weight: 300; } .electrolyte-graphic .elements .element .atomic-weight { font-weight: 300; font-size: 10px; position: absolute; left: 3px; top: 3px; line-height: 11px; } .electrolyte-graphic .text-block { font-size: 12px; font-weight: 800; color: #000b52; } .electrolyte-graphic .text-block .line { top: 23px; left: 346px; position: relative; } .electrolyte-graphic .text-block .line span { position: absolute; left: 40px; font-weight: 200; line-height: 1.2em; } .electrolyte-graphic .text-block .body { margin-top: 15px; width: 175px; line-height: 1.1em; } .juice-graphic { margin-top: 5%; margin-bottom: 5%; opacity: inherit; } .juice-graphic img { height: auto; width: 100%; } .juice-graphic p { font-family: "futura-pt"; font-weight: 800; font-size: 16px; line-height: .98em; text-align: center; color: #000b52; margin-top: 15px; } .juice-graphic p:last-child { text-align: center; } .content-header-text { font-size: 100%; padding: 0px 10px; line-height: 1.4em; font-weight: normal; font-family: "Droid-sans"; color: #000b52; } .ui-tabs-nav { background-color: rgba(0, 0, 0, 0) !important; border: none !important; margin-left: 10px; } .ui-tabs-nav li { background-color: #dcdcdc !important; border-radius: 0 !important; outline: none; -webkit-transition: background-color 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */ -moz-transition: background-color 0.3s ease-out; /* Firefox 4-15 */ -o-transition: background-color 0.3s ease-out; /* Opera 10.50-12.00 */ transition: background-color 0.3s ease-out; margin-left: 4px; } .ui-tabs-nav li a { color: #474747 !important; outline: none; width: 100%; line-height: 33px; display: block; padding-left: 10px; padding-right: 10px; } .ui-tabs-nav li.ui-tabs-active { border: none !important; border-left: 1px solid #CCC !important; border-top: 1px solid #CCC !important; border-right: 1px solid #CCC !important; background-color: rgba(0, 0, 0, 0) !important; } .ui-tabs-nav li.ui-tabs-active a { color: #000b52 !important; box-shadow: rgba(237, 237, 237, 0.8) 0 2px; } .ui-tabs-nav li.ui-tabs-active a.white { background-color: #fff !important; box-shadow: #fff 0 2px; } .ui-tabs .ui-tabs-nav { border: none !important; border-radius: 0 !important; } .ui-tabs-panel.white { background-color: #fff; } .ingredient-tab-other { padding-top: 20px; } .ingredient-tab-other p { font-size: 12px; color: #474747; padding: 10px; } .ingredient-tabbed-content table { width: 100%; border-spacing: 0; } .ingredient-tabbed-content table th { color: #fff; background-color: #000b52; font-size: 12px; text-align: center; font-family: "droid-sans"; line-height: 14px; } .ingredient-tabbed-content table th.name { text-align: left; padding-left: 20px; font-weight: bold; } .ingredient-tabbed-content table th span.arrow { float: right; margin-right: 10px; } .ingredient-tabbed-content table th span.small-text { font-size: 9px; } .ingredient-tabbed-content table tr { height: 42px; } .ingredient-tabbed-content table tr:nth-child(odd) { background-color: #d1e2ea; } .ingredient-tabbed-content table tr:nth-child(even) td.sorted { background-color: #abd5e4; } .ingredient-tabbed-content table tr td { text-align: center; box-shadow: -1px 0 0 0 #fff inset; border-right: 1px solid #909090; font-family: "droid-sans"; color: #000b52; font-size: 12px; } .ingredient-tabbed-content table tr td.name { width: 65%; overflow: hidden; text-align: left; padding-right: 0; padding-left: 20px; } .ingredient-tabbed-content table tr td.phosphorus { border-right: none; width: 130px; } .ingredient-tabbed-content table tr td.name-other { width: 340px; overflow: hidden; text-align: left; padding-right: 0; padding-left: 20px; } .ingredient-tabbed-content table tr td.fdaCaffeineCol { width: 130px; padding-right: 10px; border-right: none; box-shadow: none; } .ingredient-tabbed-content table tr td.fdaSodiumCol, .ingredient-tabbed-content table tr td.fdaPhosphorusCol { border-right: none; box-shadow: none; } .ingredient-tabbed-content table tr td.size-other { padding-right: 15px; padding-left: 10px; width: 95px; } .ingredient-tabbed-content table tr td.sorted { background-color: #abd5e4; } .ingredient-tabbed-content table tr td.sweetener-checkbox { padding-right: 0px; padding-left: 10px; width: 90px; text-align: center; } .ingredient-tabbed-content table .sweetener td.name { width: 30%; } .ingredient-notab-content h3 { margin-top: 20px; margin-bottom: 20px; color: #000b52; } .ingredient-notab-content table { width: 100%; border-spacing: 0; } .ingredient-notab-content table th { color: #fff; background-color: #000b52; font-size: 12px; text-align: center; font-family: "droid-sans"; line-height: 20px; vertical-align: middle; } .ingredient-notab-content table th.name { text-align: left; padding-left: 20px; font-weight: bold; } .ingredient-notab-content table th span.arrow { float: right; margin-right: 10px; } .ingredient-notab-content table th span.arrow.arrow-two-line { margin-top: -10px; } .ingredient-notab-content table th span.small-text { font-size: 9px; } .ingredient-notab-content table tr { height: 42px; } .ingredient-notab-content table tr:nth-child(odd) { background-color: #d1e2ea; } .ingredient-notab-content table tr:nth-child(even) td.sorted { background-color: #abd5e4; } .ingredient-notab-content table tr td { text-align: center; box-shadow: -1px 0 0 0 #fff inset; border-right: 1px solid #909090; font-family: "droid-sans"; color: #000b52; font-size: 12px; } .ingredient-notab-content table tr td.name { width: 65%; overflow: hidden; text-align: left; padding-right: 0; padding-left: 20px; } .ingredient-notab-content table tr td.phosphorus { border-right: none; width: 130px; } .ingredient-notab-content table tr td.name-other { width: 340px; overflow: hidden; text-align: left; padding-right: 0; padding-left: 20px; } .ingredient-notab-content table tr td.fdaCaffeineCol { width: 130px; padding-right: 10px; border-right: none; box-shadow: none; } .ingredient-notab-content table tr td.fdaSodiumCol, .ingredient-notab-content table tr td.fdaPhosphorusCol { border-right: none; box-shadow: none; } .ingredient-notab-content table tr td.size-other { padding-right: 15px; padding-left: 10px; width: 95px; } .ingredient-notab-content table tr td.sorted { background-color: #abd5e4; } .ingredient-notab-content table tr td.sweetener-checkbox { padding-right: 0px; padding-left: 10px; width: 90px; text-align: center; } .ingredient-notab-content table .sweetener td.name { width: 30%; } .nutrition-info-loading { text-align: center; margin-top: 50px; } .nutrition-info-noresult { text-align: center; font-size: 100%; font-weight: bold; padding-top: 30px; } /**************/ /* SWEETENERS */ /**************/ .ingredient-tabbed-content.sweetener { min-height: 0px; } .ingredient-tabbed-content.sweetener h3 { margin: 10px 5px; } .ingredient-tabbed-content.sweetener h2 { margin-bottom: 5px; margin-top: 15px; font-size: 1.4em; text-transform: uppercase; font-weight: 800; font-family: "futura-pt"; display: block; color: #000b52; padding: 0; } .ingredient-tabbed-content.sweetener table { margin: 15px 0; } .ingredient-tabbed-content.sweetener .error { color: red; } .sweetener .select-container { padding-bottom: 0px; max-width: 900px; } .sweetener .select-container select { width: 31%; } #sweetenerSearchForm { display: flex; border: 1px solid #CCC; } #sweetenerSearch { padding: 7px; width: 70%; margin: 0; border: 1px solid #dcdcdc; flex: 1; } .clear-sweetener { cursor: pointer; background-image: url(/content/image/icon-clear-filter.png) !important; display: block; height: auto; border: none; background-repeat: no-repeat; background-position: center; background-color: #000b52 !important; width: 32px; } /* De-Swipered slides */ .health-believe-slide-container .slide-wrapper { width: 100%; display: block; } .health-believe-slide-container .slide-wrapper .slide { width: 100%; display: block; margin-bottom: 10px; border: 1px solid #1c82ba; } .health-believe-slide-container .slide-wrapper .slide .did-you-know-bubble { width: 100%; left: auto; } /****************/ /* WHERE TO BUY */ /****************/ .wheretobuy-content-container iframe { width: 100%; min-height: 350px; } /*****************/ /* ALLERGENS */ /*****************/ .ingredient-tabbed-content.allergen { min-height: 0px; } .ingredient-tabbed-content.allergen h3 { margin: 10px 5px; } .ingredient-tabbed-content.allergen h2 { margin-bottom: 5px; margin-top: 15px; font-size: 1.4em; text-transform: uppercase; font-weight: 800; font-family: "futura-pt"; display: block; color: #000b52; padding: 0; } .ingredient-tabbed-content.allergen table { margin: 15px 0; } .ingredient-tabbed-content.allergen .error { color: red; } .allergen .select-container { padding-bottom: 0px; max-width: 900px; } #allergenSearchForm { display: flex; border: 1px solid #CCC; } #allergySearch { padding: 7px; width: 70%; margin: 0; border: 1px solid #dcdcdc; flex: 1; } .clear-allergen { cursor: pointer; background-image: url(/content/image/icon-clear-filter.png) !important; display: block; height: auto; border: none; background-repeat: no-repeat; background-position: center; background-color: #000b52 !important; width: 32px; } /************************/ /* DID YOU KNOW BUBBLES */ /************************/ .did-you-know-bubble { position: relative; background-color: #fff; width: 50%; margin: 0 auto; font-family: "futura-pt"; font-weight: 800; margin-top: 25px; } .did-you-know-bubble:last-of-type { margin-bottom: 30px; } .did-you-know-bubble:nth-child(even) .header { background-position: top right; } .did-you-know-bubble:nth-child(even) .header .button-more { text-align: right; left: 10px; } .did-you-know-bubble:nth-child(even) .header .button-more img { left: 0; } .did-you-know-bubble:nth-child(odd) .header { background-position: top left; } .did-you-know-bubble:nth-child(odd) .header .button-more { text-align: left; right: 10px; } .did-you-know-bubble:nth-child(odd) .header .button-more img { right: 0px; } .did-you-know-bubble .header { position: relative; width: 100%; height: 177px; cursor: pointer; background-repeat: no-repeat; } .did-you-know-bubble .header .top-left, .did-you-know-bubble .header .top-right, .did-you-know-bubble .header .bottom-left, .did-you-know-bubble .header .bottom-right { position: absolute; } .did-you-know-bubble .header .top-left, .did-you-know-bubble .header .top-right { top: 20px; } .did-you-know-bubble .header .bottom-left, .did-you-know-bubble .header .bottom-right { bottom: 25px; } .did-you-know-bubble .header .top-left, .did-you-know-bubble .header .bottom-left { left: 0; text-align: left; } .did-you-know-bubble .header .top-right, .did-you-know-bubble .header .bottom-right { right: 0; text-align: right; } .did-you-know-bubble .header .text-big, .did-you-know-bubble .header .text-small { margin-left: 20px; margin-right: 20px; margin-top: -.16em; margin-bottom: -1em; display: inline-block; } .did-you-know-bubble .header .text-big { font-size: 34px; } @media screen and (max-width: 768px) { .did-you-know-bubble .header .text-big { font-size: 28px; } } .did-you-know-bubble .header .text-small { font-size: 16px; } @media screen and (min-width: 768px) { .did-you-know-bubble .header .text-small { margin-top: -1em; } } .did-you-know-bubble .header .text-small .button-more { position: absolute; bottom: 5px; color: #CCC; font-size: 16px; font-weight: 400; width: 55px; height: 18px; line-height: 1em; z-index: 999; } .did-you-know-bubble .header .text-small .button-more img { position: absolute; top: 2px; transform-origin: center center; -webkit-transform-origin: center center; transition: all ease-out .6s; -wekit-transition: all ease-out .6s; } .did-you-know-bubble .header .text-small .button-more span:before { content: "more"; } .did-you-know-bubble .header.open .header .button-more { width: 45px; } .did-you-know-bubble .header.open .header .button-more img { transform: rotate(180deg); -webkit-transform: rotate(180deg); } .did-you-know-bubble .header.open .header .button-more span:before { content: "less"; } .did-you-know-bubble .header.print .header .button-more img { transform: rotate(0deg); -webkit-transform: rotate(0deg); transition: none; -wekit-transition: none; } .did-you-know-bubble .header.print .header .button-more span:before { content: ""; } .did-you-know-bubble .header .fact { padding: 20px; font-size: 14px; font-weight: 400; padding-top: 0; padding-bottom: 0; padding-left: 20px; padding-right: 20px; overflow: hidden; max-height: 0; transition: max-height .6s ease-out, padding .3s linear .3s; -webkit-transition: max-height .6s ease-out, padding .3s linear .3s; } .did-you-know-bubble .header.open .fact, .did-you-know-bubble .header.print .fact { max-height: 315px; padding: 20px; transition: max-height .6s ease-out, padding .6s ease-out; -webkit-transition: max-height .6s ease-out, padding .6s ease-out; } .did-you-know-bubble .header.print .fact { transition: none; -webkit-transition: none; } /*********************/ /* PRODUCT FIND PAGE */ /*********************/ .product-search-box { padding: 10px 0; background: none; } .product-search-box .intro { margin: 10px 0 20px; } .product-search-box form { transition: all 0.1s ease-out; display: flex; border: 1px solid #CCC; } .product-search-box .intro { margin: 0 5%; } .product-search-box .searchTextInput { padding: 7px; width: 70%; margin: 0; flex: 1; } .product-search-box .searchTextInput::placeholder { color: #000b52; } .product-search-box #findSearchBtn { background-image: url("/Content/image/alreadyknow.png"); display: block; height: auto; border: none; background-repeat: no-repeat; background-position: center; background-color: #000b52; width: 40px; } .or-separator { width: 100%; text-align: left; font-weight: bold; font-size: 2rem; margin-bottom: 15px; } .product-finder-metadata { text-align: center; } .product-finder-metadata .num-matches { font-size: 1.45rem; } .product-finder-metadata .num-matches .num-matches-number { font-weight: bold; } .product-finder-metadata .compare-count { display: none; } a.button-reset { cursor: pointer; display: inline-block; margin-bottom: 10px; } a.button-reset .icon-reset { width: 32px; height: 32px; border-radius: 16px; background: url("/content/image/icon-reset.png") no-repeat center center; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.6) 0 1px 0px 0px; margin-bottom: 3px; transition: all ease-out .6s; background-position: 7px 50%; } a.button-reset p { color: #000b52; font-family: "futura-pt"; font-weight: 100; font-size: 11.77px; padding-top: 5px; } a.button-reset:active, a.button-reset:hover { background-color: #fff; color: #000b52; } a.button-reset:active .icon-reset, a.button-reset:hover .icon-reset { box-shadow: rgba(0, 0, 0, 0.6) 0 2px 1px 1px; } .result-container { justify-content: center; /*margin-left: 15%;*/ } .result-sizer { width: 30%; } .result-element { margin: 6px 5px; /* was 10px */ background-color: #d1e2ea; width: 30%; min-width: 75px; max-width: 480px; height: 35vw; padding: 25px 0px; float: left; position: relative; } .result-element:hover .product-name-container { margin-top: -15%; height: 12vw; padding-top: 10px; } .result-element .over { margin: 0 0 0 10px; } .result-element a.main-link { position: absolute; width: 100%; height: 90%; bottom: 0; text-align: center; vertical-align: middle; } .result-element a.main-link img { width: 44%; } .product-name-container { text-align: center; width: 100%; height: 0px; padding-top: 0px; overflow: hidden; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; margin-top: 20%; margin-left: -10px; position: absolute; bottom: 0; background-color: #000b52; text-align: center; } .product-name { text-align: center; font-family: "futura-pt"; font-size: 3vw; line-height: 3.2vw; color: #fff; font-weight: bold; } .user-ui-informational.auto-alpha-0.loading { text-align: center; padding: 15px; } .filter-set select { width: 100%; margin: 5px 0; padding: 10px; } .filter-set .filter-box { width: 100%; margin: auto; margin-bottom: 10px; border-radius: 0; color: #000b52; padding-bottom: 15px; } .filter-set a { color: #000b52; } #ascrail2000 { display: none !important; } .filter-box { overflow: hidden; -webkit-transition: all .4s ease-in; -moz-transition: all .4s ease-in; -o-transition: all .4s ease-in; transition: all .4s ease-in; font-family: "droid-sans"; font-size: 12px; margin: 0 0 10px; width: 100%; background: none; border: 1px solid #CCC; padding: 0; max-height: 40px; } .filter-box .open { max-height: 392px; cursor: default; } .filter-box .bubbles.open, .filter-box.electrolytes.open, .filter-box.juice.open { max-height: 133px; } .filter-box.caffeine { text-align: center; } .filter-box.caffeine .per-serving { display: none; } .filter-box.caffeine .more-info { display: inline-block; margin-top: 15px; } .filter-box.caffeine.open { max-height: 298px; } .filter-box.caffeine.open .per-serving { display: block; color: #fff; position: absolute; left: 94px; top: 23px; } .filter-box.vitamins.open { max-height: 323px; } .filter-box.calories.open { max-height: 298px; border: none; } .filter-box.calories.open .filter-box-row-toggle-large, .filter-box.calories.open p { opacity: 1; } .filter-box.calories .filter-box-row-toggle-large, .filter-box.calories p { opacity: 0; } .filter-box.calories .per-serving { color: #fff; position: absolute; left: 94px; top: 23px; } .filter-box.sodium.open { max-height: 211px; border: none; } .filter-box.sweetener.open { max-height: 385px; } .filter-box.allergens.open { max-height: 449px; } .filter-box.cleared { background-color: #fff; } .filter-box.cleared .title { color: #000b52; background: #fff; text-shadow: none; } .filter-box.cleared .icon-plus { display: block; } .filter-box .icon-logo { height: 39px; width: 39px; display: block; position: absolute; right: 0; background-position: left center; } .filter-box .slider-minimum, .filter-box .slider-maximum { position: relative; color: #fff; font-size: 25px; text-shadow: 0px 1px 0 #000b52; margin-left: 20px; margin-right: 10px; top: 0px; float: left; } .filter-box .slider { position: relative; top: 12px; width: 60%; float: left; } .filter-box .slider-value { visibility: hidden; } .filter-box.slider-box p { text-align: center; margin-top: -10px; margin-bottom: -4px; } .filter-box .slider-user-value { position: relative; color: #1c82ba; font-size: 15px; font-weight: bold; top: 12px; } .filter-box .ui-slider-handle { background: url("/content/image/slider-head.png"); width: 18px; height: 19px; border: none; outline: transparent; } .filter-box .ui-slider-range, .filter-box .slider-range { background: #abd5e4; border: none; border-radius: 0; } .filter-box .ui-slider { background: #1c82ba; border: none; height: 13px; border-radius: 0; border-top: 3px solid #1c82ba; } .slider-range { background: #abd5e4; border: none; border-radius: 0; } .ui-slider-handle { background: url("/content/image/slider-head.png"); width: 18px; height: 19px; border: none; outline: transparent; } .filter-box-header { position: relative; width: 100%; top: 0; left: 0; cursor: pointer; } .filter-box-header .icon-plus { background-position: left center; position: absolute; right: 10px; width: 13px; height: 12px; top: 12px; background-image: url("/Content/image/plus.png"); background-repeat: no-repeat; display: none; } .filter-box-header .title { font-weight: bold; font-size: 16px; width: 100%; text-align: center; transition: all ease-out .6s; font-family: Droid-sans; position: static; padding: 12px 10px; display: block; text-align: left; text-shadow: none; color: #fff; background: #000b52; } .filter-box-header .link-clear, .filter-box-header .link-minimize, .filter-box-header .link-info { position: absolute; display: block; width: 20px; height: 20px; top: 10px; } .filter-box-header .link-clear { right: 4px; background-image: url("/content/image/icon-clear-filter.png"); background-repeat: no-repeat; background-position: 0px 3px; } .filter-box-header .link-minimize { right: 25px; background-image: url("/content/image/icon-minimize.png"); background-repeat: no-repeat; background-position: 2px 2px; } .filter-box-header .link-info { right: 50px; } .filter-box.open .filter-box-header { cursor: default; } .search-close { background-image: url("/content/image/icon-clear-filter.png"); background-position: 0 3px; background-repeat: no-repeat; height: 20px; margin-left: 8px; margin-top: 5px; padding: 3px 8px; width: 20px; } #wiicon { background-image: url("/Content/image/FYM ICONS/WhatsInside.png"); background-repeat: no-repeat; background-position: left center; } #calicon { background-image: url("/Content/image/FYM ICONS/Calories.png"); background-repeat: no-repeat; background-position: left center; } #bubblicon { background-image: url("/Content/image/FYM ICONS/Bubbles.png"); background-repeat: no-repeat; background-position: left center; } #caffeicon { background-image: url("/Content/image/FYM ICONS/Caffeine.png"); background-repeat: no-repeat; background-position: left center; } #sweeticon { background-image: url("/Content/image/FYM ICONS/Sweetner.png"); background-repeat: no-repeat; background-position: left center; } #juicicon { background-image: url("/Content/image/FYM ICONS/juice.png"); background-repeat: no-repeat; background-position: left center; } #Vitamicon { background-image: url("/Content/image/FYM ICONS/vitamins.png"); background-repeat: no-repeat; background-position: left center; } #Elecicon { background-image: url("/Content/image/FYM ICONS/electrolytes.png"); background-repeat: no-repeat; background-position: left center; } #Sodicon { background-image: url("/Content/image/FYM ICONS/sodium.png"); background-repeat: no-repeat; background-position: left center; } #allergicon { background-image: url("/Content/image/FYM ICONS/allergens.png"); background-repeat: no-repeat; background-position: left center; } #sicon { background-image: url("/Content/image/FYM ICONS/size.png"); background-repeat: no-repeat; background-position: left center; } .filter-box-row-header { text-align: center; font-weight: bold; width: 100%; line-height: 19px; height: 19px; color: #000b52; box-shadow: #1c82ba 0 -1px inset; border-bottom: 1px solid #abd5e4; text-transform: uppercase; } .filter-box-row-toggle { text-align: left; line-height: 50px; box-shadow: #1c82ba 0 -1px inset; border-bottom: 1px solid #abd5e4; } .filter-box-row-toggle span { margin-left: 5px; width: 104px; overflow: hidden; height: 50px; font-size: 3.8vw; padding: 5px; } .filter-box-row-toggle a { text-align: center; display: block; float: right; height: 50px; width: 18vw; border-left: 1px solid #1c82ba; text-decoration: none; font-size: 20px; line-height: 50px; } .filter-box-row-toggle a:hover, .filter-box-row-toggle-large a:hover { text-decoration: none; color: #fff; background-color: #000b52; } .filter-box-row-toggle a.selected, .filter-box-row-toggle-large a.selected { background-color: #000b52; color: #fff !important; } .filter-box-row-toggle-large { text-align: left; line-height: 19px; border-left: 1px solid gray; border-top: 1px solid gray; display: flex; flex-wrap: wrap; height: auto; margin-top: 0; } .filter-box-row-toggle-large a { height: 80px; width: 50%; text-align: center; line-height: 19px; font-weight: bold; display: table-cell; vertical-align: middle; text-decoration: none; font-size: 3.8vw; border-right: 1px solid #909090; border-bottom: 1px solid #909090; line-height: 60px; height: 60px; text-shadow: none; color: #000b52; } .filter-box-row-toggle-large a .line1 { font-size: 25px; margin-top: 20px; display: block; } .filter-box-row-toggle-large a .line2 { font-size: 12px; margin-top: 2px; display: block; } .filter-box-row-toggle-large .three a { width: 33.3%; padding: 5px; padding-top: 24px; text-transform: uppercase; line-height: 1.1em; } /*******************/ /* Timeline Styles */ /*******************/ .timeline-container { margin-top: 20px; } .timeline-container .left { float: left; } .timeline-container .right { float: right; } .timeline-container .timeline-entry { margin-bottom: 5px; clear: both; position: relative; clear: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .timeline-container .timeline-entry .year { line-height: 0.5 !important; text-align: center; display: block; width: 100%; margin-bottom: 10px; line-height: 1 !important; } .timeline-container .timeline-entry .year span { display: inline-block; position: relative; line-height: 0.5 !important; line-height: 0.2 !important; } .timeline-container .timeline-entry .year span:before, .timeline-container .timeline-entry .year span:after { content: ""; position: absolute; height: 5px; border-bottom: 1px solid #000b52; border-top: 1px solid #000b52; top: 0; width: 245%; } .timeline-container .timeline-entry .year span:before { right: 100%; margin-right: 15px; } .timeline-container .timeline-entry .year span:after { left: 100%; margin-left: 15px; } .timeline-container .timeline-entry .year.short span:before, .timeline-container .timeline-entry .year.short span:after { content: ""; position: absolute; height: 5px; border-bottom: 1px solid #000b52; border-top: 1px solid #000b52; top: 0; width: 65%; } .timeline-container .timeline-entry .bubble { width: 60%; display: inline-block; vertical-align: middle; } .timeline-container .timeline-entry .bubble.full-width { width: 90%; } .timeline-container .timeline-entry .bubble h3 { margin-bottom: 5px; } .timeline-container .timeline-entry .product { display: inline-block; vertical-align: middle; padding-left: 20px; } .legal-page .terms-list { list-style-type: disc; margin-left: 20px; padding: 20px 10px; } .legal-page .terms-list li { line-height: 1.4em; } /*****************/ /* MEDIA QUERIES */ /*****************/ @media screen and (max-width: 960px) { .contact-row .links { top: 0px; padding-top: 70px; } .contact-row .links .social-links { margin-top: 0px; } } @media screen and (max-width: 880px) { .contact-row .links { top: 0px; padding-top: 40px; } .contact-row .links .social-links { margin-top: 20px; } } @media (max-width: 525px) { .allergen .select-container select { width: 95%; } .sweetener .select-container select { width: 95%; } } @media (max-width: 525px) { .did-you-know-bubble { width: 65%; left: 0; } .result-element:hover .product-name-container { height: 15.5vw; } } @media (max-width: 470px) { .contact-row .links { top: 0px; padding-top: 15px; } .contact-row .links div { float: none; width: 150px; } .contact-row .links .site-links a div { left: 45px; top: 8px; } .contact-row ul li a img { width: 40px; } } @media (max-width: 425px) { .did-you-know-bubble { width: 70%; left: -3%; } .result-element:hover .product-name-container { height: 16.25vw; } } @media (max-width: 375px) { .result-element { height: 24vh; } .result-element:hover .product-name-container { height: 17.5vw; } } @media (max-width: 350px) { .did-you-know-bubble .header .text-big { font-size: 24.4px; } .did-you-know-bubble .header .text-small { font-size: 12.4px; } } /******************/ /* PRIVACY POLICY */ /******************/ .privacy h2 { padding: 0; margin-bottom: 10px; } .privacy p { margin-bottom: 10px; } select { appearance: none; -moz-appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: 98%; background-size: auto 20%; background-color: white; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAAeCAYAAAB9hg0IAAAACXBIWXMAAAsSAAALEgHS3X78AAABBklEQVRYheXZuxGCUBCF4V/HWiiDVjQg11I0J5BWKINmcHCQ8YFwH7sX7uWEG+zsNxueXdu2bCGHzpiXzRU4J+q91UV2GT6al80dOC5+lmyqushO3cb9a20/qNLwPTMgeYeSFvYDyTeUNLA/SMagxI0dRfIPSpzYv0imoMSFnUQyByUO7CwSEyjrxhohMYWyTqwxEhso68JaIbGFsg6sNRIXKMtinZC4QlkG64zEB0pYrBcSXyhhsN5IJKDoYkWQSEHRwYohkYQiixVFIg1FBiuORAOKH1YFiRYUN6waEk0odlhVJNpQzLDqSEJAmcYGQRIKyjg2GLJL8O6lbwQIieyyjZIJeABbnI05UcVn5QAAAABJRU5ErkJggg=="); position: relative; outline: none; color: #ffffff; font-family: Droid-sans; font-weight: bold; font-size: 16px; border: none; -webkit-transition: all .4s ease-in; -moz-transition: all .4s ease-in; -o-transition: all .4s ease-in; transition: all .4s ease-in; color: #000b52; border: 1px solid #CCC; margin: 5px 0; width: 100%; padding: 8px; padding-right: 15px; } select.cleared { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } /*********************************/ /* Styles for Search Result Page */ /*********************************/ .search-result h2 { color: #000b52; font-size: 24px; font-weight: bold; text-transform: uppercase; text-align: left; margin-top: 10px; margin-bottom: 0; padding: 0 10px; padding-bottom: 10px; } .search-result a, .search-result a:hover, .search-result a:link, .search-result a:visited { text-align: center; font-size: 100%; margin-top: 10px; margin-bottom: 0; padding: 0 10px; color: #000b52; line-height: 1.25; font-weight: normal; } .search-result p { text-align: left; font-size: 100%; font-weight: normal; color: #000b52; padding-left: 10px; } /********************************/ /* OFFSITE LINK DISCLAIMER PAGE */ /********************************/ .link-disclaimer p { padding: 10px; } .disclaimer-bttn { margin: 10px auto; padding-left: 10px; } .disclaimer-bttn a { background-color: #000b52; color: #fff; font-family: "futura-pt"; font-weight: 400; padding: 6px; text-decoration: none; outline: none; transition: background-color .6s ease-out; display: inline-block; } /*******************************/ /* Styles for Ingredient pages */ /*******************************/ .ppf h2 { font-size: 24px; } .ppf .ingredient-content { margin-bottom: 10px; margin-top: 10px; } .ppf .ingredient-content .summary { background: #dcdcdc; line-height: 1.4em; } .ppf .ingredient-content .summary p { padding: 20px 10px; line-height: 1.4em; } .ppf .ingredient-accordion { background-color: #dcdcdc; } .ppf .ingredient-comparison-chart { background: #fff; } .ppf.footer { background-color: #474747; } /*******************************/ /* Styles for Ingredient pages */ /*******************************/ .ppf.generic-content-container, .ppf.ingredient-content-container { color: #474747; } .ppf.generic-content-container h2, .ppf.ingredient-content-container h2 { font-size: 24px; } .ppf.generic-content-container h2, .ppf.generic-content-container h3, .ppf.ingredient-content-container h2, .ppf.ingredient-content-container h3 { color: #474747; } .ppf.generic-content-container .ingredient-accordion-icon-plus, .ppf.generic-content-container .ingredient-accordion-icon-minus, .ppf.ingredient-content-container .ingredient-accordion-icon-plus, .ppf.ingredient-content-container .ingredient-accordion-icon-minus { background-color: #474747; } .ppf.generic-content-container .print-preview, .ppf.ingredient-content-container .print-preview { background-image: url("/content/image/icon-print-ppf.png"); } @media screen and (max-width: 767px) { .ppf.generic-content-container .print-preview, .ppf.ingredient-content-container .print-preview { position: relative; } } .ppf.generic-content-container .ingredient-content, .ppf.ingredient-content-container .ingredient-content { margin-bottom: 10px; margin-top: 10px; } .ppf.generic-content-container .ingredient-content .summary, .ppf.ingredient-content-container .ingredient-content .summary { background: #dcdcdc; line-height: 1.4em; } .ppf.generic-content-container .ingredient-content .summary p, .ppf.ingredient-content-container .ingredient-content .summary p { padding: 20px 10px; line-height: 1.4em; } .ppf.generic-content-container .ingredient-header-bar, .ppf.ingredient-content-container .ingredient-header-bar { color: #fff; background-color: #8dc642; } .ppf.generic-content-container .ingredient-accordion, .ppf.ingredient-content-container .ingredient-accordion { background-color: #dcdcdc; } .ppf.generic-content-container .ingredient-comparison-chart, .ppf.ingredient-content-container .ingredient-comparison-chart { background: #fff; } .ppf.generic-content-container .ingredient-tabbed-content table tr, .ppf.ingredient-content-container .ingredient-tabbed-content table tr { background-color: #dcdcdc; } .ppf .select-container.glossary .search-container .searchbttn { background-color: #474747; } .ppf .electrolyte-graphic .elements .element { background-color: #18861a; color: #fff; } .ppf .electrolyte-graphic .elements .element.clear { background-color: rgba(0, 0, 0, 0); } .ppf .electrolyte-graphic .elements .element .foot { background-color: #dcdcdc; color: #474747; } /****************/ @charset "UTF-8"; html.full-width { min-width: 0 !important; } html.full-width body { min-width: 0 !important; } html.no-top-container-pad body .content-container { padding-top: 0px; } html body { min-height: 100vh; position: relative; } /* PBF general styles shared across pages */ /* PPF general styles shared across pages */ .search-close.ppf { background-image: url(/content/image/icon-clear-filter_green.png); } .ppf .ingredient-header-bar { font-family: "Nunito", Helvetica, sans-serif; color: #18861a !important; font-size: 45px; line-height: 45px; font-weight: 200; text-transform: none; margin-top: 0; } .ppf .segment button.active, .ppf .segment a.active { background: #18861a; } .ppf .button:hover { background-color: #18861a; } .ppf .generic-content-container { color: #474747; } .ppf .generic-content-container .generic-header-bar { font-family: "Nunito", Helvetica, sans-serif; background-color: #18861a; } .ppf .generic-content-container a { color: #474747; text-decoration: underline; border: 1px solid #474747; background: transparent; text-decoration: none; font-size: 19px; } .ppf .generic-content-container a:hover { color: white; box-shadow: none; border: 1px solid transparent; } .ppf .generic-content-container p.intro a:hover, .ppf .generic-content-container p.intro a:link, .ppf .generic-content-container p.intro a:active, .ppf .generic-content-container p.intro a:visited { color: #474747; text-decoration: underline; } .search-close { background-image: url(/content/image/icon-clear-filter_blue.png); background-position: 0 3px; background-repeat: no-repeat; height: 20px; margin-left: 8px; margin-top: 5px; padding: 3px 8px; width: 20px; } .expandable.generic { display: flex; flex-direction: column; width: 320px; box-sizing: content-box; position: relative; margin-right: 15px; border: 1px solid #CCC; } @media (max-width: 768px) { .expandable.generic { width: 100%; margin: 4px 0px; } } .expandable.generic > .expand-head { width: 100%; min-height: 40px; line-height: 40px; vertical-align: middle; padding: 0px 4%; font-weight: bold; color: #474747; background-color: white; background-image: url("/Content/image/icons/icon-plus-dark-gray.svg"); background-repeat: no-repeat; background-position: 95% center; background-size: 22px; padding-right: 15%; padding-left: 4%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .expandable.generic > .expand-body { width: 100%; display: none; transform: scale(0); opacity: 0; transition: transform 250ms ease-in-out, opacity 250ms ease-in-out; position: absolute; z-index: 1; top: 40px; background: white; max-height: 200px; overflow-y: scroll; border: 1px solid #909090; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); } .expandable.generic.open > .expand-head { color: white; background-color: #474747; background-image: url("/Content/image/icons/icon-x-white.svg"); } .expandable.generic.open > .expand-body { display: block; transform: scaleY(1); transform-origin: top center; opacity: 1; animation: scaleIn 250ms forwards ease-in-out; } .expandable.generic.open > .expand-body div { cursor: pointer; padding: 5px; } .expandable.generic.open > .expand-body div.active { background-color: #474747; color: white; font-weight: bold; } .expandable.generic.select > .expand-head { background-image: url("/Content/image/icons/icon-arrow-down-dark-gray.svg"); } .expandable.generic.select.open > .expand-head { background-image: url("/Content/image/icons/icon-arrow-down-white.svg"); } .expandable.generic.catg, .expandable.generic.brand, .expandable.generic.size { margin-top: 10px; } p.intro { margin: 10px 0 40px; text-align: center; } .segment { font-size: 0px; } .segment button, .segment a { background: #dcdcdc; border: none; display: inline-flex; padding: 7px 10px; font-size: 14px; transition: background 300ms; border-right: 1px solid #cdcdcd; } .segment button:first-child, .segment a:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .segment button:last-child, .segment a:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-right: 0px; } .segment button:hover, .segment a:hover { background: #cfcfcf; } .segment button.active, .segment a.active { background: #000b52; color: #fff; } .button { font-size: 14px; vertical-align: middle; border: 1px solid #d6d6d6; color: #474747; text-align: center; padding: 10px 15px; font-weight: 500; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; transition: all 300ms; text-decoration: none; } .button:hover { background-color: #000b52; color: white; text-decoration: none; } .no-transform { text-transform: none !important; } /* SITE NAV */ .nav { background: white; color: black; width: 100vw; margin: 0; } .nav .nav-wrap { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding: 0px 15px; } @media only screen and (max-width: 767px) { .nav .nav-wrap { padding: 0px 0px; } } .nav .nav-wrap .search-bar { position: relative; width: 100%; } .nav .nav-wrap .search-bar input { border: none; border-radius: 15px; padding: 0px 13px; width: 100%; height: 21px; color: #474747; position: relative; z-index: 1; margin-right: 50px; transition: border 25ms ease-in-out; } .nav .nav-wrap .search-bar input.active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .nav .nav-wrap .search-bar .search-suggestions { position: absolute; width: 100%; height: 0px; display: none; overflow-y: scroll; background: white; color: #474747; border: 1px solid #999999; border-top-color: white; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; transition: height 250ms ease-in-out; z-index: 0; } .nav .nav-wrap .search-bar .search-suggestions.active { display: block; height: 450px; } .nav .nav-wrap .search-bar .search-suggestions a.suggestion { width: 100%; color: #474747; display: inline-block; padding: 4px; } .nav .nav-wrap .search-bar .search-suggestions a.suggestion:hover { background: #dcdcdc; color: #474747; text-decoration: none; } .nav .nav-wrap .search-bar .search-icon, .nav .nav-wrap .search-bar .search-icon2 { display: inline-block; width: 12px; right: 8px; bottom: 3px; position: absolute; opacity: .5; cursor: pointer; height: 14px; line-height: 12px; z-index: 1; } @media screen and (max-width: 767px) { .nav .nav-wrap .search-bar .search-icon, .nav .nav-wrap .search-bar .search-icon2 { line-height: 25px; } } .nav.pre-nav .nav-wrap { display: flex; justify-content: flex-start; align-items: flex-end; padding: 5px 15px 5px 15px; position: relative; } @media screen and (max-width: 767px) { .nav.pre-nav .nav-wrap { padding: 5px; } } .nav.pre-nav .nav-wrap .navbar-tag-line { font-size: 14px; margin: 0; line-height: 21px; text-align: right; font-family: "Open Sans", Helvetica, sans-serif; font-weight: 700; color: black; padding-bottom: 2px; } @media screen and (max-width: 767px) { .nav.pre-nav .nav-wrap .navbar-tag-line { font-size: 13px; line-height: 14px; text-align: center; } } .nav.pre-nav .nav-wrap .navbar-toggler { margin-left: 0; } @media screen and (min-width: 768px) { .nav.pre-nav .nav-wrap .navbar-toggler { display: none; pointer-events: none; } } .nav.pre-nav .nav-wrap .navbar-toggler .navbar-toggler-icon { fill: black; } .nav.search-nav { display: none; background: gray; } @media screen and (max-width: 767px) { .nav.search-nav { display: block; } } @media screen and (max-width: 767px) { .nav.search-nav .nav-wrap { padding-left: 15px; padding-right: 15px; } } .nav.search-nav .nav-wrap .nav-link.search-bar { padding-left: 0; padding-right: 0; } .nav.search-nav .nav-wrap .nav-link.search-bar .search-icon, .nav.search-nav .nav-wrap .nav-link.search-bar .search-icon2 { bottom: initial; top: 4px; } .nav.main-nav { background: gray; } @media screen and (min-width: 768px) { .nav.main-nav .nav-wrap .navbar-collapse { /* Bootstrap Hack. Doesn't remove height: 0px if triggered from mobile view */ height: auto !important; } } .nav.main-nav .nav-wrap .navbar-collapse ul { display: flex; width: 100%; justify-content: flex-start; text-align: left; padding-left: 5px; align-items: center; } .nav.main-nav .nav-wrap .navbar-collapse ul li { color: white; margin-right: 2%; } @media screen and (max-width: 767px) { .nav.main-nav .nav-wrap .navbar-collapse ul li { margin-right: 0%; } } .nav.main-nav .nav-wrap .navbar-collapse ul li.active { pointer-events: none; } .nav.main-nav .nav-wrap .navbar-collapse ul li.dropdown a { color: white; outline: none; } .nav.main-nav .nav-wrap .navbar-collapse ul li.dropdown.open .dropdown-menu { display: block !important; background-color: gray; } .nav.main-nav .nav-wrap .navbar-collapse ul li.search-bar { width: auto; margin-left: auto; margin-right: 0; } @media screen and (max-width: 767px) { .nav.main-nav .nav-wrap .navbar-collapse ul li.search-bar { display: none; } } .nav.main-nav .nav-wrap .navbar-collapse ul li a { color: #fff; outline: none; } .nav.main-nav .nav-wrap .navbar-collapse ul li a:hover { color: #d1e2ea; } @media screen and (max-width: 767px) { .nav.main-nav .nav-wrap .navbar-collapse ul li { width: 100%; text-align: left; padding-left: 5px; } .nav.main-nav .nav-wrap .navbar-collapse ul li.dropdown.open .dropdown-menu { width: 100%; border: none; text-align: left; padding-left: 5px; background-color: transparent; } } .nav.pbf { color: white; } .nav.pbfa { color: white; } .nav.pbf.pre-nav .navbar-toggler-icon .ico-fill { fill: #000b52; } .nav.pbf.search-nav { background-color: #000b52; } @media screen and (max-width: 767px) { .nav.pbf.search-nav .nav-wrap .nav-link.search-bar .search-icon, .nav.pbf.search-nav .nav-wrap .nav-link.search-bar .search-icon2 { top: 9px; } } .nav.pbf.main-nav { background-color: #000b52; color: white; } @media screen and (max-width: 767px) { .nav.pbf.main-nav .dropdown.open .dropdown-menu { background-color: gray !important; } } .nav.pbf.main-nav .nav-wrap .navbar-collapse ul li.dropdown a { color: white; text-decoration: none; } .nav.pbf.main-nav .nav-wrap .navbar-collapse ul li.dropdown .dropdown-menu a.dropdown-item { text-decoration: none; } .nav.pbf.main-nav .nav-wrap .navbar-collapse ul li.dropdown .dropdown-menu a.dropdown-item:hover, .nav.pbf.main-nav .nav-wrap .navbar-collapse ul li.dropdown .dropdown-menu a.dropdown-item:focus { background: transparent; color: white; } .nav.pbf.main-nav .nav-wrap .search-bar .search-icon, .nav.pbf.main-nav .nav-wrap .search-bar .search-icon2 { bottom: 5px; } .nav-logo { display: block; cursor: pointer; width: 122px; height: 32px; background-image: url("/content/image/logo-pepsico-sprite.png"); background-position: 0px 0px; } .nav.ppf { color: #18861a; } .nav.ppf.pre-nav .nav-logo { display: block; cursor: pointer; width: 122px; height: 32px; background-image: url(/content/image/logo-pepsico-ppf.png); background-position: 0px 0px; } .nav.ppf.pre-nav .navbar-toggler-icon .ico-fill { fill: #18861a; } .nav.ppf.search-nav { background-color: #18861a; } @media screen and (max-width: 767px) { .nav.ppf.search-nav .nav-wrap .nav-link.search-bar .search-icon, .nav.ppf.search-nav .nav-wrap .nav-link.search-bar .search-icon2 { top: 9px; } } .nav.ppf.main-nav { font-family: 'Nunito', sans-serif; font-weight: 500; background-color: #18861a; color: white; } @media screen and (max-width: 767px) { .nav.ppf.main-nav .dropdown.open .dropdown-menu { background-color: gray !important; width: 100%; } } .nav.ppf.main-nav .dropdown-item:focus, .nav.ppf.main-nav .dropdown-item:hover { color: #474747; text-decoration: none; background-color: #dcdcdc; } .nav.ppf .nav-wrap .navbar-collapse ul li .dropdown-menu a.dropdown-item:hover { color: #474747; } .nav.ppf .nav-wrap .navbar-collapse ul li.dropdown a { color: white; outline: none; } .nav.ppf .nav-wrap .navbar-collapse ul li.dropdown.open a.dropdown-toggle { background-color: transparent; } .nav.ppf .logos { margin-left: auto; } @media (max-width: 875px) { .nav.ppf .logos { display: none; } } .page-home.section-home-mobile .content-container { padding-top: 35px; } .page-home.section-home-mobile .content-container .content { padding-bottom: 0; } .home-slider .pagination { bottom: 0; } .page-home .content { padding-bottom: 75px; } @media (max-width: 938px) and (min-width: 768px) { .page-home .content { padding-top: 20px; } } .page-home.pbf p.box-title { color: #000b52; } .page-home.pbf .home-info-rectangle .box.new:hover { background: rgba(237, 237, 237, 0.8) !important; } .page-home.pbf .home-info-rectangle .box .header h2 { color: #000b52; } @media (max-width: 768px) { .ppf.page-home .content { padding: 0; } } .ppf.page-home .content-container { position: static; } .ppf.page-home .feature { position: absolute; left: 0; right: 0; top: 86px; height: 225px; background-image: url(/content/image/ppf-home-learn-more.jpg); background-position: center; background-size: cover; display: flex; justify-content: center; flex-direction: column; text-align: center; padding: 0 36%; } @media (max-width: 768px) { .ppf.page-home .feature { background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(/content/image/ppf-home-learn-more.jpg); background-position: center; background-size: cover; padding: 0 5%; } } .ppf.page-home .feature a { border: 1px solid black; width: 50%; margin: 0 auto; font-weight: bold; border-radius: 50px; } .ppf.page-home .feature a:hover { background: #18861a; color: white; border-color: #18861a; } .ppf .home-container { margin-top: 235px; margin-bottom: 60px; } .ppf .home-container h2, .ppf .home-container h3 { font-weight: bold; font-family: "Nunito", Helvetica, sans-serif; color: #18861a; } .ppf .home-container a { color: #18861a; } .ppf .home-container .section { padding: 50px; text-align: center; } @media (max-width: 768px) { .ppf .home-container .section { padding: 50px 5% 10px; } } .ppf .home-container .section h2 { font-weight: 400; margin-bottom: 30px; } .ppf .home-container .section .list { display: flex; justify-content: center; align-items: center; } @media (max-width: 768px) { .ppf .home-container .section .list { flex-wrap: wrap; } } .ppf .home-container .section .list a { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 3%; color: #474747; transition: opacity 300ms; text-decoration: none; } @media (max-width: 768px) { .ppf .home-container .section .list a { margin-bottom: 20px; } } .ppf .home-container .section .list a:hover { opacity: 0.7; } .ppf .home-container .section .list a img { height: 120px; margin-bottom: 10px; border-radius: 50%; border: 1px solid red; filter: brightness(0); } .ppf .home-container .section .list a.icon-wrap { position: relative; } .ppf .home-container .section .list .icon-bg { width: 110px; height: 110px; background-size: contain; background-repeat: no-repeat; background-position: center; text-indent: -9999px; } .ppf .home-container .section .list .icon-bg .icon-title { position: absolute; text-indent: 0; bottom: 10px; } .ppf .home-container .section .list .gluten-free { background-image: url("/content/image/icons/claims-certifications/gluten-free.png"); } .ppf .home-container .section .list .non-gmo { background-image: url("/content/image/icons/claims-certifications/verified-non-gmo.png"); } .ppf .home-container .section .list .fiber-good { background-image: url("/content/image/icons/claims-certifications/fiber-good.png"); } .ppf .home-container .section .list .organic { background-image: url("/content/image/icons/claims-certifications/usda-organic.png"); } .ppf .home-container .section .list .heart-healthy { background-image: url("/content/image/icons/claims-certifications/heart-healthy.png"); } .ppf .home-container .section .list .fiber { background-image: url("/content/image/icons/fiber.png"); } .ppf .home-container .section .list .whole-grains { background-image: url("/content/image/icons/claims-certifications/whole-grains.png"); } .ppf .home-container .section .list .vitamins-minerals { background-image: url("/content/image/icons/claims-certifications/vitamins-minerals.png"); } .ppf .home-container .section .list .juice { background-image: url("/content/image/icons/claims-certifications/juice.png"); } .ppf .home-container .section .list .site-tips { background-image: url("/content/image/icons/site-tips.png"); } .ppf .home-container .section .list .compare-products { background-image: url("/content/image/icons/compare-products.png"); } .ppf .home-container .section .list .downloads { background-image: url("/content/image/icons/downloads.png"); } /*Products*/ .product-content.product-content-new.pbf { background: transparent; } .product-content.product-content-new.pbf .product-content-header { border-bottom: 2px solid #CCC; padding: 5px 0px 10px 0px; box-shadow: none; color: #000b52; font-family: 'Muli', sans-serif; } .product-content.product-content-new.pbf .product-content-header .header-left .product-name { font-size: 28px; text-transform: uppercase; font-weight: bold; line-height: 30px; top: 6px; position: relative; } .product-content.product-content-new.pbf .product-content-header .header-left .bread-crumb a { color: #000b52 !important; text-decoration: none; } .product-content.product-content-new.pbf .product-content-header .header-right .pdf-link { box-shadow: none; border-left: none; } .product-content.product-content-new.pbf .product-content-body .product-nutrition #product-iframe { background: white; } .product-content.product-content-new.pbf .product-content-body .product-right .product-info .product-links .product-more-info { color: black; background: white; } .product-content.product-content-new.pbf .product-content-body .product-right .product-info .product-links .product-more-info h2 { color: black; } .product-content.product-content-new.pbf .product-content-body .product-right .product-info .product-links .product-more-info .minerals-nutrients { border-top: 10px solid black; border-bottom: 10px solid black; } .product-content.product-content-new.pbf .product-content-body .product-right .product-info .product-links .product-more-info .minerals-nutrients div { border-top: 2px solid black; } .product-content.product-content-new.pbf .product-content-body .product-right .product-info .product-links .product-more-info .minerals-nutrients div:first-child { border-top: none; } .product-content.product-content-new.pbf .product-content-body .product-right .product-info .social a { color: #000b52; font-weight: bold; font-size: 16px; } .product-content.product-content-new.pbf .product-content-body .product-right .product-info .disclaimer { color: #000b52; } .product-content.product-content-new.pbf .product-content-body .product-content-overlay { /*background-color: rgba(0,125,182, .4); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2N2JlZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMSUiIHN0b3AtY29sb3I9IiM2N2JlZWEiIHN0b3Atb3BhY2l0eT0iMC45MiIvPgogICAgPHN0b3Agb2Zmc2V0PSI5NyUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4zMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMjkiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-radial-gradient(center, ellipse cover, rgba(103,190,234,1) 0%, rgba(103,190,234,0.92) 11%, rgba(255,255,255,0.31) 97%, rgba(255,255,255,0.29) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(103,190,234,1)), color-stop(11%,rgba(103,190,234,0.92)), color-stop(97%,rgba(255,255,255,0.31)), color-stop(100%,rgba(255,255,255,0.29))); background: -webkit-radial-gradient(center, ellipse cover, rgba(103,190,234,1) 0%,rgba(103,190,234,0.92) 11%,rgba(255,255,255,0.31) 97%,rgba(255,255,255,0.29) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(103,190,234,1) 0%,rgba(103,190,234,0.92) 11%,rgba(255,255,255,0.31) 97%,rgba(255,255,255,0.29) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(103,190,234,1) 0%,rgba(103,190,234,0.92) 11%,rgba(255,255,255,0.31) 97%,rgba(255,255,255,0.29) 100%); background: radial-gradient(ellipse at center, rgba(103,190,234,1) 0%,rgba(103,190,234,0.92) 11%,rgba(255,255,255,0.31) 97%,rgba(255,255,255,0.29) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67beea', endColorstr='#4affffff',GradientType=1 );*/ } .product-content.product-content-new.pbf .product-content-body .product-content-overlay .fountain-calculator .title-bar { color: #ffffff; font-size: 14px; font-family: "futura-pt"; font-weight: bold; width: 100%; background-color: #000b52; color: #ffffff; padding: 5px 20px 5px 20px; border-bottom: 4px solid silver; } .product-content.product-content-new.pbf .product-content-body .product-content-overlay .fountain-calculator .fountain-content #fountain-form #fountain-submit { background-color: #000b52; color: #ffffff; font-family: "futura-pt"; font-weight: 400; font-size: 17px; padding-left: 10px; padding-right: 10px; padding-top: 7px; padding-bottom: 7px; text-decoration: none; outline: none; transition: background-color .6s ease-out; margin-left: 10px; margin-top: 10px; display: inline-block; border: none; border-bottom-color: currentcolor; border-bottom-style: none; border-bottom-width: medium; border-bottom: solid #b3b3b3; } .product-content.product-content-new.pbf .product-disclaimer { color: #000b52; font-weight: normal; max-width: 936px; } .product-content.product-content-new.pbf .product-content-related h2 { font-family: "futura-pt"; font-size: 30px; font-weight: bold; color: #000b52; text-transform: uppercase; } .product-content.product-content-new.pbf .product-content-related .related-links-swiper .swiper-slide a { margin-top: 20px; width: 146px; height: 210px; position: relative; background-color: rgba(0, 125, 182, 0); transition: background-color ease-out .6s; } .product-content.product-content-new.pbf .product-content-related .related-links-swiper .swiper-slide a:hover { background-color: rgba(0, 125, 182, 0.6); } .prod-name { background: rgba(232, 232, 232, 0.85); } .product-content.product-content-new.ppf .product-content-header .header-right .pdf-link { box-shadow: none; border-left: none; background: url("/content/image/icon-pdf-ppf.png"); background-repeat: no-repeat; background-position: 14px 8px; } .product-content.product-content-new.ppf .product-content-header .header-right .email-link { box-shadow: none; border-left: none; background: url("/content/image/icon-email-share-ppf.png"); background-repeat: no-repeat; background-position: 11px 8px; } .product-content.product-content-new.ppf { background: transparent; margin-left: auto; margin-right: auto; width: calc(100% - 40px); } @media screen and (max-width: 600px) { .product-content.product-content-new.ppf { width: 100%; } } .product-content.product-content-new.ppf .product-content-header { border-bottom: 2px solid #dcdcdc; padding: 5px 0px 10px 0px; box-shadow: none; } .product-content.product-content-new.ppf .product-content-header .header-left .product-name { font-family: 'Nunito', sans-serif; font-weight: 400; font-style: normal; color: #117840; font-size: 28px; text-transform: uppercase; line-height: 30px; top: 6px; position: relative; } .product-content.product-content-new.ppf .product-content-header .header-left .bread-crumb { font-family: 'Nunito', sans-serif; color: #474747; font-weight: bold; } .product-content.product-content-new.ppf .product-content-header .header-left .bread-crumb a { color: #474747 !important; font-weight: bold; text-decoration: none; } .product-content.product-content-new.ppf .product-content-header .header-right .pdf-link { box-shadow: none; border-left: none; background: url("/content/image/icon-pdf-ppf.png"); background-repeat: no-repeat; background-position: 14px 8px; } .product-content.product-content-new.ppf .product-content-header .header-right .email-link { box-shadow: none; border-left: none; background: url("/content/image/icon-email-share-ppf.png"); background-repeat: no-repeat; background-position: 11px 8px; } .product-content.product-content-new.ppf .product-content-body .product-nutrition p { font-family: 'Nunito', sans-serif; padding-left: 10px; padding-right: 10px; font-weight: bold; color: #474747; } .product-content.product-content-new.ppf .product-content-body .product-nutrition #product-iframe { background: transparent; } .product-content.product-content-new.ppf .product-content-body .product-right { flex-direction: column; } .product-content.product-content-new.ppf .product-content-body .product-right .product-image { display: flex; justify-content: center; align-items: center; flex-direction: column; max-width: 100%; } .product-content.product-content-new.ppf .product-content-body .product-right .product-image .product-links a:hover { background-color: #18861a; color: white; } .product-content.product-content-new.ppf .product-content-body .product-right .product-image .product-links a.selected, .product-content.product-content-new.ppf .product-content-body .product-right .product-image .product-links a.selected-clickable { background-color: #117840; color: white; } .product-content.product-content-new.ppf .product-content-body .product-right .where-to-buy a { font-family: 'Nunito', sans-serif; background-color: #117840; color: #ffffff; border: none; } .product-content.product-content-new.ppf .product-content-body .product-right .where-to-buy a:hover { background: #18861a; } .product-content.product-content-new.ppf .product-content-body .product-right .where-to-buy a:hover span { background: transparent; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info { display: flex; flex-direction: column; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a { display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; border: 1px solid #dcdcdc; width: 145px; height: 145px; background: transparent; float: left; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a span { display: block; width: 100%; border-top: 1px solid #dcdcdc; background: #117840; color: white; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a img { display: unset; height: 70%; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a.custom-size { background: #117840; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a.custom-size.selected, .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a.custom-size.selected-clickable { background: #18861a; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a.custom-size span { background: transparent; border-top: none; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a.selected span, .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a.selected-clickable span { background: #18861a; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a:hover:not(.selected).custom-size, .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a:hover:not(.selected-clickable).custom-size { background: #18861a; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a:hover:not(.selected).custom-size span, .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a:hover:not(.selected-clickable).custom-size span { background: transparent; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a:hover:not(.selected) span, .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a:hover:not(.selected-clickable) span { background: #18861a; } @media screen and (max-width: 768px) { .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a { width: 69px; height: 42px; line-height: 42px; background: #117840; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a img { display: none; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a span { border-top: none; background: transparent; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a.selected span, .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a.selected-clickable span { background: transparent; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a:hover:not(.selected).product-link, .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a:hover:not(.selected-clickable).product-link { background: #18861a; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a:hover:not(.selected).product-link span, .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a:hover:not(.selected-clickable).product-link span { background: transparent; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a:hover:not(.selected) span, .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links a:hover:not(.selected-clickable) span { background: #18861a; } } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .product-links .product-more-info { display: none; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .social a { font-family: 'Nunito', sans-serif; color: #474747; font-weight: bold; font-size: 16px; } .product-content.product-content-new.ppf .product-content-body .product-right .product-info .disclaimer { font-family: 'Nunito', sans-serif; color: #474747; padding: 5px 0 30px; border-bottom: 2px solid #909090; border-top: none; } @media (max-width: 768px) { .product-content.product-content-new.ppf .product-content-body .product-right .product-info .disclaimer { padding: 10px 0; } } .product-content.product-content-new.ppf .product-content-body .product-content-overlay .fountain-calculator .title-bar { font-family: 'Nunito', sans-serif; font-weight: 400; font-style: normal; color: white; font-size: 28px; text-transform: uppercase; line-height: 30px; top: 6px; position: relative; background-color: #18861a; } .product-content.product-content-new.ppf .product-content-body .product-content-overlay .fountain-calculator .title-bar a { top: 3px; } .product-content.product-content-new.ppf .product-content-body .product-content-overlay .fountain-calculator .fountain-content { top: 6px; position: relative; } .product-content.product-content-new.ppf .product-content-body .product-content-overlay .fountain-calculator .fountain-content #fountain-form #fountain-submit { background-color: #18861a; color: #ffffff; font-family: 'Nunito', sans-serif; font-weight: 400; font-size: 17px; padding-left: 10px; padding-right: 10px; padding-top: 7px; padding-bottom: 7px; text-decoration: none; outline: none; transition: background-color .6s ease-out; margin-left: 10px; margin-top: 10px; display: inline-block; border: none; border-bottom-color: currentcolor; border-bottom-style: none; border-bottom-width: medium; border-bottom: solid #b3b3b3; } .product-content.product-content-new.ppf .product-disclaimer { color: #474747; font-family: 'Nunito', sans-serif; font-weight: normal; max-width: 936px; } .product-content.product-content-new.ppf .product-content-related h2 { font-family: 'Nunito', sans-serif; font-size: 30px; font-weight: bold; color: #117840; text-transform: uppercase; } .product-content.product-content-new.ppf .product-content-related .related-links-swiper .swiper-slide a { margin-top: 20px; box-shadow: none; border: 1px solid #dcdcdc; width: 146px; height: 210px; position: relative; background-color: rgba(141, 198, 66, 0); transition: background-color ease-out .6s; } .product-content.product-content-new.ppf .product-content-related .related-links-swiper .swiper-slide a:hover { background-color: rgba(141, 198, 66, 0.6); } .product-content.product-content-new.ppf { /*.product-content.product-content-new .product-content-related .related-links-swiper .swiper-slide a:hover .prod-name*/ } .product-content.product-content-new.ppf .product-content-body .product-nutrition .product-content-left.variety { min-width: 660px; } .product-content.product-content-new.ppf .product-content-body .product-nutrition .product-content-left.variety #product-iframe { max-width: 640px; } .product-content.product-content-new.ppf .product-content-body .product-nutrition .product-right.variety .metadata { display: block; margin-bottom: 0px; padding-top: 10px; margin-top: 0px; width: 100%; max-width: 100%; justify-content: center; } .product-content.product-content-new.ppf .product-content-body .product-nutrition .product-right.variety .metadata .social { display: flex; float: none; justify-content: space-between; } .product-content.product-content-new.ppf .product-content-body .product-nutrition .product-right.variety .metadata .social .website-link { margin-bottom: 0px; margin-right: 10px; margin-top: 10px; float: none !important; } .product-content.product-content-new.ppf .product-content-body .product-nutrition .product-right.variety .metadata .social .icons { /*display: inline-flex; max-width: 100%;*/ max-width: 210px; float: none !important; margin-top: 0px; justify-content: flex-start; margin-left: 0; margin-right: 0; } .product-content.product-content-new.ppf .product-content-body .product-nutrition .product-right.variety .metadata .social .icons .icon { float: none; margin-left: 0px; margin-right: 15px; } .product-content.product-content-new.ppf .product-content-body .product-nutrition .product-right.variety .metadata .social .icons .where-to-buy-hollow { float: none; margin-left: 0px; margin-right: 15px; } @media screen and (max-width: 1050px) { .product-content.product-content-new.ppf .product-content-body .product-nutrition .product-right.variety .metadata .social { flex-direction: column; justify-content: center; align-items: center; } .product-content.product-content-new.ppf .product-content-body .product-nutrition .product-right.variety .metadata .social .website-link { margin-bottom: 10px; } .product-content.product-content-new.ppf .product-content-body .product-nutrition .product-right.variety .metadata .social .icons { max-width: 165px; } } .product-content.product-content-new.ppf .product-content-related .related-links-swiper .swiper-slide a:hover .prod-name { color: #474747; } .product-content.product-content-new .product-content-header { width: 100%; height: auto; min-height: 70px; padding: 5px 20px 5px 20px; border-bottom: 4px solid silver; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .product-content.product-content-new .product-content-header .header-left .bread-crumb { float: none; font-size: 14px; margin-top: 4px; margin-left: 4px; } .product-content.product-content-new .product-content-header .header-left .bread-crumb .carat { font-size: .8em; line-height: .5em; } .product-content.product-content-new .product-content-header .header-right .pdf-link, .product-content.product-content-new .product-content-header .header-right .email-link { display: block; width: 52px; height: 47px; float: right; transition: background-color ease-out .3s; } .product-content.product-content-new .product-content-header .header-right .pdf-link { box-shadow: #ffffff 1px 0 inset; border-left: 1px solid #b3b3b3; background: url("/content/image/icon-pdf.png"); background-repeat: no-repeat; background-position: 14px 8px; } .product-content.product-content-new .product-content-header .header-right .email-link { box-shadow: none; border-left: none; background: url("/content/image/icon-email-share.png"); background-repeat: no-repeat; background-position: 11px 8px; } .product-content.product-content-new .product-content-body { display: flex; justify-content: space-around; align-items: flex-end; flex-wrap: wrap; padding-top: 20px; position: relative; } .product-content.product-content-new .product-content-body .product-nutrition { width: 100%; display: flex; justify-content: space-between; } @media (max-width: 1050px) { .product-content.product-content-new .product-content-body .product-nutrition { flex-wrap: wrap; } } .product-content.product-content-new .product-content-body .product-nutrition .product-content-left { min-width: 295px; margin-top: 0; font-size: 15px; font-weight: bold; } .product-content.product-content-new .product-content-body .product-nutrition .product-content-left p { width: 100%; max-width: 275px; padding-left: 10px; padding-right: 0; margin-bottom: 1rem; } @media (max-width: 768px) { .product-content.product-content-new .product-content-body .product-nutrition .product-content-left p { max-width: none; padding: 0; } } .product-content.product-content-new .product-content-body .product-nutrition .product-content-left #product-iframe { background: transparent; max-width: 275px; padding-left: 10px; padding-right: 10px; padding-top: 10px; margin-bottom: 10px; } .product-content.product-content-new .product-content-body .product-nutrition .product-content-left #product-iframe > div { position: relative; overflow: hidden; max-width: 100%; } .product-content.product-content-new .product-content-body .product-nutrition .product-content-left #product-iframe > div iframe { pointer-events: none; } @media screen and (min-width: 601px) { .product-content.product-content-new .product-content-body .product-nutrition .product-content-left #product-iframe > div iframe { pointer-events: all; } } .product-content.product-content-new .product-content-body .product-nutrition .product-content-left #product-iframe > div a.full-label { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: transparent; cursor: pointer; text-align: center; display: none; } @media screen and (max-width: 600px) { .product-content.product-content-new .product-content-body .product-nutrition .product-content-left #product-iframe > div a.full-label { display: block; } } @media (max-width: 768px) { .product-content.product-content-new .product-content-body .product-nutrition .product-content-left #product-iframe { margin: 10px auto; } } .product-content.product-content-new .product-content-body .product-nutrition .product-content-left #product-iframe .juice-info { margin-bottom: 10px; display: block; } @media (max-width: 768px) { .product-content.product-content-new .product-content-body .product-nutrition .product-content-left { width: 100%; order: 2; margin-left: 0; margin-top: 30px; text-align: center; } } .product-content.product-content-new .product-content-body .product-nutrition .product-content-left.supplements { min-width: 370px; } .product-content.product-content-new .product-content-body .product-nutrition .product-content-left.supplements #product-iframe { max-width: 350px; } .product-content.product-content-new .product-content-body .product-right { display: flex; justify-content: center; flex: 1; flex-wrap: wrap; min-width: 300px; align-self: flex-start; } @media screen and (max-width: 768px) { .product-content.product-content-new .product-content-body .product-right { justify-content: center; order: 1; width: 100%; flex: 1; } } .product-content.product-content-new .product-content-body .product-right .product-image { text-align: center; width: 100%; } .product-content.product-content-new .product-content-body .product-right .product-image img { max-width: 100%; } @media screen and (max-width: 768px) { .product-content.product-content-new .product-content-body .product-right .product-image > img { max-height: 300px; } } .product-content.product-content-new .product-content-body .product-right .product-links { text-align: left; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 20px; } .product-content.product-content-new .product-content-body .product-right .product-info { flex: .5; } .product-content.product-content-new .product-content-body .claims-certifications { margin: 20px 0 0; width: 100%; } .product-content.product-content-new .product-content-body .claims-certifications a { text-decoration: none; color: #212529; } .product-content.product-content-new .product-content-body .claims-certifications a:hover, .product-content.product-content-new .product-content-body .claims-certifications a:active { text-decoration: none; color: #212529; } .product-content.product-content-new .product-content-body .claims-certifications .wic-approved-disclaimer a { text-decoration: underline; } .product-content.product-content-new .product-content-body .claims-certifications .wic-approved-disclaimer a:hover, .product-content.product-content-new .product-content-body .claims-certifications .wic-approved-disclaimer a:active { text-decoration: underline; color: #212529; } .product-content.product-content-new .product-content-body .claims-certifications img { display: inline-block; width: auto; max-height: 70px; padding: 5px 0px 5px 5px; } @media (max-width: 768px) { .product-content.product-content-new .product-content-body .claims-certifications img { max-height: 70px; } } .product-content.product-content-new .product-content-body .claims-certifications .disc { vertical-align: top; margin-top: 5px; display: inline-block; } .product-content.product-content-new .product-content-body .claims-certifications .claim-disclaim { width: 100%; padding: 0px 10px; font-weight: normal; line-height: 16px; padding: 0px 10px 15px; } .product-content.product-content-new .product-content-body .claims-certifications .whole-grains-disclaimer { font-size: 100%; padding: 0px 10px 15px; } .product-content.product-content-new .product-content-body .claims-certifications .kosher-disclaimer { font-size: 100%; padding: 0px 10px 15px; } .product-content.product-content-new .product-content-body .claims-certifications .heart-healthy-disclaimer { font-size: 100%; } .product-content.product-content-new .product-content-body .where-to-buy a { background-color: #000b52; color: #ffffff; text-decoration: none; text-align: center; font-weight: bold; border-bottom: 2px solid #d4d4d4; float: right; display: inline-block; width: 100px; height: 42px; font-size: 12px; line-height: 42px; vertical-align: middle; margin-right: 5px; margin-bottom: 10px; } .product-content.product-content-new .product-content-body .where-to-buy a:hover { background-color: #1c82ba; color: #fff; text-decoration: none; -webkit-transition: background-color 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */ -moz-transition: background-color 0.3s ease-out; /* Firefox 4-15 */ -o-transition: background-color 0.3s ease-out; /* Opera 10.50–12.00 */ transition: background-color 0.3s ease-out; } .product-content.product-content-new .product-content-body .product-more-info { color: black; background: transparent; padding: 10px; width: 100%; font-size: 12px; } .product-content.product-content-new .product-content-body .product-more-info h2 { color: black; font-size: 22.7px; } .product-content.product-content-new .product-content-body .product-more-info .servings-container { display: flex; } .product-content.product-content-new .product-content-body .product-more-info .line1 { font-size: 12px; } .product-content.product-content-new .product-content-body .product-more-info .minerals-nutrients { border-top: 10px solid black; width: 100%; margin-left: 0; margin-top: 10px; margin-bottom: 0; padding-top: 10px; line-height: 18px; } .product-content.product-content-new .product-content-body .product-more-info .minerals-nutrients div { border-top: 2px solid black; font-size: 14px; height: 30px; line-height: 30px; } .product-content.product-content-new .product-content-body .product-more-info .minerals-nutrients div .col1 { width: 40%; position: relative; display: inline-block; } .product-content.product-content-new .product-content-body .product-more-info .minerals-nutrients div .col2, .product-content.product-content-new .product-content-body .product-more-info .minerals-nutrients div .col3 { width: 25%; position: relative; display: inline-block; } .product-content.product-content-new .product-content-body .product-more-info .minerals-nutrients div .servinghdr { font-size: 12px; } .product-content.product-content-new .product-content-body .product-more-info .minerals-nutrients div:first-child { border-top: none; } .product-content.product-content-new .product-content-body .product-more-info .minerals-nutrients div label { display: inline-block; line-height: 30px; margin-bottom: 0.5rem; } .product-content.product-content-new .product-content-body .product-more-info .minerals-nutrients div p { line-height: 30px; margin-bottom: 14px; float: right; color: black; } .product-content.product-content-new .product-content-body .product-more-info .minerals-nutrients div.more-info-sweeteners { line-height: normal; } .product-content.product-content-new .product-content-body .product-more-info .minerals-nutrients div.more-info-sweeteners label { line-height: normal; margin-bottom: 0; } .product-content.product-content-new .product-content-body .product-more-info .minerals-nutrients div.more-info-sweeteners p { line-height: normal; padding-left: 0; float: left; } .product-content.product-content-new .product-content-body .more-info-sweeteners { height: auto !important; } .product-content.product-content-new .product-content-body .more-info-sweeteners p { padding: 0; line-height: 22px; } .product-content.product-content-new .product-content-body .product-links-informational { font-size: 16px; font-weight: bold; color: #000b52; opacity: 0; filter: alpha(opacity=0); } .product-content.product-content-new .product-content-body .product-links a { color: #474747; text-decoration: none; text-align: center; font-weight: bold; border: 1px solid #d4d4d4; float: none; display: inline-block; width: 69px; height: 42px; font-size: 12px; line-height: 42px; vertical-align: middle; margin-right: 5px; margin-bottom: 10px; } .product-content.product-content-new .product-content-body .product-links a img { max-width: 50px; display: none; } .product-content.product-content-new .product-content-body .product-links a:last-child { margin-right: 0; } .product-content.product-content-new .product-content-body .product-links a.custom-size { padding-top: 0; overflow: hidden; } .product-content.product-content-new .product-content-body .product-links a.custom-size span { padding: unset; line-height: unset; } .product-content.product-content-new .product-content-body .product-links a.custom-size { line-height: 1em; padding-top: 8px; } .product-content.product-content-new .product-content-body .product-links a.long { width: 95px; } .product-content.product-content-new .product-content-body .product-links a:hover { background-color: #1c82ba; color: #fff; text-decoration: none; -webkit-transition: background-color 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */ -moz-transition: background-color 0.3s ease-out; /* Firefox 4-15 */ -o-transition: background-color 0.3s ease-out; /* Opera 10.50–12.00 */ transition: background-color 0.3s ease-out; } .product-content.product-content-new .product-content-body .product-links .selected { background-color: #000b52; color: #ffffff; cursor: default; pointer-events: none; } .product-content.product-content-new .product-content-body .product-links .selected-clickable { background-color: #000b52; color: #ffffff; } .product-content.product-content-new .product-content-body .product-links-informational { float: none; width: 100%; text-align: center; opacity: 1 !important; } .product-content.product-content-new .product-content-body .product-content-overlay { width: 100%; height: 700px; position: absolute; top: 0; z-index: 2; visibility: hidden; } .product-content.product-content-new .product-content-body .product-content-overlay .fountain-calculator { width: 100%; max-width: 500px; height: auto; min-height: 400px; top: 48px; left: 50% !important; transform: translate3d(-50%, 0, 0) !important; margin-left: 0 !important; background: transparent; position: absolute; } @media screen and (max-width: 500px) { .product-content.product-content-new .product-content-body .product-content-overlay .fountain-calculator { left: auto !important; transform: none !important; } } .product-content.product-content-new .product-content-body .product-content-overlay .fountain-calculator .title-bar { width: 100%; padding: 5px 20px 5px 20px; min-height: 40px; height: auto; font-size: 14px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; } .product-content.product-content-new .product-content-body .product-content-overlay .fountain-calculator .title-bar span { position: relative; top: auto; left: auto; text-transform: uppercase; font-size: 22px; } .product-content.product-content-new .product-content-body .product-content-overlay .fountain-calculator .title-bar a { position: relative; top: auto; right: auto; font-size: 14px; font-weight: bold; color: #ffffff; text-decoration: none; } .product-content.product-content-new .product-content-body .product-content-overlay .fountain-calculator .fountain-content { min-height: 90%; height: auto; background: rgba(237, 237, 237, 0.8); padding: 30px; } .product-content.product-content-new .product-content-body .product-content-overlay .fountain-calculator .fountain-content .label { width: auto; max-width: 320px; text-align: left; color: #333333; font-size: 20px; display: inline-block; } .product-content.product-content-new .product-content-body .product-content-overlay .fountain-calculator .fountain-content .oz { width: 80px; text-align: center; line-height: 27px; font-size: 18px; border: none; border-bottom: 3px solid #b3b3b3; float: right; } .product-content.product-content-new .product-content-body .product-content-overlay .fountain-calculator .fountain-content select { font-size: 15px; width: 80px; line-height: 15px; padding: none; padding-right: 8px; border: none; border-bottom: 3px solid #b3b3b3; float: right; } .product-content.product-content-new .product-content-body .product-content-overlay .fountain-calculator .fountain-content label.error { float: right; margin-top: 10px; margin-right: 29px; color: crimson; border-color: crimson; } .product-content.product-content-new .product-content-body .product-content-overlay .fountain-calculator .fountain-content .disclaimer { padding: 10px 0px; } .product-content.product-content-new .metadata { display: flex; align-items: flex-start; justify-content: flex-end; margin-bottom: 60px; padding-top: 30px; margin-top: 30px; max-width: 110px; font-size: 0.9em; } @media (max-width: 1050px) { .product-content.product-content-new .metadata { flex-direction: column; justify-content: center; align-items: center; width: 100%; order: 4; max-width: none; } } .product-content.product-content-new .social { text-align: left; } @media (max-width: 1050px) { .product-content.product-content-new .social { width: 100%; text-align: center; } } .product-content.product-content-new .social .icons { display: flex; flex-wrap: wrap; justify-content: space-between; } @media (max-width: 1050px) { .product-content.product-content-new .social .icons { justify-content: center; margin-left: auto; margin-right: auto; } } .product-content.product-content-new .social .icon { text-indent: -9999px; display: block; height: 30px; width: 30px; background-color: #474747; background-size: 50%; background-repeat: no-repeat; background-position: center; color: white; border-radius: 50%; margin-bottom: 15px; transition: background-color 300ms; } @media (max-width: 1050px) { .product-content.product-content-new .social .icon { margin-left: 15px; } } .product-content.product-content-new .social .icon.facebook { background-image: url("/Content/image/icons/icon-facebook.svg"); } .product-content.product-content-new .social .icon.twitter { background-image: url("/Content/image/icons/icon-twitter.svg"); } .product-content.product-content-new .social .icon.email { background-image: url("/Content/image/icons/icon-mail.svg"); } .product-content.product-content-new .social .icon.where-to-buy { background-image: url("/Content/image/icons/icon-where-to-buy.svg"); } .product-content.product-content-new .social .icon:hover { background-color: #909090; } .product-content.product-content-new .social .where-to-buy-hollow, .product-content.product-content-new .social .pdf { color: #474747; margin-bottom: 15px; min-width: 80px; display: flex; width: 100%; align-items: center; } @media (max-width: 1050px) { .product-content.product-content-new .social .where-to-buy-hollow, .product-content.product-content-new .social .pdf { width: auto; margin-left: 15px; } .product-content.product-content-new .social .where-to-buy-hollow:first-child, .product-content.product-content-new .social .pdf:first-child { margin-left: 0; } } .product-content.product-content-new .social .where-to-buy-hollow:hover, .product-content.product-content-new .social .where-to-buy-hollow:active, .product-content.product-content-new .social .pdf:hover, .product-content.product-content-new .social .pdf:active { color: #474747; text-decoration: none; opacity: .65; } .product-content.product-content-new .social .where-to-buy-hollow i, .product-content.product-content-new .social .pdf i { width: 35px; height: 35px; background-image: url("/Content/image/icons/icon-where-to-buy-hollow.svg"); text-indent: none; display: inline-block; background-repeat: no-repeat; border-radius: 50%; } .product-content.product-content-new .social .where-to-buy-hollow div, .product-content.product-content-new .social .pdf div { flex: 1; display: inline-block; line-height: 13px; margin-left: 5px; } .product-content.product-content-new .social .pdf i { background-image: url("/Content/image/icons/icon-pdf.png"); background-color: #474747; background-size: 35%; background-repeat: no-repeat; background-position: center; } .product-content.product-content-new .social .website-link { margin-bottom: 15px; } .product-content.product-content-new .social .website-link a { color: #474747; text-decoration: underline; } .product-content.product-content-new .disclaimer { width: 100%; padding: 5px 0 30px; text-align: left; border-bottom: 2px solid #909090; padding-left: 10px; } @media (max-width: 768px) { .product-content.product-content-new .disclaimer { width: 100%; padding: 20px 0; text-align: center; } } .product-content.product-content-new .product-disclaimer { font-weight: normal; max-width: 936px; font-size: 16px; line-height: 1.2em; margin-top: 20px; margin-left: auto; margin-right: auto; padding-bottom: 40px; } .product-content.product-content-new .product-content-related { width: 100%; margin-top: 25px; margin-bottom: 45px; } .product-content.product-content-new .product-content-related h2 { font-size: 30px; font-weight: bold; text-transform: uppercase; } .product-content.product-content-new .product-content-related .related-links-swiper { text-align: center; } .product-content.product-content-new .product-content-related .related-links-swiper .swiper-slide a { position: relative; margin-top: 20px; border: 1px solid #dcdcdc; width: 146px; height: 210px; float: none; display: inline-block; position: relative; background-color: rgba(0, 125, 182, 0); transition: background-color ease-out .6s; } .product-content.product-content-new .product-content-related .related-links-swiper .swiper-slide a:hover { background-color: rgba(0, 125, 182, 0.6); } .product-content.product-content-new .product-content-related .related-links-swiper .swiper-slide a:hover .prod-name { display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; } .product-content.product-content-new .product-content-related .related-links-swiper .swiper-slide a img { height: 80%; width: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .product-content.product-content-new .product-content-related .related-links-swiper .swiper-slide a .prod-name { display: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; pointer-events: none; } .product-content.product-content-new .product-content-related .swiper-button-prev { display: none; } .product-content.product-content-new .product-content-related .swiper-button-next { display: none; } .product-content.product-content-new .product-content-related .swiper-pagination { margin-top: 10px; position: relative; } @media only screen and (max-width: 640px) { .product-content.product-content-new .product-content-related .swiper-pagination { display: none; } .product-content.product-content-new .product-content-related .swiper-button-prev { display: block; } .product-content.product-content-new .product-content-related .swiper-button-next { display: block; } } .product-name { /*position: absolute; width: 100%; //height: 100%; min-height: 58px; padding: 8px; left: 0; bottom: 0; font-weight: bold; background: rgba(169, 169, 169, 0.35); display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 14px; opacity: 0; transition: opacity 250ms ease-in-out; @media screen and (max-width: 600px) { opacity: 1; } span, label { //min-height: 42px; font-size: 14px; color: $pbf-dark-gray; width: 100%; }*/ } /****************/ /*Find*/ .find-container.pbf .header .ingredient-header-bar { color: #000b52; text-align: left; font-family: "Nunito", Helvetica, sans-serif; font-weight: 100; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .group-dropdown { display: none; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .filter-reset { color: #474747; background-color: white; background-image: url("/Content/image/icons/icon-refresh-dark-blue.svg"); } .find-container.pbf .find-body-wrap .find-body-left .filter-set .filter-reset:hover { background-color: #000b52; color: white; background-image: url("/Content/image/icons/icon-refresh-white.svg"); } .find-container.pbf .find-body-wrap .find-body-left .filter-set select { background-image: url("/Content/image/icons/icon-arrow-down-dark-blue.svg"); color: #474747; } .find-container.pbf .find-body-wrap .find-body-left .filter-set select.active { color: white; background-color: #000b52; background-image: url("/Content/image/icons/icon-arrow-down-white.svg"); } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable > .expand-head { background-image: url("/Content/image/icons/icon-plus-dark-blue.svg"); color: #474747; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable.open > .expand-head { background-image: url("/Content/image/icons/icon-minus-white.svg") !important; background-color: #000b52; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable.active > .expand-head { background-image: url(/Content/image/icons/icon-plus-white.svg); color: white; background-color: #000b52; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable.active > .expand-head .num-chosen { font-size: smaller; padding-left: 10px; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row a.selected { background-color: #000b52; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row-slim a.selected { background-color: #000b52; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.calories { -webkit-order: 1; order: 1; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.bubbles { -webkit-order: 2; order: 2; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.sweeteners { -webkit-order: 3; order: 3; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.caffeine { -webkit-order: 4; order: 4; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.juice { -webkit-order: 5; order: 5; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.nutrients { -webkit-order: 6; order: 6; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.vitamins { -webkit-order: 7; order: 7; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.electrolytes { -webkit-order: 8; order: 8; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.sodium { -webkit-order: 9; order: 9; } .find-container.pbf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.allergens { -webkit-order: 10; order: 10; } .find-container.pbf .find-body-wrap .find-body-right .find-body-controls .find-body-control { background-color: #000b52; color: white; } .find-container.pbf .find-body-wrap .find-body-right .find-body-controls .find-body-control:hover { background-color: transparent; color: #474747; } .find-container.pbf .find-body-wrap .find-body-right .find-body-controls .filter-reset { background-color: #000b52; color: white; } .find-container.pbf .find-body-wrap .find-body-right .find-body-controls .filter-reset:hover { color: #474747; background-color: white; background-image: url("/Content/image/icons/icon-refresh-dark-blue.svg"); } .find-container.pbf .find-body-wrap .find-body-right .loader { background: #000b52; } .find-container.pbf .find-body-wrap .find-body-right .product-results .product .product-main .product-name { background: rgba(232, 232, 232, 0.72); } .find-container.pbf .find-body-wrap .find-body-right .product-results .product.active, .find-container.pbf .find-body-wrap .find-body-right .product-results .product:hover { border-color: #000b52; } .find-container.pbf .find-body-wrap .find-body-right .product-results .product.active .product-main, .find-container.pbf .find-body-wrap .find-body-right .product-results .product:hover .product-main { border-color: #000b52; } .find-container.pbf .find-body-wrap .find-body-right .product-results .product.active .product-compare, .find-container.pbf .find-body-wrap .find-body-right .product-results .product:hover .product-compare { background-color: #000b52; } .find-container.pbf .compare-body-wrap .compare-tools .find-body-compare-crumb .loader-spinner { background-image: url("/Content/image/icons/icon-loader-dark-blue.svg"); } .find-container.pbf .compare-body-wrap .compare-tools .compare-close { background-color: #000b52; } .find-container.pbf .compare-body-wrap .compare-tools .compare-close:hover, .find-container.pbf .compare-body-wrap .compare-tools .compare-close:active { background-image: url("/Content/image/icons/icon-x-dark-blue.svg"); } .find-container.pbf .compare-body-wrap .compare-tools .expandable > .expand-head { background-image: url("/Content/image/icons/icon-plus-dark-blue.svg"); } .find-container.pbf .compare-body-wrap .compare-tools .expandable.open > .expand-head { background-color: #000b52; } .find-container.pbf .compare-body-wrap .compare-tools .expandable.open > .expand-body div.active { background-color: #000b52; } .find-container.pbf .compare-body-wrap .compare-tools .download-xls { background-image: url("/Content/image/icons/icon-xls-dark-blue.svg"); } .find-container.pbf .compare-body-wrap .compare-tools .download-xls:hover { background-color: #000b52; } .find-container.ppf .header { padding: 0; } .find-container.ppf .header .ingredient-header-bar { text-align: center; font-family: "Nunito", Helvetica, sans-serif; color: #18861a; font-size: 45px; font-weight: 200; text-transform: none; margin-top: 0; width: 73%; margin-left: auto; } @media screen and (max-width: 600px) { .find-container.ppf .header .ingredient-header-bar { width: 100%; margin: none; } } .find-container.ppf .find-body-wrap .find-body-left .filter-set .filter-reset { background-color: white; color: #474747; background-image: url("/Content/image/icons/icon-refresh-dark-green.svg"); } .find-container.ppf .find-body-wrap .find-body-left .filter-set .filter-reset:hover { background-color: #18861a; color: white; background-image: url("/Content/image/icons/icon-refresh-white.svg"); } .find-container.ppf .find-body-wrap .find-body-left .filter-set select { background-image: url("/Content/image/icons/icon-arrow-down-dark-green.svg"); color: #474747; } .find-container.ppf .find-body-wrap .find-body-left .filter-set select.active { color: white; background-color: #18861a; background-image: url("/Content/image/icons/icon-arrow-down-white.svg"); } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable > .expand-head { background-image: url("/Content/image/icons/icon-plus-dark-green.svg"); color: #474747; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable.open > .expand-head { background-image: url("/Content/image/icons/icon-minus-white.svg") !important; background-color: #18861a; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable.active > .expand-head { background-image: url(/Content/image/icons/icon-plus-white.svg); color: white; background-color: #18861a; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable.active > .expand-head .num-chosen { font-size: smaller; padding-left: 10px; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row a.selected { background-color: #18861a; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row-slim a.selected { background-color: #18861a; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.nutrients { -webkit-order: 1; order: 1; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.nutrients .filter-row-header.source { background-image: url(/Content/image/icons/icon-questionmark-dark-green.svg); background-repeat: no-repeat; background-position: right 7px center; background-size: 10%; background-position-y: center; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.nutrients .filter-row-header.source .about-source { width: 10%; height: 10%; display: block; position: absolute; top: 0px; right: 5px; cursor: pointer; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.nutrients .filter-row-header.source .flyout { width: 200px; height: 150px; display: none; position: absolute; top: 5px; right: 3px; border: 1px solid #dcdcdc; background-color: white; color: inherit; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.nutrients .filter-row-header.source .flyout img { position: absolute; display: block; top: 2px; right: 2px; cursor: pointer; width: 15px; height: auto; border: none; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.nutrients .filter-row-header.source .flyout p { padding: 18px 8px 8px; font-weight: normal; font-size: 12px; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.vitamins { -webkit-order: 2; order: 2; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.claims { -webkit-order: 3; order: 3; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.juice { -webkit-order: 4; order: 4; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.calories { -webkit-order: 5; order: 5; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.sweeteners { -webkit-order: 6; order: 6; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.sodium { -webkit-order: 7; order: 7; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.caffeine { -webkit-order: 8; order: 8; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.bubbles { -webkit-order: 9; order: 9; } .find-container.ppf .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.allergens { -webkit-order: 10; order: 10; } .find-container.ppf .find-body-wrap .find-body-right .find-body-controls .find-body-control { background: #18861a; color: white; } .find-container.ppf .find-body-wrap .find-body-right .find-body-controls .find-body-control:hover { background-color: #105b12; color: white; } .find-container.ppf .find-body-wrap .find-body-right .find-body-controls .filter-reset { color: white; } .find-container.ppf .find-body-wrap .find-body-right .find-body-controls .filter-reset:hover { color: #474747; background-color: white; background-image: url("/Content/image/icons/icon-refresh-dark-green.svg"); } .find-container.ppf .find-body-wrap .find-body-right .loader { background: #18861a; } .find-container.ppf .find-body-wrap .find-body-right .product-results .product .product-main .product-name { background: rgba(232, 232, 232, 0.72); } .find-container.ppf .find-body-wrap .find-body-right .product-results .product.active, .find-container.ppf .find-body-wrap .find-body-right .product-results .product:hover { border-color: #18861a; } .find-container.ppf .find-body-wrap .find-body-right .product-results .product.active .product-main, .find-container.ppf .find-body-wrap .find-body-right .product-results .product:hover .product-main { border-color: #18861a; } .find-container.ppf .find-body-wrap .find-body-right .product-results .product.active .product-compare, .find-container.ppf .find-body-wrap .find-body-right .product-results .product:hover .product-compare { background-color: #18861a; } .find-container.ppf .compare-body-wrap .compare-tools a { color: #117840 !important; } .find-container.ppf .compare-body-wrap .compare-tools .find-body-compare-crumb .loader-spinner { background-image: url("/Content/image/icons/icon-loader-dark-green.svg"); } .find-container.ppf .compare-body-wrap .compare-tools .compare-close { background-color: #18861a; } .find-container.ppf .compare-body-wrap .compare-tools .compare-close:hover, .find-container.ppf .compare-body-wrap .compare-tools .compare-close:active { background-image: url("/Content/image/icons/icon-x-dark-green.svg"); } .find-container.ppf .compare-body-wrap .compare-tools .expandable > .expand-head { background-image: url("/Content/image/icons/icon-plus-dark-green.svg"); } .find-container.ppf .compare-body-wrap .compare-tools .expandable.open > .expand-head { background-color: #18861a; } .find-container.ppf .compare-body-wrap .compare-tools .expandable.open > .expand-body div.active { background-color: #18861a; } .find-container.ppf .compare-body-wrap .compare-tools .download-xls { background-image: url("/Content/image/icons/icon-xls-dark-green.svg"); } .find-container.ppf .compare-body-wrap .compare-tools .download-xls:hover { background-color: #18861a; } .find-container.ppf .find-noprods-mssg, .find-container.ppf .find-nobrand-mssg, .find-container.ppf .find-noallergens-mssg { background-color: #8dc642; color: #474747; } .find-container.ppf .find-noprods-mssg .title-bar, .find-container.ppf .find-nobrand-mssg .title-bar, .find-container.ppf .find-noallergens-mssg .title-bar { background-color: #18861a; font-family: "Nunito", Helvetica, sans-serif; border-bottom: 4px solid #dcdcdc; } .find-container.ppf .compare-body .name a { color: #333333; } .find-container.ppf .compare-body .name a:hover { color: #1c82ba; } #resultContainer > div { float: none; } .find-container { position: relative; } .find-container .header { text-align: center; position: relative; min-height: 60px; height: auto; } .find-container .header .ingredient-header-bar { font-family: "Nunito", Helvetica, Sans-Serif; font-size: 28px; font-weight: 700; text-transform: uppercase; text-align: center; margin-top: 10px; margin-bottom: 0; padding: 10px 0; } .find-container .header .mobile-search { display: none; margin-bottom: 10px; } @media screen and (max-width: 600px) { .find-container .header .mobile-search { display: block; } .find-container .header .mobile-search .search-bar { position: relative; width: 100%; margin: 10px 0px; } .find-container .header .mobile-search .search-bar input { border: none; padding: 0px 20px; width: 100%; border: 1px solid #474747; height: 34px; border-radius: 17px; } .find-container .header .mobile-search .search-bar .search-icon, .find-container .header .mobile-search .search-bar .search-icon2 { display: inline-block; width: 12px; right: 8px; bottom: 11px; position: absolute; opacity: .5; pointer-events: none; height: 14px; line-height: 12px; } } .find-container .header .choice-warning { position: absolute; width: 27%; text-align: left; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 600px) { .find-container .header { flex-direction: column; padding: 0; } .find-container .header .choice-warning { position: relative; width: 100%; top: 0; transform: none; text-align: center; } } .find-container .find-body-wrap { position: relative; display: flex; justify-content: space-between; align-items: flex-start; display: none; } .find-container .find-body-wrap.active { display: flex; } .find-container .find-body-wrap .find-body-left { width: 23%; margin-bottom: 50px; } .find-container .find-body-wrap .find-body-left .filter-set .num-matches { font-weight: bold; margin-bottom: 17px; min-height: 40px; display: flex; align-items: flex-end; } .find-container .find-body-wrap .find-body-left .filter-set .num-matches p { margin: 0; } @media screen and (max-width: 600px) { .find-container .find-body-wrap .find-body-left .filter-set .num-matches { display: none; } } .find-container .find-body-wrap .find-body-left .filter-set .filter-reset { width: 100%; min-height: 40px; line-height: 40px; vertical-align: middle; border: 1px solid #d6d6d6; padding: 0px 4%; font-weight: bold; color: white; background-color: #474747; background-image: url("/Content/image/icons/icon-refresh-white.svg"); background-repeat: no-repeat; background-position: 95% center; background-size: 15px 15px; padding-right: 15%; padding-left: 8%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .find-container .find-body-wrap .find-body-left .filter-set .filter-reset:hover, .find-container .find-body-wrap .find-body-left .filter-set .filter-reset:active { color: #474747; background-color: white; background-image: url("/Content/image/icons/icon-refresh-dark-gray.svg"); } .find-container .find-body-wrap .find-body-left .filter-set .filter-reset.disabled { opacity: .35; pointer-events: none; } @media screen and (max-width: 600px) { .find-container .find-body-wrap .find-body-left .filter-set .filter-reset { display: none; } } .find-container .find-body-wrap .find-body-left .filter-set select { width: 100%; height: 40px; font-size: 14px; margin: 10px 0px 0px 0px; border: 1px solid #d6d6d6; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-weight: bold; color: #474747; background-color: white; background-image: url("/Content/image/icons/icon-arrow-down-dark-gray.svg"); background-repeat: no-repeat; background-position: 94.5% center; background-size: 10px 10px; padding-right: 15%; padding-left: 8%; cursor: pointer; } .find-container .find-body-wrap .find-body-left .filter-set select.active { color: white; background-color: darkgray; background-image: url("/Content/image/icons/icon-arrow-down-white.svg"); } .find-container .find-body-wrap .find-body-left .filter-set select.disabled { opacity: .35; pointer-events: none; } .find-container .find-body-wrap .find-body-left .filter-set select option.hide { display: none; } .find-container .find-body-wrap .find-body-left .filter-set .expandable { display: flex; flex-direction: column; width: 100%; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expand-head img { height: 24px; margin-right: 4px; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expand-head span { padding: 10px 0; } .find-container .find-body-wrap .find-body-left .filter-set .expandable > .expand-head { width: 100%; min-height: 40px; line-height: 18px; vertical-align: middle; border: 1px solid #d6d6d6; padding: 0px 4%; font-weight: bold; color: #474747; background-color: white; background-image: url("/Content/image/icons/icon-plus-dark-gray.svg"); background-repeat: no-repeat; background-position: 95% center; background-size: 15px 15px; padding-right: 15%; padding-left: 4%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; display: flex; align-items: center; } .find-container .find-body-wrap .find-body-left .filter-set .expandable > .expand-body { display: none; transform: scale(0); opacity: 0; transition: transform 250ms ease-in-out, opacity 250ms ease-in-out; } .find-container .find-body-wrap .find-body-left .filter-set .expandable.disabled { opacity: .35; pointer-events: none; } .find-container .find-body-wrap .find-body-left .filter-set .expandable.open > .expand-head { color: white; background-color: darkgray; background-image: url("/Content/image/icons/icon-x-white.svg"); } .find-container .find-body-wrap .find-body-left .filter-set .expandable.open > .expand-head .icon.icon-options { background-image: url("/Content/image/icons/icon-options-white.svg"); } .find-container .find-body-wrap .find-body-left .filter-set .expandable.open > .expand-body { display: flex; flex-direction: column; transform: scaleY(1); transform-origin: top center; opacity: 1; animation: scaleIn 250ms forwards ease-in-out; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained { background: transparent; color: white; margin-left: 15px; width: calc(100% - 15px); } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-head { border: none; background-color: transparent; user-select: none; border: none; cursor: pointer; border-bottom: 1px solid #d6d6d6; display: flex; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row { justify-content: space-between; align-items: center; width: 100%; font-size: 0px; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row a { font-size: 14px; padding: 15px 0px; color: #474747; text-align: center; border-right: 1px solid #d6d6d6; cursor: pointer; display: inline-block; user-select: none; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row a:last-child { border: none; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row a.selected { background: #474747; color: white; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row.cols-3 a { width: calc(100%/3); } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row.cols-2 a { width: 50%; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row.cols-1 a { width: 100%; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row-header { width: 100%; color: #474747; font-weight: bold; text-align: center; padding: 5px 8px; border-bottom: 1px solid #d6d6d6; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row-slim { border-bottom: 1px solid #d6d6d6; color: #474747; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row-slim:last-child { border-bottom: none; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row-slim .filter-label { color: #474747; float: left; padding-top: 5px; padding-left: 8px; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row-slim a { float: right; padding: 5px 8px; border-left: 1px solid #d6d6d6; user-select: none; cursor: pointer; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row-slim a.selected { color: white; background: #474747; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row-slim a.more-info { color: #474747; border: none; text-decoration: underline; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row-slim a input[type="checkbox"] { pointer-events: none; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row-slim .filter-btn-group { float: right; min-width: 128px; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row-slim .filter-btn-group a { float: right; width: 50%; text-align: center; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row-slim .filter-btn-group a input { pointer-events: none; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row-slim .filter-btn-group a.disabled.hidden { visibility: hidden; pointer-events: none; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained .expand-body .filter-row-slim:after { content: ' '; display: block; clear: both; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.open { border-bottom: 1px solid #d6d6d6; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.open > .expand-head { color: #474747; background-color: transparent; border-bottom: 1px solid #d6d6d6; background-image: url("/Content/image/icons/icon-x-dark-gray.svg"); } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.open .expand-body .filter-row { border-bottom: 1px solid #d6d6d6; } .find-container .find-body-wrap .find-body-left .filter-set .expandable .expandable-contained.open .expand-body .filter-row:last-child { border-bottom: none; } .find-container .find-body-wrap .find-body-left .filter-set .more-options { margin-top: 10px; } .find-container .find-body-wrap .find-body-left .filter-set .more-options > .expand-head { padding-left: 8%; } .find-container .find-body-wrap .find-body-right { width: 73%; min-height: 60vh; position: relative; } .find-container .find-body-wrap .find-body-right .find-body-controls { width: 100%; display: flex; justify-content: space-around; justify-content: space-evenly; align-items: center; flex-wrap: wrap; } .find-container .find-body-wrap .find-body-right .find-body-controls .find-body-control { width: calc((100%/4) - 30px); margin-bottom: 15px; min-height: 40px; line-height: 40px; vertical-align: middle; border: 1px solid #d6d6d6; font-weight: bold; color: #474747; text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .find-container .find-body-wrap .find-body-right .find-body-controls .find-body-control.disabled { pointer-events: none; opacity: .5; } .find-container .find-body-wrap .find-body-right .find-body-controls .find-body-control.hidden { visibility: hidden; } .find-container .find-body-wrap .find-body-right .find-body-controls .find-body-filter-crumb { width: calc((100%/2) - 30px); } .find-container .find-body-wrap .find-body-right .find-body-controls .num-matches { display: none; } .find-container .find-body-wrap .find-body-right .find-body-controls .filter-reset { display: none; } @media screen and (max-width: 600px) { .find-container .find-body-wrap .find-body-right .find-body-controls { flex-direction: column; text-align: center; } .find-container .find-body-wrap .find-body-right .find-body-controls .num-matches { display: block; } .find-container .find-body-wrap .find-body-right .find-body-controls .filter-reset { display: block; width: 32%; height: 30px; min-height: 30px; line-height: 30px; vertical-align: middle; border: 1px solid #d6d6d6; padding: 0px 7% 0% 4%; font-weight: bold; color: white; background-color: #474747; background-image: url("/Content/image/icons/icon-refresh-white.svg"); background-repeat: no-repeat; background-position: 95% center; background-size: 12px 12px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; margin-top: 10px; margin-bottom: 10px; } .find-container .find-body-wrap .find-body-right .find-body-controls .filter-reset:hover, .find-container .find-body-wrap .find-body-right .find-body-controls .filter-reset:active { color: #474747; background-color: white; background-image: url("/Content/image/icons/icon-refresh-dark-gray.svg"); } .find-container .find-body-wrap .find-body-right .find-body-controls .find-body-control { display: none; } } @media screen and (max-width: 720px) { .find-container .find-body-wrap .find-body-right .find-body-controls .find-body-control { width: calc(50% - 7.5px); } .find-container .find-body-wrap .find-body-right .find-body-controls .find-body-control.hidden { display: none; } } .find-container .find-body-wrap .find-body-right .loader { position: absolute; top: 57px; width: 100%; padding: 8px 10px; text-align: center; background: #474747; z-index: 1; } .find-container .find-body-wrap .find-body-right .loader.loader-bottom { top: auto; bottom: 0; left: 0; } @media screen and (max-width: 600px) { .find-container .find-body-wrap .find-body-right .loader.loader-bottom { width: 100%; } } .find-container .find-body-wrap .find-body-right .loader .loader-text { text-transform: uppercase; font-weight: bold; display: inline-block; color: white; vertical-align: middle; } .find-container .find-body-wrap .find-body-right .loader .loader-spinner { margin-left: 10px; width: 30px; height: 30px; animation: spin 1s steps(5) infinite; transform-origin: center; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .find-container .find-body-wrap .find-body-right .product-results { width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; position: relative; margin-bottom: 50px; } .find-container .find-body-wrap .find-body-right .product-results .product-lockup { width: calc(100% - 45px); padding-top: 45px; } .find-container .find-body-wrap .find-body-right .product-results .product { width: calc((100%/4) - 30px); margin-bottom: 30px; border: 1px solid #d6d6d6; } .find-container .find-body-wrap .find-body-right .product-results .product .product-main { text-align: center; position: relative; height: 230px; border: 3px solid transparent; } .find-container .find-body-wrap .find-body-right .product-results .product .product-main .product-link { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border: none; margin: 0; padding-bottom: 20px; } .find-container .find-body-wrap .find-body-right .product-results .product .product-main .product-link img { width: auto; height: 75%; } @media screen and (max-width: 767px) { .find-container .find-body-wrap .find-body-right .product-results .product .product-main .product-link img { height: 69%; } } .find-container .find-body-wrap .find-body-right .product-results .product .product-main .product-name { position: absolute; width: 100%; min-height: 58px; padding: 8px; left: 0; bottom: 0; font-weight: bold; background: rgba(169, 169, 169, 0.35); display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 14px; opacity: 0; transition: opacity 250ms ease-in-out; } @media screen and (max-width: 600px) { .find-container .find-body-wrap .find-body-right .product-results .product .product-main .product-name { opacity: 1; } } .find-container .find-body-wrap .find-body-right .product-results .product .product-main .product-name span, .find-container .find-body-wrap .find-body-right .product-results .product .product-main .product-name label { font-size: 14px; color: #474747; width: 100%; } .find-container .find-body-wrap .find-body-right .product-results .product .product-compare { padding: 8px; display: flex; align-items: center; border-top: 1px solid #d6d6d6; } .find-container .find-body-wrap .find-body-right .product-results .product .product-compare span, .find-container .find-body-wrap .find-body-right .product-results .product .product-compare label { padding-left: 6px; margin: 0; flex: 1; } @media screen and (max-width: 600px) { .find-container .find-body-wrap .find-body-right .product-results .product .product-compare { display: none; } } .find-container .find-body-wrap .find-body-right .product-results .product.active, .find-container .find-body-wrap .find-body-right .product-results .product:hover { border-color: darkgray; } .find-container .find-body-wrap .find-body-right .product-results .product.active .product-main, .find-container .find-body-wrap .find-body-right .product-results .product:hover .product-main { border: 3px solid darkgray; } .find-container .find-body-wrap .find-body-right .product-results .product.active .product-main .product-name, .find-container .find-body-wrap .find-body-right .product-results .product:hover .product-main .product-name { opacity: 1; } .find-container .find-body-wrap .find-body-right .product-results .product.active .product-compare, .find-container .find-body-wrap .find-body-right .product-results .product:hover .product-compare { background: darkgray; color: white; border: none; } .find-container .find-body-wrap .find-body-right .product-results .product.paged-out { display: none; } @media screen and (max-width: 768px) { .find-container .find-body-wrap .find-body-right .product-results .product { width: calc(100%/3 - 30px); margin-bottom: 7.5px; } } @media screen and (max-width: 550px) { .find-container .find-body-wrap .find-body-right .product-results .product { width: calc(100%/2 - 30px); margin-bottom: 7.5px; } } @media screen and (max-width: 600px) { .find-container .find-body-wrap { flex-direction: column; justify-content: center; align-items: center; } .find-container .find-body-wrap .find-body-left { width: 100%; } .find-container .find-body-wrap .find-body-right { width: 100%; } } .find-container .compare-body-wrap { width: 100%; height: 100%; top: 0; left: 0; background: white; display: none; } .find-container .compare-body-wrap.active { display: block; } .find-container .compare-body-wrap .compare-tools { display: flex; align-items: flex-start; flex-wrap: wrap; margin-bottom: 15px; } .find-container .compare-body-wrap .compare-tools .find-body-compare-crumb { margin-right: auto; } .find-container .compare-body-wrap .compare-tools .find-body-compare-crumb a { cursor: pointer; color: #007bff; } .find-container .compare-body-wrap .compare-tools .find-body-compare-crumb a.disabled { color: unset; cursor: unset; } .find-container .compare-body-wrap .compare-tools .find-body-compare-crumb .loader-spinner { background-image: url("/Content/image/icons/icon-loader-dark-gray.svg"); display: inline-block; height: 13px; width: 13px; background-size: 100%; background-repeat: no-repeat; animation: compareSpin 1s steps(5) infinite; } @keyframes compareSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .find-container .compare-body-wrap .compare-tools .compare-close { width: 85px; min-height: 40px; line-height: 40px; vertical-align: middle; border: 1px solid #d6d6d6; padding: 0px 4%; font-weight: bold; color: white; background-color: #474747; background-image: url("/Content/image/icons/icon-x-white.svg"); background-repeat: no-repeat; background-position: 95% center; background-size: 20px 20px; padding-right: 3%; padding-left: 1%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .find-container .compare-body-wrap .compare-tools .compare-close:hover, .find-container .compare-body-wrap .compare-tools .compare-close:active { color: #474747; background-color: white; background-image: url("/Content/image/icons/icon-x-dark-gray.svg"); } .find-container .compare-body-wrap .compare-tools .expandable { display: flex; flex-direction: column; width: 320px; box-sizing: content-box; position: relative; margin-right: 15px; } .find-container .compare-body-wrap .compare-tools .expandable > .expand-head { width: 100%; min-height: 40px; line-height: 40px; vertical-align: middle; border: 1px solid #d6d6d6; padding: 0px 4%; font-weight: bold; color: #474747; background-color: white; background-image: url("/Content/image/icons/icon-plus-dark-gray.svg"); background-repeat: no-repeat; background-position: 95% center; background-size: 15px 15px; padding-right: 15%; padding-left: 4%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .find-container .compare-body-wrap .compare-tools .expandable > .expand-body { width: 100%; display: none; transform: scale(0); opacity: 0; transition: transform 250ms ease-in-out, opacity 250ms ease-in-out; position: absolute; z-index: 1; top: 42px; background: white; max-height: 200px; overflow-y: scroll; } .find-container .compare-body-wrap .compare-tools .expandable.open > .expand-head { color: white; background-color: #474747; background-image: url("/Content/image/icons/icon-x-white.svg"); } .find-container .compare-body-wrap .compare-tools .expandable.open > .expand-body { display: block; transform: scaleY(1); transform-origin: top center; opacity: 1; animation: scaleIn 250ms forwards ease-in-out; } .find-container .compare-body-wrap .compare-tools .expandable.open > .expand-body div { cursor: pointer; padding-left: 8px; } .find-container .compare-body-wrap .compare-tools .expandable.open > .expand-body div.active { background-color: #474747; color: white; font-weight: bold; } .find-container .compare-body-wrap table { display: block; overflow: auto; min-width: 100%; max-height: 58vh; } @media screen and (max-width: 600px) { .find-container .compare-body-wrap table { max-height: 50vh; white-space: nowrap; } } .find-container .compare-body-wrap table thead tr th { padding: 10px; position: sticky; top: 0; background: white; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; background-clip: padding-box; } .find-container .compare-body-wrap table thead tr th:last-child { border-right: none; } .find-container .compare-body-wrap table tbody tr:nth-child(odd) { background-color: #e1e1e1; } .find-container .compare-body-wrap table tbody tr td { padding: 10px; border-right: 1px solid #d6d6d6; } .find-container .compare-body-wrap table tbody tr td:last-child { border-right: none; } .find-container .compare-body-wrap .disclaimer { width: 100%; padding: 15px; } .find-container .find-noprods-mssg, .find-container .find-nobrand-mssg, .find-container .find-noallergens-mssg { background-color: rgba(28, 130, 186, 0.9); color: #ffffff; height: 200px; left: 45%; margin-right: -250px; position: absolute; right: 13px; top: 222px; width: 500px; z-index: 10; visibility: hidden; } @media screen and (max-width: 767px) { .find-container .find-noprods-mssg, .find-container .find-nobrand-mssg, .find-container .find-noallergens-mssg { max-width: 500px; width: 100%; margin-right: 0; left: 50%; transform: translateX(-50%) !important; right: auto; } } .find-container .find-noprods-mssg .title-bar, .find-container .find-nobrand-mssg .title-bar, .find-container .find-noallergens-mssg .title-bar { color: #ffffff; height: 40px; font-size: 14px; font-family: "futura-pt"; font-weight: bold; } .find-container .find-noprods-mssg .title-bar span, .find-container .find-nobrand-mssg .title-bar span, .find-container .find-noallergens-mssg .title-bar span { position: absolute; top: 3px; left: 20px; text-transform: uppercase; font-size: 22px; } .find-container .find-noprods-mssg .title-bar a, .find-container .find-nobrand-mssg .title-bar a, .find-container .find-noallergens-mssg .title-bar a { position: absolute; top: 8px; right: 8px; color: #ffffff; } .find-container .find-noprods-mssg .mssg-content, .find-container .find-nobrand-mssg .mssg-content, .find-container .find-noallergens-mssg .mssg-content { height: 90%; position: absolute; padding: 30px; padding-top: 30px; } .download-xls { border: 1px solid #d6d6d6; height: 40px; width: 40px; background-image: url("/Content/image/icons/icon-xls-dark-gray.svg"); background-size: 100% auto; background-position: center; margin-right: 15px; box-sizing: content-box; cursor: pointer; } .download-xls .excel-link { width: 40px; height: 40px; box-sizing: border-box; visibility: visible; } .download-xls:hover { background-image: url("/Content/image/icons/icon-xls-white.svg"); background-color: #474747; } @keyframes scaleIn { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; transform: scaleY(0); } 100% { opacity: 1; transform: scaleY(1); } } .find-filters .filter-box .filter-box-row-toggle a input[type="checkbox"] { pointer-events: none; } .find-filters .filter-box .filter-box-row-toggle a.disabled { pointer-events: none; } .find-filters .filter-box .filter-box-row-toggle a.hidden { visibility: hidden; } .find-filters .filter-box .filter-box-row-toggle-large.short, .find-filters .filter-box .filter-box-row-toggle-large.short a { height: 45px; line-height: 45px; } .find-filters .filter-box.nutrients .filter-box-row-toggle a { width: 60px; } /****************/ /*compare*/ .compare-container.pbf .filter-btn { color: #474747; } .compare-container.pbf .filter-btn:hover, .compare-container.pbf .filter-btn:active, .compare-container.pbf .filter-btn.active { background-color: #000b52; } .compare-container.pbf .expandable.generic > .expand-head { background-image: url("/Content/image/icons/icon-plus-dark-blue.svg"); } .compare-container.pbf .expandable.generic.open > .expand-head { background-color: #000b52; background-image: url("/Content/image/icons/icon-minus-white.svg") !important; } .compare-container.pbf .expandable.generic.open > .expand-body div.active { background-color: #000b52; } .compare-container.pbf .expandable.generic.active > .expand-head { color: white; background-color: #000b52; background-image: url("/Content/image/icons/icon-plus-white.svg"); } .compare-container.pbf .download-xls { background-image: url("/Content/image/icons/icon-xls-dark-blue.svg"); } .compare-container.pbf .download-xls:hover { background-color: #000b52; background-image: url("/Content/image/icons/icon-xls-white.svg"); } .compare-container.ppf .compare-attribute-body thead tr { background: #117840; } .compare-container.ppf .filter-btn { color: #474747; } .compare-container.ppf .filter-btn:hover, .compare-container.ppf .filter-btn:active, .compare-container.ppf .filter-btn.active { background-color: #18861a; } .compare-container.ppf .expandable.generic > .expand-head { background-image: url("/Content/image/icons/icon-plus-dark-green.svg"); } .compare-container.ppf .expandable.generic.open > .expand-head { background-color: #18861a; background-image: url("/Content/image/icons/icon-minus-white.svg") !important; } .compare-container.ppf .expandable.generic.open > .expand-body div.active { background-color: #18861a; } .compare-container.ppf .expandable.generic.active > .expand-head { color: white; background-color: #18861a; background-image: url("/Content/image/icons/icon-plus-white.svg"); } .compare-container.ppf .download-xls { background-image: url("/Content/image/icons/icon-xls-dark-green.svg"); } .compare-container.ppf .download-xls:hover { background-color: #18861a; background-image: url("/Content/image/icons/icon-xls-white.svg"); } .page-compare .content { padding-right: 15px; } .compare-container { position: relative; /*.compare-filters { position: absolute; top: 0; right: 0; width: 80%; display: flex; justify-content: flex-end; z-index: 1; opacity: 0; &.ready { opacity: 1; } @media (max-width: 768px) { position: static; justify-content: flex-start; margin-bottom: 25px; width: 100%; } @media (max-width: 650px) { display: block; } .segment { &:first-child { margin-right: 2%; @media (max-width: 650px) { margin-right: 0; margin-bottom: 10px; } } } }*/ /*.compare-attribute { .compare-attribute-head { display: flex; margin-bottom: 20px; @media (max-width: 768px) { flex-direction: column; } .download-xls { @media (max-width:768px) { margin-left: auto; margin-right: 0; } } } }*/ } .compare-container .header { pointer-events: none; } .compare-container .filter-btn { display: inline-block; width: 100%; height: 40px; min-height: 40px; line-height: 40px; vertical-align: middle; border: 1px solid #d6d6d6; text-align: left; padding: 0px 10px 0px 10px; font-weight: bold; font-size: 14px; color: #474747; background-color: white; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; margin-top: 10px; margin-bottom: 10px; } .compare-container .filter-btn:hover, .compare-container .filter-btn:active, .compare-container .filter-btn.active { color: #fff; background-color: #474747; } .compare-container .compare-body { opacity: 0; padding-top: 20px; padding-bottom: 50px; padding-right: 10px; } .compare-container .compare-body.ready { opacity: 1; } .compare-container .compare-body .compare-row { display: block; width: 100%; /*@media screen and (max-width: 678px) { flex-direction: column; .compare-column { flex: 1; margin-right: 0; &.left-rail { padding-top: 0; } } }*/ } .compare-container .compare-body .compare-row .compare-column { /*flex: .5; margin-right: 30px; &:last-child { margin-right: 0; } &.left-rail { //flex: .4; // padding-top: 105px; width: 100%; display: block; } &.right-rail { //flex: .6; //overflow: hidden; width: 100%; display: block; }*/ } .compare-container .compare-body .tutorial { color: white; padding-top: 10px; padding-bottom: 10px; background-color: rgba(0, 0, 0, 0.35); display: none; } .compare-container .compare-body .compare-filters { width: 100%; } .compare-container .compare-body .compare-filters .segment { display: flex; } .compare-container .compare-body .compare-filters .segment .filter-btn { width: 50%; margin-right: 15px; margin-top: 0; height: auto; line-height: 14px; display: flex; align-items: center; justify-content: center; text-align: center; } .compare-container .compare-body .compare-filters .segment .filter-btn:last-child { margin-right: 0; } .compare-container .dropdown-box, .compare-container .expandable > .expand-body { width: 100%; display: none; transform: scale(0); opacity: 0; transition: transform 250ms ease-in-out, opacity 250ms ease-in-out; position: absolute; z-index: 1; top: 40px; background: white; max-height: 200px; overflow-y: scroll; border: 1px solid #909090; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); } .compare-container .compare-product { width: 100%; } .compare-container .compare-product .comparators { margin-bottom: 45px; } .compare-container .compare-product .comparators .comparator-table-labels { margin-top: 120px; display: inline-block; width: 120px; text-align: right; } .compare-container .compare-product .comparators .comparator-search { width: 100%; } @media (max-width: 480px) { .compare-container .compare-product .comparators .comparator-search { width: 100%; } } .compare-container .compare-product .comparators .comparator-select-size { margin-top: 10px; display: inline-block; } .compare-container .compare-product .comparators .comparator-select-size select { padding: 5px; } .compare-container .compare-product .comparators .comparator-remove { margin-top: 10px; float: right; padding: 5px 15px; } .compare-container .compare-product .comparators .comparators-list { display: flex; flex-wrap: wrap; } .compare-container .compare-product .comparators .comparator { display: block; margin-bottom: 10px; padding: 10px 0px; width: 100%; position: relative; } @media (max-width: 650px) { .compare-container .compare-product .comparators .comparator { width: 100%; } } .compare-container .compare-product .comparators .comparator input { border: 1px solid #dcdcdc; background-image: url("/Content/image/icons/magnifying-glass-half-opacity.svg"); background-repeat: no-repeat; background-position: 97% 50%; background-size: auto 50%; } .compare-container .compare-product .comparators input { width: 100%; padding: 5px; } .compare-container .compare-product .comparators select { border: 1px solid #dcdcdc; } .compare-container .compare-product .comparators .search-suggestions { position: absolute; background: white; border: 1px solid #999; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); z-index: 11; width: calc(100% - 20px); max-height: 200px; overflow: auto; } .compare-container .compare-product .comparators .search-suggestions > div { padding: 10px; cursor: pointer; } .compare-container .compare-product .comparators .search-suggestions > div:hover { background: #dcdcdc; } .compare-container .compare-product .comparators button { display: inline-block; vertical-align: top; margin-left: auto; } @media screen and (min-width: 768px) { .compare-container .compare-attribute .attribute-tbl-top { margin-top: 2rem; } } .compare-container .compare-attribute .compare-attribute-body .compare-wrapper { padding-top: 15px; } .compare-container .compare-attribute .compare-attribute-body .compare-wrapper.lower { padding-top: 195px; } .compare-container .compare-attribute .compare-attribute-body .compare-wrapper .compare-scroller { max-width: 100%; max-height: 30em; overflow: scroll; position: relative; } @media screen and (min-width: 768px) { .compare-container .compare-attribute .compare-attribute-body .compare-wrapper .compare-scroller { max-height: 40em; } } .compare-container .compare-attribute .compare-attribute-body .compare-wrapper .compare-scroller table { position: relative; display: table; } .compare-container .compare-attribute .compare-attribute-body .compare-wrapper .compare-scroller table thead th { position: -webkit-sticky; /* for Safari */ position: sticky; top: 0; } .compare-container .compare-attribute .compare-attribute-body .compare-wrapper .compare-scroller table thead th:first-child { left: 0; z-index: 1; } @media (max-width: 650px) { .compare-container .compare-attribute .compare-attribute-body .compare-wrapper .compare-scroller table thead th:first-child { width: 50%; } } .compare-container .compare-attribute .compare-attribute-body .compare-wrapper .compare-scroller table tbody th { position: -webkit-sticky; /* for Safari */ position: sticky; left: 0; text-align: left; padding-left: 5px; background-color: inherit; } @media (max-width: 650px) { .compare-container .compare-attribute .compare-attribute-body .compare-wrapper .compare-scroller table tbody th { width: 50%; } } .compare-container .compare-attribute .compare-attribute-body .compare-wrapper .compare-scroller table tbody tr { /*td:first-child() { text-align: left; padding-left: 5px; }*/ font-size: 12px; } .compare-container .compare-attribute .comparator-remove { margin-top: 10px; margin-bottom: 10px; float: right; padding: 5px 15px; } .compare-container .compare-product { /*.hint { display: none; @media (max-width:650px) { display: block; } }*/ } .compare-container .compare-product .table-container .compare-wrapper .compare-scroller { max-width: 100%; /*max-height: 20em;*/ overflow: scroll; position: relative; } .compare-container .compare-product .table-container .compare-wrapper .compare-scroller table { position: relative; display: table; } .compare-container .compare-product .table-container .compare-wrapper .compare-scroller table thead th { position: -webkit-sticky; /* for Safari */ position: sticky; top: 0; } .compare-container .compare-product .table-container .compare-wrapper .compare-scroller table thead th:first-child { left: 0; z-index: 1; width: 1%; white-space: nowrap; box-shadow: 1px 0px 0px 0px #dcdcdc; } .compare-container .compare-product .table-container .compare-wrapper .compare-scroller table tbody th { position: -webkit-sticky; /* for Safari */ position: sticky; left: 0; text-align: left; padding-left: 5px; background-color: inherit; width: 1%; white-space: nowrap; box-shadow: 1px 0px 0px 0px #dcdcdc; } .compare-container .compare-product .table-container .compare-wrapper .compare-scroller table tbody tr { /*td:first-child() { text-align: left; padding-left: 5px; }*/ font-size: 12px; } .compare-container .expandable { display: flex; flex-direction: column; width: 100%; box-sizing: content-box; position: relative; margin-top: 10px; margin-right: 15px; border: 1px solid #CCC; z-index: 2; } @media (max-width: 768px) { .compare-container .expandable { width: 100%; margin: 4px 0px; } } .compare-container .expandable > .expand-head { width: 100%; min-height: 40px; line-height: 40px; vertical-align: middle; padding: 0px 4%; font-weight: bold; color: #474747; background-color: white; background-image: url("/Content/image/icons/icon-plus-dark-gray.svg"); background-repeat: no-repeat; background-position: 95% center; background-size: 22px; padding-right: 15%; padding-left: 4%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .compare-container .expandable.open > .expand-head { color: white; background-color: #474747; background-image: url("/Content/image/icons/icon-x-white.svg"); } .compare-container .expandable.open > .expand-body { display: block; transform: scaleY(1); transform-origin: top center; opacity: 1; animation: scaleIn 250ms forwards ease-in-out; } .compare-container .expandable.open > .expand-body div { cursor: pointer; padding: 5px; } .compare-container .expandable.open > .expand-body div.active { background-color: #474747; color: white; font-weight: bold; } .compare-container .expandable.brand { z-index: 3; } .compare-container .expandable.category { z-index: 4; } .compare-container .download-xls { margin-top: 10px; margin-left: auto; } .compare-container .table-container { width: 100%; overflow: auto; } .compare-container .table-container table { font-size: 14px; display: block; overflow: auto; min-width: 100%; } @media (max-width: 768px) { .compare-container .table-container table { /*min-width: 900px;*/ } } @media (min-width: 768px) { .compare-container .table-container table { white-space: nowrap; } } .compare-container .table-container table td, .compare-container .table-container table th { padding: 5px; text-align: center; border-right: 1px solid #dcdcdc; } .compare-container .table-container table td:last-child { border: none; } .compare-container .table-container table td.bold { font-weight: bold; } .compare-container .table-container table tr { background: #ededed; } .compare-container .table-container table tr:nth-child(even) { background: #fff; } .compare-container .table-container table thead th { background: #fff; color: #474747; border-bottom: 1px solid #474747; position: sticky; top: 0; } .compare-container .table-container table thead th.product-header { min-width: 130px; } .compare-container .table-container table thead th.sortable { cursor: pointer; } .compare-container .table-container table thead th.sortable:hover, .compare-container .table-container table thead th.sortable.desc, .compare-container .table-container table thead th.sortable.asc { background: #dcdcdc; } .compare-container .table-container table thead th.sortable .arrow { display: none; } .compare-container .table-container table thead th.sortable.desc { font-weight: bold; } .compare-container .table-container table thead th.sortable.desc .arrow-desc { display: inline-block; } .compare-container .table-container table thead th.sortable.asc { font-weight: bold; } .compare-container .table-container table thead th.sortable.asc .arrow-asc { display: inline-block; } .compare-container .table-container table img { height: 85px; } .compare-container .compare-footnote { display: block; position: relative; font-size: 11px; padding-top: 20px; } .compare-container .load-more { margin-top: 10px; } .compare-container .load-more.disabled { pointer-events: none; opacity: .65; } .compare-container .load-more .loader-spinner { background-image: url("/Content/image/icons/icon-loader-dark-gray.svg"); display: inline-block; height: 13px; width: 13px; background-size: 100%; background-repeat: no-repeat; animation: spin 1s steps(5) infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .compare-container .hint-container { display: none; } @media (max-width: 768px) { .compare-container .hint-container { display: block; } } .compare-container .hint-container .hint { margin: 0; display: none; } .compare-container .showingtxt-container { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; } .compare-container .showing-txt { padding-top: 15px; } .compare-container .showing-txt a, .compare-container .showing-txt a:hover, .compare-container .showing-txt a:active, .compare-container .showing-txt a:link { cursor: pointer; color: #007bff; text-decoration: underline; padding-left: 5px; } .compare-container .showing-txt a.disabled, .compare-container .showing-txt a:hover.disabled, .compare-container .showing-txt a:active.disabled, .compare-container .showing-txt a:link.disabled { color: unset; cursor: unset; text-decoration: unset; } .compare-container .showing-txt .loader-spinner { background-image: url("/Content/image/icons/icon-loader-dark-gray.svg"); display: inline-block; height: 13px; width: 13px; background-size: 100%; background-repeat: no-repeat; animation: compareSpin 1s steps(5) infinite; } @keyframes compareSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .compare-container .table-loading { display: flex; justify-content: center; align-items: center; min-height: 100px; } .compare-container .table-loading span { display: flex; align-items: center; } .compare-container .table-loading .loader-spinner { background-image: url("/Content/image/icons/icon-loader-dark-gray.svg"); display: inline-block; height: 25px; width: 25px; background-size: 100%; background-repeat: no-repeat; animation: spin 1s steps(5) infinite; margin-left: 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /****************/ /*downloads*/ .downloads-container.pbf .header .ingredient-header-bar { color: #000b52; } .downloads-container.pbf .filter-btn { color: #474747; } .downloads-container.pbf .filter-btn:hover, .downloads-container.pbf .filter-btn:active, .downloads-container.pbf .filter-btn.active { background-color: #000b52; } .downloads-container.pbf .downloads-body .button { color: white; background-color: #000b52; } .downloads-container.pbf .downloads-body .fc-button { margin-right: 10px; } .downloads-container.pbf .downloads-body .downloads-fountain .ingredient-tabbed-content table tr td p { text-align: left; margin-top: -1rem; } .downloads-container.pbf .downloads-body .downloads-fountain .report table { width: 100%; margin-top: 0; } .downloads-container.pbf .downloads-body .downloads-fountain .report table td.size-header { font-size: 14px; font-weight: bold; } .downloads-container.pbf .expandable.generic.open > .expand-head { background-color: #000b52; } .downloads-container.pbf .expandable.generic.open > .expand-body div.active { background-color: #000b52; } .downloads-container.pbf select.active { background-color: #000b52; } .downloads-container.pbf #created_for { margin-bottom: 10px; } .downloads-container.pbf p { margin-top: 0; margin-bottom: 1rem; } .downloads-container.pbf *, .downloads-container.pbf *::before, .downloads-container.pbf *::after { box-sizing: border-box; } .downloads-container.pbf user agent stylesheet p { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; } .downloads-container.ppf .header .ingredient-header-bar { text-align: center; font-family: "Nunito", Helvetica, sans-serif; color: #18861a; font-size: 45px; font-weight: 200; text-transform: none; margin-top: 0; } .downloads-container.ppf .filter-btn { color: #474747; } .downloads-container.ppf .filter-btn:hover, .downloads-container.ppf .filter-btn:active, .downloads-container.ppf .filter-btn.active { background-color: #18861a; } .downloads-container.ppf .downloads-body .button { color: white; background-color: #18861a; } .downloads-container.ppf .expandable.generic.open > .expand-head { background-color: #18861a; } .downloads-container.ppf .expandable.generic.open > .expand-body div.active { background-color: #18861a; } .downloads-container.ppf select.active { background-color: #18861a; } .downloads-container { position: relative; } .downloads-container .header { pointer-events: none; text-align: center; position: relative; min-height: 60px; height: auto; } .downloads-container .header .ingredient-header-bar { /*font-family: "Nunito", Helvetica, Sans-Serif; font-size: 28px; font-weight: 700; text-transform: uppercase; text-align: center; margin-top: 10px; margin-bottom: 0; padding: 10px 0;*/ } .downloads-container .filter-btn { display: inline-block; width: 100%; height: 40px; min-height: 40px; line-height: 40px; vertical-align: middle; border: 1px solid #d6d6d6; text-align: left; padding: 0px 10px 0px 10px; font-weight: bold; font-size: 14px; color: #474747; background-color: white; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; margin-top: 10px; margin-bottom: 10px; } .downloads-container .filter-btn:hover, .downloads-container .filter-btn:active, .downloads-container .filter-btn.active { color: #fff; background-color: #474747; } .downloads-container .downloads-filters { width: 100%; display: flex; margin-bottom: 0; justify-content: start; align-items: end; z-index: 1; opacity: 0; } .downloads-container .downloads-filters.ready { opacity: 1; } .downloads-container .downloads-filters .filter-btn { width: calc((100%/3) - 15px); margin-right: calc(15px * 1.5); height: auto; line-height: 14px; display: flex; align-items: center; justify-content: center; } .downloads-container .downloads-filters .filter-btn:last-child { margin-right: 0; } @media (max-width: 768px) { .downloads-container .downloads-filters { position: static; justify-content: flex-start; width: 100%; } } @media (max-width: 600px) { .downloads-container .downloads-filters { flex-direction: column; } .downloads-container .downloads-filters .filter-btn { width: 100%; margin-right: 0; margin-top: 0px; margin-bottom: 10px; } } .downloads-container .downloads-body { opacity: 0; padding-bottom: 50px; padding: 20px 7px 45px 7px; margin-bottom: 20px; border: 1px solid #dcdcdc; } @media screen and (max-width: 600px) { .downloads-container .downloads-body { width: min-content; min-width: 100%; } } .downloads-container .downloads-body.ready { opacity: 1; } .downloads-container .downloads-body .downloads-row { display: flex; width: 100%; } .downloads-container .downloads-body .downloads-row .downloads-column { flex: .5; margin-right: 30px; } .downloads-container .downloads-body .downloads-row .downloads-column:last-child { margin-right: 0; } .downloads-container .downloads-body .downloads-row .downloads-column .tutorial { color: white; padding-top: 10px; padding-bottom: 10px; background-color: rgba(0, 0, 0, 0.35); } @media screen and (max-width: 678px) { .downloads-container .downloads-body .downloads-row { flex-direction: column-reverse; } .downloads-container .downloads-body .downloads-row .downloads-column { flex: 1; margin-right: 0; } } .downloads-container .downloads-body .downloads-select-group { display: flex; } .downloads-container .downloads-body .downloads-select-group .filter-btn { width: 50%; margin-right: 15px; margin-top: 0; } .downloads-container .downloads-body .downloads-select-group .filter-btn:last-child { margin-right: 0; } .downloads-container .downloads-body .downloads-product .product-searcher { width: 100%; min-height: 95px; display: block; margin-bottom: 10px; } .downloads-container .downloads-body .downloads-product .product-searcher .searcher-search { position: relative; } .downloads-container .downloads-body .downloads-product .product-searcher .searcher-search input { background-image: url("/Content/image/icons/magnifying-glass-half-opacity.svg"); background-repeat: no-repeat; background-position: 97% 50%; background-size: auto 50%; } .downloads-container .downloads-body .downloads-product .product-searcher .searcher-search .search-suggestions { position: absolute; background: white; border: 1px solid #999; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); z-index: 11; width: 100%; max-height: 200px; overflow: auto; } .downloads-container .downloads-body .downloads-product .product-searcher .searcher-search .search-suggestions > div { padding: 10px; cursor: pointer; } .downloads-container .downloads-body .downloads-product .product-searcher .searcher-search .search-suggestions > div:hover { background: #dcdcdc; } .downloads-container .downloads-body .downloads-product .product-searcher .product-select-size { margin-top: 10px; } .downloads-container .downloads-body .downloads-nutrition .attribute-searcher .attribute-searcher-bar { width: 100%; display: flex; justify-content: space-between; } .downloads-container .downloads-body .downloads-nutrition .attribute-searcher .attribute-searcher-bar .expandable { width: 100%; margin-top: 0; } .downloads-container .downloads-body .downloads-nutrition .attribute-searcher .attribute-searcher-bar .expandable:last-child { margin-right: 0; } @media screen and (max-width: 745px) { .downloads-container .downloads-body .downloads-nutrition .attribute-searcher .attribute-searcher-bar { display: block; } } .downloads-container .downloads-body .downloads-nutrition .attribute-searcher .nutrition-download { cursor: pointer; } .downloads-container .downloads-body .downloads-nutrition .attribute-searcher .nutrition-download .excel-link { width: 100%; height: 100%; box-sizing: border-box; visibility: visible; } .downloads-container .downloads-body .downloads-nutrition .attribute-searcher .nutrition-download .loader-spinner { background-image: url("/Content/image/icons/icon-loader-dark-gray.svg"); display: inline-block; height: 13px; width: 13px; background-size: 100%; background-repeat: no-repeat; animation: spin 1s steps(5) infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .downloads-container .downloads-body .downloads-nutrition .attribute-searcher .nutrition-download.disabled { pointer-events: none; opacity: .4; } .downloads-container .downloads-body .downloads-row.examples-header { margin-top: 35px; margin-bottom: 5px; opacity: .75; } .downloads-container .downloads-body .downloads-row.examples img { margin-right: 25px; border: 1px solid #d6d6d6; width: calc((100%/3) - 17px); } .downloads-container .downloads-body .downloads-row.examples img:last-child { margin-right: 0; } .downloads-container .downloads-body .downloads-row.examples img.full { width: 100%; } @media screen and (max-width: 678px) { .downloads-container .downloads-body .downloads-row.examples img { width: 100%; } } .downloads-container .downloads-body .downloads-fountain .fountain-calories-step1, .downloads-container .downloads-body .downloads-fountain .fountain-calories-step2, .downloads-container .downloads-body .downloads-fountain .fountain-calories-step3, .downloads-container .downloads-body .downloads-fountain .fountain-calories-step4 { width: calc((100% * (1/3)) - 15px); vertical-align: top; float: left; margin-right: 45px; margin-top: 15px; } @media screen and (max-width: 745px) { .downloads-container .downloads-body .downloads-fountain .fountain-calories-step1, .downloads-container .downloads-body .downloads-fountain .fountain-calories-step2, .downloads-container .downloads-body .downloads-fountain .fountain-calories-step3, .downloads-container .downloads-body .downloads-fountain .fountain-calories-step4 { width: 100%; } } .downloads-container .downloads-body .downloads-fountain .fountain-calories-step1 { width: calc((100% * (1/3)) - 105px); } @media screen and (max-width: 745px) { .downloads-container .downloads-body .downloads-fountain .fountain-calories-step1 { width: 100%; } } .downloads-container .downloads-body .downloads-fountain .fountain-calories-step1 span.label { display: block; margin-top: 20px; font-weight: bold; } .downloads-container .downloads-body .downloads-fountain .fountain-calories-step1 span.label.first { margin-top: 0; } .downloads-container .downloads-body .downloads-fountain .fountain-calories-step2 .dd-label { font-weight: bold; padding-top: 20px; display: block; } .downloads-container .downloads-body .downloads-fountain .fountain-calories-step3 { margin-right: 0; } .downloads-container .downloads-body .downloads-fountain .fountain-calories-step3 .dd-label { font-weight: bold; padding-top: 20px; display: block; } .downloads-container .downloads-body .downloads-fountain .fountain-calories-step4 { margin-right: 0; } .downloads-container .downloads-body .downloads-fountain .fountain-calories-step4 input[type="radio"] { width: auto; margin-right: 10px; height: auto; } .downloads-container .downloads-body .downloads-fountain .created-for { float: left; width: 100%; } .downloads-container .downloads-body .downloads-fountain .report .toolbar { width: 100%; display: flex; justify-content: space-between; } .downloads-container .downloads-body .downloads-fountain .report .toolbar .button { margin-right: 5px; } .downloads-container .downloads-body .downloads-fountain .report .toolbar .button:last-child { margin-right: 0; } .downloads-container .downloads-body .downloads-fountain .report table { width: 100%; margin-top: 15px; } .downloads-container .downloads-body .downloads-fountain .report table td.name { color: #333333; } .downloads-container .downloads-body .button { height: 40px; font-size: 14px; margin: 10px 0px 0px 0px; padding-left: 14px; padding-right: 14px; display: inline-block; text-decoration: none; } .downloads-container .downloads-body .button:hover, .downloads-container .downloads-body .button:active { color: white; text-decoration: none; } .downloads-container .downloads-body input { width: 100%; height: 40px; font-size: 14px; margin: 10px 0px 0px 0px; border: 1px solid #d6d6d6; font-weight: normal; color: #474747; padding-left: 14px; padding-right: 14px; } .downloads-container .downloads-body select { width: 100%; height: 40px; font-size: 14px; margin: 10px 0px 0px 0px; border: 1px solid #d6d6d6; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-weight: normal; color: #474747; background-color: white; background-image: url("/Content/image/icons/icon-arrow-down-dark-gray.svg"); background-repeat: no-repeat; background-position: calc(100% - 14px) center; background-size: 25px; padding-right: 45px; padding-left: 14px; cursor: pointer; } .downloads-container .downloads-body select.active { color: white; background-color: darkgray; background-image: url("/Content/image/icons/icon-arrow-down-white.svg"); } .downloads-container .downloads-body select.disabled { display: none; } .downloads-container .downloads-body select[multiple=true] { height: auto; background-image: none; } .page-fountain-calorie-nutrition-report-downloads .downloads-body { border: none; margin-top: -30px; } /****************/ /*search*/ .section-search.ppf .ingredient-header-bar { color: #474747; } /****************/ /*******************************/ /* Styles for Ingredient pages */ /*******************************/ .generic-content-container, .ingredient-content-container { position: relative; font-family: "Muli", Helvetica, Sans-Serif; background-color: #fff; /*rgba(237,237,237,.8); $light-gray;*/ color: #000b52; padding: 0px; /*opacity: 0.90;*/ -webkit-transition: height 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */ -moz-transition: height 0.3s ease-out; /* Firefox 4-15 */ -o-transition: height 0.3s ease-out; /* Opera 10.50-12.00 */ transition: height 0.3s ease-out; padding-bottom: 60px; } .generic-content-container h2, .ingredient-content-container h2 { color: #000b52; font-family: "Muli", Helvetica, Sans-Serif; font-size: 28px; font-weight: normal; text-align: left; margin-top: 10px; margin-bottom: 0; padding: 10px 0; } @media screen and (max-width: 767px) { .generic-content-container .print-preview, .ingredient-content-container .print-preview { position: relative; display: none; } } .generic-content-container .whats-inside-footer, .ingredient-content-container .whats-inside-footer { font-size: 12px; } .generic-content-container .whats-inside-note, .ingredient-content-container .whats-inside-note { font-size: 12px; padding: 0 10px 5px; } @media (max-width: 938px) and (min-width: 768px) { .generic-content-container, .ingredient-content-container, .downloads-container { padding-top: 20px; } } @media (max-width: 1178px) and (min-width: 768px) { .page-fountain-reports .content-container .content .ingredient-content-container { padding-top: 20px; } } @media (max-width: 938px) and (min-width: 768px) { .page-fountain-reports .content-container .content .ingredient-content-container { padding-top: 40px; } } .ingredient-header-bar { font-family: "Muli", Helvetica, Sans-Serif; color: #000b52 !important; font-size: 40px; background-color: transparent; text-align: center; border-bottom: none; font-weight: 100; text-transform: capitalize; } .ingredient-content-section { float: left; width: 50%; padding: 10px 30px; /*margin-left: 20px;*/ } @media only screen and (max-width: 767px) { .ingredient-content-section { width: 100%; padding-right: 0px; padding-left: 0px; } } .ingredient-content-section .button { background-color: #000b52; padding: 10px; color: #fff; margin: 10px 0; } .ingredient-content-section .nf-graphic { text-align: center; clear: both; margin-top: -15px; } .ingredient-content-section .nf-graphic img { margin: auto; /*background-color: $pbf-light-blue;*/ } @media screen and (max-width: 767px) { .ingredient-content-section .nf-graphic img { width: 100%; } } .ingredient-content-section:first-child { padding-left: 0px; } .ingredient-content-section:last-child { padding-right: 0px; } .ingredient-content-wide { margin: 20px; float: left; min-width: 80%; } .ingredient-content { display: flex; padding-bottom: 10px; margin-top: 10px; } @media screen and (max-width: 768px) { .ingredient-content { display: block; } } .ingredient-tabbed-content.accordion-tabbed ul li.ui-state-active { background: #474747 !important; } .ingredient-tabbed-content.accordion-tabbed ul li.ui-state-active a { color: white !important; background: transparent !important; } .ingredient-accordion-icon-plus, .ingredient-accordion-icon-minus { width: 32px; height: 32px; background-color: #474747; border-bottom: 2px solid #CCC; text-align: center; content: "\002B" !important; background-image: url("/content/image/icon-accordion-plus.png") !important; background-position: 10px 8px; margin-bottom: 20px; } .ingredient-accordion-icon-minus { content: "\002D" !important; background-image: url("/content/image/icon-accordion-minus.png") !important; background-position: 13px 13px; } .ingredient-accordion-item a { color: #474747; } .ingredient-accordion-item h3 { font-family: "Muli", Helvetica, Sans-Serif; border: none; min-height: 55px; height: 55px; color: #474747; font-size: 14px; font-weight: bold; margin-top: 10px; margin-bottom: 0; /*background-color:$light-gray;*/ box-shadow: #909090 0 -1px inset; border-radius: 0; cursor: pointer; background-color: #dcdcdc; display: flex; align-items: center; justify-content: flex-start; } .ingredient-accordion-item h3.ui-accordion-header-active { box-shadow: none; border-bottom: none; } .ingredient-accordion-item h3 span { position: static; float: none; top: 0; margin-bottom: 0; width: 32px; height: 32px; margin: 0 10px; } .ingredient-accordion-item h3 p { margin: 0px; padding: 0px; line-height: 1.4em; flex: 1; } @media screen and (max-width: 600px) { .ingredient-accordion-item h3 p { font-size: 13px; } } .ingredient-accordion-item div p { color: #474747; line-height: 1.4em; padding: 0 10px 10px; } .ingredient-accordion-item > div { border: 1px solid #CCC; margin-bottom: 10px; padding-top: 10px; margin-left: 8px; margin-right: 8px; border-radius: 0; color: #474747; } .ingredient-accordion-item li { line-height: 1.4em; padding: 0 5px; } .ingredient-accordion-item a { text-decoration: underline; } .ingredient-accordion-item table { border-collapse: collapse; text-align: left; } .ingredient-accordion-item table thead { border-bottom: 2px solid #909090; } .ingredient-accordion-item table tr td { padding: 8px; line-height: 1.428571429; vertical-align: top; border-top: 1px solid #909090; } .ingredient-accordion-item .other-prods-table { border-collapse: collapse; text-align: left; font-size: 85%; width: 100%; margin-top: -0.5em; } .ingredient-accordion-item .other-prods-table thead { border-bottom: 2px solid #909090; } .ingredient-accordion-item .other-prods-table tr td { padding: 8px; line-height: 1.428571429; vertical-align: top; border-top: 1px solid #909090; } .ingredient-accordion-item .legaltxt { font-size: 75%; } #glossaryContainer .ingredient-accordion div p { font-weight: normal; } #glossaryContainer .ingredient-accordion > div { font-weight: bold; } #glossaryContainer .ingredient-accordion div p:first-child { font-weight: bold; margin-bottom: -10px; } .ingredient-content.second-section { margin-top: 10px; } .ingredient-comparison-chart { height: 320px; width: 100%; position: relative; margin: auto; } .ingredient-comparison-chart h2 { text-align: left; padding: 0 0 10px; margin-top: 0; font-weight: normal; text-transform: initial; } .ingredient-comparison-chart .chart-canvas { margin-top: 10px; position: absolute; width: 100%; top: 40px; bottom: 0px; overflow: visible; font-size: 16px; font-family: "Muli", Helvetica, Sans-Serif; } .ingredient-comparison-chart .chart-canvas .comparison-bar { height: 36px; border-bottom: 7px solid #2b86b8; background-color: #5bb3e9; } .ingredient-comparison-chart .chart-canvas .static-comparison-bar { height: 36px; border-bottom: 7px solid #2b86b8; background-color: #5bb3e9; position: absolute; left: 0px; } .ingredient-comparison-chart .chart-canvas .labels { line-height: 16px; } .ingredient-comparison-chart .chart-canvas .static-labels { position: absolute; visibility: inherit; opacity: 1; } .ingredient-tabbed-content { min-height: 300px; border-radius: 0 !important; background: none !important; border: none !important; margin-top: 20px; margin-bottom: 50px; } .ingredient-tabbed-content li { width: auto; border: none !important; float: left; height: 36px; color: #474747; font-size: 11px; font-weight: bold; line-height: 36px; } .ingredient-tabbed-content.accordion-tabbed .accordion-tab-body .ingredient-accordion-item ul li { float: none; } .ui-tabs-panel:after { content: ""; display: table; clear: both; } .select-container { margin-top: 12px; margin-left: 5px; margin-right: 12px; margin-bottom: 20px; display: none; } .select-container.glossary { padding: 0; margin: 0; } .select-container.glossary h3 { font-weight: normal; padding: 15px 0 5px; font-family: Droid-sans; } .select-container.glossary .search-container { display: flex; border: 1px solid #CCC; } .select-container.glossary .search-container input { padding: 7px; border: 1px solid #CCC; width: 70%; margin: 0; flex: 1; } .select-container.glossary .search-container .searchbttn { background-image: url(/Content/image/alreadyknow.png); display: inline-block; height: auto; border: none; background-repeat: no-repeat; background-position: center; background-color: #000b52; width: 40px; cursor: none; } .select-container .glossary { margin-left: 40px; } .select-container select { margin-top: 10px; margin-left: 8px; font-size: 12px; height: 37px; padding-left: 5px; border-radius: 0px; width: 47%; } .select-container select.left { float: left; } .select-container select.right { float: right; } .generic-content-container.ppf #glossaryContainer .select-container.glossary .search-container .searchbttn { background-image: url(/Content/image/alreadyknow_ppf.png); background-color: #18861a; } .ingredient-wide-table-container .select-container { max-width: 800px; margin-left: auto; margin-right: auto; } .electrolyte-graphic, .juice-graphic, .vitamin-graphic, .minerals-graphic, .nf-graphic { width: 100%; position: relative; opacity: 1; margin-top: 0px; overflow: hidden; } .electrolyte-graphic, .vitamin-graphic, .minerals-graphic { height: 270px; } .electrolyte-graphic .elements, .vitamin-graphic .elements, .minerals-graphic .elements { width: 92%; height: 160px; position: absolute; top: -30px; left: 8%; -webkit-transform: scale(1.3); transform: scale(1.18); } .electrolyte-graphic .elements .element, .vitamin-graphic .elements .element, .minerals-graphic .elements .element { position: relative; top: 43px; width: 30%; height: 77px; background-color: #000b52; color: #fff; text-align: center; line-height: 54px; font-family: "Muli", Helvetica, Sans-Serif; font-weight: 800; font-size: 2.4em; margin-left: 1%; margin-bottom: 24px; float: left; } .electrolyte-graphic .elements .element.clear, .vitamin-graphic .elements .element.clear, .minerals-graphic .elements .element.clear { background-color: rgba(0, 0, 0, 0); } .electrolyte-graphic .elements .element .foot, .vitamin-graphic .elements .element .foot, .minerals-graphic .elements .element .foot { position: absolute; bottom: -20px; width: 100%; background-color: #1c82ba; border-top: 1px solid #909090; height: 22px; font-size: 14px; line-height: 18px; font-weight: 300; } .electrolyte-graphic .elements .element .atomic-weight, .vitamin-graphic .elements .element .atomic-weight, .minerals-graphic .elements .element .atomic-weight { font-weight: 300; font-size: 10px; position: absolute; left: 3px; top: 3px; line-height: 11px; } .electrolyte-graphic .text-block, .vitamin-graphic .text-block, .minerals-graphic .text-block { font-size: 12px; font-weight: 800; color: #000b52; } .electrolyte-graphic .text-block .line, .vitamin-graphic .text-block .line, .minerals-graphic .text-block .line { top: 23px; left: 346px; position: relative; } .electrolyte-graphic .text-block .line span, .vitamin-graphic .text-block .line span, .minerals-graphic .text-block .line span { position: absolute; left: 40px; font-weight: 200; line-height: 1.2em; } .electrolyte-graphic .text-block .body, .vitamin-graphic .text-block .body, .minerals-graphic .text-block .body { margin-top: 15px; width: 175px; line-height: 1.1em; } .juice-graphic { margin-top: 5%; margin-bottom: 5%; opacity: inherit; height: 380px; } @media screen and (max-width: 768px) { .juice-graphic { height: auto; } } .juice-graphic img { height: auto; width: 100%; } .juice-graphic p { font-family: "Muli", Helvetica, Sans-Serif; font-weight: 800; font-size: 16px; line-height: .98em; text-align: center; color: #000b52; margin-top: 15px; } .juice-graphic p:last-child { text-align: center; } .minerals-header, .minerals-graphic { display: none; } .content-header-text { font-size: 100%; padding: 0px 10px; line-height: 1.4em; font-weight: normal; font-family: "Muli", Helvetica, Sans-Serif; color: #000b52; } .ui-tabs-nav { background-color: rgba(0, 0, 0, 0) !important; border: none !important; margin-left: 0; display: flex; justify-content: flex-start; } @media screen and (max-width: 500px) { .ui-tabs-nav { flex-direction: column; } .ui-tabs-nav li { min-width: 100%; margin-right: 0; margin-bottom: 5px; } } .ui-tabs-nav li { background-color: #fff !important; border-radius: 0 !important; outline: none; border: 1px solid #CCC !important; margin-left: 0; margin-right: 10px; font-family: "Open Sans", Helvetica, Sans-Serif !important; font-size: 14px; font-weight: bold; -webkit-transition: background-color 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */ -moz-transition: background-color 0.3s ease-out; /* Firefox 4-15 */ -o-transition: background-color 0.3s ease-out; /* Opera 10.50-12.00 */ transition: background-color 0.3s ease-out; min-width: 220px; } .ui-tabs-nav li a { color: #474747 !important; outline: none; width: 100%; line-height: 35px; display: block; padding-left: 10px; padding-right: 10px; } .ui-tabs-nav li.ui-tabs-active { border: none !important; background-color: #CCC !important; } .ui-tabs-nav li.ui-tabs-active a { color: #000b52 !important; background-color: #CCC !important; } .ui-tabs .ui-tabs-nav { border: none !important; border-radius: 0 !important; } .ui-tabs-panel.white { background-color: #fff; } .ingredient-tab-other { padding-top: 20px; border: none; width: min-content; min-width: 100%; } .ingredient-tab-other p { font-size: 12px; color: #474747; padding: 10px; } .ingredient-tab-other .select-container { display: block; padding: 0; margin: 0; } .ingredient-tab-other .select-container select { display: none; } .ingredient-tab-other .select-container .button { display: inline-block; min-width: 220px; width: auto; height: 36px; line-height: 36px; vertical-align: middle; background: white; color: #474747; font-weight: bold; margin-right: 5px; margin-top: 0; padding: 0px 10px; text-align: left; } .ingredient-tab-other .select-container .button:first-child { margin-left: 0; } .ingredient-tabbed-content table { width: 100%; border-spacing: 0; /*tbody tr th.name { width: 65%; font-weight: normal; }*/ } .ingredient-tabbed-content table th { color: #474747; font-size: 12px; text-align: center; font-family: "Muli", Helvetica, Sans-Serif; line-height: 14px; } .ingredient-tabbed-content table th.name { text-align: left; padding-left: 20px; font-weight: bold; } .ingredient-tabbed-content table th span.arrow { float: right; margin-right: 10px; } .ingredient-tabbed-content table th span.small-text { font-size: 9px; } .ingredient-tabbed-content table tr { height: 42px; background-color: #dcdcdc; } .ingredient-tabbed-content table tr:nth-child(odd) { background-color: #fff !important; } .ingredient-tabbed-content table tr:nth-child(even) td.sorted { background-color: #CCC; } .ingredient-tabbed-content table tr td { text-align: center; border-right: 1px solid #dcdcdc; font-family: "Muli", Helvetica, Sans-Serif; color: #000b52; font-size: 12px; } .ingredient-tabbed-content table tr td:last-child { border-right: none; } .ingredient-tabbed-content table tr td.ingr-split-col { background-color: white; min-width: 15px; padding-right: 0; padding-left: 0; } .ingredient-tabbed-content table tr td.name { width: 65%; overflow: hidden; text-align: left; padding-right: 0; padding-left: 20px; } .ingredient-tabbed-content table tr td.phosphorus { border-right: none; width: 130px; } .ingredient-tabbed-content table tr td.name-other { width: 340px; overflow: hidden; text-align: left; padding-right: 0; padding-left: 20px; } .ingredient-tabbed-content table tr td.fdaCaffeineCol { width: 130px; padding-right: 10px; border-right: none; box-shadow: none; } .ingredient-tabbed-content table tr td.fdaSodiumCol, .ingredient-tabbed-content table tr td.fdaPhosphorusCol { border-right: none; box-shadow: none; } .ingredient-tabbed-content table tr td.size-other { padding-right: 15px; padding-left: 10px; width: 95px; } .ingredient-tabbed-content table tr td.sorted { background-color: #abd5e4; } .ingredient-tabbed-content table tr td.sweetener-checkbox { padding-right: 0px; padding-left: 10px; width: 90px; text-align: center; } .ingredient-tabbed-content table .sweetener td.name { width: 30%; } .page-wic-eligible .ingredient-content .ingredient-content-section { padding-left: 0px; width: 100%; } .page-wic-eligible .ingredient-content-container .whats-inside-footer { margin-top: -30px; } .page-wic-eligible .ingredient-tabbed-content table td.name { width: 25%; } .page-wic-eligible .print-preview { display: none; } .page-wic-eligible .wic-top { display: flex; flex-direction: row; width: 100%; } .page-wic-eligible .whats-inside-note { display: flex; flex: 1; } .page-wic-eligible .icon-block { flex: 2; text-align: right; } .page-wic-eligible .icon { text-indent: -9999px; display: block; height: 40px; width: 40px; background-repeat: no-repeat; background-position: center; margin-bottom: 15px; margin-right: 5px; } .page-wic-eligible .print { background-image: url(/content/image/icon-print.png); float: right; cursor: pointer; width: 38px; height: 44px; } .page-wic-eligible .email { background-image: url(/Content/image/icons/icon-mail.svg); float: right; background-size: 80%; } tfoot.offset { transform: translateY(17px); } .ingredient-notab-content h3 { margin-top: 20px; margin-bottom: 20px; color: #000b52; } .ingredient-notab-content table { width: 100%; border-spacing: 0; } .ingredient-notab-content table th { color: #fff; background-color: #000b52; font-size: 12px; text-align: center; font-family: "Muli", Helvetica, Sans-Serif; line-height: 20px; vertical-align: middle; } .ingredient-notab-content table th.name { text-align: left; padding-left: 20px; font-weight: bold; } .ingredient-notab-content table th span.arrow { float: right; margin-right: 10px; } .ingredient-notab-content table th span.arrow.arrow-two-line { margin-top: -10px; } .ingredient-notab-content table th span.small-text { font-size: 9px; } .ingredient-notab-content table tr { height: 42px; } .ingredient-notab-content table tr:nth-child(odd) { background-color: #d1e2ea; } .ingredient-notab-content table tr:nth-child(even) td.sorted { background-color: #abd5e4; } .ingredient-notab-content table tr td { text-align: center; box-shadow: -1px 0 0 0 #fff inset; border-right: 1px solid #909090; font-family: "Muli", Helvetica, Sans-Serif; color: #000b52; font-size: 12px; } .ingredient-notab-content table tr td.name { width: 65%; overflow: hidden; text-align: left; padding-right: 0; padding-left: 20px; } .ingredient-notab-content table tr td.phosphorus { border-right: none; width: 130px; } .ingredient-notab-content table tr td.name-other { width: 340px; overflow: hidden; text-align: left; padding-right: 0; padding-left: 20px; } .ingredient-notab-content table tr td.fdaCaffeineCol { width: 130px; padding-right: 10px; border-right: none; box-shadow: none; } .ingredient-notab-content table tr td.fdaSodiumCol, .ingredient-notab-content table tr td.fdaPhosphorusCol { border-right: none; box-shadow: none; } .ingredient-notab-content table tr td.size-other { padding-right: 15px; padding-left: 10px; width: 95px; } .ingredient-notab-content table tr td.sorted { background-color: #abd5e4; } .ingredient-notab-content table tr td.sweetener-checkbox { padding-right: 0px; padding-left: 10px; width: 90px; text-align: center; } .ingredient-notab-content table .sweetener td.name { width: 30%; } .nutrition-info-loading { text-align: center; margin-top: 50px; } .nutrition-info-noresult { text-align: center; font-size: 100%; font-weight: bold; padding-top: 30px; } /**************/ /* SWEETENERS */ /**************/ .ingredient-tabbed-content.sweetener { min-height: 0px; } .ingredient-tabbed-content.sweetener h3 { margin: 10px 5px; } .ingredient-tabbed-content.sweetener h2 { margin-bottom: 5px; margin-top: 15px; font-size: 1.4em; text-transform: uppercase; font-weight: 800; font-family: "Muli", Helvetica, Sans-Serif; display: block; color: #000b52; padding: 0; } .ingredient-tabbed-content.sweetener table { margin: 15px 0; } .ingredient-tabbed-content.sweetener .error { color: red; } .sweetener .select-container { padding-bottom: 0px; max-width: 900px; } .sweetener .select-container select { width: 31%; } #sweetenerSearchForm { display: flex; border: 1px solid #CCC; } #sweetenerSearch { padding: 7px; width: 70%; margin: 0; border: 1px solid #dcdcdc; flex: 1; } .clear-sweetener { cursor: pointer; background-image: url(/content/image/icon-clear-filter.png) !important; display: block; height: auto; border: none; background-repeat: no-repeat; background-position: center; background-color: #000b52 !important; width: 32px; } /* De-Swipered slides */ .health-believe-slide-container .slide-wrapper { width: 100%; display: block; } .health-believe-slide-container .slide-wrapper .slide { width: 100%; display: block; margin-bottom: 10px; border: 1px solid #1c82ba; } .health-believe-slide-container .slide-wrapper .slide .did-you-know-bubble { width: 100%; left: auto; } @media screen and (max-width: 600px) { .page-calorie-balance .did-you-know-bubble, .page-what-we-believe .did-you-know-bubble, .page-hydration .did-you-know-bubble { width: 82%; left: 10px; margin-left: 20px; } } .page-sweeteners .ingredient-tabbed-content table tr td.name, .page-allergens .ingredient-tabbed-content table tr td.name { width: 42%; } .page-sweeteners .ingredient-content-wide, .page-allergens .ingredient-content-wide { float: none; } .page-colors .ingredient-content, .page-color .ingredient-content, .page-third-party-certifications .ingredient-content, .page-sweeteners .ingredient-content, .page-nutrition-facts-panel-changes .ingredient-content, .page-wic-eligible .ingredient-content, .page-sports-nutrition .ingredient-content, .page-protein .ingredient-content { display: block; } .page-colors .ingredient-content-section, .page-color .ingredient-content-section, .page-third-party-certifications .ingredient-content-section, .page-sweeteners .ingredient-content-section, .page-nutrition-facts-panel-changes .ingredient-content-section, .page-wic-eligible .ingredient-content-section, .page-sports-nutrition .ingredient-content-section, .page-protein .ingredient-content-section { width: 100%; } .page-sweeteners .ingredient-tabbed-content, .page-sweeteners .ui-tabs-panel { border: none; } .page-sweeteners .ingredient-tabbed-content .accordion-tab-body, .page-sweeteners .ingredient-tabbed-content .ingredient-tab-body, .page-sweeteners .ui-tabs-panel .accordion-tab-body, .page-sweeteners .ui-tabs-panel .ingredient-tab-body { padding: 0; } .page-sweeteners .ingredient-content-section { padding: 0; margin: 0; } .page-sweeteners .ingredient-content-section .ingredient-tab-other { border: none; padding: 0; } .page-allergens .ingredient-content { flex-wrap: wrap; } .page-allergens .ingredient-content-section { width: 100%; float: none; padding: 0; } .page-sodium.section-whatsinside .ingredient-tab-other { border: 1px solid #dddddd; } .page-sodium.section-whatsinside .select-container { display: block; } .page-sodium.section-whatsinside .select-container .button { margin-left: 10px; } .page-potassium.section-whatsinside .select-container .button { margin-left: 10px; } .page-gluten-free.section-whatsinside .select-container { display: block; } .page-gluten-free.section-whatsinside .select-container .button { margin-left: 10px; } .page-sugar-sweeteners.section-whatsinside .ingredient-content { display: block; } .page-sugar-sweeteners.section-whatsinside .ingredient-content .ingredient-content-section { padding-left: 0px; width: 100%; } .page-sugar-sweeteners.section-whatsinside .ingredient-content-section.clearfix { margin-top: -30px; } .page-sugar-sweeteners.section-whatsinside .ingredient-tab-other { border: 1px solid #dddddd; } .page-sugar-sweeteners.section-whatsinside .sweeteners-table-tab { border: none; } .page-sugar-sweeteners.section-whatsinside .ui-tabs-nav li.ui-tabs-active a { background: #474747 !important; } .page-sugar-sweeteners.section-whatsinside .ui-tabs-nav li.ui-tabs-active a.tab-fds, .page-sugar-sweeteners.section-whatsinside .ui-tabs-nav li.ui-tabs-active a.tab-bev { background: #000b52 !important; } .page-sugar-sweeteners.section-whatsinside .ingredient-tabbed-content table tr td.name { width: 45%; } .page-sugar-sweeteners.section-whatsinside .ingredient-accordion-item > div, .page-sweeteners.section-whatsinside .ingredient-accordion-item > div { border: none; } .ingredient-tab-other p.hint { display: none; } .page-vitamins-minerals.section-whatsinside .ingredient-tab-other { width: 100%; min-width: 100%; } .page-vitamins-minerals.section-whatsinside .ingredient-tab-other p.hint.all-scroll.desktop { display: block; } .page-vitamins-minerals.section-whatsinside .ingredient-tab-other p .hint.all-scroll.mobile { display: none; } @media screen and (max-width: 768px) { .page-vitamins-minerals.section-whatsinside .ingredient-tab-other p .hint.all-scroll.mobile { display: block; } .page-vitamins-minerals.section-whatsinside .ingredient-tab-other p.hint.all-scroll.desktop { display: none; } } .page-vitamins-minerals.section-whatsinside .nutri-wrapper.all-scroll .nutri-scroller.all-scroll { max-width: 100%; max-height: 30em; overflow: scroll; position: relative; } @media screen and (min-width: 768px) { .page-vitamins-minerals.section-whatsinside .nutri-wrapper.all-scroll .nutri-scroller.all-scroll { max-height: 35em; } } .page-vitamins-minerals.section-whatsinside .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table { position: relative; display: table; } .page-vitamins-minerals.section-whatsinside .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table td, .page-vitamins-minerals.section-whatsinside .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table th { padding-left: 10px; padding-right: 10px; } .page-vitamins-minerals.section-whatsinside .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table thead th { position: -webkit-sticky; /* for Safari */ position: sticky; top: 0; vertical-align: top; } .page-vitamins-minerals.section-whatsinside .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table thead th:first-child { left: 0; z-index: 1; min-width: 200px; } @media (max-width: 650px) { .page-vitamins-minerals.section-whatsinside .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table thead th:first-child { width: 50%; } } .page-vitamins-minerals.section-whatsinside .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table tbody td { text-align: center; } .page-vitamins-minerals.section-whatsinside .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table tbody td:first-child { position: -webkit-sticky; /* for Safari */ position: sticky; left: 0; text-align: left; background-color: inherit; padding-left: 5px; min-width: 200px; } @media (max-width: 650px) { .page-vitamins-minerals.section-whatsinside .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table tbody td:first-child { width: 50%; } } .page-vitamins-minerals.section-whatsinside .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table tbody tr { font-size: 12px; } @media screen and (max-width: 767px) { .ingredient-tab-other { width: 100%; } .ingredient-tab-other p.hint.side-scroll, .ingredient-tab-other p.hint.all-scroll { display: block; } .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.side-scroll, .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.all-scroll, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.side-scroll, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.all-scroll { overflow: scroll; /*height: 30em;*/ position: relative; } .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.side-scroll table, .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.all-scroll table, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.side-scroll table, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table { position: relative; display: table; } .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.side-scroll table thead th, .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.all-scroll table thead th, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.side-scroll table thead th, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table thead th { position: -webkit-sticky; /* for Safari */ position: sticky; top: 0; } .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.side-scroll table thead th:first-child, .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.all-scroll table thead th:first-child, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.side-scroll table thead th:first-child, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table thead th:first-child { left: 0; z-index: 1; } .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.side-scroll table tbody td:first-child, .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.all-scroll table tbody td:first-child, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.side-scroll table tbody td:first-child, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table tbody td:first-child { position: -webkit-sticky; /* for Safari */ position: sticky; left: 0; text-align: left; background-color: inherit; } .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.all-scroll, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.all-scroll { max-height: 30em; } } @media screen and (max-width: 767px) and (min-width: 768px) { .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.all-scroll, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.all-scroll { max-height: 35em; } } @media screen and (max-width: 767px) and (max-width: 650px) { .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.all-scroll table thead th:first-child, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table thead th:first-child { width: 50%; } } @media screen and (max-width: 767px) { .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.all-scroll table tbody td:first-child, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table tbody td:first-child { padding-left: 5px; } } @media screen and (max-width: 767px) and (max-width: 650px) { .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.all-scroll table tbody td:first-child, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table tbody td:first-child { width: 50%; } } @media screen and (max-width: 767px) { .ingredient-tab-other .nutri-wrapper.side-scroll .nutri-scroller.all-scroll table tbody tr, .ingredient-tab-other .nutri-wrapper.all-scroll .nutri-scroller.all-scroll table tbody tr { font-size: 12px; } } .nutri-nowrap { white-space: nowrap; } /*Hydration*/ .did-you-know-bubble .header .top-left, .did-you-know-bubble .header .top-right, .did-you-know-bubble .header .bottom-left, .did-you-know-bubble .header .bottom-right { color: #4d81b7; } .did-you-know-bubble .header .button-more img.bttn-more-ppf { display: none; } .did-you-know-bubble .header .button-more img.bttn-more-pbf { display: block; } .page-ingredient-glossary .content-container .ingredient-content .ingredient-accordion a, .page-ingredient-glossary .content-container .ingredient-content .ingredient-accordion p { color: #474747; } .page-ingredient-glossary .ingredient-header-bar { line-height: 45px; } .page-ingredient-glossary .content-container .ingredient-content { display: flex; flex-wrap: wrap; } .page-ingredient-glossary .content-container .ingredient-content .select-container.glossary { width: 100%; max-width: 700px; position: sticky; margin-right: 20px; margin-bottom: 30px; margin-top: 20px; display: block; } .page-ingredient-glossary .content-container .ingredient-content .select-container.glossary .search-container { border: none !important; } .page-ingredient-glossary .content-container .ingredient-content .select-container.glossary .search-container input { background-image: url("/Content/image/icons/magnifying-glass-half-opacity.svg"); background-repeat: no-repeat; background-position: 97% 50%; background-size: auto 50%; } .page-ingredient-glossary .content-container .ingredient-content .ingredient-accordion .glossary-anchor { top: 0; } @media screen and (max-width: 768px) { .page-ingredient-glossary .content-container .ingredient-content { display: block; } } .page-ingredient-glossary .letter-anchor { display: block; position: relative; top: -250px; visibility: hidden; } /*******************************/ /* Styles for brand sites page */ /*******************************/ .brand-box-container { display: flex; justify-content: center; flex-wrap: wrap; padding-bottom: 60px; } .brand-box-container .brand-box { padding-right: 1%; padding-bottom: 1%; } .brand-box-container .brand-box a { display: inline-block; } .brand-box-container .brand-box a:hover, .brand-box-container .brand-box a:active { text-decoration: none; } .brand-box-container .brand-box img { border: 1px solid #dcdcdc; /*width: 217px;*/ width: 150px; } @media (max-width: 768px) { .brand-box-container .brand-box img { /*width: 150px;*/ width: 100px; } } /******************************************/ /* Styles for Brand Beverage Facts pages */ /******************************************/ /******************************************/ /* Styles for Brand Product Facts pages */ /******************************************/ .page-brand-sites.ppf p { color: #474747; margin-bottom: 2.5rem; text-align: center; } .page-brand-sites.ppf div { color: #474747; } .page-brand-sites.ppf .brand-box-container { max-width: calc(217px * 3 + (2%)); margin-left: auto; margin-right: auto; } .contact-row { margin-top: 10px; width: 100%; height: 202px; position: relative; display: flex; justify-content: center; align-items: center; } @media (max-width: 768px) { .contact-row { margin-bottom: 20px; display: flex; position: relative; height: auto; } } .contact-row h2 { font-size: 19.65pt; font-family: 'futura-pt'; border-bottom: 1px solid silver; color: #1c2d4c; text-transform: uppercase; } .contact-row ul { list-style-type: none; margin: 0px; padding: 0px; } .contact-row ul li { display: block; color: #1c2d4c; margin-right: 40px; } @media (max-width: 768px) { .contact-row ul li { margin: 0; margin-bottom: 15px; width: 50%; } } .contact-row ul li a { color: #1c2d4c; font-weight: bold; text-decoration: none; } @media (max-width: 768px) { .contact-row ul li a img { width: 9vw; } } .contact-row ul li a div { /*width:55px !important;*/ position: relative; display: inline-block; /*word-wrap: break-word;*/ font-size: 8pt; height: 24px; } .contact-row .links { flex: 1; display: flex; margin-left: 40px; height: 100%; align-items: center; border-top: 1px solid black; } @media (max-width: 768px) { .contact-row .links { flex: .7; position: relative; left: auto; padding-left: 15px; padding-right: 15px; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin-left: 0; border: none; } } .contact-row .links a { display: flex; position: relative; align-items: center; } @media (max-width: 768px) { .contact-row .links a { flex-direction: column; text-align: center; } } .contact-row .links a div { font-size: 12.45px; font-family: "futura-pt"; line-height: .98em; margin-left: 8px; } @media (max-width: 768px) { .contact-row .links a div { margin: 4px 0 0; } } .contact-row .links a a:first-child { margin-right: 28px; } @media (max-width: 768px) { .contact-row .links li { width: 33%; } } @media (max-width: 768px) { .contact-row .contact-image-container { flex: .3; } } .contact-row .contact-image-container a { display: block; } .contact-row .contact-image-container a img { width: 200px; height: 200px; border: 1px solid #dcdcdc; } @media (max-width: 768px) { .contact-row .contact-image-container a img { width: 100%; max-width: 250px; height: auto; border: 1px solid #CCC; } } .contact-row .contact-image-container a img, .contact-row .site-links a, .contact-row .social-links a img { transition: all ease-out .3s; transform-origin: center center; -webkit-transform-origin: center center; } .contact-row .contact-image-container a img:hover, .contact-row .site-links a:hover, .contact-row .social-links a img:hover { -webkit-filter: drop-shadow(0px 3px 1px #444); transform: scale(1.05) translateY(-3px); -webkit-transform: scale(1.05) translateY(-3px); } .page-contact-us.section-contact.ppf { color: #474747; } .page-contact-us.section-contact.ppf p, .page-contact-us.section-contact.ppf div { color: #474747; } .page-contact-us.section-contact.ppf p.intro a:hover, .page-contact-us.section-contact.ppf p.intro a:link, .page-contact-us.section-contact.ppf p.intro a:active, .page-contact-us.section-contact.ppf p.intro a:visited { color: #474747; text-decoration: underline; } .sitemap .indent { margin-left: 20px; } .page-site-tips { /*h3 { margin-top: 35px; margin-bottom: 10px; line-height: 2rem; } h4 { font-size: 1rem; font-weight: bold; line-height: 1.5rem; }*/ } .page-site-tips .ingredient-content { display: block; } .page-site-tips .ingredient-content-section { width: 100%; } .page-site-tips .ingredient-content-section .ingredient-accordion-item div p { padding: 0; } .page-site-tips .ingredient-content-section div.ingredient-accordion-item b { padding: 0 10px 10px; } .page-fountain-reports.section-product.ppf { font-family: "Open Sans", Helvetica, sans-serif; font-size: 14px; } .page-fountain-reports.section-product.ppf .content-container .content .ingredient-content-container { color: #474747; } .page-fountain-reports.section-product.ppf .content-container .content .ingredient-content-container .ingredient-content-left, .page-fountain-reports.section-product.ppf .content-container .content .ingredient-content-container .ingredient-content-right { margin-left: auto; margin-right: auto; width: 90%; float: none; } .page-fountain-reports.section-product.ppf .content-container .content .ingredient-content-container .ingredient-content-wide { margin-left: auto; margin-right: auto; width: 90%; float: none; padding-bottom: 0; } .page-fountain-reports.section-product.ppf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content.ui-tabs ul.ui-tabs-nav { margin-left: 0; } .page-fountain-reports.section-product.ppf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content.ui-tabs ul.ui-tabs-nav li { min-width: 220px; min-height: 36px; width: auto; height: auto; box-shadow: none; border-radius: 0 !important; background: white !important; border: 1px solid #ccc !important; line-height: 36px; display: flex; justify-content: flex-start; align-items: center; } .page-fountain-reports.section-product.ppf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content.ui-tabs ul.ui-tabs-nav li a { height: auto; border-radius: 0; color: #474747 !important; line-height: 25px; background: transparent !important; font-size: 14px !important; } .page-fountain-reports.section-product.ppf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content.ui-tabs ul.ui-tabs-nav li.ui-state-active { background-color: #117840 !important; } .page-fountain-reports.section-product.ppf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content.ui-tabs ul.ui-tabs-nav li.ui-state-active a { color: white !important; } .page-fountain-reports.section-product.ppf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content.ui-tabs .ui-tabs-panel.white { /*border: none;*/ border: 1px solid #dcdcdc; } .page-fountain-reports.section-product.ppf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content #tab1 { color: #18861a; } .page-fountain-reports.section-product.ppf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content #tab1 blockquote { padding-bottom: 10px; font-size: 14px; } .page-fountain-reports.section-product.ppf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content #tab1 .ingredient-accordion table { width: calc(100% - 65px); } .page-fountain-reports .ingredient-header-bar { /*line-height: 1.5;*/ } .page-fountain-reports .ingredient-header-bar a.back-bttn { color: white; background-color: #18861a; } .page-fountain-reports .ingredient-content-container { color: #474747; } .page-fountain-reports .fountain-calories-select, .page-fountain-reports .brand-dropdown { font-family: "Open Sans", Helvetica, sans-serif; color: #474747; border-bottom: 1px solid #474747; } .page-fountain-reports .fountain-calories-select { font-family: "Open Sans", Helvetica, sans-serif !important; color: #474747 !important; background-color: #ffffff; border-bottom: 1px solid #474747; } .page-fountain-reports input[type="button"] { color: white; background-color: #18861a; } .page-fountain-reports.section-product.pbf { font-family: "Open Sans", Helvetica, Sans-Serif !important; font-size: 14px; } .page-fountain-reports.section-product.pbf .content-container .content .ingredient-content-container { color: #6a6a6a; } .page-fountain-reports.section-product.pbf .content-container .content .ingredient-content-container .ingredient-content-left, .page-fountain-reports.section-product.pbf .content-container .content .ingredient-content-container .ingredient-content-right { margin-left: auto; margin-right: auto; width: 90%; float: none; } .page-fountain-reports.section-product.pbf .content-container .content .ingredient-content-container .ingredient-content-wide { margin-left: auto; margin-right: auto; width: 90%; float: none; padding-bottom: 0; } .page-fountain-reports.section-product.pbf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content.ui-tabs ul.ui-tabs-nav { margin-left: 0; } .page-fountain-reports.section-product.pbf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content.ui-tabs ul.ui-tabs-nav li { min-width: 220px; min-height: 36px; width: auto; height: auto; box-shadow: none; border-radius: 0 !important; background: white !important; border: 1px solid #ccc !important; line-height: 36px; display: flex; justify-content: flex-start; align-items: center; } .page-fountain-reports.section-product.pbf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content.ui-tabs ul.ui-tabs-nav li a { height: auto; border-radius: 0; color: #474747 !important; line-height: 25px; background: transparent !important; font-size: 14px !important; } .page-fountain-reports.section-product.pbf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content.ui-tabs ul.ui-tabs-nav li.ui-state-active { background-color: #000b52 !important; } .page-fountain-reports.section-product.pbf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content.ui-tabs ul.ui-tabs-nav li.ui-state-active a { color: white !important; } .page-fountain-reports.section-product.pbf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content.ui-tabs .ui-tabs-panel.white { /*border: none;*/ border: 1px solid #dddddd; } .page-fountain-reports.section-product.pbf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content #tab1 { color: blue; } .page-fountain-reports.section-product.pbf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content #tab1 blockquote { padding-bottom: 10px; font-size: 14px; } .page-fountain-reports.section-product.pbf .content-container .content .ingredient-content-container .ingredient-content-wide .ingredient-tabbed-content #tab1 .ingredient-accordion table { width: calc(100% - 65px); } .footer { width: 100%; background-color: #1c82ba; font-size: .75em; color: #dcdcdc; position: relative; text-align: center; padding: 2px 10px; min-width: 240px; min-height: 30px; height: auto; clear: both; display: flex; align-items: center; justify-content: flex-start; } @media (max-width: 910px) { .footer { text-align: center; flex-direction: column; margin: 0; position: static !important; } } .footer span { margin: 3px auto; font-family: "droid-sans"; display: block; } .footer .copyright { padding: 3px 0; } @media (max-width: 910px) { .footer .copyright { margin: 5px auto; } } .footer .links { flex: 1; text-align: left; margin: 0 1%; order: 1; } @media (max-width: 768px) { .footer .links { display: flex; flex-wrap: wrap; justify-content: center; } } @media (max-width: 910px) { .footer .links { text-align: center; } .footer .links a, .footer .links div { white-space: nowrap; display: inline-block; } } .footer .links a, .footer .links div { text-decoration: none; color: #dcdcdc; padding: 0 1rem; line-height: 1.5; margin: 10px 0; } .footer .links a:not(:last-child) { border-right: 1px solid #dcdcdc; } .footer .links a:hover { color: #000b52; } .footer .links #teconsent { display: inline; padding-left: 0px; } .footer .links #teconsent a { margin: 0; } .footer .links-two a:nth-child(even) { text-align: left; } .footer .links-two a:nth-child(odd) { text-align: right; } .footer label { margin: 3px auto; padding: 3px 0; float: right; margin-right: 20px; order: 2; } @media (max-width: 910px) { .footer label { margin: 5px auto; } } /* @media only screen and (min-device-width: 500px) { .footer { .link-group { display: flex; justify-content: center; } .links a { flex: auto; } .links-two a:nth-child(even) { text-align: center; } .links-two a:nth-child(odd) { text-align: center; } .links:not(:last-child) { a { border-right: 1px solid $light-gray; } } span { margin: 3px 0; } } }*/ .page-privacy-policy, .page-legal-notices, .page-ad-policy, .page-sitemap { color: #474747; } .page-privacy-policy .ingredient-header-bar, .page-privacy-policy .ingredient-content-container, .page-privacy-policy h1, .page-privacy-policy h2, .page-privacy-policy h3, .page-privacy-policy h4, .page-privacy-policy h5, .page-privacy-policy h6, .page-legal-notices .ingredient-header-bar, .page-legal-notices .ingredient-content-container, .page-legal-notices h1, .page-legal-notices h2, .page-legal-notices h3, .page-legal-notices h4, .page-legal-notices h5, .page-legal-notices h6, .page-ad-policy .ingredient-header-bar, .page-ad-policy .ingredient-content-container, .page-ad-policy h1, .page-ad-policy h2, .page-ad-policy h3, .page-ad-policy h4, .page-ad-policy h5, .page-ad-policy h6, .page-sitemap .ingredient-header-bar, .page-sitemap .ingredient-content-container, .page-sitemap h1, .page-sitemap h2, .page-sitemap h3, .page-sitemap h4, .page-sitemap h5, .page-sitemap h6 { color: #474747; } .page-privacy-policy p a, .page-legal-notices p a, .page-ad-policy p a, .page-sitemap p a { color: #474747; text-decoration: underline; } @media screen and (max-width: 768px) { .page-privacy-policy p, .page-legal-notices p, .page-ad-policy p, .page-sitemap p { overflow-wrap: break-word; } } /*******************************/ /* Styles for Ingredient pages */ /*******************************/ .ppf .ingredient-comparison-chart .chart-canvas .comparison-bar { border-bottom: 7px solid #117840; background-color: #8dc642; } .ppf .ingredient-tabbed-content table tr td, .ppf .ui-tabs-nav li.ui-tabs-active a { color: #474747 !important; } .ppf .ui-tabs-nav li.ui-tabs-active a { background: #18861a !important; color: white !important; } .ppf .ingredient-content-section .summary p { color: #474747; } .ppf .ingredient-content-section .nf-graphic img { /*background-color: $ppf-light-green;*/ } .ppf .ingredient-tabbed-content.accordion-tabbed ul li.ui-state-active { background: #18861a !important; } .ppf .ingredient-tabbed-content.accordion-tabbed ul li.ui-state-active a { color: white !important; background: transparent !important; } .ppf .ingredient-tab-other .select-container .button:hover, .ppf .ingredient-tab-other .select-container .button:active, .ppf .ingredient-tab-other .select-container .button.active { background: #18861a; color: white; font-weight: bold; } .ppf .accordion-tab-body.two-col, .pbf .accordion-tab-body.two-col { display: flex; justify-content: space-between; align-items: flex-start; } .ppf .accordion-tab-body.two-col .accordion-tab-column, .pbf .accordion-tab-body.two-col .accordion-tab-column { width: 50%; } .ppf .accordion-tab-body.two-col .accordion-tab-column.tab-column-right, .pbf .accordion-tab-body.two-col .accordion-tab-column.tab-column-right { margin-left: 15px; } .ppf .accordion-tab-body.two-col .accordion-tab-column .ingredient-accordion-item, .pbf .accordion-tab-body.two-col .accordion-tab-column .ingredient-accordion-item { width: 100%; display: inline-block; } @media screen and (max-width: 600px) { .ppf .accordion-tab-body.two-col, .pbf .accordion-tab-body.two-col { flex-direction: column; justify-content: center; } .ppf .accordion-tab-body.two-col .accordion-tab-column, .pbf .accordion-tab-body.two-col .accordion-tab-column { width: 100%; } .ppf .accordion-tab-body.two-col .accordion-tab-column.tab-column-right, .pbf .accordion-tab-body.two-col .accordion-tab-column.tab-column-right { margin-left: 0; } } .ppf.generic-content-container, .ppf.ingredient-content-container { font-family: "Nunito", Helvetica, sans-serif; color: #474747; } .ppf.generic-content-container h2, .ppf.generic-content-container h3, .ppf.ingredient-content-container h2, .ppf.ingredient-content-container h3 { color: #474747; font-family: "Nunito", Helvetica, sans-serif; } .ppf.generic-content-container h2, .ppf.ingredient-content-container h2 { font-size: 24px; } .ppf.generic-content-container .ingredient-accordion-icon-plus, .ppf.generic-content-container .ingredient-accordion-icon-minus, .ppf.ingredient-content-container .ingredient-accordion-icon-plus, .ppf.ingredient-content-container .ingredient-accordion-icon-minus { background-color: #474747; } .ppf.generic-content-container .print-preview, .ppf.ingredient-content-container .print-preview { background-image: url("/content/image/icon-print-ppf.png"); } @media screen and (max-width: 767px) { .ppf.generic-content-container .print-preview, .ppf.ingredient-content-container .print-preview { position: relative; display: none; } } .ppf.generic-content-container .ingredient-tabbed-content table th, .ppf.ingredient-content-container .ingredient-tabbed-content table th { font-family: "Nunito", Helvetica, sans-serif; } .ppf.generic-content-container .ingredient-tabbed-content table tr td, .ppf.ingredient-content-container .ingredient-tabbed-content table tr td { font-family: "Open Sans", Helvetica, sans-serif; } .ppf .select-container.glossary .search-container .searchbttn { background-color: #474747; } .page-gluten-free.section-whatsinside.ppf .ingredient-content-section .whole-grains-graphic, .page-whole-grains.section-whatsinside.ppf .ingredient-content-section .whole-grains-graphic { margin-bottom: 10%; } @media screen and (max-width: 767px) { .page-gluten-free.section-whatsinside.ppf .ingredient-content-section .whole-grains-graphic img, .page-whole-grains.section-whatsinside.ppf .ingredient-content-section .whole-grains-graphic img { width: 100%; } } .page-gluten-free.section-whatsinside.ppf .ingredient-content-section .ui-tabs-nav li.ui-tabs-active, .page-juice.section-whatsinside.ppf .ingredient-content-section .ui-tabs-nav li.ui-tabs-active, .page-whole-grains.section-whatsinside.ppf .ingredient-content-section .ui-tabs-nav li.ui-tabs-active { border: none !important; background: none !important; } .page-gluten-free.section-whatsinside.ppf .ingredient-content-section .ui-tabs-nav li.ui-tabs-active a, .page-juice.section-whatsinside.ppf .ingredient-content-section .ui-tabs-nav li.ui-tabs-active a, .page-whole-grains.section-whatsinside.ppf .ingredient-content-section .ui-tabs-nav li.ui-tabs-active a { background: #18861a !important; color: white !important; position: relative; } .page-dietary-fiber.section-whatsinside.ppf .ingredient-content { display: block; } .page-dietary-fiber.section-whatsinside.ppf .ingredient-content .ingredient-content-section { width: 100%; } .page-dietary-fiber.section-whatsinside.ppf .ingredient-content .ingredient-content-section:first-child { padding-right: 0px; } .page-dietary-fiber.section-whatsinside.ppf .ingredient-content .ingredient-content-section:last-child { padding-left: 0px; } .page-dietary-fiber.section-whatsinside.ppf .ingredient-content-container .whats-inside-footer { margin-top: -35px; } .page-vitamins-minerals.section-whatsinside.ppf .ingredient-content, .page-third-party-certifications.section-whatsinside.ppf .ingredient-content { display: block; } .page-vitamins-minerals.section-whatsinside.ppf .ingredient-content .ingredient-content-section, .page-third-party-certifications.section-whatsinside.ppf .ingredient-content .ingredient-content-section { padding-left: 0px; padding-right: 0px; width: 100%; } .page-vitamins-minerals.section-whatsinside.ppf .ingredient-tab-other, .page-third-party-certifications.section-whatsinside.ppf .ingredient-tab-other { border: 1px solid #dddddd; } .page-vitamins-minerals.section-whatsinside.ppf .select-container, .page-third-party-certifications.section-whatsinside.ppf .select-container { display: block; } .page-vitamins-minerals.section-whatsinside.ppf .select-container .button, .page-third-party-certifications.section-whatsinside.ppf .select-container .button { margin-left: 10px; } .page-vitamins-minerals.section-whatsinside.ppf .ingredient-tabbed-content, .page-third-party-certifications.section-whatsinside.ppf .ingredient-tabbed-content { margin-bottom: 10px; } .section-whatsinside.ppf .ingredient-tab-other { border: 1px solid #dddddd; } .section-whatsinside.ppf .ui-tabs-nav li.ui-tabs-active { background: #18861a !important; } .section-whatsinside.ppf .ui-tabs-nav li.ui-tabs-active a { background: transparent !important; color: white !important; } .page-juice.section-whatsinside.ppf .juice-graphic { height: 330px; /*width: 566px;*/ } .page-sodium.section-whatsinside.ppf .chart-canvas .labels.label1 { left: 160px !important; } @media screen and (max-width: 400px) { .page-sodium.section-whatsinside.ppf .chart-canvas .labels.label1 { left: 100px !important; } } .page-sugar-sweeteners.section-whatsinside.ppf .ingredient-content { display: block; } .page-sugar-sweeteners.section-whatsinside.ppf .ingredient-content .ingredient-content-section { padding-left: 0px; width: 100%; } .page-sugar-sweeteners.section-whatsinside.ppf .ingredient-content-section.clearfix { margin-top: -30px; } .page-sugar-sweeteners.section-whatsinside.ppf .ingredient-tab-other { border: 1px solid #dddddd; } .page-sugar-sweeteners.section-whatsinside.ppf li#accTab4-tab { display: none !important; } .page-sugar-sweeteners.section-whatsinside.ppf .ui-tabs-nav li.ui-tabs-active a.tab-fds, .page-sugar-sweeteners.section-whatsinside.ppf .ui-tabs-nav li.ui-tabs-active a.tab-bev { background: #18861a !important; } .page-sugar-sweeteners.section-whatsinside.ppf .ingredient-tabbed-content table tr td.name { width: 45%; } .page-ingredient-glossary.section-whatsinside.ppf .generic-content-container a { border: none; background: none; text-decoration: none; font-size: inherit; } .page-ingredient-glossary.section-whatsinside.ppf .generic-content-container a:hover, .page-ingredient-glossary.section-whatsinside.ppf .generic-content-container a:visited { color: inherit; } .page-wic-eligible.section-whatsinside.ppf .select-container { margin-top: 12px; margin-left: 5px; margin-right: 12px; margin-bottom: 20px; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; } .page-wic-eligible.section-whatsinside.ppf .select-container select { display: block; color: #474747 !important; width: unset; } .page-wic-eligible.section-whatsinside.ppf .select-container .wic-approval-dt { padding-left: 20px; font-size: 0.9rem; text-align: left; } .page-wic-eligible.section-whatsinside.ppf .print { background-image: url(/content/image/icon-print-ppf.png); } .page-wic-eligible.section-whatsinside.ppf .email { background-image: url(/Content/image/icons/icon-mail-ppf.svg); } .ppf .electrolyte-graphic .elements .element { background-color: #18861a; color: #fff; } .ppf .electrolyte-graphic .elements .element.clear { background-color: rgba(0, 0, 0, 0); } .ppf .electrolyte-graphic .elements .element .foot { background-color: #dcdcdc; color: #474747; } .ppf .ingredient-content-container p, .ppf .ingredient-content-container h2, .ppf .ingredient-content-container .fact { color: #474747; } .ppf .ingredient-content-container p a, .ppf .ingredient-content-container p a:hover, .ppf .ingredient-content-container p a:link, .ppf .ingredient-content-container p a:visited, .ppf .ingredient-content-container h2 a, .ppf .ingredient-content-container h2 a:hover, .ppf .ingredient-content-container h2 a:link, .ppf .ingredient-content-container h2 a:visited, .ppf .ingredient-content-container .fact a, .ppf .ingredient-content-container .fact a:hover, .ppf .ingredient-content-container .fact a:link, .ppf .ingredient-content-container .fact a:visited { color: #474747; text-decoration: underline; } .ppf .did-you-know-bubble .header .top-left, .ppf .did-you-know-bubble .header .top-right, .ppf .did-you-know-bubble .header .bottom-left, .ppf .did-you-know-bubble .header .bottom-right { color: #18861a; } .ppf .did-you-know-bubble .header .button-more .bttn-more-pbf { display: none; } .ppf .did-you-know-bubble .header .button-more .bttn-more-ppf { display: block; } .ppf .did-you-know-bubble.open .header .button-more img.bttn-more-ppf { transform: rotate(180deg); -webkit-transform: rotate(180deg); } .pbf .ingredient-tabbed-content.accordion-tabbed ul li.ui-state-active { background: #000b52 !important; } .pbf .ingredient-tabbed-content.accordion-tabbed ul li.ui-state-active a { color: white !important; background: transparent !important; } .pbf .ingredient-tab-other .select-container .button:hover, .pbf .ingredient-tab-other .select-container .button:active, .pbf .ingredient-tab-other .select-container .button.active { background: #000b52; color: white; font-weight: bold; } .section-whatsinside .ingredient-tab-other { border: 1px solid #dddddd; } .section-whatsinside .ui-tabs-nav li.ui-tabs-active a { background: #000b52 !important; color: white !important; } .section-whatsinside .ui-tabs-nav li.ui-tabs-active a:hover, .section-whatsinside .ui-tabs-nav li.ui-tabs-active a:active, .section-whatsinside .ui-tabs-nav li.ui-tabs-active a:link { color: white !important; } /*.page-electrolytes.section-whatsinside.pbf, .page-juice.section-whatsinside.pbf,*/ .page-gluten-free.section-whatsinside.pbf .ingredient-content-section .ui-tabs-nav li.ui-tabs-active, .page-whole-grains.section-whatsinside.pbf .ingredient-content-section .ui-tabs-nav li.ui-tabs-active { border: none !important; background: none !important; } .page-gluten-free.section-whatsinside.pbf .ingredient-content-section .ui-tabs-nav li.ui-tabs-active a, .page-whole-grains.section-whatsinside.pbf .ingredient-content-section .ui-tabs-nav li.ui-tabs-active a { background: white !important; color: #000b52 !important; position: relative; } .page-electrolytes.section-whatsinside.pbf .ingredient-content-section h2 { text-align: center; } .page-allergens.section-yourhealth.pbf .ui-tabs-nav li.ui-tabs-active a { background-color: #000b52 !important; color: white !important; } .page-allergens.section-yourhealth.pbf .ingredient-tabbed-content .ui-widget-content { border: 1px solid #dddddd; } .section-whatsinside.pbf .ingredient-tab-other { border: 1px solid #dddddd; } .ppf.footer { background-color: #dcdcdc; display: block; position: relative; z-index: 10; height: auto; } .ppf.footer .top-row, .ppf.footer .bottom-row { width: 100%; display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: 0 1%; max-width: 1180px; margin: 20px auto; } @media (max-width: 768px) { .ppf.footer .top-row, .ppf.footer .bottom-row { flex-direction: column; } .ppf.footer .top-row > *, .ppf.footer .bottom-row > * { margin: 10px; } } .ppf.footer .nav-logo { margin-top: -16px; } @media (max-width: 768px) { .ppf.footer .nav-logo { margin: 10px; } } .ppf.footer .links { order: 0; } .ppf.footer .links a, .ppf.footer .links div { color: #474747; } .ppf.footer .logos { margin-left: auto; } @media (max-width: 768px) { .ppf.footer .logos { margin: 10px; } } .ppf.footer .copyright { order: 0; margin-left: auto; color: #474747; } @media (max-width: 768px) { .ppf.footer .copyright { margin: 10px; } } .ppf.footer .bottom-row { color: #474747; } .ppf.footer .bottom-row label, .ppf.footer .bottom-row .copyright { margin: 0; } .ppf.footer .bottom-row label { float: none; order: 0; } .ppf.footer .bottom-row .copyright { order: 0; margin-left: auto; color: #474747; } @media (max-width: 768px) { .ppf.footer .bottom-row .copyright { margin: 10px; } } /****************/ .background-gradient-container { display: block; width: 100%; height: 100%; overflow: hidden; position: fixed; pointer-events: none; } .content-container { display: block; position: relative; /* padding-left: 130px; */ padding-top: 105px; max-width: 1280px; margin-left: auto; margin-right: auto; min-height: calc(100vh - 170px); width: 100%; overflow: inherit; } .content { width: 100%; max-width: 1180px; z-index: 1; margin-left: auto; margin-right: auto; padding: 0 20px; } .footer { position: absolute; bottom: 0; } /* IE11 hack to remove select arrows */ select::-ms-expand { display: none; } .ingredient-tabbed-content .ui-widget-content { border: none; } .ui-autocomplete { background-color: white; } .ui-autocomplete li.ui-menu-item { padding: 10px; color: #474747; } .ui-autocomplete li.ui-menu-item:hover { background-color: #dcdcdc; } .ui-autocomplete li.ui-menu-item a { color: #474747; font-weight: normal !important; border: none; border-radius: 0; } .ui-autocomplete li.ui-menu-item a:hover { background-color: transparent; }