@media (min-width: 768px) and (max-width: 1024px) {

*, *::before, *::after {
		box-sizing: border-box;
				}

* {
		margin: 0;
				}

html, body {
		color: #223;
		font-family: Verdana, Helvetica, Arial, sans-serif;
		font-size: 100%;
		line-height: 1.5;
		text-align: center;
		width: 100%;
		background-color: #fff;
				}

img, picture, video, svg {
		display: block;
		max-width: 100%;
				}

input, button, textarea, select {
		font: inherit;
				}

p, h1, h2, h3, h4 {
		overflow-wrap: break-word;
				}

ol, ul {
		list-style: none;
				}

a {
		color: #0b6e83;
		text-decoration: underline;
				}

a:hover {
		background-color: #0b6e83;
		color: #fff;
		text-decoration: none;
				}

a img {
		border: 0;
				}

h1 {
		font-size: 190%;
		padding: 12px 0 0 0;
				}

h2 {
		font-size: 112%;
		font-weight: normal;
		color: #46707a;
				}

.h2-mobile {
		display: none;
				}

h3 {
		font-size: 130%;
		padding: 14px 0;
		background-color: #0b6e83;
		color: #fff;
				}

h4 {
		font-size: 114%;
		text-align: left;
		margin: 14px 0 6px 0;
		color: #0b6e83;
				}

p {
		padding: 0 0 12px 0;
		text-align: left;
				}

hr, .horizline {
		background-color: #cfe4e8;
		border: 0;
		height: 1px;
		width: 100%;
		margin: 18px auto;
				}

.center {
		text-align: center;
				}

/* HEADER */

.header-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 20px;
				}

.header-center-text {
		padding: 0 10px;
				}

.header-left-img, .header-right-img {
		width: 120px;
		height: auto;
		aspect-ratio: 190 / 155;
		border-radius: 6px;
				}

/* MOBILE MENU (hidden at this width) */

.mobile-menu {
		display: none;
				}

/* SIDE MENUS (static desktop columns) */

.side-menu {
		display: block;
		position: static;
		width: max-content;
		flex: 0 0 auto;
		text-align: left;
		white-space: nowrap;
		padding-top: 4px;
				}

.side-menu li a {
		display: block;
		padding: 7px 6px;
		color: #fff;
		background-color: #0b6e83;
		text-decoration: none;
		margin-bottom: 2px;
		border-radius: 3px;
		font-size: 92%;
				}

.side-menu li a:hover {
		background-color: #46707a;
				}

.side-menu.side-menu-right li a {
		text-align: right;
				}

.side-menu li {
		position: relative;
				}

.side-menu .sub {
		display: none;
		position: absolute;
		top: 0;
		left: 132px;
		width: 460px;
		background-color: #eaf6f8;
		border: 1px solid #cfe4e8;
		padding: 8px;
		flex-wrap: wrap;
		z-index: 300;
				}

.side-menu .sub.visible {
		display: flex;
				}

.side-menu .sub li {
		width: max-content;
				}

.side-menu .sub li a {
		background-color: transparent;
		color: #0b6e83;
		padding: 5px 6px;
				}

.side-menu .sub li a:hover {
		background-color: #0b6e83;
		color: #fff;
				}

/* MAIN LAYOUT */

.page-main {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16px;
		padding: 10px 12px 0 12px;
		position: relative;
				}

.maintextcell {
		flex: 1 1 auto;
		min-width: 0;
		text-align: left;
		padding: 0 6px;
				}

/* CONTENT LISTS */

ul.littlehampton {
		list-style-type: disc;
		padding: 0 20px 12px 26px;
		text-align: left;
				}

ul.littlehampton li {
		padding: 0 0 7px 0;
				}

.info-card {
		background-color: #eaf6f8;
		border-left: 4px solid #0b6e83;
		padding: 14px 16px;
		margin-bottom: 14px;
		text-align: left;
				}

.info-card h4 {
		margin: 0 0 4px 0;
				}

.info-card .info-meta {
		font-size: 92%;
		color: #46707a;
		padding-bottom: 4px;
				}

.phone-web-icon {
		display: flex;
		align-items: center;
		gap: 6px;
		padding-bottom: 4px;
				}

.phone-web-icon img {
		flex-shrink: 0;
				}

