.reveal {
  position: relative;
  opacity: 0;
}

.reveal.active {
  opacity: 1;
}
.active.fade-bottom {
  animation: fade-bottom 1s ease-in;
}
.active.fade-left {
  animation: fade-left 1s ease-in;
}
.active.fade-right {
  animation: fade-right 1s ease-in;
}
@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}



.LightPurple
{
	background: #bfafe7;
}

.SVG_LightPurple 
{
    fill: #bfafe7;
}

.LightBlue
{
	background: #afc8e7;
}

.SVG_LightBlue
{
    fill: #afc8e7;
}

.White {
    color: #f8f7f0;
}

.OffWhite
{
	background: #f8f7f0;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	list-style: none;
	text-decoration: none;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-family: 'Bree Serif', serif;
	/* font-family: sofia-pro-soft,sofia-pro,system-ui,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; */
}

body {
  /* font-family: sofia-pro-soft,sofia-pro,system-ui,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; */
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: #252a32;
  background: #f8f7f0;
}

div.Gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.Gallery:hover {
  border: 1px solid #777;
}

div.Gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

.SectionCenter
{
	text-align: -webkit-center;
	margin-top: 9em;
}

.Center
{
	display: inline-flex;
    flex-wrap: nowrap;
    justify-content: center;
}

p
{
	font-size: 1.165em;
}

.hidden {
  display: none;
}

.header {
	width: 100%;
    height: 21vh;
    background: #f8f7f0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.header .navbar {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  justify-content: space-between;
  align-items: center;
  max-width: 90rem;
  width: 100%;
  padding: 2rem 4rem;
  margin: 0 auto;
}
.header .navbar .brand {
  font-family: inherit;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: inherit;
  text-transform: uppercase;
  color: #252a32;
}
.header .navbar .menu {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  justify-content: center;
  align-items: center;
}
.header .navbar .menu-item:not(:first-child) {
  margin-left: 2rem;
}

.Nav_Links {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: inherit;
    text-transform: uppercase;
}

.NavHover_Purple {
    color: #252a32;
} 

.NavHover_Purple:hover {
    color: #a442e1;
}

.NavHover_Green {
    color: #252a32;
} 

.NavHover_Green:hover {
    color: #42e1b5;
}

.NavHover_Red {
    color: #252a32;
} 

.NavHover_Red:hover {
    color: #e14242;
}

.NavHover_Blue {
    color: #252a32;
} 

.NavHover_Blue:hover {
    color: #4273e1;
}

.NavHover_Gold {
    color: #252a32;
}

.NavHover_Gold:hover {
    color: #e1c642;
}


.NavHover_Button 
{
    background: #e1c642;
    color: #f9f9f9;
    padding: 10px;
    border-radius: 20px;
    font-weight: 700;
} 

.NavHover_Button:hover
{
    background: #252a32;
} 

.Nav_Logo 
{
	width: 12em;
	margin-top: 7em;
	position: relative;
	right: 27px;
}

.Logo_Container
{
	width: 16vw;
    z-index: 2;
}
 
.LoginForm
{
	margin-top: 200px;
	background: #cdcdcd;
	width: 80%;
    margin-left: 10%;
	height: 100%;
	padding: 20px;
	border-radius: 20px;
}

input,
select,
button,
textarea
{
	width: 100%;
	border: none;
	height: 46px;
	background: #f9f9f9;
	border-radius: 10px;
	outline: none;
	color: #333;
	margin-bottom: 20px;
}

.Login_Button 
{
	position: relative;
    background: none;
    color: #bfafe7;
    text-transform: uppercase;
    text-decoration: none;
    border: 0.2em solid #bfafe7;
    border-radius: 1em;
    padding: 0.5em 1em;
} 
	
.Login_Button::before 
{
  content: "";
  display: block;
  position: absolute;
  width: 10%;
  background: #fff;
  height: 0.3em;
  right: 20%;
  top: -0.21em;
  transform: skewX(-45deg);
  -webkit-transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
  transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}
.Login_Button::after {
  content: "";
  display: block;
  position: absolute;
  width: 10%;
  background: #fff;
  height: 0.3em;
  left: 20%;
  bottom: -0.25em;
  transform: skewX(45deg);
  -webkit-transition: all 0.45 cubic-bezier(0.86, 0, 0.07, 1);
  transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}
.Login_Button:hover::before {
  right: 80%;
}
.Login_Button:hover::after {
  left: 80%;
}

.BlueButton
{
	position: relative;
	background: none;
	color: #afc8e7;
	text-transform: uppercase;
	text-decoration: none;
	border: 0.2em solid #afc8e7;
	border-radius: 1em;
	padding: 0.5em 1em;
}
	
	.BlueButton::before 
	{
		content: "";
		display: block;
		position: absolute;
		width: 10%;
		background: #fff;
		height: 0.3em;
		right: 20%;
		top: -0.21em;
		transform: skewX(-45deg);
		-webkit-transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
		transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
	}
	
	.BlueButton::after 
	{
		content: "";
		display: block;
		position: absolute;
		width: 10%;
		background: #fff;
		height: 0.3em;
		left: 20%;
		bottom: -0.25em;
		transform: skewX(45deg);
		-webkit-transition: all 0.45 cubic-bezier(0.86, 0, 0.07, 1);
		transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
	}
	
	.BlueButton:hover::before {
  right: 80%;
}
.BlueButton:hover::after {
  left: 80%;
}

