/* @override 
	https://www.elderberries.co.uk/temusic/styles/elderberries.css?* */

/*********************** 2026-03-26 css v3.3 *******************/
/********* change .css?v= after changes to clear caches **********/

 * {
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
	text-align: center;
}

a {
	cursor: pointer;
	list-style: none;
	text-decoration: none;
}

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

/******** outline divs ************/

/* * {
 	outline: 1px solid green;
 	background-color: darkgreen;
 	box-shadow: 0px 3px 5px #444;
}*/

/** {
  outline: 1px solid tomato;
}

* * {
  outline: 1px solid black;
}

* * * {
  outline: 1px solid white;
}*/

/***********************************/

:root {
	--ff: cranberries_font, sans-serif;
	--ff-ftr: sans-serif;
	
	--fs-1: 5rem;
	--fs-2: 3rem;
	--fs-3: 2rem;
	--fs-4: 1rem;
	--fs-5: 0.5rem;
	--fs-p: 1rem;
	--fs-ftr: 0.625em;
		
	--logo-clr: red;
	--primary-clr: white;
	
	--h2Links-clr: lightgray;
	--pLinks-clr: lightgray;
	
	--gigDate-clr: white;
	--gigLoc-clr: white;
	--gigTown-clr: red;
	
	--h2LinksVenues-clr: lightgray;
	--pVenues-clr: white;
	
	--p-clr: white;
	
	--ftr-clr: white;
	--ftr-bg-clr: #666761;
	
	--links-clr: yellow;
	
	--gridGap: 3px;
	
	--spacer: 1rem;
	--spacer-small: 0.5rem;
	--spacer-md: calc(var(--spacer) * 2);
	--spacer-lg: calc(var(--spacer) * 3);
	--spacer-vlg: calc(var(--spacer) * 4);
}

@font-face {
    font-family: 'cranberries_font';
    src:	
    	url('https://www.elderberries.co.uk/temusic/assets/fonts/cranberries_font.ttf') format('ttf'),
    	url('https://www.elderberries.co.uk/temusic/assets/fonts/cranberries_font.woff') format('woff'),
    	url('https://www.elderberries.co.uk/temusic/assets/fonts/cranberries_font.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/****************** main *************************/

body, html {
  background: lightgrey;
  font-family: var(--ff);
  height: 100%;
}

p {
	color: var(--p-clr);
	font-size: var(--fs-p);
}

.h1title {
color: var(--logo-clr);
}

.h2title {
color: var(--primary-clr);
}

.h2Links {
	color: var(--h2Links-clr);
	padding: var(--spacer-small);
}

/**************************************** hamburger menu *********************/

#menuToggle {
	display: none;	
}

#menuToggle:checked ~ .menu {
	position: absolute;
	left: 0;	
}
			
.menu-icon {
	padding: 10px;
	position: absolute;
	left: 10px;
	top: 20px;
	font-size: var(--fs-4);
	background-color: lightgrey;
	cursor: pointer;
	border-radius: 5px;
	margin: 3% 0 0 3%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
	-webkit-transition: width 1s, height 1s, background-color 1s, -webkit-transform 1s;
	transition: width 1s, height 1s, background-color 1s, transform 1s;
	z-index: 1;
}

.menu-icon:hover {
	color: black;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);	
}

/******************** sliding nav *************************/

.menu {
	background-color: gray;
	width: 8rem;
	height: 16rem;
	position: absolute;
	left: -8.75rem;
	top: 8.25rem;
	transition: all .3s ease-in-out;
	z-index: 1;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

nav {
	width: 100%;
	text-align: center;
}

nav li:last-child a {
	border-bottom: none;
}

nav a {
	color: rgba(255, 255, 255, .55);
	display: block;
	border-bottom: 1px solid white;
	padding: 1em 0;
	margin: 0 auto;
}

nav .active {
	color: white;
	background-color: lightblue;
}

nav a:hover {
	color: rgba(255, 255, 255, 1);
	background-color: lightgray;
	margin: 0 auto;
}

/******************** containers *********************/

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--gridGap);
}

