services.css.scss

@import "common";

.services {

  p {
    display: block;
    color: $gray;
    font-family: "Droid Serif", serif;
    font-size: 14px;
  }

  h5 {
    text-transform: uppercase;
    font: bold 18px 'PT Sans', sans-serif;
  }

}

@media only screen and (min-width:960px) {
  services_box {
    height: 642px;
  }
}

.services_box {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding: 70px;
  position: relative;

  .circle0 {
    left: 50%;
    top: 4%;
    margin-left: -55px;
  }
  .circle1 {
    left: 9%;
    top: 21.5%;
  }
  .circle2 {
    left: 9%;
    bottom: 21.5%;
  }
  .circle3 {
    left: 50%;
    bottom: 4%;
    margin-left: -55px;
  }
  .circle4 {
    right: 9%;
    top: 21.5%;
  }
  .circle5 {
    right: 9%;
    bottom: 21.5%;
  }

  .middle {
    background: url(services/middle.png);
    left: 50%;
    top: 50%;
    padding-top: 30px;
    position: absolute;
    width: 141px;
    height: 163px;
    margin-left: -67px;
    margin-top: -81px;
    &:hover {
      background-position: -141px 0;
      .icon {
        background-position-x: -70px;
      }
    }
  }
}

.circle {
  border: 5px solid $blue;
  background: $dark-blue;
  border-radius: 100px;
  width: 110px;
  height: 110px;
  content: ' ';
  position: absolute;
  display: block;

  -webkit-transition: all 0.3s ease-out; /* Safari 3.2+, Chrome */
  -moz-transition: all 0.3s ease-out; /* Firefox 4-15 */
  -o-transition: all 0.3s ease-out; /* Opera 10.5–12.00 */
  transition: all 0.3s ease-out; /* Firefox 16+, Opera 12.50+ */

  &:hover {
    border: 5px solid white;
    background: $blue;

    .icon {
      background-position: -70px 0;
    }
    .one-icon {
        background-position: -70px -0px !important;
    }
    .two-icon {
        background-position: -70px -70px !important;
    }
    .three-icon {
        background-position: -70px -140px !important;
    }
    .four-icon {
        background-position: -70px -210px !important;
    }
    .five-icon {
        background-position: -70px -280px !important;
    }
    .six-icon {
        background-position: -70px -350px !important;
    }
    .idea-icon {
      background-position: -70px  -210px;
    }
    .books-icon {
      background-position: -70px  -420px;
    }
    .design-icon {
      background-position: -70px  -70px;
    }
    .design-icon {
      background-position: -70px  -70px;
    }
    .develop-icon {
      background-position: -70px  -140px;
    }
    .produce-icon {
      background-position: -70px  -350px;
    }
    .process-icon {
      background-position: -70px  -280px;
    }
    .agile-icon {
      background-position: -70px  -490px;
    }
    .ruby-icon {
      background-position: -70px  -560px;
    }
    .test-driven-icon {
      background-position: -70px  -630px;
    }
    .design-small-icon {
      background-position: -70px  -770px;
    }
    .global-icon {
      background-position: -70px  -840px;
    }
    .access-icon {
      background-position: -70px  -910px;
    }
  }
}

.star-header {
  margin-top: 80px;
  border-top: 2px solid $blue;
  border-bottom: 1px dashed $blue;
  font: bold 18px 'PT Sans', sans-serif;
  color: white;
  text-transform: uppercase;
  padding: 25px 0px 25px 50px;
  background: url(star.png) no-repeat 0px 20px;
  position: relative;

  .a-button {
    position: absolute;
    right: 5px;
    top: 17px;
    color: #ffffff;
  }

  a {
    color: $dark-blue;

    &:hover {
      color: $dark-gray;
    }
  }

  p {
    font-family: "Droid Serif",serif;
  }
}

@media only screen and (min-width: 960px) {

  .star-header {
    .a-button {
      right: 0px !important;
      margin-right: 0px;
    }
  }

}