.Monkey
{
	position: relative;
}

.Monkey img
{
	position: absolute;
    max-height: 123px;
    top: 2px;
    left: 114px;
    transform: translateY(-161px);
}

svg.Wiggle_End 
{
    transform: scale(-1);
}

svg.Wiggle_Middle {
    transform: scaleX(-1);
}

.Banner_Middle 
{
    position: relative;
    overflow: hidden;
    font-size: 0;
}
  
.AlignFlex 
{
   align-items: flex-end;
}

section.Wiggle_Section {
	padding-top: 3rem;
}

.Section_Photo_Reel{
	position: relative;
	width: 100%;
	display: block;
	top: 2em;
	z-index: 1;
}

.padding-tb{
  padding: 25px 0;
}

[type="radio"]:checked,
[type="radio"]:not(:checked){
  position: absolute;
  left: -9999px;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
  position: relative;
  cursor: pointer;
  margin: 0 auto;
  text-align: center;
  margin-right: 6px;
  margin-left: 6px;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid #e7e6e9; 
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-image: url('../littlemonkies1.jpg');
  animation: border-transform 6s linear infinite alternate forwards;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
.checkbox.scnd + label{
  background-image: url('../littlemonkies2.jpg');
}
.checkbox.thrd + label{
  background-image: url('../littlemonkies3.jpg');
}
.checkbox.foth + label{
  background-image: url('../littlemonkies4.jpg');
}

.checkbox.fift + label{
  background-image: url('../littlemonkies5.jpg');
}

.checkbox.six + label{
  background-image: url('../littlemonkies6.jpg');
}

.checkbox:checked + label{
  transform: scale(1.3);
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}
@keyframes border-transform{
  0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
  14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
  28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
  42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
  56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
  70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
  84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}

.slider-height-padding {
	padding-top: 440px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.Photo_Reel {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  z-index: 100;
  padding: 0;
  margin: 0;
  list-style: none;
}

.Photo_Reel li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  z-index: 100;
  padding: 0;
  margin: 0;
  list-style: none;
  height: 450px;
  border: 5px solid #e7e6e9;
  background-size: 100% 100%; /* fill space fully */
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../littlemonkies1.jpg');
  border-radius: 50%;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 2.7;
  color: #343434;
  writing-mode: vertical-rl;
  opacity: 0;
  pointer-events: none;

  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}


.Photo_Reel li span {
  mix-blend-mode: difference;
}
.Photo_Reel li:nth-child(2) {
  background-image: url('../littlemonkies2.jpg');
}
.Photo_Reel li:nth-child(3) {
  background-image: url('../littlemonkies3.jpg');
}
.Photo_Reel li:nth-child(4) {
  background-image: url('../littlemonkies4.jpg');
}

.Photo_Reel li:nth-child(5) {
  background-image: url('../../littlemonkies5.jpg');
}

.Photo_Reel li:nth-child(6) {
  background-image: url('../../littlemonkies6.jpg');
}


.checkbox.frst:checked ~ .Photo_Reel li:nth-child(1) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 10px;
}
.checkbox.scnd:checked ~ .Photo_Reel li:nth-child(2) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 10px;
}
.checkbox.thrd:checked ~ .Photo_Reel li:nth-child(3) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 10px;
}
.checkbox.foth:checked ~ .Photo_Reel li:nth-child(4) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 10px;
}

.checkbox.fift:checked ~ .Photo_Reel li:nth-child(5) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 10px;
}

.checkbox.six:checked ~ .Photo_Reel li:nth-child(6) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 10px;
}

.Column,
.ColumnRow
{
	display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-self: center;
}

