/*
Theme Name: Olympia Theme
Theme URI: n/a
Author: Urban Junkies
Author URI: https://www.urbanjunkies.com/london/
Description: Theme for Your Olympia
Version: 1.0
License: no license, use a theme from https://wordpress.org/themes/ instead.
License URI: n/a
Tags: n/a
Text Domain: olympiatheme
*/

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-VariableFont_slnt,wght.ttf') format("truetype");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'PPFragment-GlareBold';
    src: url('fonts/PPFragment-GlareBold.ttf') format("truetype");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'PPFragment-GlareBoldItalic';
    src: url('fonts/PPFragment-GlareBoldItalic.ttf') format("truetype");
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'PPFragment-GlareRegular';
    src: url('fonts/PPFragment-GlareRegular.ttf') format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'PPFragment-GlareRegularItalic';
    src: url('fonts/PPFragment-GlareRegularItalic.ttf') format("truetype");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'PPFragment-GlareLight';
    src: url('fonts/PPFragment-GlareLight.ttf') format("truetype");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'PPFragment-GlareLightItalic';
    src: url('fonts/PPFragment-GlareLightItalic.ttf') format("truetype");
    font-weight: 300;
    font-style: italic;
}



/* generic things */

html,body,h1,h2,h3,h4,h5,h6,p,ul,li,form{
	padding:0;
	margin:0;
}
*{
	box-sizing:border-box;
}
html {
	font-size:16px; /* for rem base */
	scroll-behavior: smooth;
	/* note: this replaces the javascript version, which is not accessible due to the 'return false' setting. */
}
.section{
	scroll-margin-top:6.25rem;
}
html,#nav,.subscribeformiframe{
	scrollbar-width: thin;
}
.screen-reader-text,
.skip-link,
.site-nav li.icon a span{
	position:fixed;
	top:-4000rem;
	left:-4000rem;
}
.skip-link:focus,
#toggle a:focus span.skip-link{
	top:2rem;
	left:2rem;
	background:black;
	color:white;
	padding:.5rem 1rem;
	border:2px dotted white;
	text-decoration:none;
	text-transform:uppercase;
	font-size:100%;
	z-index:10000;
}
.admin-bar .skip-link:focus,
#toggle a:focus span.skip-link{
	top:4rem;
}
iframe,
img{
	max-width:100%;
}
img.attachment-thumbnail,
img.attachment-large{
	height:auto !important;
}

/* colours */

html{
	scrollbar-color: #FF5150 #301444;
}
body{
	background:black;
}
#page{
	background:white;
	color:#1F1F1F;
}
#nav{
	background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,0));
	color:white;
	transition:all .5s ease-in-out 0s;
}
.scrolled #nav{
	background:#301444;
}
.sliderwrapper *{
	color:white;
}
.sliderwrapper li div.theslide{
	position:relative;
}
.sliderwrapper li div.slideimage{
	width:100%;
	height:0;
	padding-top:max(56.25%,90vh);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
.slideoverlay{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
/*
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
*/
	padding:3% 4% 3% 4%;
	padding-bottom:3rem;
	background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));
}
#playlist,
#getting-here{
	background:#301444;
	color:white;
}
.marqueebar{
	background:#301444;
	color:white;
}
#the-bulletin{
	background:#FFEBEA;
}

.button a{
	display:inline-block;
	min-height:2.7em;
	padding:0 1em;
	padding-top:.7em;
	color:#FFFFFF;
	background:#8F54B9;
	border-radius:1.35em;
	border-color:#8F54B9;
	border-width:1px;
	border-style:solid;
	position:relative;
}
.button a:after{
	content:" ->";
}
.button a:focus,
.button a:hover,
.button a:active{
	background:#FFFFFF;
	color:#8F54B9;
}
.section-name,
.tabs li a,
.tabs li span.notlinked{
	display:inline-block;
	min-height:2.7em;
	padding:0 1em;
	padding-top:.7em;
	color:#FF5150;
	background:#FFFFFF;
	background:transparent;
	border-radius:1.35em;
	border-color:#FF5150;
	border-width:1px;
	border-style:solid;
	position:relative;
}
.tabs li a.eat-drink{
	border-color:#FF5150;
	color:#FF5150;
}
.tabs li a.culture{
	border-color:#8F54B9;
	color:#8F54B9;
}
.tabs li a.wellness{
	border-color:#1B62D1;
	color:#1B62D1;
}
.tabs li a.local-conveniences{
	border-color:black;
	color:black;
}

.section-name{
	left:1.35em;
	padding-top:.75em;
}
.section-name:before{
	content:"";
	display:inline-block;
	width:calc(2.7em - 2px);
	height:calc(2.7em - 2px);
	background:#FF5150;
	border-radius:1.35em;
	border-color:#FF5150;
	border-width:1px;
	border-style:solid;
	position:absolute;
	left:calc(-2.7em - 1px);
	top:-1px;
}
.section-title{
	color:#301444;
}
.section-desc{
	color:#1F1F1F;
}
.catdetails h3{
	color:#1B62D1;
}
#playlist .section-title,
#getting-here .section-title,
#getting-here p.section-desc{
	color:#ffffff;
}
#playlist .section-title span,
#playlist .section-desc{
	color:#FF5150;
}
#playlist .playlistinfo img{
	border-color:#FF5150;
}
.tabs li a:focus,
.tabs li a:hover,
.tabs li a:active{
	border-color:#1B62D1;
}
.tabs li.current a{
	background:#1B62D1;
	color:#FFFFFF;
	border-color:#1B62D1;
}
.tabs li.current a.eat-drink{
	border-color:#FF5150;
	background:#FF5150;
}
.tabs li.current a.culture{
	border-color:#8F54B9;
	background:#8F54B9;
}
.tabs li.current a.wellness{
	border-color:#1B62D1;
	background:#1B62D1;
}
.tabs li.current a.local-conveniences{
	border-color:black;
	background:black;
}

