

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    --banner-width: 480px; /* длина баннера */

    --title-width: 100%; /* длина заголовка */
    --title-size: 16px; /* размер заголовка */
    --title-color: #ffe997; /* цвет заголовка */

    --text-width: 265px; /* длина текста */
    --text-size: 13px;  /* размер текста */ 
    --text-color: white; /* цвет текста */

    --cta-width: 100%; /* длина подписи */
    --cta-size: 13px;  /* размер подписи */ 
    --cta-color: white; /* цвет подписи */

    --btn-width: 116px; /* длина кнопки */
    --btn-height: 34px; /* высота кнопки */
    --btn-color: white; /* цвет текста кнопки */
    --btn-bg-color: #07a2f0; /* цвет фона кнопки */
    --btn-size: 16px; /* размер текста кнопки */
}

.schoolbanner_wrapper {
    position: fixed;
    width: fit-content;
    bottom: 15px;
    left: 85px;
}
.schoolbanner:before{
    content:'';
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    position: absolute;
    top:-2px;
    left: -2px;
    background: linear-gradient(to right, rgba(138,229,252,1) 1%, rgba(0,151,228,1) 100%);;
    z-index: -1;
    border-radius: 10px;
}
.schoolbanner {
    display: flex;
    max-width: var(--banner-width);
    width: 100%;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    background:  105% 30% / 200px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='549' height='414' viewBox='0 0 549 414' fill='none'%3E%3Cg filter='url(%23filter0_d_4159_5)'%3E%3Cpath d='M90 363.882H192.48C195.49 363.732 498.6 360.532 508.59 360.532C533.06 360.532 537.91 343.172 537.99 330.812C538.35 276.892 537.99 124.702 537.99 102.852C537.99 100.762 537.74 96.8516 532.76 93.2816C518.7 83.1816 443.12 33.0316 346.76 55.9216C183.36 94.7316 158.3 209.032 147.79 247.112C141.07 271.452 119.25 347.992 90 363.882Z' fill='url(%23paint0_linear_4159_5)'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_4159_5' x='0' y='0' width='548.15' height='413.882' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='-40'/%3E%3CfeGaussianBlur stdDeviation='25'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.392157 0 0 0 0 0.792157 0 0 0 0 0.917647 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_4159_5'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_4159_5' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_4159_5' x1='-186.93' y1='206.942' x2='538.15' y2='206.942' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.41' stop-color='%2373D8F8'/%3E%3Cstop offset='1' stop-color='%238BE6FC'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"), -webkit-linear-gradient(left, rgba(0,151,228,1) 1%, rgba(138,229,252,1) 100%);
    background:  105% 30% / 200px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='549' height='414' viewBox='0 0 549 414' fill='none'%3E%3Cg filter='url(%23filter0_d_4159_5)'%3E%3Cpath d='M90 363.882H192.48C195.49 363.732 498.6 360.532 508.59 360.532C533.06 360.532 537.91 343.172 537.99 330.812C538.35 276.892 537.99 124.702 537.99 102.852C537.99 100.762 537.74 96.8516 532.76 93.2816C518.7 83.1816 443.12 33.0316 346.76 55.9216C183.36 94.7316 158.3 209.032 147.79 247.112C141.07 271.452 119.25 347.992 90 363.882Z' fill='url(%23paint0_linear_4159_5)'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_4159_5' x='0' y='0' width='548.15' height='413.882' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='-40'/%3E%3CfeGaussianBlur stdDeviation='25'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.392157 0 0 0 0 0.792157 0 0 0 0 0.917647 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_4159_5'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_4159_5' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_4159_5' x1='-186.93' y1='206.942' x2='538.15' y2='206.942' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.41' stop-color='%2373D8F8'/%3E%3Cstop offset='1' stop-color='%238BE6FC'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"), -moz-linear-gradient(left, rgba(0,151,228,1) 1%, rgba(138,229,252,1) 100%);
    background:  105% 30% / 200px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='549' height='414' viewBox='0 0 549 414' fill='none'%3E%3Cg filter='url(%23filter0_d_4159_5)'%3E%3Cpath d='M90 363.882H192.48C195.49 363.732 498.6 360.532 508.59 360.532C533.06 360.532 537.91 343.172 537.99 330.812C538.35 276.892 537.99 124.702 537.99 102.852C537.99 100.762 537.74 96.8516 532.76 93.2816C518.7 83.1816 443.12 33.0316 346.76 55.9216C183.36 94.7316 158.3 209.032 147.79 247.112C141.07 271.452 119.25 347.992 90 363.882Z' fill='url(%23paint0_linear_4159_5)'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_4159_5' x='0' y='0' width='548.15' height='413.882' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='-40'/%3E%3CfeGaussianBlur stdDeviation='25'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.392157 0 0 0 0 0.792157 0 0 0 0 0.917647 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_4159_5'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_4159_5' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_4159_5' x1='-186.93' y1='206.942' x2='538.15' y2='206.942' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.41' stop-color='%2373D8F8'/%3E%3Cstop offset='1' stop-color='%238BE6FC'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"), -o-linear-gradient(left, rgba(0,151,228,1) 1%, rgba(138,229,252,1) 100%);
    background:  105% 30% / 200px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='549' height='414' viewBox='0 0 549 414' fill='none'%3E%3Cg filter='url(%23filter0_d_4159_5)'%3E%3Cpath d='M90 363.882H192.48C195.49 363.732 498.6 360.532 508.59 360.532C533.06 360.532 537.91 343.172 537.99 330.812C538.35 276.892 537.99 124.702 537.99 102.852C537.99 100.762 537.74 96.8516 532.76 93.2816C518.7 83.1816 443.12 33.0316 346.76 55.9216C183.36 94.7316 158.3 209.032 147.79 247.112C141.07 271.452 119.25 347.992 90 363.882Z' fill='url(%23paint0_linear_4159_5)'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_4159_5' x='0' y='0' width='548.15' height='413.882' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='-40'/%3E%3CfeGaussianBlur stdDeviation='25'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.392157 0 0 0 0 0.792157 0 0 0 0 0.917647 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_4159_5'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_4159_5' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_4159_5' x1='-186.93' y1='206.942' x2='538.15' y2='206.942' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.41' stop-color='%2373D8F8'/%3E%3Cstop offset='1' stop-color='%238BE6FC'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"), linear-gradient(to right, rgba(0,151,228,1) 1%, rgba(138,229,252,1) 100%);

    /* border: solid 2px #8ae5fc;*/
    border-radius: 9px;
    padding-right: 20px;
}

