// Reset and dependencies @import "components/normalize.less"; // Fonts @import "components/fonts.less"; // Core variables and mixins @import "components/variables.less"; //@import "mixins.less"; // Utility classes @import "components/utilities.less"; @import "components/responsive-utilities.less"; // Core CSS @import "components/global.less"; @import "components/grid.less"; @import "components/typography.less"; @import "components/animations.less"; // Components @import "components/buttons.less"; //@import "components/dropdown.less"; @import "components/toast.less"; @import "components/forms/forms.less"; @import "components/modernizr.less"; // Components w/ JavaScript @import "components/modals.less"; //@import "components/collapsible.less"; @import "components/waves.less"; .msg-success{ position: fixed; bottom:0; right:0; left:0; width:100%; z-index: 1200; background:@violet; color:#fff; padding: 0 15px; height: 150px; text-align: center; font-family: 'latosemibold'; font-weight: 700; font-size: 32px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; flex-direction: column; justify-content: center; } .msg-close{ cursor:pointer; font-size: 24px; height: 24px; width: 24px; position: absolute; top: 50%; right: 25px; margin-top: -12px; opacity: 0.7; &:hover{ opacity: 1 } } @media screen and (max-width: 960px) { .msg-success{ height: 115px; font-size:16px; line-height: 1.3; } .msg-close{ position: static; margin: 0 auto 10px; } } .mt75{ margin-top:75px } /*------------------------------------*\ HEADER \*------------------------------------*/ .logo{ display: block; background-size: cover; font-size: 0; img{ .ib; width: 155px; height: 35px; } &__text{ .ib; color: #000; font-size: 14px; padding-left: 15px; margin: -2px 0 0 15px; border-left: 1px solid #000; b{ display: block; margin-bottom: 6px; font-weight: normal; font-family: 'latobold'; } } } .header{ padding: 55px 0; &__left{ float: left; } &__right{ float: right; } &__phone{ .ib; margin: -5px 25px 0 0; &-nmb{ color: #000; font-family: 'latobold'; font-size: 20px; line-height: 26px; } &-txt{ display: block; font-size: 12px; opacity: 0.7; } } &.fixed{ position: fixed; width: 100%; height: 65px; padding-top: 20px; background: #fff; z-index: 900; .z-depth-1; .reveal; .logo{ width: 128px; height: 25px; img{ display: block; } } .nav{ margin: 4px 5px 0 0; &__link{ color: #000; &:hover{ color: #000; } &:after { background-color: #000; } } } .btn-callback{ height: auto; width: auto; margin: 5px 0 0; border: 0; color: #d40f0f; line-height: 1.1; } } &:after{ display: block; content: ''; .clearfix; } } .nav{ font-size: 0; display: flex; flex-direction: row; align-items: stretch; justify-content:space-between; margin: 0; &__item{ padding-bottom: 30px; margin: 0; &-link{ .ib; font-size: 18px; font-family: 'latobold'; color: #000; &:after { margin-top: 2px; background-color: @red; display: block; content: ""; height: 2px; width: 20px; -webkit-transition: width .3s ease-in-out; -moz--transition: width .3s ease-in-out; transition: width .3s ease-in-out; } &:hover, &.active{ color: @red; } &:hover:after, &.active:after{ width: 100%; } } &.active > a{ color: @red; &:after{ width: 100%; } } } } .btn-callback{ .ib; margin: -6px 30px 0 5px; .btn-sm; width: 150px; } .search { width: 24px; margin: 3px -4px 0 0; display: inline-block; float: right; padding: 0; position: relative; z-index: 10; &__btn { .ib; float: right; position: absolute; top: 0; right: 0; height: 24px; width: 24px; color: #000; background: none; border: none; z-index: 2; cursor: pointer; transition: opacity .4s ease; &:after{ display: block; content: 'search'; font-family: "Material Icons"; .material-icons; font-size: 21px; } &:hover:after{ opacity: 0.7; } &:active, &:focus{ background: #fff; } } } input[type="search"]:hover + .search__btn{ opacity: 0.7 } input[type="search"]:focus + .search__btn{ &:after{ content: 'close'; } } input[type="search"]:focus:hover + .search__btn{ opacity: 1 } input[type="search"] { height: 60px; font-size: 16px; display: inline-block; border: 0; border-radius: 5px; outline: none; color: inherit; padding: 0 40px 0 20px; width: 0px; position: absolute; top: -18px; right: -15px; background: none; z-index: 10; transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000); cursor: pointer; &:focus { width: 665px; z-index: 1; background: #fff; border: 1px solid #e8e8e8; cursor: text; } } .social-mobile{ display: none; } @media only screen and (max-width: 1200px) { .logo__text{ margin-top: 2px; font-size: 12px; } .header__phone{ margin-right: 20px; &-nmb{ font-size: 16px; } } } /*------------------------------------*\ SUBMENU \*------------------------------------*/ .submenu{ display: none; position: absolute; left: 0; right: 0; top: 202px; z-index: 500; background: url('/images/shadow_bottom.png') 0 bottom repeat-x; font-size: 0; overflow: hidden; padding-bottom:17px; &__inner{ position:relative; background: #f0f4f8 url('/images/shadow.png') 0 0 repeat-x; } &__list{ display: none; } a{ display: inline-block; color: #000; font-family: 'latobold'; font-size: 16px; &:after { background-color: #d40f0f; display: block; content: ""; height: 2px; width: 0; -webkit-transition: width .3s ease-in-out; -moz--transition: width .3s ease-in-out; transition: width .3s ease-in-out; } &:hover, &.active{ color: #d40f0f; } &:hover:after, &.active:after{ width: 100%; } } &__column{ display: table-cell; vertical-align: top; width: 33.3333%; padding: 40px 0 55px; &-title{ margin-bottom: 24px; .upp; font-size: 16px; font-family: 'latobold'; opacity: 0.8; } &:first-child{ background: #f0f4f8 url('/images/shadow.png') 0 0 repeat-x; li{ padding-bottom: 22px; margin: 0; position: relative; &:after { opacity: 0; right: 0; top: -2px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-right-color: #e4edf6; border-width: 12px; z-index: 20; } &.active:after{ opacity: 1 } } } &:nth-child(2){ //opacity: 0; background: #e4edf6 url('/images/shadow.png') 0 0 repeat-x; padding-left: 50px; padding-right: 60px; li{ margin-bottom: 18px; } } &:last-child{ //opacity: 0; position: absolute; width: 100%; height: 100%; padding-left: 50px; background: #fff url('/images/shadow.png') 0 0 repeat-x; li{ margin-bottom: 10px; a{ font-size: 14px; font-family: 'latosemibold'; } } } } } /*------------------------------------*\ FOOTER \*------------------------------------*/ .footer { color: #000; background: #fff; font-size: 14px; line-height: 24px; .container{ padding: 45px 0 70px; border-top: 1px solid #dadfe1; } &__logo{ display: block; height: 30px; width: 155px; margin: 5px 0 18px; img{ .responsive-img; } } &__text{ margin-bottom: 28px; color: #000; font-size: 12px; line-height: 1.2; b{ display: block; margin-bottom: 6px; font-weight: normal; font-family: 'latobold'; } } &__copyright { font-size: 12px; line-height: 24px; color:rgba(0,0,0,0.7); } &__info{ margin-bottom: 30px; } } .footer-list{ &__item{ margin-bottom: 8px; font-size: 14px; } } .social{ margin-bottom: 18px; font-size: 0; &__link{ .ib; margin-right: 10px; height: 40px; width: 40px; border-radius: 50%; text-align: center; } } .fb{ background: #3b5998 url(/images/fb.svg) center center no-repeat; background-size: 20px 20px; &:hover{ background: #d40f0f url(/images/fb.svg) center center no-repeat; background-size: 20px 20px; } } .vk{ background: #4d7198 url(/images/vk.svg) center center no-repeat; background-size: 20px 20px; &:hover{ background: #d40f0f url(/images/vk.svg) center center no-repeat; background-size: 20px 20px; } } .tw{ background: #1ea1f2 url(/images/twitter.svg) center center no-repeat; background-size: 20px 20px; &:hover{ background: #d40f0f url(/images/twitter.svg) center center no-repeat; background-size: 20px 20px; } } .yt{ background: #fd001a url(/images/youtube.svg) center center no-repeat; background-size: 20px 20px; &:hover{ background: #d40f0f url(/images/youtube.svg) center center no-repeat; background-size: 20px 20px; } } .super-title{ font-size: 40px; line-height: 1.1; font-family: 'latoheavy'; font-weight: 400; .upp; } .super-title-white{ .super-title; color: #fff; } .red-after(@width){ display: block; content: ''; margin-top: 10px; height: 2px; width: @width; background: #d4145a; } .desk{.ib;} .mob{display: none;} /*------------------------------------*\ BANNER \*------------------------------------*/ .banner{ width: 100%; height: 600px; background: url(/images/head-cover.jpg) top center no-repeat; background-size: cover; .has-shadow; .valign-wrapper; flex-direction: column; justify-content: center; color: #fff; &--sm{ height: auto; min-height: 350px; } &--50vh{ height: 50vh; margin-bottom: 65px; } &--60vh{ height: 60vh; margin-bottom: 70px; } &__text, p{ font-size: 20px; line-height: 30px; &--sm p{ margin-top:15px; font-size: 16px; line-height: 24px; } } &__title, h1, h2{ margin: 0 0 5px; font-family: 'latoheavy'; font-size: 52px; line-height: 1.3; font-weight: normal; .upp; & > p{ font-family: 'latoheavy'; font-size: 52px; line-height: 1.2; font-weight: normal; .upp; } } &--sm, &--50vh, &--60vh{ h1{ font-size: 42px; } } &__inner{ display: table; } &__left{ .tb-cell; width: 66.6666%; padding-right: 50px; } &__right{ .tb-cell; position: absolute; right: 0; bottom: 100px; } } a.banner{ span{ display:block; } &:hover{ color:#fff; } } @media only screen and (max-width: 1200px) { .banner{ &__text, p{ font-size: 18px; } &__title, &__title p, h1{ font-size: 36px; } } } .consult-form{ width: 360px; padding: 30px 30px 40px; box-shadow: 0 5px 20px 0 rgba(0,0,0,0.3); background: #fff; color: #000; &__title{ margin-bottom: 30px; font-family: 'latoblack'; font-size: 21px; line-height: 1.2; text-align: center; } .btn{ margin-top: -5px; } } .skype-ico{ background: #1a86d7 url(/images/skype.svg) center center no-repeat; background-size: 20px 20px; &:hover{ background: #d40f0f url(/images/skype.svg) center center no-repeat; background-size: 20px 20px; } } .viber-ico{ background: #7f40bd url(/images/viber_white.svg) center center no-repeat; background-size: 20px 20px; &:hover{ background: #d40f0f url(/images/viber_white.svg) center center no-repeat; background-size: 20px 20px; } } .telegram-ico{ background: #2498d5 url(/images/telegram_white.svg) 9px center no-repeat; background-size: 20px 20px; &:hover{ background: #d40f0f url(/images/telegram_white.svg) 9px center no-repeat; background-size: 20px 20px; } } .mail-ico{ background: #475ea2 url(/images/mail.svg) center center no-repeat; background-size: 20px 20px; &:hover{ background: #d40f0f url(/images/mail.svg) center center no-repeat; background-size: 20px 20px; } } /*------------------------------------*\ PACK \*------------------------------------*/ .packs{ padding: 45px 0 0; &--pdg{ padding: 72px 0 0; } &__title{ .super-title; margin:0 0.75rem 65px; } &__flex{ display: flex; flex-direction: row; align-items: stretch; justify-content:space-between } &__item{ width: 33.3333%; position: relative; margin: 0 0.75rem 30px; } } .pack{ display: block; min-height: 360px; margin-bottom: 30px; padding: 45px 54px 0; .has-shadow; cursor: pointer; color: #000; span{ .no-animate; } &:before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f0f4f8; } &:after{ display: none; } &:hover{ color: #fff; .pack__title:after{ background: #fff; } } &:hover:before{ display: none; } &:hover:after{ display: block; } &__title{ display: block; font-size: 24px; font-family: 'latoblack'; font-weight: normal; line-height: 1.2; margin-bottom: 20px; &:after{ .red-after(@width:30px); margin-top: 8px; } } &__text{ display: block; p{ font-size: 14px; line-height: 20px; } } } .pack-price{ min-height: 360px; padding: 45px 54px 0; border:5px solid #f0f4f8; color: #000; &__title{ font-size: 24px; font-family: 'latoblack'; font-weight: normal; line-height: 1.2; margin-bottom: 15px; } &__text{ margin-bottom: 25px; font-size: 14px; line-height: 20px; } } @media only screen and (max-width: 1200px) { .pack, .pack-price{ padding: 30px 20px 0; } } /*------------------------------------*\ BENEFIT \*------------------------------------*/ .benefits{ padding: 50px 0 60px; &__title{ margin-bottom: 28px; text-align: center; .super-title; } &__text{ margin-bottom: 40px; text-align: center; font-size: 16px; line-height: 24px; } } .benefit{ position: relative; border-bottom: 1px solid #e5e5e5; font-size: 0; &:last-child{ border-bottom: 0; } &:after{ display: block; content: ''; width: 30px; height: 30px; background: #fff; position: absolute; bottom: -15px; left: 50%; margin-left: -15px; z-index: 5; } &__cell{ display: inline-block; vertical-align: middle; width: 50%; padding: 55px 15px 60px; font-size: 0; &:first-child{ border-right: 1px solid #e5e5e5; } &-wrap{ width: 400px; margin: 0 auto; } &-img{ .ib; width: 90px; margin-right: 25px; text-align: right; img{ .ib; } } &-txt{ .ib; font-size: 14px; line-height: 20px; text-align: left; h2{ margin-bottom: 5px; font-size: 24px; line-height: 1.2; font-family: 'latoblack'; } p{ font-size: 14px; line-height: 20px; } } } } /*------------------------------------*\ CLIENTS \*------------------------------------*/ .clients{ padding: 0 0 90px; &__title{ .super-title; line-height: 40px; text-align: center; margin-bottom: 90px; overflow: hidden; } &__title:before, &__title:after { content: ""; display: inline-block; vertical-align: middle; width: 100%; height: 1px; background-color: #e5e5e5; position: relative; } &__title:before { margin-left: -100%; left: -50px; } &__title:after { margin-right: -100%; right: -50px; } } .clients-scroll { display: block; left: 0; right: 0; overflow: hidden; &__wrapper { left: 0; min-width: 100%; width: 100%; overflow: hidden; } &__list { margin: 0 auto; margin-left: auto; height: inherit; left: 0; right: 0; padding: 0 32px; } img { height: 60px; display: block; position: relative; left: 0; } } /*------------------------------------*\ SERVICE GALLERY \*------------------------------------*/ .services{ position: relative; padding: 85px 0 0; overflow: hidden; & > *{ position: relative; z-index: 5; } &:after{ display: block; content: ''; background: #f0f4f8; height: 100%; width: 100%; position: absolute; left: 0; bottom: 225px; } &__title{ .super-title; margin-bottom: 70px; } &__item{ position: relative; display: block; margin: 0 25px 30px 0; padding: 40px 30px 135px; overflow: hidden; width: 100%; min-height: 440px; background: #fff; border: 1px solid #d2d7db; &--sh{ border: 0; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } h2{ font-size: 24px; line-height: 1.2; margin-bottom: 10px; font-family: 'latoblack'; a{ color: #000; &:hover{ color: #1f3a93; } } } p{ font-size: 14px; line-height: 20px; } &-footer{ position: absolute; bottom: 35px; left: 30px; right: 30px; } &-price{ margin-bottom: 22px; font-family: 'latosemibold'; font-size: 22px; line-height: 1.1; } &-btn{ .btn; display: inline-block; width: 200px; height: 46px; line-height: 46px; } } &--center{ padding:50px 0 40px; &:after{ height: auto; top: 265px; bottom: 240px; } & > *{ text-align: center; } } } .arrow-box, .press-arrow-box{ position: absolute; top: -5px; right: 0; font-size: 0; } .slick-slide{ .services__item{ width: 360px!important; } } .slick-prev, .slick-next{ .ib; position: relative; height: 50px; width: 50px; margin-left: 15px; border-radius: 50%; background: #fff; box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2); cursor: pointer; text-align: center; &:after{ display: inline-block; font-family: "Material Icons"; .material-icons; font-size: 24px; position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -12px; } &:hover,&:active,&:focus{ background: #fff; color: #1f3a93; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2); } } .slick-prev{ &:after{ content: 'arrow_back'; } } .slick-next{ &:after{ content: 'arrow_forward'; } } /*------------------------------------*\ GALLERY \*------------------------------------*/ .gallery{ padding: 50px 0 55px; &__title{ .super-title; margin-bottom: 65px; } &__item{ display: block; margin: 0 30px 30px 0; overflow: hidden; width: 360px!important; color: #000; text-align: left; &:hover{ color: #1f3a93; } img{ .responsive-img; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } &:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } &-img{ position: relative; display: block; margin-bottom: 15px; overflow: hidden; } &-name{ font-family: 'latoblack'; font-size: 24px; line-height: 30px; } } .slick-prev, .slick-next{ margin: 0; position: absolute; z-index: 10; top: 80px; } .slick-prev{ left: 30px; } .slick-next{ right: 30px; } } .photogallery{ opacity: 0 } ul.photogallery{ margin: 0; } .photoswipe-wrapper .slick-slide{ .ib; float:none; } .photoswipe-item{ .gallery__item-img:after, .article__img:after{ display: block; content: ''; width: 50px; height: 50px; position: absolute; left: 50%; top: 50%; margin: -25px 0 0 -25px; background: url('/images/play-video.svg') 0 0 no-repeat; background-size: cover; } } .pswp__zoom-wrap { text-align: center; &:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } } .wrapper { line-height: 0; width: 100%; max-width: 900px; position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .video-wrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; width: 100%; iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } video { width: 100% !important; height: auto !important; } /*------------------------------------*\ FEEDBACK FORM \*------------------------------------*/ .stripe-bottom{ position: relative; & > *{ position: relative; z-index: 5; } &:after{ display: none; content: ''; background: #f0f4f8; height: 50%; width: 100%; position: absolute; left: 0; bottom: 0; } } .stripe-top{ position: relative; padding-bottom: 45px; & > *{ position: relative; z-index: 5; } &:after{ display: block; content: ''; background: #f0f4f8; height: 44%; width: 100%; position: absolute; left: 0; top: 0; } } .fb-form{ padding: 58px 95px 40px 65px; background: #fff; border-left: 3px solid #d4145a; border-right: 3px solid #fbb03b; position: relative; font-size: 0; &:before, &:after { display: block; content: ""; position: absolute; bottom: -3px; left: -3px; right: -3px; height: 3px; background: -moz-linear-gradient(45deg, #d4145a 0%, #fbb03b 100%); background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #d4145a), color-stop(100%, #fbb03b)); background: -webkit-linear-gradient(45deg, #d4145a 0%, #fbb03b 100%); background: -o-linear-gradient(45deg, #d4145a 0%, #fbb03b 100%); background: -ms-linear-gradient(45deg, #d4145a 0%, #fbb03b 100%); background: linear-gradient(45deg, #d4145a 0%, #fbb03b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbb03b', endColorstr='#d4145a',GradientType=1 ); } &:before { top: -3px; } &__left, &__right{ .ib; } &__left{ p{ font-family: 'latosemibold'; font-size: 18px; line-height: 1.2; &:before{ .red-after(@width:50px); top: 0; bottom:auto; margin-bottom: 22px; } } } &__right{ float: right; width: 360px; } &__title{ margin-bottom: 15px; font-family: 'latoblack'; font-size: 40px; line-height: 1.2; .upp; } &__subtitle{ margin-bottom: 15px; font-family: 'latoheavy'; font-size: 32px; line-height: 1.2; } } @media only screen and (max-width: 1200px) { .fb-form{ padding: 58px 30px 40px 30px; } } /*------------------------------------*\ SEO \*------------------------------------*/ .seo{ position: relative; padding: 85px 0 15px; overflow: hidden; & > *{ position: relative; z-index: 5; } &:after{ display: block; content: ''; background: #f0f4f8; height: 100%; width: 100%; position: absolute; left: 0; bottom: 215px; } &__title{ .super-title; margin-bottom: 35px; text-align: center; } &__text{ margin-bottom: 65px; text-align: center; font-size: 16px; line-height: 24px; } &__flex{ display: flex; flex-direction: row; align-items: stretch; justify-content:space-between } &__item{ width: 50%; position: relative; margin: 0 0.75rem 30px; padding: 45px; background: #fff; box-shadow: 0 15px 20px 0 rgba(0,0,0,0.1); font-size: 14px; line-height: 24px; h2{ margin-bottom: 20px; font-size: 24px; line-height: 1.1; font-family: 'latoblack'; } p{ font-size: 14px; line-height: 24px; } } } /*------------------------------------*\ NEWS \*------------------------------------*/ .news-list{ position: relative; padding: 50px 0 30px; overflow: hidden; font-size: 0; & > *{ position: relative; z-index: 5; } &:after{ display: block; content: ''; background: #f0f4f8; height: 100%; width: 100%; position: absolute; left: 0; top: 50px; } &__title{ .super-title; margin: -22px 0 65px; } &__item{ .ib; min-height: 1px; width: 33.3333333333%; padding: 0 0.75rem; margin-bottom: 50px; } } .news{ &__date{ margin-bottom: 12px; font-size: 14px; color: rgba(0,0,0,0.5); &--white{ margin-top: 10px; color: #fff; font-family: 'latosemibold'; opacity: 0.7; } } &__title{ margin-bottom: 8px; font-size: 24px; line-height: 1.2; font-family:@ff-black; a{ color: #000; &:hover{ color: #1f3a93; } } } &__notice{ font-size: 14px; line-height: 20px; } } .all-news, .arrow-link{ display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); padding-right: 70px; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; font-family: 'latosemibold'; color: #000; &:hover{ color: #1f3a93; } &:after { content: ""; position: absolute; top: 3px; right: 0; padding: 0 1px; height: 13px; width: 50px; background: url(/images/arrow-right.svg) 0 0 no-repeat; background-size: cover; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } &:hover:after, &:focus:after, &:active:after { background: url(/images/arrow-right-blue.svg) 0 0 no-repeat; background-size: cover; -webkit-transform: translateX(4px); transform: translateX(4px); } } .all-news{ position: absolute; right: 0; top: 10px; font-size: 20px; &:after{ top: 6px; } } .articles{ font-size:0; &__item{ .ib; width:33.3333%; padding: 0 0.75rem; } } .article{ display: block; margin: 0 0 55px; overflow: hidden; color: #000; &:hover{ color: #1f3a93; } img{ .responsive-img; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } &:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } &__img{ position: relative; display: block; height: auto; margin-bottom: 15px; overflow: hidden; } &__name{ font-family: 'latoblack'; font-size: 24px; line-height: 30px; } } /*------------------------------------*\ SUBSCRIBE \*------------------------------------*/ .bottom{ padding: 60px 0 55px; } .subscribe{ &__title{ .upp; font-size: 18px; font-family: 'latoheavy'; } &__subtitle{ margin: 8px 0 25px; font-size: 16px; } .input-field input{ margin-bottom: 35px; } .input-field .prefix{ top: 12px; font-size: 19px; } } /*------------------------------------*\ PAYMENT \*------------------------------------*/ .payment{ .ib; width: 50%; text-align: center; &__title{ margin-bottom: 65px; .upp; font-size: 18px; font-family: 'latoheavy'; } &__gallery{ width: 50%; margin: 0 auto; .slick-dots{ margin-top: 70px; } } &__item{ margin: 0 10px; } } /*------------------------------------*\ SERVICES \*------------------------------------*/ .service-promo{ padding-bottom: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: left; color: #fff; h2{ font-size: 24px; font-family: 'latoblack'; font-weight: normal; line-height: 30px; margin-bottom: 20px; &:after{ .red-after(@width:30px); margin-top: 20px; background: #fff; } } } /*------------------------------------*\ SERVICE DETAILS \*------------------------------------*/ .breadcrumbs{ margin-bottom: 20px; font-size: 14px; font-family: 'latosemibold'; a{ color: #fff; &:hover{ opacity:0.7 } } } .details{ padding: 65px 0; font-size: 16px; line-height: 24px; &__brd{ position: relative; margin: 55px 0 50px; padding: 40px 40px 10px; border:5px solid #d40f0f; h2{ .ib; font-family: 'latoheavy'; padding: 0 12px 0 10px; background: #fff; position: absolute; top: -16px; left: 22px; &:before, &:after{ display: block; content: ''; position: absolute; top: 10px; height: 10px; width: 6px; background: #fff; transform: rotate(45deg); } &:before{ left: -5px; } &:after{ top:8px; right: -5px; } } ol, ul{ li{ margin-bottom: 14px; } } } &__list{ margin-bottom: 32px; padding-top: 8px; li{ margin-bottom: 16px; } &-img{ .tb-cell; padding-right: 15px; opacity: 0.1; i{ font-size: 74px; } } &-txt{ .tb-cell; font-size: 18px; line-height: 1.2; b, strong{ font-weight: normal; font-family: 'latoblack'; } } } } .spec{ font-size: 0; &__block{ .tb-cell; padding-left: 15px; } &__title{ margin-bottom: 20px; font-family: 'latoblack'; font-size: 24px; } &__img{ position: relative; .tb-cell; height: 100px; width: 100px; border-top: 5px solid #d40f0f; border-right: 5px solid transparent; border-left: 5px solid #d40f0f; border-bottom: 5px solid transparent; transform:rotate(-4deg); border-radius: 50%; img{ width: 100%; border-radius: 50%; transform:rotate(4deg); } } &__name{ margin-bottom: 5px; font-family: 'latoblack'; font-size: 16px; word-wrap: break-word; } &__post p{ font-size: 14px; line-height: 1.2; } } /*------------------------------------*\ TARIFF \*------------------------------------*/ .tariffs{ padding: 70px 0 55px; font-size: 0; position: relative; & > *{ position: relative; z-index: 5; } &:after{ display: block; content: ''; background: #f0f4f8; width: 100%; position: absolute; left: 0; top: 0; bottom: 325px; } &__title{ .super-title; margin-bottom: 95px; text-align: center; } &__item{ position: relative; display: table-cell; vertical-align: top; width: 33.3333%; outline: none; &:first-child .tariff__btn{ right: 48px; } &:last-child{ .tariff{padding-left: 70px;} .tariff__btn{left: 48px;right: 30px;} } } } .tariff { //display: inline-block; vertical-align: middle; position: relative; min-height:500px; padding: 32px 52px; background: #fff; text-align: center; box-shadow: 0 5px 20px 0 rgba(0,0,0,0.10); &--action{ padding: 32px 85px 35px; min-height: 560px; margin: 0 -1.5rem; position: relative; top: -30px; bottom: -30px; z-index: 5; .tariff__btn{ left: 65px; right: 65px; bottom: 34px; } } &__title{ margin-bottom: 8px; font-family:'latosemibold'; p{ margin-bottom: 0; font-size: 24px; line-height: 1.2; } } &__price{ font-family: 'latoblack'; font-size: 22px; margin-bottom: 20px; padding: 0 0 25px; border-bottom: 1px solid #e5e5e5; } &__content{ margin-bottom: 25px; text-align: left; font-size: 16px; } &__btn{ .btn; position: absolute; left: 32px; bottom: 30px; width: auto; font-size: 16px; line-height: 54px; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15); } } @media only screen and (max-width: 1200px) { .tariffs{ &__item{ &:first-child{ .tariff{padding-right: 50px;} } &:last-child{ .tariff{padding-left: 50px;} } } } .tariff{ padding: 30px; } .tariff--action .tariff__btn{ left: 30px; right: 30px; } } .faq-block{ padding: 50px 0 0; font-size: 0; &__title{ .super-title; margin-bottom: 65px; } } .faq{ margin-bottom: 30px; border-radius: 5px; box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1); background: #fff; position: relative; cursor: pointer; &:after{ .animated; position: absolute; top: 25px; right: 26px; display: block; content:'keyboard_arrow_down'; font-family: "Material Icons"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; font-size: 21px; font-weight: normal; opacity: 0.5; } &.opened{ &:after{ transform: rotate(180deg); } } &__name{ .tb-cell; height: 75px; padding: 0 65px 0 30px; font-size: 18px; line-height: 24px; } &__text{ display: none; margin-left: 100px; padding: 0 65px 25px 0; font-size: 14px; line-height: 22px; } } .trust-us{ padding: 0 0 95px; &__title{ .super-title; margin-bottom: 65px; text-align: center; &--left{ margin-bottom: 25px; text-align:left; } } &__txt{ margin: 0 0 65px; } &__item{ width: 165px!important; margin: 0 15px; border:10px solid #f0f4f8; img{ width: 100%; } } .slick-arrow{ position: absolute; top: 50%; margin-top: -25px; z-index: 10; } .slick-prev{left: 25px;} .slick-next{right: 25px;} } /*------------------------------------*\ CONTACTS \*------------------------------------*/ .map{ height: 450px; width: 100%; margin-bottom: 75px; } .map-form{ padding-bottom: 30px; } .map-info{ position: absolute; left: 0; bottom: 128px; z-index: 10; padding: 30px 35px; background: #fff; box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1); p{ margin-bottom: 20px; font-size: 14px; line-height: 24px; &:last-child{ margin-bottom: 0; } } } /*------------------------------------*\ 404 \*------------------------------------*/ .page-404{ .has-shadow; .tb; position: absolute; height: 80%; width: 100%; text-align: center; background: url('/images/404-bg.jpg') center center no-repeat; color: #fff; h1{ margin: 0 0 20px; font-size: 52px; line-height: 1; font-weight: normal; font-family: 'latoblack'; } p{ font-size: 18px; margin-bottom: 25px; } &__inner{ .tb-cell; padding: 0 15px; } &__btn{ .btn; width: 360px; margin: 0 auto; } } .ib4{ .ib; width:33.333333%; padding:0 0.75rem; } .search-title{ margin: 70px 0 35px; font-size: 42px; font-family: 'latoheavy'; .upp; } .searchresult{ margin-bottom: 20px; font-size: 18px; font-family: 'latosemibold'; } /*------------------------------------*\ ABOUT \*------------------------------------*/ .about-txt{ padding: 60px 0 80px; } .about-icon{ font-family: 'latoblack'; line-height: 24px; img{ display: block; margin: 25px 0; } } .about-articles{ padding: 65px 0 75px; &__title{ .super-title; margin-bottom: 60px; } &__inner{ position:relative; padding:0 95px; } &__item{ .ib; } .slick-slide{ margin:0 30px } .slick-arrow{ position:absolute; top:0; z-index:5; margin:0; } .slick-prev{ left:30px } .slick-next{ right:30px } } .about-brd{ position: relative; background: #f0f4f8; &__inner{ position: relative; z-index:5; padding: 30px; border: 1px solid #f0f4f8; background: #fff; &-img{ width: 41.6666%; .tb-cell; } &-txt{ width: 58%; padding-left: 1.5rem; .tb-cell; } h2{ margin: 15px 0 15px 25px; font-family: 'latoblack'; font-size: 24px; line-height: 1.3; } p{ margin: 0 0 15px 45px; font-size: 14px; line-height: 24px; } } &:after{ display: block; content: ''; width: 100%; height: 175px; background: #fff; position: absolute; top: 0; left: 0; right: 0; } } .team{ padding: 70px 0; margin-bottom:70px; background: #f0f4f8; &__title{ .super-title; margin-bottom: 25px; } &__txt{ margin-bottom: 60px; } &__item{ width: 165px!important; margin: 0 15px; text-align: center; img{ .ib; width: 100%; border-radius: 50%; margin-bottom: 15px; } } &__name{ margin-bottom: 4px; font-family: 'latoblack'; font-size: 14px; line-height: 20px; .upp; } &__post{ p{ font-size: 14px; line-height: 18px; } } .slick-arrow{ position: absolute; top: 60px; z-index: 10; } .slick-prev{left: 25px;} .slick-next{right: 25px;} } .press{ &:after{ bottom: 20px; } &__item{ &-img{ width: 50%; .tb-cell; } &-txt{ width: 50%; padding: 25px 0 35px 1.5rem; .tb-cell; } h2{ margin: 0 0 15px; font-family: 'latoblack'; font-size: 24px; line-height: 1.2; } p{ font-size: 14px; line-height: 24px; } a{ .ib; margin-bottom: 12px; font-family: 'latoblack'; .upp; } } } .buffer{ height:45px } .all-news-wrap{ text-align:center; margin:-20px 0 50px; } .all-news--st{ position:static; } .about-articles{ padding-bottom:40px } .contact-us{ position:relative; top:-30px; margin-bottom:55px; &__item{ display:table; width:100%; height:250px; background:#fff; box-shadow:0 5px 20px 0 rgba(0,0,0,0.1); text-align:center; } &__ico{ display:inline-block; margin-bottom:25px; opacity:0.5; } &__img{ display:inline-block; border-radius:50%; height:118px; width:118px; margin-bottom:20px } &__txt{ font-size: 20px; font-family: 'latoheavy'; h5{ margin:0 0 -4px; } span{ display:block; margin-top:8px; font-size: 14px; opacity:0.7; .upp; } a{ color:#000; &:hover{ color:@violet } } } } .gallery--in-press{ padding-bottom:0; margin-bottom: -60px; .gallery__title{ margin-bottom:40px; } .gallery__item{ margin-bottom:15px; } .slick-prev,.slick-next{ top:100px } } .in-press{ .row{ font-size:0; } &__wrap{ .ib; width:25%; padding:0 15px; } &__item{ margin-bottom:45px; &-img{ display:block; height:215px; margin-bottom:20px; } &-date{ margin-bottom: 10px; font-size: 14px; color: rgba(0,0,0,0.7); font-family: 'latosemibold'; } h2{ margin: 0 0 10px; font-family: 'latoblack'; font-size: 18px; line-height: 26px; a{ .ib; color:#000; &:hover{ color:@violet; } } } p{ font-size: 14px; line-height: 24px; } &:hover{ color:#000 } } } .services--video{ padding:55px 0 15px; &:after{ bottom:90px } .gallery__title{ margin-bottom: 45px; } .gallery__item{ width:555px!important; position:relative; } .gallery__item-img{ margin-bottom:0; &:before{ display: block; content: ''; position: absolute; top: 0; left: 0; z-index:1; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } &:after{ height:65px; width:65px; z-index:5; } } .gallery__item-name{ color:#fff; position:absolute; z-index:5; left:15px; right:15px; bottom:25px; text-align:center; font-size:20px; line-height:1.3; } } .present{display:inline-block;padding-left:35px;color:#fff;font-size:14px;text-transform:uppercase;line-height:32px;background:url('/images/files.svg') 0 0 no-repeat; background-size:28px 28px;} .present--mrg{margin-top:10px} .present:hover{color:#fff;opacity:0.7} .video-box{ position: relative; top: 50px; bottom: -50px; max-width: 720px; padding: 40px 50px 30px; background: #fff; box-shadow: 0 5px 20px 0 rgba(0,0,0,0.15); &:before, &:after{ display: block; content: ''; position: absolute; background: @red; } &:before{ bottom: -5px; right: 0; left: 5px; height: 5px; } &:after{ bottom: -5px; right: -5px; top: 5px; width: 5px; } h3{ margin-bottom: 20px; font-size: 24px; font-family: 'latoblack'; text-transform: uppercase; color: #000; } ul{ margin-bottom: 25px; li{ margin-bottom: 15px; font-family: 'latosemibold'; font-size: 16px; color: #000; &:before{ display: inline-block; vertical-align: middle; margin: -5px 8px 0 0; content: 'check'; font-family: "Material Icons"; .material-icons; font-size: 21px; color: @red; } } } h5{ margin-bottom: 10px; font-family: 'latobold'; font-size: 18px; color: rgba(0,0,0,0.7); } .gallery__item{ width: 450px !important; margin: 0 10px 10px; box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2); } .gallery__item-img{ margin: 0; } .photoswipe-wrapper{ margin-left: -10px; } } @media only screen and (max-width: 1160px) { .video-box{ .gallery__item{ width: 370px !important; } } } .why-box{ h3{ margin-bottom: 25px; font-size: 24px; font-family: 'latoblack'; text-transform: uppercase; } li{ position: relative; padding-left: 50px; margin-bottom: 25px; font-family: 'latobold'; font-size: 18px; color: #000; &:last-child{ margin-bottom: 0; } img{ display: block; height: 30px; position: absolute; left: 0; top: -2px; } } } .client-box{ margin-bottom: 50px; padding: 0 50px 30px; box-shadow: 0 15px 20px 0 rgba(0,0,0,0.08); h3{ margin:-15px 0 35px; font-size: 24px; font-family: 'latoblack'; } ul{ margin-bottom: 0; li{ position: relative; padding-left: 50px; margin-bottom: 30px; font-family: 'latosemibold'; font-size: 16px; color: #000; &:last-child{ margin-bottom: 0; } &:before{ display: inline-block; content: ''; position: absolute; left: 0; top: -2px; height: 30px; width: 30px; background: url(/images/verified.svg) 0 0 no-repeat; background-size: cover; } } } } .stage-box{ h3{ margin-bottom: 45px; font-size: 24px; font-family: 'latoblack'; text-transform: uppercase; } li{ position: relative; margin-bottom: 50px; padding-left: 70px; font-family: 'latobold'; line-height: 24px; span{ display: inline-block; vertical-align: middle; position: absolute; left: 0; top: -20px; height: 65px; width: 50px; margin-right: 20px; line-height: 70px; font-size: 32px; font-family: 'latoblack'; color: rgba(0,0,0,0.3); background: url('/images/shadow_nmb.png') right center no-repeat; } } } .banner--md{ display:block; height: auto; .banner__inner{ display:block } .row{ margin-bottom: 0; } } .banner__notice{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; justify-content: center; position:absolute; left:0; height: 100%; width:45%; h1{ text-transform: none; font-family: 'latoheavy'; font-size: 42px; line-height: 1.2; } p{ font-size: 16px; line-height: 24px; margin-bottom: 15px; } } .spec--alt{ margin: 75px 0 50px; padding: 0 50px 30px; box-shadow: 0 15px 20px 0 rgba(0,0,0,0.08); .spec__title{ margin: -15px 0 25px; } } .btn--lg{ max-width: 460px; height: auto; line-height: 24px; padding: 15px; } .details--alt{ padding-top: 45px; p{ font-family: 'latosemibold'; line-height: 24px; } } .details__brd{ b{ font-family: 'latoblack'; font-weight: normal; } p > b{ font-family: 'latobold'; } p:last-child{ margin-bottom: 30px; } } .team--alt{ margin-bottom:0; text-align:center; } .ovh{ overflow: hidden; } .service-desc{ .tb; position: relative; height: 680px; background: #f0f4f8; &__inner{ .tb-cell; } &__abs{ position: absolute; top: 0; right: 0; width: 42%; height: 100%; display: table; } h1{ margin: 0 0 10px; font-size: 36px; line-height: 1.2; text-transform: uppercase; font-family: 'latoblack'; } span{ display: block; margin-bottom: 15px; font-family: 'latoblack'; font-size: 18px; opacity: 0.8; } ul{ margin-bottom: 25px; li{ margin-bottom: 15px; font-family: 'latosemibold'; font-size: 16px; line-height: 24px; color: #000; &:before{ display: inline-block; vertical-align: middle; margin: -5px 8px 0 0; content: 'check'; font-family: "Material Icons"; .material-icons; font-size: 21px; color: @red; } } } } .service-content{ padding-top: 50px; p{ margin-bottom: 30px; font-style: italic; font-size: 18px; line-height: 26px; font-family: 'latoitalic'; } } .service-bonus{ display: table-row; position: relative; background: url('/images/hr-bg.jpg') center top no-repeat; background-size: cover; &__inner{ .tb-cell; position: relative; z-index: 5; padding: 0 30px 0 45px; } &:after{ display: block; content: ''; background: rgba(0,0,0,0.7); height: 100%; width: 100%; position: absolute; left: 0; top: 0; } ul li{ position: relative; margin-bottom: 15px; padding-left: 35px; color: #fff; font-family: 'latobold'; font-size: 16px; &:before{ display: block; content: ''; position: absolute; top: 12px; left: 0; background: #fff; height: 1px; width: 20px; margin:0 } } } .service-video{ height: 265px; display: table-row; .gallery__item{ position: relative; width: 100%!important; height: 270px; margin: 0; overflow: hidden; &-img{ height: 100%; margin: 0; -webkit-transition: -webkit-transform 0.5s ease; -moz-transition: -moz-transform 0.5s ease; transition: transform 0.5s ease; &:before{ display: block; content: ''; background: rgba(0,0,0,0.7); height: 100%; width: 100%; position: absolute; left: 0; top: 0; } } &:hover .gallery__item-img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } &-name{ position: absolute; left: 0; right: 0; bottom: 20%; z-index: 10; color: #fff; font-size: 16px; font-family: 'latobold'; text-align: center; } } } .service-stages{ margin-top: 15px; h3{ margin-bottom: 25px; font-size: 24px; font-family: 'latoblack'; font-weight: normal; } li{ position: relative; margin-bottom: 28px; padding-left: 45px; font-family: 'latobold'; line-height: 24px; span{ display: block; height: 30px; width: 30px; border-radius: 50%; text-align: center; line-height: 28px; border:2px solid @red; position: absolute; left: 0; top: -5px; font-size: 16px; font-family: 'latobold'; color: @red; } } } .why-box--alt{ margin-top: 15px; h3{ text-transform: none; } li{ font-size: 16px; line-height: 1.2; margin-bottom: 30px; img{ top: -10px; } } } .service-items{ padding: 50px 0 40px; &__title{ margin-bottom: 65px; text-transform: uppercase; font-family: 'latoheavy'; font-size: 40px; text-align: center; } &__title:before, &__title:after { content: ""; display: inline-block; vertical-align: middle; width: 100%; height: 1px; background-color: #e5e5e5; position: relative; } &__title:before { margin-left: -100%; left: -35px; } &__title:after { margin-right: -100%; right: -35px; } } .service-item{ .animated; position: relative; height: 850px; margin-bottom: 35px; padding: 40px 50px; border:5px solid #f0f4f8; cursor: pointer; &__title{ display: block; font-size: 32px; font-family: 'latoblack'; font-weight: normal; line-height: 1.2; margin-bottom: 30px; &:after{ .red-after(@width:30px); margin-top: 8px; } } h4{ margin-bottom: 20px; font-family: 'latobold'; font-size: 18px; opacity: 0.7; } ul{ margin-bottom: 25px; li{ margin-bottom: 15px; font-family: 'latosemibold'; font-size: 16px; line-height: 24px; color: #000; &:before{ display: inline-block; vertical-align: middle; margin: -5px 8px 0 0; content: 'check'; font-family: "Material Icons"; .material-icons; font-size: 21px; color: @red; } } } .btn{ position: absolute; left: 50px; right: 50px; bottom: 50px; width: auto; } &:before, &:after { display: block; content: ""; position: absolute; bottom: -5px; left: -5px; right: -5px; height: 5px; background: #f0f4f8; } &:before { top: -5px; } &:hover{ border-left: 5px solid #d4145a; border-right: 5px solid #fbb03b; position: relative; &:before, &:after { background: -moz-linear-gradient(45deg, #d4145a 0%, #fbb03b 100%); background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #d4145a), color-stop(100%, #fbb03b)); background: -webkit-linear-gradient(45deg, #d4145a 0%, #fbb03b 100%); background: -o-linear-gradient(45deg, #d4145a 0%, #fbb03b 100%); background: -ms-linear-gradient(45deg, #d4145a 0%, #fbb03b 100%); background: linear-gradient(45deg, #d4145a 0%, #fbb03b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbb03b', endColorstr='#d4145a',GradientType=1 ); } } } .btn p{ font-size:inherit; line-height:inherit; margin:0; display:inline } .btn > span{ font-size:inherit; line-height:inherit; margin:0; display:inline-block; opacity: 1 } .v-box{ padding: 55px 0 45px; background: #f0f4f8; &__title{ font-size: 40px; line-height: 1.1; font-family: 'latoheavy'; font-weight: 400; text-transform: uppercase; margin-bottom: 40px; text-align: center; } &__view{ height: 570px; &-video{ position: relative; height: 425px; } &-content{ height: 145px; padding: 20px 20px 10px; color: #fff; background: #465968; font-size: 14px; line-height: 24px; h2{ margin-bottom: 15px; font-size: 24px; font-family: 'latobold'; } } } &__gallery{ } &__item{ display: block; overflow: hidden; margin: 5px 0; color: #000; text-align: left; font-size: 0; img{ .responsive-img; height: 110px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } &.first{ .v-box__item-img:before, .v-box__item-img:after{ display:none } } &-img{ position: relative; float: left; height: 110px; margin: 0 15px 0 0; width: 180px; overflow: hidden; cursor: pointer; &:before{ display: block; content: ''; background: rgba(0,0,0,0.3); height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: 1; } &:after{ display: block; content: ''; width: 46px; height: 46px; position: absolute; left: 50%; top: 50%; margin: -25px 0 0 -23px; content: 'play_circle_outline'; font-family: "Material Icons"; .material-icons; font-size: 46px; color: #fff; z-index: 2; } &:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } } &-content{ padding-top:5px; } &-date{ display: block; margin-bottom: 8px; font-family: 'latosemibold'; font-size: 14px; opacity: 0.7; } &-name{ font-family: 'latobold'; font-size: 18px; line-height: 26px; } } } .v-box__view-preview { top: 0; left: 0; z-index: 10; width: 100%; height: 100%; cursor: pointer; position: relative; position: absolute; background-position: center top; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; } .v-box__view-preview > * { position: relative; z-index: 5; } .v-box__view-preview:after { display: block; content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.35); } .v-box__view-preview:after { z-index: 30; } .v-box__view-play { position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px; z-index: 40; width: 100px; height: 100px; cursor: pointer; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; &:after{ display: block; font-size: 100px; content: 'play_circle_outline'; font-family: "Material Icons"; .material-icons; color: #fff; } } .v-box__view:hover .v-box__view-play { opacity: 0.8; } .v-box__view.show-video .v-box__view-preview, .v-box__view.show-video .v-box__view-play { display: none; } .vertical-arrow{ display: block; position: relative; height: 25px; width: 25px; cursor: pointer; outline:none; &.up{ margin: 10px 0 0 80px; &:before { position: absolute; top: 0; left: 0; display: block; content: " "; height: 20px; width: 20px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); border-left: 1px solid #131313; border-top: 1px solid #131313; } } &.down{ margin: 4px 0 0 80px; &:before { position: absolute; top: 0; left: 0; display: block; content: " "; height: 20px; width: 20px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); border-right: 1px solid #131313; border-bottom: 1px solid #131313; } } } .btn-details{ display:none; width:260px; margin-top:20px; background:#3a539a; &:hover{ background:#2e52b7; } } .has-details-link{ .btn-details{ display:block; } .present{ display:none; } } @media only screen and (max-width: @medium-screen) { .btn-details{ margin:20px auto 0; } } .banner--md{ display:block; height: auto; .banner__inner{ padding: 50px 0; } .row{ margin-bottom: 0; } } .banner__notice--alt{ display: table-cell; vertical-align: middle; position: static; width: 50%; padding: 40px 40px 0 0; } .video-box--alt{ display: table-cell; vertical-align: top; width: 50%; top: 0; bottom: 0; background: rgba(0,0,0,0.4); border: 1px solid #fff; padding: 45px 50px 30px; color: #fff; .gallery__item{ width: 300px !important; height: 182px; margin: 0 10px; box-shadow: 0; img{ height: 182px; border-radius: 5px; } } h3, ul li{ color: #fff; } &:before, &:after{ display: none; } } @media only screen and (max-width: 992px) { .container { width: 100%; padding: 0 15px; } .banner--md{ .banner__inner{ display: block; padding: 0 15px; } } .banner__notice--alt{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; justify-content: center; position: relative; width:100%; padding:25px 0 0; } .video-box--alt{ display: block; width: auto; padding:78px 15px 0; background: #fff; border: none; color: #000; .gallery__item{ width: 100% !important; margin: 0 0 10px; img{ border-radius: 0; } } h3, ul li{ color: #000; } } }