File: /home/slfopp7cb1df/public_html/css/less/general.less
/*------------------------------------------------------------------
[Table of contents]
1. INPUTS & TEXTAREA styles
2. Common element styles
3. Animation
-------------------------------------------------------------------*/
*:hover {
cursor: default;
}
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-o-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
-o-box-shadow: @shadow;
-ms-box-shadow: @shadow;
box-shadow: @shadow;
}
.transform(@transform) {
-webkit-transform: @transform;
-moz-transform: @transform;
-o-transform: @transform;
-ms-transform: @transform;
transform: @transform;
}
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-o-transition: @transition;
-ms-transition: @transition;
transition: @transition;
}
/*----------------------------------------------------------------------------------
1. INPUTS & TEXTAREA styles
-----------------------------------------------------------------------------------*/
input::-webkit-input-placeholder {font-size: 1em; color: #7C7C7C;}
input::-moz-placeholder {font-size: 1em; color: #7C7C7C;}
input:-moz-placeholder {font-size: 1em; color: #7C7C7C;}
input:-ms-input-placeholder {font-size: 1em; color: #7C7C7C;}
textarea::-webkit-input-placeholder {font-size: 1em; color: #7C7C7C;}
textarea::-moz-placeholder {font-size: 1em; color: #7C7C7C;}
textarea:-moz-placeholder {font-size: 1em; color: #7C7C7C;}
textarea:-ms-input-placeholder {font-size: 1em; color: #7C7C7C;}
input:focus::-webkit-input-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}
input:focus:-moz-placeholder {color: transparent;}
input:focus:-ms-input-placeholder {color: transparent;}
textarea:focus::-webkit-input-placeholder {color: transparent;}
textarea:focus::-moz-placeholder {color: transparent;}
textarea:focus:-moz-placeholder {color: transparent;}
textarea:focus:-ms-input-placeholder {color: transparent;}
input::-webkit-input-placeholder {
opacity: 1;
transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-webkit-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
}
input::-moz-placeholder {
opacity: 1;
transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-webkit-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;}
input:-moz-placeholder {opacity: 1;
transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-webkit-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;}
input:-ms-input-placeholder {opacity: 1;
transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-webkit-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;}
input:focus::-webkit-input-placeholder {opacity: 0;
transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;}
input:focus::-moz-placeholder {opacity: 0;
transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;}
input:focus:-moz-placeholder {opacity: 0;
transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;}
input:focus:-ms-input-placeholder {opacity: 0;
transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;}
input {
border-radius: 0;
&:focus {
outline: 0;
}
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
}
input[type=submit], button {
-webkit-appearance: none;
&:hover {
cursor: pointer;
}
}
input {
&:hover {
cursor: text;
}
}
/*----------------------------------------------------------------------------------
2. Common element styles
-----------------------------------------------------------------------------------*/
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html,body{
-webkit-overflow-scrolling : touch !important;
}
li, a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
div, p, ul, ol, li, header, footer, section, nav, h1, h2, h3, h4, h5, h6, form, article, main, adress {
display: block;
float: left;
width: 100%;
font-size: inherit;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
.transition (all .3s ease-out);
&:hover {
.transition (all .3s ease-out);
}
&:focus {
outline: 0;
}
&:active {
outline: 0;
}
}
button {
display: block;
float: left;
border: 0;
padding: 0;
.transition (all .3s ease-out);
&:focus {
outline: 0;
}
&:active {
outline: 0;
}
&:hover {
.transition (all .3s ease-out);
}
}
a, button {
&:hover {
cursor: pointer;
* {
cursor: pointer;
}
}
}
.wrap {
width: 100%;
max-width: 1300px;
float: none;
margin: 0 auto;
}
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
color: #191919;
font-size: 16px;
&.locked {
overflow: hidden;
&.body-margin.os-windows {
&.chrome-browser,
&.opera-browser {
position: relative;
&:before {
width: 8px;
position: fixed;
right: 0;
top: 0;
bottom: 0;
height: 100%;
content: '';
background: #3D0082;
}
}
}
}
&.pop-up-open {
position: fixed;
left: 0;
right: 0;
}
&.os-windows::-webkit-scrollbar {
width: 8px;
background-color: #3D0082;
}
&.os-windows::-webkit-scrollbar-thumb {
background-color: #02FBE2;
border-radius: 4px;
}
}
.body-margin.os-windows {
.single-page .top_panel {
width: auto;
left: 0;
}
&.chrome-browser,
&.opera-browser {
padding-right: 8px;
.hum_btn {
margin-right: 8px;
}
.modal_form .close {
margin-right: 8px;
}
.single-page .top_panel,
.footer {
right: 8px;
width: auto;
left: 0;
}
}
}
* {
box-sizing: border-box;
}
.scroll-down {
height: 40px;
width: 40px;
position: relative;
float: none;
display: inline-block;
}
.circle {
height: 30px;
width: 30px;
display: block;
border: 2px solid #fff;
border-radius: 100px;
position: absolute;
bottom: 5px;
left: 5px;
z-index: 1;
animation-name:circle;
animation-duration:1s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:normal;
animation-play-state:running;
-webkit-animation-name:circle;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
}
.scroll-arrow {
font-size: 42px;
color: #00baff;
bottom: 27px;
position: absolute;
left: 50%;
margin-left: -10px;
animation-name:arrow;
animation-duration:1s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:normal;
animation-play-state:running;
-webkit-animation-name:arrow;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
background: url(../img/scroll-arrow.svg) center center no-repeat;
background-size: 6px 4px;
display: block;
width: 20px;
height: 20px;
}
.pulse {
margin: 0 auto;
border-radius: 100px;
position: absolute;
left: 5px;
top: 5px;
z-index: 0;
background-color: transparent;
opacity: 0;
width: 30px;
height: 30px;
border: 5px solid #fff;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-o-border-radius: 30px;
-ms-border-radius: 30px;
border-radius: 30px;
/* Giving Animation Function */
-webkit-animation: pulse 1s linear infinite .3s;
-moz-animation: pulse 1s linear infinite .3s;
border-image: initial;
z-index: 3;
animation-delay: .8s;
}
.explore-link {
position: absolute;
width: auto;
height: 40px;
left: 74vh;
transform: translateX(-100%);
z-index: 1;
bottom: 7vh;
&:hover {
cursor: pointer;
* {
cursor: pointer;
}
}
.p {
display: inline-block;
line-height: 40px;
font-size: 17px;
color: rgba(255, 255, 255, .63);
font-weight: 500;
vertical-align: top;
position: relative;
z-index: 1;
margin-right: 10px;
}
}
.filter {
position: absolute;
width: 20px;
height: 20px;
}
.burger {
display: flex;
flex-direction: column;
filter: url(#gooeyness);
}
.rect {
background: #191919;
display: inline-block;
height: 4px;
margin-top: 4px;
transition: transform 500ms;
width: 20px;
&:first-child {
margin-top: 0;
}
}
.rect:nth-child(2) {
transition-delay: 100ms;
}
.rect:nth-child(3) {
transition-delay: 100ms;
}
.burger.active .rect:nth-child(1) {
transform: rotate(-45deg) translateX(-5.7px) translateY(5.7px);
}
.burger.active .rect:nth-child(2) {
transform: rotate(45deg);
}
.burger.active .rect:nth-child(3) {
transform: rotate(-45deg) translateX(5.7px) translateY(-5.7px);
}
.head_btn {
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
position: fixed;
top: 6vh;
left: 5vh;
z-index: 5;
-webkit-box-shadow: 0px 0px 14px 0px rgba(61,0,130,0.13);
-moz-box-shadow: 0px 0px 14px 0px rgba(61,0,130,0.13);
box-shadow: 0px 0px 14px 0px rgba(61,0,130,0.13);
display: block;
&:hover {
cursor: pointer;
* {
cursor: pointer;
}
}
span {
position: absolute;
background: #191919;
width: 9px;
height: 9px;
border-radius: 2px;
display: block;
transition: all .2s ease;
&:nth-child(1) {
top: 13px;
left: 13px;
}
&:nth-child(2) {
top: 13px;
left: 26px;
}
&:nth-child(3) {
bottom: 13px;
left: 13px;
}
&:nth-child(4) {
bottom: 13px;
left: 26px;
}
}
&:hover {
span {
transition: all .2s ease;
&:nth-child(1) {
transform: translateX(-1px) translateY(-1px);
}
&:nth-child(2) {
transform: translateX(1px) translateY(-1px);
}
&:nth-child(3) {
transform: translateX(-1px) translateY(1px);
}
&:nth-child(4) {
transform: translateX(1px) translateY(1px);
}
}
}
}
.hum_btn {
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
padding: 15px 14px;
float: right;
margin-right: 0;
z-index: 7;
position: fixed;
top: 6vh;
right: 5vh;
-webkit-box-shadow: 0px 0px 14px 0px rgba(61,0,130,0.13);
-moz-box-shadow: 0px 0px 14px 0px rgba(61,0,130,0.13);
box-shadow: 0px 0px 14px 0px rgba(61,0,130,0.13);
&:hover {
cursor: pointer;
* {
cursor: pointer;
}
}
.line {
fill:none;
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
stroke:#000;
stroke-width:7.5;
stroke-linecap:round;
}
.ham {
width: 44px;
height: 44px;
top: 2px;
left: 2px;
position: absolute;
transition: all .2s linear;
}
.ham .top {
stroke-dasharray: 40 82;
}
.ham .middle {
stroke-dasharray: 40 111;
}
.ham .bottom {
stroke-dasharray: 40 161;
}
&.is-opened-navi {
.ham {
transform: rotate(45deg);
.top {
stroke-dasharray: 17 82;
stroke-dashoffset: -62px;
}
.middle {
stroke-dashoffset: 23px;
}
.bottom {
stroke-dashoffset: -83px;
}
}
}
}
.onclic {
width: 54px !important;
border: 3px solid #02FBE2;
border-width:3px;
font-size:0;
background: #fff !important;
border-left-color:#3D0082;
animation: rotating 2s 0.25s linear infinite;
&:after {
content:"";
}
&:hover {
color:green;
background: #fff !important;
cursor: default;
}
* {
display: none !important;
}
}
.validate {
font-size:13px;
color: white;
background: #02FBE2 !important;
&:after {
content: '';
background: url(../img/check-mark.svg) center center no-repeat;
background-size: contain;
width: 20px;
height: 14px;
top: 50%;
left: 50%;
margin-top: -7px;
margin-left: -10px;
position: absolute;
}
&:hover {
cursor: default;
}
* {
display: none !important;
}
}
.left-socials {
width: 30px;
position: absolute;
top: 50vh;
transform: translateY(-50%);
z-index: 1;
left: 3vw;
&.black {
a.instagram:before {
background-image: url(../img/instagram-black.svg);
}
a.twitter:before {
background-image: url(../img/twitter-black.svg);
}
a.behance:before {
background-image: url(../img/behance-logo-black.svg);
}
}
a {
display: block;
width: 30px;
height: 30px;
clear: both;
position: relative;
margin: 28px 0;
&:before {
position: absolute;
top: 50%;
left: 50%;
content: '';
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
&.instagram {
&:before {
background-image: url(../img/instagram.svg);
width: 24px;
height: 24px;
margin-top: -12px;
margin-left: -12px;
}
}
&.twitter {
&:before {
background-image: url(../img/twitter.svg);
width: 28px;
height: 24px;
margin-top: -12px;
margin-left: -14px;
}
}
&.behance {
&:before {
background-image: url(../img/behance-logo.svg);
width: 28px;
height: 18px;
margin-top: -9px;
margin-left: -14px;
}
}
}
}
.container {
transition: all .2s linear;
position: relative;
z-index: 1;
margin-bottom: 647px;
background: #fff;
&.blur {
overflow: hidden;
transition: all .2s linear;
}
}
.shape-overlays {
width: 100vw;
height: 100vh;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
}
.shape-overlays.is-opened {
pointer-events: auto;
}
.shape-overlays__path:nth-of-type(1) {
fill: url(#gradient1);
}
.shape-overlays__path:nth-of-type(2) {
fill: url(#gradient2);
}
.shape-overlays__path:nth-of-type(3) {
fill: url(#gradient3);
}
.shape-overlays__path:nth-of-type(4) {
fill: #3D0082;
}
.shape-overlays {
z-index: 6;
}
#preloader_wrap {
position: fixed;
z-index: 100;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #3D0082;
}
#preloader {
position: absolute;
top: 50%;
left: 50%;
z-index: 101;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
opacity: 1;
}
.video {
iframe {
border: 0;
}
}
.error_page {
background: #191919;
height: 100vh;
.wrap {
height: 100%;
.wrap_float {
height: 100%;
.content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
._title {
font-size: 279px;
font-weight: 600;
color: #fff;
text-align: center;
position: relative;
&:before {
content: 'ERROR';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
background-color: #191919;
color: #FFF;
animation: effect 4s infinite linear;
}
&:after {
content: 'ERROR';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
background-color: #191919;
color: #FFF;
animation: effect 4s infinite linear;
}
}
.link {
font-size: 22px;
color: #fff;
text-align: center;
a {
padding-left: 76px;
position: relative;
&:before {
background: url(../img/footer-arrow.svg) center center no-repeat;
width: 60px;
height: 8px;
background-size: contain;
position: absolute;
left: 0;
top: 8px;
content: '';
transform: rotate(180deg);
}
}
}
}
}
}
}
/*----------------------------------------------------------------------------------
3. Animation
-----------------------------------------------------------------------------------*/
.pulse2{
animation-name: pulse2;
-webkit-animation-name: pulse2;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes pulse2 {
0% {
transform: scale(0.9);
}
50% {
transform: scale(1.0);
}
100% {
transform: scale(0.9);
}
}
@-webkit-keyframes pulse2 {
0% {
-webkit-transform: scale(0.95);
}
50% {
-webkit-transform: scale(1.0);
}
100% {
-webkit-transform: scale(0.95);
}
}
@-webkit-keyframes intervalHamburgerBorder {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
80% {
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
100% {
opacity: 0;
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
}
@keyframes intervalHamburgerBorder {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
80% {
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
100% {
opacity: 0;
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
}
@keyframes arrow
{
0% {bottom:0;}
75% {bottom:10px;}
100% {bottom:0;}
}
@-webkit-keyframes arrow
{
0% {bottom:0;}
75% {bottom:10px;}
100% {bottom:0;}
}
@keyframes circle
{
0% {height:30px;}
10% {height: 30px;}
50% {height: 35px;}
75% {height: 40px;}
90% {height: 35px;}
100% {height: 30px;}
}
@-webkit-keyframes circle
{
0% {height:30px;}
10% {height: 30px;}
50% {height: 35px;}
75% {height: 40px;}
90% {height: 35px;}
100% {height: 30px;}
}
@-webkit-keyframes pulse {
0% {-webkit-transform: scale(0); opacity: 0;}
8% {-webkit-transform: scale(0); opacity: 0;}
15% {-webkit-transform: scale(0.1); opacity: 1;}
30% {-webkit-transform: scale(0.5); opacity: 1;}
100% {opacity: 0; -webkit-transform: scale(1.5);}
}
@-moz-keyframes pulse {
0% {-webkit-transform: scale(0); opacity: 0;}
8% {-webkit-transform: scale(0); opacity: 0;}
15% {-webkit-transform: scale(0.1); opacity: 1;}
30% {-webkit-transform: scale(0.5); opacity: 1;}
100% {opacity: 0; -webkit-transform: scale(1.5);}
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left: 41%;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-moz-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
@-moz-keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-moz-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-moz-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-moz-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
@-webkit-keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-webkit-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
@-o-keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
@-webkit-keyframes effect {
0% {
clip:rect(55px, 9999px, 156px, 0);
}
5% {
clip:rect(47px, 9999px, 130px, 0);
}
10% {
clip:rect(33px, 9999px, 136px, 0);
}
15% {
clip:rect(35px, 9999px, 39px, 0);
}
20% {
clip:rect(63%, 9999px, 159px, 0);
}
25% {
clip: rect(96px, 9999px, 198px, 0);
}
30% {
clip: rect(48px, 9999px, 177px, 0);
}
35% {
clip: rect(50px, 9999px, 134px, 0);
}
40% {
clip:rect(60px, 9999px, 172px, 0);
}
45% {
clip: rect(10px, 9999px, 181px, 0);
}
50% {
clip: rect(2px, 9999px, 160px, 0);
}
55% {
clip: rect(23px, 9999px, 289px, 0);
}
60% {
clip: rect(76px, 9999px, 230px, 0);
}
65% {
clip: rect(62px, 9999px, 273px, 0);
}
70% {
clip: rect(60px, 9999px, 273px, 0);
}
75% {
clip: rect(60px, 9999px, 287px, 0);
}
80% {
clip: rect(2px, 9999px, 214px, 0);
}
85% {
clip: rect(28px, 9999px, 287px, 0);
}
90% {
clip: rect(73px, 9999px, 250px, 0);
}
95%{
clip: rect(79px, 9999px, 170px, 0);
}
100% {
clip: rect(17px, 9999px, 179px, 0);
}
}