.Row,
.RowColumn
{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.AlignStart
{
	align-self: start;
}

.AlignMiddle
{
	align-self: center;
}

.AlignEnd
{
	align-self: end;
}

.Card_Image {
	max-width: 50px;
    z-index: 2;
}

.Container_Image {
	position: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	bottom: 3em;
}


.Card_Container {
	background-color: #fff;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	height: -webkit-fill-available; 
}

.Card_Border
{
	border-radius: 10px;
	border: 5px solid #e7e6e9;
}

.Card_BorderPurple 
{
    border-radius: 10px;
    border: 5px solid #bfafe7;
}

.Card_H4 {
	text-align: center;
	font-size: 22px;
	margin-top: 5px;
	margin-bottom: 0.5em;
	letter-spacing: 2px;
	font-weight: 900;
}

.Card_Span {
  font-size: 14px;
  opacity: 0.7;
  margin-top: 1em;
}

.Card_P {
  text-align: center;
}

.H2
{
    font-size: 1.50rem;
	font-weight: 500;
    padding-bottom: 1.5em;
    text-align: center;
	text-transform: uppercase;
} 

.H3
{
    font-size: 1.30rem;
    margin-bottom: 1.2em;
    text-align: center;
} 

.TextArea 
{
    text-align: -webkit-center;
    font-size: 1em;
}

.TopSpace 
{
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

.Section 
{
    display: flex;
    flex-direction: column;
    padding-top: 3em;
    background: #f8f7f0;
}

.pre, 
.next {
	outline: none;
    background: none;
    border: none;
    font-size: 40px;
    color: #bfafe7;
    opacity: 0.7;
    transition: color 0.3s;
    cursor: pointer;
    margin-top: 0.5em;
}

.pre:hover {
  color: #351a6c;
}

.next:hover {
  color: #351a6c;
}

.SVG_Footer_Wiggle
{
	margin-top: -1em;
}

.Ofsted_Container
{
	display: flex;
    flex-direction: column;
    top: 2em;
    position: relative;
    z-index: 2;
    width: 19em;
    align-self: center;
}

.MonkeyMap
{
	width: -webkit-fill-available;
    height: 500px;
    border: 0.25em solid #e7e6e9;
    border-radius: 0.5em;
}

.Banner_Footer 
{
    background: #f8f7f0;
}

hr {
  margin: 1.5em auto;
  position: relative;
  height: 9px;
  width: 9px;
  border: transparent;
  overflow: visible;
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="9" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><rect x="0.75" y="0.5" width="8" height="8" rx="4" fill="%231CB0A8" /></svg>');
}
hr:before {
  position: absolute;
  height: 9px;
  width: 10px;
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="9" viewBox="0 0 10 9" xmlns="http://www.w3.org/2000/svg"><path d="M3.91043 1.29752C4.30449 0.688518 5.19551 0.688519 5.58957 1.29752L9.25143 6.95675C9.68196 7.62211 9.20436 8.5 8.41186 8.5H1.08814C0.29564 8.5 -0.181954 7.62211 0.248574 6.95675L3.91043 1.29752Z" fill="%23FCB643" /></svg>');
  left: -18px;
}
hr:after {
  position: absolute;
  height: 9px;
  width: 9px;
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg width="9" height="9" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><rect x="0.75" y="0.5" width="8" height="8" rx="1" fill="%23EF4056" /></svg>');
  right: -18px;
}

	/* IMAGE UPLOADER FORM */
	
	select::-ms-expand {
display: none;
}

.Select:after {
	content: "\f13a";
    font-family: 'FontAwesome';
    color: #892a9b;
    right: 1.5em;
    bottom: 5.75em;
    padding: 0 0 2px;
    border-bottom: 2px solid #999;
    position: absolute;
    pointer-events: none;
}
 
.Select select 
{
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 5px 0px;
    padding: 0px 24px;
    font-size: 1em;
    color: #333;
    background-color: #f9f9f9;
    border: 2px solid #cccccc;
    -ms-word-break: normal;

}
	
	.ImageFormContainer
	{
		width: -webkit-fill-available;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 15em;
	}
	
	.ImageLabel 
	{
		position: relative;
		left: 20em;
		bottom: 12em;
	}

	.AvatarUpload {
		position: relative;
		align-items: center;
	}
	
	.AvatarEdit {
		position: absolute;
		z-index: 1;
		top: 211px;
	}
	
	.ContentMessage 
	{
		width: 92%;
		position: absolute;
		z-index: 1;
		top: 92px;
	}
	 
	.AvatarUpload .AvatarEdit input + label {
		display: inline-block;
		width: 34px;
		height: 34px;
		margin-bottom: 0px;
		border-radius: 100%;
		background: #FFFFFF;
		border: 1px solid transparent;
		box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 12%);
		cursor: pointer;
		font-weight: normal;
		transition: all 0.2s ease-in-out;
		padding-left: 0.59em;
		padding-top: 0.1em;
}
	.AvatarUpload .AvatarEdit input + label:hover {
	  background: #f1f1f1;
	  border-color: #d6d6d6;
	}
	.AvatarUpload .AvatarEdit input + label:after {
		content: "\f040";
		font-family: 'FontAwesome';
		color: #757575;
		position: initial;
		top: 10px;
		left: 0;
		right: 0;
		text-align: center;
		margin: auto;
}
	.AvatarUpload .AvatarPreview {
	  width: 192px;
	  height: 192px;
	  position: relative;
	  border-radius: 100%;
	  border: 6px solid #F8F8F8;
	  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
	}
	.AvatarUpload .AvatarPreview > div {
	  width: 100%;
	  height: 100%;
	  border-radius: 100%;
	  background-size: cover;
	  background-repeat: no-repeat;
	  background-position: center;
	}
	
	#UploadImage {
    display: none;
}
 
