/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url(../fonts/baloo2/baloo2.css);
@import url(../fonts/roboto/stylesheet.css);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Baloo 2";
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.9rem;
  margin: 0;
  position: relative;
}

a {
  color: unset;
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
}

li {
  list-style: none;
}

.container {
  width: 100%;
  max-width: 144rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.fullheight {
  height: 100vh;
}

.align-item-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

.bg-img {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-img-fixed {
  background-attachment: fixed;
}

.fullheight {
  height: 100vh;
}

.section {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#b6eaff), to(rgba(183, 235, 255, 0)));
  background-image: linear-gradient(#b6eaff, rgba(183, 235, 255, 0));
}

.collapse-menu {
  display: none;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after,
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: #00BFF2;
}

body.is-active {
  overflow: hidden;
}

.btn {
  display: block;
  outline: none;
  border: none;
  background-color: transparent;
}

.heading {
  text-align: center;
}

.heading-title {
  font-size: 3rem;
  font-weight: bold;
  color: #003156;
  text-transform: uppercase;
  line-height: 5.6rem;
}

.heading-desc {
  font-size: 2rem;
}

.img-wrap {
  display: block;
}

.desc {
  font-family: "Roboto";
  color: #003156;
}

.desc span {
  font-weight: bold;
}

.media {
  position: fixed;
  bottom: 5%;
  right: 2.4rem;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  z-index: 50;
  opacity: 1;
  visibility: hidden;
}

.media.is-active {
  opacity: 1;
  visibility: visible;
}

.louds {
  margin: 0 auto;
  position: absolute;
  top: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
}

.loud1 {
  overflow: hidden;
  -webkit-animation: unset !important;
          animation: unset !important;
}

.loud1 img {
  -webkit-animation: cloud-2 20s infinite linear alternate !important;
          animation: cloud-2 20s infinite linear alternate !important;
}

.bg-blue {
  background-color: #beedff;
}

.product-page-active {
  color: #00BFF2;
}

.animation-bub1 {
  -webkit-animation: bub1 15s linear infinite alternate;
          animation: bub1 15s linear infinite alternate;
}

.animation-bub2 {
  -webkit-animation: bub2 15s linear infinite alternate;
          animation: bub2 15s linear infinite alternate;
}

.animation-bub3 {
  -webkit-animation: bub3 15s linear infinite alternate;
          animation: bub3 15s linear infinite alternate;
}

.animation-bub4 {
  -webkit-animation: bub4 15s linear infinite alternate;
          animation: bub4 15s linear infinite alternate;
}

@-webkit-keyframes bub1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  25% {
    -webkit-transform: translate(10rem, 10rem);
            transform: translate(10rem, 10rem);
  }
  50% {
    -webkit-transform: translate(0rem, 20rem);
            transform: translate(0rem, 20rem);
  }
  75% {
    -webkit-transform: translate(5rem, -6rem);
            transform: translate(5rem, -6rem);
  }
  100% {
    -webkit-transform: translate(-10rem, 8rem);
            transform: translate(-10rem, 8rem);
  }
}

@keyframes bub1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  25% {
    -webkit-transform: translate(10rem, 10rem);
            transform: translate(10rem, 10rem);
  }
  50% {
    -webkit-transform: translate(0rem, 20rem);
            transform: translate(0rem, 20rem);
  }
  75% {
    -webkit-transform: translate(5rem, -6rem);
            transform: translate(5rem, -6rem);
  }
  100% {
    -webkit-transform: translate(-10rem, 8rem);
            transform: translate(-10rem, 8rem);
  }
}

@-webkit-keyframes bub2 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  25% {
    -webkit-transform: translate(5rem, -5rem);
            transform: translate(5rem, -5rem);
  }
  50% {
    -webkit-transform: translate(10rem, 10rem);
            transform: translate(10rem, 10rem);
  }
  75% {
    -webkit-transform: translate(20rem, 10rem);
            transform: translate(20rem, 10rem);
  }
  100% {
    -webkit-transform: translate(6rem, 9rem);
            transform: translate(6rem, 9rem);
  }
}

@keyframes bub2 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  25% {
    -webkit-transform: translate(5rem, -5rem);
            transform: translate(5rem, -5rem);
  }
  50% {
    -webkit-transform: translate(10rem, 10rem);
            transform: translate(10rem, 10rem);
  }
  75% {
    -webkit-transform: translate(20rem, 10rem);
            transform: translate(20rem, 10rem);
  }
  100% {
    -webkit-transform: translate(6rem, 9rem);
            transform: translate(6rem, 9rem);
  }
}

@-webkit-keyframes bub3 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  25% {
    -webkit-transform: translate(10rem, -5rem);
            transform: translate(10rem, -5rem);
  }
  50% {
    -webkit-transform: translate(6rem, 10rem);
            transform: translate(6rem, 10rem);
  }
  75% {
    -webkit-transform: translate(20rem, 5rem);
            transform: translate(20rem, 5rem);
  }
  100% {
    -webkit-transform: translate(6rem, 20rem);
            transform: translate(6rem, 20rem);
  }
}

@keyframes bub3 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  25% {
    -webkit-transform: translate(10rem, -5rem);
            transform: translate(10rem, -5rem);
  }
  50% {
    -webkit-transform: translate(6rem, 10rem);
            transform: translate(6rem, 10rem);
  }
  75% {
    -webkit-transform: translate(20rem, 5rem);
            transform: translate(20rem, 5rem);
  }
  100% {
    -webkit-transform: translate(6rem, 20rem);
            transform: translate(6rem, 20rem);
  }
}

