html, body {
	  margin: 0;
	  padding: 0;
	}
	body {
		background: url('https://www.cumberlandac.co.uk/img/main-background-large.png?20221008') no-repeat #ec6900;
		background-size: 100%;
	}
	.parent-container {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	.page-banner {
		position: relative;
		width: 100%;
		margin: 0;
		padding: 0;
	}	
	.banner {
		position: relative;
		z-index: 1;
		width: 100%;
	}
	.banner-marketing {
		position: absolute;
		height: 50%;
		top: 17%;
		right: 5%;
		z-index: 2;
		opacity: 0.8;
	}	
	.admin-login-banner {
		position: relative;
		width: 100%;
		text-align: right;
	}
	.nav-buttons {
		position: relative;
		display: flex;
	    justify-content: space-between;
	}
	.btn {
		position: relative;
		width: 19%;
	}
	.btn-lvl1:hover {
		position: relative;
        animation-duration: .5s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		background-size: contain;
	}
	.btn-lvl2 {
		opacity: .5;
	}
	.btn-lvl2:hover {
		opacity: 1;
	}

	.btn-MemArea:hover {
        animation-name: btn-MemArea-animate;
	}
	.btn-Merch:hover {
        animation-name: btn-Merch-animate;
	}
	.btn-Champ:hover {
        animation-name: btn-Champ-animate;
	}
	.btn-Cal:hover {
        animation-name: btn-Cal-animate;
	}
	.btn-Med:hover {
        animation-name: btn-Med-animate;
	}

	.coming-soon {
		color: #FFFFFF;
		position: relative;
		text-align: center;
	}

	.txt {
		font-family: "Calibri";
	}


	.txt-highlight-red {
		background-color: #d55050;
	}

	.txt-training {
		font-family: "Courier New";
		font-size: 13px;
		line-height: 2.2;
	}
	h1 {
		font-size: 25px;
	}
	h2 {
		font-size: 20px;
	}
	h3 {
		font-size: 17px;
	}

	p {
		font-size: 18px;
		line-height: 2.2;
	}

	.main-page-content {
		width: 100%;
	}

/* Update Member Details */
	.floating-content {
		position: fixed;
		top: 50px;
		right: 100px;
		z-index: 2;
		background-color: rgba(255, 255, 255, 0.6);
	}
	.changes-list {
		overflow-wrap: break-word;
		resize: none;		
	}
	.photo-grid-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
		gap: 10px;
		width: 90%;
		max-width: 600px;	
	}
	.photo-grid-item img {
		width: 100%;
		height: auto;
		display: block;
	}
/* Update Member Details */

/* Update training instructions */
	.training-instructions-textarea {
		width: 100%;
		height: 100px;
	}
	.training-instructions-sanitised {
		display: none;
		visibility: hidden;
	}
/* Update training instructions */

/* Welfare officers */
        .officer {
            margin: 20px 0;
        }
        .officer-name {
            font-size: 1.2em;
            font-weight: bold;
        }
        .officer-contact {
            margin-top: 5px;
        }
/* Welfare officers */

/* Gallery */

        .mosaic {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
            margin-top: 20px;
            width: 50%; /* Set the width of the mosaic to 50% of the page width */
        }

        .mosaic img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            cursor: pointer;
            border-radius: 5px;
            transition: transform 0.2s;
        }

        .mosaic img:hover {
            transform: scale(1.05);
        }

        .gallery {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .gallery img.large-image {
            max-width: 90%;
            max-height: 80%;
        }

        .thumbnail-strip {
            display: flex;
            overflow-x: auto;
            margin-top: 10px;
            max-width: 90%;
        }

        .thumbnail-strip img {
            width: 100px;
            margin-right: 10px;
            cursor: pointer;
            border-radius: 5px;
        }

        .gallery:target {
            display: flex;
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            color: white;
            font-size: 24px;
            text-decoration: none;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 10px;
            border-radius: 5px;
        }

        .close-btn:hover {
            background-color: rgba(255, 0, 0, 0.7);
        }
/* Gallery */

/* Update Races */

.feedback-container {
    margin: 20px auto;
    width: 90%;
    max-width: 600px;
}
.alert {
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-family: sans-serif;
}
.alert.success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}
.alert.error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* Update Races */





/* -- The animation code -- */
/* - modified date added to image URLs to ensure cache refresh following changes - */

@keyframes btn-Med-animate {
  from {background: url('https://www.cumberlandac.co.uk/img/btn-Med.png?20221008'); background-size: contain;}
  to {background: url('https://www.cumberlandac.co.uk/img/btn-Med-hover.png?20221008'); background-size: contain;}
}
@keyframes btn-Cal-animate {
  from {background: url('https://www.cumberlandac.co.uk/img/btn-Cal.png?20221008'); background-size: contain;}
  to {background: url('https://www.cumberlandac.co.uk/img/btn-Cal-hover.png?20221008'); background-size: contain;}
}
@keyframes btn-Champ-animate {
  from {background: url('https://www.cumberlandac.co.uk/img/btn-Champ.png?20221008'); background-size: contain;}
  to {background: url('https://www.cumberlandac.co.uk/img/btn-Champ-hover.png?20221008'); background-size: contain;}
}
@keyframes btn-Merch-animate {
  from {background: url('https://www.cumberlandac.co.uk/img/btn-Merch.png?20221008'); background-size: contain;}
  to {background: url('https://www.cumberlandac.co.uk/img/btn-Merch-hover.png?20221008'); background-size: contain;}
}
@keyframes btn-MemArea-animate {
  from {background: url('https://www.cumberlandac.co.uk/img/btn-MemArea.png?20221008'); background-size: contain;}
  to {background: url('https://www.cumberlandac.co.uk/img/btn-MemArea-hover.png?20221008'); background-size: contain;}
}