/*#####################################*/


/*#               FONTS               #*/


/*#####################################*/

@font-face {
    font-family: 'Hlmt Rounded';
    src: url(/sites/g/files/mcldtz1036/files/hlmt-rounded.eot);
    src: url(/sites/g/files/mcldtz1036/files/hlmt-rounded.eot?#iefix) format('embedded-opentype'), url(/sites/g/files/mcldtz1036/files/hlmt-rounded.woff) format('woff'), url(/sites/g/files/mcldtz1036/files/hlmt-rounded.ttf) format('truetype');
}

@font-face {
    font-family: 'Century Gothic Bold';
    src: url(/sites/g/files/mcldtz1036/files/Century-Gothic-Bold.eot);
    src: url(/sites/g/files/mcldtz1036/files/Century-Gothic-Bold.eot?#iefix) format('embedded-opentype'), url(/sites/g/files/mcldtz1036/files/Century-Gothic-Bold.woff) format('woff'), url(/sites/g/files/mcldtz1036/files/Century-Gothic-Bold.ttf) format('truetype');
}


/*#####################################*/


/*#              GENERAL              #*/


/*#####################################*/

* {
    margin: 0px;
    color: #272727;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@media( min-width: 990px) {
    body {
        background-image: url(/sites/g/files/mcldtz1036/files/background.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% auto;
    }
}

html>iframe,
body>iframe,
body>div>iframe {
    display: none;
}

.content_container {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 990px;
}

@media( min-width: 990px) {
    main .social_bar .content_container {
        padding: 0px 20px;
    }
}


/*#####################################*/


/*#              HEADER               #*/


/*#####################################*/

body header {
    display: block;
    float: left;
    background-color: #dde8fd;
    background-color: rgba(221, 232, 253, 0.54);
    width: 100%;
}

@media( min-width: 990px) {
    body header {
        position: relative;
    }
}

header .red_bar {
    display: block;
    float: left;
    position: relative;
    background-color: #e61c29;
    padding: 6px 20px;
    width: 100%;
    z-index: 3;
}

.red_bar .purina_discover {
    display: none;
    float: left;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJBAMAAAAbVLtZAAAAJFBMVEUAAAD///////////////////////////////////////////+0CY3pAAAAC3RSTlMAgEDF2BAwIGCf64j2264AAAA1SURBVAjXYwCBBgYIMA6A0NZuDAyKgoKCq3cnMEjvBgEHhiIlJSXvzQEQ+QkQdRZQfQUMDACQRws6ikutDAAAAABJRU5ErkJggg==');
    background-repeat: no-repeat;
    background-position: right center;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 22px;
    text-decoration: none;
    padding-right: 18px;
}

.purina_discover sup {
    color: #fff;
    display: inline;
    font-size: 9px;
    vertical-align: top;
}

.red_bar .purina_link {
    display: block;
    margin: auto;
    width: 239px;
}

@media( min-width: 600px) {
    .red_bar .purina_discover {
        display: block;
    }
    .red_bar .purina_link {
        float: right;
    }
}

.purina_link img {
    display: block;
    float: left;
    border: none;
    width: 100%;
}

header .top_header {
    display: block;
    float: left;
    position: relative;
    width: 100%;
}

@media( min-width: 990px) {
    header .top_header {
        position: static;
    }
}

.top_header .logo,
.social_bar .logo {
    display: block;
    float: left;
    width: 32.5%;
}

.social_bar .logo {
    float: right;
    max-width: 134px;
}

@media( min-width: 990px) {
    .top_header .logo {
        max-width: 212px;
    }
}

.logo img {
    display: block;
    float: left;
    border: none;
    width: 100%;
}

@media( min-width: 990px) {
    .top_header .logo img {
        position: relative;
        margin-bottom: -50px;
        -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
        z-index: 2;
    }
}

.top_header .menu_button {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 21.25%;
    max-width: 86px;
    height: 100%;
}

@media( min-width: 990px) {
    .top_header .menu_button {
        display: none;
    }
}

.menu_button span {
    display: block;
    position: absolute;
    top: 28%;
    left: 20%;
    background-color: #062e86;
    width: 60%;
    height: 2px;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms;
}

.menu_button span+span {
    top: 50%;
    margin-top: -1px;
}

.menu_button span+span+span {
    top: auto;
    bottom: 28%;
}

.menu_button.open span {
    top: 50%;
    margin-top: -1px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.menu_button.open span+span {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
}

.menu_button.open span+span+span {
    margin-bottom: -1px;
    top: auto;
    bottom: 50%;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.top_header nav {
    display: block;
    float: left;
    position: relative;
    left: -150%;
    width: 100%;
    -webkit-transition: left 300ms;
    -moz-transition: left 300ms;
    transition: left 300ms;
}

.top_header .menu_button.open+nav {
    left: 0%;
}

@media( min-width: 990px) {
    .top_header nav {
        position: static;
        margin-left: 20px;
        width: 758px;
    }
}

nav .menu {
    display: block;
    float: left;
    width: 100%;
}

@media( max-width: 989px) {
    nav .menu {
        float: none;
        position: absolute;
        top: 0px;
        left: 0px;
        border-top: 1px solid #062e86;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 1;
    }
}

.menu>li {
    display: block;
    float: left;
}

@media( max-width: 989px) {
    .menu>li {
        border-bottom: 1px solid #062e86;
        background-color: #dde8fd;
        background-color: rgba(221, 232, 253, 0.54);
        width: 100%;
    }
}

.menu a {
    display: block;
    float: left;
    color: #062e86;
    font-family: 'Hlmt Rounded';
    font-size: 20px;
    text-decoration: none;
    line-height: 44px;
    padding: 0px 23px;
    width: 100%;
}

.menu a.actual {
    background-color: #062e86;
    color: #fff;
}

@media( max-width: 989px) {
    .menu a.dropdown {
        position: relative;
        padding-right: 40px;
    }
}

@media( min-width: 990px) {
    .menu a {
        font-size: 22px;
        line-height: 86px;
        -webkit-transition: background-color 150ms, opacity 150ms;
        -moz-transition: background-color 150ms, opacity 150ms;
        transition: background-color 150ms, opacity 150ms;
    }
    .menu>li:hover>a,
    .menu a:hover {
        background-color: #062e86;
        color: #fff;
        opacity: 0.5;
        filter: alpha(opacity=50);
    }
    .menu>li>a.actual,
    .menu a.actual {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@media( max-width: 989px) {
    .menu a.dropdown:after {
        display: block;
        position: absolute;
        top: 50%;
        right: 20px;
        margin-top: -5px;
        border-top: 10px solid #062e86;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        content: '';
        width: 0px;
        height: 0px;
    }
    .menu a.dropdown.open:after {
        border-top: none;
        border-bottom: 10px solid #062e86;
    }
    .menu a.dropdown.actual:after {
        border-top: 10px solid #fff;
    }
    .menu a.dropdown.actual.open:after {
        border-top: none;
        border-bottom: 10px solid #fff;
    }
}

.menu .submenu_container {
    display: none;
}

@media( max-width: 989px) {
    .menu .open+.submenu_container {
        display: block;
    }
}

@media( min-width: 990px) {
    .menu .submenu_container {
        display: block;
        position: absolute;
        top: 120px;
        left: 0px;
        background-image: url(/sites/g/files/mcldtz1036/files/background.jpg);
        background-repeat: no-repeat;
        background-position: center -120px;
        background-size: 100% auto;
        width: 100%;
        height: 0px;
        opacity: 0;
        filter: alpha(opacity=0);
        overflow: hidden;
        -webkit-transition: height 0ms 300ms, opacity 300ms;
        -moz-transition: height 0ms 300ms, opacity 300ms;
        transition: height 0ms 300ms, opacity 300ms;
    }
    .menu>li:hover .submenu_container {
        height: 50px;
        opacity: 1;
        filter: alpha(opacity=100);
        z-index: 1;
        -webkit-transition: height 0ms, opacity 300ms;
        -moz-transition: height 0ms, opacity 300ms;
        transition: height 0ms, opacity 300ms;
    }
}

.submenu_container .submenu_background {
    display: block;
    float: left;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
}

.submenu_background .submenu {
    display: block;
    float: right;
    text-align: center;
    word-spacing: -5px;
    width: 100%;
}

.submenu_background .submenu.tight {
    max-width: 778px;
}

.submenu li {
    display: block;
    float: left;
    border-top: 1px solid #062e86;
    width: 100%;
}

@media( min-width: 990px) {
    .submenu li {
        display: inline-block;
        float: none;
        border-top: none;
        margin-bottom: -5px;
        width: 20%;
    }
}

.submenu a {
    background-color: #cce0f4;
    font-size: 20px;
    text-align: left;
    line-height: 38px;
    word-spacing: -1px;
    padding: 0px 35px;
    width: 100%;
}

@media( min-width: 990px) {
    .submenu a {
        background-color: transparent;
        text-align: center;
        line-height: 50px;
        padding: 0px;
    }
}

@media( min-width: 990px) {
    .menu .buy_button {
        display: block;
        float: right;
    }
    .buy_button a {
        display: block;
        float: left;
        margin-top: 20px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        background-color: #0a3184;
        color: #fff;
        font-family: 'Hlmt Rounded';
        font-size: 22px;
        text-decoration: none;
        line-height: 44px;
        padding: 0px 16px;
        -webkit-transition: opacity 150ms;
        -moz-transition: opacity 150ms;
        transition: opacity 150ms;
    }
    .buy_button a:hover {
        opacity: 0.5;
        filter: alpha(opacity=50);
    }
}

header .social_bar,
main .social_bar {
    display: block;
    float: left;
    background-color: #dde8fd;
    background-color: rgba(221, 232, 253, 0.54);
    width: 100%;
}

header .social_bar {
    display: none;
}

@media( min-width: 990px) {
    header .social_bar {
        display: block;
        background-color: #fff;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 11px 0px;
    }
    main .social_bar {
        margin-top: -86px;
    }
}

.social_bar .social_button {
    display: block;
    float: right;
    background-image: url(/sites/g/files/mcldtz1036/files/sprite-social.png);
    background-repeat: no-repeat;
    width: 34px;
    height: 28px;
    -webkit-transition: opacity 150ms;
    -moz-transition: opacity 150ms;
    transition: opacity 150ms;
}

main .social_bar .social_button {
    float: left;
    margin-top: 28px;
}

.social_bar .social_button:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.social_bar .social_button+.social_button {
    margin-right: 30px;
}

main .social_bar .social_button+.social_button {
    margin-left: 30px;
    margin-right: 0px;
}

.social_bar .social_button.fb {
    background-position: 8px center;
}

.social_bar .social_button.tw {
    background-position: -55px center;
}

.social_bar .social_button.yt {
    background-position: -115px center;
    width: 50px;
}

.social_bar .social_button.ins {
    background-position: -235px center;
    width: 50px;
}


/*#####################################*/


/*#               MAIN                #*/


/*#####################################*/

body main {
    display: block;
    float: left;
    width: 100%;
}

main .content {
    display: block;
    float: left;
    background-color: #fff;
    padding-bottom: 55px;
    width: 100%;
    overflow: hidden;
}

@media( min-width: 768px) {
    main .content {
        padding-bottom: 224px;
    }
}

@media( min-width: 990px) {
    main .content {
        margin-top: 30px;
    }
}


/*#####################################*/


/*#              FOOTER               #*/


/*#####################################*/

body footer {
    display: block;
    float: left;
    background-color: #4A4545;
    padding: 30px 20px;
    width: 100%;
}

footer .purina_logo {
    display: block;
    float: left;
    margin-bottom: 20px;
    width: 100%;
}

@media (min-width: 520px) {
    footer .purina_logo {
        margin-top: 14px;
        margin-right: 20px;
        margin-bottom: 0px;
        width: auto;
    }
}

.purina_logo img {
    display: block;
    margin: auto;
    border: none;
}

@media (min-width: 520px) {
    .purina_logo img {
        margin: 0px;
    }
}

footer .social_container {
    display: block;
    float: right;
    margin: 0px auto 14px;
    width: 100%;
}

@media (min-width: 520px) {
    footer .social_container {
        margin: 0px;
        width: 285px;
    }
}

@media (min-width: 598px) {
    footer .social_container {
        width: 385px;
    }
}

.social_container .social_buttons_container {
    display: block;
    margin: auto;
    width: 235px;
    height: 65px;
}

@media (min-width: 520px) {
    .social_container .social_buttons_container {
        float: right;
    }
}

.social_buttons_container .cont_gp {
    display: block;
    float: left;
    width: 65px;
}

.social_buttons_container .cont_fb {
    display: block;
    float: left;
    width: 78px;
    height: 61px;
    overflow: hidden;
}

.cont_fb .fb-like {
    display: block;
    position: relative;
    margin-left: 15px;
}

.social_buttons_container .cont_tw {
    display: block;
    float: left;
    width: 85px;
}

@media (min-width: 598px) {
    .social_buttons_container .cont_tw {
        margin-top: 41px;
    }
}

.cont_tw .twitter-share-button {
    display: block;
    margin-left: 15px;
}

.social_container .share_text {
    display: none;
}

@media (min-width: 598px) {
    .social_container .share_text {
        display: block;
        float: right;
        color: #A9A390;
        font-size: 14px;
        text-align: center;
        padding: 42px 20px 7px;
        width: 150px;
    }
}

footer .follow_text {
    display: block;
    clear: right;
    margin: 22px auto 0px;
    color: #A9A390;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    width: 202px;
    height: 21px;
}

@media (min-width: 520px) {
    footer .follow_text {
        float: right;
        margin: 17px 4px 0px 15px;
        text-align: right;
    }
}

@media (min-width: 770px) {
    footer .follow_text {
        clear: none;
        margin: 40px 0px;
    }
}

.follow_text .follow_link {
    display: inline-block;
    float: right;
    margin-left: 16px;
}

.follow_text .follow_link+.follow_link {
    margin-left: 8px;
}

.follow_text .follow_link:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.follow_link img {
    display: block;
    float: left;
    border: none;
}

footer .purina_info {
    display: block;
    float: left;
    margin-top: 20px;
    border-top: 1px solid #363334;
    padding-bottom: 40px;
    width: 100%;
}

.purina_info .purina_links {
    display: block;
    float: right;
    color: #A9A390;
    list-style: none;
    padding-top: 20px;
    text-align: center;
    width: 100%;
}

@media (min-width: 960px) {
    .purina_info .purina_links {
        text-align: left;
        width: auto;
    }
}

.purina_links .link {
    display: inline-block;
    padding: 2px;
}

@media (min-width: 960px) {
    .purina_links .link {
        float: left;
    }
}

.link a {
    color: #A9A390;
    font-size: 14px;
}

.link a:hover {
    color: #FFFFFF;
}

.purina_info .registered_text {
    display: block;
    float: left;
    color: #A9A390;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    text-align: center;
    padding-top: 20px;
    line-height: 16px;
    width: 100%;
}

@media (min-width: 960px) {
    .purina_info .registered_text {
        text-align: left;
        width: 365px;
    }
}

@media (min-width: 1280px) {
    .purina_info .registered_text {
        padding-top: 25px;
        width: auto;
    }
}