@-webkit-keyframes bub4 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  25% {
    -webkit-transform: translate(5rem, 20rem);
            transform: translate(5rem, 20rem);
  }
  50% {
    -webkit-transform: translate(-10rem, 10rem);
            transform: translate(-10rem, 10rem);
  }
  75% {
    -webkit-transform: translate(20rem, 5rem);
            transform: translate(20rem, 5rem);
  }
  100% {
    -webkit-transform: translate(6rem, 20rem);
            transform: translate(6rem, 20rem);
  }
}

@keyframes bub4 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  25% {
    -webkit-transform: translate(5rem, 20rem);
            transform: translate(5rem, 20rem);
  }
  50% {
    -webkit-transform: translate(-10rem, 10rem);
            transform: translate(-10rem, 10rem);
  }
  75% {
    -webkit-transform: translate(20rem, 5rem);
            transform: translate(20rem, 5rem);
  }
  100% {
    -webkit-transform: translate(6rem, 20rem);
            transform: translate(6rem, 20rem);
  }
}

@-webkit-keyframes loud {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
  100% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
}

@keyframes loud {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
  100% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
}

@-webkit-keyframes loud1 {
  0% {
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
  }
  100% {
    -webkit-transform: translateX(-300%);
            transform: translateX(-300%);
  }
}

@keyframes loud1 {
  0% {
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
  }
  100% {
    -webkit-transform: translateX(-300%);
            transform: translateX(-300%);
  }
}

@-webkit-keyframes loud2 {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(300%);
            transform: translateX(300%);
  }
}

@keyframes loud2 {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(300%);
            transform: translateX(300%);
  }
}

@-webkit-keyframes loud3 {
  0% {
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-400%);
            transform: translateX(-400%);
  }
}

@keyframes loud3 {
  0% {
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-400%);
            transform: translateX(-400%);
  }
}

@media screen and (max-width: 1100px) {
  .fp-tableCell {
    height: unset !important;
  }
}

@-webkit-keyframes cloud-2 {
  0% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}

@keyframes cloud-2 {
  0% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}

.back-to-top {
  height: 6rem;
  width: 6rem;
  background-color: #00bff2;
  border-radius: 50%;
  padding: 1rem;
  font-size: 5.5rem;
  color: white;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 2rem;
  cursor: pointer;
  -webkit-box-shadow: 1rem 1rem 3rem rgba(0, 0, 0, 0.16);
          box-shadow: 1rem 1rem 3rem rgba(0, 0, 0, 0.16);
}

@media screen and (max-width: 1440px) {
  .back-to-top {
    height: 4rem;
    width: 4rem;
    font-size: 4rem;
  }
}

.messenger {
  height: 6rem;
  width: 6rem;
  background-color: #0084ff;
  border-radius: 50%;
  padding: 1rem;
  font-size: 5.5rem;
  color: white;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  -webkit-box-shadow: 1rem 1rem 3rem rgba(0, 0, 0, 0.16);
          box-shadow: 1rem 1rem 3rem rgba(0, 0, 0, 0.16);
}

@media screen and (max-width: 1440px) {
  .messenger {
    height: 4rem;
    width: 4rem;
    font-size: 3rem;
  }
}

.breadcrumb {
  color: #7F7F7F;
  font-size: 1.2rem;
  line-height: 1.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2rem;
}

.breadcrumb li + li::before {
  padding: 1rem;
  content: "/\00a0";
}

.breadcrumb a {
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.breadcrumb a:hover {
  color: #00BFF2;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.header-nav-wrap {
  max-width: 175rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}

.header-menu-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: auto;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}

.header-logo {
  max-width: 8.95%;
}

