Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- :root {
- --primary-color: rgba(13, 110, 139, 0.75);
- --background-color: rgba(255, 255, 255, 0.8);
- --overlay-color: rgba(24, 39, 51, 0.85);
- --menu-speed: 0.75s;
- }
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- html {
- overflow-x: hidden;
- }
- body {
- font-family: "Roboto", sans-serif;
- line-height: 1.4;
- }
- .showcase-inner {
- max-width: 960px;
- margin: auto;
- overflow: hidden;
- padding: 0 3rem;
- }
- .showcase {
- background: var(--primary-color);
- color: #fff;
- height: 100vh;
- position: relative;
- }
- .showcase:before {
- content: "";
- background: url(./images/showcase-background.jpeg) no-repeat center
- center/cover;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: -1;
- }
- .showcase .showcase-inner {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- text-align: center;
- height: 100%;
- }
- .showcase h1 {
- font-size: 4rem;
- }
- .showcase p {
- font-size: 1.3rem;
- }
- .links-div .main-menu {
- font-family: Lato;
- font-style: normal;
- font-weight: bold;
- font-size: 14px;
- line-height: 17px;
- }
- .links-div .main-menu ul {
- list-style-type: none;
- display: flex;
- align-items: center;
- justify-content: center;
- text-transform: uppercase;
- padding-top: 10px;
- font-weight: 900;
- font-family: "Lato", sans-serif;
- }
- .menu-wrap .menu ul {
- text-transform: uppercase;
- }
- .nav-link,
- .nav-link:hover {
- color: #000;
- font-size: 15px;
- }
- .align-items-center {
- align-items: center !important;
- }
- h3 {
- font-weight: 800;
- }
- .row-padding {
- display: flex;
- flex-wrap: wrap;
- }
- .statistic {
- z-index: 1;
- width: 160px;
- }
- .spacing {
- margin-bottom: 100px;
- }
- .statistic-span {
- background-color: red;
- padding-left: 200px;
- color: white;
- }
- .statistics-bg {
- width: 100%;
- height: 100%;
- object-fit: contain;
- }
- .statistics-bg-color {
- animation: move-bg-color 5s linear infinite;
- }
- .container-fluid {
- margin: 0;
- padding: 0;
- }
- .statistic-background {
- position: absolute;
- text-align: center;
- z-index: -1;
- }
- .statistic-background img {
- position: absolute;
- top: 0%;
- left: 0%;
- z-index: -1;
- }
- .statistics-numbers {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-content: center;
- margin: 0 auto;
- }
- .statistic-heading {
- font-family: "Montserrat", sans-serif;
- font-size: 40px;
- color: #fff;
- margin-top: 30px;
- }
- .statistic-text {
- font-family: "Lato", sans-serif;
- font-weight: 800;
- font-size: 24px;
- color: #000;
- }
- .history-span {
- background: #e14437;
- padding-left: 200px;
- color: #fff;
- }
- .about-span {
- background: #e14437;
- padding-left: 200px;
- color: #fff;
- }
- .span-headings-about {
- text-transform: uppercase;
- color: #000;
- }
- .span-headings {
- text-transform: uppercase;
- color: #000;
- }
- .span-headings-history {
- text-transform: uppercase;
- color: #fff;
- }
- .history-heading {
- background-image: url(./images/background-image-history.svg);
- top: 0;
- bottom: 0;
- right: 0;
- left: 0;
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center;
- background-attachment: fixed;
- z-index: -1;
- }
- .history {
- min-height: 55px;
- }
- .history-row {
- display: flex;
- color: #fff;
- align-items: center;
- width: 50%;
- margin-left: auto;
- }
- .history-row-right {
- display: flex;
- color: #fff;
- flex-direction: row-reverse;
- align-items: center;
- width: 50%;
- margin-right: auto;
- margin-left: 35px;
- }
- .history .history-row .history-date::before {
- content: url(./parts/polygon.png);
- position: absolute;
- left: 50%;
- top: 50%;
- width: 123 px;
- height: 123 px;
- transform: translate(-50%, -50%);
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center;
- z-index: 0;
- }
- .history .history-row-right .history-date-right::before {
- content: url(./parts/polygon.png);
- position: absolute;
- left: 50%;
- top: 50%;
- width: 123 px;
- height: 123 px;
- transform: translate(-50%, -50%);
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center;
- z-index: 0;
- }
- .history-date {
- display: flex;
- flex-direction: column;
- justify-content: center;
- position: relative;
- align-items: center;
- margin-right: 70px;
- margin-left: -33px;
- }
- .history-date-right {
- display: flex;
- flex-direction: column;
- justify-content: center;
- position: relative;
- align-items: center;
- margin-right: 50px;
- margin-left: 70px;
- }
- .history-text {
- font-family: Lato, sans-serif;
- font-style: normal;
- font-weight: normal;
- font-size: 18px;
- line-height: 20px;
- color: #fff;
- }
- .history-text-right {
- font-family: Lato, sans-serif;
- font-style: normal;
- font-weight: normal;
- font-size: 18px;
- line-height: 20px;
- color: #fff;
- text-align: left;
- }
- .month {
- font-family: Lato;
- font-style: normal;
- font-weight: bold;
- font-size: 16px;
- line-height: 1;
- text-align: center;
- color: #fff;
- position: relative;
- z-index: 1;
- }
- .month-right {
- font-family: Lato;
- font-style: normal;
- font-weight: bold;
- font-size: 16px;
- line-height: 1;
- text-align: center;
- color: #fff;
- position: relative;
- z-index: 1;
- }
- .year {
- font-family: Montserrat;
- font-style: normal;
- font-weight: 800;
- font-size: 32px;
- line-height: 1;
- text-align: center;
- letter-spacing: -0.64px;
- color: #fff;
- position: relative;
- z-index: 1;
- }
- .year-right {
- font-family: Montserrat;
- font-style: normal;
- font-weight: 800;
- font-size: 32px;
- line-height: 1;
- text-align: center;
- letter-spacing: -0.64px;
- color: #fff;
- position: relative;
- z-index: 1;
- }
- .about-ideogen-container {
- position: relative;
- background-color: #f3f3f3;
- }
- .footer-top {
- background-color: #000;
- }
- .footer-title {
- font-family: "Montserrat", sans-serif;
- font-weight: 800;
- font-style: normal;
- font-size: 18px;
- line-height: 20px;
- }
- .footer-top ul {
- list-style-type: none;
- padding-left: 0;
- }
- .line-width-footer {
- width: 80%;
- }
- /* .company-history-section .right-side-title {
- position: absolute;
- right: 10%;
- bottom: -280%;
- writing-mode: vertical-rl;
- transform: rotate(180deg);
- }
- .company-history-section .left-side-title {
- position: absolute;
- left: 10%;
- bottom: -160%;
- writing-mode: vertical-rl;
- transform: rotate(180deg);
- }
- .side-title {
- font-family: Montserrat;
- font-style: normal;
- font-weight: normal;
- font-size: 56px;
- line-height: 40px;
- letter-spacing: -0.64px;
- color: #e5e5e5;
- opacity: 0.5;
- height: 100;
- width: 150;
- } */
- .section-overflow-hidden {
- overflow: hidden;
- }
- .margin-top {
- margin-top: 150px;
- }
- #main-header > .container {
- max-width: 2000px;
- }
- #main-header {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- display: flex;
- flex-direction: column;
- align-content: center;
- justify-content: space-between;
- padding: 20px 0;
- }
- .hero-about {
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- }
- .hero-main-title span {
- font-weight: 800;
- }
- .hero-about .objects {
- position: relative;
- }
- .hero-about .objects-right {
- right: 0;
- position: relative;
- }
- .objects .flying-objects img {
- position: absolute;
- margin-bottom: 200px;
- }
- .flying-objects-right img {
- position: absolute;
- margin-bottom: 200px;
- }
- .objects .flying-objects #left-shape1 {
- animation: MoveUpDown 3s linear infinite;
- left: 0;
- bottom: 0;
- }
- .objects .flying-objects #left-shape2 {
- animation: MoveUpDownSecond 3.1s linear infinite;
- left: 0;
- bottom: 0;
- }
- .objects .flying-objects #left-shape3 {
- animation: MoveUpDownThird 3.2s linear infinite;
- left: 0;
- bottom: 0;
- }
- .objects-right .flying-objects-right #right-shape1 {
- animation: MoveUpDown 3s linear infinite;
- right: 0;
- bottom: 0;
- }
- .objects-right .flying-objects-right #right-shape2 {
- animation: MoveUpDownSecond 3.1s linear infinite;
- right: 0;
- bottom: 0;
- }
- .objects-right .flying-objects-right #right-shape3 {
- animation: MoveUpDownThird 3.2s linear infinite;
- right: 0;
- bottom: 0;
- }
- .header-about {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- text-align: center;
- }
- .header-about::before,
- .header-about::after {
- content: "";
- border-top: 0.3rem solid green;
- width: 5rem;
- transform: translateY(-1rem);
- margin-top: 30px;
- }
- .dots-row {
- position: relative;
- }
- .dots-left {
- width: 359px;
- height: 246px;
- top: 50px;
- left: -20px;
- position: absolute;
- }
- .dots-right {
- width: 359px;
- height: 246px;
- top: 50px;
- right: -20px;
- position: absolute;
- }
- .vector-avatar1 {
- position: absolute;
- }
- .vector-avatar2 {
- position: relative;
- }
- .member-photo {
- position: absolute;
- z-index: 1;
- }
- .photo-size {
- width: 250px;
- height: 250px;
- margin-bottom: 29px;
- }
- .flying-object-avatar1 {
- top: 0;
- left: 0;
- animation: MoveObjAvatar 6s linear infinite;
- }
- .flying-object-avatar2 {
- top: 0;
- left: 0;
- animation: MoveObjAvatarSecond 6s linear infinite;
- }
- .member-name {
- font-family: Montserrat;
- font-style: normal;
- font-weight: 800;
- font-size: 32px;
- line-height: 35px;
- text-transform: uppercase;
- color: #000000;
- }
- .card-main {
- transform: skew(-10deg);
- }
- .col-md-6 .card-main {
- transform: skew(0);
- }
- .col-md-4 .card-main {
- transform: skew(0);
- }
- .card-main img {
- transform: skew(5deg);
- }
- .video-span {
- padding-left: 200px;
- background-color: #fff;
- color: #000;
- }
- .border-r {
- border: none;
- border-radius: 30px;
- }
- .video-container {
- position: relative;
- text-align: center;
- }
- .vector-video {
- position: absolute;
- left: 550px;
- top: 200px;
- animation: MoveObjAvatar 5s linear infinite;
- }
- .vector-video-2 {
- position: absolute;
- right: 550px;
- top: 200px;
- animation: MoveObjAvatar 5s linear infinite;
- }
- iframe {
- position: relative;
- }
- .top-hero {
- background: linear-gradient(180deg, #fff 29.69%, rgba(255, 255, 255, 0) 100%);
- padding-top: 250px;
- }
- .bottom-hero {
- background: linear-gradient(360deg, #fff 29.69%, rgba(255, 255, 255, 0) 100%);
- }
- .pharma-paragraph {
- font-family: Lato, sans-serif;
- font-style: normal;
- font-weight: bold;
- font-size: 40px;
- line-height: 40px;
- text-align: center;
- margin-top: 50px;
- margin-bottom: 50px;
- color: black;
- }
- .blue-spans {
- color: rgba(0, 0, 255, 1);
- font-size: 45px;
- }
- .product-btn {
- border: 2px solid #000;
- border-radius: 12px;
- width: 130px;
- text-align: center;
- text-decoration: none;
- text-transform: uppercase;
- color: #000;
- font-weight: 800;
- margin-left: 80px;
- font-family: "Lato", sans-serif;
- }
- .rd-btn {
- background: linear-gradient(
- 130deg,
- #ef4823 -90.64%,
- #ef4823 -54.25%,
- #ea4728 -35.72%,
- #e14437 -4.72%,
- #d23f4d 34.98%,
- #bd3965 81.76%,
- #a32f7f 133.99%,
- #942c8e 160.53%,
- #942c8e 218.76%
- );
- border: 2px solid #000;
- border-radius: 12px;
- font-style: normal;
- font-size: 16px;
- font-weight: 800;
- text-decoration: none;
- text-transform: uppercase;
- color: #000;
- min-width: 150px;
- text-align: center;
- font-family: "Lato", sans-serif;
- }
- .bold-text {
- font-family: Lato, sans-serif;
- font-style: normal;
- color: #000;
- font-weight: bold;
- line-height: 24px;
- font-size: 25px;
- max-width: 600px;
- position: relative;
- left: 0;
- right: 0;
- z-index: 1;
- }
- .small-text-card {
- font-family: Lato, sans-serif;
- font-style: normal;
- font-weight: 300;
- font-size: 21px;
- }
- .small-text {
- font-family: Lato;
- font-style: normal;
- font-weight: 600;
- font-size: 21px;
- color: #000;
- position: relative;
- left: 0;
- right: 0;
- z-index: 1;
- }
- .card-horizontal .card-horizontal-body {
- margin-left: 10px;
- }
- .second-card-row {
- display: flex;
- flex-wrap: wrap;
- position: relative;
- margin-left: -15px;
- margin-right: -15px;
- }
- .dots-center {
- position: absolute;
- width: 359px;
- height: 246px;
- left: 500px;
- }
- .row-cfo {
- position: relative;
- }
- .vector-image {
- position: absolute;
- width: 300px;
- right: -121px;
- bottom: -100px;
- animation: MoveObjAvatarSecond 7s linear infinite;
- }
- .vector-image-2 {
- position: absolute;
- width: 300px;
- right: -121px;
- bottom: -100px;
- animation: MoveObjAvatarSecond 4s linear infinite;
- }
- #dna-image img {
- height: 50vw;
- }
- .dna-content {
- position: relative;
- }
- .dna-row {
- display: flex;
- }
- .dna-row .dna-col {
- transition: all 1s;
- }
- .dna-col-text {
- padding-left: 80px;
- }
- .dna-col-right {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .dna-col-left {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
- .block-content {
- overflow: hidden;
- }
- .block-content-2 {
- max-height: 0;
- }
- .text-left {
- position: absolute;
- top: 0;
- left: 0;
- }
- .obligation-container {
- position: relative;
- }
- .obligation-dots {
- position: absolute;
- right: 0;
- transform: rotate(180deg);
- }
- .obligation-color {
- position: absolute;
- right: -100px;
- top: 250px;
- animation: MoveObjAvatar 7s linear infinite;
- }
- .obligation-color-2 {
- position: absolute;
- right: -100px;
- top: 250px;
- animation: MoveObjAvatar 4s linear infinite;
- }
- .oval-info {
- position: relative;
- text-align: center;
- color: white;
- }
- .centered-top {
- position: absolute;
- top: 30%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .centered-lower {
- position: absolute;
- top: 40%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .centered-lower-2 {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .bottom {
- position: absolute;
- top: 60%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- @media screen and (max-width: 994px) {
- .container-card {
- text-align: center;
- }
- iframe {
- width: 526px;
- height: 320px;
- }
- footer {
- text-align: center;
- }
- .card-main {
- transform: skew(0);
- }
- }
- @media (min-width: 1200px) {
- .container-card {
- max-width: 1240;
- }
- }
- @media (max-width: 1200px) {
- .dots-left {
- display: none;
- }
- .dots-right {
- display: none;
- }
- .vector-video {
- display: none;
- }
- .vector-video-2 {
- display: none;
- }
- .member-photo {
- left: 0;
- right: 0;
- }
- }
- @keyframes move-bg-color {
- 0% {
- transform: translate(0%, 0%) scale(1);
- }
- 25% {
- transform: translate(0%, -2%) scale(1);
- }
- 50% {
- transform: translate(-2%, -2%) scale(1);
- }
- 75% {
- transform: translate(-2%, 0%) scale(1);
- }
- 100% {
- transform: translate(0%, 0%) scale(1);
- }
- }
- @keyframes MoveUpDown {
- 0%,
- 100% {
- bottom: 96px;
- }
- 50% {
- bottom: 100px;
- }
- }
- @keyframes MoveUpDownSecond {
- 0%,
- 100% {
- bottom: 93px;
- }
- 50% {
- bottom: 100px;
- }
- }
- @keyframes MoveUpDownThird {
- 0%,
- 100% {
- bottom: 90px;
- }
- 50% {
- bottom: 100px;
- }
- }
- @keyframes MoveObjAvatar {
- 0% {
- transform: translate(0%, 0%) scale(0.9);
- }
- 25% {
- transform: translate(0%, -10%) scale(0.9);
- }
- 50% {
- transform: translate(-10%, -10%) scale(0.9);
- }
- 75% {
- transform: translate(-10%, 0%) scale(0.9);
- }
- 100% {
- transform: translate(0%, 0%) scale(0.9);
- }
- }
- @keyframes MoveObjAvatarSecond {
- 0% {
- transform: translate(0%, 0%) scale(0.9);
- }
- 25% {
- transform: translate(0%, -6%) scale(0.9);
- }
- 50% {
- transform: translate(-6%, -6%) scale(0.9);
- }
- 75% {
- transform: translate(-6%, 0%) scale(0.9);
- }
- 100% {
- transform: translate(0%, 0%) scale(0.9);
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement