
@media all {
  .user-block {
    margin-bottom: 1rem;
    margin-bottom: 35px; } }
  @media all and (min-width: 768px) {
    .user-block {
      margin-bottom: 1.5rem; } }

@media all {
    .user-block--overlap {
      margin-top: -85px;
      position: relative;
      z-index: 1; }
    .user-block:not(.user-block--full-width) .user-block__button {
      position: relative;
      margin-top: 17px;
      text-align: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      border-top: 5px solid transparent;
      height: 100%;
      padding-bottom: 0.75em; }
      .user-block:not(.user-block--full-width) .user-block__button--light-blue {
        border-color: #1b82c4; }
        .user-block:not(.user-block--full-width) .user-block__button--light-blue .user-block__icon {
          background-color: #1b82c4; }
      .user-block:not(.user-block--full-width) .user-block__button--dark-blue {
        border-color: #0c173c; }
        .user-block:not(.user-block--full-width) .user-block__button--dark-blue .user-block__icon {
          background-color: #0c173c; }
      .user-block:not(.user-block--full-width) .user-block__button--expanding {
        padding-bottom: 3.4em; }
      .user-block:not(.user-block--full-width) .user-block__button > .container {
        padding-top: 2.2em; }
      .user-block:not(.user-block--full-width) .user-block__button:hover, .user-block:not(.user-block--full-width) .user-block__button:focus {
        border: 0 none; }
        .user-block:not(.user-block--full-width) .user-block__button:hover .user-block__background:after, .user-block:not(.user-block--full-width) .user-block__button:focus .user-block__background:after {
          opacity: .9; }
      .user-block:not(.user-block--full-width) .user-block__button .user-block__icon {
        text-align: left;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0; }
      .user-block:not(.user-block--full-width) .user-block__button[aria-expanded="true"] .user-block__icon {
        height: 23px;
        bottom: 12px; }
    .user-block:not(.user-block--full-width) .user-block__background:after {
      opacity: 0.8; }
    .user-block:not(.user-block--full-width) .user-block__expanding-content {
       }
      .user-block:not(.user-block--full-width) .user-block__expanding-content:before {
        content: "";
        height: 0;
        position: absolute;
        top: 0;
        left: 15px;
        right: 15px;
        -webkit-transition: height .3s;
        transition: height .3s; }
      .user-block:not(.user-block--full-width) .user-block__expanding-content > .container {
        border-width: 0 1px 1px 1px;
        border-style: solid;
        padding: 2em 1.5em 1em; }
      .user-block:not(.user-block--full-width) .user-block__expanding-content.show:before {
        height: 5px; }
      .user-block:not(.user-block--full-width) .user-block__expanding-content--light-blue > .container {
        border-color: #1b82c4; }
      .user-block:not(.user-block--full-width) .user-block__expanding-content--light-blue:before {
        background-color: #1b82c4; }
      .user-block:not(.user-block--full-width) .user-block__expanding-content--dark-blue > .container {
        border-color: #0c173c; }
      .user-block:not(.user-block--full-width) .user-block__expanding-content--dark-blue:before {
        background-color: #0c173c; }
    .user-block--full-width {
      position: relative; }
      .container .row .user-block--full-width > .row {
        margin-left: 0;
        margin-right: 0; }
      .user-block--full-width .user-block__col {
        position: static; }
      .user-block--full-width .user-block__background {
        top: -5px;
        right: -5px;
        bottom: -5px;
        left: -5px;
        -webkit-filter: blur(5px);
                filter: blur(5px); }
        .user-block--full-width .user-block__background:before {
          content: "";
          background-color: transparent;
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          opacity: 0.2;
          -webkit-transition: background-color .5s;
          transition: background-color .5s; }
        .user-block--full-width .user-block__background:after {
          opacity: 0.65; }
      .user-block--full-width .user-block__title {
        position: relative;
        color: #0c173c;
        text-shadow: 0.5px 0.866px 2px rgba(255, 255, 255, 0.5); }
      .user-block--full-width .user-block__sub-title {
        position: relative; }
      .user-block--full-width .user-block__line {
        max-width: 80%;
        margin: 0 auto 1.2em;
        color: #0c173c; } }
      @media all and (min-width: 768px) {
        .user-block--full-width .user-block__line {
          max-width: 630px; } }

@media all {
        .user-block--full-width .user-block__line:not(.user-block__line--has-sub-title):before {
          height: 1px;
          background-color: rgba(12, 23, 60, 0.3); }
        .user-block--full-width .user-block__line--has-sub-title:before, .user-block--full-width .user-block__line--has-sub-title:after {
          background-color: rgba(12, 23, 60, 0.3); }
      .user-block--full-width .user-block__expanding-content {
        border-bottom: 1px solid #d1d1d1;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(125, 185, 232, 0)), color-stop(20%, rgba(151, 199, 237, 0)), to(white));
        background: linear-gradient(to bottom, rgba(125, 185, 232, 0) 0%, rgba(151, 199, 237, 0) 20%, white 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#ffffff',GradientType=0 );
        position: relative; }
        .user-block--full-width .user-block__expanding-content > .container {
          padding-bottom: 2em; }
      .user-block--full-width .user-block__button {
        padding: 2.5em 0; }
        .user-block--full-width .user-block__button[aria-expanded="true"] .user-block__line {
          margin-bottom: 0; }
        .user-block--full-width .user-block__button[aria-expanded="true"] .user-block__background__wrapper {
          margin-bottom: 0; }
        .user-block--full-width .user-block__button:hover .user-block__background:before, .user-block--full-width .user-block__button:focus .user-block__background:before {
          background-color: #76aed2; }
    .user-block__button--light-blue .user-block__background:after {
      background-color: #1b82c4; }
    .user-block__button--light-blue .user-block__background:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(27, 130, 196, 0)), color-stop(47%, rgba(27, 130, 196, 0)), color-stop(79%, rgba(27, 130, 196, 0.4)), color-stop(94%, rgba(27, 130, 196, 0.69)), to(#1b82c4));
      background: linear-gradient(to bottom, rgba(27, 130, 196, 0) 0%, rgba(27, 130, 196, 0) 47%, rgba(27, 130, 196, 0.4) 79%, rgba(27, 130, 196, 0.69) 94%, #1b82c4 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001b82c4', endColorstr='#1b82c4',GradientType=0 ); }
    .user-block__button--dark-blue .user-block__background:after {
      background-color: #0c173c; }
    .user-block__button--dark-blue .user-block__background:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(12, 23, 60, 0)), color-stop(47%, rgba(12, 23, 60, 0)), color-stop(79%, rgba(12, 23, 60, 0.4)), color-stop(94%, rgba(12, 23, 60, 0.69)), to(#0c173c));
      background: linear-gradient(to bottom, rgba(12, 23, 60, 0) 0%, rgba(12, 23, 60, 0) 47%, rgba(12, 23, 60, 0.4) 79%, rgba(12, 23, 60, 0.69) 94%, #0c173c 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000c173c', endColorstr='#0c173c',GradientType=0 ); }
    .user-block__button--expanding .user-block__background__wrapper {
      margin-bottom: 35px; }
    .user-block__background__wrapper {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden; }
    .user-block__background {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-position: top center; }
      .user-block__background:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: #ffffff;
        -webkit-transition: opacity .5s;
        transition: opacity .5s; }
    .user-block__icon__wrapper {
      position: absolute;
      display: block;
      bottom: 35px;
      left: 0;
      right: 0;
      z-index: 2;
      width: 38px;
      margin: 0 auto; }
      .user-block__icon__wrapper:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        left: -5px;
        top: -24px;
        background-color: transparent;
        border-radius: 30px;
        -webkit-transition: background-color 1s;
        transition: background-color 1s; }
      .user-block__button[aria-expanded="true"] .user-block__icon__wrapper {
        bottom: -3px; }
    .user-block__icon .icon {
      position: absolute;
      bottom: 19px; }
      .user-block__icon .icon:before {
        font-size: 38px;
        color: #ffffff;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        z-index: 1;
        -webkit-transition: color .5s;
        transition: color .5s; }
      .user-block__icon .icon.icon-circle-solid:before {
        font-size: 35px;
        margin-left: 1px;
        margin-top: 1px;
        color: #f99e28; }
        .user-block__button[aria-expanded="true"] .user-block__icon .icon.icon-circle-solid:before,
        .user-block__button[aria-expanded="true"]:focus .user-block__icon .icon.icon-circle-solid:before {
          color: #9D6D2F; }
    .user-block__button {
      text-decoration: none;
      padding: 1.6em 2em .8em;
      border: 0 none !important; }
      .user-block__button--has-status .user-block__title {
        font-size: 1.44444rem;
        padding-top: 0.89em; }
      .user-block__button:hover, .user-block__button:focus {
        text-decoration: none; }
        .user-block__button:hover[aria-expanded="false"] .user-block__icon__wrapper, .user-block__button:focus[aria-expanded="false"] .user-block__icon__wrapper {
          bottom: 44px;
          width: 52px; }
          .user-block__button:hover[aria-expanded="false"] .user-block__icon__wrapper:before, .user-block__button:focus[aria-expanded="false"] .user-block__icon__wrapper:before {
            background-color: rgba(255, 255, 255, 0.3);
            width: 60px;
            height: 60px; }
        .user-block__button:hover[aria-expanded="false"] .user-block__icon .icon:before, .user-block__button:focus[aria-expanded="false"] .user-block__icon .icon:before {
          font-size: 51px; }
        .user-block__button:hover[aria-expanded="false"] .user-block__icon .icon.icon-circle-solid:before, .user-block__button:focus[aria-expanded="false"] .user-block__icon .icon.icon-circle-solid:before {
          font-size: 49px; }
        .user-block__button:hover[aria-expanded="true"]:hover .user-block__icon .icon.icon-circle-solid:before, .user-block__button:focus[aria-expanded="true"]:hover .user-block__icon .icon.icon-circle-solid:before {
          color: #f99e28; }
    .user-block__title {
      width: 100%;
      font-size: 1.55556rem;
      line-height: 1.2;
      color: #ffffff;
      font-family: "Libre Baskerville", serif;
      font-weight: 400;
      z-index: 1;
      text-align: center; } }
    @media all and (min-width: 992px) {
      .user-block__title {
        font-size: 2.11111rem; } }

@media all {
      .user-block__title small {
        font-size: 1rem;
        font-style: italic; } }
      @media all and (min-width: 992px) {
        .user-block__title small {
          font-size: 1.55556rem; } }

@media all {
    .user-block__sub-title {
      text-transform: uppercase; }
    .user-block__line {
      display: block;
      margin: 0 auto;
      width: 100%;
      position: relative;
      overflow: hidden;
      color: #ffffff;
      -webkit-transition: margin .5s;
      transition: margin .5s; }
      .user-block__line:not(.user-block__line--has-sub-title) {
        min-height: 32px;
        display: block;
        position: relative; }
        .user-block__line:not(.user-block__line--has-sub-title):before {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 50%;
          background-color: rgba(255, 255, 255, 0.3);
          height: 1.5px; }
      .user-block__line .user-block__sub-title {
        position: relative;
        padding: 0 6px 2px;
        display: inline-block; }
        .user-block__line .user-block__sub-title:before, .user-block__line .user-block__sub-title:after {
          content: "";
          background-color: rgba(255, 255, 255, 0.3);
          height: 1px;
          width: 9999px;
          position: absolute;
          bottom: 50%;
          -webkit-transform: translateY(-50%);
                  transform: translateY(-50%); }
        .user-block__line .user-block__sub-title:before {
          left: -9999px; }
        .user-block__line .user-block__sub-title:after {
          right: -9999px; }
    .user-block .task-status {
      color: #ffffff;
      padding-top: 7px;
      padding-bottom: 9px;
      display: block;
      position: absolute;
      -webkit-transition: background .5s;
      transition: background .5s;
      top: 0;
      left: 0;
      right: 0; }
      .user-block .task-status + .user-block__title {
        padding-top: 0.9em; }
    .user-block__button--light-blue .task-status {
      background-color: rgba(45, 57, 66, 0.5); }
    .user-block__button--dark-blue .task-status {
      background-color: rgba(22, 33, 67, 0.8); }
    .user-block__button:hover.user-block__button--light-blue .task-status, .user-block__button:focus.user-block__button--light-blue .task-status {
      background-color: rgba(45, 57, 66, 0.8); } }