.schoolbanner_content,
.schoolbanner_cta {
    display: flex; 
    flex-direction: column;
}

.schoolbanner_content {
    padding: 10px 0 10px 20px;
}

.schoolbanner-title {
    max-width: var(--title-width);
    color: var(--title-color);
    font-size: var(--title-size);
    margin: 0;
    font-style: normal;
    font-weight: 700;
    line-height: 121%;
    letter-spacing: -0.4px;
    text-transform: uppercase;
}
.schoolbanner_subtitle {
    color: var(--text-color);
    max-width: var(--text-width);
    font-size: var(--text-size);
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.schoolbanner_img {
    max-width: 80px;
    margin-left: -5px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    align-self: flex-end;
}
.schoolbanner_img img{
    width: 100%;
}
.schoolbanner_link {
    transition: 0.3s ease-in-out;
    text-decoration: unset !important;

    cursor: pointer;
    display: flex;
    align-self: center;
    min-width: var(--btn-width);
    min-height: var(--btn-height);
    width: min-content;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: var(--btn-bg-color);

    color: var(--btn-color);
    font-size: var(--btn-size);
    font-style: normal;
    font-weight: 600;

    border: 3px solid #ffea9f;
    padding: 0px 12px;
    letter-spacing: 0.2px;
    line-height: 1;
    font-size: var(--btn-size);
    border-radius: 3px;
}

.schoolbanner_close {
    display: block;
    line-height: 0;
    width: 10px;
    height: 10px;
    text-decoration: unset;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: -15px;
}

.schoolbanner_preheader {
    color: var(--text-color);
    font-size: var(--text-size);
    font-style: normal;
    line-height: normal;
}
.schoolbanner_cta-text{
    font-size: var(--cta-size);
    text-align:center;
    color: var(--cta-color);
    font-style: normal;
    line-height: normal;
}
.schoolbanner_cta {
    margin-left:17px;
}

@media (max-width: 768px) {
    :root {
        --banner-width: 320px !important;

        --title-width: 100%; /* длина заголовка */
        --title-size: 13px; /* размер заголовка */
        --title-color: #ffe997; /* цвет заголовка */

        --text-width: 265px; /* длина текста */
        --text-size: 12px;  /* размер текста */ 
        --text-color: white; /* цвет текста */

        --btn-width: 80px;
        --btn-height: 31px;
    }
    .schoolbanner_wrapper {
        left: 5px;
        bottom: 50px;
    }
    .schoolbanner {
        width: 320px !important;
    }
    .gc-main-content:not(.with-left-menu) .schoolbanner_wrapper {
        bottom: 5px;
        left: 5px;
    }
    .schoolbanner_content {
        padding: 5px 0 5px 15px;
    }
    .schoolbanner-title {
        max-width: 120px; 
    }
    .schoolbanner_subtitle {
        max-width: 220px;
        margin-top: 5px;
    }
    .schoolbanner_close {
        top: 5px;
        right: 5px;
    }
    .schoolbanner_link {
        font-size: 15px;
    }
    /*.schoolbanner {|
    display:grid;
    grid-template-areas: 'content cta'
    'content img';
    grid-template-columns: 60% 1fr;
}
    .schoolbanner_content {
    grid-area: content;
    display: grid;

}
    .schoolbanner_cta {
    grid-area: cta;
}*/
    .schoolbanner_img {
        display: none;
    }
    .schoolbanner_cta {
        position: absolute;
        top: 5px;
        right: 25px;
    }
}


@media (min-width: 992px) {
    .schoolbanner_link:hover {
        color: var(--btn-color);
        box-shadow: 0 0 6px 1px rgb(96 96 96 / 30%)
    }
    .schoolbanner_link:active {
        box-shadow: inset 1px 1px 1px grey;
    }
}

@media (max-width: 350px) {
    .schoolbanner:before{
        display: none;
    }
    .schoolbanner_wrapper {
        left: 0 !important;
        max-width: 100%;
        width: 100%;
    }
    .schoolbanner {
        border-radius: 0;
        width: 100% !important;
        max-width: 100%;
    }
}
