@media print
{
	.search-bar
	{
		display: none;
	}
}
@media screen
{	
	.search-bar
	{		
		display: flex;
		flex-direction: column;
		gap: 24px;
		width: var(--width-main);
		margin: auto;
		margin-top: var(--margin-section-gap);
	}
	main section:first-of-type .search-bar
	{
		margin-top: var(--margin-section-very-top);
	}	
	.search-bar > .image
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0px;
		width: 100%;
	}
	.search-bar > .image picture
	{
		width: 100%;
		margin: 32px 0px 0px 0px;	
	}	
	.search-bar > .image img
	{
		width: 100%;
	}
	.search-bar > .image > p
	{
		display: flex;		
	    align-items: center;
		text-wrap: balance;
		margin: 0px;
	}	
	.search-bar > .image > p:first-child
	{		
		font-style: normal;
		font-weight: 600;
		font-size: 18px;
		line-height: 133%;
		text-align: center;
		color: #575757;
		height: 24px;
	}
	.search-bar > .image > p:nth-child(2)
	{
		display: block;
		height: 93px;
	}
	.search-bar > .image > p:nth-child(2)	
	{				
		font-style: normal;
		font-weight: 700;
		font-size: 28px;
		line-height: 110%;		
		text-align: center;
		color: #111111;
	}
	.search-bar > .image > p strong
	{
		font-style: inherit;
		font-weight: inherit;
		font-size: inherit;
		line-height: inherit;		
		text-align: inherit;			
		color: var(--colour-main);
	}
	.search-bar > form
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		padding: 24px;
		gap: 24px;
		border: 1px solid #E0E0E0;
		background: #FFFFFF;
		min-width: 100%;
	}
	.search-bar > form > button[type="submit"]
	{
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 8px 16px;
		gap: 8px;
		background: var(--colour-main);
		border: 1px solid #E0E0E0;
		border-radius: 8px;
		height: 3rem;
		font-size: 1em;
	}
	.search-bar > form > button[type="submit"]:after 
	{
		content: '';
		background: var(--colour-text-over-main);
		position: relative;
		display: block;
		width: 16px;
		height: 16px;
		mask-image: url(/index/search.svg);
		mask-repeat: no-repeat;
		mask-position: center center;
		mask-size: 16px 16px;
	}	
}
@media screen and (min-width: 400px)
{
	.search-bar > .image > p:first-child
	{
		font-size: 24px;
		height: 32px;
	}
	.search-bar > .image > p:nth-child(2)
	{				
		font-size: 32px;		
		height: 64px;
	}
}
@media screen and (min-width: 600px)
{

}
@media screen and (min-width: 800px)
{
	.search-bar
	{
		flex-direction: row;
	}
	.search-bar > form
	{
		min-width: 45%;
	}
	.search-bar > .image > p:first-child
	{		
		height: 40px;
	}
	.search-bar > .image > p:nth-child(2)
	{				
		font-size: 40px;		
		height: 120px;
	}
	.search-bar > .image > p:first-child
	{
		font-size: 32px;		
	}
	.search-bar > .image > p:nth-child(2)
	{
		line-height: 1em;
		height: auto;
	}
}
@media screen and (min-width: 1024px)
{
	.search-bar > form
	{
		min-width: 445px;
	}
}