.container > div {
  height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-attachment: fixed;
  transition: all ease 0.5s;
}

.container > div:nth-of-type(1) {
  grid-column: 1 / 5;
  justify-content: center;
  justify-items: center;  
}

.container > div:nth-of-type(2) {
  grid-column: 1 / 4;
}

.container > div:nth-of-type(6) {
  grid-column: 3 / 5;
}

.container > div:nth-of-type(9) {
  grid-column: 3 / 5;
}

.container > div:nth-of-type(10) {
	grid-column: 1 / 3;
}

 /*************footer *********************/

footer {
	background-color: var(--ftr-bg-clr);
	display: grid;
	grid-column: 1 / 3;
	grid-row: 5;
	line-height: var(--spacer);
}

#foot01 p {
	color: var(--primary-clr);
	font-family: var(--ff-ftr);
	font-size: var(--fs-ftr);
}

/******************** about *********************/

.aboutText {
	padding: var(--spacer);
}

/*************** social links *************************/

.socialLinks {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: center;
}

.socialIcon {
	height: 30px;
}

.socialIcon:hover {
	transform: scale(1.25);  
	transition: all ease 0.5s;
}

/**************** gigs ****************************/

.gigLoc {
	color: var(--gigLoc-clr);
}

.gigTown {
	color: var(--gigTown-clr);
	padding: var(--spacer);	
}

.gigDate {
	color: var(--gigDate-clr);
}

/************************* errors ***************************/

.wrapper {
	display: grid;
}

.errorCards {
	display: grid;
	grid-column: 1 / 3;
	grid-row: 2 /3;
}

.oopsCard h2 {
	color: var(--links-clr);
}

.cardError {
	color: var(--primary-clr);
}

.cardText, p {
	color: var(--primary-clr);
}

a .pError:hover {
	color: var(--links-clr);
	transition: 0.5s;
}

/***************** venues ***********************/

.h2LinksVenues {
	color: var(--h2LinksVenues-clr);
	font-size: var(--fs-3);
}

.pVenuesTitle {
	color: var(--pLinks-clr);
	font-size: var(--fs-3);
}

.pVenues {
	color: var(--pVenues-clr);
	font-size: var(--fs-4);
}

/******************* videos ********************/

.vidContainer {
	display: flex;
}

.thumb {
	width: 200px;	
	height: 200px;
	object-fit: cover; /* fills and may crop */
	padding: 5px;
}

/********************* holding *********************/

.holdingWrapper {
	display: grid;
	grid-template-columns: 1fr auto 1f;
	grid-template-rows: auto;
}

.imageBox {
	display: grid;
	grid-column: 1 / 3;
	grid-row: 1 / 3;
	margin: 0 auto;
	max-width: 90vw;
}

.logo {
	grid-column: 1 /3;
	grid-row: 1 / 3;
}

.holdingCard {
	grid-column: 1 / 3;
	grid-row: 2;
}

.socHolding {
	grid-column: 1 / 3;
	grid-row: 3;
}

a .socText:hover {
	color: red;
}

/**************************************************************************/
/************************ media queuies ***********************************/
/**************************************************************************/

/*********************** sticky mobile hover buttons *******************/

@media (hover:hover) {
	.h2Links:hover {
    color: var(--h2Links-clr);
}
}

/* smaller devices (landscape tablets, 200px and up) - yellow ***********/

