/*
Theme Name: TB Photography V2.1
Author URI: http://www.brightcherry.co.uk/
Description: TB Photography bespoke Theme
Version: 2.1
*/

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

body, html{height:100%}

:focus {/* remember to define focus styles! */
	outline: 0;
}

ol, ul {
	list-style: none;
}

a{
	color: #000;
}

a img {
	border: 0;
}

* {
	box-sizing: border-box;
}

strong{
	font-weight:700;
}

em{
	font-style:italic;
}

.clear{
	width:100%;
	clear:both;
	height:0;
}

.clear.break20{
	height:20px;
}

p,
.post-content ul,
.post-content ol{
	margin:0 0 20px 0;
	font-size:16px;
	line-height:1.6em;
	font-weight:200;
}

h1,h2,h3,h4,h5,
.h1,.h2,.h3,.h4,.h5{
	font-weight:500;
	line-height:1.4em;
}

h1,
.h1{
	font-size:21px;
}

h2,
.h2{
	font-size:19px;
}

h3,
.h3{
	font-size:18px;
	line-height:1.2em;
}

h4,
.h4{
	font-size:17px;
	line-height:1.2em;
}

h5,
.h5{
	font-size:16px;
	line-height:1.2em;
}

h6,
.h6{
	font-size:16px;
	line-height:1.2em;
}



/* =Colours
----------------------------------------------- */

.brown,
#social li a:hover{
	color:#b9b1a7;
}


/* =Structure
----------------------------------------------- */

body {
	text-align:center;
	font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
	color:#000;
	font-weight:400;
	text-align:left;
}

#wrapper,
#main-content{
	position:relative;
	height:100%;
}


#sidebar{
	float:left;
	position:absolute;
	left:0;
	top:0;
	width:25%;
	padding:60px 30px 30px 5%;
	z-index:3;
}

#content{
	float:right;
	width:95%;
	margin-right:5%;
	padding:25px 25px 25px 25px;
	padding-left: 25%;
	position: relative;
	z-index: 2;
}


.copyright{
	padding: 80px 0 10px 25%;
	position: relative;
}

.copyright p{
	font-size:12px;
	font-weight:400;
}


/* =Post Content
----------------------------------------------- */

.max-width,
.post-content,
.posts,
.read-more-posts{
	max-width:980px;
	position:relative;
}

.post-content:first-of-type{	
	padding:40px 0 0 0;
}

.post-content{	
	padding:20px 0 0 0;
}

.post-content p{
	text-align:justify
}

/* =Sidebar
----------------------------------------------- */

#sidebar .title{
	padding-bottom:40px;
}

#sidebar .title a{
	display:block;
	text-decoration:none;
	font-weight:normal;
	line-height:1.4em;
	font-family: 'Bebas Neue';	
}

#sidebar .title a:hover *{
	color:#000;
}

#sidebar .title .h1{
	font-size:38px;
}

#sidebar .title .h2{
	line-height: 0.8em;
	text-transform:uppercase;
	font-weight:400;
	font-size:32px;
	display:block;
	font-family: 'Bebas Neue';	
}

#sidebar .title .h3{
	text-transform:uppercase;
	font-size:18px;
	letter-spacing:0.26em;
	display:block;
	font-weight:400;	
}

#sidebar ul#nav{
	
}

#sidebar ul#nav li{
	position:relative;
	padding:12px 0;
}

#sidebar ul#nav li a{
	text-decoration:none;
	font-size:15px;
}

#sidebar ul#nav li.current-menu-item a{
	text-decoration:underline;
}

#sidebar ul#nav li.current_page_item > a,
.single-photography #sidebar ul#nav li.menu-item-40 a{
	text-decoration:underline;
}

#sidebar ul#nav li a:hover{
	color:#999;	
}


#sidebar ul#nav li.menu-item-has-children > a:after {
	content: "\2b";
	font-family: 'Font Awesome 6 Free';
	font-style: normal;
	font-size:12px;
	font-weight: 700;
	margin-left:5px;	
}

#sidebar ul#nav ul.sub-menu{
	margin-top:8px;
	margin-left:15px;	
	display:none;
	
}

#sidebar ul#nav ul.sub-menu li{
	padding-top:0;
	padding-bottom:5px;	
}


#sidebar ul#nav ul.sub-menu li a{
	font-size:14px;
	font-weight: 300;
}

#social{
	position:fixed;
	bottom:25px;
	left:30px;
}

#social li{
	display:inline-block;
	margin-right:18px;
}

#social li a{
	font-size:21px;	
}

.hamburger{
	display:none;
	z-index: 999999;
	position: relative;
	padding:0;
	opacity: 1 !important;
}

.hamburger-inner, 
.hamburger-inner::before, 
.hamburger-inner::after {
	background-color:#001446;
	border-radius: 0 !important;
}



/* =Homepage
----------------------------------------------- */



/* =Gallery page
----------------------------------------------- */

.gallery{
	display:grid;
	width:100%;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 15px;
}

.gallery a{
	display:block;
	text-decoration:none;
}

.gallery a span.title{
	display:block;
	text-align:left;
	width:100%;
	padding:15px 20px 30px 0;
	font-size:17px;
	line-height:1.3em;
}

.gallery img{
 width:100%;
 height:auto;
 display:block;
}


.pswp__bg{
	background-color:#fff !important;
}

