/*!
Theme Name: harbour
Author: Nick Weekes
Author URI: http://nickweekes.co.uk/
Description: Art lending library website 2026
Version: 1.0.1
Text Domain: harbour

colours
white #ffffff
black #231f20 -> #231f20
red #ff4421
grey #555;

*/
body { font-family: 'Montserrat', sans-serif; margin:0; font-weight: 500; }
a { color: #ff4421; text-decoration: none; }
.fix::after { content: ""; clear: both; display: table; }

/* header {  } */

#header { max-width: 1200px; margin: 30px auto 0 auto; position: relative; }
/* #logo {  } */
#logo { height: 105px; }
#logo img { max-width: 180px; height:auto; }
#logo-home { display:inline-block; margin-bottom:100px; }
main { max-width: 1200px; margin:0 auto 250px auto; }
#slider { margin:30px 0; }
.controls { margin:20px auto 0 auto; height:30px; }
.controls span { font-size: 36px; color:#a8a8a8; cursor:pointer; }
.controls .inactive { opacity:1; }
.leftarr { float:left; }
.controls .rightarr { margin-right: 20px; }
.rightarr { float:right; }
#intro { font-family: 'Montserrat'; font-size: 36px; color: #666; max-width: 600px; margin: 0 auto; text-align: center; }
#content { margin-bottom:150px; }
.contents { width: 100%; }
.contents.default { max-width: 780px; }
.contents.artist { max-width: 860px; }
.home-contents { margin: 5vh auto 0 auto; }
.home-contents .wp-block-image { margin-left: 0; margin-right: 0; }
.welcome-menu { column-gap:5%; }
.welcome-menu li a { text-transform: uppercase; font-size: 4vh; font-weight: 300; }

footer { background-color:#231f20; width:100%; }
#footer { max-width: 1200px; margin: 0 auto; }
#socials { margin:30px 0 0 10px;  padding: 0; float:left; }
.s-btn { display: inline-block; width: 50px; padding-right: 40px; }
.s-btn img { width: 100%; height:auto; }
#copyright p { margin: 0; text-align: center; padding: 10px 0 30px 0; display: inline-block; width: 100%; color:#555; }
#logo-home img { max-width: 100%; height: auto; }

/* type */
h1 { font-family: 'Montserrat', sans-serif; font-size:64px; font-weight: 200; }
h2 { font-family: 'Montserrat', sans-serif; font-size:56px;font-weight: 200; }
h3 { font-family: 'Montserrat', sans-serif; font-size:28px; }
h4 { font-family: 'Montserrat', sans-serif; font-size:28px; color:#333; }
h5 { font-family: 'Montserrat', sans-serif; font-size:24px; }
h1, h2, h3, h4, h5 { color:#231f20; }
h1 a, h2 a, h3 a, h4 a, h5 a { text-decoration: none; color:#231f20; }
p { line-height:1.4; }
.wp-block-quote, .wp-block-quote p { margin: 10px 0; font-size: 21px; }
cite { font-size:18px; }
h2.page-title { text-transform: uppercase; font-size: 6vw; color: #231f20; }
.artists-title { text-transform: uppercase; }
.artists-list { font-weight: 300; font-size: 3vh; }
.artist-list .wp-block-separator { border-top: solid 0.5pt #000 !important; }
.artist-list h2 { font-weight: 300; font-size: 3vh; margin:0; text-transform:uppercase; }
.artist-link { display: flex; align-items: center; }
.wp-block-post-featured-image { margin: 0; }
.thin.wp-block-separator { border-top: solid 0.5pt #000 !important; }
.subs-only { margin:20px 0; display: inline-block; }

/* posts */
#archive { display: flex; flex-wrap: wrap; align-content: flex-start; }
.post-controls a { text-decoration: none; position:relative; }

.post-controls .p-title { font-size: 16px; vertical-align:-8px;  color:#a8a8a8; margin-left: 10px; }
.post-controls .n-title { font-size: 16px; vertical-align:-8px;  color:#a8a8a8; margin-right: 10px;}

.post-controls .p-arr { font-family: 'Dashicons'; font-size:36px; color:#a8a8a8; width:auto; }
.post-controls .n-arr { font-family: 'Dashicons'; font-size:36px; color:#a8a8a8; width:auto; }

.post-controls { max-width: 1200px; height: 30px; margin: 100px auto; width:100%; }
.n-title { white-space: nowrap; font-family: 'Montserrat', sans-serif; margin-right: 10px; }
.p-title { white-space: nowrap; font-family: 'Montserrat', sans-serif; margin-left: 10px; }
.p-arr { position: relative; }
.n-arr { position: relative; }
.postbox { margin: 0 0 10px 0; float: left; }
.thumb { max-width: 240px; float: left; }
.thumb img { max-width:100%; height:auto; }
.thumbhead { margin:20px 0; }
.expt { max-width:800px; margin-left: 260px; }

/* menu-header-menu */
#menu-header-menu { margin:0 0 0 30px; list-style:none; padding:0 0 4px 0; text-align: center; border-bottom: 1px solid #231f20; position:absolute; bottom:7px; left: 180px; right: 0; } 
#menu-header-menu li { display:inline-block; padding:0 30px; line-height: 1; }
#menu-header-menu li:nth-of-type(1) { border-left: none; padding-left: 0; } 
#menu-header-menu li a { text-decoration:none; font-family: 'Montserrat', sans-serif; font-size:21px; color:#231f20; font-weight: bold; }
#menu-header-menu .current_page_item a { color: #ff4421; }
.sub-menu { list-style: none; }
#menu-globalmenu .sub-menu li a { list-style: none; font-size:21px; }
.menubtn { position: absolute; right: 30px; top: 42px; cursor:pointer; visibility:hidden; }
.menubtn span { font-size: 36px; color:#ff4421; }
.menubtn.active { position: absolute; z-index: 20; }
.menubtn.active span { color: #ccc; }

.home-header #menu-header-menu { left:0; }
.home-header #menu-header-menu .current_page_item { display: none; }

/* columns */
.wp-block-column p { padding-right: 10%; }

/**/
.menuicon { position: absolute; right: 0px; margin: 10px 0; bottom: 2px; }
.menuicon svg { max-width: 35px; height: auto; }
.menuicon rect { fill: #666; }
.menu-globalmenu-container { z-index: 10; overflow-y: auto; position: fixed; background: #777; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; opacity: 0; transition: 0.5s; }
ul#menu-globalmenu { max-width: 800px; margin: 60px auto 120px auto; list-style: none; padding: 0; display: table; width: 100%; }
nav::after { content:"";  }
.menu-globalmenu-container.shown { visibility: visible; opacity: 1; }
#menu-globalmenu li { font-family: 'Montserrat Condensed', sans-serif; margin-left: 20px; }
#menu-globalmenu li a { color: #fff; padding: 20px 0; display: block; font-size: 24px; text-decoration: none; }

.welcome-menu li a span:hover, #menu-header-menu li a:hover { color: #ef3226; }
/* #logo img:hover { filter:invert(50%) hue-rotate(75deg); } */
#logo img:hover { filter: brightness(0) saturate(100%) invert(11%) sepia(98%) saturate(7464%) hue-rotate(3deg) brightness(103%) contrast(110%); }
/* widgets */
#footer-widgets { display: flex; justify-content: space-between; }
#footer-widgets .widget { width: 25%; padding: 0 10px 60px 10px; }
#la-widget img { max-width:80%; height:auto; }
#footer-widgets .widgettitle { font-size: 26px; color: #fff; }
.foot-address { font-size: 18px; color: #fff; line-height: 1.5; margin-top: 20px; }

.footsocial { list-style:none; margin:0; padding:0; }
.footsocial li { margin:0; font-size: 18px; }
.footsocial li a { text-decoration:none; color:#fff; }

#footer-menu { float: right; margin: 30px 0; }
#menu-footer { list-style:none; margin:0 10px 0 0; padding:0; display: flex; justify-content: right; align-items: center; height: 70px; }
#menu-footer li { margin:0; line-height:1.5; font-size: 18px; display:inline-block; padding:0 0 0 40px; }
#menu-footer li a { text-decoration:none; color:#fff; }

.mc4wp-form { width:100%; }
.mc4wp-form input { display:block; font-size:16px; font-family: 'Montserrat', sans-serif; text-align: center; margin:0 0 10px 0; }
.email, .first, .last { border:1px solid #fff;  padding:8px 2px;  width: 90%; max-width: 260px; }
.submit { background:#666; border:0; color:#fff; cursor:pointer; border-radius:5px;  padding:10px 2px; width: 90%; max-width: 265px; }
.submit:hover { background:#000; }

/* artists */
#archive .artist { width:25%; margin-bottom: 30px; }
.m-wrap { margin-right: 20px; }
.artist img { max-width: 100%; height: auto; }

/* slider */
.slide-caption { position: absolute; z-index: 1; bottom: 0; background: rgba(255,255,255,0.7); padding: 5px 10px; }
.inactive { opacity: .3; }
.featherlight { background: rgba(255,255,255,0.9) !important; }
.featherlight button.featherlight-close-icon { background-color: #999 !important; }

/* contact page */
#map { max-width:550px; }
.wpcf7-text { width:100%; border: 1px solid #ccc; font-size:14px; height:22px; }
.your-message textarea { width:100%; border: 1px solid #ccc; font-size:14px; }
.wpcf7-submit { color:#fff; background:#333; border-radius:5px; padding: 5px; min-width: 100px; border: none; font-size: 16px; cursor:pointer; }
.wpcf7-submit:hover { background:#666; }
.wp-block-column .wpcf7-form p { padding-right: 0; }
.wpcf7-list-item { display: inline-block; margin: 0; }
.wpcf7-form-control.wpcf7-textarea { width: 100%; }
.wpcf7 form .wpcf7-response-output { margin: 2em 0 1em; width:100%; }
.wpcf7 input, .wpcf7 textarea { padding: 5px 0; }
/* pagination */
.wp-pagenavi { width: 100%; margin:100px; text-align: center; }
.wp-pagenavi a, .wp-pagenavi span { border:none; color: #777; padding: 3px 12px; }
.wp-pagenavi a.smaller, .wp-pagenavi a.larger, .current { font-size:28px; vertical-align: 8px; }
.wp-pagenavi a.nextpostslink, .wp-pagenavi a.previouspostslink { font-family: 'Dashicons'; font-size:36px; color:#a8a8a8; }
.wp-pagenavi span.current { color: #ccc; }

/* other */
.feed { margin: 0 auto; }
.feed h3 { padding:0 10px; }
.wp-block-embed.is-type-video .wp-block-embed__wrapper { float: none; clear: both; background: #333; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 6px; height: 0; }
.is-type-video { margin: 30px 0; }
.is-type-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.contents .addtoany_header { margin: 50px 0 16px; }
.contents .addtoany_content { opacity: 0.7; }
#cookie-notice { font-size:16px; }
.cn-button.bootstrap { color: #fff; background: #666; }
.cn-text-container { margin: 0 0 16px 0; }
.wp-block-image img { max-width: 100%; height: auto; }
.wp-block-separator.is-style-default { border-color: #eae9e9; background: transparent; color: #f0eeee; max-width: 100px; }

/* lists */
.pic { padding:0; }
.contents ol, ul { padding: 0 0 0 16px; }
.contents ol li, ul li { padding: 8px 0; line-height: 1.4; }
/* media queries */
@media screen and (max-width:1220px) {
header, main { margin:0 10px; }
}

@media screen and (max-width:1024px) {
.menubtn { visibility:visible; }
#menu-header-menu li { display:none; }
body.halt { overflow: hidden; }
}

@media screen and (max-width:960px) {
#footer-widgets { display:block; }       
#footer-widgets .widget { width: 45%; display: inline-block; box-sizing: border-box; }
#archive .artist { width: 33.33%; }
.m-wrap { margin-right:10px; }
}

@media screen and (max-width:880px) {
#menu-header-menu li { padding:0 10px; }
}

@media screen and (max-width:768px) {
#footer { display: inline-block; }
.wp-block-column { flex-basis: 100% !important; }
.wp-block-column:nth-child(2n) { margin-left:0; }
.wp-block-column p { padding-right: 0; }
#footer-menu { float:none; display: inline-block; }
#menu-footer { justify-content: center; flex-wrap: wrap; }
#menu-footer li { padding: 10px; }
#copyright { display:inline-block; width: 100%; margin-top: 50px; }
#socials { float:none; display:flex; justify-content: center; }
.s-btn { padding:0 20px; }
}

@media screen and (max-width:640px) {
#archive .artist { width: 50%; }
.menu-globalmenu-container { background-position: bottom -20% center, 90% 30%; }
.jcarousel li img { max-height:400px; }

}

@media screen and (max-width:580px) {
.menu-globalmenu-container { background-position: bottom center, 90% 30%; }
#footer-widgets .widget { width: 100%; }
.post-controls { max-width: 200px; }
.thumb { max-width:none; }
.expt { margin:0 0 40px 0; float:left; }
.artists-title { font-size:12vw; }
}

@media screen and (max-width:480px) {
#intro { font-size: 28px; }
.post-controls { max-width: 100%; }
.p-title { top:40px; right:-15px; }
.n-title { top:40px; left:0px; }
#archive .artist { width: 100%; }
.m-wrap { margin-right:0; }
.feed { max-width: 300px; }
}

@media screen and (max-height:480px) {
.jcarousel li img { max-height:310px; }
}

@media screen and (max-width:360px) {
.jcarousel li img { max-height:300px; }
}
@media screen and (max-height:360px) {
.jcarousel li img { max-height:300px; }
}

@media screen and (max-width:320px) {

}
@media screen and (max-height:320px) {
.jcarousel li img { max-height:240px; }
}