.main-view{ display: flex; flex-wrap: wrap; picture{ filter: brightness(0.7); } .group{ position: relative; width: 40%; @media(max-width: @size-mobile){ width: 100%; } &::after{ content: ""; position: absolute; height: calc(100% - 30px); top: 0; bottom: 0; left: 0; display: block; width: 1px; background-color: #e8e8e8; z-index: 1; margin: auto; } } } .news-item{ @media(max-width: @size-mobile){ width: 100% !important; } &.main{ width: 100%; box-shadow: black 0 0 14px -5px; a{ color: white; } } z-index: 1; text-align: left; display: flex; align-items: flex-end; justify-content: flex-start; align-content: flex-end; flex-wrap: wrap; overflow: hidden; position: relative; picture:after { position: absolute; transition: 0.3s; opacity: 1; content:""; height:100%; width:100%; top:0; left:0; background: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5)); } picture:hover::after{ opacity: 0.4; } .meta{ position: absolute; bottom: 0; left: 0; color: #fff; padding: 15px 30px; .title{ font: 700 28px/32px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; margin-bottom: 10px; @media(max-width: @size-mobile){ font-size: 14px; line-height: 16px; @media (resolution: 150dpi) { font-size: 10px; line-height: 12px; } } } .lead{ margin-bottom: 15px; font: 18px/25px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: hsla(0,0%,100%,.8); font-size: 16px; line-height: 150%; @media(max-width: @size-mobile){ font-size: 12px; } } .published_at{ color: hsla(0,0%,100%,.5); font: 12px/17px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; .commnets{ margin-left: 20px; } .icon{ width: 10px; height: 10px; fill: #a8a8a8; margin-right: 5px; } } } &.main{ margin-bottom: 30px; } &.high{ .meta{ .title{ font-weight: 700 !important; } } } &.high,&.low{ width: 60%; align-content: center; &:hover{ .published_at{ color: #3b5573; } } background: white; .meta{ position: relative; color: #3e3e3e; padding: 50px 15px 15px 15px; .title{ font: 24px/34px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; } .lead{ font-size: 16px; line-height: 150%; color: #3e3e3e; } .published_at{ position: absolute; top:15px; left:15px; color: #aeaeae; } } } &.low{ width: 100%; padding-bottom: 15px; .meta{ .title{ font: 18px/26px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; margin: 0; } } &:nth-child(1)::after{ content: ""; position: absolute; width: calc(100% - 15px); bottom: 0; left: 0; display: block; height: 1px; background-color: #e8e8e8; z-index: 1; } } } #lenta-container{ @media(max-width: @size-mobile){ max-height: 100% !important; } &::-webkit-scrollbar { display: none; } -ms-overflow-style: none; scrollbar-width: none; overflow-y: scroll; & + .shadow{ position: relative; width: 100%; content: ""; top: -50px; left: 0; right: 0; margin: auto; height: 50px; background: linear-gradient(transparent,#fff); } } .partner-news{ margin-top: 30px; &>div{ flex-grow: 1; } #top_slider{ display: flex; overflow: hidden; position: relative; .arrows{ position: absolute; height: 50px; width: 100%; top: 27%; left: 0; z-index: 1; font-size: 25px; &>div{ position: absolute; top:0; cursor: pointer; height: 50px; width: 50px; color: white; border-radius: 50%; background: @active-color; display: flex; align-items: center; justify-content: center; svg{ fill: white; height: 20px; width: 20px; } &.next{ right: 0px; } &.prev{ left: 0px; } } } .slides{ display: flex; overflow: hidden; position: relative; } .slides>div{ min-width: 100%!important; padding: 0; margin-right: 15px; transform: translate(0,0); transition: 0.3s; } .partner-news-item{ } } .partner-news-item{ position: relative; background-color: white; height: 100%; padding-bottom: 30px; .meta{ padding: 15px; h2{ font: 18px/22px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; } .published_at{ position: absolute; bottom: 15px; left: 15px; color: #a8a8a8; .icon{ width: 10px; height: 10px; fill: #a8a8a8; margin-right: 5px; } } } } } .slpager { position: absolute; bottom: 20px; right: 30px; z-index: 100; } .slider-indicator { flex: 0 1 auto; box-sizing: content-box; width: 10px; height: 5px; margin-right: 3px; margin-left: 3px; text-indent: -999px; background-color: rgb(255 255 255 / 60%); background-clip: padding-box; border-top: 15px solid transparent; border-bottom: 15px solid transparent; cursor: pointer; display: block; float: left; } .slider-indicator.active{ background-color: #ff7f00; z-index:101; } .slinner{ z-index:101; } .main-view{ &>div{ flex-grow: 1; } #top_mslider{ display: flex; overflow: hidden; position: relative; width:100%; box-shadow: #000 0 0 14px -5px; margin-bottom: 30px; .arrows{ @media(max-width: @size-mobile){ top: 8%; } position: absolute; height: 50px; width: 100%; top: 44%; left: 0; z-index: 100; font-size: 25px; opacity: 0.7; &>div{ position: absolute; top:0; cursor: pointer; height: 50px; width: 50px; color: white; border-radius: 50%; background: @active-color; display: flex; align-items: center; justify-content: center; svg{ fill: white; height: 20px; width: 20px; } &.next{ right: 5px; } &.prev{ left: 5px; } } } .slides{ display: flex; overflow: hidden; position: relative; width:100% } .slides>div{ min-width: 100%!important; padding: 0; margin-right: 15px; transform: translate(0,0); transition: 0.3s; } .news-sitem{ } } .news-sitem{ @media(max-width: @size-mobile){ width: 100% !important; } &.main{ width: 100%; a{ color: white; } } z-index: 1; text-align: left; display: flex; align-items: flex-end; justify-content: flex-start; align-content: flex-end; flex-wrap: wrap; overflow: hidden; position: relative; picture:after { position: absolute; transition: 0.3s; opacity: 1; content:""; height:100%; width:100%; top:0; left:0; background: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5)); } picture:hover::after{ opacity: 0.4; } .meta{ position: absolute; bottom: 0; left: 0; color: #fff; padding: 15px 30px; .title{ font: 700 28px/32px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; margin-bottom: 10px; @media(max-width: @size-mobile){ font-size: 14px; line-height: 16px; } } .lead{ margin-bottom: 15px; font: 18px/25px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: hsla(0,0%,100%,.8); font-size: 16px; line-height: 150%; @media(max-width: @size-mobile){ font-size: 12px; } } .published_at{ color: hsla(0,0%,100%,.5); font: 12px/17px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; .commnets{ margin-left: 20px; } .icon{ width: 10px; height: 10px; fill: #a8a8a8; margin-right: 5px; } } } } } .wide-widget{ margin-top: 30px; .cont{ position: relative; } picture:after { position: absolute; transition: 0.3s; opacity: 1; content:""; height:100%; width:100%; top:0; left:0; background: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5)); } picture:hover::after{ opacity: 0.4; } .meta{ position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; .topic{ text-transform: uppercase; position: absolute; width: 210px; height: 40px; bottom: 5px; left: 0; right: 0; margin: auto; font: 14px/17px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: hsla(0,0%,100%,.5); display: flex; justify-content: center; align-items: center; &::before,&::after{ content: ""; display: block; position: absolute; height: 100%; width: 1px; background-color: hsla(0,0%,100%,.2); top: 0; left: 0; } &::after{ right: 0; left: unset; } a{ color: inherit; font: inherit; } } .title{ position: absolute; bottom: 60px; left: 20px; color: white; margin: 0; max-width: 541px; font: 700 30px/36px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; a{ color: white; } } .commnets{ position: absolute; right: 20px; bottom: 20px; color: #a8a8a8; font: 12px/17px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; .icon{ width: 15px; height: 15px; fill: #a8a8a8; margin-right: 5px; } } } .adv .cont{ background: white; height: 100%; display: flex; align-items: center; justify-content: center; } } .text-news-widget{ margin-top: 30px; &>div>.cont{ background: white; padding: 0 30px; } .widget-title{ font: 700 18px/22px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: #3e3e3e; padding: 30px 15px; } .text-widget-item{ .cont{ padding: 0 15px 30px 15px; position: relative; height: 100%; .meta{ .title{ font: 16px/19px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: #3e3e3e; } } .published_at{ position: absolute; width: 100%; bottom: 15px; font: 14px/17px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: #a8a8a8; .comments{ position: absolute; right: 45px; .icon{ width: 10px; height: 10px; fill: #a8a8a8; margin-right: 5px; } } } } } } @media not (max-width: @size-mobile){ .widget-title{ margin-bottom: -15px !important; margin-top: 25px !important; } } .topic-widget{ margin-top: 30px; .cont{ position: relative; //height: 500px; overflow: hidden; @media(max-width: @size-mobile){ height:auto; } } picture{ filter: brightness(0.6); } .content{ position: absolute; bottom: 0; left: 0; padding: 30px; max-width: 100%; @media(max-width: @size-mobile){ padding: 15px; max-width: 100%; } } .topic-title{ max-width: 608px; font: 36px/43px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: #fff; margin-bottom: 50px; a{ color: #fff; } @media(max-width: @size-mobile){ margin-bottom: 5px; font-size: 22px; line-height: normal; } } @media(max-width: @size-mobile){ @keyframes move-swipe{ 0% { transform: translateX(-20px); } 50% { transform: translateX(20px); } 100% { transform: translateX(-20px); } } .swipe-icon{ animation: move-swipe 4s ease infinite; display: block; position: absolute; min-width: 50px; width: 40px; height: 40px; background-image: url(/img/swipe.svg); background-size: contain; background-repeat: no-repeat; margin: auto; left: 0; right: 0; bottom: 27px; z-index: 0; fill: white; opacity: 0.5; } } .topic-news{ display: flex; overflow: hidden; .swipe-icon{ display: none; } @media(max-width: @size-mobile){ .navigation{ top: 15px; &.prev{ left: -17px; } &.next{ right: -15px; } } .title{ line-height: 20px; } } &>div{ @media(max-width: @size-mobile){ display: block; min-width: 95%; &:nth-child(1){ display: block; padding: 0; } } } .cont{ height: 100%; padding-bottom: 30px; } .title{ margin: 0; line-height: 23px; a{ font: 700 16px/19px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; color: #fff; line-height: 0; } } .comments{ color: #fff; position: absolute; bottom: 0; margin: 0; .icon{ width: 10px; height: 10px; fill: #fff; margin-right: 5px; } } } } @media (max-width: @size-mobile) { #main-view-container{ order: 1; padding-right: 0; padding-left: 0; } #lenta-wrapper{ order: 0; padding-right: 0; padding-left: 0; .news-link{ padding: 0 15px; } .lenta { margin-bottom: 15px; .list-wrapper { &>div { display: none; padding: 12px 15px 12px 15px } &>div:nth-child(-n+8){ display: block; } } } } .partner-news{ margin-top: 15px; &>div{ margin-bottom: 15px; } } .wide-widget{ //margin-top: 0px; .meta{ h2.title{ font-size: 16px; line-height: 20px; padding-right: 15px; } } } } .widget{ &.topic-widget{ .navigation{ top: 75px; &.prev{ left: 0px; &:after{ background-color: transparent; } } &.next{ right: 0px; &:after{ background-color: transparent; } } } } position: relative; .navigation{ position: absolute; width: 50px; height: 50px; top: 0; bottom: 0; margin: auto; z-index: 9; opacity: .8; cursor: pointer; &:after{ content: ""; background-color: @active-color; border-radius: 50%; height: 100%; width: 100%; color: white; display: flex; justify-content: center; align-items: center; font-size: 25px; background-repeat: no-repeat; background-position: center; } &.prev{ &:after{ background-image: url("/svg/clear/h-slider-prev.svg"); } left: -15px; } &.next{ &:after{ background-image: url("/svg/clear/h-slider-next.svg"); } right: -15px; } } } .partner-news.colorful{ height: 402px; overflow: hidden; display: flex; flex-wrap: nowrap; position: relative; .colorful-news-item{ position: relative; cursor: pointer; width: 296px; height: 402px; margin: 0 15px; overflow: hidden; display: flex; min-width: 296px; @media(max-width: @size-mobile){ min-width: calc(100% - 30px); } a{ color: #fff; text-decoration: none; &.button{ color: @active-color; font-size: 16px; } } .background{ width: 100%; height: 100%; display: flex; justify-content: center; picture{ height: 100%; img{ height: 100%; } } } &:before{ content: ""; position: absolute; width: 100%; height: 100%; opacity: .8; z-index: 1; } &.orange:before{ background-color: #979795; } &.blue:before{ background-color: #3b5573; } } .rubric{ position: absolute; display: flex; top: 15px; width: 100%; padding: 0 13px; letter-spacing: .08em; white-space: nowrap; text-transform: uppercase; color: #fff; font: 700 12px/17px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; z-index: 2; a{ margin: 0 15px; } &:before, &:after{ content: ""; width: 100%; height: 1px; background: white; align-self: center; } } .title{ position: absolute; top:85px; width: 100%; text-align: center; padding: 20px; z-index: 2; font: 24px/29px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; .comments{ display: block; font-size: 14px; color: #fff; svg{ fill: #fff; width: 12px; margin-right: 7px; } } } } #tfilters-modal{ top: 40%; padding: 30px; right: 60px; left: 0; margin: auto; height:auto; border:solid 1px #eee; } .mymodal{ position: fixed; top: 0; left: 0; z-index: 1050; width: 100%; height: 100%; overflow: hidden; outline: 0; } .checkbox-lg .form-check-input{ top: .8rem; transform: scale( 1.4 ); margin-right: 0.7rem; } .checkbox-lg .form-check-label { padding-top: 13px; font-size: 16px; padding-left: 4px; } .checkbox-xl .form-check-input { top: 1.2rem; transform:scale( 1.7 ); margin-right: 0.8rem; } .checkbox-xl .form-check-label { padding-top: 19px; font-size: 19px; padding-left: 5px; } .btn-gray{ background: rgba(59,85,115,.08); border-radius: 4px; color: #3b5573; padding: 0 30px; height: 40px; display: flex; justify-content: center; align-items: center; } /* * * Для опросника */ .inquirer-item { background-color:#5a748b; position: relative; height: 100%; padding-bottom: 30px; display: flex; justify-content: start; flex-wrap: nowrap; flex-direction: column; .rubric::after, .rubric::before { content: ""; width: 100%; height: 1px; align-self: center; background: #fff; } .rubric a{ margin: 0 15px; color:#fff; } .meta{ width:100%; } .rubric { position: relative; display: flex; top: 15px; width: 100%; padding: 0 13px; letter-spacing: .08em; white-space: nowrap; text-transform: uppercase; color: #fff; font: 700 12px/17px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; z-index: 2; } .title a { color: #fff; text-decoration: none; } .title { position: relative; top: 20px; width: 100%; text-align: center; padding: 20px; z-index: 2; font: 24px/29px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; } .answer { display: flex; position: relative; width: 100%; top: 5px; flex-direction: column; } .answer input{ margin: 4px 5px 0 0; position: relative; float: left; } .answer label{ color:#fff; font: 16px/18px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; display:flex; } .answer p{ color:#fff; font: 16px/18px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; } } .form-check-main{ margin-bottom: 15px; .form-check-input-col{ margin:0; position: relative; float:left; margin-top:5px !important; } .form-check-label-col{ display:flex; margin-bottom:15px; padding-left: 5px; padding-top:5px; } } .bg-amic{ background:#ff8813; } .percent{ color:#fff; margin-top: -5px; } .nowrap{ white-space: nowrap; } .textcols{ column-gap: 4%; display:block !important; } @media (max-width: @size-mobile) { .textcols{ column-count: 1; } } @media not (max-width: @size-mobile) { .textcols{ column-count: 2; } }