@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
/*
ie7 error
*/
.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
/*
Clear fix
*/
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
header,
nav,
section,
article,
figure {
  display: block;
}
h1,
h2,
h3,
h4,
ul,
li,
p,
header,
nav,
section,
article,
figure,
input,
label,
textarea {
  margin: 0;
  padding: 0;
}
/*
Lato
*/
/*==========
	Colors
===========*/
/*==========
	Mixins
===========*/
/*==========
	Body
===========*/
html,
body {
  height: 100%;
}
body {
  position: relative;
  font-size: 100%;
  font-family: 'Lato', Helvetica, sans-serif;
}
.content-wrapper {
  width: 90%;
  margin: 0 auto;
  max-width: 62.5em;
}
/*==========
	Header
===========*/
header {
  height: 4.375em;
  width: 100%;
  position: fixed;
  background: white;
  top: 0;
  z-index: 10;
}
header div h1 {
  font-size: 1.875em;
  /*30*/

  line-height: 70px;
  float: left;
  margin-left: 0.9375em;
  /*15*/

}
header div h1 a {
  color: black;
  text-decoration: none;
}
header div h1:hover {
  cursor: pointer;
}
header div .mobile-nav {
  display: none;
}
header div nav {
  float: right;
  width: 50%;
  /*600/1000*/

}
header div nav ul {
  list-style: none;
}
header div nav ul li {
  float: left;
  line-height: 70px;
  width: 33.333333333333%;
  /* 200/600*/

}
header div nav ul li a {
  font-size: 1.125em;
  /*18*/

  font-weight: 400;
  display: block;
  color: black;
  width: 100%;
  text-align: center;
  text-decoration: none;
}
/*
=======================
Fixed banner image
=======================
*/
.home-banner {
  position: fixed;
  top: 4.375em;
  height: 43.75em;
  /*550*/

  background: url(../img/home-ocean.jpg) no-repeat top center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.home-banner .heading {
  margin-top: 10.9375em;
  /*175*/

}
.home-banner .heading img,
.home-banner .heading h2 {
  float: left;
}
.home-banner .heading h2 {
  margin-top: 1em;
  /*16*/

  margin-left: 1.25em;
  font-weight: 400;
  font-size: 1.25em;
  /*20*/

  text-transform: uppercase;
}
/*
=======================
Development Section
=======================
*/
.development {
  position: relative;
  background: #e7dfed;
  z-index: 9;
  margin-top: 50em;
  margin-bottom: 4.6875em;
  /*60*/

}
.development .content-wrapper {
  /*Gallery*/

}
.development .content-wrapper .ipad-selected-work {
  display: none;
}
.development .content-wrapper .info {
  width: 32%;
  /*320/1000*/

  float: left;
  margin-top: 11.25em;
  /*180*/

}
.development .content-wrapper .info h2 {
  font-size: 3em;
  /*48*/

  color: #845aa6;
  padding-bottom: 0.1875em;
  /*3*/

  border-bottom: 4px solid black;
}
.development .content-wrapper .info p {
  font-size: 1.125em;
  /*18*/

  line-height: 1.5em;
  /*24*/

  border-bottom: 0.0625em solid #000000;
  padding-left: 10px;
  padding-bottom: 0.625em;
  /*10*/

  margin-top: 2.1875em;
  /*35*/

}
.development .content-wrapper .info p:last-of-type {
  margin: 0;
  margin-top: 10px;
  border-bottom: 4px solid black;
  color: #845aa6;
  position: relative;
}
.development .content-wrapper .info p:last-of-type i {
  position: absolute;
  right: 50px;
  top: -3px;
}
.development .content-wrapper .info p:hover {
  cursor: pointer;
}
.development .content-wrapper .selected-work {
  float: left;
  width: 60%;
  /*600/1000*/

  margin-top: 50px;
  text-align: center;
}
.development .content-wrapper .selected-work img {
  display: inline-block;
  max-width: 100%;
  padding: 4%;
  /*40/1000*/

  height: auto;
}
.development .content-wrapper .thumb-gallery {
  -webkit-border-radius: 0.625em;
  -moz-border-radius: 0.625em;
  border-radius: 0.625em;
  clear: both;
  width: 100%;
  margin-bottom: 4.0625em;
  /*65*/

  /* Project Details*/

}
.development .content-wrapper .thumb-gallery .language-select {
  margin-bottom: 1.25em;
}
.development .content-wrapper .thumb-gallery ul {
  list-style: none;
}
.development .content-wrapper .thumb-gallery ul li {
  float: left;
  width: 33.3333333333333%;
  position: relative;
  margin-bottom: 0.625em;
}
.development .content-wrapper .thumb-gallery ul li .project-wrapper {
  margin: 0 auto;
  padding: 0.625em;
  width: 90%;
  background: #dacee5;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  /*figure*/

  /*title, details, demo*/

}
.development .content-wrapper .thumb-gallery ul li .project-wrapper figure {
  width: 40%;
  float: left;
  margin-right: 5%;
}
.development .content-wrapper .thumb-gallery ul li .project-wrapper figure img {
  max-width: 100%;
  height: auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid #a98cc1;
}
.development .content-wrapper .thumb-gallery ul li .project-wrapper .project-info-wrapper {
  position: relative;
  float: left;
  width: 55%;
}
.development .content-wrapper .thumb-gallery ul li .project-wrapper .project-info-wrapper h2 {
  font-size: 1.25em;
  margin-top: 0.625em;
}
.development .content-wrapper .thumb-gallery ul li .project-wrapper .project-info-wrapper .project-nav {
  position: absolute;
  top: 4.375em;
}
.development .content-wrapper .thumb-gallery ul li .project-wrapper .project-info-wrapper .project-nav a {
  display: block;
  width: 100%;
  font-size: 0.8125em;
  /*13*/

  padding: 0.1875em 0.5em;
  margin-right: 0.3125em;
  margin-bottom: 0.5em;
  /*8*/

  background: #a98cc1;
  color: #dacee5;
  text-decoration: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.development .content-wrapper .thumb-gallery .details {
  margin-top: 2.5em;
  /*40*/

  /* END - projects-random*/

}
.development .content-wrapper .thumb-gallery .details .btn {
  padding: 0.3125em 0.625em;
  margin-right: 0.3125em;
  background: #a98cc1;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #dacee5;
  text-decoration: none;
}
.development .content-wrapper .thumb-gallery .details .back {
  background: #dacee5;
  color: #906baf;
}
.development .content-wrapper .thumb-gallery .details .details-wrapper {
  width: 96%;
  padding: 2%;
  margin-top: 1.25em;
  /*20*/

  background: #dacee5;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.development .content-wrapper .thumb-gallery .details .details-wrapper figure {
  width: 30%;
  float: left;
  /*margin-top: 20/16em; /*20*/

}
.development .content-wrapper .thumb-gallery .details .details-wrapper figure img {
  max-width: 100%;
  height: auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid #a98cc1;
}
.development .content-wrapper .thumb-gallery .details .details-wrapper .project-details {
  width: 50%;
  float: left;
  margin-left: 1.875em;
  /*30*/

  margin-top: 3.125em;
  /*50*/

}
.development .content-wrapper .thumb-gallery .details .details-wrapper .project-details ul li:first-of-type {
  border-bottom: 3px solid #845aa6;
}
.development .content-wrapper .thumb-gallery .details .details-wrapper .project-details ul li:last-of-type {
  border-bottom: none;
  margin-top: 20px;
}
.development .content-wrapper .thumb-gallery .details .details-wrapper .project-details ul li {
  width: 100%;
  float: none;
  border-bottom: 1px solid #845aa6;
  padding-bottom: 0.625em;
}
.development .content-wrapper .thumb-gallery .details .details-wrapper .project-details ul li h3 {
  margin-bottom: 0.1875em;
}
.development .content-wrapper .thumb-gallery .details .details-wrapper .project-details ul .language {
  display: inline-block;
}
.development .content-wrapper .thumb-gallery .details .projects-random {
  margin-top: 1.25em;
  /*20*/

}
.development .content-wrapper .thumb-gallery .details .projects-random h3 {
  color: #845aa6;
  border-bottom: 3px solid #845aa6;
  padding-bottom: 0.625em;
  margin-bottom: 1.25em;
}
.development .content-wrapper .thumb-gallery .details .projects-random .random-projects li {
  width: 25%;
}
.development .content-wrapper .thumb-gallery .details .projects-random .random-projects li .random-projects-wrapper {
  width: 90%;
  margin: 0 auto;
  position: relative;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  overflow: hidden;
}
.development .content-wrapper .thumb-gallery .details .projects-random .random-projects li .random-projects-wrapper figure {
  width: 100%;
}
.development .content-wrapper .thumb-gallery .details .projects-random .random-projects li .random-projects-wrapper figure img {
  max-width: 100%;
  /*margin-left:5%;*/

  height: auto;
}
.development .content-wrapper .thumb-gallery .details .projects-random .random-projects li .random-projects-wrapper .view-projects-slideup {
  display: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #a98cc1;
  text-align: center;
  vertical-align: center;
  background: rgba(132, 90, 166, 0.8);
}
.development .content-wrapper .thumb-gallery .details .projects-random .random-projects li .random-projects-wrapper .view-projects-slideup h3 {
  margin-top: 40%;
  color: white;
  border: none;
}
.development .content-wrapper .thumb-gallery .details .projects-random .random-projects li .random-projects-wrapper .view-projects-slideup::after {
  padding-top: 100%;
}
/*
=======================
Contact Section
=======================
*/
.contact {
  position: relative;
  height: 100%;
  background: #fac2ba;
  z-index: 9;
}
.contact .content-wrapper {
  margin-top: 50px;
}
.contact .content-wrapper .success {
  color: black;
  font-size: 1.25em;
  margin-top: 0.9375em;
  /*15*/

}
.contact .content-wrapper .info {
  width: 32%;
  /*320/1000*/

  float: left;
  margin-top: 11.25em;
  /*180*/

}
.contact .content-wrapper .info h2 {
  font-size: 3em;
  /*48*/

  color: #f05a44;
  padding-bottom: 0.1875em;
  /*3*/

  border-bottom: 4px solid black;
}
.contact .content-wrapper .info p {
  font-size: 1.125em;
  /*18*/

  line-height: 1.5em;
  /*24*/

  border-bottom: 0.0625em solid #000000;
  padding-left: 10px;
  padding-bottom: 0.625em;
  /*10*/

  margin-top: 2.1875em;
  /*35*/

}
.contact .content-wrapper .info p:last-of-type {
  margin: 0;
  margin-top: 10px;
  border-bottom: 4px solid black;
  color: #f05a44;
  position: relative;
}
.contact .content-wrapper .info p:last-of-type i {
  position: absolute;
  right: 50px;
  top: -3px;
}
.contact .content-wrapper .info p:hover {
  cursor: pointer;
}
.contact .content-wrapper .info ul {
  list-style: inside;
}
.contact .content-wrapper .contact-form {
  float: left;
  margin-top: 5.3125em;
  width: 58%;
  /*580/1000*/

  padding: 4%;
  /*40/1000*/

}
.contact .content-wrapper .contact-form form {
  width: 100%;
  /*480/580*/
}
.contact .content-wrapper .contact-form p {
  border-bottom: 1px solid black;
  padding: 0.625em 0;
  font-size: 1.125em;
  /*18*/

}
.contact .content-wrapper .contact-form p label {
  display: block;
  width: 20%;
  float: left;
  line-height: 35px;
}
.contact .content-wrapper .contact-form p input,
.contact .content-wrapper .contact-form p textarea {
  border: none;
}
.contact .content-wrapper .contact-form p input {
  width: 80%;
  height: 35px;
  float: right;
}
.contact .content-wrapper .contact-form p textarea {
  resize: none;
  width: 80%;
  float: right;
}
.contact .content-wrapper .contact-form p:last-of-type {
  border: none;
}
.contact .content-wrapper .contact-form p:last-of-type input {
  background: #f05a44;
  color: #fac2ba;
  float: right;
  width: 100px;
}
/* ==========================================================================
   Media Queries
   ========================================================================== 
  */
/* i-pad portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .home-banner {
    display: none;
  }
  .development {
    margin-top: 4.375em;
    /*70*/
  
    margin-bottom: 0;
  }
  .development .content-wrapper {
    width: 100%;
  }
  .development .content-wrapper .ipad-selected-work {
    width: 80%;
    margin: 0 auto;
    margin-top: 1.875em;
    /*30*/
  
    display: block;
  }
  .development .content-wrapper .ipad-selected-work img {
    padding: 1.25em;
    /*15*/
  
    max-width: 100%;
    height: auto;
  }
  .development .content-wrapper article.info {
    margin-top: 1.5625em;
    /*25*/
  
    width: 43.75em;
    /*720*/
  
    margin: 0 auto;
    display: block;
    float: none;
  }
  .development .content-wrapper article.info p {
    font-size: 1.4375em;
    /*23*/
  }
  .development .content-wrapper article.info p + p {
    font-weight: bold;
  }
  .development .content-wrapper .selected-work {
    display: none;
  }
}
/* i-pad landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .home-banner {
    display: none;
  }
  .development {
    margin-top: 4.375em;
    /*70*/
  
    margin-bottom: 0 ;
  }
  .development .content-wrapper article.info {
    margin-top: 0;
    margin-top: 7.8125em;
  }
}
@media all and (max-width: 960px) {
  .development .content-wrapper {
    width: 54em;
    /*864*/
  
  }
  .development,
  .contact {
    min-height: 700px;
    width: inherit;
  }
}
@media all and (max-width: 768px) {
  header .content-wrapper {
    width: 100%;
  }
  header h1 {
    margin-left: 1.5625em;
    /*25*/
  
  }
  header p .mobile-nav {
    cursor: pointer;
    display: block;
    float: right;
    margin-right: 0.9375em;
    /*15*/
  
    margin-top: 0.625em;
    /*10*/
  
  }
  header div nav {
    display: none;
    float: none;
    width: 100%;
    position: absolute;
    top: 4.375em;
    /*70*/
  
  }
  header div nav ul li {
    float: none;
    width: 100%;
  }
  header div nav ul li a {
    font-size: 1.25em;
    /*20*/
  }
  header div nav ul li:nth-child(1) {
    background: #845aa6;
  }
  header div nav ul li:nth-child(1) a {
    color: #cebddc;
  }
  header div nav ul li:nth-child(2) {
    background: #f05a44;
  }
  header div nav ul li:nth-child(2) a {
    color: #fbd7d2;
  }
  header div nav ul li:nth-child(3) {
    background: #EEE;
    border-bottom: 4px solid #AAA;
  }
  .development .content-wrapper {
    width: 90%;
  }
  .development .content-wrapper .info {
    width: 40%;
    margin-top: 9.375em;
    padding: 0;
  }
  .development .content-wrapper .info h2 {
    font-size: 2.5em;
    /*40*/
  }
  .development .content-wrapper .info p {
    margin-top: 0.9375em;
  }
  .development .content-wrapper .selected-work {
    width: 60%;
    margin-top: 7.1875em;
    padding: 0;
  }
  .development .content-wrapper .selected-work img {
    margin-top: 0;
    padding: 10px;
  }
  .development .content-wrapper .thumb-gallery {
    /* END details*/
  
  }
  .development .content-wrapper .thumb-gallery ul li {
    width: 50%;
  }
  .development .content-wrapper .thumb-gallery .details .btn:first-of-type {
    margin-left: 0.625em;
  }
  .development .content-wrapper .thumb-gallery .details .details-wrapper figure {
    margin-top: 1.5625em;
  }
  .development .content-wrapper .thumb-gallery .details .details-wrapper .project-details {
    /*width: 98%;*/
  
    margin-top: 0.9375em;
  }
  .development .content-wrapper .thumb-gallery .details .projects-random h3 {
    padding-left: 0.625em;
  }
  .development .content-wrapper .thumb-gallery .details .projects-random .random-projects li {
    width: 50%;
  }
  .contact .content-wrapper {
    width: 100%;
    margin: 0;
    margin-top: 6.25em;
  }
  .contact .content-wrapper .info,
  .contact .content-wrapper .contact-form {
    width: 90%;
    float: none;
    margin: 0 auto;
    padding: 0;
  }
  .contact .content-wrapper .info {
    margin-bottom: 0.9375em;
    /*15*/
  
  }
  .contact .content-wrapper .info .contact-message {
    padding: 0.625em;
    /*10*/
  
    padding-left: 0.9375em;
    /*15*/
  
    border-bottom: 3px solid black;
  }
}
@media all and (max-width: 690px) {
  .development .content-wrapper {
    width: 660px;
    padding: 0 20px;
  }
}
@media all and (min-width: 320px) and (max-width: 480px) {
  .home-banner {
    max-width: 480px;
  }
  .home-banner .heading {
    margin-top: 9.0625em;
    /*145*/
  
  }
  .home-banner .heading h2 {
    margin-top: 0.375em;
  }
  .home-banner .heading h2 span {
    display: block;
  }
  .development {
    margin-top: 30em;
    /*min-height: 350/16em;*/
  
  }
  .development .content-wrapper {
    width: 100%;
    padding: 0;
  }
  .development .content-wrapper .info {
    width: 90%;
    margin-top: 4.6875em;
    /*75*/
  
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0.9375em;
    /*15*/
  
    float: none;
  }
  .development .content-wrapper .selected-work {
    display: none;
  }
  .development .content-wrapper .thumb-gallery {
    /* END details*/
  
  }
  .development .content-wrapper .thumb-gallery .language-select label {
    margin-left: 18px;
  }
  .development .content-wrapper .thumb-gallery ul li {
    width: 97%;
    margin-left: 5px;
  }
  .development .content-wrapper .thumb-gallery .details .btn:first-of-type {
    margin-left: 0.625em;
  }
  .development .content-wrapper .thumb-gallery .details .details-wrapper figure {
    float: none;
    width: 50%;
    margin: 0 auto;
  }
  .development .content-wrapper .thumb-gallery .details .details-wrapper .project-details {
    float: none;
    width: 98%;
    margin-left: 0;
    margin-top: 0.9375em;
  }
  .development .content-wrapper .thumb-gallery .details .projects-random h3 {
    padding-left: 0.625em;
  }
  .development .content-wrapper .thumb-gallery .details .projects-random .random-projects li {
    float: none;
    width: 75%;
    margin: 0 auto;
    margin-bottom: 0.625em;
  }
  .contact {
    height: auto;
  }
  .contact .content-wrapper {
    margin: 0;
  }
  .contact .content-wrapper .info {
    margin-top: 2.1875em;
    /*35*/
  }
  .contact .content-wrapper .contact-form form {
    padding-bottom: 0.9375em;
    /*15*/
  
  }
  .contact .content-wrapper .contact-form form input,
  .contact .content-wrapper .contact-form form textarea {
    display: block;
    float: none;
    width: 100%;
  }
  .contact .content-wrapper .contact-form form #submit {
    width: 100%;
  }
}
@media all and (max-width: 320px) {
  header .content-wrapper,
  .home-banner .content-wrapper,
  .development .content-wrapper,
  .contact .content-wrapper {
    width: 320px;
  }
}