/*!
Theme Name: Daniel Paul Films & Photography
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: This is a custom theme built for Daniel Paul Films & Photography
Version: 2.0.3
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: daniel-paul-films-photography

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Color Variables
# Typography
	## Links
# Elements
	## Share
	## Pop Up
# Structure
	## Header
		### Logo
		### Main Menu
		### Mobile Menu
	## Pages and posts
		### Home
		### Photography
		### Video
		#### Video Single
		### Giving Back
		### Contact
	## Pagination
	## Comments
	## CTA
	## Footer
# Forms
# Clearings
# Widgets
# Infinite scroll
# Accessibility

--------------------------------------------------------------*/

#wpadminbar {display:none;}



/*--------------------------------------------------------------
# Color Variables
--------------------------------------------------------------*/
 :root {
	/* White - Black */
	--white: #fff;
	--charcoal: #292f2f;
	--black: #000;
	
	/* gold */
	--gold: #dabc6e;

	/* pink */
	--pink: #f38282;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
	color: #333;
	font-family:'Poppins',sans-serif;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	font-family:'Playfair Display',serif;
	margin:0 0 0.67em;
	line-height:1.25;
	font-weight:300;
	clear: both;
}

h1 {font-size:3em}

h1 .subtitle {
	display:block;
	font-family:'Poppins',sans-serif;
	color: #333;
	letter-spacing:0.2em;
	text-transform:uppercase;
	font-size:1.25rem;
	margin-top:0.5rem;
	font-weight:400;
}

/* Remove */
#vision{ display:none;}

p {
	color: #555;
	line-height: 2rem;
	margin-bottom: 1.5em;
}

dfn, cite, em, i {font-style: italic;}

blockquote {margin: 0 1.5em;}

address {margin: 0 0 1.5em;}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code, kbd, tt, var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark, ins {
	background: #fff9c0;
	text-decoration: none;
}

big {font-size:125%;}

@media (max-width: 990px) {
	h1 {
		font-size:2.5em;
	}
}

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {color:var(--pink);text-decoration:none;}

a:hover,
a:focus,
a:active {color:var(--pink);text-decoration:underline;}

a:focus {outline: thin dotted #ccc;}

a:hover,
a:active {outline: 0;}


/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {box-sizing: border-box;}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

body {background: #fff;}

body.no-scroll {
    overflow: hidden;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul, ol {margin:0 0 1.5em 3em;}

ul {list-style:disc;}

ol {list-style:decimal;}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {font-weight:bold;}

dd {margin: 0 1.5em 1.5em;}

img {
	display:block;
	height:auto;
	max-width:100%;
}

figure {margin: 1em 0;/* Extra wide images within figure tags don't overflow the content area. */}

table {margin: 0 0 1.5em;width: 100%;}

a.btn {
	display:inline-block;
	position:relative;
	overflow:hidden;
	font-size:0.8em;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:0.1em;
	color:currentColor;
	background:none;
	border:2px solid var(--pink);
	border-radius: 0;
	padding:15px 20px;
	text-decoration:none;
}

a.btn span {
    transition: opacity 0.3s;
    background: none;
    opacity: 0;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    display: block;
    content: '';
    position: absolute;
    z-index: 0;
    border: 2px solid var(--pink);
}

a.btn:hover > span {opacity:1;}

a.btn:hover > svg {transform: translate3d(-50%, -50%, 0)}

button {border:none;background:none;}

/*--------------------------------------------------------------
## Share
--------------------------------------------------------------*/
#share {
	margin-bottom:4em;
}

#share a {position:relative;text-decoration:none;}

#share svg {width:40px;height:40px;display:inline-block;}

#share svg path {fill:#666;}

#share a:hover path {fill:var(--pink);}

#share .facebook:after {content:'Share on Facebook';}
#share .twitter:after {content:'Share on Twitter';}
#share .google:after {content:'Share on Google+';}

#share a:after {
	visibility:hidden;
	opacity:0;
	position:absolute;
	top:-50px;
	left:-50px;
	width:140px;
	font-size:0.7em;
	background:var(--pink);;
	color:#fff;
	border-radius:20px;
}

#share a:hover:after {visibility:visible;opacity:1;top:-40px}

#share svg path,
#share a:after {transition:all 0.3s;}

/*--------------------------------------------------------------
## Pop Up
--------------------------------------------------------------*/

#popup {
	content:'Your message has been sent successfully.';
	display:block;
	background:#fff;
	box-shadow:3px;
}

