@media screen and (max-width: 1239px) {
  body > .body {
    margin: 0 0 50px 0;
  }
}


body > .body > .t {
  flex-basis: auto;
  flex-wrap: nowrap;
  max-width: 1200px;

  margin: 90px 0 0 0;
  padding: 0 0 90px 0;
  border-bottom: 1px solid #f0f0f0;
}

@media screen and (max-width: 1239px) {
  body > .body > .t {
    margin: 50px 0;
    padding: 0 0 50px 0;
    border-bottom: 1px solid #f0f0f0;
  }
}

body > .body > .t > h1 {
  margin: 0;
  flex-grow: 1;
  font-size: 30px;
  line-height: 39px;
  color: #0d0b0d;
}

body > .body > .t > h1 > span {
  font-weight: 600;
  color: #6b1d74;
}

body > .body > .t > .r {
  flex-basis: 560px;
  flex-shrink: 0;
  flex-grow: 0;
}

@media screen and (max-width: 1239px) {
  body > .body > .t > .r {
    flex-basis: auto;
    margin: 30px 0 0 0;
  }
}

body > .body > .t > .r > .t > p {
  margin: 0;
  color: #0d0b0d;
  font-size: 16px;
  line-height: 24px;
}

body > .body > .t > .r > .t > p + p {
  margin: 18px 0 0 0;
}

body > .body > .t > .r > .b {
  margin: 35px 0 0 0;
  padding: 35px 0 0 0;

  border-top: 1px solid #f0f0f0;

  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 1239px) {
  body > .body > .t > .r > .b {
    display: none;
  }
}

body > .body > .t > .r > .b > .i {
  flex-basis: 263px;
  flex-grow: 0;
  flex-shrink: 0;

  color: #6b1d74;
  font-size: 30px;
  line-height: 37px;
  font-weight: 600;
}

body > .body > .t > .r > .b > .i > p {
  margin: 10px 0 0 0;
  color: #0d0b0d;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}


body > .body > .b {
  max-width: 1200px;
  width: 100%;
  margin: 90px 0;
}

@media screen and (max-width: 1239px) {
  body > .body > .b {
    margin: 0;
  }
}

body > .body > .b > h2 {
  margin: 0;
  color: #0d0b0d;
  font-size: 30px;
  line-height: 39px;
  max-width: 500px;
}

@media screen and (max-width: 1239px) {
  body > .body > .b > h2 {
    max-width: unset;
  }
}

body > .body > .b > h2 > span {
  color: #6b1d74;
  font-weight: 600;
}


body > .body > .b > .certs-list {
  /*margin: 30px 0 0 0;*/
  /*padding: 0 45px 60px 45px;*/
  padding: 40px 45px;
  /*margin: 0;*/
  position: relative;
  display: flex;
}

@media screen and (max-width: 1239px) {
  body > .body > .b > .certs-list {
    padding: 0;
    margin: 30px 0 0 0;
    flex-wrap: wrap;
    justify-content: center;
  }
}

body > .body > .b > .certs-list > .cert {
  flex-basis: 270px;
  flex-grow: 0;
  flex-shrink: 0;

  height: 270px;

  padding: 10px;

  background-color: #f6f7f8;

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;

  cursor: pointer;

  outline: none;
  border: none;
}

@media screen and (max-width: 1239px) {
  body > .body > .b > .certs-list > .cert {
    max-width: 345px;
    width: 100%;
    /*flex-basis: 345px;*/
    flex-basis: auto;
    margin: 10px 10px 0 0;
  }
}

body > .body > .b > .certs-list > .cert.hidden {
  display: none;
}

@media screen and (max-width: 1239px) {
  body > .body > .b > .certs-list > .cert.hidden {
    display: flex;
  }
}

body > .body > .b > .certs-list > .cert:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: url(/img/loupe.svg);
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  backdrop-filter: blur(5px);
}

body > .body > .b > .certs-list > .cert:hover:after {
  display: flex;
}

@media screen and (min-width: 1200px) {
  body > .body > .b > .certs-list > .cert + .cert {
    margin: 0 0 0 10px;
  }
}

@media screen and (min-width: 1200px) {
  body > .body > .b > .certs-list > .cert.hidden + .cert {
    margin: 0;
  }
}


body > .body > .b > .certs-list > .cert > img {
  width: 100%;
  height: auto;
}

body > .body > .b > .certs-list > .cert > img.v {
  height: 100%;
  width: auto;
}

body > .body > .b > .certs-list > .controls {
  position: absolute;
  top: 50%;

  transform: translateY(-50%);

  width: 45px;
  height: 45px;

  background-color: #fff;

  outline: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

@media screen and (max-width: 1239px) {
  body > .body > .b > .certs-list > .controls {
    display: none;
  }
}

body > .body > .b > .certs-list > .controls.l {
  left: 0;
}

body > .body > .b > .certs-list > .controls.r {
  right: 0;
}


body > .body > .b > .certs-list > .cert-display-w {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  transform: none;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  background-color: rgba(0, 0, 0, .1);
}


body > .body > .b > .certs-list > .cert-display-w > .cert-display {
  position: relative;
}

body > .body > .b > .certs-list > .cert-display-w > .cert-display > img {

}

body > .body > .b > .certs-list > .cert-display-w > .cert-display > button {
  position: absolute;
  top: 0;
  right: -44px;

  width: 44px;
  height: 44px;

  display: flex;
  justify-content: center;
  align-items: center;

  outline: none;
  border: none;
  cursor: pointer;
  background-color: #fff;
  padding: 0;
}

body > .body > .b > .certs-list > .dots-list {

  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 1239px) {
  body > .body > .b > .certs-list > .dots-list {
    display: none;
  }
}

body > .body > .b > .certs-list > .dots-list > .dot {
  flex-basis: 7px;
  flex-grow: 0;
  flex-shrink: 0;

  height: 7px;

  border-radius: 50%;

  background-color: #d9d9d9;
}

body > .body > .b > .certs-list > .dots-list > .dot + .dot {
  margin: 0 0 0 10px;
}

body > .body > .b > .certs-list > .dots-list > .dot.a {
  background-color: #0d0b0d;
}