<link href="gallery.css" rel="stylesheet" type="text/css">
<ul class="top">
<li class="galleryItem">
<div><a href="#1" target="_self">
<img src="https://c1.staticflickr.com/5/4330/36079388352_9eecc70c31_m.jpg" >
</a>

</div>
</li>
<li class="galleryItem">
<a href="#2">
<img src="https://c1.staticflickr.com/5/4317/35441029933_a3167a6549_m.jpg">
</a>
</li>
<li class="galleryItem">
<a href="#3" width="240" height="160">
<img src="https://c1.staticflickr.com/5/4330/36079389082_52fa63a92a_m.jpg">
</a>
</li>
<li class="galleryItem">
<a href="#4">
<img src="https://c1.staticflickr.com/5/4292/35441031143_fd75109ff4_m.jpg">
</a>
</li>
<li class="galleryItem">
<a href="#5">
<img src="https://c1.staticflickr.com/5/4304/36079389392_d71c24968b_m.jpg">
</a>
</li>
<li class="galleryItem">
<a href="#6">
<img src="https://c1.staticflickr.com/5/4321/35441032453_f665d44d1d_m.jpg">
</a>
</li>
</ul>

<!-- lightbox -->

<div class="lightbox" id="1">
<div class="image">
<img src="https://c1.staticflickr.com/5/4330/36079388352_2d82f5b00f_o.jpg">
<a href="#6" class="prev"></a>
<a href="#" class="close"></a>
<a href="#2" class="next"></a>
</div>
</div>
<div class="lightbox" id="2">
<div class="image">
<img src="https://c1.staticflickr.com/5/4317/35441029933_dd2a12455d_o.jpg">
<a href="#1" class="prev"></a>
<a href="#" class="close"></a>
<a href="#3" class="next"></a>
</div>
</div>
<div class="lightbox" id="3">
<div class="image">
<img src="https://c1.staticflickr.com/5/4330/36079389082_ef306fd12c_o.jpg">
<a href="#2" class="prev"></a>
<a href="#" class="close"></a>
<a href="#4" class="next"></a>
</div>
</div>
<div class="lightbox" id="4">
<div class="image">
<img src="https://c1.staticflickr.com/5/4292/35441031143_c2e5f559fc_o.jpg">
<a href="#3" class="prev"></a>
<a href="#" class="close"></a>
<a href="#5" class="next"></a>
</div>
</div>
<div class="lightbox" id="5">
<div class="image">
<img src="https://c1.staticflickr.com/5/4304/36079389392_e4a753d6fb_o.jpg">
<a href="#4" class="prev"></a>
<a href="#" class="close"></a>
<a href="#6" class="next"></a>
</div>
</div>
<div class="lightbox" id="6">
<div class="image">
<img src="https://c1.staticflickr.com/5/4321/35441032453_da7ac0f44b_o.jpg">
<a href="#5" class="prev"></a>
<a href="#" class="close"></a>
<a href="#1" class="next"></a>
</div>
</div>

.top {
width: 100%;
min-height: 160px;
padding: 0px 0;
text-align: center; }

.galleryItem {
width: 240px;
height: 160px;
margin: 10px;
padding: 0;
display: inline-block;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.25); }

.galleryItem img {
width: 240px;
height: 160px;
text-decoration: none;
}


/* lightbox */

.lightbox {
display: none;
overflow: hidden;
position: fixed;
z-index: 3;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.85);
}

.lightbox a {
display: block;
color: #ef4129;
text-decoration: none;
overflow: hidden;
}

.lightbox img {
max-height: 100%;
max-width: 100%;
border: solid #FFF 10px;
border-radius: 5px;
}

.lightbox:target {
display: table;
}

.lightbox .image {

display: table-cell;
vertical-align: middle; }

.lightbox .image img {
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.25); }

.next, .prev, .close { display: block; position: fixed; }

.close { width: 5000px; height: 5000px; overflow: hidden; top: 0; left: 0; z-index: 5; cursor: default; }

.next, .prev { width: 100px; height: 25px; top: 50%; z-index: 10; opacity: 0.7; font-size: 2em; line-height: 25px; text-shadow: 0px 0px 15px rgba(0, 0, 0, 1); }

.prev { left: 10px; text-align: left; }

.prev::after { content: '\2039'; }

.next { right: 10px; text-align: right; }

.next::before { content: '\203A'; }

ul a {
display: block;
padding: 10px 0;
font-family: "Quicksand", cursive;
color: #fffffA;
background-color: #1779ba;
-webkit-transition: background-color 250ms ease-in-out;
-moz-transition: background-color 250ms ease-in-out;
transition: background-color 250ms ease-in-out;

<link href="nav-bfp.css" rel="stylesheet" type="text/css">

<header>
<input type="checkbox" id="click" class="burger-input"/>
<label for="click">
<div class="burger" ></div>
</label>
<nav>
<ul>
<li class="padding"><a href="http://blurredfaceproductions.com">Home</a></li>
<li class="padding"><a href="http://blurredfaceproductions.com/portfolio.html">Portfolio</a></li>
<li class="padding"><a href="http://blurredfaceproductions.com/about.html">About</a></li>
<li class="padding"><a href="http://blurredfaceproductions.com/contact.html">Contact Us</a></li>
</ul>
</nav>
</header>

ul a {
display: block;
font-family: "Quicksand", cursive;
color: #fffffA;
background-color: transparent;
}
ul a:hover {
font-family: "Quicksand", cursive;
color: #fffffA;
}

a {
text-decoration: none;
}

.padding {
margin: 0px;
padding: 10px 10px;
background-color: #ef4129
}

.padding:hover{
background-color: #a93524;
font-family: "Quicksand", cursive;
color: #fffffA;
-webkit-transition: background-color 250ms ease-in-out;
-moz-transition: background-color 250ms ease-in-out;
transition: background-color 250ms ease-in-out;
}