@color-1: #157841; @color-2: #ad0000; @gray: #212121; @grad: linear-gradient(80deg, #41cdff, #5930f1); @width-basic: 1160px; @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&subset=cyrillic'); body{ font-family: 'Roboto', sans-serif; min-width: @width-basic; color: @gray; @media (max-width: 1200px){ min-width: 100%; } @media (max-width: 768px){ min-width: 100%; } } h1,h2,h3,p{ margin: 0; font-weight: normal; } li, p{ line-height: normal; font-size: 14px; line-height: 22px; } a{ color: @color-1; &:hover{ color: darken(@color-1,20%); } } img{ max-width: 100%; } .clearfix:after{ content: ""; clear: both; display: table; } .container{ width: @width-basic; margin: 0 auto; @media (max-width: 1200px){ width: auto; padding: 0 20px; } } //общий вид заголовков .content-title{ font-size: 36px; margin-top: -10px; margin-bottom: 20px; @media (max-width: 768px){ font-size: 24px; margin-bottom: 40px; } h1{ margin: 0; font-size: 36px; @media (max-width: 768px){ font-size: 24px; } } } //общий вид кнопок .btn{ text-decoration: none; color: #fff; background: @color-1; border-radius: 35px; padding: 10px 20px; font-size: 14px; transition: all .3s ease-out; display: inline-block; text-align: center; border: none; outline: none; position: relative; color: #fff; font-weight: 500; &:hover{ color: #fff; background: darken(@color-1, 5%); } } .btn-green{ background: @color-2; &:hover{ color: #fff; background: darken(@color-2, 5%); } } //хедер .my-head{ position: relative; z-index: 99; transition: 0.3s all; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2); .top-head{ padding: 13px 0; padding-bottom: 0; @media (max-width: 768px){ padding-bottom: 5px; } } .logo{ float: left; margin-right: 40px; img{ width: auto; height: 40px; } @media (max-width: 768px){ margin: 0; margin-right: 0; img{ width: auto; height: 20px; } } } .menu-mobile__block{ display: none; @media (max-width: 768px){ display: block; } .menu-btn__mobile{ position: absolute; right: 20px; top: 13px; width: 30px; height: 20px; display: block; margin-top: -2px; span{ width: 100%; height: 2px; background: #212121; margin: 4px 0; display: block; } } .menu-el1t__mobile{ position: absolute; left: 0; width: 100%; top: 42px; background: #212121; color: #fff; z-index: 90; display: none; ul{ padding: 20px; margin: 0; li{ list-style: none; a{ display: block; font-size: 14px; text-transform: uppercase; color: #fff; text-decoration: none; padding: 5px 0; font-weight: normal; } } } } .menu-cat{ ul{ li{ a{ text-transform: none; } } } } } .contacts{ float: right; padding: 5px 0; @media (max-width: 768px){ display: none; } .ct--inner{ display: inline-block; color: #000; text-decoration: none; font-weight: 500; font-size: 14px; padding: 2px 0; } .phone{ padding-left: 30px; background: url('../img/phone.png') no-repeat left 50%; margin-right: 22px; } .mail{ padding-left: 20px; background: url('https://img.icons8.com/material-rounded/14/ad0000/new-post.png') no-repeat left 50%; margin-right: 22px; } } .btn{ @media (max-width: 768px){ padding: 7px 20px; font-size: 9px; } } } .menu-el1t_cat, .menu-el1t{ transition: 0.3s all; @media (max-width: 768px){ display: none; } ul{ padding: 0; margin: 0; li{ list-style: none; display: inline-block; vertical-align: text-top; a{ display: block; text-decoration: none; font-weight: bold; line-height: normal; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; padding: 15px 10px; color: #000000; transition: 0.3s all; text-align: center; &:hover{ color: @color-2; } } &:first-child{ a{ padding-left: 0; } } } } } .menu-el1t_cat{ background: #1d1d1d; padding: 10px 0; ul{ li{ margin-right: 20px; a{ color: #fff; font-size: 12px; font-weight: normal; text-transform: none; padding: 7px 0; } } } } .intro{ position: relative; .intro-slide__inner{ background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; color: #fff; &::before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.49); } .text{ width: 50%; padding: 50px 0; @media (max-width: 768px){ width: 100%; } } .title{ font-size: 36px; font-weight: 500; margin-bottom: 20px; @media (max-width: 768px){ font-size: 28px; } } .descr{ font-size: 16px; line-height: 22px; font-weight: 100; @media (max-width: 768px){ font-size: 14px; } } .container{ position: relative; z-index: 2; height: 400px; @media (max-width: 768px){ height: 350px; } } .nav-slide{ position: absolute; left: 0; bottom: 45px; @media (max-width: 768px){ left: 20px; } .nav-inner{ width: 40px; height: 40px; background-color: #fff; background-repeat: no-repeat; background-position: center center; display: inline-block; cursor: pointer; } .prev{ background-image: url(https://img.icons8.com/ios/20/000000/less-than.png); } .next{ background-image: url(https://img.icons8.com/ios/20/000000/more-than.png); } } } } .left-page{ width: 70%; float: left; @media (max-width: 768px){ float: none; width: auto; margin-bottom: 30px; } } .sidebar{ float: right; width: 30%; @media (max-width: 768px){ float: none; width: auto; } .sidebar--inner{ margin-bottom: 20px; padding-left: 20px; @media (max-width: 768px){ padding-left: 0; } } .title{ font-size: 16px; font-weight: 500; margin-bottom: 10px; } form{ width: auto !important; } .menu{ padding: 0; margin: 0; li{ list-style: none; margin-bottom: 3px; a{ display: block; color: @gray; text-decoration: none; padding: 3px 10px; border-left: 2px solid #e0e0e0; } } .active{ a{ color: @color-2; } } } } .news--inner{ text-decoration: none; color: @gray; display: block; border: 1px solid #e8e8e8; margin-bottom: 20px; &:hover{ color: @gray; .miniature{ img{ transform: scale(1.1); } } .text{ h2{ color: @color-2; } } } .miniature{ float: left; width: 35%; height: 200px; overflow: hidden; @media (max-width: 768px){ float: none; width: auto; height: 150px; } img{ object-fit: cover; width: 100%; height: 100%; transition: 0.3s all; } } .text{ width: 65%; float: right; @media (max-width: 768px){ float: none; width: auto; } h2{ font-size: 24px; font-weight: 500; margin-bottom: 20px; transition: 0.3s all; @media (max-width: 768px){ font-size: 20px; } } .btn-go{ font-size: 11px; font-weight: 500; color: #000; letter-spacing: 1px; text-transform: uppercase; display: inline-block; padding-right: 20px; background: url(https://img.icons8.com/ios/16/000000/right-filled.png) no-repeat right 50%; transition: 0.3s all; &:hover{ color: @color-2; } } .text-cont{ padding: 20px; padding-left: 30px; } } } .news-home{ padding-right: 20px; @media (max-width: 768px){ padding: 0; } } .content-page{ padding-top: 50px; padding-bottom: 70px; @media (max-width: 768px){ padding-top: 45px; } .content-title{ margin-bottom: 30px; } .entrytext{ @media (max-width: 768px){ overflow-x: scroll; } h2,h3,h4{ margin: 0; margin-bottom: 20px; font-weight: 500; line-height: normal; font-size: 18px; @media (max-width: 768px){ font-size: 14px; margin-bottom: 10px; } } p{ font-weight: normal; line-height: normal; font-size: 14px; text-align: justify; margin-bottom: 30px; } } } .container-about{ width: 630px; @media (max-width: 710px){ width: auto; } @media (max-width: 768px){ width: auto; .entrytext h3{ font-size: 14px; margin-bottom: 10px; } .entrytext p{ font-size: 12px; } } } .container-services{ width: 1180px; @media (max-width: 1200px){ width: auto; } } .services-page{ .services--inner{ display: block; float: left; width: 578px; border: 1px solid #000; margin-right: 20px; margin-bottom: 20px; color: @gray; text-decoration: none; @media (max-width: 768px){ width: auto; margin-bottom: 15px; } &:nth-child(2n){ margin-right: 0; @media (max-width: 1200px){ margin: 0 auto; margin-bottom: 20px; } @media (max-width: 768px){ margin-bottom: 15px; } } @media (max-width: 1200px){ float: none; margin: 0 auto; margin-bottom: 20px; } &:hover{ .miniature{ img{ transform: scale(1.1); } } .text{ h2{ color: @color-1; } } } .miniature{ width: 280px; height: 170px; float: left; overflow: hidden; @media (max-width: 768px){ width: 49%; height: 90px; } img{ width: 100%; height: 100%; object-fit: cover; transition: 0.3s all; } } .text{ float: right; width: 295px; height: 170px; display: table; text-align: center; @media (max-width: 768px){ width: 48%; height: 90px; } .text-cont{ display: table-cell; vertical-align: middle; align-content: center; align-items: center; padding: 10px; padding-left: 20px; @media (max-width: 768px){ padding: 10px; } } h2{ font-weight: 500; line-height: 21px; font-size: 16px; margin-bottom: 10px; transition: 0.3s all; @media (max-width: 768px){ font-size: 12px; line-height: 15px; margin-bottom: 0; } } .entrytext{ @media (max-width: 768px){ display: none; } } .entrytext p{ text-align: center; margin-bottom: 0; } } } } .project-page{ .project--inner{ display: block; border: 1px solid #000; margin-bottom: 20px; color: @gray; text-decoration: none; &:hover{ .miniature{ img{ transform: scale(1.1); } } .text{ h2{ color: @color-1; } } } .miniature{ width: 379px; height: 230px; float: left; overflow: hidden; @media (max-width: 850px){ width: 48%; } @media (max-width: 400px){ width: 48%; height: 90px; } img{ width: 100%; height: 100%; object-fit: contain; transition: 0.3s all; @media (max-width: 560px){ } } } .text{ float: right; width: 395px; height: 230px; display: table; text-align: left; @media (max-width: 850px){ width: 48%; } @media (max-width: 560px){ width: 48%; } @media (max-width: 400px){ width: 48%; height: 90px; text-align: center; } .text-cont{ display: table-cell; vertical-align: middle; align-content: center; align-items: center; padding: 10px; padding-left: 20px; @media (max-width: 768px){ padding: 10px; } } h2{ font-weight: 500; line-height: 21px; font-size: 16px; margin-bottom: 10px; transition: 0.3s all; @media (max-width: 768px){ font-size: 12px; line-height: 15px; margin-bottom: 0; } } .entrytext{ @media (max-width: 768px){ display: none; } } .entrytext p{ text-align: left; margin-bottom: 0; } } } } .container-project{ width: 780px; @media (max-width: 850px){ width: auto; } @media (max-width: 768px){ width: auto; } } .contacts-page{ .content-title{ margin-bottom: 60px; @media (max-width: 768px){ margin-bottom: 20px; } } .entrytext{ float: left; width: 320px; @media (max-width: 850px){ width: 100%; float: none; margin-bottom: 20px; } @media (max-width: 768px){ width: auto; float: none; margin-bottom: 20px; text-align: center; } p{ font-size: 16px; line-height: normal; @media (max-width: 768px){ text-align: center; } } } .maps{ float: right; width: 470px; height: 260px; @media (max-width: 850px){ width: 100%; float: none; } @media (max-width: 768px){ width: auto; float: none; height: 170px; } iframe{ width: 100%; height: 100%; } } .socials{ margin-top: -25px; .soc--inner{ width: 31px; height: 31px; display: inline-block; margin-right: 10px; } .teleg{ background: url('../img/soc-icons.png') no-repeat left 50%; } .skype{ background: url('../img/soc-icons.png') no-repeat -45px 50%; } .wa{ background: url('../img/soc-icons.png') no-repeat -90px 50%; } .vib{ background: url('../img/soc-icons.png') no-repeat -135px 50%; margin-right: 0; } } } .my-footer{ border-top: 1px solid #d6d6d6; padding: 10px 0; @media (max-width: 768px){ text-align: center; padding-top: 20px; } .logo{ float: left; margin-right: 20px; @media (max-width: 768px){ float: none; width: auto; margin: 0 auto; margin-bottom: 10px; } img{ height: 40px; } .chkopy{ font-weight: normal; line-height: normal; font-size: 12px; margin-top: 5px; color: #898989; } } .contacts{ display: inline-block; vertical-align: middle; margin-right: 40px; @media (max-width: 768px){ margin: 0; } a{ font-size: 14px; font-weight: 500; color: @gray; text-decoration: none; display: block; padding: 10px 0; padding-left: 20px; margin-bottom: 5px; } .tel{ background: url('../img/phone-white.png') no-repeat left 50%; } .mail{ background: url('https://img.icons8.com/material-rounded/14/ad0000/new-post.png') no-repeat left 50%; } .adres{ background: url('../img/adres-white.png') no-repeat left 50%; } } .socials{ float: right; margin-top: 10px; @media (max-width: 768px){ float: none; margin: 0; } .soc-block{ display: inline-block; vertical-align: middle; margin-right: 40px; @media (max-width: 768px){ margin: 0; display: block; } .soc--inner{ width: 31px; height: 31px; display: inline-block; margin-right: 5px; @media (max-width: 768px){ margin: 0 2px; } } .teleg{ background: url('../img/soc-icons.png') no-repeat left 50%; } .skype{ background: url('../img/soc-icons.png') no-repeat -45px 50%; } .wa{ background: url('../img/soc-icons.png') no-repeat -90px 50%; } .vib{ background: url('../img/soc-icons.png') no-repeat -135px 50%; margin-right: 0; } } .btn{ display: inline-block; vertical-align: middle; width: 130px; @media (max-width: 768px){ margin-top: 12px; } } } } .entrytext{ iframe{ width: 768px; height: 300px; margin: 0 auto; display: block; margin-bottom: -25px; @media (max-width: 768px){ width: 100%; height: 200px; } } p{ display: block; margin-bottom: 20px; } h2, h3, h4, h5, h6{ font-weight: bold; margin-bottom: 15px; } ul{ margin: 20px 0; padding: 0; li{ font-size: 14px; line-height: 24px; font-weight: normal; list-style: none; padding-left: 0; position: relative; @media (max-width: 768px){ font-size: 12px; line-height: normal; } &::before{ content: '- '; } } } ol{ padding: 0; padding-left: 15px; margin: 0; margin-bottom: 30px; li{ line-height: normal; font-size: 14px; @media (max-width: 768px){ font-size: 12px; line-height: normal; } } } table{ margin-bottom: 30px; td{ border: 1px solid #000; vertical-align: middle; padding: 0 10px; } } } .modal-el1t_boby{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 999; display: none; .modal-el1t_boby-content{ display: flex; width: 100%; height: 100%; align-items: center; align-content: center; justify-content: center; } } .close-el1t_boby{ background: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .modal-el1t{ width: 380px; z-index: 2; text-align: center; background: #fff; position: relative; border-radius: 5px; box-shadow: 0 10px 20px 0 rgba(41, 41, 41, 0.2); @media (max-width: 768px){ width: 90%; } .title{ font-weight: normal; line-height: normal; font-size: 18px; padding-top: 30px; margin: 0; margin-bottom: 20px; @media (max-width: 768px){ padding-left: 5px; padding-right: 5px; } } form{ padding: 0 28px; padding-bottom: 20px; input{ width: 100%; margin-bottom: 10px; box-sizing: border-box; } textarea{ margin-top: 10px; margin-bottom: 20px; } } } .close--modal-el1t{ position: absolute; right: 10px; top: 10px; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; width: 20px; height: 20px; display: block; background: url('https://png.icons8.com/windows/20/000000/multiply.png') no-repeat 50% 50%; &:hover{ opacity: 0.7; } } form{ textarea, input{ min-width: 215px; border-radius: 5px; padding: 10px 20px; margin-right: 15px; border: 1px solid #d9d9d9; outline: none; display: block; font-weight: 500; line-height: normal; font-size: 14px; transition: 0.3s all; @media (max-width: 768px){ min-width: 100%; box-sizing: border-box; } &:focus{ border-color: @color-2; } } textarea{ width: 100%; box-sizing: border-box; height: 70px; max-width: 100%; min-height: 70px; } .btn{ @media (max-width: 768px){ box-sizing: border-box; width: 100%; } } } .regular{ position: relative; @media (max-width: 425px){ width: 100%; overflow: hidden; } .owl-item{ float: left; } .owl-stage-outer{ overflow: hidden; width: 100%; position: relative; z-index: 2; } .owl-nav{ display: none; } } .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; -moz-backface-visibility: hidden; /* fix firefox animation glitch */ } .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; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -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 { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .owl-carousel .owl-item img { display: block; width: 100%; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loaded { display: block; } .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 { -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; } /* No Js */ .no-js .owl-carousel { display: block; } /* * Owl Carousel - Animate Plugin */ .owl-carousel .animated { animation-duration: 1000ms; 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 Carousel - Auto Height Plugin */ .owl-height { transition: height 500ms ease-in-out; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity 400ms ease; } .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .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 100ms 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-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; }