/* Universal styles */

body {
	background:#f2ebde;
	color:#3e3948;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
  background-color:#f2ebde;
  color:#3e3948;
  font-family: p22-underground, sans-serif;
}

strong {
	font-weight:600;
}

p {
	font-family: p22-underground, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.3em;
}

a {
	color: #3e3948;
	text-decoration: none;
  background-image: linear-gradient(#fdfcfa, #fdfcfa), linear-gradient(#e0d0b5, #e0d0b5);
  background-size: 100% 7px, 0 7px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size .15s linear;
  cursor:pointer;
}

a:hover {
	color: #3e3948;
  background-size: 0 7px, 100% 7px;
  text-decoration: none;
}

img {
	width:100%;
	height:auto;
	border-radius:10px;
}

/* Menu */

.menu-btn {
	position: fixed;
  top: 10px;
  right: 10px;
  height: 46px;
  width: 46px;
  z-index:1002;
  background-color:#413a50;
  border-radius:100%;
  transition: transform 0.3s ease-in-out;
  padding-top:2px;
}

.menu-btn:hover {
	transform:scale(1.3);
}
	
.menu {
  text-align:center;
  font-size:26px;
  color:#fff;
}

#overlay {
  position: fixed;
  color:#fff;
  top: 0;
  z-index: 1001;
  display: none;
  overflow: auto;
  width: 100%;
  height: 100%;
  background: #413a50;
  transition: display 0.3s ease-in-out;
}

.navigation-interior {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align:center;
}

.navigation-alphabet a {
	display:inline-block;
	height:100px;
	width:100px;
	background:#534a67;
	border-radius:50%;
	text-align: center;
	transition: all 0.5s;
	color:#fff;
	font-family: clarendon-urw, serif;
 	font-size:3em;
 	font-weight:300;
 	overflow:hidden;
 	margin-right:20px;
 	margin-bottom:20px;
  justify-content: center;
  align-items: center;
  padding-top:15px;
}

.navigation-alphabet a[href="#A"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/alpacas.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#B"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/bigben.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#C"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/cowley.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#D"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/diana.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#E"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/eero.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#F"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/fish.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#G"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/gin.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#H"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/hydrogen.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#I"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/isherwood.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#J"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/jet2.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#K"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/kylie.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#L"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/lego.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#M"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/museum.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#N"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/notrump.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#O"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/oxo.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#P"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/pillows.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#Q"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/queers.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#R"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/rotunda.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#S"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/shakespeare.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#T"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/tower.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#U"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/uber.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#V"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/vanessa.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#W"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/westminster.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#X"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/experimental.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#Y"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/x2.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-alphabet a[href="#Z"]:hover {
	background:linear-gradient(to bottom, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%), url('images/z.jpg');
	background-size:cover;
	background-position:center center;
}

.navigation-secondary {
	margin-left:auto;
	margin-right:auto;
	padding-top:25px;
}

.navigation-secondary a {
	display:inline-block;
	background:#534a67;
	border-radius:7px;
	text-align: center;
	transition: all 0.5s;
	color:#fff;
 	font-weight:600;
 	overflow:hidden;
 	margin-right:20px;
 	margin-bottom:20px;
  padding:6px 10px;
}

.navigation-secondary a:hover {
	background:#3a3348;
}

/* Hero */

.container-fluid.hero {
	background:url('images/tower-bridge.jpg');
	background-position: center center;
	background-size:cover;
	height:100vh;
	position:relative;
	transition: all 0.5s ease-in-out;
}

.hero .hero-int {
	margin: 0;
  position: absolute;
	top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align:center;
  mix-blend-mode: overlay;
}

.hero .title {
	font-family: "field-gothic-xxxcondensed", sans-serif;
	font-weight: 700;
	font-style: normal;
	display: block;
  width: 100%;
  text-transform: uppercase;
  text-align: center; /* optional */
  white-space: nowrap; /* prevent wrapping */
  font-size: 80vw;
  line-height: 1em;
  color:#f2ebde;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Safari */
  -khtml-user-select: none;    /* Konqueror HTML */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
}

 .intro-poem-text {
 	font-family: clarendon-urw, serif;
 	font-size:2em;
 	font-weight:300;
 	line-height:1em;
 	z-index:2000000;
 }

.extra-content-intro {
	background: #413a50;
	color:#fdfcfa;
	padding-top:60px;
	padding-bottom:60px;
}

 /* Alphabet sections */

