@media (min-width: 1200px){

.social-bar{
    flex-shrink:0;
    width:90px
}

[dir] .social-bar{
    background-color:#f7f9fa
}
  }

.social-bar__inner{
  position:relative;
}

[dir] .social-bar__inner{
  padding:9px 18px;
}

@media (min-width: 1200px){

.social-bar__inner{
    position:relative;
    width:90px
}

[dir] .social-bar__inner{
    padding:90px 0
}

    .social-bar__inner.js-fixed{
      position:fixed;
      top:108px;
      height:calc(100vh - 108px);
    }

    [dir=ltr] .social-bar__inner.js-fixed{
left:0;
    }

    [dir=rtl] .social-bar__inner.js-fixed{
      right:0;
    }
  }

[dir] .rotate > *{
    margin-bottom:36px;
  }

@media (min-width: 1200px){

.rotate > *{
      display:flex;
      align-items:center
  }

[dir] .rotate > *{
      margin-bottom:0
  }

      [dir=ltr] .rotate > *:not(:first-child){
margin-right:36px;
      }

      [dir=rtl] .rotate > *:not(:first-child){
        margin-left:36px;
      }
    }

@media (min-width: 1200px){

[dir=ltr] .rotate .contextual{
right:auto;
left:100%;
transform:rotate(90deg);
transform-origin:top left
  }

[dir=rtl] .rotate .contextual{
      left:auto;
      right:100%;
      transform:rotate(-90deg);
      transform-origin:top right
  }

      [dir=ltr] .rotate .contextual .trigger{
float:left;
      }

      [dir=rtl] .rotate .contextual .trigger{
        float:right;
      }
    }

@media (min-width: 1200px){

.rotate{
    position:absolute;
    display:flex;
    flex-direction:row-reverse;
    width:100vh
}

[dir=ltr] .rotate{
left:50%;
transform:rotate(-90deg) translateX(-100%);
transform-origin:left
}

[dir=rtl] .rotate{
    right:50%;
    transform:rotate(90deg) translateX(100%);
    transform-origin:right
}

    @supports ((width: -webkit-max-content) or (width: max-content)){

.rotate{
      width:-webkit-max-content;
      width:max-content
}
    }
  }