* {margin:0; padding:0;} body {font-family: 'Gilroy'; background: #F3F3F3;} body.overflow {overflow: hidden;} .visib {visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;} .vertical-alignment-helper{display:table;height:100%;width:100%} .vertical-align-center{display:table-cell;vertical-align:middle} /* /MAIN */ /* PRELOADER */ .preloader { position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #F3F3F3; z-index: 999; } /* @keyframes bg-animation { 0% { background-position: 0 100% } 20% { background-position: 0 200%; } 40% { background-position: 0 400%; } 60% { background-position: 0 600%; } 80% { background-position: 0 800%; } 100% { background-position: 0 1000% } } */ .preloader__logo { display: flex; align-items: center; } .preloader__logo > div {max-width: 1150px; overflow: hidden; animation: bg-animation 10s ease-in-out infinite; background-size: cover !important;} .preloader__logo > div img {max-width: 1150px; height: auto; width: 100%;} @font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Regular.eot'); src: local('Gilroy Regular'), local('Gilroy-Regular'), url('fonts/Gilroy-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Gilroy-Regular.woff2') format('woff2'), url('fonts/Gilroy-Regular.woff') format('woff'), url('fonts/Gilroy-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Bold.eot'); src: local('Gilroy Bold'), local('Gilroy-Bold'), url('fonts/Gilroy-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/Gilroy-Bold.woff2') format('woff2'), url('fonts/Gilroy-Bold.woff') format('woff'), url('fonts/Gilroy-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Black.eot'); src: local('Gilroy Black'), local('Gilroy-Black'), url('fonts/Gilroy-Black.eot?#iefix') format('embedded-opentype'), url('fonts/Gilroy-Black.woff2') format('woff2'), url('fonts/Gilroy-Black.woff') format('woff'), url('fonts/Gilroy-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Medium.eot'); src: local('Gilroy Medium'), local('Gilroy-Medium'), url('fonts/Gilroy-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/Gilroy-Medium.woff2') format('woff2'), url('fonts/Gilroy-Medium.woff') format('woff'), url('fonts/Gilroy-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Extrabold.eot'); src: local('Gilroy Extrabold'), local('Gilroy-Extrabold'), url('fonts/Gilroy-Extrabold.eot?#iefix') format('embedded-opentype'), url('fonts/Gilroy-Extrabold.woff2') format('woff2'), url('fonts/Gilroy-Extrabold.woff') format('woff'), url('fonts/Gilroy-Extrabold.ttf') format('truetype'); font-weight: 800; font-style: normal; } h1, h2, h3, h4, h5, h6 {margin:0 0 40px 0; color: #2D2D2D; font-weight: 700;} h1 {font-size: 40px;} h2 {font-size: 40px;} h3 {font-size: 18px; margin-bottom: 20px;} h4 {font-size: 18px; margin-bottom: 20px;} h5 {font-size: 18px; margin-bottom: 20px;} h6 {font-size: 18px; margin-bottom: 20px;} strong {color: #000;} a {outline:none !important; color: #007FF3; text-decoration: none; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease;} a:hover {text-decoration: none; color: #00B012;} a:focus {text-decoration: none; } /*Input*/ input, select {border: solid #C4C4C4; border-width: 0 0 1px 0; background: none; width: 100%; height: 40px; margin-bottom: 25px; outline: 0; padding: 0 0; font-weight: 500; font-size: 18px; color: #fff;} input::-webkit-input-placeholder {color:#fff; font-weight: 500;} input::-moz-placeholder {color:#fff; font-weight: 500;} input:-moz-placeholder {color:#fff; font-weight: 500;} input:-ms-input-placeholder {color:#fff; font-weight: 500;} input:disabled {border: solid #D7D7D7; border-width: 0 0 1px 0;} input:disabled::-webkit-input-placeholder {color:#D7D7D7;} input:disabled::-moz-placeholder {color:#D7D7D7;} input:disabled:-moz-placeholder {color:#D7D7D7;} input:disabled:-ms-input-placeholder {color:#D7D7D7;} /*Textarea*/ textarea {border: 1px solid #2B2A29; border-radius: 30px; background: none; width: 100%; height: 124px; margin-bottom: 20px; outline: 0; text-align: center; padding: 15px; font-size: 20px; line-height: 27px; color: #000; resize: vertical; } textarea::-webkit-input-placeholder {color:#2B2A29;} textarea::-moz-placeholder {color:#2B2A29;} textarea:-moz-placeholder {color:#2B2A29;} textarea:-ms-input-placeholder {color:#2B2A29;} button {cursor: pointer; text-align: center; border: 0; outline: 0;} button:hover {} /*Button*/ button, svg {transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease;} p {margin:0 0 20px 0; font-size: 14px; line-height: 20px; color: #2D2D2D;} ul, ol {padding:0 0 0 20px; margin-bottom: 20px;} li {font-size: 14px; line-height: 20px; color: #2D2D2D;} img {border: 0; outline: 0; max-width: 100%; height: auto; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease;} img:hover { } /*Effect button*/ .ripplelink {opacity: 1; position: relative; z-index: 0; overflow: hidden;} .ripplelink .ink.animate {opacity: 1;} .ink {display: block; position: absolute; background:rgba(255, 255, 255, 0.7); border-radius: 100%; -webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0); transform:scale(0); z-index: 20;} .animate {-webkit-animation:ripple 0.65s linear; -moz-animation:ripple 0.65s linear; -ms-animation:ripple 0.65s linear; -o-animation:ripple 0.65s linear; animation:ripple 0.65s linear;} @-webkit-keyframes ripple { 100% {opacity: 0; -webkit-transform: scale(2.5);} } @-moz-keyframes ripple { 100% {opacity: 0; -moz-transform: scale(2.5);} } @keyframes ripple { 100% {opacity: 0; transform: scale(2.5);} } @keyframes rotation { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} } .opacity_5 {opacity: .5;} .right {float:right;} .left {float:left;} .hidden {display: none;} .center {margin-left: auto; margin-right: auto; display: table;} /*Background Modal*/ .bg-site {background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; position: fixed; opacity: 0; z-index: 10; transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; cursor: pointer;} .bg-site.active {opacity: 1; top: 0; left: 0; transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out;} .text-padding {padding: 0 100px;} .vcenter {display: flex; align-content: center;} /* ============================================== ******** First block =============================================== */ .first-block-main {min-height: 100vh;} .first-block {text-align: center; display: table; min-height: 100vh; /*padding-top: 75px;*/} .first-block .text-main {display: table-cell; vertical-align: middle;} .first-block img {margin-bottom: 20px;} .first-block .btn-go-to {background: #F4FE31; border: 1px solid #F4FE31; box-sizing: border-box; box-shadow: 0px 4px 16px -4px rgba(0, 0, 0, 0.25); border-radius: 30px; font-weight: 600; font-size: 25px; line-height: 30px; padding: 14px 46px; margin: 0 auto; display: table; color: #000000;} .first-block .btn-go-to:hover {background: #000; border: 1px solid #000; color: #fff;} /* ============================================== ******** Header =============================================== */ .header-main {position: fixed; top: 0; width: 100%; left: 0; z-index: 1000; background: #F3F3F3;} .header {padding-top: 15px; padding-bottom: 15px;} .header .logo {float: left; cursor: pointer;} .header .menu {float: right; list-style: none; padding: 0; margin: 0;} .header .menu li {display: inline-block; vertical-align: middle;} .header .menu li a {font-weight: 600; font-size: 20px; line-height: 24px; color: #000000; text-decoration: none; padding: 8px 14px 6px; display: block; border: 1px solid transparent; border-radius: 30px; cursor: pointer;} .header .menu li a:hover {border: 1px solid #000;} .header .menu li a.btn-order {border: 1px solid #000; padding: 8px 20px 6px 20px;} .header .menu li a.btn-order:hover {background: #F4FE31; border: 1px solid #F4FE31;} /*Mob menu*/ .btn-mob-menu {font-size: 26px; float: right; color: #000; line-height: 5px; padding: 0;} /*.btn-mob-menu:hover, .btn-mob-menu:focus {color: #000;}*/ /*.btn-mob-menu svg {margin: 0px -13px 0 0;}*/ /*Mob menu*/ .mobile-menu-container{background: rgba(0, 0, 0, 0.9);height: 100%; position: fixed; top: 0; width: 100%; z-index: 1001; right: -100%; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; display: table; } .mobile-menu-container > div {display: table-cell; vertical-align: middle; padding: 20px 25px; position: relative;} .mobile-menu-container.active {right: 0 !important;} .mobile-menu-container .menu {list-style: none; padding: 0; margin: 0; position: relative;} .mobile-menu-container .menu li {display: block;} .mobile-menu-container .menu li a {font-weight: 500; font-size: 25px; line-height: 30px; color: #fff; text-decoration: none; padding: 8px 14px 6px; display: table; border: 1px solid transparent; border-radius: 30px; cursor: pointer;} .mobile-menu-container .menu li a:hover {border: 1px solid #fff;} .mobile-menu-container .menu li a.btn-order {border: 1px solid #fff; padding: 8px 10px 6px 10px; margin-top: 20px;} .mobile-menu-container .menu li a.btn-order:hover {background: #F4FE31; border: 1px solid #F4FE31; color: #000;} .mobile-menu-close {color: #fff; font-size: 25px; position: absolute; top: -40px; right: 20%;} /* ============================================== ******** Target =============================================== */ .our-target-main {background: #000;} .our-target {padding-top: 60px;} .our-target .text {background: #F3F3F3; border-radius: 57px 57px 0 0; padding: 65px 100px 100px; overflow: hidden;} .our-target .text > .row {margin-left: -40px; margin-right: -40px;} .our-target .text > .row > div {padding-left: 40px; padding-right: 40px;} .our-target .text > .row > div:nth-child(2) {position: relative;} .our-target .text > .row > div:nth-child(2):before {content: ''; display: block; width: 2px; height: 100%; border-left: 2px solid #000; position: absolute; top: 0; left: 0;} .our-target .text p {font-size: 20px; line-height: 24px; margin: 0;} .text-black { margin: 45px auto 0; max-width: 530px;} .text-black .name {font-weight: 700; font-size: 27px; line-height: 33px; text-transform: uppercase; background: #000; padding: 4px 17px; color: #FFFFFF; display: table; border-radius: 36px; margin: 0 auto 10px;} .text-black .txt {font-weight: 500; font-size: 27px; line-height: 32px; background: #000000; border-radius: 36px; padding: 40px 25px; color: #FFFFFF;} /* ============================================== ******** SHUM - its =============================================== */ .shum-its-main {} .shum-its-block {padding-top: 75px; padding-bottom: 80px} .shum-its-block h2 {font-weight: 800; font-size: 77px; line-height: 94px; text-transform: uppercase; color: #000000; margin-bottom: 40px;} .shum-list-main {position: relative; padding: 0 30px; margin-bottom: 50px;} .shum-its-list {} .shum-its-list h3 {font-weight: 600; font-size: 25px; line-height: 34px; text-transform: uppercase; color: #000000; margin-bottom: 20px;} .shum-its-list .item { overflow: hidden;} .shum-its-list .item > div {border: 1px solid #000000; box-sizing: border-box; border-radius: 20px; padding: 30px 20px 20px; font-weight: 600; font-size: 17px; line-height: 20px; color: #000000; position: relative; overflow: hidden; margin-bottom: 8px;} .shum-its-list .item > div:before {content: ''; display: block; background: #F4FE31; width: 40px; height: 40px; border-radius: 50px; position: absolute; top: 20px; left: 10px; z-index: -1; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease;} .shum-its-list .item:hover > div:before {width: 100%; height: 100%; top: 0; left: 0; border-radius: 0;} .shum-its-list .owl-nav button {top: 35px !important; margin-top: 0 !important;} .owl-nav button {width: 30px; height: 30px; border-radius: 40px; background: #000000; line-height: 37px; position: absolute; top: 50%; margin-top: -15px;} .owl-nav button:hover {background: #fff; box-shadow: 0px 4px 16px -4px rgba(0, 0, 0, 0.25);} .owl-nav button:hover svg path {fill: #000;} .owl-nav button.owl-prev {left: 0; margin-left: -70px;} .owl-nav button.owl-next {right: 0; margin-right: -70px;} .owl-nav button.disabled {display: none;} .owl-dots {text-align: center; margin-top: 15px;} .owl-dots button {width: 10px; height: 10px; border-radius: 20px; background: rgba(0, 0, 0, 0.2); display: inline-block; vertical-align: middle; margin: 0 5px;} .owl-dots button:hover, .owl-dots button.active {background: #000;} /* ============================================== ******** Services =============================================== */ .services-main {background: #000; overflow: hidden;} .services-block {padding-top: 134px; padding-bottom: 104px;} .services-block h2 {font-weight: 800; font-size: 77px; line-height: 94px; text-transform: uppercase; color: #FFFFFF; margin-bottom: 60px;} .services-list {} .services-list .item {display: table; width: 100%; border-bottom: 1px solid #F4FE31; padding: 40px 10px;} .services-list .item > div {display: table-cell; vertical-align: middle;} .services-list .item .numb {font-weight: 600; font-size: 64px; line-height: 76px; color: #FFFFFF; width: 140px;} .services-list .item .text {font-weight: bold; font-size: 30px; line-height: 36px; color: #FFFFFF;} .services-list .item:last-child {border: 1px solid #F4FE31; border-radius: 30px; padding: 15px 15px 15px 15px;} .services-list .item p {font-weight: 600; font-size: 22px; line-height: 28px; color: #FFFFFF; margin: 0;} .services-list .item:nth-last-child(2) {border-bottom: 0;} .services-list .item:last-child .numb {color: #000; text-shadow: -0 -1px 0 #fff, 0 -1px 0 #fff, -0 1px 0 #fff, 0 1px 0 #fff, -1px -0 0 #fff, 1px -0 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; } /* ============================================== ******** Instagram Blogers =============================================== */ .instagram-cats-main {} .instagram-cats-block {padding-top: 100px; padding-bottom: 100px;} .instagram-cats-block h2 {font-weight: 800; font-size: 77px; line-height: 94px; text-transform: uppercase; color: #000; margin-bottom: 30px;} .instagram-cats-block .title {font-weight: 600; font-size: 30px; line-height: 36px; color: #000000; margin-bottom: 30px;} .instagram-cats-block .title span {font-weight: 900; font-size: 53px; line-height: 36px; display: inline-block; vertical-align: top; margin: 5px 0 0 0;} .instagram-cats-block p {font-weight: 600; font-size: 22px; line-height: 26px; color: #000; margin-bottom: 30px;} .cats-list {} .cats-list a {display: inline-block; vertical-align: middle; margin: 0 7px 7px 0; border-radius: 30px; font-weight: 500; font-size: 22px; line-height: 26px; text-align: center; color: #000000; padding: 7px 22px; border: 3px solid #FFCC2A;} .cats-list a:hover {background: #FFCC2A;} .cats-list a:nth-child(3) {border: 3px solid #FFE1C9;} .cats-list a:nth-child(4) {border: 3px solid #FFC79C;} .cats-list a:nth-child(5) {border: 3px solid #FFC090;} .cats-list a:nth-child(6) {border: 3px solid #FFA300;} .cats-list a:nth-child(7) {border: 3px solid #FFD12F;} .cats-list a:nth-child(8) {border: 3px solid #E1E512;} .cats-list a:nth-child(9) {border: 3px solid #FFED49;} .cats-list a:nth-child(10) {border: 3px solid #D1CB3A;} .cats-list a:nth-child(11) {border: 3px solid #F8B200;} .cats-list a:nth-child(12) {border: 3px solid #C3B425;} .cats-list a:nth-child(13) {border: 3px solid #FFA132;} .cats-list a:nth-child(14) {border: 3px solid #FCD651;} .cats-list a:nth-child(15) {border: 3px solid #FFC062;} .cats-list a:nth-child(16) {border: 3px solid #FF8E4F;} .cats-list a:nth-child(17) {border: 3px solid #DBDE4F;} .cats-list a:nth-child(18) {border: 3px solid #FEBA7C;} .cats-list a:nth-child(19) {border: 3px solid #E5CA67;} .cats-list a:nth-child(3):hover {background: #FFE1C9;} .cats-list a:nth-child(4):hover {background: #FFC79C;} .cats-list a:nth-child(5):hover {background: #FFC090;} .cats-list a:nth-child(6):hover {background: #FFA300;} .cats-list a:nth-child(7):hover {background: #FFD12F;} .cats-list a:nth-child(8):hover {background: #E1E512;} .cats-list a:nth-child(9):hover {background: #FFED49;} .cats-list a:nth-child(10):hover {background: #D1CB3A;} .cats-list a:nth-child(11):hover {background: #F8B200;} .cats-list a:nth-child(12):hover {background: #C3B425;} .cats-list a:nth-child(13):hover {background: #FFA132;} .cats-list a:nth-child(14):hover {background: #FCD651;} .cats-list a:nth-child(15):hover {background: #FFC062;} .cats-list a:nth-child(16):hover {background: #FF8E4F;} .cats-list a:nth-child(17):hover {background: #DBDE4F;} .cats-list a:nth-child(18):hover {background: #FEBA7C;} .cats-list a:nth-child(19):hover {background: #E5CA67;} /* ============================================== ******** Brands =============================================== */ .brands-main {} .brands-block {padding-top: 100px; padding-bottom: 100px;} .brands-block h2 {font-weight: 800; font-size: 77px; line-height: 94px; text-transform: uppercase; color: #000; margin-bottom: 50px;} .brands {text-align: center; padding: 0 1px} .brands > div {float: left; width: 33.333%; border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 34px; height: 140px; line-height: 140px; filter: grayscale(1);} .brands > div img {max-height: 100%;} .brands > div:hover {filter: grayscale(0);} .brands > div:hover img {transform: scale(1.1); } /* ============================================== ******** CASES =============================================== */ .cases-main {background: #000;} .cases-block {padding-top: 134px; padding-bottom: 104px;} .cases-block h2 {font-weight: 800; font-size: 77px; line-height: 94px; text-transform: uppercase; color: #000; margin-bottom: 40px; text-shadow: -0 -1px 0 #fff, 0 -1px 0 #fff, -0 1px 0 #fff, 0 1px 0 #fff, -1px -0 0 #fff, 1px -0 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; } .cases-block h2 span {color: #fff;} .cases-tab {} .cases-menu {list-style: none; padding: 0; margin: 0; border-bottom: 3px solid #F4FE31; display: table; width: 100%;} .cases-menu li {display: table-cell; vertical-align: top; width: 25%;} .cases-menu li a {font-weight: 700; font-size: 22px; line-height: 29px; text-align: center; color: rgba(255, 255, 255, 0.5); text-decoration: none; display: block; text-align: center; padding: 15px 0;} .cases-menu li a:hover {color: rgba(255, 255, 255, 1 );} .cases-menu li.ui-tabs-active a {color: #fff;} .cases-content {padding-top: 40px; padding-bottom: 40px;} .cases-content .title {font-weight: 500; font-size: 22px; line-height: 26px; color: #FFFFFF; margin-bottom: 15px;} .cases-content .title span {font-weight: normal; font-size: 15px; line-height: 17px;} .cases-content .txt {font-weight: 400; font-size: 18px; line-height: 21px; color: #FFFFFF; margin-bottom: 40px; min-height: 30px;} .cases-content .txt a {border: 1px solid #FFFFFF; box-sizing: border-box; border-radius: 30px;font-weight: 500; font-size: 15px; line-height: 18px; text-decoration-line: underline; display: table; color: #FFFFFF; text-align: center; padding: 6px 17px;} .cases-content .txt a:hover {text-decoration: none; background: #F4FE31; border: 1px solid #F4FE31; color: #000;} /*Slider Insta 3 pc*/ .slider-insta {padding: 0 40px; } .slider-insta-wrap .owl-nav button {background: #fff;} .slider-insta-wrap .owl-nav button svg path {fill: #000000;} .slider-insta-wrap .owl-nav button:hover {background: #F4FE31;} .slider-insta-wrap .owl-nav button:hover svg path {fill: #000000;} .slider-insta-wrap .owl-nav button.owl-prev {left: 0; margin-left: -5px; } .slider-insta-wrap .owl-nav button.owl-next {right: 0; margin-right: -5px;} .slider-insta-wrap .owl-dots {text-align: center; margin-top: 35px;} .slider-insta-wrap .owl-dots button {background: rgba(255, 255, 255, 0.2);} .slider-insta-wrap .owl-dots button:hover, .slider-insta-wrap .owl-dots button.active {background: #fff;} /*Slider Insta Rezult*/ .slider-insta-2 {padding: 0;} .slider-insta-2 .item {display: table; width: 100%;} .slider-insta-2 .item > div {display: table-cell; vertical-align: middle;} .slider-insta-2 .item img {max-width: 275px; display: table; margin: 0 auto;} .slider-insta-2 .item .rezult {text-align: center; color: #fff;font-weight: 500; font-size: 15px; line-height: 18px; display: block;} .slider-insta-2 .item .rezult img {margin-bottom: 10px;} .slider-digital {padding-top: 40px;} .slider-digital div .title {padding-left: 35px; white-space: nowrap; font-size: 21px;} .slider-digital div .txt {margin-bottom: 8px; padding-left: 35px;} /* ============================================== ******** STEPS =============================================== */ .steps-main {} .steps-block {padding-top: 100px; padding-bottom: 100px;} .steps-block h2 {font-weight: 800; font-size: 77px; line-height: 94px; text-transform: uppercase; color: #000; margin-bottom: 50px;} .steps {} .steps .item {display: table; width: 100%;} .steps .item .day {width: 160px; display: table-cell; vertical-align: top;} .steps .item .day .numb {font-weight: bold; font-size: 30px; line-height: 161.3%; color: #FFFFFF; background: #000000; border-radius: 30px; width: 45px; height: 45px; text-align: center; box-shadow: -5px -5px 0 0 #F4FE31; padding-left: 3px;} .steps .item .day span {font-weight: 500; font-size: 30px; line-height: 30px; color: #000000; border: 1px solid #000000; box-sizing: border-box; border-radius: 30px; padding: 2px 16px; display: table; margin: -10px 0 0 45px;} .steps .item .text {display: table-cell; vertical-align: top; border-bottom: 3px solid #C4C4C4;} .steps .item .text ul {list-style: none; padding: 0; margin: 30px 0 20px 0;} .steps .item .text ul li {font-weight: bold; font-size: 16px; line-height: 140%; color: #000000; position: relative; padding: 2px 0 2px 50px; margin-bottom: 7px;display: flex; align-items: center;} .steps .item .text ul li em {font-weight: bold; font-size: 15px; line-height: 161.3%; color: #000000; width: 23px; height: 23px; border-radius: 30px; border: 1px solid #000; display: block; position: absolute; top: 50%; margin-top: -12px; left: 0; text-align: center; font-style: normal;} .steps .item .text ul li span:nth-child(2) {width: 40%;} .steps .item .text ul li span:nth-child(3) {width: 20%;} .steps .item .text ul li span:nth-child(4) {width: 40%;} .steps .item .text ul li span img {display: table; margin: 0 auto;} .steps .item .text .bl {border: 2px solid #C4C4C4; box-sizing: border-box; border-radius: 30px; padding: 10px 20px; margin: 50px 0 0 -20px;} .steps .item:last-child .text {border-bottom: 0;} .steps .item .text .btn-order {background: #F4FE31; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04); border-radius: 30px; font-weight: 600; font-size: 15px; line-height: 115.8%; color: #000000; display: table; padding: 8px 20px;} .steps .item .text .btn-order:hover {background: #000; color: #fff;} /* ============================================== ******** FORM ORDER =============================================== */ .form-order-main {background: #000;} .form-order-block {padding-top: 134px; padding-bottom: 94px;} .form-order-block h2 {font-weight: 800; font-size: 77px; line-height: 94px; text-transform: uppercase; color: #000; margin-bottom: 50px; text-shadow: -0 -1px 0 #fff, 0 -1px 0 #fff, -0 1px 0 #fff, 0 1px 0 #fff, -1px -0 0 #fff, 1px -0 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; } .form-order-block h2 span {color: #fff; position: relative;} .form-order-block h2 span:before {content: ''; display: block; background: url(images/oval.svg) center no-repeat; width: 170px; height: 170px; position: absolute; top: 50%; right: 50%; margin-top: -94px; margin-right: -80px;} .form-order {} .form-order .image {display: table; margin: 0 auto;} .form-order .image img {border-radius: 200px; box-shadow: -10px -10px 0 0 #F4FE31;} .form-order p {font-weight: 600; font-size: 22px; line-height: 27px; color: #FFFFFF; margin-bottom: 30px;} .form-order form {max-width: 430px; margin-bottom: 100px;} .form-order form input:nth-child(2) {margin-bottom: 40px;} .form-order form input {} .form-order form button {border: 1px solid #FFFFFF; box-sizing: border-box; border-radius: 30px;font-weight: 500; font-size: 22px; line-height: 26px; color: #FFFFFF; display: block; cursor: pointer; outline: 0; text-align: center; height: 48px; background: none; padding: 0 10px; width: 100%; margin-bottom: 10px;} .form-order form button:hover {background: #F4FE31; border: 1px solid #F4FE31; color: #000;} .form-order form a.btn-brif {border: 1px solid #F4FE31; box-sizing: border-box; border-radius: 30px; font-weight: 400; font-size: 22px; line-height: 26px; color: #000; display: block; cursor: pointer; text-align: center; height: 48px; background: #F4FE31; padding: 0 10px; width: 100%; line-height: 48px;} .form-order form a.btn-brif:hover {background: #000; border: 1px solid #F4FE31; color: #fff;} .form-order .contacts {max-width: 430px;} .form-order .contacts p {font-weight: 400; font-size: 18px; line-height: 23px; color: rgba(255, 255, 255, 0.5); margin-bottom: 12px; } .form-order .contacts p a {color: rgba(255, 255, 255, 0.5); text-decoration: underline;} .form-order .contacts p a:hover {text-decoration: none; color: #fff;} /* ============================================== ******** Модальные окна =============================================== */ .modal-backdrop {cursor: pointer;} .modal-dialog {} .modal-dialog .close {position: absolute; top: 10px; right: 10px; font-size: 31px; outline: none !important; opacity: .7; text-shadow: none !important; font-weight: 400 !important; width: 30px; height: 30px; background: none; border: none; border-radius: 20px;} .modal-dialog .close:hover {transform: rotate(90deg)} /*Vertical align*/ .vertical-alignment-helper{display:table;height:100%;width:100%} .vertical-align-center{display:table-cell;vertical-align:middle} .modal-dialog .modal-content {background: #F5F5F5; box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.3) !important; border-radius: 20px !important; padding: 40px 50px; border: 0;} .modal-dialog .modal-content .modal-body {padding: 0 !important;} .modal-dialog .modal-content img {display: table; margin: 0 auto 25px;} .modal-dialog .modal-content h3 {font-weight: bold; font-size: 37px; line-height: 177.3%; text-align: center; color: #000000; margin-bottom: 25px;} .modal-dialog .modal-content p {font-weight: 500; font-size: 27px; line-height: 111.8%; text-align: center; color: #000000;} /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}