.bulletin li{
	background:#FEDCDB;
}
.bulletin li h3{
	color:#FF5150;
}

.publication,
.listings h3,
.calendarsection h3,
.calendarlistings h4{
	color:#FF5150;
}
.calendarsection h3{
	border-color:#FF5150;
}
.calendarlistings p,
.presslistings h3,
#colophon h3{
	color:#301444;
}
.transport h4 span{
	color:#8F54B9;
}
#colophon{
	background:#FF5150;
	color:white;
}
#colophon a{
	color:inherit;
}


.thepins li{
	color:white;
}
.thepins .red > span,
.thepins p.red:after{
	background:#FF5150;
	border-color:#FF5150;
}
.thepins .purple > span,
.thepins p.purple:after{
	background:#8F54B9;
	border-color:#8F54B9;
}
.thepins .blue > span,
.thepins p.blue:after{
	background:#1B62D1;
	border-color:#1B62D1;
}
.thepins .black > span,
.thepins p.black:after{
	background:black;
	border-color:black;
}
.thepins .orange > span,
.thepins p.orange:after{
	background:orange;
	border-color:orange;
}
.thepins li a,
.thepins li p.pin,
.thepins a p > span{
	color:inherit;
}
.thepins span.popup span.popped{
	background:white;
	color:black;
}
.thepins .linkexternal span.popup span.popped{
	border-color:black;
}
.thepins a:hover p > span{
	background:white;
}


/* links */

a{
	color:inherit;
	text-decoration:none;
}


/* map with pins */

#neighourhood{
	overflow-x:hidden; /* important for horizontal scrolling + position of menu burger */
}
#mapwrapper{
	width:90%;
	margin:0 auto;
}
#mapwithpins{
	position:relative;
	width:100%;
	height:0;
	padding-top:45.97892%;
	background:url(img/map-background.jpg) transparent no-repeat center / contain;
	margin:0;
}

/* note: all sizes of the popups and the pins are relative to the font-size on the ul! */
.thepins{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	font-size:1rem;
	font-size:clamp(.5rem, 1vw,1.1rem);
}
.thepins li{
	position:absolute;
	font-size:inherit;
	background:transparent;
	pointer-events:none;
}
.thepins li .notlinked,
.thepins li a{
	display:inline-block;
	margin-left:-50%;
	pointer-events:all;
}
.thepins li p.pin{
	display:inline-block;
	font-size:.875em;
	text-transform:uppercase;
	text-align:center;
	white-space:nowrap;
	margin-bottom:0;
}
.thepins li p.pin:after{
	content:"";
	display:block;
	height:1.25em;
	width:2px;
	margin:0 auto;
}
.thepins li p.pin img{
	width:auto;
	height:1.45em;
	vertical-align:middle;
}
.thepins .notlinked p > span,
.thepins a p > span{
	display:block;
	height:2em;
	/* this height *must be the same height* as on :hover, otherwise the map jumps up 
	every instance of :hover on the first list item */
	line-height:1;
	vertical-align:middle;
	padding:0 .25em;
	border-width:.6em;
	border-style:solid;
	border-radius:1em;
	width:100%;
	margin:0 auto;
	transition:all .5s ease-in-out 0s;
}
/* overriding temp to test */
.thepins .notlinked p > span,
.thepins a p > span{
	height:2.5em;
	line-height:1.3;
	padding:0;
	border-radius:1.25em;
}
.thepins li.haslogo .notlinked p > span{
	height:2.5em;
	border-radius:1.25em;
}
.thepins .notlinked p > span span,
.thepins a p > span span{
	display:block;
	width:100%;
	padding:0 .5em;
}
.thepins a:hover p > span{
	width:2em;
	height:2em;
	border-radius:1em;
	overflow:hidden;
}
.thepins a:hover p > span span{
	text-indent:5em;
	max-width:2em;
	overflow:hidden;
}

.thepins span.popup{
	position:absolute;
	bottom:0;
	left:0;
	width:max(12.5em,12.5rem);
	margin-left:min(-6.25em,-6.25rem);
	height:auto;
	padding:max(.5em,.5rem);
	/* padding-bottom:4em; */
	padding-bottom:3em;
	display:none;
	transition:all .5s ease-in-out 0s;
	z-index:1000;
}
.thepins span.popup span.popped{
	display:block;
	text-align:center;
	border:1px solid white;
	border-radius:1em;
	overflow:hidden;
}
.thepins .linkexternal span.popup span.popped{
	width:calc(3em + 1em + 2px);
	height:3em;
	padding-top:.65em;
	border-radius:1.5em;
	margin:0 auto;
}
.thepins li .popped h3{
	font-size:max(1.1em,1.1rem);
	padding-top:.75em;
	margin-bottom:.5em;
}
.thepins li .popped p{
	font-size:max(.75em,.75rem);
	padding-bottom:.5em;
}
.thepins li .popped p.pretitle{
	margin-bottom:0;
}

.thepins a:hover span.popup{
	display:block;
}

@media(max-width:725px){
	.mapscroller{
		width:90%;
		margin:0 auto;
		border-left:1px solid #FF5150;
		border-right:1px solid #FF5150;
		overflow-x:auto;
		margin:0 auto;
	}
	#mapwrapper{
		width:max(100%,60rem);
		overflow:hidden;
		margin:0;
	}
	.thepins{
		font-size:clamp(.7rem, 1vw,1.1rem);
	}
	.thepins a:hover p > span{
		width:auto;
		height:2.5em;
		border-radius:1.25em;
		overflow:hidden;
	}
	.thepins a:hover p > span span{
		text-indent:0;
		max-width:100%;
	}
	.thepins span.popup span.popped{
		display:none;
	}
	.thepins a:hover .red > span{
		background:#FF5150;
	}
	.thepins a:hover .purple > span{
		background:#8F54B9;
	}
	.thepins a:hover .blue > span{
		background:#1B62D1;
	}
	.thepins a:hover .black > span{
		background:black;
	}
	.thepins a:hover .orange > span{
		background:orange;
	}
}