.alphabet-item {
	position:relative;
}

 .alphabet-item .row {
 	min-height:80vh;
 	position:relative;
 }

 .alphabet-poem {
 }

 .alphabet-poem-text {
 	font-family: clarendon-urw, serif;
 	font-size:2em;
 	font-weight:300;
 	line-height:.9em;
 	z-index:2000000;
 }

 .alphabet-poem-first {
 	font-size:3em;
 	display:block;
 	line-height:.7em;
 	letter-spacing:-2px;
 	text-wrap: balance;
 	margin-left:-5px;
 	-webkit-hyphens: auto; /* For Webkit browsers like Safari and Chrome */
  -moz-hyphens: auto;    /* For Firefox */
  -ms-hyphens: auto;     /* For Internet Explorer */
  hyphens: auto;         /* Standard property */
  word-break: break-word; /* Ensures long words also break if hyphenation isn't enough */
 }

 .alphabet-poem-image img {
 	width:100%;
 	height:auto;
 }

.grad1 {
  height: 50vh;
  width:100%;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
  position:absolute;
  bottom:0;
  left:0;
  z-index:10;
}

/* Letter-specifics */

 figure {
 	position:relative;
 }

.bubble {
	background-color:rgba(24,22,28,.7); 
	color:#f2ebde;
	padding:7px;
	border-radius:6px;
	font-size:.75em;
	line-height:.95em;
	position:absolute;
	bottom:15px;
	left:15px;
	margin-right:15px;
}

.bubble-2 {
	background-color:rgba(24,22,28,.7); 
	color:#f2ebde;
	padding:7px;
	border-radius:6px;
	font-size:.75em;
	line-height:.95em;
	position:absolute;
	top:15px;
	left:15px;
	margin-right:15px;
}

.bubble-3 {
	background-color:rgba(24,22,28,.7); 
	color:#f2ebde;
	padding:7px;
	border-radius:6px;
	font-size:.75em;
	line-height:.95em;
	position:absolute;
	top:15px;
	right:15px;
	margin-left:15px;
}

.play-button {
	max-width:40px;
	max-height:40px;
	position:absolute;
	bottom:10px;
	left:10px;
	opacity: .9;
}

.play-button img {
	border-radius:6px;
}

.artwork-caption {
	font-size:.75em;
	line-height:.95em;
	color:#ba9551;
}

.artwork-caption .listen {
	padding-top:0;
}

#A {
	background-color:#e8b799;
	color:#3e3948;
}

#B {
	background-image:url('images/bigben.jpg');
	background-position:center center;
	background-size:cover;
	color:#fdfcfa;
}

#C {
	background-color:#b7ca3f;
	color:#3e3948;
}

#D {
	background-color:#623441;
	color:#fdfcfa;
}

#E {
	background-image:url('images/eero.jpg');
	background-position:center top;
	background-size:cover;
	color:#fdfcfa;
}

#F {
	background-color:#a4b5d3;
	color:#3e3948;
}

#G {
	background-color:#884914;
	color:#fdfcfa;
}

#H {
	background-image:url('images/hydrogen.jpg');
	background-position:center center;
	background-size:cover;
	color:#fdfcfa;
}

#I {
	background-color:#3bacab;
	color:#fdfcfa;
}

#J {
	background-color:#e4e1ce;
	color:#3e3948;
}

#K {
	background-color:#bd0100;
	color:#fdfcfa;
}

#L {
	background-color:#3f8c94;
	color:#fdfcfa;
}

#M {
	background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .8) 100%), url('images/museum.jpg');
	background-position:center center;
	background-size:cover;
	color:#fdfcfa;
}

#N {
	background-color:#f4ea1f;
	color:#3e3948;
}

#O {
	background-color:#0d3a7e;
	color:#fdfcfa;
}
#P {
	background-color:#6f7540;
	color:#fdfcfa;
}

#Q {
	background-color:#fd5c01;
	color:#fdfcfa;
}

#R {
	background-image:radial-gradient(rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 50%), url('images/rotunda.jpg');
	background-position:center center;
	background-size:cover;
	color:#fdfcfa;
}


#S {
	background-color:#3b7dd3;
	color:#fdfcfa;
}

#T {
	background-color:#d0c3b9;
	color:#3e3948;
}

#U {
	background-color:#3d567f;
	color:#fdfcfa;
}

#V {
	background-image:url('images/vanessa.jpg');
	background-position:center center;
	background-size:cover;
	color:#fdfcfa;
}

#W {
	background-color:#bb8930;
	color:#fdfcfa;
}

#X {
	background-color:#1045af;
	color:#fdfcfa;
}

#Y {
	background-color:#8a0f32;
	color:#fdfcfa;
}

#Z {
	background-color:#1c2330;
	color:#fdfcfa;
}

#R .alphabet-poem, #H .alphabet-poem, #B .alphabet-poem, #M .alphabet-poem, #V .alphabet-poem, #E .alphabet-poem, #H .alphabet-poem, #B .alphabet-poem, #M .alphabet-poem, #V .alphabet-poem {
	text-align:center;
} 

