@media (min-width: 10px) and (max-width: 499px){

* {
		margin: 0;
		padding: 0;
                }  
 
html, body {
		background-color: #fff;
		color: #333;		
		font-family: Calibri, Verdana, Helvetica, Arial, sans-serif;
		font-size: 101%;
		font-weight: 500;
		padding: 2px;
		box-sizing: border-box;
		line-height: 125%;
		margin: 0 auto;
		scrollbar-gutter: stable;		
		text-align: center;
		width: 99%;
				}
    
h1 {
		font-size: 133%;
		margin-top: 5px;
		margin-bottom: 5px;
		padding-top: 3px;
		padding-bottom: 8px;
				}

h2 {
		font-size: 106%;
		line-height: 1.05;
		margin: 0 0 6px 0;
		padding: 2px 2px 4px 2px;
				}
    
h3 {
        font-size: 103%; 
        margin-bottom: 0;
		margin-left: 4px;
        margin-top: 8px;
        padding-bottom: 2px;
		padding-top: 4px;
		text-align: left;
		scroll-margin-top: 80px;		
                }

p {
        margin-top: 0;
        margin-bottom: 5px;
        padding: 1px 5px 5px 5px;
		text-align: left;
                }
				
hr {
		text-align: center; 
		width: 4%; 
		height: 2px;
		border-width: 5px 4px;
		border-style: solid;
		border-color: #deeeff #1885be #0e6d9e #1885be;
		margin: 0 auto 12px auto;
		padding: 1px 0;
				}				

a:link, a:visited, a:active {
        color: #000080;
        text-decoration: underline;
                }
    
a:hover {
        color:#360;
        text-decoration: none;
                }
    
a:img { 
        text-decoration: none;
                }
    
img {
        border: 0;
		object-fit: contain;
                }

img[src*="ble-3"] {
		aspect-ratio: 177/158;
				}

img[src*="ship-1"], img[src*="ness-1"] {
		aspect-ratio: 177/161;
				}

img[src*="man-006"] {
		aspect-ratio: 336/250;
				}

img[src*="ting-01"] {
		aspect-ratio: 250/189;
				}

img[src*="man-01"] {
		aspect-ratio: 250/166;
				}

figure {
    	margin: 20px 0;
				}

figure img {
		display: block;
		max-width: 100%;
		height: auto;
				}

figcaption {
		margin-top: 8px;
		font-size: 102%;
		line-height: 1.4;
		text-align: center;
				}

ul.list-items li.img-list {
		list-style: none;
		margin: 0px;
		padding: 0px;
		height: 0;
		font-size: 0%;
				}
				
ul.list-items li a {
		padding: 4px 0;
		display: block;
				}

.img-fluid-center {
		width: 99%;
		height: auto;
		float: none;
		display: block;
		margin: 0 auto;
		text-align: center;
		padding: 2px;
				}
    
.img-fluid-right {
		padding: 6px 0 3px 4px;
        max-width: 31%;
        height: auto;
        float: right;
        text-align: right;
                }
    
.img-fluid-100 {
        width: 31%;
        height: auto;
        float: right;
        text-align: right;
        padding: 1px 0 1px 1px;
                }

.img-fluid-right-mobile {
		display: block;
				}

.maintextcell {
        margin-top: 0;
        margin-bottom: 3px;
        padding: 1px 5px 5px 5px;
		Width: 98%;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
                }
				
.maintextcell > .video-container {
		width: 100%;
		max-width: 2336px;
		aspect-ratio: 2336 / 1080;
				}
		
.maintextcell > .video-container > video {
		width: 99%;
		max-width: 99%;
		height: auto;
				}				
				
.review-author {
        margin-bottom: 6px;
		text-align: left;		
                }				
    
.reviews {
        margin-bottom: -2px;
        margin-top: -2px;
        padding-bottom: 1px;
        padding-top: 10px;
        font-style: italic;
		text-align: left;		
                }
				
#reviews-littlehampton-handyman {
		scroll-margin-top: 80px;
				}				
				
ol.list-items-reviews {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0;
        padding-top: 0;
        padding-bottom: 4px;
        padding-left: 0;
		text-align: left;			
                }
    
ol.list-items-reviews li {
		line-height: 110%;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 36px;
        padding-top: 16px;
        padding-bottom: 4px;
        padding-left: 8px;
		text-align: left;	
                }					

