@font-face {
	font-family: bernoru-medium;
	src: url(/fonts/bernoru-blackmedium-webfont.woff2);
}

html, body {
	height: 100%;
	overflow-y: scroll !important;
	-webkit-overflow-scrolling: touch;
}
html {
	overflow-y: hidden;
	background: #fdfdf2;
}
body {
	overflow-y: scroll;
	overflow-x: hidden;
	background: #fdfdf2;
	color: #6d6b6b;
}

.no-js .top-bar { display: none; }
@media screen and (min-width: 40em) {
	.no-js .top-bar { display: block; }
	.no-js .title-bar { display: none; }
}

html, body { background: linear-gradient(to bottom right, #ff4c05 0%, #ffe600 70%) 100% no-repeat; }

.everywhere {
	background-color: transparent;
	background-image: url(https://future.haos.org.uk/i/i24/bg-brand-element-01a.png);
	background-size: contain;
	background-position: right top;
	background-repeat: repeat-y;
}

/* =============================================
   Z-INDEX STACKING — keeps nav above hero slider
   ============================================= */
header {
	position: relative;
	z-index: 500;
}
.off-canvas-content {
	position: relative;
	z-index: 1;
}
.is-dropdown-submenu {
	z-index: 501 !important;
}

/* =============================================
   HERO SLIDER — vanilla JS crossfade
   ============================================= */
.hero-slider {
	position: relative;
	width: 100%;
	height: 80vh;
	overflow: visible;
}
.hero-slide {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
	z-index: 1;
}
.hero-slide.is-active {
	opacity: 1;
	z-index: 2;
}
.hero-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 1.5rem 2rem;
	background: rgba(0,0,0,0.35);
}
.hero-caption h1 {
	color: #ffae00;
	font-family: 'bernoru-medium', sans-serif;
	font-size: 3.4rem;
	text-shadow: 1px 1px 1px #000000;
	margin-bottom: 0;
	line-height: normal;
}
.hero-caption h2 {
	color: #fcfbf9;
	font-family: 'Poppins', sans-serif;
	font-size: 1.2rem;
	margin-bottom: 0;
}

/* =============================================
   UPPER SOCIAL
   ============================================= */
.uppersocial { z-index: 100; position: absolute; margin-top: 2em; margin-right: 2em; border: 1px; color: white; }
.uppersocial a:link    { color: #ffffff; }
.uppersocial a:visited { color: #ffffff; }
.uppersocial a:hover   { color: #ffffff; cursor: pointer; }
.uppersocial a:active  { color: #ffffff; text-decoration: none; }

/* =============================================
   GENERAL
   ============================================= */
.funderwindow { background: linear-gradient(to bottom right, #ff4c05 0%, #ffe600 70%) 100% no-repeat; }
.superlogo { max-width: 200px; }
.event-img { max-height: 300px; }

/* =============================================
   HERO SLIDER
   ============================================= */
.hero-slider {
	position: relative;
	width: 100%;
	height: 80vh;
	overflow: visible;
}
.hero-slide {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
	z-index: 1;
}
.hero-slide.is-active {
	opacity: 1;
	z-index: 2;
}
.hero-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 1.5rem 2rem;
	background: rgba(0,0,0,0.35);
}
.hero-caption h1 {
	color: #ffae00;
	font-family: 'bernoru-medium', sans-serif;
	font-size: 3.4rem;
	text-shadow: 1px 1px 1px #000000;
	margin-bottom: 0;
	line-height: normal;
}
.hero-caption h2 {
	color: #fcfbf9;
	font-family: 'Poppins', sans-serif;
	font-size: 1.2rem;
	margin-bottom: 0;
}

/* Newsflash animation */
.newsflash-splash {
	animation: color-change 10s infinite;
}
@keyframes color-change {
	0%   { color: #0D984A; }
	50%  { color: orange; }
	100% { color: #0D984A; }
}

.poppins-regular { font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; }
p { font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; }

/* =============================================
   TRUSTEE / TEAM TILES
   ============================================= */
.trustee-tile { background: linear-gradient(to top left, beige, lightgreen) 100% no-repeat; border: 1px solid #766cab; padding: .2em; margin-bottom: 1em; }
.trustee-tile h3     { font-family: 'Poppins', sans-serif; color: #595752; font-size: 1.5rem; font-weight: bold; }
.trustee-tile p      { font-family: 'Poppins', sans-serif; color: #6d6b65; font-size: 1rem; text-align: left; padding: .2em; }
.trustee-tile .caption { font-family: 'Poppins', sans-serif; color: #4e4e4c; font-size: .8rem; font-style: italic; }

.goright   { float: right; max-width: 50%; }
.makeround { border-radius: 50%; float: right; padding: .2em; }

/* =============================================
   BACKBLUEBLEND
   ============================================= */
.backblueblend    { margin-top: 12vh; margin-bottom: 2em; padding: 2em; background: linear-gradient(rgba(181,167,247,0.3) 5%, rgba(126,117,183,0.8) 90%); font-family: 'Kanit', serif; font-size: 1.6rem; }
.backblueblend h2 { font-family: 'News Cycle', sans-serif; font-size: 2rem; text-transform: uppercase; color: #0D984A; }
.backblueblend h3 { font-family: 'Kanit', sans-serif; font-size: 1.6rem; color: #343332; }
.backblueblend p  { font-family: 'Poppins', sans-serif; font-size: 1.2rem; color: #343332; }

/* =============================================
   BUTTONS & BORDERS
   ============================================= */
.brad    { border-radius: 10px; }
.bradsm  { border-radius: 5px; }
.btnbrad { border-radius: 5px; }
.bordered { border: 1px solid black; }
.bigbrad { box-shadow: 1px 1px 2px 1px #5a5a5a; border-radius: 5px; }
.boxshad { box-shadow: 1px 1px 0px 1px #5b5959; }

.splash { min-height: 80vh; position: relative; }

/* =============================================
   NEWS SECTIONS
   ============================================= */
.newsectblend { background: linear-gradient(to right, beige, lightgreen); }
.newsect      { margin-top: 12vh; margin-bottom: 2em; padding: 2em; }

.newsect h2 { font-family: 'bernoru-medium', sans-serif; font-size: 2.5rem; color: #0D984A; border: 8px solid #0D984A; border-radius: 50px; padding: .2rem 2rem .4rem; margin-left: 5rem; margin-right: 10rem; margin-bottom: 0; background: rgba(247,247,247,0.81); display: inline-block; }
.newsect h3 { font-family: 'Poppins', sans-serif; font-size: 1.6rem; color: #343332; }
.newsect h4 { font-family: 'Poppins', sans-serif; font-size: 1.1rem; color: #595756; font-weight: 700; }
.newsect p  { font-family: 'Poppins', sans-serif; font-size: 1.2rem; color: #343332; }
.newsect-wrapper { border: 8px solid #0D984A; border-radius: 50px; padding: 2rem 5rem 2rem 4rem; margin-top: -6px; }

.supporters { padding: 0; margin-left: 0; margin-right: 0; }
.bigsymbol  { font-size: 4em; color: #ffae00; text-shadow: 1px 1px 1px #000000; }

/* =============================================
   ACTION BAR TILES (home page)
   ============================================= */
.actionbartile-home       { background: linear-gradient(to bottom, beige, lightgreen); padding: .5em; margin-bottom: 1em; color: #000000; }
.actionbartile-home h2    { font-family: 'Poppins', sans-serif; }
.actionbartile-home .ikon { color: #323131; text-shadow: 1px 1px 1px #000000; }
.actionbartile-home p     { font-family: 'Poppins', sans-serif; font-size: 1.2rem; color: #343332; }

/* =============================================
   COPYRIGHT
   ============================================= */
.copyright { background: none; color: #242323; }

/* =============================================
   NAVIGATION
   ============================================= */
.top-menu ul li a:link    { color: #0D984A; font-size: 1.1rem; background: #ffffff; border-radius: 50px; padding: .1em .6em; margin-left: .6em; border: 3px solid #0D984A; }
.top-menu ul li a:visited { color: #0D984A; }
.top-menu ul li a:hover   { color: #63eb9e; cursor: pointer; }
.top-menu ul li a:active  { color: #0D984A; text-decoration: none; }
.top-menu ul li ul        { background: none; font-size: .5rem; border: none; }

a:link    { color: #0D984A; }
a:visited { color: #0D984A; }
a:hover   { color: #63eb9e; cursor: pointer; }
a:active  { color: #0D984A; text-decoration: none; }

/* =============================================
   LISTS
   ============================================= */
.haos-values    { font-size: 1.1rem; font-family: 'Poppins', cursive; list-style-position: inside; list-style-type: circle; line-height: normal; }
.haos-values li { margin-bottom: 2vh; }

/* =============================================
   SCHOOLS
   ============================================= */
.schoolsgrid      { font-size: 1.1rem; }
.school-logo      { display: block; max-height: 200px; margin: 0 auto; text-align: center; padding: 2em; }
.school-logo-main { display: block; max-height: 300px; margin: 0 auto; text-align: center; padding: 1.5em; }
.school-detail h3 { font-size: 1.1rem; }
.school-detail h2 { font-size: 1rem; font-family: 'Poppins', sans-serif; }
.pupil-comments   { font-size: 1.2rem; text-align: left; padding: 1em; margin: 2em; background: linear-gradient(rgba(181,167,247,0.3) 5%, rgba(126,117,183,0.8) 90%); }

/* =============================================
   NEWS MASONRY
   ============================================= */
.masonry-css {
	column-count: 1;
	column-gap: 1rem;
}
@media screen and (min-width: 37.5em) { .masonry-css { column-count: 3; } }
@media screen and (min-width: 50em)   { .masonry-css { column-count: 4; } }
@media screen and (min-width: 68.75em){ .masonry-css { column-count: 5; } }

.masonry-css-item {
	break-inside: avoid;
	margin-bottom: 1rem;
	background: linear-gradient(to top left, beige, lightgreen) 100% no-repeat;
	box-shadow: 1px 1px 2px 1px #5a5a5a;
	transition: all 1s ease;
}
.masonry-css-item:hover     { filter: brightness(70%); }
.masonry-css-item h2        { font-family: 'Poppins', sans-serif; font-size: 1.5rem; text-transform: uppercase; color: #22211f; }
.masonry-css-item h3        { font-family: 'Poppins', sans-serif; font-size: 1.5rem; color: #22211f; font-variant: small-caps; font-weight: bold; padding: 0 .2em; }
.masonry-css-item p         { font-family: 'Poppins', sans-serif; font-size: 1.2rem; color: #22211f; padding: 0 .2em; }
.masonry-css-item .btnback  { background: #ffc004; color: #313030; font-size: 1rem; }

/* =============================================
   FORMS
   ============================================= */
label { font-family: 'Poppins', sans-serif; text-align: left; }
input[type=text], input[type=password] {
	width: 100%;
	padding: 12px 20px;
	margin: 0px auto;
	box-sizing: border-box;
	border-radius: 4px;
}
.pushback { display: none !important; }

/* =============================================
   MOBILE — max-width: 639px
   ============================================= */
@media screen and (max-width: 39.9375em) {

	.superlogo { max-width: 150px; }

	/* Hero slider mobile */
	.hero-slider   { height: 50vh; }
	.hero-caption h1 { font-size: 1.7rem; }
	.hero-caption h2 { font-size: 1rem; }

	.textpane { position: absolute; bottom: 0; left: 0; padding: .3em; margin-bottom: 0; width: 100%; background: rgba(0,0,0,0.32); }
	.uppersocial { font-size: .8em; }
	.newsectblend    { background: linear-gradient(to right, beige, lightgreen); }
	.newsectblendrev { background: linear-gradient(to right, lightgreen, beige); }

	.newsect    { margin-top: 5vh; margin-bottom: 2em; padding: .1em; }
	.newsect h2 { font-family: 'bernoru-medium', sans-serif; font-size: 1.3rem; color: #0D984A; border: 3px solid #0D984A; border-radius: 50px; padding: .2rem .8rem .3rem; margin-left: 1rem; margin-right: 2rem; margin-bottom: 0; background: rgba(250,250,250,0.5); display: inline-block; }
	.newsect h3 { font-family: 'Poppins', sans-serif; font-size: 1.3rem; color: #343332; }
	.newsect-wrapper { border: 3px solid #0D984A; border-radius: 20px; padding: 1rem; margin-top: -3px; }
	.newsect p  { font-family: 'Poppins', sans-serif; font-size: .9rem; color: #343332; }
	.bigsymbol  { font-size: 2em; color: #ffae00; text-shadow: 1px 1px 1px #000000; }

	.splash h1 { padding: 0 .3em; margin-bottom: 0; font-size: 2rem; text-align: left; }

	.backblueblend    { margin-top: 12vh; margin-bottom: 2em; padding: .2em 0; background: linear-gradient(rgba(181,167,247,0.3) 5%, rgba(126,117,183,0.8) 90%); font-family: 'Kanit', serif; font-size: 1rem; }
	.backblueblend h2 { font-family: 'Kanit', sans-serif; font-size: 2rem; }

	.logoback    { margin-top: 12vh; margin-bottom: 2em; padding: .2em .2em 2em; background: url('/i/test/bg-logo-grey-10.png') top center, linear-gradient(rgba(255,252,240,0.8) 0%, rgba(250,250,250,1) 90%); background-repeat: repeat-x repeat-y; }
	.logoback h2 { font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #22211f; font-size: 1.5rem; }

	ul.haos-values { font-size: .9em; font-family: 'Poppins', cursive; list-style-position: inside; list-style-type: circle; line-height: normal; }

	.breakbox { padding-top: 2em; padding-bottom: 2em; }

	.schoolsgrid   { font-size: 1.1rem; }
	.school-detail h3 { font-size: 1.1rem; }
	.school-detail h2 { font-size: 1rem; font-family: 'Poppins', sans-serif; }
	.pupil-comments   { font-size: 1.2rem; text-align: left; padding: 1em; margin: 2em; background: linear-gradient(rgba(181,167,247,0.3) 5%, rgba(126,117,183,0.8) 90%); }
	.school-logo      { display: block; max-height: 200px; margin: 0 auto; text-align: center; padding: .5em; }
	.slideschoolname  { font-size: .8em; }

	/* Story detail slideshow */
	.story-slideshow  { position: relative; overflow: hidden; margin-bottom: 1em; }
	.story-slide      { display: none; }
	.story-slide.is-active { display: block; }
	.story-prev,
	.story-next       { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.6); color: #fff; border: none; padding: .5em .8em; font-size: 1.2rem; cursor: pointer; z-index: 10; }
	.story-prev       { left: 0; }
	.story-next       { right: 0; }
	.story-prev:hover,
	.story-next:hover { background: rgba(0,0,0,0.85); }

	/* Detail flag (story-detail origin banner) */
	.detail-flag      { color: #ffae00; padding: 0 .3em; font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 700; text-align: left; text-shadow: 1px 1px 1px #000; line-height: normal; }
	.detail-flag-back { background: rgba(0,0,0,0.5); margin-bottom: -2em; padding: .3em 0; }

	/* News page */
	.newstextpane  { position: absolute; bottom: 0; margin-bottom: 2em; width: 100%; background: rgba(0,0,0,0.49); color: #f8f8f8; }
	.makemargin    { padding-bottom: 2em; }
	.newsheadline  { font-family: 'bernoru-medium', sans-serif; }
	.newstiletitle { font-family: 'Poppins', sans-serif; font-size: .95rem; }
	.copy p        { font-size: 1rem; line-height: 1.7; }
}