/* start about css */


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

.color {
  counter-reset: tab-counter 5;
  border-radius:20%;
  webkit-border-radius:20%;
 /* height: 357px;*/
  height: 320px;
}

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

.tabp
{
font-size:14px;
color:white;
text-align: left;
padding: 1% 7% 0 22%;
font-weight: 500;
}


.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:8%;
  color: white;
}

.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: 430px;
  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"] + label:nth-child(2)::after {
 position: absolute;
content: '';
top: 74%;
left: 100%;
width: 18px;
height: 75px;
border-radius: 0 7.5px 7.5px 0;
background: #9575CD;

}



.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: 416px;
  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: 392px;
  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.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(8) {
  width: 368px;
  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;
}





.btnplus-1 {
    width: 35px;
    height: auto;
    position: absolute;
}

.btnplus-2 {
    width: 35px;
    height: auto;
    position: absolute;

}

.btnplus-3 {
    width: 35px;
    height: auto;
    position: absolute;
}


.btnplus-4 {
    width: 35px;
    height: auto;
    position: absolute;
}


.btnplus-5 {
    width: 35px;
    height: auto;
    position: absolute;
}





.text-ppc {font-weight: 700 !important; font-size: 16px !important; line-height: 20px; }
.tw-work-process {text-align: justify; }
.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: 132px; margin: 0 auto; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; }




@media (min-width: 1282px) {


.padwork {padding:50px 0 200px 0;}

.work-process {z-index: 2; }
.work-bg-pattern {position: absolute; left: 0; top: 69%; width: 100%; text-align: center; z-index: -1; background-position: left center; margin-left: -10px; }
.dis_in { display: inline-block!important;}




.btnplus-1 {
margin-top: 119px;
margin-left: 58px;
}


.btnplus-2 {
margin-top: 67px;
margin-left: 68px;
}

.btnplus-3 {
margin-top: 74px;
margin-left: 82px;
}


.btnplus-4 {
margin-top: 57px;
margin-left: 88px;
}



.work-process [class*="col"]:nth-child(2n) .process-wrapper {
    margin-top: -50px;
}


}




@media (min-width: 1150px) and (max-width: 1281px)

{
/* applies to screen less than 1025px */


.work-process [class*="col"]:nth-child(2n) .process-wrapper {
    margin-top: -50px;
}


.padwork {padding:50px 0 200px 0;}

.work-process {z-index: 2; }
.work-bg-pattern {position: absolute; left: 0; top: 69%; width: 100%; text-align: center; z-index: -1; background-position: left center; margin-left: -10px; }
.dis_in { display: inline-block!important;}


.btnplus-1 {
margin-top: 119px;
margin-left: 58px;
}


.btnplus-2 {
margin-top: 65px;
margin-left: 90px;
}

.btnplus-3 {
margin-top: 66px;
margin-left: 82px;
}


.btnplus-4 {
margin-top: 57px;
margin-left: 88px;
}




}




@media (min-width: 768px) and (max-width: 1149px) {
/* applies to screen greater than 1024px */


.work-bg-pattern, .d-none, .img-fluid, .dis_in, {disply:none !important;}

.padwork {padding:50px 0 200px 0;}


.btnplus-1 {
   /* margin-top:37px;
    margin-left: -21px;*/
}

.btnplus-2 {
 /*   margin-top: 10px;
    margin-left: -46px;*/
}

.btnplus-3 {
  /*  margin-top: -15px;
    margin-left: -31px;*/
}


.btnplus-4 {
 /*   margin-top: -10px;
    margin-left: -30px;*/
}


.btnplus-5 {
 /*   margin-top: 8px;
    margin-left: -5px;*/
}

/*new web*/




}

@media (min-width: 481px) and (max-width: 767px) {

.padwork {padding:50px 0 50px 0;}

.work-bg-pattern, .d-none, .img-fluid, .dis_in, { disply:none !important;}


.tw-work-process-top {
    max-width: 50%;
	height:268px;
}
}

@media (min-width: 320px) and (max-width: 480px) {

.padwork {padding:50px 0 50px 0;}
  
.work-bg-pattern, .d-none, .img-fluid, .dis_in, { disply:none !important;}

.tw-work-process-top {
    max-width: 50%;
	height:268px;
	
}
  
}

/* ends about css */





/* starts contact css */
.cont {
  background:#F0F0F0;
  width: 100%;
  height: 820px;
  margin: 0 auto;
  position: relative;
  margin-top: 10%;
  box-shadow: 2px 5px 20px rgba(119, 119, 119, 0.5);
}


.cimg { margin-bottom:3px;}


.CTA {
  width: 80px;
  height: 40px;
  right: -20px;
  bottom: 0;
  margin-bottom: 90px;
  position: absolute;
  z-index: 1;
  background: rgba(29, 162, 168, 0.8);
  font-size: 1em;
  transform: rotate(-90deg);
  transition: all .5s ease-in-out;
  cursor: pointer;
}
.CTA h1 {
  color: #FFFFFF;
  margin-top: 10px;
  margin-left: 9px;
}
.CTA:hover {
  background: #3FB6A8;
  transform: scale(1.1);
}

.leftbox {
  float: left;
  top: -6%;
  left: 5%;
  position: absolute;
  width: 15%;
  height: 112%;
  background: rgba(52, 4, 53, 0.8); 
  box-shadow: 3px 3px 10px rgba(119, 119, 119, 0.5);
}

.form2 a {
  list-style: none;
  padding: 35px;
  color: #FFFFFF !important;
  font-size: 1.1em;
  display: block;
  transition: all .3s ease-in-out;
}

.form2 a:hover {
  color: #000 !important;
  transform: scale(1.2);
  cursor: pointer;
}

.form2 a:first-child {
  margin-top: 170px;
}

.active {
  color: #3FB6A8;
}

.rightbox {
  float: right;
  width: 70%;
  height: 100%;
}

.profile, .payment, .subscription, .privacy, .settings {
  transition: opacity .5s ease-in;
  position: absolute;
  width: 70%;
}

.text2 input {font-size:14px;}

.text1 {
  color:#340435;
  font-size: 1.8em;
  margin-top: 40px;
  margin-bottom: 35px;
}

.text2 {
  color: #777777;
  width: 80%;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
  margin-left: 2px;
}

.text3 {
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to right, #3FB6A8, rgba(126, 211, 134, 0.5)) 1 0%;
  border-top: 0;
  width: 78%;
  font-size: .8em;
  padding: 5px;
  color: #070707;
  margin-bottom: 15px;
}


.text4 {
  color: #777777;
  width: 80%;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
  margin-left: 2px;
  font-weight:600;
}


.text5 {
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to right, #3FB6A8, rgba(126, 211, 134, 0.5)) 1 0%;
  border-top: 0;
  width: 78%;
  font-size: .8em;
  padding: 5px;
  color: #070707;
  margin-bottom: 25px;
  height:110px;
}

.span {
  font-size: .5em;
  color: #777777;
}

.submitbtn
{ font-size:10px;}

.btn {
  float: right;
  text-transform: uppercase;
  font-size: 10px;
  border: none;
  color: #3FB6A8;
}

.btn:hover {
  text-decoration: underline;
  font-weight: 900;
}


.privacy h2 {
  margin-top: 25px;
}

.settings h2 {
  margin-top: 25px;
}

.noshow {
  opacity: 0;
}


/* ends contact css */