/*<meta conditions="help-template-control.do-not-edit,import-control.Import,products.School Spider" />*/

/* Declare text styles - controls the responsive styline of fonts */

.i-want-to-menu-title,
.product-updates-menu-title,
.popular-topics-menu-title,
.mybox-left-menu-title,
.mybox-middle-menu-title,
.mybox-right-menu-title
{
	/* Font minimum, preferred and maximum value */
	font-size: clamp(var(--min), var(--val), var(--max));
}

/* Font size variables for repsonsive styling */

.i-want-to-menu-title
{
	--min: 1.3em;
	/* minimum value */
	--val: 2.2vw;
	/* preferred value = 4% viewport width */
	--max: 3em;
	/* maximum value */
}

.product-updates-menu-title
{
	--min: 1.3em;
	/* minimum value */
	--val: 2.2vw;
	/* preferred value = 4% viewport width */
	--max: 3em;
	/* maximum value */
}

.popular-topics-menu-title
{
	--min: 1.3em;
	/* minimum value */
	--val: 2.2vw;
	/* preferred value = 4% viewport width */
	--max: 3em;
	/* maximum value */
}

.mybox-left-menu-title
{
	--min: 1.3em;
	/* minimum value */
	--val: 2.2vw;
	/* preferred value = 4% viewport width */
	--max: 3em;
	/* maximum value */
}

.mybox-middle-menu-title
{
	--min: 1.3em;
	/* minimum value */
	--val: 2.2vw;
	/* preferred value = 4% viewport width */
	--max: 3em;
	/* maximum value */
}

.mybox-right-menu-title
{
	--min: 1.3em;
	/* minimum value */
	--val: 2.2vw;
	/* preferred value = 4% viewport width */
	--max: 3em;
	/* maximum value */
}

/* removes TOC from home page */

.sidenav-wrapper
{
	display: none !important;
}

/* removes the nav bar from the home page */

nav.tab-bar
{
	display: none !important;
}

/* BANNER STYLES */
/* background colour and image area of the banner */

.hero-background
{
	padding: 0rem 1.5rem;
	background-color: #134A82;
	height: 9rem;
	/* formatting and positioning for logo */
	background-image: url('../images/helpcentre/logo-school-spider.svg');
	background-repeat: no-repeat;
	background-position: 2rem 39%;
	background-size: 15% !important;
}

/* title and search area of the banner */

.home-hero
{
	padding: 0.5rem 1rem;
	text-align: left;
	color: white;
	width: auto !important;
}

.home-hero2
{
	padding: 0.5rem 0rem;
	text-align: left;
	color: white;
	width: auto;
	justify-content: space-between;
}

/* main banner title - only used if logo not required */

.home-hero__title
{
	line-height: 1;
	/* margin-bottom: .5rem;*/
	font-family: 'Open Sans';
	font-size: 2rem;
	text-align: left;
	float: left !important;
	visibility: hidden;
}

/* main banner sub title - "search for answers and browser for topics title" */

.home-hero__title2
{
	line-height: 1;
	margin-bottom: 0.5rem;
	margin-top: 1rem;
	margin-left: 0rem;
	margin-right: 0.4rem;
	font-family: 'Open Sans';
	font-size: 1rem;
	text-align: left;
	float: left !important;
	clear: both;
}

/* moves the search bar to the right-hand side of the home page */

.search-bar
{
	float: right;
}

/* TOP MENU on home page banner - "See our other help centres" */

.nav-bar__actions
{
	display: flex;
	float: right;
}

/* controls the area where "See our other Help Centres" sits */

ul.nav-bar__navigation
{
	padding: 0;
	display: flex;
	align-items: right;
	list-style: none;
	margin: 0rem 0;
	text-decoration: none;
	padding-top: 0.3rem;
}

/* styling for "see our other" title" */

ul.nav-bar__navigation li > a
{
	line-height: 1.25rem;
	font-family: 'Open Sans';
	font-size: .875rem;
	color: white;
	text-decoration: none;
	padding-right: 0.75rem;
}

ul.nav-bar__navigation li > a:hover
{
	text-decoration: underline;
	color: white;
}

.home-layout
{
	padding-left: 1.5%;
	min-height: 100vh;
	justifyContent: space-between;
}

/* spacing above and below each section on the home page */

.home-section
{
	position: inherit;
}

.home-section__title
{
	line-height: 1;
	margin: 0 0 1.5rem;
}

/* amount of space around the home page body area */

.home-layout
{
	padding-top: 1.5%;
	min-height: 100vh;
	align-items: center;
}

/* MENU TILES on home page */
/* area containing the tiles - determines the number of cells in the grid */

.menu-tiles__container
{
	width: 97vw;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1rem;
	position: inherit;
}

/* INDIVIDUAL menu TILES */
/* I want to... menu tile */

