@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%;
		/* max-width: 320px; */
		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;		
                }
				
/*				
				
h3:nth-of-type(1), h3:nth-of-type(2) {
		width: 90%;
		display: inline-block;
				}
				
*/				
				
    
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;
				}

				
				
				
    
ul.list-items li.img-list {
		list-style: none;
		margin: 0px;
		padding: 0px;
		height: 0;
/*		line-height: 0px;  */
		font-size: 0;
				}
				
ul.list-items li a {
		padding: 4px 0;
		display: block;
				}
				
				
/*				
				
ul.list-items li.img-list img,
ul.list-items li.img-list a img {
		float: none;
		max-width: 80%;
		width: auto;
		height: auto;
		display: block;
		margin: 0px auto;
		padding: 0px;
				}	
				
*/				
    
.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;
  /*    text-align: left;
        width: 95%;		*/
/*		width: 90%;
		width: calc(100% - 60px);  */
		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;
				}
				
				
				
				
.not-for-mobile {
		display: none;
				}				
				
.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-horsham-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.horsham-handyman-sitemap {
        margin-top: 2px;
        margin-bottom: 0;
        margin-left: 2px;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 15px;
                }
    
ul.horsham-handyman-sitemap li {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 16px;
        padding-top: 0;
        padding-bottom: 4px;
        padding-left: 4px;
                }
        
ul.horsham-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
                }
    
                	
.call-handyman-top {
        font-size: 106%;
        font-weight: 600;
        padding-top: 2px;
        padding-bottom: 8px;
        text-align: center;
                }
        
.call-handyman-others {
        font-size: 106%;
        font-weight: 600;
        padding-top: 6px;
        padding-bottom: 1px;
        text-align: center;
                }
    
.call-handyman-bottom {
        font-size: 106%;
        font-weight: 600;
        padding-top: 4px;
        padding-bottom: 6px;
        text-align: center;
                }
				
.phone {
		font-weight: 600;
				}				

    
/*  SEARCH */



.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;
                }
				
.search-mark {
		background-color: #ffff00;
				}

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;
				}

span.search_highlighted {
		background-color: #ffff00;
				}

#searchResults span.search_highlighted {
		background-color: unset;
				}

#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;
				}
			

.box1 {
          height: 30px;
          width: 30px;
          background-color: #fcc;
				}
        
.box2 {
          height: 30px;
          width: 30px;
          background-color: #cfc;
                }
        
.main {
        width: 97%;
        margin-left: 3%;
                }
    
    
.justify-content-center {
      justify-content: center;
                }
    
    
.align-items-center {
        align-items: center;
              }    
    
table {
        border: 0 none;
        border-collapse: separate;
        overflow-x: hidden;
        padding: 0 10px;
                }
    
.container {
        max-width: 540px;
        width: 90%;
                }
    
.footer {
        font-size: 98%;
        text-align: center;
        width: 96%;
                }
				
.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; /* green */
		border-color: #22dd66;		
		color: #fff;
				}
				
/*				
				
.menu>li:nth-child(4) {
		grid-column: 3;
		grid-row: 1;
				}
				


.menu>li:nth-child(4) a {
		font-size: 110%;		
		letter-spacing: 0.2px;
		position: relative;
				}



.menu>li:nth-child(4) a:hover {
		background: #00b83a;
		border-color: #22dd66;
				}



.menu>li:nth-child(4) a:active {
		transform: scale(0.98);
				}
				
*/				



.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);
				}				
				
.link-hidden {
		display: none;
				}				


.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 Styles */

.search-highlight {
		background: linear-gradient(120deg, #fef3c7 0%, #fde68a 100%);
		color: #92400e;
/*		padding: 2px 4px;  */
		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%;
				}
				

				
.anniversary-backdrop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		backdrop-filter: blur(4px);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
				}
				
				

.anniversary-modal-box {
		background: #040053;
		padding: 32px 20px;
		border-radius: 14px;
		width: 50%;
		max-width: 660px;
		min-width: 280px;
		text-align: center;
		position: relative;
				}

.anniversary-modal-box h2 {
		font-size: 22px;
		color: #fff;
		margin-bottom: -2px;		
				}

.anniversary-modal-box p {
		font-size: 16px;
		padding: 10px 0;
		color: #fff;
				}

.anniversary-close-btn {
		background: #fff;
		border: transparent;
		text-align: center;
		font-size: 105%;
		font-weight: 600;
		margin: 0 auto;
		padding: 10px 25px;
		border-radius: 5px;
		transition: all ease .6s;
		color: #000080;
		cursor: pointer;
				}

.corner-box {
		position: absolute;
		width: 45px;
		height: 45px;
		border-radius: 2px;
				}

.corner-top-left {
		top: 10px;
		left: 10px;
				}

.corner-top-right {
		top: 10px;
		right: 10px;
				}

.corner-bottom-left {
		bottom: 10px;
		left: 10px;
				}

.corner-bottom-right {
		bottom: 10px;
		right: 10px;
				}
				
				
.corner-box img {
		max-width: 100%;
		height: auto;
		display: block;
				}

.corner-bottom-left img {
		margin-top: 10px;
				}
				
				
				
				
.intro-wrapper {
		display: flex;
		gap: 5px;
		margin-bottom: 10px;
				}


.intro-wrapper .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;
				}



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


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

@keyframes animate {
0% {
left: -20%;
}
50% {
left: 120%;
}
100% {
left: -20%;
}
}




/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}



@keyframes slideUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}



@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}