@charset "utf-8";
/* CSS Document */

.demo-4 .dl-menuwrapper button {
	background: rgba(62, 71, 88,  1);
}

.demo-4 .dl-menuwrapper button:hover,
.demo-4 .dl-menuwrapper button.dl-active,
.demo-4 .dl-menuwrapper ul {
	background: rgba(62, 71, 88, 1);
}
 
#wrapper {
	height: 100vh;
	justify-content: flex-start;
}

.tfbutton {
	background-color: rgba(205, 166, 149, 1);
	border: solid 1px rgba(62, 71, 88, 1);
	color: rgba(62, 71, 88, 1);
}

.tfbutton:hover {
	background-color: rgba(62, 71, 88, 1);
	border-color: rgba(152, 152, 152, 1);
	color: rgba(152, 152, 152, 1);
}

nav a {	
	background: rgba(205, 166, 149, 1);
	border-color: rgba(62, 71, 88, 1);
	color: rgba(62, 71, 88, 1);
	font-weight: bold;
}

nav a:hover {
	background: rgba(62, 71, 88, 1);
	border-color: rgba(152, 152, 152, 1);
	color: rgba(152, 152, 152, 1);
}

table {
	align: center; 
	align-self: center;
	background: rgba(131, 146, 143, 1);
	border: solid 2px rgba(62, 71, 88, 1);
	border-collapse: collapse; 
	display: block;
	height: auto;		
}

#formName, #formEmail, #formComments {	
	border: solid 1px rgba(62, 71, 88, 1);
	outline: solid 1px rgba(62, 71, 88, 1);
	font-size: 16px; /* 16px prevents iOS auto-zoom */
}

#formName:focus, #formEmail:focus, #formComments:focus {
	border: solid 1px rgba(205, 166, 149, 1);
	outline: solid 1px rgba(205, 166, 149, 1);
}

#formComments {
  	height: 150px;
 	min-height: 100px;
  	max-height: 300px;
}

#submit {
	background-color: rgba(205, 166, 149, 1);
	color: rgba(62, 71, 88, 1);
	font-size: 1.2em;
	padding: .3em;
}

#submit:hover {
	background-color: rgba(62, 71, 88, 1);
	color: rgba(152, 152, 152, 1);
}

#reset {
	background-color: rgba(205, 166, 149, 1);
	color: rgba(62, 71, 88, 1);
	float: right;
	padding: 0.2em;
}

#reset:hover {
	background-color: rgba(62, 71, 88, 1);
	color: rgba(152, 152, 152, 1);
}

.backToTop, .icon-chevron-up:before {
	color: rgba(205, 166, 149, 1);
	font-size: 1.8em;
 }

.icon-chevron-up:hover:before {
	color: rgba(62, 71, 88, 1);
 }

#footer {
	border-top: double thick rgba(205, 166, 149, 1);
}

#footer p {
	color: white;
	margin-top: 1em;		
}

/* Media Queries */

@media screen and (max-width: 823px) and (orientation: portrait){
    
    html, body {
        height: 100%;
        overflow: hidden;
    }
    
    #wrapper {
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    
    #topWrapper {
        flex-shrink: 0;
        max-height: 30vh; /* Limit header height */
    }
    
    #main {
        flex: 1 1 auto;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: 60vh; /* THIS IS KEY - limits main content */
    }
    
    .mainContent {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Changed from center */
        padding: 10px 0;
        overflow-y: auto; /* Allow scrolling here */
    }
    
    .section {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Remove max-height and overflow */
    }

    table {
        height: auto;
        min-height: auto;
        max-height: none; /* Remove constraint - let it be natural size */
        margin: 20px auto;
    }
    
    #formTable {    
        margin: auto;
        padding: 15px 5%;
        width: auto;
        max-width: 90%;
    }
    
    #formTable th {
        padding: 10px 5px;
        font-size: 1.2em;
    }
    
    #formTable td {
        padding: 8px 5px;
    }
    
    #formName, #formEmail {
        width: 100%;
        height: 45px;
        font-size: 16px;
        padding: 8px;
        box-sizing: border-box;
    }
    
    #formComments {
        width: 100%;
        height: 100px;
        font-size: 16px;
        padding: 8px;
        box-sizing: border-box;
        resize: vertical;
    }
    
    .commentsSection {
        height: auto;
        min-height: 100px;
    }
    
    #submit, #reset {
        font-size: 1.1em;
        padding: 10px 15px;
        min-height: 44px;
    }
    
    #BTT {
        display: none;
    }
    
    .inlineWrapper:has(#footer),
    #footer {
        flex-shrink: 0 !important;
        position: static !important;
        display: block !important;
        min-height: 60px !important;
        max-height: 10vh; /* Limit footer height */
        padding: 10px 0 !important;
        margin: 0 !important;
        overflow: hidden;
    }
    
    #footer p {
        display: block !important;
        visibility: visible !important;
        color: white !important;
        font-size: 0.85em !important;
        line-height: 1.3em !important;
        margin: 0.3em 1em !important;
    }
}