@media only screen and (min-width:200px) {	

/*body {
	background: yellow;
}*/

.logo {
	margin: 13% 0;
}


/**************************** set BG photos *******************************/

/************* home *****/

.bg-4 {
	background-image: url(/temusic/assets/elderberries/media28.jpg);
	background-size: cover;
}

/************* about *****/

.bg-3 {
	background-image: url(/temusic/assets/elderberries/eb002.jpg);
	background-size: cover;
}

/************* gigs*****/

.bg-1 {
	background-image: url(/temusic/assets/elderberries/media29.jpg);
	background-size: cover;
}

/************* venues *****/

.bg-6 {
	background-image: url(/temusic/assets/elderberries/media34.jpg);
	background-size: cover;	
}

/************* video *****/

.bg-7 {
	background-image: url(/temusic/assets/elderberries/media30.jpg);
	background-size: cover;
}

/********************** video thumb **************/

.thumb {
width: 150px;	
height: 150px;
}

/*******************************************************************************************/

.bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .h1title {
	font-size: var(--fs-3);
}

.bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .h2title {
	font-size: var(--fs-4);
}

.h2Links {
	font-size: var(--fs-4);
	padding: var(--spacer-small);
}

p {
	font-size: var(--fs-4);
}

.aboutText {
	font-size: var(--fs-5);
}

.gigLoc {
	font-size: var(--fs-4);
}

.gigTown {
	font-size: var(--fs-4);
}

.gigDate {
	font-size: var(--fs-4);
}

.oopsCard h2 {
	font-size: var(--fs-3);
}

.cardText, h2 {
	font-size: var(--fs-3);
}

.cardText, p {
	font-size: var(--fs-4);
}
}


/* smaller devices (landscape tablets, 320px and up) - white ***********/

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

/*body {
	background: white;
}*/

.thumb {
width: 200px;	
height: 200px;
}

/*************************************** social links ******************************/

.socialIcon {
	height: 40px;
}

.bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .h1title {
	font-size: var(--fs-2);
}

.h2title {
	font-size: var(--fs-5);
}
.bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .h2title {
	font-size: var(--fs-4);
}

.h2Links {
	font-size: var(--fs-3);
	padding: var(--spacer);
}

p {
	font-size: var(--fs-4);
}

.aboutText {
	font-size: var(--fs-4);
}

.gigLoc {
	font-size: var(--fs-3);
}

.gigTown {
	font-size: var(--fs-4);
}

.gigDate {
	font-size: var(--fs-4);
}

.oopsCard h2 {
	font-size: var(--fs-3);
}

.cardText, h2 {
	font-size: var(--fs-3);
}

.cardText, p {
	font-size: var(--fs-4);
}
}

/* Medium devices (landscape tablets, 768px and up) - green ***********/

@media only screen and (min-width: 768px) {

/*body {
	background: green;
}*/

/*************************************** social links ******************************/

.socialIcon {
	height: 50px;
}

/*******************************************************************************************/

.bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .h1title {
	font-size: var(--fs-1);
}

.bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .h2title {
	font-size: var(--fs-3);	
}

.h2Links {
	font-size: var(--fs-3);
}

p {
	font-size: var(--fs-4);
}

.aboutText {
	font-size: var(--fs-4);
}

.gigLoc {
	font-size: var(--fs-3);
}

.gigTown {
	font-size: var(--fs-4);
}

.gigDate {
	font-size: var(--fs-4);
}

.oopsCard h2 {
	font-size: var(--fs-2);
}

.cardText, h2 {
	font-size: var(--fs-3);
}

.cardText, p {
	font-size: var(--fs-4);
}
}

/* large devices (large laptops and desktops, 1400px and up) - blue ***********/

@media only screen and (min-width: 1400px) {

/*body {
	background: blue;
}*/

.video1 {
	width: 30%;
}

.video2 {
	width: 15%;
}

.video3 {
	width: 15%;
}

.video4 {
	width: 30%;
}

/*******************************************************************************************/

.bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .h1title {
	font-size: var(--fs-1);
}

.bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .h2title {
	font-size: var(--fs-3);	
}

.h2Links {
	font-size: var(--fs-2);
}

p {
	font-size: var(--fs-3);
}

.aboutText {
	font-size: var(--fs-4);
}

.gigLoc {
	font-size: var(--fs-2);
}

.gigTown {
	font-size: var(--fs-4);
}

.gigDate {
	font-size: var(--fs-3);
}

.oopsCard h2 {
	font-size: var(--fs-3);
}

.cardText, h2 {
	font-size: var(--fs-3);
}

.cardText, p {
	font-size: var(--fs-3);
}
}