.GalleryCentre
{
	align-items: center;
}

.js-slideshow {
  --offset: 1600px;
  --overlap: 2;
  --image-gap: 6;
  --offset-time: 0.48s;
  --thumb-border-radius: 0;
  --thumb-size: 50;
  --thumbs-width: 20000;
  width: calc(100vw - 0px);
  max-width: 880px;
  position: relative;
  user-select: none;
}
.js-slideshow__slides-wrapper {
  position: relative;
  height: 0;
  width: 100%;
  padding-bottom: 50%;
  overflow: hidden;
}
.js-slideshow__slides {
  position: absolute;
  height: 100%;
  width: 40000px;
  left: 50%;
  transform: translate(calc(var(--offset) * -1), 0);
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  transition: transform var(--offset-time) ease;
}
.js-slideshow__slides img {
	height: 100%;
    display: block;
    margin-left: calc(var(--image-gap) * 0.5px);
    margin-right: calc(var(--image-gap) * 0.5px);
    border-radius: 0.2em;
}
.js-slideshow__thumbs-wrapper {
  width: 100%;
  height: calc(var(--thumb-size) * 1px + 18px);
  margin-top: calc(var(--image-gap) * 1px);
  position: relative;
  display: block;
  overflow: hidden;
  scroll-behavior: smooth;
}
.js-slideshow__thumbs {
  width: calc(var(--thumbs-width) * 1px);
  display: grid;
  grid-auto-rows: calc(var(--thumb-size) * 1px);
  grid-template-columns: repeat(auto-fit, calc(var(--thumb-size) * 1px));
  grid-gap: calc(var(--image-gap) * 1px);
}
.js-slideshow__thumb-image {
  margin: 0;
  position: relative;
}
.js-slideshow__thumb-image img {
  height: 100%;
  width: 100%;
  display: block;
  border-radius: 0.1em;
  object-fit: cover;
}
.js-slideshow__thumb-image--selected:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--thumb-border-radius);
  box-shadow: inset 0 0 0 3px rgba(50, 200, 200, 0.8);
}

@media (min-width: 500px) 
{
	
  .js-slideshow 
  {
    --thumb-size: 77;
	width: calc(74vw - 0px);
  }
  
  .js-slideshow__thumbs-wrapper 
  {
    display: block;
  }
  
}

@media (min-width: 600px) 
{
	
  .js-slideshow 
  {
    --thumb-size: 77;
	width: calc(74vw - 0px);
  }
  
  .js-slideshow__thumbs-wrapper 
  {
    display: block;
  }
  
}


footer {
	position: relative;
    bottom: -1px;
    left: 0;
    right: 0;
    background: #e0e9e0;
    height: auto;
    background: linear-gradient(180deg, rgb(248 247 240) 40%, hwb(52deg 94% 3%) 100%);
    margin-top: -3px;
}

.FooterContent {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  text-align: center;
}

.FooterContent h3 {
	font-size: 1.5em;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 3rem;
    color: black;
}

.FooterContent p {
	line-height: 28px;
    font-size: 1em;
    color: #000000;
}

.SocialIcons {
  list-style: none;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 1rem 0 3rem 0;
}

.SocialIcons li {
  margin: 0 10px;
}

.SocialIcons a {
	text-decoration: none;
    color: #00001f;
    padding: 5px;
}

.SocialIcons a i {
	font-size: 1.6rem;
    width: 25px;
    transition: color 0.4s ease;
}


.FooterBottom {
    padding: 20px;
    padding-bottom: 40px;
    text-align: center;
    background: rgb(42 53 113);
    background: linear-gradient(180deg, rgba(224,233,224,1) 1%, rgb(42 53 113) 100%);
}

.FooterBottom p {
  float: left;
    font-size: 14px;
    word-spacing: 2px;
    color: black;
    font-weight: 500;
}

.FooterBottom p a {
  color: #000;
    font-size: 16px;
    text-decoration: none;
}

.FooterBottom span {
  text-transform: uppercase;
}

.FooterMenu {
	float: right;
}


.FooterMenu ul {
	display: flex;
    flex-direction: row;
    justify-content: center;
}

.FooterMenu ul li {
  padding-right: 10px;

  display: block;
}

.FooterMenu ul li a {
	color: #f7f6f0;
    text-decoration: none;
    font-weight: 100;
    text-transform: uppercase;
    font-size: .82em;
}

.FooterMenu ul li a:hover {
  color: #27bcda;
}

.news-column {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* Align items to the top for better text flow */
  padding: 15px;
}

.profile-picture-container {
    width: 300px;
    height: 300px;
    border-radius: 18%;
    /* margin-right: 15px; */
    overflow: hidden;
    flex-shrink: 0;
}

.profile-picture-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Scale the image to cover the container, may crop */
}

.news-content {
  flex-grow: 1; /* Allow text to take up remaining space */
}

.news-content h2 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.news-content p {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 8px;
}

.post-time {
  font-size: 12px;
  color: #777;
}

