@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap');

.row,

.container {

  display: block;

  margin: 0;

  padding: 0;

}

.row::before,

.row::after,

.container::before,

.container::after {

  content: " ";

  display: table;

  clear: both;

}

.container {

  margin: 0 auto;

}



.body {

  padding: 15px;

}



.progress {

  margin: 0 0 10px 0;

}

.progress img {

  display: block;

  margin: 0 auto;

  width: 100%;

  max-width: 500px;

  height: auto;

}



.info-1 {

  margin: 0 0 20px 0;

  text-align: center;

}

.info-1 h1 {

  margin: 0 0 5px 0;

  font-size: 20px;

  line-height: 24px;

  font-weight: 600;

  color: red;

}

.info-1 p {

  font-size: 16px;

  line-height: 24px;

}

.info-1 p b {

  display: block;

  font-weight: 600;

  font-size: 20px;

}



.info-2 {

  margin: 0 -15px 20px -15px;

  padding: 5px 0;

  font-size: 16px;

  line-height: 20px;

  font-weight: 600;

  color: red;

  text-transform: uppercase;

  text-align: center;

  background: #eee;

}



.info-book {

  display: flex;

  flex-direction: row;

  align-items: center;

  position: relative;

  margin: 0 0 50px 0;

}

.info-book::after {

  content: '';

  display: block;

  position: absolute;

  left: 50%;

  bottom: -45px;

  width: 30px;

  height: 30px;

  margin: 0 -15px;

  border: 15px solid transparent;

  border-top-color: red;

}

.info-book .book {

  float: left;

  width: 50%;

}

.info-book .book img {

  display: block;

  width: 100%;

  height: auto;

}

.info-book .text {

  float: left;

  width: 70%;

  padding: 0 0 0 5px;

}

.info-book .text p {

  font-size: 18px;

  line-height: 1.5;

  text-align: left;

}

.info-book .text p span {

  font-weight: 600;

  color: red;

}



.btn {

  display: block;

  position: relative;

  overflow: hidden;

  max-width: 600px;

  height: 42px;

  margin: 0 auto;

  padding: 10px 15px;

  font-family: inherit;

  font-size: 16px;

  line-height: 20px;

  font-weight: 600;

  font-style: normal;

  color: #fff;

  text-align: center;

  text-decoration: none;

  text-transform: uppercase;

  text-align: center;

  vertical-align: middle;

  outline: 0;

  background: #23abdf;

  border: 1px solid #23abdf;

  border-radius: 0;

  transition: .25s ease;

  cursor: pointer;

  white-space: nowrap;

  transition: all .2s ease;

}

.btn::before {

  content: '';

  display: inline-block;

  position: relative;

  width: 30px;

  height: 30px;

  margin: -7px 15px -7px 0;

  background: url('../img/telegram_icon.png') no-repeat center;

  background-size: contain;

}



@media(min-width:500px) {

  .info-book .text {

    padding-left: 5%;

  }

  .info-book .text p {

    font-size: 22px;

  }

}

@media(min-width:600px) {

  .body {

    padding: 25px;

  }

  .info-1 h1 {

    font-size: 26px;

    line-height: 30px;

  }

  .info-1 p {

    font-size: 20px;

  }

  .info-1 p b {

    font-size: 26px;

  }

  .info-2 {

    margin: 0 -25px 25px -25px;

    font-size: 26px;

    line-height: 40px;

  }

  .info-book {

    margin-bottom: 20px;

  }

  .info-book::after {

    width: 150px;

    height: 100px;

    margin: 0 0 10px 210px;

    border: 0;

    background: url('../img/arrow.png') no-repeat left bottom;

    background-size: contain;

  }

  .info-book .text p {

    font-size: 30px;

  }

  .btn {

    height: 52px;

    font-size: 22px;

    line-height: 30px;

  }

}

@media(min-width:800px) {

  .body {

    padding: 40px;

    box-shadow: 0 0 20px rgba(0,0,0,.2);

  }

  .info-2 {

    margin: 0 -40px 30px -40px;

  }

}



















/**/