/*  FRAME  */
.process-details p {
    font-size: 16px;
    text-align: left;
    margin-top: 20px;
    color: #3a3a3a;
}

.navigationsteps h2 {
      color: #777777;
    display: inline-block;
    font-size: 50px;
    padding: 40px;
    position: relative;
}


.navigationsteps h2:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 44px;
    background-image: url(../images/proces-social/after.png);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
        left: 65%;
}

.pas9:after {
  background:transparent!important;
}


@media all and (min-width: 640px) {
  .frame .top {
    height: 2em;
  }

  .frame .right {
    width: 2em;
  }

  .frame .bottom {
    height: 2em;
  }

  .frame .left {
    width: 2em;
  }
}
/*  SECTIONS  */
.section {
  color: #fff;
  padding: 2em;
  background: #f9f9f9;
}

@media all and (min-width: 640px) {
  .section {
    padding: 4em;
  }
}
@media all and (min-width: 960px) {
  .section {
    padding: 3em;
  }
}
/*  SPLIT VISION  */
.split-vision {
  overflow: hidden;
}

.split-vision .column .content {
  max-width: 540px;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  z-index: 2;
}

@media all and (min-width: 800px) {
  .split-vision {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .split-vision .column {
    width: 50%;
  }

  .split-vision .column .content {
    padding-right: 1em;
    padding-left: 20%;
    margin-right: -10%;
  }
}
@media all and (min-width: 960px) {
  .split-vision .column .content {
    margin-right: 0;
  }

  .split-vision.reverse .column .content {
    margin-left: 0;
  }
}
/*  PROCESS  */
.process {
  width: 100%;
  max-width: none;
  padding-left: 15%;
}

.process .pas1,
.process .pas2,
.process .pas3,
.process .pas4,
.process .pas5,
.process .pas6,
.process .pas7,
.process .pas8,
.process .pas9,
.process .pas10,
.process .pas11,
.process .pas12,
.process .pas13,
.process .pas14,
.process .pas15,
.process .pas16,
.process .pas17,
.process .pas18 {
  opacity: 0.8;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transition: opacity 0.25s;
  transition: opacity 0.25s;
}

.process.js-animate .pas1,
.process.js-animate .pas2,
.process.js-animate .pas3,
.process.js-animate .pas4,
.process.js-animate .pas5,
.process.js-animate .pas6,
.process.js-animate .pas7,
.process.js-animate .pas8,
.process.js-animate .pas9,
.process.js-animate .pas10,
.process.js-animate .pas11,
.process.js-animate .pas12,
.process.js-animate .pas13,
.process.js-animate .pas14,
.process.js-animate .pas15,
.process.js-animate .pas16,
.process.js-animate .pas17,
.process.js-animate .pas18 {
  -webkit-animation: grow-up 1s forwards;
          animation: grow-up 1s forwards;
}



@-webkit-keyframes grow-up {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  50% {
    -webkit-transform: scaleY(1.1);
            transform: scaleY(1.1);
  }
  80%,
		100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@keyframes grow-up {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  50% {
    -webkit-transform: scaleY(1.1);
            transform: scaleY(1.1);
  }
  80%,
		100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
.process-details {
  max-width: 1440px;
  padding: 2em;
  margin-right: auto;
  margin-left: auto;
}

.process-details .pas1,
.process-details .pas2,
.process-details .pas3,
.process-details .pas4,
.process-details .pas5,
.process-details .pas6,
.process-details .pas7,
.process-details .pas8,
.process-details .pas9,
.process-details .pas10,
.process-details .pas11,
.process-details .pas12,
.process-details .pas13,
.process-details .pas14,
.process-details .pas15,
.process-details .pas16,
.process-details .pas17,
.process-details .pas18 {
  max-width: 480px;
  padding: 1em 0;
  margin-right: auto;
  margin-left: auto;
  -webkit-transition: opacity 0.25s;
  transition: opacity 0.25s;
}

.process-details .pas1 .heading,
.process-details .pas2 .heading,
.process-details .pas3 .heading,
.process-details .pas4 .heading,
.process-details .pas5 .heading,
.process-details .pas6 .heading,
.process-details .pas7 .heading,
.process-details .pas8 .heading,
.process-details .pas9 .heading,
.process-details .pas10 .heading,
.process-details .pas11 .heading,
.process-details .pas12 .heading,
.process-details .pas13 .heading,
.process-details .pas14 .heading,
.process-details .pas15 .heading,
.process-details .pas16 .heading,
.process-details .pas17 .heading,
.process-details .pas18 .heading {
    
    color: #fff;
    text-align: left;
    font-size: 17px;
}

.heading h3 {
  color:#3a3a3a;
  font-weight: 700;
  display: inline-block;
  vertical-align: bottom;
  text-transform: uppercase;
}

.pas1 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas2 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas3 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas4 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas5 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas6 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas7 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas8 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas9 h3 {
    border-bottom: 2px solid #3a3a3a;
}


.pas10 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas11 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas12 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas13 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas14 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas15 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas16 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas17 h3 {
    border-bottom: 2px solid #3a3a3a;
}

.pas18 h3 {
    border-bottom: 2px solid #3a3a3a;
}


.heading img {
    width: 95px;
    position: absolute;
    top: -40px;
    left: -50px;
}


@media all and (min-width: 800px) {
  .process-details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
            margin-top: 2%;
  }

  .process-details .pas1,
  .process-details .pas2,
  .process-details .pas3,
  .process-details .pas4,
  .process-details .pas5,
  .process-details .pas6,
  .process-details .pas7,
  .process-details .pas8,
  .process-details .pas9,
  .process-details .pas10,
  .process-details .pas11,
  .process-details .pas12,
  .process-details .pas13,
  .process-details .pas14,
  .process-details .pas15,
  .process-details .pas16,
  .process-details .pas17,
  .process-details .pas18 {
    width: 50%;
    padding-right: 1em;
    padding-left: 1em;
  }

  .process-details .pas1 {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 1;
            order: 1;
  }

  .process-details .pas2 {
    margin-right: 0;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 2;
            order: 2;
  }

  .process-details .pas3 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 3;
            order: 3;
  }

  .process-details .pas4 {
    margin-left: 0;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 4;
            order: 4;
  }

  .process-details .pas5 {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 5;
            order: 5;
  }

    .process-details .pas6 {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 6;
            order: 6;
  }

    .process-details .pas7 {
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 7;
            order: 7;
  }

    .process-details .pas8 {
    -webkit-box-ordinal-group: 8;
        -ms-flex-order: 8;
            order: 8;
  }

    .process-details .pas9 {
    -webkit-box-ordinal-group: 9;
        -ms-flex-order: 9;
            order: 9;
  }

      .process-details .pas10 {
    -webkit-box-ordinal-group: 10;
        -ms-flex-order: 10;
            order: 10;
  }

      .process-details .pas11 {
    -webkit-box-ordinal-group: 11;
        -ms-flex-order: 11;
            order: 11;
  }

      .process-details .pas12 {
    -webkit-box-ordinal-group: 12;
        -ms-flex-order: 12;
            order: 12;
  }

      .process-details .pas13 {
    -webkit-box-ordinal-group: 13;
        -ms-flex-order: 13;
            order: 13;
  }

      .process-details .pas14 {
    -webkit-box-ordinal-group: 14;
        -ms-flex-order: 14;
            order: 14;
  }

      .process-details .pas15 {
    -webkit-box-ordinal-group: 15;
        -ms-flex-order: 15;
            order: 15;
  }

      .process-details .pas16 {
    -webkit-box-ordinal-group: 16;
        -ms-flex-order: 16;
            order: 16;
  }

      .process-details .pas17 {
    -webkit-box-ordinal-group: 17;
        -ms-flex-order: 17;
            order: 17;
  }

      .process-details .pas18 {
    -webkit-box-ordinal-group: 18;
        -ms-flex-order: 18;
            order: 18;
  }
}
@media all and (min-width: 800px) {
  .process-details .pas1,
  .process-details .pas2,
  .process-details .pas3,
  .process-details .pas4,
  .process-details .pas5,
  .process-details .pas6,
  .process-details .pas7,
  .process-details .pas8,
  .process-details .pas9,
  .process-details .pas10,
  .process-details .pas11,
  .process-details .pas12,
  .process-details .pas13,
  .process-details .pas14,
  .process-details .pas15,
  .process-details .pas16,
  .process-details .pas17,
  .process-details .pas18 {
    width: 27.3334%;
    background-color: #fff;
    margin: 3%;
  }

  .process-details .pas1 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas2 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas3 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas4 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas5 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas6 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas7 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas8 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas9 {
    border: 4px double #7e7e7e;
  }

  .process-details .pas10 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas11 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas12 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas13 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas14 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas15 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas16 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas17 {
    border: 4px double #7e7e7e;
  }

   .process-details .pas18 {
    border: 4px double #7e7e7e;
  }


}
@media all and (min-width: 1280px) {
  .process-details .pas1,
  .process-details .pas2,
  .process-details .pas3,
  .process-details .pas4,
  .process-details .pas5,
  .process-details .pas6,
  .process-details .pas7,
  .process-details .pas8,
  .process-details .pas9,
  .process-details .pas10,
  .process-details .pas11,
  .process-details .pas12,
  .process-details .pas13,
  .process-details .pas14,
  .process-details .pas15,
  .process-details .pas16,
  .process-details .pas17,
  .process-details .pas18 {
        padding-right: 4em;
    padding-left: 4em;
    margin-top: 1%;
    position: relative;

  }
}

@media screen and (max-width: 1366px) {
    
.process-details p {
  font-size: 12px;
}

.navigationsteps h2 {
  font-size: 40px;
}

}