@orange: #41949e; @font: 'Trebuchet MS'; @widthLarge: 1000px; @paddingLarge: 20px; @breakpointMid: 1040px; @widthMid: 800px; @paddingMid: 20px; @breakpointSmall: 840px; @widthSmall: 290px; @widthSmallMax: 600px; @paddingSmall: 15px; /* * + Reset */ 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, font, 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 { margin: 0; padding: 0; outline: 0;} a img { border:0; } body { margin: 0; padding: 0; outline: 0; vertical-align: top;} ol, ul { list-style: none;} blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;} :focus { outline: 0;} ins { text-decoration: none;} del { text-decoration: line-through;} table { border-collapse: collapse; border-spacing: 0;} /* * * - Reset * */ @font-face {font-family: 'Trebuchet MS'; src: url('../fonts/trebuc.eot'); src: local('Trebuchet MS'), url('../fonts/trebuc.eot?#iefix') format('embedded-opentype'), url('../fonts/trebuc.woff') format('woff'),url('../fonts/trebuc.ttf') format('truetype'), url('../fonts/trebuc.svg#PTSans-Regular') format('svg');} @font-face {font-family: 'Trebuchet MS'; font-style: italic; src: url('../fonts/trebucit.eot'); src: local('Trebuchet MS Italic'), url('../fonts/trebucit.eot?#iefix') format('embedded-opentype'), url('../fonts/trebucit.woff') format('woff'),url('../fonts/trebucit.ttf') format('truetype'), url('../fonts/trebucit.svg#PTSans-Italic') format('svg');} @font-face {font-family: 'Trebuchet MS'; src: url('../fonts/trebucbd.eot'); font-style: normal; font-weight: bold; src: local('Trebuchet MS Bold'), url('../fonts/trebucbd.eot?#iefix') format('embedded-opentype'), url('../fonts/trebucbd.woff') format('woff'),url('../fonts/trebucbd.ttf') format('truetype'), url('../fonts/trebucbd.svg#PTSans-Bold') format('svg');} @font-face {font-family: 'Trebuchet MS'; font-style: italic; font-weight: bold; src: url('../fonts/trebucbi.eot'); src: local('Trebuchet MS Italic'), url('../fonts/trebucbi.eot?#iefix') format('embedded-opentype'), url('../fonts/trebucbi.woff') format('woff'),url('../fonts/trebucbi.ttf') format('truetype'), url('../fonts/trebucbi.svg#PTSans-BoldItalic') format('svg');} header, nav, section, article, aside, footer { display:block; } a { color: inherit; } .content { hr{ border-color: #000; border-top: 0; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{ margin: 5px 0; color: #000; line-height: normal; font-weight: bold; a { color: inherit; text-decoration: inherit; } } h6, h6 { font-size: 16px; } h5, .h5 { font-size: 18px; } h4, .h4 { font-size: 22px; } h3, h3 { font-size: 24px; } h1, .h1 { font-size: 26px; } h1, .h1 { font-size: 30px; } p { margin: 1em 0; } strong, .strong { font-weight: bold; color: #000; } ul, ol { padding-left: 1em; li { margin: 0.2em 0; } } ul { list-style: none; margin: 1em 0; li { padding-left: 18px; position: relative; &:before{ content: ''; display: block; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; background: #8e1515; -webkit-transform: rotate(45deg); transform: rotate(45deg); } } } ol { list-style: inside decimal; } a { color: inherit; text-decoration: underline; color: @orange; &:hover{ text-decoration: none; } } table { border-collapse: collapse; width: 100%; margin: 10px 0; border-color: @orange; th { font-weight: bold; text-transform: uppercase; } td {} th, td{ padding: 5px 10px; } &.table_site { border-collapse: collapse; th, td { font-weight: bold; padding: 5px 10px; border: 2px solid #b10a0b; text-align: center; } td { padding: 5px; border-bottom: 2px solid #b10a0b; } p { line-height: normal; margin: 5px 0; } } } } .clear {clear: both;} .overflow {overflow: hidden;} html, body { height: 100%; } .main-wrapper { min-height: 100%; box-sizing: border-box; position: relative; padding-bottom: 150px; width: 100%; overflow: hidden; } .trn { -webkit-transition: all .5s ease; transition: all .5s ease; } .icn { display: inline-block; vertical-align: baseline; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body{ font: 16px/24px @font, sans-serif; color: #414141; } .mobileOnly { display: none !important; @media screen and (max-width: @breakpointSmall) { display: block !important; } } .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; } } .btn{ display: inline-block; background:#8e1515; border: 2px solid #41949e; font-size: 20px; line-height: 30px; padding: 8px 38px; color: #fff; text-decoration: none; text-align: center; &:hover{ background:#41949e; } } .main-footer{ position: relative; margin-top: -135px; background: url(../images/footerBg.png) top center no-repeat; z-index: 5; .container{ min-height: 135px; } .col{ display: inline-block; width: 50%; vertical-align: bottom; padding-top: 25px; + .col{ text-align: right; } } .logo{ display: inline-block; padding: 40px 0 0 100px; color: #000000; text-decoration: none; font-size: 14px; } .counters{ padding: 5px 40px 5px 0; } .developer{ color: #9a9a9a; text-decoration: none; font-size: 13px; padding-right: 40px; } @media screen and (max-width: @breakpointSmall) { background: #D4D4D3; .col { display: block; width: 100%; text-align: center !important; } .counters, .developer, .logo { padding: 0; } } } .main-header { position: relative; background: url(../images/headerBg.jpg) top center no-repeat; background-size: cover; min-height: 300px; > .container{ padding-bottom: 30px; &:before{ content: ''; background: url(../images/headerLogo.png) top left no-repeat; background-size: contain; width: 538px; height: 258px; display: block; position: absolute; left: -140px; top: 0; } } .col { display: inline-block; width: 33%; vertical-align: top; + .col { width: 64%; margin-left: 3%; text-align: right; } } .logo { position: relative; display: block; height: 260px; margin-bottom: 0px; text-indent: -9999px; } .phone{ font: bold 28px/30px @font; margin-top: -10px; color: #41949e; letter-spacing: -.7px; } .slogan{ margin-bottom: 12px; margin-top: 50px; padding: 10px 205px 10px 5px; letter-spacing: .3px; font: bold 34px/40px @font; color: #fff; overflow: hidden; position: relative; z-index: 1; text-align: center; &:before { content: ''; height: 100%; top: 0; width: 10000px; right: 170px; background: #41949e; position: absolute; text-transform: uppercase; -webkit-transform: skewX(-53deg); transform: skewX(-53deg); z-index: -2; } &:after { content: ''; background: url(../images/slogan-bg.png) top left no-repeat; width: 100%; height: 100%; left: 0; top: 0; position: absolute; z-index: -1; } } .btn.callback{ margin-top: 40px; cursor: pointer; &:before{ .icn; content: "\f095"; font-size: 30px; line-height: 30px; margin-right: 0.3em; vertical-align: bottom; } } .lastArticles { margin-left: auto; margin-right: -20px; } @media screen and (max-width: @breakpointMid) { .col { width: 50%; + .col { width: 50%; text-align: right; margin-left: 0; } } .main-header-top { .col { width: 27%; + .col { width: 70%; text-align: right; } } } > .container { &:before { width: 430px; height: 207px; left: -95px; } } .logo { height: 190px; } .slogan { font-size: 25px; margin-top: 15px; } .phone { font-size: 30px; margin-top: 270px; } // } // @media screen and (max-width: @breakpointSmall) { padding-top: 60px; .col { display: block !important; width: 100% !important; margin: 0 !important; text-align: center !important; } .btn.callback { display: none; &.mobileOnly { display: inline-block !important; } } > .container:before { width: 100%; height: 200px; margin: 0; left: 0; background-position: center top; } .slogan { padding-left: 15px; padding-right: 15px; text-align: center; &:before { right: -500px; } } .lastArticles { margin-left: auto; margin-right: auto; width: auto; } } } .main-page .main-header { min-height: 769px; .logo { margin-bottom: 80px; } .btn.callback { margin-top: 61px; } } .mainNav { .main-nav-container { .main-nav-wrapper { > ul { text-align: right; > li { display: inline-block; position: relative; padding-bottom: 20px; > a { display: block; font: 18px/14px @font; color: #ff1515; position: relative; text-decoration: none; padding: 62px 7px 10px 7px; text-align: center; cursor: pointer; &.current { color: #ffae00; text-decoration: none !important; &:after{ content: ''; height: 30px; width: 30px; position: absolute; background: @orange; top: -42px; left: 50%; margin-left: -14px; display: block; -webkit-transform: rotate(45deg); transform: rotate(45deg); } &:before { .icn; content: "\f063"; color: #000; z-index: 2; text-align: center; line-height: 40px; position: absolute; left: 50%; margin-left: -20px; display: block; top: -45px; height: 40px; width: 40px; } } &:hover { color: #41949e; text-decoration: underline; } @media screen and (max-width: @breakpointSmall) { &:hover { color: #fff; text-decoration: underline; } } } ul { display: none; width: 260px; position: absolute; top: 100%; left: 0; background: @orange; padding: 13px 0 7px; z-index: 5; text-align: left; &:before{ content: ''; display: block; position: absolute; top: -20px; left: 0; width: 0; height: 0; border-style: solid; border-width: 0 20px 20px 20px; border-color: transparent transparent @orange transparent; } li { a { display: block; padding: 8px 20px 7px 60px; font: 18px/20px @font; color: #fff; letter-spacing: -.5px; text-decoration: none; &:hover, &.current { background: rgba(255,255,255,.4); position: relative; text-decoration: none; &:before { .icn; content: "\f0a9"; color: #000; z-index: 2; text-align: center; position: absolute; left: 25px; top: 8px; display: block; } } } } } &:hover { ul { display: block; } } } } } } @media screen and (min-width: (@breakpointSmall + 1)) { .main-nav-container { display: block !important; height: auto !important; } &.fixed { position: fixed; width: 100%; top: 0; left: 0; background: rgba(142,21,21,0.9); z-index: 15; text-align: right; + .phone { margin-top: 119px; } .main-nav-container { .container; .main-nav-wrapper { > ul { > li { padding-bottom: 0; > a { padding-top: 25px; padding-bottom: 25px; color:#fff; } } } } } .logoSmall{ position: absolute; left: 0; top: 0; background: url(../images/fixedMenuLogo.png) center center no-repeat; width: 84px; height: 85px; padding: 0; } } } @media screen and (max-width: @breakpointSmall) { position: fixed; width: 100%; top: 0; left: 0; background: rgba(142,21,21,0.9); z-index: 15; text-align: right; height: 60px; .main-nav-container { display: none; .main-nav-wrapper { position: fixed; background: rgba(0,0,0,0.8); top: 0; left: 0; width: 100%; height: 100%; overflow: auto; display: table; > ul { display: table-cell; vertical-align: middle; > li { display: block; margin: 0; padding: 0; > a { padding: 15px 15px; &:hover { background: rgba(255, 255, 255, 0.4); } } ul { margin-bottom: 15px; display: block; background: none; width: 100%; padding: 0; position: static; &:before, &:after { display: none; } li { display: block; a { padding: 5px 0 !important; color: #fff; font-size: 18px; text-align: center; padding: 0; &:before, &:after { display: none !important; } } } } } } } } .logoSmall { position: absolute; left: 0; top: 0; background: url(../images/fixedMenuLogo.png) center center no-repeat; width: 80px; height: 60px; padding: 0; background-size: contain; } .toggle-nav { display: block; position: relative; width: 60px; height: 60px; float: right; cursor: pointer; z-index: 10; .icn-bar { .trn; position: absolute; // left: 50%; // margin-left: -15px; right: 0; top: 50%; width: 20px; height: 3px; background: #fff; margin-top: -9px; + .icn-bar { margin-top: -1px; + .icn-bar { margin-top: 7px; } } } &.open { .icn-bar { -webkit-transform:rotate(45deg) translateX(7px) translateY(4px); transform: rotate(45deg) translateX(7px) translateY(4px); + .icn-bar { opacity: 0; -moz-transform: scale(.1); -webkit-transform: scale(.1); -o-transform: scale(.1); -ms-transform: scale(.1); transform: scale(.1); + .icn-bar { opacity: 1; -webkit-transform: rotate(-45deg) translateX(7px) translateY(-4px); transform: rotate(-45deg) translateX(7px) translateY(-4px); } } } } } } } .lastArticles { text-align: right; width: 315px; padding: 25px 10px 10px 25px; background: rgba(0,0,0,0.55); article { padding-right: 60px; margin-bottom: 20px; text-align: left; .date{ font-size: 14px; margin-bottom: 0px; color: #efa609; } .title { margin: 0 0 10px 0; font-size: 16px; line-height: 18px; a { text-decoration: none; font-weight: bold; color: #fff; &:hover { color: #efa609; text-decoration: underline; } } } } .btn{ padding-left: 1em; padding-right: 1em; } } .page { padding-bottom: 30px; > header { text-align: center; text-transform: uppercase; color: #000; padding: 1.3em 0 1em 0; .title { font-size: 35px; line-height: 40px; span{ display: inline-block; border-bottom: 4px solid #41949e; padding-bottom: 5px; } a { text-decoration: none; color: inherit; } } } } .galleriesList { margin: 0 !important; padding: 0 !important; li { width: 240px; height: 220px; display: inline-block; vertical-align: top; position: relative; padding: 0 !important; margin: 0 !important; &:before { display: none !important; } &:after { background: @orange; width: 30px; height: 30px; content: ''; display: block; position: absolute; right: -15px; margin-top: -15px; top: 50%; z-index: 5; -webkit-transform: rotate(45deg); transform: rotate(45deg); } a { display: block; text-decoration: none; width: 100%; height: 100%; } .img { display: table; width: 100%; height: 100%; background: #fff; .noImg { background: #ddd; width: 100%; height: 100%; } .img-wrap { display: table-cell; vertical-align: middle; img { max-width: 310px; max-height: 280px; display: block; margin: 0 auto; } } } .text { .trn; display: block; position: absolute; background: rgba(0,0,0,.80); width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; font: 15px/18px @font; color: #fff; text-align: center; opacity: 0; &:hover { opacity: 1; } &:before { .icn; content: "\f067"; width: 40px; height: 40px; font-size: 36px; line-height: 40px; text-align: center; opacity: .5; position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -20px; } .title { padding: 20px 20px; } } } } ul.nav_pages { list-style: none; padding: 15px 0; li{ display: inline-block; padding: 0; margin: 0 3px; background: 0; padding: 0; &:before, &:after { display: none !important; } span { font-weight: bold; } } } .articles { margin-left: -14px; margin-right: -14px; article { display: inline-block; vertical-align: top; width: 200px; padding: 9px; border: 1px solid #d9ddde; margin: 14px 13.5px; line-height: normal; &:hover { border-color: @orange; } .img { margin-bottom: 10px; height: 140px; overflow: hidden; img { display: block; width: 100%; height: 140px; } .noImg { height: 140px; background: #999; } } .date { font-size: 12px; color: #989897; margin: 0 0 5px 0; } .title{ font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000; margin: 0; } .link{ display: block; width: 100%; text-align: center; text-decoration: none; color: #000; font-weight: bold; font-size: 18px; line-height: 40px; margin-top: 30px; background: @orange; } } } .oneArticle { header { h2 { font-size: 24px; color: #000000; margin: 0 0 5px 0; } } .date { font-size: 14px; color: #666; margin: 0 0 0 0; } .article-img { display: block; img { display: block; margin: 0 auto 20px } } // .gallery { // float: left; // margin-right: 20px; // a { // margin-bottom: 15px; // display: block; // height: auto; // border: 0; // img { // height: auto; // display: block; // } // } // } .back { border: 1px solid #ffae00; font-size: 18px; line-height: 25px; color: #000; text-decoration: none; padding: 0 15px; margin: 25px 0; display: inline-block; font-weight: bold; &:hover { background: #ffae00; } &:before { content:"\f104"; font-family:FontAwesome; font-weight: normal; margin-right: 10px; } } .sectionTitle { text-align: center; padding: 20px 0 10px 0; } } a.btnBack{ background: #008dd2; border-bottom: 2px solid #0069ab; font-size: 14px; line-height: 23px; color: #fff; text-decoration: none; padding: 2px 10px 0 10px; margin: 10px 0; display: inline-block; color: #fff; .btnBack:hover{ background-color: #39aae1; } .btnBack:before{ content:"\f104"; font-family:FontAwesome; margin-right: 10px; } } .gallery { text-align: left; margin: 15px 0 15px -15px; a { margin: 0; width: 310px; position: relative; display: inline-block; vertical-align: top; line-height: normal; margin: 0 0 15px 15px; img { display: block; width: 100%; } h3 { position: absolute; left: 0; top: 0; width: 400px; height: 300px; display: table-row; margin: 0; padding: 0; font-size: 15px; color: #fff; font-weight: normal; span { display: table-cell; text-align: center; vertical-align: middle; width: 400px; height: 300px; padding: 30px 40px; } &:hover h3 { opacity: 0; } } } @media screen and (max-width: @breakpointMid) { a { width: 243px } } @media screen and (max-width: @breakpointSmall) { text-align: center; a { width: 320px; max-width: 90%; } } } .videogalery { text-align: center; h5 { padding: 5px; } .video { padding: 15px 3px; margin: 0 auto; display: inline-block; > div { position: relative; cursor: pointer; img {} } } } .catMenu { float: left; width: 240px; margin-right: 30px; > ul { margin: 0; > li { display: block; padding: 0; margin: 0; &:before { display: none; } > a { display: block; background: #ffae00; padding: 10px 15px; font-size: 16px; line-height: 20px; text-decoration: none; font-weight: bold; color: #000; text-transform: uppercase; border-bottom: 1px solid #ecf0f1; } } ul { background: #d8d8d8; padding: 5px 10px; margin: 0; border-bottom: 1px solid #ecf0f1; li { margin: 2px 0; padding-left: 15px; &:before { background-color: #000; } a { font-size: 14px; line-height: 16px; color: #666666; text-decoration: none; &:hover { color: #000; text-decoration: underline; } } } } } } .catalogElements { text-align: center; article { width: 220px; display: inline-block; vertical-align: top; margin-top: 15px; margin-left: 8px; margin-right: 8px; > a { display: block; width: 200px; padding: 9px; border: 1px solid #d9ddde; text-decoration: none; &:hover { border-color: #8e1515; } } .img { width: 200px; height: 140px; img { display: block; width: 200px; height: 140px; } .noImage { height: 140px; background: #d9ddde; } } .title { font-weight: bold; color: #000; font-size: 16px; line-height: 18px; margin: 10px 0 10px 0; min-height: 36px; } .text { font-size: 14px; line-height: 16px; line-height: normal; color: #414141; margin-bottom: 15px; min-height: 32px; p { margin: 0; } > span { content: ''; height: 55px; width: 1px; display: inline-block; vertical-align: top; } > div{ display: inline-block; width: 199px; vertical-align: top; } } .price { text-align: center; background: #41949e; color: #fff; font-size: 30px; line-height: 40px; font-weight: bold; height: 40px; i { font-size: 24px; line-height: 40px; } } } } .catalogElement { &:after { clear: both; content: ''; display: block; } header { text-align: center; padding: 0 0 40px 0; margin: 0; h3 { display: inline-block; font-size: 35px; line-height: 40px; padding: 0 15px; position: relative; text-decoration: none !important; color: #000; text-transform: uppercase; margin: 0; } } .descr { border: 1px solid #41949e; padding: 9px; &:after { clear: both; content: ''; display: block; } } .side { float: left; width: 200px; margin-right: 30px; @media screen and (max-width: @breakpointSmall) { float: none; margin-right: 0; margin-bottom: 20px; text-align: center; width: 100%; } } .img { width: 200px; margin: 0 auto; margin-bottom: 10px; img { display: block; width: 200px; margin: 0 auto; } } .price { text-align: center; background: #41949e; color: #fff; font-size: 30px; line-height: 40px; font-weight: bold; height: 40px; i { font-size: 24px; line-height: 40px; } } .text { font-size: 14px; line-height: 16px; line-height: normal; color: #414141; } .catGallery { a { display: inline-block; width: 110px; vertical-align: top; margin: 0 10px 10px 0; img { display: block; width: 100%; } } } } a.return { font-size: 18px; line-height: 35px; font-weight: bold; padding: 0 10px; border: 1px solid #ffae00; display: inline-block; margin: 10px 0; text-decoration: none; color: #000; &:before { content:"\f053"; font-family:FontAwesome; display: inline-block; vertical-align: middle; font-size: 18px; text-decoration: none; margin-right: 5px; line-height: 35px; font-weight: normal; } &:hover { background: rgba(255,174,0,0.1); } } .mansory{ margin: 0 auto; > * { margin-bottom: 15px; } } .section { position: relative; &:after { background:#fff; width: 30px; height: 30px; content: ''; display: block; position: absolute; left: 50%; margin-left: -15px; top: -15px; z-index: 5; -webkit-transform: rotate(45deg); transform: rotate(45deg); } > header { text-align: center; font-size: 24px; line-height: 38px; text-transform: uppercase; color: #000; padding: 2em 0; .title { display: inline-block; border-bottom: 4px solid #8e1515; padding-bottom: 5px; } } } .section-about { padding-bottom: 70px; position: relative; &:before { content: ''; width: 336px; height: 437px; background: url(../images/aboutLogo.png) top left no-repeat; top: 100px; left: 50%; margin-left: -600px; position: absolute; background-size: contain; } .text { padding-left: 300px; padding-top: 10px; // height: 421px; position: relative; overflow: hidden; -webkit-transition: height 0.5s ease; transition: height 0.5s ease; h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: #000; } // &:after{ // content: ''; // display: block; // width: 680px; // height: 300px; // position: absolute; // bottom: 0; // right: 0; // z-index: 2; // background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ // background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */ // } &.opened{ height: auto; &:after{ display: none; } } } .btns{ text-align: right; margin-top: 50px; } .btn { color: #000; padding-left: 0.7em; padding-right: 1em; cursor: pointer; &:after{ content: 'Прочитать полностью'; } &.more:before{ .icn; content: "\f078"; font-size: 18px; margin-right: 0.4em; } &.opened { &:before{ content: "\f077"; } &:after{ content: 'Свернуть'; } } } @media screen and (max-width: @breakpointMid) { &:before { width: 266px; top: 120px; margin-left: -420px; } .text { padding-left: 250px; } } @media screen and (max-width: @breakpointSmall) { &:before { display: none; } .text { padding-left: 0px; } } } .section-servises { min-height: 755px; padding: 15px 0 0 0; text-align: center; > header { .title { color: #fff; } } ul { display: inline-block; width: 382px; text-align: center; margin: 50px auto 100px; -webkit-transform: rotate(45deg); transform: rotate(45deg); &:before, &:after { content: ''; background: url(../images/servises-img.png) top left no-repeat; background-size: auto 100%; width: 180px; height: 180px; position: absolute; left: 0; top: 0; } &:before { left: 196px; top: -185px; } &:after { left: -186px; top: 203px; background-position: top right; } li { width: 180px; height: 180px; display: inline-block; margin: 5.5px; overflow: hidden; a { width: 100%; height: 100%; display: table; background: #41949e; font-size: 24px; line-height: 28px; color: #fff; font-weight: bold; text-decoration: none; text-transform: uppercase; &:hover { background: #8e1515; } span { display: table-cell; vertical-align: middle; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } } } } @media screen and (max-width: @breakpointSmall) { min-height: 0; padding-bottom: 40px; &:before, &:after { display: none; } ul { display: block; width: auto; text-align: center; margin: 20px auto 20px; -webkit-transform: none; transform: none; &:before, &:after { display: none; } li { width: auto; height: auto; display: block; margin: 0 0 15px 0; a { width: auto; height: auto; display: block; padding: 15px 0; &:hover { background: #bbbbbb; } span { display: block; -webkit-transform: none; transform: none; } } } } } } .section-catalog { padding: 0 0 30px 0; ul { li { width: 310px; height: 280px; display: inline-block; position: relative; &:after { background: #41949e; width: 30px; height: 30px; content: ''; display: block; position: absolute; right: -15px; margin-top: -15px; top: 50%; z-index: 5; -webkit-transform: rotate(45deg); transform: rotate(45deg); } a { display: block; text-decoration: none; width: 100%; height: 100%; } .img { display: table; width: 100%; height: 100%; background: #fff; .noImg { background: #ddd; width: 100%; height: 100%; } .img-wrap { display: table-cell; vertical-align: middle; img { max-width: 310px; max-height: 280px; display: block; margin: 0 auto; } } } .text { .trn; display: block; position: absolute; background: rgba(0,0,0,.80); width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; font: 24px/28px @font; color: #fff; text-align: center; opacity: 0; &:hover { opacity: 1; } &:before { .icn; content: "\f067"; width: 40px; height: 40px; font-size: 36px; line-height: 40px; text-align: center; opacity: .5; position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -20px; } .title { position: absolute; top: 20px; left: 20px; right: 20px; } .price { position: absolute; bottom: 20px; left: 20px; right: 20px; } } } } .bx-wrapper { position: relative; } .bx-prev, .bx-next{ position: absolute; width: 42px; height: 42px; background: #41949e; top: 50%; margin-top: -21px; z-index: 10; -webkit-transform: rotate(45deg); transform: rotate(45deg); text-indent: 999px; text-align: left; overflow: hidden; text-decoration: none; &:after{ .icn; width: 42px; height: 42px; font-size: 35px; line-height: 42px; color: #000; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); text-indent: 0px; position: absolute; left: 0; top: 0; text-align: center; } } .bx-prev{ left: -21px; &:after{content:"\f053"} @media screen and (max-width: @breakpointSmall) { left: 0; } } a.bx-next{ right: -21px; &:after{content:"\f054"} @media screen and (max-width: @breakpointSmall) { right: 0; } } .links{ text-align: center; margin: 3.7em 0; .btn{ color: #fff; } } } .section-info { padding: 30px 0 150px; > header { .title { font: bold 36px/40px @font; color: #fff; border: none; span { background: rgba(142,21,21,1); display: inline-block; padding: 7px 10px; border: 3px solid #fff; border-top: 0; position: relative; overflow: hidden; &:before, &:after { content: ''; width: 50%; height: 3px; background: #fff; position: absolute; top: 0; } &:before { left: -20px; } &:after { right: -20px; } } } } .container { padding: 0; } ul { background: url(../images/info-items-bg.png) top center no-repeat; width: 780px; height: 286px; margin: 0 auto; li { display: inline-block; width: 50%; box-sizing: border-box; &:nth-child(odd) { padding-right: 95px; } &:nth-child(even) { padding-left: 95px; } > div {} a { font: bold italic 22px/36px @font; color: #fff; height: 76px; display: table; text-transform: uppercase; text-align: center; padding: 10px 20px; overflow: hidden; text-decoration: none; box-sizing: border-box; width: 100%; &:hover { color: #6ff0ff; } span { display: table-cell; overflow: hidden; vertical-align: middle; height: 72px; } } } } @media screen and (max-width: @breakpointSmall) { padding-bottom: 30px; padding-left: 15px; padding-right: 15px; ul { background: none; width: auto; height: auto; li { display: block; width: auto; margin-bottom: 15px; &:nth-child(odd) { padding-right: 0; } &:nth-child(even) { padding-left: 0; } a { background: @orange; height: auto; width: auto; display: block; padding: 10px 20px; span { display: block; height: auto; } } } } } } .section-portfolio { padding: 0 0 30px 0; .bx-wrapper { position: relative; } .bx-prev, .bx-next{ position: absolute; width: 42px; height: 42px; background: @orange; top: 50%; margin-top: -21px; z-index: 10; -webkit-transform: rotate(45deg); transform: rotate(45deg); text-indent: 999px; text-align: left; overflow: hidden; text-decoration: none; &:after{ .icn; width: 42px; height: 42px; font-size: 35px; line-height: 42px; color: #000; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); text-indent: 0px; position: absolute; left: 0; top: 0; text-align: center; } } .bx-prev{ left: -21px; &:after{content:"\f053"} @media screen and (max-width: @breakpointSmall) { left: 0; } } a.bx-next{ right: -21px; &:after{content:"\f054";} @media screen and (max-width: @breakpointSmall) { right: 0; } } .links{ text-align: center; margin: 3.7em 0; } } .section-contacts { position: relative; background: url(../images/footerBg2.png) top center no-repeat; background-size: cover; min-height: 300px; // z-index: -3; &:after { display: none; } .contacts-content { width: 725px; height: 462px; position: relative; margin: 50px auto 150px; &:before { content: ''; width: 837px; height: 734px; background: url(../images/contacts-img.png) top left no-repeat; background-size: contain; position: absolute; left: -56px; top: -39px; // z-index: -2; } &:after { content: ''; width: 1280px; height: 924px; background: url(../images/contacts-bg.png) top left no-repeat; background-size: contain; position: absolute; left: -766px; top: -209px; // z-index: -1; pointer-events: none; } .btns { position: absolute; bottom: 0; right: -10px; text-align: center; padding: 47px 55px 22px 60px; a { display: inline-block; color: #000; text-decoration: none; font-size: 14px; line-height: 30px; padding: 0 12px; background: #c4c4c4; margin: 0 10px; cursor: pointer; &.active { background-color: #41949e; cursor: default; } &:hover { opacity: 0.8; } } } #map { width: 100%; height: 100%; } } .contacts { position: absolute; left: 50%; margin-left: 120px; top: -130px; max-width: 260px; max-width: 100%; min-height: 50px; padding: 11px 58px 30px 35px; background: #41949e; background-size: cover; z-index: 5; .phone {color:#fff; font: bold 25px/28px @font; letter-spacing: -.5px; span { font-size: 17px; line-height: 28px; } } .email { font: bold 13px/16px @font; margin-top: 6px; a { color: #fff; text-decoration: underline; } } } .addit { text-align: right; font: 14px/16px @font; color: #fff; } .counters, .copy, .developer { margin: 5px 0; } @media screen and (max-width: @breakpointMid) { .contacts { position: static; margin-left: 0; } } @media screen and (max-width: @breakpointSmall) { .contacts-content { width: auto; padding: 0; margin-bottom: 30px; &:after { display: none; } &:before { left: 50%; margin-left: -418px; display: none; } } .btns { right: 0; width: 100%; text-align: center; padding-left: 15px; padding-right: 15px; box-sizing: border-box; } } } .feedback-form { padding: 35px 55px 0 60px; input, textarea { border: 2px solid @orange; background: rgba(209,209,209,0.2); box-sizing: border-box; font: 18px/21px @font; width: 100%; padding: 12px 15px; margin-bottom: 15px; color: #a2a1a1; -webkit-box-shadow: inset 3px 3px 3px 0 rgba(0,0,0,0.1); box-shadow: inset 3px 3px 3px 0 rgba(0,0,0,0.1); &:focus { color: #000; } } textarea{ height: 100px; } .capture { input { display: inline-block; vertical-align: middle; width: 186px; margin-left: 20px; } } p.right{ text-align: right; margin: 0; } .submit{ text-align: center; cursor: pointer; border: none; -webkit-box-shadow:none; box-shadow:none; display: inline-block; padding: 0; width: 220px; background: #8e1515; font-size: 18px; color: #fff; border-bottom: 2px solid #000; font-weight: bold; font-size: 18px; line-height: 48px; text-transform: uppercase; margin-top: -8px; &:hover{ background-color: #ffc038; } } @media screen and (max-width: @breakpointSmall) { padding: 0; } }