/* ----------------------------------- normalize ----------------------------------- */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } input, textarea { &:focus {outline: none;} &::-moz-placeholder { font-weight: 300; color: #A7A9AC; } &:-moz-placeholder { font-weight: 300; color: #A7A9AC; } &::-webkit-input-placeholder { font-weight: 300; color: #A7A9AC; } &:-ms-input-placeholder { font-weight: 300; color: #A7A9AC; } } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* ----------------------------------- global ----------------------------------- */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 100%; line-height: 1.4; background: #fff; font-family: arial, sans-serif; color: #000; height: 100%; min-height: 100%; } body { height: 100%; min-height: 100%; } input, textarea { outline: none; } html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, figure, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6, p { font-size: 100%; line-height: 1.4; font-weight: normal; font-style: normal; } a { color: #0087ce; text-decoration: none; cursor: pointer; } a:hover { text-decoration: none; color: #000; } .bg_img(@url, @repeat, @size, @position) { background-image: url(@url); background-repeat: @repeat; -webkit-background-size: @size; -moz-background-size: @size; -o-background-size: @size; background-size: @size; background-position: @position; } .box-sizing(@property) { -webkit-box-sizing: @property; -moz-box-sizing: @property; box-sizing: @property; } .box-shadow(@params) { -wabkit-box-shadow: @params; -moz-box-shadow: @params; box-shadow: @params; behavior: url("/styles/PIE.htc"); } .transition(@prop: all, @time: 0.2s, @ease: ease-in) { -webkit-transition: @prop @time @ease; -moz-transition: @prop @time @ease; -ms-transition: @prop @time @ease; -o-transition:@prop @time @ease; transition: @prop @time @ease; } .transform(@params) { -webkit-transform: @params; -moz-transform: @params; -ms-transform: @params; -o-transform: @params; transform: @params; } .transform-origin(@params) { -webkit-transform-origin: @params; -moz-transform-origin: @params; -ms-transform-origin: @params; -o-transform-origin: @params; transform-origin: @params; } .border-radius(@params) { -webkit-border-radius: @params; -moz-border-radius: @params; border-radius: @params; behavior: url("/styles/PIE.htc"); } .text-shadow(@params) { text-shadow: @params; } .animation(@params) { -webkit-animation: @params; -moz-animation: @params; -o-animation: @params; -ms-animation: @params; animation: @params; } .linear-gradient (@origin: left, @start: #ffffff, @stop: #000000) { background-color: @start; background-image: -webkit-linear-gradient(@origin, @start, @stop); background-image: -moz-linear-gradient(@origin, @start, @stop); background-image: -o-linear-gradient(@origin, @start, @stop); background-image: -ms-linear-gradient(@origin, @start, @stop); background-image: linear-gradient(@origin, @start, @stop); } .fontreset { font-size: 0; line-height: 0; letter-spacing: -4px; } .background-size(@par) { -webkit-background-size: @par; -moz-background-size: @par; background-size: @par; } .clearfix() { &:after, &::after { content: ""; display: block; height: 0; clear: both; } } .justify() { &:after, &::after { content: ""; display: inline-block; height: 0; width: 100%; } } .desktop-large (@rules) { @media (min-width: 1280px) { @rules(); } } .desktop (@rules) { @media (min-width: 980px) and (max-width: 1279px) { @rules(); } } .tablet (@rules) { @media (min-width: 640px) and (max-width: 979px) { @rules(); } } .mobile (@rules) { @media (max-width: 639px) { @rules(); } } input[type="checkbox"], input[type="radio"], input[type="text"], input[type="email"] { .box-sizing(border-box); padding: 0; } /* BEGIN Italic */ @font-face { font-family: 'Ubuntu'; src: url("../fonts/Ubuntu/Italic/Ubuntu-Italic.eot?v=1.1.0"); src: url("../fonts/Ubuntu/Italic/Ubuntu-Italic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Ubuntu/Italic/Ubuntu-Italic.woff?v=1.1.0") format("woff"), url("../fonts/Ubuntu/Italic/Ubuntu-Italic.ttf?v=1.1.0") format("truetype"), url("../fonts/Ubuntu/Italic/Ubuntu-Italic.svg?v=1.1.0#UbuntuLight") format("svg"); font-weight: normal; font-style: italic; } /* END Italic */ /* BEGIN Regular */ @font-face { font-family: 'Ubuntu'; src: url("../fonts/Ubuntu/Regular/Ubuntu-Regular.eot?v=1.1.0"); src: url("../fonts/Ubuntu/Regular/Ubuntu-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Ubuntu/Regular/Ubuntu-Regular.woff?v=1.1.0") format("woff"), url("../fonts/Ubuntu/Regular/Ubuntu-Regular.ttf?v=1.1.0") format("truetype"), url("../fonts/Ubuntu/Regular/Ubuntu-Regular.svg?v=1.1.0#UbuntuRegular") format("svg"); font-weight: normal; font-style: normal; } /* END Regular */ /* BEGIN Medium */ @font-face { font-family: 'Ubuntu'; src: url("../fonts/Ubuntu/Medium/Ubuntu-Medium.eot?v=1.1.0"); src: url("../fonts/Ubuntu/Medium/Ubuntu-Medium.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Ubuntu/Medium/Ubuntu-Medium.woff?v=1.1.0") format("woff"), url("../fonts/Ubuntu/Medium/Ubuntu-Medium.ttf?v=1.1.0") format("truetype"), url("../fonts/Ubuntu/Medium/Ubuntu-Medium.svg?v=1.1.0#UbuntuBold") format("svg"); font-weight: 600; font-style: normal; } /* END Medium */ /* BEGIN Bold */ @font-face { font-family: 'Ubuntu'; src: url("../fonts/Ubuntu/Bold/Ubuntu-Bold.eot?v=1.1.0"); src: url("../fonts/Ubuntu/Bold/Ubuntu-Bold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Ubuntu/Bold/Ubuntu-Bold.woff?v=1.1.0") format("woff"), url("../fonts/Ubuntu/Bold/Ubuntu-Bold.ttf?v=1.1.0") format("truetype"), url("../fonts/Ubuntu/Bold/Ubuntu-Bold.svg?v=1.1.0#UbuntuBold") format("svg"); font-weight: bold; font-style: normal; } /* END Bold */ html, body { height: 100%; min-width: 960px; } body { font-family: "Ubuntu"; font-size: 0; line-height: 0; } @cl-main: #484e5a; @cl-red: #e4013a; @cl-gray: #eeeef0; @cl-gray2: #828791; @cl-dgray: #212733; @cl-lgray: #aaacb3; @cl-green: #1f9f86; @cl-blue: #2d7bc4; @cl-dblue: #2c3442; header { .center-block { position: relative; .clearfix(); } } .main-wrap {height: 100%;} .inner-wrap { min-height: 100%; margin-bottom: -389px; } .content { padding-bottom: 389px; margin-top: 20px; } .center-block { width: 960px; margin: 0 auto; &.forum-page {position: relative;} &.pre-footer {margin-bottom: 30px;} } .forum-page { .btn-red.abs { position: absolute; right: 0; top: 54px; text-align: center; } .events-gallery__bottom-block { margin-top: 0; margin-bottom: 100px; } } footer { padding: 47px 0 72px; background-color: @cl-dblue; .copy-wrap { overflow: hidden; margin-top: 81px; .copy1 {float: left;} .copy2 { float: right; width: 140px; a {margin-left: 5px;} } .copy1, .copy2 { font-size: 13px; line-height: 18px; color: @cl-gray2; .text, a { display: inline-block; vertical-align: middle; } .text {line-height: 1;} } } } .footer-first-menu { display: block; .li { display: inline-block; width: 20%; margin-bottom: 13px; vertical-align: top; &.list {display: list-item;} a { font-size: 15px; line-height: 1; color:#fff; text-decoration: none; .transition(); &:hover { color: #fff; text-decoration: underline; } } } .inline { width: 20%; .li {width: 100%;} } } .inline {display: inline-block;} .footer-submenu { display: block; .li { width: 100%; margin-bottom: 8px; &:first-child {margin-top: 8px;} a { font-size: 13px; line-height: 18px; color: @cl-gray2; text-decoration: none; .transition(); &:hover { color: #fff; text-decoration: underline; } } } } .footer-second-menu { width: 20%; vertical-align: top; .li { width: 20%; margin-bottom: 8px; a { font-size: 13px; line-height: 18px; color:#fff; text-decoration: none; .transition(); &:hover { color: #fff; text-decoration: underline; } } } } .icon-defa { font-size: 20px; .transition(); color: @cl-gray2; &:hover {color: #fff;} } .btn-white { height: 40px; padding: 0 26px; border: 2px solid @cl-main; font-size: 14px; line-height: 36px; color: @cl-main; cursor: pointer; .transition(); &:hover { background-color: @cl-main; color: #fff; } } .btn-red { display: inline-block; min-width: 225px; height: 40px; padding: 0 15px; background-color: @cl-red; font-weight: 600; font-size: 16px; line-height: 36px; color: #fff; text-transform: uppercase; text-align: left; cursor: pointer; .transition(); &:hover { color: #fff; background-color: @cl-main; } .icon-arrow-r { margin-left: 10px; line-height: 36px } &:focus {outline: none;} } .logo-main { float: left; width: 181px; margin: 20px 0 18px; } .header-r { float: right; margin: 21px 55px 0 0; img { cursor: pointer; -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray; filter: url("data:image/svg+xml;utf8,#greyscale"); .transition(); &:hover { filter: none; -webkit-filter: none; } } } .logo-2 { width: 133px; vertical-align: middle; } .logo-star { width: 41px; margin: 0 30px; vertical-align: middle; } .logo-sambo { width: 48px; vertical-align: middle; } .header-btn { display: inline-block; margin-left: 42px; vertical-align: middle; } .search-form { position: absolute; right: 0; top: 0; .input-wrap { position: absolute; right: 52px; top: -110px; width: 480px; height: 110px; padding-left: 50px; background-color: #fff; .transition(); } &.active { .input-wrap {top: -5px;} } input { width: 295px; height: 45px; margin-top: 35px; border: none; border-bottom: 1px solid #ccc; .box-shadow(none); font-family: "Ubuntu"; font-style: italic; font-size: 14px; line-height: 45px; color: @cl-lgray; &::-moz-placeholder {color: @cl-lgray;} &:-moz-placeholder {color: @cl-lgray;} &::-webkit-input-placeholder {color: @cl-lgray;} &:-ms-input-placeholder {color: @cl-lgray;} } .search { position: absolute; right: 0; bottom: -66px; width: 20px; height: 20px; border: none; .box-shadow(none); cursor: pointer; background-color: transparent; &:before { content: "\e90b"; font-family: "icomoon"; font-size: 20px; } &:focus {outline: none;} } } .main-nav { position: relative; background-color: @cl-red; } ul.main-ul { width: 100%; display: table; //text-align: justify; //text-justify: distribute; //.justify(); & > li { //display: inline-block; display: table-cell; vertical-align: middle; &:nth-child(8) { border-left: 1px solid rgba(255, 255, 255, 0.7); border-right: 1px solid rgba(255, 255, 255, 0.7); } &:last-child { display: none; width: 205px; & > a { padding-top: 9px; line-height: 0; font-size: 0; } .text { display: inline-block; font-size: 15px; line-height: 16px; text-align: left; vertical-align: middle; } } &:hover { .main-sub-nav-wrap { display: block; z-index: 10; } } &.active { & > a { background-color: @cl-main; color: #fff; cursor: default; } .main-sub-nav-wrap { display: block; z-index: 10; } } & > a { display: block; height: 50px; padding: 0 14px; font-size: 15px; line-height: 50px; color: #fff; text-align: center; .transition(); &:hover, &.active { background-color: @cl-main; color: #fff; } } } .icon-calendar { vertical-align: middle; margin-right: 21px; opacity: 0.7; } } .main-sub-nav-wrap { display: none; position: absolute; left: 0; top: 50px; width: 100%; background-color: @cl-main; li { display: inline-block; padding: 0 16px; vertical-align: middle; .transition(); &.active { & > a { border-color:@cl-red; color: #fff; .icon-calendar {color: #c8cace;} cursor: default; } } } a { display: block; height: 50px; border-bottom: 5px solid @cl-main; font-size: 15px; line-height: 50px; color: #fff; text-align: center; .transition(); &:hover { border-color: @cl-red; color: #fff; .icon-calendar {color: #c8cace;} } } } .icon-calendar {font-size: 24px;} .main-promo { .clearfix(); .btn-wrap { position: absolute; right: 0; bottom: 0; text-align: right; } } .main-promo-left { position: relative; float: left; width: 715px; height: 504px; .bg_img("/images/main-promo-img.jpg", no-repeat, cover, center center); .desc { position: absolute; left: 0; bottom: 0; z-index: 3; width: 100%; padding: 24px 38px 32px; background-color: rgba(33, 39, 51, 0.7); font-weight: 600; font-size: 24px; line-height: 30px; color: #fff; a { font-weight: normal; font-size: 14px; line-height: 20px; color: @cl-red; text-decoration: none; &:hover {text-decoration: underline;} } } .bg-1, .bg-2 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(""); background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; } .bg-1 { z-index: 2; opacity: 1; } .bg-2 { z-index: 1; opacity: 0; } } .main-promo-right { position: relative; float: right; width: 244px; height: 504px; } .pormo-event-item { position: absolute; right: 0; z-index: 1; width: 100%; height: 110px; padding: 8px 18px 18px; margin-bottom: 1px; .transition(); .transform-origin(right top); background-color: @cl-gray; .bg_img("", no-repeat, cover, center center); &:first-child {top: 0;} &:nth-child(2) {top: 111px;} &:nth-child(3) {top: 222px;} &:nth-child(4) {top: 333px;} &.photo:hover { z-index: 2; background-color: #fff; .main-promo-right-bg {opacity: 1;} .pormo-event-item__data, .pormo-event-item__title { display: none; } } &.photo {cursor: pointer;} &.active { width: 254px; background-color: #fff; z-index: 5; &:hover {z-index: 5;} } } .main-promo-right-bg { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; .bg_img("", no-repeat, cover, center center); opacity: 0; .transition(); } .pormo-event-item__data { position: absolute; right: 0; top: 8px; z-index: 1; width: 100%; padding: 0 18px; margin-bottom: 7px; font-style: italic; font-size: 13px; line-height: 21px; color: @cl-lgray; } .pormo-event-item__title { position: absolute; right: 0; top: 36px; z-index: 1; width: 100%; padding: 0 18px; font-size: 14px; line-height: 20px; color: @cl-main; text-decoration: none; } .pormo-event-item__views { position: relative; z-index: 1; position: absolute; right: 10px; top: 11px; width: 27px; height: 23px; padding-top: 2px; font-weight: 600; font-size: 12px; line-height: 1; color: #fff; text-align: center; .bg_img("../images/cloud.png", no-repeat, cover, center center); } h1 { margin-bottom: 27px; font-weight: 600; font-size: 36px; line-height: 40px; color: @cl-dgray; } h2 { margin: 33px 0 25px; font-weight: bold; font-size: 24px; line-height: 30px; color: @cl-dgray; text-transform: uppercase; } h4 { margin: 21px 0; font-weight: bold; font-size: 15px; line-height: 21px; color: @cl-dgray; text-transform: uppercase; } p { margin-bottom: 15px; font-size: 15px; line-height: 24px; color: @cl-dgray; } .square-list { width: 100%; text-align: justify; text-justify: distribute; .justify(); li { position: relative; display: inline-block; border: 4px solid @cl-red; width: 225px; height: 225px; padding: 11px 16px; vertical-align: top; text-align: left; } } .icon-arrow-r { font-size: 17px; line-height: 40px; } .square-list__title { font-weight: 600; font-size: 18px; line-height: 21px; color: @cl-dgray; } .square-list__text { margin-top: 11px; font-size: 14px; line-height: 20px; color: @cl-dgray; } .square-list__city { margin-top: 5px; font-size: 14px; line-height: 20px; color: @cl-lgray; } .square-list__link { position: absolute; right: -4px; bottom: -4px; width: 40px; height: 40px; background-color: @cl-main; color: #fff; text-align: center; .transition(); &:hover { background-color: @cl-lgray; // color: @cl-main; } .icon-arrow-r {line-height: 40px;} } .square-list_file { position: absolute; right: 36px; bottom: -4px; width: 40px; height: 40px; font-weight: bold; font-size: 15px; line-height: 40px; color: #fff; text-align: center; text-transform: uppercase; .transition(); &.xls {background-color: @cl-green;} &.doc {background-color: @cl-blue;} &:hover {color: #fff;} } .all-w-border { position: relative; margin-top: 37px; border-bottom: 1px solid #2c3443; text-align: right; .btn-red { position: relative; bottom: -1px; } } .media-about-block { margin-top: 40px; padding: 1px 0 78px; background-color: @cl-gray; ul { width: 100%; text-align: justify; text-justify: distribute; .justify(); } li { display: inline-block; width: 320px; height: 225px; padding: 0 35px 0 20px; border-left: 4px solid @cl-red; vertical-align: top; text-align: left; a { font-size: 14px; line-height: 20px; color: @cl-red; text-decoration: none; &:hover { color: @cl-red; text-decoration: underline; } } } } .media-about__date { font-style: italic; font-size: 13px; line-height: 9px; color: @cl-lgray; } .media-about__title { margin: 12px 0; font-weight: 600; font-size: 18px; line-height: 21px; color: @cl-dgray; line-height: 21px; } .main-slider {margin-bottom: 110px;} .photogal-slider-img { overflow: hidden; position: relative; height: 400px!important; .slick-list { overflow: visible; &:focus {outline: none;} } } .media-about__text { margin-bottom: 9px; font-size: 14px; line-height: 20px; color: @cl-dgray; } .photogal-slider-img-item { display: inline-block; width: 600px!important; height: 400px!important; .bg_img("/images/main-slide1.jpg", no-repeat, cover, center top); opacity: 0.5; &.slick-active {opacity: 1;} &:focus {outline: none;} } .slick-prev, .slick-next { position: absolute; top: 50%; z-index: 10; width: 80px; height: 40px; margin-top: -20px; background-color: @cl-main; cursor: pointer; opacity: 0.7; .transition(); &:focus {outline: none;} &:hover { opacity: 1; } } .slick-prev { left: 220px; .transform(scale(-1, 1)); &:before { content: "\e902"; font-family: "icomoon"; font-size: 17px; color: #fff; line-height: 40px; } } .slick-next { right: 220px; &:before { content: "\e902"; font-family: "icomoon"; font-size: 17px; color: #fff; line-height: 40px; } } .photogal-slider-desc { position: relative; width: 600px; margin: 15px auto 0; } .photogal-slider-desc-title { position: absolute; left: 0; top: 0; width: 100%; padding-left: 53px; font-size: 14px; line-height: 20px; color: @cl-dgray; opacity: 0; .transition(); span { position: absolute; left: 0; top: 0; font-weight: 600; font-size: 18px; line-height: 21px; color: @cl-dgray; margin-right: 25px; } } .photogal-slider-desc-title.active {opacity: 1;} .event-top-block { margin-top: 44px; .clearfix(); } .event-left-block { float: left; width: 635px; padding-right: 24px; border-right: 1px solid #d4d5d9; } .link-doc { position: relative; display: block; padding-left: 55px; font-weight: bold; font-size: 14px; line-height: 18px; color: @cl-dgray; text-align: left; vertical-align: top; &:before { position: absolute; left: 0; top: 4px; width: 40px; height: 40px; font-weight: bold; font-size: 15px; line-height: 40px; color: #fff; text-transform: uppercase; text-align: center; } &.pdf{ &:before { content: "pdf"; background-color: @cl-red; } } &.doc { &:before { content: "doc"; background-color: @cl-blue; } } &.xls { &:before { content: "xls"; background-color: @cl-green; } } &.photo { &:before { content: "\e909"; font-family: 'icomoon'; color: @cl-red; font-size: 37px; } } span { font-weight: normal; font-size: 14px; line-height: 21px; color: @cl-lgray; } } .event-right-block { float: right; width: 324px; padding-top: 5px; padding-left: 20px; .date, .time { display: inline-block; font-weight: bold; font-size: 15px; line-height: 24px; color: @cl-dgray; } .time {margin-left: 30px;} .icon-calendar { margin-right: 15px; color: @cl-lgray; vertical-align: middle; } .icon-clock { margin-right: 15px; color: @cl-lgray; vertical-align: middle; } .link-doc { margin-top: 35px; } } .icon-clock {font-size: 22px;} .events-gallery-wrap { margin: 42px 0 100px; &.video { .events-gallery-photo {display: none;} .events-gallery-video {display: block;} } .btn-red { float: left; min-width: auto; font-weight: normal; font-size: 14px; text-transform: none; .icon-arrow-r { .transform(scale(-1, 1)); margin: 0 10px 0 0; vertical-align: middle; } } } .events-gallery-tabs { overflow: hidden; margin-bottom: 20px; border-bottom: 1px solid @cl-dgray; } .events-gallery-tab { float: left; height: 40px; padding: 0 34px; background-color: transparent; font-size: 18px; line-height: 40px; color: @cl-dgray; cursor: pointer; .transition(); &:hover { background-color: @cl-dgray; color: #fff; } &.active { background-color: @cl-main; color: #fff; cursor: default; } } .events-gallery-photo {display: block;} .events-gallery-video {display: none;} .events-gallery-photo__item, .events-gallery-video__item { display: inline-block; width: 306px; height: 204px; margin-right: 21px; margin-bottom: 21px; .bg_img("/images/main-slide1.jpg", no-repeat, cover, center top); cursor: pointer; &:nth-child(3n + 3) {margin-right: 0;} } .events-gallery__bottom-block { overflow: hidden; display: inline-block; width: 100%; margin-top: 19px; } .events-gallery-pagin { float: right; text-align: right; li { display: inline-block; } a { display: inline-block; width: 40px; height: 40px; font-size: 18px; line-height: 40px; color: @cl-main; text-align: center; .transition(); &:hover { background-color: @cl-dgray; color: #fff; } &.active { cursor: default; background-color: @cl-main; color: #fff; } &.more { cursor: default; &:hover { background-color: transparent; color: @cl-main; } } } .prev {.transform(scale(-1, 1));} } .hide {display: none!important;} .events-docs-wrap { .link-doc { display: inline-block; width: 25%; padding-right: 25px; margin-bottom: 5px; } } .icon-home { display: inline-block; font-size: 10px; line-height: 1; color: @cl-main; vertical-align: middle; } .crumbs { margin: 85px 0 28px; li { display: inline-block; &:not(:first-child):before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 13px; background-color: @cl-main; vertical-align: middle; } &:last-child { a { cursor: default; color: @cl-lgray; } } } a { font-size: 13px; line-height: 18px; color: @cl-main; vertical-align: middle; } } .crumbs-min-mar { .crumbs {margin-top: 35px;} } .persons-list { margin: 33px 0 65px; .clearfix(); li { float: left; width: 204px; margin-right: 48px; margin-bottom: 35px; vertical-align: top; &:nth-child(4n + 4) { margin-right: 0; }; } } .persons-list__img { display: block; width: 204px; height: 306px; .bg_img("/images/main-slide1.jpg", no-repeat, cover, center top); } .persons-list__name { display: inline-block; margin-top: 15px; font-weight: 600; font-size: 18px; line-height: 21px; color: @cl-dgray; } .persons-list__rank { margin-top: 6px; font-size: 14px; line-height: 20px; color: @cl-lgray; } .persons-list__preview { margin-top: 6px; font-size: 15px; line-height: 21px; color: @cl-dgray; } .docs-wrap { &.first {margin-bottom: 30px;} &.last {margin-bottom: 100px;} .link-doc { display: inline-block; margin-bottom: 30px; &:last-child {margin-bottom: 0;} } } .news-list { & + .events-gallery__bottom-block {margin-bottom: 100px;} } .news-list__item { .clearfix(); margin-bottom: 57px; } .news-list__img { float: left; width: 306px; height: 204px; margin-top: 5px; margin-right: 30px; .bg_img("/images/main-slide1.jpg", no-repeat, cover, center top); } .news-list__title { font-weight: 600; font-size: 24px; line-height: 30px; color: @cl-dgray; text-decoration: none; cursor: pointer; .transition(); &:hover {color: @cl-red;} } .news-list__date { margin-top: 3px; font-size: 14px; line-height: 21px; color: @cl-lgray; } .news-list_desc { margin-top: 7px; font-size: 14px; line-height: 24px; color: @cl-dgray; } .photogal-list { display: block; margin-top: 33px; & + .events-gallery__bottom-block {margin: 0 0 100px;} } .photogal-list__item { display: inline-block; width: 306px; margin-bottom: 35px; text-align: left; margin-right: 21px; &:nth-child(3n) {margin-right: 0;} } .photogal-list__img { height: 204px; margin-bottom: 8px; .bg_img("/images/main-slide1.jpg", no-repeat, cover, center top); } .photogal-list__date { margin-bottom: 5px; font-size: 14px; line-height: 24px; color: @cl-lgray; } .photogal-list__title { font-weight: 600; font-size: 18px; line-height: 22px; color: @cl-dgray; text-decoration: none; cursor: pointer; .transition(); &:hover {color: @cl-red;} span {color: @cl-lgray;} } .photogal-date { margin-top: 22px; font-size: 18px; line-height: 24px; color: @cl-lgray; } .photogal-item-list { margin-top: 40px; text-align: justify; text-justify: distribute; .justify(); & > div { display: inline-block; width: 306px; height: 204px; margin-bottom: 21px; .bg_img("/images/main-slide1.jpg", no-repeat, cover, center top); cursor: pointer; } & + .events-gallery__bottom-block {margin-bottom: 100px;} } .photo-slider-wrap { display: none; position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); } .photogal-slider { position: absolute; left: 50%; top: 50%; z-index: 1; margin-left: -480px; margin-top: -320px; width: 960px; height: 640px; } .slider-photo__item { display: inline-block; width: 960px; height: 640px; .bg_img("/images/geogr-map1.jpg", no-repeat, cover, center top); cursor: pointer; &:focus {outline: none;} } .slide-prev-wrap, .slide-next-wrap { position: absolute; top: 50%; z-index: 100; width: 80px; height: 40px; margin-top: -13px; background-color: rgba(72, 78, 90, 0.7); text-align: center; cursor: pointer; .transition(); &.slide-prev-wrap {left: -50px;} &.slide-next-wrap {right: -50px;} &:hover {background-color: rgba(72, 78, 90, 1)}; .icon-arrow-long-r, .icon-arrow-long-l { font-size: 17px; line-height: 40px; color: #fff; text-align: center; cursor: pointer; } .icon-arrow-long-l { .transform(scale(-1, 1)); } } .slide-close-wrap { position: absolute; top: -39px; right: -39px; z-index: 100; width: 27px; height: 27px; color: #fff; opacity: 0.7; text-align: center; cursor: pointer; .transition(); &:hover {opacity: 1;} .icon-close { font-size: 27px; line-height: 27px; text-align: center; cursor: pointer; } } .slick-list {overflow: hidden;} .slide-footer { position: absolute; left: 0; bottom: -47px; width: 100%; height: 47px; background-color: @cl-main; } .slide-footer-left { float: left; margin-left: 30px; .text { font-size: 14px; line-height: 47px; color: #fff; vertical-align: middle; &:hover { color: #fff; text-decoration: underline; } } .size { margin-left: 6px; font-size: 14px; line-height: 1; color: rgba(255, 255, 255, 0.5); vertical-align: middle; } .icon-arrow-r { margin-left: 10px; font-size: 14px; color: #fff; line-height: 1; vertical-align: middle; &:hover { color: #fff; text-decoration: none; } } } .slide-footer-right { float: right; margin-right: 30px; text-align: right; a {margin-left: 30px;} .icon-twitter { font-size: 13px; line-height: 47px; color: #fff; vertical-align: middle; } .icon-fb { font-size: 18px; line-height: 47px; color: #fff; vertical-align: middle; } .icon-vk { font-size: 10px; line-height: 47px; color: #fff; vertical-align: middle; } } .popup-form-wrap { display: none; position: fixed; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); form { position: absolute; left: 50%; top: 50%; height: 488px; padding: 40px; margin: -244px 0 0 -358px; .input-block:first-child {margin-top: 30px;} textarea { max-height: 140px; resize: none; } } } form.contact-form { width: 716px; background-color: #fff; &.contact-page-form { margin-bottom: 100px; width: 636px; } .icon-close { position: absolute; right: 40px; top: 32px; font-size: 27px; width: 27px; height: 27px; line-height: 1; color: @cl-main; cursor: pointer; } .required { font-size: 18px; line-height: 1; color: @cl-red; } .input-block { position: relative; margin-top: 30px; &:first-child {margin-top: 0;} .clearfix(); &.error { input, textarea { border: 1px solid @cl-red; } .form__error-text {display: block;} } } .form__error-text { display: none; font-style: italic; font-size: 13px; line-height: 18px; color: @cl-red; &:before { content: ""; display: block; clear: both; } } .bottom-block { margin-top: 30px; text-align: justify; text-justify: distribute; .justify(); .text { display: inline-block; font-size: 14px; line-height: 1; color: #000; vertical-align: middle; } } .btn-red { min-width: 150px; text-align: center; vertical-align: middle; cursor: pointer; } label { font-weight: 600; font-size: 18px; line-height: 40px; color: #000; } input[type=text] { float: right; width: 479px; height: 40px; padding: 0px 15px; border: 1px solid @cl-main; font-family: "Ubuntu"; font-size: 18px; line-height: 40px; color: #000; } textarea { float: right; width: 479px; min-width: 479px; max-width: 479px; height: 140px; min-height: 140px; padding: 5px 15px; border: 1px solid @cl-main; font-family: "Ubuntu"; font-size: 18px; line-height: 1.2; color: #000; } } .popup-form-wrap__title { margin-bottom: 40px; font-weight: bold; font-size: 24px; line-height: 1; color: @cl-dgray; text-transform: uppercase; } .required {color: @cl-red;} .forum-list {margin-top: 32px;} .forum-list-item { padding-bottom: 31px; margin-bottom: 40px; border-bottom: 1px solid #2c3443; &:last-child { border-bottom: none; margin-bottom: 0; } } .forum-list-item_date { font-size: 14px; line-height: 1; color: @cl-lgray; } .forum-list-item_title { margin-top: 6px; font-weight: 600; font-size: 18px; line-height: 1; color: @cl-dgray; } .forum-list-item_text { margin-top: 11px; font-size: 14px; line-height: 24px; color: @cl-dgray; } .person-data { margin: 33px 0 100px; .top-block { position: relative; .clearfix(); } .person-photo { float: left; width: 204px; height: 306px; .bg_img("/images/main-slide1.jpg", no-repeat, cover, center top); } .soc-icons { position: absolute; right: 0; top: -60px; text-align: right; a { color: @cl-main; margin-left: 30px; vertical-align: middle; .transition(); &:hover {color: @cl-dgray;} } } .icon-vk {font-size: 10px;} .icon-fb {font-size: 18px;} .icon-twitter {font-size: 13px;} .table-data { float: right; border-collapse: collapse; border-spacing: 0; padding: 0; width: 706px; th { width: 25%; height: 40px; border-right: 1px solid #fff; &:last-child {border-color: @cl-main;} background-color: @cl-main; font-weight: normal; font-size: 14px; line-height: 21px; color: #fff; text-align: center; vertical-align: middle; } td { height: 67px; border: 1px solid @cl-main; font-size: 14px; line-height: 17px; color: @cl-dgray; text-align: center; vertical-align: middle; &:last-child {color: @cl-red;} } } .person-info { margin-top: 50px; } .person-info-tabs { .clearfix(); border-bottom: 1px solid @cl-main; } .person-info-tab { float: left; height: 39px; padding: 0 44px; border-left: 1px solid @cl-main; background-color: transparent; font-size: 18px; line-height: 39px; color: @cl-dgray; cursor: pointer; .transition(); &:first-child {border: none;} &.active { background-color: @cl-main!important; color: #fff; cursor: default; } &:hover { background-color: @cl-dgray; color: #fff; } } } .person-info { &.info-0 { .tab-info:first-child {display: block;} } &.info-1 { .tab-info:nth-child(2) {display: block;} } &.info-2 { .tab-info:last-child {display: block;} } } .person-tab-info { padding: 34px 0 10px; border-bottom: 1px solid @cl-main; .tab-info {display: none;} .clearfix(); .col1 { float: left; width: 460px; } p { margin-bottom: 20px; font-size: 14px; line-height: 24px; color: @cl-dgray; } .col2 { float: right; width: 460px; li { position: relative; padding-left: 15px; margin-bottom: 13px; font-size: 14px; line-height: 24px; color: @cl-dgray; &:before { content: ""; position: absolute; left: 0; top: 11px; width: 3px; height: 3px; .border-radius(3px); background-color: @cl-red; } span {color: @cl-lgray;} } } h2 {margin-top: 0;} } .person-slider { position: relative; margin: 34px 0 55px; .slick-list { overflow: hidden; width: 900px; margin-left: 40px; } } .person-slider-item { display: inline-block; &:focus {outline: none;} // margin-right: 21px; } .person-slider-item__photo { width: 204px; height: 306px; .bg_img("/images/main-slide1.jpg", no-repeat, cover, center top); } .person-slider-item__name { margin-top: 15px; font-weight: 600; font-size: 18px; line-height: 21px; color: @cl-dgray; } .slide-prev-wrap, .slide-next-wrap { position: absolute; top: 50%; margin-top: -42px; width: 80px; height: 40px; text-align: center; background-color: @cl-main; color: #fff; opacity: 0.7; cursor: pointer; .transition(); &:hover { opacity: 1; } .icon-arrow-long-r, .icon-arrow-long-l { font-size: 17px; line-height: 40px; } .icon-arrow-long-l { .transform(scale(-1, 1)); } } .slide-prev-wrap {left: 0;} .slide-next-wrap {right: 0;} .calendar-form { margin-top: 33px; .clearfix(); label { font-weight: 600; font-size: 18px; color: @cl-dgray; } .select-wrap { margin-left: 19px; margin-right: 19px; } .checkbox-block { float: right; margin-top: 10px; input { display: none; &:checked + label:before {.bg_img("../images/checkbox.png", no-repeat, 13px 13px, center center);} } label { margin-right: 46px; cursor: pointer; &:last-child {margin-right: 0;} &:before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 20px; border: 1px solid @cl-main; vertical-align: middle; } } } } .select-wrap { display: inline-block; position: relative; .icon-arrow-b { position: absolute; right: 13px; top: 17px; z-index: 1; font-size: 8px; color: @cl-main; } } .select-val { position: relative; z-index: 2; display: inline-block; width: 167px; height: 40px; border: 1px solid @cl-main; padding: 0 16px; font-size: 14px; line-height: 38px; color: @cl-main; cursor: pointer; } .select-menu { display: none; position: absolute; left: 0; top: 40px; z-index: 1; width: 167px; border: 1px solid @cl-main; border-top: none; background-color: #fff; li { height: 40px; padding: 0 16px; font-size: 14px; line-height: 40px; color: @cl-main; cursor: pointer; &:hover { background-color: @cl-dgray; color: #fff; } } } .select-time, .select-place { display: none; } .slider-date { position: relative; margin: 40px 0 50px; .slick-list { overflow: hidden; width: 880px; margin: 0 auto; &:focus {outline: none;} } .icon-arrow-l, .icon-arrow-r { position: absolute; top: 50%; width: auto; height: auto; margin-top: -8px; background-color: transparent; opacity: 1; font-size: 17px; line-height: 1; color: @cl-main; cursor: pointer; &:hover {color: @cl-red;} } .icon-arrow-r {right: 0;} .icon-arrow-l { left: 0; .transform(scale(-1, 1)); } } .slider-date__item-wrap { display: inline-block; padding: 0 10px; &:focus {outline: none;} input[type="radio"] {display: none;} } .slider-date__item { display: block; width: 70px!important; height: 40px; border: 1px solid @cl-main; font-size: 18px; line-height: 38px; color: @cl-dgray; text-align: center; cursor: pointer; &.active { border: 1px solid @cl-red; color: #fff; background-color: @cl-red; cursor: default; } } .calendar-month-tab-wrap { border-bottom: 1px solid @cl-main; margin-bottom: 32px; } .calendar-month-tab { width: 180px; height: 39px; background-color: @cl-main;; font-size: 18px; line-height: 39px; color: #fff; text-align: center; } .calendar-month-items {margin-bottom: 100px;} .calendar-month-item {margin-top: 36px;} .calendar-month-wrap { display: table; width: 100%; margin-top: 19px; } .calendar-month-date { display: table-cell; width: 219px; font-weight: bold; font-size: 14px; line-height: 21px; color: @cl-dgray; } .calendar-month-text { display: table-cell; padding-right: 15px; font-size: 14px; line-height: 21px; color: @cl-red; .info {color: @cl-lgray;} } .calendar-month-files { display: table-cell; width: 241px; .link-doc { font-weight: normal; margin-bottom: 14px; } } .news-item { margin-bottom: 100px; .clearfix(); .news-list__date {margin-bottom: 30px;} img { float: left; width: 50%; margin: 6px 30px 5px 0; } } .img{ padding-left: 157px; margin-bottom: 10px; } .search-page { margin-bottom: 100px; input[type="text"] { width: 479px; height: 40px; padding: 0px 15px; border: 1px solid @cl-main; font-family: "Ubuntu"; font-size: 18px; line-height: 40px; color: #000; } .select-wrap {margin-top: 10px;} .submit {margin-top: 10px;} button {text-align: center;} } .list-result-search { margin-top: 20px; li { margin-top: 20px; &:first-child {margin-top: 0;} } h3 { a { font-weight: 600; font-size: 18px; line-height: 21px; } } .date_change { display: inline-block; margin-top: -10px; font-size: 14px; line-height: 20px; color: @cl-lgray; } } .num-404 { margin: 0 0 40px; font-weight: bold; font-size: 200px; color: @cl-red; line-height: 0.8; text-align: center; } .text-404 { font-size: 15px; color: @cl-main; line-height: 0.7; text-align: center; a { font-size: 15px; line-height: 1; } }