.pswp__counter {
	color: #000000 !important;
	text-shadow: none !important;
  opacity: 1 !important;
}

.pswp__dynamic-caption {
	width: auto !important;
	left: 50% !important;;
	-webkit-transform: translateX(-50%) !important;;
	transform: translateX(-50%) !important;
	padding:10px 20px 0 20px !important;
}

.pswp__dynamic-caption--overlay {
	background-color:#fff !important;
}

.pswp__caption__text{
	color:#000 !important;
	padding-bottom:20px  !important;
}

/* =Blog page
----------------------------------------------- */

.post a.title,
.post .read-more:hover{
	font-size:300;
	text-decoration:none;	
}

.post a.title:hover{
	text-decoration:underline;
}

.post a.title h2{
	padding:15px 20px 0 0;
	font-size:17px;
	line-height:1.3em;
}

.post{
	padding-bottom:30px;
}

.meta{
	padding:4px 0 8px 0;
}

.meta span.date{
	font-size:14px;
}

.post .read-more{
	font-weight:300;
	font-size:14px;
	text-decoration:underline;	
}

/* =Paging
----------------------------------------------- */

.wp-pagenavi {
	clear: both;
	padding:20px 0 60px 0;
}

.wp-pagenavi a, 
.wp-pagenavi span {
	text-decoration: none;
	padding: 8px 20px 8px 0;
	margin: 2px 0;
	color:#000;
	font-size:14px;
  display: inline-block;
 
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 50%; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 50%; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 50%;  
  
}

.wp-pagenavi span.pages {
	border:0
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	font-weight:400;
}

.wp-pagenavi span.current {
	font-weight: bold;
}


/* =Blog page > Single
----------------------------------------------- */

.post-content h1{
	padding:0 0 15px 0;
}

.post-content h1.page-title{
	padding:0;
}


.post-content h2{
	padding:10px 0 15px 0;
}

.post-content h3{
	padding:10px 0 15px 0;
}

.post-content h4{
	padding:10px 0 10px 0;
}

.post-content h5{
	padding:10px 0 10px 0;
}

.post-content h6{
	padding:10px 0 10px 0;
}

.post-content ul,
.post-content ol{
	padding:20px 40px;
}

.post-content ul li{
	list-style-type:disc;
	line-height:1.4em;
	padding-bottom:10px;
}

.post-content ol li{
	list-style-type:decimal;
	line-height:1.4em;
	padding-bottom:10px;
}

/* Style for blockquote */
blockquote {
  margin: 15px 30px 20px 20px;
  padding: 10px 20px;
  border-left: 5px solid #000;
  font-style:italic;
}

/* Style for <cite> within blockquote */
blockquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 0.9em;
  color: #666;
}

/* Style for <cite> tag itself */
cite {
  font-style: italic;
  font-size: 0.9em;
  color: #666;
}

.read-more-posts{
	padding:0 0 120px 0;
}

.read-more-posts h3.title{
	padding-bottom:20px;
}

.read-more-posts a{
	text-decoration:none;
}

.read-more-posts .grid.col-3{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 10px;
	text-align:left;
}


/* =WP Blocks
----------------------------------------------- */

.post-content .wp-block-image{
	margin: 30px 0;
}

.post-content .wp-block-image:first-of-type{
	margin-top:0;
}

.wp-block-image img {
	width: 100% !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	font-size: 16px !important;
}


/* =Contact form
----------------------------------------------- */

.wpcf7-form{
	max-width:600px;
}

.wpcf7-form br{
	display:none;
}

.wpcf7-form select,
.wpcf7-form input[type=date],
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form textarea{
	width:100%;
	padding:10px 10px;
	border:0;
	font-size:16px;
	color:#000;
	border:1px solid #000;
}

.wpcf7-form label{
	font-size:15px;
	text-align:left;	
	display:block;
	font-weight:400;
}

.wpcf7-form select option{
	padding:2px 2px;
	font-size:14px;
}

.wpcf7-form input[type=submit]{
	width:100%;
	padding:6px 10px;
	margin-top:10px;
	margin-bottom:10px;
	background: #000;
	border:2px solid #000;
	width:200px;
	color:#fff;
  font-size:15px;
}

.wpcf7-form input[type=submit]:hover{
	background:#fff;
	color:#000;
	cursor:pointer;
}

.wpcf7-form textarea{
	height:150px;
}

.wpcf7-form .wpcf7-list-item{
	display:block;
	margin-left:0;
}

.wpcf7-form .wpcf7-list-item label{
	font-weight:normal;
}

.wpcf7-form .field{
	margin:15px 0 15px 0;
	text-align:left;
}

.wpcf7-form .field-left{
	float:left;
	width:48%;
	text-align:left;	
}

.wpcf7-form .field-right{
	float:right;
	width:48%;
	text-align:left;
}

.wpcf7-form .field p,
.wpcf7-form .field-left p,
.wpcf7-form .field-right p{
	margin:0;
}

span.wpcf7-not-valid-tip {
	font-size:14px !important;
	padding-top:4px;
	text-indent:0;
}

div.wpcf7-response-output{
	margin: 20px 0 0 0 !important;
	border: 0 !important;
	padding: 10px 15px !important;
	background: #2a2a2a;
	color: #fff;	
	position: relative;
	font-size:15px;
}

div.wpcf7-validation-errors{
	background:#990000 !important;
	color:#fff;
}