/* Built by build-site-css.sh from: common.css app.css quill-all.css common-mobile.css volna2.css. Do not edit — edit the sources and rebuild. */
/* ---- common.css ---- */
.lh2, .lh2 p, .lh2 .ql-editor, .lh2 .ql-editor p {
    line-height: 2!important;
}

.container hr {
    opacity: 0.5;
    background-color: #464f81;
    height: 4px;
    width: 100%;
}

.container .ql-container {
    height: auto;
}

.container p {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

#page-top .container {
    padding-left: 9px;
    padding-right: 9px;
}

/*.ql-editor ul+p, .block-content ul+p {
    padding-left: 32px;
}*/

.ql-editor {
    font-family: 'Montserrat','Montserrat Fallback','Montserrat Fallback Roboto',Arial,sans-serif;
}

.font1 {
    font-size: 18px;
    line-height: 1.55;
    font-weight: 700;
}

.font1-20 {
    font-size: 18px;
    line-height: 1.55;
    font-weight: 700;
}

.font2 {
    color: #464f81;
    font-size: 20px;
    line-height: 1.55;
    font-weight: 700;
}

.font3 {
    color: #464f81;
    font-size: 15px;
    line-height: 2;
    font-weight: 400;
}

.font4 {
    color: #f2f2f2;
    font-size: 19px;
    line-height: 1.7;
    font-weight: 400;
}

.font14, .font14 .ql-container {
    color: #464f81;
    font-weight: 400;
    font-size: 14px;
    padding-bottom: 7px;
}

.white-txt {
    color: white;
}

.white-txt .ql-container {
    color: white !important;
}

.font13 {
    color:#464f81;
    font-size:13px;
    font-weight:600;
}

.font20 {
    font-size: 20px;
    color: #464f81;
    line-height: 1.55;
    font-weight: 600;
}

.nopdl {
    padding-left: 0!important;
}

.font40 {
    font-size: 40px;
    line-height: 1.55;
    font-weight: 700;
}

#page-top .card-header {
    height: 62px;
}

.ql-editor.ql-blank::before {
    font-style: normal !important;
    top: 17px !important;
    color: #464f81 !important;
}

.editor.ql-container.ql-snow {
    overflow: visible;
}

.ql-editor {
    box-shadow: none !important;
}

.content-block-editor blockquote {
    border-left: 4px solid #ccc;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 16px;
}

.lh2 .ql-editor p:has(br),
.lh2 .content-block-editor p:has(br),
.ql-editor p:has(br),
.block-content p:has(br),
.content-block-editor p:has(br) {
    margin: 0;
    line-height: 0.5em !important;
}
/* ---- app.css ---- */
:root {
    color-scheme: light only;
}

html {
    color-scheme: light only;
    background-color: #f2f2f2;
}

body {
    color: #464f81 !important;
    font-family: 'Montserrat','Montserrat Fallback','Montserrat Fallback Roboto',Arial,sans-serif;
    background-color: #f2f2f2;
    color-scheme: light only;
}

div div.container {
    padding: 40px 10px;
}

/* min-height, not height: the hero stacks below 768px and .mainimg is a square
   sized at width:100%, so its height tracks the viewport width. Past roughly
   420px of viewport the image + h1 + button exceed a fixed 620px, overflow the
   row and land on top of the "О нас" section that follows. min-height keeps the
   reserved height everywhere it already fits and lets the block grow where it
   does not. */
.first-block {
    min-height: 800px;
}

@media (max-width: 992px) {
    .first-block {
        min-height: 620px;
    }
}

/* Below 768px the hero stacks, so the CTA button is the last thing in the row
   and .volna follows immediately after the container, whose inline padding
   leaves only 10px. That puts the button hard against the wave. The button and
   the wave are in the same flow, so the gap can only come from the hero's own
   bottom spacing -- give it enough that the button sits clearly on the white
   above the wave, the way it does on desktop. */
@media (max-width: 768px) {
    .first-block {
        padding-bottom: 45px;
    }
}

