@import url('https://fonts.googleapis.com/css?family=Lato:300,400');
* {
  line-height:1.5;
  font-weight:300;
}
body,
html {
  margin:0;
  padding:0;
  font-family:Lato;
  width:100%;
  height:100%;
  overflow-x:hidden;
}
.clear { 
  clear:both;
  float:none;
}
body {
  background:#004a56;
  color:#ffffff;
  background:linear-gradient(
    rgba(0, 0, 0, 0.45), 
    rgba(0, 0, 0, 0.15)
  ), url('http://matthaynes.uk/external_pull/portfolio-background.jpg')  no-repeat center center fixed; 
  background-size: cover;  
  width: 100%; 
  height: 100vh; 
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  display: table;
}
.navContainer {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;  
  -o-transition: all 0.25s ease-in-out;    
  transition: all 0.25s ease-in-out; 
  z-index:999;
}
.navContainer * {
  font-weight:400;
}
.container {
  max-width:1024px;
  width:90%;
  margin:0 auto;
  text-align:center;
}
.headerWrap {
  display:table;
  height:100vh;
  width:100%;
}
.header {
  display:table-cell;
  width:100%;
  vertical-align:middle;
}
h1 {
  font-size:42px;
  margin:20px 0;
  font-weight:400;
}
h4 { 
  max-width:500px;
  margin:0 auto;
  width:90%;
  font-weight:400;
}
.downArrow {
  padding-top:20px;
  display: inline-block;
  font-size:36px;
  cursor:pointer;
}
#content {
  background:#ffffff;
  color:#1a1a1a;
  padding:50px 0;
}
#content h2 {
  text-align:center;
  font-size:36px;
  padding:0 20px;
  margin-top:0;
}
#content h3 {
  text-align:center;
  padding:0 20px;
}
section { 
  margin:50px 0;
}
section.aboutMe {
  margin-top:0;
}
section.myWork {
  margin-bottom:0;
}
.navContainer a {
  color:#ffffff;
  text-decoration:none;
}
.navContainer { 
  position:fixed;
  width:100%;
  background-color:rgba(255,255,255,0);
  border-bottom: 1px solid transparent;
}
.navContainer .insideNavContainer {
  padding:0 20px;
}
.navContainer .siteBranding {
  float:left;
  font-size:28px;
}
.navContainer #mainNav { 
  float:right; 
}
.navContainer #mainNav ul {
  margin:0;
  padding:0;
}
.navContainer #mainNav ul li {
  float:left;
  list-style:none;
  margin:38px 0 0 40px;
  font-size:18px;
  line-height:28px;
  -webkit-transition: all 0.25s ease-in-out;  
  -moz-transition: all 0.25s ease-in-out;  
  -o-transition: all 0.25s ease-in-out;    
  transition: all 0.25s ease-in-out; 
}
.navContainer #mainNav ul li:hover {
    -ms-transform: scale(1.1); /* IE 9 */
    -webkit-transform: scale(1.1); /* Safari */
    transform: scale(1.1);
}
.navContainer.scrolled {
  background-color:rgba(255,255,255,1);
  border-bottom: 1px solid #e7e7e7;
  box-shadow: 0 2px 5px rgba(0,0,0,.26);
}
.navContainer.scrolled * {
  color:#0aa7d8;
}
.quote {
  background:linear-gradient(
    rgba(0, 0, 0, 0.15), 
    rgba(0, 0, 0, 0.45)
  ), url('http://matthaynes.uk/external_pull/portfolio-backgroundLower.jpg')  no-repeat center center fixed; 
  background-size: cover;  width: 100%; display: table; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment:fixed;
}
.quote .fa-quote-left,
.quote .fa-quote-right {
  font-size:24px;
  position:relative;
}
.quote .fa-quote-left {
  top:-15px;
  left:-10px;
}
.quote .fa-quote-right {
  top:-15px;
  right:-10px;
}
.aboutMe p {
  text-align:center;
  width:80%;
  margin:0 auto 80px;
}
.quote p {
  display:block;
  max-width:1024px;
  margin:0 auto;
  padding:150px 20px;
  color:#ffffff;
  text-align:center;
  font-size:42px;
}
.contactWrap,
.myWorkWrap {
  max-width:1024px;
  margin:0 auto;
  padding:0 20px;
}
.myWorkWrap a {
  display: inline-block;
  width: 31%;
  margin: 1%;
  text-align: center;
  height: 178px;
  background: #39a7d8;
  overflow:hidden;
  position:relative;
}
.myWorkWrap a img {
  width:100%;
  height:100%;
}
.myWorkWrap a span.hoverItem {
  display: block;
  width: 200%;
  height: 400%;
  background: rgba(10, 167, 216, 0.7);
  transition: all 0.8s;
  transform: rotate(-25deg);
  top: -800px;
  position: relative;
  left: 600px;
}
.myWorkWrap a span.hoverTitle {
  opacity:0;
  position: absolute;
  top: calc(50% - 11px);
  transition: all 0.8s;
  left: 0;
  width: 100%;
  color: #ffffff;
}
.myWorkWrap a:hover > span.hoverTitle {
  opacity:1;
}
.myWorkWrap a:hover > span.hoverItem  {
  top:-350px;
  left:-100px;
}
.contactWrap form {
  width:100%;
  max-width:750px;
  margin:0 auto;
}
.contactWrap form * {
  font-family: lato;
  font-weight: 400;
  font-size:14px;
  padding:5px;
}
.contactWrap form input.name,
.contactWrap form input.email {
  width:47%;
  margin-bottom:15px;
}
.contactWrap form input.email {
  float:right;
}
.contactWrap form input.subject { 
  width:calc(100% - 14px);
  margin-bottom:15px;
}
.contactWrap form textarea {
  width:calc(100% - 12px);
  margin-bottom:10px;
  resize:vertical;
  min-height:150px;
}
.contactWrap form input[type=submit] {
  width:100%;
  background:#0aa7d8;
  color:#ffffff;
  border:none;
  box-shadow:none;
  padding:7.5px 0;
  cursor:pointer;
  -webkit-transition: all 0.25s ease-in-out;    
  -moz-transition: all 0.25s ease-in-out;  
  -o-transition: all 0.25s ease-in-out;    
  transition: all 0.25s ease-in-out; 
}
.contactWrap form input[type=submit]:hover {
  background:#0c5b73;
}
footer ul {
  margin: 0;
  padding: 0 20px;
}
footer ul li {
  list-style: none;
  float: left;
  margin: 0 25px 0 0; 
  -webkit-transition: all 0.25s ease-in-out;    
  -moz-transition: all 0.25s ease-in-out;  
  -o-transition: all 0.25s ease-in-out;    
  transition: all 0.25s ease-in-out;
}
footer ul li a {
  color: #0aa7d8;
}
footer ul li:hover {
  -ms-transform: scale(1.3); /* IE 9 */
  -webkit-transform: scale(1.3); /* Safari */
  transform: scale(1.3);
}
.c-hamburger {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 50px;
  height: 50px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  display:none;
}
.c-hamburger:focus {
  outline: none;
}
.c-hamburger span {
  display: block;
  position: absolute;
  top: 24px;
  left: 10px;
  right: 10px;
  height: 4px;
  background: #0aa7d8;
}
.navContainer.scrolled .c-hamburger span {
  background:#ffffff;
}
.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #0aa7d8;
  content: "";
}
.navContainer.scrolled .c-hamburger span::before,
.navContainer.scrolled .c-hamburger span::after {
  background-color:#ffffff;
}
.c-hamburger span::before {
  top: -12px;
}
.c-hamburger span::after {
  bottom: -12px;
}
.c-hamburger--htx {
  background-color: #ffffff;
  top:25px;
}
.navContainer.scrolled .c-hamburger--htx {
  background-color: #0aa7d8;
}
.c-hamburger--htx span {
  /*transition: background 0s 0.3s;*/
}
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition: 0.3s;
  -duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}
