﻿.mobile-nav,
.hamburger		{display: none}

@media (max-width: 1140px) 
{
	/* INFOGRAPHIC */
	.infographic	{transform: scale(0.8); position: relative; left: 50%; margin-left: -545px; max-width: unset}
}

@media (max-width: 1100px) 
{
    /* HEADER */
	header ul li	{margin-left: 15px; font-size: 12px;}
	
	/* TEXT SECTION */
	.text-two-col .text-left {width: calc(100% - 660px);}
	
}

@media (max-width: 1000px) 
{
    /* HEADER */
	header		{padding: 20px 0; transition: 0.3s ease-out}
	header nav	{display: none}
	.hamburger	{display: block; margin-left: 25px; flex-shrink: 0}
	
	/* TEXT SECTION */
	.text-two-col h2			{margin-bottom: 0.3em;}
	.text-two-col .cols			{flex-direction: column}
	.text-two-col .text-left	{width:100%; padding-bottom: 0;}
	.text-two-col .text-right	{width:100%; padding-top: 0;}
	
	/* CONTENT PAGE HEADER */
	.content-hero-options .btn-chevron p	{display: none}
	.content-hero-options .btn-chevron p.mb	{display: flex; font-weight: 700}
	
	/* LISTING STYLE 2 */
	.accordion .cols	{flex-wrap: wrap; justify-content: center}
	.accordion .col-4	{max-width:306px; width: 50%;}
	
	/* MOBILE NAV */
	.mobile-nav				{position: fixed; left: 0; top:0; width:100%; height: 100%; background-color: #000000db; z-index: 999999; overflow-y: auto;}
	.mobile-nav	.inner		{padding:60px 0;}
	.mobile-nav ul			{font-size: 16px; font-weight: 700; text-transform: uppercase; list-style: none; width: 100%;}
	.mobile-nav ul ul		{font-size: 14px; font-weight: 400; display: none; padding-bottom: 15px;}
	.mobile-nav ul ul ul	{font-size: 13px; font-weight: 400; display: none;}
	
	.mobile-nav.active		{display: block;}
	
	.mobile-nav ul li				{border-top:1px solid rgba(255,255,255,0.2); position: relative;}
	.mobile-nav ul li.active a		{color: #E62612;}
	.mobile-nav ul li.dd a			{display: flex; justify-content: space-between;}
	.mobile-nav ul li.dd span		{width:9px; height: 18px; background-image: url(/_assets/icon-chev.svg); background-size: 9px 18px; background-repeat: no-repeat; background-position: center; content: ''; transition: 0.3s ease-out; position: absolute; right:25px; top:8px; padding: 15px; background-color: #333333}
	.mobile-nav ul li.dd span.active	{transform: rotate(90deg)}
	
	.mobile-nav ul li a			{color:#ffffff; text-decoration: none; padding:15px 40px; display: flex;border-top: 1px solid #E62612;border-bottom:0;}
	.mobile-nav ul li:last-of-type > a {border-bottom:1px solid #E62612;}
	.mobile-nav ul ul li		{border:none}
	.mobile-nav ul ul li a		{padding: 12px 50px;border-top: 1px solid #282828;}
	.mobile-nav ul ul li:last-of-type > a {border-bottom:1px solid #282828;}
	.mobile-nav ul ul ul li a	{padding-left: 60px; color:rgba(255,255,255,0.75)}
	.mobile-nav ul ul li.dd span{top:9px;right:30px;padding:10px;background-size: 9px 14px;}
	
	.mobile-nav	.close			{width:20px; height: 20px; position: absolute; right:30px; top:27px; background-image: url(/_assets/icon-close.svg); display: block;background-size: 21px 20px;background-repeat: no-repeat;}
	
	.dropdown-container .close	{display: none}
	
}

@media (max-width: 900px) 
{
	/* INFOGRAPHIC */
	.infographic			{margin-top:40px; transform: scale(1); position: relative; left: auto; margin-left: auto; max-width: 100%; background-image: none; display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; height: auto;}
	.infographic .marker	{width:calc(50% - 20px); margin:10px; position: relative; left: auto !important; right:auto !important; top:auto !important; bottom: auto !important; border:2px solid #000000; border-radius: 100px; padding: 0 !important; padding-left: 45px !important; justify-content: space-between; flex-direction: row !important}
	
	svg.outline				{display: none}

	/* MARKER TECHNOLOGY */
	.marker.technology-marker 				{border-color:#E1CD2C}
	.marker.technology-marker:hover			{background-color:#fcfaea}
	.marker.technology-marker.active		{background-color:#E1CD2C}

	/* MARKER TECHNOLOGY */
	.marker.demographics-marker 			{border-color:#EE701F}
	.marker.demographics-marker:hover		{background-color:#fdf1e9}
	.marker.demographics-marker.active		{background-color:#EE701F}

	/* MARKER COVID */
	.marker.covid-marker					{border-color:#D82630}
	.marker.covid-marker:hover				{background-color:#fbeaeb}
	.marker.covid-marker.active				{background-color:#D82630}

	/* MARKER GLOBALISATION */
	.marker.globalisation-marker			{border-color:#DE1683}
	.marker.globalisation-marker:hover		{background-color:#fce8f3}
	.marker.globalisation-marker.active		{background-color:#DE1683}

	/* MARKER SOCIAL */
	.marker.social-marker					{border-color:#96C225}
	.marker.social-marker:hover				{background-color:#f5f9ea}
	.marker.social-marker.active			{background-color:#96C225}

	/* MARKER ROLE */
	.marker.role-marker						{border-color:#1AAB9E}
	.marker.role-marker:hover				{background-color:#e9f7f5}
	.marker.role-marker.active				{background-color:#1AAB9E}

	/* MARKER SUSTAINABILITY */
	.marker.sustainability-marker			{border-color:#1BA7E2}
	.marker.sustainability-marker:hover		{background-color:#e9f6fc}
	.marker.sustainability-marker.active	{background-color:#1BA7E2}

	/* MARKER MIGRATION */
	.marker.migration-marker 				{border-color:#8A74B3}
	.marker.migration-marker:hover			{background-color:#f4f1f8}
	.marker.migration-marker.active			{background-color:#8A74B3}
}

@media (max-width: 800px) {
	.calendar-container .calendar-item				{width: 48%;}
}


@media (max-width: 760px) 
{
    footer .inner		{flex-direction: column; justify-content: center; align-items: center;}
    .footer-nav {margin: 40px 0;}
    
    footer ul li {margin-left: 10px; padding-right: 10px; text-align: center;}
    
    footer .inner {padding: 0 10px;}

	
    
}

@media (max-width: 730px) 
{
	/* INFOGRAPHIC */
	.infographic			{flex-direction: column; align-items: center}
	.infographic .marker	{width:100%; max-width:414px; margin: 8px 0}
}
	
@media (max-width: 630px) 
{
	
}

@media (max-width: 555px) 
{
	/* LISTING STYLE 2 */
	.accordion .accordion-item h3	{font-size: 20px;}
	.accordion .col-4				{max-width:350px; width: 100%;}
	
	/* LISTING PANELS */
	.listing-panels					{padding: 20px 0 40px}
	.listing-panels .cols			{flex-direction: column; align-items: center}
	.listing-panels .cols .col-3	{width:500px; max-width: 100%;}

	/* CONTENT HERO OPTIONS */
	.content-hero-options-22		{width:90%;}

	.calendar-container .calendar-item				{width: 98%;}
}

@media (max-width: 414px) 
{
    /* IPHONE 6+, GOOGLE NEXUS 5X & GOOGLE NEXUS 6P */
}

@media (max-width: 400px) 
{
	/* FOOTER */
	footer				{padding: 20px 0}
	footer .inner img	{margin: 20px 0}
}

@media (max-width: 375px) 
{
	/* INFOGRAPHIC */
	.infographic .marker		{padding-left: 25px !important}
	.infographic .marker img	{width:136px;}
	.infographic .marker p		{font-size: 16px;}
}

@media (max-width: 320px) 
{
    /* IPHONE 5 */
}