.thepins li{
	position:absolute;
}
.thepins li#pin90{
	bottom:14.4%;
	left:40.2%;
}
.thepins li#pin356{
	bottom:54.7%;
	left:43.1%;
}
.thepins li#pin452{
	bottom:86.3%;
	left:80.4%;
}
.thepins li#pin334{
	bottom:35%;
	left:8%;
}
.thepins li#pin315{
	bottom:45.1%;
	left:91.4%;
}
.thepins li#pin448{
	bottom:69%;
	left:67.3%;
}
.thepins li#pin337{
	bottom:12%;
	left:89.2%;
}
.thepins li#pin342{
	bottom:88%;
	left:28.1%;
}
.thepins li#pin331{
	bottom:50.5%;
	left:26%;
}
.thepins li#pin301{
	bottom:22.3%;
	left:68.2%;
}
.thepins li#pin373{
	bottom:82.2%;
	left:47.5%;
}
.thepins li#pin225{
	bottom:4%;
	left:31.3%;
}
.thepins li#pin439{
	bottom:88.6%;
	left:57.5%;
}
.thepins li#pin232{
	bottom:71.5%;
	left:86.9%;
}
.thepins li#pin218{
	bottom:30.5%;
	left:58.3%;
}
.thepins li#pin237{
	bottom:63.8%;
	left:49.6%;
}
.thepins li#pin239{
	bottom:53%;
	left:81.2%;
}
.thepins li#pin246{
	bottom:29.3%;
	left:32.5%;
}
.thepins li#pin247{
	bottom:43%;
	left:39.6%;
}
.thepins li#pin518{
	bottom:56.5%;
	left:56%;
}
.thepins li#pin245{
	bottom:43.5%;
	left:64.3%;
}
.thepins li#pin118{
	bottom:38%;
	left:51.6%;
}
.thepins li#pin113{
	bottom:22.1%;
	left:50.5%;
}



/* fonts */

body{
	font-family:'Inter','Arial',sans-serif;
}
.catdetails h3,
#colophon h3{
	font-family:'Inter','Arial',sans-serif;
}
h2,
.calendarsection h3,
.calendarlistings h4,
.transport h4,
.transport p.lines,
p.splashintro{
	font-family:'PPFragment-GlareLight',serif;
	font-weight:300;
	text-transform:uppercase;
}
.presslistings h3{
	font-family:'PPFragment-GlareLight',serif;
	font-weight:300;
	text-transform:none;
}
h3{
	font-family:'PPFragment-GlareRegular',serif;
	font-weight:400;
	text-transform:uppercase;
}

strong,
b{
	font-weight:700;
}