.i-want-to-menu-tile
{
	width: 31.4vw;
	min-height: 20rem;
	/*max-height: 44vh;*/
	padding: 0.5rem;
	border-radius: 6px;
	border-style: solid;
	border-color: #dfdfdf;
	border-width: 1px;
	background-color: #F3F3F3;
	background-image: url('../images/helpcentre/i-want-to-tile-icon.svg');
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: right bottom;
	margin: 0;
	position: relative;
}

.i-want-to-menu-tile a
{
	color: #1b69b9;
	text-decoration: none;
}

.i-want-to-menu-tile a:hover
{
	color: #1b69b9;
	text-decoration: underline;
}

.i-want-to-menu-title
{
	margin: 0.5rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	font-family: 'Open Sans';
	font-weight: bold;
	color: #93328E;
}

h2.i-want-to-menu-title
{
	padding-top: 0rem;
	padding-left: 0.5rem;
}

.i-want-to-menu-text
{
	margin: 0.5rem;
	font-family: 'Open Sans';
	font-weight: normal;
	font-size: 1rem;
	text-decoration: none;
}

/* Product updates menu tile */

.product-updates-menu-tile
{
	width: 31.4vw;
	min-height: 20rem;
	/*max-height: 44vh;*/
	padding: 0.5rem;
	border-radius: 6px;
	border-style: solid;
	border-color: #dfdfdf;
	border-width: 1px;
	background-color: #f3f3f3;
	background-image: url('../images/helpcentre/product-updates-tile-icon.svg');
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: right bottom;
	position: relative;
}

.product-updates-menu-tile a
{
	color: #1b69b9;
	text-decoration: none;
}

.product-updates-menu-tile a:hover
{
	color: #1b69b9;
	text-decoration: underline;
}

.product-updates-menu-title
{
	margin: 0.5rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	font-family: 'Open Sans';
	font-weight: bold;
	color: #0089a4;
}

h2.product-updates-menu-title
{
	padding-top: 0rem;
	padding-left: 0.5rem;
}

.product-updates-menu-text
{
	margin: 0.5rem;
	font-family: 'Open Sans';
	font-weight: normal;
	font-size: 1rem;
	text-decoration: none;
}

/* Popular topics menu tile */

.popular-topics-menu-tile
{
	width: 31.4vw;
	min-height: 20rem;
	/*max-height: 44vh;*/
	padding: 0.5rem;
	border-radius: 6px;
	border-style: solid;
	border-color: #dfdfdf;
	border-width: 1px;
	background-color: #F3F3F3;
	background-image: url('../images/helpcentre/popular-topics-tile-icon.svg');
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: right bottom;
	position: relative;
}

.popular-topics-menu-title
{
	margin: 0.5rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	font-family: 'Open Sans';
	font-weight: bold;
	color: #134a82;
}

h2.popular-topics-menu-title
{
	padding-top: 0rem;
	padding-left: 0.5rem;
}

.popular-topics-menu-text
{
	margin: 0.5rem;
	font-family: 'Open Sans';
	font-weight: normal;
	font-size: 1rem;
	text-decoration: none;
}

/*MYBOX LEFT menu tile styling */

.mybox-left-menu-tile
{
	width: 31.4vw;
	min-height: 20rem;
	/*max-height: 44vh;*/
	padding: 0.5rem;
	border-radius: 6px;
	border-style: solid;
	border-color: #dfdfdf;
	border-width: 1px;
	background-color: #F3F3F3;
	background-image: url('../images/helpcentre/mybox-left-icon.svg');
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: right bottom;
	position: relative;
}

.mybox-left-menu-tile a
{
	color: #1b69b9;
	text-decoration: none;
}

.mybox-left-menu-tile a:hover
{
	color: #1b69b9;
	text-decoration: underline;
}

.mybox-left-menu-title
{
	margin: 0.5rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	font-family: 'Open Sans';
	font-weight: bold;
	color: #D94CA0;
}

h2.mybox-left-menu-title
{
	padding-top: 0rem;
	padding-left: 0.5rem;
}

.mybox-left-menu-text
{
	margin: 0.5rem;
	font-family: 'Open Sans';
	font-weight: normal;
	font-size: 1rem;
	text-decoration: none;
}

/* MYBOX MIDDLE menu tile */

.mybox-middle-menu-tile
{
	width: 31.4vw;
	min-height: 20rem;
	/*max-height: 44vh;*/
	padding: 0.5rem;
	border-radius: 6px;
	border-style: solid;
	border-color: #dfdfdf;
	border-width: 1px;
	background-color: #f3f3f3;
	background-image: url('../images/helpcentre/mybox-middle-icon.svg');
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: right bottom;
	position: relative;
}

.mybox-middle-menu-tile a
{
	color: #1b69b9;
	text-decoration: none;
}