ul {
        margin-left: 23px;
                }
    
ul.list-items {
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 0;
		min-height: 160vh;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 8px;
		text-align: left;
		display: inline-block;
		width: 90%;
		overflow: hidden;
				}
    
ul.list-items li {
		line-height: 110%;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 12px;
        padding-top: 0;
        padding-bottom: 4px;
        padding-left: 0;
                }

ul.littlehampton-handyman-sitemap {
        margin-top: 2px;
        margin-bottom: 0;
        margin-left: 2px;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 15px;
		text-align: left;		
                }
    
ul.littlehampton-handyman-sitemap li {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 16px;
        padding-top: 0;
        padding-bottom: 4px;
        padding-left: 4px;
                }
        
ul.littlehampton-handyman-sitemap li span {
        position: relative;
        left: -2px;
                }

ul.list-items-ticks {
        list-style-type: none;
        margin-top: 2px;
        margin-bottom: -2px;
        margin-left: 1px;
        padding-top: 0;
        padding-bottom: -2px;
        padding-left: 1px;
                }
    
ul.list-items-ticks li {
        list-style-type: none;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 14px;
        padding-top: 0;
        padding-bottom: 4px;
        padding-left: 2px;
		text-align: left;		
                }
    
* html ul.list-items li span {
        left: -2px
                }				

.search {
		border-radius: 5px;
		justify-content: center;
		align-items: center;
		padding: 5px;
		border: 0;
		float: none;
		position: sticky;
		display: inline-flex;
				}

.search input[type="text"] {
		font-size: 94%;
		padding: 0 36px 0 34px;
		border: 1px solid #dce0e0;
		width: 100%;
		border-radius: 5px;
		margin-right: 0;
		box-sizing: border-box;
		height: 30px;
		outline: none;
		line-height: 30px;
				}

.search input[type=text]:focus {
		border-color: #005BAA;
				}

.search img {
		height: 18px;
		position: absolute;
		top: 7px;
		left: 12px;
		width: 18px;
		pointer-events: none;
				}

.search button {
        font-size: 92%;
        padding: 9px;
        background-color: green;
        color: #fff;
        border: 1px solid green;
        border-left: none;
        border-radius: 5px;
                }
        
.search button:hover {
        background-color: transparent;
        border: 1px solid green;
        color: green;
        transition: .3s;
                }
    
.search-form {
        display: flex;
        position: relative;
                }

ul#searchResults {
		background-color: #fff;
		font-size: 94%;
		position: absolute;
		top: 36px;
		width: calc(100% - 10px);
		margin: 0;
		padding: 8px;
		list-style-type: none;
		box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
		max-height: 250px;
		overflow-y: auto;
		display: none;
		border: 1px solid #ccc;
		border-radius: 5px;
		box-sizing: border-box;
		left: 5px;
				}

#searchResults li {
		padding: 5px;
		cursor: pointer;
		font-size: 101%;
				}

#searchResults li:hover {
		background-color: #f3f3f3;
				}

#searchResults {
		margin-top: 2px;
				}

.highlight {
		background-color: #ffc78f;
				}

#responsiveButton {
		background-color: #000080;
		color: #fff;
		display: inline-block;
		padding: 0 12px;
		font-size: 99%;
		cursor: pointer;
		border: none;
		border-radius: 5px;
		height: 32px;
		vertical-align: bottom;
		width: 72px;
				}

#responsiveButton:hover {
		background-color: #009A31;
				}    
    
table {
        border: 0 none;
        border-collapse: separate;
        overflow-x: hidden;
        padding: 0 10px;
                }
    
.footer {
        font-size: 98%;
        text-align: center;
        width: 96%;
                }
				
.footer a {
		padding: 4px 0;
		display: inline-block;
				}

.top-nav {
		position: -webkit-sticky;
		position: sticky;
		background-color: #fff;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 6px;
		min-height: 40px;
		height: auto;
		top: 0;
		padding: 8px 4px 4px;
		z-index: 999;
		margin-bottom: 6px;
				}				

