DAILY PORTION CALCULATORTry this easy-to-use tool to get a precise recommendation on the amount of food you should give to your pet.. So, when you input the information on your pet into this calculator, we will be able to give you a much more accurate recommendation. So, don't be surprised if the result you get does not match the pack exactly, the result from the calculator is better tailored for your pet
Read More HOW IT WORKS?
--color-text--active: #fff;
--color-text--inactive: #565656;
--color-faded-black-1: #191819;
--color-faded-black-2: #101010;
--color-purina-red: #ec1a19;
--gradient--LtR: linear-gradient(
to right,
rgb(145, 128, 90),
rgb(224, 177, 128)
);
--gradient--RtL: linear-gradient(
to left,
rgb(145, 128, 90),
rgb(224, 177, 128)
);
--gradient--Center: linear-gradient(
to left,
rgba(145, 128, 90, 0) 20%,
rgb(224, 177, 128),
rgba(145, 128, 90, 0) 80%
);
/*--------------------
Europa Market
Vars for Utils
--------------------*/
--bm-sm: 10px;
--bm-m: 20px;
--bm-l: 40px;
}@media screen and (max-width: 480px) {
.jumbotron__content-container {
max-width: 180px;
}
}
@media screen and (min-width: 300px){
.pet-profile .sliders .form-group {
border: none !important;
}
}
@media screen and (min-width: 568px) {
.product {
width: 30% !important;
}
.radio-row {
justify-content: flex-start;
}
.form-group.sliders .form-group {
width: 49.6%;
margin-bottom: 0px;
display: inline-block;
}
.pet-profile .sliders .form-group {
border: none !important;
}
.radio-row .input__wrapper:not(:last-child) {
margin-right: var(--bm-l);
}
}
/* temp */
@media screen and (max-width: 768px) {
.jumbotron-animal-mask {
right: -45%;
}
.popup {
width: 90vw !important;
transform: translate(calc(-50% - 6px), -50%);
}
.footer__wrapper .footer_menu {
width: 100%;
}
.footer__wrapper .footer_menu li {
display: block;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #fff;
}
.footer__wrapper .right {
margin-top: 10px;
font-size: 12px;
opacity: .75;
}
}
/* ------------- */
@media screen and (min-width: 768px) {
.nav li:not(:first-child) a {
padding-left: var(--bm-sm);
}
.rational-calculator .nav li:not(:last-child) a {
border-bottom: none;
border-right: 1px solid #fff;
}
.jumbotron__content-container h1 {
white-space: nowrap;
}
.jumbotron__content-container {
max-width: 450px !important;
}
.jumbotron-animal-mask {
background-size: 80% !important;
}
form > div {
margin-left: 20px;
margin-right: 20px;
flex-direction: row !important;
justify-content: space-between;
}
.search__container {
margin: 0px !important;
}
.species-selector {
margin: 0px !important;
}
.selector__wrapper:first-child {
margin-right: var(--bm-m);
}
.lifestyle-selectors .selector-content > div {
width: 49.6%;
margin-bottom: 0px;
display: inline-block;
}
.lifestyle-selectors .selector-content > div {
padding-left: var(--bm-m);
margin-bottom: var(--bm-m);
}
.footer__wrapper {
display: inline-flex;
justify-content: space-between;
}
.footer__wrapper .left li:not(:last-child) {
padding-right: 10px;
margin-right: 4.5px;
border-right: 1px solid #fff;
}
}
@media screen and (min-width: 992px) {
.jumbotron-animal-mask {
background-size: 65% !important;
}
.product {
width: 20% !important;
}
}
@media screen and (min-width: 1200px) {
.jumbotron-animal-mask {
background-size: 55% !important;
}
}
html {
box-sizing: border-box;
font-size: 10px;
}
body {
overflow-x: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
margin: 0;
padding: 0;
font-weight: normal;
}
ol,
ul {
list-style: none;
}
a,
a:hover,
a.visited,
a:active,
a:focus,
a:focus-within {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
height: auto;
}
button {
border: none;
outline: none;
cursor: pointer;
}
label {
color: #565656;
font-weight: 400;
}
output {
color: var(--color-text-main) !important;
}
/* Hide Default Sliders */
input[type="range"] {
-webkit-appearance: none;
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
.main-container.container {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
/*-----------------------------*/
/*--------------------------------------------
These utilities are incomplete, the naming
is also off
---------------------------------------------*/
/*-------------------------
POSITIONING
--------------------------*/
.sink {
float: none !important;
}
.fw {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
/*-------------------------
BOX-MODEL
--------------------------*/
/* --- Subtractive --- */
.no-pad {
padding: 0;
}
.no-pad-x {
padding-left: 0px !important;
padding-right: 0px !important;
}
.no-pad-y {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.no-bor {
border: none !important;
}
.no-mar {
margin: 0 !important;
}
.no-mar-x {
margin-top: 0px;
margin-bottom: 0px;
}
.snug {
padding: 0;
border: none;
margin: 0;
}
/* --- Additive --- */
/* -- Padding --*/
.pd-sm {
padding: var(--bm-sm) !important;
}
.pd-sm-top {
padding-top: var(--bm-sm) !important;
}
.pd-sm-right {
padding-right: var(--bm-sm) !important;
}
.pd-sm-bot {
padding-bottom: var(--bm-sm) !important;
font-weight: 400;
}
.pd-sm-left {
padding-left: var(--bm-sm) !important;
}
.pd-sm-x {
padding-left: var(--bm-sm) !important;
padding-right: var(--bm-sm) !important;
}
.pd-sm-y {
padding-top: var(--bm-sm) !important;
padding-bottom: var(--bm-sm) !important;
}
.pd-m {
padding: var(--bm-m) !important;
}
.pd-m-top {
padding-top: var(--bm-m) !important;
}
.pd-m-right {
padding-right: var(--bm-m) !important;
}
.pd-m-bot {
padding-bottom: var(--bm-m) !important;
}
.pd-m-left {
padding-left: var(--bm-m) !important;
}
.pd-m-x {
padding-left: var(--bm-m) !important;
padding-right: var(--bm-m) !important;
}
.pd-m-y {
padding-top: var(--bm-m) !important;
padding-bottom: var(--bm-m) !important;
}
.pd-l {
padding: var(--bm-l) !important;
}
.pd-l-top {
padding-top: var(--bm-l) !important;
}
.pd-l-right {
padding-right: var(--bm-l) !important;
}
.pd-l-bot {
padding-bottom: var(--bm-l) !important;
}
.pd-l-left {
padding-left: var(--bm-l) !important;
}
.pd-l-x {
padding-left: var(--bm-l) !important;
padding-right: var(--bm-l) !important;
}
.pd-l-y {
padding-bottom: var(--bm-l) !important;
}
/* -- Margin --*/
.mg-sm {
margin: 1rem !important;
}
.mg-sm-top {
margin-top: var(--bm-sm);
}
.mg-sm-right {
margin-right: var(--bm-sm);
}
.mg-sm-bot {
margin-bottom: var(--bm-sm);
font-weight: 400;
}
.mg-sm-left {
margin-left: var(--bm-sm);
}
.mg-sm-x {
margin-left: var(--bm-sm) !important;
margin-right: var(--bm-sm) !important;
}
.mg-sm-y {
margin-top: var(--bm-sm) !important;
margin-bottom: var(--bm-sm) !important;
}
.mg-m {
margin: 2rem !important;
}
.mg-m-top {
/* margin-top: var(--bm-m); */
}
.mg-m-right {
margin-right: var(--bm-m);
}
.mg-m-bot {
margin-bottom: var(--bm-m);
}
.mg-m-left {
margin-left: var(--bm-m);
}
.mg-m-x {
margin-left: var(--bm-m) !important;
margin-right: var(--bm-m) !important;
}
.mg-m-y {
margin-top: var(--bm-m) !important;
margin-bottom: var(--bm-m) !important;
}
.mg-l {
margin: 4rem !important;
}
.mg-l-top {
margin-top: var(--bm-l);
}
.mg-l-right {
margin-right: var(--bm-l);
}
.mg-l-bot {
margin-bottom: var(--bm-l);
}
.mg-l-left {
margin-left: var(--bm-l);
}
.mg-l-x {
margin-left: var(--bm-l) !important;
margin-right: var(--bm-l) !important;
}
.mg-l-y {
margin-top: var(--bm-l) !important;
margin-bottom: var(--bm-l) !important;
}
/* ----------------------------------------------- */
/* -- Steps --*/
.pd-sm-plus-half {
padding: calc((var(--bm-sm)) + (calc(var(--bm-sm) / 2))) !important;
}
.pd-sm-bot-plus-half {
padding-bottom: calc((var(--bm-sm)) + (calc(var(--bm-sm) / 2))) !important;
}
.pd-sm-x-plus-half {
padding-left: calc(var(--bm-sm) + (var(--bm-sm) / 2)) !important;
padding-right: calc(var(--bm-sm) + (var(--bm-sm) / 2)) !important;
}
.pd-sm-y-plus-half {
padding-top: calc(var(--bm-sm) + (var(--bm-sm) / 2)) !important;
padding-bottom: calc(var(--bm-sm) + (var(--bm-sm) / 2)) !important;
}
.pd-m-plus-half {
padding: calc((var(--bm-m)) + (calc(var(--bm-m) / 2))) !important;
}
.pd-m-left-plus-half {
padding-left: calc((var(--bm-m)) + (calc(var(--bm-m) / 2))) !important;
}
.pd-m-right-plus-half {
padding-right: calc((var(--bm-m)) + (calc(var(--bm-m) / 2))) !important;
}
.pd-m-x-plus-half {
padding-left: calc(var(--bm-m) + (var(--bm-m) / 2)) !important;
padding-right: calc(var(--bm-m) + (var(--bm-m) / 2)) !important;
}
.pd-m-y-plus-half {
padding-top: calc(var(--bm-m) + (var(--bm-m) / 2)) !important;
padding-bottom: calc(var(--bm-m) + (var(--bm-m) / 2)) !important;
}
.pd-l-x-plus-half {
padding-left: calc(var(--bm-l) + (var(--bm-l) / 2)) !important;
padding-right: calc(var(--bm-l) + (var(--bm-l) / 2)) !important;
}
.pd-l-x-plus-three-quart {
padding-left: calc(var(--bm-l) + (var(--bm-l) * 0.75)) !important;
padding-right: calc(var(--bm-l) + (var(--bm-l) * 0.75)) !important;
}
.mg-sm-plus-half {
padding: calc((var(--bm-sm)) + (calc(var(--bm-sm) / 2))) !important;
}
.mg-sm-x-plus-half {
margin-left: calc(var(--bm-sm) + (var(--bm-sm) / 2)) !important;
margin-right: calc(var(--bm-sm) + (var(--bm-sm) / 2)) !important;
}
.mg-sm-y-plus-half {
margin-top: calc(var(--bm-sm) + (var(--bm-sm) / 2)) !important;
margin-bottom: calc(var(--bm-sm) + (var(--bm-sm) / 2)) !important;
}
.mg-m-plus-half {
margin: calc((var(--bm-m)) + (calc(var(--bm-m) / 2))) !important;
}
.mg-m-right-plus-half {
margin-right: calc((var(--bm-m)) + (calc(var(--bm-m) / 2))) !important;
}
.mg-m-left-plus-half {
margin-left: calc((var(--bm-m)) + (calc(var(--bm-m) / 2))) !important;
}
.mg-m-y-plus-half {
margin-top: calc((var(--bm-m)) + (calc(var(--bm-m) / 2))) !important;
margin-bottom: calc((var(--bm-m)) + (calc(var(--bm-m) / 2))) !important;
}
.mg-m-x-plus-half {
margin-left: calc(var(--bm-m) + (var(--bm-m) / 2)) !important;
margin-right: calc(var(--bm-m) + (var(--bm-m) / 2)) !important;
}
.mg-m-y-plus-half {
margin-top: calc(var(--bm-m) + (var(--bm-m) / 2)) !important;
margin-bottom: calc(var(--bm-m) + (var(--bm-m) / 2)) !important;
}
.mg-l-x-plus-half {
margin-left: calc(var(--bm-l) + (var(--bm-l) / 2)) !important;
margin-right: calc(var(--bm-l) + (var(--bm-l) / 2)) !important;
}
.mg-l-y-plus-half {
margin-top: calc(var(--bm-l) + (var(--bm-l) / 2)) !important;
margin-bottom: calc(var(--bm-l) + (var(--bm-l) / 2)) !important;
}
/* MAKE TYPOGRAPHY UTILS OR JUST FONT SIZE FOR NOW */
.disclaimer {
font-size: 10px;
}
.ws-nw {
white-space: nowrap;
}
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&display=swap");
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #000 !important;
font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Roboto, Cantarell, "Open Sans",
"Helvetica Neue", sans-serif !important;
}
body .rational-calc p, body .rational-calc h2, body .rational-calc h3, body #footer a, body #footer p{
font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Roboto, Cantarell, "Open Sans",
"Helvetica Neue", sans-serif !important;
}
h1 {
font-size: 28px !important;
}
h2 {
font-size: 20px !important;
border-bottom: 1px solid #565656 !important;
}
h1,
h2 {
color: var(--color-text-main) !important;
}
h3 {
font-size: 16px !important;
color: #a7a7a7 !important;
}
h4 {
font-size: 14px;
color: #565656 !important;
}
*::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background: #565656;
}
*::-moz-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background: #565656;
}
*::-webkit-scrollbar {
height: 12px;
width: 12px;
background-color: #565656;
}
*::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #ffc075;
}
body {
scrollbar-width: thin;
/* scrollbar-color: #565656 #ffc075;*/
scrollbar-color: #ffc075 #565656;
-moz-scrollbar-color: #ffc075 #565656 ;
}
/* Extra x-axis margin on smaller screens */
.container {
max-width: 90vw !important;
}
.product {
float: none;
}
.product:hover {
cursor: pointer;
}
.mask {
height: 99%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.black-mask {
background-color: #101010 !important;
}
/* This is a larger screen style
.nav > li:not(:last-of-type) a {
border-right: 1px solid #fff;
} */
/* ---------------------
Custom Checkbox
-----------------------*/
.selector__wrapper {
display: inline-block;
float: none;
}
.selector {
height: 0;
width: 0;
display: none;
z-index: 9999;
}
.custom-radio {
height: 22px;
width: 22px;
border: 2px solid #565656 !important;
}
.custom-radio::after {
content: " ";
height: 28px;
width: 28px;
z-index: -10;
}
.custom-radio,
.custom-radio::after {
position: absolute;
border-radius: 999px;
}
input:checked + .custom-radio {
border: 4px solid black !important;
}
input:checked + .custom-radio::after {
transform: translate(-7px, -7px);
}
input:checked + .custom-radio,
input:checked + .custom-radio::after {
background-color: var(--color-text-main);
}
/* ---------------------
Custom Slider
-----------------------*/
.slider label {
width: 100%;
display: flex;
justify-content: space-between;
}
.slider label p {
display: inline-block;
}
/* --- Thumb --- */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 30px;
width: 30px;
border-radius: 99px;
background-image: url("/sites/default/files/2021-11/icon-slider.png");
background-color: var(--color-text-main);
background-size: cover;
cursor: pointer;
margin-top: -14px;
position: relative;
top: 2px;
z-index: 10;
}
input[type="range"]::-moz-range-thumb {
height: 30px;
width: 30px;
border-radius: 99px;
background-image: url("/sites/default/files/2021-11/icon-slider.png");
background-color: var(--color-text-main);
background-size: cover;
cursor: pointer;
margin-top: -14px;
position: relative;
top: 2px;
z-index: 10;
}
input[type="range"]::-ms-thumb {
height: 18px;
width: 18px;
border-radius: 99px;
background-image: url("/sites/default/files/2021-11/icon-slider.png");
background-color: var(--color-text-main);
background-size: cover;
cursor: pointer;
margin-top: 0px;
position: relative;
top: 2px;
z-index: 10;
}
/* --- Track --- */
input[type="range"] + .rangebar {
pointer-events: none;
background-image: var(--gradient--LtR);
position: relative;
height: 6px;
max-width: 98%;
margin-top: -10px;
width: 0;
border-radius: 20px;
z-index: 2;
transition: .3s ease width;
}
@supports (-ms-ime-align:auto) {
input[type="range"] + .rangebar {
margin-top: -12px;
}
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
cursor: pointer;
border-radius: 20px;
background-color: #565656 !important;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
background-color: #565656 !important;
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 6px;
cursor: pointer;
background-color: #565656 !important;
border-radius: 20px;
}
input[type="range"]::-ms-track {
width: 100%;
height: 6px;
cursor: pointer;
background-color:#565656 !important;
border-radius: 20px;
}
input[type="range"]::-ms-fill-lower {
background-color: #565656 !important;
}
input[type="range"]:focus::-ms-fill-lower {
background-color: #565656 !important;
}
input[type="range"]::-ms-fill-upper {
background-color: #565656 !important;
}
input[type="range"]:focus::-ms-fill-upper {
background-color: #565656 !important;
}
/* StepRange*/
.stepValue {
display: flex;
}
.stepValue > output {
padding: 0 10px;
}
.stepValue > .stepValueBtn {
color: #ffc075;
font-size: 14px;
cursor: pointer;
}
/* ---------------------
Header
-----------------------*/
.purina-bar {
height: 25px;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
background-color: #ec1a19 !important;
}
header {
background-color: black !important;
}
.navbar,
.navbar-header {
background-color: unset !important;
}
.rational-calc .navbar,
.rational-calc .navbar-header {
background-color: black !important;
}
form {
border-bottom: 1px solid var(--color-text-main);
}
/* ---------------------
Jumbotron
-----------------------*/
.container .jumbotron,
.container-fluid .jumbotron {
border-radius: 0px !important;
}
.jumbotron-bg {
background-color: black !important;
}
.jumbotron {
min-height: 30vh;
display: flex;
align-items: center;
position: relative;
border-bottom: 1px solid rgba(255, 192, 117, 0.5);
overflow: hidden;
background-color: transparent !important;
}
.jumbotron__content-container {
max-width: 235px;
}
.jumbotron__content-container p {
display: inline-block;
font-size: 16px !important;
color: #a7a7a7 !important;
}
.wrap-responsive {
white-space: nowrap;
/* font-weight: 400; */
}
.jumbotron > div:first-of-type {
height: 0px;
padding: 40%;
position: absolute;
right: 25%;
bottom: 0;
}
.jumbotron-bg-mask {
background-color: #101010;
}
.jumbotron-animal-mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background-image: url("/sites/default/files/2021-11/rational-calculator_description_dog_and_cat.png");
background-position: bottom;
background-repeat: no-repeat;
background-size: 95%;
}
/* ---------------------
Product Selector
-----------------------*/
/* --- Species Selector --- */
/* -- Search -- */
form > div {
display: flex;
flex-direction: column;
}
.search__container {
display: block;
margin: 0 auto;
position: relative;
}
.searchbar {
width: 100% !important;
display: inline-block !important;
border: 1px solid #fff !important;
border-radius: 20px !important;
background-color: transparent !important;
}
.search__container .searchbar::placeholder {color:#fff !important;}
.pd-sm-bot-plus-half{color:#fff !important;}
.search__container .form-control{color: #fff;}
.search__container img {
position: absolute;
right: 30px;
height: 22.5px;
transform: translateY(45%);
top: 0px;
}
/* -- Search Ends -- */
.species-selector {
margin-bottom: 0px;
display: flex;
justify-content: space-evenly;
}
.species-selector .selector__wrapper {
height: 0px;
padding: 15%;
overflow: hidden;
}
.species-selector .mask {
border-radius: 5px;
}
.species-selector .black-mask {
z-index: -10;
}
.species-selector .selector__wrapper label {
width: 100%;
height: 100%;
position: relative;
z-index: 99;
border-radius: 5px;
}
.species-selector .selector__wrapper .animal-mask {
background-size: 99.9%;
background-repeat: no-repeat;
}
.species-selector .selector__wrapper:first-of-type .animal-mask {
background-image: url("/sites/default/files/2021-11/australian-shepperd_adult_1215_adobergb_hires.png");
background-position-y: 20%;
}
.species-selector .selector__wrapper:last-of-type .animal-mask {
transform: scaleX(-1);
background-image: url("/sites/default/files/2021-11/egyptian-mau_adult_7673_adobergb_hires.png");
background-position: top;
background-position-x: -15px;
}
.species-selector .selector + .custom-radio {
top: 15px;
left: 12.5px;
}
.species-selector .selector .selector:checked + .custom-radio::after {
top: 0;
left: 0;
}
.species-selector .selector ~ label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.species-selector .selector:checked ~ label {
border: 1px solid var(--color-text-main);
}
/* --- Product Showcase --- */
#product-showcase {
overflow-x: scroll;
position: relative;
width: 100%;
}
.btn-round {
height: 50px;
width: 50px;
position: absolute;
top: 50%;
z-index: 99999;
background-size: cover;
border-radius: 99px;
transform: translateY(-50%);
}
.showcase-left {
left: calc(var(--bm-m) * -1);
background-image: url("/sites/default/files/2021-11/icon_left-chevron.png");
}
.showcase-right {
right: calc(var(--bm-m) * -1);
background-image: url("/sites/default/files/2021-11/icon_right-chevron.png");
}
.product-showcase__wrapper {
white-space: nowrap;
position: relative;
scroll-snap-type: x mandatory;
}
.div1 {
position: relative;
}
.product {
width: 45%;
display: inline-flex;
flex-direction: column;
scroll-snap-align: start;
}
.product:not(:first-child) {
margin-left: 5%;
}
.glow-mask {
margin-top: var(--bm-l);
margin-bottom: var(--bm-l);
}
.glow-mask.glow + div p {
font-weight: bold;
width: 105%;
}
.glow {
position: relative;
background: url("/sites/default/files/2021-11/glow-bg.png") no-repeat center center scroll transparent;
opacity: 1 !important;
}
.glow:before,
.glow:after {
content: "";
display: block;
position: absolute;
top: 75%;
left: 75%;
}
.glow:before {
z-index: 4;
width: 32px;
height: 32px;
border-radius: 999px;
background-color: #fff !important;
}
.glow:after {
z-index: 5;
width: 6px;
height: 12px;
top: calc(75% + 10px);
left: calc(75% + 13px);
transform: rotate(45deg);
border-right: 2px solid var(--color-text-main);
border-bottom: 2px solid var(--color-text-main);
}
.glow > img {
/* -webkit-filter: drop-shadow(0px 0px 30px rgba(255, 169, 65, 0.65));
filter: drop-shadow(0px 0px 30px rgba(255, 169, 65, 0.65)); */
}
.product-info p {
display: block;
margin: 0 auto;
white-space: normal;
font-size: 12px;
color: #ffc075 !important;
text-align: center;
font-weight: 300;
}
/* --- Pet Profile --- */
.pet-profile .form-group {
border-bottom: 1px solid #565656 !important;
}
@supports (-ms-ime-align:auto) {
.pet-profile .form-group.sliders {
border-bottom: none !important;
}
section.group-profile-section{
margin-bottom: 300px;
}
}
.pet-profile .form-group.sliders {
display: flow-root;
}
.pet-profile .form-group.sliders .form-group:last-of-type {
border: none;
}
.radio-row {
display: flex;
justify-content: space-between;
}
.radio-row .input__wrapper {
position: relative;
display: inline-flex;
align-items: center;
margin-right: 25px;
}
.radio-row .custom-radio {
position: absolute;
cursor: pointer;
}
.radio-row label {
margin-bottom: 0px;
position: relative;
cursor: pointer;
z-index: 99;
}
.radio-row input:checked ~ label {
font-weight: bold;
color: #fff !important;
}
.size-selector,
.lifestyle-selectors {
display: none;
}
.calculate {
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 2px;
background-image: var(--gradient--RtL);
color: white;
letter-spacing: 0.9px;
}
.view-demo {
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 2px;
background-image: var(--gradient--RtL);
color: white;
letter-spacing: 0.9px;
}
.disclaimer {
max-width: 480px;
margin: 0 auto;
/* padding-bottom: var(--bm-m); */
margin-bottom: var(--bm-m);
color: var(--color-text-subtitle);
text-align: center;
font-size: 10px;
}
/* Added late, TODO: Incorporate into file */
.purina-logo-horizontal {
width: 12.5%;
min-width: 240px;
}
.logo__wrapper {
width: 15%;
min-width: 150px;
margin-bottom: -20px;
padding: 10px 20px 20px 20px;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 99;
background-color: #000;
}
.logo__wrapper img {
object-fit: contain;
}
#footer {
padding-bottom: var(--bm-m);
}
.footer__wrapper {
width: 100%;
padding-bottom: var(--bm-l);
margin-bottom: var(--bm-l);
}
.footer__wrapper .purina-logo {
margin-bottom: var(--bm-m);
}
.footer__wrapper .left ul,
.footer__wrapper .left li {
display: inline-block;
}
.footer__wrapper .left li {
color: #fff;
}
.footer__wrapper .right {
display: flex;
color: #fff;
}
.footer__wrapper .right p {
align-self: flex-end;
}
/* --- POPUP --- */
.popup {
min-height: 300px;
width: 525px;
display: none;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
transform: translate(-50%, -50%);
background-image: url("/sites/default/files/2021-11/popup_bg2.jpg");
background-size: cover;
border:1px solid #ffc075;
border-radius: 3px;
}
.popup .popup-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
background: var(--gradient--LtR);
z-index: 99;
cursor: pointer;
color: #fff;
font-size: 28px;
font-weight: bold;
line-height: 60px;
text-align: center;
border-radius: 0 0 0 25px;
}
.popup .popup-titlebar {
text-align: center;
margin: var(--bm-l) 0;
}
.popup .popup-title h3 {
display: inline-block;
padding: var(--bm-m) 0;
color: var(--color-text-main) !important;
font-size: 16px;
text-transform: uppercase;
position: relative;
}
.popup .popup-title h3:before,
.popup .popup-title h3:after {
content: "";
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 2px;
background: var(--gradient--Center);
}
.popup .popup-title h3:before {
top: 0;
}
.popup .popup-title h3:after {
bottom: 0;
}
.popup .popup-content {
display: flex;
justify-content: space-between;
margin-bottom: var(--bm-l);
}
.popup .popup-content .popup-text {
max-width: 50%;
}
.popup .popup-content .popup-text .popup-ration strong {
font-size: 42px;
line-height: 1;
color: var(--color-text-main);
}
.popup .popup-content .popup-text .popup-ration div,
.popup .popup-content .popup-text p.popup-ration {
font-size: 26px;
font-weight: bold;
color: #565656 !important;
}
.popup .popup-content .popup-text .popup-recommendation {
font-size: 14px;
line-height: 1.25;
color: #fff !important;
margin-top: var(--bm-l);
}
.popup .popup-content .popup-image {
margin-left: var(--bm-sm);
position: relative;
background-image: url("/sites/default/files/2021-11/rational_calculator_ellipse-01.png");
background-position: center;
background-size: cover;
}
.popup .popup-content .popup-image img {
margin-right: auto;
margin-left: auto;
max-height: 256px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0);
z-index: 9999;
display:none;
}
.popup span.error-message-popup {
font-weight: 200;
color: #ffc075;
position: absolute;
text-align: center;
height: 100%;
transform: translateY(170%);
width: 90%;
margin-left: -5%;
}
.popup span.error-message-popup.error_margin {
top: -30px;
}
.popup-important,
.popup-kitten{
margin-bottom: var(--bm-l);
}
.group-hidden{
display: none;
}
.group-visibility{
display: block;
}
@media (min-width: 1200px){
.weight__management .hidden_nothing{
visibility: hidden !important;
display: none !important;
}
}
@media only screen and (min-width: 1024px){
.paragraph--type--c-text, .dark-bg.paragraph--type--c-text{
padding: 0px 0 !important;
}
}
.header-background-transparent{
display: none !important;
}
/* footer */
footer{
background: url(/sites/default/files/2021-11/purina-footer-bg_0.png) repeat !important;
position: relative !important;
margin-top: 50px !important;
padding-top: 32px !important;
}
footer > div.container{
border-bottom: 1px solid #65615D;
}
.footer-copy {
background-color: transparent !important;
padding: 1.75rem;
}
footer:before {
position: absolute;
content: "";
width: 100%;
height: 16px;
background-color: rgba(0,0,0,0.2);
top: 0;
}
.footer-info ul a,
.footer-info p {
color: #ffffff;
}
.footer-info ul a {
font-size: 14px;
font-weight: 400;
line-height: 30px;
}
.footer-copy p{
font-weight: 400;
color: #4A4542;
}
.footer-copy p a{
color: #4A4542;
}
.footer-info ul a:hover{
color: #FFFFFF;
text-decoration-line: underline;
}
#navbarCF a.nav-link{
font-size: 12px !important;
font-weight: 700 !important;
color: #ed1c24 !important;
}
nav.navbar{
/*margin-top: 20px !important;*/
border-top: 1px solid #ed1c24 !important;
}
.img-fluid{
width: 35% !important;
top: 20% !important;
left: 0% !important;
}
.img-responsive{
width: 35% !important;
}
.weight__management{
padding-left: var(--bm-m);
margin-bottom: var(--bm-m);
width: 54.7%;
}
.popup-text-important,
.popup-text-kitten{
color: #7b7b7b;
}
.info-kitten-popup{
margin-bottom: 20px !important;
}
.footer-info{
margin-bottom: 3% !important;
}
.footer-info > div:nth-child(3) p{
display: none !important;
}
.footer-info > div:nth-child(3) ul{
text-align: right !important;
}
.footer-info > div:nth-child(3) ul a{
font-size: 18px;
}
/*footer*/
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
footer#footer .container {
position: relative;
}
.container {
max-width: 90vw !important;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
footer#footer .footer__firstline {
margin-bottom: 20px;
padding-bottom: 50px;
border-bottom: 1px solid #65615D;
}
footer#footer .footer__secondline {
margin-bottom: 20px;
}
footer#footer .footer__logo-container {
text-align: left;
}
footer#footer .footer__logo-container {
text-align: center;
padding-bottom: 30px;
}
footer#footer .footer__firstline .footer__firstline--right ul {
text-align: right;
}
footer#footer .footer__secondline .footer__secondline--right {
text-align: right;
}
footer#footer .footer__secondline .footer__secondline--right {
font-size: 12px;
text-align: center;
padding-top: 10px;
}
footer#footer .footer__secondline .footer__secondline--right ul li:first-child {
border-left: 0;
}
footer#footer .footer__secondline .footer__secondline--right ul li {
border-left: solid 1px #65615D;
margin: 0 0 0 7px;
padding: 0px 0px !important;
}
footer#footer .footer__secondline ul li {
display: inline-block;
}
footer#footer ul li {
list-style: none;
}
li {
font-family: "Antenna","Trebuchet MS",sans-serif;
font-display: fallback;
font-size: 1.4rem;
font-size: 14px;
}
footer#footer .footer__secondline .footer__secondline--right ul li a {
color: #4A4542;
padding: 0 10px;
font-weight: 400 !important;
}
@media screen and (min-width: 768px) {
footer#footer .footer__secondline .footer__secondline--right {
text-align: right;
}
footer#footer .footer__logo-container {
text-align: left;
}
}
footer#footer .footer__secondline .footer-copyright-logo {
padding: 5px;
display: inline-block;
}
footer#footer .footer__secondline .footer-copyright-text {
padding: 5px;
vertical-align: middle;
color: #000;
display: inline-block;
font-size: 10px;
}
footer#footer .footer__firstline .footer__firstline--right ul li {
display: inline-block;
margin: 0 2%;
}
footer#footer .footer__firstline .footer__firstline--right ul li {
margin: 0 4% !important;
}
footer#footer .footer__firstline .footer__firstline--right ul li a {
color: #ffffff !important;
font-weight: 100;
line-height: 30px;
}
footer#footer .footer__firstline .footer__firstline--right ul li a {
font-weight: 400 !important;
}
footer.custom-sticky-footer,
footer[role="contentinfo"],
div.dialog-off-canvas-main-canvas > footer{
display: none !important;
}
#block-country-farms-mainnavigation{
display: none !important;
}
#more{
display: none;
}
.arrow {
border: solid #ffc075;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
button#read-more {
background: transparent;
color: #a7a7a7;
font-weight: bold;
}
/* Margin fix on div */
.species-selector.form-group.mg-m-top.col-xs-12.col-sm-6.no-pad-x {
margin-top: 35px;
margin-bottom: -35px;
}
/* Fixes final drupal 9, vetcenter stage */
#page,
#main-wrapper {
background: black !important;
}
.main-content .section {
padding: 0 !important;
margin-top: -30px;
}
.site-footer {
display: none;
}
.layout-main {
margin-top: 20px;
margin-bottom: 0px;
}
.block .content {
margin-top: 0px !important;
}
@media (min-width: 851px) {
.layout-container {
max-width: 100% !important;
}
}
.layout-container {
max-width: 100% !important;
}
@media (max-width: 990px){
.popup span.error-message-popup{
margin-left: 0%;
}
}
DAILY PORTION CALCULATORTry this easy-to-use tool to get a precise recommendation on the amount of food you should give to your pet.. So, when you input the information on your pet into this calculator, we will be able to give you a much more accurate recommendation. So, don't be surprised if the result you get does not match the pack exactly, the result from the calculator is better tailored for your pet
Read More HOW IT WORKS?