.phone-web-spacing {
		margin-left: 3px;
				}

.search {
		background-color: #fff;
		border-radius: 5px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5px;
		border: 0;
				}

.search-form {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		max-width: 400px;
		padding: 6px 10px;
		border: 1px #dce0e0 solid;
		border-radius: 5px;
				}

.search-form img {
		height: 22px;
		flex-shrink: 0;
				}

.search input[type=text] {
		font-size: 101%;
		border: 0;
		flex: 1;
		min-width: 0;
				}

.sticky {
		height: auto;
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;
				}

.clear-btn {
		width: 32px;
		height: 32px;
		border: none;
		background: rgba(239, 68, 68, 0.1);
		color: #ef4444;
		border-radius: 8px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
				}

.clear-btn:hover {
		background: rgba(239, 68, 68, 0.2);
				}

.clear-btn svg {
		width: 16px;
		height: 16px;
				}

.search-results {
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 8px;
				}

.results-count {
		font-size: 125%;
		color: #6b7280;
		font-weight: 500;
				}

.navigation-controls {
		display: flex;
		align-items: center;
		gap: 8px;
				}

.nav-btn {
		width: 32px;
		height: 32px;
		border: none;
		background: rgba(59, 130, 246, 0.1);
		color: #3b82f6;
		border-radius: 8px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
				}

.nav-btn:hover:not(:disabled) {
		background: rgba(59, 130, 246, 0.2);
				}

.nav-btn:disabled {
		opacity: 0.4;
		cursor: not-allowed;
				}

.nav-btn svg {
		width: 20px;
		height: 20px;
				}

.current-result {
		font-size: 125%;
		color: #6b7280;
		font-weight: 500;
		min-width: 40px;
		text-align: center;
				}

.search-highlight {
		background: linear-gradient(120deg, #fef3c7 0%, #fde68a 100%);
		color: #92400e;
		border-radius: 4px;
		font-weight: 600;
				}

.search-highlight.current {
		background: linear-gradient(120deg, #f97316 0%, #ea580c 100%);
		color: #fff;
				}

.map-image {
		display: block;
		max-width: 100%;
		height: auto;
		margin: 16px auto;
		border: 1px solid #0b6e83;
		border-radius: 6px;
				}

.odd-lines {
		background-color: #eaf6f8;
				}

.even-lines {
		background-color: #dcf0f3;
				}

/* IMAGES IN CONTENT */

.img-center {
		margin: 14px auto;
		width: 60%;
				}

.img-left {
		float: left;
		width: 34%;
		margin: 4px 16px 8px 0;
				}

.img-right {
		float: right;
		width: 34%;
		margin: 4px 0 8px 16px;
				}

/* FOOTER */

.littlehampton-footer {
		font-size: 90%;
		line-height: 140%;
		text-align: center;
		padding: 20px 14px;
		background-color: #eaf6f8;
		margin-top: 18px;
				}

.littlehampton-bigger {
		margin-top: 8px;
		display: block;
		text-align: center;
				}

.littlehampton-mobile {
		display: none;
		text-align: center;
				}

/* FORMS */

.contact-wrap {
		padding: 16px 0;
		max-width: 460px;
				}

.form-row {
		margin-bottom: 12px;
		text-align: left;
				}

.form-row label {
		display: block;
		padding-bottom: 4px;
		font-weight: bold;
				}

input[type="text"], input[type="email"], textarea {
		width: 100%;
		border: 1px solid #a9c8cf;
		border-radius: 4px;
		padding: 9px;
		font-size: 100%;
				}

textarea {
		min-height: 130px;
				}

input[type="submit"] {
		background-color: #0b6e83;
		color: #fff;
		border: 0;
		border-radius: 4px;
		padding: 10px 24px;
		font-size: 100%;
		cursor: pointer;
				}

input[type="submit"]:hover {
		background-color: #085463;
				}

.radio-row label {
		display: inline;
		font-weight: normal;
		padding-right: 14px;
				}

.form-msg {
		padding-bottom: 10px;
		font-weight: bold;
				}

.form-msg.error {
		color: #b3261e;
				}

.form-msg.success {
		color: #0b6e83;
				}

.highlight {
		background-color: #ffe9b0;
				}

}