/* Remove margin in body, sets background color below navigation */
body {
margin:0px;
font-family: 'Nunito Sans', sans-serif;
background:#F6F5F6;
width:100%;
}

/* Change background color and padding for top text */
.headertitle {
padding-top:0.4%;
padding-bottom:0.4%;
margin-top:0px;
margin-bottom:0px;
background:#F6F5F6;
}

/******* Start Top Header Text *********/

/* Text options for Tola Akindipe Logo Text, 4vw or 4 view width font automatically adapts to viewer screen */
.headertitle h1{
font-family: 'Nunito Sans', sans-serif;
font-size:4vw !important;
padding-top:0.4%;
text-align:center;
color:#1f1c1f;
margin-bottom:0px;
font-weight:700;
letter-spacing:10px;
}

/* Text options for Photography Logo Text, letter spacing changes letter kerning */
.headertitle h2{
font-family: 'Nunito Sans', sans-serif;
font-weight:700;
font-size:13px !important;
padding-bottom:1% !important;
text-align:center;
color:#1f1c1f;
margin-top:0px;
margin-bottom:0px;
letter-spacing:5px;
}

.div.a {
  text-align:center;
  }

/******* End Top Header Text *********/

/******* Start Navigation ************/

/* Controls navigation background color */
.navigation {
background-color: #191919;
width: 100%;
text-align: center;
}

/* Sets font for navigation,dropbutton and dropdown content */
.navigation a, .dropbutton, .dropdown-content a {
font-family: 'Nunito Sans', sans-serif !important;
font-weight:700;
}

/* Set to inline block so it displays horizontally */
.navlink {
display:inline-block;
padding:20px !important;
margin:0px;
position:relative;
}

/* Background color for static links on hover, or the black hover background effect */
.navlink:hover{
background:#000000;
}

/* Home and Contact links styling, set z index to -1 so it won't overlap dropdown menu on hover */
.navigation a{
text-transform:uppercase;
text-decoration:none;
color:#ffffff;
z-index:-1;
font-size:13px;
letter-spacing:1.5px;
margin:0px;
}

/* Home and Contact links hover */
.navigation a:hover {
color:#0072bc;
}

/* Mobile and Dslr drop button and content dropbutton, same padding as .navlink */
.dropbutton {
color: #ffffff;
padding: 20px !important;
}

/* Dropbutton background color when it hovers */
.dropdown .dropbutton:hover{
background: #000000 !important;
}

/* Dropbutton link hover color */
.dropbutton a:hover {
color:#0072bc;
}

.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown menu upon link hover for dslr and mobile */
.dropdown-content {
align-content:center;
display: none;
position: absolute;
background:#1f1c1f;
width:100%;
border-top:5px solid #0072bc;
z-index: 1;
}

/* Dropdown menu link color */
.dropdown-content a {
color: #FFFFFF;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Dropdown menu link hover color */
.dropdown-content a:hover {
color:#0072bc;
background:#000000;
}

/* Set to display block so the dropdown links stack vertically in one column */
.dropdown:hover .dropdown-content {
display: block;
}

/********* End Navigation ************/

/***** Start Page Title Below Nav ****/

/* Page Title Padding and Margin */
.pagetitle{
padding-top:30px;
padding-bottom:30px;
background:#F6F5F6;
margin-top:0px;
margin-bottom:0px;
}

/* Controls font for Page Title */
.pagetitle h1{
font-family: 'Nunito Sans', sans-serif;
font-weight:200;
font-size:50px;
text-align:center;
color:#1f1c1f;
}

/***** End Page Title Below Nav ******/

/************* Grid ********/

/* Removes margin and padding before and after each element, especially on grid spaces */
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}

/* width of gallery, margin left and right set to 0 to center grid in screen */
.grid-container {
width: 90%;
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
}

.gallery {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(25, 4vw);
grid-gap: 10px;
}

/* Cover enables any size to fit the grid column and row specified */
.gallery__img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* First Grid Item */
.gallery__item--1 {
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 1;
grid-row-end: 7;
position:relative;
float:left;
}

/* Second Grid Item */
.gallery__item--2 {
grid-column-start: 7;
grid-column-end: 13;
grid-row-start: 1;
grid-row-end: 7;
position:relative;
float:left;
}

/* Third Grid Item */
.gallery__item--3 {
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 7;
grid-row-end: 13;
position:relative;
float:left;
}

/* 4th Grid Item*/
.gallery__item--4 {
grid-column-start: 7;
grid-column-end: 13;
grid-row-start: 7;
grid-row-end: 13;
position:relative;
float:left;
}

/* 5th Grid Item*/
.gallery__item--5 {
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 13;
grid-row-end: 19;
position:relative;
float:left;
}

/* 6th Grid Item*/
.gallery__item--6 {
grid-column-start: 7;
grid-column-end: 13;
grid-row-start: 13;
grid-row-end: 19;
position:relative;
float:left;
}

/* 7th Grid Item*/
.gallery__item--7 {
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 19;
grid-row-end: 25;
position:relative;
float:left;
}




figcaption {
margin: 0 auto;
overflow:hidden;
transform: translate(-50%, -50%);
text-align:center;
color:white;
position:absolute;
top:50%;
left: 50%;
height:100%;
width:100%;
opacity:0;
background:#000000ad;
}


figcaption p {
transform: translate(-50%, -50%);
color:white;
top:50%;
left:50%;
margin:0 auto;
position:absolute;
font-size:40px;
font-family: 'Nunito Sans', sans-serif;
}

figcaption a{
text-decoration: none;
}
figcaption:hover  {
opacity:1;
}

/************* End Grid  **********/

/************* Footer **********/

/* Footer Section*/
footer {
position:fixed;
font-size:13px;
left: 0;
bottom: 0;
width: 100%;
background:#1f1c1f;
color: #FFFFFF;
text-align: center;
height:30px;
font-family: 'Nunito Sans', sans-serif;
padding-top:10px;
}

/************* End Footer ************/

/********* Start Responsive **********/

/* Responsive layout - this code activates on devices with 800 pixel width screens */
@media screen and (max-width: 800px) {


/* Font size for photography text */
.headertitle h2{
font-size:9px !important;
}
/* Decrease margin top bottom for navigation */
.navigation{
margin-top:1% !important;
margin-bottom:1% !important;
}
/* Decrease navigation font size */
.navigation a, a {
font-size: 11px !important;
}

/* Decrease padding */
.navlink, .dropbutton{
padding:10px !important;
}

/* Remove page title padding bottom because gallery already has a top margin */
.pagetitle{
padding-top: 10px;
padding-bottom:10px;
}

/* Font size for page title */
.pagetitle h1 {
font-size: 30px !important;
}

/* We disable the grid and use display:block so images would stack vertically in one column */
.grid-container, .gallery{
display:block;
}

/* Bottom padding below each gallery image */
.gallery__item--1,   .gallery__item--2,    .gallery__item--3,   .gallery__item--4  {
padding-bottom:5%;
}

/* Additional margin for 4th full width image to allow space above footer */
.gallery__item--5 {
margin-bottom:15%;
}
}
/***** ***** End  Responsive **********/