FRONTEND_MVC/assets/less/components/main_page.less

.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;
      }
    }
    .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;
          }
        }
      }
    }
  }
}
.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: 10px;
      font-size: 24px;
	  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;
        }
      }
    }
    &>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;
 }