@charset "UTF-8";
/* CSS Document */

/* --------------------------------
Copyright 2020 devonwildlife
-------------------------------- */

/* -------------------------------- Typography -------------------------------- */
p, a, ul, ol, li {font-family: ff-meta-serif-web-pro, times, serif; color:#4d4d4d;}
a{font-weight:600; color:#f05c27;}
.meta, .meta a {font-family: ff-meta-serif-web-pro, times, serif; font-weight:300;}
.meta b{font-weight:500;}
.oswald, .oswald a  {font-family: ff-meta-serif-web-pro, times, serif; font-weight:400;}
.oswald b {font-weight:700;}
.aglet, .aglet a{font-family: ff-meta-serif-web-pro, times, serif; font-weight:600;}
.aglet b {font-weight:700;}
h1 img{max-height: 250px;}

.dwlblack{color:#4d4d4d; text-align:center;}
.dwlgrey{text-align:center;}
.boxy{border-top:1px solid #cccccc; padding-top:10px;}

.fiftyfour{margin:0px;}
.twenty{text-transform:capitalize; margin:10px 0px 0px 0px;}
.twenty a{color:#4d4d4d;}
.orangestripe, .yellowstripe{margin:0px; font-style: italic; background:#f05c27; color:#ffffff; border-bottom:2px solid #4d4d4d; color:#ffffff;}
.greystripe{margin:0px 0px 1px 0px; text-align:center; background:#4d4d4d; border-top:1px solid #4d4d4d; color:#ffffff;}
.greystripe a{color:#ffffff;}
.spaceabove{margin-top:1rem;}
.morespaceabove{margin-top:2rem;}

.fa-shoe-prints{color:#cccccc;}
/* -------------------------------- Gallery -------------------------------- */

/* CSS Animate */ /* Gray Scale
.gallery img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.gallery :hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}*/

.thumbs{
	-webkit-box-shadow: 0px 10px 7px 0px rgba(117,117,117,1);
	-moz-box-shadow: 0px 10px 7px 0px rgba(117,117,117,1);
	box-shadow: 0px 10px 7px 0px rgba(117,117,117,1);
}

/* -------------------------------- Top Nav -------------------------------- */
.dropdown{background-color:#fff !important;}
.top-bar{background-color:#fff !important; margin:0px 0px 5px 0px;}
.top-bar {font-weight:500;}
.top-bar ul{margin:0px auto;}
.top-bar ul li {border-right:1px solid #4d4d4d;}
.top-bar ul li:last-child{border-right: 1px solid #fff;}
button, .button {border:none; background-color:#fff; color:#4d4d4d; line-height:20px; border-bottom:#fff 1px solid;}
button:hover, button:focus, .button:hover, .button:focus {color:#4d4d4d; border-bottom:#4d4d4d 1px solid; background: #ffffff;}

/* -------------------------------- Media Queries -------------------------------- */
	.button{font-size:0.25rem; padding:0px;}
	.top-bar ul{margin:0px 0px;}
	.yellowstripe{font-size:1rem;}
	.twenty{font-size:1rem;}
	.fiftyfour{font-size:3.375rem;}
	.quote{font-size:0.875rem; margin: 0px 0px 25px 0px;}
	.gallery {margin:0px 0px 15px 0px;}
	.feature {margin:0px 0px 15px 0px;}
	.synopsis, .location, .camera, .optics, .fstop, .date, .source{color:#4d4d4d; font-weight:700;}
	.image-ref{color:orange; font-weight:700;}

	ul.striped-list {list-style-type:none; margin:0; padding:0;}
	ul.striped-list > li:nth-of-type(odd) {background:#f2f2f2;}
	ul.striped-list > li {border-bottom:1px solid #4d4d4d; padding:6px;}

@media print, screen and (min-width: 40em) {
	.button{font-size:0.8125rem; padding:0px;}
	.top-bar ul{margin:0px auto;}
	.yellowstripe{font-size:1rem;}
	.twenty{font-size:1rem;}
	.fiftyfour{font-size:3.375rem;}
	.quote{font-size:1rem; margin: 5px 0px 25px 0px;}
	.gallery {margin:0px 0px 15px 0px;}
	.feature {margin:0px 0px 25px 0px;}
}
@media print, screen and (min-width: 64em) {
	.button{font-size:1.125rem; padding:0px;}
	.top-bar ul{margin:0px auto;}
	.yellowstripe{font-size:1.125rem;}
	.twenty{font-size:1.25rem;}
	.fiftyfour{font-size:3.375rem;}
	.quote{font-size:1.25rem; margin: 5px 0px 35px 0px;}
	.gallery {margin:0px 0px 15px 0px;}
	.feature {margin:0px 0px 35px 0px;}
}

/* -------------------------------- Mobile Menu -------------------------------- */
.mobilenav{margin:0px 0px 15px 0px;}

/* Style the navigation menu */
.mobilenav {
  overflow: hidden;
  background-color:#4d4d4d;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.mobilenav #myLinks {
  display: none;
}

/* Style navigation menu links */
.mobilenav a {
  color: white;
  padding: 5px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.mobilenav a.icon {
	background: #f05c27;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
	color:#575757;
}

/* Add a grey background color on mouse-over */
.mobilenav a:hover {
	background: #f05c27;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color:#575757;
  color: white;
}
.mobilenav a.slim{padding:3px 16px;}

/* -------------------------------- Return To Top -------------------------------- */
#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background:#575757;
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
	z-index: 1500;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background:#4d4d4d;
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}

/* -------------------------------- Form -------------------------------- */
label {padding:0px 25px; font-style: italic; font-family: ff-meta-serif-web-pro, times, serif; color:#4d4d4d; background: rgb(219,219,219);
background: radial-gradient(circle, rgba(219,219,219,1) 0%, rgba(242,242,242,1) 50%, rgba(219,219,219,1) 100%);}
.boldy{color:#4d4d4d;}

#submitbutton.button {font-size:1rem; width:100px; color:#fff; background-color:#4d4d4d; border-radius:0px; padding:7px; border:1px solid #4d4d4d;}
#resetbutton.button {font-size:1rem; width:100px; color:#4d4d4d; background: rgb(219,219,219);
background: radial-gradient(circle, rgba(219,219,219,1) 0%, rgba(242,242,242,1) 50%, rgba(219,219,219,1) 100%); border-radius:0px; padding:7px; border:1px solid #4d4d4d;}
.help-text{color:#4d4d4d;}