body {
    background-color: #d8e8fe;
    font-family: "Golos"
}
body #page-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: url(../images/body_bg.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position-x: 50%
}
.content {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto
}
.content.popup {
    display: flex;
    height: 100%
}
.content.popup .button_back, .content.popup .content__wraper {
    display: none
}
.button_back.lecta {
    width: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-family: "Inter";
    font-weight: 700;
    padding: 10px 40px;
    font-size: 14px
}
.button_back.lecta img {
    height: 40px
}
.button_back.lecta img:nth-child(2) {
    margin-left: 31px;
    height: 44px;
    width: auto
}
.button_back p:hover {
    cursor: pointer
}
.button_back p {
    margin-bottom: 0
}
.content__wraper {
    font-family: Arial, Helvetica, sans-serif;
    font-family: "Golos";
    color: #1b1b1b;
    font-size: 18px;
    border-radius: 40px;
    margin-bottom: 32px
}
.gray, .list_row.header p {
    color: #797e8c
}
p {
    margin: 0
}
.popup-overlay {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}
.popup-close {
    display: flex;
    height: 34px;
    margin: 10px 40px;
    border: 1px solid #1a89f9;
    border-radius: 17px;
    cursor: pointer;
    padding: 0 24px;
    width: 344px;
    width: max-content
}
.popup-close p {
    color: #1a89f9;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 0 0
}
.popup-close p.arrow {
    width: 1em;
    margin-right: 19px
}
.popup-close p svg {
    font-size: 18px;
    margin-bottom: -3px
}
.popup-wrap {
    width: 100%;
    text-align: center
}
.popup-wrap iframe {
    border: none;
    width: 100%;
    height: 100%;
    border-radius: 40px
}
.popup-wrap.test iframe {
    border-radius: 0
}
.popup-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 20px 40px;
    width: calc(100vw - 81px);
    max-width: 1286px
}
.popup-header div:first-child {
    width: 70%;
    color: #312a2a
}
.popup-header p:first-child {
    font-weight: 700;
    font-size: 28px;
    line-height: 36px
}
.popup-header p:last-child {
    font-weight: 500;
    font-size: 24px;
    line-height: 36px
}
.popup-header .toTest p {
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    color: #3176db
}
.popup-header .toTest:hover {
    cursor: pointer
}
.popup-control {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: calc(100vw - 81px);
    max-width: 1286px;
    margin: 24px 40px
}
.popup-control div {
    display: flex;
    width: 33%;
    justify-content: center
}
.popup-control div p {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #1a89f9;
    margin: 0
}
.popup-control div .wide {
    display: inline
}
.popup-control div .narrow {
    display: none
}
.popup-control div p:hover {
    cursor: pointer
}
.popup-control div.allVideo p {
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    border: 2px solid #3176db;
    border-radius: 8px;
    width: 148px;
    height: 48px;
    padding: 10px 0;
    transition: 0.1s
}
.popup-control div.allVideo p:hover {
    box-shadow: 0px 4px 18px 1px #9ecaff;
    color: #ffffff;
    background-color: #3176db
}
.popup-control .prewModule p:first-child {
    margin-right: 10px
}
.popup-control .nextModule p:last-child {
    margin-left: 10px
}
.popup-control .prewModule {
    justify-content: flex-start
}
.popup-control .nextModule {
    justify-content: flex-end
}
.popupAd {
    font-family: "Circe";
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    width: 126px;
    height: 25px;
    background: #f6f8fb;
    box-shadow: 0px 0px 5px rgba(173, 175, 179, 0.7);
    border-radius: 8px;
    padding-top: 4px;
    text-align: center
}
@media all and (max-width: 1406px) {body #page-container { background-size: 100% } }
@media all and (max-width: 900px) {body #page-container { background-size: calc(100vw + 20%) } .button_back.lecta { padding: 10px 16px } .content__wraper { font-size: 16px; border-radius: 20px } .content__bookLogo { max-width: 312px } .popup-header { flex-direction: column; font-size: 20px; margin: 16px; width: calc(100vw - 33px) } .popup-header div:first-child { width: auto; align-self: baseline } .popup-header .toTest { align-self: center } .popup-wrap iframe { border-radius: 20px } .popup-control { margin: 20px 16px; width: calc(100vw - 33px) } .popup-close { margin: 10px 16px } .popup-control div .narrow { display: inline } .popup-control div .wide { display: none } }
@media all and (max-width: 600px) {.popup-control .prewModule { order: 1; flex-grow: 1; width: 50% } .popup-control .nextModule { order: 2; flex-grow: 1; width: 50% } .popup-control .allVideo { order: 3; width: 100%; justify-content: center; margin-top: 32px } }
.content .invisible {
    display: none
}