h1.site-title,
p.site-title{
	font-size:2rem;
	text-transform:uppercase;
}
.scrolled h1.site-title,
.scrolled p.site-title{
	font-size:1rem;
}
h1{
	font-size:2rem;
	line-height:1.2;
	margin-bottom:.2em;
}
h2{
	font-size:6.2rem;
	font-size:clamp(2rem,7vw,6.2rem);
	font-size:clamp(2rem,7vw,8.375rem);
	letter-spacing:-.035em;
	line-height:.85;
	line-height:.98;
	padding-top:.2em;
	margin-bottom:.2em;
	margin-bottom:.4em;
}
h2.slidetitle{
	padding-top:0;
	font-size:clamp(2rem,6.4vw,5.9rem);
	font-size:clamp(2rem,16vw,5.9rem);
}
h3{
	font-size:1.75rem;
	font-size:clamp(1.25rem,2.5vw,1.75rem);
	letter-spacing:-.035em;
	line-height:.85;
	line-height:.98;
	margin-bottom:.2em;
}
.catdetails h3{
	text-transform:none;
	font-weight:700;
}
.wellbeing-listings h3{
	font-size:clamp(1rem,1.8vw,1.5rem);
}
.calendarsection h3{
	font-size:1.6rem;
	padding-bottom:.4em;
	margin-bottom:0;
}
.presslistings h3{
	font-size:clamp(1rem,3vw,2.25rem);
	line-height:1.05;
	padding-top:.5em;
	margin-bottom:0;
}
.bulletin h3{
	font-size:2rem;
	font-size:clamp(1rem,2.2vw,2rem);
	margin-bottom:.5em;
}
.calendarlistings h4{
	font-size:2.5rem;
	font-size:clamp(1rem,2.5vw,2.5rem);
	line-height:.85;
	line-height:.98;
	padding-top:.5em;
	margin-bottom:.5em;
}
@media(max-width:820px){
	.calendarlistings h4{
		font-size:clamp(1rem,5vw,2.5rem);
	}
}
@media(max-width:400px){
	.calendarlistings h4{
		font-size:clamp(1rem,10vw,2.5rem);
		font-size:clamp(1rem,8vw,2.5rem);
	}
}
.transport ul{
	font-size:1.46rem;
	font-size:clamp(1rem,2vw,1.46rem);
	line-height:1;
	line-height:1.2;
}
.transport ul li{
	margin-bottom:.5em;
}
@media(max-width:767px){
	.transport ul{
		font-size:clamp(1rem,4vw,1.46rem);
	}
}
.transport h4{
	font-size:inherit;
	line-height:1.2;
	margin-bottom:.25em;
}
.transport ul.airports p.distance{
	font-size:clamp(.5em,2vw,.6em);
	font-weight:300;
	text-transform:uppercase;
	line-height:1.2;
	margin-bottom:0;
}
.transport ul.stations p.lines{
	font-size:inherit;
	font-weight:300;
	text-transform:uppercase;
	line-height:1.2;
	margin-bottom:.25em;
	/* same exact font and styles as the h4, to get the position working correctly */
}
.transport ul.stations p.distance,
.transport ul.airports p.distance{
	font-size:clamp(.5em,2vw,.6em);
	font-weight:300;
	text-transform:uppercase;
	line-height:2.1; /* looks vertically centered compared to h4 */
	line-height:1.4; /* top aligned, so that the two lines on airports don't look off */
	margin-bottom:0;
}
.transport ul.stations p.distance,
.transport ul.airports p.distance{
	/* float:right; */
}
.transport ul.stations p.lines img{
	display:block;
	max-height:100%;
}
#colophon h3{
	font-size:.7rem;
	text-transform:uppercase;
	letter-spacing:.5em;
	line-height:1.2;
	margin-bottom:.7em;
}
#colophon ul{
	font-size:1rem;
	line-height:1.2;
	margin-bottom:1em;
}
#colophon ul li{
	margin-bottom:.5em;
}
#colophon .inner .site-info p{
	font-size:.75rem;
	padding-top:2em;
	margin-bottom:0;
}
p,ul,ol{
	font-size:1.02rem;
	font-weight:300;
	line-height:1.5;
	margin-bottom:1.5em;
}
p.slidetext{
	max-width:min(33rem,90%);
	font-size:clamp(.75rem,1vw,1.01rem);
	font-size:clamp(.75rem,4vw,1.5rem);
	margin-bottom:0;
}
p.slidepretitle{
	font-size:clamp(.6rem,2vw,.875rem);
	font-size:clamp(.6rem,2.75vw,1rem);
	letter-spacing:.1em;
	text-transform:uppercase;
	line-height:1.2;
	margin-bottom:.75em;
}
p.pretitle{
	font-size:.875rem;
	letter-spacing:.1em;
	text-transform:uppercase;
	line-height:1.2;
	margin-bottom:.75em;
}
.calendarlistings p.date{
	font-size:1.4375rem;
	font-size:clamp(.75rem,1vw,1.125rem);
	font-weight:700;
	letter-spacing:.3em;
	padding-left:.3em;
	text-transform:uppercase;
	line-height:1;
	margin-bottom:.2em;
}
.calendarlistings p.tag{
	font-size:.75rem;
	font-weight:300;
	text-transform:uppercase;
	margin-bottom:0;
}
@media(max-width:820px){
	.calendarlistings p.date{
		font-size:clamp(.75rem,2vw,1.125rem);
	}
}
@media(max-width:400px){
	.calendarlistings p.date{
		font-size:clamp(.75rem,4vw,1.125rem);
	}
}
.calendarlistings p.desc{
	font-size:.875rem;
	font-weight:300;
	line-height:1.2;
}
.playlisttextcontent p{
	font-size:clamp(1.25rem,1.7vw,1.75rem);
	font-size:clamp(1.125rem,1.5vw,1.5rem);
	font-weight:300;
}
p.publication{
	font-size:clamp(.75rem,1.5vw,1.02rem);
	text-transform:uppercase;
	letter-spacing:.1em;
	font-weight:300;
	line-height:1.2;
	margin-bottom:0; /* spacing comes from padding on h3 below */
}
.bulletin li p.date{
	font-size:.75rem;
	letter-spacing:.5em;
	text-transform:uppercase;
	line-height:1.2;
	margin-bottom:1em;
}
.bulletin li p.desc{
	font-size:.75rem;
	line-height:1.2;
	margin-bottom:0;
}

p.desc{
	margin-bottom:0;
}
p.section-name,
ul.tabs{
	font-size:.7rem;
	text-transform:uppercase;
	line-height:1.2;
}

ul.tabs.style2,
.button{
	font-size:1rem;
	font-size:clamp(.7rem,1.5vw,1rem);
	text-transform:uppercase;
	line-height:1.2;
}
#nav ul{
	font-size:.75rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	margin-bottom:0;
}
.intro p,
.intro ul,
.intro ol{
	font-size:1.5rem;
	line-height:1.5;
	margin-bottom:.75em;
}
.quotebox p.quote{
	font-size:1.5rem;
	line-height:1.5;
	margin-bottom:0;
}
.quotebox p.byline{
	padding-top:.5em;
	margin-bottom:0;
}
.quotebox{
	padding:1.5rem 0;
}
/*
.button{
	font-size:1.125rem;
	line-height:1.5;
	margin-bottom:1.5em;
}
p.caption{
	padding-top:.5em;
}
*/
ul{
	list-style:none;
}
.marqueebar{
	font-size:1.1rem;
	font-weight:300;
	line-height:1;
	text-transform:uppercase;
	padding:.4em 0 .3em 0;
}
/*
.marqueebar strong{
	font-weight:700;
}
*/
/*
.page-content ul li{
	padding-left:1em;
	position:relative;
}
.page-content ul li:before{
	content:"\2022 ";
	display:inline-block;
	position:absolute;
	left:0;
	top:0;
}
*/

/* visiblity of listings based on tabs */

ul.listings.noparameters li.hide,
ul.thepins.noparameters li.hide{
	display:none;
}


/* layout */

