.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 (min-width: 1000px) and (max-height: 769px) {

    
    #lottieSun              {width: 1000px; margin-left: -1200px; bottom: -110px;}
    #lottieHeart            {width: 1000px; margin-right: -1280px;}
    #lottieBook             {width: 1000px; margin-left: -1200px; top: -80px;}
    #lottiePlane            {width: 1000px; margin-left: -1040px}
    #lottiePhone            {width: 1000px; margin-right: -1160px;}
    #lottieSpeechBubble     {width: 1000px; margin-left: -1200px;}
    #lottieTicket           {width: 1000px; margin-right: -1150px; top: -210px;}
}

@media (max-width: 1400px) 
{
    /* HOME WHAT WE DO */
    .slick-next {right: 0}
    .slick-prev {left: 0}
    .wwd-card-text  {min-width: 70%; padding-left: 15px; padding-right: 15px;}
    
    
}

/* MOBILE STYLES */
@media (max-width: 1000px) 
{
    
    #lottieSun              {width: 1000px; margin-left: -1200px; bottom: -110px;}
    #lottieHeart            {width: 1000px; margin-right: -1280px;}
    #lottieBook             {width: 1000px; margin-left: -1200px; top: -80px;}
    #lottiePlane            {width: 1000px; margin-left: -1040px}
    #lottiePhone            {width: 1000px; margin-right: -1160px;}
    #lottieSpeechBubble     {width: 1000px; margin-left: -1200px;}
    #lottieTicket           {width: 1000px; margin-right: -1150px; top: -210px;}

    
    .home-what-we-do,
    .home-intro-section,
    .home-recent-projects   {min-height: unset; padding: 120px 0}
    
    h1  {font-size: 46px;}
 
    /* HEADER */
    nav ul  {font-size: 17px;}
    
    /* HOME INTRO */
    .home-intro-text    {width: 600px;}
    
    /* HOME WHAT WE DO */
    .wwd-card-text p  {font-size: 20px;}
    
    /* HOME RECENT PROJECTS */
    .home-recent-projects   {padding-bottom: 250px;}
    
}

@media (max-width: 900px) 
{
    .home-icon  {top: 88px; padding: 6px 5px;}
    .home-icon svg  {width: 20px;}
    
    /* CATEGORY LISTING */
    .category-listing                   {padding-top: 50px; padding-bottom: 50px;}
    .category-listing .text-intro       {margin-bottom: 20px;}
    .category-listing .cols .col        {margin: 10px 0}
    .category-listing .project-card h2  {font-size: 34px;}
    .category-listing .project-card p   {font-size: 18px;}
    
    .category-listing .cols .col:not(.col:nth-child(3n + 1)) .project-card-text {padding-left: 0; padding-right: 0;}    
}

@media (max-width: 880px) 
{
    /* HEADER */

	/* MOBILE NAV */
	.hamburger 						{width: 35px; height: 22px; flex-shrink: 0; z-index: 50; margin: 0; cursor: pointer; position: absolute; right: 30px; top: 32px; display: block}
	.hamburger span 				{width: 100%; display: block; height: 4px; background-color: var(--grey); position: absolute; top: 0; left: 0; transition: var(--smooth); 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) 	{bottom: 11px; transform: rotate(-45deg) scaleX(-1);}
    
    header                      {z-index:99;}
    
    header nav ul				{font-size: 22px; flex-direction: column; width: 100%; position: relative; z-index: 5; opacity: 0;}
	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:before,
    header nav ul li a:before,
    header nav ul li:after,
    header nav ul li a:after    {display: none}
    
	header nav ul li:hover ul	{}
    
    header nav			   {animation:none; transition: var(--smooth); position: fixed; transform: translateX(-100%); 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;}
    header nav.open:after  {transform: translateX(0)}
    
    header nav.open ul      {opacity: 1;}
    
    header nav.closed       {transform: translateX(-100%);}
    
    header nav:after    {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: var(--darkGrey); width: 100%; transform: translateX(100%); transition: var(--smooth); content: '';}
    
    header.fixed .hamburger span    {background-color: var(--brown);} 

}

