/*
	(c)2020 - visuallizard.com

	General styles.
	Template, view, plugin and element specific, etc.
*/
/* !Media Queries ============================== */
@media only screen and (min-width: 1600px) {
	body:before { content: 'xx-large'; visibility: hidden; position: absolute; }

	.languages { right: calc(50vw - 33rem); }
}

/* !Media Queries ============================== */
@media only screen and (max-width: 1600px) {
	body:before { content: 'x-large'; visibility: hidden; position: absolute; }
	.site-header-container { flex-wrap: wrap; margin: 0 .5rem; }
	.site-title { margin: -10px 0 0 10px; width: 100%; max-width: 150px; min-width: 100px; align-self: flex-start; }
	.js .main-nav .nav-1 > .mycentre-link > a { right: 0; }
	.main-nav .nav-1 > li > a { padding: 1rem .5rem; }

	.mega-figure { margin-left: -100px; }
}

@media only screen and (max-width: 1000px) {
	body:before { content: 'large'; visibility: hidden; position: absolute; }

	.main-nav .nav-1 > li > a { font-size: .8rem; }

	.grid-item h3 { font-size: 17px; }

	.grid-item .item-desc { font-size: 14px; }
	.grid-item > .cover { padding: 0 .5em; }

	.grid-item.no-image > .cover { padding: .5em 1em;  }
	.grid-item.no-image h3 { font-size: 1.5em; margin: 0; }

	/* 	2020 */
	.featured-container { display: block; }
	.featured-container > div { width: 100%; }

	.featured-search { padding: 1rem; }
	.featured-search h1:only-child { font-size: 3em; }
	.featured-search h2 { font-size: calc(1.5em + 1vw) }
		.monitor { margin-bottom: 2rem; }
		.monitor::after { min-height: 40px; }
	.quicklinks-area { padding: 1rem 0; }


	.quicklinks .banner { margin: 0; }
	.quicklinks .banner-link,
	.featured-section .quicklinks .banner-link { padding: 1rem; }
	.quicklinks .banner-figure { max-width: 40px; }
	.quicklinks .banner-title { font-size: calc(.4em + 1vw); }
	.quicklinks .banner-subtitle { font-size: calc(.3em + 1vw); }
	main .quicklinks { flex-direction: row; }

	.footer-top h3:first-child { left: 0; }
}

