@blue: #064f8c; @dblue: #064f8c; @yellow: #c68c00; @font: Arial, Helvetica, sans-serif; @fontSec: 'Roboto', sans-serif; @widthLarge: 1170px; @paddingLarge: 0px; @breakpointMid: 1200px; @widthMid: 760px; @paddingMid: 0; @breakpointSmall: 768px; @widthSmall: 290px; @widthSmallMax: 600px; @paddingSmall: 15px; /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/reset/ License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* ----------- */ html, body{ height: 100%; } body { font: 14px/1.58 @font; background: #fff; color: #555555; } a { color: inherit; } .nowrap { white-space: nowrap; } .container { position: relative; // box-sizing: border-box; margin: 0 auto; max-width: @widthLarge; padding: 0 @paddingLarge; @media screen and (max-width: @breakpointMid) { max-width: @widthMid; padding: 0 @paddingMid; } @media screen and (max-width: @breakpointSmall) { min-width: @widthSmall; max-width: @widthSmallMax; padding: 0 @paddingSmall; } } .trn { -webkit-transition: all .5s ease; transition: all .5s ease; } .icn { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .clr { content: ''; display: block; clear: both; width: 100%; } .btn, .content a.btn { .trn; background: none; border-radius: 25px; -webkit-box-shadow: none; box-shadow: none; text-decoration: none !important; text-align: center; cursor: pointer; box-sizing: border-box; display: inline-block; border: 1px solid @blue; padding: .75em 2em; white-space: nowrap; font: 700 16px/20px @font; color: @blue; &:hover { background: @blue; color: #fff; } } .btn-main, .content a.btn-main { .trn; background: #ffb517; -webkit-box-shadow: none; box-shadow: none; text-decoration: none !important; text-align: center; cursor: pointer; box-sizing: border-box; display: inline-block; border: none; padding: 15px 25px; white-space: nowrap; font: 24px/30px @font; color: #fff; min-width: 320px; max-width: 100%; &:hover { background: @blue; color: #fff; } @media screen and (max-width: @breakpointSmall) { min-width: 290px; font-size: 20px; } } .btn-back { &:before { .icn; content: "\f104"; margin-right: 8px; } } .main-wrapper { min-height: 100%; overflow: hidden; } .main-container { padding-bottom: 150px; @media screen and (max-width: @breakpointMid) { padding-top: 50px; } } .content{ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: 1.2em; line-height: normal; color: #000; font-family: @fontSec; font-weight: 700; } h6, .h6 { font-size: 14px; } h5, .h5 { font-size: 16px; } h4, .h4 { font-size: 18px; } h3, .h3 { font-size: 20px; } h2, .h2 { font-size: 24px; } h1, .h1 { font-size: 30px; } // @media screen and (max-width: @breakpointSmall) { // h6, .h6 {font-size: 16px} // h5, .h5 {font-size: 18px} // h4, .h4 {font-size: 20px} // h3, .h3 {font-size: 22px} // h2, .h2 {font-size: 24px} // h1, .h1 {font-size: 26px} // } p { margin-bottom: .7em; } strong, .strong { font-weight: bold; } em, .em, .i, i { font-style: italic; } ul, ol { margin-bottom: 2em; margin-top: 2em; } li { margin-bottom: .8em; } ul li { padding-left: 1.5em; position: relative; &:before{ .icn; content: "\f00c"; color: @dblue; position: absolute; left: 1px; top: .4em; } } ol { list-style: inside decimal; } a { text-decoration: underline; color: @dblue; &:hover{ text-decoration: none; } } img { max-width: 100%; height: auto; } form { max-width: 400px; margin: 0 auto; text-align: center; input, textarea { .trn; display: block; width: 100%; box-sizing: border-box; border: 1px solid transparent; border-radius: 0; height: 50px; padding: 15px 25px; margin-bottom: 21px; text-align: left; background: 0; -webkit-box-shadow: none; box-shadow: none; outline: none; font: 300 16px/20px @font; color: #000; background: #eeeeee; &::-webkit-input-placeholder {color: #555555;opacity: 1;} &::-moz-placeholder {color: #555555;opacity: 1;} &:-ms-input-placeholder {color: #555555;opacity: 1;} &:focus { &::-webkit-input-placeholder {opacity: 0} &::-moz-placeholder {opacity: 0} &:-ms-input-placeholder {opacity: 0} outline: none; border-color: @blue; } } textarea { height: 200px; max-width: 100%; } button { .trn; background: none; -webkit-box-shadow: none; box-shadow: none; text-decoration: none !important; text-align: center; cursor: pointer; margin-top: 20px; display: inline-block; border: none; background: @dblue; padding: 20px 15px; white-space: nowrap; font: italic 16px/20px @font; color: #fff; min-width: 220px; &:hover { background: @blue; color: #fff; } } .capture { input { width: 300px; display: inline-block; margin-left: 15px; vertical-align: middle; margin-bottom: 0; } img { display: inline-block; width: 80px; vertical-align: middle; } } } table { border-collapse: collapse; margin: 10px 0 20px; border-color: @dblue; font-size: 14px; margin: 2em 0; width: 100%; th { font-weight: bold; text-transform: uppercase; text-transform: none; } tr:hover { td { background: fade(@dblue,30%); } } td { vertical-align: top; } th { vertical-align: top; font-weight: 400; text-align: center; background: @dblue; color: #fff; } th, td { padding: 15px 25px; border: 1px solid #bbb; @media screen and (max-width: @breakpointMid) { padding: 10px 5px; } } &.table_site { td { border: 0; border-bottom: 1px solid #bbb; } } // @media screen and (max-width: @breakpointSmall) { // th, td { // padding: 5px 10px; // } // } } } .main-footer { background:@blue; min-height: 150px; margin-top: -150px; position: relative; font: 13px/16px @font; color: #b3b3b3; .main-footer-top { .container { border-bottom: 1px solid #b3b3b3; padding-bottom: 20px } .col { display: inline-block; width: 75%; vertical-align: bottom; + .col { width: 25%; } @media screen and (max-width: @breakpointSmall) { width: 100%; display: block; text-align: center; + .col { width: 100% } } + .col { text-align: right; @media screen and (max-width: @breakpointSmall) { text-align: center; } } } } .main-footer-bot { padding: 10px 0 10px; .col { display: inline-block; width: 50%; vertical-align: bottom; @media screen and (max-width: @breakpointSmall) { display: block; width: 100%; text-align: center; } + .col { text-align: right; @media screen and (max-width: @breakpointSmall) { text-align: center; } } } } .footer-nav { ul { text-align: justify; line-height: 0; width: 100%; &:after { content: ''; display: inline-block; width: 100%; } li { display: inline-block; vertical-align: top; margin-right: 10px; a, span { .trn; display: block; font: 13px/16px @fontSec; color: #fff; padding: 5px 0; text-align: center; text-decoration: none; &:hover, &.current { color: @blue; } } } } } // .contacts { // padding-top: 10px; // font: 14px/16px @font; // color: @blue; // a { // text-decoration: none; // } // .phones { // font: 500 24px/30px @fontSec; // p { // margin-bottom: 5px; // } // a { // display: block; // } // } // .email { // display: block; // text-decoration: none; // &:before { // .icn; // content: "\f0e0"; // font-size: 16px; // margin-right: 5px; // } // } // } .contacts { padding-top: 25px; color: #acabab; .contacts-title { color: #fff; font-size: 20px; text-transform: uppercase; margin-bottom: 20px; &:before { .icn; content: "\f041"; font-size: 24px; margin-right: 5px; } } a { text-decoration: none; } .contacts-col { display: inline-block; vertical-align: top; width: 48%; + .contacts-col { margin-left: 4%; } @media screen and (max-width: @breakpointSmall) { width: 100%; margin: 0 0 20px 0 !important; } } .contacts-header { color: #fff; margin-top: 25px; } } .logo { display: block; padding: 65px 0 12px 0; text-decoration: none; @media screen and (max-width: @breakpointSmall) { padding-top: 25px; } .img { width: 200px; padding-right: 1px; display: inline-block; vertical-align: top; img { display: block; max-width: 100%; margin: 0 auto; } } } .copy { @media screen and (max-width: @breakpointSmall) { margin-top: 10px; margin-bottom: 10px; } } .counters { @media screen and (max-width: @breakpointSmall) { margin-bottom: 10px; } } .dev { color:#fff; } } .main-header { background:#fff; .col { display: inline-block; width: 33%; vertical-align: top; @media screen and (max-width: @breakpointMid) { &:first-child { width: 100%; } } @media screen and (max-width: @breakpointSmall) { display: block; width: 100%; text-align: center; } + .col { text-align: right; width: 22%; @media screen and (max-width: @breakpointMid) { text-align: center; width: 33%; } @media screen and (max-width: @breakpointSmall) { width: 100%; text-align: center; } } } .logo { display: block; padding: 15px 0 12px 0; text-decoration: none; .img { width: 400px; padding-right: 1px; display: inline-block; vertical-align: top; @media screen and (max-width: @breakpointMid) { width: 260px; margin: 0 auto; display: block; } img { display: block; max-width: 100%; margin: 0 auto; } } .logo-title { font: 14px/18px @font; display: inline-block; vertical-align: top; color: @blue; position: relative; padding-top: 7px; padding-left: 23px; @media screen and (max-width: @breakpointSmall) { padding: 20px 0 0 0; } &:before { content: ''; display: block; width: 1px; height: 36px; position: absolute; left: 0; top: 10px; background: @blue; @media screen and (max-width: @breakpointSmall) { display: none; } } strong { color: @dblue; } } } .contacts { padding-top: 33px; font: 14px/16px @font; // float:left; @media screen and (max-width: @breakpointSmall) { padding: 10px 0; } color: @blue; a { text-decoration: none; } .phones { font: 500 14px/36px @fontSec; display: block; &:before { .icn; content: "\f095"; color: @yellow; font-size: 16px; margin-right: 5px; } p { margin-bottom: 5px; } a { display: block; } } .address { font: 500 14px/36px @fontSec; display: block; &:before { .icn; content: "\f041"; color: @yellow; font-size: 16px; margin-right: 5px; } p { margin-bottom: 5px; } a { display: block; } } .email { font: 500 14px/36px @fontSec; display: block; text-decoration: none; &:before { .icn; content: "\f0e0"; color: @yellow; font-size: 16px; margin-right: 5px; } } } } .main-nav { background: linear-gradient(to bottom,#f9f9f9 0%,#e9e9e9 100%); margin-top:3px; @media screen and (max-width: @breakpointMid) { margin-top:0px; } .nav-menu { display: table; width: 100%; table-layout: fixed; @media screen and (min-width: 1201px) { display: table !important; opacity: 1 !important; } > li { display: table-cell; position: relative; > a, > span { .trn; display: block; position: relative; text-align: center; font: 13px/18px @fontSec; color: @blue; text-decoration: none; padding: 15px 0; width: 100%; &:hover, &.current { background: @blue; color: #fff; } span { display: block; width: 100%; margin-top: 5px; } .nav-icn { display: block; &:before { .icn(); content: ''; font-size: 36px; line-height: 35px; } } .nav-icn-6:before { content: 'P'; font-family: @fontSec; font-weight: bold; } .nav-icn-40:before { content: "\f024" } .nav-icn-3:before { content: "\f0a1" } .nav-icn-5:before { content: "\f007" } .nav-icn-44:before { content: "\f15b" } .nav-icn-55:before { content: "\f1cd" } .nav-icn-91:before { content: "\f0c0" } .nav-icn-99:before { content: "\f056" } .nav-icn-60:before { content: "\f005" } .nav-icn-70:before { content: "\f0c0" } .nav-icn-7:before { content: "\f083" } .nav-icn-9:before { content: "\f124" } .nav-icn-92:before { content: "\f132"; } .nav-icn-106:before { content: "\f21d"; } .nav-icn-107:before { content: "\f05a"; } } + li { > a:before, > span:before { .trn; content: ''; display: block; width: 1px; height: 14px; background: #d4d4d4; border-right: 1px solid #fbfbfb; position: absolute; left: 0px; top: 50%; margin-top: -7px; } } &:hover, &.current { >a:before, > span:before, + li > a:before, + li >span:before { opacity: 0; } } &:hover .nav-childs { display: block; } &.catalog-container:hover .categories-nav { display: block; } } } .nav-childs { display: none; position: absolute; left: 50%; right: 0; top: 100%; width: 300px; margin-left: -100px; background: url(../images/catalog-nav-bg.png) top center no-repeat; background-size: cover; z-index: 100; box-sizing: border-box; padding: 10px 5px; color: #fff; @media screen and (max-width: @breakpointMid) { display: block; position: static; background: none; padding: 0 0 15px; color: inherit; width: auto; margin: 0; } .nav-child { display: block; box-sizing: border-box; padding: 5px 5px; font: 500 14px/20px @fontSec; text-align: center; position: relative; text-decoration: none; &:hover { opacity: 0.8; } } } .categories-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: url(../images/catalog-nav-bg.png) top center no-repeat; background-size: cover; z-index: 100; box-sizing: border-box; padding: 35px 15px 20px 15px; color: #fff; .col { display: inline-block; vertical-align: top; width: 25%; box-sizing: border-box; padding: 0 15px; } .title { font: 500 15px/15px @fontSec; min-height: 30px; text-align: center; text-transform: uppercase; position: relative; padding-bottom: 15px; margin-bottom: 20px; a { display: block; text-decoration: none; } &:after { content: ''; width: 50px; height: 1px; background: #fff; position: absolute; bottom: 0; left: 50%; margin-left: -25px; } } ul { margin-bottom: 15px; li { margin-bottom: 11px; a { font: 13px/14px @fontSec; text-decoration: none; display: block; &:hover, &.current { color: @yellow; text-decoration: underline; } } } } } @media screen and (max-width: @breakpointMid) { position: fixed; top: 0; left: 0; width: 100%; max-height: 100%; overflow: auto; padding: 0; z-index: 100; .toggle-nav { width: 50px; height: 50px; position: relative; display: block; cursor: pointer; .icn-bar { .trn; position: absolute; left: 50%; margin-left: -10px; top: 50%; width: 20px; height: 4px; background: @blue; border-radius: 3.5px; margin-top: -10px; + .icn-bar { margin-top: -3px; + .icn-bar { margin-top: 4px; } } } } .nav-menu { display: none; width: 100%; padding-bottom: 25px; > li { display: block; > a, > span { padding: 15px 0; } + li { > a:before, > span:before { .trn; content: ''; display: block; width: 24px; height: 1px; background: #d4d4d4; border-top: 1px solid #fbfbfb; position: absolute; left: 50%; margin-left: -12px; top: -1px; } } } } .categories-nav {display: none!important;} } } .title-block { background: @blue url(../images/title-block-bg.jpg) top center no-repeat; background-size: cover; position: relative; color: #000; text-decoration: none; padding: 20px 0; // height: 100%; .title-block-after { content: ''; display: block; width: 735px; height: 519px; background-position: top center; background-repeat: no-repeat; // background: url(../images/title-block-after.png) top center no-repeat; background-size: contain; position: absolute; left: 57%; margin-left: -93px; bottom: -150px; z-index: 5; @media screen and (max-width: @breakpointMid) { display: none; } } .container { display: flex; align-items: center; // justify-content: center; min-height: 420px; // height: 100%; } .title-block-text { max-width: 550px; text-align: right; &-cont { background-color: rgba(6, 79, 140, 0.729); padding: 2em 2.5em; font: 16px/1.5 @fontSec; color: #fff; text-align: left; } } .title-first { font: 700 30px/1.4 @fontSec; } .title-sec { margin-top: 1em; } .btn { margin-top: 1em; background: @yellow; border-color: transparent; color: #fff; &:hover{background: #ea9a12;} } @media screen and (max-width: @breakpointMid) { .title-block-text { width: 360px; padding: 0 30px; } .title-sec { font-size: 26px; line-height: 30px; padding-left: 0px; } .title-first { padding-left: 0px; font-size: 25px; line-height: 30px; top: 135px; strong, .strong { font-size: 50px; } } } @media screen and (max-width: @breakpointSmall) { background-position: left top; height: auto; padding: 25px 0; &.title-block-id-3:after { display: none; } .title-sec { position: static; margin-bottom: 20px; } .title-first { position: static; } .title-block-text { width: auto; } } } .title-block-slider-wrapper { margin-top:3px; .bx-viewport { overflow: visible !important; } .title-block-slider { } position: relative; z-index: 1; .bx-next, .bx-prev { position: absolute; z-index: 1500; width: 200px; top: 0; bottom: 0; background: transparent; border: none; outline: none; overflow: hidden; text-indent: 999px; text-align: left; cursor: pointer; text-decoration: none; @media screen and (max-width: @breakpointSmall) { width: 50px; } &:after { .trn(); .icn; content: ''; width: 30px; height: 157px; font-size: 18px; line-height: 157px; position: absolute; top: 50%; margin-top: -78px; background: fade(#000,30); text-indent: 0; text-align: center; color: #fff; } } .bx-prev { left: 0; &:after { left: 0; content: "\f104"; } } .bx-next { right: 0; &:after { right: 0; content: "\f105"; } } &:hover { &:after { background: @yellow; width: 40px; } } } .page { padding-top: 55px; padding-bottom: 60px; &:after {.clr;} } .bottom-block { padding: 40px 0; &-title { font: 700 20px/24px @fontSec; text-transform: uppercase; color: #000; text-decoration: none; display: block; margin-bottom: 22px; text-align: left; a { display: block; text-decoration: none; } } } .last-news { text-align: right; li { display: block; text-align: left; &:after{.clr;} a { display: block; text-decoration: none; } .img { margin-right: 10px; border-radius: 4px; overflow: hidden; img { display: block; max-width: 100%; border-radius: 4px; } .noImg { padding-top: 66.667%; } } .text { margin-top: -4px; overflow: hidden; font: 500 14px/18px @fontSec; color: #010101; padding: 15px 15px; position: relative; } .date { font: 14px/18px @font; color: @blue; margin-bottom: 5px; } } .bx-controls { position: absolute; bottom:-7px; .bx-next, .bx-prev { .trn; display: inline-block; width: 40px; height: 40px; overflow: hidden; text-align: left; text-indent: 999px; background: @blue; border-radius: 50%; text-decoration: none; position: relative; margin-left: 15px; &:before { content: ''; position: absolute; left: 0; top: 0; .icn; width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 20px; line-height: 40px; } &:hover { color: #fff; background: @yellow; } } .bx-prev:before{content: "\f104";} .bx-next:before{content: "\f105";} } .btn { margin-top: 10px; } } .last-works { background: #eee ; } .last-works, .partners { text-align: right; .gallery { display: block; text-align: left; margin: 0 !important; &:after{.clr;} a { display: block; text-decoration: none; margin: 0; background: @yellow; text-decoration: none; position: relative; &:after { .icn; content: "\f065"; width: 40px; height: 40px; font-size: 24px; line-height: 38px; color: white; border-radius: 50%; border: 1px solid white; text-align: center; position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; opacity: 0; .trn; } &:hover { img { opacity: .2; } &:after { opacity: 1; } } img { .trn; } } .img { border-radius: 4px; overflow: hidden; img { display: block; max-width: 100%; border-radius: 4px; } } p { display: none; } } .bx-wrapper { position: relative; } .bx-controls { .bx-next, .bx-prev { .trn; position: absolute; top: 50%; margin-top: -15px; display: inline-block; width: 40px; height: 40px; overflow: hidden; text-align: left; text-indent: 999px; background: @blue; border-radius: 50%; text-decoration: none; @media screen and (max-width: @breakpointSmall) { width: 20px; } &:before { content: ''; position: absolute; left: 0; top: 0; .icn; width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 20px; line-height: 40px; } &:hover { opacity: 1; background: @yellow; } } .bx-prev { left: -15px; &:before{content: "\f104";} } .bx-next { right: -15px; &::before{content: "\f105";} } } .btn { margin-top: 25px; } } .additional { padding: 65px 0; text-align: center; } .page-title { background: url(../images/page-title-bg.jpg) top center no-repeat; background-size: cover; padding: 40px 0 40px; min-height: 150px; box-sizing: border-box; .title { font: 500 36px/40px @font; color: #fff; } } .gallery { margin: 15px 0 15px -35px; @media screen and (max-width: @breakpointSmall) { text-align: center; } > div { text-align: left; margin-left: -35px; } a { display: inline-block; vertical-align: top; width: 320px; max-width: 100%; margin-left: 35px; margin-bottom: 25px; text-decoration: none; text-align: center; color: @dblue; img { display: block; margin: 0 auto; max-width: 100%; } p { margin: 5px 0 0; font-size: 18px; font-weight: bold; text-align: center; } } } .cat-gallery { margin-left: -66px; > div { margin-left: -20px; } a { width: 320px; margin-left: 66px; } p { font-size: 14px; } @media screen and (max-width: @breakpointMid) { margin-left: -20px; a { margin-left: 20px; } } } .videogallery { margin: 15px 0; margin-left: -35px; @media screen and (max-width: @breakpointSmall) { margin-left: 0; } .video { display: inline-block; vertical-align: top; margin-left: 35px; margin-bottom: 25px; max-width: 100%; @media screen and (max-width: @breakpointSmall) { display: block; margin-left: 15px; margin-right: 15px; } .img { display: block; background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative; max-width: 100%; &:before { .trn; position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ''; background: rgba(0,0,0,.7); cursor: pointer; } &:after { .icn; .trn; content: "\f16a"; position: absolute; font-size: 50px; line-height: 60px; height: 60px; width: 60px; text-align: center; cursor: pointer; top: 50%; left: 50%; margin-left: -30px; margin-top: -30px; color: #fff; z-index: 10; } &:hover { &:before { background: rgba(0,0,0,.5); } &:after { color: @dblue; } } &.playing { &:before, &:after { display: none; } } } .title { margin: 5px 0 0; font-size: 18px; font-weight: bold; text-align: center; } } } // .nav_pages { // margin-top: 40px; // border-top: 1px solid #e7d0be; // padding: 40px 0; // @media screen and (max-width: @breakpointSmall) { // text-align: center; // } // .col { // display: inline-block; // width: 25%; // text-align: left; // vertical-align: middle; // + .col { // width: 50%; // text-align: center; // + .col { // width: 25%; // text-align: right; // } // } // @media screen and (max-width: @breakpointSmall) { // display: inline; // width: auto !important; // text-align: center !important // } // } // .nav_pages_btn { // .trn; // display: inline-block; // font: bold 16px/30px @fontSec; // color: @dblue; // text-decoration: none; // text-transform: uppercase; // &:hover { // color: @blue; // } // &.nav_pages_back:before { // .icn; // content: "\f137"; // font-size: 30px; // line-height: 30px; // vertical-align: middle; // margin-right: 8px; // } // &.nav_pages_forward:after { // .icn; // content: "\f138"; // font-size: 30px; // line-height: 30px; // vertical-align: middle; // margin-left: 8px; // } // } // .nav_pages_link { // .trn; // display: inline-block; // vertical-align: middle; // margin: 4px 2px; // text-decoration: none; // text-align: center; // min-width: 30px; // height: 30px; // padding: 5px 5px; // font: bold 18px/30px @font; // color: #fff; // background: @dblue; // border-radius: 50%; // &.current, &:hover { // background: @blue; // } // } // } .main-page-img { max-width: 100%; float: left; margin-right: 20px; margin-bottom: 20px; display: block; @media screen and (max-width: @breakpointSmall) { float: none; margin-left: auto; margin-right: auto; } } .news { article { display: inline-block; box-sizing: border-box; width: 50%; vertical-align: top; padding: 0 15px 0 0; margin-bottom: 25px; &:nth-child(even){ padding: 0 0 0 15px; } @media screen and (max-width: @breakpointSmall) { width: 100%; display: block; padding: 0 !important; } &:after { .clr; } .img { width: 170px; float: left; margin-right: 30px; @media screen and (max-width: @breakpointSmall) { float: none; display: block; margin: 0 0 25px; } img { display: block; width: 100%; } .noImg { padding-top: 66.667%; } } .text { overflow: hidden; .date { font: 13px/15px @font; color: #b8b8b8; margin-bottom: 10px; } .title { font: bold 16px/19px @fontSec; color: #333333; margin-bottom: 10px; } .announce { font: 14px/17px @font; color: #555555; margin-bottom: 15px; } a { font: 14px/16px @font; color: @blue; text-decoration: underline; } } } article + .btns { margin-top: 30px; } .btns { text-align: center; margin-bottom: 30px; } } .files { ul { li { &:before { content: "\f019"; color: @blue; } a { color: #555555; text-decoration: none; &:hover { text-decoration: underline; color: @blue; } } } } } .article { .img { width: 375px; float: left; margin: 0 30px 30px 0; img { display: block; max-width: 100%; } } } .catalog { > aside { float: left; width: 270px; margin-right: 60px; @media screen and (max-width: @breakpointMid) { width: 220px; margin-right: 20px; } @media screen and (max-width: @breakpointSmall) { float: none; width: 100%; margin: 0 0 25px 0; } } .overflow { overflow: hidden; } @media screen and (max-width: @breakpointSmall) { text-align: center; } .catalog-folder-element { display: inline-block; width: 320px; box-sizing: border-box; margin: 0 20px 10px; vertical-align: top; text-decoration: none; text-align: center; color: #333; @media screen and (max-width: @breakpointMid) { margin-left: 45px; margin-right: 45px; } @media screen and (max-width: @breakpointSmall) { margin-left: 15px; margin-right: 15px; margin-bottom: 25px; } &:hover { color: @blue; } .img { border: 1px solid #e8e8e8; margin-bottom: 15px; img { display: block; width: 100%; } .noImg { padding-top: 68.2%; background: #e8e8e8; } } .name { font: bold 14px/16px @fontSec; } } } .catalog-side-nav { a { display: table; text-decoration: none; height: 50px; box-sizing: border-box; padding: 4px 30px; width: 100%; border: 1px solid @blue; border-radius: 25px; color: #000; font: 14px/20px @font; margin-bottom: 10px; &:hover, &.current { color: #fff; background: @blue; } span { display: table-cell; vertical-align: middle; } @media screen and (max-width: @breakpointMid) { padding: 4px 10px; border-radius: 10px; } } } .catalog-element { .title { text-align: center; margin-bottom: 25px; } .img { margin-bottom: 25px; img { display: block; max-width: 100%; max-height: 300px; margin: 0 auto; } } } // .page-id-9 { // .feedback-form { // float: right; // width: 400px; // margin-left: 100px; // @media screen and (max-width: @breakpointMid) { // width: 300px; // margin-left: 30px; // .capture input { // width: 100%; // margin-left: 0; // margin-top: 10px; // } // } // @media screen and (max-width: @breakpointSmall) { // float: none; // max-width: 100%; // margin: 0 auto 40px; // } // } // } .price { margin-top: 25px; } .soc-link { .trn; display: inline-block; vertical-align: top; width: 40px; height: 40px; border: fade(@blue, 100) 1px solid; border-radius: 50%; overflow: hidden; text-indent: 999px; text-align: left; text-decoration: none; color: @blue; position: relative; &:before, i { .icn; content: ''; width: 40px; height: 40px; text-align: center; text-indent: 0; display: block; position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -20px; font-size: 18px; line-height: 40px; } &.soc-link-fb:before { content: "\f09a"; } &.soc-link-vk:before { content: "\f189"; } &.soc-link-ok:before { content: "\f263"; } &.soc-link-in:before { content: "\f16d"; } &.soc-link-yt:before { content: "\f167"; } &:hover { border-color: @blue; background:@blue; color: #fff; } } .carousel { &-link { color: inherit; text-decoration: none; } &-item { display: block; text-align: center; } &-image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 75px; } &-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; } &-label { display: block; margin-top: 25px; font: 600 14px/18px @font; color: #010101; } } .links { &-items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } &-item { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 25%; -ms-flex: 25% 0 0px; flex: 25% 0 0; padding: 15px 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-decoration: none; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; @media screen and (max-width: @breakpointMid) { -ms-flex-preferred-size: 33%; flex-basis: 33% } @media screen and (max-width: @breakpointSmall) { -ms-flex-preferred-size: 50%; flex-basis: 50% } @media screen and (max-width: 550px) { -ms-flex-preferred-size: 100%; flex-basis: 100% } &:hover .links-img { -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } } &-image { -webkit-box-flex: 50px; -ms-flex: 50px 0 0px; flex: 50px 0 0; margin-right: 15px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } &-img { display: block; max-width: 100%; max-height: 100%; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); } &-label { display: block; font: 14px/18px @font; color: #010101; text-decoration: none; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: block; } } .top-nav { &-items { display: flex; justify-content: space-around; flex-wrap: wrap; } a { position: relative; display: block; text-decoration: none; font: 600 16px/1.4 @font; text-transform: uppercase; color: #FFF; background: @blue; text-align: center; padding: 13px 20px 13px; margin: 0 15px 15px; @media screen and (max-width: @breakpointSmall) { font-size: 13px; padding: 10px 10px; &:after { left: 15px; right: 15px; height: 3px; } } @media screen and (max-width: 600px) { flex-basis: 100%; } &:after { content: ''; display: block; position: absolute; bottom: 0; left: 35px; right: 35px; height: 5px; background: #FBCA15; } &:hover {background: @blue;}} } .btn-sv-toggle { display: inline-block; vertical-align: middle; margin: 4px 2px; font: bold 14px/20px Arial, Helvetica, sans-serif; text-align: center; text-decoration: none; padding: 5px 10px; box-sizing: border-box; border: 1px solid #000000; cursor: pointer; margin-bottom: 15px; max-width: 90%; } @svwhite: #fff; @svblack: #000; @svblue: #9DD1FF; @svdblue: #063462; @svsans: Arial, "Helvetica Neue", Helvetica, sans-serif; @svserif: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; .sv-panel { display: none; @media screen and (max-width: 1200px) { margin-top: 50px; } // position: fixed; // left: 0; // top: 0; // width: 100%; // z-index: 200; background: @svwhite; border-bottom: 2px solid @svblack; .sv-panel-container { max-width: 980px; margin: 0 auto; } .sv-panel-col { display: inline-block; vertical-align: top; width: 25%; box-sizing: border-box; padding: 15px 15px; text-align: center; @media screen and (max-width: 680px) { width: 100%; } } .sv-param { margin-bottom: 10px; } .sv-param-title { font: bold 16px/20px @font; display: block; margin-bottom: 10px; } .svp-color { display: inline-block; vertical-align: middle; width: 32px; height: 32px; margin: 4px 2px; font: bold 16px/20px @font; text-align: center; text-decoration: none; padding: 5px 5px; box-sizing: border-box; border: 1px solid transparent; cursor: pointer; &.svp-color-default { background: @svwhite; border-color: @svblack; color: @svblack; } &.svp-color-invert { background: @svblack; border-color: @svwhite; color: @svwhite !important; } &.svp-color-blue { background: @svblue; border-color: @svdblue; color: @svdblue; } } .svp-size { display: inline-block; vertical-align: middle; width: 32px; height: 32px; margin: 4px 2px; font: bold 16px/20px @font; text-align: center; text-decoration: none; padding: 5px 5px; box-sizing: border-box; border: 1px solid @svblack; cursor: pointer; &.svp-size-default { font-size: 16px; } &.svp-size-medium { font-size: 20px; } &.svp-size-large { font-size: 28px; } } .svp-font { display: inline-block; vertical-align: middle; width: 32px; height: 32px; margin: 4px 2px; font: bold 16px/20px @font; text-align: center; text-decoration: none; padding: 5px 5px; box-sizing: border-box; border: 1px solid @svblack; cursor: pointer; &.svp-font-sans, &.svp-font-default { font-family: @svsans !important } &.svp-font-serif { font-family: @svserif !important } } .svp-images { display: inline-block; vertical-align: middle; width: 32px; height: 32px; margin: 4px 2px; font: bold 16px/20px @font; text-align: center; text-decoration: none; padding: 5px 5px; box-sizing: border-box; border: 1px solid @svblack; cursor: pointer; &.svp-images-on { display: none; } } .btn-sv-off { display: inline-block; vertical-align: middle; height: 32px; margin: 4px 2px; font: bold 16px/20px @font; text-align: center; text-decoration: none; padding: 5px 15px; box-sizing: border-box; border: 1px solid @svblack; cursor: pointer; } .svci & { background: @svblack; border-bottom-color: @svwhite; color: @svwhite; .svp-size, .svp-images, .btn-sv-off { border-color: @svwhite; } } .svcb & { background: @svblue; border-bottom-color: @svdblue; color: @svdblue; .svp-size, .svp-images, .btn-sv-off { border-color: @svdblue; } } .svif & { .svp-images { display: none; &.svp-images-on { display: inline-block; } } } } // DEFAULT SPEC VIEW .sv { background: @svwhite; color: @svblack; font-family: @svsans !important; * { font-family: @svsans !important; } .sv-panel { display: block!important;} .btn-sv-toggle { display: none; } .btn, .content a.btn { border: 1px solid @svblack; color: @svblack; &:hover { background: @svwhite; color: @svblack; } } .btn-main, .content a.btn-main { background: @svwhite; color: @svblack; &:hover { background: @svwhite; color: @svblack; } } .content{ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: @svblack; } ul li { &:before{ color: @svblack; } } a { color: @svblack; } form { input, textarea { color: @svblack; background: @svwhite; &::-webkit-input-placeholder {color: @svblack;} &::-moz-placeholder {color: @svblack;} &:-ms-input-placeholder {color: @svblack;} &:focus { border-color: @svblack; } } button { background: @svwhite; color: @svblack; &:hover { background: @svwhite; color: @svblack; } } } table { border-color: @svblack; tr:hover { td { background: @svwhite; } } th { background: @svwhite; color: @svblack; } th, td { border: 1px solid @svblack; } &.table_site { td { border-bottom: 1px solid @svblack; } } } } .main-footer { background: @svwhite; color: @svblack; .main-footer-top { .container { border-bottom: 1px solid @svblack; } } .footer-nav { ul { li { a, span { color: @svblack; &:hover, &.current { color: @svblack; } } } } } .contacts { color: @svblack; .contacts-title { color: @svblack; } .contacts-header { color: @svblack; } } .dev { color: @svblack; } } .main-header { background: @svwhite; .contacts { color: @svblack; .phones { &:before { color: @svblack; } } .address { &:before { color: @svblack; } } .email { &:before { color: @svblack; } } } } .main-nav { background: @svwhite; .nav-menu { > li { > a, > span { color: @svblack; &:hover, &.current { background: @svwhite; color: @svblack; } } + li { > a:before, > span:before { background: @svwhite; border-right: 1px solid @svblack; } } } } .categories-nav { background: @svwhite; color: @svblack; .title { &:after { background: @svwhite; } } ul { li { a { &:hover, &.current { color: @svblack; } } } } } @media screen and (max-width: @breakpointMid) { .toggle-nav { .icn-bar { background: @blue; } } .nav-menu { > li { + li { > a:before, > span:before { background: @svwhite; border-top: 1px solid @svblack; } } } } } } .title-block { background: @svwhite; color: @svblack; .title-block-text { background: @svwhite; } } .title-block-slider-wrapper { .bx-next, .bx-prev { &:after { background: @svwhite; color: @svblack; } } &:hover { &:after { background: @svwhite; } } } .bottom-block { &-title { color: @svblack; } } .last-news { li { .text { color: @svblack; } .date { color: @svblack; } } .bx-controls { .bx-next, .bx-prev { background: @svwhite; &:before { color: @svblack; } &:hover { color: @svblack; background: @svwhite; } } } } .last-works { background: @svwhite; } .last-works, .partners { .gallery { a { background: @svwhite; &:after { color: @svblack; border: 1px solid @svblack; } } } .bx-controls { .bx-next, .bx-prev { background: @svwhite; &:before { color: @svblack; } &:hover { background: @svwhite; } } } } .page-title { background: @svwhite; .title { color: @svblack; } } .gallery { a { color: @svblack; } } .videogallery { .video { .img { &:after { color: @svblack; } &:hover { &:after { color: @svblack; } } } } } .news { article { .text { .date { color: @svblack; } .title { color: @svblack; } .announce { color: @svblack; } a { color: @svblack; } } } } .files { ul { li { &:before { color: @svblack; } a { color: @svblack; &:hover { color: @svblack; } } } } } .catalog { .catalog-folder-element { color: @svblack; &:hover { color: @svblack; } .img { border: 1px solid @svwhite; } } } .catalog-side-nav { a { color: @svblack; &:hover, &.current { color: @svblack; background: @svwhite; } } } .soc-link { border: @svblack 1px solid; color: @svblack; &:hover { border-color: @svblack; background: @svwhite; color: @svblack; } } .carousel { &-label { color: @svblack; } } .links { &-label { color: @svblack; } } .top-nav { a { color: @svblack; background: @svwhite; } } } .sv.svci { background: @svblack; color: @svwhite; .sv-panel { display: block!important;} .btn-sv-toggle { display: none; } .btn, .content a.btn { border: 1px solid @svwhite; color: @svwhite; &:hover { background: @svblack; color: @svwhite; } } .btn-main, .content a.btn-main { background: @svblack; color: @svwhite; &:hover { background: @svblack; color: @svwhite; } } .content{ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: @svwhite; } ul li { &:before{ color: @svwhite; } } a { color: @svwhite; } form { input, textarea { color: @svwhite; background: @svblack; &::-webkit-input-placeholder {color: @svwhite;} &::-moz-placeholder {color: @svwhite;} &:-ms-input-placeholder {color: @svwhite;} &:focus { border-color: @svwhite; } } button { background: @svblack; color: @svwhite; &:hover { background: @svblack; color: @svwhite; } } } table { border-color: @svwhite; tr:hover { td { background: @svblack; } } th { background: @svblack; color: @svwhite; } th, td { border: 1px solid @svwhite; } &.table_site { td { border-bottom: 1px solid @svwhite; } } } } .main-footer { background: @svblack; color: @svwhite; .main-footer-top { .container { border-bottom: 1px solid @svwhite; } } .footer-nav { ul { li { a, span { color: @svwhite; &:hover, &.current { color: @svwhite; } } } } } .contacts { color: @svwhite; .contacts-title { color: @svwhite; } .contacts-header { color: @svwhite; } } .dev { color: @svwhite; } } .main-header { background: @svblack; .contacts { color: @svwhite; .phones { &:before { color: @svwhite; } } .address { &:before { color: @svwhite; } } .email { &:before { color: @svwhite; } } } } .main-nav { background: @svblack; .nav-menu { > li { > a, > span { color: @svwhite; &:hover, &.current { background: @svblack; color: @svwhite; } } + li { > a:before, > span:before { background: @svblack; border-right: 1px solid @svwhite; } } } } .categories-nav { background: @svblack; color: @svwhite; .title { &:after { background: @svblack; } } ul { li { a { &:hover, &.current { color: @svwhite; } } } } } @media screen and (max-width: @breakpointMid) { .toggle-nav { .icn-bar { background: @blue; } } .nav-menu { > li { + li { > a:before, > span:before { background: @svblack; border-top: 1px solid @svwhite; } } } } } } .title-block { background: @svblack; color: @svwhite; .title-block-text { background: @svblack; } } .title-block-slider-wrapper { .bx-next, .bx-prev { &:after { background: @svblack; color: @svwhite; } } &:hover { &:after { background: @svblack; } } } .bottom-block { &-title { color: @svwhite; } } .last-news { li { .text { color: @svwhite; } .date { color: @svwhite; } } .bx-controls { .bx-next, .bx-prev { background: @svblack; &:before { color: @svwhite; } &:hover { color: @svwhite; background: @svblack; } } } } .last-works { background: @svblack; } .last-works, .partners { .gallery { a { background: @svblack; &:after { color: @svwhite; border: 1px solid @svwhite; } } } .bx-controls { .bx-next, .bx-prev { background: @svblack; &:before { color: @svwhite; } &:hover { background: @svblack; } } } } .page-title { background: @svblack; .title { color: @svwhite; } } .gallery { a { color: @svwhite; } } .videogallery { .video { .img { &:after { color: @svwhite; } &:hover { &:after { color: @svwhite; } } } } } .news { article { .text { .date { color: @svwhite; } .title { color: @svwhite; } .announce { color: @svwhite; } a { color: @svwhite; } } } } .files { ul { li { &:before { color: @svwhite; } a { color: @svwhite; &:hover { color: @svwhite; } } } } } .catalog { .catalog-folder-element { color: @svwhite; &:hover { color: @svwhite; } .img { border: 1px solid @svblack; } } } .catalog-side-nav { a { color: @svwhite; &:hover, &.current { color: @svwhite; background: @svblack; } } } .soc-link { border: @svwhite 1px solid; color: @svwhite; &:hover { border-color: @svwhite; background: @svblack; color: @svwhite; } } .carousel { &-label { color: @svwhite; } } .links { &-label { color: @svwhite; } } .top-nav { a { color: @svwhite; background: @svblack; } } } .sv.svcb { background: @svblue; color: @svdblue; .sv-panel { display: block!important;} .btn-sv-toggle { display: none; } .btn, .content a.btn { border: 1px solid @svdblue; color: @svdblue; &:hover { background: @svblue; color: @svdblue; } } .btn-main, .content a.btn-main { background: @svblue; color: @svdblue; &:hover { background: @svblue; color: @svdblue; } } .content{ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: @svdblue; } ul li { &:before{ color: @svdblue; } } a { color: @svdblue; } form { input, textarea { color: @svdblue; background: @svblue; &::-webkit-input-placeholder {color: @svdblue;} &::-moz-placeholder {color: @svdblue;} &:-ms-input-placeholder {color: @svdblue;} &:focus { border-color: @svdblue; } } button { background: @svblue; color: @svdblue; &:hover { background: @svblue; color: @svdblue; } } } table { border-color: @svdblue; tr:hover { td { background: @svblue; } } th { background: @svblue; color: @svdblue; } th, td { border: 1px solid @svdblue; } &.table_site { td { border-bottom: 1px solid @svdblue; } } } } .main-footer { background: @svblue; color: @svdblue; .main-footer-top { .container { border-bottom: 1px solid @svdblue; } } .footer-nav { ul { li { a, span { color: @svdblue; &:hover, &.current { color: @svdblue; } } } } } .contacts { color: @svdblue; .contacts-title { color: @svdblue; } .contacts-header { color: @svdblue; } } .dev { color: @svdblue; } } .main-header { background: @svblue; .contacts { color: @svdblue; .phones { &:before { color: @svdblue; } } .address { &:before { color: @svdblue; } } .email { &:before { color: @svdblue; } } } } .main-nav { background: @svblue; .nav-menu { > li { > a, > span { color: @svdblue; &:hover, &.current { background: @svblue; color: @svdblue; } } + li { > a:before, > span:before { background: @svblue; border-right: 1px solid @svdblue; } } } } .categories-nav { background: @svblue; color: @svdblue; .title { &:after { background: @svblue; } } ul { li { a { &:hover, &.current { color: @svdblue; } } } } } @media screen and (max-width: @breakpointMid) { .toggle-nav { .icn-bar { background: @blue; } } .nav-menu { > li { + li { > a:before, > span:before { background: @svblue; border-top: 1px solid @svdblue; } } } } } } .title-block { background: @svblue; color: @svdblue; .title-block-text { background: @svblue; } } .title-block-slider-wrapper { .bx-next, .bx-prev { &:after { background: @svblue; color: @svdblue; } } &:hover { &:after { background: @svblue; } } } .bottom-block { &-title { color: @svdblue; } } .last-news { li { .text { color: @svdblue; } .date { color: @svdblue; } } .bx-controls { .bx-next, .bx-prev { background: @svblue; &:before { color: @svdblue; } &:hover { color: @svdblue; background: @svblue; } } } } .last-works { background: @svblue; } .last-works, .partners { .gallery { a { background: @svblue; &:after { color: @svdblue; border: 1px solid @svdblue; } } } .bx-controls { .bx-next, .bx-prev { background: @svblue; &:before { color: @svdblue; } &:hover { background: @svblue; } } } } .page-title { background: @svblue; .title { color: @svdblue; } } .gallery { a { color: @svdblue; } } .videogallery { .video { .img { &:after { color: @svdblue; } &:hover { &:after { color: @svdblue; } } } } } .news { article { .text { .date { color: @svdblue; } .title { color: @svdblue; } .announce { color: @svdblue; } a { color: @svdblue; } } } } .files { ul { li { &:before { color: @svdblue; } a { color: @svdblue; &:hover { color: @svdblue; } } } } } .catalog { .catalog-folder-element { color: @svdblue; &:hover { color: @svdblue; } .img { border: 1px solid @svblue; } } } .catalog-side-nav { a { color: @svdblue; &:hover, &.current { color: @svdblue; background: @svblue; } } } .soc-link { border: @svdblue 1px solid; color: @svdblue; &:hover { border-color: @svdblue; background: @svblue; color: @svdblue; } } .carousel { &-label { color: @svdblue; } } .links { &-label { color: @svdblue; } } .top-nav { a { color: @svdblue; background: @svblue; } } } .sv.svsm { font-size: 16px; .btn, .content a.btn { font-size: 18px; line-height: 28px; } .btn-main, .content a.btn-main { font-size: 26px; line-height: 32px; @media screen and (max-width: @breakpointSmall) { font-size: 22px; } } .content{ h6, .h6 { font-size: 16px; } h5, .h5 { font-size: 18px; } h4, .h4 { font-size: 20px; } h3, .h3 { font-size: 22px; } h2, .h2 { font-size: 26px; } h1, .h1 { font-size: 32px; } form { input, textarea { font-size: 18px; line-height: 22px; } button { font-size: 18px; line-height: 22px; } } table { font-size: 16px; } } .main-footer { font-size: 15px; line-height: 18px; .footer-nav { ul { li { a, span { font-size: 15px; line-height: 18px; } } } } .contacts { .contacts-title { &:before { font-size: 26px; } } } } .main-header { .contacts { font-size: 16px; line-height: 18px; .phones { font-size: 16px; line-height: 38px; &:before { font-size: 18px; } } .address { font-size: 16px; line-height: 38px; &:before { font-size: 18px; } } .email { font-size: 16px; line-height: 38px; &:before { font-size: 18px; } } } } .main-nav { .nav-menu { > li { > a, > span { font-size: 17px; line-height: 23px; .nav-icn { &:before { font-size: 38px; line-height: 37px; } } } } } .categories-nav { .title { font-size: 17px; line-height: 17px; } ul { li { a { font-size: 15px; line-height: 16px; } } } } } .title-block { .title-first { font-size: 38px; line-height: 49px; strong, .strong { font-size: 62px; } } .title-sec { font-size: 32px; line-height: 37px; } @media screen and (max-width: @breakpointMid) { .title-sec { font-size: 28px; line-height: 32px; } .title-first { font-size: 27px; line-height: 32px; strong, .strong { font-size: 52px; } } } } .title-block-slider-wrapper { .bx-next, .bx-prev { &:after { font-size: 20px; line-height: 159px; } } } .bottom-block { &-title { font-size: 22px; line-height: 26px; } } .last-news { li { .text { font-size: 16px; line-height: 20px; } .date { font-size: 16px; line-height: 20px; } } .bx-controls { .bx-next, .bx-prev { &:before { font-size: 22px; line-height: 42px; } } } } .last-works, .partners { .gallery { a { &:after { font-size: 26px; line-height: 40px; } } } .bx-controls { .bx-next, .bx-prev { &:before { font-size: 22px; line-height: 42px; } } } } .page-title { .title { font-size: 38px; line-height: 42px; } } .gallery { a { p { font-size: 20px; } } } .cat-gallery { p { font-size: 16px; } } .videogallery { .video { .img { &:after { font-size: 52px; line-height: 62px; } } .title { font-size: 20px; } } } .news { article { .text { .date { font-size: 15px; line-height: 17px; } .title { font-size: 18px; line-height: 21px; } .announce { font-size: 16px; line-height: 19px; } a { font-size: 16px; line-height: 18px; } } } } .catalog { .catalog-folder-element { .name { font-size: 16px; line-height: 18px; } } } .catalog-side-nav { a { font-size: 16px; line-height: 22px; } } .soc-link { &:before, i { font-size: 20px; line-height: 42px; } } .carousel { &-label { font-size: 16px; line-height: 20px; } } .links { &-label { font-size: 16px; line-height: 20px; } } .top-nav { a { font-size: 18px; @media screen and (max-width: @breakpointSmall) { font-size: 15px; } } } } .sv.svsl { font-size: 20px; .btn, .content a.btn { font-size: 20px; line-height: 30px; } .btn-main, .content a.btn-main { font-size: 28px; line-height: 34px; @media screen and (max-width: @breakpointSmall) { font-size: 24px; } } .content{ h6, .h6 { font-size: 18px; } h5, .h5 { font-size: 20px; } h4, .h4 { font-size: 22px; } h3, .h3 { font-size: 24px; } h2, .h2 { font-size: 28px; } h1, .h1 { font-size: 34px; } form { input, textarea { font-size: 20px; line-height: 24px; } button { font-size: 20px; line-height: 24px; } } table { font-size: 18px; } } .main-footer { font-size: 17px; line-height: 20px; .footer-nav { ul { li { a, span { font-size: 17px; line-height: 20px; } } } } .contacts { .contacts-title { &:before { font-size: 28px; } } } } .main-header { .contacts { font-size: 18px; line-height: 20px; .phones { font-size: 18px; line-height: 40px; &:before { font-size: 20px; } } .address { font-size: 18px; line-height: 40px; &:before { font-size: 20px; } } .email { font-size: 18px; line-height: 40px; &:before { font-size: 20px; } } } } .main-nav { .nav-menu { > li { > a, > span { font-size: 20px; line-height: 25px; .nav-icn { &:before { font-size: 40px; line-height: 39px; } } } } } .categories-nav { .title { font-size: 19px; line-height: 19px; } ul { li { a { font-size: 17px; line-height: 18px; } } } } } .title-block { .title-first { font-size: 40px; line-height: 51px; strong, .strong { font-size: 64px; } } .title-sec { font-size: 34px; line-height: 39px; } @media screen and (max-width: @breakpointMid) { .title-sec { font-size: 30px; line-height: 34px; } .title-first { font-size: 29px; line-height: 34px; strong, .strong { font-size: 54px; } } } } .title-block-slider-wrapper { .bx-next, .bx-prev { &:after { font-size: 22px; line-height: 159px; } } } .bottom-block { &-title { font-size: 24px; line-height: 28px; } } .last-news { li { .text { font-size: 18px; line-height: 22px; } .date { font-size: 18px; line-height: 22px; } } .bx-controls { .bx-next, .bx-prev { &:before { font-size: 24px; line-height: 44px; } } } } .last-works, .partners { .gallery { a { &:after { font-size: 28px; line-height: 42px; } } } .bx-controls { .bx-next, .bx-prev { &:before { font-size: 24px; line-height: 44px; } } } } .page-title { .title { font-size: 40px; line-height: 44px; } } .gallery { a { p { font-size: 22px; } } } .cat-gallery { p { font-size: 18px; } } .videogallery { .video { .img { &:after { font-size: 54px; line-height: 64px; } } .title { font-size: 22px; } } } .news { article { .text { .date { font-size: 17px; line-height: 19px; } .title { font-size: 20px; line-height: 23px; } .announce { font-size: 18px; line-height: 21px; } a { font-size: 18px; line-height: 20px; } } } } .catalog { .catalog-folder-element { .name { font-size: 18px; line-height: 20px; } } } .catalog-side-nav { a { font-size: 18px; line-height: 24px; } } .soc-link { &:before, i { font-size: 22px; line-height: 44px; } } .carousel { &-label { font-size: 18px; line-height: 22px; } } .links { &-label { font-size: 18px; line-height: 22px; } } .top-nav { a { font-size: 20px; @media screen and (max-width: @breakpointSmall) { font-size: 17px; } } } } .svfse { font-family: @svserif !important; * { font-family: @svserif !important; } } .custom { img { display: block; max-width: 100%; } } .mdl { padding: 15px 15px; &__title { margin-bottom: 1em; font-size: 2em; text-align: center; font-weight: 700; text-align: center; } @media screen and (max-width: 500) { .capture input { width: 100% !important; margin-left: 0 !important; margin-top: 10px !important; margin-bottom: 10px !important; } } }