.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) {  

}


/* MOBILE STYLES */
@media (max-width: 1220px) 
{
    
    /* HEADER */
    .logo   {width: 250px;}
    nav ul  {gap: 0}
    
}

@media (max-width: 1130px) 
{
    /* HEADER */
    .logo   {width: 200px;}
    nav ul  {font-size: 14px;}
}

@media (max-width: 1001px) 
{

}

@media (max-width: 1000px) 
{
	/* MOBILE NAV */
	.hamburger 						{width: 30px; height: 22px; flex-shrink: 0; z-index: 50; margin: 0; cursor: pointer; position: relative; display: block}
	.hamburger span 				{width: 100%; display: block; height: 4px; background-color: #000000; position: absolute; top: 0; left: 0; transition: 0.2s ease-out; }
	.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: 30px;}
	.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);}
    
    nav         {position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; z-index: 20; background-color: var(--parchment); display: flex; justify-content: center; align-items: center; transition: var(--smooth); opacity: 0; visibility: hidden}
    nav span    {transition: none}
    nav ul      {flex-direction: column; justify-content: center; align-items: center; font-size: 22px}
    nav ul li   {margin-bottom: 15px;}
    nav.open    {left: 0; opacity: 1; visibility: visible}
    
    header.fixed .inner   {padding-top: 10px; padding-bottom: 10px;}
    
    /* SPLIT PANEL */
    .split-panel p          {font-size: 16px;}
    .split-panel .col-text  {padding-top: 0; padding-bottom: 0; flex: 0 0 calc(50% - 30px);}

}

@media (max-width: 860px) 
{
    .contact-cols,
    .footer-left-cols   {flex-direction: column}
}

@media (max-width: 800px) 
{
    /* HERO */
    .hero-container .hero-text p {font-size: 18px; margin-bottom: 0;}
}

@media (max-width: 768px) 
{
    .split-panel .cols      {flex-direction: column-reverse !important}
    .split-panel .col-text  {margin-top: 25px;}
    
    .food-menus-panel .cols {flex-direction: column}
    .food-menus-panel .col  {width: 100%;}
    
    .opening-times-panel h3     {font-size: 25px;}
    .opening-times-panel .cols  {gap: 30px;}
    .opening-times-panel .col   {width: calc(50% - 15px)}
    .opening-times-panel td     {font-size: 16px;}
    
    .news-listing-panel .cols   {flex-direction: column; margin-top: 40px; gap: 20px;}

}

@media (max-width: 640px) 
{
    .news-page-top h1,
    .hero-container .hero-text h1   {font-size: 50px;}
    
    h2,
    footer h2   {font-size: 40px;}
    
    h3  {font-size: 35px;}
    h4  {font-size: 30px;}
    h5  {font-size: 25px;}
    h6  {font-size: 20px;}
    
    p,
    .hero-container .hero-text p    {font-size: 16px;}
    
    /* HERO */
    .hero-container             {flex-direction: column; padding: 0; height: auto; background-color: var(--darkPurple);}
    .hero-image                 {position: relative; width: 100%; height: 60vw; min-height: 250px;}
    .hero-container:before      {display: none}
    .hero-container .hero-text  {width: 100%; color: #ffffff; background-color: var(--darkPurple); padding: 40px 30px 50px;}
    .hero-container .inner      {padding: 0}
    
    footer,
    .announcement-panel,
    .news-listing-panel,
    .opening-times-panel,
    .food-menus-panel,
    .split-panel    {padding: 40px 0}
    
    .opening-times-panel .cols  {flex-direction: column; margin-top: 40px;}
    .opening-times-panel .col   {width: 100%;}

    
}

@media (max-width: 550px) 
{
    footer .cols        {flex-direction: column-reverse}
    footer .cols .col   {width: 100%;}
    
    .footer-left-cols {flex-direction: row;}
    .footer-left-cols ul    {font-size: 14px;}
}

@media (max-width: 500px) 
{
    /* ADDRESS  */
    .address p      {font-size: 14px;}
    .address p svg  {width: 14px; height: auto}
    
    /* HEADER */
    header .inner   {padding-top: 18px; padding-bottom: 18px;}
    
}

@media (max-width: 414px) 
{
    .news-page-top h1,
    .hero-container .hero-text h1   {font-size: 40px;}
}

@media (max-width: 375px) 
{
    .hamburger.open {right: 20px;}
    
    header .inner   {padding-left: 20px; padding-right: 20px;}
    .inner  {padding: 0 20px;}
    
    /* ADDRESS */
    .address p      {font-size: 13px;}
    
    
}

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

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