.cons_tab_choose {
    border-bottom: 1px solid #00bbb2; width:170px; height: 30px; padding: 0 20px; margin-bottom: 20px;
}

.cons_tab {
    display: inline-block; padding: 1px 10px;
    cursor: pointer;
}

.cons_tab.active {
    background-color: #00bbb2 !important; color: white; border-radius: 10px 10px 0 0;
}

.page div div.container {
    padding: 40px 25px;
}

a {
    text-decoration: none !important;
    color: #464f81 !important;
}

.page-content a:hover, footer a:hover {
    color: #00bbb2 !important;
}

.green {
    color: #00bbb2 !important;
}

a.green:hover {
    color: #f2f2f2 !important;
    text-decoration: none;
}

@media (min-width: 1200px) {
    .container.maxw1200 {
        max-width: 1200px;
    }
}

@media (max-width: 992px) {
    #menu a {
        font-size: 13px;
    }
}

nav .logo {
    font-size: 32px;
    font-weight: 700;
}

nav li {
    padding-left: 23px;
    padding-top: 7px;
}

#menu a {
    transition: top 0.3s ease-in-out;
    top: 0;
    position: relative;
    animation: sbs-anim-rec299135504-1617796298782 0.3s linear forwards;
}

#menu a:hover {
    color: #00bbb2 !important;
    top: -3px;
}

@media (max-width:991px) {
    nav li {
        padding-left: 10px;
    }
}

.font-small {
    font-size: 12px;
    line-height: 1.55;
    font-weight: 400;
}

.font-small a {
    color: #00bbb2 !important;
}

.c-white {
    color: #f2f2f2 !important;
}

.f-c-white, .f-c-white a {
    color: white !important;
}

.c-blue {
    color: #a0c8ea !important;
}

.c-dark-blue {
    color: #464f81 !important
}

.c-dark-blue div.content-block {
    display: inline-block;
}

[id*="block_home-consultation_by"] {
    display: inline-block;
}

[id*="block_home-place_of_event"] {
    display: inline-block;
}

[id*="block_home-individual_cons"] {
    display: inline-block;
}

[id*="block_home-consultations_for_pair"] {
    display: inline-block;
}

.date {
    display: table-cell;
    text-align: center;
    color: #00bbb2;
    line-height: 1.55;
    font-weight: 600;
    width: 96px;
}

.font-date {
    font-size: 36px;
}

.font-date.days2 {
    font-weight: 400;
    font-size: 34px;
}

.font-date-day {
    font-size: 20px;
    margin-top: -10px;
}

.font-date-week {
    margin-top: -5px;
    font-size: 17px;
}

.ongoing .font-date-day, .ongoing .font-date {
    font-size: 20px;
}

.fontbig {
    font-size: 37px;
    line-height: 1.55;
    font-weight: 700;
}

@media (max-width:1200px) {
    .fontbig {
        font-size: 36px;
    }
}
@media (max-width:992px) {
    .fontbig {
        font-size: 29px;
    }
}

.btn {
    padding: 0 30px;
    height: 65px;
    line-height: 1.55;
    font-weight: 600;
    border-width: 1px;
    border-radius: 40px;
    font-size: 20px;
    background-position: center center;
    border-color: transparent;
    border-style: solid;
    transform: scale(1);
    transition: all 1s ease;
    color: #ffffff;
}

.btn:hover {
    border-color: transparent;
    border-style: solid;
}

.btn.medium {
    padding: 0 15px;
    height: 40px;
}

.btn.small {
    padding: 0 6px;
    height: 20px;
    font-size: 12px;
}

.btn-success:active, .btn-success, .btn-success:hover {
    background-color: #00bbb2 !important;
}

.btn-primary:active, .btn-primary, .btn-primary:hover {
    background-color: #464f81 !important;
}

@media (max-width:992px) and (min-width:768px) {
    .btn {
        height: 50px;
        font-size: 18px;
    }
    .btn-success:active, .btn-success, .btn-success:hover {
        font-size: 18px;
    }
}

.btn:hover {
    transform: scale(1.05) perspective(1px);
}

