@font-face {
    font-family: 'josefin_slabthin';
    src: url('../fonts/josefinslab-thin-webfont.eot');
    src: url('../fonts/josefinslab-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/josefinslab-thin-webfont.woff') format('woff'),
         url('../fonts/josefinslab-thin-webfont.ttf') format('truetype'),
         url('../fonts/josefinslab-thin-webfont.svg#josefin_slabthin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'josefin_slablight';
    src: url('../fonts/josefinslab-light-webfont.eot');
    src: url('../fonts/josefinslab-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/josefinslab-light-webfont.woff') format('woff'),
         url('../fonts/josefinslab-light-webfont.ttf') format('truetype'),
         url('../fonts/josefinslab-light-webfont.svg#josefin_slablight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'quicksandlight';
    src: url('../fonts/quicksand-light-webfont.eot');
    src: url('../fonts/quicksand-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/quicksand-light-webfont.woff') format('woff'),
         url('../fonts/quicksand-light-webfont.ttf') format('truetype'),
         url('../fonts/quicksand-light-webfont.svg#quicksandlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'quicksandregular';
    src: url('../fonts/quicksand-regular-webfont.eot');
    src: url('../fonts/quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/quicksand-regular-webfont.woff') format('woff'),
         url('../fonts/quicksand-regular-webfont.ttf') format('truetype'),
         url('../fonts/quicksand-regular-webfont.svg#quicksandregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html,
body {
  font-size: 100%;
}

body {
  background: #3b3c3f;
  color: #5a4b4b;
  padding: 0;
  margin: 0;
  font-family: "Verdana", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 150%;
  position: relative;
  cursor: default; 
}

p {
  margin: 0px 0 30px 0;
}

a:link,
a:visited,
a:active {
  color: #28b7a1;
}

a:hover {
  color: #24dabe;
}

div.header,
div#summary,
div#footer {
  display: block;
}

div.header {
  background: #e2d0a5 url(../images/busy_city_at_dawn.jpg) center no-repeat;
  height: 430px;
}

div.header h1 {
  background: url(../images/logo.png);
  text-indent: -99999em;
  height: 123px;
  width: 180px;
  margin: 0 auto;
}

div.header h2.tagline {
  font-family: "josefin_slablight";
  font-size: 32px;
  font-weight: normal;
  margin: 65px 0 0 0;
  text-align: center;
}
  .mac div.header h2.tagline {
    font-family: "josefin_slabthin";
  }

div#main_navigation ul {
  border: #75dfcf 1px solid;
  color: #ffffff;
  font-family: "quicksandregular";
  font-size: 24px;
  margin: 105px auto 0 auto;
  padding: 0;
  width: 797px;
  list-style-type: none;
}
  .mac div#main_navigation ul {
    font-family: "quicksandlight";
  }

div#main_navigation ul li {
  display: inline-block;
  margin: 1px 0px 1px 1px;
  zoom: 1;
  *display: inline;
}

div#main_navigation ul li a {
  color: #ffffff;
  display: block;
  margin: 0;
  padding: 11px 0;
  text-align: center;
  text-decoration: none;
  width: 198px;
}

div#main_navigation ul li.current a {
  background: #75dfcf;
}

div#main_navigation ul li a:hover {
  background-color: #75dfcf;
  -webkit-animation: menuHoverFade .25s;
}

/* Hover animation keyframes */
@-webkit-keyframes menuHoverFade {
  from {background: none; }
  to {background: #75dfcf; }
}

div#page_content {
  background: #fcf5ee;
  border-top: #d8c69a 4px solid;
  padding-bottom: 50px;
}

div#summary {
  background: #5b5c5c;
  color: #cbe0ea;
  font-size: 14px;
  padding-bottom: 20px;
}

div#summary .row {
  width: 780px;
  margin: auto;
  padding-top: 30px;
}

div#summary .row .item {
  background-repeat: no-repeat;
  background-position: top center;
  float: left;
  width: 245px;
}

div#summary .row .item.connected {
  background-image: url(../images/cloud_tentpole.png);
}

div#summary .row .item.scalable {
  background-image: url(../images/scalable_tentpole.png);
  margin: 0 22px;
}

div#summary .row .item.multiplatform {
  background-image: url(../images/platforms_tentpole.png);
}

div#summary .row .item h5 {
  border-bottom: #7da3a6 1px solid;
  color: #ffffff;
  display: block;
  font-family: "quicksandregular";
  font-size: 25px;
  font-weight: normal;
  margin: 0 0 5px 0;
  padding: 135px 0 10px 0;
  text-align: center;
  /*text-shadow: 0 0 1px rgba(0,0,0,0.3);*/
  /*-webkit-text-stroke: 0.25px;*/
}
  .mac div#summary .row .item h5 {
    font-family: "quicksandlight";
  }

div#main_content {
  font-size: 14px;
  width: 780px;
  line-height: 28px;
  margin: auto;
  padding-top: 25px;
}

div#main_content h4 {
  color: #4e4e4e;
  font-family: "quicksandregular";
  font-size: 34px;
  font-weight: normal;
  margin: 0 0 25px 0;
}
  .mac div#main_content h4 {
    font-family: "quicksandlight";
  }

div#main_content p.one {
  background: url(../images/10plus.png) 50px 15px no-repeat;
  padding: 30px 0 40px 270px;
  margin-bottom: 0;
}

div#footer {
  padding: 50px;
}

/******* Pages *******/
#who_we_are div#main_content h5.content_highlight {
  background: url(../images/dev_design_engi.png) 10px 10px no-repeat;
  float: left;
  height: 260px;
  margin: 0;
  width: 248px;
}

#who_we_are div#main_content p {
  margin-left: 270px;
}

ul#contact_options {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 250px;
}

ul#contact_options li {
  border: #d8c69a 1px solid;
  margin: 0 0 20px 0;
  padding: 10px 10px 10px 55px;
}

ul#contact_options li.email {
  background: url(../images/mail_icon.png) 13px center no-repeat;
}

ul#contact_options li.phone {
  background: url(../images/phone_icon.png) 13px center no-repeat;
}


/******* hacks *******/
.clear {
  clear: both;
}
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}