.outer,
.widebox p.caption{
	padding-left:min(5%,5rem);
	padding-right:min(5%,5rem);
}
#social .sectioncontentwrap{
	overflow-x:hidden;
}
#the-bulletin .sectioncontentwrap{
	padding-left:5%;
	padding-right:5%;
}
#google-map .section-image{
	padding-right:5%;
}
#google-map .sectioncontentwrap{
	padding-left:5%;
	padding-right:5%;
}
#google-map .sectioncontentwrap .outer{
	padding-left:0;
	padding-right:0;
}
#the-bulletin .sectioncontentwrap .outer{
	padding-left:0;
	padding-right:0;
}
#the-bulletin .section-listings{
	padding-left:5%;
}
.inner{
	margin:0 auto;
}
.page-content .inner{
	padding:1px 0; /* to keep colours and margins inside */
}

#page{
	max-width:120rem;
	/* to keep the layout correct if people zoom out or widen their screens beyond 1920px */
	margin:0 auto;
}
#nav{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	min-height:6.25rem; /* enough height for logo + nav menus */
	min-height:min(14vw,12.5rem);
	z-index:10;
	transition:all .5s ease-in-out 0s;
}
.admin-bar #nav{
	top:32px;
}
@media(max-width:782px){
	.admin-bar #nav{
		top:46px;
	}
}
.site-title{
	width:min(9rem,20vw);
	text-align:center;
	order:0;
	transition:all .5s ease-in-out 0s;
}
#toggle{
	display:none;
}
#site-navigation{
	width:100%;
	height:6.25rem;
	height:min(14vw,12.5rem);
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	transition:height .5s ease-in-out 0s;
}
.scrolled #nav{
	min-height:5rem;
}
.scrolled #site-navigation{
	height:5rem;
}
.scrolled .site-title{
	width:5rem;
}

.topnavpart{
	width:calc(50% - 5.5rem);
}
#openmenu2{
	text-align:right;
}
.site-nav li{
	display:inline-block;
}
.site-nav ul{
	margin-right:-.7em;
	margin-left:-.7em;
}
.site-nav li a{
	padding:0 .7em;
}
.section-header{
	text-align:center;
	padding-top:min(5vw,5rem);
}
#press .section-header{
	padding-top:0;
}
.section-desc{
	max-width:58rem;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:1.5em;
}

#google-map,
#the-bulletin{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	padding-top:3%;
	padding-bottom:3%;
}
#google-map{
	justify-content:space-around;
	align-items:center;
}
#google-map .section-image{
	order:2;
	width:30%;
	display:flex;
	align-items:flex-end;
}
#google-map .section-image img{
	display:block;
	margin:0 auto;
}
#google-map .sectioncontentwrap{
	width:60%;
}
#google-map ul.tabs{
	max-width:37em; /* to break after 3 tabs */
	margin-left:auto;
	margin-right:auto;
}
#the-bulletin .section-listings,
#the-bulletin .sectioncontentwrap{
	width:50%;
}
#google-map .section-header,
#the-bulletin .section-header{
	padding-top:0;
}
@media(max-width:680px){
	#the-bulletin .section-listings,
	#the-bulletin .sectioncontentwrap{
		width:100%;
	}
	#the-bulletin .section-listings{
		order:2;
	}
	#the-bulletin .sectioncontentwrap .outer{
		padding-left:min(5%,5rem);
		padding-right:min(5%,5rem);
	}
	#the-bulletin .section-listings{
		padding-left:min(5%,5rem);
		padding-right:min(5%,5rem);
	}
}
@media(max-width:680px){
	#google-map .section-image,
	#google-map .sectioncontentwrap{
		width:100%;
	}
	#google-map .section-image{
		order:2;
		max-width:32rem;
		margin:0 auto;
	}
	#google-map .sectioncontentwrap{
		padding-left:0;
		padding-right:0;
	}
	#google-map .section-image,
	#google-map .sectioncontentwrap .outer{
		padding-left:min(5%,5rem);
		padding-right:min(5%,5rem);
	}
}

.tabs{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
.tabs li{
	margin:0 .5em 1em .5em;		
}
.catdetails{
	text-align:center;
}
.catdetails.hide{
	display:none;
}
.button{
	text-align:center;
}
.button a{
	margin:0 auto 2em auto;
}
#west-london-guide .wrapperoflistings{
	position:relative;
	padding-top:calc(clamp(3rem,6vw,6rem) - 1rem);
}
#west-london-guide .wrapperoflistings:before{
	content:"";
	display:block;
	width:clamp(5rem,10vw,10.25rem);
	height:clamp(5rem,10vw,10.25rem);
	background:url(img/click-for-map.png) transparent no-repeat center / contain;
	position:absolute;
	top:-1rem;
	right:min(5%,5rem);
	z-index:2;
}