.mybox-middle-menu-tile a:hover
{
	color: #1b69b9;
	text-decoration: underline;
}

.mybox-middle-menu-title
{
	margin: 0.5rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	font-family: 'Open Sans';
	font-weight: bold;
	color: #5f96ce;
}

h2.mybox-middle-menu-title
{
	padding-top: 0rem;
	padding-left: 0.5rem;
}

.mybox-middle-menu-text
{
	margin: 0.5rem;
	font-family: 'Open Sans';
	font-weight: normal;
	font-size: 1rem;
	text-decoration: none;
}

/* MYBOX RIGHT menu tile */

.mybox-right-menu-tile
{
	width: 31.4vw;
	min-height: 20rem;
	/*max-height: 44vh;*/
	padding: 0.5rem;
	border-radius: 6px;
	border-style: solid;
	border-color: #dfdfdf;
	border-width: 1px;
	background-color: #F3F3F3;
	background-image: url('../images/helpcentre/mybox-right-icon.svg');
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: right bottom;
	position: relative;
}

.mybox-middle-menu-tile a
{
	color: #1b69b9;
	text-decoration: none;
}

.mybox-middle-menu-tile a:hover
{
	color: #1b69b9;
	text-decoration: underline;
}

.mybox-right-menu-title
{
	margin: 0.5rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	font-family: 'Open Sans';
	font-weight: bold;
	color: #666e76;
}

h2.mybox-right-menu-title
{
	padding-top: 0rem;
	padding-left: 0.5rem;
}

.mybox-right-menu-text
{
	margin: 0.5rem;
	font-family: 'Open Sans';
	font-weight: normal;
	font-size: 1rem;
	text-decoration: none;
}

/* the following formats all the menu items in a menu proxy */

ul.menu.mc-component li
{
	font-family: 'Open Sans';
	text-decoration: none;
}

ul.menu.mc-component li:hover
{
	font-family: 'Open Sans';
	text-decoration: underline;
}

/*-------------------------------------------------------------------*/
/* RESPONSIVE LAYOUTS */
/*XX-Large Screen */

@media only screen and (min-width: 1280px)
{
	.hero-background
	{
		padding: 0rem 1.5rem;
		background-color: #134A82;
		height: 9rem;
		/* formatting and positioning for logo */
		background-image: url('../images/helpcentre/logo-school-spider.svg');
		background-repeat: no-repeat;
		/* position from left and top */
		background-position: 1.5rem 39%;
		/* all logos are set to the same height for consistency, i.e. 3.2rem */
		background-size: 20%;
		width: 100%;
	}
}

/*X-Large Screen */

@media only screen and (min-width: 1280px)
{
	.hero-background
	{
		padding: 0rem 1.5rem;
		background-color: #134A82;
		height: 9rem;
		/* formatting and positioning for logo */
		background-image: url('../images/helpcentre/logo-school-spider.svg');
		background-repeat: no-repeat;
		/* position from left and top */
		background-position: 1.5rem 39%;
		/* all logos are set to the same height for consistency, i.e. 3.2rem */
		background-size: 20%;
		width: 100%;
	}
}

/*Large Screen */

@media only screen and (max-width: 1240px) and (min-width: 1142px)
{
	.hero-background
	{
		padding: 0rem 1rem;
		background-color: #134A82;
		height: 9rem;
		/* formatting and positioning for logo */
		background-image: url('../images/helpcentre/logo-school-spider.svg');
		background-repeat: no-repeat;
		/* position from left and top */
		background-position: 1.5rem 39%;
		/* all logos are set to the same height for consistency, i.e. 3.2rem */
		background-size: 30%;
		width: 100%;
	}
}

/* STANDARD Screen */

@media only screen and (max-width: 1141px) and (min-width: 801px)
{
	.hero-background
	{
		padding: 0rem 1rem;
		background-color: #134A82;
		height: 9rem;
		/* formatting and positioning for logo */
		background-image: url('../images/helpcentre/logo-school-spider.svg');
		background-repeat: no-repeat;
		/* position from left and top */
		background-position: 1.5rem 39%;
		/* all logos are set to the same height for consistency, i.e. 3.2rem */
		background-size: 30%;
		width: 100%;
	}

	.i-want-to-menu-tile
	{
		width: 47vw;
	}

	.product-updates-menu-tile
	{
		width: 47vw;
	}

	.popular-topics-menu-tile
	{
		width: 47vw;
	}

	.mybox-left-menu-tile
	{
		width: 47vw;
	}

	.mybox-middle-menu-tile
	{
		width: 47vw;
	}

	.mybox-right-menu-tile
	{
		width: 47vw;
	}

	.home-hero__title2
	{
		font-size: 0.75rem;
	}

	.search-bar._Skins_home_search_bar.mc-component
	{
		margin-top: 1.875rem;
		margin-bottom: 0.275rem;
	}

	.menu-tiles__container
	{
		flex-direction: row;
	}
}

