body{
  background: rgba(193,193,193,0.2);
}

img {
  position: relative;
  display: block;
}



.one{ max-width: 800px; width:43.75vw; height: auto; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);top: 5.666vw;}
.two{ max-width: 800px; width: 43.75vw; height: auto; left: 14.926vw; top: 28vw;}
.three{ max-width: 800px; width: 43.75vw; height: auto; left: 45.356vw; top: 40.581vw;}
.four{ max-width: 800px; width: 43.75vw; height: auto; left: 16vw; top: 53vw; }


.row{
position: relative;
margin-bottom: 70vw;


}

.fullsizePic{
  height: 100vh;
background: url(../stylesheets/Aboutus/Photo/000.jpg) no-repeat center center;
background-size: cover;
}

.graph{
  position: relative;
  width: 100%;
  min-height: 800px;
  height: 100vh;
  background: url(../stylesheets/Aboutus/Photo/cloud_background.jpg) no-repeat center center;
  background-size: cover;
}
.graph .h2cdesign_ch{
  position: absolute;
  left:50%;
  top: 30%;
  -webkit-transform: translate(-50%,-30%);
  -ms-transform: translate(-50%,-30%);
  transform: translate(-50%,-30%);
  width: 38.139vw;
  max-width: 500px;
}
.graph .needs{
  position: absolute;
  left:50%;
  top: 30%;
  -webkit-transform: translate(-50%,-30%);
  -ms-transform: translate(-50%,-30%);
  transform: translate(-50%,-30%);
  width: 38.139vw;
  max-width: 500px;
}

.vertical-line{
  position: absolute;
  left: 50%;
  top: 40%;
  -webkit-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

.needsText{
  font-size: 20pt;
  font-weight: 100;
  color: rgb(110,110,110);
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.needsText.One{
  top: 59%;
}
.needsText.Two{
  top: 66%;
}
.needsText.Three{
  top: 73%;
}

.delete{
  position: absolute;
  top:50%;
  left:50%;
  color: red;
  font-size: 37px;
}


.bold{
  font-weight: bold;
}

.title{
  width: 490px;
}

.companyOutline{
  width:100%;
  height:100vh;
  min-height: 650px;
  position: relative;
}

.processof{
  width: 100%;
  height: 200px;
  background: #1B1C21;
  color: #A38814;
  font-size: 32px;
  font-family: 'cambriai', 'Droid Serif', serif;
  position: relative;

}
.processofCont{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.companyInfo{
  width: 60%;
  font-size: 20px;
  font-weight: 100;
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%) translateY(100px) ;
  -ms-transform: translate(-50%,-50%) translateY(100px) ;
  transform: translate(-50%,-50%) translateY(100px) ;
  line-height: 2.5;
  color: rgb(150,150,150);
  letter-spacing: 2px;


}
.companyInfo .left{
    width: 30%;

}
.companyInfo .right{
    width: 70%;

}

.lastFullsizeImg{
  height: 100vh;
  background: url(../stylesheets/Aboutus/Photo/main.jpg) no-repeat center center;
  background-size: cover;
  margin-bottom: -40px;
}
.footer{
  margin-top: 0;
}

.ani{
  opacity: 0;
  -webkit-transition: opacity 2s;
  transition: opacity 2s;
}
.One.ani{
  -webkit-transition: opacity 1s 1s,
              top 1s 1s ease;
  transition: opacity 1s 1s,
              top 1s 1s ease;
}
.Two.ani{
  -webkit-transition: opacity 1s 2s,
              top 1s 2s ease;
  transition: opacity 1s 2s,
              top 1s 2s ease;
}
.Three.ani{
  -webkit-transition: opacity 1s 3s,
              top 1s 3s ease;
  transition: opacity 1s 3s,
              top 1s 3s ease;
}



@media screen and (max-width: 768px) {

.title{
  width: 73.75vw;
}

  img{
    display: block;
  }
  .one{ width: 100%; left: 0; top: 0; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);padding-bottom: 20px;}
  .two{ width: 100%; left: 0; top: 0;}
  .three{ width: 100%; height: 200px; -o-object-fit: cover; object-fit: cover; left: 0; top: 0;padding-bottom: 20px;}
  .four{ width: 100%; left: 0; top: 0;}

.row{
  margin-bottom: 0;
}

.graph{
  min-height: 500px;

}
.graph img{


}
.bold{
  display: block;
  margin-bottom: -10px;
}
.fadein{
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}


.processof{
  font-size: 23px;
  text-align: center;
  width: 100%;
}

.graph .h2cdesign_ch{
  width: 80vw;
}
.graph .needs{
  width: 80vw;
}

.needsText{
  width: 100%;
  font-size: 16px;
  text-align: center;
}

.processofCont{
  width:100%;
}
.companyInfo{
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 16px;

  text-align: center;
  line-height: 1.5;

}
.companyInfo .right{
  width: 100%;
  left: 50%;

  display: block;
  position: static;
}
.companyInfo .left{
  width: 100%;
}
.companyInfo .botpadding{
  margin-bottom: 20px;
}
a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
}

.needsText{
  color: rgb(99,99,99);
}


}