File: /home/slfopp7cb1df/public_html/css/less/main.less
/*------------------------------------------------------------------
[Table of contents]
MAIN PAGE STYLES
1. Top panel
2. Slider
3. Services
4. Portfolio
5. Info block
6. Awards
7. Contact form
8. Footer
9. Menu
10. Modal form
-------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------
1. Top panel
-----------------------------------------------------------------------------------*/
.top_panel {
position: absolute;
top: 0;
z-index: 1;
top: 6vh;
.logo {
width: 150px;
height: 48px;
background: url(../img/logo.svg) center center no-repeat;
background-size: contain;
margin-left: 10vw;
font-weight: 500;
display: block;
float: left;
}
}
/*----------------------------------------------------------------------------------
2. Slider
-----------------------------------------------------------------------------------*/
.main_slider {
height: 100vh;
overflow: hidden;
position: relative;
.arrow {
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .29);
background: none;
position: absolute;
z-index: 1;
transition: all .2s linear;
&:hover {
cursor: pointer;
}
&.next {
bottom: 7vh;
right: 5vh;
&:before {
width: 40px;
height: 8px;
background: url(../img/arrow-2.svg) left center no-repeat;
background-size: cover;
transform: rotate(180deg);
content: '';
position: absolute;
top: 50%;
right: 20px;
margin-top: -4px;
transition: all .2s linear;
}
&:after {
height: 100vh;
width: 9vw;
position: absolute;
right: -5vh;
bottom: -7vh;
content: '';
}
&:hover {
border-color: #fff;
transition: all .2s linear;
&:before {
width: 21px;
right: 12px;
transition: all .2s linear;
}
}
}
&.prev {
bottom: 7vh;
left: 5vh;
&:before {
width: 40px;
height: 8px;
background: url(../img/arrow-2.svg) left center no-repeat;
background-size: cover;
content: '';
position: absolute;
top: 50%;
left: 20px;
margin-top: -4px;
transition: all .2s linear;
}
&:hover {
border-color: #fff;
transition: all .2s linear;
&:before {
width: 21px;
left: 12px;
transition: all .2s linear;
}
}
}
}
.slider_wrap {
width: 91vw;
.slick-list, .slick-track {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.slick-track{
will-change: transform;
}
.slick-list {
overflow: visible;
}
.slide {
height: 100vh;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
&.video-slide {
position: relative;
.blur .blur_div {
display: none;
}
.video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
video {
object-fit: cover;
width: 100%;
height: 100%;
}
}
}
.blur {
height: 74vh;
width: 74vh;
overflow: hidden;
position: relative;
.bg_color {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: '';
opacity: .3;
filter: contrast(100%);
-webkit-filter: contrast(100%);
-moz-filter: contrast(100%);
}
.blur_div {
filter: blur(15px);
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 90vw;
height: 100vh;
}
}
.content {
position: relative;
z-index: 1;
padding-left: 10vw;
top: 0;
padding-top: 100px;
height: 100%;
.content_wrap {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
position: relative;
&:hover {
.link>span span.link-text {
opacity: 1;
margin-left: 0;
transition: all .4s ease-out;
}
}
}
}
.link {
font-size: 22px;
font-weight: 500;
color: #fff;
position: absolute;
z-index: 1;
bottom: 10vh;
& > span {
padding-left: 140px;
position: relative;
span.link-text {
opacity: 0;
margin-left: 8px;
transition: all .2s ease-out;
}
&:before {
width: 128px;
height: 8px;
background: url(../img/arrow.svg) center center no-repeat;
background-size: contain;
position: absolute;
left: 0;
top: 50%;
margin-top: -4px;
content: '';
}
}
}
.slide_title {
font-size: 2.4vw;
font-weight: 700;
color: #fff;
margin-bottom: 2vh;
}
.slide_subtitle {
font-size: 1.1vw;
color: rgba(255, 255, 255, .6);
}
}
}
.socials {
width: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
left: 3vw;
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;
}
}
}
}
}
/*----------------------------------------------------------------------------------
3. Services
-----------------------------------------------------------------------------------*/
.varieties {
padding: 150px 0;
.title {
font-size: 45px;
font-weight: 700;
color: #191919;
margin-bottom: 80px;
}
.col {
width: 30%;
margin-right: 5%;
display: block;
float: left;
&:hover {
.link>span span.link-text {
opacity: 1;
margin-left: 0;
transition: all .4s ease-out;
}
}
&:nth-child(3n) {
margin-right: 0;
}
._title {
font-size: 28px;
font-weight: 700;
color: #191919;
margin-bottom: 32px;
}
ul {
li {
font-size: 17px;
color: rgba(25, 25, 25, .5);
line-height: 1.6;
margin-bottom: 8px;
}
}
.link {
position: relative;
color: #191919;
font-size: 17px;
font-weight: 500;
display: block;
float: left;
margin-top: 40px;
& > span {
padding-left: 130px;
position: relative;
span.link-text {
opacity: 0;
margin-left: 8px;
transition: all .2s ease-out;
}
&:before {
width: 116px;
height: 8px;
background: url(../img/arrow-black.svg) center center no-repeat;
background-size: contain;
content: '';
left: 0;
top: 50%;
margin-top: -4px;
position: absolute;
}
}
}
}
}
/*----------------------------------------------------------------------------------
4. Portfolio
-----------------------------------------------------------------------------------*/
.portfolio {
.item {
width: 33.3333333%;
display: block;
float: left;
&:hover {
.sq_parent .sq_wrap .sq_content .img {
transform: none;
transition: all 2.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.sq_parent .sq_wrap .sq_content .info {
margin-top: 0;
opacity: 1;
transition: all .2s linear;
}
.sq_parent .sq_wrap .sq_content:before {
opacity: .3;
transition: all .1s linear;
}
}
.sq_parent {
width: 100%;
position: relative;
padding-bottom: 86%;
overflow: hidden;
.sq_wrap {
position: absolute;
width: 100%;
height: 100%;
.sq_content {
float: left;
width: 100%;
height: 100%;
padding: 3vw;
position: relative;
&:before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000000;
content: '';
z-index: 1;
opacity: 0;
transition: all .1s linear;
}
.img {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(1.2);
transition: all .4s ease;
}
.info {
position: relative;
z-index: 1;
margin-top: 40px;
opacity: 0;
transition: all .2s linear;
}
.item-title {
font-size: 27px;
font-weight: 700;
font-style: normal;
color: #fff;
margin-bottom: 22px;
}
.item-category {
font-size: 17px;
color: rgba(255, 255, 255, .65);
}
}
}
}
}
}
/*----------------------------------------------------------------------------------
5. Info block
-----------------------------------------------------------------------------------*/
.info-block {
padding: 150px 0;
color: #8C8C8C;
.wrap_float {
&:hover {
.link>span span.link-text {
opacity: 1;
margin-left: 0;
transition: all .4s ease-out;
}
}
}
p {
font-size: 45px;
font-weight: 700;
}
b, strong {
font-weight: 700;
color: #191919;
}
.link {
position: relative;
//padding-left: 130px;
color: #191919;
font-size: 17px;
font-weight: 500;
display: block;
float: left;
margin-top: 60px;
&:hover {
cursor: pointer;
* {
cursor: pointer;
}
&>span span.link-text {
opacity: 1;
margin-left: 0;
transition: all .4s ease-out;
}
}
& > span {
padding-left: 130px;
position: relative;
span.link-text {
opacity: 0;
margin-left: 8px;
transition: all .2s ease-out;
}
&:before {
width: 116px;
height: 8px;
background: url(../img/arrow-black.svg) center center no-repeat;
background-size: contain;
content: '';
left: 0;
top: 50%;
margin-top: -4px;
position: absolute;
}
}
}
}
/*----------------------------------------------------------------------------------
6. Awards
-----------------------------------------------------------------------------------*/
.awards {
background: #F4F4F4;
padding: 150px 0;
.wrap_float {
&:hover {
.link>span span.link-text {
opacity: 1;
margin-left: 0;
transition: all .4s ease-out;
}
}
}
.title {
font-size: 45px;
font-weight: 700;
color: #191919;
margin-bottom: 80px;
}
.item {
width: 27%;
margin-right: 5%;
&:last-child {
margin-right: 0;
}
.item-logo {
height: 38px;
margin-bottom: 26px;
img {
height: 100%;
}
}
.num {
font-size: 60px;
color: #191919;
width: auto;
margin-right: 15px;
}
.text {
min-height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 17px;
color: rgba(25, 25, 25, .5);
line-height: 1.7;
max-width: 225px;
}
.item-info {
position: relative;
}
}
.link {
position: relative;
color: #191919;
font-size: 17px;
font-weight: 500;
display: block;
float: left;
margin-top: 60px;
& > span {
padding-left: 130px;
position: relative;
span.link-text {
opacity: 0;
margin-left: 8px;
transition: all .2s ease-out;
}
&:before {
width: 116px;
height: 8px;
background: url(../img/arrow-black.svg) center center no-repeat;
background-size: contain;
content: '';
left: 0;
top: 50%;
margin-top: -4px;
position: absolute;
}
}
}
.best {
margin-top: 100px;
&-item {
position: relative;
padding-left: 100px;
border-bottom: 3px solid #E5E5E5;
height: 120px;
&:first-child {
border-top: 3px solid #E5E5E5;
}
.icon {
width: 74px;
height: 74px;
border-radius: 50%;
position: absolute;
left: 0;
top: 21px;
&.bronze {
background: rgb(93,55,28); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(93,55,28,1) 0%, rgba(229,159,107,1) 50%, rgba(156,90,46,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(93,55,28,1) 0%,rgba(229,159,107,1) 50%,rgba(156,90,46,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(93,55,28,1) 0%,rgba(229,159,107,1) 50%,rgba(156,90,46,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d371c', endColorstr='#9c5a2e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
&.gold {
background: rgb(234,184,40); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(234,184,40,1) 0%, rgba(248,239,130,1) 50%, rgba(199,120,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(234,184,40,1) 0%,rgba(248,239,130,1) 50%,rgba(199,120,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(234,184,40,1) 0%,rgba(248,239,130,1) 50%,rgba(199,120,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab828', endColorstr='#c77800',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
&.silver {
background: rgb(139,143,152); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(139,143,152,1) 0%, rgba(247,248,252,1) 50%, rgba(177,181,192,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(139,143,152,1) 0%,rgba(247,248,252,1) 50%,rgba(177,181,192,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(139,143,152,1) 0%,rgba(247,248,252,1) 50%,rgba(177,181,192,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8b8f98', endColorstr='#b1b5c0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
}
&_left {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
height: 114px;
._title {
font-size: 17px;
color: #191919;
margin: 4px 0;
}
._type {
font-size: 17px;
color: #868686;
margin: 4px 0;
}
}
&_right {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
height: 114px;
._category {
color: #868686;
font-size: 17px;
text-align: right;
margin: 4px 0;
}
._title {
font-size: 17px;
color: #191919;
text-align: right;
margin: 4px 0;
}
}
}
}
}
/*----------------------------------------------------------------------------------
7. Contact form
-----------------------------------------------------------------------------------*/
.contacts-form {
padding: 150px 0;
.title {
font-size: 45px;
font-weight: 700;
color: #191919;
margin-bottom: 80px;
}
.form {
.input_wrap {
position: relative;
margin-bottom: 50px;
&:last-child {
margin-bottom: 0;
}
&:before {
height: 3px;
width: 0;
left: 50%;
right: 50%;
background: #191919;
content: '';
position: absolute;
bottom: 0;
transition: all .2s linear;
}
&.focus {
&:before {
left: 0;
right: 0;
width: auto;
transition: all .2s linear;
}
}
}
label {
padding: 0 20px;
display: block;
width: 100%;
line-height: 55px;
font-size: 17px;
transition: all .1s linear;
font-weight: 400;
color: #7C7C7C;
z-index: 1;
&:hover {
cursor: text;
}
&.active {
line-height: 16px;
font-size: 13px;
transition: all .1s linear;
top: -5px;
}
}
.input {
border: 0;
border-bottom: 3px solid #E5E5E5;
display: block;
width: 100%;
font-size: 17px;
font-weight: 400;
height: 55px;
padding: 0 20px;
}
.textarea {
border: 0;
border-bottom: 3px solid #E5E5E5;
display: block;
width: 100%;
font-size: 17px;
font-weight: 400;
height: 110px;
min-height: 110px;
padding: 20px;
resize: vertical;
max-height: 300px;
&:focus {
outline: 0;
}
&:hover {
cursor: text;
}
}
.submit {
width: 200px;
height: 54px;
background: #191919;
border-radius: 27px;
display: block;
text-transform: uppercase;
font-size: 15px;
font-weight: 500;
color: #fff;
margin-top: 40px;
span {
}
}
}
}
/*----------------------------------------------------------------------------------
8. Footer
-----------------------------------------------------------------------------------*/
.footer {
background: #191919;
height: 647px;
position: fixed;
bottom: 0;
left: 0;
&_top {
padding: 150px 0;
&:hover {
.link>span span.link-text {
opacity: 1;
margin-left: 0;
transition: all .4s ease-out;
}
}
}
&_bottom {
padding-bottom: 120px;
}
.title {
font-size: 45px;
font-weight: 700;
color: #fff;
margin-bottom: 50px;
}
.link {
position: relative;
color: #fff;
font-size: 17px;
font-weight: 500;
display: block;
float: left;
margin-top: 30px;
& > span {
padding-left: 80px;
position: relative;
span.link-text {
opacity: 0;
margin-left: 8px;
transition: all .2s ease-out;
}
&:before {
width: 60px;
height: 8px;
background: url(../img/footer-arrow.svg) center center no-repeat;
background-size: contain;
content: '';
left: 0;
top: 50%;
margin-top: -4px;
position: absolute;
}
}
}
.left {
width: auto;
font-size: 18px;
color: #5A5A5A;
}
.copyr {
width: auto;
margin-right: 80px;
}
.contact {
width: auto;
float: right;
a {
font-size: 18px;
color: #fff;
text-decoration: none;
display: block;
float: left;
margin-right: 80px;
&:last-child {
margin-right: 0;
}
}
}
.right {
color: #5A5A5A;
font-size: 18px;
width: auto;
float: right;
a {
color: #fff;
}
}
}
/*----------------------------------------------------------------------------------
9. Menu
-----------------------------------------------------------------------------------*/
.menu {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
z-index: 6;
display: none;
&.opened {
display: block;
opacity: 0;
}
.wrap {
height: 100%;
.wrap_float {
height: 100%;
}
}
.left {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
.mob-socials {
text-align: center;
margin-top: 40px;
display: none;
a {
display: inline-block;
float: none;
width: 30px;
height: 30px;
position: relative;
margin: 0 12px;
&: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;
}
}
}
}
}
.right {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
float: right;
ul {
li {
margin: 5px 0;
a {
font-size: 45px;
font-weight: 700;
color: #fff;
&:hover {
color: #02FBE2;
}
}
&.dropdown_li {
.dropdown_a {
}
ul {
margin-top: 14px;
display: none;
li {
max-width: 245px;
a {
font-size: 23px;
color: #fff;
font-weight: 400;
position: relative;
padding-left: 20px;
transition: all .2s linear;
&:hover {
color: #02FBE2;
transition: all .2s linear;
&:before {
background: #02FBE2;
transition: all .2s linear;
}
}
&:before {
width: 9px;
height: 9px;
background: #fff;
border-radius: 50%;
position: absolute;
content: '';
left: 0;
top: 9px;
transition: all .2s linear;
}
}
}
}
}
}
}
}
.title {
font-size: 45px;
font-weight: 700;
color: #fff;
margin-bottom: 15px;
}
.tel,
.email {
font-size: 18px;
color: #fff;
margin: 8px 0;
a {
display: block;
float: left;
clear: both;
}
}
.link {
position: relative;
padding-left: 80px;
color: #fff;
font-size: 22px;
font-weight: 500;
display: block;
float: left;
margin-top: 80px;
transition: all .2s linear;
&:hover {
color: #02fbe2;
transition: all .2s linear;
&:before {
opacity: 0;
transition: all .2s linear;
}
&:after {
opacity: 1;
transition: all .2s linear;
}
}
&:before {
width: 60px;
height: 8px;
background: url(../img/footer-arrow.svg) center center no-repeat;
background-size: contain;
content: '';
left: 0;
top: 50%;
margin-top: -4px;
position: absolute;
transition: all .2s linear;
}
&:after {
width: 60px;
height: 8px;
background: url(../img/footer-arrow-hover.svg) center center no-repeat;
background-size: contain;
content: '';
left: 0;
top: 50%;
margin-top: -4px;
position: absolute;
opacity: 0;
transition: all .2s linear;
}
&:hover {
cursor: pointer;
}
}
}
/*----------------------------------------------------------------------------------
10. Modal form
-----------------------------------------------------------------------------------*/
.modal_form {
background: rgba(61, 0, 130, 1);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
display: none;
.close {
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
padding: 15px 14px;
float: right;
margin-right: 0;
z-index: 3;
position: absolute;
top: 6vh;
right: 5vh;
&.active {
.ham {
transform: rotate(45deg);
.top {
stroke-dasharray: 17 82;
stroke-dashoffset: -62px;
}
.middle {
stroke-dashoffset: 23px;
}
.bottom {
stroke-dashoffset: -83px;
}
}
}
.line {
fill:none;
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
stroke:#000;
stroke-width:7.5;
stroke-linecap:round;
}
&:hover {
cursor: pointer;
* {
cursor: pointer;
}
}
.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;
}
}
.wrap {
height: 100%;
&_float {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.title {
font-size: 45px;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
}
.form_wrap {
margin-top: 78px;
}
.form {
.input_wrap {
position: relative;
margin-bottom: 50px;
&:before {
height: 3px;
width: 0;
left: 50%;
right: 50%;
background: #E5E5E5;
content: '';
position: absolute;
bottom: 0;
transition: all .2s linear;
}
&.focus {
&:before {
left: 0;
right: 0;
transition: all .2s linear;
width: auto;
}
}
}
label {
padding: 0 20px;
display: block;
width: 100%;
line-height: 55px;
font-size: 25px;
transition: all .1s linear;
font-weight: 400;
color: rgba(255, 255, 255, .58);
&:hover {
cursor: text;
}
&.active {
line-height: 16px;
font-size: 17px;
transition: all .1s linear;
top: -22px;
}
}
.input {
border: 0;
border-bottom: 3px solid rgba(229, 229, 229, .34);
display: block;
width: 100%;
font-size: 25px;
height: 55px;
background: none;
padding: 0 20px;
font-weight: 500;
font-style: italic;
color: #fff;
}
.textarea {
border: 0;
border-bottom: 3px solid rgba(229, 229, 229, .34);
display: block;
width: 100%;
font-size: 25px;
font-weight: 400;
height: 130px;
min-height: 130px;
padding: 20px;
resize: vertical;
max-height: 300px;
background: none;
font-weight: 500;
font-style: italic;
color: #fff;
&:focus {
outline: 0;
}
&:hover {
cursor: text;
}
}
}
.submit {
width: 200px;
height: 54px;
background: #fff;
border-radius: 27px;
display: block;
text-transform: uppercase;
font-size: 15px;
font-weight: 500;
color: #3D0082;
margin-top: 40px;
span:not(.text) {
display: none;
}
}
.success {
display: none;
}
}