/*
*
* Created by Graham Stewart
*
*/

/* Generic styles, links and typography */

body {
  background-color: rgba(233,233,233,1);
  color: rgba(66,66,66,1);
  font-family: "proxima-nova";
}
a, 
a:link, 
a:visited, 
a:focus, 
a:active, 
a:hover {
  color: rgba(50,153,187,1);
  font-style: italic;
}
a:active, 
a:hover {
  text-decoration: underline;
}
h3 a, 
h3 a:link, 
h3 a:visited, 
h3 a:focus, 
h3 a:active, 
h3 a:hover {
  font-style: normal;
}
h3 a:active, 
h3 a:hover {
  text-decoration: none;
}
.accent, 
h3 { color: rgba(50,153,187,1); }

/* Helpers */
.marginTop { margin-top: 30px; }
.marginBot { margin-bottom: 30px; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Components */

footer {
}
hr {
  border-top-color: rgba(66,66,66,1);
  border-bottom-color: rgba(66,66,66,1);
}
img#profile, .overlay {
  position: relative;
  z-index: 1;
  width: 80%;
  height: 80%;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  margin: 0 auto;
  display: block;
}
.overlay {
  background-color: rgba(50,153,187,1);
  position: relative;
  z-index: 2;
}
.products img {
  width: 50%;
  margin: 0 auto;
  display: block;
  opacity: 1;
  -webkit-transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
          transition: opacity .25s ease-in-out;
}
.products a:hover img {
    opacity: .5;
}
.products p {
    text-align: center;
    margin-top: 10px;
}

@media (max-width: 769px) {
  body{
    margin: 0 1%;
  }    
}
@media (max-width: 640px) {
  body{
    margin: 0 2%;
  }
  h2 {
    font-size: 2.2rem;
  }
  h3 {
    font-size: 1.8rem;
  }
}