.ColumnRow.LightBlue {
  /* background-color: #f0f8ff; /* Light blue background */ */
  border-radius: 8px;
  padding-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

.Spaced90 {
  width: 90%; /* Adjust width as needed */
  margin: 0 auto; /* Center the content */
}

/* Responsive adjustments (optional) */
@media (max-width: 600px) {
  .news-column {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-picture-container {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

@media (max-width: 500px) {
  .FooterBottom p {
    float: none;
  }

  .FooterMenu ul {
    margin-top: 10px;
    
  }
  
  .FooterMenu {
    height: 0;
    float: none;
}

.AvatarUpload .AvatarEdit {
    width: 17em;
}

.ImageLabel {
    left: 14.5em;
}

.ImageFormContainer {
    padding-top: 7em;
}


.js-slideshow {
    --offset: 1600px;
    --overlap: 2;
    --image-gap: 6;
    --offset-time: 0.48s;
    --thumb-border-radius: 0;
    --thumb-size: 50;
    --thumbs-width: 20000;
    width: calc(80vw - 0px);
    max-width: 880px;
    position: relative;
    user-select: none;
}
  
}

.FooterContent ul.Spaced40 
{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
}

i.fa.fa-instagram.CustomInsta 
{
    font-size: 2.75em;
    background: #00001f;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation-name: animation;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: InstaAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@keyframes InstaAnimation 
{
    0% 		{background-color: #d6249f;}
	50% 	{background-color: #00001f;}
	100% 	{background-color: #d6249f;}
}

@-webkit-keyframes InstaAnimation  
{
    0% 		{background-color: #d6249f;}
	50% 	{background-color: #00001f;}
	100% 	{background-color: #d6249f;}
}

i.fa.fa-twitter.CustomTwitter 
{
    font-size: 2.75em;
    background: #00001f;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation-name: animation;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: TwitterAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
 
@-webkit-keyframes TwitterAnimation  
{
    0%     	{background-color: #1da1f2;}
    50%  	{background-color: #00001f;}
    100%  	{background-color: #1da1f2;}
}

i.fa-brands.fa-facebook.CustomFacebook 
{
    font-size: 2.75em;
    background: #00001f;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation-name: animation;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: FacebookAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
 
@-webkit-keyframes FacebookAnimation  
{
    0%     	{background-color: #1da1f2;}
    50%  	{background-color: #00001f;}
    100%  	{background-color: #1da1f2;}
}



 


 /* LOGIN FORM STYLING */

	.Form_Container 
	{
	  display: flex;
	  height: 100vh;
	}

	.Form_Left 
	{
	  overflow: hidden;
	  display: flex;
	  flex-wrap: wrap;
	  flex-direction: column;
	  justify-content: center;
	  -webkit-animation-name: left;
			  animation-name: left;
	  -webkit-animation-duration: 1s;
			  animation-duration: 1s;
	  -webkit-animation-fill-mode: both;
			  animation-fill-mode: both;
	  -webkit-animation-delay: 1s;
			  animation-delay: 1s;
	}

	.Form_Right 
	{
	  flex: 1;
	  background-color: black;
	  transition: 1s;
	  background-image: url(https://images.unsplash.com/photo-1600173868911-23137600bed9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
	  background-size: cover;
	  background-repeat: no-repeat;
	  background-position: center;
	}

	.Form_Header > h2 
	{
	  margin: 0;
	  color: #4f46a5;
	}

	.Form_Header > h4 
	{
	  margin-top: 10px;
	  font-weight: normal;
	  font-size: 15px;
	  color: rgba(0, 0, 0, 0.4);
	}

	.Form 
	{
	  max-width: 100%;
	  display: flex;
	  flex-direction: column;
	}
	
	.FormLogoContainer
	{
		width: 20vw;
		z-index: 2;
		align-self: center;
		margin-top: 2em;
	}
	
	.FormLogoImage
	{
		width: inherit;
	}

	.Form > p 
	{
	  text-align: right;
	}

	.Form > p > a 
	{
	  color: #000;
	  font-size: 14px;
	}

	.Form_Field 
	{
	  height: 46px;
	  width: -webkit-fill-available; 
	  padding: 0 16px;
	  border: 2px solid #ddd;
	  border-radius: 4px;
	  font-family: "Rubik", sans-serif;
	  outline: 0;
	  transition: 0.2s;
	}

	.Form_Field:focus 
	{
	  border-color: #0f7ef1;
	}

	.Form_Button
	{
		border: 0;
		background: linear-gradient(to right, #bfafe7 0%, #afc8e7 100%);
		border-radius: 3px;
		margin-top: 10px;
		color: #f8f7f0;
		letter-spacing: 1px;
		font-weight: 500;
		text-transform: uppercase;
		font-size: large;
	}
	
	.MessageLabel
	{
		position: relative;
		top: 0.1em;
		font-weight: 400;
		color: #a52a2af0;
	}


	.animation 
	{
	  -webkit-animation-name: move;
			  animation-name: move;
	  -webkit-animation-duration: 0.4s;
			  animation-duration: 0.4s;
	  -webkit-animation-fill-mode: both;
			  animation-fill-mode: both;
	  -webkit-animation-delay: 2s;
			  animation-delay: 2s;
	}

	.a1 
	{
	  -webkit-animation-delay: 2s;
			  animation-delay: 2s;
	}

	.a2 
	{
	  -webkit-animation-delay: 2.1s;
			  animation-delay: 2.1s;
	}

	.a3 
	{
	  -webkit-animation-delay: 2.2s;
			  animation-delay: 2.2s;
	}

	.a4 {
	  -webkit-animation-delay: 2.3s;
			  animation-delay: 2.3s;
	}

	.a5 
	{
	  -webkit-animation-delay: 2.4s;
			  animation-delay: 2.4s;
	}

	.a6 {
	  -webkit-animation-delay: 2.5s;
			  animation-delay: 2.5s;
	}

	@-webkit-keyframes move 
	{
	  0% {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-40px);
	  }
	  
	  100% {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	  }
	}

	@keyframes move {
	  0% {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-40px);
	  }
	  100% {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	  }
	}
	
	@-webkit-keyframes left {
	  0% {
		opacity: 0;
		width: 0;
	  }
	  100% {
		opacity: 1;
		padding: 20px 40px;
		width: 440px;
	  }
	}
	
	@keyframes left {
	  0% {
		opacity: 0;
		width: 0;
	  }
	  100% {
		opacity: 1;
		padding: 20px 40px;
		width: 440px;
	  }
	}


@media (max-width: 860px) 
{
	.AlignFlex 
	{
	   align-items: center;
	}
}

@media (max-width: 767px) {
  .slider-height-padding {
    padding-top: 340px;
	display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .Photo_Reel li {
    height: 300px;
    font-size: 13px;
    letter-spacing: 1px;
  }
}

@media (max-width: 575px) {
  .slider-height-padding 
  {
    padding-top: 228px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .Photo_Reel li {
    height: 200px;
  }
  
	.Card_Image 
	{
		max-width: 33px;
		z-index: 2;
	}
}


@media (max-width: 500px)
{
	.Logo_Container 
	{
		width: 17vw;
		margin: 1em 0.5em 0.5em;
	}
}

@media only screen and (max-width: 825px) 
{
	.header 
	{
		width: 100%;
		height: 10vh;
	}
	
	
	.header .navbar 
	{
		padding: 1rem 2rem;
		margin: 0 auto;
	}
  
	.header .navbar .wrapper 
	{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		opacity: 0;
		background: #f1f5f8;
		transition: all 0.3s ease;
	}
	
	.header .navbar .wrapper .menu 
	{
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 25%;
		width: 100%;
		transform: translateY(-50%);
	}
	
	.header .navbar .wrapper .menu-item 
	{
		padding-bottom: 1rem;
		width: 100%;
		text-align: left;
	}
	
	.header .navbar .wrapper .menu-item:nth-child(1) a 
	{
		transition-delay: 0.2s;
	}
	
	.header .navbar .wrapper .menu-item:nth-child(2) a 
	{
		transition-delay: 0.3s;
	}
	
	.header .navbar .wrapper .menu-item:nth-child(3) a 
	{
		transition-delay: 0.4s;
	}
	
	.header .navbar .wrapper .menu-item:nth-child(4) a 
	{
		transition-delay: 0.5s;
	}
	
	.header .navbar .wrapper .menu-item:nth-child(5) a 
	{
		transition-delay: 0.6s;
	}
	
	.header .navbar .wrapper .menu-item:nth-child(6) a 
	{
		transition-delay: 0.7s;
	}
	
	.header .navbar .wrapper .menu-item:not(:first-child) 
	{
		margin-left: 0;
	}
	
	.header .navbar .wrapper .menu-item a 
	{
		padding: 0.6rem 3rem;
		opacity: 0;
		font-size: 1rem;
		font-weight: 500;
		transform: translateX(-20px);
		transition: all 0.3s ease-in-out;
	}
	
	.header .navbar .nav-toggle 
	{
		display: block;
		position: absolute;
		right: 2rem;
		top: 3.75em;
		width: 2.5rem;
		height: 2.5rem;
		cursor: pointer;
		z-index: 999;
	}
	
	.header .navbar .nav-toggle span 
	{
		display: block;
		width: 20px;
		height: 2px;
		background: #252a32;
		border-radius: 2px;
		margin-left: 14px;
	}
	
	.header .navbar .nav-toggle span:nth-child(1) 
	{
		margin-top: 16px;
	}
	
	.header .navbar .nav-toggle span:nth-child(2) 
	{
		margin-top: 4px;
		opacity: 1;
	}
	
	.header .navbar .nav-toggle span:nth-child(3) 
	{
		margin-top: 4px;
	}
	
	.header .navbar #nav:checked + .nav-toggle 
	{
		transform: rotate(45deg);
	}
	
	.header .navbar #nav:checked + .nav-toggle span 
	{
		background: #252a32;
		transition: transform 0.5s ease;
	}
	
	.header .navbar #nav:checked + .nav-toggle span:nth-child(1) 
	{
		transform: translateY(6px) rotate(180deg);
	}
	
	.header .navbar #nav:checked + .nav-toggle span:nth-child(2) 
	{
		opacity: 0;
	}
	
	.header .navbar #nav:checked + .nav-toggle span:nth-child(3) 
	{
		transform: translateY(-6px) rotate(90deg);
	} 
	.header .navbar #nav:checked ~ .wrapper 
	{
		z-index: 99;
		opacity: 1;
	}
	
	.header .navbar #nav:checked ~ .wrapper .menu-item a 
	{
		opacity: 1;
		transform: translateX(0);
	}
	
	.Nav_Logo 
	{
		width: 6em;
		margin-top: 5em;
		position: relative;
		right: 0px;
	}
	
}

@media only screen and (max-width: 768px) 
{
	
	.Nav_Logo 
	{
		width: 6em;
		margin-top: 10em;
		position: relative;
		right: 0px;
	}
	
	.BlueButton
	{
		position: relative;
		top: 1em;
		background: none;
		color: #afc8e7;
		text-transform: uppercase;
		text-decoration: none;
		border: 0.2em solid #afc8e7;
		border-radius: 1em;
		padding: 0.5em 1em;
	}
	
	.BlueButton::before 
	{ 
		content: "";
		display: block;
		position: absolute;
		width: 10%;
		background: #BlueButton;
		height: 0.3em;
		right: 20%;
		top: -0.21em;
		transform: skewX(-45deg);
		-webkit-transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
		transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
	}
	
	.BlueButton::after 
	{
		content: "";
		display: block;
		position: absolute;
		width: 10%;
		background: #BlueButton;
		height: 0.3em;
		left: 20%;
		bottom: -0.25em;
		transform: skewX(45deg);
		-webkit-transition: all 0.45 cubic-bezier(0.86, 0, 0.07, 1);
		transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
	}
	
	.Login_Button 
	{
		position: relative;
		background: none;
		text-transform: uppercase;
		text-decoration: none;
		color: #bfafe7;
		border: 0.2em solid #bfafe7;
		border-radius: 1em;
		padding: 0.5em 1em;
		top: 1em;
		left: 2em;
	}
	
	.Login_Button::before 
	{
	  content: "";
	  display: block;
	  position: absolute;
	  width: 10%;
	  background: #f1f5f8;
	  height: 0.3em;
	  right: 20%;
	  top: -0.21em;
	  transform: skewX(-45deg);
	  -webkit-transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
	  transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
	}
	
	.Login_Button::after {
	  content: "";
	  display: block;
	  position: absolute;
	  width: 10%;
	  background: #f1f5f8;
	  height: 0.3em;
	  left: 20%;
	  bottom: -0.25em;
	  transform: skewX(45deg);
	  -webkit-transition: all 0.45 cubic-bezier(0.86, 0, 0.07, 1);
	  transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
	}
	
	.Monkey
	{
	  display: none;
	}
  
	section.Wiggle_Section 
	{
		padding-top: 2rem;
	}

	.Logo_Container 
	{
		width: 24vw;
		margin: 1em 0.5em 0.5em;
		margin-top: 3em;
		z-index: 2;
		position: absolute;
	}
	
	.Ofsted_Container 
	{
		display: flex;
		flex-direction: column;
		top: 1.25em;
		position: relative;
		z-index: 2;
		width: 16em;
		align-self: center;
	}
	
	.H2
	{
		font-size: 1.50rem;
		padding-bottom: 1em;
		text-align: center;
		text-transform: uppercase;
		font-weight: 300;
	}
	
	.H3
	{
		font-size: 1.15rem;
		margin-bottom: 0.7em;
		text-align: center;
	} 
	
	.TextArea 
	{
		text-align: center;
		font-size: 1em;
	}
	
	
	.FormLogoContainer 
	{
		width: 48vw;
		z-index: 2;
	}
	
	.FormLogoImage
	{
		width: inherit;
		margin-top: 1em;
	}
	
}

.Fill10,
.Fill20,
.Fill30,
.Fill40,
.Fill50,
.Fill60,
.Fill70,
.Fill80,
.Fill90,
.Fill100
{
	width: 100%;
	height: fit-content;
	/*background: red;*/
}

.Spaced10,
.Spaced20,
.Spaced30,
.Spaced40,
.Spaced50,
.Spaced60,
.Spaced70,
.Spaced80,
.Spaced90,
.Spaced100
{
	width: 95%;
	padding: 2%;
	margin: 10px 0;
	height: fit-content;
	/*background: green;*/
} 
 
 /* @media only screen and (max-width: 740px) */
/* { */
	/* .Nav_Logo  */
	/* { */
		/* width: 7em; */
		/* margin-top: 4em; */
	/* } */
/* } */

/* MEDIA */
@media screen and (min-width: 860px)
{
	
	
	
	.Side
	{
		display:unset;
	}
	
	.ColumnRow
	{
		flex-direction: row;
	}
	
	.RowColumn
	{
		flex-direction: column;
	}
	
	/* Fills 100% of the space */
	.Fill10
	{
		width: 10%;
	    height: fit-content;
		/*background: red;*/
	}

	.Fill20
	{
		width: 20%;
	    height: fit-content;
		/*background: red;*/
	}

	.Fill30
	{
		width: 30%;
	    height: fit-content;
		/*background: red;*/
	}

	.Fill40
	{
		width: 40%;
	    height: fit-content;
		/*background: red;*/
	}

	.Fill50
	{
		width: 50%;
	    height: fit-content;
		/*background: red;*/
	}

	.Fill60
	{
		width: 60%;
	    height: fit-content;
		/*background: red;*/
	}

	.Fill70
	{
		width: 70%;
	    height: fit-content;
		/*background: red;*/
	}

	.Fill80
	{
		width: 80%;
	    height: fit-content;
		/*background: red;*/
	}

	.Fill90
	{
		width: 90%;
	    height: fit-content;
		/*background: red;*/
	}

	.Fill100
	{
		width: 100%;
	    height: fit-content;
		/*background: red;*/
	}
	
	
	/* 4% From Column / Row & 2% For Spacing Around */
	.Spaced10
	{
		width: 5%;
		padding: 2%;
		margin: 10px 0;
	    height: fit-content;
		/*background: green;*/
	}

	.Spaced20
	{
		width: 15%;
		padding: 2%;
		margin: 10px 0;
	    height: fit-content;
		/*background: green;*/
	}

	.Spaced30
	{
		width: 25%;
		padding: 2%;
		margin: 10px 0;
	    height: fit-content;
		/*background: green;*/
	}

	.Spaced40
	{
		width: 35%;
		padding: 2%;
		margin: 10px 0;
		height: fit-content;
		/*background: green;*/
	}

	.Spaced50
	{
		width: 45%;
		padding: 2%;
		margin: 10px 0;
		height: fit-content;
		/*background: green;*/
	}

	.Spaced60
	{
		width: 55%;
		padding: 2%;
		margin: 10px 0;
		height: fit-content;
		/*background: green;*/
	}

	.Spaced70
	{
		width: 65%;
		padding: 2%;
		margin: 10px 0;
		height: fit-content;
		/*background: green;*/
	}

	.Spaced80
	{
		width: 75%;
		padding: 2%;
		margin: 10px 0;
		height: fit-content;
		/*background: green;*/
	}

	.Spaced90
	{
		width: 85%;
		padding: 2%;
		margin: 10px 0;
		height: fit-content;
		/*background: green;*/
	}

	.Spaced100
	{
		width: 95%;
		padding: 2%;
		margin: 10px 0;
		height: fit-content;
		/*background: green;*/
	}
	
}

#BackToTopButton {
  display: inline-block;
  background-color: #e7afaf;
  width: 50px;
  height: 50px;
  text-align: center; 
  border-radius: 5em;
  position: fixed;
  bottom: 6em;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#BackToTopButton::after {
  content: "\f25a";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1.6em;
  line-height: 50px;
  color: #fff;
}
#BackToTopButton:hover {
  cursor: pointer;
  background-color: #969696;
}
#BackToTopButton:active {
  background-color: #555;
}
#BackToTopButton.show {
  opacity: 1;
  visibility: visible;
}

@media only screen 
	and (min-device-width: 375px) 
	and (max-device-width: 812px) 
	and (-webkit-min-device-pixel-ratio: 2)
	and (orientation: landscape) 
	{
		.Nav_Logo 
		{
			width: 7em;
			margin-top: 7em;
			right: -35px;
		}
	
	}
  
@media only screen 
	and (min-device-width: 813px) 
	and (max-device-width: 1250px) 
	and (-webkit-min-device-pixel-ratio: 2)
	and (orientation: landscape) 
	{
		.Nav_Logo 
		{
			width: 9em;
			margin-top: 3em;
			right: 3px;
		}

	}
	
textarea.Form_Field {
    resize: none;
    box-sizing: content-box;
    padding-top: 0.905em;
    padding-bottom: 3em;
}

.news-item {
	background-color: #fff;
    border-radius: 10px;
    border: 5px solid #e7e6e9;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
}

.news-column {
    display: flex;
    justify-content: space-around;
    align-self: center;
}

.news-item .profile-picture {
    /* Circular profile picture */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
    left: 15px;
}

.news-item .news-content {
    /* Flexbox to fill remaining space */
    flex: 1;
    margin-left: 40px;
}

.post-time {
    /* Small, light gray text for post time */
    font-size: 12px;
    color: #888;
}