@media (max-width: 800px) 
{
    /* CONTACT */
    .contact        {padding: 70px 0;}
    .contact .cols  {flex-direction: column;}
    .contact .cols .col-contact-details {margin-top: 40px;}
    .contact .cols .col {width: 100%;}
    .contact .col-contact-details .cols {flex-direction: row; justify-content: flex-start}
    .newsletter-sign-up        {margin-bottom: 0; margin-top: 15px;}
}

@media (max-width: 768px) 
{
    /* LOTTIES */
    #lottieSun      {margin-left: -920px;}
    #lottieHeart    {margin-right: -1130px; bottom: -130px; top: auto; transform: none}
    #lottieBook     {margin-left: -1090px;}
    
    /* HOME RECENT PROJECTS */
    .project-card p.tag {font-size: 16px;}
    .project-card h2    {font-size: 24px;}
    
    /* CATEGORY LISTING */
    .category-listing .project-card h2  {font-size: 28px;}
}


@media (max-width: 640px) 
{
    /* LOTTIES */
    #lottieSun              {width: 700px; margin-left: -650px; bottom: -90px;}
    #lottieHeart            {width: 700px; margin-right: -730px; bottom: -100px;}
    #lottieBook             {width: 700px; margin-left: -750px;}
    #lottiePlane            {width: 700px; margin-left: -740px; bottom: -50px;}
    #lottiePhone            {width: 700px; margin-right: -720px; bottom: -80px;}
    #lottieSpeechBubble     {width: 700px; margin-left: -650px;}
    #lottieTicket           {width: 700px; margin-right: -730px; top: -110px;}
    
    .home-recent-projects .col.span-2,
    .home-recent-projects .col          {width: 100%; flex: 100% 0 0}
    
    .project-card .card-image-container,
    .home-recent-projects .col:nth-child(1) .project-card .card-image-container,
    .home-recent-projects .col:nth-child(2) .project-card .card-image-container {height: 230px;}
    
    .wwd-card           {height: 100vw}
    .wwd-card-text p    {font-size: 18px;}
    
    .pullout-text-inner {text-align: left}
    
    /* WO WE WORK WITH */
    .client-logos               {padding: 80px 0 50px}
    .client-logos .cols .col    {flex: 0 1 calc((100% - (2 * 28px)) / 3);}
    
    /* FOOTER */
    footer          {padding: 50px 0}
    .footer-left    {flex-direction: column}
    .footer-left ul {margin-right: 0}
    
    /* PROJECT PAGE */
    .project-intro  {padding: 30px 0}
    .project-other-assets .col {flex: 100% 0 0}
    .project-other-assets   {padding-bottom: 60px;}

    .other-content-container    {padding: 60px 0}
}


@media (max-width: 500px) 
{
    header nav ul li    {font-size: 26px;}
    
    /* CATEGORY LISTING */
    .category-listing .cols .col:nth-child(3n + 1) .project-card-text   {position: relative; bottom: auto; padding-left: 0; padding-right: 0}
    .category-listing .cols .col:nth-child(3n + 1) .project-card-text h2,
    .category-listing .cols .col:nth-child(3n + 1) .project-card-text p {color: var(--darkGrey);}
    .category-listing .cols .project-card-text  {padding-top: 20px;}
    
    .category-listing .project-card h2  {font-size: 22px;}
    .category-listing .project-card p   {font-size: 16px;}
    
    .category-listing .text-intro   {margin-bottom: 40px;}
    
}

@media (max-width: 460px) 
{
    h1  {font-size: 36px;}
    p,
    p.tag   {font-size: 18px;}
    
    .tvn-repeater   {background-size: 810px auto;}
    
    /* CONTACT */
    .footer-left ul     {font-size: 14px;}
    footer p            {font-size: 14px;}
    ul.social li a      {width: 40px; height: 40px;}
    ul.social li a svg  {height: 17px; width: auto;}
}


@media (max-width: 414px) 
{
    .category-listing .cols {flex-direction: column}
    .category-listing .cols .col:nth-child(3n + 1) .project-card .card-image-container  {padding-top: 65%;}
    .category-listing .cols .col    {}
}
    
@media (max-width: 320px) 
{
    /* IPHONE 5 */
}