/*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; color: #000; text-decoration: none; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } .page-contact .card .overlay, .multi-step-form .card-body textarea, .page-research-group .researches-links, section.page-single-research::after, .page-services .option-contnet, section.services #hover-sphere, section.intro article > div::after, section.intro::after, section.intro::before, section.page-course::after, section.page-about::after, section.page-uni-groups::after, .course-sessions::after, .page-ticket::after, .page-exam::after, .page-news::after, .page-single-news::after, .page-contact::after, body { width: 100%; height: 100%; } html { scroll-behavior: smooth; } body { font-family: "Roboto-Regular", sans-serif; overflow-x: hidden; color: #000; } figure, img { margin-bottom: 0 !important; } ul { padding: 0; margin: 0; } p { font-weight: 400; letter-spacing: 1px; font-family: "Roboto-Regular", sans-serif; word-wrap: break-word; } a, button { font-family: "Roboto-Regular", sans-serif; transition: all 0.3s ease-in-out; color: #000; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } span { font-family: "Roboto-Regular", sans-serif; } .container-fluid { max-width: 1920px; } .form-control, .form-select { border-radius: 0; } .particles-js { position: absolute; width: 100%; height: 100%; top: 0; z-index: -1; } .main-header { padding-top: 1.25rem; display: flex; position: relative; z-index: 1; } .main-header .navbar-nav a { position: relative; font-size: 18px; font-weight: 400; color: #000; padding: 3px 0; } .main-header .navbar-nav a::after { position: absolute; top: auto; right: 0; bottom: 0; left: 0; content: ""; height: 2px; width: 0; background: #000; transition: all 0.5s ease-in-out; opacity: 0; } .main-header .navbar-nav a:hover { opacity: 1; } .main-header .navbar-nav a:hover::after { opacity: 1; width: 100%; } @media (max-width: 625px) { .main-header { padding-top: 0; } } .logo { display: flex; align-items: center; } .logo img { height: 125px; width: 73px; } .logo figcaption { font-family: "Roboto--Medium", sans-serif; color: #000; font-size: 1.5rem; margin-left: 1rem; } @media (max-width: 625px) { .logo img { width: 60px; } } footer { background-color: #1b253d; color: #fff; position: relative; z-index: 1; } footer .container-xxl { padding-top: 30px; padding-bottom: 30px; } footer .part-one .logo figcaption { color: #69cabe; } footer .part-one p { width: 40ch; margin: 15px 0; font-size: 14px; } footer .part-one span { font-size: 14px; } footer .part-one .call-number { margin-right: 25px; } footer .part-two { display: flex; justify-content: space-between; padding: 50px 50px 0 0; } footer .part-two h3 { font-size: 18px; } footer .part-two ul { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; } footer .part-two ul a { color: #fff; opacity: 0.7; font-size: 14px; letter-spacing: 1px; } footer .part-two ul a:hover { color: #ebba3d; opacity: 1; } @media screen and (max-width: 1056px) { footer .part-two { padding: 40px 15px 0 15px; } footer .part-two h3 { font-size: 16px; } footer .part-two ul { margin-top: 14px; /*align-items: center;*/ gap: 14px; } footer .part-two ul li { font-size: 13px; } } footer .part-three { padding: 50px 0px 0 0px; } footer .part-three a:nth-child(n+4) svg path { fill: none; stroke: #fff; } footer .part-three a:nth-child(n+4) svg:hover path { stroke: #ebba3d; } footer .part-three svg { opacity: 23%; fill: #fff; } footer .part-three svg:hover { fill: #ebba3d; opacity: 1; } footer .part-three h3 { font-size: 18px; } footer .part-three > div .col img { height: 95px; width: 100%; border-radius: 20px; background-color: white; } footer .part-three .club-join-form { border-bottom: 2px solid #455777; display: flex; align-items: center; pointer-events: none; } footer .part-three .club-join-form:hover { border-bottom-color: #ebba3d; } footer .part-three .club-join-form input { color: rgba(255, 255, 255, 0.5); padding: 7px; margin-top: 15px; width: 100%; pointer-events: auto; } footer .part-three .club-join-form input:focus { color: #fff; } footer .part-three .club-join-form button { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 4px 15px; background-color: #ebba3d; color: #000; margin-left: auto; pointer-events: auto; } @media screen and (max-width: 1056px) { footer .part-three { padding: 50px 15px 0 15px; } footer .part-three > div .col img { height: 110px; } } footer .copy-right { color: #ebba3d; background-color: #091227; padding: 15px; text-align: center; margin: 0; font-size: 16px; } @media screen and (max-width: 1056px) { footer .copy-right { font-size: 14px; padding: 12px; } } @media screen and (max-width: 625px) { footer .copy-right { font-size: 12px; padding: 15px 8px; } } .button-yellow { position: relative; font-size: 16px; /*text-transform: capitalize;*/ padding: 12px 16px; border: 1px solid #bad3e5; border-bottom: 1px solid #ebba3d; z-index: 1; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .button-yellow::after { position: absolute; top: auto; right: 0; bottom: 0; left: 0; content: ""; background-color: #ebba3d; height: 3px; width: 100%; z-index: -1; transition: all 0.5s ease-in-out; } .button-yellow:hover { color: #fff; border-color: #ebba3d; } .button-yellow:hover::after { height: 100%; } .participate-btn { color: #fff; background-color: #1f3152; padding: 10px; transition: all 0.5s ease-in-out; font-size: 14px; display: flex; align-items: center; } .participate-btn img { width: 18px; height: 15px; margin-left: 12px; } .participate-btn:hover { background-color: #294272; color: #fff; } .nav-tabs { border: none; flex-direction: row; flex-wrap: nowrap; display: flex; overflow-y: hidden; overflow-x: auto; white-space: nowrap; gap: 20px; } .nav-tabs .nav-link { color: #000; font-family: "Roboto-Regular", sans-serif; border: none; border-bottom: 1px solid #fff; opacity: 0.5; padding: 0 0 5px 0; font-size: 14px; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .nav-tabs .nav-link:hover { opacity: 0.8; } .nav-tabs .nav-link.active { opacity: 1; border-bottom-color: rgb(0, 0, 0); } @media screen and (min-width: 768px) { .nav-tabs { display: flex; justify-content: center; overflow: hidden; gap: 40px; } } .tab-content { margin-top: 1rem; } .animated-tada { -webkit-animation: tada 6s 1s infinite both; animation: tada 6s 1s infinite both; } @-webkit-keyframes tada { 5%, 10% { transform: rotate3d(0, 0, 1, -3deg); } 15%, 25%, 35%, 45% { transform: rotate3d(0, 0, 1, 3deg); } 20%, 30%, 40% { transform: rotate3d(0, 0, 1, -3deg); } } @keyframes tada { 5%, 10% { transform: rotate3d(0, 0, 1, -3deg); } 15%, 25%, 35%, 45% { transform: rotate3d(0, 0, 1, 3deg); } 20%, 30%, 40% { transform: rotate3d(0, 0, 1, -3deg); } } .animatedopacity { -webkit-animation: hideElement 0.5s 0s 1 forwards; animation: hideElement 0.5s 0s 1 forwards; } @-webkit-keyframes hideElement { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes hideElement { 0% { opacity: 1; } 100% { opacity: 0; } } .blue-circle-filter { background-color: rgba(90, 171, 233, 0.3411764706); width: 35px; height: 35px; border-radius: 100%; margin-right: 15px; position: relative; flex-shrink: 0; } .blue-circle-filter::after, .blue-circle-filter::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; filter: blur(3px); margin: auto; border-radius: 100%; } .blue-circle-filter::after { width: 50%; height: 50%; background-color: #5aaae9; z-index: 1; } .blue-circle-filter::before { width: 25%; height: 25%; background-color: #fff; z-index: 2; } .titleLine { position: relative; padding-bottom: 8px; margin-bottom: 8px !important; } .titleLine::before, .titleLine::after { content: ""; } .titleLine::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto auto 0 auto; width: 100%; height: 1px; background-color: #4372a4; } .titleLine::after { position: absolute; top: 0; right: -4px; bottom: -4px; left: 0; margin: auto 0 0 auto; width: 10px; height: 10px; background-color: #5aaae9; filter: blur(3px); } .backdrop-blur { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .backdrop-blur::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(31, 49, 81, 0.41); z-index: -1; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); } .swiper-btns { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-left: auto; width: 100px; } .swiper-btns .swiper-button-next::after, .swiper-btns .swiper-button-prev::after { font-size: 20px; } .section-title { font-size: 34px; line-height: 46px; color: #5aaae9; margin: 0; } .section-title p { font-size: 14px; color: #000; line-height: 19px; /*text-transform: capitalize;*/ margin: 0; } @media screen and (max-width: 625px) { .section-title { font-size: 27px; line-height: 40px; } } .news-card { width: 100%; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin: 0 0 1.5rem 0; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; --bs-card-border-width: 0; --bs-card-inner-border-radius: 0; --bs-card-border-radius: 0; --bs-card-cap-bg: #fff; } .news-card-overlay { position: relative; } .news-card-badge { position: absolute; top: 7px; right: 7px; bottom: 7px; left: 7px; background-color: rgba(255, 255, 255, 0.6); height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 4px 6px; font-size: 12px; color: #1f3152; } .news-card .news-author { position: absolute; top: auto; right: 0; bottom: 0; left: 0; display: flex; position: absolute; align-items: center; color: #fff; font-size: 12px; background-color: rgba(31, 49, 82, 0.76); padding: 7px; } .news-card .news-author img { width: 20px; height: 20px; border-radius: 50%; } .news-card .news-author h3 { font-size: 12px; font-weight: 300; margin: 0 0 0 7px; } .news-card .card-body { transition: all 0.5s ease-in-out; } .news-card .card-title { font-size: 14px; font-weight: bold; letter-spacing: 1px; } .news-card .card-text { font-size: 12px; font-weight: 300; } .news-card .card-footer { transition: all 0.5s ease-in-out; } .news-card .card-footer span, .news-card .card-footer a { font-size: 12px; } .news-card:hover .card-body, .news-card:hover .card-footer { background-color: rgba(90, 170, 233, 0.25); } .list-comments { margin: 1rem 0; } .list-comments .comments-container { display: flex; flex-direction: column; row-gap: 25px; padding: 20px; background-color: #e9f2f7; } .list-comments .comments-container .comment-item:not(:last-child) { padding-bottom: 15px; border-bottom: 1px solid #1f3152; } .list-comments .comments-container .comment-item img { width: 52px; height: 56px; } .list-comments .comments-container .comment-item p { margin-top: 15px; font-size: 14px; } .list-comments .comments-container .comment-item .answer-comment { margin-left: 35px; } .nano { width: 100%; height: 588px; } .nano .nano-content { /*right: 0 !important;*/ scrollbar-width: none; } .nano .nano-pane { width: 5px; background: #fff; } .nano .nano-slider { background: #bad3e5 !important; margin: 0 !important; } .pagination { margin: 2rem auto 4rem 0; --bs-pagination-border-radius: 0; --bs-pagination-border-color: #5aaae9; --bs-pagination-bg: #eef6fb; } .pagination .page-item { margin: 0 0.25rem; } .pagination .page-link { color: #5aaae9; display: flex; align-items: center; } .pagination .page-link:hover { color: #fff; background-color: #5aaae9; border-color: #5aaae9; } .pagination .page-link svg { width: 20px; } .star-rating { display: flex; flex-direction: row-reverse; font-size: 1.7rem; justify-content: space-around; padding: 0 0.2rem; text-align: center; width: 6rem; } .star-rating input { display: none; } .star-rating label { color: #ccc; cursor: pointer; } .star-rating input:checked ~ label { color: #ffe00c; } .star-rating label:hover, .star-rating label:hover ~ label { color: #ffe00c; } .bg-blure-100 { position: relative; } .bg-blure-100::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(31, 49, 81, 0.15); z-index: 0; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); } .swiper-button-next, .swiper-button-prev { color: #000; } .swiper-button-next::after, .swiper-button-prev::after { font-size: 25px; } .open-sidebar-btn { cursor: pointer; } .open-sidebar-btn svg path { fill: #000; transition: all 0.4s; } @media (max-width: 991.9px) { .open-sidebar-btn { display: block !important; margin-right: 0; } } .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 60%; height: 100%; z-index: 100; background-color: #fff; transition: all 0.4s ease-in-out; visibility: hidden; opacity: 0; transform: translateX(-100%); } .sidebar figure { font-size: 35px; padding: 15px 15px 0 15px; border-bottom: 1px solid rgb(216, 213, 213); } .sidebar figure figcaption { color: #1f3152; font-size: 30px; } .sidebar ul { align-items: unset; padding: 0 25px 25px 25px; } .sidebar ul li { padding: 15px 0 5px 0; transition: all 0.4; } .overlayclass { position: fixed; left: 0; top: 0; bottom: 0; height: 100%; width: 0; background-color: #000000; opacity: 0.5; z-index: 99; } section.intro .main-header nav a, .page-single-research .main-header nav a, .page-intro-uni-group .main-header nav a, .page-research-group .main-header nav a, .page-uni-groups .main-header nav a, .page-course .main-header nav a { color: #fff; } section.intro .main-header nav a::after, .page-single-research .main-header nav a::after, .page-intro-uni-group .main-header nav a::after, .page-research-group .main-header nav a::after, .page-uni-groups .main-header nav a::after, .page-course .main-header nav a::after { background-color: #fff; } section.intro .main-header .open-sidebar-btn svg path, .page-single-research .main-header .open-sidebar-btn svg path, .page-intro-uni-group .main-header .open-sidebar-btn svg path, .page-research-group .main-header .open-sidebar-btn svg path, .page-uni-groups .main-header .open-sidebar-btn svg path, .page-course .main-header .open-sidebar-btn svg path { fill: #fff; } section.intro .main-header .logo figcaption, .page-single-research .main-header .logo figcaption, .page-intro-uni-group .main-header .logo figcaption, .page-research-group .main-header .logo figcaption, .page-uni-groups .main-header .logo figcaption, .page-course .main-header .logo figcaption { color: #fff; } .course-sessions, .page-ticket, .page-exam, .page-news, .page-single-news, .page-contact { position: relative; } .course-sessions::after, .page-ticket::after, .page-exam::after, { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: url(../images/bg-particles.png) no-repeat; background-size: 100% 100%; z-index: -1; opacity: 0.25; } section.page-course, section.page-about, section.page-uni-groups { position: relative; } section.page-course::after, section.page-about::after, section.page-uni-groups::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; margin: auto; z-index: -12; background-size: cover; background-repeat: no-repeat; filter: blur(7px); } section.page-course article, section.page-about article, section.page-uni-groups article { padding: 0 0 100px 0; } section.page-course article .backdrop-blur, section.page-about article .backdrop-blur, section.page-uni-groups article .backdrop-blur { padding: 35px 25px; } section.page-course article .backdrop-blur::after, section.page-about article .backdrop-blur::after, section.page-uni-groups article .backdrop-blur::after { border-radius: 14px; } section.page-course article h1, section.page-about article h1, section.page-uni-groups article h1 { font-size: 54px; line-height: 79px; font-weight: 700; color: #fff; } section.page-course article p, section.page-about article p, section.page-uni-groups article p { color: #fff; max-width: 70ch; opacity: 0.74; margin: 0; } section.intro { position: relative; overflow: hidden; } section.intro::after, section.intro::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; } section.intro::after { z-index: -12; background: url(../images/bg-virus.png) no-repeat; background-size: cover; } section.intro::before { z-index: -1; background-color: #fff; opacity: 15%; } section.intro header nav a { color: #fff; } section.intro header nav a::after { background: #fff; } section.intro header .open-sidebar-btn svg path { fill: #fff; } section.intro article { padding: 150px 0 200px 0; } section.intro article > div { padding: 35px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; } section.intro article > div::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; z-index: -2; background: rgba(186, 211, 229, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } section.intro article h1 { max-width: 18ch; font-size: 74px; line-height: 99px; font-weight: 400; } section.intro article p { max-width: 50ch; word-wrap: break-word; color: #fff; font-size: 18px; line-height: 24px; /*text-transform: capitalize;*/ margin-top: 15px; } section.intro article a { position: relative; display: block; font-weight: lighter; font-size: 18px; padding: 12px; letter-spacing: 1px; margin-top: 10px; } section.intro article a:hover { color: #000; } section.intro article a::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background-color: #ebba3d; height: 100%; width: 3px; z-index: -1; transition: all 0.5s ease-in-out; } section.intro article a:hover::after { width: 100%; } @media screen and (max-width: 625px) { section.intro article { padding: 50px 0 120px 0; } section.intro article h1 { font-size: 54px; line-height: 59px; } } section.research-groups { padding-top: 100px; padding-bottom: 100px; } section.research-groups .tab-content { position: relative; padding: 0 60px; margin-top: 3rem; } section.research-groups .tab-content img { width: 55px; } section.research-groups .tab-content h3 { font-size: 18px; text-align: center; line-height: 24px; margin: 20px 0 5px 0; } section.research-groups .tab-content p { opacity: 0.6; width: 27ch; /*text-transform: initial;*/ font-size: 14px; margin: 0 auto; } section.research-groups .tab-content .swiper-button-next, section.research-groups .tab-content .swiper-button-prev { top: 37%; } @media screen and (max-width: 625px) { section.research-groups .tab-content { padding: 0; } } section.services { background: #1e2a42; padding: 75px 0; position: relative; overflow: hidden; } section.services .section-title { position: relative; z-index: 2; } section.services .section-title p { color: #fff; } section.services .sphere { align-items: center; position: relative; width: 442px; height: 442px; margin: 3rem auto; z-index: 2; } section.services .sphere-circles-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 442px; height: 442px; border-radius: 100%; margin: auto; } section.services .sphere .sphere-circle { position: absolute; width: 0; height: 0; border-radius: 100%; background: rgba(245, 245, 245, 0.3294117647); } section.services .sphere .sphere-circle::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 0; height: 0; background-color: #fff; margin: auto; border-radius: inherit; z-index: 2; filter: blur(3px); } section.services .sphere .sphere-circle::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 0; height: 0; background-color: #69cabe; margin: auto; border-radius: inherit; z-index: 1; filter: blur(3px); } section.services .sphere .sphere-circle article { cursor: pointer; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; z-index: 3; } section.services .sphere .sphere-circle.active { width: 50px; height: 50px; border-width: 2px; } section.services .sphere .sphere-circle.active::after { width: 14px; height: 14px; } section.services .sphere .sphere-circle.active::before { width: 22px; height: 22px; } section.services .sphere .circle-top-left, section.services .sphere .circle-bottom-left { left: 80px; border: 0px solid #71b6fc; } section.services .sphere .circle-top-left::before, section.services .sphere .circle-bottom-left::before { background-color: #71b6fc; } section.services .sphere .circle-top-left { top: 80px; } section.services .sphere .circle-bottom-left { bottom: 80px; } section.services .sphere .circle-top-right, section.services .sphere .circle-bottom-right { right: 80px; border: 0px solid #6dcec0; } section.services .sphere .circle-top-right::before, section.services .sphere .circle-bottom-right::before { background-color: #6dcec0; } section.services .sphere .circle-top-right { top: 80px; } section.services .sphere .circle-bottom-right { bottom: 80px; } section.services .sphere .circle-content { position: absolute; width: 0; overflow: hidden; } section.services .sphere .circle-content article { width: 183px; color: #fff; opacity: 0; width: 25ch; height: 12.125rem; } section.services .sphere .circle-content article h3 { font-size: 22px; margin: 0 0 0 5px; font-weight: 400; } section.services .sphere .circle-content article p { font-size: 14px; margin: 15px 0 0 0; opacity: 0.6; max-width: 25ch; } section.services .sphere .circle-content article img { width: 42px; } section.services .sphere .circle-content article::after { content: ""; height: 1px; width: 60%; } section.services .sphere .circle-content::after { position: absolute; z-index: 0; top: var(--circleAfterTop, 35px); } section.services .sphere .circle-top-right .circle-content, section.services .sphere .circle-bottom-right .circle-content { left: 46px; top: -75px; } section.services .sphere .circle-top-right .circle-content article, section.services .sphere .circle-bottom-right .circle-content article { float: right; padding-left: 15px; } section.services .sphere .circle-top-right .circle-content article::after, section.services .sphere .circle-bottom-right .circle-content article::after { position: absolute; top: 31.15%; right: 0; bottom: 0; left: 130px; background: #6ccec0; } section.services .sphere .circle-top-right .circle-content::after, section.services .sphere .circle-bottom-right .circle-content::after { content: url(../images/right-oribline.svg); left: 0px; } section.services .sphere .circle-top-left .circle-content, section.services .sphere .circle-bottom-left .circle-content { right: 46px; top: -75px; } section.services .sphere .circle-top-left .circle-content article, section.services .sphere .circle-bottom-left .circle-content article { float: left; } section.services .sphere .circle-top-left .circle-content article::after, section.services .sphere .circle-bottom-left .circle-content article::after { position: absolute; top: 31.15%; right: 143px; bottom: auto; left: auto; background: #5aaae9; } section.services .sphere .circle-top-left .circle-content::after, section.services .sphere .circle-bottom-left .circle-content::after { content: url(../images/left-oribiline.svg); right: 0px; } @media screen and (max-width: 768px) { section.services .sphere { width: 100%; height: 842px; } section.services .sphere canvas, section.services .sphere #hover-sphere { display: none !important; } section.services .sphere .sphere-circles-container { width: 100%; height: 100%; z-index: 1; } section.services .sphere .circle-top-left { top: 80px; right: 0; left: auto; } section.services .sphere .circle-top-right { top: 300px; right: auto; left: 0; } section.services .sphere .circle-bottom-left { bottom: 0; top: 520px; right: 0; left: auto; } section.services .sphere .circle-bottom-right { bottom: 0; top: 740px; right: auto; left: 0; } } section.services #hover-sphere { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; z-index: 2; cursor: pointer; } section.services::after, section.services::before { content: ""; width: 400px; height: 600px; background-color: #283c54; filter: blur(50px); z-index: 1; } @media screen and (max-width: 625px) { section.services::after, section.services::before { width: 300px; height: 400px; } } section.services::after { position: absolute; top: -25%; right: -15%; bottom: auto; left: auto; } section.services::before { position: absolute; top: auto; right: auto; bottom: -25%; left: -15%; } section.courses { padding-top: 100px; padding-bottom: 100px; } section.courses .container-xxl > * { position: relative; padding: 0 60px; } section.courses .section-title { width: 100%; } section.courses .card { border: none; } section.courses .card .card-img-top { width: 100%; height: 100%; } section.courses .card .card-img-top img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } section.courses .card .card-heading { display: flex; gap: 10px; margin-bottom: 1rem; } section.courses .card .card-heading img { width: 13px; } section.courses .card .card-heading span { font-size: 12px; } section.courses .card .card-heading .card- { position: relative; display: block; margin-left: auto; color: #bad3e5; padding: 4px 7px; font-size: 14px; z-index: 1; } section.courses .card .card-heading .card-::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: #1f3152; width: 100%; height: 100%; z-index: -1; transition: all 0.5s ease-in-out; } section.courses .card .card-body { background-color: #f2f7fc; transition: all 0.3s ease-in-out; } section.courses .card .card-user { display: flex; align-items: center; } section.courses .card .card-user img { width: 33px; } section.courses .card .card-user h4 { font-size: 16px; font-weight: 400; margin: 0 0 0 7px; } section.courses .card .card-user a { background: #5aaae9; margin-left: auto; padding: 5px 15px; font-weight: 300; font-size: 13px; } section.courses .card .card-user a:hover { color: #fff; } section.courses .card:hover .card-body { background-color: #1f3152; color: #fff; } section.courses .card:hover .card-badge::after { background-color: rgba(117, 135, 167, 0.3019607843); } section.courses .card:hover .card-user a { background-color: #ebba3d; } @media screen and (max-width: 992px) { section.courses { padding-top: 50px; padding-bottom: 50px; flex-direction: column !important; } section.courses .button-yellow { margin-top: 25px; } section.courses .tab-content .swiper-button-next, section.courses .tab-content .swiper-button-prev { top: -38px; } section.courses .tab-content .swiper-button-next::after, section.courses .tab-content .swiper-button-prev::after { font-size: 20px; } section.courses .tab-content .swiper-button-next { right: auto; left: 70px; } section.courses .container-xxl > * { position: relative; padding: 0; } } section.grants { position: relative; padding: 50px 0; } section.grants .section-title { z-index: 1; position: relative; display: flex; flex-direction: column; align-items: center; } section.grants .section-title p { text-align: center; max-width: 50ch; word-wrap: break-word; } section.grants .container-xxl > div { padding: 0 120px; position: relative; height: 100%; } section.grants .swiper { padding: 3rem 0; width: 100%; height: 100%; } section.grants .swiper-wrapper { flex-direction: inherit; } section.grants .swiper-slide { padding: 0 20px 20px 0; height: auto; align-self: stretch; } section.grants .swiper .co-logo { background-color: #f1f5f9; text-align: center; border: 1px solid #bad3e5; padding: 25px 25px; height: 100%; } section.grants .swiper .co-logo h3 { font-weight: 300; font-size: 19px; line-height: 26px; margin: 10px 0 0 0; } section.grants .swiper .co-logo img { width: 125px; height: 125px; } @media (max-width: 625px) { section.grants .swiper .co-logo { padding: 15px 25px; } } section.grants .swiper-button-next { right: 40px; } section.grants .swiper-button-prev { left: 40px; } section.grants canvas { display: block; } @media screen and (max-width: 625px) { section.grants .container-xxl > div { padding: 0 50px; } section.grants .swiper-button-next { right: 10px; } section.grants .swiper-button-prev { left: 10px; } section.grants .swiper-slide { padding: 0 15px 0 0; } } section.index-news { padding-top: 70px; padding-bottom: 70px; } section.index-news .news-date { color: #ebba3d; } section.index-news h3 { font-size: 34px; } section.index-news img { -o-object-fit: cover; object-fit: cover; height: 100%; } section.index-news p { font-size: 14px; margin: 0; max-width: 70ch; } section.index-news .news-btn { position: relative; font-size: 18px; } section.index-news .news-btn::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; top: auto; width: 50%; height: 2px; background: #69cabe; transition: all 0.5s ease-in-out; } section.index-news .news-btn:hover::after { width: 100%; } @media screen and (max-width: 992px) { section.index-news h3 { margin-top: 15px; font-size: 30px; width: 100%; } section.index-news .news-btn { margin-top: 20px; } section.index-news .button-yellow { margin-top: 20px; } section.index-news .swiper-btns { margin: 25px auto 0 0; } } .page-services { background: transparent !important; z-index: 1; overflow: unset !important; padding: 25px 15px 50px 15px !important; } .page-services::after, .page-services::before { content: none !important; } .page-services .circle-top-right article, .page-services .circle-bottom-right article { cursor: pointer; z-index: 3; } .page-services .circle-top-right h3, .page-services .circle-top-right p, .page-services .circle-bottom-right h3, .page-services .circle-bottom-right p { color: #69cabe; opacity: 1 !important; } .page-services .circle-top-left h3, .page-services .circle-top-left p, .page-services .circle-bottom-left h3, .page-services .circle-bottom-left p { color: #71b6fc; opacity: 1 !important; } .page-services .services-container { display: flex; position: relative; overflow: initial; margin-top: 1rem; padding: 0 0 80px 0; } .page-services .sphere { transition: all 1s ease-in-out; margin: 4rem auto !important; } .page-services .row { row-gap: 1.5rem; } .page-services .option-contnet { background-color: #bad3e5; padding: 15px; display: block; transition: all 0.5s ease-in-out; } .page-services .option-contnet h3 { font-size: 14px; margin: 0 0 0 10px; } .page-services .option-contnet p { font-size: 12px; /*max-width: 27ch;*/ word-wrap: break-word; margin: 10px 0 0 0; } .page-services .option-contnet img { border-radius: 100%; border: 2px solid transparent; width: 35px; height: 35px; } .page-services .option-contnet:hover { background-color: #283c54; } .page-services .option-contnet:hover h3, .page-services .option-contnet:hover p { color: #fff; } .page-services .option-contnet:hover img { border-color: #fff; } .page-services .services-options { position: absolute; background: rgba(186, 211, 229, 0.24); padding: 0; width: 0; opacity: 0; visibility: hidden; transition: all 1s ease-in-out; z-index: 1; } .page-services .services-options-inner { padding: 0 1rem; margin: 1rem 0; } @media screen and (max-width: 767px) { .page-services .services-options-inner { padding: 0; } } .page-services .services-options .hide-options { height: 40px; width: 25px; content: ""; opacity: 0; cursor: pointer; } .page-services .right-services-options { right: 0; transform: translateX(110%); } .page-services .right-services-options .hide-options { position: absolute; top: 0; right: 0; bottom: 0; left: -50px; margin: auto auto auto 0; } .page-services .left-services-options { left: 0; transform: translateX(-110%); } .page-services .left-services-options .hide-options { position: absolute; top: 0; right: -50px; bottom: 0; left: 0; margin: auto 0 auto auto; } .page-services .services-options-active { visibility: visible; opacity: 1; width: 55%; } .page-services .subServiceTitle { display: none; width: 0; height: 0; overflow: hidden; align-items: center; justify-content: space-between; align-items: center; padding: 0; } .page-services .subServiceTitle .hide-options { position: unset; margin: 0; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } @media screen and (max-width: 991.9px) { .page-services .services-options-active { width: 100%; position: relative; margin: auto; } .page-services .services-options-active ~ .sphere { width: 0; height: 0; overflow: hidden; } .page-services .services-options-inner { overflow: unset; max-height: -webkit-fit-content; max-height: -moz-fit-content; max-height: fit-content; } .page-services .services-options > .hide-options { display: none; } .page-services .subServiceTitle { display: flex; } } section.page-about::after { background-image: url(../images/bg-dna.png); } .team-members { position: relative; } #tags-cloud { background: transparent; padding: 10px; margin-top: 10px; position: relative; width: 100%; height: 100vh; z-index: 1; } .member { text-align: center; /*text-transform: capitalize;*/ position: absolute; width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; } .member h3, .member h4 { margin-bottom: 0.25rem; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .member h3 { font-size: 50%; font-weight: 500; } .member h4 { font-size: 40%; font-weight: 300; } .member img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border-radius: 100%; width: 70%; height: 70%; margin-bottom: 0.5rem !important; } .modal-team-member { background-color: rgba(186, 211, 229, 0.2470588235); } .modal-team-member .modal-content { margin: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; align-content: center; background-color: rgb(255, 255, 255); border-radius: 0; border: none; } .modal-team-member .modal-body { padding: 30px; display: flex; flex-direction: column; align-items: center; } .modal-team-member img { border-radius: 50%; width: 100px; height: 100px; border: 2px solid #5aaae9; flex-shrink: 0; } .modal-team-member h3 { color: #5aaae9; margin-top: 0.75rem; margin-bottom: 0.15rem; font-size: 18px; } .modal-team-member h4 { font-size: 1rem; margin-bottom: 2rem; } .modal-team-member h5 { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-weight: bold; margin-right: auto; } .modal-team-member h5, .modal-team-member p { color: #1f3152; } .modal-team-member p { max-width: 35ch; margin-bottom: 0; } .about-prolooper { padding-top: 5rem; padding-bottom: 5rem; } .about-prolooper h3 { color: #1f3152; font-size: 40px; font-weight: 800; margin-bottom: 1.5rem; } .about-prolooper p { opacity: 0.74; } section.page-course::after { background-image: url(../images/bg-virus-2.png); } .course-sessions { padding: 1rem 0 5rem 0; } .course-sessions h3 { color: #1f3152; font-size: 18px; margin-bottom: 20px; font-weight: 400; } .course-sessions .accordion { padding: 1.5rem; background-color: #e9f2f7; margin: 30px 0; } .course-sessions .accordion-item { background-color: transparent; border: none; margin-top: 1rem; } .course-sessions .accordion-item button { font-size: 16px; font-weight: 400; padding: 18px 14px; box-shadow: none; background-color: #d9e8f1; } .course-sessions .accordion-item button:not(.collapsed) { background-color: #b0d6ee; } .course-sessions .accordion-body { display: flex; flex-direction: column; row-gap: 15px; padding: 0 0 0 1.5rem; } .course-sessions .accordion-body .session-link { padding: 18px 14px; display: flex; align-items: center; background-color: #d9e8f1; transition: all 0.5s ease-in-out; cursor: pointer; } .course-sessions .accordion-body .session-link:hover { background-color: #b0d6ee; } .course-sessions .accordion-body .session-link::after { content: none; } .course-sessions .accordion-body .session-link .session-number { padding: 8px 12px; margin-right: 15px; background-color: #1f3152; color: #fff; } .course-sessions .accordion-body .session-link .session-title { font-size: 16px; } .course-sessions .accordion-body .session-link .session-time { font-size: 14px; } .course-sessions .accordion-body .session-link .session-state { width: 18px; height: 15px; background: url(../images/icons/eye-primary-color.svg) no-repeat; background-size: cover; } .course-sessions .accordion-body .session-link .line { display: inline-block; width: 2px; height: 25px; margin: 0 10px; background-color: rgba(31, 49, 82, 0.4392156863); } .course-sessions .accordion-body .session-link.locked { cursor: default; } .course-sessions .accordion-body .session-link.locked:hover { background-color: #d9e8f1; } .course-sessions .accordion-body .session-link.locked .session-state { width: 17px; height: 21px; background-image: url(../images/icons/lock-icon.svg); } .course-sessions .accordion-body .session-link.locked .session-number { background-color: #fff; color: #cdcdcd; } .course-sessions .accordion-body .accordion-item .accordion-body { padding-left: 0; } .course-sessions .accordion-body video { margin-top: 1rem; } .course-sessions .accordion .accordion { padding: 0; margin: 0; } @media screen and (max-width: 625px) { .course-sessions .accordion { padding: 1rem; } } .course-sessions .course-info { margin: 30px 0; } .course-sessions .course-info .row { row-gap: 0.75rem; } .course-sessions .course-info .row .col-6:nth-child(odd) { padding-right: 0.375rem; } .course-sessions .course-info .row .col-6:nth-child(even) { padding-left: 0.375rem; } .course-sessions .course-info-item { background: #bad3e5; padding: 10px 15px; display: flex; align-items: center; } .course-sessions .course-info-item img { padding-right: 12px; width: 33px; } .course-sessions .course-info .teacher-info { margin: 30px 0; padding: 20px; background: #e9f2f7; } .course-sessions .course-info .teacher-info h3 { font-size: 16px; font-weight: bold; margin-bottom: 10px; } .course-sessions .course-info .teacher-info span { font-size: 12px; } .course-sessions .course-info .teacher-info .teacher-image { width: 69px; height: 69px; } .course-sessions textarea { width: 100%; padding: 15px; background-color: #e9f2f7; } .star-rating { display: flex; margin-left: auto; align-items: center; } .star-rating button { color: #6dcec0; fill: #69cabe; width: 12px; padding: 5px; margin: 0; cursor: pointer; } .star-rating button:focus { outline: none; box-shadow: none; } section.page-single-research { position: relative; } section.page-single-research::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; z-index: -1; background: url(../images/biotechnology.png) no-repeat; background-size: cover; } section.page-single-research article { padding: 150px 0 200px 0; } section.page-single-research article .backdrop-blur { padding: 35px 35px; } section.page-single-research article h1 { max-width: 20ch; font-size: 54px; line-height: 79px; font-weight: 700; color: #fff; } section.page-single-research article p { margin-top: 1em; font-size: 14px; max-width: 80ch; opacity: 0.74; color: #fff; } section.page-single-research .open-sidebar-btn svg path { fill: #fff; } @media only screen and (max-width: 767px) { section.page-single-research article { padding: 50px 0 100px 0; } } .main-timeline { position: relative; } .main-timeline::after { position: absolute; top: 73px; right: 0; bottom: 0; left: 0; content: ""; display: block; width: 2px; height: 100%; background: #4372a4; margin: 0 auto; } .main-timeline .timeline { margin-bottom: 40px; position: relative; display: flex; flex-wrap: wrap; align-items: center; } .main-timeline .timeline .icon { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 50px; height: 50px; margin: auto; border: 1px solid #69cabe; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 50%; z-index: 1; transition: all 0.5s ease-in-out; } .main-timeline .timeline .icon::after, .main-timeline .timeline .icon::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; margin: auto; border-radius: 50%; transition: all 0.33s ease-out 0s; filter: blur(3px); } .main-timeline .timeline .icon::after { width: 50%; height: 50%; background: #69cabe; } .main-timeline .timeline .icon::before { width: 25%; height: 25%; background: #fff; z-index: 1; } .main-timeline .timeline:nth-child(3n) .icon { border: 1px solid #5aaae9; } .main-timeline .timeline:nth-child(3n) .icon::after { background: #5aaae9; } .view-unigroups .timeline:last-child { margin-bottom:0; } .main-timeline .timeline .timeline-content { width: 50%; padding: 20px; display: flex; flex-direction: column; text-align: center; align-items: center; } .main-timeline .timeline .timeline-content .title { font-size: 19px; font-weight: 700; line-height: 24px; margin: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .main-timeline .timeline .timeline-content .title .titleLine { margin: 10px 0; } .main-timeline .timeline .timeline-content .description { width: 53ch; max-width: 100%; } .main-timeline .timeline .timeline-content a { margin: 0.5rem 0; font-size: 18px; color: #5aaae9; } .main-timeline .timeline .timeline-content span { font-size: 18px; } .main-timeline .timeline .timeline-image { position: relative; width: 50%; padding: 20px 100px 20px 0; transition: all 0.5s ease-in-out; display: flex; flex-direction: column; align-items: flex-end; } .main-timeline .timeline .timeline-image-outer { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .main-timeline .timeline .timeline-image-outer img { position: relative; height: 250px; transition: all 0.5s ease-in-out; z-index: 2; } .main-timeline .timeline .timeline-image-outer::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; width: 100%; height: 100%; margin: auto 0; transition: all 0.5s ease-in-out; background-color: #bad3e5; z-index: 1; transform: translate(-20px, -20px); } .main-timeline .timeline:nth-child(odd) .timeline-image { order: 2; align-items: flex-start; padding: 20px 0 20px 120px; } .main-timeline .timeline:hover .timeline-image-outer img { transform: translateX(-10px); } .main-timeline .timeline:hover .timeline-image-outer::after { transform: translate(10px, -20px); } .main-timeline .timeline .special-user { display: flex; } .main-timeline .timeline .special-user .card { background: transparent; border: none; } .main-timeline .timeline .special-user .card-body { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .main-timeline .timeline .special-user .card img { height: auto; } .main-timeline .timeline .special-user::after { z-index: -1; height: 90%; width: 85%; top: auto; left: auto; transform: translate(0, 0); } .main-timeline .timeline:hover .special-user::after { transform: translate(0, 0); } .main-timeline .timeline:hover .special-user img { transform: translateX(0); } .main-timeline .timeline-title { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; border-bottom: 2px solid #4372a4; background: #fff; margin: 0 auto 2rem auto; position: relative; z-index: 1; padding: 2rem 15px 5px 15px; } .main-timeline .timeline-end { display: block; width: 200px; height: 0; border-bottom: 2px solid #4372a4; margin: 0 auto 2rem auto; } @media only screen and (max-width: 767px) { .main-timeline::after { margin: 0; left: 19px; } .main-timeline .timeline-title { margin: 1rem auto 2rem 19px; } .main-timeline .timeline-end { margin-left: 19px; } .main-timeline .timeline .icon { width: 40px; height: 40px; right: auto; left: 0; margin: auto 0; } .main-timeline .timeline .timeline-content, .main-timeline .timeline:nth-child(odd) .timeline-content { width: 100%; padding: 20px 0 0 40px; } .main-timeline .timeline .timeline-image, .main-timeline .timeline:nth-child(odd) .timeline-image { width: 100%; padding: 20px 0 0 40px !important; align-items: center !important; } .main-timeline .timeline:nth-child(odd) .timeline-image { order: unset; } .main-timeline .timeline .special-user::after { height: 50%; width: 100%; } } .single-service { position: relative; } .single-service h3 { width: 30ch; font-weight: bold; line-height: 27px; margin-bottom: 1rem; font-size: 20px; } .single-service-one { position: relative; z-index: 2; margin: 25px auto 75px auto; } .single-service-one img { width: 400px; height: 400px; border-radius: 100%; } .single-service-two { z-index: 2; position: relative; color: #fff; padding-bottom: 150px; } .single-service-two > div { padding: 35px 25px; background: #1f3152; } .single-service-two p { font-size: 14px; } .single-service-two .image-service { height: 385px; } .single-service-two .image-service-contianer { position: absolute; top: 0; right: auto; bottom: 0; left: 0; width: 470px; height: 385px; transform: translate(-15%, 20%); } .single-service-two .image-service-contianer img { border-radius: 100%; border: 3px solid #cfcfcf; width: 100%; height: 100%; } .single-service-two .image-service-contianer-inner { position: relative; width: 100%; height: 100%; } .single-service-two .image-service-contianer .image-one { position: absolute; top: 0; right: auto; bottom: auto; left: 0; width: 250px; height: 250px; } .single-service-two .image-service-contianer .image-two { position: absolute; top: auto; right: auto; bottom: 0; left: 50%; width: 182px; height: 182px; } .single-service-two .image-service-contianer .image-three { position: absolute; top: 0; right: 0; bottom: auto; left: auto; width: 170px; height: 170px; } @media screen and (max-width: 991px) { .single-service-two-two { margin-top: 500px; } .single-service-two .image-service-contianer { transform: unset; position: absolute; top: 0; right: 0; bottom: auto; left: auto; } } @media screen and (max-width: 767px) { .single-service-two .image-service-contianer { width: 95%; height: 95%; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: unset; } .single-service-two .image-service-contianer .image-one { width: 45vw; height: 45vw; left: 0; } .single-service-two .image-service-contianer .image-two { width: 35vw; height: 35vw; } .single-service-two .image-service-contianer .image-three { width: 28vw; height: 28vw; } } .page-research-group { background-image: url(../images/bg-stars.png); background-size: cover; } .page-research-group .page-services { margin-bottom: 0; } .page-research-group .page-services .sphere { margin: 5.5rem auto !important; } .page-research-group .page-services .groups-title { transition: all 1s ease-in-out; } .page-research-group .page-services .groups-title p { font-size: 14px; max-width: 90ch; margin: auto; } .page-research-group .page-services .groups-title h1 { font-size: 36px; } .page-research-group .services-container { flex-direction: column; align-items: center; } .page-research-group .services-container .circle-items { position: relative; margin: 0 auto; border-radius: 100%; background: transparent; display: flex; flex-direction: column; row-gap: 3rem; align-items: center; } .page-research-group .services-container .circle-items h2 { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; font-size: 24px; color: #fff; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; transition: all 1s ease-in-out; } .page-research-group .services-container .icon { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; display: flex; align-items: center; flex-direction: column; width: 85px; height: 120px; cursor: pointer; } .page-research-group .services-container .icon h3 { color: rgba(255, 255, 255, 0.74); font-size: 18px; width: -webkit-max-content; width: -moz-max-content; width: max-content; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-bottom: 0; margin-top: 8px; } .page-research-group .services-container .icon .blue-circle { background: rgb(9, 23, 77); background: linear-gradient(0deg, rgb(9, 23, 77) 0%, rgb(0, 202, 255) 100%); border-radius: 50%; padding: 1rem; } .page-research-group .services-container .icon .blue-circle img { width: 50px; height: 50px; z-index: 2; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .page-research-group .services-container .icon:hover img { -webkit-animation: tada 3s 1 forwards ease-in-out; animation: tada 3s 1 forwards ease-in-out; } .page-research-group .services-container .three-circles { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 700px; height: 650px; transform: translateX(-50%); border-radius: 50%; z-index: -1; opacity: 0; } .page-research-group .services-container .three-circles .icon { width: 100px; height: 135px; } .page-research-group .services-container .three-circles .icon img { width: 70px; height: 70px; } .page-research-group .services-container .three-circles .icon h3 { max-width: 24ch; text-align: center; } .page-research-group .services-container .three-circles .icon:nth-child(1) { top: 0; bottom: auto; left: auto; right: 0; transform: translate(-100px, -50%); } .page-research-group .services-container .three-circles .icon:nth-child(2) { top: 50%; bottom: 50%; right: 0; left: auto; margin: auto 0; transform: translate(50%, 0%); } .page-research-group .services-container .three-circles .icon:nth-child(2) h3 { color: #fff; } .page-research-group .services-container .three-circles .icon:nth-child(3) { top: auto; bottom: 0; left: auto; right: 0; transform: translate(-100px, 0); } .page-research-group .services-container .services-options-active ~ .circle-items { display: none; } .page-research-group .researches-links { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgb(24, 115, 142); background: linear-gradient(339deg, rgb(24, 115, 142) 0%, rgb(15, 54, 85) 48%, rgb(10, 39, 71) 100%); padding: 0 1rem; transition: all 1s ease-in-out; height: 0; overflow: hidden; } .page-research-group .researches-links > h2 { font-size: 18px; color: #bad3e5; margin: 0; padding: 15px 0 0 0; } .page-research-group .researches-links > .nano { margin-top: 1rem; max-height: 555px; } .page-research-group .researches-links a { display: flex; width: 100%; justify-content: space-between; border-bottom: 1px solid #fff; margin-bottom: 1rem; } .page-research-group .researches-links a h3 { color: #fff; font-size: 16px; } .page-research-group .researches-links a svg { width: 20px; } .page-research-group .subServiceTitle { color: #fff; } @media (min-width: 768px) { .page-research-group .services-container { height: 800px; } .page-research-group .services-container .circle-items { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 700px; height: 650px; } .page-research-group .services-container .icon { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .page-research-group .services-container .icon:nth-child(1) { top: 5%; left: 0; transform: translate(-50%, 0%); } .page-research-group .services-container .icon:nth-child(2) { top: 50%; bottom: 50%; left: 0; margin: auto 0; transform: translate(-50%, 0%); } .page-research-group .services-container .icon:nth-child(3) { top: 70%; left: 15%; right: auto; transform: translate(-50%, 25%); } .page-research-group .services-container .icon:nth-child(4) { top: auto; left: 50%; transform: translate(-50%, 50%); } .page-research-group .services-container .icon:nth-child(5) { top: 70%; right: 15%; left: auto; transform: translate(50%, 25%); } .page-research-group .services-container .icon:nth-child(6) { top: 50%; bottom: 50%; right: 0; left: auto; margin: auto 0; transform: translate(50%, 0%); } .page-research-group .services-container .icon:nth-child(7) { top: 5%; right: 0; left: auto; transform: translate(50%, 0%); } .page-research-group .services-container .services-options-active ~ .circle-items { display: flex; } } .page-ticket h2 { font-size: 20px; font-family: "Roboto-Bold", sans-serif; margin-bottom: 0; } .page-ticket .button-make-ticket { font-size: 14px; color: #fff; background-color: #5aaae9; padding: 8px 20px; } .page-ticket .button-make-ticket:hover { background-color: #4372a4; } .page-ticket .button-make-ticket img { margin-left: 10px; width: 17px; height: 20px; } .page-ticket .chat-content, .page-ticket .user-ticket-list, .page-ticket .tab-content form { height: 80vh; } .page-ticket .user-ticket-list { display: flex; flex-direction: column; row-gap: 1rem; overflow: auto; padding: 0 10px; } .page-ticket .user-ticket-card { display: flex; align-items: center; background-color: #bad3e5; padding: 10px 15px; cursor: pointer; transition: all 0.35s ease-in-out; } .page-ticket .user-ticket-card:hover { background-color: rgba(0, 121, 250, 0.337254902); } .page-ticket .user-ticket-card img { max-width: 50px; max-height: 50px; } .page-ticket .user-ticket-card h3, .page-ticket .user-ticket-card span { font-size: 14px; margin-bottom: 0; } .page-ticket .user-ticket-card h3 { font-weight: bold; } @media screen and (min-width: 768px) and (max-width: 991px) { .page-ticket .user-ticket-card { padding: 5px; } } .page-ticket .button-make-ticket.active, .page-ticket .user-ticket-card.active { background-color: #3390ec; color: #fff; } .page-ticket .tab-content form { padding: 0 3rem; } .page-ticket .chat-content-date { height: 4%; font-size: 14px; color: #1f3152; border-bottom: 1px solid #5aaae9; align-self: center; display: block; margin: 0 auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .page-ticket .chat-content .send-message { font-size: 14px; height: 10%; padding: 15px; border: 1px solid #bad3e5; width: 95%; margin: 0 auto; display: flex; align-items: center; } .page-ticket .chat-content .send-message input { width: 100%; } .page-ticket .chat-content .send-message input::-moz-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: rgb(99, 99, 99); opacity: 1; /* Firefox */ } .page-ticket .chat-content .send-message input:-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: rgb(99, 99, 99); opacity: 1; /* Firefox */ } .page-ticket .chat-content .send-message input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: rgb(99, 99, 99); opacity: 1; /* Firefox */ } .page-ticket .chat-content .send-message input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: rgb(99, 99, 99); } .page-ticket .chat-content .send-message input::-ms-input-placeholder { /* Microsoft Edge */ color: rgb(99, 99, 99); } .page-ticket .chat-content-messages { height: 81%; overflow: auto; padding: 10px; margin: 15px 0; } .page-ticket .chat-content-messages li { display: flex; align-items: center; padding-bottom: 1rem; } .page-ticket .chat-content-messages li > div { border: 1px solid #bad3e5; padding: 3px 10px; } .page-ticket .chat-content-messages li > div span { font-size: 10px; opacity: 0.74; color: #1f3152; } .page-ticket .chat-content-messages li > div span.userName { font-size: 12px; } .page-ticket .chat-content-messages li img { width: 50px; height: 50px; border-radius: 50%; margin-right: 1rem; } .page-ticket .chat-content-messages li p { max-width: 50ch; margin-bottom: 0; opacity: 0.74; } .page-ticket .chat-content-messages li.reply { justify-content: flex-end; } .page-ticket .chat-content-messages li.reply > div { background-color: rgba(186, 211, 229, 0.36); border: 1px solid rgba(186, 211, 229, 0.36); } .page-ticket .chat-content-messages li.reply img { order: 1; margin-right: 0; margin-left: 1rem; } .sign-in { color: #fff; background-image: url(../images/bg-stars-2.png); background-size: cover; } .sign-in-container { display: flex; align-items: center; } .sign-in-container .signBx { position: relative; height: 100vh; } .sign-in-container .signBx .user { position: absolute; top: 3rem; right: 0; bottom: 0; left: 0; margin: 0 auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; display: flex; justify-content: center; align-items: center; } .sign-in-container .signBx .user .formBx { position: relative; background: #1f3152; display: flex; justify-content: center; align-items: center; padding: 30px; transition: 0.5s; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .sign-in-container .signBx .user .formBx form { display: grid; } .sign-in-container .signBx .user .formBx form h2 { font-size: 40px; font-weight: 500; /*text-transform: capitalize;*/ letter-spacing: 2px; text-align: center; width: 100%; margin-bottom: 20px; } .sign-in-container .signBx .user .formBx form > input { position: relative; width: 100%; padding: 15px; background: rgba(255, 255, 255, 0.15); border: none; outline: none; box-shadow: none; margin: 8px 0; font-size: 14px; letter-spacing: 1px; font-weight: 300; transition: all 0.35s ease-in-out; } .sign-in-container .signBx .user .formBx form > input:focus { background: rgba(255, 255, 255, 0.3); } .sign-in-container .signBx .user .formBx form > input:focus::-moz-placeholder { opacity: 0.75; } .sign-in-container .signBx .user .formBx form > input:focus:-ms-input-placeholder { opacity: 0.75; } .sign-in-container .signBx .user .formBx form > input:focus::placeholder { opacity: 0.75; } .sign-in-container .signBx .user .formBx form > input::-moz-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff; opacity: 0.5; /* Firefox */ } .sign-in-container .signBx .user .formBx form > input:-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff; opacity: 0.5; /* Firefox */ } .sign-in-container .signBx .user .formBx form > input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff; opacity: 0.5; /* Firefox */ } .sign-in-container .signBx .user .formBx form > input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff; opacity: 0.5; } .sign-in-container .signBx .user .formBx form > input::-ms-input-placeholder { /* Microsoft Edge */ color: #fff; opacity: 0.5; } .sign-in-container .signBx .user .formBx form > input:focus:-ms-input-placeholder { opacity: 0.75; } .sign-in-container .signBx .user .formBx form > input:focus::-ms-input-placeholder { opacity: 0.75; } .sign-in-container .signBx .user .formBx form button[type=submit] { background: rgba(90, 170, 233, 0.33); color: #fff; cursor: pointer; text-align: center; font-size: 14px; font-weight: 500; letter-spacing: 1px; transition: 0.5s; padding: 10px 20px; transition: all 0.3s ease-in-out; } .sign-in-container .signBx .user .formBx form button[type=submit]:hover { background: rgba(90, 170, 233, 0.66); } @media screen and (max-width: 400px) { .sign-in-container .signBx .user .formBx form button[type=submit] { width: 100%; justify-content: center; margin-top: 1rem; } } .sign-in-container .signBx .user .formBx form .signup { margin: 0 auto 0 0; font-size: 12px; } .sign-in-container .signBx .user .formBx .form-check label { font-size: 14px; } .sign-in-container .signBx .user .formBx a { color: #fff; font-size: 14px; } .sign-in-container .signBx .user .formBx a img { width: 32px; height: 32px; } .sign-in-container .signBx .user .formBx form .signup a { padding-bottom: 3px; border-bottom: 1px solid #5aaae9; } @media screen and (min-width: 768px) { .sign-in-container .signBx .user { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } } .sign-in-container .signBx .dividing-line { height: 1px; background-color: #707070; margin: 25px 0; position: relative; } .sign-in-container .signBx .dividing-line::after { content: "or"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-color: #1f3152; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 0 8px; } .sign-in-container .signBx .sign-in-with { background-color: rgba(186, 211, 229, 0.15); padding: 15px; display: flex; align-items: center; gap: 10px; } @media screen and (max-width: 767px) { .sign-in-container .signBx .sign-in-with { width: 100%; justify-content: center; } } .sign-in-container .signBx .signupBx { pointer-events: none; } .sign-in-container .signBx .signupBx .formBx { right: -110%; opacity: 0; } .sign-in-container .signBx .signinBx .formBx { right: 4%; opacity: 1; } .sign-in-container .signBx.active .signupBx { pointer-events: initial; } .sign-in-container .signBx.active .signupBx .formBx { right: 0; opacity: 1; } .sign-in-container .signBx.active .signinBx .formBx { right: -110%; opacity: 0; } .atom { width: 150px; height: 400px; position: relative; } .atom__el { width: 100%; height: 100%; border: 2px solid #082735; border-radius: 50%; position: absolute; will-change: box-shadow; -webkit-animation: shadow 2.5s ease-in-out infinite; animation: shadow 2.5s ease-in-out infinite; } @-webkit-keyframes shadow { 0%, 100% { box-shadow: -2px 0px #15688e inset, -1px 0px #000 inset, 2px 0px #2aa7df; } 25% { box-shadow: 0px 2px #15688e inset, 0px 1px #000 inset, 0px -2px #2aa7df; } 50% { box-shadow: 2px 0px #15688e inset, 1px 0px #000 inset, -2px 0px #2aa7df; } 75% { box-shadow: 0px -2px #15688e inset, 0px -1px #000 inset, 0px 2px #2aa7df; } } @keyframes shadow { 0%, 100% { box-shadow: -2px 0px #15688e inset, -1px 0px #000 inset, 2px 0px #2aa7df; } 25% { box-shadow: 0px 2px #15688e inset, 0px 1px #000 inset, 0px -2px #2aa7df; } 50% { box-shadow: 2px 0px #15688e inset, 1px 0px #000 inset, -2px 0px #2aa7df; } 75% { box-shadow: 0px -2px #15688e inset, 0px -1px #000 inset, 0px 2px #2aa7df; } } .atom__el:nth-child(1) { transform: rotate(-55deg); } .atom__el:nth-child(2) { transform: rotate(180deg); } .atom__el:nth-child(2) .atom__dot { animation-drection: reverse; } .atom__el:nth-child(2)::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/logo.svg) no-repeat center; background-size: contain; width: 150px; height: 150px; margin: auto; transform: inherit; z-index: 10; } .atom__el:nth-child(3) { transform: rotate(235deg) rotateY(180deg); animation-direction: reverse; } .atom__el:nth-child(3) .atom__dot { animation-direction: reverse; } .atom__dot { width: 12px; height: 12px; border-radius: inherit; background: #fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; -webkit-animation: around 2.5s infinite; animation: around 2.5s infinite; box-shadow: 0px 0px 50px 15px #000; filter: blur(3px); } @-webkit-keyframes around { 0% { transform: translateX(72.5px) translateY(0px); } 1% { transform: translateX(72.356937811px) translateY(-12.3226394576px); } 2% { transform: translateX(71.9283158453px) translateY(-24.596647087px); } 3% { transform: translateX(71.2158256778px) translateY(-36.7735829875px); } 4% { transform: translateX(70.2222791818px) translateY(-48.8053903561px); } 5% { transform: translateX(68.9515974314px) translateY(-60.6445851461px); } 6% { transform: translateX(67.4087952269px) translateY(-72.2444434644px); } 7% { transform: translateX(65.5999613038px) translateY(-83.5591859697px); } 8% { transform: translateX(63.5322343032px) translateY(-94.5441585425px); } 9% { transform: translateX(61.2137745989px) translateY(-105.1560085146px); } 10% { transform: translateX(58.6537320922px) translateY(-115.3528557624px); } 11% { transform: translateX(55.8622101012px) translateY(-125.0944579882px); } 12% { transform: translateX(52.850225488px) translateY(-134.3423695385px); } 13% { transform: translateX(49.6296651798px) translateY(-143.0600931315px); } 14% { transform: translateX(46.2132392568px) translateY(-151.2132238948px); } 15% { transform: translateX(42.6144307912px) translateY(-158.7695851461px); } 16% { transform: translateX(38.847442636px) translateY(-165.6993553798px); } 17% { transform: translateX(34.9271413724px) translateY(-171.9751859586px); } 18% { transform: translateX(30.8689986385px) translateY(-177.5723090465px); } 19% { transform: translateX(26.6890300696px) translateY(-182.4686353556px); } 20% { transform: translateX(22.4037320922px) translateY(-186.6448413229px); } 21% { transform: translateX(18.0300168194px) translateY(-190.0844453715px); } 22% { transform: translateX(13.5851453075px) translateY(-192.7738729555px); } 23% { transform: translateX(9.0866594334px) translateY(-194.702510133px); } 24% { transform: translateX(4.5523126659px) translateY(-195.862745454px); } 25% { transform: translateX(0px) translateY(-196.25px); } 26% { transform: translateX(-4.5523126659px) translateY(-195.862745454px); } 27% { transform: translateX(-9.0866594334px) translateY(-194.702510133px); } 28% { transform: translateX(-13.5851453075px) translateY(-192.7738729555px); } 29% { transform: translateX(-18.0300168195px) translateY(-190.0844453715px); } 30% { transform: translateX(-22.4037320922px) translateY(-186.6448413229px); } 31% { transform: translateX(-26.6890300696px) translateY(-182.4686353556px); } 32% { transform: translateX(-30.8689986385px) translateY(-177.5723090464px); } 33% { transform: translateX(-34.9271413724px) translateY(-171.9751859586px); } 34% { transform: translateX(-38.847442636px) translateY(-165.6993553798px); } 35% { transform: translateX(-42.6144307912px) translateY(-158.7695851461px); } 36% { transform: translateX(-46.2132392568px) translateY(-151.2132238947px); } 37% { transform: translateX(-49.6296651798px) translateY(-143.0600931314px); } 38% { transform: translateX(-52.850225488px) translateY(-134.3423695385px); } 39% { transform: translateX(-55.8622101012px) translateY(-125.0944579882px); } 40% { transform: translateX(-58.6537320921px) translateY(-115.3528557624px); } 41% { transform: translateX(-61.2137745988px) translateY(-105.1560085146px); } 42% { transform: translateX(-63.5322343031px) translateY(-94.5441585425px); } 43% { transform: translateX(-65.5999613036px) translateY(-83.5591859697px); } 44% { transform: translateX(-67.4087952266px) translateY(-72.2444434644px); } 45% { transform: translateX(-68.9515974309px) translateY(-60.6445851462px); } 46% { transform: translateX(-70.222279181px) translateY(-48.8053903564px); } 47% { transform: translateX(-71.2158256764px) translateY(-36.7735829879px); } 48% { transform: translateX(-71.9283158431px) translateY(-24.5966470878px); } 49% { transform: translateX(-72.3569378075px) translateY(-12.3226394589px); } 50% { transform: translateX(-72.4999999945px) translateY(-0.000000002px); } 51% { transform: translateX(-72.3569378026px) translateY(12.3226394545px); } 52% { transform: translateX(-71.9283158323px) translateY(24.596647082px); } 53% { transform: translateX(-71.2158256581px) translateY(36.7735829797px); } 54% { transform: translateX(-70.2222791521px) translateY(48.8053903443px); } 55% { transform: translateX(-68.9515973869px) translateY(60.644585128px); } 56% { transform: translateX(-67.4087951608px) translateY(72.244443437px); } 57% { transform: translateX(-65.5999612063px) translateY(83.5591859285px); } 58% { transform: translateX(-63.5322341604px) translateY(94.5441584812px); } 59% { transform: translateX(-61.2137743911px) translateY(105.1560084238px); } 60% { transform: translateX(-58.6537317917px) translateY(115.3528556289px); } 61% { transform: translateX(-55.8622096694px) translateY(125.094457793px); } 62% { transform: translateX(-52.850224871px) translateY(134.342369255px); } 63% { transform: translateX(-49.6296643032px) translateY(143.0600927222px); } 64% { transform: translateX(-46.2132380183px) translateY(151.2132233073px); } 65% { transform: translateX(-42.6144290508px) translateY(158.7695843076px); } 66% { transform: translateX(-38.8474402031px) translateY(165.6993541895px); } 67% { transform: translateX(-34.9271379887px) translateY(171.975184278px); } 68% { transform: translateX(-30.8689939554px) translateY(177.5723066855px); } 69% { transform: translateX(-26.6890236191px) translateY(182.4686320555px); } 70% { transform: translateX(-22.4037232481px) translateY(186.6448367324px); } 71% { transform: translateX(-18.0300047483px) translateY(190.0844390159px); } 72% { transform: translateX(-13.5851289035px) translateY(192.7738641963px); } 73% { transform: translateX(-9.0866372362px) translateY(194.7024981148px); } 74% { transform: translateX(-4.5522827537px) translateY(195.8627290356px); } 75% { transform: translateX(0.0000401465px) translateY(196.2499776645px); } 76% { transform: translateX(4.5523663373px) translateY(195.8627151933px); } 77% { transform: translateX(9.0867309124px) translateY(194.7024692984px); } 78% { transform: translateX(13.5852401485px) translateY(192.7738180663px); } 79% { transform: translateX(18.0301422023px) translateY(190.0843718697px); } 80% { transform: translateX(22.4038972667px) translateY(186.6447432603px); } 81% { transform: translateX(26.6892469148px) translateY(182.4685049961px); } 82% { transform: translateX(30.8692823612px) translateY(177.5721363616px); } 83% { transform: translateX(34.9275113811px) translateY(171.9749579901px); } 84% { transform: translateX(38.8479236272px) translateY(165.6990554357px); } 85% { transform: translateX(42.6150540991px) translateY(158.769191791px); } 86% { transform: translateX(46.214044524px) translateY(151.2127096835px); } 87% { transform: translateX(49.6307024213px) translateY(143.059423027px); } 88% { transform: translateX(52.8515576341px) translateY(134.3414989388px); } 89% { transform: translateX(55.8639161224px) translateY(125.0933302728px); } 90% { transform: translateX(58.655910831px) translateY(115.3513992499px); } 91% { transform: translateX(61.2165494572px) translateY(105.1541326971px); } 92% { transform: translateX(63.5357589623px) translateY(94.5417494383px); } 93% { transform: translateX(65.6044266904px) translateY(83.5561004005px); } 94% { transform: translateX(67.414437977px) translateY(72.240502024px); } 95% { transform: translateX(68.9587101522px) translateY(60.6395635813px); } 96% { transform: translateX(70.2312228684px) translateY(48.7990090245px); } 97% { transform: translateX(71.227044705px) translateY(36.7654939913px); } 98% { transform: translateX(71.9423560336px) translateY(24.5864186029px); } 99% { transform: translateX(72.3744681538px) translateY(12.3097366917px); } 100% { transform: translateX(72.521838743px) translateY(-0.016237912px); } } @keyframes around { 0% { transform: translateX(72.5px) translateY(0px); } 1% { transform: translateX(72.356937811px) translateY(-12.3226394576px); } 2% { transform: translateX(71.9283158453px) translateY(-24.596647087px); } 3% { transform: translateX(71.2158256778px) translateY(-36.7735829875px); } 4% { transform: translateX(70.2222791818px) translateY(-48.8053903561px); } 5% { transform: translateX(68.9515974314px) translateY(-60.6445851461px); } 6% { transform: translateX(67.4087952269px) translateY(-72.2444434644px); } 7% { transform: translateX(65.5999613038px) translateY(-83.5591859697px); } 8% { transform: translateX(63.5322343032px) translateY(-94.5441585425px); } 9% { transform: translateX(61.2137745989px) translateY(-105.1560085146px); } 10% { transform: translateX(58.6537320922px) translateY(-115.3528557624px); } 11% { transform: translateX(55.8622101012px) translateY(-125.0944579882px); } 12% { transform: translateX(52.850225488px) translateY(-134.3423695385px); } 13% { transform: translateX(49.6296651798px) translateY(-143.0600931315px); } 14% { transform: translateX(46.2132392568px) translateY(-151.2132238948px); } 15% { transform: translateX(42.6144307912px) translateY(-158.7695851461px); } 16% { transform: translateX(38.847442636px) translateY(-165.6993553798px); } 17% { transform: translateX(34.9271413724px) translateY(-171.9751859586px); } 18% { transform: translateX(30.8689986385px) translateY(-177.5723090465px); } 19% { transform: translateX(26.6890300696px) translateY(-182.4686353556px); } 20% { transform: translateX(22.4037320922px) translateY(-186.6448413229px); } 21% { transform: translateX(18.0300168194px) translateY(-190.0844453715px); } 22% { transform: translateX(13.5851453075px) translateY(-192.7738729555px); } 23% { transform: translateX(9.0866594334px) translateY(-194.702510133px); } 24% { transform: translateX(4.5523126659px) translateY(-195.862745454px); } 25% { transform: translateX(0px) translateY(-196.25px); } 26% { transform: translateX(-4.5523126659px) translateY(-195.862745454px); } 27% { transform: translateX(-9.0866594334px) translateY(-194.702510133px); } 28% { transform: translateX(-13.5851453075px) translateY(-192.7738729555px); } 29% { transform: translateX(-18.0300168195px) translateY(-190.0844453715px); } 30% { transform: translateX(-22.4037320922px) translateY(-186.6448413229px); } 31% { transform: translateX(-26.6890300696px) translateY(-182.4686353556px); } 32% { transform: translateX(-30.8689986385px) translateY(-177.5723090464px); } 33% { transform: translateX(-34.9271413724px) translateY(-171.9751859586px); } 34% { transform: translateX(-38.847442636px) translateY(-165.6993553798px); } 35% { transform: translateX(-42.6144307912px) translateY(-158.7695851461px); } 36% { transform: translateX(-46.2132392568px) translateY(-151.2132238947px); } 37% { transform: translateX(-49.6296651798px) translateY(-143.0600931314px); } 38% { transform: translateX(-52.850225488px) translateY(-134.3423695385px); } 39% { transform: translateX(-55.8622101012px) translateY(-125.0944579882px); } 40% { transform: translateX(-58.6537320921px) translateY(-115.3528557624px); } 41% { transform: translateX(-61.2137745988px) translateY(-105.1560085146px); } 42% { transform: translateX(-63.5322343031px) translateY(-94.5441585425px); } 43% { transform: translateX(-65.5999613036px) translateY(-83.5591859697px); } 44% { transform: translateX(-67.4087952266px) translateY(-72.2444434644px); } 45% { transform: translateX(-68.9515974309px) translateY(-60.6445851462px); } 46% { transform: translateX(-70.222279181px) translateY(-48.8053903564px); } 47% { transform: translateX(-71.2158256764px) translateY(-36.7735829879px); } 48% { transform: translateX(-71.9283158431px) translateY(-24.5966470878px); } 49% { transform: translateX(-72.3569378075px) translateY(-12.3226394589px); } 50% { transform: translateX(-72.4999999945px) translateY(-0.000000002px); } 51% { transform: translateX(-72.3569378026px) translateY(12.3226394545px); } 52% { transform: translateX(-71.9283158323px) translateY(24.596647082px); } 53% { transform: translateX(-71.2158256581px) translateY(36.7735829797px); } 54% { transform: translateX(-70.2222791521px) translateY(48.8053903443px); } 55% { transform: translateX(-68.9515973869px) translateY(60.644585128px); } 56% { transform: translateX(-67.4087951608px) translateY(72.244443437px); } 57% { transform: translateX(-65.5999612063px) translateY(83.5591859285px); } 58% { transform: translateX(-63.5322341604px) translateY(94.5441584812px); } 59% { transform: translateX(-61.2137743911px) translateY(105.1560084238px); } 60% { transform: translateX(-58.6537317917px) translateY(115.3528556289px); } 61% { transform: translateX(-55.8622096694px) translateY(125.094457793px); } 62% { transform: translateX(-52.850224871px) translateY(134.342369255px); } 63% { transform: translateX(-49.6296643032px) translateY(143.0600927222px); } 64% { transform: translateX(-46.2132380183px) translateY(151.2132233073px); } 65% { transform: translateX(-42.6144290508px) translateY(158.7695843076px); } 66% { transform: translateX(-38.8474402031px) translateY(165.6993541895px); } 67% { transform: translateX(-34.9271379887px) translateY(171.975184278px); } 68% { transform: translateX(-30.8689939554px) translateY(177.5723066855px); } 69% { transform: translateX(-26.6890236191px) translateY(182.4686320555px); } 70% { transform: translateX(-22.4037232481px) translateY(186.6448367324px); } 71% { transform: translateX(-18.0300047483px) translateY(190.0844390159px); } 72% { transform: translateX(-13.5851289035px) translateY(192.7738641963px); } 73% { transform: translateX(-9.0866372362px) translateY(194.7024981148px); } 74% { transform: translateX(-4.5522827537px) translateY(195.8627290356px); } 75% { transform: translateX(0.0000401465px) translateY(196.2499776645px); } 76% { transform: translateX(4.5523663373px) translateY(195.8627151933px); } 77% { transform: translateX(9.0867309124px) translateY(194.7024692984px); } 78% { transform: translateX(13.5852401485px) translateY(192.7738180663px); } 79% { transform: translateX(18.0301422023px) translateY(190.0843718697px); } 80% { transform: translateX(22.4038972667px) translateY(186.6447432603px); } 81% { transform: translateX(26.6892469148px) translateY(182.4685049961px); } 82% { transform: translateX(30.8692823612px) translateY(177.5721363616px); } 83% { transform: translateX(34.9275113811px) translateY(171.9749579901px); } 84% { transform: translateX(38.8479236272px) translateY(165.6990554357px); } 85% { transform: translateX(42.6150540991px) translateY(158.769191791px); } 86% { transform: translateX(46.214044524px) translateY(151.2127096835px); } 87% { transform: translateX(49.6307024213px) translateY(143.059423027px); } 88% { transform: translateX(52.8515576341px) translateY(134.3414989388px); } 89% { transform: translateX(55.8639161224px) translateY(125.0933302728px); } 90% { transform: translateX(58.655910831px) translateY(115.3513992499px); } 91% { transform: translateX(61.2165494572px) translateY(105.1541326971px); } 92% { transform: translateX(63.5357589623px) translateY(94.5417494383px); } 93% { transform: translateX(65.6044266904px) translateY(83.5561004005px); } 94% { transform: translateX(67.414437977px) translateY(72.240502024px); } 95% { transform: translateX(68.9587101522px) translateY(60.6395635813px); } 96% { transform: translateX(70.2312228684px) translateY(48.7990090245px); } 97% { transform: translateX(71.227044705px) translateY(36.7654939913px); } 98% { transform: translateX(71.9423560336px) translateY(24.5864186029px); } 99% { transform: translateX(72.3744681538px) translateY(12.3097366917px); } 100% { transform: translateX(72.521838743px) translateY(-0.016237912px); } } .multi-step-form { padding: 2rem 0; /*Hide all except first fieldset*/ /*Hide all Previous button in first question*/ } .multi-step-form .card { --bs-card-border-color: #bad3e5; margin: 0 auto; width: 90%; border-radius: 0; } .multi-step-form .card-header, .multi-step-form .card-footer { background-color: #fff; } .multi-step-form .card-header { display: flex; align-items: center; justify-content: space-between; } .multi-step-form .card-header h3, .multi-step-form .card-header span { font-size: 18px; margin: 0; color: #1f3152; padding: 0.5rem 0; } .multi-step-form .card-body h5 { font-size: 18px; font-weight: bold; margin-bottom: 8px 0 8px 0; } .multi-step-form .card-body h5, .multi-step-form .card-body p { color: #1f3152; font-size: 1rem; margin-bottom: 20px; } .multi-step-form .card-body h5 span, .multi-step-form .card-body p span { color: #74b72a; } .multi-step-form .card-body textarea { background-color: rgba(186, 211, 229, 0.24); padding: 15px; } .multi-step-form .card-footer { border: none; -moz-column-gap: 1rem; column-gap: 1rem; display: flex; justify-content: center; padding: 3rem 0; } .multi-step-form .card .exam-button { padding: 0.5rem 1rem; border: 1px solid #5aaae9; color: #5aaae9; font-size: 1rem; display: block; } .multi-step-form .card .exam-button svg { width: 20px; } .multi-step-form .card .exam-button:hover { background-color: #5aaae9; color: #fff; } .multi-step-form .card .exam-button.active { background-color: #5aaae9; color: #fff; margin: auto; } .multi-step-form .card:not(:first-of-type) { display: none; } .multi-step-form .card:first-of-type .exam-button.prev { border-color: #ccc; color: #ccc; } .multi-step-form .card:first-of-type .exam-button.prev:hover { background-color: unset; color: #ccc; } @media screen and (max-width: 575px) { .multi-step-form .card-footer .exam-button { font-size: 14px; padding: 10px; } } .label-container { display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-left: 35px; margin-bottom: 1rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; /* Hide the browser's default checkbox */ /* When the checkbox is checked, add a green background */ /* Show the checkmark when checked */ /* Create a custom checkbox */ /* On mouse-hover, add a grey background color */ } .label-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .label-container input:checked ~ .checkmark { background-color: #74b72a; } .label-container input:checked ~ .checkmark:after { display: block; } .label-container .checkmark { position: absolute; top: 0; left: 0; height: 22px; width: 22px; background-color: rgba(186, 211, 229, 0.2862745098); /* Create the checkmark/indicator (hidden when not checked) */ } .label-container .checkmark::after { content: ""; position: absolute; background: url(../images/icons/gren-checked.svg) no-repeat; background-size: cover; display: none; left: 0px; top: 0px; right: 0; margin: auto; width: 80%; height: 80%; } .label-container:hover input ~ .checkmark { background-color: rgba(186, 211, 229, 0.5411764706); } .drop-zone { height: 100%; padding: 25px; display: flex; align-items: center; justify-content: center; flex-direction: column; row-gap: 1rem; text-align: center; font-size: 14px; cursor: pointer; border: 2px dashed rgba(186, 211, 229, 0.24); } .drop-zone img { max-width: 50px; } .drop-zone-over { border-style: solid; } .drop-zone-input { display: none; } .drop-zone-thumb { width: 100%; height: 100%; overflow: hidden; background-color: #cccccc; background-size: cover; position: relative; } .drop-zone-thumb::after { content: attr(data-label); position: absolute; bottom: 0; left: 0; width: 100%; padding: 5px 0; color: #ffffff; background: rgba(0, 0, 0, 0.75); font-size: 14px; text-align: center; } .page-news aside .aside-card { padding: 15px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; background-color: #fff; } .page-news aside .aside-card h5 { font-size: 16px; margin-bottom: 0; } .page-news aside .form-control { padding: 0 0.75rem; color: #212529; background-color: #fafafa; border: 0; font-size: 14px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .page-news aside .input-group-text { background-color: #fafafa; border: 0; border-radius: 0; padding: 0.75rem; } .page-news aside .input-group-text svg { width: 22px; } .page-news aside #accordian ul li a { position: relative; display: flex; padding: 10px; font-size: 14px; } .page-news aside #accordian ul li a svg { height: 1rem; width: 1rem; } .page-news aside #accordian ul li ul li a:not([href$="javascript:void(0);"]) { color: #5aaae9; } .page-news aside #accordian ul li.active > a { color: #0066ff; } .page-news aside #accordian > ul > li.active > ul.show-dropdown, .page-news aside #accordian > ul > li > ul > li.active > ul.show-dropdown, .page-news aside #accordian > ul > li > ul > li > ul > li.active > ul.show-dropdown, .page-news aside #accordian > ul > li > ul > li > ul > li > ul > li.active > ul.show-dropdown { display: block; } .page-news aside #accordian > ul > li > ul, .page-news aside #accordian > ul > li > ul > li > ul, .page-news aside #accordian > ul > li > ul > li > ul > li > ul, .page-news aside #accordian > ul > li > ul > li > ul > li > ul > li > ul { padding-left: 1.25rem; } .page-news aside #accordian > ul > li > ul, .page-news aside #accordian > ul > li > ul > li > ul, .page-news aside #accordian > ul > li > ul > li > ul > li > ul, .page-news aside #accordian > ul > li > ul > li > ul > li > ul > li > ul { display: none; } .page-news aside .label-container { margin: 0.5rem 0 0.5rem 1rem; } .page-news aside .label-container input:checked ~ .checkmark { background-color: rgba(186, 211, 229, 0.2862745098); } .page-news aside .label-container input:checked ~ .checkmark::after { background-image: url(../images/icons/blue-chekced.svg); } .page-news aside .form-select { margin: 1rem 0; background-color: #fafafa; border: 0; font-size: 14px; padding: 10px; } .page-news .news-list .col-sm-6.col-lg-4 { padding: 0; } @media screen and (min-width: 576px) { .page-news .news-list .col-sm-6.col-lg-4:nth-child(even) { padding-left: 0.375rem; } .page-news .news-list .col-sm-6.col-lg-4:nth-child(odd) { padding-right: 0.375rem; } } @media screen and (min-width: 992px) { .page-news .news-list .col-sm-6.col-lg-4 { padding-right: 0 !important; padding-left: 0.75rem !important; } } .page-single-news h2.aside-title, .page-single-news h2.news-title { font-size: 18px; margin-bottom: 1rem; } .page-single-news h2.aside-title { font-family: "Roboto-Black", sans-serif; } .page-single-news h2.news-title { font-family: "Roboto-Bold", sans-serif; } .page-single-news .release-date-news { margin: 0 0 1rem auto; display: flex; gap: 1rem; } .page-single-news .release-date-news svg { width: 22px; padding-right: 5px; } .page-single-news .release-date-news span { font-family: "Roboto-Bold", sans-serif; font-size: 14px; } .page-single-news .news-comments h3 { color: #1f3152; font-size: 18px; margin-bottom: 20px; font-weight: 400; } .page-single-news .news-comments textarea { width: 100%; padding: 15px; background-color: #e9f2f7; } .page-single-news article p { margin-top: 1rem; font-size: 14px; } .page-single-news aside .col-lg-12 { padding: 0; } @media screen and (min-width: 576px) { .page-single-news aside .col-lg-12:nth-child(odd) { padding-right: 0.375rem; } .page-single-news aside .col-lg-12:nth-child(even) { padding-left: 0.375rem; } } @media screen and (min-width: 768px) { .page-single-news aside .col-lg-12:first-child { padding-right: 0.375rem; } .page-single-news aside .col-lg-12:nth-child(2n) { padding: 0 0.375rem; } .page-single-news aside .col-lg-12:nth-child(3n) { padding-left: 0.375rem; } } @media screen and (min-width: 992px) { .page-single-news aside .col-lg-12 { padding: 0; } } .page-contact .card { --bs-card-border-width: 0; --bs-card-cap-bg: #fff; --bs-card-inner-border-radius: 0; border-radius: 0; background-image: url(../images/map.png); background-size: cover; } .page-contact .card-img { border-radius: 0; } .page-contact .card .card-overlay form { width: 45%; max-width: 450px; position: relative; background-color: #edf6fa; color: #1f3152; padding: 25px; margin: 27px; } .page-contact .card .card-overlay form h3 { font-size: 20px; color: #1f3152; margin-bottom: 2rem; } .page-contact .card .card-overlay form .form-floating .form-control { padding-top: 0.75rem; padding-bottom: 0.75rem; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; border-color: #fff; box-shadow: none; } .page-contact .card .card-overlay form .form-floating .iti { display: block; } .page-contact .card .card-overlay form .form-floating label { position: absolute; top: 0; left: 5px; padding: 0.75rem; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; font-size: 14px; background-color: #fff; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; opacity: 1; } .page-contact .card .card-overlay form .form-floating .form-control:focus { border-color: #5aaae9; } .page-contact .card .card-overlay form .form-floating .form-control:focus ~ label { padding: 0 0.5rem; top: -2px; color: #5aaae9; } .page-contact .card .card-overlay form button { padding: 8px 0; text-align: center; background-color: #5aaae9; color: #fff; font-size: 14px; width: 100%; } .page-contact .card .card-overlay form button:hover { background-color: #0066ff; } .page-contact .card .overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(31, 49, 82, 0.29); } .page-contact .card-footer { background-color: #edf6fa; padding-top: 40px; padding-bottom: 30px; } .page-contact .card-footer img { max-width: 20px; } .page-contact .card-footer span { color: #1f3152; } @media screen and (max-width: 991px) { .page-contact .card .card-overlay form { width: 65%; } } @media screen and (max-width: 767px) { .page-contact .card .card-overlay form { width: auto; margin: 17px; padding: 15px; } } .page-uni-groups::after { background-image: url(../images/bg-virus-2.png); filter: none !important; } .uni-groups-list { padding: 2.5rem 0; color: #1f3152; position: relative; } .uni-groups-list > p { margin: 1rem auto 2.5rem auto; font-size: 18px; font-weight: bold; max-width: 65ch; padding: 0 1.5rem; text-align: center; } .uni-groups-list .uni-logo { align-self: stretch; padding-bottom: 1.5rem; } .uni-groups-list .uni-logo a { border: 1px solid #bad3e5; background-color: #f1f5f9; color: #1f3152; padding: 1rem; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; margin: auto; transition: all 0.35s ease-in-out; } .uni-groups-list .uni-logo h3 { font-size: 18px; font-weight: bold; max-width: 16ch; margin: 1rem 0; } .uni-groups-list .uni-logo p { font-size: 14px; max-width: 30ch; margin-bottom: 0; } .uni-groups-list .uni-logo img { max-width: 109px; max-height: 113; } .page-intro-uni-group { background: url(../images/bg-stars-2.png) no-repeat; background-size: cover; color: #fff; } .page-intro-uni-group .introduction-group { text-align: center; } .page-intro-uni-group .introduction-group h1 { font-size: 30px; font-weight: bold; } .page-intro-uni-group .introduction-group p { font-size: 14px; max-width: 88ch; margin: auto; } .page-intro-uni-group .introduction-group > div { height: 350px; } .page-intro-uni-group .introduction-group > div img { z-index: 1; transform: rotate(222deg) !important; } .page-intro-uni-group .services-group { z-index: 10; position: relative; background-color: #edf6fa; padding: 30px; color: #1f3152; } .page-intro-uni-group .services-group > p { font-weight: bold; color: rgba(31, 49, 82, 0.8); } .page-intro-uni-group .services-group .col-md-6 { margin-top: 1rem; } .page-intro-uni-group .services-group .col-md-6 img { max-width: 40px; max-height: 40px; } .page-intro-uni-group .services-group .col-md-6 h3 { font-size: 16px; font-weight: bold; color: #000; margin: 0 0 0 0.75rem; } .page-intro-uni-group .services-group .col-md-6 p { font-size: 14px; margin: 0; color: rgba(0, 0, 0, 0.74); } .page-intro-uni-group .results-group { margin: 5rem 0; } .page-intro-uni-group .results-group span { color: rgba(105, 202, 190, 0.8); margin-bottom: 5px; display: inline-block; font-size: 14px; } .page-intro-uni-group .results-group h3 { color: rgba(255, 255, 255, 0.8); font-size: 16px; font-weight: bold; margin-bottom: 15px; letter-spacing: 1px; } .page-intro-uni-group .results-group p { color: rgba(255, 255, 255, 0.5); margin-bottom: 40px; } .page-intro-uni-group .results-group img { max-height: 430px; margin: auto; } .page-intro-uni-group .results-group .blue-circle-filter ~ p { font-weight: 300; margin-bottom: 0; color: rgba(255, 255, 255, 0.74); } .page-intro-uni-group .results-group .blue-circle-filter { border: 1px solid #69cabe; } .page-intro-uni-group .results-group .blue-circle-filter::after { background-color: #69cabe; } @media screen and (min-width: 768px) { .page-intro-uni-group .col-md-6:nth-child(-n+2) { margin-top: 0; } }/*# sourceMappingURL=main.css.map */ @media only screen and (max-width: 600px) { section.services .sphere .circle-top-left .circle-content, section.services .sphere .circle-bottom-left .circle-content { right: -53px; top: -75px; } }