.listings{
	display:flex;
	flex-wrap:wrap;
}
.olympia-listings li,
.west-london-guide-listings li{
	width:calc(100% / 3);
	text-align:center;
}
@media(max-width:960px){
	.olympia-listings li,
	.west-london-guide-listings li{
		width:calc(100% / 2);
	}
	.olympia-listings li h3,
	.west-london-guide-listings li h3{
		font-size:clamp(1.25rem,3.75vw,1.75rem);
	}
}
@media(max-width:480px){
	.olympia-listings li,
	.west-london-guide-listings li{
		width:calc(100% / 1);
	}
	.olympia-listings li h3,
	.west-london-guide-listings li h3{
		font-size:clamp(1.25rem,7.5vw,1.75rem);
	}
}
.listings li .listingimage{
	display:block;
}
.listings li > a,
.listings li > span.nolink,
.listings li .missingimage{
	display:block;
	width:100%;
	height:0;
	padding-top:63.125%;
	position:relative;
	background:silver;
}
.listings li > a img,
.listings li > span.nolink img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:1;
}
.wellbeing-listings li > a,
.wellbeing-listings li > span.nolink,
.wellbeing-listings li .missingimage{
	padding-top:calc(890 / 664 * 100%);
}
.wellbeing-listings{
	width:92%;
	max-width:110rem;
	padding:0 10px;
	margin:0 auto;
}
.wellbeing-listings li{
	width:20%;
	padding:0 10px;
	text-align:center;
}
@media(max-width:1060px){
	.wellbeing-listings li{
		width:25%;
	}
	.wellbeing-listings h3{
		font-size:clamp(1rem,2.25vw,1.5rem);
	}
}
@media(max-width:800px){
	.wellbeing-listings li{
		width:calc(100% / 3);
	}
	.wellbeing-listings h3{
		font-size:clamp(1rem,3vw,1.5rem);
	}
}
@media(max-width:540px){
	.wellbeing-listings li{
		width:calc(100% / 2);
	}
	.wellbeing-listings h3{
		font-size:clamp(1rem,4.5vw,1.5rem);
	}
}
@media(max-width:400px){
	.wellbeing-listings{
		max-width:18.75rem;
	}
	.wellbeing-listings li{
		width:calc(100% / 1);
	}
	.wellbeing-listings h3{
		font-size:clamp(1rem,9vw,1.5rem);
	}
}
ul.listings li > div{
	padding:1.5rem 7%;
}
ul.listings li > div .maplink{
	font-size:1rem;
	line-height:1;
	margin-bottom:1.4rem;
}
ul.listings li > div .maplink a{
	display:inline-block;
}
ul.listings li > div .maplink a img{
	display:block;
}

.socialwall{
	display:flex;
	flex-direction:column;
	height:50vw;
	flex-wrap:wrap;
	margin-left:-.25rem;
	margin-right:-.25rem;
}
.socialwall .socialitem{
	width:25%;
	height:50%;
	padding:0 .25rem .5rem .25rem;
}
.socialwall .socialitem.vertical1,
.socialwall .socialitem.vertical2{
	height:100%;
}
.socialwall .socialitem.square1,
.socialwall .socialitem.square2{
	order:1;
}
.socialwall .socialitem.square3,
.socialwall .socialitem.square4{
	order:3;
}
.socialwall .socialitem.vertical1{
	order:2;
}
.socialwall .socialitem.vertical2{
	order:4;
}
.socialitem .handle{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	padding:.5em;
	background:linear-gradient(transparent 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.5) 100%);
	color:white;
	font-size:clamp(.5rem,1.5vw,1rem);
}
.socialitem.videopost a:after{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(img/play-button.svg) transparent no-repeat center;
}

@media(max-width:500px){
	.socialwall{
		height:200vw;
	}
	.socialwall .socialitem{
		width:50%;
		height:25%;
	}
	.socialwall .socialitem.vertical1,
	.socialwall .socialitem.vertical2{
		height:50%;
	}
	.socialwall .socialitem.vertical2{
		order:2;
	}
	.socialwall .socialitem.vertical1{
		order:3;
	}
	.socialwall .socialitem.square3,
	.socialwall .socialitem.square4{
		order:4;
	}
	.socialitem .handle{
		font-size:clamp(.5rem,3vw,1rem);
	}
}

.socialwall .socialitem a{
	display:block;
	height:100%;
	position:relative;
}
.socialwall .socialitem div.missingsocialimage{
	background:pink;
}
.socialwall .socialitem div.missingsocialimage:first-child{
	background:silver;
}
.socialwall .socialitem div.missingsocialimage,
.socialwall .socialitem img{
	display:block;
	height:100%;
}
.socialwall .socialitem div.missingsocialimage:first-child,
.socialwall .socialitem img:first-child{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}
@keyframes fade{
	0%{opacity:0;}
	40%{opacity:0;}
	50%{opacity:1;}
	90%{opacity:1;}
	100%{opacity:0;}
}
.socialwall .socialitem div.missingsocialimage:first-child,
.socialwall .socialitem img:first-child{
	animation: fade 16s ease-in-out infinite;
}
.socialitem:nth-child(1) img:first-child { animation-delay: -3s; }
.socialitem:nth-child(2n) img:first-child { animation-delay: -8s; }
.socialitem:nth-child(3n) img:first-child { animation-delay: -10s; }
.socialitem:nth-child(4n) img:first-child { animation-delay: -5s; }
.socialitem:nth-child(5n) img:first-child { animation-delay: -2s; }
.socialitem:nth-child(6n) img:first-child { animation-delay: -1s; }
.socialitem:nth-child(7n) img:first-child { animation-delay: -.5s; }
.socialitem:nth-child(8n) img:first-child { animation-delay: -1.5s; }


.playlistwrapper{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding-bottom:3rem;
}
.playlistinfo,
.spotify{
	width:47%;
}
@media(max-width:680px){
	.playlistinfo,
	.spotify{
		width:100%;
	}
}
#playlist h2.section-title{
	max-width:107rem;
}
#playlist .playlistwrapper{
	max-width:107rem;
	margin:0 auto;
}
#playlist .playlistinfo img{
	display:block;
	border-width:.5em;
	border-style:solid;
	margin-bottom:2rem;
}

