/* ---------------------------------------------------------------------
Original Author: Chris Cheney
Contributors: Michael Start, Peter Marty

Target Browsers: All
Media Type: Screen, Projection
Width: Min-Width 768px
------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
 Backgrounds
------------------------------------------------------------------------ */
.pageBg_foodBowl_cat { background-image: url(../images/bg_foodBowl_cat.jpg); }

/* ---------------------------------------------------------------------
 Header
------------------------------------------------------------------------ */
.header { margin-bottom: 40px; }

.header-hd { margin-bottom: 24px; }

.header-hd > * {  display: inline-block; }

/* ---------------------------------------------------------------------
 Header Intro
------------------------------------------------------------------------ */
.headerIntro-hd {
    font: 300 36px/1.0 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif;
    color: #0090aa;
}

.headerIntro-bd {
    font: 400 18px/1.5 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif;
    color: #6f6d5e;
}

/* ---------------------------------------------------------------------
 Logo
------------------------------------------------------------------------ */
.logo {
    display: inline-block;
    width: 111px;
    height: 110px;
    margin: 0 20px 0 0;
    float: none;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------
 Icons
------------------------------------------------------------------------ */
.icon_logo {
    width: 111px;
    height: 110px;
    background-size: 111px 110px;
}

.icon_logo_footer {
    width: 87px;
    height: 87px;
    background: transparent url(/dogcat-assets/images/logo_cats.png) 0 0 no-repeat;
    background-size: 87px 87px;
}

/* ---------------------------------------------------------------------
 Menu
------------------------------------------------------------------------ */
.menu-list {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    float: none;
    right: auto;
}

.menu-list-item-link { font-size: 18px; }

.menu-list > * { width: auto; /* reset for word break on mobile */ }

.menu-list > * + * { border: 0; }

.menu-list-item-link {
    width: auto; /* reset for word break on mobile */
    font-size: 14px;
    letter-spacing: 2.64px;
}

.menu-list-item > .subNav_isActive {
    left: 0;
    right: auto;
}

.menu-list-item_solidBgOnHover.menu-list-item_isHovered {
    padding: 15px 15px 0 15px;
    margin: -15px -15px 0 -15px;
    margin-left: 20px;
    background: #ffffff;
    background: rgba(255, 255, 255, 0.9);
}

/*------------------------------------------------------------------------
 Category Links
------------------------------------------------------------------------*/
.categoryLinks {
    font-size: 14px;
    letter-spacing: 2.64px;
}

.categoryLinks-item {
    line-height: 1.6;
}

.categoryLinks-item-anchor {
    text-decoration: none;
}

.categoryLinks-item-anchor_appetite {
    color: #ed6c4c;
}

.categoryLinks-item-anchor_behavior {
    color: #e9b637;
}

.categoryLinks-item-anchor_physical {
    color: #b7ca2f;
}

.mix-categoryLinks-item-anchor_isActive {
    padding-left: 10px;
    position: relative;
}

.mix-categoryLinks-item-anchor_isActive:before {
    position: absolute;
    margin-top: -3px;
    top: 50%;
    left: 0;
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid inherit;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

.categoryLinks-item-anchor_appetite.mix-categoryLinks-item-anchor_isActive:before {
    border-left: 5px solid #ed6c4c;
}

.categoryLinks-item-anchor_behavior.mix-categoryLinks-item-anchor_isActive:before {
    border-left: 5px solid #e9b738;
}

.categoryLinks-item-anchor_physical.mix-categoryLinks-item-anchor_isActive:before {
    border-left: 5px solid #b0ca5b;
}

/* ---------------------------------------------------------------------
 Search
------------------------------------------------------------------------ */
.header-ft {
    width: 600px;
    position: static;
}

.search-bd { border: none; }

/* ---------------------------------------------------------------------
 Search Form
------------------------------------------------------------------------ */
.searchForm-results a { font-size: 18px; }

/* ---------------------------------------------------------------------
 Buttons
------------------------------------------------------------------------ */
.btn_clear { font-size: 11px; } /*changed from PSD to fit actual content on one line */

/* ---------------------------------------------------------------------
 Hero
------------------------------------------------------------------------ */
.hero {
    border-top-color: #0090aa;
}

.hero-cta {
    top: 50px;
    left: 90px;
}

.hero-cta-pre {
    width: 58px;
    height: 58px;
}

.hero-cta-hd {
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.hero-cta-bd {
    width: 240px;
    margin-bottom: 40px;
    font-size: 16px;
    line-height: 1.15;
}

.hero_wbh .hero-cta-hd {
    letter-spacing: -0.02em;
}

@media (max-width: 991px) {
    .hero_hasImageInSmall .hero-cta {
        top: 86px;
        left: 75px;
    }

    .hero_hasImageInSmall_short .hero-cta {
        top: 46px;
    }

    .hero_hasImageInSmall .hero-cta-bd {
        font-size: 14px;
        line-height: 1.3;
    }
}

/* ---------------------------------------------------------------------
 Switch CTA
------------------------------------------------------------------------ */
.switchCta {
    border-color: #008ca9;
}

.switchCta-hd {
    font: 300 42px/1 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif;
}


/* ---------------------------------------------------------------------
 Feature
------------------------------------------------------------------------ */
.feature {
    padding: 0 19px 0 19px;
    letter-spacing: 0.42px;
}

.feature-hd-datetime { font-size: 12px; }

.feature-hd-datetime {
    margin-bottom: 0;
    position: absolute;
    bottom: 18px;
    left: 0;
}

/* ---------------------------------------------------------------------
 Slides
------------------------------------------------------------------------ */
.slide-overlay-hd_invert {
    font: 700 54px/0.9 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif;
    text-transform: uppercase;
    color: #ffffff;
}

.emphasis { font-size: 69px; }

/* ---------------------------------------------------------------------
 Page
------------------------------------------------------------------------ */
.mix-page_borderTop {  border-color: #0090aa; }

.mix-page_borderBottom {  border-color: #0090aa; }

.page-hd { margin-bottom: 0; }

.page-hd-overlay {
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.60);
}

.page-hd_transparent { background: transparent; }

.mix-page-interact_borderBottom { border-color: #0090aa; }

.page-bd_cushion {
    padding: 60px 70px 10px 70px;
}

/* ---------------------------------------------------------------------
 Speech
------------------------------------------------------------------------ */
.speech-bd-context { font: 300 14px/1.2 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif; } /* Changed font-size to 14px as original 12px was too small using Futura font */

/* ---------------------------------------------------------------------
 Sub Navigation
------------------------------------------------------------------------ */
.subNav {
    left: 0;
    right: auto;
}

.subNav-col-header {
    font-family: "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif;
    color: #008da9;
}

.subNav_fitParent {
    width: auto;
    right: 0;
    left: 0;
    top: 100%;
    padding: 20px 15px 15px;
}

/* ---------------------------------------------------------------------
 Box Links
------------------------------------------------------------------------ */
.boxLinks > * > * {
    font: 700 14px/1.2 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif;
    color: #008da9;
}

/* ---------------------------------------------------------------------
 Promo Aside
------------------------------------------------------------------------ */
.promo-aside_horiz-hd {
    font: 700 14px/1.2 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif;
    text-transform: uppercase;
    color: #4c4940;
    letter-spacing: 1px;
}

/* ---------------------------------------------------------------------
 Text links
------------------------------------------------------------------------ */
.textLinks > * > * {
    font: 400 13px/1.0 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif;
    color: #0090aa;
}

/* ---------------------------------------------------------------------
  Article Promotion
------------------------------------------------------------------------ */
.articlePromo-text { font-size: 19px; }

.articlePromo-text_small { font-size: 13px; }

.articlePromo-text_std { padding: 0 0 10px 10px; }

/* ---------------------------------------------------------------------
  Input
------------------------------------------------------------------------ */
.input_search { padding: 9px 45px 6px 20px; }

.input_submit { top: 6px; }

/* ---------------------------------------------------------------------
  Checkbox Overlay
------------------------------------------------------------------------ */
.checkboxOverlay {
    width: 17px;
    height: 16px;
}

.checkboxOverlay { background: transparent url(../images/icons/checkbox-overlay-sprite_cat.png) 0 -15px no-repeat; }

/* ---------------------------------------------------------------------
  Tile
------------------------------------------------------------------------ */
.tile_hot {background-color: #b4c950; }

.tile_mild {
    background-color: #99cace;
    background-color: rgba(153,202,206,0.9);
}

.tile-inner-hd {
    padding: 0 30px 0 20px;
    font: 700 50px/1.0 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif;
    color: #ffffff;
    text-transform: capitalize;
    letter-spacing: -2px;
    text-rendering: optimizeLegibility;
}

.tile-inner-bd { color: #ffffff; }

.tile-ft { display: none; } /* Cats Hub doesn't display the date */

/* ---------------------------------------------------------------------
  Counter
------------------------------------------------------------------------ */
.counter-count {
    font: 700 16px/1.0 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif;
    color: #ffffff;
}

.counter-type {
    font: 700 10px/1.0 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif;
    color: #ffffff;
}

/* ---------------------------------------------------------------------
 Quote Wrap
------------------------------------------------------------------------ */
.quoteWrap-hd {
    font-size: 33px;
}

/* ---------------------------------------------------------------------
 Category Blocks
------------------------------------------------------------------------ */
.categoryBlocks {
    margin-left: -19px;
    margin-top: -122px;
    z-index: 9;
    position: relative;
}

@media (max-width: 991px) {
    .categoryBlocks {
        padding: 0 3px;
    }
}

.categoryBlocks-block {
    display: inline-block;
    width: calc(33.33% - 19px);
    margin-left: 19px;
    vertical-align: top;
    padding: 20px 13px 22px;
    min-height: 236px;
}

.categoryBlocks-block-icn {
    margin-bottom: 13px;
}

.categoryBlocks-block-icn_light {
    margin-bottom: 35px;
}

.categoryBlocks-block-hd {
    font-size: 16px;
    margin-bottom: 3px;
}

.categoryBlocks-block-bd {
    line-height: 1.2;
    font-size: 12px;
}

/* ---------------------------------------------------------------------
  User Quote
------------------------------------------------------------------------ */
.userQuote:before {
    color: #288fad;
}

.userQuote-citation { font: 300 12px/1.33 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif; }

.userQuote-citation a { color: #2890ad; }

.userQuote-citation-source {
    color: #ffffff;
    font-weight: 700;
}

.userQuote-citation-title { color: #ffffff; }

.userQuote-citation-link { text-transform: uppercase; }

/* ---------------------------------------------------------------------
  Topic List
------------------------------------------------------------------------ */
.topicList-hd { background-color: #40acbf; }

/* ---------------------------------------------------------------------
  Subject
------------------------------------------------------------------------ */
.subject-hd {
    padding-right: 25px;
    font: 18px/1.0 "ff-meta-serif-web-pro", Georgia, Times, "Times New Roman", serif;
    color: #0090aa;
}

.subject-ft {
    font: 700 10px/1.0 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif;
    color: #bcb9aa;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------
  Pip
------------------------------------------------------------------------ */
.pip { font-family: "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif; }

/* ---------------------------------------------------------------------
 Afterword
------------------------------------------------------------------------ */
.afterword-ft-link > * { color: #a71c20; }

/* ---------------------------------------------------------------------
 Callout
------------------------------------------------------------------------ */
.callout { background: #008da9; }

.callout > a {
    font-family: "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif;
    color: #ffffff;
}

/* ---------------------------------------------------------------------
 Table row
------------------------------------------------------------------------ */
.mix-tableRow_shaded > * { background: #008da9; }

/* Targets anchor tag that is wrapping .callout */
.mix-tableRow_shaded > * > * { color: #ffffff; }

.no-touch .tableRow > *:hover > * > .callout,
.no-touch .tableRow > *:hover { background-color: #006a7f; }

/* ---------------------------------------------------------------------
 ActionTable
------------------------------------------------------------------------ */
.actionTable-hd-row-aside { font: 400 20px/1.3 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif; }

/* ---------------------------------------------------------------------
 Interact
------------------------------------------------------------------------ */
.interact-media > * {
    left: 0;
    background-image: url(../images/innovations/sprite-switch-cat-tablet.png)
}

.interact-media-varOne { background-position: 0 0; }
.interact-media-varTwo { background-position: -302px 0; }
.interact-media-varThree { background-position: -608px 0; }

/* ---------------------------------------------------------------------
 Social Post
------------------------------------------------------------------------ */
.socialPost-bd a { color: #599ab4; }

/* ---------------------------------------------------------------------
 Best Food
------------------------------------------------------------------------ */
.bestFood {
    max-width: 446px;
}

/* ---------------------------------------------------------------------
 Footer
------------------------------------------------------------------------ */
.footer-nav,
.footer-meta,
.footer-legalese {
    margin-left: 225px;
    display: block;
}

.footer-logo {
    width: 111px;
    height: 110px;
}

.footer-nav {
    width: 494px;
    margin-bottom: 8px;
}

.footer-nav > * { vertical-align: top; }

.footer-nav a {
    font-size: 11px;
    font-family: "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif;
    color: #599ab4;
}

.footer-nav > * > a {
    display: inline-block;
    padding-left: 17px;
    padding-right: 22px;
}

.footer-nav > *:last-child > a {
    padding-right: 0;
}

/*3rd regular menu item*/
.footer-nav > *:nth-child(3) { margin-left: 0; }

.footer-nav > *:nth-child(3) > a { padding-left: 6px; }

/*4th regular menu item*/
.footer-nav > *:nth-child(4) { width: 131px; }

/*Drop-ups*/
.footer-nav-item {
    padding: 0; /* override screen.css */
    margin-left: 0; /* override screen.css */
    width: auto;
}

.footer-nav-item_isActive .footer-nav-item-list,
.no-touch .footer-nav-item:hover .footer-nav-item-list {
    width: 120px;
    padding: 20px 0 7px 0; /* override screen.css */
    bottom: 30px;
}

.footer-nav-item_isActive .footer-nav-item-list a,
.no-touch .footer-nav-item:hover .footer-nav-item-list a {
    padding: 0 6px 0 17px; /* override screen.css */
}

.footer-nav-item-list a { font-family: "ff-meta-serif-web-pro", Georgia, Times, "Times New Roman", serif; }

/*1st Drop-up*/
.footer-nav-item:first-child { margin-left: -13px; /*pulls first menu item inline due to padding from drop-up*/ }

.footer-nav-item:first-child > a { padding-right: 51px; }

/*2nd Drop-up*/
.footer-nav-item:nth-child(2) { margin-left: -12px; }
.footer-nav-item:nth-child(2) > a { padding-right: 50px; }

/* ---------------------------------------------------------------------
 Tooltip
------------------------------------------------------------------------ */
.tooltip-trigger { font-size: 14px; }

/* ---------------------------------------------------------------------
 Call
------------------------------------------------------------------------ */
.call-hd > * { font: 700 20px/1.4 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif; }

/* ---------------------------------------------------------------------
 Billboard
------------------------------------------------------------------------ */
.billboard-hd { font: 300 120px/.8 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif; }

/* ---------------------------------------------------------------------
 Timeline
------------------------------------------------------------------------ */
.timeline-heading { font: 700 14px/1.0 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif; }

/* ---------------------------------------------------------------------
 UI
------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
 Control
------------------------------------------------------------------------ */
.control-reference {
    font-family: "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif;
}

/* ---------------------------------------------------------------------
 Vertical Tags
------------------------------------------------------------------------ */
.verticalTags > .verticalTags_isActive > * { background-color: #0090aa; }

.verticalTags .verticalTags_isActive > *:after {
    border-left: 5px solid #0090aa;
    border-width: 13px;
    margin-top: -13px;
}

/* ---------------------------------------------------------------------
 Island
------------------------------------------------------------------------ */
.island_tall { padding-bottom: 43px; }

.island-bd { margin-bottom: 10px; }

/* ---------------------------------------------------------------------
 Cluster
------------------------------------------------------------------------ */
.cluster-img {
    max-width: 95px;
    margin-top: 1px;
    margin-right: 0px;
}

.cluster-bd-title { margin-top: 4px; }

.cluster-bd-desc {
    line-height: 1.55;
    font-size: 11px;
}

.cluster-bd { max-width: 280px; }

/* ---------------------------------------------------------------------
 Vertical Tags
------------------------------------------------------------------------ */
.verticalTags { width: 96px; }

.verticalTags > * > * { font: 700 13px/1.0 "futura-pt", Futura, "Century Gothic", AppleGothic, Verdana, sans-serif; }

/* ---------------------------------------------------------------------
 Results
------------------------------------------------------------------------ */
.results > * + * { margin-top: 32px; }

/* ---------------------------------------------------------------------
 Pager
------------------------------------------------------------------------ */
.results + .pager_tall { padding-top: 42px; }

.pager > * > * {
    padding: 6px 9px;
    font-size: 16px;
}

/* ---------------------------------------------------------------------
 Theme-based break tags
------------------------------------------------------------------------ */
.mix-brDog_medium {
    display: none;
}

.mix-brCat_medium {
    display: inline;
}

/* ---------------------------------------------------------------------
 Section
------------------------------------------------------------------------ */
.section-inner-title {
    font-size: 43px;
    font-weight: 300;
}

.section-inner-bd-intro {
    font-size: 15px;
    font-weight: 300;
}

/* ---------------------------------------------------------------------
 Band
------------------------------------------------------------------------ */
.band-inner {
    padding: 43px 35px 127px;
}

/* ---------------------------------------------------------------------
 Heading
------------------------------------------------------------------------ */
.hdg_h3 {
    font-size: 23px;
}

.mix-hdg_difference {
    padding: 36px 30px 28px 30px;
    font-size: 25px;
}

/* ---------------------------------------------------------------------
 Difference Carousel
------------------------------------------------------------------------ */
.differenceBlock-overlay-hd {
    opacity: 1;
    padding: 0 15px;
    font-size: 16px;
}

.differenceCarousel {
    width: 86%;
    padding-bottom: 29px;
}

.differenceCarousel-btn {
    width: 25px;
    height: 46px;
    top: -16px;
    background-size: cover;
}

.differenceCarousel-btn_prev {
    background-image: url(/assets/challenge/images/differenceCarousel/difference-arrow-left-large.png);
    left: -40px;
}

.differenceCarousel-btn_next {
    background-image: url(/assets/challenge/images/differenceCarousel/difference-arrow-right-large.png);
    right: -40px;
}

.differenceCarousel-slides {
    margin-left: -2%;
}

.carousel-slides_1to3 > * {
    margin-left: 2%;
    width: 31.3333%;
}

/* ---------------------------------------------------------------------
 mediaOverlay
------------------------------------------------------------------------ */
.mix-mediaOverlay-panel_appetite .mediaOverlay-panel-icn {
    top: -12px;
    left: -12px;
}

.mix-mediaOverlay-panel_behavior .mediaOverlay-panel-icn {
    top: -12px;
    left: -12px;
}

.mix-mediaOverlay-panel_physical .mediaOverlay-panel-icn {
     top: -12px;
    left: -12px;
}


/* ---------------------------------------------------------------------
USER CONTENT
Original Author: Anthony Ticknor
Contributors: Michael Start, Chris Cheney, Tad Runkle,
Anthony Lukes

Target Browsers: All
Media Type: Screen
------------------------------------------------------------------------ */
.userContent {
    font-size: 14px;
    line-height: 1.3
}

.userContent h6 { line-height: 1.33; }

.userContent p {
    font-size: 16px;
    line-height: 1.4;
}

.userContent .intro {
    font-size: 18px;
    line-height: 1.33;
}

.userContent .highlight { font-size: 21px; }

.userContent .mix-btn_large { width: auto; }

/* ---------------------------------------------------------------------
 SHAME Hook
------------------------------------------------------------------------ */
/* A hook for specific areas of userContent where headers and other elements require different styling the general userContent */
.shameHook h2 { font-size: 38px; }

/* ---------------------------------------------------------------------
 Whole Body Health (cat) pages
------------------------------------------------------------------------ */
.userContent_WBH {
    padding-top: 0;
    padding-bottom: 0;
}

.userContent_WBH h2  {
    margin-bottom: 13px;
    font-size: 20px;
}

.userContent_WBH h3 {
    font-size: 16px;
    line-height: 1;
}

.userContent_WBH p {
    font-size: 15px;
    line-height: 1.4;
}

.userContent_WBH li {
    margin-left: 14px;
}

/* ---------------------------------------------------------------------
 Key Points within Whole Body Health User Content areas
------------------------------------------------------------------------ */
.userContent_WBH .keyPoints: { *zoom: 1; /* clear for lte ie7 */ }

.userContent_WBH .keyPoints:before,
.userContent_WBH .keyPoints:after {
    display: table;
    content: " ";
}

.userContent_WBH .keyPoints:after { clear: both; }

.userContent_WBH .keyPoints > * {
    float: left;
}

.userContent_WBH .keyPoints {
    padding-top: 20px;
    padding-bottom: 33px;
}

.userContent_WBH .keyPoints-hd {
    width: 270px;
    margin-bottom: 0;
    margin-right: 25px;
}

.userContent_WBH .keyPoints-bd {
    width: 290px;
}

.userContent_WBH .keyPoints-bd-combo {
    margin-bottom: 17px;
}

.userContent_WBH .keyPoints h3 {
    font-size: 21px;
}

.userContent_WBH .keyPoints li {
    margin-bottom: 0;
    font-size: 12px;
}

/* ---------------------------------------------------------------------
 End of File, please add new styles above User Content area
------------------------------------------------------------------------ */