/*--------------------------------------------------------------
# Structure
--------------------------------------------------------------*/
.container {
	max-width:1200px;
}

.container.full {
	max-width:100%;
}

.padding-lg {
	padding-top:6em;
	padding-bottom:6em;
}

.padding-md {
	padding-top:4em;
	padding-bottom:4em;
}

.padding-sm {
	padding-top:2em;
	padding-bottom:2em;
}

@media (max-width: 1280px) {
	.padding-lg {padding-top:4em; padding-bottom:4em;}
}

.center {
	text-align:center;
}

.overlay {
	position:fixed;
	visibility:hidden;
	background-color:rgba(0,0,0,0.0);
	width:100%;
	height:100%;
	top:0;
	left:0;
	transition:all 0.4s ease-out;
	z-index:9999;
}

.overlay.show {
	background-color:rgba(0,0,0,0.5);
	visibility:visible;
}

/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
header {
	position:fixed;
	background:#fff;
	width:100%;
	top:0;
	z-index:999;
}

.home header {background:none;}
.home header nav ul a {color:#fff;}
.home header .logo svg {
	transition:fill 0.3s ease-in-out;
	fill: #fff;
}

/*--------------------------------------------------------------
### Logo
--------------------------------------------------------------*/
header .logo {
	float: left;
}
header .logo svg {
	fill: var(--gold);
}
header .logo-box {overflow:hidden;}

/*--------------------------------------------------------------
### Main Menu
--------------------------------------------------------------*/
nav.main {
	margin:10px 0;
	display:block;
	float:right;
}

nav.main ul {
	list-style:none;
	margin:0;
	padding-left:0;
}

nav.main ul ul {
	background:#eee;
	float:left;
	position:absolute;
	top:100%;
	left:-999em;
	z-index:999;
}

nav.main ul ul li:hover > ul,
nav.main ul ul li.focus > ul {
	left:100%;
}

nav.main ul ul a {
	width:200px;
}

nav.main ul li:hover > ul,
nav.main ul li.focus > ul {
	left:auto;
}

nav.main li {
	float:left;
	position:relative;
	margin-left:30px;
}

nav.main li a {
	display:block;
	text-transform:uppercase;
	text-decoration:none;
	color:#444;
	font-size:0.85em;
	letter-spacing:0.1em;
	padding:30px 0;
	transition: all 0.2s ease-in-out 0s;
}

nav.main li.current-menu-item a {
    color: #aaa;
}

nav.main a:hover {color:var(--pink)}

nav.main ul li li a {padding:20px 0}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
}

/*--------------------------------------------------------------
### Mobile Menu
--------------------------------------------------------------*/

.mobile-menu {
	display:none;
}

.mobile-menu a,
.mobile-menu button {
    position:relative;
    padding:30px 15px;
    float:right;
}

