/* 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 tola 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;
}

/******* 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, we 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;
}

.pagetitle h2{
font-family: 'Nunito Sans', sans-serif;
font-weight:200;
font-size:30px;
text-align:center;
color:#1f1c1f;
padding-top: 0px;
padding-bottom: 0px;
}

.aboutme p{
width:70%;
text-align:center;
margin:0 auto;
line-height:40px;
font-size:16px;
}

.aboutlinks{
margin:0 auto;
text-align:center !important;
padding-bottom:50px;
}

.aboutlinks a {
text-decoration: none;
color:#1f1c1f;
font-size:16px !important;
}

.aboutlinks a:hover {
  color: #0072bc;
}
/***** End Page Title Below Nav ******/



/************* Start Footer  *********/

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:1px;
}

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

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

/* Responsive layout - So 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;
}

.elem-group{
padding-bottom:10px;
}
/* Reduce font size */
input, select, textarea, button  {
font-size:1.10em;
}
/* Width of form */
input, select, textarea  {
font-size:1.10em;
width:300px;
}

.aboutme p{
width:80%;
text-align:center;
margin:0 auto;
line-height:40px;
}
.aboutlinks{
margin-bottom:40px !important;
width:80%;
}
}
/***** ***** End  Responsive **********/