/* Theme Name: UCL Author: INVO Description: A minimalistic, simple theme for WordPress - supports all manors of post/page formatting and comes with an easy to customize stylesheet. Version: 1.0 */ @font-face { font-family: 'Gilroy'; src: url(Gilroy/Gilroy-Regular.otf); font-weight: 400; } @font-face { font-family: 'Gilroy'; src: url(Gilroy/Gilroy-Medium.otf); font-weight: 500; } @font-face { font-family: 'Gilroy'; src: url(Gilroy/Gilroy-SemiBold.otf); font-weight: 600; } *, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; } html { font-size: 62.5%; margin-top: 0 !important; } body { box-sizing: border-box; font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 1.6rem; color: #000000; background-color: #F9F9F9; } body:before { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background: rgba(8, 20, 46, 0.6); content: ''; opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); transition: opacity 0.3s, -webkit-transform 0s 0.4s; transition: opacity 0.3s, transform 0s 0.4s; transition: opacity 0.3s, transform 0s 0.4s, -webkit-transform 0s 0.4s; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } body:after { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background: rgba(8, 20, 46, 0.6); content: ''; opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); transition: opacity 0.3s, -webkit-transform 0s 0.4s; transition: opacity 0.3s, transform 0s 0.4s; transition: opacity 0.3s, transform 0s 0.4s, -webkit-transform 0s 0.4s; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } body.page-template-about, body.page-template-panels { background-color: #FFFFFF; } body.modal { overflow-y: hidden; } body.modal:after { opacity: 1; transition: opacity 0.8s; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } body.show-menu:before { opacity: 1; transition: opacity 0.8s; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .container { max-width: 1690px; margin: 0 auto; padding: 0 2rem; } .nav { height: 160px; width: 100%; position: fixed; top: 0; left: 0; z-index: 100; background-image: url("../img/website-banner.png"); background-position: center; background-size: cover; } .nav.white { background-color: #FFFFFF !important; } .nav.white .nav__burger:before, .nav.white .nav__burger:after { background-color: #FFFFFF !important; } .nav.white .nav__logo--img path:nth-child(1), .nav.white .nav__logo--img path:nth-child(2), .nav.white .nav__logo--img path:nth-child(6) { fill: #FFFFFF !important; } @media (max-width: 768px) { .nav { height: 100px; } } @media (max-width: 768px) { .nav { height: 70px; background-color: transparent; box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .nav__logo--img path:nth-child(1), .nav__logo--img path:nth-child(2), .nav__logo--img path:nth-child(6) { fill: #FFFFFF; } } .nav .container { height: 100%; } .nav__container { display: flex; align-items: center; flex-direction: column; height: 100%; padding-bottom: 2rem; } @media (max-width: 768px) { .nav__container { padding-bottom: 0; } } .nav__upper { display: flex; width: 100%; height: 100%; justify-content: space-between; position: relative; align-items: center; } .nav__menu { display: flex; flex: 1; } @media (max-width: 768px) { .nav__menu { flex: initial; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } } .nav__burger { display: block; position: relative; width: 30px; height: 10px; cursor: pointer; } .nav__burger:after, .nav__burger:before { position: absolute; content: ''; display: block; width: 30px; height: 2px; background-color: #FFFFFF; -webkit-transition: all .2s ease; transition: all .2s ease; transform: translateY(-50%); } @media (max-width: 768px) { .nav__burger:after, .nav__burger:before { width: 25px; background-color: #FFFFFF; } } .nav__burger:after { top: 1px; } .nav__burger:before { top: 6px; } .nav__burger:hover:after { top: -2px; } .nav__burger:hover:before { top: 7px; } .nav__img { position: absolute; left: 120px; top: 50%; display: block; transform: translateY(-50%); } .nav__img--main { width: 100px; } @media (max-width: 768px) { .nav__img { display: none; } } .nav__main { display: flex; flex: 2; justify-content: center; } .nav__button { display: flex; flex: 1; justify-content: flex-end; position: relative; } .nav__button--link { width: 18rem; height: 5rem; text-align: center; color: #FFFFFF; font-weight: 500; font-size: 1.5rem; background-color: #B44444; border-radius: 9px; text-decoration: none; display: flex; justify-content: center; align-items: center; border: 1px solid; } .nav__button--arr { width: .7rem; margin-left: 1rem; transition: all .2s ease; } @media (max-width: 768px) { .nav__button { display: none; } } .nav__button:hover .nav__button--arr { margin-left: 1.5rem; } @media (max-width: 768px) { .nav__lower { display: none; } } .nav__navigation { display: flex; list-style-type: none; } .nav__navigation--item { margin: 0 1.5rem; position: relative; } .nav__navigation--item:after { content: ''; display: block; position: absolute; width: 100%; height: 4px; background-color: #FFFFFF; bottom: -2.1rem; opacity: 0; left: 0; transition: all .2s; } .nav__navigation--item:hover:after { opacity: 1; } .nav__navigation--item.active:after { opacity: 1; } .nav__link { font-size: 1.6rem; font-weight: 500; color: #FFFFFF; text-decoration: none; padding: 0 .5rem; } @media (max-width: 768px) { .nav__logo--img { width: 18rem; } } @media (max-width: 568px) { .nav__logo--img { width: 10rem; } } .page-template-about .nav__navigation--item:nth-child(3):after { opacity: 1; } .page-template-archive .nav__navigation--item:nth-child(4):after { opacity: 1; } .page-template-contact .nav__navigation--item:nth-child(5):after { opacity: 1; } .page-template-panels .nav__navigation--item:nth-child(2):after { opacity: 1; } .page-template-program .nav__navigation--item:nth-child(1):after { opacity: 1; } .menu { position: fixed; z-index: 99999; width: 420px; height: 100%; background-color: #F9F9F9; padding: 3rem 4rem; overflow-y: auto; font-size: 1.15em; left: 0; top: 0; -webkit-transform: translate3d(-450px, 0, 0); transform: translate3d(-450px, 0, 0); transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } @media (max-width: 568px) { .menu { width: 100%; padding: 3rem 2rem; -webkit-transform: translate3d(-570px, 0, 0); transform: translate3d(-570px, 0, 0); } } .menu__close { margin-bottom: 5rem; } .menu__close--img { cursor: pointer; } .menu__follow { margin-bottom: 6rem; } .menu__follow--text { font-size: 1.5rem; font-weight: 600; margin-bottom: 3rem; } .menu .follow { display: flex; } .menu .follow__item { display: flex; flex-direction: column; text-decoration: none; justify-content: center; align-items: center; } .menu .follow__item--img { height: 2rem; margin-bottom: 1rem; } .menu .follow__item--text { font-size: 12px; opacity: .5; color: #000000; text-decoration: none; } .menu .follow__item:nth-child(2) { margin: 0 5rem; } .menu__more { display: inline-flex; flex-direction: column; } .menu__more--text { font-size: 1.5rem; font-weight: 600; margin-bottom: 3rem; } .menu .more__item { display: flex; text-decoration: none; margin-bottom: 3rem; transition: all .2s ease; } .menu .more__item--img { width: 2rem; max-height: 2rem; } .menu .more__item--text { font-size: 1.8rem; margin-left: 2rem; color: #000000; text-decoration: none; } .menu .more__item:hover { opacity: .6; } .menu__timer { margin-top: 1rem; margin-bottom: 2.5rem; } .menu__timer--header { font-size: 2.5rem; font-weight: 700; margin-bottom: 3rem; } .menu__timer .timer { justify-content: center; } .menu__incredibles { display: none; text-align: center; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 13px; margin: 0 auto 3rem; padding: 2rem 0; } @media (max-width: 768px) { .menu__incredibles { display: block; } } .menu__register { display: none; margin-top: 3rem; margin-bottom: 6rem; } @media (max-width: 768px) { .menu__register { display: block; } } .menu__register--header { font-size: 1.5rem; line-height: 1.6em; font-weight: 600; margin-bottom: 3rem; } .menu__register--link { padding: 2rem 0; width: 100%; text-align: center; color: #FFFFFF; font-weight: 500; font-size: 1.5rem; background-color: #B44444; border-radius: 9px; text-decoration: none; display: flex; justify-content: center; align-items: center; margin-top: 2rem; } .show-menu .menu { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: -webkit-transform 0.8s; transition: transform 0.8s; transition: transform 0.8s, -webkit-transform 0.8s; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } .front { margin-top: 20rem; position: relative; } @media (max-width: 768px) { .front { margin-top: 0; } } .front .front-float-1 { position: absolute; z-index: -1; top: 30rem; left: 15rem; width: 50%; filter: blur(4px); } .front .front-float-2 { position: absolute; z-index: -1; top: 100rem; left: 0; width: 50%; filter: blur(4px); } .front .front-float-3 { position: absolute; z-index: -1; top: 160rem; left: 0; filter: blur(4px); width: 100%; } .front .front-float-4 { position: absolute; z-index: -1; top: 250rem; left: 20rem; width: 50%; filter: blur(4px); } @media (max-width: 568px) { .front .front-float-4 { display: none; } } .front .front-float-5 { position: absolute; z-index: -1; top: 330rem; right: 0; width: 50%; filter: blur(4px); } .front__container { display: grid; grid-template-columns: 300px 1fr 310px; grid-gap: 100px; position: relative; margin-bottom: 15rem; } @media (max-width: 1440px) { .front__container { grid-template-columns: 250px 1fr 260px; } } @media (max-width: 1280px) { .front__container { grid-template-columns: 200px 1fr 210px; grid-gap: 5rem; } } @media (max-width: 1080px) { .front__container { grid-template-columns: 1fr 200px; grid-gap: 50px; } } @media (max-width: 768px) { .front__container { grid-template-columns: 1fr; } } @media (max-width: 568px) { .front__container { margin-bottom: 5rem; } } .front__left { height: 55rem; position: sticky; top: 20rem; } @media (max-width: 1080px) { .front__left { display: none; } } .front__mid { height: 100%; overflow: hidden; padding: 0 2rem; } @media (max-width: 1440px) { .front__mid { padding: 0; } } .front__mid .agenda { max-width: none; } .front__right { height: 90rem; position: sticky; overflow-y: auto; top: 200px; padding-right: 1rem; scrollbar-width: 2px; scrollbar-color: rgba(0, 0, 0, 0.1); } .front__right--cont { padding-right: 2rem; } .front__right::-webkit-scrollbar { width: 2px; } .front__right::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); height: 5px; border-radius: 7px; } .front__right::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 7px; border: 3px solid rgba(0, 0, 0, 0.2); } @media (max-width: 768px) { .front__right { display: none; } } .front__right.active { position: initial; } .front__persons { display: flex; flex-direction: column; } .front__persons-header { font-size: 1.5rem; font-weight: 600; padding-bottom: 2rem; margin-bottom: 3rem; } .front-person { display: flex; flex-direction: column; align-items: center; margin-bottom: 2rem; text-align: center; padding: 3rem; border-radius: 2.2rem; cursor: pointer; transition: .2s all; } .front-person:hover .front-person__name, .front-person:hover .front-person__position, .front-person.active .front-person__name, .front-person.active .front-person__position { color: #FFFFFF; opacity: 1; } .front-person:hover.Business, .front-person.active.Business { background-color: #407FB0; } .front-person:hover.Technology, .front-person.active.Technology { background-color: #A4498D; } .front-person:hover.Politics, .front-person.active.Politics { background-color: #6141B1; } .front-person:hover.Art, .front-person.active.Art { background-color: #B44444; } .front-person:hover.Welcome, .front-person.active.Welcome { background-color: #B44444; } .front-person__image { width: 16rem; height: 16rem; border-radius: 50%; overflow: hidden; margin-bottom: 2.5rem; background-size: 105%; background-position: center; border: 5px solid; } .front-person__image--img { width: 100%; height: 100%; object-fit: cover; } .front-person__image.Business { border: 5px solid #407FB0; } .front-person__image.Technology { border: 5px solid #A4498D; } .front-person__image.Politics { border: 5px solid #6141B1; } .front-person__image.Art { border: 5px solid #B44444; } .front-person__image.Welcome { border: 5px solid #B44444; } .front-person__img { width: 16rem; height: 16rem; border-radius: 50%; overflow: hidden; margin-bottom: 2.5rem; background-size: 105%; background-position: center; border: 5px solid; } .front-person__img--img { width: 100%; height: 100%; object-fit: cover; } .front-person__img.Business { border: 5px solid #407FB0; } .front-person__img.Technology { border: 5px solid #A4498D; } .front-person__img.Politics { border: 5px solid #6141B1; } .front-person__img.Art { border: 5px solid #B44444; } .front-person__img.Welcome { border: 5px solid #B44444; } .front-person__name { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; transition: .2s all; } .front-person__position { font-size: 1.3rem; opacity: .5; transition: .2s all; } .front-person__desc { display: none; position: fixed; cursor: default; max-width: 1440px; max-height: 600px; width: 90%; height: 85%; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: white; z-index: 10000; overflow: auto; border-radius: 2.2rem; } @media (max-width: 568px) { .front-person__desc { max-height: 480px; } } .front-person .desc__container { display: flex; justify-content: space-between; height: 100%; width: 100%; padding: 5rem; position: relative; } @media (max-width: 768px) { .front-person .desc__container { padding: 2rem; overflow-x: hidden; } } .front-person .desc__left { width: 30%; display: flex; flex-direction: column; } @media (max-width: 768px) { .front-person .desc__left { display: none; } } .front-person .desc__right { width: 60%; text-align: left; position: relative; display: flex; flex-direction: column; } @media (max-width: 768px) { .front-person .desc__right { display: none; } } .front-person .desc__img { width: 25rem; height: 25rem; display: block; border: none; border-radius: 50%; overflow: hidden; margin: 0 auto; } @media (max-width: 1280px) { .front-person .desc__img { width: 20rem; height: 20rem; } } .front-person .desc__img img { object-fit: cover; width: 100%; height: 100%; } .front-person .desc__details { border: 1px solid #DBDBDB; border-radius: 2.2rem; padding: 2rem 3rem; text-align: left; margin-top: auto; max-width: 300px; width: 100%; } @media (max-width: 1280px) { .front-person .desc__details { max-width: 100%; } } .front-person .desc__details--date { font-size: 1.2rem; font-weight: 700; font-family: 'Gilroy', sans-serif; margin-bottom: 2rem; } .front-person .desc__details--date.Business { color: #407FB0; } .front-person .desc__details--date.Technology { color: #A4498D; } .front-person .desc__details--date.Politics { color: #6141B1; } .front-person .desc__details--date.Art { color: #B44444; } .front-person .desc__details--date.Welcome { color: #B44444; } .front-person .desc__details--title { font-size: 1.5rem; font-weight: 700; line-height: 1.5em; margin-bottom: 2rem; } .front-person .desc__details--tag { opacity: .5; font-size: 1.2rem; font-weight: 600; } .front-person .desc__name { font-size: 2.2rem; font-weight: 700; margin-bottom: 1rem; } .front-person .desc__position { font-size: 1.2rem; opacity: .5; margin-bottom: 3rem; } .front-person .desc__description { font-size: 1.5rem; line-height: 1.7em; overflow: auto; padding-right: 2rem; padding-bottom: 7rem; } .front-person .desc__description::-webkit-scrollbar { width: 2px; } .front-person .desc__description::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); height: 5px; border-radius: 7px; } .front-person .desc__description::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 7px; border: 3px solid rgba(0, 0, 0, 0.2); } .front-person .desc__close { display: inline-block; position: absolute; right: 0; top: 0; cursor: pointer; } .front-person .desc__arrs { display: flex; align-items: flex-end; position: absolute; bottom: -0.5rem; width: 100%; height: 10rem; left: 0; background: linear-gradient(0deg, white 40%, rgba(255, 255, 255, 0) 100%); } .front-person .desc__arrs--left, .front-person .desc__arrs--right { padding: 1rem; border: 1px solid #000000; border-radius: 50%; cursor: pointer; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; } .front-person .desc__arrs--left img, .front-person .desc__arrs--right img { transition: all .2s; } .front-person .desc__arrs--left.disabled, .front-person .desc__arrs--right.disabled { opacity: .5; cursor: default; } .front-person .desc__arrs--right { margin-left: 3rem; } .front-person .desc__arrs--right:hover img { margin-left: .25rem; } .front-person .desc__arrs--left:hover img { margin-right: .25rem; } .front-person .desc-m { display: none; flex-direction: column; } @media (max-width: 768px) { .front-person .desc-m { display: flex; } } .front-person .desc-m__container { display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 100%; padding: 5rem; } .front-person .desc-m__img { width: 20rem; height: 20rem; display: block; border: none; margin: 3rem auto; } .front-person .desc-m__img img { object-fit: cover; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .front-person .desc-m__details { border: 1px solid #DBDBDB; border-radius: 2.2rem; padding: 2rem 3rem; text-align: left; margin-bottom: 2rem; } .front-person .desc-m__details--cont { display: flex; justify-content: space-between; } .front-person .desc-m__details--date { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; } .front-person .desc-m__details--date.Business { color: #407FB0; } .front-person .desc-m__details--date.Technology { color: #A4498D; } .front-person .desc-m__details--date.Politics { color: #6141B1; } .front-person .desc-m__details--date.Art { color: #B44444; } .front-person .desc-m__details--date.Welcome { color: #B44444; } .front-person .desc-m__details--title { font-size: 1.5rem; font-weight: 700; line-height: 1.5em; } .front-person .desc-m__details--tag { opacity: .5; font-size: 1.2rem; font-weight: 600; } .front-person .desc-m__name { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; } .front-person .desc-m__position { font-size: 1.2rem; opacity: .5; margin-bottom: 3rem; } .front-person .desc-m__description { font-size: 1.5rem; line-height: 1.7em; text-align: left; padding-bottom: 7rem; } .front-person .desc-m__close { display: inline-block; position: absolute; right: 2rem; top: 2rem; cursor: pointer; } .front-person .desc-m__arrs { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; justify-content: center; align-items: flex-end; padding: 0 0 1rem; height: 10rem; background: linear-gradient(0deg, white 40%, rgba(255, 255, 255, 0) 100%); } .front-person .desc-m__arrs--left, .front-person .desc-m__arrs--right { padding: 1rem; border: 1px solid #000000; border-radius: 50%; cursor: pointer; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; } .front-person .desc-m__arrs--left img, .front-person .desc-m__arrs--right img { transition: all .2s; } .front-person .desc-m__arrs--left.disabled, .front-person .desc-m__arrs--right.disabled { opacity: .5; cursor: default; } .front-person .desc-m__arrs--right { margin-left: 3rem; } .front-person .desc-m__arrs--right:hover img { margin-left: .25rem; } .front-person .desc-m__arrs--left:hover img { margin-right: .25rem; } .front-person:first-child .desc__arrs .desc__arrs--left, .front-person:first-child .desc-m__arrs .desc-m__arrs--left { opacity: .5; cursor: default; } .front-person:first-child .desc__arrs .desc__arrs--left:hover img, .front-person:first-child .desc-m__arrs .desc-m__arrs--left:hover img { margin-right: 0; } .front-person:last-child { padding-bottom: 20rem; } .front-person:last-child .desc__arrs .desc__arrs--right, .front-person:last-child .desc-m__arrs .desc-m__arrs--right { opacity: .5; cursor: default; } .front-person:last-child .desc__arrs .desc__arrs--right:hover img, .front-person:last-child .desc-m__arrs .desc-m__arrs--right:hover img { margin-left: 0; } .front-person.Business .front-person__img { border-color: #407FB0; } .front-person.Technology .front-person__img { border-color: #A4498D; } .front-person.Politics .front-person__img { border-color: #6141B1; } .front-person.Art .front-person__img { border-color: #B44444; } .front-person.Welcome .front-person__img { border-color: #B44444; } .slider__slide { height: 35rem; background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; border-radius: 10px; overflow: hidden; position: relative; padding: 2rem; } .slider__slide--partner { width: 10rem; } .slider__slide--text { color: #FFFFFF; font-size: 2.25rem; font-weight: 700; line-height: 1em; margin-top: 3rem; } .slider__slide--button { text-align: center; position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); height: 5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; width: calc(100% - 4rem); border: 1px solid #FFFFFF; color: #FFFFFF; text-decoration: none; border-radius: 9px; transition: all .2s; } .slider__slide--button:hover { background-color: rgba(255, 255, 255, 0.1); } .video { width: 100%; border-radius: 2rem; } .socials { display: flex; justify-content: space-between; margin-top: 6rem; } .socials__item { width: 6rem; height: 6rem; background-color: #FFFFFF; border-radius: 1.3rem; display: flex; align-items: center; justify-content: center; transition: all .2s; } .socials__item--img { height: 1.5rem; } .socials__item:hover { opacity: .7; } .sign-up { height: 35rem; padding: 4rem; border-radius: 13px; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent), url("../img/sign-up-2.png"); background-size: cover; background-repeat: no-repeat; background-position: center; display: flex; flex-direction: column; position: relative; } @media (max-width: 768px) { .sign-up { display: none; } } .sign-up__text { font-size: 4rem; font-weight: 700; line-height: 1.1em; color: #FFFFFF; } .sign-up__date { display: flex; margin-top: auto; margin-bottom: 2rem; } .sign-up__date--img { margin-right: 2rem; } .sign-up__date--text { color: #FFFFFF; font-family: 'Gilroy', sans-serif; } .sign-up__buttons { display: flex; } .sign-up__buttons .btn-register { height: 5rem; max-width: 20rem; width: 100%; text-align: center; color: #FFFFFF; font-weight: 500; font-size: 1.5rem; background-color: #B44444; border-radius: 9px; text-decoration: none; margin-right: 2rem; display: flex; justify-content: center; align-items: center; border: 1px solid; } .sign-up__buttons .btn-register--arr { width: .7rem; margin-left: 1rem; transition: all .2s ease; } .sign-up__buttons .btn-register:hover .btn-register--arr { margin-left: 1.5rem; } .sign-up__buttons .btn-agenda { text-align: center; height: 5rem; max-width: 20rem; width: 100%; border: 1px solid #FFFFFF; color: #FFFFFF; text-decoration: none; border-radius: 9px; transition: all .2s; display: flex; justify-content: center; align-items: center; } .sign-up__buttons .btn-agenda:hover { background-color: rgba(255, 255, 255, 0.1); } .sign-up__source { color: #BBB; font-size: .8rem; position: absolute; bottom: 1rem; right: 1rem; } .workshops { margin: 50px 0; } .workshops__header { font-size: 4rem; margin-bottom: 50px; } @media (max-width: 768px) { .workshops__header { font-size: 2.2rem; } } .workshops__container { display: flex; justify-content: space-between; flex-wrap: wrap; } @media (max-width: 768px) { .workshops__container { flex-direction: column; } } .workshops__left { display: flex; flex-direction: column; width: 48%; } @media (max-width: 768px) { .workshops__left { width: 100%; } } .workshops__left .workshops__block:first-child { margin-bottom: 30px; } .workshops__right { width: 48%; } @media (max-width: 768px) { .workshops__right { width: 100%; margin-top: 30px; } } .workshops__block { background-color: #FFF; border-radius: 30px; padding: 20px; height: 100%; width: 48%; margin-bottom: 4%; height: auto; } @media (max-width: 768px) { .workshops__block { width: initial; } } .workshops .workshop { display: flex; flex-direction: column; } .workshops .workshop__upper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .workshops .workshop__logo { max-width: 80px; max-height: 40px; } .workshops .workshop__logo.invo { width: 60px; } .workshops .workshop__date { font-size: 13px; } .workshops .workshop__header { font-size: 18px; margin-bottom: 30px; } @media (min-width: 1920px) { .workshops .workshop__header { font-size: 22px; } } .workshops .workshop__text { font-size: 13px; margin-bottom: 10px; } .workshops .workshop__text.semi { font-weight: 600; } @media (min-width: 1920px) { .workshops .workshop__text { font-size: 16px; } } .workshops .workshop__list { list-style-type: none; margin-bottom: 30px; } .workshops .workshop__list--text { font-size: 15px; font-weight: 600; position: relative; margin-bottom: 5px; padding-left: 10px; } .workshops .workshop__list--text::before { content: url("../img/circle.svg"); display: inline-block; position: absolute; left: 0; top: -2px; } @media (min-width: 1920px) { .workshops .workshop__list--text { font-size: 16px; } } .workshops .workshop__btn { outline: none; background-color: transparent; border: none; font-weight: 700; text-decoration: underline; font-size: 15px; font-family: 'Raleway', sans-serif; cursor: pointer; margin-top: auto; align-self: flex-start; transition: all .2s; } .workshops .workshop__btn:hover { opacity: .5; } .workshops .workshop__main { font-size: 15px; line-height: 1.4em; margin-bottom: 30px; } @media (min-width: 1920px) { .workshops .workshop__main { font-size: 16px; } } .workshops .workshop__desc { display: none; position: fixed; cursor: default; max-width: 1440px; max-height: 600px; width: 90%; height: 85%; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: white; z-index: 10000; overflow: auto; border-radius: 2.2rem; } @media (max-width: 568px) { .workshops .workshop__desc { max-height: 480px; } } .workshops .workshop .w-desc__container { display: flex; justify-content: space-between; height: 100%; width: 100%; padding: 5rem; position: relative; } @media (max-width: 768px) { .workshops .workshop .w-desc__container { padding: 2rem; } } .workshops .workshop .w-desc__left { width: 30%; display: flex; flex-direction: column; } @media (max-width: 768px) { .workshops .workshop .w-desc__left { display: none; } .workshops .workshop .w-desc__left.mobile { display: flex; flex-direction: column; width: 100%; margin-bottom: 30px; } } .workshops .workshop .w-desc__right { width: 60%; text-align: left; position: relative; display: flex; flex-direction: column; } @media (max-width: 768px) { .workshops .workshop .w-desc__right { display: none; } .workshops .workshop .w-desc__right.mobile { display: flex; flex-direction: column; width: 100%; } } .workshops .workshop .w-desc__right-cont { overflow: auto; padding-right: 15px; padding-bottom: 80px; } @media (max-width: 768px) { .workshops .workshop .w-desc__right-cont { padding-right: 0; padding-bottom: 20px; } } .workshops .workshop .w-desc__right-cont::-webkit-scrollbar { width: 2px; } .workshops .workshop .w-desc__right-cont::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); height: 5px; border-radius: 7px; } .workshops .workshop .w-desc__right-cont::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 7px; border: 3px solid rgba(0, 0, 0, 0.2); } .workshops .workshop .w-desc__right-inner { display: flex; justify-content: space-between; } .workshops .workshop .w-desc__right-inner--left { width: 50%; } @media (max-width: 768px) { .workshops .workshop .w-desc__right-inner--left { width: 100%; } } .workshops .workshop .w-desc__right-inner--right { width: 40%; } @media (max-width: 768px) { .workshops .workshop .w-desc__right-inner--right { width: 100%; margin-bottom: 20px; } } .workshops .workshop .w-desc__img { width: 25rem; height: 25rem; display: block; border: none; border-radius: 50%; overflow: hidden; margin: 0 auto; padding: 30px; background-color: #F9F9F9; } @media (max-width: 1280px) { .workshops .workshop .w-desc__img { width: 20rem; height: 20rem; } } @media (max-width: 768px) { .workshops .workshop .w-desc__img { width: 15rem; height: 15rem; margin-bottom: 20px; } } .workshops .workshop .w-desc__img img { object-fit: contain; width: 100%; height: 100%; } .workshops .workshop .w-desc__details { border: 1px solid #DBDBDB; border-radius: 2.2rem; padding: 2rem 3rem; text-align: left; margin-top: auto; max-width: 300px; width: 100%; } @media (max-width: 1280px) { .workshops .workshop .w-desc__details { max-width: 100%; } } .workshops .workshop .w-desc__details--date { font-size: 1.2rem; font-weight: 700; font-family: 'Gilroy', sans-serif; margin-bottom: 2rem; color: #FE7373; } .workshops .workshop .w-desc__details--date.Business { color: #407FB0; } .workshops .workshop .w-desc__details--date.Technology { color: #A4498D; } .workshops .workshop .w-desc__details--date.Politics { color: #6141B1; } .workshops .workshop .w-desc__details--date.Art { color: #B44444; } .workshops .workshop .w-desc__details--date.Welcome { color: #B44444; } .workshops .workshop .w-desc__details--title { font-size: 1.5rem; font-weight: 700; line-height: 1.5em; margin-bottom: 2rem; } .workshops .workshop .w-desc__details--tag { opacity: .5; font-size: 1.2rem; font-weight: 600; } .workshops .workshop .w-desc__name { font-size: 2.2rem; font-weight: 700; margin-bottom: 1rem; } .workshops .workshop .w-desc__position { font-size: 1.2rem; opacity: .5; margin-bottom: 3rem; } .workshops .workshop .w-desc__description { font-size: 1.5rem; line-height: 1.7em; padding-right: 2rem; padding-bottom: 4rem; } .workshops .workshop .w-desc__description a { color: #000; transition: all .2s; line-break: anywhere; } .workshops .workshop .w-desc__description a:hover { opacity: .8; } @media (min-width: 1920px) { .workshops .workshop .w-desc__description { font-size: 16px; } } @media (max-width: 768px) { .workshops .workshop .w-desc__description { padding-right: 0; padding-bottom: 20px; } } .workshops .workshop .w-desc__close { display: inline-block; position: fixed; right: 20px; top: 40px; cursor: pointer; } .workshops .workshop .w-desc__arrs { display: flex; align-items: flex-end; position: absolute; bottom: -0.5rem; width: 100%; height: 10rem; left: 0; background: linear-gradient(0deg, white 40%, rgba(255, 255, 255, 0) 100%); } .workshops .workshop .w-desc__arrs--left, .workshops .workshop .w-desc__arrs--right { padding: 1rem; border: 1px solid #000000; border-radius: 50%; cursor: pointer; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; } .workshops .workshop .w-desc__arrs--left img, .workshops .workshop .w-desc__arrs--right img { transition: all .2s; } .workshops .workshop .w-desc__arrs--left.disabled, .workshops .workshop .w-desc__arrs--right.disabled { opacity: .5; cursor: default; } @media (max-width: 768px) { .workshops .workshop .w-desc__arrs--left, .workshops .workshop .w-desc__arrs--right { display: none; } } .workshops .workshop .w-desc__arrs--right { margin-left: 3rem; } .workshops .workshop .w-desc__arrs--right:hover img { margin-left: .25rem; } .workshops .workshop .w-desc__arrs--left:hover img { margin-right: .25rem; } @media (max-width: 768px) { .workshops .workshop .w-desc__arrs { display: none; } } .workshops .workshop .w-desc__time { display: flex; } .workshops .workshop .w-desc__time--border { padding: 5px 10px; border-radius: 7px; border: 1px solid #000; margin-bottom: 40px; display: flex; } .workshops .workshop .w-desc__time--text { margin-left: 10px; } .workshops .workshop .w-desc__time--text.padding { padding-top: 6px; } .workshops .workshop .w-desc__time--text.margin { margin-left: 0; margin-bottom: 40px; } .workshops .workshop .w-desc__title { font-size: 22px; margin-bottom: 20px; } @media (min-width: 1920px) { .workshops .workshop .w-desc__title { font-size: 24px; } } .workshops .workshop .w-desc__moderator { display: flex; align-items: center; margin-bottom: 40px; } .workshops .workshop .w-desc__moderator--img { object-fit: cover; width: 100%; height: 100%; } .workshops .workshop .w-desc__moderator-img { width: 25px; height: 25px; border-radius: 50%; overflow: hidden; margin-right: 20px; } @media (min-width: 1920px) { .workshops .workshop .w-desc__moderator-img { width: 25px; height: 35px; } } @media (max-width: 768px) { .workshops .workshop .w-desc__moderator-img { width: 30px; height: 30px; } } .workshops .workshop .w-desc__moderator-info--name { font-size: 12px; font-weight: 700; } @media (min-width: 1920px) { .workshops .workshop .w-desc__moderator-info--name { font-size: 16px; } } @media (max-width: 768px) { .workshops .workshop .w-desc__moderator-info--name { font-size: 16px; } } .workshops .workshop .w-desc__moderator-info--job { font-size: 10px; color: #7D7D7D; } @media (min-width: 1920px) { .workshops .workshop .w-desc__moderator-info--job { font-size: 14px; } } @media (max-width: 768px) { .workshops .workshop .w-desc__moderator-info--job { font-size: 14px; } } .workshops .workshop .w-desc__btn { width: 100%; height: 5rem; text-align: center; color: #FFFFFF; font-weight: 500; font-size: 1.5rem; background-color: #B44444; border-radius: 9px; text-decoration: none; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; } .workshops .workshop .w-desc__btn--arr { width: .7rem; margin-left: 1rem; transition: all .2s ease; } .workshops .workshop .w-desc__btn:hover .w-desc__btn--arr { margin-left: 1.5rem; } .workshops .workshop .w-desc__socials { display: flex; justify-content: space-between; } @media (max-width: 768px) { .workshops .workshop .w-desc__socials { padding: 0 20px; margin-bottom: 40px; } } .workshops .workshop .w-desc__socials-item { transition: all .2s; } .workshops .workshop .w-desc__socials-item:hover { opacity: .6; } .workshops .workshop .w-desc__socials-item:nth-child(2) img { width: 20px; } .workshops .workshop .w-desc__list-title { margin-bottom: 10px; } .workshops .workshop .w-desc__list { list-style-type: none; margin-bottom: 40px; } .workshops .workshop .w-desc__list--text { font-weight: 600; margin-bottom: 10px; } .workshops .workshop .w-desc__list--text::before { content: "\2022"; color: #FE7373; font-weight: bold; display: inline-block; width: 10px; margin-left: -20px; } .workshops .workshop .w-desc__duration { display: flex; align-items: center; margin-bottom: 20px; } @media (max-width: 768px) { .workshops .workshop .w-desc__duration { display: none; } } .workshops .workshop .w-desc__duration--img { margin-right: 15px; } .workshops .workshop .w-desc__place { display: flex; align-items: center; margin-bottom: 40px; } @media (max-width: 768px) { .workshops .workshop .w-desc__place { display: none; } } .workshops .workshop .w-desc__place--img { margin-right: 15px; } .workshops .workshop .w-desc__place--text { max-width: 230px; } .workshops .workshop .w-desc__tags { opacity: .2; } @media (max-width: 768px) { .workshops .workshop .w-desc__tags { display: none; } } .workshops .workshop .w-desc-m { display: none; flex-direction: column; } @media (max-width: 768px) { .workshops .workshop .w-desc-m { display: flex; } } .workshops .workshop .w-desc-m__arrs { display: none; position: sticky; bottom: 0; left: 0; width: 100%; justify-content: center; align-items: flex-end; padding: 0 0 1rem; min-height: 10rem; background: linear-gradient(0deg, white 40%, rgba(255, 255, 255, 0) 100%); } .workshops .workshop .w-desc-m__arrs--left, .workshops .workshop .w-desc-m__arrs--right { padding: 1rem; border: 1px solid #000000; border-radius: 50%; cursor: pointer; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; } .workshops .workshop .w-desc-m__arrs--left img, .workshops .workshop .w-desc-m__arrs--right img { transition: all .2s; } .workshops .workshop .w-desc-m__arrs--left.disabled, .workshops .workshop .w-desc-m__arrs--right.disabled { opacity: .5; cursor: default; } .workshops .workshop .w-desc-m__arrs--right { margin-left: 3rem; } .workshops .workshop .w-desc-m__arrs--right:hover img { margin-left: .25rem; } .workshops .workshop .w-desc-m__arrs--left:hover img { margin-right: .25rem; } @media (max-width: 768px) { .workshops .workshop .w-desc-m__arrs { display: flex; } } .about { background-color: #FFFFFF; padding: 4rem; border-radius: 20px; margin-top: 5rem; margin-bottom: 10rem; } @media (max-width: 568px) { .about { padding: 4rem 2rem; } } .about__header { font-size: 4rem; } @media (max-width: 568px) { .about__header { font-size: 2.2rem; } } .about__slider { margin: 3rem 0; } .about__slider .slick-prev, .about__slider .slick-next { z-index: 1 !important; border-radius: 50%; width: 4rem; height: 4rem; overflow: hidden; } .about__slider .slick-prev:before, .about__slider .slick-next:before { width: 4rem; height: 4rem; background-color: #FFFFFF; color: #000000; display: flex; justify-content: center; align-items: center; } .about__slider .slick-prev { left: 25px; } .about__slider .slick-prev:before { content: url(../img/arr-left-b.svg) !important; } .about__slider .slick-next { right: 25px; } .about__slider .slick-next:before { content: url(../img/arr-right-b.svg) !important; } .about__slide--slide { width: 100%; height: 100%; max-height: 30rem; object-fit: cover; border-radius: 35px; } .about__text { font-size: 1.5rem; line-height: 1.6em; margin-bottom: 3rem; position: relative; } @media (max-width: 568px) { .about__text { margin-top: 5rem; } .about__text:after { content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 15rem; background: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0) 100%); } } .about__link { font-size: 1.5rem; font-weight: 700; color: #000000; transition: all .2s; } .about__link:hover { opacity: .7; } .timer { padding: 2rem 4rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; background-color: #FFFFFF; border-radius: 2.2rem; } @media (max-width: 568px) { .timer { flex-direction: column; padding: 2rem; } } .timer__header { font-size: 2.2rem; } @media (max-width: 568px) { .timer__header { display: none; } } .timer__main { display: flex; } .timer__block { display: flex; flex-direction: column; } .timer__block:nth-child(2) { margin: 0 1.5rem; } .timer__block span { font-size: 1.6rem; font-weight: 500; } .timer__block span:nth-child(1) { background-color: #000000; font-family: 'Gilroy', sans-serif; color: #FFFFFF; padding: 1rem; border-radius: 5px; margin-bottom: 1rem; text-align: center; min-width: 5.5rem; min-height: 6rem; display: flex; flex-direction: column; justify-content: center; align-items: center; } .timer__block span:nth-child(2) { color: #000000; } .sponsors { margin-bottom: 5rem; margin-top: 10rem; } .sponsors__desc { display: flex; justify-content: space-between; margin-bottom: 6rem; } @media (max-width: 568px) { .sponsors__desc { flex-direction: column; } } .sponsors__desc--header { font-size: 4rem; font-weight: 700; max-width: 45%; width: 100%; } @media (max-width: 568px) { .sponsors__desc--header { font-size: 2.3rem; max-width: 100%; margin-bottom: 3rem; } } .sponsors__desc--text { font-size: 1.5rem; line-height: 1.6em; max-width: 45%; width: 100%; } @media (max-width: 568px) { .sponsors__desc--text { max-width: 90%; } } .sponsors__slider { padding-bottom: 10rem; scrollbar-width: none; scrollbar-color: black; } .sponsors__slider::-webkit-scrollbar { width: 14px; height: 0; } .sponsors__slider::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0); height: 5px; border-radius: 7px; } .sponsors__slider::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0); border-radius: 7px; border: 3px solid #000; } .sponsors__slider.second { display: none; overflow-x: auto; } @media (max-width: 568px) { .sponsors__slider { padding-bottom: 0; } .sponsors__slider.second { display: flex; } .sponsors__slider.first { display: none; } } .sponsors__slider .slick-prev, .sponsors__slider .slick-next { z-index: 1 !important; border-radius: 50%; width: 4rem; height: 4rem; overflow: hidden; } .sponsors__slider .slick-prev:before, .sponsors__slider .slick-next:before { width: 4rem; height: 4rem; background-color: #FFFFFF; color: #000000; display: flex; justify-content: center; align-items: center; border: 1px solid #000000; border-radius: 50%; } .sponsors__slider .slick-prev { left: 42.5%; top: 90%; } @media (max-width: 1180px) { .sponsors__slider .slick-prev { left: 40%; } } @media (max-width: 568px) { .sponsors__slider .slick-prev { left: 32.5%; } } .sponsors__slider .slick-prev:before { content: '' !important; background-size: 20%; background-image: url(../img/arr-left-b.svg); background-repeat: no-repeat; background-position: 50% 50%; } .sponsors__slider .slick-next { right: 42.5%; top: 90%; } @media (max-width: 1180px) { .sponsors__slider .slick-next { right: 40%; } } @media (max-width: 568px) { .sponsors__slider .slick-next { right: 32.5%; } } .sponsors__slider .slick-next:before { content: '' !important; background-size: 20%; background-image: url(../img/arr-right-b.svg); background-repeat: no-repeat; background-position: 50% 50%; } .sponsors__slider .sponsors__slide { margin-right: 3rem; } .sponsors__slider .sponsors__slide:last-child { margin-right: 0; } .sponsors__slider .sponsors__slide a { width: 18rem; height: 18rem; background-color: #FFFFFF; border-radius: 2.2rem; display: flex; justify-content: center; align-items: center; } @media (max-width: 1180px) { .sponsors__slider .sponsors__slide a { width: 16rem; height: 16rem; } } @media (max-width: 568px) { .sponsors__slider .sponsors__slide a { margin: 0 auto; width: 18rem; height: 18rem; } } .sponsors__slider .sponsors__slide a img { width: 50%; } @media (max-width: 568px) { .sponsors__slider .sponsors__slide a img { width: 70%; } } .front-sign-up { display: flex; height: 46rem; width: 100%; } @media (max-width: 768px) { .front-sign-up { height: 100%; flex-direction: column-reverse; } } .front-sign-up__left { width: 50%; background-color: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } @media (max-width: 768px) { .front-sign-up__left { height: 40rem; width: 100%; overflow: hidden; } } .front-sign-up__left .sign-1, .front-sign-up__left .sign-2, .front-sign-up__left .sign-3, .front-sign-up__left .sign-4 { position: absolute; z-index: 1; transform: translate(-50%, -50%); } .front-sign-up__left .sign-1 { top: 13rem; right: -10rem; width: 10rem; } @media (max-width: 568px) { .front-sign-up__left .sign-1 { width: 8rem; } } .front-sign-up__left .sign-2 { width: 6rem; top: 25rem; right: 10rem; } .front-sign-up__left .sign-3 { width: 60%; bottom: 0; left: 50%; transform: translate(-50%, 0); } .front-sign-up__left .sign-4 { width: 6rem; left: 0; top: 20rem; transform: translate(0, -50%); } @media (max-width: 568px) { .front-sign-up__left .sign-4 { width: 4rem; } } .front-sign-up__container { width: 50%; z-index: 2; margin-top: -7rem; } @media (max-width: 768px) { .front-sign-up__container { width: 70%; text-align: center; margin-top: 0; } } .front-sign-up__container--header { font-size: 4rem; font-weight: 700; margin-bottom: 3.5rem; } @media (max-width: 768px) { .front-sign-up__container--header { font-size: 3.3rem; } } .front-sign-up__container--button { height: 5rem; max-width: 20rem; width: 100%; text-align: center; color: #FFFFFF; font-weight: 500; font-size: 1.5rem; background-color: #B44444; border-radius: 9px; text-decoration: none; margin-right: 2rem; display: flex; justify-content: center; align-items: center; } @media (max-width: 768px) { .front-sign-up__container--button { margin: 0 auto; } } @media (max-width: 568px) { .front-sign-up__container--button { max-width: 100%; } } .front-sign-up__container--button img { width: .7rem; margin-left: 1rem; transition: all .2s ease; } .front-sign-up__container--button:hover img { margin-left: 1.5rem; } .front-sign-up__right { width: 50%; background-image: url("../img/front-sign-up.png"); background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; } .front-sign-up__right--source { color: #BBB; font-size: .8rem; position: absolute; bottom: .5rem; right: 1rem; } @media (min-width: 1680px) { .front-sign-up__right--source { font-size: 1rem; } } @media (max-width: 768px) { .front-sign-up__right { height: 30rem; width: 100%; } } .front-m { display: none; height: 100vh; width: 100%; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent), url("../img/sign-up-2.png"); background-size: cover; background-repeat: no-repeat; background-position: center; flex-direction: column; align-items: center; padding-top: 12rem; position: relative; } @media (max-width: 768px) { .front-m { display: flex; } } .front-m__logo { padding: 2rem 4rem; background-color: rgba(255, 255, 255, 0.1); border-radius: 1rem; margin-bottom: 3rem; } .front-m__logo svg path:nth-child(1), .front-m__logo svg path:nth-child(3) { fill: #FFFFFF; } .front-m__logo svg path:nth-child(2) { fill: #BB8815; } .front-m__date { color: #FFFFFF; font-size: 1.5rem; display: flex; align-items: center; } .front-m__date img { margin-right: 1rem; width: 1.5rem; } .front-m__heading { color: #FFFFFF; max-width: 30rem; text-align: center; margin: 3rem auto; font-size: 3rem; } .front-m__buttons { width: 90%; display: flex; align-items: center; flex-direction: column; margin-top: auto; margin-bottom: 3rem; } .front-m__buttons--register { padding: 2.3rem 0; width: 100%; text-align: center; color: #FFFFFF; font-weight: 500; font-size: 1.3rem; background-color: #B44444; border-radius: 9px; text-decoration: none; display: flex; justify-content: center; align-items: center; margin-bottom: 1rem; } .front-m__buttons--register img { width: .7rem; margin-left: 1rem; transition: all .2s ease; } .front-m__buttons--agenda { width: 100%; padding: 2.3rem 0; text-align: center; color: #FFFFFF; font-weight: 500; font-size: 1.3rem; background-color: transparent; border-radius: 9px; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.4); } .front-m__source { color: #BBB; font-size: .8rem; position: absolute; bottom: .5rem; right: 1rem; } .front-m__speakers { display: none; } @media (max-width: 768px) { .front-m__speakers { display: block; } } .front-m__speakers .front-m-person { display: flex; flex-direction: column; align-items: center; margin-right: 5rem; text-align: center; } .front-m__speakers .front-m-person__image { width: 18rem; height: 18rem; border-radius: 50%; overflow: hidden; margin-bottom: 2.5rem; background-size: 105%; background-position: center; } .front-m__speakers .front-m-person__image--img { width: 100%; height: 100%; object-fit: cover; } .front-m__speakers .front-m-person__image.Business { border: 5px solid #407FB0; } .front-m__speakers .front-m-person__image.Technology { border: 5px solid #A4498D; } .front-m__speakers .front-m-person__image.Politics { border: 5px solid #6141B1; } .front-m__speakers .front-m-person__image.Art { border: 5px solid #B44444; } .front-m__speakers .front-m-person__image.Welcome { border: 5px solid #B44444; } .front-m__speakers .front-m-person__img { width: 18rem; height: 18rem; border-radius: 50%; overflow: hidden; margin-bottom: 2.5rem; background-size: 105%; background-position: center; border: 5px solid; } .front-m__speakers .front-m-person__img--img { width: 100%; height: 100%; object-fit: cover; } .front-m__speakers .front-m-person__img.Business { border: 5px solid #407FB0; } .front-m__speakers .front-m-person__img.Technology { border: 5px solid #A4498D; } .front-m__speakers .front-m-person__img.Politics { border: 5px solid #6141B1; } .front-m__speakers .front-m-person__img.Art { border: 5px solid #B44444; } .front-m__speakers .front-m-person__img.Welcome { border: 5px solid #B44444; } .front-m__speakers .front-m-person__name { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .front-m__speakers .front-m-person__position { font-size: 1.3rem; opacity: .5; } .front-m__speakers .front-m-person__desc { display: none; position: fixed; cursor: default; max-width: 1440px; max-height: 600px; width: 90%; height: 85%; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: white; z-index: 10000; overflow: auto; border-radius: 2.2rem !important; } @media (max-width: 568px) { .front-m__speakers .front-m-person__desc { max-height: 480px; } } .front-m__speakers .front-m-person .desc__container { display: flex; justify-content: space-between; height: 100%; width: 100%; padding: 5rem; position: relative; } @media (max-width: 768px) { .front-m__speakers .front-m-person .desc__container { padding: 2rem; overflow-x: hidden; } } .front-m__speakers .front-m-person .desc__left { width: 30%; display: flex; flex-direction: column; } @media (max-width: 768px) { .front-m__speakers .front-m-person .desc__left { display: none; } } .front-m__speakers .front-m-person .desc__right { width: 60%; text-align: left; position: relative; display: flex; flex-direction: column; } @media (max-width: 768px) { .front-m__speakers .front-m-person .desc__right { display: none; } } .front-m__speakers .front-m-person .desc__img { width: 25rem; height: 25rem; display: block; border: none; border-radius: 50%; overflow: hidden; margin: 0 auto; } @media (max-width: 1280px) { .front-m__speakers .front-m-person .desc__img { width: 20rem; height: 20rem; } } .front-m__speakers .front-m-person .desc__img img { object-fit: cover; width: 100%; height: 100%; } .front-m__speakers .front-m-person .desc__details { border: 1px solid #DBDBDB; border-radius: 2.2rem; padding: 2rem 3rem; text-align: left; margin-top: auto; max-width: 300px; width: 100%; } @media (max-width: 1280px) { .front-m__speakers .front-m-person .desc__details { max-width: 100%; } } .front-m__speakers .front-m-person .desc__details--date { font-size: 1.2rem; font-weight: 700; font-family: 'Gilroy', sans-serif; margin-bottom: 2rem; } .front-m__speakers .front-m-person .desc__details--date.Business { color: #407FB0; } .front-m__speakers .front-m-person .desc__details--date.Technology { color: #A4498D; } .front-m__speakers .front-m-person .desc__details--date.Politics { color: #6141B1; } .front-m__speakers .front-m-person .desc__details--date.Art { color: #B44444; } .front-m__speakers .front-m-person .desc__details--date.Welcome { color: #B44444; } .front-m__speakers .front-m-person .desc__details--title { font-size: 1.5rem; font-weight: 700; line-height: 1.5em; margin-bottom: 2rem; } .front-m__speakers .front-m-person .desc__details--tag { opacity: .5; font-size: 1.2rem; font-weight: 600; } .front-m__speakers .front-m-person .desc__name { font-size: 2.2rem; font-weight: 700; margin-bottom: 1rem; } .front-m__speakers .front-m-person .desc__position { font-size: 1.2rem; opacity: .5; margin-bottom: 3rem; } .front-m__speakers .front-m-person .desc__description { font-size: 1.5rem; line-height: 1.7em; overflow: auto; padding-right: 2rem; padding-bottom: 7rem; } .front-m__speakers .front-m-person .desc__description::-webkit-scrollbar { width: 2px; } .front-m__speakers .front-m-person .desc__description::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); height: 5px; border-radius: 7px; } .front-m__speakers .front-m-person .desc__description::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 7px; border: 3px solid rgba(0, 0, 0, 0.2); } .front-m__speakers .front-m-person .desc__close { display: inline-block; position: absolute; right: 0; top: 0; cursor: pointer; } .front-m__speakers .front-m-person .desc__arrs { display: flex; align-items: flex-end; position: absolute; bottom: -0.5rem; width: 100%; height: 10rem; left: 0; background: linear-gradient(0deg, white 40%, rgba(255, 255, 255, 0) 100%); } .front-m__speakers .front-m-person .desc__arrs--left, .front-m__speakers .front-m-person .desc__arrs--right { padding: 1rem; border: 1px solid #000000; border-radius: 50%; cursor: pointer; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; } .front-m__speakers .front-m-person .desc__arrs--left img, .front-m__speakers .front-m-person .desc__arrs--right img { transition: all .2s; } .front-m__speakers .front-m-person .desc__arrs--left.disabled, .front-m__speakers .front-m-person .desc__arrs--right.disabled { opacity: .5; cursor: default; } .front-m__speakers .front-m-person .desc__arrs--right { margin-left: 3rem; } .front-m__speakers .front-m-person .desc__arrs--right:hover img { margin-left: .25rem; } .front-m__speakers .front-m-person .desc__arrs--left:hover img { margin-right: .25rem; } .front-m__speakers .front-m-person .desc-m { display: none; flex-direction: column; } @media (max-width: 768px) { .front-m__speakers .front-m-person .desc-m { display: flex; } } .front-m__speakers .front-m-person .desc-m__container { display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 100%; padding: 5rem; } .front-m__speakers .front-m-person .desc-m__img { width: 20rem; height: 20rem; display: block; border: none; margin: 3rem auto; } .front-m__speakers .front-m-person .desc-m__img img { object-fit: cover; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .front-m__speakers .front-m-person .desc-m__details { border: 1px solid #DBDBDB; border-radius: 2.2rem; padding: 2rem 3rem; text-align: left; margin-bottom: 2rem; } .front-m__speakers .front-m-person .desc-m__details--cont { display: flex; justify-content: space-between; } .front-m__speakers .front-m-person .desc-m__details--date { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; } .front-m__speakers .front-m-person .desc-m__details--date.Business { color: #407FB0; } .front-m__speakers .front-m-person .desc-m__details--date.Technology { color: #A4498D; } .front-m__speakers .front-m-person .desc-m__details--date.Politics { color: #6141B1; } .front-m__speakers .front-m-person .desc-m__details--date.Art { color: #B44444; } .front-m__speakers .front-m-person .desc-m__details--date.Welcome { color: #B44444; } .front-m__speakers .front-m-person .desc-m__details--title { font-size: 1.5rem; font-weight: 700; line-height: 1.5em; } .front-m__speakers .front-m-person .desc-m__details--tag { opacity: .5; font-size: 1.2rem; font-weight: 600; } .front-m__speakers .front-m-person .desc-m__name { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; } .front-m__speakers .front-m-person .desc-m__position { font-size: 1.2rem; opacity: .5; margin-bottom: 3rem; } .front-m__speakers .front-m-person .desc-m__description { font-size: 1.5rem; line-height: 1.7em; text-align: left; padding-bottom: 7rem; } .front-m__speakers .front-m-person .desc-m__close { display: inline-block; position: absolute; right: 2rem; top: 2rem; cursor: pointer; } .front-m__speakers .front-m-person .desc-m__arrs { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; justify-content: center; align-items: flex-end; padding: 0 0 1rem; height: 10rem; background: linear-gradient(0deg, white 40%, rgba(255, 255, 255, 0) 100%); } .front-m__speakers .front-m-person .desc-m__arrs--left, .front-m__speakers .front-m-person .desc-m__arrs--right { padding: 1rem; border: 1px solid #000000; border-radius: 50%; cursor: pointer; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; } .front-m__speakers .front-m-person .desc-m__arrs--left img, .front-m__speakers .front-m-person .desc-m__arrs--right img { transition: all .2s; } .front-m__speakers .front-m-person .desc-m__arrs--left.disabled, .front-m__speakers .front-m-person .desc-m__arrs--right.disabled { opacity: .5; cursor: default; } .front-m__speakers .front-m-person .desc-m__arrs--right { margin-left: 3rem; } .front-m__speakers .front-m-person .desc-m__arrs--right:hover img { margin-left: .25rem; } .front-m__speakers .front-m-person .desc-m__arrs--left:hover img { margin-right: .25rem; } .front-m__speakers .front-m-person:first-child { padding-left: 2rem; } .front-m__speakers .front-m-person:first-child .desc__arrs .desc__arrs--left, .front-m__speakers .front-m-person:first-child .desc-m__arrs .desc-m__arrs--left { opacity: .5; cursor: default; } .front-m__speakers .front-m-person:last-child { margin-right: 0; padding-right: 2rem; } .front-m__speakers .front-m-person:last-child .desc__arrs .desc__arrs--right, .front-m__speakers .front-m-person:last-child .desc-m__arrs .desc-m__arrs--right { opacity: .5; cursor: default; } .front-m__speakers .front-m-person.Business .front-m-person__img { border-color: #407FB0; } .front-m__speakers .front-m-person.Technology .front-m-person__img { border-color: #A4498D; } .front-m__speakers .front-m-person.Politics .front-m-person__img { border-color: #6141B1; } .front-m__speakers .front-m-person.Art .front-m-person__img { border-color: #B44444; } .front-m__speakers .front-m-person.Welcome .front-m-person__img { border-color: #B44444; } .front-m__persons { display: flex; overflow-x: auto; padding-bottom: 2rem; scrollbar-width: none; scrollbar-color: black; } .front-m__persons::-webkit-scrollbar { width: 0; height: 0; } .front-m__persons::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0); height: 0; border-radius: 7px; } .front-m__persons::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0); border-radius: 0; border: 3px solid rgba(0, 0, 0, 0); } .front-m__persons-header { font-size: 2.3rem; font-weight: 700; padding-bottom: 2rem; padding-left: 2rem; margin: 4rem 0 5rem; } .front-m__timer--header { display: none; font-size: 2.2rem; margin-bottom: 3rem; margin-top: 3rem; } @media (max-width: 568px) { .front-m__timer--header { display: block; } } .footer { background-color: #FFFFFF; padding: 5rem 0; } .footer .footer-main { display: grid; grid-template-columns: 1fr 1fr .7fr .5fr; grid-gap: 5rem; align-items: center; } @media (max-width: 1080px) { .footer .footer-main { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .footer .footer-main { grid-template-columns: 1fr; } } .footer .footer-main__logos { display: flex; flex-direction: column; margin-right: 10rem; } @media (max-width: 768px) { .footer .footer-main__logos { margin-right: 0; } } .footer .footer-main__logos--ucl { display: inline-block; width: 15rem; margin-bottom: 5rem; } .footer .footer-main__logos--ucl img { width: 100%; } .footer .footer-main__logos--incredibles { display: inline-block; text-align: center; padding: 1.5rem 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 1.3rem; transition: all .2s; } .footer .footer-main__logos--incredibles:hover { background-color: rgba(0, 0, 0, 0.1); } @media (max-width: 768px) { .footer .footer-main__logos--incredibles { width: 60%; } } @media (max-width: 568px) { .footer .footer-main__logos--incredibles { width: 100%; } } .footer .footer-main__logos--incredibles img { width: 10rem; } .footer .footer-main__menu-upper { margin-bottom: 2rem; } .footer .footer-main--header { font-size: 1.3rem; } .footer .footer-main__menu-lower { display: inline-grid; grid-template-columns: 1fr 1fr; grid-row-gap: 2rem; grid-column-gap: 15rem; } @media (max-width: 568px) { .footer .footer-main__menu-lower { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 0; } } .footer .footer-main__menu-lower a { font-size: 13px; color: #000000; text-decoration: none; transition: all .2s; } .footer .footer-main__menu-lower a:hover { opacity: .7; } .footer .footer-main__city { display: flex; flex-direction: column; align-items: baseline; } @media (max-width: 1080px) { .footer .footer-main__city { display: none; } } .footer .footer-main__city--img { height: 2rem; } .footer .footer-main__city--text { margin-top: 2rem; font-size: 1.3rem; } .footer .footer-main__mail { display: flex; flex-direction: column; align-items: baseline; } @media (max-width: 1080px) { .footer .footer-main__mail { display: none; } } .footer .footer-main__mail--img { height: 1.5rem; } .footer .footer-main__mail--text { margin-top: 2rem; font-size: 1.3rem; color: #000000; text-decoration: none; transition: all .2s; } .footer .footer-main__mail--text:hover { opacity: .7; } .footer--header { margin-top: 5rem; font-size: 1.3rem; font-weight: 700; } .footer__slider { margin: 3rem 0 10rem; overflow-x: hidden; } .footer__slider .slick-list { margin: 0 -30px; } .footer__slider .slick-list .slick-track { display: flex; align-items: center; } .footer__slider .slick-list .slick-track .slick-slide { margin: 0 30px; } .footer__slide a { display: inline-block; } .footer__slide a img { width: 100%; margin: 0 auto; } .footer__bottom { display: flex; } .footer__left, .footer__right { flex: 1; } .footer__left { display: flex; flex-direction: column; justify-content: space-around; } @media (max-width: 568px) { .footer__left { display: none; } } .footer__left--text { font-size: 1.3rem; font-weight: 700; margin-right: 2rem; } .footer__left--link img { width: 6rem; } @media (max-width: 568px) { .footer__right { display: none; } } .footer__mid { display: flex; flex-direction: column; flex: 2; justify-content: center; align-items: center; } .footer__social { text-decoration: none; transition: all .2s; } .footer__social--img { height: 1.5rem; } .footer__social:nth-child(2) { margin: 0 5rem; } .footer__social:hover { opacity: .7; } .footer__copy { margin: 3rem 0; font-size: 1rem; color: #000000; opacity: .5; } .footer__privacy { font-size: 1rem; color: #000000; text-decoration: none; transition: all .2s; } .footer__privacy:hover { opacity: .7; } .about-us { margin-top: 16rem; position: relative; } @media (max-width: 768px) { .about-us { margin-top: 7rem; } } @media (max-width: 568px) { .about-us { margin-top: 7rem; } } .about-us .about-us-float-3 { position: absolute; right: 0; bottom: 25rem; width: 60rem; z-index: -1; } @media (max-width: 768px) { .about-us .about-us-float-3 { display: none; } } .about-us__header { display: flex; flex-direction: column; align-items: center; margin: 0 auto; height: 50rem; position: relative; padding: 0 2rem; } @media (max-width: 568px) { .about-us__header { align-items: flex-start; height: 40rem; } } .about-us__header--heading { font-size: 6rem; font-weight: 700; margin-bottom: 6rem; margin-top: 12rem; } @media (max-width: 568px) { .about-us__header--heading { font-size: 3.3rem; margin-top: 6rem; } } .about-us__header--text { font-size: 1.5rem; line-height: 1.75em; text-align: center; max-width: 59rem; width: 100%; } @media (max-width: 568px) { .about-us__header--text { text-align: left; } } .about-us__header .about-us-float-1, .about-us__header .about-us-float-2 { position: absolute; z-index: -1; filter: blur(4px); } .about-us__header .about-us-float-1 { top: 10rem; right: 0; width: 30rem; } .about-us__header .about-us-float-2 { bottom: -2.2rem; left: 0; width: 30rem; } @media (max-width: 568px) { .about-us__header .about-us-float-2 { display: none; } } .about-us__banner { height: 40rem; margin-bottom: 15rem; position: relative; } .about-us__banner--img { width: 100%; height: 100%; object-fit: cover; } .about-us__banner--source { color: #BBB; font-size: .8rem; position: absolute; bottom: 1rem; right: 1rem; } @media (min-width: 1680px) { .about-us__banner--source { font-size: 1rem; } } @media (max-width: 568px) { .about-us__banner { height: 23rem; margin-bottom: 9rem; } } .about-us__main { display: flex; flex-direction: column; } .about-us__block { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rem; } .about-us__block--text { width: 40%; } @media (max-width: 1140px) { .about-us__block--text { width: 45%; } } @media (max-width: 768px) { .about-us__block--text { width: 100%; } } .about-us__block--text h2 { margin-bottom: 3rem; } @media (max-width: 568px) { .about-us__block--text h2 { font-size: 2.3rem; } } .about-us__block--text p { font-size: 1.5rem; line-height: 1.6em; } .about-us__block--img { width: 40%; } @media (max-width: 1140px) { .about-us__block--img { width: 45%; } } @media (max-width: 768px) { .about-us__block--img { width: 100%; margin-top: 5rem; } } .about-us__block--img img { width: 100%; } .about-us__block:nth-child(2) { flex-direction: row-reverse; } @media (max-width: 768px) { .about-us__block { flex-direction: column; } .about-us__block:nth-child(2) { flex-direction: column; } } @media (max-width: 568px) { .about-us__block { margin-bottom: 6rem; } } .about-us__slider-cont { display: flex; overflow-x: auto; padding-bottom: 3rem; margin-bottom: 10rem; scrollbar-width: none; scrollbar-color: black; } .about-us__slider-cont::-webkit-scrollbar { width: 14px; height: 2px; } .about-us__slider-cont::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); height: 5px; border-radius: 7px; margin-right: calc((100vw - 1690px) / 2); margin-left: calc((100vw - 1690px) / 2); } @media (max-width: 1692px) { .about-us__slider-cont::-webkit-scrollbar-track { margin-right: 2rem; margin-left: 2rem; } } .about-us__slider-cont::-webkit-scrollbar-thumb { background-color: black; border-radius: 7px; border: 3px solid #000; } .about-us__slider--header { font-size: 2.5rem; margin-bottom: 3rem; padding-left: 2rem; margin-left: calc((100vw - 1690px) / 2); } @media (max-width: 1692px) { .about-us__slider--header { margin-left: 0; } } @media (max-width: 1692px) { .about-us__slider { margin-left: 0; } } .about-us__person { margin: 0 5rem; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 20rem; } @media (max-width: 568px) { .about-us__person { min-width: 20rem; margin: 0 2.5rem; } } .about-us__person:first-child { margin-left: calc((100vw - 1690px) / 2); } @media (max-width: 1692px) { .about-us__person:first-child { margin-left: 0; } } .about-us__person:last-child { margin-right: 0; padding-right: 2rem; } .about-us__person--img { width: 15rem; border-radius: 50%; } @media (max-width: 568px) { .about-us__person--img { width: 20rem; } } .about-us__person--name { font-size: 1.5rem; font-weight: 600; margin: 3rem 0 1rem; } .about-us__person--position { font-size: 1.3rem; } .about-us__team { position: relative; margin: 3rem 0 8rem; } .about-us__team--header { font-size: 4rem; font-weight: 700; margin-bottom: 3rem; } @media (max-width: 568px) { .about-us__team--header { font-size: 2.3rem; } } .about-us__team--text { font-size: 1.5rem; line-height: 1.6em; max-width: 50rem; width: 100%; } .archive { margin-top: 16rem; position: relative; } @media (max-width: 768px) { .archive { margin-top: 7rem; } } @media (max-width: 568px) { .archive { margin-top: 7rem; } } .archive .archive-float-1 { position: absolute; left: 0; top: 10rem; width: 30rem; z-index: 1; filter: blur(4px); } @media (max-width: 568px) { .archive .archive-float-1 { display: none; } } .archive .archive-float-2 { position: absolute; right: 0; bottom: -2rem; width: 30rem; z-index: 1; filter: blur(4px); } .archive__header { background-color: #FFFFFF; display: flex; flex-direction: column; align-items: center; margin: 0 auto; height: 50rem; position: relative; overflow: hidden; padding: 0 2rem; } @media (max-width: 568px) { .archive__header { height: 100%; align-items: flex-start; } } .archive__header--heading { font-size: 6rem; font-weight: 700; margin-bottom: 6rem; margin-top: 12rem; z-index: 2; } @media (max-width: 568px) { .archive__header--heading { margin-top: 6rem; font-size: 3.3rem; } } .archive__header--text { font-size: 1.5rem; line-height: 1.75em; text-align: center; max-width: 77rem; width: 100%; z-index: 2; } @media (max-width: 568px) { .archive__header--text { text-align: left; margin-bottom: 3rem; } } .archive__header .about-us-float-1, .archive__header .about-us-float-2 { position: absolute; z-index: -1; } .archive__header .about-us-float-1 { top: 10rem; right: 0; width: 30rem; } .archive__header .about-us-float-2 { bottom: -2.2rem; left: 0; width: 30rem; } .archive__main { margin: 10rem 0; } .archive__block { max-width: 80rem; margin: 0 auto 3rem; } .archive .archive-block__upper { background-color: #FFFFFF; padding: 3rem 6rem; border-radius: 1.5rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } @media (max-width: 568px) { .archive .archive-block__upper { padding: 3rem 2rem; } } .archive .archive-block__upper--heading { font-size: 1.5rem; font-family: 'Gilroy', sans-serif; font-weight: 600; } @media (max-width: 568px) { .archive .archive-block__upper--heading { max-width: 75%; } } .archive .archive-block__upper .plus { position: relative; width: 2rem; height: 2rem; transition: all .2s ease; } .archive .archive-block__upper .plus:before { content: ''; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background-color: #000000; transition: all .2s ease; } .archive .archive-block__upper .plus:after { content: ''; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 2px; width: 100%; background-color: #000000; transition: all .2s ease; } .archive .archive-block__upper .plus.active { transform: rotate(90deg); } .archive .archive-block__upper .plus.active:after { opacity: 0; } .archive .archive-block__upper.active { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .archive .archive-block__lower { display: none; } .archive .archive-block__lower--img { width: 100%; border-bottom-right-radius: 35px; border-bottom-left-radius: 35px; margin-bottom: 3rem; } .archive .archive-block__lower--text { font-size: 1.5rem; line-height: 1.6em; max-width: 80%; margin: 0 auto; padding-bottom: 3rem; } @media (max-width: 568px) { .archive .archive-block__lower--text { max-width: 100%; } } .contact { margin-top: 16rem; position: relative; background-color: #FFFFFF; display: flex; } @media (max-width: 768px) { .contact { margin-top: 7rem; } } @media (max-width: 568px) { .contact { margin-top: 7rem; } } .contact .contact-float-1 { position: absolute; right: 0; top: 20rem; width: 30rem; z-index: 1; filter: blur(4px); } .contact .contact-float-2 { position: absolute; left: 0; top: 10rem; width: 30rem; z-index: 1; filter: blur(4px); } @media (max-width: 568px) { .contact .contact-float-2 { display: none; } } @media (max-width: 568px) { .contact .container { margin: 0; } } .contact__main { text-align: center; z-index: 2; position: relative; margin-bottom: 10rem; display: flex; flex-direction: column; align-items: center; } @media (max-width: 568px) { .contact__main { text-align: left; } } .contact__main--head { margin-bottom: 100px; } .contact__main--header { font-size: 4rem; margin: 7rem 0 5rem; } @media (max-width: 568px) { .contact__main--header { font-size: 3.3rem; } } .contact__main--text { font-size: 1.5rem; line-height: 1.75em; text-align: center; max-width: 59rem; width: 100%; } @media (max-width: 568px) { .contact__main--text { text-align: left; } } .contact__content { display: flex; flex-direction: column; } .contact__block { display: flex; justify-content: space-around; align-items: center; margin-bottom: 12rem; } .contact__block--img { width: 40%; } .contact__block--img img { border-radius: 20px; } @media (max-width: 1140px) { .contact__block--img { width: 45%; } } @media (max-width: 768px) { .contact__block--img { width: 100%; margin-top: 5rem; } } .contact__block--img img { width: 100%; } @media (max-width: 768px) { .contact__block { flex-direction: column; } } @media (max-width: 568px) { .contact__block { margin-bottom: 6rem; } } .panels { margin-top: 16rem; position: relative; background-color: #FFFFFF; } @media (max-width: 768px) { .panels { margin-top: 7rem; } } @media (max-width: 568px) { .panels { margin-top: 7rem; } } .panels .panels-float { position: absolute; right: 0; top: 5rem; width: 40rem; z-index: 1; } .panels__header { padding: 10rem 0; z-index: 2; position: relative; margin-left: -2rem; } @media (max-width: 1692px) { .panels__header { margin-left: 0; } } @media (max-width: 568px) { .panels__header { padding: 6rem 0; } } .panels__header--heading { font-size: 4rem; } @media (max-width: 768px) { .panels__header--heading { font-size: 3.3rem; } } .panels .panel__upper { display: flex; justify-content: space-between; margin-bottom: 3rem; margin-left: calc((100vw - 1690px) / 2); margin-right: calc((100vw - 1690px) / 2); border-top: 1px solid rgba(0, 0, 0, 0.1); padding-top: 5rem; } @media (max-width: 1692px) { .panels .panel__upper { margin-right: 2rem; margin-left: 2rem; } } .panels .panel__upper .panel-m { display: none; margin-bottom: 3rem; } .panels .panel__upper .panel-m p { font-size: 1.5rem; line-height: 1.6em; } .panels .panel__upper .panel-m .panel__right--btn-more { margin-top: 3rem; } @media (max-width: 568px) { .panels .panel__upper .panel-m { display: flex; flex-direction: column; } } .panels .panel:first-child .panel__upper { border-top: none; padding-top: 0; } .panels .panel__lower { margin-left: calc((100vw - 1690px) / 2); } @media (max-width: 1692px) { .panels .panel__lower { margin-left: 0; } } .panels .panel__left { width: 30%; position: relative; z-index: 2; } @media (max-width: 768px) { .panels .panel__left { width: 40%; } } @media (max-width: 568px) { .panels .panel__left { width: 100%; } } .panels .panel__right { width: 45%; } @media (max-width: 768px) { .panels .panel__right { width: 45%; } } @media (max-width: 568px) { .panels .panel__right { display: none; } } .panels .panel__right p { margin-top: 4rem; font-size: 1.5rem; line-height: 1.6em; } .panels .panel__right--btn-more, .panels .panel__right--btn-less { cursor: pointer; font-weight: 700; text-decoration: underline; transition: all .2s; } .panels .panel__right--btn-more:hover, .panels .panel__right--btn-less:hover { opacity: .7; } .panels .panel__right--btn-more.hidden, .panels .panel__right--btn-less.hidden { display: none; } .panels .panel__right--hidden { display: none; } .panels .panel__right--hidden p { margin-top: 0; } .panels .panel__right--btn-less { margin-top: 4rem !important; } .panels .panel__time { display: inline-flex; align-items: center; padding: .5rem 1rem; margin-bottom: 1rem; border: 1px solid #000000; border-radius: 9px; } .panels .panel__time--img { margin-right: 1rem; } .panels .panel__time--text { font-family: 'Gilroy', sans-serif; } .panels .panel__title { font-size: 2.2rem; line-height: 1.2em; margin-bottom: 2rem; } @media (max-width: 568px) { .panels .panel__title { font-size: 2rem; } } .panels .panel__date { display: flex; margin-bottom: 3rem; } .panels .panel__date--tag { margin-right: 3rem; color: #407FB0; font-size: 1.5rem; font-weight: 700; } .panels .panel__date--tag.Business { color: #407FB0; } .panels .panel__date--tag.Technology { color: #A4498D; } .panels .panel__date--tag.Politics { color: #6141B1; } .panels .panel__date--tag.Art { color: #B44444; } .panels .panel__date--tag.Welcome { color: #B44444; } .panels .panel__date--date { font-size: 1.5rem; font-weight: 700; font-family: 'Gilroy', sans-serif; } .panels .panel__button { display: inline-flex; font-size: 1.2rem; font-weight: 700; color: #FFFFFF; padding: 2rem 0; width: 16rem; justify-content: center; text-decoration: none; border-radius: 9px; transition: all .2s; } @media (max-width: 568px) { .panels .panel__button { width: 100%; } } .panels .panel__button:hover { opacity: .7; } .panels .panel__button.Business { background-color: #407FB0; } .panels .panel__button.Technology { background-color: #A4498D; } .panels .panel__button.Politics { background-color: #6141B1; } .panels .panel__button.Art { background-color: #B44444; } .panels .panel__button.Welcome { background-color: #B44444; } .panels .panel .persons { display: flex; justify-items: center; padding-bottom: 5rem; margin-bottom: 5rem; overflow-x: auto; scrollbar-width: none; scrollbar-color: black; } @media (max-width: 568px) { .panels .panel .persons { padding-bottom: 2rem; } } .panels .panel .persons::-webkit-scrollbar { width: 14px; height: 2px; } .panels .panel .persons::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); height: 5px; border-radius: 7px; margin-right: calc((100vw - 1690px) / 2); } @media (max-width: 1692px) { .panels .panel .persons::-webkit-scrollbar-track { margin-right: 2rem; margin-left: 2rem; } } .panels .panel .persons::-webkit-scrollbar-thumb { background-color: black; border-radius: 7px; border: 3px solid #000; } .panels .panel .persons .person { text-align: center; cursor: pointer; padding: 3rem; border-radius: 2.2rem; transition: all .2s; display: flex; flex-direction: column; flex: 0 0 28rem; } @media (max-width: 568px) { .panels .panel .persons .person { padding: 3rem 1rem; } } .panels .panel .persons .person:hover .person__name, .panels .panel .persons .person:hover .person__position, .panels .panel .persons .person.active .person__name, .panels .panel .persons .person.active .person__position { color: #FFFFFF; } .panels .panel .persons .person:hover.Business, .panels .panel .persons .person.active.Business { background-color: #407FB0; } .panels .panel .persons .person:hover.Technology, .panels .panel .persons .person.active.Technology { background-color: #A4498D; } .panels .panel .persons .person:hover.Politics, .panels .panel .persons .person.active.Politics { background-color: #6141B1; } .panels .panel .persons .person:hover.Art, .panels .panel .persons .person.active.Art { background-color: #B44444; } .panels .panel .persons .person:hover.Welcome, .panels .panel .persons .person.active.Welcome { background-color: #B44444; } .panels .panel .persons .person__img { width: 20rem; height: 20rem; display: block; border: 5px solid black; border-radius: 50%; overflow: hidden; margin: 0 auto 3.5rem; background-position: center; background-size: 105%; } .panels .panel .persons .person__img--img { object-fit: cover; width: 100%; height: 100%; } .panels .panel .persons .person__name { font-size: 2.2rem; font-weight: 700; margin-bottom: 1.5rem; transition: all .2s; } .panels .panel .persons .person__position { font-size: 1.5rem; transition: all .2s; } .panels .panel .persons .person.Business .person__img { border-color: #407FB0; } .panels .panel .persons .person.Technology .person__img { border-color: #A4498D; } .panels .panel .persons .person.Politics .person__img { border-color: #6141B1; } .panels .panel .persons .person.Art .person__img { border-color: #B44444; } .panels .panel .persons .person.Welcome .person__img { border-color: #B44444; } .panels .panel .persons .person__desc { display: none; position: fixed; cursor: default; max-width: 1440px; max-height: 600px; width: 90%; height: 85%; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: white; z-index: 10000; overflow: auto; border-radius: 2.2rem; } @media (max-width: 568px) { .panels .panel .persons .person__desc { max-height: 480px; } } .panels .panel .persons .person .desc__container { display: flex; justify-content: space-between; height: 100%; width: 100%; padding: 5rem; position: relative; } @media (max-width: 768px) { .panels .panel .persons .person .desc__container { padding: 2rem; overflow-x: hidden; } } .panels .panel .persons .person .desc__left { width: 30%; display: flex; flex-direction: column; } @media (max-width: 768px) { .panels .panel .persons .person .desc__left { display: none; } } .panels .panel .persons .person .desc__right { width: 60%; text-align: left; position: relative; display: flex; flex-direction: column; } @media (max-width: 768px) { .panels .panel .persons .person .desc__right { display: none; } } .panels .panel .persons .person .desc__img { width: 25rem; height: 25rem; display: block; border: none; border-radius: 50%; overflow: hidden; margin: 0 auto; } @media (max-width: 1280px) { .panels .panel .persons .person .desc__img { width: 20rem; height: 20rem; } } .panels .panel .persons .person .desc__img img { object-fit: cover; width: 100%; height: 100%; } .panels .panel .persons .person .desc__details { border: 1px solid #DBDBDB; border-radius: 2.2rem; padding: 2rem 3rem; text-align: left; margin-top: auto; max-width: 300px; width: 100%; } @media (max-width: 1280px) { .panels .panel .persons .person .desc__details { max-width: 100%; } } .panels .panel .persons .person .desc__details--date { font-size: 1.2rem; font-weight: 700; font-family: 'Gilroy', sans-serif; margin-bottom: 2rem; } .panels .panel .persons .person .desc__details--date.Business { color: #407FB0; } .panels .panel .persons .person .desc__details--date.Technology { color: #A4498D; } .panels .panel .persons .person .desc__details--date.Politics { color: #6141B1; } .panels .panel .persons .person .desc__details--date.Art { color: #B44444; } .panels .panel .persons .person .desc__details--date.Welcome { color: #B44444; } .panels .panel .persons .person .desc__details--title { font-size: 1.5rem; font-weight: 700; line-height: 1.5em; margin-bottom: 2rem; } .panels .panel .persons .person .desc__details--tag { opacity: .5; font-size: 1.2rem; font-weight: 600; } .panels .panel .persons .person .desc__name { font-size: 2.2rem; font-weight: 700; margin-bottom: 1rem; } .panels .panel .persons .person .desc__position { font-size: 1.2rem; opacity: .5; margin-bottom: 3rem; } .panels .panel .persons .person .desc__description { font-size: 1.5rem; line-height: 1.7em; overflow: auto; padding-right: 2rem; padding-bottom: 7rem; } .panels .panel .persons .person .desc__description::-webkit-scrollbar { width: 2px; } .panels .panel .persons .person .desc__description::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); height: 5px; border-radius: 7px; } .panels .panel .persons .person .desc__description::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 7px; border: 3px solid rgba(0, 0, 0, 0.2); } .panels .panel .persons .person .desc__close { display: inline-block; position: absolute; right: 0; top: 0; cursor: pointer; } .panels .panel .persons .person .desc__arrs { display: flex; align-items: flex-end; position: absolute; bottom: -0.5rem; width: 100%; height: 10rem; left: 0; background: linear-gradient(0deg, white 40%, rgba(255, 255, 255, 0) 100%); } .panels .panel .persons .person .desc__arrs--left, .panels .panel .persons .person .desc__arrs--right { padding: 1rem; border: 1px solid #000000; border-radius: 50%; cursor: pointer; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; } .panels .panel .persons .person .desc__arrs--left img, .panels .panel .persons .person .desc__arrs--right img { transition: all .2s; } .panels .panel .persons .person .desc__arrs--left.disabled, .panels .panel .persons .person .desc__arrs--right.disabled { opacity: .5; cursor: default; } .panels .panel .persons .person .desc__arrs--right { margin-left: 3rem; } .panels .panel .persons .person .desc__arrs--right:hover img { margin-left: .25rem; } .panels .panel .persons .person .desc__arrs--left:hover img { margin-right: .25rem; } .panels .panel .persons .person .desc-m { display: none; flex-direction: column; } @media (max-width: 768px) { .panels .panel .persons .person .desc-m { display: flex; } } .panels .panel .persons .person .desc-m__container { display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 100%; padding: 5rem; } .panels .panel .persons .person .desc-m__img { width: 20rem; height: 20rem; display: block; border: none; margin: 3rem auto; } .panels .panel .persons .person .desc-m__img img { object-fit: cover; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .panels .panel .persons .person .desc-m__details { border: 1px solid #DBDBDB; border-radius: 2.2rem; padding: 2rem 3rem; text-align: left; margin-bottom: 2rem; } .panels .panel .persons .person .desc-m__details--cont { display: flex; justify-content: space-between; } .panels .panel .persons .person .desc-m__details--date { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; } .panels .panel .persons .person .desc-m__details--date.Business { color: #407FB0; } .panels .panel .persons .person .desc-m__details--date.Technology { color: #A4498D; } .panels .panel .persons .person .desc-m__details--date.Politics { color: #6141B1; } .panels .panel .persons .person .desc-m__details--date.Art { color: #B44444; } .panels .panel .persons .person .desc-m__details--date.Welcome { color: #B44444; } .panels .panel .persons .person .desc-m__details--title { font-size: 1.5rem; font-weight: 700; line-height: 1.5em; } .panels .panel .persons .person .desc-m__details--tag { opacity: .5; font-size: 1.2rem; font-weight: 600; } .panels .panel .persons .person .desc-m__name { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; } .panels .panel .persons .person .desc-m__position { font-size: 1.2rem; opacity: .5; margin-bottom: 3rem; } .panels .panel .persons .person .desc-m__description { font-size: 1.5rem; line-height: 1.7em; text-align: left; padding-bottom: 7rem; } .panels .panel .persons .person .desc-m__close { display: inline-block; position: absolute; right: 2rem; top: 2rem; cursor: pointer; } .panels .panel .persons .person .desc-m__arrs { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; justify-content: center; align-items: flex-end; padding: 0 0 1rem; height: 10rem; background: linear-gradient(0deg, white 40%, rgba(255, 255, 255, 0) 100%); } .panels .panel .persons .person .desc-m__arrs--left, .panels .panel .persons .person .desc-m__arrs--right { padding: 1rem; border: 1px solid #000000; border-radius: 50%; cursor: pointer; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; } .panels .panel .persons .person .desc-m__arrs--left img, .panels .panel .persons .person .desc-m__arrs--right img { transition: all .2s; } .panels .panel .persons .person .desc-m__arrs--left.disabled, .panels .panel .persons .person .desc-m__arrs--right.disabled { opacity: .5; cursor: default; } .panels .panel .persons .person .desc-m__arrs--right { margin-left: 3rem; } .panels .panel .persons .person .desc-m__arrs--right:hover img { margin-left: .25rem; } .panels .panel .persons .person .desc-m__arrs--left:hover img { margin-right: .25rem; } .panels .panel .persons .person:first-child .desc__arrs .desc__arrs--left, .panels .panel .persons .person:first-child .desc-m__arrs .desc-m__arrs--left { opacity: .5; cursor: default; } .panels .panel .persons .person:first-child .desc__arrs .desc__arrs--left:hover img, .panels .panel .persons .person:first-child .desc-m__arrs .desc-m__arrs--left:hover img { margin-right: 0; } .panels .panel .persons .person:last-child .desc__arrs .desc__arrs--right, .panels .panel .persons .person:last-child .desc-m__arrs .desc-m__arrs--right { opacity: .5; cursor: default; } .panels .panel .persons .person:last-child .desc__arrs .desc__arrs--right:hover img, .panels .panel .persons .person:last-child .desc-m__arrs .desc-m__arrs--right:hover img { margin-left: 0; } .program { margin-top: 16rem; position: relative; overflow: hidden; } @media (max-width: 768px) { .program { margin-top: 7rem; } } @media (max-width: 568px) { .program { margin-top: 7rem; } } .program .program-float-1 { position: absolute; width: 40%; z-index: -1; top: 70rem; right: 10rem; filter: blur(4px); } .program .program-float-2 { position: absolute; width: 90%; top: 140rem; left: 0; filter: blur(4px); z-index: -1; } .program .program-float-3 { position: absolute; width: 80%; z-index: -1; top: 230rem; left: 20rem; filter: blur(4px); } @media (max-width: 568px) { .program .program-float-3 { display: none; } } .program__white { background-color: #FFFFFF; } .program__header { font-size: 6rem; padding: 10rem 0 6rem; } @media (max-width: 768px) { .program__header { font-size: 5rem; } } @media (max-width: 568px) { .program__header { font-size: 3.3rem; padding: 6rem 2rem 2rem; } } .program__banner { height: 40rem; margin-bottom: 15rem; position: relative; } .program__banner--img { width: 100%; height: 100%; object-fit: cover; } .program__banner--source { color: #BBB; font-size: .8rem; position: absolute; bottom: 1rem; right: 1rem; } @media (min-width: 1680px) { .program__banner--source { font-size: 1rem; } } .program__register { display: none; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); width: 90%; margin: 0 auto; } @media (max-width: 768px) { .program__register { display: block; } } .program__register--header { font-size: 3rem; max-width: 90%; color: #FFFFFF; } .program__register--button { padding: 2rem 0; max-width: 35rem; width: 100%; text-align: center; color: #FFFFFF; font-weight: 500; font-size: 1.5rem; background-color: #B44444; border-radius: 9px; text-decoration: none; display: flex; justify-content: center; align-items: center; margin-top: 4rem; } .program__register--button-img { width: .7rem; margin-left: 1rem; transition: all .2s ease; } .program .timer { margin-bottom: 10rem; } .agenda { display: flex; flex-direction: column; max-width: 80rem; margin: 0 auto; } .agenda__header { font-size: 4rem; margin-bottom: 3rem; } @media (max-width: 568px) { .agenda__header { font-size: 2.3rem; } } .day { padding: 4rem; background-color: #FFFFFF; border-radius: 2.2rem; margin-bottom: 4rem; } @media (max-width: 768px) { .day { padding: 4rem 2rem; } } .day__header { display: flex; justify-content: space-between; margin-bottom: 5rem; } .day__header--day { font-size: 2.2rem; } .day__header--date { font-size: 1.5rem; font-family: 'Gilroy', sans-serif; } @media (max-width: 568px) { .day__header--date { font-size: 1.1rem; } } .day__block { display: flex; justify-content: space-between; margin-bottom: 3rem; } @media (max-width: 768px) { .day__block { flex-direction: column; } } .day__left { width: 20%; display: flex; flex-direction: column; } @media (max-width: 768px) { .day__left { width: 100%; } } .day__right { width: 70%; margin-top: auto; margin-bottom: auto; } @media (max-width: 768px) { .day__right { width: 100%; } } .day__right.Business .day__desc { border: 1px solid #407FB0; border-radius: 2.2rem; padding: 3rem; display: flex; justify-content: space-between; } @media (max-width: 568px) { .day__right.Business .day__desc { padding: 3rem 2rem; } } .day__right.Business .day__desc--text { width: 100%; font-weight: 600; } .day__right.Business .day__desc--text span { color: #407FB0; } @media (max-width: 568px) { .day__right.Business .day__desc--text { width: 85%; } } .day__right.Business .day__desc--img { margin-right: 0; } .day__right.Business .day__desc--img path { fill: #407FB0; } .day__right.Business .day__desc--img path:last-child { fill: transparent; stroke: #407FB0; } .day__right.Business .day__desc--img circle { stroke: #407FB0; } .day__right.Technology .day__desc { border: 1px solid #A4498D; border-radius: 2.2rem; padding: 3rem; display: flex; justify-content: space-between; } @media (max-width: 568px) { .day__right.Technology .day__desc { padding: 3rem 2rem; } } .day__right.Technology .day__desc--text { width: 100%; font-weight: 600; } .day__right.Technology .day__desc--text span { color: #A4498D; } @media (max-width: 568px) { .day__right.Technology .day__desc--text { width: 85%; } } .day__right.Technology .day__desc--img { margin-right: 0; } .day__right.Technology .day__desc--img path { fill: #A4498D; } .day__right.Technology .day__desc--img path:last-child { fill: transparent; stroke: #A4498D; } .day__right.Technology .day__desc--img circle { stroke: #A4498D; } .day__right.Politics .day__desc { border: 1px solid #6141B1; border-radius: 2.2rem; padding: 3rem; display: flex; justify-content: space-between; } @media (max-width: 568px) { .day__right.Politics .day__desc { padding: 3rem 2rem; } } .day__right.Politics .day__desc--text { width: 100%; font-weight: 600; } .day__right.Politics .day__desc--text span { color: #6141B1; } @media (max-width: 568px) { .day__right.Politics .day__desc--text { width: 85%; } } .day__right.Politics .day__desc--img { margin-right: 0; } .day__right.Politics .day__desc--img path { fill: #6141B1; } .day__right.Politics .day__desc--img path:last-child { fill: transparent; stroke: #6141B1; } .day__right.Politics .day__desc--img circle { stroke: #6141B1; } .day__right.Art .day__desc { border: 1px solid #B44444; border-radius: 2.2rem; padding: 3rem; display: flex; justify-content: space-between; } @media (max-width: 568px) { .day__right.Art .day__desc { padding: 3rem 2rem; } } .day__right.Art .day__desc--text { width: 100%; font-weight: 600; } .day__right.Art .day__desc--text span { color: #B44444; } @media (max-width: 568px) { .day__right.Art .day__desc--text { width: 85%; } } .day__right.Art .day__desc--img { margin-right: 0; } .day__right.Art .day__desc--img path { fill: #B44444; } .day__right.Art .day__desc--img path:last-child { fill: transparent; stroke: #B44444; } .day__right.Art .day__desc--img circle { stroke: #B44444; } .day__time { font-size: 1.3rem; font-weight: 600; font-family: 'Gilroy', sans-serif; display: flex; flex-direction: column; } .day__time span { color: #DDDDDD; font-size: 1rem; font-weight: 400; text-decoration: none !important; } @media (max-width: 768px) { .day__time { margin-bottom: 1rem; } } @media (max-width: 568px) { .day__time { font-size: 1.1rem; } } .day__desc { display: flex; align-items: center; } .day__desc--text { font-size: 1.5rem; line-height: 1.5em; max-width: 80%; display: flex; flex-direction: column; } .day__desc--text span { margin-bottom: .5rem; font-size: 1.4rem; } @media (max-width: 568px) { .day__desc--text { max-width: 100%; line-height: 1.2em; } } .day__desc--img { margin-right: 2rem; transition: all .2s; } .day__desc--img:hover { opacity: .7; } @media (max-width: 568px) { .day__desc--img { width: 2rem; } .day__desc--img.lunch { width: 1.5rem; } } .day__persons { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1rem; margin-top: 2rem; } @media (max-width: 768px) { .day__persons { display: flex; flex-wrap: wrap; margin-bottom: 2rem; } } @media (max-width: 480px) { .day__persons { display: grid; grid-template-columns: repeat(4, 1fr); } } .day__person { cursor: pointer; position: relative; } @media (max-width: 768px) { .day__person { margin-right: .5rem; } } .day__person--container { width: 3rem; height: 3rem; overflow: hidden; border-radius: 50%; } @media (max-width: 480px) { .day__person--container { width: 4rem; height: 4rem; } } .day__person--img { width: 100%; object-fit: cover; } .day__person--name { position: absolute; opacity: 0; visibility: hidden; z-index: 2; bottom: 3rem; left: -2rem; background-color: #fff; border: 1px solid #E1E1E1; border-radius: 1.1rem; padding: 1rem; font-size: 1.3rem; font-weight: 600; width: 17rem; height: auto; display: flex; flex-direction: column; } .day__person--name:after { content: url(../img/arr-down.svg); display: block; position: absolute; bottom: -13px; left: 2.5rem; } .day__person--name span { font-size: 1.1rem; font-weight: 500; margin-top: .5rem; color: #C4C4C4; } .day__person:hover .day__person--name { opacity: 1; visibility: visible; } .keynote { margin-top: 16rem; position: relative; } @media (max-width: 768px) { .keynote { margin-top: 7rem; } } @media (max-width: 568px) { .keynote { margin-top: 7rem; } } .keynote__main { overflow: hidden; } .keynote .keynote-float { position: absolute; right: 0; top: 5rem; width: 40rem; z-index: 1; } @media (max-width: 768px) { .keynote .keynote-float { display: none; } } .keynote__header { padding: 10rem 0; z-index: 2; position: relative; } @media (max-width: 1692px) { .keynote__header { margin-left: 0; } } @media (max-width: 568px) { .keynote__header { padding: 6rem 0; } } .keynote__header--heading { font-size: 4rem; } @media (max-width: 768px) { .keynote__header--heading { font-size: 3.3rem; } } .keynote__speech { display: flex; justify-content: space-between; margin-bottom: 100px; } .keynote__speech:nth-child(even) { flex-direction: row-reverse; } @media (max-width: 1024px) { .keynote__speech { flex-direction: column; } .keynote__speech:nth-child(even) { flex-direction: column; } } .keynote__speech .rect { fill: currentColor; } .keynote__left { width: 45%; } @media (max-width: 1024px) { .keynote__left { width: 100%; } } .keynote__right { width: 45%; min-height: 350px; height: 100%; position: relative; border-radius: 30px; overflow: hidden; } @media (max-width: 1024px) { .keynote__right { width: 70%; margin-top: 40px; } } @media (max-width: 768px) { .keynote__right { width: 100%; } } @media (max-width: 480px) { .keynote__right { min-height: 200px; } } .keynote__right.active .keynote__video { opacity: 1; } .keynote__right.active .keynote__video-img, .keynote__right.active .keynote__video-play { opacity: 0; visibility: hidden; } .keynote__place { display: flex; align-items: center; margin-bottom: 20px; } .keynote__place--paragraph { text-transform: uppercase; font-size: 12px; font-weight: 700; position: relative; padding-left: 5px; } @media (max-width: 768px) { .keynote__place--paragraph { font-size: 15px; } } .keynote__title { font-size: 22px; font-weight: 700; margin-bottom: 10px; color: #000000; } @media (min-width: 1680px) { .keynote__title { font-size: 30px; } } @media (max-width: 768px) { .keynote__title { font-size: 20px; } } .keynote__desc { display: flex; } .keynote__tag { font-size: 12px; font-weight: 700; margin-right: 40px; } @media (min-width: 1680px) { .keynote__tag { font-size: 16px; } } @media (max-width: 768px) { .keynote__tag { font-size: 13px; } } .keynote__date { font-size: 12px; color: #000000; margin-bottom: 40px; } @media (min-width: 1680px) { .keynote__date { font-size: 16px; } } @media (max-width: 768px) { .keynote__date { font-size: 13px; } } .keynote__persons { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 60px)); grid-column-gap: 30px; grid-row-gap: 20px; } @media (max-width: 768px) { .keynote__persons { display: flex; grid-gap: 0; } } .keynote__persons.Law { grid-template-columns: repeat(3, min-content); } @media (max-width: 1024px) { .keynote__persons.Law { grid-template-columns: repeat(auto-fill, minmax(60px, 60px)); } } .keynote__person { position: relative; } @media (max-width: 768px) { .keynote__person:not(:first-child) { margin-left: -10px; } .keynote__person.active .keynote__person--name { opacity: 1; visibility: visible; } } .keynote__person--img { width: 60px; } @media (max-width: 768px) { .keynote__person--img { width: 40px; } } .keynote__person--name { position: absolute; opacity: 0; visibility: hidden; z-index: 2; top: -30px; color: #000000; left: -5px; background-color: #fff; border: 1px solid #E1E1E1; border-radius: 1.1rem; padding: 1rem; font-size: 1.3rem; font-weight: 600; width: max-content; height: auto; display: flex; flex-direction: column; } .keynote__person--name:after { content: url(../img/arr-down.svg); display: block; position: absolute; bottom: -13px; left: 2.5rem; } @media (max-width: 768px) { .keynote__person--name { left: -14px; } } @media (min-width: 768px) { .keynote__person:hover .keynote__person--name { opacity: 1; visibility: visible; } } .keynote__video { width: 100%; height: 100%; min-height: 350px; position: relative; z-index: 1; opacity: 0; transition: all .2s; } @media (max-width: 480px) { .keynote__video { min-height: 200px; } } .keynote__video-img { position: absolute; visibility: visible; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; transition: all .2s; } .keynote__video-play { position: absolute; visibility: visible; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 3; cursor: pointer; transition: all .2s; } .keynote__video-play:hover { opacity: .8; }