.polygon-mb,
.hamburger  {display: none}

/* IE10+ SPECIFIC STYLES GO HERE. IE10+ NO LONGER SUPPORT CONDITIONAL STATEMENTS IN THE HEAD OF A FILE */ 
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  

}

@media (max-width: 1800px) 
{
    .what-we-do .picture-mask img   {width: 1000px;}
}

@media (max-width: 1400px) 
{
}
    
@media (max-width: 1200px) 
{
    /* WHO WE ARE */
    .wwa-text   {width: 55%;}
    
    /* WHAT WE ARE ABOUT */
    .wwaa-text  {width: 70%;}

    /* WHAT WE DO */
    .wwd-text   {width: 78%;}
    
    /* CONTACT */
    .contact-form   {width: 58%}
    
    /* FOOTER */
    footer nav  {display: none}

    
}

@media (max-width: 1170px) 
{
    /* HEADER */
    header .inner       {padding: 0}
    header .logo svg,
    footer a.logo svg   {width: 250px;}
    header nav ul       {font-size: 16px;}
    
    footer  {padding-left: 40px; padding-right: 40px;}
}

@media (max-width: 1024px) 
{
    h2  {font-size: 75px;}
    
    /* HEADER */
    header,
    footer                  {padding-left: 25px; padding-right: 25px;}
    header nav ul li:after  {margin: 0 5px 0 2px;}
    
}

