/* TABLE OF CONTENT
1 - CLEARFIX
2 - BASIC STYLES
3 - HEADER
4 - NAVIGATION
5 - CONTENT
6 - FOOTER
*/

/* CLEARFIX */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/* BASIC STYLE */
html, body {
	color: #000;
  font-family: 'ARIAL',sans-serif;
  font-size: 14px;
	font-weight: 300;
  height: 100%;
  width: 100%;
	background-image: url(../img/bg_black.jpg);
  background-size: 100% 100%;
}

h1,h2, h3 h4, h5 h6, p {
	margin:0;
	padding: 0;
}

h1 {
font-size: 90px
}

p {
	margin:0 0 1em 0;
	color: #fff;
	font-size: 30px;
	line-height: 1.5em;
}

img {
	max-width: 100%;
	height: auto;
	margin: 0 0 10px 0;
}

li {
	color: #fff;
  list-style:none;
  text-decoration: none; 
}

a {
  color: #fff;
  list-style:none;
  text-decoration: none; 
}

/* HEADER */
header {
	width: 100%;
}

/* NAVIGATION */
nav{
  width:100%;
}
nav ul li{
  display:inline-block;
  list-style:none;
  width:110px;
  text-align:center;
  font-family:Helvetica, sans-serif;
  border: 1px dashed rgba(255,255,255, 0);
  color:#fff;
  padding:10px 0 10px 0;
  margin:-1px -5px -1px -1px;
  cursor:pointer;
  transition:all .2s;
  -webkit-transition:all .2s;
}
nav ul li:hover{
  /*border:1px dashed #fff;*/
  background:rgba(255,255,255,.1);
  border: 1px solid #fff;
  color: yellow;
}

nav ul{

  text-align: center;
  position:absolute;
  width:100%;
  padding:0;
  z-index:100;
  background-image: url(../img/shade.png);
}
nav div{
  position:absolute;
  left:0;
  top:16px;
  background: #fff;
  width:162px;
  height:40px;
  z-index:99;
}

.active{
  color:rgba(55, 186, 177, 1);
}

nav a#pull {
  display: none;
}  

@media screen and (max-width: 600px) {
  nav { 
      height: auto;
    }
    nav ul {
      width: 100%;
      display: block;
      height: auto;
    }
    nav li {
      width: 50%;
      float: left;
      position: relative;
    }
    nav li a {
    border-bottom: 1px solid #576979;
    border-right: 1px solid #576979;
  }
    nav a {
      text-align: left;
      width: 100%;
      text-indent: 25px;
    }
}

@media only screen and (max-width : 480px) {
  nav {
    border-bottom: 0;
  }
  nav ul {
    display: none;
    height: auto;
  }
  nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
  }
  nav a#pull:after {
    content:"";
    background: url('nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
  }
}

@media only screen and (max-width : 320px) {
  nav li {
    display: block;
    float: none;
    width: 100%;
  }
  nav li a {
    border-bottom: 1px solid #576979;
  }
}

/* CONTENT */
#home {
	margin: auto;
	padding: 10px 0;
}

#title {
	text-align: center;
}

#headshot {
  border-style: solid;
  border-color: white;
  border-width: 3px;
}