@charset "UTF-8";
/* *********************************************************************************************************************
	One% CSS Grid - 12 Columns Fluid CSS Grid System

	Why One% ? Let’s count ...
		we have 12 columns (magic number divided by 2, 3, 4, 6)

		for 12 columns we need 11 margins

		so if we count margin 3%, then 3% * 11 margins = 33%

		and if we count width of 1 column 5.5%, than 5.5% * 12 columns = 66%

		in the end we have 33% + 66% = 99% aaand ???

		1% is still here so that's the name - One%

	2 starting options ? Let’s count a bit more ...
		1200px - perfectly fits 1280 screens
			12 columns
			margin 3% / 36px (full-width)
			col1 5.5% / 66px (full-width)

		1000px - perfectly fits 1024 screens
			12 columns
			margin 3% / 30px (full-width)
			col1 5.5% / 55px (full-width)
*/
/* *********************************************************************************************************************
 * Main container for all
 */
.onepcssgrid-1000, .onepcssgrid-1200 {
  margin: 0 auto;
  padding: 0 0 0 1%;
  /* THAT'S THE NAME ;) */ }

.onepcssgrid-1200 {
  max-width: 1220px; }

.onepcssgrid-1000 {
  max-width: 1020px; }

.onerow {
  clear: both;
  padding: 0 10px; }

/* *********************************************************************************************************************
 * Common columns definitions
 */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
  float: left;
  margin: 0 3% 0 0; }

.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
  margin: 0; }

.col1 {
  width: 5.5%; }

.col2 {
  width: 14%; }

.col3 {
  width: 22.5%; }

.col4 {
  width: 31%; }

.col5 {
  width: 39.5%; }

.col6 {
  width: 48%; }

.col7 {
  width: 56.5%; }

.col8 {
  width: 65%; }

.col9 {
  width: 73.5%; }

.col10 {
  width: 82%; }

.col11 {
  width: 90.5%; }

.col12 {
  width: 99%;
  margin: 0; }

.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {
  width: 100%;
  height: auto;
  display: block; }

/* *********************************************************************************************************************
 * Disable padding left/right 10px if I'm 1024 or gibber - correct percentage math
 */
@media all and (min-width: 1024px) {
  .onepcssgrid-1000 {
    max-width: 1000px; }
  .onepcssgrid-1000 .onerow {
    padding: 0; } }

/* *********************************************************************************************************************
 * Small devices
 */
@media all and (max-width: 768px) {
  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 {
    float: none;
    width: 99%; } }

