/*
	(c)2021 - visuallizard.com

	Responsive styles using Media Queries
*/

body:before {
	visibility: hidden; position: absolute;
}

/* Larger Desktop sizes (more than 1400px): */
@media only screen and (min-width: 1400px) {
	body:before { content: 'x-large'; }

	.main-nav .nav-1 { font-size: 16px; }
	.rising-container .special { margin-top: -4rem; }
}

/* Desktop sizes (up to 1400px): */
@media only screen and (max-width: 1400px) {
	body:before { content: 'large'; }
	body { font-size: 20px; }

	.social-block.head { display: none; }
}

/* Medium Tablet sizes (up to 800px):  usually when mobile nav mode kicks in */
@media only screen and (max-width: 800px) {
	body:before { content: 'medium'; }
	body { font-size: 16px; }

	.container { padding: 0 1rem; }

	.elect-bar p { font-size: 12px; }
	.elect-bar p > * { display: block; margin: 0; }

	/* 	Site Header */
	.site-header { padding: 0; }
	.site-header-container { display: flex; justify-content: space-between; }
	.site-title { margin: 2rem auto; width: 100%; max-width: 400px; }
	/* .site-title-img { max-height: 80px; } */

	.search-form { float: none; margin: 1rem; display: none; }

	.social-block.head { display: none; }

	/* MOBILE nav */
	/* .main-nav { z-index: 100; background: #123; color: #fff; font-size: 18px; box-shadow: none; }
	.main-nav .nav-list,
	.main-nav li > .sub-list { width: 100%; max-height: 9999px; transform: scale(1); transition: max-height .2s ease-in; background: transparent; margin: 0 0 1rem; padding: 0; position: relative; top: auto; left: auto; opacity: 1; visibility: visible; border: none; box-shadow: none; }
	.main-nav .nav-item { border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; overflow: hidden; }
	.main-nav .nav-link, .main-nav .nav-1 > .nav-item > .nav-link { -webkit-tap-highlight-color: transparent; width: 100%; border: none; padding-right: 0; }
	.main-nav .nav-link:hover { opacity: .8; }
	.main-nav .nav-item:hover > .nav-link { color: inherit; border: none; } */

	.t-home  .main-nav { order: -1; }
	.main-nav { order: 1; width: 100%; margin: 2rem 0; }
	.main-nav .nav-1 { display: flex; width: 100%; font-size: 12px;  }
	.main-nav .nav-1 > .nav-item[data-nav-status="has-active"] > .nav-link,
	.main-nav .nav-1 > .nav-item[data-nav-status="active"] > .nav-link,
	.main-nav .nav-1 > .nav-item:hover > .nav-link { }

	.main-nav .nav-1 { }
	.main-nav .nav-1 > li { margin: 0 auto .25rem; }
	.main-nav .nav-1 li a {  padding: .5rem .5rem; }
	.main-nav .nav-1 > li > a {  }

	.main-nav .has-sub > .nav-link::after { content: none; }

	.main-nav .sub-list .sub-list { left: auto; display: block; visibility: visible; opacity: 1; transform: scale(1); left: auto; position: static; top: auto; margin: 0; padding: 0; }

	.main-nav .nav-2 { /* text-align: center;  */}
	.main-nav .nav-2 > li { padding: 0; position: relative; }
	.main-nav .nav-2 li a { border-bottom: none; }

	.main-nav li > .nav-3 > li { padding-left: 1.5em; }
	.main-nav li > .nav-4 > li { padding-left: 2.5em; }
	.main-nav li > .nav-5 {  }

	/* .js         .main-nav { max-height: 100vh; display: block; position: absolute; left: -100%; left: -100vw; top: 0px; width: 100%; width: 100vw; height: auto; min-height: 100vh; padding: 4em 10px 10px; margin: 0; overflow: hidden; transition: transform .2s ease-in;  z-index: 1000; }
	.js .nav-on .main-nav { max-height: none; transform: translateX(100%); }

	.nav-toggle { width: 32px; height: 32px; min-width: 0; margin: 1rem 0;  color: inherit; padding: 0; border: none; z-index: 1001; background: transparent; transition: color .2s; flex-shrink: 0; }
	.js .nav-on .nav-toggle,
	.js .nav-on .nav-toggle:hover { color: #fff; } */

	.js .nav-on main,
	.js .nav-on .site-footer { max-height: 0; overflow: hidden; /* hide content when navigation is open */ }


	/* 	Featured banners */
	.slick-dots { bottom: 0; }
	.banner-container { padding: 2% 4%; }

	.featured-banners .banner-img { min-width: 200px; object-fit: unset; min-height: unset; }
	.featured-banners .banner-text { max-width: 100%; }
	.featured-banners .banner-container{ position: static; padding: 2rem 7% 2rem; }
	.featured-banners .banner-img[src*='banner-5'] { transform: translateX(13%); /* adjustment for logo centring for MTC banner */ }
	.featured-banners .button { border: 1px solid #fff; }


	.brands { margin-bottom: 1em;  }
	.brands .banner { padding: 0 2vw 1em; }
	.brands .slick-arrow { top: auto; bottom: -.5rem; transform: translateX(-1rem); }

	/* Footer */
	.social-block.full { max-width: 90%; }

	.footer-title { max-width: 80%; margin: 0 auto 1rem; }
	.footer-nav { margin: 1rem auto; text-align: center;  }
	.footer-nav .nav-item { margin: 0;  }

	/* 	General styles */

	.cke > .c2,
	.cke > .c2.c-first,
	.cke > .c2.c-last,
	.cke > .c3,
	.cke > .c4,
	.cke > .c5,
	.cke > .c6 { float: none; margin-left: 0; width: auto;  }

	.p-metis-rising .c2.c-first,
	.p-metis-rising .c2.c-last  {  }

	.region-row { display: block; }
	.region-cell { padding: 0; }

	.flex { display: block; }
	.flex > div + div { margin: 0 0 1em 0; }

	h1, .h1 { font-size: 35px; }
	h2, .h2 { font-size: 26px; }
	h3, .h3 { font-size: 18px; }

	table { font-size: 12px; }

	/* Forms */
	.fm-form [type="url"],
	.fm-form [type="tel"],
	.fm-form [type="text"],
	.fm-form [type="date"],
	.fm-form [type="email"],
	.fm-form [type="number"],
	.fm-form [type="password"],
	.fm-form select,
	.fm-form textarea { -webkit-appearance: none; }

	.fm-form [type="date"] {  min-height: 46px; }
	.fm-form [class^="input-"] { width: 100%; }

	.button { font-size: 1rem; min-width: 0; }
	.button.large { font-size: 100%;  margin-left: 0; margin-right: 0; }


	.pagination-links { font-size: 16px; }
	.pagination-links li:not([class]) { display: none; }

	.img-left,
	.img-right { float: none; margin-left: 0; margin-right: 0; display: block; }


	/* 	Modules */

	/* 	Toggles */
	.toggle { right: 1rem; top: .85rem; width: 1.5rem; height: 1.5rem; }
	.toggle-head {padding: .5rem 3rem .5rem 1rem; }
	.toggle-head > .toggle-title { font-size: 18px; }
	.is-toggle-on .toggle-details { padding-left: 0; padding-right: 0; }


	/* 	Staff */
	.staff-item { width: 45%; min-width: 0; }


	/* 	Documents */
	.document-item { width: 45%; }



	/* Specifics Items */

	.rising-container .special .text-svg,
	.t-home .site-header .special .text-svg { max-width: 100%; }

	.t-home .site-header { background-position: 30% 0; }
	.t-home .cta { font-size: 100%; }

	.home-photo:first-of-type { margin-top: -3rem; }

	.checklist { padding: 1rem; }
	.checklist h2 { font-size: 1.5rem; }

	.checklist-intro > .cke > .c1 > h2 { text-align: center; }
	.checklist-intro > .cke > .c1 > h2 img { max-height: 20px; width: auto; margin: .5rem auto; display: block; }


	/* promise */
	.promise-items-header { margin-top: 2rem; flex-direction: column; }
	.promise-items-header > * { width: 100%; font-size: 1rem; }
	.promise-items { margin-bottom: 0; }

	/* social */
	.social-title { font-size: 16px; }

	/* flip columns on Get Involved page to avaid social blockes together andto promote contact form */
	.p-get-involved .cke { display: flex; flex-direction: column; }
	.p-get-involved .cke > .c2.c-first { order: 1; }
}

/* Small Mobile sizes (up to 480px): */
@media only screen and (max-width: 560px) {
	body:before { content: 'small'; }
	/* body { font-size: 16px; } */

	.main-nav { flex-direction: column; }
	.social-block.head { display: flex; margin-top: 1rem; }
	.social-block.head .social .icon { width: 2rem; height: 2rem; }
	.main-nav .nav-1 { display: flex; flex-direction: column; margin: 0; font-size: 20px; margin-bottom: 2rem; }
	.t-home .main-nav .nav-1 { font-size: 14px; }

	/* 	News */
	.article-item  { width: 100%; }

	/* 	Events */
	.event-item { width: 100%; }


	/* Overlay Items */
	.gl-overlay-item { max-width: 100%; }


	.footer-nav .nav-list { flex-direction: column; }
	.footer-extra { flex-direction: column; text-align: center;  }
	.footer-extra .social { justify-content: center; margin-bottom: 1.5rem; }
}