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

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

/***** Contact Form Styling  *********/

*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}

.formcontainer {
margin:auto;
text-align:center;
}

.elem-group {
margin-bottom:30px;
}

label {
display: block;
font-family: 'Nunito Sans', sans-serif;
font-size:1.25em;
}

input, select, textarea {
background-color:#FFFFFF;
border:1px solid #d6d6d4 !important;
border-radius:6px;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 1.25em;
font-family: 'Nunito Sans', sans-serif;
width: 400px;
padding:10px;
}

/* Sets text input color */
input{
color:#1f1c1f !important;
}

/* Height of Text Message Area */
textarea {
height: 150px;
}

/* Button Styling */
button {
background-color:#0072bc;
font-weight:700;
border: 1px solid #ffffff;
font-size: 1em;
Color: #FFFFFF;
font-family: 'Nunito Sans', sans-serif;
border-radius: 6px;
margin-top:15px;
padding:17px;
}

/* Hover color shift when hovering on button */
button:hover {
color:#FFFFFF;
background:#1f1c1f;
border: 1px solid #1d1c1f;
}

/************* 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:10px;
}

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