/**
 ******************************************************
 ******************************************************
 * {LESS} :: ABOUT US (Team) :: (upplication, 2016)
 ******************************************************
  *****************************************************
 */

@import "../base/_common.less";
@import "../base/_showcases.less";


// Bckgrnd cover img mixin
.bg-pic {
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center center;
}

/* ... Head TITLE ... */
.team-header {
  margin-top: 8em;

}

/* ... ALL TEAM PICS :: Content blocks Images ... */
#team {
  // Chairmen IMG
  .bosses-area {
    .upp-boss-img {
      width: 300px;
      height: 300px;
      .bg-pic;

      &.team-victor {
        background-image: url("@@config.base_path/images/about/victor_cmo.jpg");

        &:hover {
          background-image: url("@@config.base_path/images/about/victor_cmo_2.jpg");
        }
      }

      &.team-jose {
        background-image: url("@@config.base_path/images/about/jose_ceo.jpg");

        &:hover {
          background-image: url("@@config.base_path/images/about/jose_ceo_2.jpg");
        }
      }
    }
  }

  // Employees IMG
  .crew-area {
    .upp-team-img {
      width: 200px;
      height: 200px;
      justify-content: center;
      .bg-pic;

      &.team-arnaiz {
        background: url("@@config.base_path/images/about/javi_cto.jpg");

        &:hover {
          background: url("@@config.base_path/images/about/javi_cto_2.jpg");
        }
      }

      &.team-belen {
        background: url("@@config.base_path/images/about/belen_support.jpg");

        &:hover {
          background: url("@@config.base_path/images/about/belen_support_2.jpg");
        }
      }


    }
  }
}



/* ... ALL TEAM PICS :: Content blocks Details ... */
#team {
  // Common for all sections
  h5 {
    strong {
      font-weight: 600 !important;
      padding-right: 5px;
    }
  }
  .team-work {
    color: @main-green;
    font-weight: 600;

    &::-moz-selection,
    &::selection {
      color: @white;
    }
  }

  .team-job {
    background-color: @main-green;
    border-radius: 50%;
    color: @white;
    position: relative;
    font-size: 18px;
    padding: 8px 11px 8px 11px;

    &:hover {
      background-color: lighten(@main-green, 5%);
    }

    &.tooltipped {
      cursor: pointer;
    }
  }

  .team-rrss {
    background-color: @light-lilac;
    border-radius: 50%;
    color: @white;
    position: relative;

    &.team-linkedin:hover {
      background-color: @linkedin;
    }

    &.team-twitter:hover {
      background-color: @twitter;
    }
  }

  // Chairmen section
  .bosses-area {
    padding: 0 30px;

    h5 {
      font-size: 26px;
    }

    // chairmen job-position icon
    .team-job {
      padding: 14px 6px 4px 6px;
      top: 50px;
      right: 150px;

      i:before {
        font-size: 1.6em;
      }
    }

    .team-rrss {
      font-size: 25px;
      padding: 10px 13px;

      &.team-linkedin {
        top: 100px;
        left: 180px;
      }
      &.team-twitter {
        top: 220px;
        left: 135px;
      }
    }
  }

  // Employees section
  .crew-area {
    padding: 30px 0;

    h5 {
      font-size: 20px;
    }

    .team-job {
      font-size: 23px;
      padding: 4px 7px 5px 6px;

      // all departments employees
      &.team-dev,
      &.team-sales,
      &.team-support,
      &.team-design {
        top: 40px;
        right: 110px;
      }

      // last one: for hiring
      &.team-new {
        padding: 4px 8px 4px 8px;
        right: 62px;
      }
    }

    .team-rrss {
      font-size: 18px;
      padding: 10px 13px;

      &.team-linkedin {
        top: 70px;
        left: 132px;
      }
      &.team-twitter {
        top: 150px;
        left: 92px;
      }
    }
  }
}

/* ... MEDIA QUERIES :: About Us (Team) view ... */

@media only screen and (max-width : 940px) {
  #team .crew-area .m3 {
    width: 33.3333%;
  }
}

@media only screen and (max-width : 801px) {
  #team .crew-area .m3 {
    width: 50%;
  }
}

@media only screen and (max-width : 750px) {
  #team .bosses-area .m6 {
    width: 100%;
  }
}

@media only screen and (max-width : 499px) {
  #team .crew-area .m3 {
    width: 100%;
  }
}

@media only screen and (max-width : 420px) {
  #team {
    // Chairmen IMG
    .bosses-area {

      h5 {
        font-size: 20px;
      }

      .team-boss {
        top: 40px;
        right: 110px;
      }

      .team-rrss {
        font-size: 18px;
        padding: 10px 13px;

        &.team-linkedin {
          top: 70px;
          left: 132px;
        }

        &.team-twitter {
          top: 150px;
          left: 92px;
        }
      }

      .upp-boss-img {
        width: 200px;
        height: 200px;

        &.team-jose {
          background: url("@@config.base_path/images/about/jose_ceo_mob.jpg");

          &:hover {
            background: url("@@config.base_path/images/about/jose_ceo_2_mob.jpg");
          }
        }

        &.team-victor {
          background: url("@@config.base_path/images/about/victor_cmo_mob.jpg");

          &:hover {
            background: url("@@config.base_path/images/about/victor_cmo_2_mob.jpg");
          }
        }
      }
    }
  }
}

/* ... Media Queries :: Three Cards video-image layout :: WIDTH */

@media only screen and (max-width : 801px) {
  #team .about-grids .col.m4.about-grid {
    width: 100% !important;
  }
}

// (.about-grids) component on "_showcases.less"