/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
* {
  margin: 0;
  padding: 0;
  border: none; }

input:focus, textarea:focus {
  outline: none;
  border-color: #0f0; }

::selection {
  color: #404040;
  background: rgba(0, 255, 0, 0.4); }

a {
  transition: 200ms;
  text-decoration: none;
  color: inherit; }
  a:hover {
    color: #0f0; }

body {
  background-color: #939393;
  font-family: "Raleway", sans-serif;
  padding: 20px;
  font-size: 70%; }

#hero {
  color: white;
  font-size: 300%; }
  #hero #logo {
    width: 130px;
    margin-left: 2px;
    height: auto;
    overflow: auto; }
  #hero #hero-text {
    margin-top: -35px;
    margin-left: -2px; }
  #hero #spacer {
    display: inline-block;
    width: 76px;
    height: 1px; }

#menu {
  font-size: 120%;
  top: 80px;
  margin: 20px 0 0 2px; }
  #menu li {
    display: inline-block;
    margin: 0 10px 10px 0;
    color: #2e2e2e; }
  #menu .current_page a {
    color: white; }

h1 {
  font-size: 100%;
  color: white;
  margin-top: 30px; }

#latest-projects {
  font-size: 300%;
  color: white;
  top: 130px; }
  #latest-projects h1 {
    font-size: 80%;
    font-family: "Raleway", sans-serif;
    font-weight: 500; }
  #latest-projects ul {
    font-size: 50%;
    font-family: "Raleway", sans-serif;
    font-weight: 500;
    margin-top: 15px;
    display: inline-block; }

.first-grey {
  color: #bcbcbc; }

.second-grey {
  color: #dddddd; }

.jqueryHover {
  color: #0f0; }

#project h1 {
  font-size: 300%;
  color: white;
  margin: 30px 0 0 -3px; }
#project #description {
  font-size: 110%;
  color: white;
  display: inline-block;
  width: 250px;
  margin: 20px 20px 0 0;
  line-height: 120%; }
  #project #description p {
    margin-bottom: 20px; }
  #project #description a {
    color: white;
    text-decoration: none; }
  #project #description .year {
    font-family: "Raleway", sans-serif;
    font-weight: 400i; }
  #project #description .projects-link {
    display: block; }
#project #work-images {
  margin: 0 0 10px 0;
  clear: right;
  overflow: auto; }
#project img {
  width: 100%;
  max-width: 622px;
  margin: 0 5px 5px 0;
  float: left; }
#project .back-to-projects {
  text-decoration: none;
  color: white;
  clear: both; }

.fixed {
  position: fixed;
  margin-top: 0; }

#project-images {
  position: relative;
  left: 450px;
  width: 800px;
  overflow: auto; }

.latest-project-image {
  position: relative;
  margin-bottom: 3px; }

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 100%;
  background: rgba(0, 255, 0, 0);
  z-index: 2;
  transition: 300ms; }
  .overlay a {
    display: block;
    height: 100%;
    width: 100%; }

.overlay:hover {
  background: rgba(0, 255, 0, 0.4); }

.not-found {
  margin-left: 2px;
  font-size: 200%; }

#blog {
  margin-top: 10px;
  width: 50%;
  max-width: 600px;
  margin-bottom: 20px; }
  #blog h2 {
    font-size: 200%;
    margin-bottom: 10px; }
  #blog:nth-child(even) h2 {
    text-decoration: none;
    color: #dddddd; }
  #blog:nth-child(odd) h2 {
    text-decoration: none;
    color: #bcbcbc; }
  #blog a:hover {
    color: #0f0; }
  #blog .post {
    margin-bottom: 20px; }
  #blog p {
    margin: 3px 0; }
  #blog p a {
    text-decoration: underline; }
  #blog .postmeta {
    color: white;
    font-size: 90%;
    margin-top: 10px; }

#content h1 {
  font-size: 300%;
  margin-right: -4px; }
#content #studio-image {
  width: 100%;
  margin-top: 30px; }

#contact-details {
  color: white;
  margin: 20px 0;
  font-size: 90%;
  line-height: 110%; }
  #contact-details h2 {
    font-family: "Raleway", sans-serif;
    font-weight: 500;
    display: inline-block;
    width: 120px; }
  #contact-details a {
    color: white;
    display: inline-block;
    text-decoration: none; }
  #contact-details p {
    margin-bottom: 5px;
    display: block; }
  #contact-details #map {
    margin-top: 20px;
    width: 100%;
    height: 700px; }

#copyright {
  color: #2e2e2e;
  float: left;
  margin: 40px 0 10px 0;
  font-size: 100%;
  line-height: 150%; }
  #copyright p, #copyright a {
    color: #2e2e2e;
    text-decoration: none;
    margin-right: 15px;
    margin-bottom: 5px;
    display: inline-block; }

/* Mobile Phones Portrait */
@media screen and (max-width: 580px) {
  #hero {
    color: white;
    font-size: 195%; }
    #hero #logo {
      width: 120px;
      height: 53px;
      margin-left: 2px; }
    #hero #hero-text {
      margin-top: -30px;
      margin-left: -1px;
      font-size: 140%; }
    #hero #spacer {
      display: inline-block;
      width: 71px;
      height: 1px; }

  #menu {
    top: 0; }

  #latest-projects {
    top: 0; }

  #menu li {
    display: block;
    font-size: 180%;
    top: 0; }

  #latest-projects h1 {
    font-size: 100%;
    top: 0; }
    #latest-projects h1 ul li {
      font-size: 60%; }

  #project-images {
    display: none; }

  .fixed {
    position: relative; }

  #content h1 {
    font-size: 210%; }

  #map {
    margin-top: 20px;
    width: 100%;
    height: 300px; }

  #contact-details h2 {
    display: block;
    margin-bottom: 5px; }

  #copyright {
    font-size: 110%; } }