.mainimg {
    width: 350px;
}
.program-short {
    display: table-cell; padding-left: 30px;position: relative;
}
.uslugi-block {
    padding: 40px 100px;
}
.social-div {
    display: inherit;
}
.social-div a {
    padding: 0 5px;
}
/*.social-div a:last-child {
    padding-right: 30px;
}*/
@media (max-width:768px) {
    .social-div {
        display: block!important;
    }
    .program-short {
        padding-left: 10px !important;
    }
    .uslugi-block {
        padding: 40px !important;
    }
    .mainimg {
        /*margin-right: 0px;
        float: right;*/
        width: 100%;
    }
    .btn {
        padding: 0 15px;
        height: 45px;
        font-size: 17px;
    }
    .cons-info {
        padding-left: 1rem!important;
        padding-right: 1rem!important;
    }
    .font4 {
        font-size: 14px;
    }
    .font4 li a {
        line-height: 2.7;
    }
    /*.blue-block {
        width: 100% !important;
        height: 350px !important;
    }*/
    .white-block {
        padding: 19px !important;
    }
    input.i-rounded::placeholder {
        padding: 0 30px !important;
    }
    /*.blue-block .sign {
        left: 114px !important;
    }*/
    .row {
        margin-right: -10px !important;
        margin-left: -10px !important;
    }
    .rent .font3, .rent .font4 {
        text-align: center;
    }
}
@media (min-width:992px) {
    .mainimg {
        /*margin-right: 20px;*/
        width: 430px;
    }
}
@media (min-width:1200px) {
    .mainimg {
        /*margin-right: 50px;*/
    }
}

@media (min-width:768px) {
    .mainh1div {
        padding-top: 56px;
        margin-left: 0px;
    }
}
@media (min-width:992px) {
    .mainh1div {
        padding-top: 106px;
        margin-left: 35px;
    }
}

/* The 800px/620px reservation above is decorative breathing room sized for a
   tall desktop viewport. On a touch device in landscape -- a phone or a folded
   tablet, wide enough for the two-column hero but only ~600px tall -- it is
   taller than the whole screen, so the hero reads as mostly empty white. Size
   it to its content there instead, keeping a little room before the wave. */
@media (max-height: 700px) and (pointer: coarse) {
    .first-block {
        min-height: 0;
        padding-bottom: 30px;
    }

    .mainh1div {
        padding-top: 24px;
    }
}


.mainh1div button {
    margin-top: 65px;
}
@media (max-width:768px) {
    .mainh1div button {
        margin-top: 10px;
    }
}

div.background-blue {
    background-color: #A0C8EA;
}

div.background-white {
    background-color: #F2F2F2;
}

div.background-blue-dark {
    background-color: #464F81;
    color: white;
}