@media screen and (max-width: 375px) and (orientation: portrait){
	
	#background-image {
		background-attachment: local; 
		background: url('../images/background/contactBackgroundP377.jpg');		
		background-position: center top;
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactBackgroundP377.jpg', sizingMethod='scale');
		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactBackgroundP377.jpg', sizingMethod='scale')";
		height: 100%;
		max-width: 100%;
	}

	#top {			
		height: 26vh;
	}
	
	.title {
		margin-bottom: 1em;
		width: 50%;
	} 

	th {
		padding-bottom: 2px;
	}
	 
	.commentsLabel {
		 margin-bottom: 0em;
	 }
	 
	.commentsSection td p {
		 height: 12vh;
		 overflow: auto;		 
	 }	 
	 
	 #formComments {		 
		 margin-right: 0;
	 }
}

@media screen and (min-width: 376px) and (max-width: 446px) and (orientation: portrait) {
	 
	#background-image {
		background-attachment: local; 
		background: url('../images/background/contactBackgroundP446.jpg');
		background-position: center top;
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactBackgroundP446.jpg', sizingMethod='scale');
		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactBackgroundP446.jpg', sizingMethod='scale')";
		height: 100%;
		max-width: 100%;
	}
	
	#top {			
		height: 20vh;
	}
	 
	.title {
		margin-bottom: 2em;
		width: 50%;
		max-width: 240px;
	} 	

	th {
		padding-bottom: 5px;
	}
}

@media screen and (min-width: 447px) and (max-width: 823px) and (orientation: portrait) {
	 
	#background-image {
		background-attachment: local; 
		background: url('../images/background/contactBackgroundMedSmLandscape.jpg');
		background-position: center top;
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactBackgroundMedSmLandscape.jpg', sizingMethod='scale');
		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactBackgroundMedSmLandscape.jpg', sizingMethod='scale')";
		height: 100%;
		max-width: 100%;
	}
	
	#top {			
		height: 20vh;
	}
	 
	.title {
		margin-bottom: 2em;
		width: 50%;
		max-width: 240px;
	} 	

	th {
		padding-bottom: 5px;
	}
}

 @media screen and (max-width: 823px) and (orientation: landscape){

	body {
		background-attachment: fixed;
		background-image: url('../images/background/contactBackgroundMedSmLandscape.jpg');
		background-position: center top;
		background-repeat: no-repeat;
		background-overflow: hidden;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactBackgroundMedSmLandscape.jpg', sizingMethod='scale');
		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactBackgroundMedSmLandscape.jpg', sizingMethod='scale')";
		height: 100%;
		width: 100%;
	}

	#header {
		min-width: 289px;
	}

	#headerMobile {
		margin-top: 1em;
	}

	.mainContent {
		align-content: center;
		align-items: center;			
		box-sizing: border-box;
		clear: both;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;          
		flex-direction: column;
		justify-content: flex-start;
	}

	.section {
		min-height: 200px;
		width: 100%;
	}

	.title {
		width: 14%;
		min-width: 240px;
	}

	table {
		margin-top: 2%;
		margin-bottom: 2%;
		margin-left: auto;
		margin-right: auto;
		padding-right: 15%;
		padding-left: 15%;
		width: auto;
		max-width: 80%
	}

	#formTable th {
		padding-bottom: 5px;
	}

	#formTable td {
		padding-bottom: 10px;
		padding-top: 0px;
	}

	#formTable td:last-child {
	   padding-bottom: 3px;
	}

	#formName, #formEmail {
		height: 2em;
	}

	#formName, #formEmail, #formComments {
		border-width: 2px;
		outline-width: 2px;
		text-align: left;
		width: 100%;
	}

	.commentsSection {
		 height: 200px;
	 }

	 #BTT {
		 margin-top: 1em;
	 }

	#footer {		
		box-sizing: border-box;
		display: -moz-box;
		display: -ms-inline-flexbox;
		display: -webkit-inline-flex;
		display: inline-flex;
	}
}

