@import url("https://fonts.googleapis.com/css?family=Titillium+Web:200,200i,300,300i,400,400i,600,600i,700,700i,900&subset=latin-ext");

* {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 0;

  font-family: 'Titillium Web', sans-serif;

}



header {

  background-color: #87509c;

}



.wrapper {

  position: relative;

}



.container {

  position: relative;

}



.container-row {

  position: relative;

}



.wrapper-header {

  width: 1140px;

  height: 588px;

  margin: 0 auto;

  background-color: #87509c;

  position: relative;

}



.wrapper-header a {

  font-size: 16px;

  text-transform: uppercase;

  text-decoration: none;

  color: #fff;

}



.wrapper-header .div-top {

  padding-top: 56px;

}



.wrapper-header .div-top img {

  margin-left: 60px;

}



.wrapper-header .div-top img, .div-top ul {

  display: inline-block;

  vertical-align: top;

}



.wrapper-header .div-top ul {

  position: absolute;

  right: 0;

}



.wrapper-header .div-top ul li {

  display: inline-block;

  vertical-align: top;

  margin-right: 7px;

  padding: 5px 17px;

  border-radius: 5px;

}



.wrapper-header .div-top ul li:hover, .active-link {

  background-color: #643a79;

}



.wrapper-header .div-middle h1 {

  margin-top: 130px;

  font-size: 42px;

  color: #fff;

  font-weight: 700;

  text-align: center;

  line-height: 1.1em;

}



.wrapper-header .div-bottom {

  text-align: center;

  margin-top: 74px;

}



.wrapper-header .div-bottom a {

  font-size: 18px;

  font-weight: 600;

  padding: 19px 83px 17px;

  color: #fff;

  text-decoration: none;

  background-color: #eb7d4b;

  border-bottom: 4px solid #c86a40;

  border-radius: 5px;

}



.wrapper-header .div-bottom a:hover {

  background-color: #ce4f15;

  border-bottom: 4px solid #8a360f;

}



.wrapper-section-1 {

  background-color: #17c2a4;

}



.section-1 {

  width: 1140px;

  height: 745px;

  margin: 0 auto;

  background-color: #17c2a4;

  position: relative;

}



.section-1 .div-top {

  padding-top: 105px;

}



.section-1 .div-top > h1 {

  font-size: 40px;

  font-weight: 700;

  text-transform: uppercase;

  color: #fff;

  text-align: center;

  letter-spacing: 7px;

}



.section-1 .div-top h1:after {

  content: "";

  display: block;

  margin: 0 auto;

  margin-top: 6px;

  width: 86px;

  height: 4px;

  background-color: #14a58c;

}



.section-1 .div-middle p {

  font-size: 18px;

  color: #fff;

  text-align: center;

  margin-top: 15px;

}



.section-1 .div-bottom {

  margin-top: 35px;

}



.section-1 .div-bottom .colmn {

  display: inline-block;

  vertical-align: top;

  margin: 0 10px;

  width: 260px;

  height: 400px;

}



.section-1 .div-bottom .colmn .image {

  width: 208px;

  height: 208px;

  background-image: url("../image/icon_bar.png");

  background-repeat: no-repeat;

  margin: 0 auto;

  margin-bottom: 10px;

}



#branding {

  background-position-x: 30px;

}



#design {

  background-position-x: -225px;

}



#development {

  background-position-x: -485px;

}



#rocket {

  background-position-x: -755px;

}



.section-1 .div-bottom .colmn h2 {

  font-size: 24px;

  font-weight: 700;

  color: #fff;

  text-transform: uppercase;

  text-align: center;

}



.section-1 .div-bottom .colmn p {

  font-size: 16px;

  font-weight: 300;

  color: #fff;

  text-align: center;

  margin-top: 12px;

}



.wrapper-section-2 {

  background-color: #e7f1f8;

}