.whatson{
}
.calendarsection{
	max-width:81rem;
	max-width:108rem;
	text-align:center;
	margin:0 auto 2rem auto;
}
.calendarsection h3{
	max-width:81rem;
	max-width:108rem;
	border-width:0 0 1px 0;
	border-style:solid;
	margin:0 auto;
}
.calendarlistings{
	display:flex;
	flex-wrap:wrap;
	margin:0 -2vw; /* 1 for the spacing, + 1 for the image spacing */
}
.calendarlistings li{
	width:25%;
	padding:0 1vw;
	margin-bottom:3rem;
}
@media(max-width:820px){
	.calendarlistings{
		margin:0;
	}
	.calendarlistings li{
		width:50%;
		padding:0 2vw;
	}
}
@media(max-width:400px){
	.calendarlistings{
		margin:0;
	}
	.calendarlistings li{
		width:100%;
		padding:0 2vw;
	}
}
.calendarlistings li .imgwrap{
	padding:0 1vw;
	margin-bottom:1.5rem;
}
.calendarlistings li img{
	display:block;
}
.calendarlistings li .imgbox{
	width:100%;
	padding-top:100%;
	background-color:#D9D9D9;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
.presslistingswrapper{
	max-width:81rem;
	max-width:108rem;
	margin:0 auto;
}
.presslistings{
	display:flex;
	flex-wrap:wrap;
	margin-left:-.625rem;
	margin-right:-.625rem;
}
.presslistings li{
	width:50%;
	padding:0 .625rem;
	margin-bottom:1.5rem;
}
@media(max-width:400px){
	.presslistings li{
		width:100%;
	}
}
.presslistings li > a,
.presslistings li > div{
	display:block;
	height:100%;
	border:1px solid #D6D0DA;
}
.presslistings li .imgbox{
	width:100%;
	height:0;
	padding-top:32.485%;
	background-color:#D9D9D9;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
.presslistings li .txtbox{
	padding:5%;
}
.bulletin li{
	display:flex;
	margin-bottom:.5rem;
}
.bulletin li .listingcontent{
	width:55%;
	text-align:center;
	padding:5% 3%;
}
.bulletin li .imgcontent{
	width:45%;
	background:#1B62D1;
}
.bulletin li .imgbox{
	width:100%;
	height:100%;
	background-color:#D9D9D9;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
.subscribeformiframe{
	width:100%;
	height:31rem;
	border:2px solid #FF5150;
	margin-bottom:3rem;
}
.subscribeformiframe iframe{
	width:100%;
	height:100%;
}
@media(max-width:360px){
	.bulletin li{
		flex-wrap:wrap;
	}
	.bulletin li .listingcontent,
	.bulletin li .imgcontent{
		width:100%;
	}
	.bulletin li .listingcontent{
		order:2;
	}
	.bulletin li .imgbox{
		padding-top:67%;
	}

}

.transport ul.tabs{
	margin:1.5em 0 2.5em 0;
}
ul.airports li,
ul.stations li{
	overflow:hidden;
	text-align:right;
	min-height:2.1em;
}
ul.airports h4,
ul.stations h4,
ul.stations p.lines{
	float:left;
}
ul.airports p.distance span{
	display:block;
}
ul.stations p.lines{
	padding-left:.5em;
}
ul.stations p.lines span{
	display:inline-block;
	height:.8em;
	vertical-align:baseline;
	position:relative;
	top:1px;
	margin-left:.25em;
}
ul.stations p.lines span.rail{
	width:1.2em;
}

.banner img.narrowonly{
	display:none;
}
@media(max-width:800px){
	.banner img.narrowonly{
		display:block;
	}
	.banner img.wideonly{
		display:none;
	}
}
.banner img{
	width:100%;
}

.columns{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.col1,
.col2{
	width:46%;
}
@media(max-width:767px){
	.col1,
	.col2{
		width:100% !important;
	}
}

#colophon .inner{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	padding-top:3.8rem;
	padding-bottom:3.8rem;
	gap:clamp(2rem,5vw,3.5rem);
}
#colophon .inner .onwide{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	max-width:52.5rem;
	gap:calc((100vw - min(10vw,10rem) - 73rem) / 2);
	gap:min(12rem,calc((100vw - min(10vw,10rem) - 72rem) / 2));
}
#colophon .inner .neighbourhood{
	width:29rem;
	position:relative;
}
#colophon .inner .logo{
	width:11.5rem;
}
#colophon .inner .neighbourhood p{
 /* temporatily, until part of the image */
	position:absolute;
	top:0;
	font-size:.9rem;
	text-transform:uppercase;
	letter-spacing:.5em;
	line-height:1.2;
	margin-bottom:.7em;
}
#colophon .inner .footernav{
	width:max-content;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	gap:clamp(2rem,5vw,3.5rem);
}
#colophon .inner .logocol,
#colophon .inner .neighbourhoodcol{
	display:none;
}
#colophon .inner .site-info{
	width:100%;
}
@media(max-width:1390px){
	#colophon .inner .onwide{
		max-width:calc(100vw - min(10vw,10rem) - 32rem);
		gap:2rem;
	}
}
@media(max-width:1100px){
	#colophon .inner{
		align-items:flex-start;
	}
	#colophon .inner .onwide{
		flex-wrap:wrap;
		justify-content:flex-start;
	}
	#colophon .inner .neighbourhood{
		width:20rem;
	}
	#colophon .inner .logo{
		width:8rem;
	}
}
@media(max-width:754px){
	#colophon .inner{
		display:block;
	}
	#colophon .inner .onwide{
		max-width:100%;
		flex-wrap:nowrap;
		justify-content:center;
		margin:0 auto 1.5rem auto;
	}
	/*
	#colophon .inner .logo{
		width:clamp(10rem,30vw,12rem);
		margin:0 auto 2rem auto;
	}
	*/
	#colophon .inner .footernav{
		width:auto;
		justify-content:center;
		gap:clamp(2rem,5vw,3.5rem);
	}
	#colophon .inner .site-info{
		text-align:center;
	}
}
@media(max-width:680px){
	#colophon .inner{
		display:block;
	}
	/*
	#colophon .inner .logo{
		padding-right:0;
		width:clamp(10rem,30vw,12rem);
		margin:0 auto 2rem auto;
	}
	*/
	#colophon .inner .footernav{
		width:auto;
		justify-content:center;
		gap:clamp(2rem,5vw,3.5rem);
	}
	#colophon .inner .site-info{
		text-align:center;
	}
	
}
@media(max-width:500px){
	#colophon{
	}
	#colophon .inner{
		position:relative;
	}
	#colophon .inner .footernav{
		justify-content:space-between;
	}
	#colophon .inner .footernav .navcol{
		min-width:calc(50% - 1.75rem);
	}
	#colophon .inner .site-info{
		text-align:left;
	}
	#colophon .inner .neighbourhood,
	#colophon .inner .logo{
		display:none;
	}
	#colophon .inner .neighbourhoodcol{
		display:block;
		order:10;
		width:17rem;
		max-width:100%;
		margin:0 auto;
	}
	#colophon .inner .logocol{
		display:block;
		align-self:flex-end;
	}
	#colophon .inner .logocol img{
		width:7rem;
		margin-bottom:1em;
	}

}
@media(max-width:400px){
	#colophon .inner .footernav{
		justify-content:space-between;
	}
	#colophon .inner .site-info{
		text-align:left;
	}
}



