/* ==========================================================================

  process.css

/* ========================================================================== */

    

.process-solve-problems .card-text {
    text-align: center;
}

/*------------ Integrate Design & Development  ------------*/

.process-desdev {
    display: flex;
    flex-direction: column;
}

.process-desdev-timeline {
    display: flex;
    flex-direction: column;
}

.process-desdev-title {
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
}

.process-desdev-steps {
    display: flex;
}

.process-desdev-step {
    width: 16.7%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 0;
}
.process-desdev-timeline--design {
    background-color: #f1f6ff;
}
.process-desdev-timeline--design .process-desdev-title {
    background-color: #dae8ff;
}
.process-desdev-timeline--design .process-desdev-step {
    justify-content: flex-end;
}

.process-desdev-timeline--development {
    background-color: #fbf1e5;
}
.process-desdev-timeline--development .process-desdev-title {
    background-color: #f9e6d2;
}

@media (min-width: 1150px) {
    .process-desdev-timeline--development .process-desdev-steps {
        order: -1;
    }
    .process-desdev-timeline--design {
        border-bottom: 1px solid #BEC5C9;
    }
}
@media (max-width: 1150px) {
    .process-desdev {
        flex-direction: row;
    }
    .process-desdev-timeline {
        width: 50%;
    }
    .process-desdev-timeline--design {
        border-right: 1px solid #BEC5C9;
    }
    .process-desdev-steps {
        flex-direction: column;
    }
    .process-desdev-step {
        width: 100%;
        min-height: 160px;
    }
}

/*------------ Connectors ------------*/

/* Line */
.process-desdev-step.step-action:before {
    content: "";
    position: absolute;
    height: 40px;
    width: 1px;
    background-color: #BEC5C9;
    left: calc(50% - 0.5px);
}

/* Dot */
.process-desdev-step.step-action:after {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: #3E4548;
    border-radius: 50%;
    left: calc(50% - 5px);
}

.process-desdev-timeline--design .process-desdev-step.step-action:before,
.process-desdev-timeline--design .process-desdev-step.step-action:after {
    bottom: -6px;
}
.process-desdev-timeline--development .process-desdev-step.step-action:before,
.process-desdev-timeline--development .process-desdev-step.step-action:after {
    top: -6px;
}

@media (max-width: 1150px) {
    /* line */
    .process-desdev-timeline--design .process-desdev-step.step-action:before,
    .process-desdev-timeline--development .process-desdev-step.step-action:before {
        width: 20%;
        height: 1px;
        top: 30px;
    }
    .process-desdev-timeline--design .process-desdev-step.step-action:before {
        right: 0;
        left: auto; 
    }
    .process-desdev-timeline--development .process-desdev-step.step-action:before {
        left: 0;
    }
    /* Dot */
    .process-desdev-timeline--design .process-desdev-step.step-action:after,
    .process-desdev-timeline--development .process-desdev-step.step-action:after {
        top: 25px;
    }
    .process-desdev-timeline--design .process-desdev-step.step-action:after {
        right: -6px;
        left: auto;
    }
    .process-desdev-timeline--development .process-desdev-step.step-action:after {
        left: -6px;
    } 
}

/*------------ Widget ------------*/

.step-graphic {
    padding: 20px;
    background-color: #F2F2F2;
    border: 1px solid #D1D1D1;
    border-radius: 8px; 
    width: 150px;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
}
.step-graphic .graphic-box {
    width: 30px;
    height: 30px;
}
.step-graphic .graphic-box--red {
    background-color: #CB3036;
}
.step-graphic .graphic-box--green {
    background-color: #009F62;
}
.step-graphic .graphic-box--blue {
    background-color: #356FD1;
    border-radius: 8px; 
    width: 100%;
}
.step-graphic-row {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
}
.graphic-title {
    font-size: 16px;
    line-height: 1.2;
}
.process-desdev-timeline--design .graphic-title {
    background-color: #f1f6ff;
}
.process-desdev-timeline--development .graphic-title {
    background-color: #fbf1e5;
}

@media (max-width: 1150px) {
    .graphic-title {
        order: -1;
        margin: 0 13px 13px;
    }
}
@media (min-width: 1150px) {
    .process-desdev-timeline--design .graphic-title {
        margin-top: 10px;
        margin-bottom: 42px;
    }
    .process-desdev-timeline--development .graphic-title {
        margin-top: 42px;
        margin-bottom: 10px;
    }
}

.step-action--2 .graphic-box {
    border: 1px solid #9CA2A5;
    margin-bottom: 5px;
}
.step-action--2 .step-graphic {
    background: transparent;
    border: 1px solid #9CA2A5;
    border-radius: 0;
    box-shadow: none;
    width: 170px;
    padding: 10px;
}
.step-action--2 .graphic-box-large {
    width: 100%;
}