/*MEDIUM Screen*/

@media only screen and (max-width: 800px) and (min-width: 481px)
{
	.hero-background
	{
		padding: 0rem 1rem;
		background-color: #134A82;
		height: 9rem;
		background-image: url('../images/helpcentre/logo-school-spider.svg');
		background-repeat: no-repeat;
		background-position: 1.5rem 19%;
		background-size: 40%;
		width: 100%;
	}

	.i-want-to-menu-tile
	{
		width: 94vw;
	}

	.product-updates-menu-tile
	{
		width: 94vw;
	}

	.popular-topics-menu-tile
	{
		width: 94vw;
	}

	.mybox-left-menu-tile
	{
		width: 94vw;
	}

	.mybox-middle-menu-tile
	{
		width: 94vw;
	}

	.mybox-right-menu-tile
	{
		width: 94vw;
	}

	.home-hero__title2
	{
		display: none;
	}

	ul.nav-bar__navigation
	{
		display: none;
	}

	.search-bar._Skins_home_search_bar.mc-component
	{
		margin-top: 0rem;
		margin-bottom: 0rem;
	}

	.menu-tiles__container
	{
		flex-direction: column;
	}
}

/*@media only screen and (max-width: 767px) and (min-width: 481px) {
.search-bar._Skins_home_search_bar.mc-component
	{
		margin-top: -1rem;
		margin-bottom: 0rem;
}*/

/*SMALL screen*/

@media only screen and (max-width: 480px)
{
	.hero-background
	{
		padding: 0rem 1rem;
		background-color: #134A82;
		height: 9rem;
		background-image: url('../images/helpcentre/logo-school-spider.svg');
		background-repeat: no-repeat;
		background-position: 1.5rem 19%;
		background-size: 40%;
		width: 100%;
	}

	.i-want-to-menu-tile
	{
		width: 94vw;
	}

	.product-updates-menu-tile
	{
		width: 94vw;
	}

	.popular-topics-menu-tile
	{
		width: 94vw;
	}

	.mybox-left-menu-tile
	{
		width: 94vw;
	}

	.mybox-middle-menu-tile
	{
		width: 94vw;
	}

	.mybox-right-menu-tile
	{
		width: 94vw;
	}

	.menu-tiles__container
	{
		flex-direction: column;
	}

	.search-bar._Skins_home_search_bar.mc-component
	{
		margin-top: -3rem;
		margin-bottom: 0rem;
	}

	ul.nav-bar__navigation
	{
		display: none;
	}

	.home-hero__title2
	{
		display: none;
	}
}

/*SMALL screen*/

@media only screen and (max-width: 480px)
{
	.hero-background
	{
		padding: 0rem 1rem;
		background-color: #134A82;
		height: 9rem;
		background-image: url('../images/helpcentre/logo-school-spider.svg');
		background-repeat: no-repeat;
		background-position: 1.5rem 19%;
		background-size: 40%;
		width: 100%;
	}

	.i-want-to-menu-tile
	{
		width: 94vw;
	}

	.product-updates-menu-tile
	{
		width: 94vw;
	}

	.popular-topics-menu-tile
	{
		width: 94vw;
	}

	.mybox-left-menu-tile
	{
		width: 94vw;
	}

	.mybox-middle-menu-tile
	{
		width: 94vw;
	}

	.mybox-right-menu-tile
	{
		width: 94vw;
	}

	.menu-tiles__container
	{
		flex-direction: column;
	}

	.search-bar._Skins_home_search_bar.mc-component
	{
		margin-top: -3rem;
		margin-bottom: 0rem;
	}

	ul.nav-bar__navigation
	{
		display: none;
	}

	.home-hero__title2
	{
		display: none;
	}
}

/*Catching SMALL screen HEIGHT*/

/*@media only screen and (max-height: 695px) and (min-height: 386px){    
	ul.menu
    {
    line-height: 0.8em!important;
    }
    .i-want-to-menu-tile,
    .product-updates-menu-tile,
    .popular-topics-menu-tile,
    .mybox-left-menu-tile,
    .mybox-middle-menu-tile,
    .mybox-right-menu-tile
    {
    min-height: 75vh!important;
    max-height: 75vh!important;
    }
} 
@media only screen and (max-height: 385px){    
	ul.menu
    {
    line-height: 0.7em!important;
    }
    .i-want-to-menu-tile,
    .product-updates-menu-tile,
    .popular-topics-menu-tile,
    .mybox-left-menu-tile,
    .mybox-middle-menu-tile,
    .mybox-right-menu-tile
    {
    min-height: 100vh!important;
    max-height: 100vh!important;
    }
}*/