html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*End of Reset*/

html {
    background-color: black;
}
 
body {
  background: black;
  color: white;
  font-family: 'Lato', sans-serif;
  opacity: 1;
  transition: 500ms opacity;
}

body.fade-out {
    opacity: 0;
    transition: none;
}

*,*:before,*:after {
  box-sizing: border-box;
}
 
nav {
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  background: black;
  z-index: 1;
}

nav ul li {
  display: inline-block;
  width: 23%;
  padding: .15em 0 .25em 0;
  line-height: 1.5625em;
}

nav a {
  text-decoration: none;
  color: white;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out; 
}

li a:hover {
  color: cyan;
  transition: all 500ms;
}

h1 {
  font-size: 2em; 
  margin-top: 1.4em;
}

h2 {
  font-size: 1.75em;
}

#container {
  width: 90%;  
  margin: 0 auto;  
  text-align: center;
}

#background, #portfolio, #clientWork, #contact, #resume {
  padding: 1.3em 0 0 0;
}

#backgroundContainer {
  margin-top: 1em;
}

#leftBackgroundColumn {
  width: 49%; 
  margin: 0 auto;
}

#backgroundPic {
  border: 0.125em solid white;
  padding: .3em;
}

#rightBackgroundColumn p {
  margin-top: .7em;
  text-align: left;
  line-height: 1.45em;
}

.thumbContainer {
  margin-top: 1em;
}

.thumbColumn {
  display: inline-block;
  width: 30%;
  vertical-align: top;
}

.thumbColumn a {
  display: inline-block;
  margin-bottom: 1em;
  border: 0.125em solid white;
  padding: .3em;
  line-height: 0;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;    
}

#clientThumbContainer a {
  margin-bottom: 0;
}

.thumbColumn a:hover {
  border: 0.125em solid cyan;
  transition: all 500ms;
}

#centerThumbColumn {
  margin-left: 2.75%;
  margin-right: 2.75%;
}

#overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
}

#modalBox {
  z-index: 3;
  display: none;
  text-align: center;
  position: fixed;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  background: black;
  border: 0.125em solid white;
  border-radius: 0.25em;
}

#modalBox img {
  height: 14em;
  padding: .65em;
}

#modalCaption {
  margin-top: .35em;
  font-size: .8em;
}

.resBox {
  border: 0.125em solid white;
  margin-top: 1em;
  padding: .5em 2% .6em 2%;
}

.resBox p {
 line-height: 1.4em;
}

.resBox img {
  width: 18%;
  margin: .5em 0 .5em 0;
}

.resBox h3 {
  margin-bottom: .4em;
  font-size: 1.4em;
  text-align: center;

}

#leftSkillColumn, #rightSkillColumn {
  width: 49%;
  display: inline-block;
  margin-top: .5em;
}

#skillBox li, #awardBox li {
 line-height: 1.4em;
  text-align: center;
}

.expDescription {
  text-align: left;
  margin-left: 4%;
  margin-top: .75em;
}

.formInputs {
  width: 100%;
  border: 2px solid white;
  background: black;
  font-size: 1.1em;
  border-radius: 0.25em;
  padding: 0.2em;
  margin-top: 0.5em
}

.inputValIcon {
  font-size: 1.4em;
  display: inline-block;
  width: 4%;
  vertical-align: top;
  margin-top: .8em;
}

::-webkit-input-placeholder { 
  color:    white;
}
:-moz-placeholder { 
  color:    white;
  opacity:  1;
}
::-moz-placeholder { 
  color:    white;
  opacity:  1;
}
:-ms-input-placeholder { 
  color:    white;
}
:placeholder-shown { 
  color:    white;
}

[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity .75s .75s ease-in-out; 
  opacity: 0;
  color: cyan !important;
}

.input:focus{
  color: white;
  border: 2px solid cyan !important;
}

textarea:focus, input:focus{
  outline: 0;
}

input, select, textarea{
  color: white;
  font-size: 2em;
}

input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px black inset;
  -webkit-text-fill-color: white;
}

#comments {
  height: 8.5em;
}
   
.button a, input[type="submit"]{
  color: #eee;
  font-size: .9em;
  text-decoration: none;
  border-radius: 0.25em;
  border: 0.125em solid grey;
  padding: 0.15em 1.5% 0.265em 1.5%;
  display: inline-block;
  background: linear-gradient(#0A6AFB,#121212);
  margin-top: 0.6em;
  -webkit-transition: all 700ms ease-in-out;
  -moz-transition: all 700ms ease-in-out;
  -o-transition: all 700ms ease-in-out;
  transition: all 700ms ease-in-out;
}

.button a:hover, input[type="submit"]:hover {
  border: 0.125em solid cyan; 
  color: cyan;
  transition: all 700ms;
}

#toTopButton {
  font-size: 2em;
  padding: 10px 5.5%;
  position: fixed;
  bottom: 0;
  left: 0;
}

#toTopButton:hover {
  color: cyan;
  cursor: pointer;
  transition: all 500ms;
}
  
#footerStrip {
  margin: 1.2em 0 .5em 0;
  text-align: right;
}
    
#footerStrip p {
  display: inline-block;
  padding-bottom: .3em;
}

#footerStrip img {
  display: inline-block;
  padding-left: 2%;
  height: 1.75em;
  width: auto;  
  vertical-align: bottom;
}

/*iPhone Landscape*/
@media only screen and (min-width : 376px) {  

#container {
  width: 90%;
}

#modalBox img {
  height: 14.5em;
}

#leftBackgroundColumn {
  width: 14%;
  display: inline-block;
}

 #rightBackgroundColumn {
  display: inline-block;
  margin-left: 1%;
  width: 85%;
  vertical-align: top;
} 

#leftResColumn {
  width: 48.5%;
  display: inline-block;
  vertical-align: top;
}

#rightResColumn {
  width: 46.5%;
  display: inline-block;
  vertical-align: top;
  margin-left: 2%;
}

#name, #phone, #email, #comments {
  width: 70%;
} 

/*iPad Portrait*/
@media only screen and (min-width : 768px) {  
	
#modalBox {
    top: 52%;
}
	
#modalBox img {
    height: 31.5em;
}

#modalCaption {
  margin-top: .35em;
  font-size: 1em;
}

#leftBackgroundColumn {
  width: 20%;
}

#name, #phone, #email, #comments {
    width: 50%;
}

/*iPad Landscape */
@media only screen and (min-width : 1024px) {  

#container {
  width: 67%;
}

#modalBox img {
    height: 38.5em;
}

/*Laptop*/
@media only screen and (min-width : 1362px) {

#leftBackgroundColumn, #rightBackgroundColumn {
  margin: auto;
  display: block;
}

/*Desktop*/
@media only screen and (min-width : 1776px) { 

#modalBox img {
    height: 53.5em;
}