.step-action--5 .step-graphic-row {
    justify-content: end;
    margin-bottom: 10px;
}
.step-action--5 .graphic-box--green {
    margin-left: 10px;
}

/*------------ Code ------------*/
.step-code {
    padding: 10px;
    background-color: #282C34;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
    text-align: left;
    line-height: 1.2;
    width: 140%;
}

.step-code p {
    margin: 0!important;
    color: #ABB2C0; 
    font-family: "Courier";
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}
.step-code.step-code--design p:nth-child(2){
    margin-left: 10px!important;
}
.step-code.step-code--design p:nth-child(3){
    margin-left: 20px!important;
}
.step-code.step-code--design p:nth-child(4){
    margin-left: 10px!important;
}
.step-code.step-code--design p:nth-child(5){
    margin-left: 10px!important;
}

.code-class {
    color: #D29B5E;
}
.code-this {
    color: #E6C176;
    font-style: italic;
}
.code-variable {
    color: #E26B73;
}
.code-element {
    color: #43A6F2;
}
.code-string {
    color: #90C476;
}

.step-code.step-code--development p:nth-child(2){
    margin-left: 10px!important;
}
.step-code.step-code--development p:nth-child(3){
    margin-left: 10px!important;
}

@media (max-width: 1150px) {
    .step-code {
        width: 80%;
        overflow-x: auto;
    }
}

/*------------ Animations ------------*/

/* Step 1 */
.animated-text-1 {
    animation-delay: 1s;
}

/* Step 2 */
.animated-step-2 {
    animation-delay: 1.5s;
}
.animated-box-2 {
    animation-delay: 1.5s;
}
.animated-text-2 {
    animation-delay: 2.2s;
}

/* Step 3 */
.animated-step-3 {
    animation-delay: 2.5s;
}
.animated-text-3 {
    animation-delay: 3s;
}
.animated-code-1 p {
    animation: type 3s steps(100, end); 
}
.animated-code-1 p:nth-child(2){
    animation: type2 3s steps(100, end);
}
.animated-code-1 p:nth-child(3){
    animation: type2 4s steps(100, end);
}
.animated-code-1 p:nth-child(4){
    animation: type2 5s steps(100, end);
}
.animated-code-1 p:nth-child(5){
    animation: type2 6s steps(100, end);
}
.animated-code-1 p:nth-child(6){
    animation: type2 3s steps(100, end);
}

/* Step 4 */
.animated-step-4 {
    animation-delay: 5s;
}
.animated-text-4 {
    animation-delay: 6s;
}
.animated-code-2 p,
.animated-code-2 p:nth-child(4) {
    animation: type 7s steps(100, end); 
}
.animated-code-2 p:nth-child(2){
    animation: type2 8s steps(100, end);
}
.animated-code-2 p:nth-child(3) {
    animation: type2 10s steps(100, end);
}

/* Step 5 */
.animated-step-5 {
    animation-delay: 8s;
}
.animated-text-5 {
    animation-delay: 9s;
}

.animated-box-3 .step-graphic-row {
    margin-bottom: 20px!important;
    transition: margin-bottom 0.5s ease-out;
    transition-delay: 10s;
}

.animated-box-3 .graphic-box--green {
    margin-left: 47px!important;
    transition: margin-left 0.5s ease-out;
    transition-delay: 10.5s;
}

/* Step 6 */
.animated-step-6 {
    animation-delay: 11s;
}
.animated-text-6 {
    animation-delay: 12s;
}
.animated-box-4 {
    animation-delay: 13s;
}

@keyframes type{ 
    from { width: 0; } 
} 
  
@keyframes type2{
    0%{width: 0;}
    50%{width: 0;}
    100%{ width: 100; } 
} 

/* Checkmark */
.process-desdev-checkmark {
    margin-top: -115px;
}

.animated-checkmark {
    display: block!important;
}
.animated-checkmark polyline {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 5s linear alternate infinite;
    animation-delay: 13.5s;
}

/* Disables animation on Edge to show the chekmark as the animation is not supported */
@supports (-ms-ime-align: auto) {
  .animated-checkmark polyline {
    animation: unset;
    stroke-dasharray: none;
    stroke-dashoffset: unset;
  }
}

/* Disables animation on IE to show the chekmark as the animation is not supported */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .animated-checkmark polyline {
      animation: unset;
      stroke-dasharray: none;
      stroke-dashoffset: unset;
  }
}

@keyframes dash {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 0;
    }
}