/* webkit things */

input[type=text],
input[type=search],
input[type=button],
input[type=email],
input[type=submit],
textarea{
	-webkit-appearance:none;
	-webkit-border-radius:0;
}
*{
	-webkit-text-size-adjust:100%;
}

/* Where placeholder needs to obey the styles */

/* fix the stupid placeholder colour */
/* separate rules, because: "a group of selectors containing an invalid selector is invalid". */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:.875rem;
	color:#fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:.875rem;
	color:#fff;
	opacity:1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:.875rem;
	color:#fff;
	opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:.875rem;
	color:#fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:.875rem;
	color:#fff;
}


@media (max-width:900px){
	.site-title,
	#toggle{
		position:fixed;
		top:0;
	}
	.admin-bar .site-title,
	.admin-bar #toggle{
		top:32px;
	}
	@media(max-width:782px){
		.admin-bar .site-title,
		.admin-bar #toggle{
			top:46px;
		}
	}
	.site-title{
		left:clamp(2rem,8vw,8.75rem); /* same as padding on .outer */
		left:4%;
		padding-top:1rem;
	}
	.scrolled .site-title{
		padding-top:2rem;
	}
	#toggle{
		right:clamp(2rem,8vw,8.75rem); /* same as padding on .outer */
		right:4%;
	}
	#nav{
		height:6.25rem; /* enough to show the logo */
		overflow:hidden;
	}
	#nav .inner{
		align-items:flex-start;
	}
	#toggle{
		display:block;
		width:3rem;
		height:6.25rem; /* same height as #nav when #nav is closed */
		order:1;
	}
	#toggle a{
		display:block;
		width:100%;
		height:100%;
	}
	#toggle a span.burger{
		display:block;
		width:100%;
		height:100%;
		background:url(img/menu.svg) transparent no-repeat right center / contain;
	}
	#toggle a.navisopen span.burger{
		background:url(img/close.svg) transparent no-repeat right center / contain;
	}
	#navcontent #site-navigation{
		align-items:flex-start;
	}
	#navcontent .topnavpart{
		width:calc(50% - 1rem);
		display:none;
	}
	body.toggled-on{
		overflow:hidden;
	}
	.toggled-on #nav,
	#nav:target{
		height:100%;
		overflow:auto;
		background:rgba(0,0,0,1);
	}
	.toggled-on #navcontent,
	#nav:target #navcontent{
		padding-top:6.25rem;
		padding-bottom:5rem;
		/* to make sure that even with the admin bar, there will be */
		/* a scrollbar for the last items in the list */
	}
	.toggled-on #navcontent .topnavpart,
	#nav:target #navcontent .topnavpart{
		display:block;
	}
	.site-nav ul.nav-menu{
		width:100%;
		text-align:center;
		margin-bottom:1rem;
	}
	.site-nav ul.nav-menu li{
		display:block;
		float:none;
		width:100%;
		margin-right:revert;
	}
	.site-header ul.nav-menu li a{
		display:block;
		padding:1rem 0;
	}
	#social-navigation ul{
		text-align:center;
	}
	#social-navigation ul li{
		float:none;
		display:inline-block;
		padding:0 .3rem;
	}
	#nav .navisopen,
	#nav:target .navisclosed,
	.toggled-on #nav .navisclosed{
		display:none;
	}
	#nav .navisclosed,
	#nav:target .navisopen,
	.toggled-on #nav .navisopen{
		display:block;
	}
	@media(max-width:420px){
		#navcontent .topnavpart{
			width:100%;
		}
	}
}


/* splash screen potentially */

.splashscreen.no-js,
.splashscreen.hide{
	display:none !important;
}
.splashscreen.show{
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(255,81,80,.9);
	color:white;
	text-align:center;
	z-index:100;
	cursor:pointer;
}
.splashscreen a{
	display:block;
	width:100%;
	height:100%;
	padding:8% 6%;
}
.splashin{
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;
	gap:1rem;
	overflow:auto;
}
.splashscreen h2.splashlogo{
	max-width:clamp(6rem,37vw,9rem);
	margin:0 auto;
}
p.splashintro{
	max-width:min(95rem,100%);
	font-size:clamp(1.2rem,4vw,4.5rem);
	line-height:1.2;
	text-transform:none;
	margin:0 auto;
}
p.splashtext{
	color:#301444;
	font-size:clamp(1rem,1.5vw,1.5rem);
	font-weight:700;
	text-transform:uppercase;
	animation:tada 3s linear;
}
@keyframes tada {
	0%{opacity:0;}
	50%{opacity:0;}
	100%{opacity:1;}
}
</style>