.menu {
		display: contents;
		list-style: none;
		list-style-type: none;
		gap: 8px;
		margin: 0;
		width: 100%;
		flex-basis: 100%;
		order: 3;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		padding-top: 0;
		padding-bottom: 0;
		transition:
		max-height 0.35s ease,
		opacity 0.35s ease,
		padding 0.35s ease;
				}

#menu-toggle:checked ~ .menu {
		max-height: 180px;
		opacity: 1;
		padding-top: 8px;
		padding-bottom: 4px;
				}

.menu-button-container {
		display: none;
		width: 32px;
		cursor: pointer;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		order: 2;
		flex-shrink: 0;
				}	

#menu-toggle {
		display: none;
				}

.menu-button, .menu-button::before, .menu-button::after {
	  display: block;
	  background-color: #000;
	  position: absolute;
	  height: 2px;
	  width: 14px;
	  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
	  border-radius: 2px;
				}

.menu-button::before {
		content: '';
		margin-top: -8px;
				}

.menu-button::after {
		  content: '';
		  margin-top: 8px;
				}

#menu-toggle:checked + .menu-button-container .menu-button::before {
		  margin-top: 0;
		  transform: rotate(405deg);
				}

#menu-toggle:checked + .menu-button-container .menu-button {
		  background-color: rgba(255, 255, 255, 0);
				}

#menu-toggle:checked + .menu-button-container .menu-button::after {
		  margin-top: 0;
		  transform: rotate(-405deg);
				}
				
.menu > li {
		flex: 1 1 30%;
				}

.menu>li a {
		background-color: #005BAA;
		border-radius: 5px;
		color: #fff;
		padding: 3px 10px;
		transition: 0.2s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 25px;
		text-decoration: none;
				}

.menu a[href^="tel:"] {
		background-color: #008529; 
		border-color: #22dd66;		
		color: #fff;
				}

.menu>li:nth-child(1) {
		grid-column: 1;
		grid-row: 2;
				}

.menu>li:nth-child(2) {
		grid-column: 2;
		grid-row: 2;
				}

.menu>li:nth-child(3) {
		grid-column: 3;
		grid-row: 2;
				}

.menu>li {
		display: block;
		flex: 1 1 30%;
				}

.top-nav+* {
		margin-top: 6px;
				}

.menu>li a:active {
		transform: scale(0.97);
				}				

.search-widget {
		grid-column: 1 / span 2;
		grid-row: 1;
		width: 100%;
		background-color: #fff;
		padding: 0;
		flex: 1;
		min-width: 0;
		order: 1;
				}

.clear-btn {
		display: none;
		position: absolute;
		right: 12px;
		top: 4px;
		width: 22px;
		height: 22px;
		padding: 0;
		border: none;
		background-color: #eeeeee;
		color: #666666;
		border-radius: 4px;
		cursor: pointer;
		align-items: center;
		justify-content: center;
				}

.clear-btn.is-visible {
		display: flex;
				}

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

.search-results {
		display: none;
		margin-top: 8px;
		padding-top: 8px;
		border-top: 1px solid #dddddd;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 12px;
				}

.search-results.is-visible {
		display: flex;
				}

.results-count {
		font-size: 105%;
		color: #6b7280;
				}

.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;
		transition: all 0.2s ease;
				}

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

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

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

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

.search-highlight {
		background: linear-gradient(120deg, #fef3c7 0%, #fde68a 100%);
		color: #92400e;
		border-radius: 4px;
		font-weight: 600;
		transition: all 0.3s ease;
		box-shadow: 0 2px 4px rgba(251, 191, 36, 0.2);
				}

.search-highlight.current {
		background: linear-gradient(120deg, #f97316 0%, #ea580c 100%);
		color: #fff;
		box-shadow: 0 4px 8px rgba(249, 115, 22, 0.3);
		transform: scale(1.05);
				}

.search-container {
				width: 100%;
				}

a.phone-contact {
		background-color: #e8f4ea;
		font-size: 106%;
		font-weight: 600;
		padding: 10px 16px;
		border-radius: 10px;
		text-decoration: none;
		margin: 4px 0;
		position: fixed;
		bottom: 20px;
		right: 20px;
		z-index: 1000;
		display: none;
				}

.phone-contact .phone-number {
		display: none;
				}

.phone-contact .phone-call-label {
		color: #fff;
				}	

.maintextcell .phone-contact + * {
		margin-top: 10px;
				}