@media (max-width: 920px) 
{
	
	/* MOBILE NAV */
	.hamburger 						{width: 35px; height: 22px; flex-shrink: 0; z-index: 50; margin: 0; cursor: pointer; position: absolute; right: 30px; top: 7px; display: block}
	.hamburger span 				{width: 100%; display: block; height: 4px; background-color: #ffffff; position: absolute; top: 0; left: 0; transition: 0.2s ease-out; border-radius: 3px;}
	.hamburger span:nth-child(1) 	{}
	.hamburger span:nth-child(2) 	{top: 9px;}
	.hamburger span:nth-child(3) 	{top:auto; bottom: 0;}

	.hamburger.open 	 				{position: fixed; right: 55px; top: 30px;}
	.hamburger.open span				{background-color: #ffffff !important}
	.hamburger.open span:nth-child(1) 	{top: 7px; transform: rotate(45deg) scaleX(-1);}
	.hamburger.open span:nth-child(2) 	{opacity: 0; transform: scale(0)}
	.hamburger.open span:nth-child(3) 	{top: 7px; transform: rotate(-45deg) scaleX(-1);}
    
    header nav ul				{font-size: 22px; flex-direction: column; width: 100%; position: relative; z-index: 5}
	header nav ul li			{margin: 0; width: 100%; padding: 10px 0 15px; font-size: 3vw;}
	header nav ul li a			{display: block; text-align: center; padding: 5px 0; color: #ffffff !important}
	header nav ul li a:hover	{color: var(--orange) !important;}
	header nav ul li:after,
    header nav ul li a:after    {display: none}
	header nav ul li:hover ul	{}
    
    header nav			{animation:none; position: fixed; transform: translateX(-100%); opacity: 0; visibility: hidden; left: 0; top: 0; width: 100%; display: flex; height: 100dvh; background-color: var(--brown); justify-content: center; align-items: flex-start; padding-top: 100px; overflow-y: auto}
	header nav.open		{opacity: 1; transform: translateX(0); visibility: visible; transition: var(--smooth)}
    
    header.fixed .hamburger span    {background-color: var(--brown);}    
    
    header nav .polygon-mb      {display: block; position: absolute; left: 0; top: 0; height: 100%; background-color: var(--orange); opacity: 0.15; transform: translateX(-100%);}
    header nav.open .polygon-mb {animation: 1s slidein 0s ease-in-out forwards;}
    
    .polygons-nav   {position: absolute; inset: 0; overflow: hidden; }
    
    @keyframes slidein {
        
        to  {transform: translateX(100%);}
        
    }
    
}

@media (max-width: 768px) 
{
    /* HERO SECTION */
    .hero-section .polygon  {height: 100%;}
    
    .inner  {padding: 0 30px; position: relative;}
    
    .contact,
    .projects,
    .what-we-do,
    .who-we-are,
    .what-we-are-about  {min-height: auto; padding: 0; flex-direction: column-reverse;}
    
    .wwd-text,
    .wwaa-text,
    .wwa-text   {position: relative; z-index: 5; padding: 50px 0; width: 100%;}
    
    .polygon    {width: 768px; left: 50%; margin-left: 0; height: 620px;}
    .polygons   {position:relative; width: 100%; height: 620px;}
    
    /* WHO WE ARE */
    .who-we-are             {}
    .who-we-are .polygons   {background-color: var(--orange)}
    .who-we-are .polygon-1  {margin-left: -308px; z-index: 3}
    .who-we-are .polygon-2  {margin-right: -730px; z-index: 2}
    
    .who-we-are .polygon-mb {display: block; margin-left: 38px; bottom: 0; top: auto}
    
    /* WHAT WE ARE ABOUT */
    .what-we-are-about .polygons     {background-color: var(--orange)}
    .what-we-are-about .polygon-mb   {display: block; margin-left: 38px; bottom: 0; top: auto}
    .what-we-are-about .picture-mask {margin-left: -307px;}
    .what-we-are-about .polygon-2    {margin-right: -461px;}
    .what-we-are-about .polygon-1    {margin-left: -729px; background-color: var(--orangeLight)}
    
    /* WHAT WE DO */
    .wwd-text ul              {margin-left: 0}
    .what-we-do .polygon-mb   {display: block; margin-left: 38px; bottom: 0; top: auto}
    .what-we-do .picture-mask   {margin-left: -308px;}
    .what-we-do .polygon-1      {margin-left: -720px; background-color: var(--orange)}
    
    /* REPUTATION */
    .reputation-section         {overflow: hidden; background-color: var(--brown); height: 400px; display: flex; align-items: center}
    .reputation-section:after   {height: 620px; width: 768px; right: 50%; margin-right: -175px; left: auto; clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%); top:50%; transform: translateY(-50%); background-color: rgba(0,0,0,0.5)}
    
    /* PROJECTS */
    .projects               {padding:60px 0 80px 0;}
    .projects .polygon-1    {top: auto; bottom: 0}
    
    /* CONTACT */
    .contact        {padding: 80px 0}
    .contact-form   {width: 100%; margin: auto; max-width: 500px;}
    .contact .picture-mask {display: none}
    .contact .polygon-2     {position: absolute; margin-left: 40px; top: auto; bottom: 0; left: 50%; z-index: 1;}    
    
    /* PROJECT PAGE */
    .project-intro          {min-height: unset; padding: 50px 0}
    .project-images         {padding: 50px 30px 30px;}
    .project-intro h1       {font-size: 50px;}    
    .project-intro .polygon {height: 100%; display: none}
    
    /* FOOTER */
    footer          {flex-direction: column}
    .footer-logo    {margin-bottom: 20px;}

    
}

@media (max-width: 767px) 
{
    /* HERO SECTION */
    .hero-text      { max-width: calc(100% - 40px);}
    .hero-text svg  {width: 100%; height: auto;}
    .hero-text h1   {font-size: 6.5vw}
    
}

@media (max-width: 640px) 
{
    header nav ul li  {font-size: 20px;}
    
    /* PROJECTS */
    .projects .polygon-1    {background-color: var(--brown);}
    .slick-arrow            {top: auto; bottom: -60px; background-image: url(/_uploads/_assets/slick-arrow-white.svg)}
    
    .who-we-are .picture-mask img   {right: 230px;}
    
}

@media (max-width: 560px) 
{
}

@media (max-width: 500px) 
{
    h2  {font-size: 60px;}
        
    p,
    .rep-lockup p,
    .what-we-do ul {font-size: 18px;}
    
    p.intro {font-size: 20px;}
    
    p.intro br  {display: none}
    
    /* HEADER */
    .hamburger       {right: 0}  
    .hamburger.open  {right: 20px;}
    
    /* REPUTATION */
    .rep-lockup {align-items: flex-start}
    
    .polygon    {height: 500px;}
    .polygons   {height: 500px;}
    .reputation-section:after   {height: 500px; margin-right: -149px;}
    
    /* CONTACT */
    .form-row               {flex-direction: column; margin-bottom: 0}
    .form-row .form-cell    {width: 100%;}
    .form-cell              {margin-top: 15px;}
    .contact .btn           {margin-top: 30px;}
    .contact .polygon-2     {top: 0; margin-left: -767px;}    
}

@media (max-width: 414px) 
{
    /* WHAT WE DO */
    .what-we-do ul {column-count: 1}
    
}

@media (max-width: 360px) 
{
    /* SAMSUNG GALAXY S5 */
}

@media (max-width: 320px) 
{
    /* IPHONE 5 */
}