/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body { font-family: 'Lato','Open Sans', sans-serif; text-align: center; font-size: 16px; line-height: 1.5; font-weight: 300; color: #8d837d; background-color: #FFFFFF; }

/** Set `margin-bottom` to maintain vertycal rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure { margin-bottom: 15px; }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Lists */
li { list-style-type: none; }
li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 300; }

/** Links */
a { color: #8d837d; text-decoration: none; }
a:visited { color: #d9d9d9; }
a:hover { color: #d9d9d9; text-decoration: underline; }

:focus { outline: none; }

/** Clearfix */
section:after, footer:after { content: ""; display: table; clear: both; }

section, footer { padding: 60px 50px; }
@media screen and (max-width: 640px) { section, footer { padding: 50px 15px; } }
section > ul, footer > ul { list-style-type: none; margin-left: 0; }
section > ul > li, footer > ul > li { float: left; }

header { background-color: #FFFFFF; position: relative; color: #8d837d; height: 550px; overflow: hidden; }
header h1 { font-family: 'Lato','Open Sans', sans-serif; font-size: 1.75em; margin: 0; }
header .line { width: 100%; height: 1px; background-color: #8d837d; margin: 30px auto; opacity: 0.8; }
header #logobox { position: relative; top: 50px; margin: 0 auto; width: 650px; }
@media screen and (max-width: 640px) { header #logobox { width: 90%; } }

footer { background-color: #F7F7F7; color: #666; margin-top: 40px; }
footer > ul > li { width: 33%; }
@media screen and (max-width: 640px) { footer > ul > li { width: 100%; margin: 10px 0; } }
footer a, footer a:visited { color: #666; }

.wedo h2 { font-family: 'Lato','Open Sans', sans-serif; font-weight: 300; font-size: 1.75em; }
.wedo > ul { max-width: 750px; margin: 0 auto; }
.wedo > ul > li { width: 50%; margin-top: 50px; }
@media screen and (max-width: 640px) { .wedo > ul > li { width: 100%; } }
.wedo > ul > li img { width: 100px; }
.wedo .list > li { font-size: 1.1em; color: #666; }

.technology_list h2 { font-family: 'Lato','Open Sans', sans-serif; font-weight: 300; font-size: 1.75em; }
.technology_list > ul { max-width: 750px; margin: 0 auto; }
.technology_list > ul > li { width: 50%; margin-top: 50px; }
@media screen and (max-width: 640px) { .technology_list > ul > li { width: 100%; } }
.technology_list > ul > li img { width: 100px; }
.technology_list .list > li { font-size: 1.1em; color: #666; }
.technology_list p { color: #666; }

.quote { padding: 30px 0; background-color: #8d837d; color: #FFF; }
.quote p { margin: 60px auto; font-family: 'Lato','Open Sans', sans-serif; font-size: 1em; width: 650px; }
@media screen and (max-width: 640px) { .quote p { width: 90%; } }

.technologies { padding: 30px 0; background-color: #FFFFFF; color: #8d837d; }
.technologies p { margin: 60px auto; font-family: 'Lato','Open Sans', sans-serif; font-size: 1em; width: 650px; }
@media screen and (max-width: 640px) { .technologies p { width: 90%; } }


.clients h2 { font-family: 'Lato','Open Sans', sans-serif; font-weight: 300; font-size: 1.75em; }
.clients > ul { max-width: 750px; margin: 0 auto; }
.clients > ul > li { width: 50%; margin-top: 50px; }
@media screen and (max-width: 640px) { .clients > ul > li { width: 100%; } }
.clients > ul > li img { width: 200px; }
.clients .list > li { font-size: 1.1em; color: #666; }
.clients p { color: #666; }

.message { padding: 30px 0; background-color: #8d837d; color: #FFF; }
.message p { margin: 60px auto; font-family: 'Lato','Open Sans', sans-serif; font-size: 1.75em; width: 650px; }
@media screen and (max-width: 640px) { .message p { width: 90%; } }


.title { text-transform: uppercase; margin: 30px 0; letter-spacing: 1px; font-size: 1em; margin-bottom: 10px; color: #000000; }

#logobox { -webkit-animation: thefade 1s ease; -moz-animation: thefade 1s ease; animation: thefade 1s ease; }

@-webkit-keyframes thefade { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes thefade { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes thefade { 0% { opacity: 0; }
  100% { opacity: 1; } }



  .customers {
  padding: 80px 10px; }
  .customers h2 {
    text-align: center;
    margin-bottom: 40px; }
  .customers img {
    display: block;
    height: auto;
    width: auto;
    margin: 0px auto; }
  .customers .customer {
    display: none;
    text-align: center; }
    .customers .customer > div {
      border-right: 1px solid #efefef;
      border-bottom: 1px solid #efefef; }
    @media screen and (max-width: 64em) {
      .customers .customer:nth-of-type(3n) > div {
        border-right: none; }
      .customers .customer:nth-of-type(-n+12) {
        display: inline-block; }
      .customers .customer:nth-of-type(n+10) > div {
        border-bottom: none; } }
    @media screen and (min-width: 64em) {
      .customers .customer:nth-of-type(5n) > div {
        border-right: none; }
      .customers .customer:nth-of-type(-n+20) {
        display: inline-block; }
      .customers .customer:nth-of-type(n+16) > div {
        border-bottom: none; } }

.casegrid a {
  border: none; }
.casegrid .case {
  text-align: center;
  color: #fff;
  background-size: cover;
  background-position: center center; }
  .casegrid .case h2 {
    font-size: 2em;
    margin-top: 100px;
    margin-bottom: 25px; }
    @media screen and (min-width: 64em) {
      .casegrid .case h2 {
        font-size: 3em; } }
  .casegrid .case h2, .casegrid .case p {
    text-align: center; }
  .casegrid .case p {
    font-weight: 500;
    font-size: 1.2em; }
  .casegrid .case .dots {
    background-color: #fff;
    color: #000;
    border-radius: 100%;
    text-align: center;
    width: 31px;
    height: 31px;
    margin: 0 auto;
    margin-bottom: 15%; }
  .casegrid .case:hover {
    color: #00ffb4; }
    .casegrid .case:hover .dots {
      background-color: #00ffb4; }