body {
	font-family: 'Source Sans Pro';
}

#wrapper {

	max-width: 1000px;
	margin: 0 auto;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "logo logo logo logo logo" "nav nav nav nav nav" "design hero hero hero develop" "about about about about about" "work work work work work" "content content content content content";
}

.logo { 
	grid-area: logo;
	background-color: #151515;
	padding-top: 30px;
}


.nav { 
	grid-area: nav;
	text-align: center;
	background-color: #151515;
	padding: 20px 0;

}

.hero { 
	grid-area: hero;
	background-color: #ffffff;
}

#work {
	grid-area: work;
	text-align: center;
	padding: 30px 0;
	background-color: #dadada;
}

#about{
	grid-area: about;
	width: 90%;
	margin: 15px auto;
}

#about p {
	display: block;
}
.alt {
	grid-area: alt;
	margin: 20px auto;
}

.content { 
	display: grid;
	grid-area: content;
	grid-template-columns: 15px auto 20px auto 15px;
    grid-template-rows: auto;
    grid-template-areas: ". latest1 . latest2 .";
    background-color: #dadada;
    padding-bottom: 25px;
}

.pieces-content { 
	display: grid;
	grid-area: content;
	grid-template-columns: 15px auto 20px auto 15px;
    grid-template-rows: auto;
    grid-template-areas: ". alt alt alt ." ". piece1 . piece2 ." ". piece3 . piece4 ." ". piece5 . piece6 ." ;
    background-color: #dadada;
    padding-bottom: 25px;
}
.latest {
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}


p {
display: none;
padding: 15px;
line-height: 1em;
}

#about {
	grid-area: about;
}

#latest1 {
grid-area: latest1;
background-color: #ffffff

}

#latest2 {
grid-area: latest2;
background-color: #ffffff

}

#latest3 {
	display: none;
grid-area: latest3;
	
}

.pieces {
	background-color: white;
 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  	margin-bottom: 25px;
}

#piece1 {
	grid-area: piece1;
}
#piece2 {
	grid-area: piece2;
}
#piece3 {
	grid-area: piece3;
}
#piece4 {
	grid-area: piece4;
}
#piece5 {
	grid-area: piece5;
}
#piece6 {
	grid-area: piece6;
}

img {
	display: block;
	margin: auto;
	max-width: 100%;
}

.thumb:hover {
	opacity: .7;
}

h1 {
	font-size: 1.8em;
	text-align: center;
	line-height: 1em;
	font-family: 'Bebas Neue';
	margin: 80% auto;
}

h2 {
	font-size: 1.3em;
	text-align: center;
	line-height: 1em;
	font-family: 'Bebas Neue';
	padding: 10px 10px;

}

h3 {
	font-size: 1.1em;
	text-align: center;
	line-height: 1em;
	font-family: 'Bebas Neue';
	padding: 10px 10px;
}

strong {
	font-weight: bold;
	text-align: center;
}



.skills {
	display: block;
	margin: 50% 0;
margin: auto 0;
height: 100%;
text-align: center;

}


.skills h1{
background-color: #ffffff;
padding: 10% 0;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1);

}

#des {
 grid-area: design;
 background-image: url(img/color.png);
 box-shadow: 5px 0 0 0 rgba(0, 0, 0, 0.1);
}

#dev {
	grid-area: develop;
box-shadow: -5px 0 0 0 rgba(0, 0, 0, 0.1);
	background-image: url(img/letters.png);
}



i {
	font-style: italic;
}

nav {
display: none;


}

nav ul {
  display: grid;

}

nav li {
    display: block;

}


 a {
 outline: 0;
 text-decoration: none;
 }

 .skills a {
 	color: #000000;
 }

  .skills a:hover {
 	color: #aa4dd0;
 }

nav li a {
      display: block;
      text-align: center;
      color: #ffffff;
      padding: 5px 0;
      text-decoration: none;
      font-size: 1.6em;
      background-color: #454545;
      border-bottom: 2px solid #000000;

}

   #ham-icon  {
      display: block;
      font-size: 2.5em;
      width: auto;
      margin: auto;
      color: #ffffff;
      text-decoration: none;
    }

   #close-icon  {
      display: block;
      font-size: 1.5em;
      width: auto;
      margin: 0 auto;
      color: #ffffff;
      text-decoration: none;
    }

    br {
  
    }


footer {
background-color: #151515;
font-size: 1.1em;
max-width: 1000px;
margin: 0 auto;
}
 footer a {
 	color: #ffffff;
 }
footer ul {
padding: 10px 0;
margin: auto;
display: block;
text-align: center;
}


@media only screen and (min-width: 1000px) {

	.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "logo logo nav nav nav" "design hero hero hero develop" "about about about about about" "work work work work work" "content content content content content";
}

.pieces-content {
	 grid-template-areas: "alt alt alt alt alt alt alt" ". piece1 . piece2 . piece3. " ". piece4 . piece5 . piece6 .";
grid-template-columns: 3% 30% 2% 30% 2% 30% 2%;
	 	padding: 10px;
}


h1 {
	font-size: 3em;
}

#latest3 {
	display: block;
}

.content { 

	grid-template-columns: 3% 30% 2% 30% 2% 30% 2%;
	grid-template-rows: auto;
    grid-template-areas: ". latest1 . latest2 . latest3 .";
    margin: auto;

}

p {
	display: block;
}

.latest {
	height: 100%;
}
br {

}
nav {
	display: block;
  width: 100%;

}

nav ul {

 	grid-template-columns: auto 0px auto 0px auto;
    grid-template-areas: "one . two . three";

}

nav li {
 max-width: 100%;
text-align: center;

}

#one {
 grid-area: one;
}
#two {
	grid-area: two;
}
#three {
	grid-area: three;
}

nav li a {
background-color: #151515;
border: none;
}
nav li a:hover {
	color: #5ff0d4;

}

footer li {
	line-height: 2em;
}

.nav {
	background-color: #151515;
	line-height: 4em;

}

      #ham-icon  {
        display: none !important;
      }

      #close-icon  {
        display: none;
          }
.logo { 
	padding: 30px 0;
}


 .logo img {
 	max-width: 100px;
 	margin: auto 0 auto 30px;
 }


#active:hover {
display: none;
}

}