@media screen and (min-width: 824px) {

	#wrapper {		
		height: 100%;
		min-height: 100vh;
		align-content: space-between;
		align-items: space-between;
		justify-content: space-between;
	}
	
	#topWrapper {
		margin-bottom: auto;
	}
	
	#main {
		margin-bottom: auto;
	}
	
	.mainContent {
		align-items: center;
		align-content: center;
		box-sizing: border-box;
		clear: both;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;          
		flex-direction: column;
		justify-content: flex-start;
	}
	
	.section {
		width: 100%;
	}
	
	.title {
		min-width: 240px;
	}
	
	table {
		margin-bottom: 2%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 2%;
		padding-right: 15%;
		padding-left: 15%;
		width: auto;
	}

	#formTable th {
		padding-bottom: 5px;
	}

	#formTable td {
		padding-bottom: 10px;
		padding-top: 0px;
	}
	
	#formName, #formEmail {
		height: 2em;
	}

	#formName, #formEmail, #formComments {
		border-weight: 2px;
		outline-weight: 2px;
		text-align: left;
		width: 100%;
	}

	.commentsSection {
		 height: 200px;
	 }

	#BTT {
		display: none;
	}
	
	#footer {		
		box-sizing: border-box;
		display: -moz-box;
		display: -ms-inline-flexbox;
		display: -webkit-inline-flex;
		display: inline-flex; 
		flex-grow: 0;
	}
}

 @media screen and (min-width: 824px) and (max-width: 1280px) {

	body {
		background-attachment: fixed;
		background-image: url('../images/background/contactBackgroundMedSm.jpg');
		background-position: center top;
		background-repeat: no-repeat;
		background-overflow: hidden;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactBackgroundMedSm.jpg', sizingMethod='scale');
		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactBackgroundMedSm.jpg', sizingMethod='scale')";
		height: 100%;
		max-width: 100%;
	}
	
	.section {
		min-height: 160px;
	}

	table {
		border-width: 4px;
		max-width: 80%
	}

	#formTable tr {
		margin-bottom: 0px;
	}

	#formTable td:last-child {
	   padding-bottom: 3px;
	}

	.commentsLabel {
		margin-bottom: 0em;
		padding: 0;
	}

	#formComments {
		 max-height: 180px;
		 margin-bottom: 0;
		 padding-bottom: 0px;			
	 }

	.commentsSection {
		 height: 120px;
	 }
}

@media screen and (min-width: 1281px) and (max-width: 1575px) {
	
	body {
		background-attachment: fixed;
		background-image: url('../images/background/contactBackgroundMLgSm.jpg');
		background-position: center top;
		background-overflow: hidden;
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactBackgroundMLgSm.jpg', sizingMethod='scale');
		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactBackgroundMLgSm.jpg', sizingMethod='scale')";
		height: 100%;
		max-width: 100%;
	}

	.section {
		min-height: 160px;
	}
	
	.title {
		width: 14%;	
	} 
	
	table {
		border-weight: 5px;	
		max-width: 70%;		
	}

	#formTable td:last-child {
	   padding-bottom: 3px;
	}
}
	 
@media screen and (min-width: 1576px) and (max-width: 1920px) {
	
	#background-image {
		background-attachment: fixed;
		background: url('../images/background/contactBackgroundLg19Sm.jpg');
		background-position: center top;
		background-repeat: no-repeat;
		background-overflow: hidden;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactBackgroundLg19Sm.jpg', sizingMethod='scale');
		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactBackgroundLg19Sm.jpg', sizingMethod='scale')";
		height: 100%;
		min-height: 100vh;
		width: 100%;
	}

	.section {
		min-height: 160px;
	}
	
	.title {
		margin-bottom: 2em;
	} 
	
	table {
		border-weight: 6px;
		max-width: 60%
	}
	
	#formTable td:last-child {
	   padding-bottom: 3px;
	}
}

@media screen and (min-width: 1921px) {
	
	body {
		background-attachment: fixed;
		background-image: url('../images/background/contact26.jpg');
		background-position: center top;
		background-repeat: no-repeat;
		background-overflow: hidden;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contact26.jpg', sizingMethod='scale');
		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contact26.jpg', sizingMethod='scale')";
		height: 100%;
		max-width: 100%;
	}
	
	#dl-menu {
		margin-left: 0;
	}
	
	.section {
		min-height: 160px;
	}
	
	.title {
		width: 14%;	
	} 
	
	table {
		max-width: 60%
	}

	#formTable td:last-child {
	   padding-bottom: 3px;
	}
}

@media screen and (min-width: 2600px) {
	
	body {
		background-attachment: fixed;
		background-image: url('../images/background/contactLg.jpg');
		background-position: center top;
		background-repeat: no-repeat;
		background-overflow: hidden;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactLg.jpg', sizingMethod='scale');
		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/background/contactLg.jpg', sizingMethod='scale')";
		height: 100%;
		max-width: 100%;
	}
}