div
    &::-webkit-scrollbar-track
      -webkit-box-shadow inset 0 0 6px rgba(0,0,0,0.3)
      background-color #F5F5F5
    &::-webkit-scrollbar
      width 6px
      background-color #F5F5F5
    &::-webkit-scrollbar-thumb
      background-color #f03d37
      border-radius 6px

<div class="container">
  <div class="container__bloc"></div>
</div>

.container
  position relative
  &__bloc
    position absolute
    right 0
    left 0
    margin-left auto
    margin-right auto
    top 50%
    transform translateY (-50%)

.soc-row
	a(href="#").soc-row__el
		+icon("soc-instagram","icon")
	a(href="#").soc-row__el
		+icon("soc-vk","icon")

.soc-row
	f()
.soc-row__el
	round()
	flex(mid)
	tr(all)
	margin-right: 10px
	size 25px
	background: #c2c2c2
	&:hover
		background: darken(#c2c2c2,10)

.pag
	.pag__el.pag__el--active 1
	.pag__el 2
	.pag__el 3

.pag
	flex(mid)
	fw()
	margin: 40px 0
.pag__el
	flex(mid)
	cp()
	tr()
	margin: 10px
	padding: 10px 15px
	border 1px solid $border-color
	display: inline-block
	&:hover
		border-color $mark
		color $mark
.pag__el--active
	border-color $mark
	color $mark

<span>Underline</span>

& span 
  position relative
  &:before
    content ''
    position absolute
    left 50%
    bottom 0
    width 100%
    height 2px
    background-color #fc2f70
    transform-origin center
    transform translate(-50%, 0) scaleX(0)
    transition transform 0.3s ease-in-out
  &:hover
    &:before
      transform: translate(-50%, 0) scaleX(1)

//TRANSFORM SKEW BLOC
 
.parent
  transform skewY(-1.5deg)
  &__child
    transform skewY(1.5deg)

//Doc doc http://t1m0n.name/air-datepicker/docs/index-ru.html

//bower i air-datepicker --save-dev
//link(rel="stylesheet", href="bower/air-datepicker/dist/css/datepicker.css")
//script(src='bower/air-datepicker/dist/js/datepicker.js')

input(type="text" placeholder="Дата" ).input.getdate

//datepicker

var dp = $('.getdate').datepicker({
  minDate: new Date(),
  autoClose: true
}).data('datepicker');

//При использовании в модальном окне чтобы при скроле оставалось в той же позиции
$('.modal-wrap').on('scroll', function () {
	dp.update();
});
//datepicker===end

.datepicker
	z-index 9999

tabWidth: 2
useTabs: false
htmlWhitespaceSensitivity: strict
semi: false
singleQuote: true
trailingComma: none
bracketSpacing: true
arrowParens: always
endOfLine: auto

naked_link()
  color: inherit
  text-decoration: none
  
  &:hover
    text-decoration: underline
    

.heading
  naked_link

  family-sans = "Ubuntu", "Roboto", "Open Sans", "Microsoft YaHei", sans-serif
  family-mono = "Source Code Pro", monospace, "Microsoft YaHei"
  gap = 64px
  screen-tablet = 769px
  screen-desktop = 1088px
  screen-widescreen = 1280px
  screen-fullhd = 1472px
  maincolor = #ffdd57
  bgcolor = #151515
  maincontentcolor = #1d1d1d
  /* ---------------------------------
   *       Override CSS Framework
   * --------------------------------- */
  html
      font-size: 14px
      background-color: bgcolor;

  body
      background-color: bgcolor

  body, button, input, select, textarea
      font-family: family-sans

  @media screen and (min-width: screen-widescreen)
      .is-1-column .container
      .is-2-column .container
          max-width: screen-desktop - 2 * gap
          width: screen-desktop - 2 * gap
  @media screen and (min-width: screen-fullhd)
      .is-2-column .container
          max-width: screen-widescreen - 2 * gap
          width: screen-widescreen - 2 * gap
      .is-1-column .container
          max-width: screen-desktop - 2 * gap
          width: screen-desktop - 2 * gap

  @media screen and (max-width: screen-tablet - 1)
      .section
          padding: 1.5rem 1rem

  @media screen and (min-width: screen-tablet)
      .column-main,
      .column-left,
      .column-right,
      .column-right-shadow
          &.is-sticky
              align-self: flex-start
              position: -webkit-sticky
              position: sticky
              top: .75rem
      .column-right-shadow
          &.is-sticky
              top: 1.5rem

  .card
      overflow: hidden
      border-radius: 4px
      box-shadow: 0 4px 10px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.1)
      & + .card,
      & + .column-right-shadow
          margin-top: 1.5rem
      &.card-transparent
          overflow: visible
          box-shadow: none
          background: transparent

  img.thumbnail
      object-fit: cover
      width: 100%
      height: 100%

  .navbar-logo,
  .footer-logo
      img
          max-height: 1.75rem

  .navbar-main
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05)
      .navbar-menu,
      .navbar-start,
      .navbar-end
          align-items: stretch
          display: flex
          padding: 0
      .navbar-menu
          flex-grow: 1
          flex-shrink: 0
          overflow-x: auto
      .navbar-start
          justify-content: flex-start
          margin-right: auto
      .navbar-end
          justify-content: flex-end
          margin-left: auto
      .navbar-item
          display: flex
          align-items: center
          padding: 1.25rem 0.75rem
          &.is-active
              color: hsl(217, 71%, 53%)
              background-color: transparent
      @media screen and (max-width: screen-desktop - 1)
          .navbar-menu
              justify-content: center
              box-shadow: none
          .navbar-start
              margin-right: 0
          .navbar-end
              margin-left: 0

  .footer
      background: white
      .field
          .button
              background: transparent

  .widget
      .media
          border: none
      .media + .media
          margin-top: 0
      .menu-list li ul
          margin-right: 0
      .menu-list a.level
          display: flex

  .pagination
      .pagination-link:not(.is-current), .pagination-previous, .pagination-next
          background: white
          border: none
      .pagination-link, .pagination-previous, .pagination-next
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05)

  .post-navigation
      justify-content: space-around
      .level-item
          margin-bottom: 0

  .timeline
      margin-left: 1rem
      padding-left: 1.5rem
      padding-top: 1rem
      border-left: 1px solid hsl(0, 0%, 86%)
      .media
          position: relative
          &:before,
          &:last-child:after
              content: ''
              display: block
              position: absolute
              left: calc(-5px - 1.5rem)
          &:before
              width: 9px
              height: 9px
              top: 1.3rem
              background: hsl(0, 0%, 86%)
              border-radius: 50%
          &:first-child:before
              top: 0.3rem
          &:last-child:after
              top: calc(1.3rem + 9px)
              width: 9px
              bottom: 0
              background: white
          &:first-child:last-child:after
              top: calc(0.3rem + 9px)

  .article
      .article-meta
          margin-bottom: 0.5rem !important
      .content
          font-size: 1.1rem
          blockquote.pullquote
              float: right
              max-width: 50%
              font-size: 1.15rem
              position: relative

  .rtl
       direction: rtl
       .level
          &, &.is-mobile
              .level-item:not(:last-child)
                  margin-left: 0.75rem
                  margin-right: 0

  @media screen and (max-width: screen-tablet - 1)
      #toc
          display: none
          position: fixed
          margin: 1rem
          left: 0
          right: 0
          bottom: 0
          z-index: 100
          max-height: calc(100vh - 2rem)
          overflow-y: auto
      #toc-mask
          display: none
          position: fixed
          top: 0
          left: 0
          right: 0
          bottom: 0
          z-index: 99
          background: rgba(0, 0, 0, 0.7)
      #toc,
      #toc-mask
          &.is-active
              display: block


  /* ---------------------------------
   *         Custom modifiers
   * --------------------------------- */
  .is-size-7
      font-size: 0.85rem !important

  .is-7by1
      padding-top: 42.8%
      img
          bottom: 0
          left: 0
          position: absolute
          right: 0
          top: 0

  .is-overflow-x-auto
      overflow-x: auto !important

  .is-flex-grow
      flex-grow: 1 !important

  .is-flex-wrap
      flex-wrap: wrap !important

  .is-flex-start
      justify-content: start !important

  .is-flex-center
      justify-content: center !important

  .is-flex-middle
      align-items: center !important

  .has-order-1
      order: 1

  .has-order-2
      order: 2

  .has-order-3
      order: 3

  .has-mr-6
      margin-right: 0.5em !important

  .has-mb-6
      margin-bottom: 0.5em !important

  .has-mr-7
      margin-right: 0.25em !important

  .has-link-grey,
  .has-link-black-ter
      transition: 0.2s ease
      &:hover
          color: hsl(217, 71%, 53%) !important

  .has-link-grey
      color: hsl(0, 0%, 48%) !important

  .has-link-black-ter
      color: hsl(0, 0%, 14%) !important

  @media screen and (max-width: screen-tablet - 1)
      .has-text-centered-mobile
          text-align: center !important
      .is-flex-center-mobile
          justify-content: center !important
      .has-mt-5-mobile
          margin-top: 1em !important

  /* ---------------------------------
   *         Font icon fixes
   * --------------------------------- */
  .fa, .fab, .fal, .far, .fas
      line-height: inherit

  /* ---------------------------------
   *        Fix content elements
   * --------------------------------- */
  .content
      h1, h2, h3, h4, h5, h6
          font-weight: 400
      h1
          font-size: 1.75em
      h2
          font-size: 1.5em
      h3
          font-size: 1.25em
      h4
          font-size: 1.125em
      h5
          font-size: 1em
      code, pre
          font-size: 0.85em
          font-family: family-mono
      code
          color: hsl(348, 100%, 61%)
          background: transparent
          padding: 0
      blockquote
          footer
              strong + cite
                  margin-left: 0.5em

  /* ---------------------------------
   *        Fix code highlight
   * --------------------------------- */
  figure.highlight
      padding: 0
      width: 100%
      margin: 1em 0 1em !important

      pre,
      table tr:hover
          color: inherit
          background: transparent

      table
          width: auto

      pre
          padding: 0
          overflow: visible

          .line
              line-height: 1.5rem

      figcaption,
      .gutter
          background: rgba(200, 200, 200, 0.15)

      figcaption
          padding: .3em .75em
          text-align: left
          font-style: normal
          font-size: .8em

          span
              font-weight: 500
              font-family: family-mono

          a
              float: right
              color: #9a9a9a

      .gutter
          text-align: right

      .tag,
      .title,
      .number,
      .section
          display: inherit
          font: inherit
          margin: inherit
          padding: inherit
          background: inherit
          height: inherit
          text-align: inherit
          vertical-align: inherit
          min-width: inherit
          border-radius: inherit

  /* ---------------------------------
   *        Fix Gist Snippet
   * --------------------------------- */
  .gist
      table
          tr:hover
              background: transparent
          td
              border: none
      .file
          all: initial


  body
    background: bgcolor

  .navbar, .card, .footer
    background: maincontentcolor

  .card
    color:#e6e6e6

  a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:hover, .navbar-link.is-active
    background-color: #1f1f1f

  .socialbutton
    background-color: transparent !important
    border-color: transparent
    i
      color: #ffffff

  .tag:not(body)
    align-items: center;
    background-color: #171717;
    border-radius: 4px;
    color: #a1a1a1;

  .menu-list
    a:hover
      background-color: #2a2a2a;
      color: #ffffff;

  .content h1, .content h2, .content h3, .content h4, .content h5, .content h6
    color: #fff

  .has-link-black-ter
    color: #fff !important

  .navbar-item, .navbar-link, .menu-list a
    color: #fff

  .title
      color: #e7e7e7;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.125;

  a, .navbar-main .navbar-item.is-active, a.navbar-item:hover
    color:maincolor;

  .button.is-link, .button.is-link:hover, .button.is-link.is-hovered
    background-color:maincolor;

  .ins-section-container, .searchbox .searchbox-input-wrapper .searchbox-input
    background: maincontentcolor !important;
    border-bottom: 1px solid #363636 !important;
    color:#ffffff;

  .ins-section .ins-section-header
    border-bottom: 1px solid #373737 !important;

  .has-link-grey:hover, .has-link-black-ter:hover
    color: maincolor !important;

  .gallery-item .has-text-centered
    text-align: left !important;
  strong
    color: maincolor;

  .content blockquote
    background-color: #282c34;
    border-left: 5px solid #40434a;
  a:hover
    color: #f7f0d6;
  .pace .pace-progress
    background: maincolor;
  .has-text-grey
    color: #7b7b7b !important;
  .timeline .media:last-child:after
    background: maincontentcolor;
  .navbar-logo
    font-size: 1.2rem;
    font-weight: bold;

  .highlight
    position: relative;
    .copy
      position: absolute;
      top: 0;
      right: 0;
      background: none;
      border: none;
      i
        color:#40434a;
  .button.is-light
    background-color: maincontentcolor;
    border-color: transparent;
    color: #ffdd57;
    &:hover
      background-color: bgcolor;
      border-color: transparent;
      color: #ffdd57;

@media screen and (max-width: 1087px)
  .navbar-menu
      background-color: maincontentcolor;