﻿.key-transactions,
.section-key-contacts-listing,
.section-key-contact-details,
.lifecycle-accordion-container	{display:none}

@media (max-width: 1280px) 
{

	header {padding: 20px 40px;}
	
	.page-content.popup			{width:100%; left: 50%; margin-left: -50%}
	.lifecycle-container		{transform: scale(0.7); left:50%; margin-left: -640px; transition: 0.2s ease-out; margin-top: 0px; }

	/* KEY TRANSACTIONS */
	.transations-listing .col-container	{margin-right: 0; width:calc(100% + 24px); max-width: none}
	
	/* KEY CONTACT DETAILS */
	.kc-details	{margin-left:0}
	
}

@media (max-width: 1200px) 
{
	/* HOME */
	.home-right	{background-size:90% auto}
    
}

@media (max-width: 1024px) 
{
	/* POPUP */
	ul.icon-nav.left			{left:30px;}
	.text-section-panel .inner	{padding:30px}
	
}

@media (max-width: 940px) 
{
	.supergraphic-small	{right:0}
}

@media (max-width: 890px) 
{
	
	main.wrapper			{height:auto; min-height: unset; background-size: auto; background-repeat: no-repeat;}
	main.wrapper:before	{background-image: linear-gradient(rgba(11,26,63,0), rgba(11,26,63,1)); position: absolute; bottom: 0; left:0; width:100%; height: 200px; display: block; content: '';}

	
	.lifecycle-container	{display:none;}
	
	/* LIFESCYCLE ACCORDION */
	.lifecycle-accordion-container	{display:block; position: relative; z-index: 1;}
	.wrapper.wrapper-mobile	{height:auto;}
	
	/* KEY TRANSACTIONS */
	.transations-listing .col-container	.col-5 {width:25%;}
	
}

@media (max-width: 768px) 
{
	

	
	/* HEADER */
	header					{padding:20px 40px;}
	.logo-container a img	{margin-right:20px;}
	.logo-container a h1	{font-size:24px;}	
	.supergraphic-small		{width:auto; height: 100%;}
	
	/* THREE COL POPUP */
	.text-section-panel						{width:100%;}
	.text-section-pop-in					{flex-direction:column}
	.text-section-panel .inner				{padding-left:20px; padding-right: 20px}
	.text-section-panel.two .inner			{padding-top:55px;}
	.text-section-panel.two ul.icon-nav		{top:0;}
	ul.icon-nav.left						{left:20px;}
	ul.icon-nav li a.icon-collapse			{transform: rotate(90deg)}
	.text-section-panel.one,
	.text-section-panel.two					{z-index:6}
	.text-section-panel.three				{transform:translateX(0) translateY(-100%);}
	.text-section-panel.three.open			{transform:translateX(0) translateY(0); z-index: 5}

	#text-section-one-copy.inner {padding-top:0;}
	.mobile-nav-panel-one {display:block;}
	
	#popup-breadcumbs {margin-top: 20px; }

}



@media (max-width: 660px) 
{
	/* KEY TRANSACTIONS */
	.transations-listing .col-container	.col-5 {width:33.333%;}
	
	/* KEY CONTACTS */
	.key-contacts-listing .col {flex: 0 0 33.33%; max-width: 33.33%;}
	
	
	/* KEY CONTACT DETAIL */
	.kc-details-top img		{width:120px;}
	.kc-details-top h2		{font-size:20px;}
	.kc-details-top p		{font-size:14px;}
	
}

@media (max-width: 500px) 
{

	.lifecycle-accordion-container	{padding:20px;}
	
	/* HEADER */
	header					{padding:20px;}
	.logo-container a h1	{font-size:20px;}
	.logo-container a img	{width:60px;}
	.logo-container a h1 strong	{display:block;}
	
	/* KEY TRANSACTIONS */
	.transations-listing .col-container	.col-5 {width:50%;}
	
	/* KEY CONTACTS */
	.key-contacts-listing .col {flex: 0 0 50%; max-width:50%;}

	.home-text img 	{width:280px; max-width: 100%;}

}
	
@media (max-width: 460px) 
{
	.page-content-top				{flex-direction: column-reverse; align-items:stretch}
	.page-content-top .icon-nav		{justify-content: flex-end;}
	.breadcrumbs					{padding-top:10px;}
	
}


	
@media (max-width: 420px) 
{
	/* HEADER */
	.logo-container a h1		{font-size:18px;}
	.logo-container a img		{width:50px; margin-right: 10px;}
	.logo-container a h1 strong	{display:block;}
	
	/* KEY CONTACT DETAIL */
	.kc-details-top		{display:block;}
	.kc-details-top img	{width:150px; margin-bottom: 15px;}
	.kc-details-top h2	{font-size:25px;}
	.kc-details-top p	{font-size:16px;}
	.plain-btn			{display:block; text-align: center}
	
	.panel-text {height: auto;}
	.transations-listing .col-container .col-5 {width: 100% !important;}

	
	
}

@media (max-width: 375px) 
{
    /* IPHONE 6 */
}

@media (max-width: 360px) 
{
	/* HEADER */
	.logo-container a img		{width:40px;}
	.logo-container a h1		{font-size:16px;}
}

@media (max-width: 320px) 
{
    /* IPHONE 5 */
}