<<<<<<< HEAD @font-face{font-family:"Din Pro Condensed";font-style:normal;font-weight:bold;src:url(../fonts/DINPro-CondensedBold.woff2),url(../fonts/DINPro-CondensedBold.woff)}@font-face{font-family:"Din Pro";font-style:normal;font-weight:400;src:url(../fonts/DINPro-Regular.woff2),url(../fonts/DINPro-Regular.woff)}@font-face{font-family:"Din Pro";font-style:normal;font-weight:500;src:url(../fonts/DINPro-Medium.woff2),url(../fonts/DINPro-Medium.woff)}@font-face{font-family:"Din Pro";font-style:normal;font-weight:700;src:url(../fonts/DINPro-Bold.woff2),url(../fonts/DINPro-Bold.woff)}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;outline:none}html,body{width:100%;margin:0 !important;-webkit-font-smoothing:antialiased}button{background:none;border:0}figure{font-size:0}picture{display:block;line-height:0}li{list-style:none}a{text-decoration:none}input{background-color:transparent;border:none;border-radius:0;outline:none;-webkit-appearance:none}input::-webkit-contacts-auto-fill-button{position:absolute;right:0;display:none;visibility:hidden;pointer-events:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type="number"]{-moz-appearance:textfield}textarea{background-color:transparent;border:none;border-radius:0;outline:none;resize:none}hr{border:none}h1,h2,h3,h4,h5,h6,em,strong,dl,dt,dd{margin:0;padding:0;font:inherit;vertical-align:baseline;border:0}.container{max-width:1216px;margin:0 auto}@media only screen and (max-width: 1439px){.container{max-width:1120px}}@media only screen and (max-width: 1279px){.container{max-width:944px}}@media only screen and (max-width: 1023px){.container{max-width:704px}}@media only screen and (max-width: 767px){.container{padding:0 20px}}section{padding-top:56px;padding-bottom:56px}@media only screen and (max-width: 1279px){section{padding-top:56px}}@media only screen and (max-width: 1023px){section{padding-top:32px}}@media only screen and (max-width: 1279px){section{padding-bottom:56px}}@media only screen and (max-width: 1023px){section{padding-bottom:32px}}.title{margin-bottom:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0;font-family:"Din Pro Condensed", Helvetica, Arial, sans-serif;color:#ec001a;font-weight:bold;font-size:70px;line-height:78px;text-align:center;text-transform:uppercase}@media only screen and (max-width: 1279px){.title{margin-bottom:24px}}@media only screen and (max-width: 1023px){.title{margin-bottom:16px}}.title:before,.title:after{content:"";-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;width:50px;height:5px;background-color:#ec001a}.title:before{margin-right:25px}.title:after{margin-left:25px}@media only screen and (max-width: 1279px){.title{font-size:54px;line-height:58px}}@media only screen and (max-width: 1023px){.title{font-size:40px;line-height:48px}}@media only screen and (max-width: 767px){.title{font-size:26px;line-height:30px}.title:before,.title:after{width:32px;height:3px}.title:before{margin-right:16px}.title:after{margin-left:16px}}.header{padding-top:32px;padding-bottom:48px;font-family:"Din Pro Condensed", Helvetica, Arial, sans-serif;color:#333;background-image:url("../img/header-top.png");background-repeat:no-repeat;background-position:0 0;background-size:contain}@media only screen and (max-width: 1279px){.header{padding-top:32px}}@media only screen and (max-width: 1023px){.header{padding-top:24px}}@media only screen and (max-width: 1279px){.header{padding-bottom:48px}}@media only screen and (max-width: 1023px){.header{padding-bottom:32px}}.header .container{margin-top:100px;background-image:url("../img/header-bg.png");background-repeat:no-repeat;background-position:right 0 bottom 0;background-size:550px 335px}.header .container img{width:60%}@media only screen and (max-width: 1439px){.header .container{background-size:380px 300px}}@media only screen and (max-width: 1279px){.header .container{background-size:300px 245px}}@media only screen and (max-width: 1023px){.header .container{margin-top:0;min-height:275px;background-position:right 0 bottom 0;background-size:250px 220px}}@media only screen and (max-width: 767px){.header .container{min-height:275px;background-size:200px 120px}}@media only screen and (max-width: 767px){.header__img--dogs{display:none}}.header__img--dogs-xs{display:none}@media only screen and (max-width: 767px){.header__img--dogs-xs{display:block;width:100%;padding:0 25px}}.header__img{margin-left:200px}@media only screen and (max-width: 1279px){.header__img{margin-left:150px}}@media only screen and (max-width: 1023px){.header__img{width:150px;margin-left:0;float:right}}@media only screen and (max-width: 767px){.header__img{width:100px}}.header__title{margin-top:40px;margin-bottom:8px;font-size:56px;line-height:60px;color:#ec001a;text-transform:uppercase}@media only screen and (max-width: 1279px){.header__title{margin-top:40px}}@media only screen and (max-width: 1023px){.header__title{margin-top:32px}}@media only screen and (max-width: 1279px){.header__title{margin-bottom:8px}}@media only screen and (max-width: 1023px){.header__title{margin-bottom:8px}}@media only screen and (max-width: 1439px){.header__title{font-size:56px;line-height:60px}}@media only screen and (max-width: 1279px){.header__title{font-size:56px;line-height:70px}}@media only screen and (max-width: 1023px){.header__title{padding-top:0;font-size:44px;line-height:48px}}@media only screen and (max-width: 767px){.header__title{padding-top:0;font-size:34px;line-height:38px}}.header__subtitle{margin-bottom:16px;font-size:42px;line-height:52px;text-transform:uppercase}@media only screen and (max-width: 1279px){.header__subtitle{margin-bottom:16px}}@media only screen and (max-width: 1023px){.header__subtitle{margin-bottom:8px}}@media only screen and (max-width: 1439px){.header__subtitle{font-size:40px;line-height:50px}}@media only screen and (max-width: 1279px){.header__subtitle{font-size:34px;line-height:44px}}@media only screen and (max-width: 1023px){.header__subtitle{font-size:22px;line-height:28px}}@media only screen and (max-width: 767px){.header__subtitle{width:200px;font-size:22px;line-height:24px}}.header__text{font-size:26px;line-height:30px;text-transform:uppercase}@media only screen and (max-width: 1439px){.header__text{font-size:24px;line-height:28px}}@media only screen and (max-width: 1279px){.header__text{width:375px}}@media only screen and (max-width: 1023px){.header__text{width:250px}}@media only screen and (max-width: 767px){.header__text{width:120px;font-size:18px;line-height:22px}}.special{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:"Din Pro", Helvetica, Arial, sans-serif;color:#333}@media only screen and (max-width: 1023px){.special{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}}.special__img{width:600px;height:auto}@media only screen and (max-width: 1439px){.special__img{width:500px}}@media only screen and (max-width: 1279px){.special__img{width:400px}}@media only screen and (max-width: 1023px){.special__img{width:100%}}.special__info{padding-left:64px}@media only screen and (max-width: 1279px){.special__info{padding-left:64px}}@media only screen and (max-width: 1023px){.special__info{padding-left:48px}}@media only screen and (max-width: 1023px){.special__info{padding-left:0}}.special__title{margin-bottom:16px;font-weight:bold;font-size:32px;line-height:40px}@media only screen and (max-width: 1279px){.special__title{margin-bottom:16px}}@media only screen and (max-width: 1023px){.special__title{margin-bottom:8px}}@media only screen and (max-width: 1279px){.special__title{font-size:28px;line-height:36px}}@media only screen and (max-width: 1023px){.special__title{font-size:28px;line-height:32px}}@media only screen and (max-width: 767px){.special__title{font-size:24px;line-height:28px}}.special__subtitle{margin-bottom:8px;font-weight:bold;font-size:24px;line-height:28px}@media only screen and (max-width: 1279px){.special__subtitle{margin-bottom:8px}}@media only screen and (max-width: 1023px){.special__subtitle{margin-bottom:8px}}@media only screen and (max-width: 1023px){.special__subtitle{font-size:22px;line-height:26px}}@media only screen and (max-width: 767px){.special__subtitle{font-size:18px;line-height:22px}}.special__text{font-weight:bold;font-size:16px;line-height:20px;margin-bottom:8px}@media only screen and (max-width: 1023px){.special__text{font-size:14px;line-height:18px}}.tabs{font-family:"Din Pro", Helvetica, Arial, sans-serif;font-weight:400;color:#333}@media only screen and (max-width: 767px){.tabs{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.tabs__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:560px;margin:0 auto;margin-bottom:40px}@media only screen and (max-width: 1279px){.tabs__buttons{margin-bottom:40px}}@media only screen and (max-width: 1023px){.tabs__buttons{margin-bottom:32px}}@media only screen and (max-width: 767px){.tabs__buttons{margin-top:40px;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:0}}@media only screen and (max-width: 767px) and (max-width: 1279px){.tabs__buttons{margin-top:40px}}@media only screen and (max-width: 767px) and (max-width: 1023px){.tabs__buttons{margin-top:32px}}.tabs__button{width:250px;height:50px;padding:8px 12px;font-size:14px;line-height:16px;text-transform:uppercase;border:1px solid #333;border-radius:30px;cursor:pointer;-webkit-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease}.tabs__button:hover{color:#fff;background-color:#333}@media only screen and (max-width: 767px){.tabs__button:first-child{margin-bottom:8px}}@media only screen and (max-width: 767px) and (max-width: 1279px){.tabs__button:first-child{margin-bottom:8px}}@media only screen and (max-width: 767px) and (max-width: 1023px){.tabs__button:first-child{margin-bottom:8px}}.tabs__needs,.tabs__benefits{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;min-height:440px;background-repeat:no-repeat;background-position:300px}@media only screen and (max-width: 1439px){.tabs__needs,.tabs__benefits{background-position:265px}}@media only screen and (max-width: 1279px){.tabs__needs,.tabs__benefits{background-size:350px}}@media only screen and (max-width: 1023px){.tabs__needs,.tabs__benefits{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;background-position:center bottom;background-size:200px}}.tabs__needs{background-image:url("../img/kitten-inner.png")}.tabs__benefits{display:none;background-image:url("../img/benefits-kitten.png");background-size:575px;background-position:300px}@media only screen and (max-width: 1439px){.tabs__benefits{background-position:245px}}@media only screen and (max-width: 1279px){.tabs__benefits{background-size:500px;background-position:240px}}@media only screen and (max-width: 1023px){.tabs__benefits{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;background-position:center bottom;background-size:400px}}@media only screen and (max-width: 767px){.tabs__benefits{background-position:-40px 200px;background-size:300px}}.tabs__benefits-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.tabs-content__benefits-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.tabs-show{display:-webkit-box;display:-ms-flexbox;display:flex}.tabs__needs-text{padding-left:24px;font-size:18px;line-height:20px;color:#ec001a}@media only screen and (max-width: 1279px){.tabs__needs-text{padding-left:24px}}@media only screen and (max-width: 1023px){.tabs__needs-text{padding-left:16px}}@media only screen and (max-width: 1279px){.tabs__needs-text{font-size:20px;line-height:24px}}@media only screen and (max-width: 1023px){.tabs__needs-text{font-size:18px;line-height:22px}}@media only screen and (max-width: 767px){.tabs__needs-text{font-size:14px;line-height:16px}}.tabs__benefits-text{padding-left:16px;font-weight:bold;font-size:18px;line-height:30px;text-transform:uppercase;color:#f1759b}@media only screen and (max-width: 1279px){.tabs__benefits-text{padding-left:16px}}@media only screen and (max-width: 1023px){.tabs__benefits-text{padding-left:8px}}@media only screen and (max-width: 1279px){.tabs__benefits-text{font-size:20px;line-height:24px}}@media only screen and (max-width: 1023px){.tabs__benefits-text{padding-left:0;font-size:18px;line-height:22px;text-align:center}}@media only screen and (max-width: 767px){.tabs__benefits-text{width:125px;font-size:12px;line-height:14px}}.tabs-needs__text-box span,.tabs__needs-list span{position:relative;padding:28px 38px;font-weight:bold;font-size:40px;line-height:40px;color:#fff;background-color:#ec001a;border-radius:50%}.tabs-needs__text-box span:after,.tabs__needs-list span:after{position:absolute;content:"";top:-6px;left:-6px;width:110px;height:108px;border-radius:50%;border:3px solid #ec001a}@media only screen and (max-width: 1279px){.tabs-needs__text-box span,.tabs__needs-list span{padding:18px 27px;font-size:34px;line-height:34px}.tabs-needs__text-box span:after,.tabs__needs-list span:after{top:-6px;left:-5px;width:82px;height:82px}}@media only screen and (max-width: 1023px){.tabs-needs__text-box span,.tabs__needs-list span{padding:14px 20px;font-size:22px;line-height:24px}.tabs-needs__text-box span:after,.tabs__needs-list span:after{top:-5px;left:-5px;width:62px;height:62px}}@media only screen and (max-width: 767px){.tabs-needs__text-box span,.tabs__needs-list span{padding:8px 14px}.tabs-needs__text-box span:after,.tabs__needs-list span:after{top:-5px;left:-5px;width:50px;height:50px}}.tabs__needs-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media only screen and (max-width: 1279px){.tabs__icon{width:80px;height:auto}}@media only screen and (max-width: 1023px){.tabs__icon{padding-bottom:8px}}@media only screen and (max-width: 1023px) and (max-width: 1279px){.tabs__icon{padding-bottom:8px}}@media only screen and (max-width: 1023px) and (max-width: 1023px){.tabs__icon{padding-bottom:8px}}@media only screen and (max-width: 767px){.tabs__icon{width:60px}}.tabs-needs__text-box,.tabs__needs-list li,.tabs-benefits__text-box,.tabs__benefits-list li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:350px}@media only screen and (max-width: 1279px){.tabs-needs__text-box,.tabs__needs-list li,.tabs-benefits__text-box,.tabs__benefits-list li{width:220px}}@media only screen and (max-width: 1023px){.tabs-needs__text-box,.tabs__needs-list li,.tabs-benefits__text-box,.tabs__benefits-list li{width:100%}}@media only screen and (max-width: 1023px){.tabs__benefits-list{display:-webkit-box;display:-ms-flexbox;display:flex}}@media only screen and (max-width: 767px){.tabs__benefits-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}}@media only screen and (max-width: 1023px){.tabs__benefits-list li,.tabs-benefits__text-box{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}@media only screen and (max-width: 1023px){.tabs-benefits__text-box{width:calc(100% / 3);margin-bottom:0}}@media only screen and (max-width: 1023px){.tabs__benefits-list{width:calc(100% / 3 * 2)}}.tabs-needs__text-box,.tabs__needs-list,.tabs-benefits__text-box,.tabs__benefits-list{padding-top:96px}@media only screen and (max-width: 1279px){.tabs-needs__text-box,.tabs__needs-list,.tabs-benefits__text-box,.tabs__benefits-list{padding-top:80px}}@media only screen and (max-width: 1023px){.tabs-needs__text-box,.tabs__needs-list,.tabs-benefits__text-box,.tabs__benefits-list{padding-top:56px}}@media only screen and (max-width: 1023px){.tabs-needs__text-box,.tabs__needs-list,.tabs-benefits__text-box,.tabs__benefits-list{margin-bottom:48px;padding-top:0}}@media only screen and (max-width: 1023px) and (max-width: 1279px){.tabs-needs__text-box,.tabs__needs-list,.tabs-benefits__text-box,.tabs__benefits-list{margin-bottom:48px}}@media only screen and (max-width: 1023px) and (max-width: 1023px){.tabs-needs__text-box,.tabs__needs-list,.tabs-benefits__text-box,.tabs__benefits-list{margin-bottom:32px}}.tabs__needs-list li:first-child,.tabs__benefits-list li:first-child{margin-bottom:48px}@media only screen and (max-width: 1279px){.tabs__needs-list li:first-child,.tabs__benefits-list li:first-child{margin-bottom:48px}}@media only screen and (max-width: 1023px){.tabs__needs-list li:first-child,.tabs__benefits-list li:first-child{margin-bottom:32px}}@media only screen and (max-width: 1023px){.tabs__benefits-list li:first-child{margin-bottom:0}}@media only screen and (max-width: 767px){.tabs__benefits-list li:first-child{margin-bottom:24px}}@media only screen and (max-width: 767px) and (max-width: 1279px){.tabs__benefits-list li:first-child{margin-bottom:24px}}@media only screen and (max-width: 767px) and (max-width: 1023px){.tabs__benefits-list li:first-child{margin-bottom:16px}}.video__container{position:relative}.video__container img,.video__container video{width:100%}.video__container span{position:absolute;top:50%;left:50%;width:110px;height:110px;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border-radius:100%;cursor:pointer;z-index:1000}.granules{position:relative}.granules__img{max-width:100%}.granules__box{padding:24px;position:absolute;bottom:110px;right:50px;font-family:"Din Pro", Helvetica, Arial, sans-serif;background-color:#fff;font-size:14px;line-height:18px;color:#333;border:1px solid #b8b8b8;width:400px}@media only screen and (max-width: 1279px){.granules__box{padding:24px}}@media only screen and (max-width: 1023px){.granules__box{padding:16px}}.granules__box:before{position:absolute;content:"";top:30px;left:-20px;width:0;height:0;border-bottom:20px solid #fff;border-right:12px solid transparent;border-left:12px solid transparent;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);z-index:2}.granules__box:after{position:absolute;content:"";top:30px;left:-30px;width:20px;height:20px;background-color:#5d4734;border:1px solid #fff;border-radius:50%;z-index:1}@media only screen and (max-width: 1439px){.granules__box{bottom:100px;right:25px}}@media only screen and (max-width: 1279px){.granules__box{bottom:80px;right:35px;width:320px}}@media only screen and (max-width: 1023px){.granules__box{bottom:30px;right:0}}@media only screen and (max-width: 767px){.granules__box{position:relative;bottom:unset;right:unset;width:auto;padding:0;text-align:center;border:none}.granules__box:before,.granules__box:after{display:none}}.granules__subtitle{margin-bottom:16px;font-weight:bold}@media only screen and (max-width: 1279px){.granules__subtitle{margin-bottom:16px}}@media only screen and (max-width: 1023px){.granules__subtitle{margin-bottom:8px}}.recommendation__img{max-width:100%}.recommendation__text-box{margin-top:16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media only screen and (max-width: 1279px){.recommendation__text-box{margin-top:16px}}@media only screen and (max-width: 1023px){.recommendation__text-box{margin-top:8px}}.recommendation__text{font-family:"Din Pro Condensed", Helvetica, Arial, sans-serif;width:550px;font-size:24px;line-height:25px;color:#333;text-align:center;text-transform:uppercase}@media only screen and (max-width: 1279px){.recommendation__text{width:410px;font-size:30px;line-height:34px}}@media only screen and (max-width: 1023px){.recommendation__text{width:300px;font-size:24px;line-height:28px}}@media only screen and (max-width: 767px){.recommendation__text{width:130px;font-size:14px;line-height:16px}}.dry__inner,.wet__inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.dry__img,.wet__img{width:575px}@media only screen and (max-width: 1439px){.dry__img,.wet__img{width:450px;height:auto}}@media only screen and (max-width: 1279px){.dry__img,.wet__img{width:350px}}@media only screen and (max-width: 1023px){.dry__img,.wet__img{display:none}}.look-xs{display: block; width: 100% !important;}.wet__img{width:50%}.wet__inner{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.benefits{position:relative;min-height:450px}@media only screen and (max-width: 1279px){.benefits{min-height:400px}}@media only screen and (max-width: 767px){.benefits{width:100%;min-height:unset}}.benefits__info{position:relative;top:60px;width:700px;min-height:300px;background-image:url("../img/benefits-bg.png");background-repeat:no-repeat;background-size:contain;z-index:1}@media only screen and (max-width: 1279px){.benefits__info{width:600px}}@media only screen and (max-width: 1023px){.benefits__info{width:704px}}@media only screen and (max-width: 767px){.benefits__info{top:0;width:auto;max-width:100%;min-height:160px;background-image:unset;background-color:#f6f6f6;border-radius:16px}}.benefits__info-box{padding-top:30px;padding-left:250px;color:#333}@media only screen and (max-width: 1279px){.benefits__info-box{max-width:530px;padding-top:20px;padding-left:224px}}@media only screen and (max-width: 1023px){.benefits__info-box{max-width:585px}}@media only screen and (max-width: 767px){.benefits__info-box{padding-bottom:10px;padding-left:80px;padding-right:16px;max-width:100%}}.benefits__title{margin-bottom:16px;font-family:"Din Pro Condensed", Helvetica, Arial, sans-serif;font-size:35px;line-height:39px;text-transform:uppercase;color:#ec001a}@media only screen and (max-width: 1279px){.benefits__title{margin-bottom:16px}}@media only screen and (max-width: 1023px){.benefits__title{margin-bottom:8px}}@media only screen and (max-width: 1279px){.benefits__title{font-size:30px;line-height:34px}}@media only screen and (max-width: 767px){.benefits__title{font-size:16px;line-height:18px}}.benefits__list{font-family:"Din Pro", Helvetica, Arial, sans-serif;font-size:22px;line-height:24px}@media only screen and (max-width: 1279px){.benefits__list{font-size:19px;line-height:21px}}@media only screen and (max-width: 1023px){.benefits__list{font-size:22px;line-height:24px}}@media only screen and (max-width: 767px){.benefits__list{font-size:12px;line-height:14px}}.benefits__list li{margin-bottom:8px;max-width:350px;list-style:disc;color:#ec001a}.benefits__list li:last-child{margin-bottom:0}.benefits__list p{color:#333}.benefits__feed{position:absolute;top:0;left:-50px;width:290px;height:auto;z-index:2;mix-blend-mode:darken}@media only screen and (max-width: 1279px){.benefits__feed{width:230px;left:-34px}}@media only screen and (max-width: 767px){.benefits__feed{left:-16px;width:100px}}.benefits__granules{position:absolute;bottom:-30px;left:240px;height:auto;z-index:2;mix-blend-mode:darken}@media only screen and (max-width: 1023px){.benefits__granules{left:212px;bottom:-10px}}@media only screen and (max-width: 767px){.benefits__granules{left:10px;bottom:0;width:80px}}.table{width:100%;overflow:scroll}.table::-webkit-scrollbar:horizontal{height:12px}@media only screen and (max-width: 1023px){.table{display:none}}table{width:100%;border-collapse:collapse;font-family:"Din Pro", Helvetica, Arial, sans-serif;font-size:12px;line-height:14px;color:#333}tr:nth-child(even){background-color:#f6f6f6}td{text-align:center;vertical-align:center;border-right:1px solid #333}td:first-child,td:last-child{border-right:none}.product{display:none}@media only screen and (max-width: 1023px){.product{display:block}}.product__list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap}.product__item{margin-bottom:40px;padding:24px;border:1px solid #b8b8b8;width:calc(80% / 2);text-align:center}@media only screen and (max-width: 1279px){.product__item{margin-bottom:40px}}@media only screen and (max-width: 1023px){.product__item{margin-bottom:32px}}@media only screen and (max-width: 1279px){.product__item{padding:24px}}@media only screen and (max-width: 1023px){.product__item{padding:16px}}@media only screen and (max-width: 767px){.product__item{width:75%}}.product__img{margin-bottom:16px;max-width:100%}@media only screen and (max-width: 1279px){.product__img{margin-bottom:16px}}@media only screen and (max-width: 1023px){.product__img{margin-bottom:8px}}.product__item p{font-family:"Din Pro", Helvetica, Arial, sans-serif;font-size:14px;line-height:16px;color:#333}.table-buy{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:50px}.tabs-active{color:#fff;background-color:#333}.show{display:block}.hide{display:none}.fade{-webkit-animation-name:fade;animation-name:fade;-webkit-animation-duration:1.5s;animation-duration:1.5s}@-webkit-keyframes fade{from{opacity:0.2}to{opacity:1}}@keyframes fade{from{opacity:0.2}to{opacity:1}} ======= @font-face { font-family: "Din Pro Condensed"; font-style: normal; font-weight: bold; src: url(../fonts/DINPro-CondensedBold.woff2), url(../fonts/DINPro-CondensedBold.woff) } @font-face { font-family: "Din Pro"; font-style: normal; font-weight: 400; src: url(../fonts/DINPro-Regular.woff2), url(../fonts/DINPro-Regular.woff) } @font-face { font-family: "Din Pro"; font-style: normal; font-weight: 500; src: url(../fonts/DINPro-Medium.woff2), url(../fonts/DINPro-Medium.woff) } @font-face { font-family: "Din Pro"; font-style: normal; font-weight: 700; src: url(../fonts/DINPro-Bold.woff2), url(../fonts/DINPro-Bold.woff) } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; outline: none } html, body { width: 100%; margin: 0 !important; -webkit-font-smoothing: antialiased } button { background: none; border: 0 } figure { font-size: 0 } picture { display: block; line-height: 0 } li { list-style: none } a { text-decoration: none } input { background-color: transparent; border: none; border-radius: 0; outline: none; -webkit-appearance: none } input::-webkit-contacts-auto-fill-button { position: absolute; right: 0; display: none; visibility: hidden; pointer-events: none } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none } input[type="number"] { -moz-appearance: textfield } textarea { background-color: transparent; border: none; border-radius: 0; outline: none; resize: none } hr { border: none } h1, h2, h3, h4, h5, h6, em, strong, dl, dt, dd { margin: 0; padding: 0; font: inherit; vertical-align: baseline; border: 0 } .container { max-width: 1216px; margin: 0 auto } @media only screen and (max-width: 1439px) { .container { max-width: 1120px } } @media only screen and (max-width: 1279px) { .container { max-width: 944px } } @media only screen and (max-width: 1023px) { .container { max-width: 704px } } @media only screen and (max-width: 767px) { .container { padding: 0 20px } } section { padding-top: 56px; padding-bottom: 56px } @media only screen and (max-width: 1279px) { section { padding-top: 56px } } @media only screen and (max-width: 1023px) { section { padding-top: 32px } } @media only screen and (max-width: 1279px) { section { padding-bottom: 56px } } @media only screen and (max-width: 1023px) { section { padding-bottom: 32px } } .title { margin-bottom: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0; font-family: "Din Pro Condensed", Helvetica, Arial, sans-serif; color: #ec001a; font-weight: bold; font-size: 70px; line-height: 78px; text-align: center; text-transform: uppercase } @media only screen and (max-width: 1279px) { .title { margin-bottom: 24px } } @media only screen and (max-width: 1023px) { .title { margin-bottom: 16px } } .title:before, .title:after { content: ""; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 0; flex-shrink: 0; width: 50px; height: 5px; background-color: #ec001a } .title:before { margin-right: 25px } .title:after { margin-left: 25px } @media only screen and (max-width: 1279px) { .title { font-size: 54px; line-height: 58px } } @media only screen and (max-width: 1023px) { .title { font-size: 40px; line-height: 48px } } @media only screen and (max-width: 767px) { .title { font-size: 26px; line-height: 30px } .title:before, .title:after { width: 32px; height: 3px } .title:before { margin-right: 16px } .title:after { margin-left: 16px } } .header { padding-top: 32px; padding-bottom: 48px; font-family: "Din Pro Condensed", Helvetica, Arial, sans-serif; color: #333; background-image: url("../img/header-top.png"); background-repeat: no-repeat; background-position: 0 0; background-size: contain } @media only screen and (max-width: 1279px) { .header { padding-top: 32px } } @media only screen and (max-width: 1023px) { .header { padding-top: 24px } } @media only screen and (max-width: 1279px) { .header { padding-bottom: 48px } } @media only screen and (max-width: 1023px) { .header { padding-bottom: 32px } } .header .container { margin-top: 100px; background-image: url("../img/header-bg.png"); background-repeat: no-repeat; background-position: right 0 bottom 0; background-size: 520px 335px } .header .container img { width: 60% } @media only screen and (max-width: 1439px) { .header .container { background-size: 470px 300px } } @media only screen and (max-width: 1279px) { .header .container { background-size: 385px 245px } } @media only screen and (max-width: 1023px) { .header .container { margin-top: 0; min-height: 275px; background-position: right 0 bottom 0; background-size: 345px 220px } } @media only screen and (max-width: 767px) { .header .container { min-height: 275px; background-size: 190px 120px } } @media only screen and (max-width: 767px) { .header__img--dogs { display: none } } .header__img--dogs-xs { display: none } @media only screen and (max-width: 767px) { .header__img--dogs-xs { display: block; width: 100%; padding: 0 25px } } .header__img { margin-left: 200px } @media only screen and (max-width: 1279px) { .header__img { margin-left: 150px } } @media only screen and (max-width: 1023px) { .header__img { width: 150px; margin-left: 0; float: right } } @media only screen and (max-width: 767px) { .header__img { width: 100px } } .header__title { margin-top: 40px; margin-bottom: 8px; font-size: 56px; line-height: 60px; color: #ec001a; text-transform: uppercase } @media only screen and (max-width: 1279px) { .header__title { margin-top: 40px } } @media only screen and (max-width: 1023px) { .header__title { margin-top: 32px } } @media only screen and (max-width: 1279px) { .header__title { margin-bottom: 8px } } @media only screen and (max-width: 1023px) { .header__title { margin-bottom: 8px } } @media only screen and (max-width: 1439px) { .header__title { font-size: 56px; line-height: 60px } } @media only screen and (max-width: 1279px) { .header__title { font-size: 56px; line-height: 70px } } @media only screen and (max-width: 1023px) { .header__title { padding-top: 0; font-size: 44px; line-height: 48px } } @media only screen and (max-width: 767px) { .header__title { padding-top: 0; font-size: 34px; line-height: 38px } } .header__subtitle { margin-bottom: 16px; font-size: 42px; line-height: 52px; text-transform: uppercase } @media only screen and (max-width: 1279px) { .header__subtitle { margin-bottom: 16px } } @media only screen and (max-width: 1023px) { .header__subtitle { margin-bottom: 8px } } @media only screen and (max-width: 1439px) { .header__subtitle { font-size: 40px; line-height: 50px } } @media only screen and (max-width: 1279px) { .header__subtitle { font-size: 34px; line-height: 44px } } @media only screen and (max-width: 1023px) { .header__subtitle { font-size: 22px; line-height: 28px } } @media only screen and (max-width: 767px) { .header__subtitle { width: 200px; font-size: 22px; line-height: 24px } } .header__text { font-size: 26px; line-height: 30px; text-transform: uppercase } @media only screen and (max-width: 1439px) { .header__text { font-size: 24px; line-height: 28px } } @media only screen and (max-width: 1279px) { .header__text { width: 375px } } @media only screen and (max-width: 1023px) { .header__text { width: 250px } } @media only screen and (max-width: 767px) { .header__text { width: 120px; font-size: 18px; line-height: 22px } } .special { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: "Din Pro", Helvetica, Arial, sans-serif; color: #333 } @media only screen and (max-width: 1023px) { .special { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap } } .special__img { width: 600px; height: auto } @media only screen and (max-width: 1439px) { .special__img { width: 500px } } @media only screen and (max-width: 1279px) { .special__img { width: 400px } } @media only screen and (max-width: 1023px) { .special__img { width: 100% } } .special__info { padding-left: 64px } @media only screen and (max-width: 1279px) { .special__info { padding-left: 64px } } @media only screen and (max-width: 1023px) { .special__info { padding-left: 48px } } @media only screen and (max-width: 1023px) { .special__info { padding-left: 0 } } .special__title { margin-bottom: 16px; font-weight: bold; font-size: 32px; line-height: 40px } @media only screen and (max-width: 1279px) { .special__title { margin-bottom: 16px } } @media only screen and (max-width: 1023px) { .special__title { margin-bottom: 8px } } @media only screen and (max-width: 1279px) { .special__title { font-size: 28px; line-height: 36px } } @media only screen and (max-width: 1023px) { .special__title { font-size: 28px; line-height: 32px } } @media only screen and (max-width: 767px) { .special__title { font-size: 24px; line-height: 28px } } .special__subtitle { margin-bottom: 8px; font-weight: bold; font-size: 24px; line-height: 28px } @media only screen and (max-width: 1279px) { .special__subtitle { margin-bottom: 8px } } @media only screen and (max-width: 1023px) { .special__subtitle { margin-bottom: 8px } } @media only screen and (max-width: 1023px) { .special__subtitle { font-size: 22px; line-height: 26px } } @media only screen and (max-width: 767px) { .special__subtitle { font-size: 18px; line-height: 22px } } .special__text { font-weight: bold; font-size: 16px; line-height: 20px; margin-bottom: 8px } @media only screen and (max-width: 1023px) { .special__text { font-size: 14px; line-height: 18px } } .tabs { font-family: "Din Pro", Helvetica, Arial, sans-serif; font-weight: 400; color: #333 } @media only screen and (max-width: 767px) { .tabs { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } } .tabs__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 560px; margin: 0 auto; margin-bottom: 40px } @media only screen and (max-width: 1279px) { .tabs__buttons { margin-bottom: 40px } } @media only screen and (max-width: 1023px) { .tabs__buttons { margin-bottom: 32px } } @media only screen and (max-width: 767px) { .tabs__buttons { margin-top: 40px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 0 } } @media only screen and (max-width: 767px) and (max-width: 1279px) { .tabs__buttons { margin-top: 40px } } @media only screen and (max-width: 767px) and (max-width: 1023px) { .tabs__buttons { margin-top: 32px } } .tabs__button { width: 250px; height: 50px; padding: 8px 12px; font-size: 14px; line-height: 16px; text-transform: uppercase; border: 1px solid #333; border-radius: 30px; cursor: pointer; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease } .tabs__button:hover { color: #fff; background-color: #333 } @media only screen and (max-width: 767px) { .tabs__button:first-child { margin-bottom: 8px } } @media only screen and (max-width: 767px) and (max-width: 1279px) { .tabs__button:first-child { margin-bottom: 8px } } @media only screen and (max-width: 767px) and (max-width: 1023px) { .tabs__button:first-child { margin-bottom: 8px } } .tabs__needs, .tabs__benefits { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; min-height: 440px; background-repeat: no-repeat; background-position: 300px } @media only screen and (max-width: 1439px) { .tabs__needs, .tabs__benefits { background-position: 265px } } @media only screen and (max-width: 1279px) { .tabs__needs, .tabs__benefits { background-size: 350px } } @media only screen and (max-width: 1023px) { .tabs__needs, .tabs__benefits { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; background-position: center bottom; background-size: 200px } } .tabs__needs { background-image: url("../img/kitten-inner.png") } .tabs__benefits { display: none; background-image: url("../img/benefits-kitten.png"); background-size: 575px; background-position: 300px } @media only screen and (max-width: 1439px) { .tabs__benefits { background-position: 245px } } @media only screen and (max-width: 1279px) { .tabs__benefits { background-size: 500px; background-position: 240px } } @media only screen and (max-width: 1023px) { .tabs__benefits { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; background-position: center bottom; background-size: 400px } } @media only screen and (max-width: 767px) { .tabs__benefits { background-position: -40px 200px; background-size: 300px } } .tabs__benefits-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .tabs-content__benefits-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .tabs-show { display: -webkit-box; display: -ms-flexbox; display: flex } .tabs__needs-text { padding-left: 24px; font-size: 18px; line-height: 20px; color: #ec001a } @media only screen and (max-width: 1279px) { .tabs__needs-text { padding-left: 24px } } @media only screen and (max-width: 1023px) { .tabs__needs-text { padding-left: 16px } } @media only screen and (max-width: 1279px) { .tabs__needs-text { font-size: 20px; line-height: 24px } } @media only screen and (max-width: 1023px) { .tabs__needs-text { font-size: 18px; line-height: 22px } } @media only screen and (max-width: 767px) { .tabs__needs-text { font-size: 14px; line-height: 16px } } .tabs__benefits-text { padding-left: 16px; font-weight: bold; font-size: 18px; line-height: 30px; text-transform: uppercase; color: #f1759b } @media only screen and (max-width: 1279px) { .tabs__benefits-text { padding-left: 16px } } @media only screen and (max-width: 1023px) { .tabs__benefits-text { padding-left: 8px } } @media only screen and (max-width: 1279px) { .tabs__benefits-text { font-size: 20px; line-height: 24px } } @media only screen and (max-width: 1023px) { .tabs__benefits-text { padding-left: 0; font-size: 18px; line-height: 22px; text-align: center } } @media only screen and (max-width: 767px) { .tabs__benefits-text { width: 125px; font-size: 12px; line-height: 14px } } .tabs-needs__text-box span, .tabs__needs-list span { position: relative; padding: 28px 38px; font-weight: bold; font-size: 40px; line-height: 40px; color: #fff; background-color: #ec001a; border-radius: 50% } .tabs-needs__text-box span:after, .tabs__needs-list span:after { position: absolute; content: ""; top: -6px; left: -6px; width: 110px; height: 108px; border-radius: 50%; border: 3px solid #ec001a } @media only screen and (max-width: 1279px) { .tabs-needs__text-box span, .tabs__needs-list span { padding: 18px 27px; font-size: 34px; line-height: 34px } .tabs-needs__text-box span:after, .tabs__needs-list span:after { top: -6px; left: -5px; width: 82px; height: 82px } } @media only screen and (max-width: 1023px) { .tabs-needs__text-box span, .tabs__needs-list span { padding: 14px 20px; font-size: 22px; line-height: 24px } .tabs-needs__text-box span:after, .tabs__needs-list span:after { top: -5px; left: -5px; width: 62px; height: 62px } } @media only screen and (max-width: 767px) { .tabs-needs__text-box span, .tabs__needs-list span { padding: 8px 14px } .tabs-needs__text-box span:after, .tabs__needs-list span:after { top: -5px; left: -5px; width: 50px; height: 50px } } .tabs__needs-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } @media only screen and (max-width: 1279px) { .tabs__icon { width: 80px; height: auto } } @media only screen and (max-width: 1023px) { .tabs__icon { padding-bottom: 8px } } @media only screen and (max-width: 1023px) and (max-width: 1279px) { .tabs__icon { padding-bottom: 8px } } @media only screen and (max-width: 1023px) and (max-width: 1023px) { .tabs__icon { padding-bottom: 8px } } @media only screen and (max-width: 767px) { .tabs__icon { width: 60px } } .tabs-needs__text-box, .tabs__needs-list li, .tabs-benefits__text-box, .tabs__benefits-list li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 350px } @media only screen and (max-width: 1279px) { .tabs-needs__text-box, .tabs__needs-list li, .tabs-benefits__text-box, .tabs__benefits-list li { width: 220px } } @media only screen and (max-width: 1023px) { .tabs-needs__text-box, .tabs__needs-list li, .tabs-benefits__text-box, .tabs__benefits-list li { width: 100% } } @media only screen and (max-width: 1023px) { .tabs__benefits-list { display: -webkit-box; display: -ms-flexbox; display: flex } } @media only screen and (max-width: 767px) { .tabs__benefits-list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end } } @media only screen and (max-width: 1023px) { .tabs__benefits-list li, .tabs-benefits__text-box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } } @media only screen and (max-width: 1023px) { .tabs-benefits__text-box { width: calc(100% / 3); margin-bottom: 0 } } @media only screen and (max-width: 1023px) { .tabs__benefits-list { width: calc(100% / 3 * 2) } } .tabs-needs__text-box, .tabs__needs-list, .tabs-benefits__text-box, .tabs__benefits-list { padding-top: 96px } @media only screen and (max-width: 1279px) { .tabs-needs__text-box, .tabs__needs-list, .tabs-benefits__text-box, .tabs__benefits-list { padding-top: 80px } } @media only screen and (max-width: 1023px) { .tabs-needs__text-box, .tabs__needs-list, .tabs-benefits__text-box, .tabs__benefits-list { padding-top: 56px } } @media only screen and (max-width: 1023px) { .tabs-needs__text-box, .tabs__needs-list, .tabs-benefits__text-box, .tabs__benefits-list { margin-bottom: 48px; padding-top: 0 } } @media only screen and (max-width: 1023px) and (max-width: 1279px) { .tabs-needs__text-box, .tabs__needs-list, .tabs-benefits__text-box, .tabs__benefits-list { margin-bottom: 48px } } @media only screen and (max-width: 1023px) and (max-width: 1023px) { .tabs-needs__text-box, .tabs__needs-list, .tabs-benefits__text-box, .tabs__benefits-list { margin-bottom: 32px } } .tabs__needs-list li:first-child, .tabs__benefits-list li:first-child { margin-bottom: 48px } @media only screen and (max-width: 1279px) { .tabs__needs-list li:first-child, .tabs__benefits-list li:first-child { margin-bottom: 48px } } @media only screen and (max-width: 1023px) { .tabs__needs-list li:first-child, .tabs__benefits-list li:first-child { margin-bottom: 32px } } @media only screen and (max-width: 1023px) { .tabs__benefits-list li:first-child { margin-bottom: 0 } } @media only screen and (max-width: 767px) { .tabs__benefits-list li:first-child { margin-bottom: 24px } } @media only screen and (max-width: 767px) and (max-width: 1279px) { .tabs__benefits-list li:first-child { margin-bottom: 24px } } @media only screen and (max-width: 767px) and (max-width: 1023px) { .tabs__benefits-list li:first-child { margin-bottom: 16px } } .video__container { position: relative } .video__container img, .video__container video { width: 100% } .video__container span { position: absolute; top: 50%; left: 50%; width: 110px; height: 110px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 100%; cursor: pointer; z-index: 1000 } .granules { position: relative } .granules__img { max-width: 100% } .granules__box { padding: 24px; position: absolute; bottom: 110px; right: 50px; font-family: "Din Pro", Helvetica, Arial, sans-serif; background-color: #fff; font-size: 14px; line-height: 18px; color: #333; border: 1px solid #b8b8b8; width: 400px } @media only screen and (max-width: 1279px) { .granules__box { padding: 24px } } @media only screen and (max-width: 1023px) { .granules__box { padding: 16px } } .granules__box:before { position: absolute; content: ""; top: 30px; left: -20px; width: 0; height: 0; border-bottom: 20px solid #fff; border-right: 12px solid transparent; border-left: 12px solid transparent; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); z-index: 2 } .granules__box:after { position: absolute; content: ""; top: 30px; left: -30px; width: 20px; height: 20px; background-color: #5d4734; border: 1px solid #fff; border-radius: 50%; z-index: 1 } @media only screen and (max-width: 1439px) { .granules__box { bottom: 100px; right: 25px } } @media only screen and (max-width: 1279px) { .granules__box { bottom: 80px; right: 35px; width: 320px } } @media only screen and (max-width: 1023px) { .granules__box { bottom: 30px; right: 0 } } @media only screen and (max-width: 767px) { .granules__box { position: relative; bottom: unset; right: unset; width: auto; padding: 0; text-align: center; border: none } .granules__box:before, .granules__box:after { display: none } } .granules__subtitle { margin-bottom: 16px; font-weight: bold } @media only screen and (max-width: 1279px) { .granules__subtitle { margin-bottom: 16px } } @media only screen and (max-width: 1023px) { .granules__subtitle { margin-bottom: 8px } } .recommendation__img { max-width: 100% } .recommendation__text-box { margin-top: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center } @media only screen and (max-width: 1279px) { .recommendation__text-box { margin-top: 16px } } @media only screen and (max-width: 1023px) { .recommendation__text-box { margin-top: 8px } } .recommendation__text { font-family: "Din Pro Condensed", Helvetica, Arial, sans-serif; width: 550px; font-size: 24px; line-height: 25px; color: #333; text-align: center; text-transform: uppercase } @media only screen and (max-width: 1279px) { .recommendation__text { width: 410px; font-size: 30px; line-height: 34px } } @media only screen and (max-width: 1023px) { .recommendation__text { width: 300px; font-size: 24px; line-height: 28px } } @media only screen and (max-width: 767px) { .recommendation__text { width: 130px; font-size: 14px; line-height: 16px } } .dry__inner, .wet__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .dry__img, .wet__img { width: 575px } @media only screen and (max-width: 1439px) { .dry__img, .wet__img { width: 450px; height: auto } } @media only screen and (max-width: 1279px) { .dry__img, .wet__img { width: 350px } } @media only screen and (max-width: 1023px) { .dry__img, .wet__img { display: none } } .wet__img { width: 50% } .wet__inner { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse } .benefits { position: relative; min-height: 450px } @media only screen and (max-width: 1279px) { .benefits { min-height: 400px } } @media only screen and (max-width: 767px) { .benefits { width: 100%; min-height: unset } } .benefits__info { position: relative; top: 60px; width: 700px; min-height: 300px; background-image: url("../img/benefits-bg.png"); background-repeat: no-repeat; background-size: contain; z-index: 1 } @media only screen and (max-width: 1279px) { .benefits__info { width: 600px } } @media only screen and (max-width: 1023px) { .benefits__info { width: 704px } } @media only screen and (max-width: 767px) { .benefits__info { top: 0; width: auto; max-width: 100%; min-height: 160px; background-image: unset; background-color: #f6f6f6; border-radius: 16px } } .benefits__info-box { padding-top: 30px; padding-left: 250px; color: #333 } @media only screen and (max-width: 1279px) { .benefits__info-box { max-width: 530px; padding-top: 20px; padding-left: 224px } } @media only screen and (max-width: 1023px) { .benefits__info-box { max-width: 585px } } @media only screen and (max-width: 767px) { .benefits__info-box { padding-bottom: 10px; padding-left: 80px; padding-right: 16px; max-width: 100% } } .benefits__title { margin-bottom: 16px; font-family: "Din Pro Condensed", Helvetica, Arial, sans-serif; font-size: 35px; line-height: 39px; text-transform: uppercase; color: #ec001a } @media only screen and (max-width: 1279px) { .benefits__title { margin-bottom: 16px } } @media only screen and (max-width: 1023px) { .benefits__title { margin-bottom: 8px } } @media only screen and (max-width: 1279px) { .benefits__title { font-size: 30px; line-height: 34px } } @media only screen and (max-width: 767px) { .benefits__title { font-size: 16px; line-height: 18px } } .benefits__list { font-family: "Din Pro", Helvetica, Arial, sans-serif; font-size: 22px; line-height: 24px } @media only screen and (max-width: 1279px) { .benefits__list { font-size: 19px; line-height: 21px } } @media only screen and (max-width: 1023px) { .benefits__list { font-size: 22px; line-height: 24px } } @media only screen and (max-width: 767px) { .benefits__list { font-size: 12px; line-height: 14px } } .benefits__list li { margin-bottom: 8px; max-width: 350px; list-style: disc; color: #ec001a } .benefits__list li:last-child { margin-bottom: 0 } .benefits__list p { color: #333 } .benefits__feed { position: absolute; top: 0; left: -50px; width: 290px; height: auto; z-index: 2; mix-blend-mode: darken } @media only screen and (max-width: 1279px) { .benefits__feed { width: 230px; left: -34px } } @media only screen and (max-width: 767px) { .benefits__feed { left: -16px; width: 100px } } .benefits__granules { position: absolute; bottom: -30px; left: 240px; height: auto; z-index: 2; mix-blend-mode: darken } @media only screen and (max-width: 1023px) { .benefits__granules { left: 212px; bottom: -10px } } @media only screen and (max-width: 767px) { .benefits__granules { left: 10px; bottom: 0; width: 80px } } .table { width: 100%; overflow: scroll } .table::-webkit-scrollbar:horizontal { height: 12px } @media only screen and (max-width: 1023px) { .table { display: none } } table { width: 100%; border-collapse: collapse; font-family: "Din Pro", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 14px; color: #333 } tr:nth-child(even) { background-color: #f6f6f6 } td { text-align: center; vertical-align: center; border-right: 1px solid #333 } td:first-child, td:last-child { border-right: none } .product { display: none } @media only screen and (max-width: 1023px) { .product { display: block } } .product__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-wrap: wrap; flex-wrap: wrap } .product__item { margin-bottom: 40px; padding: 24px; border: 1px solid #b8b8b8; width: calc(80% / 2); text-align: center } @media only screen and (max-width: 1279px) { .product__item { margin-bottom: 40px } } @media only screen and (max-width: 1023px) { .product__item { margin-bottom: 32px } } @media only screen and (max-width: 1279px) { .product__item { padding: 24px } } @media only screen and (max-width: 1023px) { .product__item { padding: 16px } } @media only screen and (max-width: 767px) { .product__item { width: 75% } } .product__img { margin-bottom: 16px; max-width: 100% } @media only screen and (max-width: 1279px) { .product__img { margin-bottom: 16px } } @media only screen and (max-width: 1023px) { .product__img { margin-bottom: 8px } } .product__item p { font-family: "Din Pro", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 16px; color: #333 } .table-buy { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 50px } .tabs-active { color: #fff; background-color: #333 } .show { display: block } .hide { display: none } .fade { -webkit-animation-name: fade; animation-name: fade; -webkit-animation-duration: 1.5s; animation-duration: 1.5s } @-webkit-keyframes fade { from { opacity: 0.2 } to { opacity: 1 } } @keyframes fade { from { opacity: 0.2 } to { opacity: 1 } } >>>>>>> 3d0cc4b79998f2124e3abbb4221c5e3197c1a3e2