.c-hamburger--htx span::before {
  transition-property: top, transform;
}
.c-hamburger--htx span::after {
  transition-property: bottom, transform;
}
/* active state, i.e. menu open */
.navContainer.scrolled .c-hamburger--htx.is-active {
  background-color: #0c5b73;
}
.navContainer .c-hamburger--htx.is-active span {
  background: none;
}
.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}
.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}
.scrollUp {
  position:fixed;
  right:20px;
  bottom:40px;
  display:block;
  font-size:36px;
  background:rgba(0,0,0,0.7);
  padding:0 15px 5px;
  cursor:pointer;
  display:none;
}
@media screen and (max-width: 768px) {
  .myWorkWrap a {
    width:47.5%;
  }
  body,
  .quote {
    background-attachment:scroll;
  }
}
@media screen and (min-width: 767px) {
  .navContainer #mainNav ul {
    display:block !important;
  }
}
@media screen and (max-width: 767px) {
  .navContainer #mainNav ul {
    display:none;
    position: absolute;
    width: 100%;
    left: 0;
    top: 100px;
    background: #ffffff;
    border-bottom: 1px solid #e7e7e7;
  }
  .navContainer #mainNav ul li {
    float: none;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    margin:0;
  }
  .c-hamburger  {
    display:block;
    }
  .contactWrap form input.name, 
  .contactWrap form input.email {
    width:calc(100% - 14px);
    float:none;
  }
}
@media screen and (max-width:520px) {
  .myWorkWrap a {
    width:100%;
  }
}