.landing-img{
  margin-bottom: 30px;
  width: 200px;
  height: auto;
}
body{

}

.page{
  position: relative;
  height: 100%;
}
.bg-first{
  background-color: #edf6ff;
}
.bg-second{
  background: linear-gradient(-30deg, rgb(166 255 221) 0%, rgb(135 199 255) 100%);
}
.bg-fourth{
  opacity: 0.9;
  background: rgb(111,179,255);
  background: -webkit-linear-gradient(300deg, rgba(111,179,255,1) 10%, rgba(255,86,234,1) 49%, rgba(228,255,65,1) 93%);
  background: -o-linear-gradient(300deg, rgba(111,179,255,1) 10%, rgba(255,86,234,1) 49%, rgba(228,255,65,1) 93%);
  background: linear-gradient(30deg, rgba(111,179,255,1) 10%, rgba(255,86,234,1) 49%, rgba(228,255,65,1) 93%);
}
.page-center{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.page-center.first{
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.page-center.second{
  width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}.page-center.second img{
  width: 100%;
}
.page-center.fourth{
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

img.shape{
  width: 300px;
  opacity: 0.4;
  transition: 0.4s;
}img.shape:hover{
  transform: scale(1.04);
  opacity: 0.9;
}

.fourth .title{
  font-size: 66px;
  font-weight: bold;
  text-align: center;
}

.page-third.title{
  position: absolute;
  top: 50px;
  font-size: 46px;
  font-weight: bold;
}
.grid{
  position: relative;
  top: 50px;
  height: 100%;
}
.grid .item{
  position: absolute;
  text-align: center;
}
.grid .item .body{
  opacity: 0.4;
  transition: 0.4s;
}
.grid .item .body:hover{
  transform: scale(1.05);
  opacity: 0.9;
}
.grid .item img{
  width: 80px;
}
.grid .item.more .title{
  font-size: 18px;
}
.grid .item .title{
  margin-top: 5px;
}
.grid .item.idea{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.grid .item.architects{
  top: 20%;
  left: 40%;
  transform: translate(-50%,-50%);
}
.grid .item.developers{
  top: 45%;
  left: 10%;
  transform: translate(-50%,-50%);
}
.grid .item.designers{
  bottom: 18%;
  left: 25%;
  transform: translate(-50%,-50%);
}
.grid .item.strategist{
  top: 25%;
  right: 10%;
  transform: translate(-50%,-50%);
}
.grid .item.marketing{
  top: 49%;
  right: 9%;
  transform: translate(50%,-50%);
}
.grid .item.more{
  bottom: 15%;
  right: 20%;
  transform: translate(50%,-50%);
}

.triangle{
  position: absolute;
  color: #ffffff;
  opacity: 0.4;
}
.triangle.bottom-right{
  bottom: 0px;
  right: 0px;
  border-bottom: 30vw solid;
  border-left: 80vw solid transparent;
}
.triangle.top-left{
  top: 0px;
  left: 0px;
  border-top: 30vw solid;
  border-right: 80vw solid transparent;
}

.landing-title{
  font-size: 52px;
  font-weight: bold;
  color: #000000;
  text-align: center;
}
.landing-desc{
  font-size: 25px;
}.landing-desc span{
  color: #0061c9;
}.landing-desc a{
  color: #0061c9;
}
.landing-text{
  font-size: 25px;
  text-align: center;
}
.landing-text a{
  color: #000000;
}.landing-text a:hover{
  text-decoration: none;
}



@media screen and (max-width: 1200px) {
  .landing-img{
    //width: 380px;
  }
}
@media screen and (max-width: 840px) {
  .landing-img{
    //width: 300px;
  }
}
@media screen and (max-width: 670px) {
  .landing-img{
    //width: 240px;
  }
}
