/*VARIABLES*/ /*Fonts*/ @fontHeader: 'arvoregular'; @fontHeaderBold: 'arvobold'; @fontRegular: 'open_sansregular'; @fontBold: 'open_sansbold'; @fontItalic: 'open_sansitalic'; /*Colors*/ /*@mainColor: #ff683a;*/ @addColor: lighten(@mainColor, 20%); @mainColorLight: lighten(@mainColor, 5%); @mainColorBright: lighten(@mainColor, 35%); @bgInverse: lighten(spin(@mainColor, 195%), 40%); @mainColorLimb: fadeout(@mainColor, 80%); @mainColorDarken: darken(@mainColor, 5%); @mainColorSaturate: saturate(@mainColorDarken, 30%); @red: #da251d; @black: #2d2d2d; @darkGrey: #525252; @mediumGrey: #a9b2bb; @lightGrey: #d8dcdf; @brightGrey: #eff1f2; @blueGrey: #444e56; /*END VARIABLES*/ html { position: relative; min-height: 100%; } body { padding-top: 40px; font-weight: normal; font: 16px/24px @fontRegular, sans-serif; color: @black; } .clear { clear: both; height: 0px; } .clearfix:before, .clearfix:after { content: " "; display: block; height: 0; clear: both; } .pm0, ul, ol, ul li, ol li{ margin: 0px; padding: 0px; } ul, ol{ list-style-type: none; } strong, .bold{ font-family: @fontBold; font-weight: normal; } .h2.bold, .h3.bold, .h4.bold, .h5.bold{ font-family: @fontHeaderBold; font-weight: normal; } i, .italic{ font-family: @fontItalic; } h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-family: @fontHeader; color: @darkGrey; } /*mobile headers*/ h1, .h1{ font: 28px/32px @fontHeader; margin: 0 0 25px; } h2, .h2{ font: 24px/28px @fontHeader; margin: 25px 0; } h3, .h3{ font: 20px/24px @fontHeader; margin: 15px 0; } /*mobile headers*/ h4, .h4{ font: 20px/24px 'arvoregular'; margin: 15px 0; } *>h2:first-child, *>.h2:first-child, *>h3:first-child, *>.h3:first-child, *>h4:first-child, *>.h4:first-child{ margin-top: 0; } hr{ height: 1px; border: none; background: @lightGrey; margin-bottom: 15px; } p{ margin: 0 0 10px 0; } /*LINKS*/ a { color: @mainColor; text-decoration: none; transition: all .04s ease-out .04s; } a:before, a:after{ transition: all .04s ease-out .04s; } a:hover { /*color: saturate(@mainColor, 50%);*/ color: darken(saturate(@mainColor, 50%), 12); text-decoration: none; } .dotted{ border-bottom: 1px dotted @mainColor; } .dotted:hover{ border-bottom: 1px dotted transparent; } .dashed{ text-decoration: none; border-bottom: 1px dashed @mainColor; } .dashed:hover{ border-bottom-color: @mainColor; } .dashed.red{ border-bottom: 1px dashed @red; } .dashed.red:hover{ border-bottom-color: darken(@red, 5%); } .dashed.text-lightgrey{ border-bottom-color: @lightGrey; } .dashed.text-lightgrey:hover{ color: @brightGrey; border-bottom-color: @brightGrey; } .dashed.text-darkgrey{ border-bottom-color: @darkGrey; } .dashed.text-darkgrey:hover{ border-bottom-color: @black; } .strikethrough:before{ top: 50%; left: -2px; right: -2px; height: 1px; background: @darkGrey; } .text-mediumgrey .strikethrough:before, .text-mediumgrey.strikethrough:before{ background: @mediumGrey; } a.h1, a.h2, a.h3, a.h4, a.h5 { color: @mainColor; } a.h1:hover, a.h2:hover, a.h3:hover, a.h4:hover, a.h5:hover { color: saturate(darken(@mainColor, 12), 80%); } /*END LINKS*/ /*GENERAL*/ .after:after, .before:before{ content: ''; display: block; position: absolute; } .ease-out{ transition: all .2s ease-out .2s; } .opacity-hover:hover{ opacity: .8; } .bg-white{ background-color: #fff; } .bg-lightgrey{ background-color: @lightGrey !important; } .bg-brightgrey{ background-color: @brightGrey !important; } .bg-inverce{ background-color: @bgInverse !important; } .bg-maincolor{ background-color: @mainColor !important; } .bg-maincolorbright, .bg-maincolorbright-hover:hover{ background-color: @mainColorBright; } .bg-maincolorlimb, .bg-maincolorlimb-hover:hover{ background-color: @mainColorLimb; } .shadow{ box-shadow: 0 0 5px rgba(0,0,0,.5); } .shadow-large{ box-shadow: 0 0 15px rgba(54,63,69,.5); } .round{ border-radius: 50%; } .round-corner-small{ border-radius: 3px; } .round-corner-large{ border-radius: 12px; } .round50{ width: 50px; height: 50px; .round; } .round60{ width: 60px; height: 60px; line-height: 55px; .round; } .round90{ width: 90px; height: 90px; .round; } .round200{ width: 200px; height: 200px; .round; } .red, .red *{ color: @red !important; fill: @red; } a.red:hover, a.red:hover *{ color: darken(@red, 5%) !important; fill: darken(@red, 5%) !important; } .maincolor{ color: @mainColor; } .text-white{ color: #fff !important; } .text-darkgrey, .text-darkgrey a{ color: @darkGrey !important; } .text-mediumgrey{ color: @mediumGrey !important; } .text-lightgrey{ color: @lightGrey !important; } .text-brightgrey{ color: @brightGrey !important; } a.text-darkgrey:hover, .text-darkgrey a:hover, .text-darkgrey a.active{ color: @black !important; } .text-little, .text-little *{ font-size: 13px !important; line-height: 17px !important; } .text-small, .text-small *{ font-size: 14px !important; line-height: 18px !important; } .text-medium, .text-medium *{ font-size: 16px !important; line-height: 22px !important; } .text-large{ font-size: 20px !important; line-height: 26px !important; } .text-greatest{ font-size: 24px !important; line-height: 28px !important; } .h1-bold{ font: 24px/28px @fontHeaderBold; } .border-lightgrey{ border: 1px solid @lightGrey; } .border-maincolorbright-hover:hover, .border-maincolorbright-hover.active{ border: 1px solid @mainColorBright; } .border-maincolor, .border-maincolor-hover:hover{ border: 1px solid @mainColor; } .bg-maincolor-xs{ background: @mainColor; } .bg-texture{ background-image: url('/images/1c_franchise/texture.png'); } .border-top{ border-top: 1px solid @lightGrey !important; } .border-bottom, .list-border-bottom>*, .items-list>*, .list-border-bottom.library-list:last-child{ border-bottom: 1px solid @lightGrey; } .items-list>*:last-child, .border-lightgrey .list-border-bottom>*:last-child{ border-bottom: none; } .bottom-line:after{ bottom: -5px; height: 1px; left: 0; right: 0; } .red.bottom-line:after{ background: @red; } .bottom-line-large:after{ bottom: -5px; height: 2px; left: 0; right: 0; } .text-white.bottom-line-large:after{ background: #fff; } .opacity-hover:hover, a.bottom-line-large:hover:after{ opacity: .8; } .rotate45{ -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .rotate-45{ -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } /*END GENERAL*/ /*FORM ELEMENTS*/ input:focus::-webkit-input-placeholder {color:#ffffff; opacity:1;} input:focus::-moz-placeholder {color:#ffffff; opacity:1;} input:focus:-moz-placeholder {color:#ffffff; opacity:1;} input:focus:-ms-input-placeholder {color:#ffffff; opacity:1;} textarea:focus::-webkit-input-placeholder {color:#ffffff; opacity:1;} textarea:focus::-moz-placeholder {color:#ffffff; opacity:1;} textarea:focus:-moz-placeholder {color:#ffffff; opacity:1;} textarea:focus:-ms-input-placeholder {color:#ffffff; opacity:1;} input[type='submit']:not(.btn), button, button:focus, button:active{ outline: none; border: none; background: transparent; box-shadow: none; } .btn, a.btn{ color: #fff; } .btn{ outline: none; border: none; position: relative; font: 14px/14px @fontRegular; background: @mainColor; text-decoration: none; padding: 18px 30px; } .btn:hover{ background: darken(@mainColor, 8); color: #fff; } .btn.btn-small{ font: 13px/14px @fontRegular; padding: 14px 20px; } .btn-red{ background: @red; } .btn-red:hover{ background: darken(@red, 3); } a.btn-lightgrey{ color: @darkGrey; background: @lightGrey; } a.btn-lightgrey:hover{ background: darken(@lightGrey, 10); } .btn-outline{ background: transparent; border: 1px solid @lightGrey; } .btn-outline:hover{ background: transparent; border: 1px solid @mainColor; color: @mainColor !important; } .btn-arrow-right{ padding-right: 40px; } .btn-phone, .btn-search{ padding-left: 40px; } .btn-arrow-right:after, .btn-phone:before, .link-more:after, .btn-buy:before, .btn-search:before, .basket-clear:before, .basket-clear-item:before, .registration-pict:before, .forget-pict:before, .user-pict:before, .office-pict:before{ content:''; position: absolute; top: 50%; margin-top: -10px; right: 10px; width: 20px; height: 20px; background: url('/images/1c_franchise/sprite.svg') no-repeat -20px -180px; } .link-more:after{ right: 0; margin-top: -7px; background-position: -20px -220px; } .btn-phone:before{ left: 12px; margin-top: -10px; background-position: 0 -60px; } .basket-clear:before{ left: 0; margin-top: -8px; background-position: -20px -80px; } .basket-clear-item:before{ left: 0; margin-top: -14px; background-position: -20px -100px; } .btn-search:before{ left: 12px; margin-top: -10px; background-position: -20px -240px; } .basket-clear:hover:before, .basket-clear-item:hover:before, .link-more:hover:after, .registration-pict:hover:before, .forget-pict:hover:before, .office-pict:hover:before{ opacity: .5; } .registration-pict:before, .forget-pict:before, .user-pict:before, .office-pict:before{ /*top: 12px;*/ left: 0; width: 15px; height: 15px; background-position: 0 -120px; } .forget-pict:before{ background-position: -20px -120px; } .user-pict:before{ /*top: 10px;*/ background-position: 0 -140px; } .office-pict:before{ /*top: 10px;*/ background-position: -20px -140px; } input[type='checkbox']+label:before, input[type='radio']+label:before{ left: 0; top: 0; border: 1px solid @darkGrey; background: #fff; line-height: 16px; color: @mainColor; } input[type='checkbox']+label:before{ width: 16px; height: 16px; } input[type='radio']+label:before{ width: 14px; height: 14px; } input[type='checkbox']:checked+label:before, input[type='radio']:checked+label:before{ border: 1px solid @addColor; content: ""; background: @mainColorBright url('/images/1c_franchise/sprite.svg') no-repeat 0 -180px; } input[type='radio']+label:before{ top: 3px; .round; } input[type='radio']:checked+label:before{ background: none; } input[type='radio']:checked+label:after{ width: 8px; height: 8px; left: 3px; top: 6px; background: @mainColor; .round; } label{ color: @darkGrey; .text-medium; } input[type='text']:not(.spinner), input[type="tel"], input[type='search'], textarea, select, input[type='password'], .input-like{ width: 100%; padding: 14px 15px; font: 16px/20px @fontRegular; color: @darkGrey; border: 1px solid @mediumGrey; border-radius: 3px; background: #fff; } input[type='text']:focus, input[type="tel"]:focus, input[type='search']:focus, input[type='password']:focus, textarea:focus{ color: @mainColor; border-color: @mainColor; box-shadow: 0 0 10px @mainColorBright; outline: none; } textarea{ min-height: 180px; } .modal textarea{ min-height: 100px; } select{ padding: 12px 15px; } select *{ color: @darkGrey; } input[type='text'][readonly="readonly"]{ background: @lightGrey; } input[type='text'].input-small, input[type='password'].input-small{ padding: 11px; font: 14px/16px @fontRegular; } .spinner{ text-align: center; max-width: 60px; padding: 4px; } .btn-spinner{ font-size: 14px; cursor: pointer; line-height: 35px; color: @mainColor; } .btn-spinner.disabled{ color: @darkGrey; } .input-tip{ position: absolute; opacity: 0; top: 0; left: 15px; font: 12px/14px @fontRegular; color: @mediumGrey; transition: all .2s ease-out .2s; } input:focus+.input-tip, textarea:focus+.input-tip{ top: -17px; opacity: 1; } .refresh{ width: 35px; height: 35px; background: url('/images/1c_franchise/sprite.svg') no-repeat 0 0; } .captcha-wrapper{ line-height: 48px; } .required{ position: absolute; right: 10px; top: 17px; z-index: 100; color: @mainColor; .text-medium; } div[class^='col-md-']>.required, div[class^='col-lg-']>.required{ right: 25px; } /*catalog search*/ .search-content{ position: absolute; z-index: 1000; padding: 20px; width: 100%; top: 65px; left: 0; background: rgba(255,255,255,.95); border-radius: 3px; .shadow-large; } .search-content:before{ left: 30px; top: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid rgba(255,255,255,.95); } .search-results-items{ margin-bottom: 20px; } .search-results-items>li{ margin-bottom: 10px; font: 15px/18px @fontRegular; } .search-content strong{ font-family: @fontBold; font-weight: normal; } /*end catalog search*/ /*END FORM ELEMENTS*/ /*HEADER*/ html.u-eip .top-panel{ top: 38px; } .header{ padding: 25px 0 15px; } header a, header a:hover{ text-decoration: none; } /*TOP-PANEL*/ .top-panel{ position: fixed; top: 0; left: 0; right: 0; z-index: 101; box-shadow: 0 1px 1px rgba(255,255,255,.3); background: @mainColor; } .top-panel ul:not(.menu-mobile)>li{ margin-right: 1px; display: inline-block; } .top-panel>.container>a, .menu-user>li>a, .tabs-general a{ position: relative; display: block; color: #fff; padding: 0 8px; line-height: 40px; transition: all .2s ease-out .2s; } .top-panel>.container>a, .menu-user>li>a,{ padding: 0 18px; font-size: 14px; } .top-panel a span{ vertical-align: middle; color: #fff; } .top-panel>.container>a:hover, .menu-user>li>a:hover, .top-panel>.container>a.active, .menu-user>li>a.active{ background: @mainColorSaturate; } .menu-tabs-main>div>a:after, .tabs-general>li>a:after, .items-tile>li:after{ display: block; content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; opacity: 0; background: @red; transition: all .2s ease-out .2s; } .menu-tabs-main>div>a.active:after, .menu-tabs-main>div>a:hover:after, .tabs-general>li>a.active:after, .tabs-general>li>a:hover:after, .items-tile>li:hover:after{ bottom: 0; opacity: 1; } .top-panel .basket-counter{ min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; } .top-panel .basket-counter:before{ border-radius: 50%; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: #fff; } .top-panel .basket-counter span{ z-index: 2; font: 11px/14px @fontRegular; color: @red; } /*END TOP-PANEL*/ /*MAIN MENU BTN*/ .hamburger{ display: inline-block; width: 30px; margin: 11px 0 10px; } .hamburger span{ position: relative; display: block; width: 20px; height: 3px; background: #fff; border-radius: 1px; transition: all .2s; } .hamburger span:nth-child(2){ margin: 5px 0; } .hamburger.menu-open span:nth-child(1){ top: 7.5px; .rotate45; } .hamburger.menu-open span:nth-child(2){ opacity: 0; } .hamburger.menu-open span:nth-child(3){ bottom: 8.5px; .rotate-45; } .menu-mobile li{ margin-bottom: 1px; } /*END MAIN MENU BTN*/ /*MENU MAIN*/ .menu-main{ border-radius: 3px; box-shadow: inset 0 0 3px darken(@mainColor, 5%); background-color: @mainColor; } .menu-main>li{ display: inline-block; position: relative; } .menu-main>li>a, .menu-mobile a{ display: block; color: #fff; line-height: 56px; padding: 0 8px; position: relative; text-shadow: 0 0 1px @mainColorDarken; } .menu-main>li:first-child>a{ border-radius: 3px 0 0 3px; } .menu-main>li:last-child>a{ border-radius: 0 3px 3px 0; } .menu-main>li>a.active, .menu-main>li:hover>a, .menu-mobile li>a.active, .menu-mobile li>a:hover, .main-submenu li a:hover{ background: saturate(darken(@mainColor, 5%), 100%); } .menu-main>li>a>span, .menu-mobile li>a>span{ font: 16px/18px @fontRegular; vertical-align: middle; } .menu-main>li:not(:last-child)>a:after{ content: ''; position: absolute; width: 1px; top: 0; bottom: 0; } .menu-main>li a:after{ right: 0; background: @mainColorLight; } .main-submenu{ display: none; position: absolute; z-index: 100; top: 56px; left: 0; background-color: @mainColor; } .main-submenu li{ border-top: 1px solid @mainColorLight; } .main-submenu li a{ display: block; padding: 10px 22px; color: #fff; font: 15px/18px @fontRegular; } /*END MENU MAIN*/ .logo-block{ img{ max-width: 120px; } span{ font: 12px/12px @fontBold; color: @red; } } .header .search-wrapper{ padding-left: 40px; border-radius: 20px; border: 1px solid @mediumGrey; input[type='submit']{ width: 20px; height: 20px; background: url('/images/1c_franchise/sprite.svg') no-repeat 0 -240px; position: absolute; left: 10px; top: 50%; margin-top: -10px; } input[type='search']{ border: none; padding: 10px; background: transparent; } input[type='search']:focus{ box-shadow: none; } } .header-phone>a{ font-family: @fontHeaderBold; } /*END HEADER*/ /*TABS*/ .tab-content{ display: none; } .tabs-content-wrap div.tab-content:first-child{ display: block; } .tabs-general a{ padding: 0 30px; line-height: 45px; color: @mediumGrey; } .tabs-general a.active{ color: @darkGrey; } .tabs-general>li>a:after, .items-tile .relative:hover:after{ background: @mainColor; } /*END TABS*/ /*MENU TABS MAIN*/ .menu-tabs-main a{ color: @darkGrey; } .menu-tabs-pict{ transition: all .2s ease-out .2s; margin: 0 auto 0; width: 100px; height: 100px; background: @brightGrey; svg { fill: @mainColor; transition: all .2s ease-out .2s; } .round; } .menu-tabs-main a:hover .menu-tabs-pict, .menu-tabs-main a.active .menu-tabs-pict{ background: @mainColor; } .active .menu-tabs-pict svg, a:hover .menu-tabs-pict svg{ fill: #fff; } /*END MENU TABS MAIN*/ /*ASIDE*/ .block-header+div[class^='border-']{ border-top: none; } .aside-menu li{ border-bottom: 1px solid @lightGrey; } .aside-menu a{ display: block; position: relative; padding: 10px 0 10px 25px; color: @darkGrey; font-size: 16px; } .aside-menu a:hover, .aside-menu a.active{ color: @mainColor; } /*END ASIDE*/ /*PAGING*/ .paging span, .paging a, .arrow-left, .arrow-right{ min-width: 24px; height: 24px; vertical-align: middle; } .paging span, .paging a{ margin: 0 6px; font: 16px/24px @fontRegular; color: @darkGrey; .round; } .paging span, .paging a:hover{ background: @mediumGrey; color: #fff; } .arrow-left:before, .arrow-right:before{ width: 20px; height: 20px; top: 2px; background: url('/images/1c_franchise/sprite.svg') no-repeat 0 -220px; } .arrow-left:before{ left: 1px; } .arrow-right:before{ right: 1px; background-position: -20px -220px; } /*END PAGING*/ /*FOOTER*/ .footer{ position: relative; padding: 20px 0 0; min-height: 400px; background: @blueGrey; color: @mediumGrey; .bold, a{ color: @lightGrey; } a:hover{ text-decoration: none; color: @mainColor; } } .footer-bottom{ min-height: 50px; background: @lightGrey; color: @blueGrey; div{ font: 12px/14px @fontRegular; } a{ color: @blueGrey; text-decoration: underline; } } .black-underline:before, .black-underline:after{ content: ''; top: 0; height: 1px; left: 0; right: 0; background: #3d3d3d; } .black-underline:after{ top: 1px; background: #778089; } .footer-header a{ border-bottom: 2px solid transparent; } .footer-header a.active, .footer-header a:hover{ border-bottom: 2px solid @mainColor; color: @lightGrey; } .spoiler-link-white:after, .spoiler-link-grey:after{ top: 50%; right: -25px; margin-top: -10px; width: 20px; height: 20px; background: url('/images/1c_franchise/sprite.svg') no-repeat 0 -200px; transition: none; } .spoiler-link-grey:after{ margin-top: -8px; background-position: 0 -160px; } .spoiler-link-white.spoiler-open:after{ background: url('/images/1c_franchise/sprite.svg') no-repeat -20px -200px; } .spoiler-link-grey.spoiler-open:after{ background: url('/images/1c_franchise/sprite.svg') no-repeat -20px -160px; } /*END FOOTER*/ /*BREADCRUMBS*/ .breadcrumbs li{ display: inline-block; } .breadcrumbs li:not(:last-child):after{ position: relative; content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 14px; top: -3px; background: @mainColor; } /*END BREADCRUMBS*/ /*CONTENT*/ .content p{ word-wrap: break-word; margin-bottom: 10px; } .content ul, .content ol{ position: relative; list-style: none; left: 20px; margin: 0 20px 15px 0; } .content ul>li, .content ol>li{ margin: 0 0 5px; } .content ul>li, .content ol>li, .marker-list>li{ position: relative; padding-left: 15px; } .content ul>li, .content ol>li{ padding-left: 20px; } .content ul>li:before, .marker-list>li:before, .aside-menu a:before{ content: ''; position: absolute; width: 4px; height: 4px; left: 0; top: 7px; } .content ol{ counter-reset: list; } .content ol>li:before{ counter-increment: list; content: counter(list); position: absolute; color: @mainColor; font: 14px/16px @fontBold; left: 0; top: 5px; } .content ul>li:before{ top: 10px; } .marker-list.marker-color-grey li:before{ background: @mediumGrey; } .content ul>li:before, .marker-list.marker-color-main li:before, .aside-menu a:before{ background: @mainColor; } .aside-menu a:before{ top: 20px; left: 10px; } .content.text-small ul>li:before{ top: 7px; left: 7px; } .content.text-small ol>li:before{ top: 2px; left: 7px; font: 12px/14px @fontRegular; } .content table th, .content table td{ vertical-align: middle; padding: 10px 20px; font: 16px/24px @fontRegular; } .content table tr:nth-child(odd){ background: @mainColorBright; } .content table tr:first-child{ border-top: 1px solid @lightGrey; } .content table tr{ border-bottom: 1px solid @lightGrey; } .table-wrapper{ overflow: auto; } .table-wrapper table{ min-width: 768px; } /*END CONTENT*/ /*DIVIDERS*/ .vert-divider-md:before{ background: fadeout(@mainColor, 80%); } .vert-divider-md:after{ background: desaturate(lighten(@mainColor, 80%), 20%); } /*END DIVIDERS*/ /*SLIDER*/ /* loader */ .bx-wrapper{ position: relative; max-width: 100% !important; } .bx-loading { min-height: 50px; background: url('/images/1c_franchise/loader.svg') center center no-repeat #ffffff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; } .main-banner .bx-wrapper{ background: @mainColorBright; } /*banner controls*/ .bx-controls-direction{ left: 0; right: 0; } .bx-prev, .bx-next{ position: absolute; z-index: 99; width: 50px; height: 50px; text-decoration: none; transition: all .15s ease-out .15s; } .bx-prev{ left: 0px; } .bx-next{ right: 0px; } .bx-prev:before, .bx-prev:after, .bx-next:before, .bx-next:after{ position: absolute; content: ''; display: block; width: 1px; height: 15px; background: @darkGrey; transition: all .15s ease-out .15s; } .bx-prev:before, .bx-next:before{ top: 12px; left: 50%; } .bx-prev:after, .bx-next:after{ top: 22px; left: 50%; } .bx-prev:before, .bx-prev:after{ margin-left: -2px; } .bx-next:before, .bx-next:after{ margin-right: -2px; } .bx-prev:before, .bx-next:after{ .rotate45; } .bx-prev:after, .bx-next:before{ .rotate-45; } .bx-prev:hover:before, .bx-prev:hover:after, .bx-next:hover:before, .bx-next:hover:after,{ background: @mainColor !important; } /*end banner controls*/ /*pager*/ .bx-pager{ position: relative; z-index: 60; text-align: center; font-size: 0; line-height: 50px; >div{ display: inline-block; margin: 0 4px; vertical-align: middle; } a{ display: block; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 1px solid #fff; } a.active, a:hover{ background: @mainColor; } } /*end pager*/ .banner-content{ padding: 30px; z-index: 100; } /*END SLIDER*/ /*PRICE*/ .rub{ font-family: 'als_rublregular' !important; } /*END PRICE*/ /*ADVANTAGES*/ .svg-pict-colorwhite svg{ fill: #fff; } .svg-pict-colormain svg{ fill: @mainColor; } a:hover .svg-pict-colormain svg{ transition: all .04s ease-out .04s; fill: saturate(darken(@mainColor, 12), 80%); } .advantages-block.active{ background: @mainColorBright; } .bg-half-maincolor-md:before{ background: @mainColor; } /*END ADVANTAGES*/ /*PROMO*/ .promo-counter{ font: 70px/70px 'open_sanslight'; color: @mainColor; } .promo-counter+div{ max-width: 160px; margin: 0 auto; } /*END PROMO*/ /*REVIEWS*/ .reviews-slider .bx-controls-direction{ margin-top: 15px; height: 50px; background: @mainColorBright; } .reviews-slider .bx-prev, .reviews-slider .bx-next{ border-color: @lightGrey; .round; } .reviews-slider .bx-prev:hover, .reviews-slider .bx-next:hover{ border-color: @mainColor; } /*END REVIEWS*/ /*MAIN NEWS*/ .main-news{ overflow: hidden; background-position: 50% 100%; background-attachment: fixed; background-repeat: no-repeat; } .main-news:before{ top: 0; right: 0; bottom: 0; left: 0; background: url('/images/1c_franchise/bg_news_texture.png'); } /*END MAIN NEWS*/ /*CATALOG*/ .round60 img{ max-width: 50px; } .items-tile>li{ margin-bottom: 30px; } .items-list>li{ padding: 10px 0; } .items-tile>li{ position: relative; } .items-tile>li:before{ z-index: -1; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid @lightGrey; } .jscroll-inner .items-list, *+.items-list{ border-top: 1px solid @lightGrey; } /*END CATALOG*/ /*GALLERY*/ .thumbnails span.active{ border-color: @mainColor; } /*END GALLERY*/ /*LIBRARY KNOWLEDGE*/ dt{ font-weight: normal; color: @mainColor; } .library-list>li:hover, .library-list>li.active{ .bg-maincolorbright; border-bottom-color: @mainColor; >a, a:hover{ color: @mainColor !important; } } .library-sub-list{ display: none; } /*END LIBRARY KNOWLEDGE*/ /*MODAL*/ .popup-header{ padding: 15px 50px 15px 30px; text-align: left; } .close{ position: absolute; width: 20px; height: 18px; top: 20px; right: 20px; background: url('/images/1c_franchise/sprite.svg') no-repeat 0 -100px; } .modal{ display: none; position: fixed; top: 100px; bottom: auto; left: 0; right: 0; background: #fff; z-index: 1001; .shadow-large; } .mask, .fake-mask{ display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.7); z-index: 1000; } .fake-mask{ background: none; } body.blur { footer>div, header>div, >div.container, >section{ -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } } .loader{ position: fixed; left: 50%; top: 50%; margin-top: -17px; margin-left: -17px; width: 34px; height: 34px; z-index: 1000; background: url('/images/1c_franchise/loader.svg'); } /*END MODAL*/ /*DROPDOWN*/ .dropdown{ display: none; position: fixed; top: 50px; left: 0; right: 0; z-index: 1001; background: #fff; .shadow-large; } /*END DROPDOWN*/ /*SCROLL TOP*/ .scroll-top{ position: fixed; right: -100px; top: 50%; width: 40px; height: 40px; background: rgba(255,255,255,.2); transition: all .4s ease-out .4s; z-index: 1000; .round; } .scroll-top:before, .scroll-top:after{ top: 50%; margin-top: -2px; width: 10px; height: 1px; background: @mainColor; transition: all .2s ease-out .2s; } .scroll-top:hover:before, .scroll-top:hover:after{ background: @addColor; } .scroll-top:before{ right: 50%; margin-right: -1.5px; .rotate-45; } .scroll-top:after{ left: 50%; margin-left: -1.5px; .rotate45; } /*END SCROLL TOP*/ /*FIX UMI PANEL*/ .u-eip-add-button, .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next, #popupLayerScreenLocker div{ -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; box-sizing: content-box !important; } #popupLayer_save{ width: 260px !important; } #popupLayer_save .hidden{ display: block !important; visibility: visible !important; } .u-eip-add-button{ padding-top: 0; color: #fff !important; } /*END UMI PANEL*/ /*FILES LIST*/ .files-list{ background: #fff; } .files-list li{ padding: 10px 0; } .files-list a{ position: relative; padding-left: 45px; text-decoration: none; } .files-list a:before{ position: absolute; content: ''; display: block; width: 40px; height: 40px; top: 50%; margin-top: -20px; left: 0; background: url('/images/1c_franchise/docs_pictogram.svg') no-repeat 0 0; } .files-list a.pdf:before{ background-position: 0 -40px; } .files-list a.rtf:before{ background-position: 0 -80px; } .files-list a.xls:before{ background-position: 0 -120px; } .files-list a.doc:before{ background-position: 0 -160px; } .files-list a.ppt:before{ background-position: 0 -200px; } /*END FILES LIST*/