/* colors */
/*font family*/
/* breakpoints */
/*transform*/
/*transform*/
/*opacity*/
/*opacity- end*/
.cp-factory-card {
  position: relative;
  /*&:after {
            background-image: linear-gradient(to left, rgba(0, 0, 0, 0) 96%, #000 3%);
            position: absolute;
            color: $clr-white;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.85;
            content: '';
        }*/ }
  .cp-factory-card:before {
    content: '';
    position: absolute;
    left: -138px;
    top: 0;
    width: 42rem;
    height: 29rem;
    background: url(../assets/images/cont-infograhy.png);
    background-size: cover;
    opacity: 0.2;
    z-index: 1; }
    @media only screen and (max-width: 1366px) {
      .cp-factory-card:before {
        top: 3.2rem;
        left: -12.9rem; } }
    @media only screen and (max-width: 768px) {
      .cp-factory-card:before {
        width: 22rem;
        height: 14rem; } }
  .cp-factory-card:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0px;
    width: 22.8rem;
    height: 17.8rem;
    background: url(../assets/images/factory-befoore.png);
    background-size: cover;
    opacity: 0.8;
    right: 0; }
    @media only screen and (max-width: 768px) {
      .cp-factory-card:after {
        width: 12.2rem;
        height: 10.7rem; } }
  .cp-factory-card .content-wrap {
    padding: 23rem 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 1;
    z-index: 9; }
    @media only screen and (max-width: 768px) {
      .cp-factory-card .content-wrap {
        padding: 17.9rem 0 15.8rem; } }
    .cp-factory-card .content-wrap .cont-sec {
      position: relative;
      top: 0;
      z-index: 99;
      height: 100%; }
    .cp-factory-card .content-wrap .factory-name {
      font-size: 4.8rem;
      color: #ffffff;
      font-family: "Gotham-Black";
      line-height: 6rem;
      letter-spacing: -1.37px; }
      @media only screen and (max-width: 768px) {
        .cp-factory-card .content-wrap .factory-name {
          font-size: 2.4rem;
          line-height: 2.4rem; } }
    .cp-factory-card .content-wrap .factory-desc {
      font-size: 1.6rem;
      color: #ffffff;
      font-family: "Gotham-Book";
      line-height: 2.2rem;
      max-width: 35.5rem;
      width: 100%;
      padding-top: 1.8rem; }
      @media only screen and (max-width: 768px) {
        .cp-factory-card .content-wrap .factory-desc {
          font-size: 1.4rem; } }
  .cp-factory-card .main-video {
    position: relative; }
  .cp-factory-card .icon-mute {
    position: absolute;
    right: 4rem;
    bottom: 4rem;
    width: 5rem;
    height: 5rem;
    font-size: 3rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    color: #ffffff;
    background: #00000066;
    border-radius: 50%;
    z-index: 5;
    cursor: pointer;
    transition: 0.6s; }

.cp-factory-card {
  max-width: 100%;
  overflow: hidden; }
  .cp-factory-card .fact-main-video {
    background: #000;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none; }
    .cp-factory-card .fact-main-video.show {
      display: block; }
    .cp-factory-card .fact-main-video .icon-mute,
    .cp-factory-card .fact-main-video .icon-unmute {
      position: absolute;
      right: 4rem;
      bottom: 3rem;
      width: 5rem;
      height: 5rem;
      font-size: 3rem;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      color: #ffffff;
      background: #00000066;
      border-radius: 50%;
      z-index: 10;
      cursor: pointer;
      transition: 0.6s; }
      @media only screen and (max-width: 768px) {
        .cp-factory-card .fact-main-video .icon-mute,
        .cp-factory-card .fact-main-video .icon-unmute {
          bottom: 6.5rem; } }
    .cp-factory-card .fact-main-video video {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      height: 100%;
      width: 100%;
      object-fit: cover; }
  .cp-factory-card .play-icon {
    background: #d02127;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 50%;
    position: absolute;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    position: absolute;
    bottom: 18rem;
    z-index: 9; }
    @media only screen and (max-width: 1440px) {
      .cp-factory-card .play-icon {
        bottom: 14rem; } }
    .cp-factory-card .play-icon:before {
      content: '';
      display: inline-block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 0 10px 16px;
      border-color: transparent transparent transparent #fff;
      line-height: 0;
      margin-left: 3px;
      border-radius: 3px; }
    @media only screen and (max-width: 1024px) {
      .cp-factory-card .play-icon {
        bottom: 8rem; } }
    @media only screen and (max-width: 768px) {
      .cp-factory-card .play-icon {
        width: 4rem;
        height: 4rem;
        bottom: 8rem; } }
  .cp-factory-card .icon-pause {
    background: #d02127;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 50%;
    position: absolute;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    font-size: 3.6rem;
    color: #ffffff;
    bottom: 18rem;
    z-index: 9; }
    @media only screen and (max-width: 1440px) {
      .cp-factory-card .icon-pause {
        bottom: 14rem; } }
    @media only screen and (max-width: 1024px) {
      .cp-factory-card .icon-pause {
        bottom: 8rem; } }
    @media only screen and (max-width: 768px) {
      .cp-factory-card .icon-pause {
        width: 4rem;
        height: 4rem;
        bottom: 8rem; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .cp-factory-card .img-wrap img {
      height: 468px; } }