.section-2 {

  width: 1140px;

  height: 894px;

  margin: 0 auto;

  background-color: #e7f1f8;

  position: relative;

}



.section-2 .div-top h1 {

  font-size: 41px;

  color: #3c4761;

  text-transform: uppercase;

  text-align: center;

  letter-spacing: 3px;

  padding-top: 101px;

}



.section-2 .div-top h1:after {

  content: "";

  display: block;

  margin: 0 auto;

  margin-top: 6px;

  width: 86px;

  height: 4px;

  background-color: #c8d9e5;

}



.section-2 .div-middle p {

  font-size: 18px;

  color: #3c4761;

  text-align: center;

  margin-top: 15px;

}



.section-2 .div-bottom {

  margin-top: 68px;

  text-align: center;

}



.section-2 .div-bottom .colmn {

  display: inline-block;

  vertical-align: top;

  margin: 0 10px;

  width: 260px;

}



.section-2 .div-bottom .colmn .image {

  width: 208px;

  height: 208px;

  border-radius: 50%;

  overflow: hidden;

  margin: 0 auto;

}



.section-2 .div-bottom .colmn .image img {

  width: 100%;

}



.section-2 .div-bottom .colmn h2 {

  font-size: 24px;

  color: #3c4761;

  font-weight: 700;

  text-align: center;

  text-transform: uppercase;

  margin-top: 25px;

}



.section-2 .div-bottom .colmn h3 {

  font-size: 16px;

  color: #30bae7;

  font-weight: 500;

  text-align: center;

}



.section-2 .div-bottom .colmn p {

  font-size: 16px;

  color: #3c4761;

  font-weight: 500;

  text-align: center;

  line-height: 1.5em;

  margin-top: 15px;

}



.section-2 .div-bottom .colmn ul {

  display: block;

  height: 36px;

  margin-top: 22px;

}



.section-2 .div-bottom .colmn li {

  display: inline-block;

  vertical-align: top;

  margin: 0 5px;

}



.section-2 .div-bottom .colmn li a {

  display: block;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background-color: #fff;

  background-image: url("../image/social_icon.png");

  background-repeat: no-repeat;

}



.section-2 .div-bottom .colmn li a:hover {

  background-color: blue;

}



.section-2 .div-bottom .colmn .facebook-icon {

  background-position-x: 0px;

}



.section-2 .div-bottom .colmn .twitter-icon {

  background-position-x: -44px;

}



.section-2 .div-bottom .colmn .linkedin-icon {

  background-position-x: -87px;

}



.section-2 .div-bottom .colmn .mail-icon {

  background-position-x: -131px;

}



.wrapper-section-3 {

  background-color: #fff;

}



.section-3 {

  width: 1140px;

  height: 692px;

  margin: 0 auto;

  background-color: #fff;

  position: relative;

}



.section-3 .div-top h1 {

  font-size: 41px;

  color: #3c4761;

  text-transform: uppercase;

  text-align: center;

  letter-spacing: 3px;

  padding-top: 101px;

}



.section-3 .div-top h1:after {

  content: "";

  display: block;

  margin: 0 auto;

  margin-top: 6px;

  width: 86px;

  height: 4px;

  background-color: #dfe8ed;

}



.section-3 .div-middle p {

  font-size: 18px;

  color: #3c4761;

  text-align: center;

  margin-top: 15px;

}



.section-3 .div-bottom {

  margin-top: 68px;

  text-align: center;

}



.section-3 .div-bottom .colmn {

  display: inline-block;

  vertical-align: top;

  margin: 0 10px;

  width: 260px;

}



.section-3 .div-bottom .colmn .image {

  width: 208px;

  height: 208px;

  margin: 0 auto;

}



.section-3 .div-bottom .colmn .image img {

  width: 100%;

}



.section-3 .div-bottom .colmn .image .image-text {

  font-size: 50px;

  font-weight: 300;

  color: #3c4761;

  position: relative;

  top: -142px;

  left: 0;

}



