/*
Theme Name: Arrakeen25
Theme URI: http://www.theyatesnetwork.com
Description: Theme template -- WordPress v6.0
Author: GS-I
Author URI: http://www.gs-interactive.net
Version: 1.001
*/
:root {
--ornge: #F78D2A;
--slayt: #3E3A5E;
--pynk: #B0349D;
--purps: #441076;
}
html {
overflow-y: scroll;
scroll-behavior: smooth;
}
body {
padding: 0;
margin: 0;
font-family: 'Barlow', sans-serif;
font-size:20px;
line-height:1.4;
color: #4b4b4b;
background-color:#fff;
}
@media only screen and (max-width : 1100px) {
body {
-webkit-text-size-adjust: none;
font-size:18px;
}
}@media only screen and (max-width : 750px) {
body {
font-size:16px;
}
}
.pageWrap {
width:100%;
overflow:hidden;
}
p { margin:12px 0; }
a {
text-decoration:none;
color:var(--ornge);
transition:all .3s;
}
a:hover {
text-decoration:none;
color: #000;
}
table {
border-spacing: 0;
}
fieldset,img {
border: 0;
}
/* Defining the header
* --------------------------------------- */
.mainheader {
height: 100px;
width: 100%;
padding: 0;
margin:0;
position:fixed;
background-color:#3E3A5D;
z-index:999;
}
@media(max-width: 1250px) {
.mainheader {
height: 70px;
}
}
@media(max-width: 950px) {
.mainheader {
position:relative;
}
}
.mainheader-in {
width: 100%;
padding: 0;
margin:0 auto;
position:relative;
}
.top-logo {
position:absolute;
top:15px;
left:50px;
width:240px;
margin:0;
}
@media(max-width: 1550px) {
.top-logo {
top:20px;
left:20px;
width:200px;
}
}
@media(max-width: 1250px) {
.top-logo {
top:15px;
width:150px;
}
}
.top-logo img {
width:100%;
height:auto;
}
/* Defining the nav
* --------------------------------------- */
#headerMenu {
text-align:left;
position:absolute;
list-style: none;
top:15px;
right:100px;
margin:0;
padding:0;
z-index:998;
}
@media(max-width: 1550px) {
#headerMenu {
right:10px;
}
}
@media(max-width: 950px) {
#headerMenu {
background:rgba(0,0,0,.8);
top:80px;
right:-250px;
margin:0;
padding:10px 0;
width:240px;
}
}
#headerMenu ul {
list-style:none;
margin: 0;
padding:0;
}
#headerMenu ul li {
display:block;
float:left;
margin: 0;
padding:0;
}
@media(max-width: 950px) {
#headerMenu ul li {
float:none;
margin: 0;
padding:0;
}
}
#headerMenu ul li a {
display:block;
font-weight:400;
line-height:1.2;
text-decoration:none;
padding: 20px 40px 20px 43px;
height:40px;
color:#fff;
background-image:url(images/global_nav_dot.png);
background-repeat:no-repeat;
background-position:0 12px;
overflow:hidden;
transition: color .3s;
}
@media(max-width: 1250px) {
#headerMenu ul li a {
background-size:30px 120px;
background-position:0 5px;
height:30px;
font-size:16px;
padding: 10px 20px 10px 33px;
}
}
@media(max-width: 950px) {
#headerMenu ul li a {
font-size:20px;
background-position:10px 12px;
padding: 14px 10px 14px 50px;
height:auto;
}
}
#headerMenu ul li:hover a {
color: #fff;
background-position:0 -68px;
}
@media(max-width: 1250px) {
#headerMenu ul li:hover a {
background-position:0 -55px;
}
}
@media(max-width: 950px) {
#headerMenu ul li:hover a {
background-position:10px -47px;
}
}
#headerMenu ul li.current_page_item a,
#headerMenu ul li.current-page-ancestor > a{
background-position:0 -68px;
}
@media(max-width: 1250px) {
#headerMenu ul li.current_page_item a,
#headerMenu ul li.current-page-ancestor > a{
background-position:0 -55px;
}
}
@media(max-width: 950px) {
#headerMenu ul li.current_page_item a,
#headerMenu ul li.current-page-ancestor > a{
background-position:10px -47px;
}
}
#headerMenu ul ul {
position: absolute;
left:-3000em;
background:rgba(62,58,95,.95);
padding:10px 0;
}
@media(max-width: 950px) {
#headerMenu ul ul {
margin:0;
display:none;
left:auto;
position:relative;
background-color:transparent;
}
}
#headerMenu ul li:hover ul {
left:auto;
}
#headerMenu ul ul li {
display:block;
float:none;
width:200px;
}
#headerMenu ul ul li a {
padding:10px 20px 10px 25px;
height:auto;
background-image:none;
}
@media(max-width: 950px) {
#headerMenu ul ul li a {
font-size:13px;
padding: 0 20px 10px 40px;
}
}
#headerMenu ul ul ul {
display:none;
}
#hamburger {
display:none;
}
@media(max-width: 950px) {
#hamburger {
display: block;
position:absolute;
top:20px;
right:30px;
width:40px;
height:40px;
transition:all .4s;
}
.shrink #hamburger {
top:17px;
}
}
#hamburger:hover {
cursor:pointer;
}
#hamburger .bar {
position:absolute;
top:0;
left:0;
width:40px;
height:8px;
fill:#fff;
transition:all .4s;
}
#hamburger.on .bar {
fill:#e7e7e7;
}
#hamburger:hover .bar {
fill:#e7e7e7;
}
#hamburger.on:hover .bar {
fill:#e7e7e7;
}
#hamburger #bar1 {
top:0;
}
#hamburger.on #bar1 {
opacity:0;
}
#hamburger #bar2 {
top:14px;
}
#hamburger.on #bar2 {
transform: rotate(-45deg);
}
#hamburger #bar3 {
top:14px;
}
#hamburger.on #bar3 {
transform: rotate(45deg);
}
#hamburger #bar4 {
top:27px;
}
#hamburger.on #bar4 {
opacity:0;
}
#fullpage {
padding:100px 0 0 0;
}
@media(max-width: 1250px) {
#fullpage {
padding:70px 0 0 0;
}
}
@media(max-width: 950px) {
#fullpage {
padding:0;
}
}
.szd img,
.szd svg {
width:100%;
height:auto;
}
.btns {
margin: 30px 0 0 0;
}
.btns a {
position: relative;
font-weight: 700;
color: var(--slayt);
text-transform: uppercase;
display: inline-block;
padding: 0 0 0 30px;
transition: all .3s;
font-size: 17px;
line-height: 1.2;
}
.btns a::before {
content: '';
height: 12px;
width: 12px;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
border: 5px #333333 solid;
border-radius:15px;
transition: all .3s;
}
.btns a:hover::before {
border: 5px #FF671D solid;
}
/* ====================================== home ============================= */
.front h1 {
margin:0;
font-size:52px;
line-height:1.1;
font-weight:300;
text-transform: uppercase;
}
@media only screen and (max-width : 1100px) {
.front h1 {
font-size:36px;
}
}
@media only screen and (max-width : 750px) {
.front h1 {
font-size:30px;
}
}
@media only screen and (max-width : 450px) {
.front h1 {
font-size:22px;
}
}
.front h1 strong {
font-weight:700;
}
.front h2 {
margin:0;
font-size:42px;
line-height:1.1;
font-weight:300;
text-transform: uppercase;
}
@media only screen and (max-width : 1100px) {
.front h2 {
font-size:30px;
}
}
@media only screen and (max-width : 750px) {
.front h2 {
font-size:22px;
}
}
@media only screen and (max-width : 450px) {
.front h2 {
font-size:18px;
}
}
.front h2 strong {
font-weight:700;
}
.front h3 {
margin:0 0 6px;
font-size:17px;
line-height:1.1;
font-weight:700;
text-transform: uppercase;
}
@media only screen and (max-width : 750px) {
.front h3 {
margin:0 0 4px;
font-size:14px;
}
}
.hp-hero {
position:relative;
width:100%;
height:65vw;
}
@media only screen and (max-width : 750px) {
.hp-hero {
height:auto;
}
}
.hp-hero .video-wrapper {
position: absolute;
overflow: hidden;
width: 101%;
height: 100%;
top:-6vw;
left:-.5%;
background-color:#fff;
}
@media only screen and (max-width : 750px) {
.hp-hero .video-wrapper {
width: 1000px;
height:520px;
margin-top:0;
left:calc(50vw - 500px);
}
}
@media only screen and (max-width : 450px) {
.hp-hero .video-wrapper {
width: 720px;
height:520px;
margin-top:0;
left:calc(50vw - 360px);
}
}
.hp-hero video {
position: relative;
width: 100%;
height: auto;
}
::-webkit-media-controls {
display:none !important;
}
.hp-hero .tag {
position:absolute;
top:3vw;
left:18vw;
font-size: 30px;
line-height:1.2;
color:#ffffff40;
font-weight:500;
opacity:0;
transform:translateX(-100px) scale(1);
transition:all 1.25s;
transition-delay:2s;
}
@media(max-width: 1300px) {
.hp-hero .tag {
font-size: 30px;
}
}
@media(max-width: 1100px) {
.hp-hero .tag {
top:2vw;
font-size: 25px;
}
}
@media(max-width: 750px) {
.hp-hero .tag {
top:5vw;
left:25px;
font-size: 20px;
}
}
@media(max-width: 450px) {
.hp-hero .tag {
font-size: 16px;
}
}
.hp-hero .tag.showit {
opacity:1;
transform:translateX(0);
}
.hp-hero .tag strong {
font-weight:700;
}
.hp-hero .headings {
position:absolute;
width:95%;
top:10vw;
left:5%;
font-size: 48px;
line-height:1.1;
color:#ffffff;
}
@media(max-width: 1100px) {
.hp-hero .headings {
left:50px;
font-size: 40px;
}
}
@media(max-width: 750px) {
.hp-hero .headings {
position:relative;
padding:16vw 25px 0 25px;
width:auto;
top:auto;
left:auto;
font-size: 34px;
}
}
@media(max-width: 450px) {
.hp-hero .headings {
padding:24vw 25px 0 25px;
font-size: 26px;
}
}
.hp-hero .heading1 {
position:relative;
font-weight:300;
opacity:0;
transition:all 1.25s;
transition-delay:5s;
}
.hp-hero .heading1.showit {
opacity:1;
}
.hp-hero .heading2 {
position:relative;
font-weight:700;
opacity:0;
transition:all 1.25s;
transition-delay:5.75s;
}
.hp-hero .heading2.showit {
opacity:1;
}
.hp-hero .text {
position:absolute;
width:35%;
top:30vw;
left:5%;
color:#ffffff;
font-size:22px;
opacity:0;
transition:all 1.75s;
transition-delay:6.5s;
}
@media only screen and (max-width : 1300px) {
.hp-hero .text {
font-size:20px;
top:30vw;
width:36%;
}
}
@media only screen and (max-width : 1100px) {
.hp-hero .text {
left:50px;
top:26vw;
font-size:16px;
line-height:1.3;
}
}
@media(max-width: 750px) {
.hp-hero .text {
position:relative;
padding:0 25px 0 25px;
left:auto;
top:auto;
width:auto;
color:#000;
}
}
.hp-hero .text.showit {
opacity:1;
}
.hp-hero .hero-image {
position:absolute;
right:5%;
top:20vw;
width:45%;
opacity:0;
transition:all 1.75s;
transition-delay:6.5s;
overflow:hidden;
}
@media(max-width: 1100px) {
.hp-hero .hero-image {
top:24vw;
}
}
@media(max-width: 750px) {
.hp-hero .hero-image {
position:relative;
right:auto;
top:auto;
margin:35px 25px;
width:calc(100% - 50px);
}
}
@media(max-width: 450px) {
.hp-hero .hero-image {
margin:15px;
width:calc(100% - 30px);
}
}
.hp-hero .hero-image.showit {
opacity:1;
}
.hp-hero .hero-image img {
transform: scale(.8, .8);
transition:all 5s;
transition-delay:6s;
}
.hp-hero .hero-image.showit img {
transform: scale(1.1, 1.1);
}
.hp-1 {
position:relative;
text-align:center;
padding: 50px 50px 0;
}
@media only screen and (max-width : 750px) {
.hp-1 {
padding: 75px 25px 0;
}
}
.fadeLeft {
transform:translateX(100px);
transition:all 1s;
opacity:0;
transition-delay:.25s;
}
#trigger0.on .fadeLeft {
transform:translateX(0);
opacity:1;
}
#trigger1.on .fadeLeft {
transform:translateX(0);
opacity:1;
}
#trigger2.on .fadeLeft {
transform:translateX(0);
opacity:1;
}
#trigger3.on .fadeLeft {
transform:translateX(0);
opacity:1;
}
.fadeRight {
transform:translateX(-100px);
transition:all 1s;
opacity:0;
}
#trigger0.on .fadeRight {
transform:translateX(0);
opacity:1;
}
#trigger1.on .fadeRight {
transform:translateX(0);
opacity:1;
}
#trigger2.on .fadeRight {
transform:translateX(0);
opacity:1;
}
#trigger3.on .fadeRight {
transform:translateX(0);
opacity:1;
}
.hp-2 {
position:relative;
width:100%;
text-align:center;
}
.hp-2 .boxed {
color:#333333;
font-size:17px;
position:relative;
max-width:1200px;
margin:50px auto;
display:flex;
justify-content: space-between;
padding: 0 50px;
}
@media only screen and (max-width : 750px) {
.hp-2 .boxed {
padding: 0 25px;
flex-wrap:wrap;
}
}
.hp-2 .boxed .col {
position:relative;
display:block;
padding: 0 0 50px 0;
color: #4b4b4b;
}
.hp-2 .boxed .col-1 {
width:30%;
}
@media only screen and (max-width : 750px) {
.hp-2 .boxed .col-1 {
width:250px;
margin:0 auto;
}
}
.hp-2 .boxed .col-1 strong {
color:var(--slayt);
}
.hp-2 .boxed .col-1 #icon_1 {
fill:var(--slayt);
transform:rotate(45deg);
transition:all .3s;
}
.hp-2 .boxed .col-1:hover #icon_1 {
fill:var(--slayt);
transform:rotate(140deg);
}
.hp-2 .boxed .col-2 {
width:30%;
}
@media only screen and (max-width : 750px) {
.hp-2 .boxed .col-2 {
width:250px;
margin:0 auto;
}
}
.hp-2 .boxed .col-2 strong {
color:var(--pynk);
}
.hp-2 .boxed .col-2 #icon_2 {
fill:var(--pynk);
transform:rotate(0);
transition:all .3s;
}
.hp-2 .boxed .col-2:hover #icon_2 {
transform:rotate(95deg);
}
.hp-2 .boxed .col-3 {
width:30%;
}
@media only screen and (max-width : 750px) {
.hp-2 .boxed .col-3 {
width:250px;
margin:0 auto;
}
}
.hp-2 .boxed .col-3 strong {
color:var(--ornge);
}
.hp-2 .boxed .col-3 #icon_3 {
fill:var(--ornge);
transform:rotate(225deg);
transition:all .3s;
}
.hp-2 .boxed .col-3:hover #icon_3 {
transform:rotate(320deg);
}
.hp-2 .boxed .icon {
max-width:50%;
margin:0 auto;
}
.hp-2 .boxed .col .more {
position:absolute;
width:100%;
left:0;
bottom:0;
text-align: center;
}
.hp-2 .boxed .col .more strong {
display:inline-block;
color:#4b4b4b;
padding:0 0 0 20px;
background-image: url('data:image/svg+xml,');
background-position:left center;
background-repeat:no-repeat;
transition:all .3s;
}
.hp-2 .boxed .col:hover .more strong {
display:inline-block;
color:#fc671a;
background-image: url('data:image/svg+xml,');
}
.front .bgs {
position:relative;
}
.front .bgs .bg-1 {
position:absolute;
top:29vw;
left:0;
width:110vw;
}
@media only screen and (max-width : 1100px) {
.front .bgs .bg-1 {
top:70vw;
}
}
@media only screen and (max-width : 750px) {
.front .bgs .bg-1 {
top:100vw;
width:230vw;
}
}
@media only screen and (max-width : 450px) {
.front .bgs .bg-1 {
top:150vw;
width:250vw;
}
}
.front .bgs .bg-3 {
position:absolute;
top:5vw;
left:0;
width:110vw;
transition:all 1.5s;
}
.front .bgs.on .bg-3 {
left:-8vw;
}
@media only screen and (max-width : 1100px) {
.front .bgs .bg-3 {
top:12vw;
left:-45vw;
width:150vw;
}
.front .bgs.on .bg-3 {
left:-50vw;
}
}
@media only screen and (max-width : 750px) {
.front .bgs .bg-3 {
top:0;
left:0;
width:350vw;
}
.front .bgs.on .bg-3 {
left:0;
}
}
@media only screen and (max-width : 450px) {
.front .bgs .bg-3 {
top:5vw;
left:0;
width:500vw;
}
}
.hp-3 {
position:relative;
width:100%;
text-align:center;
}
.hp-3 .boxed {
position:relative;
max-width:900px;
margin:100px auto 150px;
font-size:36px;
line-height:1.1;
font-weight:500;
color:var(--slayt);
text-align: center;
}
@media only screen and (max-width : 750px) {
.hp-3 .boxed {
padding:0 25px;
margin:50px auto 50px;
font-size:20px;
}
}
.hp-4 {
position:relative;
width:100%;
}
.hp-4 .boxed {
position:relative;
max-width:1400px;
margin:50px auto;
display:flex;
justify-content: space-between;
color:#fff;
padding: 0 50px;
}
@media only screen and (max-width : 750px) {
.hp-4 .boxed {
flex-wrap:wrap;
padding: 0 25px;
}
}
.hp-4 .boxed .col-1 {
width:50%;
}
@media only screen and (max-width : 750px) {
.hp-4 .boxed .col-1 {
width:100%;
}
}
#trigger1 .boxed .col-1 .image {
overflow:hidden;
opacity:0;
transition:all 1s;
transform: translate(0, 100px);
overflow:hidden;
}
#trigger1.on .boxed .col-1 .image {
opacity:1;
transform: translate(0, 0);
}
.hp-4 .boxed .col-2 {
width:40%;
padding:180px 5% 0 5%;
}
@media only screen and (max-width : 1300px) {
.hp-4 .boxed .col-2 {
padding:75px 5% 0 5%;
}
}
@media only screen and (max-width : 1100px) {
.hp-4 .boxed .col-2 {
padding:25px 5% 0 5%;
}
}
@media only screen and (max-width : 750px) {
.hp-4 .boxed .col-2 {
width:100%;
padding:25px 0 0 0;
}
}
.hp-4 .boxed .col-2 .btns a {
color: #fff;
}
.hp-4 .boxed .col-2 .btns a::before {
background-color: transparent;
border: 5px #ffffff solid;
}
.hp-4 .boxed .col-2 .btns a:hover::before {
border: 5px #FF671D solid;
}
.hp-5 {
position:relative;
width:100%;
}
.hp-5 .boxed {
position:relative;
max-width:1400px;
margin:20vw auto 150px;
display:flex;
justify-content: space-between;
color:var(--slayt);
padding: 0 50px;
}
@media only screen and (max-width : 1650px) {
.hp-5 .boxed {
margin:250px auto 150px;
}
}
@media only screen and (max-width : 750px) {
.hp-5 .boxed {
margin:100px auto 50px;
flex-wrap:wrap;
flex-direction:column-reverse;
padding: 0 25px;
}
}
.hp-5 .boxed .col-1 {
width:40%;
padding:0 0 0 20px;
}
@media only screen and (max-width : 750px) {
.hp-5 .boxed .col-1 {
width:100%;
padding:25px 0 0 0;
}
}
.hp-5 .boxed .col-1 h3 {
color:var(--purps);
}
.hp-5 .boxed .col-2 {
width:50%;
}
@media only screen and (max-width : 750px) {
.hp-5 .boxed .col-2 {
width:100%;
}
}
#trigger2 .boxed .col-2 .image {
overflow:hidden;
opacity:0;
transition:all 1s;
transform: translate(0, 100px);
overflow:hidden;
}
#trigger2.on .boxed .col-2 .image {
opacity:1;
transform: translate(0, 0);
}
.hp-6 {
position:relative;
width:100%;
}
.hp-6 .boxed {
position:relative;
max-width:1400px;
margin:150px auto 75px;
display:flex;
justify-content: space-between;
padding: 0 50px;
}
@media only screen and (max-width : 750px) {
.hp-6 .boxed {
margin:75px auto 75px;
flex-wrap:wrap;
padding: 0 25px;
}
}
.hp-6 .boxed .col-1 {
width:48%;
background-color:var(--slayt);
background:url("images/hp-6-bg-1.svg");
background-size:cover;
background-position:center bottom;
background-repeat:no-repeat;
}
@media only screen and (max-width : 750px) {
.hp-6 .boxed .col-1 {
width:100%;
margin: 0 0 20px 0;
}
}
.hp-6 .boxed .col-2 {
width:48%;
background-color:var(--purps);
background:url("images/hp-6-bg-2.svg");
background-size:cover;
background-position:center bottom;
background-repeat:no-repeat;
}
@media only screen and (max-width : 750px) {
.hp-6 .boxed .col-2 {
width:100%;
}
}
.hp-6 .boxed .inner {
color:#fff;
padding:50px 50px 100px;
}
@media only screen and (max-width : 1100px) {
.hp-6 .boxed .inner {
padding:25px 20px 50px;
}
}
.hp-6 .boxed a.item {
display:block;
color: #fff;
font-size:22px;
line-height:1.2;
font-weight:500;
font-style:italic;
padding:25px 75px 25px 0;
background-image: url('data:image/svg+xml,');
background-position:right center;
background-repeat:no-repeat;
transition:all .3s;
}
@media only screen and (max-width : 750px) {
.hp-6 .boxed a.item {
font-size:18px;
padding:10px 30px 10px 0;
}
}
.hp-6 .boxed a.item:hover {
color: #fc671a;
background-image: url('data:image/svg+xml,');
}
/* ====================================== inside banners ============================= */
.banner {
position:relative;
width:100%;
height:43vw;
}
@media only screen and (max-width : 750px) {
.banner {
height:auto;
margin:0 0 50px;
}
}
.banner .video-wrapper {
position: absolute;
width: 100.5%;
top: -15vw;
left: -1px;
}
@media only screen and (max-width : 450px) {
.banner .video-wrapper {
width: 550px;
height:520px;
margin-top:0;
margin-left:calc(50vw - 275px);
}
}
.banner .video-wrapper video {
width:100%;
height:auto;
}
.banner .boxed {
position:relative;
width:calc(100% - 100px);
display:flex;
max-width:1500px;
margin:0 auto;
padding:0 50px;
}
@media only screen and (max-width : 750px) {
.banner .boxed {
width:auto;
padding:0 25px;
flex-wrap:wrap;
}
}
.banner .boxed .col-1 {
padding:100px 0 0 0;
width:45%;
margin:0 5% 0 0;
color:#fff;
}
@media only screen and (max-width : 1100px) {
.banner .boxed .col-1 {
padding:50px 0 0 0;
}
}
@media only screen and (max-width : 750px) {
.banner .boxed .col-1 {
padding: 75px 100px 25px 50px;
width:auto;
margin:0 0 25px;
}
}
@media only screen and (max-width : 550px) {
.banner .boxed .col-1 {
padding:50px 0 30px 0;
}
}
.banner .boxed h1 {
margin:0;
font-size:52px;
line-height:1.1;
font-weight:300;
text-transform: uppercase;
}
@media only screen and (max-width : 1100px) {
.banner .boxed h1 {
font-size:34px;
}
}
@media only screen and (max-width : 750px) {
.banner .boxed h1 {
font-size:28px;
}
}
.banner .boxed h1 span {
text-transform: none;
}
.banner .boxed h1 strong {
font-weight:700;
}
.banner .boxed h3 {
margin:0 0 6px;
font-size:17px;
line-height:1.1;
font-weight:700;
text-transform: uppercase;
}
@media only screen and (max-width : 1100px) {
.banner .boxed h3 {
font-size:16px;
}
}
@media only screen and (max-width : 750px) {
.banner .boxed h3 {
margin:0 0 4px;
font-size:15px;
}
}
.banner .boxed .col-2 {
width:50%;
padding:50px 0 0 0;
}
@media only screen and (max-width : 750px) {
.banner .boxed .col-2 {
width:100%;
padding:0;
}
}
.banner .boxed .col-2 .image {
opacity:0;
transition:all 1.75s;
transition-delay:.5s;
overflow:hidden;
}
.banner .boxed .col-2 .image.showit {
opacity:1;
}
.banner .boxed .col-2 .image img {
transform: scale(.8, .8);
transition:all 5s;
transition-delay:.5s;
}
.banner .boxed .col-2 .image.showit img {
transform: scale(1.1, 1.1);
}
/* ====================================== about page ============================= */
#team-1 {
position:relative;
width:100%;
padding:0 0 75px 0;
}
#team-1 .boxed {
position:relative;
max-width:1000px;
margin:0 auto;
padding:0 50px;
}
@media only screen and (max-width : 750px) {
#team-1 .boxed {
padding:0 25px;
}
}
#team-1 .boxed .inner {
}
#team-1 .boxed h2 {
color: var(--pynk);
font-size: 40px;
line-height: 1.2;
font-weight: 700;
margin: 0;
text-align:center;
}
@media(max-width: 1100px) {
#team-1 .boxed h2 {
font-size:30px;
}
}
@media(max-width: 750px) {
#team-1 .boxed h2 {
font-size:24px;
}
}
#team-0 .tabs {
position:relative;
display:flex;
max-width:1500px;
margin:0 auto;
justify-content: center;
gap:10px;
padding:0 25px;
}
@media only screen and (max-width : 750px) {
#team-0 .tabs {
flex-wrap:wrap;
gap:10px;
padding:0 10px;
}
}
#team-0 .tabs .tab {
width:33%;
text-align: center;
color:#fff;
background-color:var(--slayt);
font-size:20px;
font-weight:700;
text-transform: uppercase;
padding:10px 0;
transition:all .3s;
}
@media only screen and (max-width : 900px) {
#team-0 .tabs .tab {
font-size:17px;
}
}
@media only screen and (max-width : 750px) {
#team-0 .tabs .tab {
width:100%;
}
}
#team-0 .tabs .tab:hover {
background-color:var(--purps);
cursor:pointer;
}
#team-0 .tabs .tab.on {
background-color:var(--purps);
}
#team-2 {
position:relative;
margin:0;
padding:50px 0;
min-height:800px;
}
#team-2 .panels {
position:relative;
width:100%;
}
#team-2 .panels .panel {
position:relative;
width:100%;
}
#team-2 .panels .panel-1 {
display:block;
}
#team-2 .panels .panel-2 {
display:none;
}
#team-2 .panels .panel-3 {
display:none;
}
#team-2 h2 {
color:var(--slayt);
font-size:34px;
font-weight:700;
text-align:center;
margin:0 0 25px;
}
@media(max-width: 750px) {
#team-2 h2 {
font-size:24px;
}
}
#team-2 .panel .boxed {
position:relative;
max-width:1000px;
margin:30px auto 10px;
padding:0 50px;
text-align:center;
}
@media(max-width: 750px) {
#team-2 .panel .boxed {
padding:0;
}
}
#team-2 .panel .boxed .member {
width:32%;
margin:20px 0;
display:inline-block;
vertical-align: top;
overflow:hidden;
}
@media(max-width: 1000px) {
#team-2 .panel .boxed .member {
width:48%;
margin:10px auto;
}
}
@media(max-width: 650px) {
#team-2 .panel .boxed .member {
width:94%;
margin:10px auto;
}
}
#team-2 .panel .boxed .member:hover {
cursor:pointer;
}
#team-2 .panel .boxed .member .member-pic {
position:relative;
width:270px;
height:270px;
border-radius:200px;
border:5px solid #fff;
margin:0 auto;
transition: all .5s;
overflow:hidden;
}
@media(max-width: 800px) {
#team-2 .panel .boxed .member .member-in {
width:180px;
height:180px;
}
}
@media(max-width: 550px) {
#team-2 .panel .boxed .member .member-in {
width:140px;
height:140px;
}
}
#team-2 .panel .boxed .member:hover .member-pic {
border:5px solid var(--purps);
}
#team-2 .panel .boxed .member .member-pic .inner {
position:relative;
width:calc(100% - 10px);
height:calc(100% - 10px);
border-radius:200px;
border:5px solid #ffffff;
margin:0 auto;
background-color:#EAEAEA;
transition: all .5s;
overflow:hidden;
}
#team-2 .panel .boxed .member .member-pic .inner img {
width:100%;
height:auto;
}
#team-2 .panel .boxed .member .member-name {
height:75px;
padding:5px 10px;
overflow:visible;
color:#333333;
font-size:16px;
transition: all .3s;
}
@media(max-width: 750px) {
#team-2 .panel .boxed .member .member-name {
height:67px;
padding:5px 10px;
font-size:14px;
}
}
#team-2 .panel .boxed .member:hover .member-name {
color:var(--purps);
cursor:pointer;
}
#team-2 .panel .boxed .member .member-name h3 {
margin:0;
font-weight:700;
font-size:18px;
text-transform:uppercase;
}
@media(max-width: 750px) {
#team-2 .panel .boxed .member .member-name h3 {
font-size:16px;
}
}
#team-2 .leader-bio {
position:fixed;
width:100vw;
height:100vh;
top:0;
left:0;
background-color:#ffffff;
z-index:99999;
display:none;
}
#team-2 .leader-bio .inner {
position:relative;
margin:150px auto;
max-width:1100px;
height:calc(100vh - 200px);
background-color:#c7b7d6;
background-image:url("images/bio-bg-rna.png");
background-position:left bottom;
background-repeat:no-repeat;
}
@media(max-width: 750px) {
#team-2 .leader-bio .inner {
margin:50px auto;
height:calc(100vh - 100px);
}
}
#team-2 .leader-bio .inner svg {
position:absolute;
top:20px;
right:20px;
width:40px;
height:40px;
fill:#fff;
transition:all .3s;
}
@media(max-width: 550px) {
#team-2 .leader-bio .inner svg {
right:10px;
}
}
#team-2 .leader-bio .inner svg:hover {
fill:var(--purps);
cursor:pointer;
}
#team-2 .leader-bio .inner .columns {
position:relative;
display:flex;
margin:0 0 0 50px;
height:100%;
}
@media(max-width: 750px) {
#team-2 .leader-bio .inner .columns {
margin:0 0 0 20px;
}
}
@media(max-width: 550px) {
#team-2 .leader-bio .inner .columns {
flex-wrap:wrap;
}
}
#team-2 .leader-bio .inner .columns .col-1 {
width:30%;
margin:-30px 5% 0 0;
}
@media(max-width: 750px) {
#team-2 .leader-bio .inner .columns .col-1 {
margin:-15px 3% 0 0;
}
}
@media(max-width: 550px) {
#team-2 .leader-bio .inner .columns .col-1 {
display:none;
}
}
#team-2 .leader-bio .inner .columns .col-1 .member-pic {
position:relative;
border-radius:200px;
border:4px solid #fff;
margin:0 auto;
transition: all .5s;
overflow:hidden;
}
#team-2 .leader-bio .inner .columns .col-1 .member-pic .inner {
position:relative;
width:calc(100% - 14px);
height:calc(100% - 14px);
border-radius:200px;
margin:7px;
background-color:#EAEAEA;
transition: all .5s;
overflow:hidden;
}
#team-2 .leader-bio .inner .columns .col-1 .member-pic .inner img {
width:100%;
height:auto;
}
#team-2 .leader-bio .inner .columns .col-2 {
width:65%;
margin:70px 0 70px 0;
height:calc(100% - 140px);
overflow-y:scroll;
}
@media(max-width: 750px) {
#team-2 .leader-bio .inner .columns .col-2 {
width:67%;
margin:20px 0 20px 0;
height:calc(100% - 40px);
}
}
@media(max-width: 550px) {
#team-2 .leader-bio .inner .columns .col-2 {
width:100%;
}
}
#team-2 .bio-text {
padding:0 70px 0 0;
color: #29292a;
}
@media(max-width: 550px) {
#team-2 .bio-text {
padding:0 50px 0 0;
}
}
#team-2 .bio-text h2 {
color:var(--purps);
text-align: left;
font-size:28px;
margin:0 0 15px;
font-weight:700;
}
@media(max-width: 550px) {
#team-2 .bio-text h2 {
font-size:22px;
}
}
#team-2 .bio-text h2 span {
font-weight:700;
}
#team-2 .bio-text h2 + p {
margin-top:5px;
}
/* ====================================== Toolkit page ============================= */
#toolkit-1 {
position:relative;
width:100%;
padding:25px 0 75px 0;
}
@media(max-width: 750px) {
#toolkit-1 {
padding:25px 0 50px 0;
}
}
#toolkit-1 .boxed {
position:relative;
max-width:1000px;
margin:0 auto;
padding:0 50px;
text-align: center;
}
@media(max-width: 750px) {
#toolkit-1 .boxed {
padding:0 25px;
}
}
#toolkit-1 .boxed h2 {
color: var(--pynk);
font-size: 40px;
line-height: 1.2;
font-weight: 700;
margin: 0;
}
@media(max-width: 1100px) {
#toolkit-1 .boxed h2 {
font-size:30px;
}
}
@media(max-width: 750px) {
#toolkit-1 .boxed h2 {
font-size:22px;
}
}
#toolkit-2 .boxed {
position:relative;
max-width:1400px;
margin:0 auto;
padding:0 50px 50px;
display:flex;
}
@media(max-width: 750px) {
#toolkit-2 .boxed {
padding:20px;
flex-wrap:wrap;
}
}
#toolkit-2 .boxed .col-1 {
position:relative;
width:45%;
margin:0 5% 0 0;
}
@media(max-width: 750px) {
#toolkit-2 .boxed .col-1 {
width:100%;
margin:0 0 25px 0;
}
}
#toolkit-2 .boxed .col-2 {
position:relative;
width:50%;
}
@media(max-width: 750px) {
#toolkit-2 .boxed .col-2 {
width:100%;
}
}
#toolkit-2 .boxed h2 {
color:var(--ornge);
font-size:24px;
font-weight:600;
margin:20px 0 10px;
}
@media(max-width: 750px) {
#toolkit-2 .boxed h2 {
font-size:24px;
}
}
#toolkit-2 .boxed li {
padding:0 0 10px 0;
}
#toolkit-3 .full {
position:relative;
width:100%;
background-color:var(--slayt);
}
#toolkit-3 .full .fixed {
position:relative;
max-width:800px;
margin:0 auto;
padding:40px 50px 25px;
color:#fff;
text-align: center;
}
@media(max-width: 750px) {
#toolkit-3 .full .fixed {
padding:20px;
}
}
#toolkit-3 .full .fixed h2 {
font-size:34px;
font-weight:600;
margin:0;
}
@media(max-width: 750px) {
#toolkit-3 .full .fixed h2 {
font-size:24px;
}
}
#toolkit-4 {
position:relative;
width:100%;
background-color:#e2edef;
}
#toolkit-4 .level-1 {
width:100%;
position:relative;
text-align:center;
background-color:#162239;
padding:25px 0;
}
#toolkit-4 .level-1 h2 {
color:#fff;
font-weight:400;
margin:0;
padding:20px 20px 0;
}
@media(max-width: 750px) {
#toolkit-4 .level-1 h2 {
font-size:17px;
padding:10px 10px 0;
}
}
#toolkit-4 .level-1 #lev-1-circles {
width:100%;
position:relative;
}
@media(max-width: 750px) {
#toolkit-4 .level-1 #lev-1-circles {
max-width:400px;
margin:0 auto;
}
}
#toolkit-4 .level-1-item {
display:inline-block;
vertical-align: top;
transition: all .3s;
}
#toolkit-4 .level-1-item:hover {
cursor:pointer;
}
#toolkit-4 .level-1-item .l1-circle {
width:150px;
height:150px;
border:5px solid #fff;
border-radius:50%;
color:#fff;
text-align:center;
font-weight:600;
padding:0;
}
@media(max-width: 750px) {
#toolkit-4 .level-1-item .l1-circle {
width:120px;
height:120px;
margin:5px;
}
}
#l1-1 .l1-circle {
background-color:#fc671a;
}
#l1-2 .l1-circle {
background-color: #005c83;
}
#l1-3 .l1-circle {
background-color: #722f8b;
}
#l1-4 .l1-circle {
background-color: #3e3a5f;
}
#toolkit-4 .level-1-item .l1-circle table {
width:100%;
height:100%;
border:0;
}
#toolkit-4 .level-1-item .l1-circle table td {
padding:10px;
text-align:center;
vertical-align:middle;
}
#toolkit-4 .level-1-arrow {
display:inline-block;
vertical-align: top;
width:75px;
}
@media(max-width: 950px) {
#toolkit-4 .level-1-arrow {
width:25px;
margin:55px 0 0 0;
}
}
@media(max-width: 750px) {
#toolkit-4 .level-1-arrow {
display:none;
}
}
#toolkit-4 .level-1-arrow img {
width:100%;
height:auto;
}
#toolkit-4 .level-2 {
position:relative;
width:100%;
height:650px;
overflow:hidden;
background-color:#162239;
text-align:center;
}
@media(max-width: 1100px) {
#toolkit-4 .level-2 {
height:65vw;
}
}
@media(max-width: 750px) {
#toolkit-4 .level-2 {
height:80vw;
}
}
#toolkit-4 .level-2-band {
width:400%;
height:100%;
position:absolute;
top:0;
left:0;
background-color:#fff;
}
#toolkit-4 .level-2-item {
width:25%;
height:100%;
float:left;
text-align:center
}
#toolkit-4 .level-2-item .sl-title {
padding:50px 0;
}
#toolkit-4 .level-2-item .sl-title h2 {
max-width:1200px;
margin:0 auto;
padding:10px 20px;
font-size:28px;
font-weight:700;
}
@media(max-width: 750px) {
#toolkit-4 .level-2-item .sl-title {
padding:25px 0;
}
#toolkit-4 .level-2-item .sl-title h2 {
font-size:20px;
}
}
#l2-1 .sl-title h2 {
color:#fc671a;
}
#l2-2 .sl-title h2 {
color: #005c83;
}
#l2-3 .sl-title h2 {
color: #722f8b;
}
#l2-4 .sl-title h2 {
color: #3e3a5f;
}
#toolkit-4 .level-2-item .sl-image {
height:400px;
padding:0;
}
#toolkit-4 .level-2-item img {
height:auto;
width:100%;
max-width:1100px;
}
#toolkit-4 .btns {
width:100%;
height:50px;
position:absolute;
top:425px;
left:0;
}
#toolkit-4 .btns .prev {
width:40px;
height:60px;
position:absolute;
top:0;
left:25px;
opacity:.8;
display:none;
}
#toolkit-4 .btns .prev:hover {
opacity:1;
cursor:pointer;
}
#toolkit-4 .btns .next {
width:40px;
height:60px;
position:absolute;
top:0;
right:25px;
opacity:.8;
}
#toolkit-4 .btns .next:hover {
opacity:1;
cursor:pointer;
}
/* ====================================== rSM Platform page ============================= */
#rsmp-0 {
position:relative;
width:100%;
padding:25px 0 75px 0;
}
#rsmp-0 .boxed {
position:relative;
max-width:800px;
margin:0 auto;
padding:0 50px;
text-align: center;
}
@media(max-width: 750px) {
#rsmp-0 .boxed {
padding:0 25px;
}
}
#rsmp-0 .boxed h2 {
color: var(--pynk);
font-size: 40px;
line-height: 1.2;
font-weight: 700;
margin: 0;
}
@media(max-width: 750px) {
#rsmp-0 .boxed h2 {
font-size:20px;
}
}
#rsmp-1 {
position:relative;
width:100%;
background-color:#85258d;
background-image:url(images/rsmp-1-bg.jpg);
background-position:center top;
background-size:cover;
background-repeat:no-repeat;
}
#rsmp-1 .boxed {
position:relative;
max-width:1200px;
margin:0 auto;
padding:6vw 50px;
}
@media(max-width: 1300px) {
#rsmp-1 .boxed {
padding:8vw 50px;
}
}
@media(max-width: 750px) {
#rsmp-1 .boxed {
padding:8vw 25px;
}
}
#rsmp-1 .boxed .full {
color:#ffffff;
font-size:28px;
font-weight:700;
width:70%;
padding:0 0 50px 0;
}
@media(max-width: 1300px) {
#rsmp-1 .boxed .full {
font-size:25px;
width:60%;
}
}
@media(max-width: 750px) {
#rsmp-1 .boxed .full {
font-size:20px;
width:100%;
}
}
#rsmp-1 .boxed .columns {
position:relative;
display:flex;
}
@media(max-width: 750px) {
#rsmp-1 .boxed .columns {
flex-wrap:wrap;
}
}
#rsmp-1 .boxed .columns .col-1 {
position:relative;
width:30%;
}
@media(max-width: 750px) {
#rsmp-1 .boxed .columns .col-1 {
width:100%;
padding:0 0 25px 0;
}
}
#rsmp-1 .boxed .columns .col-1 .rsm-label {
margin:0 0 10px 0;
color:#ffffff;
font-size:25px;
font-weight:600;
transition: all .3s;
}
@media(max-width: 1300px) {
#rsmp-1 .boxed .columns .col-1 .rsm-label {
color:#ffffff;
font-size:25px;
}
}
@media(max-width: 750px) {
#rsmp-1 .boxed .columns .col-1 .rsm-label {
color: #ffffff;
font-size:20px;
}
}
#rsmp-1 .boxed .columns .col-1 .rsm-label:hover {
cursor:pointer;
color:#fc671a;
}
#rsmp-1 .boxed .columns .col-1 .rsm-label.on {
color:#fc671a;
}
#rsmp-1 .boxed .columns .col-1 .rsm-label::before {
content: '';
border: solid #ffffff;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 6px;
margin: 0 10px 0 0;
transform: rotate(-45deg);
transition:all .3s;
}
@media(max-width: 750px) {
#rsmp-1 .boxed .columns .col-1 .rsm-label::before {
content: '';
border: solid #ffffff;
border-width: 0 4px 4px 0;
}
}
#rsmp-1 .boxed .columns .col-1 .rsm-label.on::before {
border: solid #fc671a;
border-width: 0 4px 4px 0;
margin: 0 15px 0 0;
}
#rsmp-1 .boxed .columns .col-2 {
position:relative;
width:70%;
}
@media(max-width: 750px) {
#rsmp-1 .boxed .columns .col-2 {
width:100%;
}
}
#rsmp-1 .boxed .columns .col-2 .rsm-circles {
width: 100%;
height:auto;
position:relative;
}
#rsmp-1 .boxed .columns .col-2 .rsm-circles .rsm-circle-bg {
width: 100%;
height:auto;
position:relative;
}
#rsmp-1 .boxed .columns .col-2 .rsm-circles .rsm-circle {
width: 100%;
height:auto;
position:absolute;
top:0;
left:0;
opacity:0;
transition: all .8s;
}
#rsmp-1 .boxed .columns .col-2 .rsm-circles .rsm-circle.on {
opacity:1;
}
#rsmp-1 .boxed .columns .col-2 img {
max-width:100%;
height:auto;
}
#rsmp-2 {
position:relative;
width:100%;
padding:70px 0 70px 0;
}
#rsmp-2 .boxed {
position:relative;
max-width:1200px;
margin:0 auto;
padding:0 50px;
display:flex;
gap:100px;
}
@media(max-width: 750px) {
#rsmp-2 .boxed {
padding:20px;
gap:25px;
flex-wrap:wrap;
}
}
#rsmp-2 .boxed .col-1 {
width:calc(50% - 50px);
}
@media(max-width: 750px) {
#rsmp-2 .boxed .col-1 {
width:100%;
}
}
#rsmp-2 .boxed .col-2 {
width:calc(50% - 50px);
}
@media(max-width: 750px) {
#rsmp-2 .boxed .col-2 {
width:100%;
}
}
#rsmp-2 .boxed h2 {
color:var(--pynk);
font-size:40px;
line-height:1.2;
font-weight:700;
margin:0;
}
@media(max-width: 750px) {
#rsmp-2 .boxed h2 {
font-size:22px;
}
}
#rsmp-3 {
position:relative;
width:100%;
background-color:#f78d2a;
padding:70px 0;
}
@media(max-width: 750px) {
#rsmp-3 {
padding:35px 0;
}
}
#rsmp-3 .boxed {
position:relative;
max-width:1200px;
margin:0 auto;
padding:0 50px;
}
@media(max-width: 750px) {
#rsmp-3 .boxed {
padding:0 5px;
}
}
#rsmp-3 .boxed .circles {
width:100%;
display:flex;
justify-content: center;
}
#rsmp-3 .boxed .circles .text {
position:relative;
padding:10px 20px 0 50px;
color:#fff;
}
@media(max-width: 750px) {
#rsmp-3 .boxed .circles .text {
padding:0 5px 0 18px;
font-size:12px;
line-height:1.3;
}
}
#rsmp-3 .boxed .circles .text span {
position:absolute;
display:block;
top:10px;
left:10px;
width:25px;
height:25px;
font-size:16px;
font-weight:600;
text-align: center;
background-color:#000;
border-radius:50%;
}
@media(max-width: 750px) {
#rsmp-3 .boxed .circles .text span {
top:5px;
left:0px;
width:14px;
height:14px;
font-size:8px;
}
}
#rsmp-3 .boxed .tg-1 {
position:relative;
float:left;
width:18.1%;
height:auto;
}
#rsmp-3 .boxed .tg-2 {
position:relative;
float:left;
width:27.2%;
height:auto;
}
#rsmp-3 .boxed img {
max-width:100%;
height:auto;
}
#rsmp-4 {
position:relative;
width:100%;
padding:70px 0 0 0;
}
#rsmp-4 .boxed {
position:relative;
max-width:1200px;
margin:0 auto;
padding:0 50px 150px;
display:flex;
gap:100px;
}
@media(max-width: 750px) {
#rsmp-4 .boxed {
padding: 0 25px 50px;
flex-wrap:wrap;
gap:25px;
}
}
#rsmp-4 .boxed .col-1 {
width:calc(50% - 50px);
}
@media(max-width: 750px) {
#rsmp-4 .boxed .col-1 {
width:100%;
}
}
#rsmp-4 .boxed .col-2 {
width:calc(50% - 50px);
}
@media(max-width: 750px) {
#rsmp-4 .boxed .col-2 {
width:100%;
}
}
#rsmp-4 .boxed h2 {
color:var(--ornge);
font-size:40px;
line-height:1.2;
font-weight:700;
margin:0;
}
@media(max-width: 750px) {
#rsmp-4 .boxed h2 {
font-size:22px;
}
}
#rsmp-4 .boxed strong {
color:var(--ornge);
font-weight:700;
}
#rsmp-4 .boxed ul {
margin:25px 30px 0;
padding:0;
}
#rsmp-4 .boxed li {
padding:0 0 25px 0;
}
/* ====================================== pipeline page ============================= */
#pipeline-1 {
position:relative;
width:100%;
padding:25px 0 75px 0;
}
#pipeline-1 .boxed {
position:relative;
max-width:800px;
margin:0 auto;
padding:0 50px;
text-align: center;
}
@media(max-width: 750px) {
#pipeline-1 .boxed {
padding:0 25px;
}
}
#pipeline-1 .boxed h2 {
color: var(--pynk);
font-size: 40px;
line-height: 1.2;
font-weight: 700;
margin: 0;
}
@media(max-width: 750px) {
#pipeline-1 .boxed h2 {
font-size:22px;
}
}
#pipeline-2 {
position:relative;
width:100%;
height:46vw;
background-color:#85258d;
background-image:url(images/pipeline-2-bg.jpg);
background-position:center top;
background-size:cover;
background-repeat:no-repeat;
}
@media(max-width: 1100px) {
#pipeline-2 {
height:auto;
}
}
#pipeline-2 .boxed {
position:relative;
max-width:1200px;
margin:0 auto;
padding:150px 50px 50px;
display:flex;
gap:100px;
color:#ffffff;
font-size:22px;
}
@media(max-width: 1300px) {
#pipeline-2 .boxed {
padding:100px 50px 50px;
font-size:20px;
}
}
@media(max-width: 1100px) {
#pipeline-2 .boxed {
padding:75px 50px 50px;
font-size:18px;
gap:50px;
}
}
@media(max-width: 750px) {
#pipeline-2 .boxed {
padding:75px 25px 75px;
font-size:16px;
flex-wrap:wrap;
gap:10px;
}
}
#pipeline-2 .boxed .col-1 {
width:calc(50% - 50px);
}
@media(max-width: 750px) {
#pipeline-2 .boxed .col-1 {
width:100%;
}
}
#pipeline-2 .boxed .col-2 {
width:calc(50% - 50px);
}
@media(max-width: 1100px) {
#pipeline-2 .boxed .col-2 {
width:50%;
}
}
@media(max-width: 750px) {
#pipeline-2 .boxed .col-2 {
width:100%;
}
}
#pipeline-2 .boxed h2 {
color:#ffffff;
font-size:40px;
line-height:1.2;
font-weight:700;
margin:0;
}
@media(max-width: 1100px) {
#pipeline-2 .boxed h2 {
font-size:28px;
}
}
@media(max-width: 750px) {
#pipeline-2 .boxed h2 {
font-size:22px;
}
}
#pipeline-2 .boxed a {
color:#ffffff;
}
#pipeline-4 .full {
position:relative;
width:100%;
background-color:#fff;
}
#pipeline-4 .full .fixed {
color:#3e3a5f;
position:relative;
max-width:1000px;
margin:0 auto;
padding:50px 50px 150px;
}
@media(max-width: 750px) {
#pipeline-4 .full .fixed {
padding:10px 5px 60px;
}
}
#pipeline-4 .full .fixed .pl-wrap {
position:relative;
padding:50px 0;
display:flex;
margin:0 -50px;
}
@media(max-width: 750px) {
#pipeline-4 .full .fixed .pl-wrap {
margin:0;
}
}
#pipeline-4 .full .fixed .rna-receptor {
width:260px;
margin:0 20px 0 0;
}
@media(max-width: 750px) {
#pipeline-4 .full .fixed .rna-receptor {
width:15%;
margin:0 2% 0 0;
}
}
#pipeline-4 .full .fixed .rna-receptor img {
max-width:100%;
height:auto;
}
#pipeline-4 .full .fixed .bars {
width:calc(100% - 280px);
border-top:1px solid #000;
margin:5px 0;
}
@media(max-width: 750px) {
#pipeline-4 .full .fixed .bars {
width:83%;
}
}
#pipeline-4 .full .fixed .bars .row {
width:100%;
border-bottom:1px solid #000;
}
#pipeline-4 .full .fixed .bars .row .label {
font-size:26px;
font-weight:300;
padding:5px 0 0 5px;
color:#451076;
letter-spacing:1px;
}
@media(max-width: 750px) {
#pipeline-4 .full .fixed .bars .row .label {
font-size:21px;
padding:5px 0 5px 5px;
}
}
#pipeline-4 .full .fixed .bars .row .stuff {
width:100%;
display:flex;
}
#pipeline-4 .full .fixed .bars .row .stuff .rna {
width:180px;
margin:10px 10px 0 5px;
}
@media(max-width: 750px) {
#pipeline-4 .full .fixed .bars .row .stuff .rna {
width:16%;
margin:10px 1% 0 0;
}
}
#pipeline-4 .full .fixed .bars .row .stuff .rna img {
max-width:100%;
height:auto;
}
#pipeline-4 .full .fixed .bars .row .stuff .barwrap {
width:calc(100% - 195px);
margin: 0 0 10px;
font-size:17px;
}
@media(max-width: 750px) {
#pipeline-4 .full .fixed .bars .row .stuff .barwrap {
width:83%;
margin: 0 0 10px;
font-size:15px;
}
}
#pipeline-4 .full .fixed .bars .row .stuff .barwrap .purple {
width:100%;
background: rgb(69,16,117);
background: linear-gradient(48deg, rgba(69,16,117,1) 20%, rgba(125,1,126,1) 100%);
margin: 0 0 10px;
}
#pipeline-4 .full .fixed .bars .row .stuff .barwrap .purple.fold {
cursor:pointer;
}
#pipeline-4 .full .fixed .bars .row .stuff .barwrap .purple .heading {
font-size:20px;
color:#fff;
font-weight:700;
padding:15px 20px 0;
}
#pipeline-4 .full .fixed .bars .row .stuff .barwrap .purple .desc {
color:#dbbdf6;
padding:0 20px 10px;
}
#pipeline-4 .full .fixed .bars .row .stuff .barwrap .purple .desc .more,
#pipeline-4 .full .fixed .bars .row .stuff .barwrap .purple .desc .less {
color:#fff;
font-weight:600;
}
#pipeline-4 .full .fixed .bars .row .stuff .barwrap .purple .desc .more svg,
#pipeline-4 .full .fixed .bars .row .stuff .barwrap .purple .desc .less svg{
fill: #fff;
width: 12px;
height: 12px;
}
#pipeline-4 .full .fixed .bars .row .stuff .barwrap .purple .desc p {
margin:0;
padding:5px 0;
}
#pipeline-4 .full .fixed .bars .row .stuff .barwrap .purple .end,
#pipeline-4 .full .fixed .bars .row .stuff .barwrap .purple .long {
display:none;
}
#pipeline-4 .full .fixed .bars .row .stuff .barwrap .purple .desc a {
color:#fff;
font-weight:600;
}
#pipeline-4 .full .fixed .bars .row .stuff .barwrap .purple .desc a:hover {
color:var(--ornge);
font-weight:600;
}
.pl-caption {
font-size:14px;
font-weight:600;
max-width:800px;
margin:15px auto;
}
@media(max-width: 750px) {
.pl-caption {
font-size:12px;
margin:15px 15px;
}
}
#pipeline-5 .full {
position:relative;
width:100%;
background-color:#e2edf0;
}
#pipeline-5 .full .fixed {
color:#3e3a5f;
position:relative;
max-width:800px;
margin:0 auto;
padding:1px 50px 30px;
}
@media(max-width: 750px) {
#pipeline-5 .full .fixed {
padding:1px 20px 20px;
}
}
/* ====================================== DM1 page ============================= */
#dm1-1 {
position:relative;
width:100%;
padding:25px 0 75px 0;
}
#dm1-1 .boxed {
position:relative;
max-width:800px;
margin:0 auto;
padding:0 50px;
text-align: center;
}
@media(max-width: 750px) {
#dm1-1 .boxed {
padding:0 25px;
}
}
#dm1-1 .boxed h2 {
color: var(--pynk);
font-size: 40px;
line-height: 1.2;
font-weight: 700;
margin: 0;
}
@media(max-width: 750px) {
#dm1-1 .boxed h2 {
font-size:22px;
}
}
#dm1-2 {
position:relative;
width:100%;
background-color:#85258d;
background-image:url(images/rsmp-1-bg.jpg);
background-position:center top;
background-size:cover;
background-repeat:no-repeat;
}
@media(max-width: 1100px) {
#dm1-2 {
height:auto;
}
}
#dm1-2 .boxed {
position:relative;
max-width:1200px;
margin:0 auto;
padding:150px 50px 50px;
display:flex;
gap:100px;
color:#ffffff;
font-size:22px;
}
@media(max-width: 1300px) {
#dm1-2 .boxed {
padding:100px 50px 50px;
font-size:20px;
}
}
@media(max-width: 1100px) {
#dm1-2 .boxed {
padding:75px 50px 50px;
font-size:18px;
gap:50px;
}
}
@media(max-width: 750px) {
#dm1-2 .boxed {
padding:75px 25px 75px;
font-size:16px;
flex-wrap:wrap;
gap:10px;
}
}
#dm1-2 .boxed .col-1 {
width:calc(40% - 50px);
}
@media(max-width: 750px) {
#dm1-2 .boxed .col-1 {
width:100%;
}
}
#dm1-2 .boxed .col-2 {
width:60%;
line-height:1.2;
}
@media(max-width: 750px) {
#dm1-2 .boxed .col-2 {
width:100%;
}
}
#dm1-2 .boxed h2 {
color:#ffffff;
font-size:40px;
line-height:1.2;
font-weight:700;
margin:0;
}
@media(max-width: 1100px) {
#dm1-2 .boxed h2 {
font-size:28px;
}
}
@media(max-width: 750px) {
#dm1-2 .boxed h2 {
font-size:22px;
}
}
#dm1-2 .boxed a {
color:#ffffff;
}
#dm1-3 {
position:relative;
width:100%;
background-color:#fff;
}
#dm1-3 .boxed {
position:relative;
max-width:1200px;
margin:0 auto;
padding:50px 50px;
display:flex;
gap:100px;
font-size:22px;
}
@media(max-width: 750px) {
#dm1-3 .boxed {
padding:50px 25px;
font-size:16px;
flex-wrap:wrap;
gap:10px;
}
}
#dm1-3 .boxed .col-1 {
width:calc(40% - 50px);
}
@media(max-width: 750px) {
#dm1-3 .boxed .col-1 {
width:100%;
}
}
#dm1-3 .boxed .col-2 {
width:60%;
line-height:1.2;
}
@media(max-width: 750px) {
#dm1-3 .boxed .col-2 {
width:100%;
}
}
#dm1-3 .boxed .col-2 img {
width:100%;
height:auto;
}
#dm1-3 .boxed h2 {
color: var(--pynk);
font-size:40px;
line-height:1.2;
font-weight:700;
margin:0;
}
@media(max-width: 1100px) {
#dm1-3 .boxed h2 {
font-size:28px;
}
}
@media(max-width: 750px) {
#dm1-3 .boxed h2 {
font-size:22px;
}
}
#dm1-3 .boxed a {
color: var(--pynk);
}
#dm1-4 {
position:relative;
width:100%;
background-color:#fff;
}
#dm1-4 .boxed {
position:relative;
max-width:1200px;
margin:0 auto;
padding:50px 50px;
display:flex;
gap:100px;
font-size:22px;
}
@media(max-width: 750px) {
#dm1-4 .boxed {
padding:50px 25px;
font-size:16px;
flex-wrap:wrap;
gap:10px;
}
}
#dm1-4 .boxed .col-1 {
width:calc(40% - 50px);
}
@media(max-width: 750px) {
#dm1-4 .boxed .col-1 {
width:100%;
}
}
#dm1-4 .boxed .col-2 {
width:60%;
line-height:1.2;
}
@media(max-width: 750px) {
#dm1-4 .boxed .col-2 {
width:100%;
}
}
#dm1-4 .boxed h2 {
color: var(--pynk);
font-size:40px;
line-height:1.2;
font-weight:700;
margin:0;
}
@media(max-width: 1100px) {
#dm1-4 .boxed h2 {
font-size:28px;
}
}
@media(max-width: 750px) {
#dm1-4 .boxed h2 {
font-size:22px;
}
}
#dm1-4 .see {
font-weight:700;
margin:30px 0;
position:relative;
}
#dm1-4 .see a {
display:inline-block;
padding:0;
color: #4b4b4b;
transition:all .3s;
}
#dm1-4 .see a .circ {
display:inline-block;
border:5px solid var(--pynk);
border-radius:50%;
height:12px;
width:12px;
padding:0;
margin:-4px 5px 0 0;
vertical-align: middle;
transition:all .3s;
}
#dm1-4 .see a:hover {
color: var(--ornge);
}
#dm1-4 .see a:hover .circ {
background-color:var(--pynk);
}
/* ====================================== careers page ============================= */
#careers-1 {
position:relative;
width:100%;
height:150px;
background-color:#000;
border-bottom:1px solid #000;
}
#scroller {
position: relative;
}
#scroller .innerScrollArea {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#scroller ul {
padding: 0;
margin: 0;
position: relative;
}
#scroller li {
padding: 0;
margin: 0;
border-left:1px solid #000;
list-style-type: none;
position: absolute;
}
#careers-2 {
position:relative;
width:100%;
padding:1px 0;
background-color:#be9b74;
background-image:url(images/bg-careers-sand.jpg);
background-size:cover;
background-position:right center;
color:#fff;
}
#careers-2 .full {
position:relative;
width:100%;
}
#careers-2 .full .fixed {
position:relative;
max-width:700px;
margin:0 auto;
padding:50px 300px 50px 50px;
}
@media(max-width: 950px) {
#careers-2 .full .fixed {
padding:50px 100px 50px 50px;
}
}
@media(max-width: 750px) {
#careers-2 .full .fixed {
padding:20px;
}
}
#careers-2 .full .fixed h2 {
margin:0 0 10px;
font-size:44px;
line-height:1.2;
font-weight:600;
}
#careers-2 .full .fixed h3 {
margin:0 0 10px;
font-size:27px;
line-height:1.2;
font-weight:600;
}
@media(max-width: 750px) {
#careers-2 .full .fixed h2 {
font-size:28px;
}
#careers-2 .full .fixed h3 {
font-size:20px;
}
}
#careers-3 {
position:relative;
width:100%;
padding:1px 0;
background-color:#3e3a5f;
color:#fff;
}
#careers-3 .full {
position:relative;
width:100%;
}
#careers-3 .full .fixed {
position:relative;
max-width:1200px;
margin:0 auto;
padding:15px 50px;
overflow:hidden;
}
@media(max-width: 750px) {
#careers-3 .full .fixed {
padding:20px;
}
}
#careers-3 .full .fixed .left {
float:left;
width:20%;
margin:0 5% 0 0;
font-size:28px;
font-weight:600;
line-height:1.1;
color:#fc671a;
text-align:center;
text-transform:uppercase;
}
@media(max-width: 950px) {
#careers-3 .full .fixed .left {
font-size:24px;
}
}
@media(max-width: 750px) {
#careers-3 .full .fixed .left {
float:none;
width:100%;
margin:10px 0;
font-size:20px;
}
}
#careers-3 .full .fixed .center {
float:left;
width:50%;
font-size:20px;
color:#fff;
text-align:center;
font-weight:600;
}
@media(max-width: 950px) {
#careers-3 .full .fixed .center {
font-size:17px;
}
}
@media(max-width: 750px) {
#careers-3 .full .fixed .center {
float:none;
width:100%;
margin:10px 0;
font-size:15px;
}
}
#careers-3 .full .fixed .right {
float:left;
width:20%;
margin:0 0 0 5%;
font-size:28px;
font-weight:600;
line-height:1.1;
color:#fc671a;
text-align:center;
text-transform:uppercase;
}
@media(max-width: 950px) {
#careers-3 .full .fixed .right {
font-size:20px;
}
}
@media(max-width: 750px) {
#careers-3 .full .fixed .right {
float:none;
width:100%;
margin:10px 0;
font-size:20px;
}
}
#careers-4 {
position:relative;
width:100%;
padding:1px 0;
background-color:#3f325b;
background-image:url(images/bg-careers-planet.jpg);
background-size:cover;
background-position:center;
color:#fff;
}
#careers-4 .full {
position:relative;
width:100%;
}
#careers-4 .full .fixed {
position:relative;
max-width:1000px;
margin:0 auto;
padding:50px;
overflow:hidden;
}
@media(max-width: 750px) {
#careers-4 .full .fixed {
padding:20px;
}
}
#careers-4 .full .fixed .left {
position:relative;
width:35%;
padding:250px 25% 80px 0;
float:left;
color:#fff;
line-height:1.8;
}
@media(max-width: 950px) {
#careers-4 .full .fixed .left {
padding:220px 25% 0 0;
}
}
@media(max-width: 750px) {
#careers-4 .full .fixed .left {
width:100%;
padding:0;
float:none;
line-height:1.4;
margin:10px 0;
}
}
#careers-4 .full .fixed .left h2 {
font-size:27px;
line-height:1.2;
font-weight:600;
margin:0 0 10px 0;
}
@media(max-width: 750px) {
#careers-4 .full .fixed .left h2 {
font-size:20px;
}
}
#careers-4 .full .fixed .right {
position:relative;
width:40%;
padding:80px 0 100px 0;
float:left;
color:#fff;
}
@media(max-width: 950px) {
#careers-4 .full .fixed .right {
padding:0;
}
}
@media(max-width: 750px) {
#careers-4 .full .fixed .right {
width:100%;
padding:0;
float:none;
margin:20px 0;
}
}
#careers-4 .full .fixed .right h2 {
font-size:40px;
line-height:1.2;
font-weight:600;
margin:0 0 10px 0;
}
#careers-4 .full .fixed .right strong {
font-size:18px;
}
@media(max-width: 750px) {
#careers-4 .full .fixed .right h2 {
font-size:23px;
}
#careers-4 .full .fixed .right strong {
font-size:16px;
}
}
#careers-4 .full .fixed .photos {
position:absolute;
left:10%;
top:50px;
width:45%;
}
@media(max-width: 950px) {
#careers-4 .full .fixed .photos {
top:100px;
}
}
@media(max-width: 750px) {
#careers-4 .full .fixed .photos {
display:none;
}
}
#careers-4 .full .fixed .photos img {
position:absolute;
left:0;
top:0;
width:100%;
height:auto;
}
#careers-5 .full {
position:relative;
width:100%;
background-color:#000;
}
#careers-5 .full .fixed {
position:relative;
width:1000px;
margin:0 auto;
padding:0 0 10px;
text-align:center;
}
@media(max-width: 950px) {
#careers-5 .full .fixed {
width:800px;
}
}
@media(max-width: 750px) {
#careers-5 .full .fixed {
width:100%;
}
}
#careers-5 .full .fixed #bubble1 {
position:absolute;
top:90px;
left:10px;
}
#careers-5 .full .fixed #bubble2 {
position:absolute;
top:150px;
left:328px;
}
#careers-5 .full .fixed #bubble3 {
position:absolute;
top:65px;
left:735px;
}
@media(max-width: 950px) {
#careers-5 .full .fixed .bubbles-bg img {
width:800px;
height:auto;
}
#careers-5 .full .fixed #bubble1 {
top:65px;
left:5px;
}
#careers-5 .full .fixed #bubble2 {
top:110px;
left:265px;
}
#careers-5 .full .fixed #bubble3 {
top:60px;
left:590px;
}
#careers-5 .full .fixed #bubble1 img,
#careers-5 .full .fixed #bubble2 img,
#careers-5 .full .fixed #bubble3 img {
width:192px;
height:192px;
}
}
@media(max-width: 750px) {
#careers-5 .full .fixed .bubbles-bg {
display:none;
}
#careers-5 .full .fixed #bubble1 {
position:relative;
display:inline-block;
margin:0 5px 5px;
top:auto;
left:auto;
}
#careers-5 .full .fixed #bubble2 {
position:relative;
display:inline-block;
margin:0 5px 5px;
top:auto;
left:auto;
}
#careers-5 .full .fixed #bubble3 {
position:relative;
display:inline-block;
margin:0 5px 5px;
top:auto;
left:auto;
}
}
#careers-5 .full .fixed .title {
position:absolute;
top:30px;
left:0;
width:100%;
text-align:center;
color:#fff;
}
#careers-5 .full .fixed .title h2 {
font-size:24px;
line-height:1.2;
font-weight:600;
margin:0;
color:#fff;
}
@media(max-width: 750px) {
#careers-5 .full .fixed .title {
position:relative;
top:auto;
left:auto;
width:auto;
font-size:20px;
padding:10px;
}
#careers-5 .full .fixed .title h2 {
font-size:20px;
}
}
#careers-6 .full {
position:relative;
width:100%;
background-color:#71acc0;
}
#careers-6 .full .fixed {
position:relative;
width:auto;
background-color:#71acc0;
color:#000;
text-align:center;
max-width: 1000px;
margin: 0 auto;
padding: 30px 20px;
}
#careers-6 .full h2 {
margin:0 200px;
line-height:1.1;
font-weight:600;
font-size:24px;
}
@media(max-width: 950px) {
#careers-6 .full h2 {
margin:0 70px 15px;
font-size:22px;
}
}
@media(max-width: 750px) {
#careers-6 .full h2 {
margin:0 20px;
font-size:20px;
}
}
#careers-6 .full .fixed .wrap {
overflow:hidden;
}
#careers-6 .full .fixed .left {
float:left;
width:65%;
margin:0 10% 0 0;
text-align:left;
}
@media(max-width: 750px) {
#careers-6 .full .fixed .left {
float:none;
width:100%;
margin:10px 0;
text-align:center;
font-size:14px;
}
}
#careers-6 .full .fixed .left h3 {
font-size:26px;
font-weight:600;
margin:20px 0 5px 0;
}
@media(max-width: 950px) {
#careers-6 .full .fixed .left h3 {
font-size:21px;
margin:10px 0 5px 0;
}
}
#careers-6 .full .fixed .left .photo {
float:left;
width:150px;
margin:0 10px 0 0;
}
@media(max-width: 750px) {
#careers-6 .full .fixed .left .photo {
float:none;
width:150px;
margin:0 auto;
}
}
#careers-6 .full .fixed .left .photo img {
width:100%;
height:auto;
}
#careers-6 .full .fixed .right {
float:left;
width:25%;
}
@media(max-width: 750px) {
#careers-6 .full .fixed .right {
float:none;
width:100%;
}
}
#careers-6 .full .fixed .right h3 {
font-size:18px;
line-height:1.2;
}
#careers-6 .full .fixed .right img {
width:32%;
max-width:60px;
height:auto;
opacity:.8;
}
#careers-6 .full .fixed .right img:hover {
opacity:1;
}
#careers-7 .full {
position:relative;
width:100%;
background-image:url(images/bg-platform.jpg);
background-position:center bottom;
background-color:#e2edef;
background-size:100% auto;
background-repeat:no-repeat;
padding:0 0 100px 0;
}
#careers-7 .full .fixed {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding: 50px 50px;
text-align:center;
}
@media(max-width: 750px) {
#careers-7 .full .fixed {
padding: 20px;
}
}
#careers-7 .full .fixed h2 {
color:#fc671a;
font-size:28px;
font-weight:600;
margin:0;
}
@media(max-width: 750px) {
#careers-7 .full .fixed h2 {
font-size:22px;
}
}
#careers-7 .full .fixed p.intro {
font-weight:600;
color:#000;
margin:20px 100px;
}
@media(max-width: 950px) {
#careers-7 .full .fixed p.intro {
margin:20px;
}
}
#careers-7 .full .fixed .bubbles {
}
#careers-7 .full .fixed .bubbles img {
width:100%;
height:auto;
}
/* ====================================== Publications page ============================= */
#pubs-1 .boxed {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding: 0 50px 150px;
font-weight:500;
}
@media(max-width: 950px) {
#pubs-1 .boxed {
margin:0 auto;
padding:40px 20px;
}
}
#pubs-1 .boxed .columns {
display:flex;
margin:0 0 25px 0;
}
@media(max-width: 750px) {
#pubs-1 .boxed .columns {
flex-wrap:wrap;
}
}
#pubs-1 .boxed .columns .col-1 {
width:150px;
margin:15px 25px 0 0;
}
@media(max-width: 750px) {
#pubs-1 .boxed .columns .col-1 {
width:150px;
margin:0 auto 25px;
}
}
#pubs-1 .boxed .columns .col-2 {
width:calc(100% - 175px);
}
@media(max-width: 750px) {
#pubs-1 .boxed .columns .col-2 {
width:100%;
}
}
#pubs-1 .boxed .indent {
margin:100px 0 0 175px;
margin:100px 0 0 0;
}
@media(max-width: 750px) {
#pubs-1 .boxed .indent {
margin:50px 0 0 0;
}
}
#pubs-1 .boxed h2 {
font-size:42px;
line-height:1.2;
margin:0 0 20px;
text-align:left;
color:var(--pynk);
font-weight:700;
}
@media(max-width: 750px) {
#pubs-1 .boxed h2 {
font-size:24px;
}
}
#pubs-1 .boxed a {
color:var(--pynk);
}
#pubs-1 .boxed a:hover {
color:#000;
}
/* ====================================== news page ============================= */
#news-1 .boxed {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding: 0 50px 150px;
}
@media(max-width: 950px) {
#news-1 .boxed {
margin:0 auto;
padding:40px 20px;
}
}
#news-1 .boxed h2 {
font-size:42px;
line-height:1.2;
margin:0 0 20px;
text-align:left;
color:var(--ornge);
font-weight:700;
}
@media(max-width: 750px) {
#news-1 .boxed h2 {
font-size:24px;
}
}
#news-1 .boxed .newsRow {
overflow:hidden;
margin:0 0 15px 0;;
}
#news-1 .boxed .newsDate {
font-weight:600;
}
#news-1 .boxed .newsTitle {
}
.pr-back {
font-size:13px;
margin:0 0 25px 0;
}
/* ====================================== contact page ============================= */
#contact-1 {
}
#contact-1 .boxed {
max-width:1000px;
margin:0 auto;
padding: 50px 50px 150px;
display:flex;
gap:5%;
}
@media(max-width: 750px) {
#contact-1 .boxed {
flex-wrap:wrap;
padding: 30px 25px 70px;
}
}
#contact-1 .boxed h2 {
font-size:42px;
margin:0 0 20px;
text-align:left;
color:var(--ornge);
font-weight:700;
}
@media(max-width: 750px) {
#contact-1 .boxed h2 {
font-size:24px;
}
}
#contact-1 .left {
width: 25%;
margin:0 2% 0 0;
}
@media(max-width: 750px) {
#contact-1 .left {
width: 100%;
margin:0 0 30px;
}
}
#contact-1 .left .social {
margin:25px 0 0 0;
}
#contact-1 .left .social svg {
fill:#000;
transition:all .3s;
}
#contact-1 .left .social svg:hover {
fill:var(--ornge);
}
#contact-1 .right {
width: 70%;
margin:0;
}
@media(max-width: 750px) {
#contact-1 .right {
width: 100%;
}
}
/* ====================================== default page ============================= */
#default-1 {
position:relative;
width:100%;
height:420px;
background-color:#13223b;
background-image:url(images/banner-about.jpg);
background-position:left center;
background-size:auto 500px;
background-repeat:no-repeat;
overflow:hidden;
}
#default-1.right { /* right */
background-position:right center;
}
@media(max-width: 1250px) {
#default-1 {
height:380px;
background-size:auto 380px;
}
}
@media(max-width: 950px) {
#default-1 {
height:340px;
background-size:auto 340px;
}
}
@media(max-width: 750px) {
#default-1 {
height:300px;
background-size:auto 300px;
background-position:-100px center;
}
}
#default-1 .left {
position:absolute;
width:500px;
top:130px;
left:50%;
margin:0;
}
#default-1.right .left { /* right */
text-align:left;
left:auto;
right:50%;
top:40px;
}
@media(max-width: 1250px) {
#default-1 .left {
left:auto;
right:50px;
top:110px;
}
#default-1.right .left { /* right */
left:50px;
right:auto;
}
}
@media(max-width: 950px) {
#default-1 .left {
top:90px;
}
#default-1.right .left { /* right */
left:20px;
}
}
@media(max-width: 750px) {
#default-1 .left {
top:40px;
text-align:right;
}
}
#default-1 .left .left-in h1 {
color:#fff;
font-size:36px;
font-weight:600;
}
@media(max-width: 750px) {
#default-1 .left .left-in h1 {
font-size:28px;
}
}
#default-1 .left .left-in h1 a {
color:#fff;
}
#default-1 .left .left-in h1 a:hover {
color:#fc671a;
}
#default-1 .rna {
position:absolute;
top:-20px;
right:-30px;
width:auto;
height:auto;
}
#default-1.right .rna { /* right */
top:auto;
bottom:-50px;
right: auto;
left:-20px;
}
@media(max-width: 1250px) {
#default-1 .rna {
width:475px;
right:-60px;
}
}
@media(max-width: 950px) {
#default-1 .rna {
width:420px;
}
}
@media(max-width: 750px) {
#default-1 .rna {
width:370px;
top:auto;
bottom:-50px;
}
}
#default-1 .rna img {
width:100%;
height:auto;
}
#default-2 .full {
position:relative;
width:100%;
}
#default-2 .full .fixed {
position:relative;
max-width:800px;
margin:0 auto;
padding:50px;
overflow:hidden;
}
@media(max-width: 950px) {
#default-2 .full .fixed {
margin: auto;
padding:20px 20px;
}
}
#default-2 .full .fixed.wide {
max-width:1200px;
}
#default-2 .full h1 {
font-weight:600;
font-size:33px;
line-height:1.2;
}
#default-2 .full h2 {
font-weight:600;
font-size:27px;
line-height:1.2;
}
#default-2 .full h3 {
font-weight:600;
font-size:21px;
line-height:1.2;
}
@media(max-width: 750px) {
#default-2 .full h1 {
font-size:26px;
}
#default-2 .full h2 {
font-size:22px;
}
#default-2 .full h3 {
font-size:17px;
}
}
#default-2 .full .fixed li {
padding:0 0 10px 0;
}
/* ------------ blog ----------------- */
#blog-1 {
position:relative;
width:100%;
height:500px;
background-color:#13223b;
background-image:url(images/DarkMatter.jpg);
background-position:center;
background-size:cover;
}
@media(max-width: 950px) {
#blog-1 {
height:400px;
}
}
@media(max-width: 650px) {
#blog-1 {
height:300px;
}
}
#blog-1 .banner {
position:absolute;
width:100%;
height:100%;
background-position:center;
background-size:cover;
opacity:0;
transition:all .3s;
}
#blog-1 .banner.on {
opacity:1;
}
#blog-1 #b1 {
background-image:url(images/DarkMatter-Fearless.jpg);
}
#blog-1 #b2 {
background-image:url(images/DarkMatter-Science.jpg);
}
#blog-1 #b3 {
background-image:url(images/DarkMatter-culture.jpg);
}
#blog-1 #b4 {
background-image:url(images/DarkMatter-Industry.jpg);
}
#blog-1 .left {
position:absolute;
width:620px;
top:80px;
right:50%;
margin:0 -20px 0 0;
color:#fff;
font-weight:600;
}
@media(max-width: 1250px) {
#blog-1 .left {
right:auto;
left:50px;
top:110px;
}
}
@media(max-width: 950px) {
#blog-1 .left {
top:60px;
left:20px;
}
}
@media(max-width: 650px) {
#blog-1 .left {
top:30px;
width:90%;
}
}
@media(max-width: 550px) {
#blog-1 .left {
top:15px;
width:90%;
font-size:14px;
}
}
@media(max-width: 400px) {
#blog-1 .left {
width:85%;
top:10px;
font-size:13.5px;
line-height:1.25;
}
}
#blog-1 .left .left-in h1 {
color:#fff;
font-size:70px;
line-height:1.1;
font-weight:900;
margin:0 0 20px 0;
text-transform: uppercase;
}
@media(max-width: 650px) {
#blog-1 .left .left-in h1 {
font-size:45px;
}
}
@media(max-width: 550px) {
#blog-1 .left .left-in h1 {
font-size:35px;
margin:0 0 10px 0;
}
}
#blog-filter {
background-color: #2b3850;
}
#blog-filter .inner {
max-width:1200px;
margin:0 auto;
padding:25px;
display:flex;
color:#fff;
font-size:18px;
font-weight:700;
line-height: 1.3;
align-items:center;
justify-content: space-between;
}
@media(max-width: 1050px) {
#blog-filter .inner {
font-size:15px;
align-items:flex-start;
justify-content: space-between;
}
}
@media(max-width: 850px) {
#blog-filter .inner {
flex-wrap:wrap;
}
}
@media(max-width: 850px) {
#blog-filter .inner div {
width:100%;
margin:0 0 10px 0;
}
}
#blog-filter .inner .btn {
color:#4b89a3;
font-size:14px;
font-weight:400;
position:relative;
margin:0 0 0 4%;
padding:0 0 0 22px;
transition: all .3s;
}
@media(max-width: 1050px) {
#blog-filter .inner .btn {
font-size:12px;
margin:0 0 0 4%;
}
}
@media(max-width: 850px) {
#blog-filter .inner .btn {
width:35%;
margin:0 0 10px 0;
}
}
@media(max-width: 550px) {
#blog-filter .inner .btn {
width:90%;
}
}
#blog-filter .inner .btn:hover {
color: #fff;
}
#blog-filter .inner .btn.mixitup-control-active {
color: #fff;
}
#blog-filter .inner div:hover {
cursor:pointer;
}
#blog-filter .inner .btn span {
font-size:24px;
font-weight:700;
text-transform:uppercase;
}
@media(max-width: 1050px) {
#blog-filter .inner .btn span {
font-size:20px;
}
}
#blog-filter .inner .btn span::before {
position: absolute;
display: block;
content: ' ';
width: 8px;
height: 8px;
left: 0;
top: 8px;
border-radius: 10px;
border: 4px solid #4b89a3;
}
@media(max-width: 1050px) {
#blog-filter .inner .btn span::before {
width: 7px;
height: 7px;
top: 7px;
border: 3px solid #4b89a3;
}
}
#blog-intro {
}
#blog-intro .inner {
max-width:1100px;
margin:0 auto;
padding:0 25px;
font-size:18px;
font-weight:400;
}
#blog-intro .inner .blurb {
display:none;
}
#blog-intro .inner .blurb h2 {
font-size:32px;
text-align: center;
}
#blog-intro .inner .clear {
background-color: #707070;
width:150px;
padding:8px 12px;
text-align: center;
color:#fff;
font-size:14px;
text-transform: uppercase;
font-weight: 700;
margin:30px auto 0;
transition: all .3s;
}
#blog-intro .inner .clear:hover {
background-color: #ccc;
cursor:pointer;
}
#blog-2 .full .fixed {
padding:0 20px;
max-width:1100px;
margin:0 auto;
}
#blog-2 .full .fixed .container {
min-height:60vh;
display:flex;
flex-wrap:wrap;
gap:24px;
padding:50px 0;
}
#blog-2 .full .fixed .mix {
width:calc(33% - 16px);
background-color:#ecf3f4;
}
@media(max-width: 950px) {
#blog-2 .full .fixed .mix {
width:calc(50% - 12px);
}
}
@media(max-width: 550px) {
#blog-2 .full .fixed .mix {
width:100%;
}
}
#blog-2 .full .fixed .mix .blog-thumb {
background-color: #ccc;
aspect-ratio:16 / 8.75;
overflow:hidden;
}
#blog-2 .full .fixed .mix .blog-thumb img {
width:100%;
height:auto;
transition: all .3s;
}
#blog-2 .full .fixed .mix:hover .blog-thumb img {
transform: scale(1.04);
}
#blog-2 .full .fixed .mix .topic {
color:#fff;
text-align:center;
background-color: #2b3850;
padding:3px 10px;
}
#blog-2 .full .fixed .mix.fforward .topic {
background-color: #e96f35;
}
#blog-2 .full .fixed .mix.industry .topic {
background-color: #88c077;
}
#blog-2 .full .fixed .mix.science .topic {
background-color: #693586;
}
#blog-2 .full .fixed .mix.culture .topic {
background-color: #065e84;
}
#blog-2 .full .fixed .mix .blog-meta {
padding:10px 20px;
color:#000;
font-size:14px;
line-height:1.2;
}
#blog-2 .full .fixed .mix .blog-meta h2 {
margin:0;
padding:20px 0 10px;
color:#000;
font-size:21px;
line-height: 1.1;
font-weight:700;
text-transform: uppercase;
text-align: center
}
#blog-2 .full .fixed .mix .blog-meta h2 span {
display:block;
font-size:16px;
}
#blog-2 .full .fixed .mix .blog-meta .more {
color: #ccc;
font-size:15px;
font-weight:600;
text-align: center;
padding:0 0 15px;
transition:all .3s;
}
#blog-2 .full .fixed .mix:hover .blog-meta .more {
color: #2b3850;
}
#blog-single .full {
padding:50px 0;
}
#blog-single .full .fixed {
max-width:1000px;
margin:0 auto;
padding:0 50px 0;
}
@media(max-width: 650px) {
#blog-single .full .fixed {
padding:0 20px 0;
}
}
#blog-single .full .fixed h1 {
margin:0;
padding:20px 0 10px;
color:#fc671a;
font-size:28px;
line-height: 1.2;
font-weight:700;
}
#blog-single .full .fixed h1 span {
display:block;
font-size:18px;
font-weight:600;
}
#blog-single .full .fixed .blog-info {
font-size:13px;
}
#blog-single .full .fixed .blog-thumb {
margin:20px 0 30px;
}
#blog-single .full .fixed .blog-thumb img {
width:100%;
height:auto;
}
#default-2 .full .wide h1:first-child {
color: #fc671a;
margin-top:0;
}
#default-2 .full .wide h2 {
margin-bottom:10px;
}
#default-2 .full .wide .sidebar h2:first-child {
margin:0 0 10px;
}
#default-2 .full .wide h3 {
margin-bottom:10px;
}
.blog-caption {
margin-top: -15px;
font-size:95%;
color:#ea7727;
}
.post {
margin:0 0 20px 0;
padding:0 0 15px 0;
border-bottom: 1px solid #c1c1c1;
}
.blog-info {
position:relative;
margin:0 0 25px 0;
overflow:hidden;
color:#3e3a5f;
width:750px;
}
@media(max-width: 750px) {
.blog-info {
width:100%;
margin:0;
}
}
.blog-info-half {
position:relative;
font-size:14px;
width:48%;
margin:0 2% 0 0;
float:left;
overflow:hidden;
}
@media(max-width: 750px) {
.blog-info-half {
font-size:13px;
width:100%;
margin:0 0 15px 0;
float:none;
}
}
.blog-info-img {
width:23%;
max-width:90px;
margin:0 2% 0 0;
float:left;
}
.blog-info-img img {
width: 100%;
height:auto;
}
.blog-info-info {
width:75%;
float:left;
line-height:1.3;
}
.postmetadata {
font-size:14px;
}
.main-col {
float: left;
width:75%;
}
@media(max-width: 750px) {
.main-col {
float: none;
width:auto;
}
}
.main-col img {
max-width:100%;
height:auto;
}
.sidebar {
float: left;
width:22%;
margin:0 0 0 3%;
}
@media(max-width: 750px) {
.sidebar {
float: none;
width:100%;
margin:20px 0;
padding:20px 0 0 0;
border-top:1px solid #c1c1c1;
}
}
.sidebar ul {
margin:0;
padding:0;
list-style:none;
}
.sidebar ul li {
margin:0;
padding:0 0 10px 0;
}
#sidebar h2 {
color: #3e3a5f;
}
/* ====================================== footer ============================= */
.footer {
position:relative;
width:100%;
height:24vw;
background-color:var(--slayt);
color:#fff;
padding:0;
background-image:url(images/footer-bg3.svg);
background-size:100% auto;
background-position:center bottom;
background-repeat: no-repeat;
}
@media(max-width: 950px) {
.footer {
height:450px;
}
}
.footer-in {
position:relative;
padding:50px 50px;
margin:0;
}
@media(max-width: 950px) {
.footer-in {
padding:25px 25px;
text-align:center;
}
}
.footer-in .columns {
position:relative;
display:flex;
}
@media(max-width: 950px) {
.footer-in .columns {
flex-wrap:wrap;
}
}
.footer-in .columns .col-1 {
width:25%;
margin:0 30% 0 0;
}
@media(max-width: 950px) {
.footer-in .columns .col-1 {
width:100%;
margin:0 0 25px 0;
}
}
.footer-in .columns .col-1 .logo {
max-width:350px;
}
@media(max-width: 950px) {
.footer-in .columns .col-1 .logo {
max-width:300px;
margin:0 auto;
}
}
.footer-in .columns .col-2 {
width:15%;
}
@media(max-width: 950px) {
.footer-in .columns .col-2 {
width:100%;
margin:0;
}
}
.footer-in .columns .col-2 div {
padding:0 0 7px 0;
text-transform:uppercase;
font-weight:500;
}
.footer-in .columns .col-2 div span {
text-transform:none;
}
.footer-in .columns .col-3 {
width:15%;
}
@media(max-width: 950px) {
.footer-in .columns .col-3 {
width:100%;
margin:0;
}
}
.footer-in .columns .col-3 div {
padding:0 0 7px 0;
text-transform:uppercase;
font-weight:500;
}
.footer-in .columns .col-4 {
width:15%;
}
@media(max-width: 950px) {
.footer-in .columns .col-4 {
width:100%;
margin:0 0 25px 0;
}
}
.footer-in .columns .col-4 div {
padding:0 0 7px 0;
text-transform:uppercase;
font-weight:500;
}
.footer-in .columns .col-4 div.social {
padding:7px 0 7px 0;
}
.footer-in .columns .col-4 div.social svg {
width:30px;
fill:#fff;
transition:all .3s;
}
.footer-in .columns .col-4 div.social svg:hover {
fill:var(--ornge);
}
.footer-in .columns a {
font-size:16px;
color:#fff;
}
@media(max-width: 950px) {
.footer-in .columns a {
font-size:14px;
}
}
.footer-in .columns a:hover {
color:var(--ornge);
}
.copyright {
position:absolute;
left:50px;
bottom:50px;
font-size:13px;
}
@media(max-width: 950px) {
.copyright {
left:25px;
bottom:25px;
width:calc(100% - 50px);
font-size:12px;
text-align: center;
}
}
#return-to-top {
bottom: 0;
display: none;
height: 32px;
position: fixed;
left:50%;
margin:0 0 0 -44px;
transition: all 0.3s ease 0s;
width: 88px;
z-index: 800;
}
/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.alignright {
float:right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
background-color: #eee;
clip: auto !important;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
/*=== Basic box styling ===*/
.box {
background: #23a3d3;
width: 150px;
height: 70px;
padding: 20px;
text-align: center;
color: white;
border-radius: 7px;
float: left;
margin: 4px;
font-family: 'helvetica';
text-transform: uppercase;
}
/*=== Trigger ===*/
.animate {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/*=== Optional Delays, change values here ===*/
.one {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.two {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.three {
-webkit-animation-delay: 2.3s;
-moz-animation-delay: 2.3s;
animation-delay: 2.3s;
}
.four {
-webkit-animation-delay: 3.3s;
-moz-animation-delay: 3.3s;
animation-delay: 3.3s;
}
/*=== Animations start here ===*/
/*=== FADE IN ===*/
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
/*=== FADE IN DOWN ===*/
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
/*==== FADE IN UP ===*/
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
/*=== FADE IN LEFT ===*/
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
/*==== FADE IN RIGHT ===*/
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@keyframes arw1 {
0%,5% {opacity: 0}
15%, 80% {opacity: 1}
100% {opacity: 0}
}
@keyframes arw2 {
0%,10% {opacity: 0}
20%, 80% {opacity: 1}
100% {opacity: 0}
}
@keyframes arw3 {
0%,15% {opacity: 0}
25%, 80% {opacity: 1}
100% {opacity: 0}
}
.arw1 {
animation: arw1 5s ease infinite;
}
.arw2 {
animation: arw2 5s ease infinite;
}
.arw3 {
animation: arw3 5s ease infinite;
}
/* ======================= FRAUD ALERT BOXES ============================= */
.fraudalert1 {
background-color: #03abbd;
transition:all .3s;
}
.fraudalert1:hover {
background-color: #017d8a;
}
.fraudalert1 a {
font-size:24px;
text-decoration: none;
color:#fff;
text-align:center;
padding:30px;
display: block;
}
.fraudalert2 {
position:absolute;
bottom:-30px;
left:150px;
width:250px;
height:140px;
background-color: #03abbd;
transition:all .3s;
z-index:10;
display:flex;
align-items: center;
}
.fraudalert2:hover {
background-color: #017d8a;
}
.fraudalert2 a {
font-size:20px;
line-height:1.2;
text-decoration: none;
color:#fff;
text-align:left;
padding:15px 20px;
display: block;
}
@media(max-width: 750px) {
.fraudalert2 {
bottom:0;
left:125px;
width:180px;
height:auto;
}
.fraudalert2 a {
font-size:16px;
line-height:1.3;
padding:10px 15px;
}
}
.fraudalert3 {
position:relative;
width:250px;
height:140px;
background-color: #03abbd;
transition:all .3s;
display:flex;
align-items: center;
margin:50px auto;
}
.fraudalert3:hover {
background-color: #017d8a;
}
.fraudalert3 a {
font-size:20px;
line-height:1.2;
text-decoration: none;
color:#fff;
text-align:left;
padding:15px 20px;
display: block;
}
@media(max-width: 750px) {
.fraudalert3 {
width:150px;
height:auto;
}
.fraudalert3 a {
font-size:16px;
line-height:1.3;
padding:10px 15px;
}
}
#fraudnotice {
max-width:900px;
}
#fraudnotice h1 {
line-height:1.1;
}