@media only screen and (max-width: 960px) {
  .star-header {
    padding: 25px 0px 25px 90px;
    background: url(star.png) no-repeat 30px 20px;
  }
}

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

  .services {

    h5, p {
      text-align: center;
    }

  }

  .star-header {
    padding: 25px 0px 25px 90px;
    background: url(star.png) no-repeat 30px 20px;

    .a-button {
      width: auto !important;
    }

  }

}

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

  .star-header {
    padding: 70px 0px 25px 0px;
    background: url(star.png) no-repeat center 20px;
    text-align: center;

    .a-button {
      position: static;
      width: 90% !important;
      margin-top: 20px;
    }

  }

}

.services {
  .row {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .circle {
    margin: auto;
    position: static;
  }
}

.icon {
  margin-top: 15px;
  width: 70px;
  height: 70px;
  margin-left: auto;
  margin-right: auto;
  background: url(services/icons.png);
  background-position: 0 0px;
  content: ' ';
  z-index: 20px;
}


.one-icon {

  background: url(numbers.png) !important;
  background-position: 0 0px !important;
  &:hover {
    background-position: -70px -0px !important;
  }

}
.two-icon {

  background: url(numbers.png) !important;
  background-position: 0 -70px !important;
  &:hover {
    background-position: -70px -70px !important;
  }

}
.three-icon {

  background: url(numbers.png) !important;
  background-position: 0 -140px !important;
  &:hover {
    background-position: -70px -140px !important;
  }

}
.four-icon {

  background: url(numbers.png) !important;
  background-position: 0 -210px !important;
  &:hover {
    background-position: -70px -210px !important;
  }

}
.five-icon {

  background: url(numbers.png) !important;
  background-position: 0 -280px !important;
  &:hover {
    background-position: -70px -280px !important;
  }

}
.six-icon {

  background: url(numbers.png) !important;
  background-position: 0 -350px !important;
  &:hover {
    background-position: -70px -350px !important;
  }
}

.idea-icon {

  background-position: 0 -210px;
  &:hover {
    background-position: -70px -210px;
  }
}

.books-icon {
  background-position: 0 -420px;
  &:hover {
    background-position: -70px  -420px;
  }
}

.design-icon {

  background-position: 0 -70px;

  &:hover {
    background-position: -70px  -70px;
  }
}

.design-icon {
  background-position: 0 -70px;
  &:hover {
    background-position: -70px  -70px;
  }
}

.develop-icon {
  background-position: 0 -140px;
  &:hover {
    background-position: -70px  -140px;
  }
}

.produce-icon {
  background-position: 0 -350px;
  &:hover {
    background-position: -70px  -350px;
  }
}

.process-icon {
  background-position: 0 -280px;
  &:hover {
    background-position: -70px  -280px;
  }

}

.agile-icon {
  background-position: 0 -490px;
  &:hover {
    background-position: -70px  -490px;
  }
}

.ruby-icon {
  background-position: 0 -560px;

  &:hover {
    background-position: -70px  -560px;
  }
}

.test-driven-icon {
  background-position: 0 -630px;
  &:hover {
    background-position: -70px  -630px;
  }

}

.design-small-icon {
  background-position: 0 -770px;
  &:hover {
    background-position: -70px  -770px;
  }

}

.global-icon {

  background-position: 0 -840px;

  &:hover {
    background-position: -70px  -840px;
  }

}

.access-icon {
  background-position: 0 -910px;
  &:hover {
    background-position: -70px  -910px;
  }

}

.get-a-proposal {
  text-align: center;

  .graytext {
    font-size: 33px;
    text-align: center;
    line-height: 120%;
    display: block;
    margin: auto;
  }

  a {
    margin-top: 30px;
    display: inline-block;
  }

  margin-top: 30px;
  border-top: 2px solid $blue;
  padding-top: 40px;
}