.section-3 .div-bottom .colmn h2 {

  font-size: 24px;

  color: #3c4761;

  font-weight: 700;

  text-align: center;

  text-transform: uppercase;

  margin-top: 25px;

}



.wrapper-section-4 {

  background-color: #ffdd99;

}



.section-4 {

  width: 1140px;

  height: 1420px;

  margin: 0 auto;

  background-color: #ffdd99;

  position: relative;

  text-align: center;

}



.section-4 .div-top h1 {

  font-size: 41px;

  color: #393939;

  text-transform: uppercase;

  text-align: center;

  letter-spacing: 3px;

  padding-top: 101px;

}



.section-4 .div-top h1:after {

  content: "";

  display: block;

  margin: 0 auto;

  margin-top: 6px;

  width: 86px;

  height: 4px;

  background-color: #e5c37f;

}



.section-4 .div-middle p {

  font-size: 18px;

  color: #393939;

  text-align: center;

  margin-top: 15px;

}



.section-4 .div-middle-2 {

  margin-top: 40px;

  margin-bottom: 65px;

  text-align: center;

}



.section-4 .div-middle-2 .menu-filter {

  display: inline-block;

  vertical-align: top;

  font-size: 18px;

  font-weight: 500;

  color: #393939;

  text-transform: uppercase;

  text-align: center;

  background-color: #ebc985;

  padding: 7px 26px;

  margin-right: 5px;

  border-radius: 5px;

}



.section-4 .div-middle-2 .menu-filter:hover {

  background-color: #fff;

  cursor: pointer;

}



.section-4 .div-middle-2 .menu-filter-active {

  background-color: #fff;

}



.section-4 .div-middle-2 .menu-filter:nth-last-child(1) {

  margin-right: 0px;

}



.section-4 .div-bottom {

  text-align: center;

}



.section-4 .div-bottom .colmn-2 {

  display: inline-block;

  vertical-align: top;

  margin: 10px 10px;

  margin-bottom: 90px;

  width: 520px;

  height: 310px;

}



.section-4 .div-bottom .colmn-2 img {

  width: 100%;

}



.section-4 .div-bottom .colmn-2 h1 {

  margin-top: 25px;

  font-size: 18px;

  font-weight: 500;

  color: #393939;

  text-transform: uppercase;

}



.section-4 a {

  display: inline-block;

  vertical-align: top;

  font-size: 18px;

  font-weight: 600;

  padding: 19px 55px 17px;

  color: #fff;

  text-decoration: none;

  background-color: #17c2a4;

  border-bottom: 4px solid #14a58c;

  border-radius: 5px;

  margin-top: 30px;

  text-transform: uppercase;

}



.section-4 a:hover {

  background-color: #14a58c;

  border-bottom: 4px solid #0d584b;

}



.wrapper-section-5 {

  background-color: #d74680;

}



.section-5 {

  width: 1140px;

  height: 860px;

  margin: 0 auto;

  background-color: #d74680;

  position: relative;

  text-align: center;

}



.section-5 .div-top h1 {

  font-size: 41px;

  color: #fff;

  text-transform: uppercase;

  text-align: center;

  letter-spacing: 3px;

  padding-top: 101px;

}



.section-5 .div-top h1:after {

  content: "";

  display: block;

  margin: 0 auto;

  margin-top: 6px;

  width: 86px;

  height: 4px;

  background-color: #b73c6d;

}



.section-5 .div-middle p {

  font-size: 18px;

  color: #fff;

  text-align: center;

  margin-top: 15px;

  margin-bottom: 50px;

}



.section-5 .div-bottom {

  text-align: center;

}



.section-5 .div-bottom .colmn-2 {

  display: inline-block;

  vertical-align: top;

  margin: 10px 10px;

  margin-bottom: 90px;

  width: 520px;

  text-align: left;

}



