
html, body {
    font-family: Poppins, Verdana, Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    background-color: #fff; 
    color: #000;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
}

body {
    position: relative;
}

a {
    color: inherit;
    text-decoration: underline;
}

a:hover,
a:focus {
    opacity: 0.7;
    /* or outline: 2px solid currentColor; for focus */
}

.mainbox_img_index {
	background-image: url('/domains/mainlineirrigation.ca/images/index_1.jpg');
	background-position: center top; 
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.mainbox_img_aboutus {
	background-image: url('/domains/mainlineirrigation.ca/images/aboutus.png');
	background-position: center left; 
	background-repeat: no-repeat;
	background-attachment: fit;
	background-size: cover;
}

.mainbox_img_installation {
	background-image: url('/domains/mainlineirrigation.ca/images/installation_1.png');
	background-position: center left; 
	background-repeat: no-repeat;
	background-attachment: fit;
	background-size: cover;
}

.mainbox_img_springstart {
	background-image: url('/domains/mainlineirrigation.ca/images/springstart.png');
	background-position: center left; 
	background-repeat: no-repeat;
	background-attachment: fit;
	background-size: cover;
}

.mainbox_img_blowout {
	background-image: url('/domains/mainlineirrigation.ca/images/blowout.png');
	background-position: center left; 
	background-repeat: no-repeat;
	background-attachment: fit;
	background-size: cover;
}

.mainbox_img_design {
	background-image: url('/domains/mainlineirrigation.ca/images/design_1.png');
	background-position: center left; 
	background-repeat: no-repeat;
	background-attachment: fit;
	background-size: cover;
	color:#000;
}

.mainbox_img_statement {
	background-image: url('/domains/mainlineirrigation.ca/images/statement_1.png');
	background-position: center left; 
	background-repeat: no-repeat;
	background-attachment: fit;
	background-size: cover;
	color:#000;
}

.mainbox_img_service {
	background-image: url('/domains/mainlineirrigation.ca/images/service_1.png');
	background-position: center left; 
	background-repeat: no-repeat;
	background-attachment: fit;
	background-size: cover;
}

.mainbox_img_gallery {
	background-image: url('/domains/mainlineirrigation.ca/images/jasonhospital.png');
	background-position: center left; 
	background-repeat: no-repeat;
	background-attachment: fit;
	background-size: cover;
}

.mainbox_full_thin {
	height:240px;
}

.greybox_full_short {
	color:black; 
	vertical-align:top; 
	margin:0%; 
	font-size:16px; 
	padding:40px;
	position:relative;
	background-color:#ebeaeb;
}

.gallery {
	display: flex;
	width:100%;
	text-align:center;
	flex: 1;
	height:100%;	
}

.galleryimage {
	position:relative; 
	height:100%;
	background-position: center left; /* Center the image */
	background-repeat:no-repeat;
	background-attachment: fit;
	object-fit: fill;
	background-size:cover;
}

.showtime {
	display: flex;
	flex-direction: column;
	display:block; 
	height:100%;
}

.mainbox_full {
	color:#fff; 
	vertical-align:top; 
	margin:0px; 
	padding:0px;
	position:static;
	width:100%;
	border:solid;
	border-width:1px;
	border-color:white;
	}

.sitebox { 
    background-color: #fff; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 0px; 
    max-width: 100%; 
    padding: 0px; 
    position: relative;
    text-align: left; 
    vertical-align: top; 
    width: auto;
}

.img {
    max-width: 100%;
    max-height: 100%;
}

.mainbox_full_body { 
    max-width: 100%; 
    width: 100%; /* Ensuring it takes the full width of its container */
    color: blue;
    vertical-align: top; 
    margin-top: 0px; 
    top: 0px; 
    position: relative;
    display: flex; /* Adding flex to manage children */
    flex-direction: column; /* Children stacked vertically */
    height: 100vh; /* Optional, adjust based on your layout needs */
}

.mainbox_full {
	color:#fff; 
	vertical-align:top; 
	margin:0px; 
	padding:0px;
	position:static;
	width:100%;
	border:solid;
	border-width:1px;
	border-color:white;
}

.greybox_full {
	color:black; 
	vertical-align:top; 
	margin:4%; 
	font-size:16px; 
	padding:40px;
	position:relative;
	background-color:#ebeaeb; 
}

.footer-box { 
	background-color:#2D5757; 
	border:solid; 
	border-width:0px;
	padding:3%; 
	margin-left:auto; 
	margin-right:auto; 
	max-width:94%; 
	font-size:10px; 
	text-align:center; 
	vertical-align:top; 
	width:100%; 
}

.footer-box_2 { 
	color:#2D5757; 
	border:solid; 
	border-width:0px; 
	font-size:10px; 
	max-width:94%; 
	margin-left:auto; 
	margin-right:auto; 
	padding:3%; 
	text-align:center; 
	vertical-align:top; 
	width:100%;
}

.footer-invisible-box { 
	width:100%; 
	border:solid; 
	color:white;
	border-width:0px; 
	padding:0px; 
	margin-left:auto; 
	margin-right:auto; 
	color:#CCCCCC;
	font-size:12px;
}

.footer-box-title { 
	width:49%; 
	color:#CDCDCD; 
	border:solid; 
	border-width:0px; 
	padding:5px 0px 5px 0px; 
	vertical-align:top; 
	font-size : 12pt; 
	font-weight:bold; 
}

.fb_left {
	float:left;
	text-align:left;
}	

.fb_right {
	float:left;
	text-align:right;
}

.footer-box-sub-nochrome { 
	width:90%; 
	border:solid; 
	border-width:0px; 
	padding:0px; 
	vertical-align:top; 
	margin-left:auto; 
	margin-right:auto; 
	font-size:8pt; 
	font-weight:normal; 
	text-transform:capitalize; 
	color:#fff;
}

.floating_text { 
	background-color:#000;
	color:#FFF;
	padding:10%;
	max-width:40%;
	width:40%;
	background: rgba(0,0,0,.5); 
	margin:0%;
}

.mainlinelogo {
	border:solid;
	border-width:0px;
	background-color:#fff;
	width:auto; 
	margin-top:0px; 
	padding: 3vmin 1rem;
	top:0px; 
	display:block;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	z-index:90;
}

.title {
	background-color : #FFFFFF;
	font-size: 15px;
	font-weight: bold;
	color : #013434;
}

.mainlinedrop {
	background-color:#fff;
	display:none;
	position:absolute;
	z-index:99;
	width:100%;
}

.drop_buttons:hover {
	background-color:silver;
}

.drop_buttons {
	display:block;
}

.mainlogo {
	width:328px;
	cursor: pointer;
}

.bardiv {
	line-height:20px;
	vertical-align:middle;
	display:inline-flex;
	padding:5px;
	display:table-cell;
}

.image {
	display:flex-inline;
	text-align:center;
}

.bardiv_shell {
	vertical-align:middle;
	display:table-cell;
	margin-right:0px;
	display:table-cell;
	width:100%;
	text-align:right;
}

.bardiv_shell_min {
	display:none;
	vertical-align:middle;
	margin-right:0px;
	width:100%;
	text-align:right;
}

.bardiv-buttons {
	line-height:20px;
	vertical-align:middle;
	display:table-cell;
	padding:15px 25px 15px 25px;
	display:inline-flex;
	cursor: pointer;
	font-size: 16px;
	color:#000;
}

.bardiv-buttons_color {
	background-color:#1e6b59;
	color:#fff;
}

.bardiv-buttons_decoration {
	text-decoration:underline;
	text-underline-offset:5px;
}

.drop_buttons {
	display:block;
}

.bottom-buttons {
	text-align:left;
	line-height:0.9;
	vertical-align:middle;
	padding:15px 25px 15px 25px;
	cursor: pointer;
	font-size: 16px;
}

.bottom-buttons_benign {
	cursor: default;
}

.blurb_title {
	font-size: calc(2.2vw + 2.2vh + 1vmin);
	font-weight:bold;
	color:#fff;
	padding-left:5%;
	vertical-align:middle;
}

.catch_title {
	font-size: 24px;
	font-weight:bold;
}

.catch_copy {
	text-align:right;
	font-size: 18px;
}

.footer_copy {
	text-align:left;
	font-size: 16px;
}

@media (max-width: 960px) {

	.bardiv_shell {
		display:none;
	}

	.bardiv_shell_min {
		display:table-cell;
	}

	.mainlogo {
		width:228px;
	}

	.hamburger {
		height:64px;
		cursor: pointer;
		z-index:99;
	}

    .floating_text {
 	  	left:0px;
		max-width:50%;
		width:50%;
 	}

}

@media (max-width: 768px){
   	.floating_text {
		max-width:60%;
		width:60%;
 	}
.mainbox_full_thin {
	height:200px;
	}
}

@media (max-width: 436px){
	 .floating_text {
		max-width:100%;
		width:88%;
		margin:0;
		padding:10;
		margin-top:0px;
        
    .sitebox { 
		max-width:100%; 
	}

    .mainbox_full_thin {
		height:120px;
		}
	}

}