#referrals-list {
  margin: 56px auto 84px; }
  #referrals-list .referral {
    background-color: white;
    margin-bottom: 28px;
    padding: 28px 35px;
    border-radius: 5px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); }
    #referrals-list .referral .wrapper {
      background-color: #F8F9FB;
      padding: 42px 56px;
      border-radius: 5px;
      line-height: 20px;
      margin-bottom: 36px;
      position: relative; }
      #referrals-list .referral .wrapper .sidebar {
        position: absolute;
        display: block; }
      #referrals-list .referral .wrapper .avatar img {
        max-width: 84px;
        border-radius: 50%; }
      #referrals-list .referral .wrapper .avatar ~ div {
        margin-left: 119px; }
      #referrals-list .referral .wrapper .location {
        float: right;
        display: inline;
        font-weight: lighter;
        color: #979FA8;
        line-height: 29px;
        font-size: 21px; }
        #referrals-list .referral .wrapper .location img {
          vertical-align: bottom; }
      #referrals-list .referral .wrapper .info-wrapper {
        margin-bottom: 7px; }
      #referrals-list .referral .wrapper .name {
        display: inline-block;
        color: #222222;
        line-height: 29px;
        font-size: 21px;
        margin-right: 7px;
        vertical-align: middle; }
      #referrals-list .referral .wrapper .type {
        display: inline-block;
        background-color: #7ACC66;
        border-radius: 3px;
        vertical-align: middle;
        padding: 1px 8px;
        color: white;
        position: relative; }
      #referrals-list .referral .wrapper .type:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        top: 4px;
        right: 85px;
        border: 6px solid;
        border-color: transparent #7ACC66 transparent transparent; }
      #referrals-list .referral .wrapper .solo {
        background-color: #4289DB; }
      #referrals-list .referral .wrapper .solo:before {
        border-color: transparent #4289DB transparent transparent; }
      #referrals-list .referral .wrapper .experience {
        display: inline-block;
        color: #8796A8; }
      #referrals-list .referral .wrapper .free_time {
        display: inline-block;
        color: #8796A8; }
      #referrals-list .referral .wrapper .delimiter {
        box-sizing: border-box;
        border-top: 1px solid #DDE3EB;
        height: 1px;
        margin: 21px auto 23px; }
      #referrals-list .referral .wrapper .roles {
        display: inline-block;
        border-radius: 3px;
        width: 84px;
        padding: 2px 0;
        margin-right: 14px;
        background-color: #414952;
        color: white;
        text-align: center; }
      #referrals-list .referral .wrapper .role-wrapper {
        margin-left: 98px; }
      #referrals-list .referral .wrapper .role {
        display: inline-block;
        padding: 2px 7px;
        border: 1px solid #CAD3DE;
        background-color: white;
        color: #8796A8;
        margin-right: 7px;
        margin-bottom: 14px; }
      #referrals-list .referral .wrapper .role:last-child {
        margin-right: 0; }
      #referrals-list .referral .wrapper ~ div {
        margin-left: 56px;
        margin-right: 56px; }
    #referrals-list .referral .remarks {
      color: #222222;
      font-weight: bold;
      margin-bottom: 7px;
      position: relative; }
      #referrals-list .referral .remarks .title {
        display: inline;
        margin-right: 14px; }
      #referrals-list .referral .remarks .points {
        display: inline; }
        #referrals-list .referral .remarks .points img {
          margin-right: 7px; }
      #referrals-list .referral .remarks .remark-detail {
        display: inline-block;
        color: white;
        background-color: #979FA8;
        font-size: 10px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        text-align: center;
        vertical-align: super;
        padding-bottom: 2px;
        margin-left: 7px;
        cursor: pointer; }
      #referrals-list .referral .remarks .remark-wrapper {
        padding: 14px 20px;
        color: white;
        background-color: #2D3238;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        position: absolute;
        left: 142px;
        top: 32px;
        font-weight: normal; }
        #referrals-list .referral .remarks .remark-wrapper .hide {
          display: none; }
        #referrals-list .referral .remarks .remark-wrapper .remark:before {
          content: ' ';
          position: absolute;
          width: 0;
          height: 0;
          bottom: 109px;
          right: 110px;
          border: 6px solid;
          border-color: transparent transparent #2D3238 transparent; }
    #referrals-list .referral .projects {
      color: #8796A8;
      font-weight: lighter;
      margin-bottom: 21px; }
    #referrals-list .referral .description {
      color: #666666;
      margin-bottom: 14px; }
    #referrals-list .referral .fold {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical; }
    #referrals-list .referral .dropdown {
      margin-top: 14px;
      text-align: center; }
      #referrals-list .referral .dropdown i {
        color: #8796A8;
        cursor: pointer; }
    #referrals-list .referral .rotate {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg); }
  @media only screen and (max-width: 640px) {
    #referrals-list .referral {
      padding: .5rem; }
      #referrals-list .referral .wrapper {
        margin-bottom: 1.5rem;
        padding: 1rem; }
        #referrals-list .referral .wrapper .avatar img {
          width: 6rem; }
        #referrals-list .referral .wrapper .sidebar {
          position: inherit;
          text-align: center; }
        #referrals-list .referral .wrapper .detail-wrapper {
          margin-left: 0 !important; }
        #referrals-list .referral .wrapper ~ div {
          margin: 0 .5rem; }
      #referrals-list .referral .detail-wrapper {
        text-align: center;
        margin-left: 0; }
        #referrals-list .referral .detail-wrapper .location {
          display: block;
          float: none;
          font-size: 1rem; }
          #referrals-list .referral .detail-wrapper .location img {
            width: 1rem;
            vertical-align: middle; }
        #referrals-list .referral .detail-wrapper .info-wrapper .name {
          display: block;
          margin-right: 0;
          font-size: 1.7rem; }
        #referrals-list .referral .detail-wrapper .info-wrapper .type {
          font-size: 1rem;
          margin-top: .5rem;
          padding: .5rem 1rem;
          background: #7ACC66; }
          #referrals-list .referral .detail-wrapper .info-wrapper .type:before {
            display: none; }
        #referrals-list .referral .detail-wrapper .experience, #referrals-list .referral .detail-wrapper .free_time {
          font-size: 1rem; }
        #referrals-list .referral .detail-wrapper .delimiter {
          margin: 1.5rem 0; }
        #referrals-list .referral .detail-wrapper .roles-wrapper {
          text-align: left; }
          #referrals-list .referral .detail-wrapper .roles-wrapper .sidebar {
            border-radius: .2rem; }
          #referrals-list .referral .detail-wrapper .roles-wrapper .role-wrapper {
            margin: 1rem 0 0 0; }
            #referrals-list .referral .detail-wrapper .roles-wrapper .role-wrapper .role {
              border-radius: .2rem; }
      #referrals-list .referral .remarks .title {
        vertical-align: text-bottom;
        line-height: 2;
        margin-right: 0; }
      #referrals-list .referral .remarks .points img {
        margin-right: .2rem; }
      #referrals-list .referral .remarks .remark-wrapper {
        left: 2rem; }
        #referrals-list .referral .remarks .remark-wrapper .remark:before {
          right: 6rem; } }