body {
    margin: 0;
    padding: 0;
}
@font-face {
    font-family: 'Geometria';
    src: url('/design/images/actions/2019/live_in_family/fonts/Geometria.ttf')  format('truetype')
}
@font-face {
    font-family: 'Geometria-Bold';
    src: url('/design/images/actions/2019/live_in_family/fonts/Geometria-Bold.ttf')  format('truetype')
}
.header {
    position: relative;
}
.header__gradient {
    height: 47px;
    width: 100%;
    background: url(/design/images/actions/2019/live_in_family/header-bg.png) no-repeat;
    background-position: top center;
    position: relative;
}
.header__container {
    width: 1292px;
    margin: -47px auto 0;
    display: grid;
    grid-template-columns: 165px auto 165px;
    grid-column-gap: 40px;
    padding: 23px 37px;
    background: #fff;
    position: relative;
    border-radius: 0 0 15px 15px;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15);
}
.header__main-logo_container {
    display: flex;
    margin: auto;
}
.header__nav {
    display: grid;
    align-items: center;
}
.main-menu__list {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
}
.main-menu__item {
    position: relative;
}
.main-menu__link {
    display: block;
    font-family: 'Geometria', sans-serif;
    color: #545454;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: 3px;
}
.main-menu__item:after {
    content: '';
    position: absolute;
    width: 100%;
    background: linear-gradient(90deg, #007EC4 0%, #898AF3 100%);
    height: 2px;
    display: none;
}
.main-menu__item:hover:after {
    display: block;
}
.main-menu__item:hover .main-menu__link {
    color: #007EC4;
}
.main {
    background: url(/design/images/actions/2019/live_in_family/main-bg.png) no-repeat;
    background-position: top center;
    background-size: cover;
    padding-top: 30px;
    padding-bottom: 10px;
}
.lf__main-description {
    max-width: 1640px;
    margin: auto;
    display: grid;
    grid-template-columns: 70% auto;
    background: url(/design/images/actions/2019/live_in_family/description-bg.png) no-repeat;
    background-position: bottom right 50px;
    background-size: 40%;
}
.lf__header {
    font-family: 'Geometria', sans-serif;
    background: linear-gradient(70deg, #007EC4 60%, #0D61BC 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    font-size: 44px;
    max-width: 800px;
    text-align: center;
}
.main-description__left-side {
    justify-self: center;
    text-align: center;
}
.main-description__link-container {
    display: grid;
    justify-content: center;
    width: 340px;
    margin: auto;
}
.main-description__img {
    margin: 0 auto 45px;
}
.main-description__link {
    width: 312px;
    background: #fff;
    border-radius: 40px;
    padding: 7px 0 7px 28px;
    display: grid;
    grid-template-columns: 66px auto;
    align-items: center;
    text-decoration: none;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
}
.main-description__link-img {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
}
.main-description__link_span {
    color: #242424;
    font-size: 20px;
    font-family: 'Geometria', sans-serif;
}
.lf__about {
    max-width: 1300px;
    margin: 130px auto 0;
    display: grid;
    grid-template-columns: 570px auto;
    grid-column-gap: 40px;
}
.about__img {
    max-width: 100%;
    width: 100%;
    object-fit: cover;
}
.lf__header_small {
    font-family: 'Geometria-Bold', sans-serif;
    color: #242424;
    font-size: 24px;
    text-transform: uppercase;
    margin-top: 0;
}
.about__paragraph {
    font-size: 20px;
    color: #242424;
    font-family: 'Geometria-Bold', sans-serif;
}
.about__small-paragraph {
    font-size: 18px;
    font-family: 'Geometria', sans-serif;
}
.about__link {
    display: block;
    max-width: 204px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
    border-radius: 60px;
    font-size: 16px;
    color: #007EC4;
    text-decoration: none;
    text-align: center;
    padding: 23px 20px 23px 50px;
    font-family: 'Geometria', sans-serif;
    background: url(/design/images/actions/2019/live_in_family/blue-play_icon.png) no-repeat;
    background-position: center left 25px;
    margin-top: 40px;
}
.lf__participants {
    display: grid;
    grid-template-columns: 450px auto;
    width: 1620px;
    float: right;
    margin-top: 150px;
    padding-bottom: 250px;
}
.descr-side__blue-paragraph {
    font-size: 18px;
    font-family: 'Geometria-Bold', sans-serif;
    background: linear-gradient(70deg, #007EC4 60%, #0D61BC 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.participants__name-paragraph {
    color: #D21343;
    text-align: center;
    font-family: 'Geometria-Bold', sans-serif;
    font-size: 18px;
}
.participants__profession-paragraph {
    color: #3F4658;
    font-size: 18px;
    font-family: 'Geometria', sans-serif;
    font-style: italic;
    text-align: center;
}
.participants__slider-side {
    position: relative;
}
.participants__list {
    max-width: 1100px;
    width: 100%;
    padding: 0;
    float: right;
    margin: 0;
    max-height: 270px;
    background: linear-gradient(175.84deg, #3F88D9 8.91%, #898BF8 96.83%);
    border-radius: 10px;
    z-index: 2;
}
.pseudo-element {
    position: absolute;
    width: 110px;
    height: 125px;
    background: url(/design/images/actions/2019/live_in_family/dotted-rect.png) no-repeat;
    top: -70px;
    left: 17px;
}
.clear {
    clear: both;
}
.participants__list .slick-slide > div {
    display: flex;
    justify-content: center;
    padding-top: 45px;
}
.participants__list .slick-list {
    padding: 0 0 40px 0;
}
.participants__list .slick-prev, 
.participants__list .slick-next {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(142.05deg, #3C85DE 8.13%, #898AF3 86.37%);
}
.participants__list .slick-prev:before, 
.participants__list .slick-next:before {
    font-family: 'Geometria', sans-serif;
    font-size: 40px;
    line-height: 11px;
    opacity: 1;
}
.participants__list .slick-prev {
    left: -519px;
    top: 230px;
}
.participants__list .slick-next {
    left: -440px;
    top: 230px;
}
.participants__item {
    max-width: 267px;
    background: #fff;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    padding: 28px;
}
.participants__img {
    max-width: 201px;
    height: 201px;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
    margin: 18px auto 0;
}
.lf__live-video {
    margin: 70px 0 150px;
    position: relative;
}
.lf__live-video:after {
    content: '';
    position: absolute;
    width: calc(50% - 65px);
    height: 133px;
    background: url(/design/images/actions/2019/live_in_family/live-video-bg.png) no-repeat;
    background-position: center;
    background-size: cover;
    bottom: -65px;
    border-radius: 0 5px 5px 0;
}
.section-header {
    text-align: center;
    margin-bottom: 80px;
}
.live-video__container {
    display: grid;
    grid-template-columns: 640px auto;
    max-width: 1200px;
    margin: auto;
}
.live-video__header {
    font-size: 22px;
    font-family: 'Geometria-Bold', sans-serif;
    background: linear-gradient(70deg, #007EC4 60%, #0D61BC 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 0;
    max-width: 320px;
}
.live-video__video-side {
    position: relative;
}
.live-video__video-side .pseudo-element {
    top: -40px;
    right: -40px;
    left: initial;
}
.live-video__video {
    max-width: 640px;
    position: relative;
    z-index: 3;
}
.toggleplayer1.play {
    position: absolute;
    width: 66px;
    height: 66px;
    left: calc(50% - 33px);
    top: calc(50% - 33px);
    background: url(/design/images/actions/2019/live_in_family/play-btn.png) no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 10;
    border-radius: 50%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
}
.toggleplayer1.stop {
    position: absolute;
    width: 39px;
    height: 39px;
    left: 10px;
    top: 10px;
    background: url(/design/images/actions/2019/live_in_family/pause-btn.png) no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 10;
    border-radius: 50%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
}
.live-video__descr-side {
    display: grid;
    justify-content: end;
    grid-template-rows: 80px auto;
}
.live-video__text {
    max-width: 426px;
}
.live-video__wrapp {
    max-width: 100%;
    width: 100%;
    object-fit: cover;
    position: relative;
    z-index: 5;
}
@media screen and (max-width: 1630px) {
    .lf__participants {
        grid-template-columns: auto;
        grid-template-rows: 160px 400px;
        width: 90%;
        margin: 150px auto 0;
        float: none;
        padding-bottom: 50px;
    }
    .participants__descr-side {
        text-align: center;
    }
    .participants__list {
        float: none;
        margin: auto;
    }
    .participants__list .slick-prev {
        left: -70px;
        top: 244px;
    }
    .participants__list .slick-next {
        right: -70px;
        left: initial;
        top: 244px;
    }
    .participants__slider-side .pseudo-element {
        top: -30px;
        left: 150px;
    }
}
@media screen and (max-width: 1300px) {
    .header__container {
        width: calc(100% - 20px);
        margin: 0 auto;
        grid-column-gap: 20px;
        padding: 23px 10px;
    }
    .main {
        padding-top: 30px;
    }
    .lf__about {
        max-width: 100%;
        grid-column-gap: 30px;
        padding: 0 10px;
    }
}
@media screen and (max-width: 1245px) {
    .participants__list {
        max-width: 800px;
    }
    .participants__slider-side .pseudo-element {
        left: 128px;
    }
}
@media screen and (max-width: 1110px) {
    .main-menu__list {
        flex-wrap: wrap;
    }
    .main-menu__item {
        padding: 10px 0;
    }
    .lf__live-video {
        margin: 150px 0;
    }
    .section-header {
        margin-bottom: 30px;
    }
    .live-video__container {
        grid-template-columns: auto;
        grid-row-gap: 40px;
        max-width: 100%;
        margin: auto;
    }
    .live-video__video-side {
        text-align: center;
        padding: 0 20px;
    }
    .live-video__video-side .pseudo-element {
        top: -33px;
        right: 250px;
    }
    .live-video__descr-side {
        display: block;
        width: 100%;
        grid-area: 1/1/1/2;
        text-align: center;
    }
    .live-video__header,
    .live-video__text {
        max-width: 90%;
        margin: 0 auto;
    }
    .lf__live-video:after {
        content: '';
        width: calc(70% - 65px);
    }
}
@media screen and (max-width: 940px) {
    .lf__about {
        margin: 50px auto 0;
        grid-template-columns: auto;
    }
    .about__descr-side {
        grid-area: 1/1/2/1;
        text-align: center;
    }
    .about__link {
        margin: 40px auto;
    }
    .about__img-side {
        display: flex;
    } 
    .about__img {
        max-width: 570px;
        margin: auto;
    }
    .participants__list {
        max-width: 350px;
    }
    .participants__slider-side .pseudo-element {
        top: -10px;
        left: 237px;
    }
    .live-video__video-side .pseudo-element {
        right: 115px;
    }
}
@media screen and (max-width: 860px) {
    .main {
        padding-top: 0px;
    }
    .lf__main-description {
        padding-top: 0px;
        grid-template-columns: auto;
        grid-template-rows: repeat(2, 550px);
        background: url(/design/images/actions/2019/live_in_family/description-bg.png) no-repeat;
        background-position: bottom 50px right 50px;
        background-size: 80%;
    }
}
@media screen and (max-width: 740px) {
    .header__container {
        grid-column-gap: 0;
    }
    .header__nav {
        grid-area: 2/1/1/4;
    }
    .header__bdd-logo_container {
        grid-area: 2/3/2/4;
    }
    .lf__header {
        font-size: 34px;
    }
    .lf__main-description {
        grid-template-rows: 550px 300px;
        background-position: bottom right 50px;
    }
}
@media screen and (max-width: 500px) {
    .lf__participants {
        grid-template-rows: auto 400px;
        grid-row-gap: 20px;
        margin: 50px auto 0;
    }
    .slick-dots {
        bottom: -245px;
    }
    .lf__header {
        font-size: 24px;
    }
}
@media screen and (max-width: 370px) {
    .lf__main-description {
        grid-template-rows: 550px 220px;
        background-position: bottom center;
        background-size: 90%;
    }
    .main-description__link {
        width: 272px;
        padding: 7px 0 7px 7px;
    }
    .lf__about {
        grid-template-rows: auto 270px;
    }
    .participants__list {
        max-width: 320px;
    }
    .participants__item {
        max-width: 250px;
    }
    .participants__slider-side .pseudo-element {
        left: initial;
        right: -10px;
    }
    .live-video__video-side .pseudo-element {
        right: 10px;
    }
    .lf__live-video {
        margin: 90px 0 20px;
    }
}