html,
body{
margin: 0;
background: white;
}
:focus {
outline: none;
}
*,*:before,*:after {
box-sizing: border-box;
}
a{
color: #1818c1;
position: relative;
}
/*a:hover::before{
left: 0;
width: 100%;
}
a::before{
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
border-bottom: 1px solid white;
}
*/
html {
font-family: "Open Sans", sans-serif;
font-family: "Lato";
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
/* font-weight: 300; */
}
li{
padding-bottom: 5px;
}
.footnote{
font-size: 70%;
padding: 10px 0;
opacity: .7;
}
.sidebar-menu,
.hidden{display:none}
.show{display:block;}
.brand-color-text{color: #1006b7;font-weight: bold;}
body {
margin: 0;
padding: 0;
transition: .5s;
}
.menu-opened body {
overflow: hidden;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.col-2 {
float: left;
width: 50%;
}
.col-3 {
float: left;
width: 33%;
}
.col-left {
float: left;
width: 40%;
}
.col-right {
float: left;
width: 60%;
}
.row:after {
content: "";
display: table;
clear: both;
}
.row.boxed{
max-width: 840px;
margin: auto;
padding: 0 20px;
position: relative;
}
.row.boxed.wide{max-width: 1300px;}
.section{
padding: 150px 0;
position:relative;
min-height: 90vh;
/* box-shadow: 0 0 40px #0000000d; */
}
form input{border: none;border-bottom: 2px solid black;display: block;width: 100%;font-family: inherit;color: rgb(72 73 73);padding: 0px 0px 8px;border: none;outline: none;border-radius: 0px;appearance: none;background-image: none;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;transform: translateZ(0px);font-size: 30px;-webkit-font-smoothing: antialiased;line-height: unset;-webkit-text-fill-color: rgba(0, 84, 80, 0.3);animation: 1ms ease 0s 1 normal none running native-autofill-in;transition: background-color 1e+08s ease 0s, box-shadow 0.1s ease-out 0s;box-shadow: rgb(42 43 43 / 30%) 0px 1px;background-color: transparent !important;margin-bottom: 40px;}
form label{
/* width: 200px; */
display: inline-block;
padding-bottom: 10px;
font-size: 20px;
color: gray;
}
.cookies{
position:fixed;
bottom:0;
width: 100%;
background: #202022;
color: #ffffff;
padding: 2px 5px;
font-size: 11px;
transform: translateY(100%);
transition: 1s 2s ease;
/* line-height: 0; */
}
.cookies .button{
font-size: 10px;
padding: 9px 8px;
border: 1px solid #ffffff47;
border-radius: 40px;
margin: 4px 10px;
color: #ffffff;
display: inline-block;
}
.cookie-note .cookies{transform: translateY(0);}
.no-note .cookies{display:none;}
.cookies.closed{transform: translateY(100%);transition: .5s ease;}
textarea{
display: block;
width: 100%;
}
.page-header{
text-align: center;
color: white;
opacity: 1;
font-weight: bold;
/* text-transform: uppercase; */
/* letter-spacing: .5em; */
/* -webkit-text-stroke-width: 1px; */
color: #ffffff;
/* -webkit-text-stroke-color: white; */
letter-spacing: -0.01em;
font-size: 2.75rem;
letter-spacing: -2px;
opacity: 0;
transform: translateY(20px);
transition: 1s .5s;
margin-top: 19vh;
font-size: 4.5rem;
/* font-size: 10vw; */
}
.on-air .page-header{
opacity: 1;
transform: translateY(0px);
}
.intro-p{
transform: translateY(20px);
transition: 1s 1.3s;
opacity:0;
}
.on-air .intro-p{
opacity: 1;
transform: translateY(0px);
/* filter: blur(0.1px); */
/* filter: blur(15px); */
}
.home .on-air .intro-p{transform:translateY(-30px);/* filter: blur(0.1px); */}
.intro-p b{
color: #ffffff;
}
.why-us.section{
padding: 200px 0;
}
.why-us p{font-size: 24px;color: #000002;max-width: 760px;}
.why-us p b{
color: #0452ce;
}
.why-us .we-are{
text-transform: uppercase;
font-weight: 700;
font-size: 60px;
opacity: .1;
letter-spacing: -4px;
}
.home-main.section-intro{}
.home-main.section-intro a{
font-weight: bold;
color: #090990;
/* background: #ffff0026; */
}
.section.help-you{
background: linear-gradient(to left, #6666ff, #0099ff, #ff3399, #6666ff);
background: #dbdbe6;
/* animation: rainbow_animation 29s ease-in-out infinite; */
/* background-size: 1400% 100%; */
position:relative;
min-height: 90vh;
background: #dfdee4;
}
.section.help-you:before{
content:"";
width:100%;
height:100%;
position:absolute;
top:0;
background-image: url(abstract.png);
background-size: 100%;
background-repeat: no-repeat;
transition: 4s;
opacity:1;
pointer-events: none;
}
.section.help-you .boxed{
max-width: 700px;
}
.visible.section.help-you:before {opacity: 0;}
.section.help-you h3{
font-size: 41px;
color: #ffffff;
margin-bottom: 0;
color: #06006c;
font-size: 2.75rem;
letter-spacing: -2px;
/* background: linear-gradient(to right, #0b0b71, #17237d, #ff3399, #6666ff); */
/* -webkit-background-clip: text; */
background-clip: text;
/* color: transparent; */
/* animation: rainbow_animation 6s ease-in-out infinite; */
/* background-size: 400% 100%; */
}
.section.help-you p{
font-size: 20px;
opacity: .6;
margin-top: 10px;
color: black;
}
@keyframes rainbow_animation {
0%,100% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
}
.header,
.content {
min-height: 100px;
height: 60vh;
}
.header {
color: #ddf;
height: 90vh;
/* display: flex; */
background: #0b063e;
padding: 0 20px;
/* background: #ffc800; */
/* background-image: url(https://images.squarespace-cdn.com/content/v1/549d12fce4b0894648c7003a/1531021213975-D68FGMAN7REJPD0304CZ/ke17ZwdGBToddI8pDm48kKSHvVWv0pZ6Pi6-QUeVAdxZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PI91GJvUdWV1nbScQZTDGhtl9gP8YdCzEmY9N9JZjd2IMKMshLAGzx4R3EDFOm1kBS/fashion-photography-melbourne-australia-daniel-bilsborough-002.jpg?format=1500w); */
background-repeat: no-repeat;
/* background-size: 100%; */
/* background-color: black; */
}
header nav a{
color: white !important;
text-decoration: none;
text-transform: none;
padding: 0 25px;
font-size: 14px;
opacity: .7;
/* font-weight: 300; */
/* font-size: 20px; */
/* font-size: 22px; */
/* font-weight: lighter; */
}
.menu-1{
color: #009dff;
}
.menu-2{
color: #0027ff;
}
.menu-3{
color: #6e00ff;
}
h1 {
font-size: 3rem;
/* letter-spacing: .1ch; */
/* font-weight: 300; */
margin: 0;
/* opacity: .5; */
}
.text-centered{
text-align:center;
}
.canvas-wrap {
max-width: 100%;
overflow: hidden;
position: absolute;
transform: translateY(-50%);
}
canvas {
display: block;
}
.text-light *{
color:white;
}
.button{
color: white;
padding: 20px 17px;
border: 2px solid #eaeaea;
text-decoration: none;
transition: .3s;
display: inline-block;
border-radius: 50px;
font-size: 20px;
font-weight: 400;
background: #02091b;
line-height: 0;
}
.icon{
font-size: 30px;
color: #260ecb;
margin-bottom: 10px;
transform:translate3d(10px,10px,10px);
opacity:0;
transition:1s;
transform: scale(0);
transform-origin: center;
display: none;
}
.on-air .icon{
transform:scale(1);
opacity:1;
color: #7e808c;
}
.intro{
font-weight: 300;
/* font-family: "open sans"; */
font-size: 30px;
/* max-width: 800px; */
margin: auto;
font-weight: bold;
font-size: 60px;
line-height: 1.1em;
margin-top: 24vh;
margin-top:31vh;
color: white;
text-align: center;
/* -webkit-text-stroke-width: 1px; */
/* color: #941d1d00; */
/* -webkit-text-stroke-color: white; */
}
.intro-p{
font-size: 22px;
max-width: 800px;
margin: auto;
text-align: center;
color: #ffffff;
align-self: center;
/* background: linear-gradient(to right, #6666ff, #0099ff, #ff3399, #6666ff); */
/* -webkit-background-clip: text; */
background-clip: text;
/* color: transparent; */
/* animation: rainbow_animation 6s ease-in-out infinite; */
/* background-size: 400% 100%; */
padding-top: 2px;
}
.top{
width: 95%;
margin:auto;
padding: 40px 0 20px 0;
align-items: flex-start;
z-index: 999;
position: relative;
}
.logo{
background: url(logo.png) no-repeat;
/* background: url(logo-blue.png) no-repeat; */
width: 80px;
height: 60px;
background-size: 100%;
float:left;
}
.contact-page .logo{
/* background: url(logo-blue.png) no-repeat; */
background-size:100%;
}
.nav{
float:right;
text-transform:uppercase;
font-weight:bold;
font-size: 15px;
position: relative;
margin-top: -14px;
/* height: 50px; */
/* background: orange; */
}
.nav a{transform: translateY(10px);opacity:0;transition:.5s;display: inline-block;letter-spacing:- 0.01em;}
.on-air .nav a{transform: translateY(0px);opacity:1;}
.on-air .nav .current{
/* opacity: .8; */
text-shadow: 0 0 10px #ffffff73;
}
.nav a:nth-child(1){transition-delay:1.1s}
.nav a:nth-child(2){transition-delay:1.2s}
.nav a:nth-child(3){transition-delay:1.3s}
.nav a:nth-child(4){transition-delay:1.4s}
.lets-talk{
background: #00000073;
padding: 4px 10px;
border-radius: 20px;
border: 2px solid #ffffff5e;
/* line-height: 0; */
transform: scale(.1);
}
.top{
opacity: 0;
transform: translateY(10px);
transition: .4s .4s;
}
.on-air .top{
opacity: 1;
transform: translateY(0px);
}
#canvas{
transform: translateY(50px);
transition: 3s 2s;
}
.on-air #canvas{
opacity: 1;
transform: translateY(0px);
}
/*home text*/
.skylake-we-are-the-best {
text-transform: uppercase;
font-size: 50px;
font-size: 60px;
/* font-size: 3.7vw; */
/* font-size: 78px; */
font-weight: 200;
/* font-weight: 600; */
letter-spacing: -.05em;
letter-spacing: -.05em;
text-align: center;
/* padding-top: 13%; */
/* font-family: Source Sans Pro; */
position: relative;
/* top: 50%; */
margin-top: 30px;
transform: translateY(-50%);
}
.skylake-intro-txt-we,
.skylake-intro-txt-design,
.skylake-intro-txt-experiences,
.skylake-intro-txt-dot{
color: #EFEDED;
transition: 4s .2s;
display: inline-block;
}
.skylake-intro-txt-we span,
.skylake-intro-txt-design span{/* color: #FECF11 !important; */}
.skylake-intro-txt-we .sit-w{color: #F01055;color: #3935ff;}
.skylake-intro-txt-we .sit-e{color: #F01090;color: #143bd0;}
.skylake-intro-txt-design .sit-d{color: #F010A5;transition: .4s;color: #0a2eb7;}
.loaded .skylake-intro-txt-design .sit-d{/* transform: scale(1.2); */display: inline-block;}
.skylake-intro-txt-design .sit-e{color: #F010D9;color: #07279e;}
.skylake-intro-txt-design .sit-s{color: #0b0f92;}
.skylake-intro-txt-design .sit-i{color: #1a0781;}
.skylake-intro-txt-design .sit-g{color: #130b86;}
.skylake-intro-txt-design .sit-n{color: #06145f;}
.skylake-intro-txt-experiences .sit-e{color: #1470F0;}
.skylake-intro-txt-experiences .sit-x{color: #148FF0;}
.skylake-intro-txt-experiences .sit-p{color: #14ADF0;}
.skylake-intro-txt-experiences .sit-e2{color: #14CCF0;}
.skylake-intro-txt-experiences .sit-r{color: #14E0F0;}
.skylake-intro-txt-experiences .sit-i{color: #14F0CD;}
.skylake-intro-txt-experiences .sit-e3{color: #14F0B9;}
.skylake-intro-txt-experiences .sit-n{color: #17F092;}
.skylake-intro-txt-experiences .sit-c{color: #6BF580;}
.skylake-intro-txt-experiences .sit-e4{color: #B2F56F;}
.skylake-intro-txt-experiences .sit-s{color: #D6F680;}
.skylake-intro-txt-experiences span {
transition:.3s .5s;
}
.skylake-intro-txt-experiences span {transform: scale(.8);display:inline-block;transform-origin: center;opacity: 0;/* filter: blur(14px); */}
.on-air .skylake-intro-txt-experiences span {
transform: scale(1);
opacity: 1;
/* filter: blur(0.1px); */
}
.skylake-intro-txt-we,
.skylake-intro-txt-design{
filter: blur(15px);
/* letter-spacing: -2em; */
}
.on-air .skylake-intro-txt-we,
.on-air .skylake-intro-txt-design{
filter: blur(0.1px);
/* letter-spacing: -.04em; */
}
.on-air .skylake-intro-txt-experiences span:nth-child(2){ transition-delay:0s;}
.on-air .skylake-intro-txt-experiences span:nth-child(3){ transition-delay:.1s;}
.on-air .skylake-intro-txt-experiences span:nth-child(4){ transition-delay:.2s;}
.on-air .skylake-intro-txt-experiences span:nth-child(5){ transition-delay:.3s;}
.on-air .skylake-intro-txt-experiences span:nth-child(6){ transition-delay:.4s;}
.on-air .skylake-intro-txt-experiences span:nth-child(7){ transition-delay:.5s;}
.on-air .skylake-intro-txt-experiences span:nth-child(8){ transition-delay:.6s;}
.on-air .skylake-intro-txt-experiences span:nth-child(9){ transition-delay:.7s;}
.on-air .skylake-intro-txt-experiences span:nth-child(10){ transition-delay:.8s;}
.on-air .skylake-intro-txt-experiences span:nth-child(11){ transition-delay:.9s;}
.on-air .skylake-intro-txt-experiences span:nth-child(12){ transition-delay:1s;}
.on-air .skylake-intro-txt-experiences span:nth-child(13){ transition-delay:1.1s;}
@keyframes typeblink {
from{opacity: 0;}
50% { opacity:1 }
to {opacity: 0;}
}
@keyframes typing {
from { left: 0 }
to { left:102% }
}
.simplify-complex {
display: inline-block;
}
.simplify-complex span{
display: inline-block;
transition:1s
}
.simplify-complex span:nth-child(1){transition-delay: 3s;transform: translate(67px, 0px);}
.simplify-complex span:nth-child(2){transition-delay: 3.1s;transform: translate(67px, 0px);}
.simplify-complex span:nth-child(3){transition-delay: 3.2s;transform: translate(10px, 0px);}
.simplify-complex span:nth-child(4){transition-delay: 3.3s;transform: translate(-24px, 0px);}
.simplify-complex span:nth-child(5){transition-delay: 3.4s;transform: translate(-44px, 0px);}
.simplify-complex span:nth-child(6){transition-delay: 3.5s;transform: translate(-10px, 0px);}
.simplify-complex span:nth-child(7){transition-delay: 3.6s;transform: translate(-77px, 0px);}
.visible .simplify-complex span:nth-child(1),
.visible .simplify-complex span:nth-child(2),
.visible .simplify-complex span:nth-child(3),
.visible .simplify-complex span:nth-child(4),
.visible .simplify-complex span:nth-child(5),
.visible .simplify-complex span:nth-child(6),
.visible .simplify-complex span:nth-child(7){
transform: none;
}
.skylake-intro-txt-design {color: #F010A5;/* text-transform: none; */font-weight: bold;}
.skylake-intro-txt-experiences {color: #AA12D5;/* display: none; */position: relative;font-weight: bold;display: block;margin-top: -30px;}
.skylake-intro-txt-experiences span {color: #ffffff !important;letter-spacing:-.06em;}
.skylake-intro-txt-dot {color:#d1d1d1;display: none;}
.skylake-is-typing{
position:absolute;
height: 70%;
width: 3px;
background: #ffffff;
top: 10%;
left: 0;
/* transition: 3s; */
animation: typing 1.1s steps(13, end), /* # of steps = # of characters */ typeblink .6s step-end infinite;
display: none;
}
/*tree*/
.tree.section{
background: #09021c;
/* background-image: url(abstract.png); */
background-size: 100%;
color: white;
}
.my-involvements-tree {}
.tree-section {
position:relative;
padding-bottom: 150px;
}
.tree-section .title {
font-size: 26px !important;
margin-bottom: 10px;
font-weight: bold;
letter-spacing: -0.01em !important;
}
.tree-section p {opacity: .7;}
.tree-section .tree-icon-holder{
position: absolute;
width: 55px;
height: 55px;
background: #e7e9ef;
z-index:1;
top: -10px;
left: -75px;
border-radius: 100%;
border: 2px solid white;
}
.tree-section .tree-icon-holder {
position: absolute;
width: 22px;
height: 22px;
background: #000000;
z-index: 1;
top: 6px;
left: -55px;
border-radius: 100%;
border: 6px solid #2743ff;
}
.tree-section .tree-border{
position: absolute;
top: 25px;
left: -46px;
width:3px;
height:120%;
background:white;
}
.tree-section.final .tree-border{/* height:200%; */}
.tree-section .tree-border:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 0;
transition: 3s 1s;
background: #0a20d1;
filter: blur(4px);
/* opacity: .1; */
}
.visible.tree-section .tree-border:after{
height: 100%;
filter: blur(.1px);
}
.involvement-amount{}
.involvement-amount .ruler{
width:10%;
height:2px;
background: #ffffff;
position:relative;
opacity: 0;
margin:10px 0 20px 0;
transition: 2s 1s;
}
.visible .involvement-amount .ruler{width:100%;opacity: .14;}
.involvement-amount .ruler:before,
.involvement-amount .ruler:after{
content:"";
position:absolute;
height:10px;
width:2px;
background: inherit;
left:0;
top:0;
}
.involvement-amount .ruler:after{left:100%;}
.indicator-container {
/* max-width: none; */
display: flex;
margin: 0 -10px;
column-count: 3;
}
.tree-section .indicator-full,
.tree-section .indicator-mid,
.tree-section .indicator-some{
background: #ffffff0f;
width: 100%;
padding: 10px 20px;
font-size: 14px;
margin: 10px;
border-radius: 15px;
line-height: 1.5em;
font-weight: bold;
box-sizing: border-box;
/* border: 1px solid #e6e1e1; */
color: white;
opacity: 0;
transform: translateY(-20px) scale(.8);
transition: 1s 1s;
}
.tree-section .indicator-container div:nth-child(1){transition-delay:1s;}
.tree-section .indicator-container div:nth-child(2){transition-delay:1.2s;}
.tree-section .indicator-container div:nth-child(3){transition-delay:1.3s;}
.tree-section .indicator-container div:nth-child(4){transition-delay:1.4s;}
.tree-section .indicator-container div:nth-child(5){transition-delay:1.5s;}
.indicator-read-more{
opacity: 0;
transition:1s 1.7s;
}
.visible.tree-section .indicator-read-more,
.visible.tree-section .indicator-full,
.visible.tree-section .indicator-mid,
.visible.tree-section .indicator-some{
opacity: 1;
transform: translateY(0px) scale(1);
}
.indicator-read-more{
padding: 20px 10px;
position: relative;
}
.indicator-read-more a{
color: white;
text-decoration: none;
}
.indicator-read-more span{
transition: .3s;
display: inline-flex;
width: 30px;
height: 30px;
padding: 5px;
/* background: #ffffff2e; */
/* position: absolute; */
/* right: 0; */
/* top: 10px; */
border: 3px solid #ffffff2b;
border-radius: 50px;
line-height: .6em;
align-items: center;
}
.indicator-read-more:hover span{transform:scale(1.2) translateX(4px);border: 3px solid #ffffff;}
/*.tree-section .indicator-mid{width:75%;}
.tree-section .indicator-some{width:45%;}*/
.text-white .sub-info .title{/* color: white; *//* border-bottom: 2px solid white; */}
.text-white p{
color: white;
}
/*end tree*/
.comfy{
background-image:url(help-you-section.png);
background-size:100%;
background-repeat:no-repeat;
background-position:center;
height:300px;
width: 70%;
max-width: 1400px;
margin:auto;
position: absolute;
bottom: -150px;
left: 0;
z-index: 1;
text-align: center;
left: 15%;
}
footer{
background: #040118;
/* BACKGROUND: #06006C; */
color:white;
padding:40px;
}
footer nav{
font-weight:bold;
}
footer nav a{
display:block;
text-decoration:none;
color:white;
transition:.4s;
font-size: 20px;
display: block;
margin-bottom: 10px;
text-transform: uppercase;
}
footer nav a:hover{
/* transform: scale(1.01); */
color: #260ecb;
}
footer address{
font-size: 12px;
}
footer address b{
font-style:normal;
font-size: 120%;
padding-bottom: 3px;
display: inline-block;
}
.hiring{
position: absolute;
z-index: 0;
display: inline-flex;
align-items: center;
padding: 2px 5px;
margin-left: 8px;
background-color: #122ca8;
border-radius: .25rem;
color: #fff;
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
margin-top: 1px;
display: inline-block;
}
.hiring:before {
position: absolute;
top: -1px;
left: 2px;
width: 0;
height: 0;
border-color: transparent #122ca8 transparent transparent;
border-style: solid;
border-width: 10px 6px .5625rem 0;
content: "";
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.title .hiring{
opacity: 1 !important;
width: auto !important;
top: 30px !important;
left: 370px;
position: absolute !important;
margin: 0 !important;
}
.address{
padding-left: 30px;
position: relative;
}
.address img{
position: absolute;
left: -5px;
width: 25px;
margin-top: 4px;
}
.address address{
font-style: normal;
}
.copyright{padding-top: 40px;font-size: 11px;opacity: .7;}
.copyright a{
color: white;
font-size: 110%;
}
.copyright img{
width: 80px;
display: block;
padding-bottom: 5px;
}
#sucess-story{
position: relative;
}
/*mobile menu*/
.menu-toggle{display: none !important;}
/*handheld*/
@media all and (max-width:760px) {
.col-3 {
width: 50%;
/* padding-right: 20px; */
}
.sidebar-menu{display:block}
header nav a{display:none !important}
.menu-toggle{
display: block !important;
width: 50px;
height: 50px;
/* background: orange; */
z-index:999;
position:relative;
}
.menu-toggle .nav-line-1,
.menu-toggle .nav-line-2,
.menu-toggle .nav-line-3{
position:absolute;
background: #ffffff;
height:2px;
width:24px;
border-radius:50px;
-webkit-transition: .4s;
transition: .4s;
display:block; /*todo*/
opacity: .9;
z-index: 11;
}
.menu-toggle .nav-line-1{
top: 17px;
left: 7px;
/* transform: rotate(0deg) scale(1); */
}
.menu-toggle .nav-line-2{
width:18px;
top:24px;
left:7px;
/* transform: rotate(0deg) scale(1); */
}
.menu-toggle .nav-line-3{
top: 31px;
left:7px;
/* transform: rotate(0deg) scale(1); */
}
.menu-opened .nav-line-1{
transform: rotate(45deg) translate(10px, 10px);
}
.menu-opened .nav-line-2{
transform: translateX(-100px);
opacity: 0;
}
.menu-opened .nav-line-3{
transform: rotate(-45deg);
}
.sidebar-menu{
position:fixed;
top: 100px;
left:0;
/* background:#000000d6; */
width:100%;
height: 70%;
z-index: 999;
pointer-events:none;
visibility:hidden;
}
.menu-opened .sidebar-menu{
display:block;
visibility:visible;
}
.sidebar-menu nav{
margin: 0 20px;
z-index: 110;
position: relative;
}
.sidebar-menu a{
display:block;
text-decoration:none;
color:white;
padding:10px 0;
font-size: 40px;
opacity: 0;
transition:.5s;
}
.menu-opened .sidebar-menu {pointer-events:auto;}
.sidebar-menu a{
opacity:.3;
transition:.4s all ease-in-out;
opacity:0;
transform:translate3d(-10px,0,0);
}
.sidebar-menu a:nth-child(1) {
transition-delay:.1s;
}
.sidebar-menu a:nth-child(2) {
transition-delay:0.15s;
}
.sidebar-menu a:nth-child(3) {
transition-delay:0.2s;
}
.sidebar-menu a:nth-child(4) {
transition-delay:0.25s;
}
.sidebar-menu a:nth-child(5) {
transition-delay:0.30s;
}
.sidebar-menu a:nth-child(6) {
transition-delay:0.35s;
}
.menu-opened .sidebar-menu a{
opacity:1;
transform:translate3d(0,0,0);
}
.sidebar-effect div,
.sidebar-effect{
width:50px;
height:50px;
background: #020917;
position: absolute;
left: 0;
border-radius: 100%;
/* opacity: 0; */
transition: .6s;
z-index: 1;
transform: scale(0);
border: 2px solid #0a17c1;
}
.sidebar-effect div{background: #9C27B0;display: none;}
.menu-opened .sidebar-effect{
opacity: 1;
/* width: 100vh; */
/* height: 90vh; */
transform: scale(36);
}
.menu-opened .sidebar-effect div{
opacity: 1;
transform: scale(1);
}
/*footer*/
.section.help-you h3{
font-size: 2rem;
}
.comfy{
width: 100%;
left: 0;
}
/*homepage*/
.ml11 {
font-weight: 700;
font-size: 2em !important;
position: relative !important;
display: block;
letter-spacing: -2px;
}
.section.tree .row.boxed{
padding-left: 70px;
}
.indicator-container {
display: block;
column-count: 1;
}
.tree-section .indicator-full, .tree-section .indicator-mid, .tree-section .indicator-some{
width: auto;
}
}
/*mobile media query*/
@media all and (max-width:600px) {
.col-3 {
width: 100%;
/* padding-right: 20px; */
/* padding-right: 20px; */
}
.col-2{
width:100%;
}
.col-right ,
.col-left {
width: 100%;
}
footer .col-2{
width:50%;
}
.skylake-we-are-the-best{
font-size:50px;
}
.skylake-intro-txt-experiences{
margin-top: -7px;
}
.intro-p {
font-size: 20px;
max-width: 340px;
/* max-width: 800px; */
margin: 20px auto 0 auto;
}
html:not(.home) .intro-p{
margin: 0 auto 0 auto;
}
/*mobile pricing*/
.pricing ul{padding-left: 0;}
.pricing .bg-purple{
padding:0 !important;
}
.pricing button {
border: 1px solid transparent !important;
transition: .4s;
}
.pricing .active { border-top: 5px solid white !important; position: relative;}
.pricing li:before{
content: "";
height: 20px;
width: 20px;
background: inherit;
bottom: 0px;
position: absolute;
left: 43%;
transform: rotate( 45deg);
transition: .3s .5s;
}
.pricing .active:before {
bottom: -10px;
}
.pricing li.active button {
color: rgb(255, 255, 255) !important;
transform: scale(1.3);
}
}
/*end mobile menu*/
/*services*/
.section-intro{
font-size: 18px;
line-height: 1.5;
text-align: left;
max-width: 620px;
margin-top: 15px;
margin-bottom: 50px;
font-size: 20px;
}
.sub-info{
padding-right: 80px;
padding-bottom: 35px;
}
.section .title{font-size: 35px;letter-spacing: -.01em;text-transform: none;margin-bottom: 25px;position: relative;color: #06006C;color: #045be2;font-size: 2.75rem;/* color: #374345; */letter-spacing: -2px;font-size: 4rem;/* color: #ffc800; *//* background: linear-gradient(to right, #0b0b71, #17237d, #ff3399, #6666ff); */}
.sub-info .title{
/* text-transform: uppercase; */
/* border-bottom: 1px solid #000000; */
color: #260ecb;
font-size:20px;
line-height: 1.333;
margin-top: 5px;
font-weight: 900;
font-size: 25px;
letter-spacing: -.03em;
margin-bottom: 10px;
}
.section .title span{/* font-size: 160px; */position: absolute;margin-top: -13%;margin-left: -6%;width: 100px;opacity: .2;top: 166px;/* -webkit-text-stroke-width: 4px; */color: #ffffffc4;display: block;/* -webkit-text-stroke-color: #06006c; *//* width: 150px; */pointer-events: none;display: none;}
.services .section .title{
font-size: 2.6rem;
}
.services .sub-info .title{
font-size: 1.8rem;
}
.sub-info p{
font-size: 18px;
line-height: 1.313;
margin-top: 10px;
font-weight: 400;
opacity: .7;
}
.service-1{
background: #030222;
color: white;
}
.service-2{
background: #01040a;
color: white;
}
.service-3{
background: #0c0624;
color: white;
}
.service-4{
background: #110639;
color: white;
}
/*end services*/
/* about*/
.about header{
/* background-image:url(beach.png); */
/* background-position: -450% 0; */
background-repeat: no-repeat;
background-color: black;
}
.important{
/* border: 2px solid #06006c; */
/* padding: 25px; */
}
.important .title{
/* border-bottom: 2px solid; */
}
.section.our-believes{
background: #0c0633;
color: white;
}
.jobs h3{font-size: 26px;margin: 50px 0;color: #06006C;}
.jobs h3 span{
background: #1b27de;
padding: 1px 6px;
color: white;
font-size: 70%;
border-radius: 4px;
}
.job-title{
font-size: 20px;
color: #3c3c3d;
margin-bottom: 10px;
}
.job-sub{
margin-top: 10px;
display: block;
opacity: .6;
}
.job-description{}
.job-read-more{
margin-right: 20px;
}
.job-apply{
}
.job-entry{
margin-bottom: 60px;
background: #f5f4f8;
box-shadow: 0 0 2px #8080809e;
padding: 40px;
}
.job-description{display:none;}
.expanded .job-description{display:block;}
.expanded .job-read-more{display:none;}
/*end about*/
/*blog*/
.section.blog{
/* background-image: url(blog/heatmap-header.JPG); */
background: #f9f5f5;
padding: 50px 0;
}
.section.blog .boxed{
/* background: #000000; */
max-width: 900px;
background: white;
/* border-radius: 20px; */
padding: 100px;
overflow: hidden;
box-shadow: 0 0 5px #00000014;
color: black;
/* margin: 20px; */
}
.section.blog .title {
font-size: 40px;
color: white;
margin-top: -150px;
margin-bottom: 150px;
}
.section.blog .row .row .title{
font-size: 20px;
}
.blog-read-more{
margin: 20px 0 0 0;
display: inline-block;
background: orange;
}
.blog .artwork{}
/*why shopify*/
.blog.why-shopify{}
.blog.why-shopify .artwork{
background: #24430e;
padding: 190px 280px;
margin: -100px;
}
/*end blog*/
/*contact page*/
.contact-page .header{
background: #ffc800;
/* height: 500px; */
}
.contact-page .page-header{/* color:black; *//* max-width: 700px; *//* margin: auto; *//* text-align: left; */}
.contact-page .intro-p{/* color:black; *//* text-align: left; *//* font-size: 20px; *//* max-width: 700px; *//* padding: 20px 0; *//* font-weight: 300; */}
.contact-page .lets-talk{
/* background: #0507a0; */
}
/*end contact page*/
/*!
* @package IcoFont
* @version 1.0.1
* @author IcoFont https://icofont.com
* @copyright Copyright (c) 2015 - 2021 IcoFont
* @license - https://icofont.com/license/
*/
@font-face
{
font-family: "IcoFont";
font-weight: normal;
font-style: "Regular";
src: url("./fonts/icofont.woff2") format("woff2"),
url("./fonts/icofont.woff") format("woff");
}
[class^="icofont-"], [class*=" icofont-"]
{
font-family: 'IcoFont' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
.icofont-beach:before
{
content: "\ee44";
}
.icofont-island-alt:before
{
content: "\ee4a";
}
.icofont-adjust:before
{
content: "\eea2";
}
.icofont-globe-alt:before
{
content: "\eada";
}
.icofont-electron:before
{
content: "\ead8";
}
.icofont-xs
{
font-size: .5em;
}
.icofont-sm
{
font-size: .75em;
}
.icofont-md
{
font-size: 1.25em;
}
.icofont-lg
{
font-size: 1.5em;
}
.icofont-1x
{
font-size: 1em;
}
.icofont-2x
{
font-size: 2em;
}
.icofont-3x
{
font-size: 3em;
}
.icofont-4x
{
font-size: 4em;
}
.icofont-5x
{
font-size: 5em;
}
.icofont-6x
{
font-size: 6em;
}
.icofont-7x
{
font-size: 7em;
}
.icofont-8x
{
font-size: 8em;
}
.icofont-9x
{
font-size: 9em;
}
.icofont-10x
{
font-size: 10em;
}
.icofont-fw
{
text-align: center;
width: 1.25em;
}
.icofont-ul
{
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.icofont-ul > li
{
position: relative;
line-height: 2em;
}
.icofont-ul > li .icofont
{
display: inline-block;
vertical-align: middle;
}
.icofont-border
{
border: solid 0.08em #f1f1f1;
border-radius: .1em;
padding: .2em .25em .15em;
}
.icofont-pull-left
{
float: left;
}
.icofont-pull-right
{
float: right;
}
.icofont.icofont-pull-left
{
margin-right: .3em;
}
.icofont.icofont-pull-right
{
margin-left: .3em;
}
.icofont-spin
{
-webkit-animation: icofont-spin 2s infinite linear;
animation: icofont-spin 2s infinite linear;
display: inline-block;
}
.icofont-pulse
{
-webkit-animation: icofont-spin 1s infinite steps(8);
animation: icofont-spin 1s infinite steps(8);
display: inline-block;
}
@-webkit-keyframes icofont-spin
{
0%
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%
{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes icofont-spin
{
0%
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%
{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.icofont-rotate-90
{
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.icofont-rotate-180
{
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.icofont-rotate-270
{
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.icofont-flip-horizontal
{
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.icofont-flip-vertical
{
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-webkit-transform: scale(1, -1);
transform: scale(1, -1);
}
.icofont-flip-horizontal.icofont-flip-vertical
{
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-webkit-transform: scale(-1, -1);
transform: scale(-1, -1);
}
:root .icofont-rotate-90,
:root .icofont-rotate-180,
:root .icofont-rotate-270,
:root .icofont-flip-horizontal,
:root .icofont-flip-vertical
{
-webkit-filter: none;
filter: none;
display: inline-block;
}
.icofont-inverse
{
color: #fff;
}
.sr-only
{
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.sr-only-focusable:active,
.sr-only-focusable:focus
{
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*pricing*/
.section.pricing{
padding-bottom: 140px;
background: #0c0229;
color: white;
}
#membership{
margin-top: 89px;
}
.shopify-partners{
/* position: absolute; */
top: 0;
/* left: 80%; */
width: 260px;
margin-left: -7px;
margin-bottom: -20px;
}
.extended-team-p{
/* font-weight: 300; */
font-size: 40px;
margin-bottom: 0;
color: #030f54;
}
.home-artwork{position:relative;height: 400px;margin-top: 60px;}
.home-artwork-p {}
.home-artwork-client {
background: #1608bd;
width: 150px;
padding: 20px;
color: white;
border-radius: 10px;
position: absolute;
top: 41%;
}
.home-artwork-us {}
.home-artwork-us {
background: #1e3ab5;
width: 100px;
height: 100px;
padding: 40px;
border-radius: 10px;
position: absolute;
top: 35%;
left: 50%;
color: white;
transform: rotate(0deg);
transition: 1s;
border: 4px solid #0000002b;
}
.on-air .home-artwork-us {transform: rotate(45deg);}
.home-artwork-ecom{
position: absolute;
top: 10%;
left: 34%;
background: #dfd6d6;
padding: 20px;
border-radius: 10px;
transition: 1s;
transform: translateY(-60px);
background: #ece9f1;
padding: 20px;
border-radius: 10px;
border: 4px solid #00000005;
}
.on-air .home-artwork-ecom{transform:translateY(0px);}
.home-artwork-ecom:before{content:"";width: 2px;height: 40px;background: inherit;position: absolute;left: 50%;top: 90%;}
.home-artwork-ads{
position: absolute;
top: 40%;
left: 74%;
background: #ece9f1;
padding: 20px;
border-radius: 10px;
border: 4px solid #00000005;
}
.home-artwork-ads:before{content:"";width: 40px;height: 2px;background: inherit;position: absolute;left: -20%;top: 50%;}
.home-artwork-maintanance{
position: absolute;
top: 70%;
left: 36%;
padding: 20px;
background: #ece9f1;
padding: 20px;
border-radius: 10px;
border: 4px solid #00000005;
}
.home-artwork-maintanance:before{content:"";width: 2px;height: 40px;background: inherit;position: absolute;left: 50%;top: -50%;}
/* DIRTY Responsive pricing table CSS */
/*
- make mobile switch sticky
*/
.pricing article {
width:100%;
/* max-width:1000px; */
margin:0 auto;
/* height:1000px; */
position:relative;
}
.pricing ul {
display:flex;
top:0px;
z-index:10;
/* padding-bottom:14px; */
/* width: 100%; */
/* display: block; */
}
.pricing li {
list-style:none;
flex:1;
/* width: 20%; */
}
.pricing li:last-child {
border-right: 1px solid #dddddd24;
}
.pricing button {
border: 1px solid #dddddd21;
border-right:0;
border-top:0;
padding: 10px;
background:#FFF;
font-size:14px;
font-weight:bold;
height:60px;
color:#999;
width: 100%;
}
.pricing li.active button {
background:#F5F5F5;
color:#000;
}
.pricing table { border-collapse:collapse; table-layout:fixed; width:100%; }
.pricing th { background:#F5F5F5; display:none; }
.pricing td, .pricing th {
height:53px
}
.pricing td,.pricing th {border: 3px solid #110d29;padding: 10px;empty-cells:show;background: #00000057;}
.pricing td,.pricing th {
text-align:left;
}
.pricing td+td, .pricing th+th {
text-align:center;
display:none;
}
.pricing td.default {
display:table-cell;
}
.pricing .bg-purple {
border-top: 5px solid #000000;
background: #06006c;
color: white;
padding: 25px 10px;
}
.pricing-1 button,
.pricing-1{
background: #002e6c !important;
/* background: #ffffff12 !important; */
color:white;
}
.pricing-2 button,
.pricing-2{
background: #06006c !important;
color:white;
}
.pricing-3 button,
.pricing-3{
background: #070345 !important;
color:white;
}
.pricing-4 button,
.pricing-4{
background: #1e0639 !important;
color:white !important;
}
.pricing .bg-blue {
border-top: 5px solid #000000;
background: #1878bd;
color: white;
/* font-size: 24px; */
}
.pricing .sep {
background: #000000ba;
font-weight:bold;
color: #0539d9;
font-size: 140%;
padding: 20px 10px;
}
.pricing .txt-l {font-size: 21px;font-weight:bold;}
.pricing .txt-top { position:relative; top:-9px; left:-2px; }
.pricing .tick {font-size:18px;color: #ffffff;font-weight: bold;}
.pricing .hide {
border:0;
background:none;
}
.pricing .pricing-info{
display: block;
font-size: 11px;
}
@media (min-width: 640px) {
.pricing ul {
display:none;
}
.pricing td,.pricing th {
display:table-cell !important;
}
.pricing td,.pricing th {
width: 330px;
}
.pricing td+td, .pricing th+th {
width: auto;
}
}
/*privacy policy*/
.privacy-page .header{
background:black;
height: auto;
}
.privacy-page .header h1{
margin-bottom: 50px;
margin-top: 0;
}
.privacy-page .section{
padding: 50px 0;
}
.privacy-page h1{font-size: 35px;margin-top: 0;margin-top: 50px;}
.privacy-page h2{
font-weight: 400;
}
.privacy-page p{
}
.privacy-page li p{
padding:2px 0;
margin: 0;
}
.privacy-page li{
padding: 6px 0;
}
/*end privacy policy*/
/*START contact-us page*/
.contact-form-alert-success,
.contact-form-alert-error {
color:#fe3122;
padding-left:10px;
}
.contact-form-alert-success {
color:#777777;
font-size:18px;
font-size:15px;
display:inline-block;
position: absolute;
bottom: 22px;
left: 90px;
pointer-events: none;
opacity:0;
transition:.4s;
}
.contact-form-alert-success b{
color:#cfcfcf;
font-size:24px;
font-size:19px;
padding-right:5px;
}
.contact-form-alert-success.showing {opacity:1;}
.contact-form-alert-error span {display:inline-block; }
.contact-form-alert-error span:first-letter{
text-transform: uppercase;
}
/*#submit-button:before{
-moz-transition:.8s;
-webkit-transition:.8s;
transition:.8s;
}*/
#submit-button.submit-sucess:before{
transform:translate3d(50px,0,0);
opacity:0;
}
/*END contact-us page*/