/* CSS Document */


.modal-content 
{
 box-shadow:3px 3px 3px #352c2c;
}

.color {
  height: 340px;
  counter-reset: tab-counter 5;
  border-radius:20%;
  webkit-border-radius:20%;
}

.tabcol
{
   font-size: 28px;
   color: white;
   font-weight: bold;
}

.tabp
{
font-size:14px;
color:#340435;
}


.color input[type=radio] {
  display: none;
}



.color input[type=radio] + label {
  position: absolute;
  height: 100%;
  box-shadow: 2px 0px 4px -2px #000;
  cursor: pointer;
  -webit-transition: width 1.2s cubic-bezier(0.11, 0.65, 0.04, 1);
  transition: width 1.2s cubic-bezier(0.11, 0.65, 0.04, 1);
}

.color input[type=radio] + label .content {
  counter-increment: tab-counter -1;
  text-align: center;
  padding:2%;
  margin-top:10%;
}

.color input[type=radio] + label .content:after {
  content: counter(tab-counter);
}

.color input[type=radio] + label:nth-child(2) {
  box-shadow: none;
}

.color input[type=radio] + label:nth-child(2) {
  width: 500px;
  background: #9575CD;
}

.color input[type=radio]:checked + label ~ label:nth-child(2) {
  width: 78px;
}

.color input[type=radio]:checked + label ~ label:nth-child(2) .content {
  -webit-transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  opacity: 0;
  pointer-events: none;
}



.color input[type=radio]:checked + label ~ label:nth-child(4) {
  width: 54px;
}

.color input[type=radio]:checked + label ~ label:nth-child(4) .content {
 -webit-transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
 transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
 opacity: 0;
 pointer-events: none;
}



.color input[type=radio] + label:nth-child(4) {
  width: 476px;
  background: #64B5F6;
}

.color input[type=radio] + label:nth-child(4):after {
  position: absolute;
  content: '';
  top: 50%;
  left: 100%;
  width: 18px;
  height: 75px;
  border-radius: 0 7.5px 7.5px 0;
  background: #64B5F6;
  box-shadow: 3px 0px 6px -3px #000;
}


.color input[type=radio]:checked + label ~ label:nth-child(6) {
  width: 30px;
}

.color input[type=radio]:checked + label ~ label:nth-child(6) .content {
  -webit-transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  opacity: 0;
  pointer-events: none;
}


.color input[type=radio] + label:nth-child(6) {
  width: 452px;
  background:#9575CD;
}

.color input[type=radio] + label:nth-child(6):after {
  position: absolute;
  content: '';
  top: 25%;
  left: 100%;
  width: 18px;
  height: 75px;
  border-radius: 0 7.5px 7.5px 0;
  background: #9575CD;
  box-shadow: 3px 0px 6px -3px #000;
}



.color input[type=radio]:checked + label ~ label:nth-child(8) {
  width: 30px;
}

.color input[type=radio]:checked + label ~ label:nth-child(8) .content {
  -webit-transition: opacity 0.4s cubic-bezier(0.61, 5.65, 0.04, 1);
  transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
  opacity: 0;
  pointer-events: none;
}


.color input[type=radio] + label:nth-child(8) {
  width: 428px;
  background: #64b5f6;
}

.color input[type=radio] + label:nth-child(8):after {
  position: absolute;
  content: '';
  top: 0%;
  left: 100%;
  width: 18px;
  height: 75px;
  background: #64b5f6;
  border-radius: 0 7.5px 7.5px 0;
  box-shadow: 3px 0px 6px -3px #000;
}


/*new web*/

.btnplus-1 {
    width: 35px;
    height: auto;
    margin-top:43px;
    position: absolute;
    margin-left: -21px;
}

.btnplus-2 {
    width: 35px;
    height: auto;
    position: absolute;
    margin-top: 3px;
    margin-left: -30px;
}

.btnplus-3 {
    width: 35px;
    height: auto;
    position: absolute;
    margin-top: -1px;
    margin-left: -16px;
}


.btnplus-4 {
    width: 35px;
    height: auto;
    position: absolute;
    margin-top: -4px;
    margin-left: -10px;
}


.btnplus-5 {
    width: 35px;
    height: auto;
    position: absolute;
    margin-top: 8px;
    margin-left: -5px;
}
.padwork {padding:50px 0 200px 0;}
.work-process {z-index: 2; }
.work-process [class*="col"]:nth-child(even) .process-wrapper {margin-top:-50px; }
.work-bg-pattern {position: absolute; left: 0; top: 65%; width: 100%; text-align: center; z-index: -1; background-position: left center; margin-left: -10px; }
.text-ppc {font-weight: 700 !important; font-size: 16px !important; line-height: 20px; }
.tw-work-process-top {max-width: 25%; }
.tw-work-process {text-align: center; }
.tw-work-process p {color: #262525; font-weight: 500; font-size: 13px; line-height: 18px; margin-bottom: 0; margin-top: 6px; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .process-wrapper {width: 225px; height: 100px; margin: 0 auto; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; }