@blue: #005eb1; @dblue: #0096dc; @yellow: #8dbe0e; @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; 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; } } .clr { content: ''; display: block; clear: both; width: 100%; } .btn, .content a.btn { -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; background: none; -webkit-box-shadow: none; box-shadow: none; text-decoration: none !important; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; border: 1px solid @dblue; padding: 4px 10px; white-space: nowrap; font: 14px/20px @font; color: @dblue; border-radius: 15px; min-width: 115px; &:hover { background: @dblue; color: #fff; } } .btn-main, .content a.btn-main { -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; background: @yellow; -webkit-box-shadow: none; box-shadow: none; text-decoration: none !important; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; border: none; padding: 15px 25px; white-space: nowrap; font: 24px/30px @font; color: #fff; border-radius: 30px; min-width: 320px; max-width: 100%; &:hover { background: @blue; color: #fff; } @media screen and (max-width: @breakpointSmall) { min-width: 290px; font-size: 20px; } &--size-s { padding: 5px 10px; font-size: 14px; line-height: 1.5; min-width: 0; } } .btn-back { &:before { 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; 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; } p { margin-bottom: .7em; } strong, .strong { font-weight: bold; } ul, ol { margin-bottom: 2em; margin-top: 2em; } li { margin-bottom: .8em; } ul li { padding-left: 1.5em; position: relative; &:before{ 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; 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 { -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; display: block; width: 100%; -webkit-box-sizing: border-box; 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; } } .form__check { display: block; text-align: left; margin-bottom: 15px; } .form__check-input { width: 15px; height: 15px; display: inline-block; margin: 0; } textarea { height: 200px; max-width: 100%; } button { -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; 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: @blue; padding: 20px 15px; white-space: nowrap; font: italic 16px/20px @font; color: #fff; border-radius: 30px; min-width: 220px; &:hover { background: @dblue; 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,10%); } } 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; } } } } .main-footer { min-height: 150px; margin-top: -150px; position: relative; font: 13px/16px @font; color: #b3b3b3; .main-footer-top { .container { border-top: 1px solid #e0e0e0; } .col { display: inline-block; width: 50%; vertical-align: top; @media screen and (max-width: @breakpointSmall) { width: 100%; display: block; text-align: center; } + .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 { -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; display: block; font: 13px/16px @fontSec; color: #b3b3b3; 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 { 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; content: "\f0e0"; font-size: 16px; margin-right: 5px; } } } .copy { @media screen and (max-width: @breakpointSmall) { margin-top: 10px; margin-bottom: 10px; } } .counters { @media screen and (max-width: @breakpointSmall) { margin-bottom: 10px; } } .dev { } } .main-header { .col { display: inline-block; width: 50%; vertical-align: top; @media screen and (max-width: @breakpointMid) { width: 100% } @media screen and (max-width: @breakpointSmall) { display: block; width: 100%; text-align: center; } &--time { width: 25%; @media screen and (max-width: @breakpointMid) { width: 50%; } @media screen and (max-width: @breakpointSmall) { text-align: center; width: 100%; } } &--contacts { text-align: right; width: 25%; @media screen and (max-width: @breakpointMid) { width: 50%; margin-bottom: 20px } @media screen and (max-width: @breakpointSmall) { width: 100%; text-align: center; } } } .logo { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 15px 0 12px 0; text-decoration: none; @media screen and (max-width: @breakpointSmall) { display: block; } .img { width: 135px; padding-right: 1px; display: inline-block; vertical-align: top; -webkit-box-flex: 1; -ms-flex: auto 0 0px; flex: auto 0 0; 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: @breakpointMid) { text-align: left } @media screen and (max-width: @breakpointSmall) { padding: 20px 0 0 0; text-align: center; width: 100%; } &:before { content: ''; display: block; width: 1px; height: 36px; position: absolute; left: 0; top: 10px; background: @dblue; @media screen and (max-width: @breakpointSmall) { display: none; } } strong { font-weight: bold; color: @dblue; } } } .time { padding-top: 15px; font: 14px/18px @font; color: @blue; } &__feedback { margin-top: 10px; } .contacts { padding-top: 15px; font: 14px/16px @font; @media screen and (max-width: @breakpointSmall) { padding-bottom: 25px; } 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 { 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; content: "\f0e0"; font-size: 16px; margin-right: 5px; } } } .socials { font-size: 20px; margin-top: .5em; } } .main-nav { background: #d8f3ff; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0 ); .nav-menu { display: table; width: 100%; table-layout: fixed; > li { display: table-cell; position: relative; > a, > span { -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; display: block; position: relative; text-align: center; font: 15px/21px @fontSec; color: #005eb1; text-decoration: none; padding: 15px 0; &:hover, &.current { background: @blue; color: #fff; } } + li { > a:before, > span:before { -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; 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; } } &.catalog-container:hover .categories-nav { display: block; } } } .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; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 35px 15px 20px 15px; color: #fff; .col { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 15px; } .title { font: 500 14px/18px @fontSec; text-align: center; text-transform: uppercase; position: relative; padding: 5px 0; a { display: block; text-decoration: none; &:hover, &.current { opacity: 0.8; } } } ul { margin-bottom: 15px; li { margin-bottom: 11px; a { font: 13px/14px @fontSec; text-decoration: none; display: block; &:hover, &.current { color: @yellow; opacity: 0.8; 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 { -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; 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: block; display: none; width: 100%; padding-bottom: 25px; > li { display: block; > a, > span { padding: 15px 0; } + li { > a:before, > span:before { -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; 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-slider-wrapper { .bx-viewport { overflow: visible !important; } .title-block-slider { } } .title-block { background: @blue url(../images/title-block-bg.jpg) top center no-repeat; background-size: cover; position: relative; color: #fff; display: block; text-decoration: none; .title-block-after { content: ''; display: block; width: 735px; height: 519px; background-position: top center; background-repeat: no-repeat; background-size: contain; position: absolute; left: 50%; margin-left: -93px; bottom: -150px; z-index: 5; } &.title-block-id-3 { .title-first { position: absolute; left: 0; top: 45px; font: 100 30px/35px @fontSec; width: 100%; max-width: 600px; padding-left: 0; } .title-sec { position: absolute; left: 0; top: 184px; font: 500 36px/47px @fontSec; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; max-width: 600px; padding-left: 37px; strong, .strong { font-size: 60px; letter-spacing: -.03em; } } } .title-block-text { display: table; width: 570px; height: 380px; .title-block-text-cont { display: table-cell; vertical-align: middle; padding: 20px 0; } } .title-first { font: 500 36px/47px @fontSec; text-transform: uppercase; margin-bottom: 20px; strong, .strong { font-size: 60px; letter-spacing: -.03em; } } .title-sec { font: 100 30px/35px @fontSec; padding-left: 65px; } @media screen and (max-width: @breakpointMid) { .title-block-text { width: 360px; } &.title-block-id-3 { &:after { width: 605px; height: 429px; margin-left: -13px; bottom: -90px; z-index: 5; } .title-sec { position: static; font-size: 24px; line-height: 30px; padding-left: 0px; } .title-first { position: static; padding-left: 0px; font-size: 22px; line-height: 30px; top: 135px; strong, .strong { font-size: 50px; } } } .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-slider-wrapper + .page .page-content { padding-top: 124px; @media screen and (max-width: @breakpointMid) { padding-top: 50px; } @media screen and (max-width: @breakpointSmall) { padding-top: 0; } } .page { padding-top: 55px; padding-bottom: 60px; &:after { content: ''; display: block; clear: both; width: 100%; } } .main-page { .page { .page-content { width: 730px; float: right; @media screen and (max-width: @breakpointMid) { width: 100%; float: none; } } .aside { width: 370px; float: left; @media screen and (max-width: @breakpointMid) { float: none; width: 100%; margin-top: 25px; } .aside-block { margin-bottom: 10px; position: relative; @media screen and (max-width: @breakpointMid) { float: left; width: 340px; &:nth-child(even){ margin-left: 80px; } } @media screen and (max-width: @breakpointSmall) { float: none; width: 100%; &:nth-child(even){ margin-left: 0; } } .aside-block-title { font: 700 20px/24px @fontSec; 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{ content: ''; display: block; clear: both; width: 100%;} a { display: block; text-decoration: none; } .img { width: 90px; float: left; 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; } .date { font: 14px/18px @font; color: @blue; margin-bottom: 5px; } } .bx-controls { position: absolute; right: 0; top: 5px; .bx-next, .bx-prev { -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; display: inline-block; width: 30px; height: 30px; 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; 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; width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 20px; line-height: 30px; } &:hover { opacity: 1; background: @dblue; } } .bx-prev:before{content: "\f104";} .bx-next:before{content: "\f105";} } .btn { margin-top: 10px; } } .last-works { text-align: right; .gallery { display: block; text-align: left; margin: 0 !important; &:after{ content: ''; display: block; clear: both; width: 100%;} a { display: block; text-decoration: none; margin: 0; } .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 { -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; position: absolute; top: 50%; margin-top: -15px; display: inline-block; width: 30px; height: 30px; overflow: hidden; text-align: left; text-indent: 999px; background: @blue; border-radius: 50%; text-decoration: none; &:before { content: ''; position: absolute; left: 0; top: 0; 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; width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 20px; line-height: 30px; } &:hover { opacity: 1; background: @dblue; } } .bx-prev { left: -15px; &:before{content: "\f104";} } .bx-next { right: -15px; &::before{content: "\f105";} } } .btn { margin-top: 10px; } } .advantages { background: @blue url(../images/advantages-bg.jpg) top center no-repeat; background-size: cover; padding: 35px 0 25px; font: 500 22px/26px @fontSec; color: #fff; position: relative; &:after { content: ''; display: block; clear: both; width: 100%; } .container { min-height: 30vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 50vw; } .title { text-align: center; font: 500 36px/40px @fontSec; margin-bottom: 43px; } .col { width: 50%; float: left; } ul { max-width: 570px; li { position: relative; padding-left: 60px; margin-bottom: 25px; min-height: 38px; &:before { content: ''; width: 35px; height: 35px; background: url(../images/advantages/water.svg) center left no-repeat; background-size: contain; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-60%); -ms-transform: translateY(-60%); transform: translateY(-60%); } &.advantages__item--1::before { background-image: url(../images/advantages/water.svg); } &.advantages__item--2::before { background-image: url(../images/advantages/delivery-truck.svg); } &.advantages__item--3::before { background-image: url(../images/advantages/credit-card.svg); } &.advantages__item--4::before { background-image: url(../images/advantages/water.svg); } &.advantages__item--5::before { background-image: url(../images/advantages/telephone.svg); } } } @media screen and (max-width: @breakpointMid) { font-size: 18px; line-height: 1.5; br { display: none; } ul { max-width: 350px; } } @media screen and (max-width: @breakpointSmall) { .col { width: 100%; float: none; } } &__bg { position: absolute; left: 0; right: 0; bottom: 0; top: 0; overflow: hidden; background: fade(#0d72c2,0.4); @media screen and (max-width: @breakpointSmall) { display: none !important; } } &__video { position: absolute; left: 50%; top: 50%; min-width: 100%; min-height: 100%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); opacity: 0.5; } &__items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; } .col:first-child { font-size: 146%; } } .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; -webkit-box-sizing: border-box; box-sizing: border-box; .title { font: 500 36px/40px @font; color: #fff; } } .gallery { margin: 15px 0 15px -16px; @media screen and (max-width: @breakpointSmall) { text-align: center; } > div { text-align: left; margin-left: -35px; } a { display: inline-block; vertical-align: top; width: 280px; max-width: 100%; margin-left: 16px; 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: 160px; 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 { -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ''; background: rgba(0,0,0,.7); cursor: pointer; } &:after { 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; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; 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; } } } .news { article { display: inline-block; -webkit-box-sizing: border-box; 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 { content: ''; display: block; clear: both; width: 100%; } .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: 170px; -webkit-box-sizing: border-box; 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; } .price { margin: 0; font-weight: bold; color: @blue; font-size: 1.8em; } } } .catalog-side-nav { > a { display: table; text-decoration: none; height: 50px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 4px 30px; width: 100%; border: 1px solid @blue; color: @blue; font: 14px/20px @font; border-radius: 25px; 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-nav { &__subitems { margin-bottom: 15px } &__subitem { display: block; text-decoration: none !important; margin-bottom: 5px; } } .catalog-element { display: -webkit-box; display: -ms-flexbox; display: flex; @media screen and (max-width: @breakpointMid) { display: block; } &__image { width: 320px; -webkit-box-flex: 1; -ms-flex: auto 0 0px; flex: auto 0 0; margin-right: 25px; @media screen and (max-width: @breakpointMid) { margin-right: auto } @media screen and (max-width: @breakpointSmall) { margin-left: auto } .cat-gallery { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 20px 0 0; .gallery-item { width: 150px; margin: 0; } } } &__content { -webkit-box-flex: 1; -ms-flex: auto 1 1; flex: auto 1 1; min-width: 0 } .price { font-size: 2em; font-weight: 700; color: @blue; text-align: center; margin-top: 0; } } // .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; // } // } // } .partners { text-align: center; img { display: block; width: 100%; } font-size: 14px; a { text-decoration: none; display: block; } } .price { margin-top: 25px; } .section { padding-top: 50px; padding-bottom: 50px; &__head { text-align: center; margin-bottom: 1em; font-size: 30px; font-weight: 700; color: #000; } } .testimonials { &__item { margin-bottom: 20px; } &__card { display: -webkit-box; display: -ms-flexbox; display: flex; } &__image { -webkit-box-flex: 80px; -ms-flex: 80px 0 0px; flex: 80px 0 0; margin-right: 20px } &__content { -webkit-box-flex: 1; -ms-flex: auto 1 1; flex: auto 1 1; } &__title { font-size: 1.5em; margin-bottom: .5em } &__name { font-size: 1.1em; margin-bottom: .5em; } &__img { display: block; width: 100%; } } .catalog-folder { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; @media screen and (max-width: @breakpointSmall) { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } &__item { width: 45%; margin-right: 5%; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px; color: #000 !important; text-decoration: none !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; @media screen and (max-width: @breakpointMid) { display: block; text-align: center; } @media screen and (max-width: @breakpointSmall) { width: 200px; margin-left: 15px; margin-right: 15px; } } .img { -webkit-box-flex: 150px; -ms-flex: 150px 0 0px; flex: 150px 0 0; margin-right: 15px; } &__content { -webkit-box-flex: 1; -ms-flex: auto 1 1; flex: auto 1 1; } .name { font-size: 1.5em; margin: 0 0 .5em; line-height: 1.4; } .description { margin: 0; line-height: 1.4; } } .catalog-after-text { margin-top: 40px; } .catalog-prev-text { margin-bottom: 40px; } .modal { padding: 20px; &__head { margin-bottom: 1em; font-size: 2em; text-align: center; font-weight: 700; } @media screen and (max-width: 500px) { .capture input { width: 100% !important; margin-left: 0 !important; margin-top: 10px; margin-bottom: 10px; } } }