// @color-1: #393d83; @color-1: #000000; @color-2: #2b2c3d; @bg: #f7f7f7; @b-color: #e6e6e6; @border: 1px solid @b-color; @text: #000000; @text-p: #000000; @w: #fff; @p: 100px; @p-min: 50px; @font-1: 'Bebas Neue', 'Arial', sans-serif; @font-2: 'Manrope', 'Arial', sans-serif; @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap'); @font-face { font-family: 'Bebas Neue'; src: url('../fonts/BebasNeueRegular.eot'); src: local('Bebas Neue Regular'), local('BebasNeueRegular'), url('../fonts/BebasNeueRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/BebasNeueRegular.woff') format('woff'), url('../fonts/BebasNeueRegular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Bebas Neue'; src: url('../fonts/BebasNeueBold.eot'); src: local('Bebas Neue Bold'), local('BebasNeueBold'), url('../fonts/BebasNeueBold.eot?#iefix') format('embedded-opentype'), url('../fonts/BebasNeueBold.woff') format('woff'), url('../fonts/BebasNeueBold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Bebas Neue'; src: url('../fonts/BebasNeueLight.eot'); src: local('Bebas Neue Light'), local('BebasNeueLight'), url('../fonts/BebasNeueLight.eot?#iefix') format('embedded-opentype'), url('../fonts/BebasNeueLight.woff') format('woff'), url('../fonts/BebasNeueLight.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Bebas Neue'; src: url('../fonts/BebasNeue-Thin.eot'); src: local('Bebas Neue Thin'), local('BebasNeue-Thin'), url('../fonts/BebasNeue-Thin.eot?#iefix') format('embedded-opentype'), url('../fonts/BebasNeue-Thin.woff') format('woff'), url('../fonts/BebasNeue-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; } @font-face { font-family: 'Bebas Neue Book'; src: url('../fonts/BebasNeueBook.eot'); src: local('Bebas Neue Book'), local('BebasNeueBook'), url('../fonts/BebasNeueBook.eot?#iefix') format('embedded-opentype'), url('../fonts/BebasNeueBook.woff') format('woff'), url('../fonts/BebasNeueBook.ttf') format('truetype'); font-weight: normal; font-style: normal; } .clearfix:after{ content: ""; clear: both; display: table; } //ОБЩИЕ СТИЛИ body{ color: @text; background: #ffffff; font-size: 14px; line-height: normal; font-family: @font-2; @media(max-width: 1500px){ font-size: 13px; } } .link-item{ position: absolute; z-index: 3; width: 100%; height: 100%; display: block; text-decoration: none; left: 0; top: 0; } img{ max-width: 100%; vertical-align: bottom; } .miniature{ background: @bg; overflow: hidden; iframe, video, img{ width: 100%; height: 100%; object-fit: cover; } } .miniature-hover{ display: block; text-decoration: none; position: relative; overflow: hidden; &::before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='8'%3e%3c/circle%3e%3cline x1='21' y1='21' x2='16.65' y2='16.65'%3e%3c/line%3e%3cline x1='11' y1='8' x2='11' y2='14'%3e%3c/line%3e%3cline x1='8' y1='11' x2='14' y2='11'%3e%3c/line%3e%3c/svg%3e") no-repeat 50% 50%; opacity: 0; transition: 0.3s all; } &:hover{ &::before{ opacity: 1; } } } .container{ width: 1800px; margin: 0 auto; @media(max-width: 1980px){ width: calc(~'100% - 200px'); margin: 0 100px; } @media(max-width: 1300px){ width: calc(~'100% - 100px'); margin: 0 50px; } @media(max-width: 1000px){ width: calc(~'100% - 60px'); margin: 0 30px; } @media(max-width: 700px){ width: calc(~'100% - 40px'); margin: 0 20px; } } .container-min{ width: 1000px; margin: 0 auto; @media(max-width: 1200px){ width: auto; margin: 0 30px; } @media(max-width: 700px){ margin: 0 20px; } } .flex_block{ width: 100%; flex-flow: row wrap; display: flex; display: -webkit-flex; -webkit-flex-flow: row wrap; display: -ms-flexbox; -ms-flex-flow: row wrap; -ms-align-content: flex-start; -webkit-align-content: flex-start; align-content: flex-start; list-style: none; } .title-bold, .descr-modal, p, li{ line-height: 20px; margin: 0; color: @text-p; } a{ color: @text; transition: 0.3s all; &:hover{ opacity: 0.5; } } ul{ margin: 0; padding: 0; li{ list-style: none; } } .title-big{ font-size: 80px; line-height: 110%; font-weight: bold; font-family: @font-1; margin-left: -2px; margin-bottom: 20px; @media(max-width: 1000px){ font-size: 50px; } h1{ font-size: 80px; line-height: 110%; font-weight: 500; margin: 0; @media(max-width: 1000px){ font-size: 50px; } } } .content-title{ font-size: 50px; line-height: 110%; font-weight: bold; margin-bottom: 30px; position: relative; font-family: @font-1; @media(max-width: 1000px){ font-size: 30px; } h1{ font-size: 50px; line-height: 110%; font-weight: bold; margin: 0; @media(max-width: 1000px){ font-size: 30px; } } } br{ @media(max-width: 800px){ display: none; } } .title-modal, .title-block{ font-family: @font-2; font-size: 18px; line-height: 120%; font-weight: 500; margin-bottom: 15px; @media(max-width: 1400px){ font-size: 16px; } @media(max-width: 800px){ font-size: 14px; } } .title-bold{ font-weight: bold; } .title-decor{ font-family: @font-1; font-weight: 500; margin-bottom: 25px; color: #b3b3b3; } .btn{ border: none; outline: none; text-decoration: none; text-align: center; cursor: pointer; display: inline-block; vertical-align: text-top; box-sizing: border-box; transition: 0.3s all; padding: 15px 30px; padding-top: 11px; background: @color-1; color: @w; position: relative; @media(max-width: 800px){ width: 100%; } &:hover{ color: @w; background: @text; &::before, &::after{ width: 0; height: 0; } } &::before{ content: ''; position: absolute; left: 0; bottom: 0; width: 10px; height: 5px; background: #fff; transition: 0.5s all; } &::after{ content: ''; position: absolute; right: 0; top: 0; width: 5px; height: 5px; background: #fff; transition: 0.5s all; } } .btn-white{ background: @w; color: @text; &::before, &::after{ background: @text; } } .btn-border{ padding: 17px 39px; padding-top: 13px; border: 1px solid @text; background: transparent; color: @text; } .btn-min{ padding: 13px 20px; padding-top: 9px; } //слайдер .swiper{ .swiper-wrapper{ align-content: flex-start; list-style: none; } } .slider-cont{ position: relative; } .slider-nav-item{ position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; background-color: @w; border-radius: 50%; cursor: pointer; transition: 0.3s all; z-index: 2; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; &:hover{ opacity: 0.5; } } .slider-prev{ left: -20px; background: @bg url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M15 18l-6-6 6-6'/%3e%3c/svg%3e") no-repeat 50% 50%; } .slider-next{ right: -20px; background: @bg url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18l6-6-6-6'/%3e%3c/svg%3e") no-repeat 55% 50%; } .swiper-slide{ display: block; height: auto !important; } .swiper-pagination{ position: absolute; right: 200px; bottom: 30px !important; height: auto; padding: 5px 10px; padding-bottom: 6px; border-radius: 20px; background: @bg; display: inline-block; width: auto !important; left: 50% !important; right: auto !important; transform: translate(-50%, 0) !important; } //слайдер .modal-smg_boby{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 999; backdrop-filter: blur(3px); display: none; .modal-smg_boby-content{ display: flex; width: 100%; height: 100%; align-items: center; align-content: center; justify-content: center; .modal-smg{ width: 400px; position: relative; background-color: #fff; z-index: 2; box-shadow: 0 30px 50px 0 rgba(0, 0, 0, 0.3); text-align: center; @media(max-width: 800px){ width: auto; margin: 0 20px; } input{ width: 100%; margin-bottom: 15px; } } .modal-smg_container{ padding: 60px 40px; } .whatsapp{ background: #6cd96c; margin-bottom: 10px; &:hover{ background: @text; } } .viber{ background: #9e81d1; margin-bottom: 10px; &:hover{ background: @text; } } .descr-modal{ margin-bottom: 20px; } .btn{ width: 100%; } } .close-smg_boby{ background: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; transition: 0.5s all; } } .modal-smg-thanks{ .modal-smg{ .thanks-content{ text-align: center; .icon-ok{ margin: 0 auto; margin-bottom: 15px; width: 80px; height: 80px; border-radius: 50%; background: @color-1 url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e") no-repeat 50% 50%; } .descr-modal{ margin-bottom: 0; } } } } .socials-modal{ margin-top: 40px; .soc--inner{ display: block; text-align: left; background: #6cd96c; box-shadow: 0 15px 25px 0 rgba(0, 255, 39, 0.12); color: @w; text-decoration: none; padding: 20px 40px; border-radius: 7px; padding-top: 17px; transition: 0.3s all; border: none; outline: none; cursor: pointer; box-sizing: border-box; padding-left: 60px; position: relative; margin-top: 15px; &::before{ content: ''; position: absolute; left: 20px; top: 13px; width: 26px; height: 26px; } } .whatsapp{ &:hover{ background: #65ac65; } &::before{ background: url("../img/whatsapp.svg") no-repeat 50% 50%; background-size: contain; } } .telegram{ background: #61c7f5; box-shadow: 0 15px 25px 0 rgba(0, 177, 255, 0.12); &:hover{ background: #59add3; } &::before{ background: url("../img/telegram_app.svg") no-repeat 50% 50%; background-size: contain; } } .viber{ background: #9e81d1; box-shadow: 0 15px 25px 0 rgba(98, 0, 255, 0.12); &:hover{ background: #7e7196; } &::before{ background: url("../img/viber.svg") no-repeat 50% 50%; background-size: contain; } } } .close--modal-smg{ position: absolute; right: 10px; top: 10px; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; width: 30px; height: 30px; display: block; background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e") no-repeat 50% 50%; cursor: pointer; &:hover{ opacity: 0.3; } } .socials{ padding: 0; margin: 0; margin-top: 30px; li{ display: inline-block; vertical-align: text-top; vertical-align: top; margin-right: 5px; &:last-child{ margin-right: 0; } .soc-item{ display: block; text-decoration: none; width: 40px; height: 40px; background: @color-1; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: 20px; transition: 0.3s all; border: @border; @media(max-width: 1200px){ width: 30px; height: 30px; background-size: 16px; } &:hover{ background-color: @color-1; opacity: 1; } } .wa{ background-image: url('../img/whatsapp.svg'); &:hover{ background-color: #6cd96c; } } .tg{ background-image: url('../img/telegram_app.svg'); &:hover{ background-color: #61c7f5; } } .vk{ background-image: url('../img/vk.svg'); &:hover{ background-color: #0077ff; } } .viber{ background-image: url('../img/viber.svg'); &:hover{ background-color: #9e81d1; } } .youtube{ background-image: url('../img/yt.svg'); &:hover{ background-color: #fe0200; } } .rutube{ background-image: url('../img/rutub.svg'); &:hover{ background-color: #100943; } } .dzen{ background-image: url('../img/dz.svg'); &:hover{ background-color: #000000; } } } } form{ textarea, input{ box-sizing: border-box; background: #fff; border: @border; padding: 0 30px; padding-top: 13px; padding-bottom: 18px; transition: 0.3s all; box-sizing: border-box; outline: none; border-radius: 5px; @media(max-width: 800px){ width: 100%; margin-right: 0; } &:nth-child(2n){ margin-right: 0; } &:focus{ border-color: @color-1; &::-webkit-input-placeholder {opacity: 0} &::-moz-placeholder {opacity: 0} &:-moz-placeholder {opacity: 0} &:-ms-input-placeholder {opacity: 0} } } textarea{ width: 100%; max-width: 100%; min-width: 100%; min-height: 75px; height: 75px; margin-right: 0; @media(max-width: 800px){ height: 120px; } } .polit-form{ display: block; text-align: left; margin-top: 10px; margin-bottom: 20px; input{ display: none !important; &:checked ~ .checkmark { &::before{ background: rgba(0, 0, 0, 0.2) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e") no-repeat 50% 50%; background-size: 12px; } } } .checkmark{ padding-left: 20px; display: block; position: relative; font-size: 11px; line-height: 14px; &::before{ content: ''; position: absolute; left: 0; top: 0.5px; width: 12px; height: 12px; background: rgba(0, 0, 0, 0.2); border-radius: 2px; transition: 0.1s all; cursor: pointer; } } } } .contacts-list{ padding: 0; margin: 0; li{ margin-bottom: 10px; list-style: none; &:last-child{ margin-bottom: 0; } } .ct--inner{ display: inline-block; position: relative; text-decoration: none; transition: 0.3s all; } .title-block{ margin: 0; } .content-title{ margin: 0; margin-bottom: 10px; } } .cont-two{ .cont-left{ width: calc(~'20% - 25px'); box-sizing: border-box; margin-right: 50px; @media(max-width: 1000px){ width: 100%; padding-right: 0; margin-right: 0; margin-bottom: 40px; } } .cont-right{ width: calc(~'80% - 25px'); box-sizing: border-box; @media(max-width: 1000px){ width: 100%; } } } .page-cont{ .cont-left{ float: left; position: sticky; top: 50px; left: 0; @media(max-width: 1000px){ position: relative; top: auto; float: none; } } .cont-right{ float: right; @media(max-width: 1000px){ float: none; } } } .two-item{ box-sizing: border-box; width: calc(~'50% - 10px'); margin-right: 20px; margin-top: 20px; @media(max-width: 900px){ width: 100%; margin-right: 0; } &:nth-child(2n){ margin-right: 0; } &:nth-child(-n+2){ margin-top: 0; @media(max-width: 900px){ margin-top: 20px; } } &:nth-child(1){ @media(max-width: 900px){ margin-top: 0; } } } .three-item{ box-sizing: border-box; width: calc(~'33.333% - 13.5px'); margin-right: 20px; margin-top: 20px; @media(max-width: 1000px){ width: calc(~'50% - 10px'); } @media(max-width: 700px){ width: 100%; margin-right: 0; } &:nth-child(3n){ margin-right: 0; @media(max-width: 1000px){ margin-right: 20px; } @media(max-width: 700px){ margin-right: 0; } } &:nth-child(2n){ @media(max-width: 1000px){ margin-right: 0; } } &:nth-child(-n+3){ margin-top: 0; @media(max-width: 1000px){ margin-top: 20px; } } &:nth-child(-n+2){ @media(max-width: 1000px){ margin-top: 0; } @media(max-width: 700px){ margin-top: 20px; } } &:nth-child(1){ @media(max-width: 700px){ margin-top: 0; } } } .four-item{ box-sizing: border-box; width: calc(~'25% - 15px'); margin-right: 20px; margin-top: 20px; @media(max-width: 1200px){ width: calc(~'33.3333% - 14px'); } @media(max-width: 900px){ width: calc(~'50% - 10px'); } @media(max-width: 700px){ width: 100%; margin-right: 0; } &:nth-child(4n){ margin-right: 0; @media(max-width: 1200px){ margin-right: 20px; } @media(max-width: 700px){ margin-right: 0; } } &:nth-child(3n){ @media(max-width: 1200px){ margin-right: 0; } @media(max-width: 900px){ margin-right: 20px; } @media(max-width: 700px){ margin-right: 0; } } &:nth-child(2n){ @media(max-width: 900px){ margin-right: 0; } } &:nth-child(-n+4){ margin-top: 0; @media(max-width: 1200px){ margin-top: 20px; } } &:nth-child(-n+3){ @media(max-width: 1200px){ margin-top: 0; } @media(max-width: 900px){ margin-top: 20px; } } &:nth-child(-n+2){ @media(max-width: 900px){ margin-top: 0; } @media(max-width: 700px){ margin-top: 20px; } } &:nth-child(1){ @media(max-width: 700px){ margin-top: 0; } } } .five-item{ box-sizing: border-box; width: calc(~'20% - 16px'); margin-right: 20px; margin-top: 20px; @media(max-width: 1300px){ width: calc(~'25% - 15px'); } @media(max-width: 1200px){ width: calc(~'33.3333% - 14px'); } @media(max-width: 900px){ width: calc(~'50% - 10px'); } @media(max-width: 700px){ width: 100%; margin-right: 0; } &:nth-child(5n){ margin-right: 0; @media(max-width: 1300px){ margin-right: 20px; } @media(max-width: 700px){ margin-right: 0; } } &:nth-child(4n){ @media(max-width: 1300px){ margin-right: 0; } @media(max-width: 1200px){ margin-right: 20px; } } &:nth-child(3n){ @media(max-width: 1200px){ margin-right: 0; } @media(max-width: 900px){ margin-right: 20px; } @media(max-width: 700px){ margin-right: 0; } } &:nth-child(2n){ @media(max-width: 900px){ margin-right: 0; } } &:nth-child(-n+5){ margin-top: 0; @media(max-width: 1300px){ margin-top: 20px; } } &:nth-child(-n+4){ @media(max-width: 1300px){ margin-top: 0; } @media(max-width: 1200px){ margin-top: 20px; } } &:nth-child(-n+3){ @media(max-width: 1200px){ margin-top: 0; } @media(max-width: 900px){ margin-top: 20px; } } &:nth-child(-n+2){ @media(max-width: 900px){ margin-top: 0; } @media(max-width: 700px){ margin-top: 20px; } } &:nth-child(1){ @media(max-width: 700px){ margin-top: 0; } } } .icon{ width: 50px; height: 50px; display: inline-block; vertical-align: text-top; background-position: center center; background-repeat: no-repeat; background-size: 50%; margin-bottom: 15px; } //ОБЩИЕ СТИЛИ .head-top{ background: @text; color: @w; .btn-modal-region, a{ color: @w; display: inline-block; text-decoration: none; padding: 10px 0; cursor: pointer; @media(max-width: 1000px){ font-size: 12px; } } .btn-modal-region{ transition: 0.3s all; &:hover{ opacity: 0.5; } } .flex_block{ justify-content: space-between; } ul{ li{ display: inline-block; vertical-align: text-top; margin-right: 20px; @media(max-width: 700px){ margin-right: 10px; } &:last-child{ margin-right: 0; } } } } .head-smg{ position: fixed; top: 40px; left: 0; right: 0; z-index: 30; padding: 10px 0; transition: 0.3s all; .flex_block{ align-items: center; justify-content: space-between; } .logo{ display: block; width: 230px; height: 50px; background: url('../img/logo.svg') no-repeat 0 50%; background-size: contain; @media(max-width: 1400px){ width: 180px; } @media(max-width: 1000px){ height: 45px; } } .head-right{ @media(max-width: 1200px){ display: none; } .phone{ color: @w; text-decoration: none; margin: 0; } } } .head-smg-fixed{ top: 0; padding: 5px 0; background: @text; .menu-smg .menu-animate-mobile{ @media(max-width: 1000px){ top: 55px; } } } .menu-smg{ .btn-menu{ display: none; text-decoration: none; text-align: center; color: #fff; @media(max-width: 1000px){ display: block; } .icon-menu{ display: inline-block; vertical-align: middle; padding: 10px; padding-top: 12px; height: 23px; width: 25px; position: relative; margin-right: -10px; span{ display: block; width: 25px; height: 1px; background: #fff; margin: 4px 0; transition: 0.3s all; } } } .active{ .icon-menu{ span{ position: absolute; &:nth-child(1){ transform: rotate(45deg); top: 17px; } &:nth-child(2){ opacity: 0; } &:nth-child(3){ transform: rotate(-45deg); top: 17px; } } } } .menu-animate-mobile{ @media(max-width: 1000px){ display: none; position: absolute; top: 65px; background: @text; padding: 40px 0; left: 0; width: 100%; z-index: 20; } } ul{ li{ list-style: none; display: inline-block; vertical-align: text-top; position: relative; @media(max-width: 1000px){ display: block; text-align: center; } a{ display: block; text-decoration: none; padding: 20px 10px; transition: 0.3s all; color: @w; position: relative; font-weight: 500; text-transform: uppercase; @media(max-width: 1400px){ padding: 20px 10px; font-size: 12px; } @media(max-width: 1000px){ padding: 10px 0; } } ul{ position: absolute; width: 300px; background: @w; padding: 30px; top: 60px; display: none; @media(max-width: 1000px){ width: 100%; left: 0; right: 0; top: 39px; z-index: 3; } li{ display: block; a{ padding: 10px 0; color: @text !important; &:hover{ color: @color-1 !important; } } } } &:hover > ul{ display: block; } } .current-menu-item{ a{ opacity: 0.3; } } .link-disable{ opacity: 0.3; } } } section{ padding: 100px 0; box-sizing: border-box; @media(max-width: 1000px){ padding: 70px 0; } } .intro{ position: relative; background: @color-2; height: calc(~'100vh - 40px'); border-radius: 20px; color: @w; align-content: flex-end; justify-content: flex-start; @media(max-width: 1000px){ height: auto; padding-top: 150px; padding-bottom: 50px; } &::before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4)); z-index: 2; } .intro-cont{ position: relative; justify-content: space-between; align-items: flex-end; z-index: 3; .title-block{ width: 600px; margin-bottom: 20px; @media(max-width: 700px){ width: auto; } } .descr{ width: 400px; @media(max-width: 700px){ width: auto; } p{ color: @w; } } } .big-ft{ color: @w; .num{ margin-bottom: 0; font-size: 200px; line-height: 130px; -webkit-text-stroke: 2px @w; color: transparent; @media(max-width: 1700px){ font-size: 150px; line-height: 100px; -webkit-text-stroke: 1px @w; } @media(max-width: 1500px){ font-size: 100px; line-height: 60px; } } } .miniature{ position: absolute; right: 0; top: 0; bottom: 0; width: 100%; } } .btn-block{ margin-top: 50px; @media(max-width: 1000px){ margin-top: 30px; } .btn{ margin-right: 7px; &:last-child{ margin-right: 0; } } } .products{ padding-top: 0; padding-bottom: 200px; @media(max-width: 1000px){ padding-bottom: 70px; } } .sidebar{ @media(max-width: 1000px){ overflow: auto; padding-bottom: 10px; } } .tabs-nav{ flex-wrap: nowrap; width: 100%; margin-top: -5px; @media(max-width: 1000px){ display: flex; } li{ white-space: nowrap; @media(max-width: 1000px){ margin-right: 20px; } a{ padding-top: 8px; padding-bottom: 8px; display: block; text-decoration: none; @media(max-width: 1000px){ font-weight: bold; } } .active{ font-size: 20px; @media(max-width: 1000px){ font-size: 16px; opacity: 0.5; } } } .title-block{ text-decoration: none; } } .cont-left{ padding-top: 100px; @media(max-width: 1000px){ padding-top: 70px; } } .cont-right{ padding-top: 100px; @media(max-width: 1000px){ padding-top: 0; } } .product-item{ background: #fff; position: relative; box-sizing: border-box; border-radius: 20px; color: @w; .miniature{ position: relative; padding-top: 100%; img{ position: absolute; top: 0; left: 0; bottom: 0; transition: 0.7s all; } &::before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) , rgba(0, 0, 0, 0.0) 40%); z-index: 2; } &::after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) , rgba(0, 0, 0, 0.0) 30%); z-index: 2; } } .text{ position: absolute; left: 0; top: 0; z-index: 3; height: 100%; padding: 20px; box-sizing: border-box; align-content: space-between; .title-bold{ color: @text; margin-bottom: 10px; width: 50%; color: @w; @media(max-width: 1400px){ width: 80%; } } .bottom-info{ align-items: flex-end; ul{ width: 50%; @media(max-width: 1400px){ width: 100%; margin-bottom: 2px; } li{ margin-bottom: 5px; color: @w; @media(max-width: 1400px){ margin-bottom: 0; } &:last-child{ margin-bottom: 0; } } } } } .btn-block{ padding: 30px; box-sizing: border-box; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; opacity: 0; transition: 0.5s all; .btn{ width: calc(~'50% - 5px'); margin-right: 10px; &:nth-child(1){ &::before{ background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cline x1='12' y1='8' x2='12' y2='16'%3e%3c/line%3e%3cline x1='8' y1='12' x2='16' y2='12'%3e%3c/line%3e%3c/svg%3e") no-repeat 50% 50%; background-size: contain; } &::after{ background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231c202a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cline x1='12' y1='8' x2='12' y2='16'%3e%3c/line%3e%3cline x1='8' y1='12' x2='16' y2='12'%3e%3c/line%3e%3c/svg%3e") no-repeat 50% 50%; background-size: contain; } } &:nth-child(2n){ margin-right: 0; } } } &:hover{ .btn-block{ opacity: 1; } .miniature{ img{ transform: scale(1.1); } } .text .title-block{ &::before{ width: 100%; } } } } .videos{ padding-bottom: 0; } .video-item{ .miniature{ position: relative; padding-top: 57%; overflow: hidden; iframe{ position: absolute; top: 0; left: 0; bottom: 0; width: 100%; height: 100%; transition: 0.7s all; object-fit: cover; } } .text{ margin-top: 20px; padding-right: 30px; } } .video-item-list{ background: @bg; padding: 20px; position: relative; display: block; text-decoration: none; padding-right: 50px; &::before{ content: ''; display: block; width: 30px; height: 30px; background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cpolygon points='10 8 16 12 10 16 10 8'%3e%3c/polygon%3e%3c/svg%3e"); background-size: contain; margin-bottom: 100px; @media(max-width: 1500px){ margin-bottom: 50px; } } time{ margin-bottom: 5px; display: block; } } .big-banner{ padding-top: 400px; padding-bottom: 200px; position: relative; color: @w; @media(max-width: 1000px){ padding-top: 100px; padding-bottom: 70px; } .container{ position: relative; z-index: 3; } .miniature{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; &::before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } } .btn-white{ &::after, &::before{ display: none; } } } .features{ padding: 200px 0; position: relative; color: @w; background: @text; @media(max-width: 1000px){ padding-top: 100px; padding-bottom: 70px; } .features-cont{ position: relative; z-index: 3; width: 75%; @media(max-width: 1500px){ width: auto; } } .ft-item{ padding-right: 50px; padding-top: 20px; padding-left: 30px; position: relative; &::before{ content: ''; position: absolute; top: 25px; left: 0; width: 10px; height: 10px; background: @w; } p{ color: @w; } } } .delivery{ background: @bg; .deliv-item{ position: relative; padding-right: 20px; padding-left: 30px; &::before{ content: ''; position: absolute; top: 6px; left: 0; width: 10px; height: 10px; background: @text; } } } .payment{ padding-top: 0; .pay-item{ padding-right: 20px; } } .rev-item{ padding: 50px; background: @bg; color: @text; text-align: right; } .faq{ background: #fdfdfd; .faq-item{ border-bottom: @border; position: relative; &::before{ content: ''; position: absolute; left: 0; bottom: 0; height: 1px; background: @text; z-index: 1; width: 0; transition: 0.8s all; } &:hover{ &::before{ width: 100%; } } .title, .title-block{ margin-bottom: 0; padding: 20px 0; padding-bottom: 23px; cursor: pointer; position: relative; transition: 0.3s all; @media(max-width: 900px){ padding-right: 30px; } &::before{ content: ''; position: absolute; top: 50%; margin-top: -10px; right: 10px; width: 1px; height: 21px; background: @text; transition: 0.5s all; } &::after{ content: ''; position: absolute; top: 50%; right: 0; width: 21px; height: 1px; background: @text; transition: 0.5s all; } &:hover{ opacity: 0.5; } } .active{ &::before{ margin-top: 0; height: 0; } } .entrytext{ display: none; padding-bottom: @p-min; } } } .contacts{ padding: @p 0; @media(max-width: 1000px){ padding: 70px 0; } ul{ li{ a{ text-decoration: none; } } } .menu-item{ li{ a{ display: inline-block; padding: 5px 0; } } } .menu-item-cat{ margin-top: -5px; li{ display: inline-block; vertical-align: text-top; width: 220px; } } } .smg-footer{ color: @w; background: @text; font-size: 13px; padding-top: 30px; padding-bottom: 30px; @media(max-width: 1200px){ font-size: 12px; } .flex_block{ align-items: center; justify-content: space-between; } .links{ @media(max-width: 1000px){ width: 100%; margin-top: 10px; margin-bottom: 15px; } } .socials{ margin: 0; @media(max-width: 1000px){ width: 100%; } a{ @media(max-width: 1000px){ padding: 0; } } } a{ display: inline-block; vertical-align: text-top; text-decoration: none; margin-right: 20px; color: @w; @media(max-width: 1200px){ font-size: 12px; } @media(max-width: 1000px){ display: block; padding: 3px 0; margin-right: 0; } &:last-child{ margin-right: 0; } } } .intro-page{ padding-top: 170px; padding-bottom: 80px; background-color: @color-1; position: relative; color: @w; @media(max-width: 800px){ padding-top: 150px; padding-bottom: 70px; } .content-title{ margin-bottom: 0; padding-right: 40%; @media(max-width: 800px){ padding-right: 0; } } &::before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4)); z-index: 2; } .miniature{ position: absolute; right: 0; top: 0; bottom: 0; width: 100%; } .container{ position: relative; z-index: 3; } } .breadgrumbs{ margin-top: 10px; ul{ padding: 0; margin: 0; li{ list-style: none; display: inline-block; vertical-align: text-top; font-size: 14px; margin-right: 15px; position: relative; color: #7f7f7f; @media(max-width: 1000px){ font-size: 11px; line-height: normal; } &::before{ content: '#'; display: inline-block; color: @w; } &:last-child{ padding-right: 0; margin-right: 0; &::before{ color: #7f7f7f; } } a{ color: @w; text-decoration: none; &:hover{ text-decoration: underline; } } } } } .page-content{ padding-top: 100px; padding-bottom: 100px; @media(max-width: 1000px){ padding-top: 70px; padding-bottom: 70px; } } .entrytext{ figure{ margin: 0; } .wp-block-image{ margin-bottom: 20px; } img{ height: auto; } h2, h3, h4, h5, h6{ font-weight: bold; margin: 20px 0; margin-top: 50px; &:first-child{ margin-top: 0; } } p{ display: block; margin-bottom: 20px; } ul{ margin-bottom: 20px; li{ margin-bottom: 8px; color: @text-p; list-style: none; position: relative; padding-left: 15px; &::before{ content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: @color-1; @media(max-width: 1400px){ top: 7px; } } } } ol{ padding: 0; margin: 0; margin-bottom: 40px; counter-reset: myCounter; li{ margin-bottom: 10px; line-height: 26px; color: @text-p; list-style: none; position: relative; padding-left: 40px; &::before{ counter-increment: myCounter; content: counter(myCounter); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; background: @color-1; line-height: 24px; text-align: center; color: #fff; border-radius: 50%; font-size: 14px; } } } .wp-block-gallery{ margin-top: 50px; } .blocks-gallery-item{ width: auto; list-style: none; padding-left: 0; &::before{ display: none; } } .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item { width: calc(50% - 8px); } table{ margin-bottom: 30px; width: 100%; @media(max-width: 900px){ overflow: scroll; display: block; } tbody{ min-width: 500px; } tr{ &:nth-child(1){ font-weight: bold; } &:nth-child(2n){ background: @bg; } td{ padding: 20px; @media(max-width: 900px){ padding: 10px; } } } } *:last-child{ margin-bottom: 0; } } .socials-fixed{ position: fixed; right: 40px; bottom: 30px; z-index: 20; transition: 0.3s all; @media(max-width: 1400px){ right: 17px; } @media(max-width: 500px){ right: 10px; } .soc--inner{ display: block; width: 50px; height: 50px; margin-bottom: 10px; border-radius: 50%; transition: 0.3s all; @media(max-width: 500px){ width: 40px; height: 40px; margin-bottom: 6px; } &:last-child{ margin-bottom: 0; } } .whatsapp{ background: #6cd96c url('../img/whatsapp.svg') no-repeat center center; background-size: 60%; &:hover{ background-color: #65ac65; } } .viber{ background: #9e81d1 url('../img/viber.svg') no-repeat center center; background-size: 60%; &:hover{ background-color: #7e7196; } } .telegram{ background: #61c7f5 url('../img/telegram_app.svg') no-repeat center center; background-size: 60%; &:hover{ background-color: #59add3; } } } .socials-fixed--active{ bottom: 120px; @media(max-width: 1400px){ bottom: 100px; } @media(max-width: 500px){ } } .btn-top{ position: fixed; right: 40px; bottom: 40px; display: block; width: 50px; height: 50px; background: lighten(@text, 5%) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='arcs'%3e%3cpath d='M18 15l-6-6-6 6'/%3e%3c/svg%3e") no-repeat 50% 45%; border-radius: 50%; transition: 0.3s all; cursor: pointer; opacity: 0; z-index: -1; &:hover{ background-color: @color-1; } @media(max-width: 1400px){ right: 17px; } @media(max-width: 800px){ width: 40px; height: 40px; right: 10px; } } .btn-top--active{ opacity: 1; z-index: 20; } .page-error{ text-align: center; .title{ font-size: 200px; font-weight: bold; @media(max-width: 800px){ font-size: 90px; } } .title-block{ margin-bottom: 40px; } .error-text{ padding: 100px; padding-top: 50px; background: @bg; @media(max-width: 800px){ padding: 50px 30px; padding-top: 30px; } } } .page-contacts{ padding-top: 100px; padding-bottom: 100px; position: relative; @media(max-width: 1000px){ padding: 70px 0; padding-bottom: 0; } a, li{ color: @w; @media(max-width: 1000px){ color: @text; } } .contacts-block{ position: relative; z-index: 3; padding: 50px; background: @text; display: inline-block; @media(max-width: 1000px){ padding: 0; display: block; margin-bottom: 70px; background: transparent; } li{ .content-title{ margin: 0; margin-top: -10px; line-height: normal; } } } .contacts-socials{ margin-top: 40px; li{ display: inline-block; margin-right: 20px; a{ text-decoration: none; margin-bottom: 0; display: inline-block; border-bottom: 1px solid @w; transition: 0.3s all; @media(max-width: 1000px){ border-bottom-color: @text; } &:hover{ border-bottom-color: transparent; } } } } .maps{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; @media(max-width: 1000px){ position: static; height: 400px; } iframe{ width: 100%; height: 100%; } } } .page-archive{ padding-top: 0; .cont-right{ padding-top: 0; } .category-item{ padding-top: 100px; border-top: @border; margin-top: 100px; @media(max-width: 1000px){ padding-top: 60px; margin-top: 70px; } &:first-child{ margin-top: 0; border: none; @media(max-width: 1000px){ padding-top: 0; } } .title-cat{ text-decoration: none; display: block; } } } .page-taxonomy{ .cont-right{ padding-top: @p; @media(max-width: 1000px){ padding-top: 0; } } } .page-deliv, .page-about{ background: @bg; .about-cont{ position: relative; padding-right: calc(~'50% + 20px'); @media(max-width: 1200px){ padding-right: 0; } .miniature-right{ position: absolute; right: 0; top: 0; bottom: 0; width: calc(~'50% - 20px'); @media(max-width: 1200px){ position: static; margin-top: 30px; width: 100%; } } } .image-bottom{ margin-top: @p-min; .miniature{ position: relative; padding-top: 30%; @media(max-width: 800px){ padding-top: 50%; } img{ position: absolute; top: 0; left: 0; bottom: 0; transition: 0.7s all; } } } } .about-docs{ padding: 100px 0; background: @color-1; color: @w; @media(max-width: 1000px){ padding: 70px 0; } .doc-item{ display: block; padding: 20px; padding-top: 100px; padding-right: 50px; color: @w; text-decoration: none; border: 1px solid rgb(255 255 255 / 25%); position: relative; &::before{ content: ''; position: absolute; left: 20px; top: 20px; width: 24px; height: 24px; background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='butt' stroke-linejoin='arcs'%3e%3cpath d='M13 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V9l-7-7z'/%3e%3cpath d='M13 3v6h6'/%3e%3c/svg%3e") no-repeat 50% 50%; } } } .page-deliv{ background: #fff; .about-cont{ margin-bottom: 100px; padding-bottom: 100px; border-bottom: @border; @media(max-width: 1000px){ margin-bottom: 70px; padding-bottom: 70px; } } .info-text{ width: 550px; margin-bottom: 50px; @media(max-width: 700px){ width: auto; } a{ text-decoration: none; padding: 5px 10px; display: inline-block; background: @text; color: @w; margin: 3px 0; &:hover{ opacity: 0.4; } } } .deliv-cont{ padding-bottom: 100px; margin-bottom: 100px; border-bottom: @border; &:last-child{ padding-bottom: 0; margin-bottom: 0; border-bottom: none; } } .deliv-item{ padding: 30px 20px; background: @bg; } } .video-item-big{ background: @bg; .video-item-cont{ position: relative; padding-left: 50%; .miniature{ position: absolute; left: 0; top: 0; bottom: 0; width: 50%; } .text-cont{ box-sizing: border-box; padding: 50px 30px; .text{ .item{ margin-bottom: 10px; border-bottom: @border; padding-bottom: 10px; &:last-child{ border-bottom: none; padding-bottom: 0; } span{ font-size: 12px; display: block; opacity: 0.5; } } } } } } .table-price{ @media(max-width: 900px){ overflow-y: scroll; } .tab-item{ border-bottom: @border; font-weight: normal; text-align: center; @media(max-width: 900px){ width: 900px; } .miniature{ display: block; } .miniature, span{ display: block; box-sizing: border-box; padding: 20px 20px; padding-right: 20px; padding-left: 20px; @media(max-width: 1400px){ padding-left: 10px; padding-right: 10px; } } } .tab-head{ span{ font-weight: bold; @media(max-width: 1400px){ font-size: 10px; } b{ display: block; font-size: 12px; } } } .btn-go{ font-weight: bold; text-decoration: none; display: inline-block; border-bottom: 2px solid @text; transition: 0.5s all; &:hover{ border-bottom-color: transparent; } } } .table-price-product{ padding-bottom: 100px; @media(max-width: 1000px){ padding-bottom: 30px; padding-top: 30px; } &:last-child{ padding-bottom: 0; } .title-block{ font-weight: bold; } .tab-item{ align-items: center; @media(max-width: 900px){ width: 1200px; } .tab-head{ } .title{ text-decoration: none; transition: 0.3s all; display: block; padding: 10px 0; &:hover{ opacity: 0.5; } } .miniature, span{ width: 10.4%; box-sizing: border-box; &:nth-child(1){ width: 20%; text-align: left; padding: 5px 0; padding-right: 15px; } &:nth-child(2){ width: 7%; } } .miniature{ padding-top: 4%; position: relative; img{ position: absolute; left: 0; top: 0; } } } } .page-kamen{ .descr-border{ padding: 50px 100px; padding-bottom: 35px; border: @border; margin-top: 100px; margin-bottom: 100px; @media(max-width: 1400px){ padding: 50px; } @media(max-width: 1000px){ padding: 50px 20px; margin-top: 70px; } } .text-image{ position: relative; padding-left: calc(~'50% + 30px'); padding-bottom: 100px; margin-bottom: 100px; border-bottom: @border; @media(max-width: 1000px){ padding-left: 0; padding-bottom: 70px; margin-bottom: 70px; } .miniature{ position: absolute; left: 0; top: 0; bottom: 100px; width: calc(~'50% - 30px'); @media(max-width: 1000px){ width: 100%; position: static; margin-bottom: 30px; } } } } .color-block{ position: relative; padding: 100px 50px; margin-bottom: 100px; padding-right: 30%; background: @text; color: @w; @media(max-width: 1400px){ padding-right: 50px; } @media(max-width: 1000px){ padding: 50px 20px; } .color-cont{ position: relative; z-index: 3; } .entrytext{ p{ color: @w; } } .miniature{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; &::before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } } .btn-white{ &::after, &::before{ display: none; } } } .price-kamen{ padding: 100px 0; background: @text; color: @w; p{ color: @w; } } .page-product-single{ padding-top: @p; @media(max-width: 1000px){ padding-top: 70px; } .product-top{ padding-bottom: @p; // margin-bottom: @p; // border-bottom: @border; @media(max-width: 1000px){ padding-bottom: 70px; } .image-left{ padding-right: 25px; position: relative; height: 700px; @media(max-width: 800px){ padding-right: 0; height: auto; max-height: 400px; } .swiper-slide{ padding-bottom: 0; } .slider-cont-top{ height: 100%; } .slide-miniature-big{ height: 100%; overflow: hidden; box-sizing: border-box; // min-height: 550px; @media(max-width: 900px){ min-height: 400px; } .miniature{ box-sizing: border-box; height: calc(~'100% - 140px') !important; @media(max-width: 1400px){ height: calc(~'100% - 110px') !important; } img{ } } .slider-prev{ left: 20px; @media(max-width: 1000px){ margin-top: -70px; } } .slider-next{ right: 20px; @media(max-width: 1000px){ margin-top: -70px; } } } .slider-cont-bottom{ position: absolute; left: 0; bottom: 0; right: 25px; @media(max-width: 800px){ right: 0; } } .slide-miniature-thumb{ margin-top: 10px; .miniature{ cursor: pointer; border: @border; overflow: hidden; box-sizing: border-box; height: 130px !important; background: @w; @media(max-width: 1400px){ height: 100px !important; } img{ transition: 0.5s all; } &:hover{ img{ transform: scale(1.2); } } } .swiper-slide-thumb-active{ border-color: @color-1; } } } .text{ padding-left: 25px; @media(max-width: 800px){ padding-left: 0; text-align: center; margin-top: 50px; } .content-title{ @media(max-width: 1000px){ margin-bottom: 10px; } } .breadgrumbs{ margin-bottom: 50px; ul{ li{ a{ color: @text; } &::before{ color: @text; } &:last-child{ &::before{ opacity: 0.3; } } } } } .price-item-cont{ .price-item{ display: inline-block; vertical-align: text-top; margin-right: 30px; @media(max-width: 700px){ margin-right: 0; display: block; margin-bottom: 10px; } &:nth-child(1){ opacity: 0.5; } &:nth-child(2){ @media(max-width: 800px){ margin-right: 0; } } .price{ margin-bottom: 0; font-weight: bold; font-size: 24px; } } } .btn-min{ display: inline-block; padding: 10px; padding-top: 5px; background: @bg; text-decoration: none; margin-top: 20px; font-size: 12px; &:hover{ background: @text; color: @w; } } .title-btns{ margin-top: 30px; } .btn-block-bottom{ .btn{ padding-left: 15px; padding-right: 15px; @media(max-width: 800px){ margin-bottom: 10px; } } .whatsapp{ background: #6cd96c; margin-right: 10px; &:hover{ background: @text; } } .viber{ background: #9e81d1; margin-right: 10px; &:hover{ background: @text; } } } .haracteristic{ margin-top: 50px; .har-item{ width: 50%; margin-top: 0; padding: 15px 0; padding-bottom: 18px; border-bottom: @border; text-align: left; @media(max-width: 1300px){ width: 100%; } span{ display: block; @media(max-width: 800px){ width: 50%; box-sizing: border-box; } &:nth-child(1){ padding-right: 5px; box-sizing: border-box; opacity: 0.7; &::after{ content: ':'; } } &:nth-child(2){ @media(max-width: 800px){ text-align: right; } } } } } } } } .product-description{ padding-bottom: @p; @media(max-width: 1000px){ padding-bottom: 70px; } } @media print { @page { size: landscape; } } .btn-print{ float: right; text-decoration: none; padding-left: 50px; padding-right: 20px; background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='butt' stroke-linejoin='arcs'%3e%3cpolyline points='6 9 6 2 18 2 18 9'%3e%3c/polyline%3e%3cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'%3e%3c/path%3e%3crect x='6' y='14' width='12' height='8'%3e%3c/rect%3e%3c/svg%3e") no-repeat 15px 50% !important; color: @text; border: @border; font-weight: bold; margin-bottom: 20px; margin-top: -15px; @media(max-width: 800px){ float: none; margin-bottom: 20px; padding-left: 20px; } &::before, &::after{ display: none; } &:hover{ color: @text; opacity: 0.5; } } .video-list-item{ padding-top: 20%; position: relative; @media(max-width: 1000px){ padding-top: 30%; } @media(max-width: 700px){ padding-top: 60%; } iframe{ position: absolute; left: 0; top: 0; } } .page-single-videos{ .two-item{ &:nth-child(1){ padding-right: 15px; @media(max-width: 900px){ padding: 0; } } &:nth-child(2){ padding-left: 15px; @media(max-width: 900px){ padding: 0; margin-top: 0; } } } .miniature-video{ padding-top: 60%; position: relative; img, iframe{ position: absolute; left: 0; top: 0; } } .text{ padding: 50px 30px; margin-bottom: 30px; background: @color-1; color: @w; @media(max-width: 900px){ padding: 30px 20px; } .item{ padding-bottom: 10px; padding-top: 10px; border-bottom: 1px solid #25548f; &:first-child{ padding-top: 0; } span{ opacity: 0.5; font-size: 12px; display: block; } } } } .page-sitemap{ ul{ li{ margin-bottom: 10px; a{ text-decoration: none; font-weight: bold; } ul{ margin-top: 10px; li{ a{ font-weight: normal; } } } } } } #modal-smg--region{ .modal-smg{ width: 1000px; min-height: 700px; text-align: left; @media(max-width: 1060px){ width: auto; margin: 0 20px; } @media(max-width: 900px){ width: calc(~'100% - 40px'); min-height: auto; } input{ box-sizing: border-box; background: #fff; border: @border; padding: 0 30px; padding-top: 13px; padding-bottom: 18px; transition: 0.3s all; box-sizing: border-box; outline: none; border-radius: 5px; margin-bottom: 20px; width: 100%; @media(max-width: 900px){ margin-top: 5px; } &:nth-child(2n){ margin-right: 0; } &:focus{ border-color: @color-1; &::-webkit-input-placeholder {opacity: 0} &::-moz-placeholder {opacity: 0} &:-moz-placeholder {opacity: 0} &:-ms-input-placeholder {opacity: 0} } } .region-list{ margin: 0; padding: 0; height: calc(~'80vh - 250px'); overflow-y: scroll; @media(max-width: 900px){ } li{ list-style: none; display: inline-block; vertical-align: text-top; width: calc(~'33% - 5px'); margin-bottom: 10px; @media(max-width: 900px){ width: calc(~'50% - 5px'); } @media(max-width: 600px){ width: auto; display: block; } a{ text-decoration: none; } } } } } .video-single{ padding-bottom: @p; padding-top: @p; background: @bg; @media(max-width: 1000px){ padding-top: 70px; padding-bottom: 70px; } }