.extra-content {
	padding-top:30px;
	padding-bottom:30px;
}

/* Recommendations */

.album-inset {
	padding:0;
	margin:0;
}

.album-inset p {
 	margin-block-end:0;
}

.listen {
	text-transform:uppercase;
	font-size:.7em;
	font-weight:900;
	letter-spacing:2px;
	display:block;
	padding-bottom:10px;
}

.the-list a {
	font-weight:600;
}

#superlatives {
}

#superlatives p.superlative-title {
	margin-bottom:5px;
}

#superlatives p.superlative-winner {
	font-size:2em;
	letter-spacing:-1.5px;
	color:#ba9551;
	line-height:.9em;
	padding-bottom:25px;
}

#superlatives div {
	border:none;
}

#superlatives .superlative-col {
	border-right:1px solid #cbaf7b;
}

.best-item {
	min-height:120px;
	text-align:center;
}

/* Footer  */

.footer {
	background-color:#ffc300;
	padding-top:45px;
	padding-bottom:30px;
	font-size:.85em;
	text-align:center;
}

.footer h4 {
	font-weight:300;
	font-family: clarendon-urw, serif;
	margin-bottom:20px;
	text-wrap: balance;
}

h5 {
	font-weight:300;
	font-family: clarendon-urw, serif;
	margin-bottom:20px;
	text-wrap: balance;
	line-height:1em;
	font-size:1.4em;
}

h2.list-title {
	font-weight:300;
	font-family: clarendon-urw, serif;
	font-size:3em;
	line-height:.8em;
	margin-bottom:20px;
	letter-spacing:-1px;
}

.list-divider {
	margin-top:30px;
	margin-bottom:30px;
	border-top:1px solid #cbaf7b;
	height:1px;
}

.footer a {
	background-image: linear-gradient(#ffe389, #ffe389), linear-gradient(#ffffff, #ffffff);
}

/* Media calls */

@media (max-width: 725px) {

	.alphabet-item {
		padding-top:50px;
		padding-bottom:50px;
	}

	.alphabet-poem-text {
		padding-bottom:30px;
		font-size:1.2em;
	}

	.intro-poem-text {
		font-size:1.6em;
	}

	#B {
		background-position:center left;
		background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .8) 100%), url('images/bigben.jpg') ;
	}

	#E {
		background-position:center top;
		background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .8) 100%), url('images/eero.jpg') ;
	}

	#H {
		background-position:center center;
		background-image:linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .8) 100%), url('images/hydrogen.jpg') ;
	}

	#V {
		background-position:center center;
		background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .8) 100%), url('images/vanessa.jpg') ;
	}

	.album-inset {
		margin-bottom:20px;
	}

		.extra-int div {
 		border-top:1px solid #cbaf7b;
 		padding-top:20px;
 	}

 		.extra-int div:first-child {
 		border-top:none;
 	}

 	.album-inset div {
 		border:none;
 		padding-top:0;
 		margin-top:0;
 	}

 	.listen {
 		padding-top:0;
	}

	.extra-K .listen {
		padding-top:10px;
	}

	.col-8.album-inset {
		padding-left:20px;
	}

	.container.album-inset {
		padding-top:0;
		margin-bottom:0;
	}

	.row.album-inset {
		margin-bottom:0;
	}

	.navigation-interior {
		text-align:center;
	}

	.navigation-alphabet a {
		display:inline-block;
		height:60px;
		width:60px;
	 	font-size:2em;
	 	margin-right:10px;
	 	margin-bottom:10px;
	 	padding-top:5px;
	} 

	.the-list {
		column-count: 1;
	}

	.list-divider {
		margin-top:15px;
		margin-bottom:15px;
	}

	.best-item {
		min-height:20px;
		padding-top:0 !important;
	}

	.navigation-secondary {
		display:none;
	}

} 

@media (min-width:725px) {

	.alphabet-item {
 		padding:50px;
 	}

 	#C .alphabet-poem-text, #I .alphabet-poem-text, #K .alphabet-poem-text, #S .alphabet-poem-text, #X .alphabet-poem-text, #O .alphabet-poem-text, #Y .alphabet-poem-text, #H .alphabet-poem-text  {
 		padding-top:50px;
 	}

 	.extra-int div {
 		border-left:1px solid #cbaf7b;
 	}

 	.extra-int div:first-child {
 		border-left:none;
 	}

 	.album-inset div {
 		border:none;
 	}

 	h2.list-title {
 		text-indent: -6px;
 	}

}

/* Animations */

@keyframes starburst {
 0%{
    transform: rotate(0deg);
   }
100%{
    transform: rotate(360deg);
   }
}