div.background-wave {
    background-image: url(/images/app/background1_2.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-color: transparent;
    border-style: solid;
}

.blocks-2 {
      padding: 30px 90px 20px 90px;
}

.blocks-2 a:hover {
    color: #00bbb2 !important;
}

@media (max-width:992px) {
    .blocks-2 {
        padding: 20px 0px;
    }
}

.white-block {
    width: 405px;
    height: 387px;
    border-radius: 15px;
    background-color: #f2f2f2;
    background-position: center center;
    border-color: transparent;
    border-style: solid;
    box-shadow: 5px 5px 10px 3px rgb(0 0 0 / 10%);
    padding: 35px;
    margin-bottom: 30px;
}

@media (max-width:992px) and (min-width:768px) {
    .white-block {
        padding: 35px;
    }
}

@media (max-width:1200px) and (min-width:768px) {
    .white-block a {
        font-size: 14px;
    }
}

.blue-block {
    width: 380px;
    height: 332px;
    border-radius: 15px;
    background-color: #464f81;
    background-position: center center;
    border-color: transparent;
    border-style: solid;
    box-shadow: 5px 5px 10px 3px rgb(0 0 0 / 10%);
    padding: 35px;
    margin:0 auto 30px auto;
    position: relative;
}

.blue-block .sign {
    position: absolute;
    top: -35px;
    left: 152px;
}

.sign img {
    width: 73px;
}

input.i-rounded {
    color: #00bbb2;
    border: 1px solid #f2f2f2;
    background-color: #f2f2f2;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    font-size: 16px;
    font-weight: 400;
    height: 40px;
    padding: 0 20px;
    margin: 20px 0px;
    outline: 0;
}

input.i-rounded::placeholder {
    color: #00bbb2;
    padding: 0 50px;
}

.icon {
    width: 61px;
}

.checkbox {
    width: 18px;
    margin-right: 5px;
}

.cons-info .checkbox {
    margin-right: 10px;
}

.cons-info button {
    margin-top: 50px;
    margin-left: 20px;
}

@media (max-width:768px) {
    .cons-info button {
        margin-left: 0px;
    }
}

.volna {
    width:100%;
    display: block;
}

@media (max-width:992px) and (min-width:768px) {
    .cons-info {
        padding-left: 6rem!important;
        padding-right: 6rem!important;
    }
}

@media (min-width:992px) {
    .cons-info {
        padding-left: 3rem!important;
        padding-right: 3rem!important;
    }
}

.rent img {
    height: 100px;
}

@media (max-width: 991px) {
    .rent img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .rent div {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.rent .font3, .rent .font4 {
    max-width: 235px;
    padding: 50px 0px;
}

.services a {
    color: white !important;
    text-transform: uppercase;
}

.services img, .library .service img {
    height: 70px;
}

.library .service {
    padding: 20px 0;
}

.library .service a {
    padding-left: 20px;
}

.services .service {
    padding: 40px 20px;
}

.services .service div {
    padding-top: 10px;
    max-width: 185px;
    margin: 0 auto;
}

.bottom div {
    padding-bottom: 20px;
}

/* Modals */
.modal-content {
    padding: 10px;
    border-radius: 0.6rem;
    background-color: #f2f2f2;
}
.modal-header {
    border-bottom: none;
}
.modal-title {
    font-weight: 600;
    text-align: center;
    width: 100%;
}
.radios label {
    margin-bottom: 0;
}
.radios input {
    width: 20px;
    height: 20px;
    top: 5px;
    position: relative;
    margin-right: 5px;
}
/* payment options (consultation, program with a discount): the label stays beside its radio and
   wraps under itself on a narrow screen or with enlarged phone text, instead of dropping below it.
   Where it fits on one line the position is the same as the old inline layout. */
.form-group.radios > div {
    display: flex;
    align-items: baseline;
    min-height: 32px;
}
.form-group.radios > div > input {
    flex: 0 0 auto;
}
.form-group.radios > div > label {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 4px;
}

.modal .font14 {
    padding-bottom: 0;
}

.form-control {
    color: #464f81;
    border: 1px solid #464f81;
    font-size: 14px;
    font-weight: 400;
    height: 40px;
    border-radius: 0;
    background-color: #f2f2f2;
}

.form-control:focus {
    background-color: #f2f2f2;
}

@media (min-width: 992px) {
    .modal-lg {
        max-width: 610px;
    }
}

@media (min-width: 992px) {
    .main_img_2 {
        position: relative;
        top: -40px;
    }
}

.alert.alert-danger li {
    list-style: none;
}

.content-block, .content-block-editor {
    position: relative;
}

.content-block .content-btn {
    position: absolute;
    left: -90px;
    top: -7px;
    display: none;
}

.content-block-editor .content-btn {
    position: absolute;
    left: -90px;
    top: -7px;
}

.content-block:hover .content-btn {
    display: block;
}

.content-block .content-save {
    display: none;
}

.content-block.edit-mode .content-save, .content-block.edit-mode .content-btn, .content-btn.empty-value {
    display: block;
}

.content-block .ql-container, .content-block-editor .ql-container {
    border:none !important;
    padding-bottom: 0 !important;
}

.content-block .ql-editor, .content-block-editor .ql-editor {
    padding: 0;
    box-shadow: 0px 2px 10px 1px rgb(0 0 0 / 10%)
}

/* this css makes toolbar floatable */
.content-block .ql-toolbar {
    position: absolute;
    top: -46px;
    background-color: white;
    width: 765px;
    left: -10px;
    z-index: 1;
}
.content-block-editor .ql-toolbar {
    position: absolute;
    top: -46px;
    background-color: white;
    width: 770px;
    left: -10px;
    z-index: 1;
    display: none;
}

.ql-container {
    height: 100%;
    min-height: 100%;
    overflow-y: auto;
}
.schedule_div {
    border-width: 1px;
    border-radius: 30px;
    background-position: center center;
    border-color: #00bbb2;
    border-style: solid;
    padding-left: 20px;
    height: 42px;
    width: 465px;
    display: table;
    margin: 5px 0;
    /*margin-bottom: 10px;*/
}

.schedule_div span {
    top: 6px;
    position: relative;
    padding-right: 5px;
}

.block-content ol li::before {
    margin-left: -41px !important;
}

.block-content ul li::before {
    margin-left: -41px !important;
    margin-right: 18px;
}

.block-content ol li {
    padding-left: 41px !important;
}

.block-content ul li {
    padding-left: 41px !important;
}

.content-block a, .content-block-editor a, .modal-dialog a {
    color: #00bbb2 !important;
}

.content-block.title .ql-editor.font40 {
    line-height: 1.55;
}

.ql-editor pre.ql-syntax, .block-content.html pre.ql-syntax {
    background-color: #AAE2DF !important;
    color: #464F81 !important;
    font-size: 100% !important;
    white-space: pre-wrap !important;
    padding: 30px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    font-style: italic !important;
    font-family: 'Montserrat','Montserrat Fallback','Montserrat Fallback Roboto',Arial,sans-serif !important;
    line-height: 1.55 !important;;
    font-weight: 400 !important;;
    max-width: 668px;
}

.ql-editor.ql-blank::before {
    font-style: normal !important;
    left: 0 !important;
    right: 0 !important;
    top: 5px !important;
    color: #464f81 !important;
}

.main-content {
    min-height: 200px;
}
.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 242px;
    background-color: #f2f2f2;
}

.withError, .withError::placeholder {
    border-color: #dc3545 !important;
    color: #dc3545 !important;;
}

input.invalid, textarea.invalid {
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.ql-snow .ql-picker.ql-header {
    width: 130px !important;
}

.ql-picker-options span[data-value="1"], .ql-picker-label[data-value="1"], .ql-picker-label[data-value="1"] {
    padding: 0 !important;
    margin: 0 !important;
}

.ql-editor h2, .block-content.html h2 {
    font-weight: 600;
    font-size: 20px !important;
    margin: 25px 0 !important;
}

.ql-picker-options span[data-value="2"], .ql-picker-label[data-value="2"], .ql-picker-label[data-value="2"] {
    font-weight: 600;
    font-size: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ql-editor h3, .block-content.html h3 {
    background-color: #00bbb2;
    padding: 5px 10px !important;
    font-weight: 500;
    font-size: 18px !important;
    color: white;
    display: inline-block;
    margin: 17px 0 !important;
    min-width: 260px;
    /*text-align: center;*/
}

.ql-picker-options span[data-value="3"], .ql-picker-label[data-value="3"], .ql-picker-label[data-value="3"] {
    background-color: #00bbb2;
    padding: 0 10px !important;
    font-weight: 700;
    font-size: 14px !important;
    color: white !important;
    display: block !important;
    margin-bottom: .5rem !important;
}

.ql-editor h4, .block-content.html h4 {
    background-color: #00bbb244;
    min-width: 600px;
    padding: 10px 15px !important;
    font-weight: 500;
    font-size: 20px !important;
    color: #464f81;
    display: inline-block;
    margin: 17px 0 !important;
    /*text-transform: uppercase;*/
}

.ql-picker-options span[data-value="4"], .ql-picker-label[data-value="4"], .ql-picker-label[data-value="4"] {
    background-color: #00bbb244;
    padding: 5px 10px !important;
    font-weight: 500;
    font-size: 16px !important;
    color: #464f81 !important;
    display: block !important;
    margin-bottom: .5rem !important;
    /*text-transform: uppercase;*/
}

.ql-editor ul li, .block-content.html ul li, .ql-editor ol li, .block-content.html ol li {
    list-style: none;
}

.ql-editor ul li:before, .block-content.html ul li:before {
    content: "\2027" !important;
    top: -3px;
    font-size: 90px;
    /*content: "\2022" !important;
    font-size: 65px;
    top: -7px;*/

    vertical-align: middle;
    line-height: 14px;
    position: relative;
    /*margin: 0 10px 0 0 !important;*/
    display: inline !important;
}

#image-slider ul li:before {
    content: none!important;
}

.ql-editor ul, .block-content.html ul, .ql-editor ol, .block-content.html ol {
    padding-left: 0 !important;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}

/*#content-wrapper .ql-editor ol li:not(.ql-direction-rtl), .ql-editor ul li:not(.ql-direction-rtl) {
    padding-left: 0 !important;
}*/

.ql-editor ol li:before, .block-content.html ol li:before {
    content: "" !important;
    height: 21px;
    width: 21px;
    position: relative;
    top: 5px;
    display: inline-block !important;
    background-image: url("/images/app/checkbox.png");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    margin-right: 20px;
}

@media (min-width: 768px) {
    .ql-editor li:not(.ql-direction-rtl)::before {
        margin-right: 20px !important;
    }
}

#content-wrapper .ql-editor li:not(.ql-direction-rtl)::before {
    margin-left: 0 !important;
}

.green-rectangle {
    background-color: #00bbb2;
    background-position: center center;
    border-color: transparent;
    border-style: solid;
    width: 10px;
    height: 10px;
}
/* ---- quill-all.css ---- */
.ql-align-justify {
    text-align: justify;
}
.ql-align-right {
    text-align: right;
}
.ql-align-center {
    text-align: center;
}
/* ---- common-mobile.css ---- */
@media (max-width: 1200px) {
    .font4 .c-dark-blue {
        font-size: 16px;
    }
}

@media (max-width: 992px) {
    h1.font40 {
        font-size:28px;
    }

    .font4 .c-dark-blue {
        font-size: 14px;
    }

    .page div div.container {
        padding: 20px 25px;
    }

    .blue-block .font4 {
        font-size: 17px;
    }

    /* app.css sets `min-width: 600px` on `.ql-editor h4, .block-content.html h4`.
       Both halves of that pair need relaxing below 992px, otherwise the admin
       Quill editor keeps a 600px-wide h4 and overflows a narrow viewport. */
    .ql-editor h4, .block-content.html h4 {
        min-width: 100%;
    }

    /* app.css pins the floating Quill toolbar to a hard-coded 765px and lifts it
       out of flow (position:absolute; top:-46px). Below 992px that is wider than
       the viewport, so drop it back into normal flow and let the .ql-formats
       groups wrap onto as many rows as they need. */
    .content-block .ql-toolbar {
        position: static;
        width: auto;
        max-width: 100%;
        top: auto;
        left: auto;
    }
}

@media (max-width: 768px) {
    .font4 .c-dark-blue {
        font-size: 16px;
    }

    .white-block {
        height: 355px;
        width: 350px;
        max-width: 100%;
    }

    .blue-block {
        width: 330px;
        height: 330px !important;
        max-width: 100%;
    }

    /* library.blade.php lays each row out as two inline `display: table-cell`
       divs, which size to their content and so cannot shrink below a long
       label. Flex lets the label column shrink; break-word/hyphens handle the
       long Russian compounds that still will not fit at ~320px. */
    .library .service {
        display: flex !important;
        align-items: center;
    }

    .library .service > div {
        display: block !important;
    }

    .library .service > div:last-child {
        min-width: 0;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .page .blue-block {
        max-width: 100%;
        height: 340px !important;
        margin-top: 25px;
    }

    .blue-block .sign {
        left: 135px;
    }

    .page .blue-block .sign {
        left: 115px;
    }

    h1.font40 {
        font-size:22px;
    }

    .program-short .font2 {
        font-size: 17px;
    }

    .date {
        width: 70px;
    }

    .font-date.days2 {
        font-size: 24px;
    }

    .ongoing .font-date-day, .ongoing .font-date, .font-date-day {
        font-size: 14px;
    }

    .font-date {
        font-size: 26px;
    }

    .font-date-week {
        font-size: 14px;
    }

    .block-content.html h4 {
        font-size: 18px !important;
    }

    .schedule_div {
        width: 100%;
        padding: 0 20px !important;
    }

    .schedule_div button {
        margin: 10px 25%;
        float: none !important;
    }

    .form-group.radios .font13 {
        font-size: 12px;
    }

    #subscribe[type="text"] {
        width: 226px !important;
        padding: 0 10px !important;
    }

    form label[for="subscribe"] {
        display: contents;
    }

    .ql-editor h3, .block-content.html h3 {
        font-size: 16px !important;
        hyphens: auto;
    }

    .block-content.html h4 {
        font-size: 16px !important;
    }

    .block-content.html h3 {
        /*text-align: justify;*/
        text-align: left;
    }

    .font14 {
        font-size: 13px;
    }

    h1.font40 {
        font-size: 17px;
        text-align: justify;
    }

    .container p {
        /*text-align: justify;*/
        hyphens: auto;
    }

    .block-content.html pre.ql-syntax {
        /*text-align: justify;*/
        hyphens: auto;
    }

    .block-content.html ul li, .block-content.html ol li {
        /*text-align: justify;*/
        hyphens: auto;
    }

    /* Fix for mobile */
    .block-content ul li {
        padding-left: 1.5rem !important;
    }

    .block-content ul li::before {
        margin-left: -1.7rem !important;
        margin-right: 0.6rem;
    }

    .block-content ol li {
        padding-left: 30px !important;
    }

    .block-content ol li::before {
        margin-right: 8px !important;
        margin-left: -31px !important;
    }

    .block-content.html ul li:before {
        top: -5px;
    }

    /* Fix for mobile */
}
/* ---- volna2.css ---- */
/* Waves drawn with CSS colours instead of baked-in JPG/PNG colours.
   Browsers that force a dark theme (Samsung Internet) recolour section
   backgrounds but leave images almost untouched, so the old wave images showed
   as light stripes between darkened sections. Here both halves of a wave are
   background colours: the outer element is the colour above the wave, the
   inner one the colour below it, cut to the wave shape with a mask. A forced
   dark theme recolours them exactly like the neighbouring sections.
   Heights keep the old images' aspect ratios, so layout matches on every
   screen width. The element keeps the .volna class: common.js sizes the hero
   from $(".volna:first").height(). */

.volna2 > div {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.volna2-blue-up { background-color: #F2F2F2; }
.volna2-blue-up > div {
    padding-top: 7.6552%; /* 127 / 1659 */
    background-color: #A0C8EA;
    -webkit-mask-image: url(/images/app/waves/blue-up.svg);
    mask-image: url(/images/app/waves/blue-up.svg);
}

.volna2-blue-dark { background-color: #A0C8EA; }
.volna2-blue-dark > div {
    padding-top: 7.6190%; /* 128 / 1680 */
    background-color: #464F81;
    -webkit-mask-image: url(/images/app/waves/blue-dark.svg);
    mask-image: url(/images/app/waves/blue-dark.svg);
}

/* Transparent above: these overlap the section before them. */
.volna2-rty > div {
    padding-top: 7.6493%; /* 164 / 2144 */
    background-color: #F2F2F2;
    -webkit-mask-image: url(/images/app/waves/rty.svg);
    mask-image: url(/images/app/waves/rty.svg);
}

.volna2-footer > div {
    padding-top: 7.6493%; /* 164 / 2144 */
    background-color: #464F81;
    -webkit-mask-image: url(/images/app/waves/footer.svg);
    mask-image: url(/images/app/waves/footer.svg);
}