.mobile-menu path {color:#444;}
.home .mobile-menu path {color: #fff;}

nav.slide {
    position: fixed;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
    max-width: 380px;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 60px;
    z-index: 99999;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.4s ease-in-out;
}

nav.slide ul {
	list-style:none;
	margin:20px 0;
	padding-left:0;
}

nav.slide ul li {
	padding:5px 0;
}

nav.slide ul li a {
	color:var(--charcoal);
	font-size:1.5em;
	font-family:"Playfair Display", serif;
}

nav.slide.open {
    transform: translate3d(0, 0, 0);
    transition: all 0.4s ease-in-out 0.4s;
}

.current-menu-item a {color: #aaa;}

@media (max-width: 1040px) {
	nav.main ul {display:none;}
	.mobile-menu {display:block;}
	.logo svg {width:60px;}
}

@media (max-width: 640px) {
	header .logo-img {min-width:495px;}
	header .logo-box {width:60px;}
	
	.shrink .logo-img {min-width:371px;}
	.shrink .logo-box {width:51px;}
	
}

/*  Header Shrink */

header.shrink {background:#fff;border-bottom:1px solid #eee;}
header.shrink nav ul li a {color:#444;}

.home header.shrink .logo svg {
	fill: var(--gold);
}
header.shrink nav {margin:0;}
.home header.shrink .mobile-menu path {color: #444;}

header,
header .logo-img,
header nav,
header .mobile-menu a,
header .mobile-menu button,
header .mobile-menu path {transition:all 0.3s;}

/*--------------------------------------------------------------
## Pages and posts
--------------------------------------------------------------*/
#content {padding-top:4em;}
body #content {padding-top:0;}

h1.entry-title {
	padding-bottom: 0.5em;
    border-bottom: 4px double var(--gold);
}

.updated:not(.published) {display:none;}

.page-content,
.entry-content,
.entry-summary {
	margin:1.5em 0 0;
}

.page-links {
	clear: both;
	margin:0 0 1.5em;
}

.script {color:#555;font-family:"Playfair Display";font-style:italic;font-size:2em;}
.title {font-size:0.8em;text-transform:uppercase;color:var(--pink);font-weight:700;letter-spacing:0.1em;}

/*--------------------------------------------------------------
### Home
--------------------------------------------------------------*/

.home iframe {border-width:0;}

.dp-section {
    position: relative;
}

#section1 {padding:0;}

@keyframes reveal
{
	0% {bottom:-50px;opacity:0}
	80% {opacity:1}
	100% {bottom:0;opacity:1}
}

.content {
    background-color: #fff;
    display:block;
    margin:0 auto;
    box-sizing:border-box;
    padding:6em;
}

.content .inner {
	width:100%;
	text-align:center;
	border-top:2px solid var(--gold);
	border-bottom:2px solid var(--gold);
	padding:4em 0;
}

.home h1 {color:var(--gold)}

.home h2 {margin-top:0;}

.dp-section:nth-of-type(2) {background-color: #fff;}

.dp-section:nth-of-type(3),
.dp-section:nth-of-type(4) {background-color: #745360;}

.dp-section:nth-of-type(5) {background-color: var(--pink)}

.dp-section h2 {font-size: 3em;}

#dp-vertical-nav li {list-style:none;}

#film, #photo {
    background: #eee;
    display: flex;
    align-items: center;
}

.text {padding-left:6em;padding-right:6em;}

.text,.photo {width:50%;float:left;}

@media only screen and (max-width: 1280px) {
	.dp-section h2 {font-size: 2em;}
	.content {padding:2em}
	.content .inner {padding:2em 0}
	.text {padding-left:4em;padding-right:4em;}
}

@media only screen and (max-width: 990px) {
	.text,.photo {display:block;width:100%;float:none;}
	.text {position:absolute;top:50;color:#fff;text-align:center;padding-left:0;padding-right:0;}
}

/*--------------------------------------------------------------
### Video
--------------------------------------------------------------*/

#video-gallery {background:#eee;}

#video-gallery a {background:#fff;color:#333;text-decoration: none!important;}

#video-gallery .card {border:none;}

#video-gallery a .thumb {background-color:var(--pink);position:relative;overflow:hidden;margin-bottom:-1px;}

#video-gallery a .thumb img {transform: translate3d(0,0,0);transition:all 0.3s;}

#video-gallery a .thumb .watch {
	z-index:2;
	position:absolute;
    top:50%;
    left:50%;
    background:#fff;
    color:var(--pink);
    padding:5px 10px;
    border-radius:50px;
    font-size:0.7em;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    opacity:0;
    transition:opacity 0.3s 0.1s;
    transform: translate3d(-50%, -50%, 0);
}

#video-gallery a .entry {padding:2em 1em;}

#video-gallery a h2 {font-size:1.5rem;}

#video-gallery a:hover {text-decoration:none;}

#video-gallery a:hover h2 {color:var(--pink);}
#video-gallery a:hover .category {color:var(--charcoal);}
#video-gallery a:hover .thumb img {opacity:0.5;}
#video-gallery a:hover .thumb .watch {opacity:1;}

span.category {
    text-align: center;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    font-size: 0.7em;
    color: var(--pink);
}

.video-gallery article h2 {margin:0;font-size:1.5em}

.video-gallery:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 1px;
}

@media (max-width: 768px) {
	.video-gallery a,.gap {
		width:47.5%;
	}
}

@media (max-width: 420px) {
	.video-gallery a,.gap {
		width:100%;
	}
}

/*--------------------------------------------------------------
#### Video Single
--------------------------------------------------------------*/

.category + h1 {margin-top:0;}

.vimeo-container {position:relative;background:#000;padding-bottom:56.25%; height:0; overflow:hidden; max-width:100%;}
.vimeo-container iframe, .vimeo-container object, .vimeo-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.description {background:#eee;padding:2em;}

#recommended .entry {background:#eee;}

/*--------------------------------------------------------------
### Giving Back
--------------------------------------------------------------*/

#quoted {background:#444;}
#quoted p {position:relative;color:#fff;font-size:2em;font-family:"Playfair Display";font-style:italic;font-weight:300;}

#quoted p:before,
#quoted p:after {position:absolute;color:var(--gold)}
#quoted p:before {content:"“";top:-20px;left:20%;}
#quoted p:after {content:"”";bottom:-40px;right:20%;}

#gbVideo {background:#eee;}


/*--------------------------------------------------------------
## Pagination
--------------------------------------------------------------*/

.site-main .comment-navigation, .site-main
.posts-navigation, .site-main
.post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {word-wrap: break-word;}

.bypostauthor {display: block;}

/*--------------------------------------------------------------
## Quote
--------------------------------------------------------------*/

#quote {background-color:#ffaaa9}
  
#quote form {margin-top:40px;}
 
.qc input {width:32%;float:left;margin-right:2%;}
.qc input[type=date] {margin-right:0;}
form input[type=date] {height:51px;}
.qc input[type=submit] {background:var(--gold);width:100%;float:none}
.qc input[type=submit]:hover,
.qc input[type=submit]:active {
	background:var(--pink);
}

.qc-form {padding:6em;background:#fff;box-shadow: #d67776 0 0 15px;}

@media (max-width: 990px) {
	.qc-form {padding:4em 2em;}
}

@media (max-width: 640px) {
	.qc-form {padding:2em;}
	.qc input {width:100%;float:none;margin:0;}
}

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/

footer {background:#fafafa;}

.cta div {width:33.33%;float:left;}

.cta .fh {
	font-weight:700;
	margin-bottom:20px;
}

.cta a {
	display:block;
	font-family:'Playfair Display', serif;
	font-size:2em;
	color:var(--pink);
}

.cta ul {margin:0;padding:0;}

.cta ul li {list-style-type:none;display:inline-block;}

.cta .social svg {width:50px;height:50px;border:2px solid var(--pink);border-radius:30px;}
.cta .social svg path {fill:var(--pink);}

.cta .social svg:hover {background:var(--pink);}
.cta .social svg:hover path {fill: #fff;}

.footer p {
	font-size:0.8em
}

@media (max-width: 990px) {
	.cta div {width:100%;float:none;margin-bottom:2em;}
	.cta div:last-of-type {margin-bottom:9}
}



/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.contact-form {
	background:#fff;
	text-align:left;
	margin:0 auto;
	padding:4em;
}

.contact-form h2 {font-size:1.5em;}

.contact-form .contact,
.contact-form .details {width:50%;float:left;}

.contact-form .contact {padding-right:1em;}
.contact-form .details {padding-left:1em;}

form input,
form textarea,
form select {
	font-size:0.9em;
    border: 1px solid #ccc;
    border-radius: 1px;
    padding: 15px;
    width: 100%;
}

form input[type=text],
form input[type=email],
form input[type=tel],
form input[type=date],
form select {
	margin-bottom:0.5em;
}

form input[type=submit] {
	cursor: pointer;
	background:var(--pink);
	border:0;
	color:#fff;
	text-transform:uppercase;
	font-weight:700;
	letter-spacing:0.1em;
	transition: all 0.3s;
}

div.wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 1em;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: #ffe4e4;
}

.small {font-size:0.8em;}

@media (max-width: 768px) {
	.contact-form {padding:2em;}
	.contact-form .contact,
	.contact-form .details {width:100%;float:none;padding:0}
}


/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}


/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
	/* Make sure select elements fit in widgets. */
}

.widget select {
	max-width: 100%;
}


/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	/* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}


/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}