.section-5 .div-bottom .colmn-2 .image {

  display: inline-block;

  vertical-align: top;

  width: 100px;

  height: 100px;

  background-color: #787878;

  border-radius: 50%;

  margin-right: 48px;

  overflow: hidden;

}



.section-5 .div-bottom .colmn-2 .image img {

  width: 100%;

  height: 100%;

}



.section-5 .div-bottom .colmn-2 .text {

  display: inline-block;

  vertical-align: top;

}



.section-5 .div-bottom .colmn-2 .text p {

  font-size: 21px;

  color: #fff;

  font-style: italic;

  font-weight: 300;

  margin-bottom: 20px;

}



.section-5 .div-bottom .colmn-2 .text h1 {

  font-size: 24px;

  color: #fff;

  font-weight: 700;

  text-transform: uppercase;

}



.section-5 .div-bottom .colmn-2 .text h2 {

  font-size: 18px;

  font-weight: 500;

  color: #ffdd99;

}



.wrapper-section-6 {

  background-color: #3c5499;

}



.section-6 {

  width: 1140px;

  height: 765px;

  margin: 0 auto;

  background-color: #3c5499;

  position: relative;

}



.section-6 .div-top h1 {

  font-size: 41px;

  color: #fff;

  text-transform: uppercase;

  text-align: center;

  letter-spacing: 3px;

  padding-top: 101px;

}



.section-6 .div-top h1:after {

  content: "";

  display: block;

  margin: 0 auto;

  margin-top: 6px;

  width: 86px;

  height: 4px;

  background-color: #273a71;

}



.section-6 .div-middle p {

  font-size: 18px;

  color: #fff;

  text-align: center;

  margin-top: 15px;

}



.section-6 .div-bottom {

  font-size: 18px;

  color: #fff;

  margin-top: 68px;

  text-align: center;

}



.section-6 .div-bottom form {

  margin: 0 auto;

  width: 888px;

  text-align: center;

}



.section-6 .div-bottom input {

  font-size: 18px;

  color: #000;

  width: 387px;

  height: 55px;

  margin: 0 15px;

  padding-left: 27px;

  border-radius: 3px;

}



.section-6 .div-bottom input[type="submit"] {

  margin: 0;

  padding: 0;

  width: 287px;

  height: 70px;

  cursor: pointer;

  font-size: 18px;

  font-weight: 600;

  color: #fff;

  text-decoration: none;

  text-transform: uppercase;

  background-color: #30bae7;

  border-bottom: 4px solid #299ec5;

  border-radius: 5px;

}



.section-6 .div-bottom input[type="submit"]:hover {

  background-color: #299ec5;

  border-bottom: 4px solid #217895;

}



.section-6 .div-bottom textarea {

  font-size: 18px;

  color: #000;

  width: 804px;

  padding: 10px 27px;

  margin: 27px 15px;

  margin-bottom: 59px;

  border-radius: 3px;

}



footer {

  background-color: #344b8e;

}



.wrapper-footer {

  width: 1140px;

  height: 110px;

  margin: 0 auto;

  background-color: #344b8e;

  position: relative;

  text-align: center;

}



footer .wrapper-footer ul {

  padding: 37px 0;

}



footer .wrapper-footer ul li {

  display: inline-block;

  margin: 0 25px;

}



footer .wrapper-footer ul li a {

  text-decoration: none;

  font-size: 24px;

  font-weight: 600;

  color: #fff;

}



footer .wrapper-footer ul li a:hover {

  color: #30bae7;

}



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

  header {

    background: #ee2;

  }



  .wrapper-header {

    width: 100%;

    height: 1000px;

    background: #ee2;

  }



  .wrapper-header .div-middle h1 {

    font-size: 30px;

    margin-top: 80px;

  }



  .wrapper-header .div-top {

    background: #000;

  }

}



/*# sourceMappingURL=style.css.map */