  .ovulation-calculator, .due-date-calculator, .eye-colour-predictor, .height-predictor {color: #666; margin: 30px 0; clear: both}
.mini.ovulation-calculator, .mini.due-date-calculator, .mini.eye-colour-predictor, .mini.height-predictor {margin: 10px 0 0 0}
.ovulation-calculator .calculator-title, .due-date-calculator .calculator-title, .eye-colour-predictor .calculator-title, .height-predictor .calculator-title {border-radius: 10px 10px 0 0; font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; color: #fff !important; font-size: 30px; display: block; padding: 28px 30px 30px 150px; position: relative; margin: 0; line-height: 1em; text-decoration: none !important; outline: none}
.ovulation-calculator .calculator-title:hover, .due-date-calculator .calculator-title:hover, .eye-colour-predictor .calculator-title:hover, .height-predictor .calculator-title:hover {text-decoration: none !important}
.ovulation-calculator .calculator-title strong, .due-date-calculator .calculator-title strong, .eye-colour-predictor .calculator-title strong, .height-predictor .calculator-title strong {font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; color: #fff !important}
.ovulation-calculator .calculator-title .calculator-title-icon-container, .due-date-calculator .calculator-title .calculator-title-icon-container, .eye-colour-predictor .calculator-title .calculator-title-icon-container, .height-predictor .calculator-title .calculator-title-icon-container {border-radius: 50%; width: 108px; height: 108px; background: #fff; border: 14px solid #000; position: absolute; top: -10px; left: 20px; text-align: center}
.ovulation-calculator .calculator-title .calculator-title-icon-container:before, .due-date-calculator .calculator-title .calculator-title-icon-container:before, .eye-colour-predictor .calculator-title .calculator-title-icon-container:before, .height-predictor .calculator-title .calculator-title-icon-container:before {border-radius: 50%; content: ''; position: absolute; width: 88px; height: 88px; border: #fff 1px dashed; top: -4px; left: -4px}
.ovulation-calculator .calculator-title .calculator-title-icon-container i, .due-date-calculator .calculator-title .calculator-title-icon-container i, .eye-colour-predictor .calculator-title .calculator-title-icon-container i, .height-predictor .calculator-title .calculator-title-icon-container i {line-height: 78px; vertical-align: middle; color: #000; font-size: 32px}
.ovulation-calculator .calculator-body, .due-date-calculator .calculator-body, .eye-colour-predictor .calculator-body, .height-predictor .calculator-body {border-radius: 0 0 10px 10px; padding: 30px 20px 45px}
.ovulation-calculator .calculator-body .description, .due-date-calculator .calculator-body .description, .eye-colour-predictor .calculator-body .description, .height-predictor .calculator-body .description {text-align: center; margin-bottom: 25px}
.ovulation-calculator .calculator-body .form-container, .due-date-calculator .calculator-body .form-container, .eye-colour-predictor .calculator-body .form-container, .height-predictor .calculator-body .form-container {border-radius: 8px; padding: 20px 0 8px 0; text-align: center}
.ovulation-calculator .calculator-body .form-container form, .due-date-calculator .calculator-body .form-container form, .eye-colour-predictor .calculator-body .form-container form, .height-predictor .calculator-body .form-container form {margin: 0}
.ovulation-calculator .calculator-body .form-container label, .due-date-calculator .calculator-body .form-container label, .eye-colour-predictor .calculator-body .form-container label, .height-predictor .calculator-body .form-container label, .ovulation-calculator .calculator-body .form-container .p-label, .due-date-calculator .calculator-body .form-container .p-label, .eye-colour-predictor .calculator-body .form-container .p-label, .height-predictor .calculator-body .form-container .p-label {margin-bottom: 8px; font-weight: bold; display: block}
.ovulation-calculator .calculator-body .form-container .form-group, .due-date-calculator .calculator-body .form-container .form-group, .eye-colour-predictor .calculator-body .form-container .form-group, .height-predictor .calculator-body .form-container .form-group {margin: 0 5px 15px; display: inline-block}
.ovulation-calculator .calculator-body .form-container .calculate-button, .due-date-calculator .calculator-body .form-container .calculate-button, .eye-colour-predictor .calculator-body .form-container .calculate-button, .height-predictor .calculator-body .form-container .calculate-button {margin: 8px auto -23px; color: #fff; background: #000; display: block}
.ovulation-calculator .calculator-body .calculate-button, .due-date-calculator .calculator-body .calculate-button, .eye-colour-predictor .calculator-body .calculate-button, .height-predictor .calculator-body .calculate-button {font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 18px; line-height: 1; padding: 8px 20px 11px; border: none; border-radius: 18px; text-align: center; vertical-align: middle; cursor: pointer; white-space: nowrap; -webkit-appearance: button; -webkit-font-smoothing: auto}
@media screen and (max-width: 767px) {.nano.ovulation-calculator .calculator-title .calculator-title-icon-container, .nano.due-date-calculator .calculator-title .calculator-title-icon-container, .nano.eye-colour-predictor .calculator-title .calculator-title-icon-container, .nano.height-predictor .calculator-title .calculator-title-icon-container {left: 50%; margin-left: -54px}
}
.ovulation-calculator {max-width: 750px; margin-left: auto; margin-right: auto}
.ovulation-calculator .calculator-title {background-color: #9194ff}
.ovulation-calculator .calculator-title .calculator-title-icon-container {border-color: #9194ff}
.ovulation-calculator .calculator-title .calculator-title-icon-container i.ovulation-calculator-icon {width: 36px; height: 36px; display: inline-block; margin-top: 20px; background-image: url("/images/calculators/ovulation-calculator/icon.svg")}
.ovulation-calculator .calculator-body {background-color: #f2f2ff}
.ovulation-calculator .calculator-body .form-container {background-color: #e8e8ff}
.ovulation-calculator .calculator-body .form-container .form-group.luteal-phase-form-group {margin-right: 16px}
.ovulation-calculator .calculator-body .form-container .calculate-button {background-color: #9194ff; color: #fff; outline: none}
.ovulation-calculator .calculator-body .form-container .calculate-button:hover, .ovulation-calculator .calculator-body .form-container .calculate-button:focus {background-color: #c4c6ff}
.ovulation-calculator .calendar {margin-top: 40px; border-radius: 8px 8px 0 0}
.ovulation-calculator .calendar .title {background-color: #fff; border-radius: 8px 8px 0 0; border: 1px solid #dbdcff; border-bottom: 0; color: #333 !important; font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 24px; position: relative; text-align: center; margin: 0; padding: 12px 0}
.ovulation-calculator .calendar .title strong {font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; font-style: normal}
.ovulation-calculator .calendar .title button {position: absolute; top: 0; color: #8387fe !important; background: none; border: 0; font-size: 18px; width: 40px; height: 100%; text-align: center; outline: none}
.ovulation-calculator .calendar .title button.prev {left: 0}
.ovulation-calculator .calendar .title button.next {right: 0}
.ovulation-calculator .calendar table {background-color: #fff; width: 100%; padding: 0; margin: 0; border: 0; border-spacing: 0; border-collapse: collapse; table-layout: fixed}
.ovulation-calculator .calendar table tr {padding: 0; margin: 0; border: 0}
.ovulation-calculator .calendar table th {height: 30px; padding: 0; margin: 0; border: 1px solid #dbdcff; background-color: #f7f7ff; text-align: center; font-size: 10px; font-weight: normal; text-transform: uppercase; vertical-align: middle}
.ovulation-calculator .calendar table td {height: 50px; padding: 0; margin: 0; border: 1px solid #dbdcff; vertical-align: middle; text-align: center; position: relative; color: #fff; font-size: 18px}
.ovulation-calculator .calendar table td.prev:before, .ovulation-calculator .calendar table td.next:before {color: #d1d1d1}
.ovulation-calculator .calendar table td.fertile1, .ovulation-calculator .calendar table td.fertile2, .ovulation-calculator .calendar table td.fertile3, .ovulation-calculator .calendar table td.fertile4, .ovulation-calculator .calendar table td.fertile5 {background-color: #fff7fc}
.ovulation-calculator .calendar table td.fertile6, .ovulation-calculator .calendar table td.fertile7 {background-color: #f7f7f7}
.ovulation-calculator .calendar table td.menstruation, .ovulation-calculator .calendar table td.test {background-color: #f7f7ff}
.ovulation-calculator .calendar table td:before {display: block; position: absolute; top: 4px; left: 4px; color: #666; font-size: 10px; font-weight: normal}
.ovulation-calculator .calendar table td.d1.jan:before {content: "1 Jan"}
.ovulation-calculator .calendar table td.d1.feb:before {content: "1 Feb"}
.ovulation-calculator .calendar table td.d1.mar:before {content: "1 Mar"}
.ovulation-calculator .calendar table td.d1.apr:before {content: "1 Apr"}
.ovulation-calculator .calendar table td.d1.may:before {content: "1 May"}
.ovulation-calculator .calendar table td.d1.jun:before {content: "1 Jun"}
.ovulation-calculator .calendar table td.d1.jul:before {content: "1 Jul"}
.ovulation-calculator .calendar table td.d1.aug:before {content: "1 Aug"}
.ovulation-calculator .calendar table td.d1.sep:before {content: "1 Sep"}
.ovulation-calculator .calendar table td.d1.oct:before {content: "1 Oct"}
.ovulation-calculator .calendar table td.d1.nov:before {content: "1 Nov"}
.ovulation-calculator .calendar table td.d1.dec:before {content: "1 Dec"}
.ovulation-calculator .calendar table td.d2:before {content: "2"}
.ovulation-calculator .calendar table td.d3:before {content: "3"}
.ovulation-calculator .calendar table td.d4:before {content: "4"}
.ovulation-calculator .calendar table td.d5:before {content: "5"}
.ovulation-calculator .calendar table td.d6:before {content: "6"}
.ovulation-calculator .calendar table td.d7:before {content: "7"}
.ovulation-calculator .calendar table td.d8:before {content: "8"}
.ovulation-calculator .calendar table td.d9:before {content: "9"}
.ovulation-calculator .calendar table td.d10:before {content: "10"}
.ovulation-calculator .calendar table td.d11:before {content: "11"}
.ovulation-calculator .calendar table td.d12:before {content: "12"}
.ovulation-calculator .calendar table td.d13:before {content: "13"}
.ovulation-calculator .calendar table td.d14:before {content: "14"}
.ovulation-calculator .calendar table td.d15:before {content: "15"}
.ovulation-calculator .calendar table td.d16:before {content: "16"}
.ovulation-calculator .calendar table td.d17:before {content: "17"}
.ovulation-calculator .calendar table td.d18:before {content: "18"}
.ovulation-calculator .calendar table td.d19:before {content: "19"}
.ovulation-calculator .calendar table td.d20:before {content: "20"}
.ovulation-calculator .calendar table td.d21:before {content: "21"}
.ovulation-calculator .calendar table td.d22:before {content: "22"}
.ovulation-calculator .calendar table td.d23:before {content: "23"}
.ovulation-calculator .calendar table td.d24:before {content: "24"}
.ovulation-calculator .calendar table td.d25:before {content: "25"}
.ovulation-calculator .calendar table td.d26:before {content: "26"}
.ovulation-calculator .calendar table td.d27:before {content: "27"}
.ovulation-calculator .calendar table td.d28:before {content: "28"}
.ovulation-calculator .calendar table td.d29:before {content: "29"}
.ovulation-calculator .calendar table td.d30:before {content: "30"}
.ovulation-calculator .calendar table td.d31:before {content: "31"}
.ovulation-calculator .calendar i.fa-heart {color: #f9acda; position: relative}
.ovulation-calculator .calendar i.fa-heart:after {content: "\f004"; color: black; position: absolute; top: 0; left: 0; color: #ec008c}
.ovulation-calculator .calendar i.fa-heart.percent25:after {clip: rect(12px, 18px, 18px, 0)}
.ovulation-calculator .calendar i.fa-heart.percent50:after {clip: rect(9px, 18px, 18px, 0)}
.ovulation-calculator .calendar i.fa-heart.percent75:after {clip: rect(6px, 18px, 18px, 0)}
.ovulation-calculator .calendar i.fa-tint {color: #7878ff}
.ovulation-calculator .calendar i.fa-long-arrow-right {color: #aaa; transform: rotate(35deg)}
.ovulation-calculator .calendar i.fa-thumbs-up {color: #aaa}
.ovulation-calculator .calendar i.fa-magic {color: #7878ff}
.ovulation-calculator .calendar i.fa-calendar {color: #7878ff}
.ovulation-calculator .calendar i.fa-child {color: #7878ff}
.ovulation-calculator .calendar i + i {margin-left: 3px}
.ovulation-calculator .calendar .details {background-color: #f7f7ff; border-radius: 0 0 8px 8px; margin-bottom: -25px}
.ovulation-calculator .calendar .details .item {position: relative; color: #999; padding: 10px 0; overflow: hidden}
.ovulation-calculator .calendar .details .item + .item:before {content: ''; display: block; background: #dddeff; height: 1px; width: 100%; position: absolute; top: 0; margin-left: 40px}
.ovulation-calculator .calendar .details .icon {position: absolute; left: 10px; top: 10px; width: 20px; text-align: center; font-size: 18px}
.ovulation-calculator .calendar .details .date {color: #333; position: absolute; left: 40px; top: 10px}
.ovulation-calculator .calendar .details .desc {margin-left: 80px}
.ovulation-calculator .calendar .details .desc strong {color: #5f64fe !important}
.ovulation-calculator .calendar .details .more {margin-left: 80px; text-decoration: none !important; color: #5f64fe !important}
.ovulation-calculator .calendar .details .more:hover {text-decoration: underline !important}
.ovulation-calculator .custom-select-container select {width: auto; height: auto}
.due-date-calculator {max-width: 608px; margin-left: auto; margin-right: auto}
.due-date-calculator .calculator-title {background-color: #62cefc}
.due-date-calculator .calculator-title .calculator-title-icon-container {border-color: #62cefc}
.due-date-calculator .calculator-title .calculator-title-icon-container i {color: #62cefc}
.due-date-calculator .calculator-body {background-color: #daf3fe}
.due-date-calculator .calculator-body .form-container {background-color: #cbeffe}
.due-date-calculator .calculator-body .form-container .form-group.luteal-phase-form-group {margin-right: 16px}
.due-date-calculator .calculator-body .form-container .calculate-button {background-color: #62cefc; color: #fff; outline: none}
.due-date-calculator .calculator-body .form-container .calculate-button:hover, .due-date-calculator .calculator-body .form-container .calculate-button:focus {background-color: #94defd}
.due-date-calculator .results {position: relative; background-color: #fffdec; width: 100%; margin-top: 30px; color: #666; padding: 20px; line-height: 1.428571429; text-align: center; border: 1px solid #e6e4d5; border-radius: 6px}
.due-date-calculator .results .heading {font-family: 'Huggies Omnes Semibold', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 600; font-size: 30px; padding-bottom: 6px}
.due-date-calculator .results .calendar {position: relative; margin: 10px auto 15px; width: 120px; height: 120px; overflow: hidden; background-color: #fff; border: 1px solid #e6e4d5; border-radius: 8px}
.due-date-calculator .results .calendar:before {content: 'Due date'; background-color: #e62e49; font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; font-size: 20px; color: #fff; display: block; line-height: 34px; text-align: center}
.due-date-calculator .results .calendar strong {font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; color: #666 !important; display: block; text-align: center; font-size: 55px; line-height: 53px}
.due-date-calculator .results .calendar span {font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; color: #666; display: block; text-align: center; font-size: 20px}
.due-date-calculator .results .event {font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 21px; position: relative}
.due-date-calculator .results .event.due {font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500}
.due-date-calculator .results .event span {position: relative; left: 0; display: block; margin-bottom: 15px}
.due-date-calculator .results .event div {display: none}
.due-date-calculator .results .disclaimer {color: #bcbbb1; font-size: 12px; text-align: center; padding-top: 20px; opacity: .6}
.due-date-calculator .calculator-join {background: #f2f2e6; border-radius: 0 0 10px 10px; margin-top: -10px}
.due-date-calculator .calculator-join .congratulations {background: #f8f9fb; padding: 30px 35px; color: #666 !important}
.due-date-calculator .calculator-join .congratulations h3 {color: #ec008c !important; border: 0 !important; margin: 0 !important}
.due-date-calculator .calculator-join .congratulations p {margin: 15px 0 15px 0 !important; font-size: 14px}
.due-date-calculator .calculator-join .congratulations strong {color: #666 !important}
.due-date-calculator .calculator-join .guest {margin: 30px 30px 10px; padding-bottom: 15px}
.due-date-calculator .calculator-join .guest .row {margin-top: 15px; margin-bottom: 15px}
.due-date-calculator .calculator-join .join-now-form-container > h2 {display: none}
.due-date-calculator .calculator-join .join-now-form-container a {color: #4cb940}
.due-date-calculator .calculator-join .join-now-form-container a:hover {color: #4cb940}
.due-date-calculator .calculator-join .about-yourself-container, .due-date-calculator .calculator-join .dob-container, .due-date-calculator .calculator-join .bad-response-container, .due-date-calculator .calculator-join .bad-signin-response-container {-webkit-transition: all 0.6s; transition: all 0.6s}
.due-date-calculator .calculator-join .about-yourself-container.slide-out, .due-date-calculator .calculator-join .dob-container.slide-out, .due-date-calculator .calculator-join .bad-response-container.slide-out, .due-date-calculator .calculator-join .bad-signin-response-container.slide-out {opacity: 0; height: 0; overflow: hidden; -ms-transform: translate3D(0, 10px, 0); -webkit-transform: translate3D(0, 10px, 0); transform: translate3D(0, 10px, 0)}
.due-date-calculator .calculator-join .form-control {display: block; width: 100%; font-size: 15px; line-height: 1.428571429; color: #555555; background-color: #fff; background-image: none}
.due-date-calculator .calculator-join input[type="text"], .due-date-calculator .calculator-join input[type="email"] {border: none; border-radius: 9px; height: 40px; padding: 9px 14px; box-shadow: none; border: none; margin-bottom: 15px}
.due-date-calculator .calculator-join .join-btn {display: block; margin: 15px 0 10px; color: #fff; font-size: 18px; border-radius: 22px; border: none; padding: 12px 30px 15px}
.due-date-calculator .calculator-join .conditions-container a {color: #e62e49 !important; font-weight: bold; text-decoration: none !important}
.due-date-calculator .custom-select-container, .due-date-calculator .l-join-form .custom-select-container {width: auto; height: auto; max-width: 100%}
.due-date-calculator .custom-select-container select, .due-date-calculator .l-join-form .custom-select-container select {width: auto; height: auto; margin-bottom: 0}
.due-date-calculator .l-join-form .thank-you {text-align: left; margin: 0 30px}
.due-date-calculator .l-join-form .thank-you p {font-size: 14px}
.due-date-calculator .l-join-form .about-yourself p, .due-date-calculator .l-join-form .bad-response p {margin: 8px 0}
.due-date-calculator .model .modal-header .close {text-decoration: none}
.due-date-calculator .model .modal-header h2 {font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; color: #4d4d4d; font-size: 32px; line-height: 32px; margin: 0}
.due-date-calculator .model .modal-body a {color: #4cb940; font-weight: bold}
@media (min-width: 450px) {.due-date-calculator .calculator-join .congratulations {background: #f8f9fb url("/images/calculators/due-date-calculator/congratulations-banner.jpg") 100% 50% no-repeat; background-size: contain}
.due-date-calculator .calculator-join .congratulations p {margin: 15px 45% 15px 0 !important}
}
@media (min-width: 992px) {.due-date-calculator .results {text-align: left}
.due-date-calculator .results .calendar {position: absolute; top: 30px; right: 20px; width: 150px; height: 150px; margin: 0}
.due-date-calculator .results .calendar strong {font-size: 80px; line-height: 1}
.due-date-calculator .results .event span {position: absolute; top: 0; left: 210px}
.due-date-calculator .results .event div {margin-bottom: 3px}
}
.eye-colour-predictor {max-width: 750px; margin-left: auto; margin-right: auto}
.eye-colour-predictor .calculator-title {background-color: #f039a6; padding: 28px 30px 30px 85px}
.eye-colour-predictor .calculator-title .calculator-title-icon-container-small {display: inline-block; text-align: left; font-size: 45px; line-height: 85px; position: absolute; top: 0; left: 25px}
.eye-colour-predictor .calculator-body {background: #fde5f3; padding: 30px 20px 35px}
.eye-colour-predictor .calculator-body .eye {border: 3px solid transparent; width: 82px; height: 82px; display: inline-block; border-radius: 41px; background-color: white; background-clip: content-box; position: relative}
.eye-colour-predictor .calculator-body .eye:before {content: ''; display: block; height: 62px; width: 62px; position: absolute; top: 7px; left: 7px; background-image: url("/images/calculators/eye-colour-predictor/eyes.png"); background-repeat: no-repeat}
.eye-colour-predictor .calculator-body .eye.blue:before {background-position: 0 0}
.eye-colour-predictor .calculator-body .eye.brown:before {background-position: -62px 0}
.eye-colour-predictor .calculator-body .eye.green:before {background-position: -124px 0}
.eye-colour-predictor .calculator-body .form-container {background-color: #fcdbee; border: 1px dashed #f8a0d4}
.eye-colour-predictor .calculator-body .form-container:before, .eye-colour-predictor .calculator-body .form-container:after {content: " "; display: table}
.eye-colour-predictor .calculator-body .form-container:after {clear: both}
.eye-colour-predictor .calculator-body .form-container .form-group {width: 100%; float: left; margin: 0; padding-bottom: 20px; text-align: center; position: relative}
.eye-colour-predictor .calculator-body .form-container .form-group + .form-group {margin-top: 20px}
.eye-colour-predictor .calculator-body .form-container .form-group + .form-group:before {content: ''; display: block; position: absolute; background-color: #f8a0d4; width: 80%; height: 1px; top: -20px; left: 10%}
@media (min-width: 768px) {.eye-colour-predictor .calculator-body .form-container .form-group {width: 50%; margin-top: 0}
.eye-colour-predictor .calculator-body .form-container .form-group + .form-group {margin-top: 0}
.eye-colour-predictor .calculator-body .form-container .form-group + .form-group:before {width: 1px; height: 60%; top: 20%; left: 0}
}
.eye-colour-predictor .calculator-body .form-container .parent.blue .eye.blue {border-color: #00aeef; color: #00aeef}
.eye-colour-predictor .calculator-body .form-container .parent.blue .eye.brown, .eye-colour-predictor .calculator-body .form-container .parent.blue .eye.green {opacity: .5}
.eye-colour-predictor .calculator-body .form-container .parent.brown .eye.brown {border-color: #b37a36; color: #b37a36}
.eye-colour-predictor .calculator-body .form-container .parent.brown .eye.blue, .eye-colour-predictor .calculator-body .form-container .parent.brown .eye.green {opacity: .5}
.eye-colour-predictor .calculator-body .form-container .parent.green .eye.green {border-color: #78b336; color: #78b336}
.eye-colour-predictor .calculator-body .form-container .parent.green .eye.blue, .eye-colour-predictor .calculator-body .form-container .parent.green .eye.brown {opacity: .5}
.eye-colour-predictor .calculator-body .form-container .parent .eye {cursor: pointer; margin-bottom: 28px}
.eye-colour-predictor .calculator-body .form-container .parent .eye:after {display: block; width: 100%; text-align: center; position: absolute; bottom: -28px}
.eye-colour-predictor .calculator-body .form-container .parent .eye.blue:after {content: 'Blue'}
.eye-colour-predictor .calculator-body .form-container .parent .eye.brown:after {content: 'Brown'}
.eye-colour-predictor .calculator-body .form-container .parent .eye.green:after {content: 'Green'}
.eye-colour-predictor .calculator-body .form-container .calculate-button {background-color: #ec008c; color: #fff; outline: none; text-shadow: none; box-shadow: none}
.eye-colour-predictor .calculator-body .form-container .calculate-button:hover, .eye-colour-predictor .calculator-body .form-container .calculate-button:focus {background-color: #ff20a4}
.eye-colour-predictor .results {border: 1px solid #fbcbe7; border-radius: 8px; background-color: #fef8fc; margin-top: 28px; padding-bottom: 25px}
.eye-colour-predictor .results.blue-blue .pie .slice.green {-webkit-transform: rotate(86deg); transform: rotate(86deg)}
.eye-colour-predictor .results.blue-blue .pie .slice.green:before {-webkit-transform: rotate(4deg); transform: rotate(4deg)}
.eye-colour-predictor .results.blue-blue .pie .label.green {-webkit-transform: rotate(-182deg); transform: rotate(-182deg)}
.eye-colour-predictor .results.blue-blue .pie .label.green:before {content: "Green 1%"; -webkit-transform: rotate(182deg); transform: rotate(182deg)}
.eye-colour-predictor .results.blue-blue .pie .slice.blue {width: 200px; height: 200px; left: 0; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(90deg); transform: rotate(90deg)}
.eye-colour-predictor .results.blue-blue .pie .slice.blue:before {left: 0}
.eye-colour-predictor .results.blue-blue .pie .slice.blue:after {content: ""; position: absolute; width: 100px; height: 200px; left: 100px; border-radius: 0 100px 100px 0}
.eye-colour-predictor .results.blue-blue .pie .slice.blue:before {-webkit-transform: rotate(356deg); transform: rotate(356deg)}
.eye-colour-predictor .results.blue-blue .pie .label.blue {-webkit-transform: rotate(-2deg); transform: rotate(-2deg)}
.eye-colour-predictor .results.blue-blue .pie .label.blue:before {content: "Blue 99%"; -webkit-transform: rotate(2deg); transform: rotate(2deg)}
.eye-colour-predictor .results.blue-brown .pie .slice.brown, .eye-colour-predictor .results.brown-blue .pie .slice.brown {-webkit-transform: rotate(-90deg); transform: rotate(-90deg)}
.eye-colour-predictor .results.blue-brown .pie .slice.brown:before, .eye-colour-predictor .results.brown-blue .pie .slice.brown:before {-webkit-transform: rotate(180deg); transform: rotate(180deg)}
.eye-colour-predictor .results.blue-brown .pie .label.brown, .eye-colour-predictor .results.brown-blue .pie .label.brown {-webkit-transform: rotate(-270deg); transform: rotate(-270deg)}
.eye-colour-predictor .results.blue-brown .pie .label.brown:before, .eye-colour-predictor .results.brown-blue .pie .label.brown:before {content: "Brown 50%"; -webkit-transform: rotate(270deg); transform: rotate(270deg)}
.eye-colour-predictor .results.blue-brown .pie .slice.blue, .eye-colour-predictor .results.brown-blue .pie .slice.blue {-webkit-transform: rotate(90deg); transform: rotate(90deg)}
.eye-colour-predictor .results.blue-brown .pie .slice.blue:before, .eye-colour-predictor .results.brown-blue .pie .slice.blue:before {-webkit-transform: rotate(180deg); transform: rotate(180deg)}
.eye-colour-predictor .results.blue-brown .pie .label.blue, .eye-colour-predictor .results.brown-blue .pie .label.blue {-webkit-transform: rotate(-90deg); transform: rotate(-90deg)}
.eye-colour-predictor .results.blue-brown .pie .label.blue:before, .eye-colour-predictor .results.brown-blue .pie .label.blue:before {content: "Blue 50%"; -webkit-transform: rotate(90deg); transform: rotate(90deg)}
.eye-colour-predictor .results.blue-green .pie .slice.green, .eye-colour-predictor .results.green-blue .pie .slice.green {-webkit-transform: rotate(90deg); transform: rotate(90deg)}
.eye-colour-predictor .results.blue-green .pie .slice.green:before, .eye-colour-predictor .results.green-blue .pie .slice.green:before {-webkit-transform: rotate(180deg); transform: rotate(180deg)}
.eye-colour-predictor .results.blue-green .pie .label.green, .eye-colour-predictor .results.green-blue .pie .label.green {-webkit-transform: rotate(-90deg); transform: rotate(-90deg)}
.eye-colour-predictor .results.blue-green .pie .label.green:before, .eye-colour-predictor .results.green-blue .pie .label.green:before {content: "Green 50%"; -webkit-transform: rotate(90deg); transform: rotate(90deg)}
.eye-colour-predictor .results.blue-green .pie .slice.blue, .eye-colour-predictor .results.green-blue .pie .slice.blue {-webkit-transform: rotate(270deg); transform: rotate(270deg)}
.eye-colour-predictor .results.blue-green .pie .slice.blue:before, .eye-colour-predictor .results.green-blue .pie .slice.blue:before {-webkit-transform: rotate(180deg); transform: rotate(180deg)}
.eye-colour-predictor .results.blue-green .pie .label.blue, .eye-colour-predictor .results.green-blue .pie .label.blue {-webkit-transform: rotate(90deg); transform: rotate(90deg)}
.eye-colour-predictor .results.blue-green .pie .label.blue:before, .eye-colour-predictor .results.green-blue .pie .label.blue:before {content: "Blue 50%"; -webkit-transform: rotate(-90deg); transform: rotate(-90deg)}
.eye-colour-predictor .results.brown-brown .pie .slice.green {-webkit-transform: rotate(55deg); transform: rotate(55deg)}
.eye-colour-predictor .results.brown-brown .pie .slice.green:before {-webkit-transform: rotate(65deg); transform: rotate(65deg)}
.eye-colour-predictor .results.brown-brown .pie .label.green {-webkit-transform: rotate(-182deg); transform: rotate(-182deg)}
.eye-colour-predictor .results.brown-brown .pie .label.green:before {content: "Green 18%"; -webkit-transform: rotate(182deg); transform: rotate(182deg)}
.eye-colour-predictor .results.brown-brown .pie .slice.brown {width: 200px; height: 200px; left: 0; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(120deg); transform: rotate(120deg)}
.eye-colour-predictor .results.brown-brown .pie .slice.brown:before {left: 0}
.eye-colour-predictor .results.brown-brown .pie .slice.brown:after {content: ""; position: absolute; width: 100px; height: 200px; left: 100px; border-radius: 0 100px 100px 0}
.eye-colour-predictor .results.brown-brown .pie .slice.brown:before {-webkit-transform: rotate(270deg); transform: rotate(270deg)}
.eye-colour-predictor .results.brown-brown .pie .label.brown {-webkit-transform: rotate(-15deg); transform: rotate(-15deg)}
.eye-colour-predictor .results.brown-brown .pie .label.brown:before {content: "Brown 75%"; -webkit-transform: rotate(15deg); transform: rotate(15deg)}
.eye-colour-predictor .results.brown-brown .pie .slice.blue {-webkit-transform: rotate(390deg); transform: rotate(390deg)}
.eye-colour-predictor .results.brown-brown .pie .slice.blue:before {-webkit-transform: rotate(25deg); transform: rotate(25deg)}
.eye-colour-predictor .results.brown-brown .pie .label.blue {-webkit-transform: rotate(133deg); transform: rotate(133deg)}
.eye-colour-predictor .results.brown-brown .pie .label.blue:before {content: "Blue 7%"; -webkit-transform: rotate(-133deg); transform: rotate(-133deg)}
.eye-colour-predictor .results.brown-green .pie .slice.green, .eye-colour-predictor .results.green-brown .pie .slice.green {-webkit-transform: rotate(-47deg); transform: rotate(-47deg)}
.eye-colour-predictor .results.brown-green .pie .slice.green:before, .eye-colour-predictor .results.green-brown .pie .slice.green:before {-webkit-transform: rotate(137deg); transform: rotate(137deg)}
.eye-colour-predictor .results.brown-green .pie .label.green, .eye-colour-predictor .results.green-brown .pie .label.green {-webkit-transform: rotate(-248deg); transform: rotate(-248deg)}
.eye-colour-predictor .results.brown-green .pie .label.green:before, .eye-colour-predictor .results.green-brown .pie .label.green:before {content: "Green 38%"; -webkit-transform: rotate(248deg); transform: rotate(248deg)}
.eye-colour-predictor .results.brown-green .pie .slice.brown, .eye-colour-predictor .results.green-brown .pie .slice.brown {-webkit-transform: rotate(90deg); transform: rotate(90deg)}
.eye-colour-predictor .results.brown-green .pie .slice.brown:before, .eye-colour-predictor .results.green-brown .pie .slice.brown:before {-webkit-transform: rotate(180deg); transform: rotate(180deg)}
.eye-colour-predictor .results.brown-green .pie .label.brown, .eye-colour-predictor .results.green-brown .pie .label.brown {-webkit-transform: rotate(-90deg); transform: rotate(-90deg)}
.eye-colour-predictor .results.brown-green .pie .label.brown:before, .eye-colour-predictor .results.green-brown .pie .label.brown:before {content: "Brown 50%"; -webkit-transform: rotate(90deg); transform: rotate(90deg)}
.eye-colour-predictor .results.brown-green .pie .slice.blue, .eye-colour-predictor .results.green-brown .pie .slice.blue {-webkit-transform: rotate(270deg); transform: rotate(270deg)}
.eye-colour-predictor .results.brown-green .pie .slice.blue:before, .eye-colour-predictor .results.green-brown .pie .slice.blue:before {-webkit-transform: rotate(43deg); transform: rotate(43deg)}
.eye-colour-predictor .results.brown-green .pie .label.blue, .eye-colour-predictor .results.green-brown .pie .label.blue {-webkit-transform: rotate(22deg); transform: rotate(22deg)}
.eye-colour-predictor .results.brown-green .pie .label.blue:before, .eye-colour-predictor .results.green-brown .pie .label.blue:before {content: "Blue 12%"; -webkit-transform: rotate(-22deg); transform: rotate(-22deg)}
.eye-colour-predictor .results.green-green .pie .slice.green {width: 200px; height: 200px; left: 0; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(90deg); transform: rotate(90deg)}
.eye-colour-predictor .results.green-green .pie .slice.green:before {left: 0}
.eye-colour-predictor .results.green-green .pie .slice.green:after {content: ""; position: absolute; width: 100px; height: 200px; left: 100px; border-radius: 0 100px 100px 0}
.eye-colour-predictor .results.green-green .pie .slice.green:before {-webkit-transform: rotate(270deg); transform: rotate(270deg)}
.eye-colour-predictor .results.green-green .pie .label.green {-webkit-transform: rotate(-45deg); transform: rotate(-45deg)}
.eye-colour-predictor .results.green-green .pie .label.green:before {content: "Green 75%"; -webkit-transform: rotate(45deg); transform: rotate(45deg)}
.eye-colour-predictor .results.green-green .pie .slice.blue {-webkit-transform: rotate(360deg); transform: rotate(360deg)}
.eye-colour-predictor .results.green-green .pie .slice.blue:before {-webkit-transform: rotate(90deg); transform: rotate(90deg)}
.eye-colour-predictor .results.green-green .pie .label.blue {-webkit-transform: rotate(135deg); transform: rotate(135deg)}
.eye-colour-predictor .results.green-green .pie .label.blue:before {content: "Blue 25%"; -webkit-transform: rotate(-135deg); transform: rotate(-135deg)}
.eye-colour-predictor .results.blue-blue .overview .eye.brown, .eye-colour-predictor .results.blue-blue .overview .eye.green {display: none}
.eye-colour-predictor .results.blue-blue .overview .colour1:before {content: 'Blue'; color: #00aeef}
.eye-colour-predictor .results.blue-blue .overview .multi {display: none}
.eye-colour-predictor .results.blue-brown .overview .eye.green, .eye-colour-predictor .results.brown-blue .overview .eye.green {display: none}
.eye-colour-predictor .results.blue-brown .overview .colour1:before, .eye-colour-predictor .results.brown-blue .overview .colour1:before {content: 'Blue'; color: #00aeef}
.eye-colour-predictor .results.blue-brown .overview .colour2:before, .eye-colour-predictor .results.brown-blue .overview .colour2:before {content: 'Brown'; color: #b37a36}
.eye-colour-predictor .results.blue-brown .overview .single, .eye-colour-predictor .results.brown-blue .overview .single {display: none}
.eye-colour-predictor .results.blue-green .overview .eye.brown, .eye-colour-predictor .results.green-blue .overview .eye.brown {display: none}
.eye-colour-predictor .results.blue-green .overview .colour1:before, .eye-colour-predictor .results.green-blue .overview .colour1:before {content: 'Blue'; color: #00aeef}
.eye-colour-predictor .results.blue-green .overview .colour2:before, .eye-colour-predictor .results.green-blue .overview .colour2:before {content: 'Green'; color: #78b336}
.eye-colour-predictor .results.blue-green .overview .single, .eye-colour-predictor .results.green-blue .overview .single {display: none}
.eye-colour-predictor .results.brown-brown .overview .eye.blue, .eye-colour-predictor .results.brown-brown .overview .eye.green {display: none}
.eye-colour-predictor .results.brown-brown .overview .colour1:before {content: 'Brown'; color: #b37a36}
.eye-colour-predictor .results.brown-brown .overview .multi {display: none}
.eye-colour-predictor .results.brown-green .overview .eye.blue, .eye-colour-predictor .results.brown-green .overview .eye.green, .eye-colour-predictor .results.green-brown .overview .eye.blue, .eye-colour-predictor .results.green-brown .overview .eye.green {display: none}
.eye-colour-predictor .results.brown-green .overview .colour1:before, .eye-colour-predictor .results.green-brown .overview .colour1:before {content: 'Brown'; color: #b37a36}
.eye-colour-predictor .results.brown-green .overview .multi, .eye-colour-predictor .results.green-brown .overview .multi {display: none}
.eye-colour-predictor .results.green-green .overview .eye.blue, .eye-colour-predictor .results.green-green .overview .eye.brown {display: none}
.eye-colour-predictor .results.green-green .overview .colour1:before {content: 'Green'; color: #78b336}
.eye-colour-predictor .results.green-green .overview .multi {display: none}
.eye-colour-predictor .results .heading {color: #333; text-align: center; margin: 30px 10px; font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 24px; line-height: 26px}
.eye-colour-predictor .results .heading strong {color: #333 !important; font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; font-style: normal}
.eye-colour-predictor .results .cols {display: block}
.eye-colour-predictor .results .graph, .eye-colour-predictor .results .words {display: block; vertical-align: middle; text-align: center}
.eye-colour-predictor .results .words {position: relative}
.eye-colour-predictor .results .words:before {content: ''; display: block; position: absolute; left: 10%; top: 0; background: #fbcbe7; width: 80%; height: 1px}
@media (min-width: 768px) {.eye-colour-predictor .results .cols {display: table-row}
.eye-colour-predictor .results .graph, .eye-colour-predictor .results .words {display: table-cell}
.eye-colour-predictor .results .graph {width: 55%}
.eye-colour-predictor .results .words {width: 45%}
.eye-colour-predictor .results .words:before {left: 0; top: 10%; width: 1px; height: 80%}
}
.eye-colour-predictor .results .pie {position: relative; min-height: 200px; display: inline-block; width: 200px; border-radius: 100px; margin: 20px 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden}
.eye-colour-predictor .results .pie:after {content: ''; display: block; background-color: #fff; width: 220px; height: 220px; border-radius: 110px; z-index: 100; position: absolute; top: -10px; left: -10px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)}
.eye-colour-predictor .results .pie .slice {position: absolute; width: 100px; height: 200px; overflow: hidden; left: 100px; -webkit-transform-origin: left center; transform-origin: left center; z-index: 101; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden}
.eye-colour-predictor .results .pie .slice:before {content: ""; position: absolute; width: 100px; height: 200px; left: -100px; border-radius: 100px 0 0 100px; -webkit-transform-origin: right center; transform-origin: right center}
.eye-colour-predictor .results .pie .slice.blue:before, .eye-colour-predictor .results .pie .slice.blue:after {background-color: #00aeef}
.eye-colour-predictor .results .pie .slice.brown:after, .eye-colour-predictor .results .pie .slice.brown:before {background-color: #b37a36}
.eye-colour-predictor .results .pie .slice.green:after, .eye-colour-predictor .results .pie .slice.green:before {background-color: #78b336}
.eye-colour-predictor .results .pie .label {position: absolute; top: 0; left: 0; width: 200px; height: 200px; -webkit-transform-origin: center; transform-origin: center; z-index: 102; display: block; padding: 0; font-size: 100%; font-weight: normal; line-height: inherit; border-radius: 0; white-space: normal; text-shadow: none; background-color: transparent}
.eye-colour-predictor .results .pie .label:empty {display: block}
.eye-colour-predictor .results .pie .label:before {color: white; display: table-cell; height: 200px; width: 75px; text-align: center; -webkit-transform-origin: center; transform-origin: center; vertical-align: middle; white-space: pre}
.eye-colour-predictor .results .overview {padding: 20px 50px; margin-top: 20px}
@media (min-width: 768px) {.eye-colour-predictor .results .overview {margin-top: 0}
}
.eye-colour-predictor .results .overview .message {color: #333}
.eye-colour-predictor .results .overview .disclaimer {color: #999; font-size: 12px; margin-top: 20px}
@-webkit-keyframes movingmarker {0% {bottom: 101px}
20% {bottom: 151px}
40% {bottom: 76px}
50% {bottom: 126px}
80% {bottom: 51px}
100% {bottom: 101px}
}
@-moz-keyframes movingmarker {0% {bottom: 101px}
20% {bottom: 151px}
40% {bottom: 76px}
50% {bottom: 126px}
80% {bottom: 51px}
100% {bottom: 101px}
}
@keyframes movingmarker {0% {bottom: 101px}
20% {bottom: 151px}
40% {bottom: 76px}
50% {bottom: 126px}
80% {bottom: 51px}
100% {bottom: 101px}
}
.height-predictor {max-width: 750px; margin-left: auto; margin-right: auto; overflow: hidden; -webkit-font-smoothing: auto; width: 100%}
.height-predictor.splash .calculator-body {background-color: #60dba6; padding: 0 20px}
.height-predictor.splash .splash {display: block; position: relative}
.height-predictor.splash .splash .scale {bottom: -20px; left: 35%}
.height-predictor.splash .splash .words {color: #fff !important; font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 35px; line-height: 42px; display: block; text-align: center; padding: 20px 0 300px 0}
.height-predictor.splash .splash .try-button {background-color: #f24daf; background-image: none; box-shadow: none; border-width: 0; border-radius: 16px; text-shadow: none; color: #fff; outline: none; margin: 15px auto 0 auto; padding: 8px 20px; display: block; font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 18px; line-height: 1}
.height-predictor.splash .form-container, .height-predictor.splash .results {display: none}
@media (min-width: 640px) and (max-width: 768px) {.height-predictor.splash .calculator-title {padding: 28px 5px 30px 285px}
.height-predictor.splash .calculator-title .calculator-title-icon-container-small {left: 235px}
.height-predictor.splash .splash {height: 215px; padding-left: 275px}
.height-predictor.splash .splash .scale {bottom: -15px; left: 55px}
.height-predictor.splash .splash .words {height: 215px; display: table-cell; vertical-align: middle; text-align: left; padding: 20px 0}
.height-predictor.splash .splash .try-button {margin-left: 0; margin-right: 0}
.height-predictor.splash .splash .try-button:hover, .height-predictor.splash .splash .try-button:focus {background-color: #f57dc4}
}
@media (min-width: 992px) {.height-predictor.splash .calculator-title {padding: 28px 5px 30px 285px}
.height-predictor.splash .calculator-title .calculator-title-icon-container-small {left: 235px}
.height-predictor.splash .splash {height: 215px; padding-left: 275px}
.height-predictor.splash .splash .scale {bottom: -15px; left: 55px}
.height-predictor.splash .splash .words {height: 215px; display: table-cell; vertical-align: middle; text-align: left; padding: 20px 0}
.height-predictor.splash .splash .try-button {margin-left: 0; margin-right: 0}
.height-predictor.splash .splash .try-button:hover, .height-predictor.splash .splash .try-button:focus {background-color: #f57dc4}
}
.height-predictor .splash {display: none}
.height-predictor .calculator-title {background-color: #55c393; padding: 28px 20px 30px 85px}
.height-predictor .calculator-title .calculator-title-icon-container-small {display: inline-block; text-align: left; font-size: 45px; line-height: 85px; position: absolute; top: 0; left: 25px}
.height-predictor .calculator-body {background-color: #e9f7f1; padding: 30px 20px 35px}
.height-predictor .calculator-body .form-container {background-color: #e0f4eb; border: 1px dashed #ade2cb}
.height-predictor .calculator-body .form-container .form-inline {text-align: center}
@media (min-width: 768px) {.height-predictor .calculator-body .form-container .form-inline {text-align: left}
}
.height-predictor .calculator-body .form-container .form-group {width: 31%; min-width: 170px; display: inline-block; margin: 0; padding: 0 5px 10px 5px; padding-bottom: 20px; text-align: center; vertical-align: top}
.height-predictor .calculator-body .form-container .form-group label {text-align: center}
.height-predictor .calculator-body .form-container .baby {white-space: nowrap}
.height-predictor .calculator-body .form-container .baby.boy .boy, .height-predictor .calculator-body .form-container .baby.girl .girl {border: 2px solid #ade2cb}
.height-predictor .calculator-body .form-container .baby.boy .girl, .height-predictor .calculator-body .form-container .baby.girl .boy {opacity: .5}
.height-predictor .calculator-body .form-container .baby .boy, .height-predictor .calculator-body .form-container .baby .girl {background-color: #fff; border: 2px solid transparent; border-radius: 10px; width: 66px; height: 43px; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none}
.height-predictor .calculator-body .form-container .baby .boy:before, .height-predictor .calculator-body .form-container .baby .girl:before {content: ''; display: block; width: 62px; height: 27px; background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; margin-top: 6px}
.height-predictor .calculator-body .form-container .baby .boy:before {background-image: url("/images/calculators/height-predictor/boy.svg")}
.height-predictor .calculator-body .form-container .baby .girl {margin-left: 3px}
.height-predictor .calculator-body .form-container .baby .girl:before {background-image: url("/images/calculators/height-predictor/girl.svg")}
.height-predictor .calculator-body .form-container .mother, .height-predictor .calculator-body .form-container .father {position: relative; border-radius: 10px; margin-right: 50px}
.height-predictor .calculator-body .form-container .mother input, .height-predictor .calculator-body .form-container .father input {display: inline-block; width: 100%; vertical-align: middle; height: 43px; padding: 6px 12px; font-size: 15px; line-height: 1.42857; color: #666; background-color: white; background-image: none; border: 2px solid transparent; border-radius: 10px 0 0 10px; box-shadow: none; -webkit-transition: none; transition: none}
.height-predictor .calculator-body .form-container .mother input:focus, .height-predictor .calculator-body .form-container .father input:focus {border-color: #ade2cb; outline: 0}
.height-predictor .calculator-body .form-container .mother:after, .height-predictor .calculator-body .form-container .father:after {content: 'cm'; display: block; position: absolute; right: -50px; top: 0; background-color: #f1faf7; height: 43px; line-height: 43px; width: 50px; color: #999; font-size: 15px; border-radius: 0 10px 10px 0}
.height-predictor .calculator-body .form-container .calculate-button {clear: both; background-color: #23b274; color: #fff; outline: none; text-shadow: none; box-shadow: none}
.height-predictor .calculator-body .form-container .calculate-button:hover, .height-predictor .calculator-body .form-container .calculate-button:focus {background-color: #31d78f}
.height-predictor .results {margin-top: 30px; border-radius: 6px; width: 100%; position: relative; color: #fff; text-align: center}
.height-predictor .results.boy {background-color: #64cef6}
.height-predictor .results.boy .words:after {background-color: #88d9f8}
.height-predictor .results.boy .marker.min, .height-predictor .results.boy .marker.max {background-color: #f362bb}
.height-predictor .results.boy .marker.min:before, .height-predictor .results.boy .marker.max:before {border-color: transparent #f362bb transparent transparent}
.height-predictor .results.boy .marker.prob {background-color: #e7007a}
.height-predictor .results.boy .marker.prob:before {border-color: transparent #e7007a transparent transparent}
.height-predictor .results.girl {background-color: #f24daf}
.height-predictor .results.girl .words:after {background-color: #da9dd5}
.height-predictor .results.girl .marker.min, .height-predictor .results.girl .marker.max {background-color: #80d7f7}
.height-predictor .results.girl .marker.min:before, .height-predictor .results.girl .marker.max:before {border-color: transparent #80d7f7 transparent transparent}
.height-predictor .results.girl .marker.prob {background-color: #00aeef}
.height-predictor .results.girl .marker.prob:before {border-color: transparent #00aeef transparent transparent}
.height-predictor .results.boy .gender:before {content: 'boy'}
.height-predictor .results.girl .gender:before {content: 'girl'}
.height-predictor .results .heading {text-align: center; color: #fff; font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 24px; padding: 30px 0 0 0}
.height-predictor .results .heading strong {color: #fff !important; font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; font-style: normal}
.height-predictor .results .cols {display: block}
.height-predictor .results .graph, .height-predictor .results .words {vertical-align: middle; text-align: center}
.height-predictor .results .graph {display: inline-block; height: 330px; width: 250px; margin-top: 30px; position: relative}
.height-predictor .results .words {display: block; position: relative; padding: 30px 0 10px 0}
.height-predictor .results .words:after {content: ''; display: block; position: absolute; left: 10%; bottom: -20px; width: 80%; height: 1px}
@media (min-width: 768px) {.height-predictor .results {text-align: left}
.height-predictor .results .cols {display: table-row}
.height-predictor .results .graph, .height-predictor .results .words {display: table-cell; position: relative; height: 340px}
.height-predictor .results .graph {width: 45%; right: 55%}
.height-predictor .results .words {top: 0; width: 55%; left: 45%; padding: 0}
.height-predictor .results .words:after {left: 0; top: 10%; bottom: 0; width: 1px; height: 80%}
}
.height-predictor .results .words {position: relative}
.height-predictor .results .words .message {color: #fff; font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 20px; padding: 0 30px}
.height-predictor .results .words .message strong {color: #fff !important; font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; font-style: normal}
.height-predictor .results .words .disclaimer {color: #fff; font-size: 12px; padding: 20px 30px 0}
.height-predictor .scale {position: absolute; bottom: 10px; left: 75px; width: 40px; height: 220px}
.height-predictor .scale:before {content: ''; display: block; background-image: url("/images/calculators/height-predictor/giraffe.svg"); height: 300px; background-size: cover; width: 178px; position: absolute; bottom: -10px; left: -29px}
.height-predictor .scale.s275 {counter-reset: notches 275}
.height-predictor .scale.s270 {counter-reset: notches 270}
.height-predictor .scale.s265 {counter-reset: notches 265}
.height-predictor .scale.s260 {counter-reset: notches 260}
.height-predictor .scale.s255 {counter-reset: notches 255}
.height-predictor .scale.s250 {counter-reset: notches 250}
.height-predictor .scale.s245 {counter-reset: notches 245}
.height-predictor .scale.s240 {counter-reset: notches 240}
.height-predictor .scale.s235 {counter-reset: notches 235}
.height-predictor .scale.s230 {counter-reset: notches 230}
.height-predictor .scale.s225 {counter-reset: notches 225}
.height-predictor .scale.s220 {counter-reset: notches 220}
.height-predictor .scale.s215 {counter-reset: notches 215}
.height-predictor .scale.s210 {counter-reset: notches 210}
.height-predictor .scale.s205 {counter-reset: notches 205}
.height-predictor .scale.s200 {counter-reset: notches 200}
.height-predictor .scale.s195 {counter-reset: notches 195}
.height-predictor .scale.s190 {counter-reset: notches 190}
.height-predictor .scale.s185 {counter-reset: notches 185}
.height-predictor .scale.s180 {counter-reset: notches 180}
.height-predictor .scale.s175 {counter-reset: notches 175}
.height-predictor .scale.s170 {counter-reset: notches 170}
.height-predictor .scale.s165 {counter-reset: notches 165}
.height-predictor .scale.s160 {counter-reset: notches 160}
.height-predictor .scale.s155 {counter-reset: notches 155}
.height-predictor .scale.s150 {counter-reset: notches 150}
.height-predictor .scale.s145 {counter-reset: notches 145}
.height-predictor .scale.s140 {counter-reset: notches 140}
.height-predictor .scale.s135 {counter-reset: notches 135}
.height-predictor .scale.s130 {counter-reset: notches 130}
.height-predictor .scale.s125 {counter-reset: notches 125}
.height-predictor .scale.s120 {counter-reset: notches 120}
.height-predictor .scale.s115 {counter-reset: notches 115}
.height-predictor .scale.s110 {counter-reset: notches 110}
.height-predictor .scale.s105 {counter-reset: notches 105}
.height-predictor .scale.s100 {counter-reset: notches 100}
.height-predictor .scale.s95 {counter-reset: notches 95}
.height-predictor .scale.s90 {counter-reset: notches 90}
.height-predictor .scale.s85 {counter-reset: notches 85}
.height-predictor .scale.s80 {counter-reset: notches 80}
.height-predictor .scale.s75 {counter-reset: notches 75}
.height-predictor .scale .notch {counter-increment: notches -5; background-color: #ba7139; height: 2px; margin: 23px 0 23px 20px; position: relative}
.height-predictor .scale .notch:after {content: ''; position: absolute; top: -9px; left: 27px; color: white; text-align: left; opacity: .5; content: counter(notches) "cm"; font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 13px}
.height-predictor .scale .marker {color: white; position: absolute; bottom: 0; left: 40px; height: 26px; line-height: 26px; text-align: left; padding-left: 10px; font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; font-style: normal; white-space: nowrap}
.height-predictor .scale .marker.min, .height-predictor .scale .marker.max {padding-right: 20px}
.height-predictor .scale .marker.min:before, .height-predictor .scale .marker.max:before {width: 0; height: 0; border-style: solid; border-width: 13px 8px 13px 0; content: ''; position: absolute; top: 0; left: -7px}
.height-predictor .scale .marker.min {bottom: 58px}
.height-predictor .scale .marker.max {bottom: 158px}
.height-predictor .scale .marker.prob, .height-predictor .scale .marker.eg {bottom: 101px; height: 40px; line-height: 40px; padding-right: 25px; font-size: 24px}
.height-predictor .scale .marker.prob:before, .height-predictor .scale .marker.eg:before {width: 0; height: 0; border-style: solid; border-width: 20px 12px 20px 0; content: ''; position: absolute; top: 0; left: -12px}
.height-predictor .scale .marker.eg {background-color: #55c393; -webkit-animation: movingmarker 20s 0s infinite; -moz-animation: movingmarker 20s 0s infinite; animation: movingmarker 20s 0s infinite}
.height-predictor .scale .marker.eg:before {border-color: transparent #55c393 transparent transparent}
@media (min-width: 768px) and (max-width: 991px) {.height-predictor .scale {left: 45px}
}
.custom-select-container {border-radius: 10px; padding: 10px 8px; background: #fff; position: relative; display: inline-block}
.custom-select-container:before {border-radius: 10px; content: '\f078'; font-family: FontAwesome; background-color: #fff; position: absolute; top: 0; bottom: 0; right: 0; width: 28px; line-height: 40px; vertical-align: middle; pointer-events: none; z-index: 2}
@media screen and (-webkit-min-device-pixel-ratio: 0) {.custom-select-container:before {text-align: left}
}
.custom-select-container select {background: transparent; outline: none !important; border: 0; font-size: 16px; line-height: 1.3em; z-index: 1}
@media screen and (-webkit-min-device-pixel-ratio: 0) {.custom-select-container select {-webkit-appearance: none; padding: 0 28px 0 7px}
}
.custom-select-container + .custom-select-container {margin-left: 10px}
.full-width {width: 100% !important}
@media (max-width: 768px) {.x-scroll {overflow-x: auto}
}
.intro .btn-red {color: #fff !important; margin: 0 auto; font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1; border: 3px solid #fff; background-image: none; box-shadow: none; background-color: #e62e49; border-color: #e62e49; border-width: 0; border-radius: 16px}
.intro .btn-red:hover {background-color: #c91832}
.intro.product {display: block; border-radius: 15px; background-color: #4cc6bb; margin-bottom: 20px}
.intro.product.drynites {background-color: #3b73b9}
.intro.product.wipes {background-color: #00ae9e}
.intro.product.nappies {background-color: #44c8f5}
.intro.product.nappy-pants-resealable {background-color: #a2c756}
.intro.product.nappy-pants {background-color: #41aa39}
.intro.product.little-swimmers {background-color: #f8b62c}
.intro.product.disposable-mats {background-color: #52c5ba}
.intro.product.bed-mats {background-color: #29a5cf}
.intro.product.pull-ups {background-color: #2cc6f8}
.intro.product.little-groover {background-color: #e10174; min-height: 300px}
.intro.product.skin-care {background-color: #2cb17a}
.intro.product.chfa {background-color: #2ccebb}
.intro.product.chfa .btn-pink {color: #fff !important}
@media (min-width: 768px) {.intro.product {min-height: 280px; background-repeat: no-repeat; background-position: top right; background-size: contain}
.intro.product.drynites {background-image: url("/images/intro-banners/products/drynites.jpg")}
}
@media (min-width: 768px) and (min--moz-device-pixel-ratio: 1.3), (min-width: 768px) and (-o-min-device-pixel-ratio: 2.6 / 2), (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.3), (min-width: 768px) and (min-device-pixel-ratio: 1.3), (min-width: 768px) and (min-resolution: 1.3dppx) {.intro.product.drynites {background-image: url("/images/intro-banners/products/drynites@2x.jpg")}
}
@media (min-width: 768px) {.intro.product.wipes {background-image: url("/images/intro-banners/products/wipes.jpg")}
}
@media (min-width: 768px) and (min--moz-device-pixel-ratio: 1.3), (min-width: 768px) and (-o-min-device-pixel-ratio: 2.6 / 2), (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.3), (min-width: 768px) and (min-device-pixel-ratio: 1.3), (min-width: 768px) and (min-resolution: 1.3dppx) {.intro.product.wipes {background-image: url("/images/intro-banners/products/wipes@2x.jpg")}
}
@media (min-width: 768px) {.intro.product.nappies {background-image: url("/images/intro-banners/products/nappies.jpg")}
}
@media (min-width: 768px) and (min--moz-device-pixel-ratio: 1.3), (min-width: 768px) and (-o-min-device-pixel-ratio: 2.6 / 2), (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.3), (min-width: 768px) and (min-device-pixel-ratio: 1.3), (min-width: 768px) and (min-resolution: 1.3dppx) {.intro.product.nappies {background-image: url("/images/intro-banners/products/nappies@2x.jpg")}
}
@media (min-width: 768px) {.intro.product.newborn-nappies {background-image: url("/images/intro-banners/products/newborn-nappies.jpg")}
}
@media (min-width: 768px) and (min--moz-device-pixel-ratio: 1.3), (min-width: 768px) and (-o-min-device-pixel-ratio: 2.6 / 2), (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.3), (min-width: 768px) and (min-device-pixel-ratio: 1.3), (min-width: 768px) and (min-resolution: 1.3dppx) {.intro.product.newborn-nappies {background-image: url("/images/intro-banners/products/newborn-nappies@2x.jpg")}
}
@media (min-width: 768px) {.intro.product.nappy-pants-resealable {background-image: url("/images/intro-banners/products/nappy-pants-resealable.jpg")}
.intro.product.nappy-pants {background-image: url("/images/intro-banners/products/nappy-pants.jpg")}
}
@media (min-width: 768px) and (min--moz-device-pixel-ratio: 1.3), (min-width: 768px) and (-o-min-device-pixel-ratio: 2.6 / 2), (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.3), (min-width: 768px) and (min-device-pixel-ratio: 1.3), (min-width: 768px) and (min-resolution: 1.3dppx) {.intro.product.nappy-pants {background-image: url("/images/intro-banners/products/nappy-pants@2x.jpg")}
}
@media (min-width: 768px) {.intro.product.little-swimmers {background-image: url("/images/intro-banners/products/little-swimmers.jpg")}
.intro.product.disposable-mats {background-image: url("/images/intro-banners/products/disposable-mats.jpg")}
}
@media (min-width: 768px) and (min--moz-device-pixel-ratio: 1.3), (min-width: 768px) and (-o-min-device-pixel-ratio: 2.6 / 2), (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.3), (min-width: 768px) and (min-device-pixel-ratio: 1.3), (min-width: 768px) and (min-resolution: 1.3dppx) {.intro.product.disposable-mats {background-image: url("/images/intro-banners/products/disposable-mats@2x.jpg")}
}
@media (min-width: 768px) {.intro.product.change-mats {background-image: url("/images/intro-banners/products/change-mats.jpg")}
.intro.product.bed-mats {background-image: url("/images/intro-banners/products/bed-mats.jpg")}
.intro.product.new-baby-gift-pack {background-image: url("/images/intro-banners/products/new-baby-gift-pack.jpg")}
.intro.product.pull-ups {background-image: url("/images/intro-banners/products/pull-ups.jpg")}
}
@media (min-width: 768px) and (min--moz-device-pixel-ratio: 1.3), (min-width: 768px) and (-o-min-device-pixel-ratio: 2.6 / 2), (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.3), (min-width: 768px) and (min-device-pixel-ratio: 1.3), (min-width: 768px) and (min-resolution: 1.3dppx) {.intro.product.pull-ups {background-image: url("/images/intro-banners/products/pull-ups@2x.jpg")}
}
@media (min-width: 768px) {.intro.product.little-groover {background-image: url("/images/intro-banners/products/bg-intro-groover.jpg")}
.intro.product.little-groover .i-info {width: 480px !important}
.intro.product.little-groover .i-info h2 {font-size: 24px; margin-top: 30px; margin-bottom: 20px; border-bottom: none !important; padding-bottom: 0}
.intro.product.skin-care {min-height: 287px}
.intro.product.skin-care.baby-bathing {background-image: url("/images/intro-banners/baby-care/bathing.jpg")}
.intro.product.skin-care.tips {background-image: url("/images/intro-banners/baby-care/tips.jpg")}
.intro.product.skin-care.baby-massage {background-image: url("/images/intro-banners/baby-care/massage.jpg")}
.intro.product.skin-care.bumps {background-image: url("/images/intro-banners/baby-care/bumps.jpg")}
.intro.product.skin-care.baby-sun-care {background-image: url("/images/intro-banners/baby-care/sun-care.jpg")}
.intro.product.skin-care.dry-skin {background-image: url("/images/intro-banners/baby-care/dry-skin.jpg")}
.intro.product.skin-care.rashes {background-image: url("/images/intro-banners/baby-care/rashes.jpg")}
.intro.product.skin-care .i-info {padding-left: 24px; width: 528px}
.intro.product.chfa {background-image: url("/images/intro-banners/charities/chfa.jpg")}
}
.intro.product .i-info {padding: 10px 20px}
.intro.product .i-info:before, .intro.product .i-info:after {content: " "; display: table}
.intro.product .i-info:after {clear: both}
.intro.product .i-info h1, .intro.product .i-info h2, .intro.product .i-info p {color: #fff !important}
.intro.product .i-info h1, .intro.product .i-info h2 {border-bottom: 1px dashed #fff !important; padding-bottom: 20px; margin-bottom: 10px; font-size: 32px}
.intro.product .i-info img {margin: 0 10px 0 -20px; float: left}
.intro.product .i-info p {font-size: 1.2em; margin-top: 20px; font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal}
@media (min-width: 768px) {.intro.product .i-info {width: 560px; padding-left: 40px}
.intro.product .i-info img {margin-right: 20px}
}
.intro.product.circles .i-info h2 {margin: 21px 0 10px 0; padding-bottom: 20px; font-size: 32px; line-height: 32px}
.intro.product.circles .i-info img {float: none; margin: 0 auto; display: block; max-width: 100%}
.intro.product.circles .i-info p {font-size: 18px; margin-top: 10px; clear: left}
.intro.product.circles .i-info .buy-now {margin-top: 15px}
@media (min-width: 480px) {.intro.product.circles .i-info img {float: left; margin: 0 10px 0 -20px; display: inline}
.intro.product.circles .i-info p {clear: none}
}
@media (min-width: 768px) {.intro.product.circles {overflow: hidden; position: relative}
.intro.product.circles:before, .intro.product.circles:after {content: ''; width: 800px; height: 800px; position: absolute; border-radius: 50%; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); right: 39%; z-index: 19}
.intro.product.circles:before {background-color: #82d7d0}
.intro.product.circles:after {background-color: #4cc6bb; -webkit-transform: translate(-26px, -50%); -ms-transform: translate(-26px, -50%); -o-transform: translate(-26px, -50%); transform: translate(-26px, -50%)}
.intro.product.circles .i-info {position: relative; z-index: 20; width: 61%; padding: 0 50px 20px 30px; margin: 0}
.intro.product.circles .i-info img {margin: 0 20px 0 -20px; float: left}
.intro.product.circles .i-info p {font-size: 18px; line-height: 27px}
.intro.product.circles.drynites .i-info {width: 63%}
.intro.product.circles.drynites:before, .intro.product.circles.drynites:after {right: 37%}
.intro.product.circles.drynites:before {background-color: #83a9d8}
.intro.product.circles.drynites:after {background-color: #3b73b9}
.intro.product.circles.wipes .i-info {width: 63%}
.intro.product.circles.wipes:before, .intro.product.circles.wipes:after {right: 37%}
.intro.product.circles.wipes:before {background-color: #3ac0b5}
.intro.product.circles.wipes:after {background-color: #00ae9e}
.intro.product.circles.nappies:before {background-color: #a6e4fb}
.intro.product.circles.nappies:after {background-color: #44c8f5}
.intro.product.circles.nappy-pants-resealable .i-info {width: 70%}
.intro.product.circles.nappy-pants-resealable:before, .intro.product.circles.nappy-pants-resealable:after {right: 30%}
.intro.product.circles.nappy-pants-resealable:before {background-color: #c0d789}
.intro.product.circles.nappy-pants-resealable:after {background-color: #a2c756}
.intro.product.circles.nappy-pants .i-info {width: 69%}
.intro.product.circles.nappy-pants:before, .intro.product.circles.nappy-pants:after {right: 31%}
.intro.product.circles.nappy-pants:before {background-color: #67bf61}
.intro.product.circles.nappy-pants:after {background-color: #41aa39}
.intro.product.circles.little-swimmers:before {background-color: #facc6c}
.intro.product.circles.little-swimmers:after {background-color: #f8b62c}
.intro.product.circles.disposable-mats .i-info {width: 65%}
.intro.product.circles.disposable-mats:before, .intro.product.circles.disposable-mats:after {right: 35%}
.intro.product.circles.disposable-mats .i-info img {margin-right: 10px}
.intro.product.circles.change-mats .i-info {width: 63%}
.intro.product.circles.change-mats:before, .intro.product.circles.change-mats:after {right: 37%}
.intro.product.circles.change-mats .i-info img {margin-right: 15px}
.intro.product.circles.bed-mats .i-info {width: 63%}
.intro.product.circles.bed-mats:before, .intro.product.circles.bed-mats:after {right: 37%}
.intro.product.circles.bed-mats:before {background-color: #4cbadf}
.intro.product.circles.bed-mats:after {background-color: #29a5cf}
.intro.product.circles.pull-ups .i-info {width: 67%}
.intro.product.circles.pull-ups:before, .intro.product.circles.pull-ups:after {right: 33%}
.intro.product.circles.pull-ups:before {background-color: #a0e3fd}
.intro.product.circles.pull-ups:after {background-color: #2cc6f8}
.intro.product.circles.skin-care .i-info {width: 63%}
.intro.product.circles.skin-care:before, .intro.product.circles.skin-care:after {right: 37%}
.intro.product.circles.skin-care:before {background-color: #dcf1e8}
.intro.product.circles.skin-care:after {background-color: #2cb17a}
.intro.product.circles.chfa .i-info {width: 58%}
.intro.product.circles.chfa:before, .intro.product.circles.chfa:after {right: 42%}
.intro.product.circles.chfa:before {background-color: #dcf1e8}
.intro.product.circles.chfa:after {background-color: #2ccebb}
.intro.product.circles.chfa img {margin-left: 10px}
}
.form-control-flat, .hg-join .form-control {border: none; border-radius: 9px; height: 40px; padding: 9px 14px; box-shadow: none; border: none}
.form-control-flat::-moz-placeholder, .hg-join .form-control::-moz-placeholder {color: #c2bfbc; opacity: 1}
.form-control-flat:-ms-input-placeholder, .hg-join .form-control:-ms-input-placeholder {color: #c2bfbc}
.form-control-flat::-webkit-input-placeholder, .hg-join .form-control::-webkit-input-placeholder {color: #c2bfbc}
.hg-join .form-select {background: white; position: relative; border-radius: 9px}
.hg-join .form-select:before {border-top-right-radius: 10px; border-top-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; content: '\f078'; font-family: FontAwesome; background-color: #fff; position: absolute; top: 0; bottom: 0; right: 0; width: 28px; line-height: 40px; vertical-align: middle; pointer-events: none; z-index: 2}
@media screen and (-webkit-min-device-pixel-ratio: 0) {.hg-join .form-select:before {text-align: left}
}
.hg-join .form-select select {background: transparent; outline: none; border: 0; font-size: 15px; line-height: 1.3em; z-index: 1; width: 100%; padding: 9px 14px; height: 40px; -webkit-box-shadow: none; box-shadow: none}
@media screen and (-webkit-min-device-pixel-ratio: 0) {.hg-join .form-select select {-webkit-appearance: none}
}
.input-group-flat .input-group-addon {padding-left: 15px; padding-right: 15px; background-color: #f0f4fa; border-width: 0; border-right: 1px solid #e6e6e6}
form.custom-form .row {clear: both; background: transparent; width: 100%; margin: 10px 0 0 0; padding: 0; border-bottom: none}
form.custom-form .row .group {margin: 0; float: left; width: 49%}
form.custom-form .row .group:nth-child(even) {float: right}
form.custom-form.bs3grid .row {margin-left: -15px; margin-right: -15px; width: auto}
form.custom-form.bs3grid .custom-select:before {top: 5px; right: 10px; height: 41px; line-height: 41px}
form.custom-form .custom-select {position: relative}
form.custom-form .custom-select:before {border-radius: 10px; content: '\f078'; font-family: FontAwesome; background-color: transparent; position: absolute; top: 0; bottom: 0; right: 0; width: 28px; height: 35px; line-height: 35px; vertical-align: middle; pointer-events: none; z-index: 2}
form.custom-form .custom-select select {-webkit-appearance: none; background-color: #fff; padding: 10px 28px 10px 10px; font-size: 15px; width: 100%; border-radius: 9px; border: none}
form.custom-form input[type='text'] {border-radius: 9px; padding: 10px 10px; box-shadow: none; display: block; border: none; margin: 0; margin-bottom: 5px; font-size: 15px; width: 100% !important}
form.custom-form input[type='submit'] {float: none; padding: 10px 15px; width: 200px; color: #fff; font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; border-radius: 20px; -webkit-appearance: none; background: #4cbb41; border: none; font-size: 18px; outline: none}
form.custom-form input[type='submit']:hover {background: #3d9534}
form.custom-form select {width: 100%; margin: 0; margin-bottom: 5px}
form.custom-form .radio input[type="radio"] {float: left; position: relative; margin-left: 0}
form.custom-form .radio label {float: left; width: 110px; background: none}
form .warning {border-radius: 10px; font-size: 14px; margin-bottom: 0}
form .formError {color: #fff; font-size: 12px; font-weight: 300; border-radius: 5px}
label.required:after {margin-left: 3px; content: '*'}
::-webkit-inner-spin-button {display: none}
.membership.m-container {background: #d1e04b; width: 100%; float: left; border-radius: 10px}
.membership.m-container h2 {color: #489931 !important; font-size: 24px !important; margin-bottom: 20px !important}
.membership.m-container .m-details {width: 100%; float: none; padding: 20px}
.membership.m-container .m-details .membership-form {background: none}
.membership.m-container .m-details .membership-form .submit {background: none}
.membership.m-container .m-children {background: #d1e04b; padding: 20px 10px 20px 0; border-top-right-radius: 10px}
.membership.m-container .m-children#sidebar {float: none; width: 100%; padding: 20px}
.membership.m-container .m-children#sidebar .children {float: none}
.membership.m-container .m-children#sidebar .children .child {display: block}
.membership.m-container .m-children .children {margin-top: 0 !important}
.membership.m-container .m-children .children .child {float: none !important}
.membership.m-container .m-children .children .child img {height: auto !important; width: auto !important}
.membership.m-container .m-children .children .editing {float: none !important}
.membership.m-container .m-children .children .editing input[type='submit'], .membership.m-container .m-children .children .editing input[type='button'] {border-radius: 5px !important; margin: 5px 0 !important; background-color: #d1e04b !important; color: #fff !important; border: none !important}
.membership.m-container .m-children .children .editing input[type='submit'].button-to, .membership.m-container .m-children .children .editing input[type='button'].button-to {left: 120px !important}
.membership.m-container .m-children .children #add-child-button {margin-left: 0; float: none}
.membership.m-container .m-children:after {content: ''; position: absolute; width: 9px; height: 100%; display: block; top: 0; left: 0}
@media (min-width: 768px) {.membership.m-container {background: #e8f09d url("/images/forms/bg-join-ragged-edge.gif") repeat-y 610px 0}
.membership.m-container .m-details {float: left; width: 600px; padding-right: 0}
.membership.m-container .m-children {float: right; position: relative; width: 300px !important}
.membership.m-container .m-children#sidebar {float: right; width: 300px; padding: 20px 10px 20px 0}
.membership.m-container .m-children#sidebar .children {float: right}
.membership.m-container .m-children .children .child {float: left !important}
.membership.m-container .m-children .children .editing {float: left !important}
.membership.m-container .m-children .children #add-child-button {float: right}
}
.l-join-form {position: relative; padding: 0 20px}
.l-join-form .custom-select-container {border-top-right-radius: 10px; border-top-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; padding: 10px 8px; background: #fff; position: relative; display: inline-block; margin-bottom: 15px; width: 100%}
.l-join-form .custom-select-container:before {border-top-right-radius: 10px; border-top-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; content: '\f078'; font-family: FontAwesome; background-color: white; position: absolute; top: 0; bottom: 0; right: 0; width: 28px; line-height: 40px; vertical-align: middle; pointer-events: none; z-index: 2}
@media screen and (-webkit-min-device-pixel-ratio: 0) {.l-join-form .custom-select-container:before {text-align: left}
}
.l-join-form .custom-select-container select {background: transparent; outline: none; border: 0; font-size: 16px; line-height: 1.3em; z-index: 1; width: 100%}
@media screen and (-webkit-min-device-pixel-ratio: 0) {.l-join-form .custom-select-container select {-webkit-appearance: none; padding: 0 28px 0 7px}
}
.l-join-form input[type="text"], .l-join-form input[type="email"] {border: none; border-radius: 9px; height: 40px; padding: 9px 14px; box-shadow: none; border: none; margin-bottom: 15px}
.l-join-form ::-webkit-input-placeholder {color: #c2bfbc}
.l-join-form :-moz-placeholder {color: #c2bfbc}
.l-join-form ::-moz-placeholder {color: #c2bfbc}
.l-join-form :-ms-input-placeholder {color: #c2bfbc}
.l-join-form [type="button"] {background: #e62e49; font-size: 18px; border-radius: 22px; border: none; margin: 20px 0 15px; padding: 12px 30px 15px}
.l-join-form [type="button"].loading {background-color: #e62e49; cursor: default; -webkit-animation: progress-bar-stripes 1s linear infinite; -moz-animation: progress-bar-stripes 1s linear infinite; -ms-animation: progress-bar-stripes 1s linear infinite; -o-animation: progress-bar-stripes 1s linear infinite; animation: progress-bar-stripes 1s linear infinite; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; -moz-background-size: 40px 40px; -o-background-size: 40px 40px; background-size: 40px 40px}
.l-join-form .about-yourself, .l-join-form .bad-response {padding: 0px 20px 15px; border: 2px solid #f2ff7c; border-radius: 10px; font-size: 15px; margin-left: -20px; margin-right: -20px; margin-bottom: 15px}
.l-join-form .about-yourself p, .l-join-form .bad-response p {font-size: 15px}
.l-join-form .about-yourself {margin-top: 10px; border-color: #f2ff7c}
.l-join-form .bad-response {color: #FF4545; border-color: #FF4545; margin-top: 10px; margin-bottom: 10px}
.l-join-form .bad-response h3 {color: #FF4545}
.l-join-form .member, .l-join-form .guest, .l-join-form .about-yourself-container, .l-join-form .bad-response-container, .l-join-form .bad-signin-response-container, .l-join-form .thank-you, .l-join-form .please-fill-details {-webkit-transition: all 0.6s; transition: all 0.6s}
.l-join-form .member.slide-out, .l-join-form .guest.slide-out, .l-join-form .about-yourself-container.slide-out, .l-join-form .bad-response-container.slide-out, .l-join-form .bad-signin-response-container.slide-out, .l-join-form .thank-you.slide-out, .l-join-form .please-fill-details.slide-out {opacity: 0; height: 0; overflow: hidden; -ms-transform: translate3D(0, 10px, 0); -webkit-transform: translate3D(0, 10px, 0); transform: translate3D(0, 10px, 0)}
.l-join-form .thank-you {text-align: center}
.l-join-form label.error {margin-top: -13px; margin-bottom: 10px; display: block; margin-left: 12px; font-size: 15px !important; color: red; font-weight: normal}
.l-join-form .conditions-container .checkbox {margin-top: 0}
.l-join-form .conditions-container label.error {margin-left: 0; margin-top: 0; line-height: 17px}
.l-join-form .conditions-container a {font-weight: bold}
.l-join-form .modal-title {margin-top: 10px; margin-bottom: 0}
.l-join-form .m-2 .modal-backdrop {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000}
.l-join-form .m-2 .modal-backdrop.fade {opacity: 0}
.l-join-form .m-2 .modal {top: 60px; left: 10px; right: 10px; bottom: auto; position: fixed; z-index: 1050; background-color: #fff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); *border: 1px solid #999;  border-radius: 6px; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; outline: none}
.l-join-form .m-2 .modal.fade {-webkit-transition: opacity 0.3s linear, top 0.3s ease-out; -moz-transition: opacity 0.3s linear, top 0.3s ease-out; -o-transition: opacity 0.3s linear, top 0.3s ease-out; transition: opacity 0.3s linear, top 0.3s ease-out; top: -25%}
.l-join-form .m-2 .modal.fade.in {top: 60px; display: block}
.l-join-form .m-2 .modal-body {max-height: 400px; overflow-y: auto; width: 100%; padding: 15px}
.l-join-form .m-2 .modal-header .close {padding: 10px; margin: -10px}
.hg-join {background-color: #e8f09d}
.hg-join a {color: #4cb940; font-weight: bold}
.hg-join.signup .hg-join-guest {display: block}
.hg-join.signup .hg-join-member {display: none}
.hg-join.login .hg-join-guest, .hg-join.password .hg-join-guest {display: none}
.hg-join.login .hg-join-member, .hg-join.password .hg-join-member {display: block}
.hg-join-switch {cursor: pointer; margin-bottom: 25px; -webkit-transition: all 0.28s; -o-transition: all 0.28s; transition: all 0.28s}
@media (min-width: 768px) {.hg-join-switch:hover {-webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0)}
.hg-join-switch:hover .member-guest-switch-bottom {-webkit-transform: translate3d(0, 7px, 0); transform: translate3d(0, 7px, 0)}
.hg-join-switch:hover .member-guest-switch-bottom:before {-webkit-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0)}
.hg-join-switch:hover .member-guest-switch-bottom:after {-webkit-transform: translate3d(0, 2px, 0); transform: translate3d(0, 2px, 0)}
}
.hg-join-switch.signed-in {cursor: default; margin-bottom: 15px}
.hg-join-switch.signed-in .member-guest-switch-top {border-radius: 0 0 9px 9px; padding-bottom: 30px}
.hg-join-switch.signed-in .sign-in-cta {display: none}
.hg-join-switch-top {position: relative; display: table; border-collapse: separate; table-layout: fixed; width: 100%; padding: 20px; background: white; border-radius: 9px 9px 0 0; font-size: 20px; line-height: 1.2em; overflow: hidden; min-height: 98px; text-align: center}
.hg-join-switch-top i {display: table-cell; padding: 0; width: 60px; overflow: hidden; vertical-align: middle; text-align: left; color: #d0e321; font-size: 55px}
.hg-join-switch-top > span {vertical-align: middle; display: table-cell; text-align: left; width: 100%}
.hg-join-switch-top > span div {overflow: hidden; text-overflow: ellipsis}
@media (min-width: 768px) {.hg-join-switch-top.signed-in {padding: 31px 26px 30px 91px}
}
.hg-join-switch-bottom {position: relative; width: 100%; padding: 11px 10px 4px; text-align: center; font-size: 16px; display: block; color: #4d4d4d; z-index: 99; background: #d1e04b; -webkit-transition: all 0.28s; -o-transition: all 0.28s; transition: all 0.28s}
.hg-join-switch-bottom:before, .hg-join-switch-bottom:after {content: ''; position: absolute; width: 100%; left: 0; background: #d1e04b; -webkit-transition: all 0.28s; -o-transition: all 0.28s; transition: all 0.28s}
.hg-join-switch-bottom:before {height: 10px; top: 0}
.hg-join-switch-bottom:after {height: 13px; bottom: -10px; border-radius: 0 0 9px 9px}
.hg-join-family {margin-top: 10px; border-color: #f2ff7c; padding: 0 20px 15px; border: 2px solid #f2ff7c; border-radius: 10px; font-size: 15px; margin-left: -20px; margin-right: -20px; margin-bottom: 15px}
.hg-join-family p {font-size: 15px}
.hg-join-family .form-selects:before, .hg-join-family .form-selects:after {content: " "; display: table}
.hg-join-family .form-selects:after {clear: both}
.hg-join-family .form-selects .form-select {float: left; width: 32%; margin-right: 2%}
.hg-join-family .form-selects .form-select:last-child {margin-right: 0}
.hg-join-family .hg-join-child {position: relative; padding-top: 20px; border-top: 2px solid #f2ff7c}
.hg-join-family .hg-join-child .remove {display: inline-block; position: absolute; top: 50px; right: -33px; width: 23px; height: 23px; line-height: 19px; text-align: center; border-radius: 50%; background-color: #f2ff7c; color: #666; margin-top: -2px}
.hg-join-family .hg-join-child:first-child {border-top-width: 0; padding-top: 0}
.hg-join-family .hg-join-child:first-child .remove {display: none}
.page-header + section.join-cta-strip {margin-top: -40px; margin-bottom: 20px}
@media (min-width: 768px) {.page-header + section.join-cta-strip {margin-bottom: 40px}
}
section.join-cta-strip {background: #e62e49}
section.join-cta-strip .strip {font-family: 'Huggies Omnes Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; color: #fff; font-size: 20px; line-height: 26px; position: relative; padding-right: 130px; padding-top: 10px; padding-bottom: 10px}
section.join-cta-strip .strip strong {color: #fff; font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500}
section.join-cta-strip .strip a.learn-more {font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; font-size: 16px; position: absolute; right: 0; top: inherit; bottom: 8px}
section.join-cta-strip .btn-white {color: #e62e49; background-color: #fff; border-color: #fff}
@media (min-width: 768px) {section.join-cta-strip .strip {font-size: 22px; line-height: 32px}
section.join-cta-strip .strip a.learn-more {font-size: 18px}
}
@media (min-width: 992px) {section.join-cta-strip .strip a.learn-more {top: 8px}
}
section.join {background: #f2f2e6; position: relative; overflow: hidden}
section.join:before {content: ""; display: block; position: absolute; left: 0; right: 50%; top: 0; bottom: 0; background: #f6f6f6}
section.join > .container {background: #f6f6f6; padding-top: 25px; padding-bottom: 35px; overflow: hidden}
section.join .join-now-copy {position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px}
@media (min-width: 768px) {section.join .join-now-copy {float: left; width: 66.6666666667%}
}
section.join .join-now-copy:before {content: ''; position: absolute; top: -25px; left: 0; background-image: url("/images/reskin/pregnancy/join-banner.jpg"); background-repeat: no-repeat; background-size: cover; background-position: 50%; min-height: 300px; width: 100%}
section.join .join-now-copy:after {content: ""; position: absolute; left: 0; top: -25px; right: 0; bottom: -25px; background-image: -webkit-linear-gradient(left, #f6f6f6 30%, rgba(246, 246, 246, 0) 80%); background-image: -o-linear-gradient(left, #f6f6f6 30%, rgba(246, 246, 246, 0) 80%); background-image: linear-gradient(to right, #f6f6f6 30%, rgba(246, 246, 246, 0) 80%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF6F6F6', endColorstr='#00F6F6F6', GradientType=1)}
section.join .join-now-copy > h2 {font-size: 26px; line-height: 26px; color: #4d4d4d; font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; position: relative; z-index: 1}
section.join .join-now-copy > h2 strong {color: #e62e49; display: block}
section.join .join-now-copy > p {color: #333; max-width: 270px; margin-top: 20px; position: relative; text-shadow: 0 0 10px #fff; z-index: 1; margin-bottom: 20px}
section.join .join-now-form-container {position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; padding-top: 30px}
@media (min-width: 768px) {section.join .join-now-form-container {float: left; width: 33.3333333333%}
}
section.join .join-now-form-container:before {content: ""; position: absolute; background: #f2f2e6; top: 0; bottom: -35px; left: -10px; right: -15px}
section.join .join-now-form-container > h2 {font-family: 'Huggies Omnes Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; position: relative; font-size: 26px; line-height: 30px; text-align: center; margin-bottom: 25px}
section.join .join-now-form-container > h2 strong {font-size: 33px; color: #000}
section.join .join-now-form-container a {color: #e62e49}
@media (min-width: 480px) {section.join .join-now-copy > h2 {font-size: 40px; line-height: 43px}
section.join .join-now-copy > p {margin-bottom: 10.5px}
}
@media (min-width: 768px) {section.join .join-now-form-container {padding-top: 15px}
section.join .join-now-form-container:before {top: -25px}
section.join .join-now-copy:before {min-height: 436px; background-size: cover; background-position: 50%}
section.join .join-now-copy:after {display: none}
}
@media (min-width: 768px) {.banner--silos {height: 450px}
}
 @media (min-width: 768px) {.banner--silo-baby-care {height: 400px}
}
@media (max-width: 767px) {.banner--silo-baby-care .banner__container {padding-bottom: 200px}
}
@media (max-width: 767px) {.banner--silo-baby-care .banner__body:before {background-image: url("/images/banners/silos/baby-care-mobile.jpg")}
}
@media (min-width: 768px) {.banner--silo-baby-care .banner__body:before {background-image: url("/images/banners/silos/baby-care-desktop.jpg")}
}
@media (min-width: 768px) {.banner--silo-childbirth {height: 400px}
}
@media (max-width: 767px) {.banner--silo-childbirth .banner__container {padding-bottom: 200px}
}
@media (max-width: 767px) {.banner--silo-childbirth .banner__body:before {background-image: url("/images/banners/silos/childbirth-mobile.jpg")}
}
@media (min-width: 768px) {.banner--silo-childbirth .banner__body:before {background-image: url("/images/banners/silos/childbirth-desktop.jpg")}
}
@media (min-width: 768px) {.banner--silo-conception {height: 400px}
}
@media (max-width: 767px) {.banner--silo-conception .banner__container {padding-bottom: 200px}
}
@media (max-width: 767px) {.banner--silo-conception .banner__body:before {background-image: url("/images/banners/silos/conception-mobile.jpg")}
}
@media (min-width: 768px) {.banner--silo-conception .banner__body:before {background-image: url("/images/banners/silos/conception-desktop.jpg")}
}
@media (min-width: 768px) {.banner--silo-parenting {height: 400px}
}
@media (max-width: 767px) {.banner--silo-parenting .banner__container {padding-bottom: 200px}
}
@media (max-width: 767px) {.banner--silo-parenting .banner__body:before {background-image: url("/images/banners/silos/parenting-mobile.jpg")}
}
@media (min-width: 768px) {.banner--silo-parenting .banner__body:before {background-image: url("/images/banners/silos/parenting-desktop.jpg")}
}
@media (min-width: 768px) {.banner--silo-toddler {height: 400px}
}
@media (max-width: 767px) {.banner--silo-toddler .banner__container {padding-bottom: 199px}
}
@media (max-width: 767px) {.banner--silo-toddler .banner__body:before {background-image: url("/images/banners/silos/toddler-mobile.jpg")}
}
@media (min-width: 768px) {.banner--silo-toddler .banner__body:before {background-image: url("/images/banners/silos/toddler-desktop.jpg")}
}
@media (min-width: 768px) {.banner--products-index {height: 450px}
}
@media (max-width: 767px) {.banner--products-index .banner__container {padding-bottom: 220px}
}
@media (max-width: 767px) {.banner--products-index .banner__body:before {background-image: url("/images/banners/products/product-brand-index-nz-mobile.jpg")}
}
@media (min-width: 768px) {.banner--products-index .banner__body:before {background-image: url("/images/banners/products/product-brand-index-nz-desktop.jpg")}
}
@media (max-width: 767px) {.au .banner--products-index .banner__body:before {background-image: url("/images/banners/products/product-brand-index-au-mobile.jpg")}
}
@media (min-width: 768px) {.au .banner--products-index .banner__body:before {background-image: url("/images/banners/products/product-brand-index-au-desktop.jpg")}
}
@media (min-width: 768px) {.banner--products-newborn {height: 450px}
}
@media (max-width: 767px) {.banner--products-newborn .banner__container {padding-bottom: 280px}
}
@media (max-width: 767px) {.banner--products-newborn .banner__body:before {background-image: url("/images/banners/products/newborn-nappies-mobile2.jpg")}
}
@media (min-width: 768px) {.banner--products-newborn .banner__body:before {background-image: url("/images/banners/products/newborn-nappies-desktop2.jpg")}
}
@media (min-width: 768px) {.banner--products-nappies {height: 450px}
}
@media (max-width: 767px) {.banner--products-nappies .banner__container {padding-bottom: 284px}
}
@media (max-width: 767px) {.banner--products-nappies .banner__body:before {background-image: url("/images/banners/products/huggies-nappies-mobile.jpg")}
}
@media (min-width: 768px) {.banner--products-nappies .banner__body:before {background-image: url("/images/banners/products/huggies-nappies-desktop.jpg")}
}
@media (min-width: 768px) {.banner--products-nappies-regular {height: 450px}
}
@media (max-width: 767px) {.banner--products-nappies-regular .banner__container {padding-bottom: 264px}
}
@media (max-width: 767px) {.banner--products-nappies-regular .banner__body:before {background-image: url("/images/banners/products/huggies-nappies-regular-mobile.jpg")}
}
@media (min-width: 768px) {.banner--products-nappies-regular .banner__body:before {background-image: url("/images/banners/products/huggies-nappies-regular-desktop.jpg")}
}
@media (min-width: 768px) {.banner--products-nappies-ultra-dry {height: 450px}
}
@media (max-width: 767px) {.banner--products-nappies-ultra-dry .banner__container {padding-bottom: 280px}
}
@media (max-width: 767px) {.banner--products-nappies-ultra-dry .banner__body:before {background-image: url("/images/banners/products/huggies-nappies-ultra-dry-mobile2.jpg")}
}
@media (min-width: 768px) {.banner--products-nappies-ultra-dry .banner__body:before {background-image: url("/images/banners/products/huggies-nappies-ultra-dry-desktop2.jpg")}
}
@media (min-width: 768px) {.banner--products-nappies-ultimate {height: 450px}
}
@media (max-width: 767px) {.banner--products-nappies-ultimate .banner__container {padding-bottom: 250px}
}
@media (max-width: 767px) {.banner--products-nappies-ultimate .banner__body:before {background-image: url("/images/banners/products/huggies-nappies-ultimate-mobile2.jpg")}
}
@media (min-width: 768px) {.banner--products-nappies-ultimate .banner__body:before {background-image: url("/images/banners/products/huggies-nappies-ultimate-desktop2.jpg")}
}
@media (max-width: 767px) {.banner--products-nappies-ultimate .banner__body.unisex:before {background-image: url("/images/banners/products/huggies-nappies-ultimate-unisex-mobile.jpg")}
}
@media (min-width: 768px) {.banner--products-nappies-ultimate .banner__body.unisex:before {background-image: url("/images/banners/products/huggies-nappies-ultimate-unisex-desktop.jpg")}
}
@media (min-width: 768px) {.banner--products-nappies-essentials {height: 450px}
}
@media (max-width: 767px) {.banner--products-nappies-essentials .banner__container {padding-bottom: 294px}
}
@media (max-width: 767px) {.banner--products-nappies-essentials .banner__body:before {background-image: url("/images/banners/products/huggies-nappies-essentials-mobile.jpg")}
}
@media (min-width: 768px) {.banner--products-nappies-essentials .banner__body:before {background-image: url("/images/banners/products/huggies-nappies-essentials-desktop.jpg")}
}
@media (min-width: 768px) {.banner--products-nappy-pants {height: 450px}
}
@media (max-width: 767px) {.banner--products-nappy-pants .banner__container {padding-bottom: 261px}
}
@media (max-width: 767px) {.banner--products-nappy-pants .banner__body:before {background-image: url("/images/banners/products/nappy-pants-mobile.jpg")}
}
@media (min-width: 768px) {.banner--products-nappy-pants .banner__body:before {background-image: url("/images/banners/products/nappy-pants-desktop.jpg")}
}
@media (min-width: 768px) {.banner--products-nappy-pants-regular {height: 450px}
}
@media (max-width: 767px) {.banner--products-nappy-pants-regular .banner__container {padding-bottom: 252px}
}
@media (max-width: 767px) {.banner--products-nappy-pants-regular .banner__body:before {background-image: url("/images/banners/products/nappy-pants-regular-mobile.jpg")}
}
@media (min-width: 768px) {.banner--products-nappy-pants-regular .banner__body:before {background-image: url("/images/banners/products/nappy-pants-regular-desktop.jpg")}
}
@media (min-width: 768px) {.banner--products-nappy-pants-ultra-dry {height: 450px}
}
@media (max-width: 767px) {.banner--products-nappy-pants-ultra-dry .banner__container {padding-bottom: 325px}
}
@media (max-width: 767px) {.banner--products-nappy-pants-ultra-dry .banner__body:before {background-image: url("/images/banners/products/nappy-pants-ultra-dry-mobile2.jpg")}
}
@media (min-width: 768px) {.banner--products-nappy-pants-ultra-dry .banner__body:before {background-image: url("/images/banners/products/nappy-pants-ultra-dry-desktop2.jpg")}
}
@media (min-width: 768px) {.nz .banner--products-nappy-pants-ultra-dry .banner__body:before {background-image: url("/images/banners/products/nappy-pants-ultra-dry-desktop2-nz.jpg")}
}
@media (min-width: 768px) {.banner--products-nappy-pants-ultimate {height: 450px}
}
@media (max-width: 767px) {.banner--products-nappy-pants-ultimate .banner__container {padding-bottom: 310px}
}
@media (max-width: 767px) {.banner--products-nappy-pants-ultimate .banner__body:before {background-image: url("/images/banners/products/nappy-pants-ultimate-mobile2.jpg")}
}
@media (min-width: 768px) {.banner--products-nappy-pants-ultimate .banner__body:before {background-image: url("/images/banners/products/nappy-pants-ultimate-desktop2.jpg")}
}
@media (max-width: 767px) {.banner--products-nappy-pants-ultimate .banner__body.unisex:before {background-image: url("/images/banners/products/nappy-pants-ultimate-unisex-mobile.jpg")}
}
@media (min-width: 768px) {.banner--products-nappy-pants-ultimate .banner__body.unisex:before {background-image: url("/images/banners/products/nappy-pants-ultimate-unisex-desktop.jpg")}
}
@media (min-width: 768px) {.banner--products-wipes {height: 450px}
}
@media (max-width: 767px) {.banner--products-wipes .banner__container {padding-bottom: 229px}
}
@media (max-width: 767px) {.banner--products-wipes .banner__body:before {background-image: url("/images/banners/products/baby-wipes-mobile.jpg")}
}
@media (min-width: 768px) {.banner--products-wipes .banner__body:before {background-image: url("/images/banners/products/baby-wipes-desktop.jpg")}
}
@media (max-width: 767px) {.country-au .banner--products-wipes .banner__body:before {background-image: url("/images/banners/products/baby-wipes-mobile-au.jpg")}
}
@media (min-width: 768px) {.country-au .banner--products-wipes .banner__body:before {background-image: url("/images/banners/products/baby-wipes-desktop-au.jpg")}
}
@media (min-width: 768px) {.banner--products-wipes-gentle {height: 450px}
}
@media (max-width: 767px) {.banner--products-wipes-gentle .banner__container {padding-bottom: 229px}
}
@media (max-width: 767px) {.banner--products-wipes-gentle .banner__body:before {background-image: url("/images/banners/products/baby-wipes-gentle-mobile.jpg")}
}
@media (min-width: 768px) {.banner--products-wipes-gentle .banner__body:before {left: 40%; right: -40%; background-image: url("/images/banners/products/baby-wipes-gentle-desktop.jpg")}
}
@media (min-width: 768px) {.banner--products-pull-ups {height: 450px}
}
@media (max-width: 767px) {.banner--products-pull-ups .banner__container {padding-bottom: 283px}
}
@media (max-width: 767px) {.banner--products-pull-ups .banner__body:before {background-image: url("/images/banners/products/pull-ups-mobile.jpg")}
}
@media (min-width: 768px) {.banner--products-pull-ups .banner__body:before {background-image: url("/images/banners/products/pull-ups-desktop.jpg")}
}
@media (min-width: 768px) {.banner--products-little-swimmers {height: 450px}
}
@media (max-width: 767px) {.banner--products-little-swimmers .banner__container {padding-bottom: 197px}
}
@media (max-width: 767px) {.banner--products-little-swimmers .banner__body:before {background-image: url("/images/banners/products/little-swimmers-mobile.jpg")}
}
@media (min-width: 768px) {.banner--products-little-swimmers .banner__body:before {background-image: url("/images/banners/products/little-swimmers-desktop.jpg")}
}
@media (min-width: 768px) {.banner--products-drynites {height: 450px}
}
@media (max-width: 767px) {.banner--products-drynites .banner__container {padding-bottom: 254px}
}
@media (max-width: 767px) {.banner--products-drynites .banner__body:before {background-image: url("/images/banners/products/drynites-mobile.jpg")}
}
@media (min-width: 768px) {.banner--products-drynites .banner__body:before {background-image: url("/images/banners/products/drynites-desktop.jpg")}
}
@media (min-width: 768px) {.banner--promotions {height: 360px}
}
@media (max-width: 767px) {.banner--promotions .banner__container {padding-bottom: 220px}
}
@media (max-width: 767px) {.banner--promotions .banner__body:before {background-image: url("/images/banners/promotions/index-mobile.jpg")}
}
@media (min-width: 768px) {.banner--promotions .banner__body:before {background-image: url("/images/banners/promotions/index.jpg")}
}
@media (min-width: 768px) {.banner--my-huggies {height: 250px}
}
@media (max-width: 767px) {.banner--my-huggies .banner__container {padding-top: 15px; padding-bottom: 25px}
}
@media (min-width: 768px) {.banner--my-huggies .banner__container {padding-bottom: 20px}
}
@media (max-width: 767px) {.banner--my-huggies .banner__body:before {background-image: none}
}
@media (min-width: 768px) {.banner--my-huggies .banner__body:before {background-image: none}
}
.banner--my-huggies .banner__name {font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; font-size: 38px; margin: 20px 0 0 150px}
@media (max-width: 767px) {.banner--my-huggies .banner__name {margin: 20px 0 0 130px}
}
.banner--my-huggies .banner__status {font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 20px; margin: 0 0 0 150px}
@media (max-width: 767px) {.banner--my-huggies .banner__status {margin: 0 0 0 130px}
}
.banner--my-huggies .banner__image {position: absolute; top: 0; left: 0; border-radius: 50%; overflow: hidden; background: #fff}
@media (max-width: 767px) {.banner--my-huggies .banner__image {width: 80px; height: 80px; top: 10px; left: 30px}
.banner--my-huggies .banner__image img {max-width: 100%}
}
.banner--my-huggies .banner__edit {color: #d92032; font-size: 16px; display: block; position: absolute; top: 90px; left: 90px; border-radius: 50%; overflow: hidden; background: #fff; width: 30px; height: 30px; border: 1px solid #ccc; text-align: center; line-height: 28px; box-sizing: border-box}
.banner--my-huggies .banner__edit a {color: #d92032}
.banner--my-huggies .banner__edit a:hover {color: #d92032}
@media (max-width: 767px) {.banner--my-huggies .banner__edit {top: 60px}
}
.banner--my-huggies .banner__right-col {text-align: left; margin-top: 20px; margin-left: 150px}
@media (max-width: 767px) {.banner--my-huggies .banner__right-col {margin-left: 130px}
}
@media (min-width: 768px) {.banner--my-huggies .banner__right-col {text-align: right; margin-left: 0}
}
.banner--my-huggies .banner__progress {display: inline-block; font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 16px}
.banner--my-huggies .banner__progress strong {font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500}
.banner--my-huggies .banner__progress-bar {background: #fff; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 15px}
.banner__progress-complete {background-color: #d92032; height: 10px; transition: width .2s ease-in-out; width: 0}
@media (min-width: 769px) {.crumb + .banner {margin-top: -57px}
}
.banner {display: table; width: 100%}
@media (max-width: 767px) {.banner__container {padding-bottom: 284px}
}
.banner__body {background-color: #f0f0f0; background-repeat: no-repeat; background-position: bottom; position: relative; display: table-cell; vertical-align: middle}
@media (min-width: 768px) {.banner__body {position: relative; overflow: hidden}
}
.banner__body:before {content: ''; display: block; position: absolute; top: 0; bottom: 0; background-repeat: no-repeat}
@media (max-width: 767px) {.banner__body:before {left: 0; right: 0; background-image: url("/images/banners/default-mobile.jpg"); background-position: bottom}
}
@media (min-width: 768px) {.banner__body:before {left: 50%; right: -50%; background-image: url("/images/banners/default-desktop.jpg"); background-position: left}
}
.banner__title {font-weight: 900; font-family: 'Huggies Omnes Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 35px}
@media (min-width: 768px) {.banner__title {font-size: 45px}
}
.banner__title strong {font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500}
.banner__subtitle {text-transform: uppercase; font-size: 20px; font-weight: 900; color: #e0505e}
.banner__body p, .banner__p {font-family: 'Huggies Omnes Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 20px; margin-top: 40px}
@media (max-width: 990px) {.banner__body p, .banner__p {font-size: 18px}
}
.banner__body p + p, .banner__p + p {margin-top: 20px}
.promotion-rebrand .banner .section-breadcrumb .breadcrumb {border: none}
.promotion-rebrand .banner .section-breadcrumb .breadcrumb li {font-size: 16px}
.promotion-rebrand .banner .section-breadcrumb .breadcrumb li.current {color: #939393}
.product-rebrand .banner .banner-body {height: 800px; background-repeat: no-repeat; background-position: bottom !important; background-color: #f0f0f0; background-size: 100% !important}
@media (max-width: 550px) {.product-rebrand .banner .banner-body {height: 640px}
}
@media (min-width: 768px) {.product-rebrand .banner .banner-body {height: 500px}
}
@media (min-width: 768px) {.product-rebrand .banner .banner-body {background-size: cover !important}
}
@media (min-width: 1556px) {.product-rebrand .banner .banner-body {background-size: contain !important}
}
.product-rebrand .banner .banner-body .title {font-size: 40px}
@media (min-width: 768px) {.product-rebrand .banner .banner-body .title {font-size: 50px}
}
.product-rebrand .banner .banner-body .title strong {font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500}
.product-rebrand .banner .title {font-weight: 900; font-family: 'Huggies Omnes Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 35px !important; margin-top: 25px !important}
@media (min-width: 768px) {.product-rebrand .banner .title {font-size: 45px !important; margin-top: 50px !important}
}
@media (min-width: 768px) {.product-rebrand .banner .title {margin-top: 80px}
}
.product-rebrand .banner .sub-title {text-transform: uppercase; font-size: 20px; font-weight: 900; color: #e0505e}
.product-rebrand .banner .sub-title.gold {color: #b88c48}
.product-rebrand .banner .sub-title-wrapper.gold, .product-rebrand .banner .sub-title-wrapper.red, .product-rebrand .banner .sub-title-wrapper.pink, .product-rebrand .banner .sub-title-wrapper.blue, .product-rebrand .banner .sub-title-wrapper.grey {padding: 3px; width: 70%; min-width: 295px; max-width: 315px; text-align: center}
.product-rebrand .banner .sub-title-wrapper.gold {background: linear-gradient(to right, #d9a85c 15%, #edd587 30%, #e0b267 45%, #c58c3f 100%)}
.product-rebrand .banner .sub-title-wrapper.red {background: linear-gradient(to right, #ec4555 15%, #ff7784 30%, #e8394b 45%, #c21829 100%)}
.product-rebrand .banner .sub-title-wrapper.pink {background: linear-gradient(to right, #f631a8 15%, #f664bd 30%, #ed0090 45%, #e2028a 100%)}
.product-rebrand .banner .sub-title-wrapper.blue {background: linear-gradient(to right, #3cc3ef 15%, #62c7f1 30%, #26abe3 45%, #0f9eda 100%)}
.product-rebrand .banner .sub-title-wrapper.grey {background: linear-gradient(to right, #b8c4cc 15%, #f1eeed 30%, #a3b4c0 45%, #88a0af 100%)}
.product-rebrand .banner .sub-title-wrapper .sub-title.gold, .product-rebrand .banner .sub-title-wrapper .sub-title.red, .product-rebrand .banner .sub-title-wrapper .sub-title.pink, .product-rebrand .banner .sub-title-wrapper .sub-title.blue, .product-rebrand .banner .sub-title-wrapper .sub-title.grey {color: #fff; padding-top: 5px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px; font-size: 20px; text-shadow: 2px 2px rgba(0, 0, 0, 0.25); margin: 0}
.product-rebrand .banner .sub-title-wrapper .sub-title.gold {background: linear-gradient(to right, #c88f42 0%, #ddab6c 100%)}
.product-rebrand .banner .sub-title-wrapper .sub-title.red {background: linear-gradient(to right, #d92032 0%, #f42c40 100%)}
.product-rebrand .banner .sub-title-wrapper .sub-title.pink {background: linear-gradient(to right, #ed0090 0%, #fb4fb7 100%)}
.product-rebrand .banner .sub-title-wrapper .sub-title.blue {background: linear-gradient(to right, #26abe3 0%, #44bff2 100%)}
.product-rebrand .banner .sub-title-wrapper .sub-title.grey {background: linear-gradient(to right, #859ead 0%, #d5dbe0 100%)}
.product-rebrand .banner .section-breadcrumb .breadcrumb {border: none}
.product-rebrand .banner .section-breadcrumb .breadcrumb li {font-size: 16px}
.product-rebrand .banner .section-breadcrumb .breadcrumb li.current {color: #939393}
.product-rebrand p, .product-rebrand ol, .product-rebrand ul, .product-rebrand li {font-family: 'Huggies Omnes Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 18px}
.product-rebrand .bg-gold-light {background-color: #FBEEE1 !important}
.product-rebrand .content-title {line-height: 0.5; text-transform: uppercase; font-size: 16px; font-weight: 900; color: #d92032; text-align: center; margin-bottom: 20px; line-height: 1.3em}
@media (min-width: 768px) {.product-rebrand .content-title {font-size: 20px}
}
.product-rebrand .content-title.gold {color: #b88c48}
.product-rebrand .content-title strong {font-family: 'Huggies Omnes Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold}
.product-rebrand .shadow-card {box-shadow: 0 0 10px 0 #c9c9c9; margin-bottom: 20px; border-radius: 10px}
.product-rebrand .shadow-card.height-match {min-height: 280px}
.product-rebrand .shadow-card.height-match-336 {min-height: 336px}
.product-rebrand .shadow-card .center {text-align: center}
.product-rebrand .shadow-card .col {padding: 0 !important}
.product-rebrand .shadow-card .card-banner {height: 250px; background-size: 100%; background-repeat: no-repeat; background-position: top; border-radius: inherit}
@media (max-width: 768px) {.product-rebrand .shadow-card .card-banner {height: 380px}
}
@media (max-width: 520px) {.product-rebrand .shadow-card .card-banner {height: 250px}
}
@media (max-width: 450px) {.product-rebrand .shadow-card .card-banner {height: 190px}
}
.product-rebrand .shadow-card .card-body {text-align: center; padding-top: 35px; padding-bottom: 25px; padding-left: 60px; padding-right: 60px}
.product-rebrand .shadow-card .card-body p {font-size: 18px}
.product-rebrand .shadow-card .card-block-content {padding: 30px; text-align: center !important}
.product-rebrand .shadow-card .card-block-content h2 {color: #000 !important; font-family: 'Huggies Omnes Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 30px}
.product-rebrand .shadow-card .card-block-content h3 {color: #e62e49 !important; font-size: 18px}
.product-rebrand .shadow-card .card-block-content h2, .product-rebrand .shadow-card .card-block-content h3, .product-rebrand .shadow-card .card-block-content p, .product-rebrand .shadow-card .card-block-content ol, .product-rebrand .shadow-card .card-block-content ul, .product-rebrand .shadow-card .card-block-content li {text-align: left !important}
.product-rebrand .shadow-card .card-block-content hr.dotted {border-top: 2px dotted #eeeeee !important}
.product-rebrand .shadow-card .card-block-content a {color: #3b73b9 !important}
.product-rebrand .shadow-card .card-block-content strong {color: #000 !important}
.product-rebrand .shadow-card .card-block-content li {font-family: 'Huggies Omnes Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 16px}
.product-rebrand .shadow-card .devide-right {border-right: solid; border-color: #e7e7e7; border-width: 2px}
.product-rebrand .shadow-card p {font-family: 'Huggies Omnes Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 18px}
.product-rebrand .btn {margin-top: 10px; color: #fff !important; background-color: #db1c2b; font-size: 16px; padding-top: 8px; padding-bottom: 8px; padding-left: 20px; padding-right: 20px}
@media (min-width: 768px) {.product-rebrand .btn {font-size: 20px; padding-top: 10px; padding-bottom: 10px; padding-left: 35px; padding-right: 35px}
}
.product-rebrand .btn.back-to-top {background-color: #f7f7f7 !important; color: #a9a9a9 !important; font-size: 15px !important}
.product-rebrand .size-guide {padding: 20px}
.product-rebrand .size-guide h2 {color: #000 !important; font-size: 23px; margin-top: 0}
.product-rebrand .size-guide table {width: 100%; font-size: 20px; margin-top: -50px}
.product-rebrand .size-guide table tr {height: 60px}
.product-rebrand .size-guide table td {font-family: 'Huggies Omnes Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; text-align: center; padding: 5px; width: 100%}
.product-rebrand .size-guide table td.product {font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500}
.product-rebrand .size-guide table td.content {background-color: #f6f6f6; border-left: solid; border-right: solid; border-top: solid; border-color: #fff; border-width: 8px; border-top-color: #eeeeee; border-top-width: 2px}
.product-rebrand .size-guide table td.bottom {border-bottom-left-radius: 20px; border-bottom-right-radius: 20px}
.product-rebrand .size-guide table td.top {padding-top: 50px}
.product-rebrand .size-guide table .jelly-head {color: #fff; font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; text-align: center; padding: 25px; background-image: url("/images/products/icons/bean.svg"); background-repeat: no-repeat; background-position: center; position: relative; top: 50px}
.product-rebrand .size-guide.nappy-count .x-scroll {overflow-x: scroll}
.product-rebrand .size-guide.nappy-count .jelly-head {background-size: contain; top: 60px}
.product-rebrand .size-guide.nappy-count .jelly-head .content {position: relative; top: 6px}
.product-rebrand .size-guide.nappy-count table {width: 100%; position: relative; top: -15px}
.product-rebrand .size-guide.nappy-count th, .product-rebrand .size-guide.nappy-count td {min-width: 120px}
.product-rebrand .size-guide.nappy-count small {font-size: 70%; position: relative; top: -10px}
.product-rebrand .size-guide.nappy-count .size {font-family: 'Huggies Omnes Semibold', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 600; font-size: 15px}
.product-rebrand .size-guide.nappy-count .size + .count {margin-top: -8px}
.product-rebrand .size-guide.nappy-count .count {font-family: 'Huggies Omnes Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; font-size: 26px}
.product-rebrand .size-guide.nappy-count .nil {color: #d3d3d3}
.product-rebrand .size-guide.nappy-count .separated .content {border-top: solid; border-color: #fff; border-top-width: 5px; border-radius: 20px}
.product-rebrand .size-guide.nappy-count.narrow th, .product-rebrand .size-guide.nappy-count.narrow td {min-width: 109px}
.product-rebrand .size-guide.nappy-count.narrow th:nth-child(1), .product-rebrand .size-guide.nappy-count.narrow td:nth-child(1) {min-width: 98px}
.product-rebrand .size-guide .footnote {text-align: right; font-size: 14px; color: #999}
.product-rebrand .text-card {padding: 20px; font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500}
.product-rebrand .text-card h2 {color: #000 !important; font-size: 23px; margin-top: 0}
.product-rebrand .text-card a {color: #db1c2b !important}
.product-rebrand .text-card img {padding-right: 10px; padding-bottom: 10px}
.product-rebrand .comparison {padding: 20px; min-height: 500px}
.product-rebrand .comparison h2 {color: #000 !important; font-size: 23px; margin-top: 0}
.product-rebrand .comparison a {font-weight: 900; color: #db1c2b !important}
.product-rebrand .comparison img {padding-bottom: 10px; margin-bottom: -30px}
@media (max-width: 380px) {.product-rebrand .comparison img {width: 100%}
}
.product-rebrand .comparison .product-type {min-height: 350px; margin-left: 10px; margin-right: 10px; border-radius: 10px; position: relative; top: 50px}
@media (max-width: 768px) {.product-rebrand .comparison .product-type {margin-bottom: 75px}
}
.product-rebrand .comparison .product-type img {position: relative; top: -50px}
.product-rebrand .comparison .content {padding-left: 20px; padding-right: 20px}
@media (min-width: 400px) {.product-rebrand .comparison .content {padding-left: 80px; padding-right: 80px}
}
.product-rebrand .comparison .content hr {margin-top: 15px !important; margin-bottom: 15px !important}
.product-rebrand .sample-card {padding: 20px}
.product-rebrand .sample-card h2 {color: #d92032 !important; font-size: 25px; margin-top: 5px; margin-bottom: 25px}
.product-rebrand .sample-card .btn {position: relative; top: -40px}
.product-rebrand .sample-card#slim .btn {position: relative; top: 0}
.product-rebrand .sample-banner {margin: 10px; padding: 50px; background-color: #f6f6f6; border-radius: 10px}
.product-rebrand .sample-banner img {width: 215px; height: 135px}
.product-rebrand .sample-card-mini {padding: 20px; text-align: center; background-repeat: no-repeat; background-size: 100%}
@media (max-width: 768px) {.product-rebrand .sample-card-mini {background-position: 0px -70px}
}
@media (max-width: 690px) {.product-rebrand .sample-card-mini {background-position: 0px 0px}
}
.product-rebrand .sample-card-mini h2 {color: #fff !important; font-size: 20px; margin-top: 0}
@media (max-width: 450px) {.product-rebrand .sample-card-mini h2 {font-size: 17px}
}
.product-rebrand .sample-card-mini h3 {color: #fff; font-size: 20px; margin-top: 0; font-family: 'Huggies Omnes Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300}
@media (max-width: 450px) {.product-rebrand .sample-card-mini h3 {font-size: 17px}
}
.product-rebrand .sample-card-mini a {font-size: 20px}
@media (max-width: 768px) {.product-rebrand .sample-card-mini a {margin-top: 160px}
}
@media (max-width: 690px) {.product-rebrand .sample-card-mini a {margin-top: 220px}
}
@media (max-width: 550px) {.product-rebrand .sample-card-mini a {margin-top: 160px}
}
@media (max-width: 450px) {.product-rebrand .sample-card-mini a {margin-top: 120px}
}
@media (min-width: 768px) {.product-rebrand .sample-card-mini a {margin-top: 130px}
}
.product-rebrand .full-background-card {background-size: cover; background-repeat: no-repeat; border-radius: 10px !important}
.product-rebrand .full-background-card .banner-body {width: 100%; padding: 60px 20px 60px 20px !important}
.product-rebrand .full-background-card .banner-body p {font-family: 'Huggies Omnes Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; color: #fff !important}
.product-rebrand .full-background-card .banner-body h2 {padding: 0 20px 0 0; color: #fff !important; margin-top: 0}
@media (max-width: 768px) {.product-rebrand .full-background-card .banner-body h2 {margin-bottom: 30px !important}
}
@media (max-width: 768px) {.product-rebrand .full-background-card .banner-body {text-align: center !important}
}
.product-rebrand .product-card .banner-body {width: 100%; padding: 20px !important; display: table; height: 150px; text-align: center}
.product-rebrand .product-card .banner-body strong {font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; color: #000 !important; font-weight: 900 !important}
@media (min-width: 768px) {.product-rebrand .product-card .banner-body {text-align: left}
}
@media (min-width: 450px) {.product-rebrand .product-card .banner-body {height: 350px}
}
.product-rebrand .product-card .banner-body h2 {color: #fc3934 !important; font-family: 'Huggies Omnes Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300}
.product-rebrand .product-card .banner-body h2 strong {color: #fc3934 !important; font-family: 'Huggies Omnes Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal}
.product-rebrand .product-card .banner-body h2.text-purple {color: #90c !important}
.product-rebrand .product-card .banner-body h2.text-purple strong {color: #90c !important}
.product-rebrand .product-card .banner-body .right {text-align: right}
.product-rebrand .product-card .banner-body .icon {max-width: 125px}
.product-rebrand .product-card .banner-image {border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; background-size: cover; height: 250px; background-repeat: no-repeat; background-position: bottom; border-radius: 0}
.product-rebrand .product-card .banner-image.bg-contain {background-size: contain !important}
.product-rebrand .product-card .banner-image.rounded-right {border-radius: 0 10px 10px 0 !important}
.product-rebrand .product-card .banner-image.rounded-left {border-radius: 10px 0 0 10px !important}
.product-rebrand .product-card .banner-image.bg-cover {background-size: cover !important}
.product-rebrand .product-card .banner-image.bg-y-top {background-position-y: top !important}
.product-rebrand .product-card .banner-image.bg-y-bottom {background-position-y: bottom !important}
.product-rebrand .product-card .banner-image.bg-y-center {background-position-y: center !important}
.product-rebrand .product-card .banner-image.bg-x-top {background-position-x: top !important}
.product-rebrand .product-card .banner-image.bg-x-bottom {background-position-x: bottom !important}
.product-rebrand .product-card .banner-image.bg-x-center {background-position-x: center !important}
@media (min-width: 768px) {.product-rebrand .product-card .banner-image {border-radius: 10px}
}
@media (min-width: 450px) {.product-rebrand .product-card .banner-image {background-position: center; height: 350px}
}
@media (max-width: 991px) {.product-rebrand .product-card .banner-image.bg-sm-contain {background-size: contain !important}
.product-rebrand .product-card .banner-image.bg-y-sm-top {background-position-y: top !important}
.product-rebrand .product-card .banner-image.bg-y-sm-bottom {background-position-y: bottom !important}
.product-rebrand .product-card .banner-image.bg-y-sm-center {background-position-y: center !important}
.product-rebrand .product-card .banner-image.bg-x-sm-top {background-position-x: top !important}
.product-rebrand .product-card .banner-image.bg-x-sm-bottom {background-position-x: bottom !important}
.product-rebrand .product-card .banner-image.bg-x-sm-center {background-position-x: center !important}
}
.product-rebrand .product-card#slim .banner-body, .product-rebrand .product-card.slim .banner-body {height: 205px}
.product-rebrand .product-card#slim .banner-image, .product-rebrand .product-card.slim .banner-image {border-radius: 0; background-size: cover !important; background-position: top}
@media (min-width: 450px) {.product-rebrand .product-card#slim .banner-image, .product-rebrand .product-card.slim .banner-image {height: 205px}
}
@media (max-width: 767px) {.product-rebrand .product-card#slim .banner-image, .product-rebrand .product-card.slim .banner-image {height: 260px}
}
@media (max-width: 450px) {.product-rebrand .product-card#slim .banner-image, .product-rebrand .product-card.slim .banner-image {height: 150px; background-size: contain !important}
}
.product-rebrand .product-card.medium .banner-body {height: 220px}
.product-rebrand .product-card.medium .banner-image {border-radius: 0; background-size: cover !important; background-position: top}
@media (min-width: 450px) {.product-rebrand .product-card.medium .banner-image {height: 220px}
}
@media (max-width: 767px) {.product-rebrand .product-card.medium .banner-image {height: 260px}
}
@media (max-width: 450px) {.product-rebrand .product-card.medium .banner-image {height: 200px; background-size: contain !important}
}
.product-rebrand .product-card.medium .banner-image.bg-contain {background-size: contain !important}
.product-rebrand .verticle-middle {display: table-cell; vertical-align: middle}
@media (min-width: 768px) {.product-rebrand .blur-left {box-shadow: 40px 0 45px 0 white inset}
.product-rebrand .blur-right {box-shadow: -40px 0 45px 0 white inset}
}
.product-rebrand .thin-content-wrapper {background-color: #fff; border-radius: 5px}
.product-rebrand .shadow-card#three-way-care {background: linear-gradient(to right, #d29d49 35%, #f9edb4 55%, #f9edb4 65%, #d29d49 85%); padding: 5px}
.product-rebrand .shadow-card#three-way-care .text-card {padding: 0 !important}
.product-rebrand .shadow-card#three-way-care .col {padding: 20px !important}
@media (min-width: 768px) {.product-rebrand .shadow-card#three-way-care .col {min-height: 365px}
}
@media (max-width: 990px) {.product-rebrand .shadow-card#three-way-care .icon {max-width: 60px}
}
.product-rebrand .shadow-card#three-way-care .icon-right {float: right; position: relative; top: 2px; max-width: 60px}
.product-rebrand .shadow-card#three-way-care .icon-right.double-icon {max-width: 120px}
.product-rebrand .shadow-card#three-way-care .middle {border-left: solid; border-right: solid; border-width: 2px; border-color: #e3c179}
@media (max-width: 768px) {.product-rebrand .shadow-card#three-way-care .middle {border-left: none; border-right: none; border-top: solid; border-bottom: solid; border-width: 2px; border-color: #e3c179}
}
.product-rebrand .shadow-card#three-way-care .content {margin-bottom: 40px}
.product-rebrand .shadow-card#three-way-care h3 {color: #c39245; font-size: 21px; min-height: 60px}
.product-rebrand .shadow-card#three-way-care small {font-size: 15px; color: #b6b6b6; position: relative; top: 25px}
@media (max-width: 768px) {.product-rebrand .center-mobile {text-align: center}
}
@media (max-width: 768px) {.product-rebrand .desktop-only {display: none}
}
.product-rebrand .faq-card table {text-align: left}
.product-rebrand .faq-card table td {padding: 5px; border-style: solid; border-width: 1px}
.product-rebrand .faq-card strong {font-family: 'Huggies Omnes Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500}