.header-menu {
  background-color: rgba(255, 255, 255, 0.8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1rem 0;
  padding-right: 1rem;
  border-radius: 5rem;
  -webkit-box-shadow: 1rem 1rem 3rem rgba(0, 0, 0, 0.16);
          box-shadow: 1rem 1rem 3rem rgba(0, 0, 0, 0.16);
}

.header-menu-mb {
  display: none;
}

.header-menu-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header-menu-item {
  text-transform: uppercase;
  font-weight: bold;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

.header-menu-item.active .header-menu-link {
  color: #00BFF2;
}

.header-menu-link {
  font-size: 1.8rem;
  line-height: 1.55;
  padding: 2.2rem 2.5rem;
  color: #003156;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.header-menu-link:hover {
  color: #00BFF2;
}

.header-menu-link.is-active {
  color: #00BFF2;
}

.header-search-wrap {
  padding-left: 30rem;
}

.header-search-btn {
  padding: 1.3rem;
  background-color: #00BFF2;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  display: block;
}

.header-search-icon {
  width: 2.345rem;
  height: 2.345rem;
}

.header-menu-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  padding-left: 2.2rem;
  padding-right: 0.7rem;
}

.header-phone-icon {
  height: 4.5rem;
  width: 4.5rem;
}

.header-box-inner {
  padding-left: 1rem;
}

.header-hotline {
  font-size: 2rem;
  line-height: 1.4;
}

.header-phone-number {
  font-size: 2.8rem;
  line-height: 1;
  font-weight: bold;
  color: #1777AA;
}

.header-change-lang {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.4rem 0.5rem;
  border-radius: 2.2rem;
  background-color: white;
}

.header-lang {
  padding: 0.5rem 1.3rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}

.header-lang.is-active {
  background-color: #00BFF2;
  color: white;
  border-radius: 1.5rem;
}

@media screen and (max-width: 1700px) {
  .header-search-wrap {
    padding-left: 20rem;
  }
}

@media screen and (max-width: 1550px) {
  .header-search-wrap {
    padding-left: 15;
  }
  .header-menu {
    padding: 0.5rem;
  }
  .header-menu-link {
    font-size: 1.4rem;
    padding: 1.5rem;
  }
  .header-search-btn {
    padding: 1rem;
  }
  .header-hotline {
    font-size: 1.6rem;
  }
  .header-phone-number {
    font-size: 1.8rem;
  }
  .header-search-icon {
    width: 2rem;
    height: 2rem;
  }
}

@media screen and (max-width: 1250px) {
  .header-search-wrap {
    padding-left: unset;
  }
}

@media screen and (max-width: 1023px) {
  .header-logo {
    min-width: 8rem;
  }
  .header .collapse-menu {
    display: block;
  }
  .header-menu-right {
    display: none;
  }
  .header .mb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .header-menu {
    display: none;
  }
  .header-menu-mb {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-color: white;
    width: 30rem;
    height: 100vh;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-transition: -webkit-transform 0.3s linear;
    transition: -webkit-transform 0.3s linear;
    transition: transform 0.3s linear;
    transition: transform 0.3s linear, -webkit-transform 0.3s linear;
  }
  .header-menu-mb.is-active {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  .header-menu-mb .header-menu-list {
    display: block;
    margin-bottom: 3rem;
  }
  .header-menu-mb .header-menu-item {
    width: 100%;
    padding: 1.5rem 0;
    border-bottom: 1px solid black;
  }
  .header-menu-mb .header-menu-link {
    width: 100%;
    padding: 1.5rem 1rem;
  }
  .header-menu-mb .header-search-wrap {
    display: inline-block;
    padding-left: 1rem;
  }
  .header-menu-mb .search-wrap {
    background-color: #00BFF2;
    border-radius: 3rem;
    margin: 0 0.5rem;
    margin-bottom: 3rem;
  }
  .header-menu-mb .search-input {
    color: #003156;
  }
}

@media screen and (max-width: 475px) {
  .header-phone-icon {
    display: none;
  }
  .header-box-inner {
    padding: unset;
  }
}

@media screen and (max-width: 375px) {
  .header-menu {
    top: 9rem;
  }
  .header-box {
    display: none;
  }
}

.home {
  position: relative;
}

.home-img {
  position: absolute;
  bottom: 0;
}

.home-img-milk {
  position: absolute;
  width: 28%;
  bottom: 20%;
  right: 20%;
}

.home-img-loud {
  position: absolute;
  bottom: -17rem;
  -webkit-animation: loud 5s linear infinite;
          animation: loud 5s linear infinite;
}

@media screen and (max-width: 1550px) {
  .home-img-loud {
    bottom: -14rem;
  }
}

@media screen and (max-width: 1110px) {
  .home {
    height: 55rem !important;
  }
  .home-img-loud {
    bottom: -11rem;
  }
}

@media screen and (max-width: 1023px) {
  .home {
    height: 45rem !important;
  }
  .home-img-loud {
    bottom: -9rem;
  }
}

@media screen and (max-width: 767px) {
  .home {
    height: 45rem !important;
  }
  .home-img-milk {
    width: 30%;
  }
  .home-img-loud {
    bottom: -4rem;
  }
}

@media screen and (max-width: 650px) {
  .home {
    height: 30rem !important;
  }
}

.story-wrap {
  height: 100%;
  background-image: url(../img/story-bg.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  padding-top: 20rem;
  padding-bottom: 30rem;
}

.story-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 10rem;
  position: relative;
  z-index: 10;
}

.story-col1, .story-col2 {
  width: 50%;
}

.story-title {
  font-size: 4rem;
  font-weight: bold;
  line-height: 6.2rem;
  text-transform: uppercase;
  color: #003156;
  padding-right: 10rem;
}

.story-img {
  width: 100%;
  -webkit-transform: translateY(-15%);
          transform: translateY(-15%);
}

.story-col2 {
  background-image: url(../img/desc-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 6rem;
  padding-bottom: 6rem;
  padding-left: 11rem;
  padding-right: 5rem;
}

.story-desc {
  font-size: 1.6rem;
  line-height: 2rem;
}

.story-btn {
  display: inline-block;
  font-size: 1.4rem;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  background-color: #1777AA;
  border-radius: 1rem;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.story-btn:hover {
  background-color: #00BFF2;
  -webkit-box-shadow: 0.5rem 0.5rem 0.5rem;
          box-shadow: 0.5rem 0.5rem 0.5rem;
}

.story-decor {
  position: absolute;
  width: 30%;
  right: 20%;
  top: 15%;
  -webkit-animation: loud3 40s linear infinite alternate;
          animation: loud3 40s linear infinite alternate;
}

@media screen and (max-width: 1440px) {
  .story-wrap {
    padding-top: 18rem;
    padding-bottom: 5rem;
  }
  .story-content {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-left: 10rem;
  }
  .story-img {
    width: 80%;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  .story-col1 {
    -webkit-transform: translateX(10rem);
            transform: translateX(10rem);
  }
  .story-col2 {
    background-size: contain;
    padding-top: 6rem;
    padding-bottom: 6rem;
    padding-left: 11rem;
    padding-right: 5rem;
  }
  .story-title {
    font-size: 3rem;
    padding: 0;
  }
  .story-desc {
    font-size: 1.4rem;
    line-height: 2rem;
  }
}

@media screen and (max-width: 1336px) {
  .story-wrap {
    padding-top: 10rem;
  }
  .story-col2-wrap {
    padding-top: 4rem;
  }
}

@media screen and (max-width: 1336px) {
  .story-wrap {
    padding-top: 10rem;
  }
  .story-content {
    padding: 0;
  }
  .story-col2-wrap {
    padding-top: 4rem;
  }
}

@media screen and (max-width: 1023px) {
  .story-content {
    display: block;
  }
  .story-col1, .story-col2 {
    width: 100%;
  }
  .story-col1 {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  .story-title {
    padding: 0;
    text-align: center;
  }
  .story-img {
    display: none;
  }
}

@media screen and (max-width: 1023px) {
  .story-wrap {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .story-col2 {
    background-image: unset;
    padding: 0;
  }
  .story-title {
    font-size: 2.5rem;
  }
}

.products {
  overflow: hidden;
}

.products .container {
  position: relative;
}

.products-wrap {
  background-image: url(../img/product-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  height: 100%;
  width: 100vw;
}

.products-content {
  padding-top: 18rem;
}

.products-heading {
  font-size: 3rem;
  font-weight: bold;
  line-height: 5.6rem;
  text-transform: uppercase;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 20;
}

.products-title.blue-color {
  color: #00BFF2;
}

.products-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  z-index: 20;
}

.products-item {
  width: calc(33.3% - 2rem);
  text-align: center;
  position: relative;
}

.products-item:nth-child(1) .products-name-wrap {
  background-image: url(../img/bg-item-1.png);
}

.products-item:nth-child(2) .products-name-wrap {
  background-image: url(../img/bg-item-1.png);
}

.products-item:nth-child(3) .products-name-wrap {
  background-image: url(../img/bg-item-1.png);
}

.products-item-title {
  padding: 0 2rem;
  margin-bottom: 1.38rem;
}

.products-name-wrap {
  padding: 0.8rem 0;
  padding-left: 2.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
}

.products-name {
  font-size: 4rem;
  color: #00BFF2;
  line-height: 5.2rem;
  font-weight: bold;
}

.products-link {
  display: inline-block;
  font-size: 1.7rem;
  line-height: 2.4rem;
  padding-right: 2rem;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.products-link:hover {
  color: #00BFF2;
}

.products-readmore {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 4.6rem;
}

.products-icon-wrap {
  padding-left: 2rem;
  border-left: 1px solid black;
}

.products-cart-icon {
  width: 2.6rem;
  height: 2.6rem;
  cursor: pointer;
}

.products-img {
  -webkit-transform: translateX(15%);
          transform: translateX(15%);
}

.products-decor1 {
  position: absolute;
  width: 47rem;
  top: 5rem;
  left: 0;
  z-index: 1;
  -webkit-animation: loud2 65s linear infinite;
          animation: loud2 65s linear infinite;
}

.products-decor2 {
  position: absolute;
  width: 47rem;
  bottom: 20%;
  right: 5%;
  z-index: 1;
  -webkit-animation: loud1 65s linear infinite;
          animation: loud1 65s linear infinite;
}

@media screen and (max-width: 1440px) {
  .products-content {
    padding-top: 9rem;
  }
  .products-heading {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 3rem;
    text-transform: uppercase;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 2.5rem;
  }
  .products-name {
    font-size: 2.5rem;
    color: #00BFF2;
    line-height: 4rem;
    font-weight: bold;
  }
  .products-img {
    width: 75%;
    -webkit-transform: translateX(20%);
            transform: translateX(20%);
  }
}

@media screen and (max-width: 1110px) {
  .products {
    height: auto !important;
  }
  .products-content {
    padding-top: 5rem;
  }
}

@media screen and (max-width: 1023px) {
  .products-content {
    padding-top: 3rem;
  }
  .products-item-title {
    padding: 0;
    margin-bottom: 1rem;
  }
  .products-name {
    font-size: 1.8rem;
  }
  .products-name-wrap {
    background-size: contain;
  }
}

@media screen and (max-width: 767px) {
  .products-list {
    display: block;
  }
  .products-item {
    width: 100%;
  }
}

.news {
  height: auto !important;
}

.news-wrap {
  padding-top: 22rem;
  padding-bottom: 7rem;
  position: relative;
  overflow-x: hidden;
}

.news-heading {
  margin-bottom: 13rem;
}

.news-item:hover .news-title {
  color: #1777AA;
}

.news-item:hover .news-img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.news-img-wrap {
  margin-bottom: 5.8rem;
  position: relative;
  overflow: hidden;
  border-radius: 4.4rem;
}

.news-img {
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}

.news-content {
  padding: 0 3rem;
  position: relative;
  z-index: 10;
}

.news-title {
  font-size: 2.1rem;
  font-weight: bold;
  line-height: 3.7rem;
  color: #00BFF2;
  margin-bottom: 1rem;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.news-desc {
  font-size: 1.6rem;
  line-height: 2rem;
  font-family: "Roboto";
}

.news-desc span {
  font-weight: bold;
}

.news-slides {
  position: relative;
  padding: 0 5rem;
  overflow-x: hidden;
  z-index: 20;
}

.news-nav-btn {
  font-size: 4rem;
  color: #919191;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

.news .swiper-container {
  padding-bottom: 4rem;
}

.news-prev {
  left: 0;
}

.news-next {
  right: 0;
}

@media screen and (max-width: 1110px) {
  .news {
    height: auto !important;
  }
  .news-wrap {
    padding-top: 5rem;
  }
  .news-heading {
    margin-bottom: 6rem;
  }
  .news-content {
    padding: 0 1rem;
  }
}

.footer-wrap {
  background: -webkit-gradient(linear, left top, left bottom, from(#6d8e00), color-stop(0%, #c7e58b), to(#6d8e00));
  background: linear-gradient(180deg, #6d8e00 0%, #c7e58b 0%, #6d8e00 100%);
  position: relative;
  padding: 2rem 0;
}

.footer-wrap::before {
  content: "";
  height: 1rem;
  width: 100%;
  background-color: #c7e58b;
  position: absolute;
  top: -1rem;
}

.footer-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.footer-col1 {
  padding-left: 3.5rem;
  width: 50%;
}

.footer-col2 {
  width: 50%;
}

.footer-col2 .footer-title {
  font-size: 3rem;
}

.footer-title {
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 2.4rem;
  color: #00BFF2;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.footer-selects-desc {
  color: white;
  font-size: 1.6rem;
  line-height: 1.5;
  margin-bottom: 1.7rem;
}

.footer-select-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 1.7rem;
}

.footer-select-wrap {
  width: 100%;
  background-color: white;
  border-radius: 1rem;
  border: 1px solid #00BFF2;
  position: relative;
}

.footer-select-wrap:last-child {
  margin-left: 2rem;
}

.footer-selects {
  padding-right: 17rem;
}

.footer-select {
  display: block;
  width: 100%;
  padding: .5rem  2rem;
  font-size: 2rem;
  border: none;
  background-color: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  font-family: 'Roboto';
  position: relative;
  z-index: 5;
  cursor: pointer;
}

.footer-select-icon {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
  font-size: 1.8rem;
  z-index: 2;
}

.footer-btn {
  font-family: 'Roboto';
  color: #00BFF2;
  font-size: 2.5rem;
  line-height: 4rem;
  font-weight: bold;
  text-transform: uppercase;
  border: 1px solid #00BFF2;
  border-radius: 2.2rem;
  padding: 0 3rem;
  margin-left: auto;
  cursor: pointer;
  background: -webkit-gradient(linear, left top, left bottom, from(#6d8e00), color-stop(0%, white), to(#cbe890));
  background: linear-gradient(180deg, #6d8e00 0%, white 0%, #cbe890 100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.footer-btn:hover {
  background: #00BFF2;
  color: white;
  -webkit-box-shadow: 1rem 1rem 3rem #a19c9c;
          box-shadow: 1rem 1rem 3rem #a19c9c;
}

.footer-address {
  color: white;
  margin-bottom: 0.7rem;
}

.footer-address p {
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.footer-address a {
  font-size: 1.8rem;
  line-height: 2.2rem;
}

.footer-tel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.footer-tel a {
  display: block;
}

.footer-tel a:first-child {
  padding-right: 1rem;
  border-right: 1px solid white;
}

.footer-tel a:last-child {
  padding-left: 1rem;
}

.footer-secur {
  color: white;
  text-transform: uppercase;
  font-size: 1.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: underline;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  margin-bottom: 3rem;
}

.footer-secur:hover {
  color: #00BFF2;
}

.footer-copy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.footer-copy-img {
  width: 12.7rem;
}

.footer-copy-desc {
  color: white;
  font-size: 1.8rem;
  line-height: 2.6rem;
  margin-left: .5rem;
}

@media screen and (max-width: 1440px) {
  .footer-selects {
    padding-right: 10rem;
  }
  .footer-col2 {
    padding-left: 1rem;
  }
}

@media screen and (max-width: 1023px) {
  .footer-selects {
    padding-right: 0;
  }
  .footer-btn {
    font-size: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .footer-content {
    display: block;
  }
  .footer-col1, .footer-col2 {
    width: 100%;
  }
  .footer-col1 {
    padding-left: 0;
    margin-bottom: 2rem;
  }
  .footer-btn {
    margin: 0 auto;
  }
}

.story-home-content {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

.story-imgp {
  position: absolute;
  width: 100vw;
  bottom: 0;
}

.story-img-milk {
  position: absolute;
  width: 28vw;
  bottom: 20%;
  right: 20%;
}

@media screen and (max-width: 1110px) {
  .story-home-content {
    height: 55rem;
  }
}

@media screen and (max-width: 1023px) {
  .story-home-content {
    height: 45rem;
  }
}

@media screen and (max-width: 650px) {
  .story-home-content {
    height: 30rem;
  }
}

.main-story {
  padding-top: 11.7rem;
  background-color: #BEEDFF;
}

.main-story-item {
  position: relative;
  z-index: 20;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: 40rem;
}

.main-story-item:nth-child(2) {
  padding-bottom: 44rem;
}

.main-story-item:nth-child(2) .main-story-content {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.main-story-item:nth-child(2) .main-story-imgwrap {
  width: 50%;
}

.main-story-item:nth-child(2) .main-story-img {
  -webkit-transform: translateY(-40%);
          transform: translateY(-40%);
}

.main-story-item:nth-child(2) .main-story-content {
  padding-right: 0;
}

.main-story-content {
  width: 50%;
  padding-right: 22rem;
}

.main-story-imgwrap {
  position: relative;
  width: 50%;
}

.main-story-img {
  position: absolute;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%);
}

.main-story-title {
  font-size: 4rem;
  line-height: 4.5rem;
  color: #003156;
  text-transform: uppercase;
  font-weight: bold;
}

.main-story-title strong {
  color: #00BFF2;
}

.main-story-desc {
  color: #003156;
}

.main-story-desc span {
  font-weight: bold;
}

.main-story-wrap {
  position: relative;
}

.main-story-decor {
  position: absolute;
  z-index: 2;
  top: 12%;
  width: 98%;
}

.main-story-products {
  position: relative;
  z-index: 20;
  background-image: url(../img/product-bg.png);
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden;
}

.main-story-products-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: relative;
  z-index: 20;
}

.main-story-product {
  width: 33.3%;
  position: relative;
}

.main-story-product:nth-child(1) {
  -webkit-transform: translateX(8%);
          transform: translateX(8%);
}

.main-story-product:nth-child(3) {
  -webkit-transform: translateX(-8%);
          transform: translateX(-8%);
}

.main-story-product-img {
  width: 120%;
}

@media screen and (max-width: 1440px) {
  .main-story-item {
    position: relative;
    z-index: 20;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-bottom: 40rem;
  }
  .main-story-item:nth-child(2) {
    padding-bottom: 35rem;
  }
  .main-story-item:nth-child(2) .main-story-content {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .main-story-item:nth-child(2) .main-story-imgwrap {
    width: 50%;
  }
  .main-story-item:nth-child(2) .main-story-img {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .main-story-item:nth-child(2) .main-story-content {
    padding-right: 0;
  }
}

@media screen and (max-width: 1336px) {
  .main-story-title {
    font-size: 2rem;
    line-height: 2rem;
    margin-bottom: 2rem;
  }
  .main-story-desc {
    font-size: 1.3rem;
  }
  .main-story-decor {
    display: none;
  }
  .main-story-item {
    position: relative;
    z-index: 20;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-bottom: 15rem;
  }
  .main-story-item:nth-child(2) {
    padding-bottom: 20rem;
  }
  .main-story-item:nth-child(2) .main-story-content {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .main-story-item:nth-child(2) .main-story-imgwrap {
    width: 50%;
  }
  .main-story-item:nth-child(2) .main-story-img {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .main-story-item:nth-child(2) .main-story-content {
    padding-right: 0;
  }
  .main-story-content {
    width: 50%;
    padding-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .main-story {
    padding-top: 5rem;
  }
  .main-story-item {
    display: block;
    padding-bottom: 5rem;
  }
  .main-story-item:nth-child(2) {
    padding-bottom: 5rem;
  }
  .main-story-item:nth-child(2) .main-story-imgwrap {
    display: none;
  }
  .main-story-content {
    width: 100%;
  }
  .main-story-imgwrap {
    display: none;
  }
  .main-story-img {
    position: unset;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

.product {
  position: relative;
  padding-top: 22rem;
  overflow: hidden;
}

.product-heading {
  text-align: center;
  width: 74rem;
  margin: 0 auto;
  margin-bottom: 7rem;
  position: relative;
  z-index: 20;
}

.product-heading-title {
  font-size: 5rem;
  line-height: 5.6rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #003156;
}

.product-desc {
  font-size: 2rem;
  line-height: 2.4rem;
}

.product-box {
  padding-bottom: 7rem;
  background-image: url(../img/product-bg-img.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
}

.product-box .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.product-list {
  width: 70%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  position: relative;
  z-index: 20;
}

.product-item {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50%;
}

.product-item:nth-child(1) .product-item-heading {
  background-image: url(../img/product-title-bg1.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 4rem;
  padding-left: 5rem;
}

.product-item:nth-child(1) .product-item-name {
  -webkit-transform: translateX(-10%);
          transform: translateX(-10%);
}

.product-item:nth-child(1) .product-item-info {
  -webkit-transform: translateX(-10%);
          transform: translateX(-10%);
}

.product-item:nth-child(2) .product-item-heading {
  background-image: url(../img/product-title-bg2.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 105%;
  padding-top: 4rem;
}

.product-item:nth-child(2) .product-item-name {
  -webkit-transform: translateX(5%);
          transform: translateX(5%);
}

.product-item:nth-child(2) .product-item-info {
  -webkit-transform: translateX(5%);
          transform: translateX(5%);
}

.product-item-heading {
  text-align: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  padding-bottom: 2rem;
  margin-bottom: 4rem;
}

.product-item-bg {
  position: absolute;
  bottom: 0;
  z-index: 0;
  width: 110%;
  height: auto;
}

.product-item-name {
  font-size: 3rem;
  line-height: 3rem;
  font-weight: bold;
  color: #00BFF2;
  position: relative;
  z-index: 10;
}

.product-item-info {
  display: block;
  color: #1777AA;
  text-decoration: underline;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  position: relative;
  z-index: 10;
}

.product-item-info:hover {
  color: #00BFF2;
}

.product-img {
  -webkit-transform: translateX(10%);
          transform: translateX(10%);
}

.product-detail-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-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 5rem;
  position: relative;
  z-index: 20;
}

.product-detail-item {
  color: #1777AA;
  font-size: 3.5rem;
  text-transform: uppercase;
  font-weight: bold;
  padding: 2.5rem 0;
}

.product-detail-title {
  padding: 1.28rem 3.4rem 1.3rem 1.28rem;
  line-height: 3.8rem;
  background: linear-gradient(355deg, #6d8e00 0%, white 0%, #55dbff 100%);
  border-radius: 0.8rem;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}

.product-detail-title:hover {
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
  -webkit-box-shadow: 1rem 1rem 3rem;
          box-shadow: 1rem 1rem 3rem;
}

.product-btn-buy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  background-image: url(../img/btn-buy-bg.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 2rem 0;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.product-btn-buy > p {
  font-size: 3.3rem;
  color: white;
  font-weight: bold;
  padding-left: 2rem;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.product-btn-buy:hover p {
  color: #003156;
}

.product-decor-loud {
  position: absolute;
  z-index: 1;
  top: 10rem;
  -webkit-animation: loud 5s linear infinite alternate;
          animation: loud 5s linear infinite alternate;
}

.product-decor-loud2 {
  position: absolute;
  width: 30%;
  z-index: 1;
  top: 10rem;
  -webkit-animation: loud2 60s linear infinite;
          animation: loud2 60s linear infinite;
}

.product-decor-loud3 {
  position: absolute;
  width: 30%;
  z-index: 1;
  top: 20rem;
  right: 40rem;
  -webkit-animation: loud1 60s linear infinite;
          animation: loud1 60s linear infinite;
}

.product-decor-bub {
  position: absolute;
  width: 8.5rem;
  z-index: 10;
}

.product-decor-bub.decor1 {
  top: 60%;
  left: 38%;
}

.product-decor-bub.decor2 {
  top: 55%;
  left: 60%;
}

.product-decor-bub.decor3 {
  top: 35%;
  left: 65%;
}

.product-decor-bub.decor4 {
  top: 45%;
  left: 20%;
}

.product:nth-child(2) .product-img {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.product:nth-child(2) .product-box {
  background-image: url(../img/product-bg-img2.png);
}

.product:nth-child(3) .product-img {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.product:nth-child(3) .product-box {
  background-image: url(../img/product-bg-img3.png);
}

@media screen and (max-width: 1440px) {
  .product {
    padding-top: 20rem;
  }
  .product-item-name {
    font-size: 2.5rem;
  }
  .product-detail-title {
    font-size: 3rem;
  }
}

@media screen and (max-width: 1200px) {
  .product {
    padding-top: 10rem;
  }
  .product-heading {
    width: 100%;
  }
  .product-item-name {
    font-size: 2rem;
  }
  .product-detail-title {
    font-size: 2.5rem;
    padding: 1rem 1.5rem;
  }
  .product-decor-bub {
    width: 5rem;
  }
  .product-box {
    padding-bottom: 2rem;
  }
}

@media screen and (max-width: 1023px) {
  .product {
    padding-top: 6rem;
  }
  .product-list {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .product-heading {
    margin-bottom: 3rem;
  }
  .product-heading-title {
    font-size: 3.5rem;
  }
  .product-box .container {
    display: block;
  }
  .product-list {
    width: 100%;
  }
  .product-detail-list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: unset;
  }
  .product-detail-item {
    padding: 0.5rem 0.5rem;
  }
}

@media screen and (max-width: 767px) {
  .product-heading {
    margin-bottom: 2rem;
  }
  .product-heading-title {
    font-size: 3rem;
  }
  .product-detail-title {
    font-size: 1.8rem;
    line-height: 1;
    padding: 1rem;
  }
  .product-item-name {
    font-size: 1.8rem;
  }
  .product-btn-buy {
    margin: 0 auto;
    background-size: contain;
  }
  .product-btn-buy > p {
    font-size: 2rem;
  }
  .product-list {
    display: block;
  }
  .product-item {
    width: 100%;
  }
}

.tintuc {
  padding-top: 18rem;
  padding-bottom: 46rem;
  background-color: #BEECFF;
  background-image: url(../img/news-bg.png);
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden;
}

.tintuc-wrap {
  padding: 0 20.6rem;
}

.tintuc-heading {
  text-align: center;
  margin-bottom: 6.8rem;
}

.tintuc-heading-title {
  color: #003156;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 3rem;
  line-height: 5.6rem;
}

.tintuc-heading-desc {
  color: #003156;
}

.tintuc-highlight-wrap {
  display: block;
  height: 30rem;
  width: 100%;
  background-color: rgba(128, 208, 240, 0.5);
  margin-bottom: 1.5rem;
  border-radius: 2rem;
  position: relative;
}

.tintuc-info {
  padding: 0 4.4rem;
  margin-bottom: 6.8rem;
}

.tintuc-name {
  color: #00BFF2;
  font-weight: bold;
  font-size: 2.1rem;
  line-height: 3.7rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tintuc-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 5rem;
  border-bottom: 1px solid #00BFF2;
}

.tintuc-list {
  margin-bottom: 11rem;
}

.tintuc-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 3.1rem;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  border-radius: 2rem;
}

.tintuc-item .tintuc-desc {
  padding: unset;
  border-bottom: 0;
}

.tintuc-item:hover {
  -webkit-box-shadow: 1rem 1rem 3rem #e4f3fa;
          box-shadow: 1rem 1rem 3rem #e4f3fa;
}

.tintuc-item-wrap {
  width: 30%;
  display: block;
}

.tintuc-content {
  width: 70%;
  padding-left: 4.2rem;
}

.tintuc-pagination {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.tintuc-pagination-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.tintuc-pagination-item {
  font-size: 3rem;
}

.tintuc-pagination-link {
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  padding: 0 2rem;
}

.tintuc-pagination-link:hover {
  color: #00BFF2;
}

.tintuc-pagination-icon {
  font-size: 4rem;
  cursor: pointer;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.tintuc-pagination-icon:hover {
  color: #00BFF2;
}

@media screen and (max-width: 1023px) {
  .tintuc {
    padding-top: 8rem;
    padding-bottom: 15rem;
  }
  .tintuc-wrap {
    padding: 0 10rem;
  }
  .tintuc-list {
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 1023px) {
  .tintuc {
    padding-top: 8rem;
    padding-bottom: 15rem;
  }
  .tintuc-wrap {
    padding: 0;
  }
  .tintuc-desc {
    padding-bottom: unset;
    border: none;
    font-size: 1.3rem;
    -webkit-line-clamp: 2;
  }
  .tintuc-name {
    font-size: 1.6rem;
  }
  .tintuc-content {
    padding-left: 1rem;
  }
}

.article-banner {
  height: 73.5rem;
  background-image: url(../img/banner.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.article-content {
  background-image: url(../img/article-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}

.article-content .container {
  padding: 7.8rem 12rem 40rem 12rem;
}

.article-heading {
  margin-bottom: 5.9rem;
}

.article-title {
  font-size: 5rem;
  line-height: 6.2rem;
  font-weight: bold;
  text-transform: uppercase;
}

.article-title strong {
  color: #00BFF2;
}

.article-desc {
  font-size: 2rem;
  line-height: 2.5rem;
}

.article-desc1 {
  margin-bottom: 5rem;
}

.article-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 19rem;
}

.article-col1 {
  width: 54%;
}

.article-col2 {
  width: 42%;
}

.article-wrap {
  width: 49rem;
  height: 34.3rem;
  margin-left: auto;
}

.article-slides {
  padding: 0 17rem;
  position: relative;
}

.article-item-wrap {
  margin-bottom: 1rem;
  width: 25.3rem;
  position: relative;
  overflow: hidden;
  border-radius: 2.5rem;
}

.article-item-img {
  -webkit-transition: .3s linear;
  transition: .3s linear;
}

.article-item-content {
  padding-left: 2rem;
}

.article-item-title {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 2.1rem;
  color: #00BFF2;
  -webkit-transition: .3s linear;
  transition: .3s linear;
}

.article-item:hover .article-item-img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.article-item:hover .article-item-title a {
  color: #003156;
}

@media screen and (max-width: 1440px) {
  .article-content .container {
    padding: 7.8rem 14rem 30rem 14rem;
  }
  .article-item-wrap {
    width: unset;
  }
  .article-slides {
    padding: 0 5rem;
    position: relative;
  }
}

@media screen and (max-width: 1336px) {
  .article-banner {
    height: 45rem;
  }
  .article-content .container {
    padding: 5rem 12rem 30rem 12rem;
  }
  .article-title {
    font-size: 3rem;
    line-height: 3.5rem;
  }
  .article-wrap {
    width: 100%;
  }
  .article-row {
    margin-bottom: 10rem;
  }
}

@media screen and (max-width: 1023px) {
  .article-content .container {
    padding: 5rem 2rem 30rem 2rem;
  }
  .article-title {
    text-align: center;
  }
  .article-row {
    display: block;
  }
  .article-col1, .article-col2 {
    width: 100%;
  }
  .article-desc2 {
    margin-bottom: 2rem;
  }
  .article-wrap {
    width: 70%;
    margin: 0 auto;
  }
  .article-desc {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 767px) {
  .article-banner {
    height: 30rem;
  }
  .article-content .container {
    padding: 5rem 2rem 10rem 2rem;
  }
  .article-title {
    font-size: 2rem;
  }
  .article-wrap {
    width: 100%;
    margin: 0 auto;
  }
  .article-row {
    margin-bottom: 4rem;
  }
}

.search-popup {
  background-color: white;
  width: 60vw;
  margin: 0 auto;
  margin-top: 5rem;
  border-radius: 5rem;
}

.search-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 1rem;
}

.search-input {
  padding: 1.5rem;
  font-size: 2rem;
  width: 100%;
  outline: none;
  border: none;
  background-color: transparent;
  font-family: "Baloo 2";
}

@media screen and (max-width: 1023px) {
  .search-popup {
    width: 90vw;
    margin: 0 auto;
    margin-top: 5rem;
  }
  .search-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0.5rem 1rem;
  }
  .search-input {
    padding: 1rem;
    font-size: 1.4rem;
    width: 100%;
    outline: none;
    border: none;
  }
}
/*# sourceMappingURL=style.css.map */