.benefit_block {
  background-color: white;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.benefit_half_ring {
  position: absolute;
  top: 661px;
  left: 0px;
}

.benefit_mg {
  position: absolute;
  top: 682px;
  left: 46px;
}

.benefit_b6 {
  position: absolute;
  top: 878px;
  left: 67px;
}

.benefit_top_ring {
  position: absolute;
  top: -202px;
  left: 0px;
}

.benefit_content {
  padding-top: 110px;
  position: relative;
  z-index: 99;
}

.benefit_header {
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 2;
  color: #17336a;
  font-weight: bold;
  font-size: 62px;
  margin: 0px;
}

.B6_benefits {
  margin-top: 110px;
}

.Mg_benefits > .benefit_header > img {
  height: 60px;
  vertical-align: sub;
}

.B6_benefits > .benefit_header > img {
  height: 50px;
}

.benefits_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 150px;
  width: 100%;
  margin-top: 60px;
}

.benefits_items {
  padding: 0px;
  margin: 0px;
  padding-left: 26px;
  width: 100%;
  box-sizing: border-box;
}

.benefits_items > li {
  list-style-image: url("../img/benefits/list_marker.svg");
  font-size: 20px;
  line-height: 130%;
  margin-bottom: 20px;
  padding-left: 8px;
}

.benefits_items > li:last-child {
  margin: 0px;
}

.melatonin_benefits {
  margin-top: 110px;
}

.melatonin_benefits > .benefit_header > span {
  color: #0182bc;
}

.melatonin_benefits_content {
  margin-top: 96px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 137px;
}

.melatonin_image {
  position: relative;
}

.melatonin_image > img {
  width: 534px;
  position: absolute;
  right: 51px;
  top: -26px;
}

.melatonin_info {
  padding-left: 10px;
}

.Mg_benefits,
.B6_benefits,
.melatonin_benefits {
  position: relative;
  z-index: 100;
}

.show_all_btn_elem {
  display: none;
  justify-self: center;
}

.show_all_btn_elem > .show_all_btn {
  width: 187px;
  height: 51px;
  margin-top: 20px;
}

/* background elements style */

.benefit_left_ring_mgb6,
.benefit_right_top_ring_mgb6,
.benefit_melatonin_left_ring,
.benefit_melatonin_right_ring,
.benefit_right_top_ring_mgb6_small_screen,
.mg_s_benefit_left,
.b6_b_benefit_left,
.mg_s_benefit_right,
.mg_b_benefit_right,
.b6_s_benefit_right,
.melatonin_zzz,
.melatonin_moon {
  position: absolute;
}

.benefit_right_top_ring_mgb6_small_screen {
  display: none;
}

.benefit_right_top_ring_mgb6_small_screen {
  top: 40px;
  right: -312px;
}

.benefit_right_top_ring_mgb6_small_screen > .mg_s_benefit_right {
  top: 58px;
  left: 1px;
}

.benefit_left_ring_mgb6 {
  left: -470px;
  top: 265px;
}

.benefit_left_ring_mgb6 > .mg_s_benefit_left {
  left: 200px;
  top: -26px;
}

.benefit_left_ring_mgb6 > .b6_b_benefit_left {
  right: -12px;
  bottom: 69px;
}

.benefit_right_top_ring_mgb6 {
  right: -262px;
  top: 100px;
}

.benefit_right_top_ring_mgb6 > .mg_s_benefit_right {
  left: 134px;
  top: -35px;
}

.benefit_right_top_ring_mgb6 > .mg_b_benefit_right {
  bottom: 48px;
  left: 303px;
}

.benefit_melatonin_left_ring {
  left: -537px;
  top: 1037px;
}

.benefit_melatonin_left_ring > .melatonin_zzz {
  top: -22px;
  right: 109px;
}

.benefit_melatonin_right_ring {
  right: -497px;
  top: 765px;
}

.benefit_melatonin_right_ring > .melatonin_moon {
  left: 84px;
  bottom: -15px;
}

.benefit_melatonin_right_ring > .b6_s_benefit_right {
  left: 80px;
  top: 0px;
}

/* Media queries */

@media (max-width: 1580px) {
  .benefit_header {
    font-size: 60px;
  }

  .B6_benefits > .benefit_header > img {
    height: 48px;
  }

  .Mg_benefits > .benefit_header > img {
    height: 58px;
  }

  .benefit_melatonin_right_ring,
  .benefit_melatonin_left_ring,
  .benefit_right_top_ring_mgb6 {
    display: none;
  }

  .benefit_right_top_ring_mgb6_small_screen {
    display: block;
  }
}

@media (max-width: 1248px) {
  .benefits_list {
    grid-template-columns: 1fr 1fr;
    column-gap: 84px;
    row-gap: 60px;
    width: 100%;
    margin-top: 60px;
  }

  .melatonin_image > img {
    left: 0px;
    top: -20px;
    width: 100%;
  }

  .melatonin_benefits > .benefit_header > .small_screen_br {
    display: inline;
  }

  .benefit_right_top_ring_mgb6_small_screen,
  .benefit_left_ring_mgb6 {
    display: none;
  }

  .melatonin_benefits_content {
    margin-bottom: 110px;
  }
}

@media (max-width: 994px) {
  .benefit_content {
    padding-top: 100px;
  }

  .B6_benefits,
  .melatonin_benefits {
    margin-top: 100px;
  }

  .benefits_list {
    margin-top: 50px;
    column-gap: 10px;
  }

  .benefit_header {
    font-size: 48px;
  }

  .benefits_items > li {
    font-size: 18px;
  }

  .Mg_benefits > .benefit_header > img {
    height: 48px;
  }

  .B6_benefits > .benefit_header > img {
    height: 40px;
  }

  .melatonin_benefits_content {
    margin-bottom: 100px;
  }
}

@media (max-width: 660px) {

  .small_screen_hiden {
    display: none;
  }

  .benefit_content {
    padding-top: 60px;
  }

  .benefit_header {
    font-size: 42px;
    text-align: left;
  }

  .benefits_items > li {
    font-size: 20px;
  }

  .Mg_benefits > .benefit_header > img {
    height: 41px;
  }

  .B6_benefits > .benefit_header > img {
    height: 34px;
  }

  .benefits_list {
    margin-top: 40px;
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .B6_benefits,
  .melatonin_benefits {
    margin-top: 60px;
  }

  .show_all_btn_elem {
    display: block;
  }

  .melatonin_benefits_content {
    margin-top: 40px;
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .melatonin_image > img {
    position: static;
    width: 100%;
  }

  .melatonin_benefits_content {
    margin-bottom: 60px;
  }

  .melatonin_info {
    padding-left: 0px;
  }
}