@media only screen and (max-width: 800px) {
	body:before { content: 'medium'; visibility: hidden; position: absolute; }

	h2, .h2 { font-size: 1.75em; }
	h3, .h3 { font-size: 1.25em; }

	/* Modifier classes */
	.w5   { width: 50%; }
	.w10  { width: 50%; }
	.w15  { width: 50%; }
	.w20  { width: 50%; }
	.w25  { width: 50%; }
	.w30  { width: 50%; }
	.w33  { width: 50%; }
	.w35  { width: 50%; }
	.w40  { width: 50%; }
	.w45  { width: 50%; }
	.w50  { width: 100%; }
	.w55  { width: 100%; }
	.w60  { width: 100%; }
	.w65  { width: 100%; }
	.w66  { width: 100%; }
	.w70  { width: 100%; }
	.w75  { width: 100%; }
	.w80  { width: 100%; }
	.w85  { width: 100%; }
	.w90  { width: 100%; }
	.w95  { width: 100%; }
	.w100 { width: 100%; }



	.container { padding: 0 1rem; }

	.default > .container,
	.default .site-header,
	.default main { display: block; float: none; padding: 0; }

	.site-header.site-header { padding: 0; }
	.site-header-container.site-header-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: static; padding: 10px; }
	.site-title.site-title { margin: 0 auto 0 0; }
	.site-title.site-title > a > img { width: 150px; margin: 0; }

	.site-header-container > button { margin-left: 1em;}
	.search-toggle { margin: 0;}
	.search-toggle,
	.nav-toggle { width: 32px; height: 32px; min-width: 24px; min-height: initial; margin-bottom: 0; color: #333; padding: 5px; border: none; z-index: 1001; background: transparent; border-radius: 4px; }
	.search-toggle:hover,
	.nav-toggle:hover { color: #fff; background-color: #001135 !important; }
	.js .nav-on .search-toggle,
	.js .nav-on .nav-toggle { color: #fff; }

	.mobile-nav-toggle { width: 32px; height: 42px; min-width: 0;  margin: 0; color: #fff; padding: 2px; border: none; background: transparent; transition: all .2s; }

	/* MOBILE nav */
	.main-nav { z-index: 100; background: #001135; color: #fff; }
	.main-nav .nav-list,
	.main-nav .sub-list { width: 100%; max-height: 1999px; transition: max-height .2s ease-in; }
	.main-nav .nav-item { border-top: 1px solid rgba(255,255,255,.3); display: flex; flex-wrap: wrap; overflow: hidden; }
	.main-nav .nav-link { -webkit-tap-highlight-color: transparent; width: 100%; }
	.main-nav .nav-link:hover { opacity: .8; }
	.main-nav .nav-item:hover > .nav-link { color: inherit; }
	.main-nav .nav-item[data-nav-status="active"] > .nav-link { color: rgba(255,255,255,.5); }

	.main-nav.main-nav .mobile-nav-toggle + .nav-link { width: calc(100% - 32px); padding: 10px 10px 10px 5px; -webkit-tap-highlight-color: transparent;  }
/* 	.main-nav .type-node > .mobile-nav-toggle:after { display: block; content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; outline: 1px solid red; width: 100%; height: 100%; } */

	.main-nav.main-nav .nav-1 { display: block; border-bottom: 1px solid rgba(255,255,255,.3); }
	.main-nav.main-nav .nav-1 li a { font-size: 16px; color: #fff; padding: 10px 10px; }
	.main-nav.main-nav .nav-1 > li > a {  font-weight: bold; color: #fff; text-align: left; text-transform: none; }

	.main-nav li > .mega { visibility: visible; opacity: 1; transform: scale(1); position: relative; top: auto; left: auto; background: transparent; box-shadow: none; min-height: 0; padding: 0;  }
	.main-nav .mega-container { padding: 0; }
	.main-nav .mega-figure { display: none; }
	.main-nav .mega-container > .sub-list { width: auto; float: none; margin-left: 2em; }

	.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-1 > li > a { margin-top: 0; }
	.main-nav .nav-1 > li:hover > a { background-color: transparent; }

	.main-nav .nav-2 > li { padding: 0; padding-left: 1.5em; 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 { display: block; position: absolute; left: -100%; left: -100vw; top: 0px; width: 100%; width: 100vw; height: auto; min-height: 100vh; padding: 3.75em 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%); }
	.js .nav-on main,
	.js .nav-on .site-footer { max-height: 0; overflow: hidden; /* hide content when navigation is open */ }

	.main-nav .toggle-off > .sub-list,
	.main-nav .toggle-off > .nav-list { max-height: 0; transition-timing-function: linear; transition-duration: .1s; }

	.main-nav.main-nav .toggle-on > .sub-list,
	.main-nav.main-nav .toggle-on > .nav-list,
	.home .main-nav .mega-container > .sub-list { transition: max-height .2s ease-in; position: relative; top: auto; left: auto; padding: 0 0 .5rem; visibility: visible; opacity: 1;  background-color: transparent; width: 100%; min-height: 0; float: none; transform: none; }

	.home .main-nav #navigation-1-1 { display: block; } /* Display Home page link */

	.main-nav .toggle-on > .mobile-nav-toggle { -webkit-transform: rotate(90deg); transform: rotate(90deg);  }

	.js .main-nav .nav-1 > .mycentre-link > a { position: static; top: auto; color: #001135; }


	/* 	Featured */
	.featured-banners .banner-text { width: 50%; }
	.featured-banners .slick-dots { text-align: left; margin-left: 1em; }

	.featured-banners .banner-title { font-size: calc(1em + 1.7vw); }
	.slick-dots > li > button { width: 10px; height: 10px; }

	.customer-service .main-region { display: block; }
	.customer-service .main-region .column { flex-basis: 100%; }
	.customer-service .main-region .column + .column { margin-left: 0; }

	.page-titles { padding: .5rem 0; top: 0; }
	.grand-title { font-size: 1em;}
	.parent-title { font-size: 2em; font-size: calc(2em + 2vw);  line-height: 1.1; }

	main { margin: 1em 0 2em; }
	.main-container { flex-direction: column; }

	.sidebar,
	.sideleft,
	.sideright { display: none; float: none; width: auto; padding: 0; }
	.primary { float: none; width: 100%; padding: 0 0; border: none; }
	.content { padding: 10px; }

	.documents-list .card { width: 46%; }

	.partners-banners .banner-img { height: auto; width: 100%; max-width: 200px; }

	.knowledge-base .main-container { flex-direction: column-reverse; }
	.knowledge-base .sideleft {  }
	.knowledge-base .sideleft { display: block; width: auto; display: flex; flex-direction: column; }
	.knowledge-base .sideleft .kb-search-form { order: 1; margin-bottom: 1rem; }
	.knowledge-base .primary { padding: 0; }
	.kb-nav { margin-right: 0; margin-bottom: 2rem; }

	.breadcrumbs { flex-wrap: wrap; }

	/* 	Events */
	.filter-form .button b { display: none; }
	.events-date-link { width: 80px; height: 80px; min-width: 80px; padding: .5rem; margin-right: 1rem; }
	.events-item b { font-size: 1.2rem; }
	.events-item span { font-size: 1rem; }
	.events-details .events-title { font-size: 1em; margin-bottom: .25em; font-weight: bold; }
	.events-details .events-brief { font-size: small; }
	.events-details .events-brief p { margin-bottom: .25em; }
	.events-details .message { position: static; left: auto; width: auto; }

	.event-full .event-figure + .event-dates { font-size: 1rem; }
	.event-tickets,
	.event-tickets form { flex-direction: column; padding-left: 0; }
	.event-tickets form .button { margin-top: 1rem; }

	.attendee-list { margin-left: 0; }
	.attendee-item [class^="input-text"],
	.attendee-item [class^="input-radio"],
	.attendee-item [class^="input-select"] { padding-left: 0; }
	.cc_form { display: block; }


	.footer-contact-form form { display: block; max-height: none; }
	.footer-contact-form [class^="input-"] { width: 100%; }
	.site-footer .nav-1 { margin-top: 0; }
	.site-footer .nav-link { font-size: 1em; padding: .25em .25em; }
	.accessibility-statement { padding-left: .25em; margin-top: -.5em; line-height: 1.1; }
	.footer-bottom { padding: 20px 0; }
	.footer-bottom-left { width: 55%; }
	.footer-bottom-right { width: 45%;  padding-left: 1em; }
	.footer-contact-address .cke > .c2 { width: auto; float: none; }
	.footer-contact-address .cke > .c2 > :last-child { margin-bottom: 0; }
	.footer-contact-address img { display: block; margin: 0 auto; max-width: 80px; }

	.mfp-close-btn-in .mfp-close { top: .25em; right: 1.25em; }

	.inline-block + .inline-block,
	.inline-block + input[type="hidden"] + .inline-block { padding-left: 0; }
}


@media only screen and (min-width: 600px) {

	/* 	layout-type 1 */

	.layout-type-1 .grid-item:nth-child(4) { z-index: 1; width: 65%; }
	.layout-type-1 .grid-item:nth-child(6) { z-index: 1; padding-top: 48%; }

	.layout-type-2 .grid-item:nth-child(4) { z-index: 1; width: 65%; }

	.layout-type-3 .grid-item:nth-child(4) { z-index: 1; padding-top: 48%; }
	.layout-type-3 .grid-item:nth-child(3) { z-index: 1; width: 65%; left: auto; right: 0;}

	.layout-type-4 .grid-item:nth-child(3) { z-index: 1; width: 65%; left: auto; right: 0;}
	.layout-type-4 .grid-item:nth-child(4) { z-index: 1; width: 65%; }

	.layout-type-5 .grid-item:nth-child(1) { z-index: 1; width: 65%; }
	.layout-type-5 .grid-item:nth-child(4) { z-index: 1; width: 65%; }
	.layout-type-5 .grid-item:nth-child(6) { z-index: 1; padding-top: 48%; }

	.layout-type-6 .grid-item:nth-child(4) { z-index: 1; padding-top: 48%; }
}

@media only screen and (max-width: 600px) {
	body:before { content: 'small'; visibility: hidden; position: absolute; }

	/* Modifier classes (should always be the last) */
	.w5   { width: 100%; }
	.w10  { width: 100%; }
	.w15  { width: 100%; }
	.w20  { width: 100%; }
	.w25  { width: 100%; }
	.w30  { width: 100%; }
	.w33  { width: 100%; }
	.w35  { width: 100%; }
	.w40  { width: 100%; }
	.w45  { width: 100%; }
	.w50  { width: 100%; }
	.w55  { width: 100%; }
	.w60  { width: 100%; }
	.w65  { width: 100%; }
	.w66  { width: 100%; }
	.w70  { width: 100%; }
	.w75  { width: 100%; }
	.w80  { width: 100%; }
	.w85  { width: 100%; }
	.w90  { width: 100%; }
	.w95  { width: 100%; }
	.w100 { width: 100%; }


	.news.view .primary,
	.news.archiveByYear .primary { display: block; }

	.news.view .main-region,
	.news.archiveByYear .news-list { width: 100%; }

	.archive-block { width: 100%; padding-left: 0; }


	/* ! Content module columns */
	.cke > .c2,
	.cke > .c3,
	.cke > .c4,
	.cke > .c5,
	.cke > .c6 { float: none; margin-left: 0; }

	.cke > .c2,
	.cke > .c3,
	.cke > .c4,
	.cke > .c5,
	.cke > .c6 { width: auto; }


	.grid-items {
		position: relative;
		height: auto;
		padding-top: 0;
		display: flex;
		flex-direction: column;
	}
	.grid-item { background-color: transparent; }

	.grid-item.grid-item {
		display: block;
		width: 100%;
		height: auto;
		position: relative;
		left: auto; top: auto;
		padding: 0;
		margin-bottom: 1em;

		background-size: 50% auto;
		background-position: left center;
		padding-left: 50%;
		min-height: 40vw;
	}

	.grid-item.no-image { padding-left: 0; background-size: cover; }

	.grid-item > .cover {
		position: static;
		top: auto;
		left: auto;
		margin: auto;
		min-height: 0;
		padding: .5em 0;
		background: none;
	}

	.grid-item > a {
		position: relative;
		top: auto;
		left: 0;
		margin: auto;
		padding: .5em;
	}
	.grid-item h3 {
		margin: 0 .8em .5em;
		text-align: left;
		min-height: 0;
	}

	.item-desc { display: none; }


	.layout-type-1 .grid-item:nth-child(3),
	.layout-type-1 .grid-item:nth-child(5) { display: none; }

	.layout-type-2 .grid-item:nth-child(5) { display: none; }

	.layout-type-3 .grid-item:nth-child(1),
	.layout-type-3 .grid-item:nth-child(2) { display: none; }

	.layout-type-4 .grid-item:nth-child(2),
	.layout-type-4 .grid-item:nth-child(5) { display: none; }

	.layout-type-5 .grid-item:nth-child(2),
	.layout-type-5 .grid-item:nth-child(3),
	.layout-type-5 .grid-item:nth-child(5) { display: none; }

	.layout-type-6 .grid-item:nth-child(1) { display: none; }

	.back-to-top { right: 1em; }


	/* Webinars */
	.webinar-item { width: 100%; }

	/* 	Quicklinks */
	.quicklinks { display: none; }

	/* 	footer  */
	.footer-top h2 { font-size: 26px; }
	.footer-bottom { }
	.footer-bottom-left,
	.footer-bottom-right {  }
}