/* CSS Document */

html {
    font-size: 100%;
}


* { margin:0; padding:0; }

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-size:16px;
    font-family: arial, sans-serif;
    background:#f4f6f8;
}  


h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    
}
h1 {
    font-size: 3em; 
    line-height: 1em;
    margin-bottom: .5em; 
}
h2 {
    font-size: 2.25em; 
    line-height: 1.1em; 
    font-weight:bold;
    margin-bottom:20px;
   
}
h3 {
    font-size: 1.5em;
    line-height: 1; 
    margin-bottom: 10px;
}
h4 {
    font-size: 1.35em; 
    line-height: 1.142857142;
    text-transform:uppercase;
    color:#4a4c4c;
    
}
h5 {
    font-size: 1.125em; 
    line-height: 1.1em; 
    text-transform:uppercase;
}
h6 {
    font-size: 1em; 
    line-height: 1.2em; 
    margin-bottom: 1.5em; 
}

p { 
    line-height:1.5em;
    font-size:16px;
    font-weight:500;
 }


a{ text-decoration:none; }

input[type=button], input[type=submit], input[type=reset] {
    display:inline-block; 
    padding:10px 10px; /*20px 30px */
    border: 2px solid #738996; 
    font-size:0.9em;
    font-weight:700;
    margin-top:0px;
    color:#f4f6f8;
    text-transform: uppercase;
    background:none;
    cursor: pointer;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
    background-color: #47828f;
}

/* 
=========================================================================
Color Fills
=========================================================================
*/

.teal{ background:#47828f; }
.non-white{background:#f1f0f0;}

/* 
=========================================================================
Buttons TODO: edited this stuff for login. clean up
=========================================================================
*/

.flex-text-block a.link{
    text-decoration:none;
    border: none;
    
    padding-bottom:10px;
    
    color: #738996;

    display:inline-block; 
    padding:0; 
    border: none;
    font-size:16px; 
    font-weight:700;
    margin-top:0;
    text-transform: none;
    text-align:center;
}
.flex-text-block a.link:hover{color: #ffffff;}

.flex-text-block ul.login-links li:first-child{ border-right:1px solid #cccccc; padding-right:10px; margin-right:10px; }

.flex-text-block li{
    display:inline-block;
}

.flex-text-block ul.login-error {
    border-right: none !important;
    color: #ffffff !important;
}

.flex-text-block a, .flex-content a, a.btn{ 
    display:inline-block; 
    padding:20px 30px; 
    border: 2px solid #738996; 
    font-size:18px;
    font-weight:700;
    margin-top:30px;
    color:#ffffff;
    text-transform: uppercase;
    text-align:center;
    cursor: pointer;
}

.flex-content a, a.btn.light {color:#828282;}

.form-group {
    position: relative;
}

/* 
=========================================================================

Responsive Needs 

=========================================================================
*/

img{
    max-width:100%;
    height:auto;

}


.slicknav_menu {display:none;}
.mobile-logo{ display:none;}


/* 
=========================================================================
Padding 
=========================================================================
*/

.padtop, li.padtop{ padding-top:40px!important;}

.padbottom, p .padbottom{ padding:0 0 20px 0; margin-top:0;}

.nomargin{margin:0!important;}

.nopad{padding:0!important;}

/* 
=========================================================================
Flexbox
=========================================================================
*/

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    width: 100%;
    align-items: stretch;
    justify-items: center;
    margin-bottom:30px;

}

.flex-container:nth-child(odd) {
    flex-direction: row-reverse;
}


.flex-block {
    flex-basis: 45%;
    overflow:hidden;
}

.flex-block:nth-child(odd) {
    flex-basis: 55%;
}

.flex-container:nth-child(odd) .flex-text-block  {background:#47828f;}
.flex-text-block {padding:12%; background:#202020; height:100%; }



.flex-text-block h2, .flex-text-block p{ color:#ffffff; }



body#about .flex-container:nth-child(odd) .flex-text-block{ background:#202020!important;}



.flex-img{ line-height:0; }

.flex-block img{ object-fit: cover; height: 100%; width:100%; }

.add-service .flex-container {justify-content: space-between;}
.add-service .flex-container .flex-block{flex-basis: 32%; background:#f4f6f8;}
.add-service .flex-container .flex-block img{ height:auto; width:auto; }
.add-service .flex-container .flex-block .flex-content{ padding:30px; box-sizing:border-box; }


.staff .flex-container {justify-content: flex-start; flex-wrap: wrap; gap: 1.233333333333%;}
.staff .flex-container .flex-block{flex: 0 0 19%; background:#f4f6f8;}
.staff .flex-container .flex-block img{ height:auto; width:auto; }
.staff .flex-container .flex-block .flex-content{ padding:20px; box-sizing:border-box; }


body#testimonials .flex-container {justify-content: left; flex-wrap: wrap; gap: 1.233333333333%;}
.flex-block.testimonial{flex-basis: 49%; background: #b5cdd2; padding:20px; box-sizing:border-box; margin-bottom: 1.233333333333%}

.testimonial:nth-child(4n+1), .testimonial:nth-child(4n+2) {
    background: #dae6e9;
}

.testimonial p:last-child{ padding-top:15px; font-weight:bold; }


/* 
=========================================================================
Preheader / Prefooter
=========================================================================
*/

.preheader, .prefooter{ background:#47828f; width:100%; padding:5px 20px; position:relative; box-sizing:border-box;}

.preheader a , .prefooter a{ color:#ffffff; }

.preheader .fas{font-family: "Font Awesome 5 Free"; font-weight:900;}


.tel-email p{ float:left; margin:0; font-family:arial, sans-serif; color:#ffffff; padding-right:30px;}

.prefooter .tel-email{ top: 50%;
    transform: translateY(-50%);
    position: absolute;
    left:0; }

.lang-selector{ 
    float:right; 
    font-family:arial, sans-serif; 
    color:#ffffff; 
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    right:20px;
}

.social{
    
}

.social p{
    float:right;
    font-family:'Font Awesome 6 Brands Free', sans-serif; 
    color:#ffffff; 
    padding:6px;
    font-size:24px; 
}


/* 
=========================================================================
Header
=========================================================================
*/

#header{
    background:#202020;
    width:100%;
    padding:20px 0;
    z-index: 600;
    position: relative;
}


#header .logo{ width:20%}

/* 
=========================================================================
TB Header/Footer override
=========================================================================
*/

.footer {
	text-align: left;
	font-size: 16px;
	color: #ffffff;
	margin: 0;
	background-color:#202020;
	bottom: 0;
	padding: 1rem;
}

.footer p {
    color:#ffffff;
    line-height: 1.5em;
    font-size: 16px;
    font-weight: 500;
}

.footer a {
    margin: 0;
}
/* 
=========================================================================
Navigation 
=========================================================================
*/

.utility-nav{font-size:16px; padding-bottom:10px;}
.utility-nav a{color: #738996;}
.utility-nav a:hover{color: #ffffff; text-decoration:underline;}

.utility-nav li:first-child{ border-right:1px solid #cccccc; padding-right:10px; margin-right:10px; }

.navigation{
width:75%;
text-align:right;
float:right;
font-size:20px;
line-height:1.1em;
right:20px;
top: 50%;
transform: translateY(-50%);
position: absolute;
}

.primary-nav{  


}

.navigation ul li { display:inline-block;  }
.navigation p { color:#ffffff; }

.primary-nav a{ color:#ffffff;}
.primary-nav a:hover{ color:#738996; text-decoration:underline;}
.primary-nav li { padding-left:20px; }
.primary-nav li:last-child { padding-right:0; }



.panel{ padding:5%; }


.panel-title{ text-align:center; position: relative;}

.panel-title h2{
z-index: 30;
position: relative;
display: inline-block;
padding: 0 15px;
background:#f1f0f0;
}

.panel-title h2{background: #f1f0f0; color:#47828f}
.teal .panel-title h2{background: #f1f0f0; color:#000000}
.teal .panel-title:after{border-top: 3px solid #ffffff;}


.panel-title:after{
content: '';
border-top: 3px solid #47828f;
width: 100%;
position: absolute;
top: 20px;
left: 0;
z-index:20;
}

.benefit{ position:relative; margin-bottom:20px;}
.benefit img{ width:30%;}
.benefit h4{ width:60%; position:absolute; right:20px; top:50%; transform: translateY(-50%);}


.news-main{width: 55%; float: left;}
.news-main img{ padding-bottom:20px; }

.news-sidebar{ width:40%; float:right; }
.news-sidebar .news-side{ padding-bottom:10px; display:inline-block;}
.news-sidebar img{ 
width: 55%;
float: left;
height: 150px;
/* overflow: hidden; */
object-fit: cover;
padding-bottom:20px;
 }
.news-sidebar-text{ width:40%; float:right; }

.intro{background: linear-gradient(180deg, #47828f 131px, #f4f6f8 0px); padding-top: 30px; color:#ffffff;}

.intro .container{ background:rgba(0, 0, 0, 0.51); padding: 40px;}

.intro h1{  }


.staff p{color:#738996;}


.customer-cta{border-top: 3px solid #47828f; float: left; width: 100%; position: relative;}
.customer-cta h3{ position: absolute; top: 50%;}
.customer-cta a{ float:right; width:20%;}




/* 
=========================================================================
Form
=========================================================================
*/

.contact-form .panel-title h2{background:#f1f0f0;}

.form-group{ width: 50%;
    float: left;
    padding: 10px;
    box-sizing: border-box; 
}

.form-group.full{ width:100%; }

.form-group input {
    width: 100%;
    padding: 20px;
    float: left;
    box-sizing: border-box;
    border-radius: 5px;
    border: none;
}

.form-group select{ 
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    width:100%; 
    padding:20px; 
    float:left; 
    box-sizing:border-box; 
    outline: none;
    border-radius: 5px;
    border:none; 
}

.form-group textarea {
    width: 100%;
    padding: 20px;
    float: left;
    box-sizing: border-box;
    border-radius: 5px;
    border: none;
    font-family: inherit;
    font-size: inherit;
}

.form-group.full input[type="checkbox"] {
    transform: scale(1.2);
    display: flex;
    width:auto; 
    padding:20px; 
    float:left; 
    box-sizing:border-box; 
    border-radius: 5px;
    border:none;
}

.form-group label {
    color:#ffffff;
    padding:10px;  
    box-sizing:border-box; 
    border-radius: 5px;
}

.form-group label.same-address {
    color:#666666;
    padding:10px;  
    box-sizing:border-box; 
    border-radius: 5px;
}

input::placeholder, textarea::placeholder, .form-group select{color:#666666; text-transform:uppercase}

.fphone input[type="submit"] {
    padding:20px 30px; 
    border: 2px solid #738996; 
    float: right;
}

button.btn { 
    display:inline-block; 
    padding:20px 30px; 
    border: 2px solid #738996; 
    font-size:18px;
    font-weight:700;
    margin-top:0px;
    color:#ffffff;
    text-transform: uppercase;
    background:none;
    cursor: pointer;
}
			/*#828282 is the color used for button.btn for some godforsaken reason. 
				also the "button light" used in contact never existed to begin with.
				made "btn.light"" as a placeholder for the contact portion submit button. inspired but dumb a.btn.light which is never used.
				also changed margin to 0 for btn, (was 30px, which is now used in btn.light)*/
button.btn.light {
    color:#828282;
    margin-top:30px;
}
/* 
=========================================================================
TrashBilling
=========================================================================
*/
/*
a {
	color:#1074ba;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}
*/

.nav_container p {
	margin: 0.2rem;
}

.tb_form_grid {
	grid-column: span 2;
	justify-self: center;
}

.card_grid_text {
	grid-column: span 1;
}

.card_grid_btn {
	grid-column: span 1;
	margin-top: auto;
	margin-bottom: auto;
	justify-self: right;
}

 @media (max-width: 1000px) {
	body {
		font-size: 1.2rem !important;
	}
	header h1 {
		font-size: 3rem !important;
	}
	.card h2 {
		font-size: 2rem !important;
	}
	input[type="text"], input[type="password"], input[type="date"] {
		font-size: 1.5rem !important;
	}
	input[type="submit"], input[type="button"] {
		font-size: 1.5rem !important;
	}

	.card {
		grid-column: span 2;
		margin: auto;
		min-width: 600px;
		width: 95% !important;
		max-width: 100% !important; 
	}
	.card_wide {
		min-width: 600px;
		width: 95% !important;
		max-width: 100% !important; 
	}
	.card_grid_text {
		grid-column: span 2;
	}

	.card_grid_btn {
		grid-column: span 2;
		justify-self: center
	}
}

.msg_date {
	width: 200px;
}

.sub_container {
	display:flex;
	justify-content: space-around;
	gap: 2rem;
	margin-top: 2rem;
	flex-direction: row;
}

@media (max-width: 600px) {
  .sub_container {
    flex-direction: column;
  }
}

.flex_card {
	flex: 1;
	flex-flow: row nowrap;
	width: 50%;
	align-items: right;
}

.table_header {
	color: #738996;
    background-color: #363636;
    padding: 5px;
    height: 25px;
    text-align: center;
	width:100%;
	font-weight:bold;
}

.cust_summary_new {
	width: 100%;
	padding: 5px 5px 5px 15px;
	color: #000000;
	background-color: #ffffff;
}

.card {
	background: #ffffff;
	padding: 1rem;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	text-align: center;
	max-width: 420px;
	min-width: 420px;
	justify-self: end;
    background:#202020;
}

.card_right {
	justify-self: start;
    background:#202020;
}

.card p, b {
    color:#ffffff;
	text-align: left;
}

.card_wide p, b {
    color:#ffffff;
	text-align: left;
}

.card a {
    color: #738996;
}

.card_wide a {
    color: #738996;
}

.card a:hover { 
    color:#ffffff;
}

.card_wide a:hover { 
    color:#ffffff;
}

#header_cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1200px;
  min-width: 400px;
  margin: auto;
}

.card_grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	justify-items: left;
	gap: auto;
}

.card input[type=button], input[type=submit], input[type=reset] {
    display:inline-block; 
    padding:10px 10px; /*20px 30px */
    border: 2px solid #738996; 
    font-size:0.9em;
    font-weight:700;
    margin-top:0px;
    color:#f4f6f8;
    text-transform: uppercase;
    background:none;
    cursor: pointer;
}

.card_wide input[type=button], input[type=submit], input[type=reset] {
    display:inline-block; 
    padding:10px 10px; /*20px 30px */
    border: 2px solid #738996; 
    font-size:0.9em;
    font-weight:700;
    margin-top:0px;
    color:#f4f6f8;
    text-transform: uppercase;
    background:none;
    cursor: pointer;
}

@media screen {
	
}

.card_centered {
	background:#202020;
	padding: 1rem;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	grid-column: span 2;
	text-align: center;
	margin: 0 auto;
	max-width: 420px;
	min-width: 420px;
}

.card_wide {
	background:#202020;
	padding: 1rem;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	grid-column: span 2;
	max-width: 900px;
	width: 900px;
	justify-self: center;
    color:#ffffff;
}

.card_wide h2 {
    font-size: 1.5rem;
}
.card h2 {
    background:#202020;
    color:#ffffff;
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.card_find {
	background:#202020;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	width: 350px;
	text-align: center;
	font-size: 0.9em;
	line-height: 1.2em;
}

.card_cust_home_half {
	background:#202020;
	padding: 1rem;
	margin: 1rem;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	width: 500px;
	text-align: left;
}

main {
  flex: 1;
  padding: 1rem;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.column {
	display: flex;
	flex-flow: column wrap;
}

.row {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	height: 100%;
}
/*
.form-group {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	position: relative;
}
.form-group label {
	flex: 0 0 150px;
	margin-right: 10px;
	font-weight: bold;
}
.form-group input, .form-group select {
	flex: 1;
	padding: 8px;
	font-size: 1rem;
}

*/
.toggle-visibility {
	position: absolute;
	right: 10px;
	cursor: pointer;
	user-select: none;
}
.hidden {
	display: none !important;
}
.form-section {
	margin-top: 20px;
	border: 1px solid #ddd;
	padding: 15px;
	border-radius: 8px;
}

.card_cust_home {
	background:#202020;
	padding: 1rem;
	margin: 1rem;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	width: 1000px;
	text-align: center;
}

.card_cust_home_half h2 {
	text-align: center;
}

.card_item {
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	background: #d4d2d2;
	margin: 1%;
	padding: 1%;
	width: 44%;
}


.cust_home_wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.dropdown {
	background-color: #202020;
	color: #ffffff;
	border: 2px solid #738996;
	padding: 0.2rem 1.5rem;
	font-size: 1rem;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.tb {
    max-width: 800px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ****************************************************************
 * TrashBilling form
 */

table.pay_form {
	border-radius: 8px;
	text-align: left;
	margin: 0px;
	padding: 0px;
	font-size: 0.9em;
    line-height: 1.2em;
	display: flex;
	justify-content: center;
	border: 0;
}

table.pay_form td {
	padding: 2px;
}

table.tb_form {
	border-radius: 8px;
	text-align: left;
	margin: 0px;
	padding: 0px;
	font-size: 0.9em;
    line-height: 1.2em;
	width: 100%;
}

table.tb_form th {
	color: #ffffff;
	background-color: #47828f;
	padding: 5px;
	height:25px;
	text-align: center;
    font-size: 1.5rem;
}
table.tb_form td {
	color: #ffffff;
	background-color: #202020;
	padding: 5px;
	vertical-align: middle;
	text-align: left;
	/* border-right: 1px solid #D3D3D3;
    border-left: 1px solid #D3D3D3;
    border-bottom: 1px solid #D3D3D3; */
	padding:1%;
}

.input_cls {
	width: 100%;
}

.full_width {
	width: 100%;
}

td.tb_form_right {
	text-align: right !important;
}

table.inner_tb_form {
	text-align: left;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

table.inner_tb_form th {
	color: #ffffff;
	background-color: #47828f;
	padding: 5px;
	height:25px;
	text-align: center;
}

table.inner_tb_form td {
	color: #ffffff;
	padding: 5px;
	vertical-align: top;
	border: 0 !important;
}

tr.odd_row td {
	background-color: #202020 !important;
}

tr.even_row td {
	background-color: #202020 !important;
}

/* ****************************************************************
 * Customer Summary
 */

.tb { /* TB Container. Added shadow for example */
    max-width: 800px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

table.cust_summary {
	margin: 0px;
	width: 100%;
	font-size: 0.9em;
    min-width: 433px;
    border-radius: 8px;
    line-height: 1.2em;
}

/*
TODO continue fixing font sizing, settle on width, show trevor
    talk about changing TB code to accomodate stacking and/or changing top cust home header
    potentially make each two sections into two columns if wide enough?
*/

table.cust_summary input[type=button], input[type=submit], input[type=reset] {
    display:inline-block; 
    padding:10px 10px; /*20px 30px */
    border: 2px solid #738996; 
    font-size:0.9em;
    font-weight:700;
    margin-top:0px;
    color:#f4f6f8;
    text-transform: uppercase;
    background:#202020;
    cursor: pointer;
}

table.cust_summary p {
    font-size: 0.9em;
}

/*
table.cust_summary b {
    display: block;
    margin-bottom: 0.5em;
}
*/

table.cust_summary a {
    color: #738996;
}

table.cust_summary a:hover{ color:#ffffff;
}

table.cust_summary th {
	color: #ffffff;
	background-color: #47828f;
	padding: 5px;
	text-align: center;
    height: 25px;
}

table.cust_summary td {
	color: #ffffff;
	border-right: 1px solid #47828f;
	border-left: 1px solid #47828f;
	border-bottom: 1px solid #47828f;
    padding:3%; 
    background:#202020; 
    height:100%; 
}

/* Inner table, pretty much the same as tb_form but we need this */
/* to make it span the whole width of the table cell.            */
table.inner_table {
	width: 100%;
    text-align: left;
}

#account_history {
	/* margin: 0;
	padding: 0;
	border: 0; */
	display: none;
}

table.invoice_app {
	margin: 0px;
	/* width: 770px; */
	font-size: 0.9em;
}

table.invoice_app th {
	color: black;
	background-color: #27ae60;
	padding: 5px;
	text-align: center;
}

table.invoice_app td {
	color: #000000;
	background-color: #FFF;
	padding: 5px 5px 5px 15px;
	/* border-right: 1px solid #666666;
	border-left: 1px solid #666666; */
	border-bottom: 1px solid #666666;
}

table.invoice_app input[type=text] {
	width: 100px;
}

.tb-logout{
    padding:20px 30px;
}

.tb-logout a{ 
    display:inline-block; 
    padding:20px 30px; 
    border: 2px solid #738996; 
    font-size:18px;
    font-weight:700;
    color:#ffffff;
    text-transform: uppercase;
    text-align:center;
    cursor: pointer;
    background:#202020;
}

/* Lightbox background */
.lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

/* Lightbox content */
.lightbox-content {
	background: white;
	padding: 20px;
	border-radius: 8px;
	width: 90%;
	max-width: 90%;
	/* height: 90%; */
	max-height: 90%;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	position: relative;
	margin: 1rem auto;
	overflow-y: scroll;
	top: 0;
}

.lightbox_x {
	position: fixed;
	top: -5px;
	right: -5px;
	z-index: 9999;
}

/* ****************************************************************
 * General stuff
 */

 .home_card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-flow: row wrap;
	width: 100%;
}

.nav_container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: row wrap;
	width: 100%;
	padding: 5px;
}

.span2 {
	grid-column: span 2;
}

 div.nav_btn {
	float: right;
	padding: 3px 15px 3px 15px;
    margin-top: 5px;
    /*
    display:inline-block; 
    padding:10px 10px;
    border: 2px solid #738996; 
    font-size:0.9em;
    font-weight:700;
    margin-top:0px;
    color:#f4f6f8;
    text-transform: uppercase;
    background:none;
    cursor: pointer;*/
}

.unread_msgs {
	font-weight: bold;
	color: #990000;
}

/* 
=========================================================================
Footer
=========================================================================
*/

.footer{ background:#202020; padding:30px 20px; }

.footer li.l1{
padding-left: 35px;
box-sizing: border-box;
float: left;
width: 20%;
}

.footer-logo{ width:25%; float:left; color:#ffffff; text-align:center; }
.footer-logo img{ padding-bottom:10px; width:75%;}

.footer-nav{color:#738996; width:70%; float:right;}
.footer-nav a{ color:#ffffff;}
.footer-nav a:hover{ color:#738996; text-decoration:underline;}
.footer-nav ul { list-style:none; }
.footer-nav li { color:#738996;font-weight:700; }
.footer-nav ul.sub{padding-top:10px;}
.footer-nav ul.sub li { color:#738996;font-weight:400; padding-bottom:5px; font-size:14px;}












/* 
=========================================================================
Media Queries
=========================================================================
*/


@media (max-width: 1024px){

.news-main{width:100%;}
.news-main img{width: 63.5%; float: left; padding-right: 20px;}
.news-sidebar{width:100%;}
.news-sidebar .news-side{width:33.333333333333333333%; float: left; padding-right: 20px; box-sizing: border-box;}
.news-sidebar div:last-child{padding-right:0;}
.news-sidebar img, .news-sidebar-text{width:100%;}

}
/*-------------1024-------------*/




@media (max-width: 860px){

    #header, .preheader{display:none;}
    .slicknav_menu{display:block;}

    .flextext{ position: relative; top: 0; left: 0; transform: none; background: #202020; padding: 4%; max-width: 100%;}
    .mobile-logo{display:block; position: absolute; top: 14px; left: 20px; z-index: 500; width: 200px;}
    .flex-direction-nav{display:none;}

    .add-service .flex-container .flex-block{flex-basis:100%; margin-bottom:30px;}
    .add-service .flex-container .flex-block img{max-height: 260px; width:100%;}

    .benefit{ width:50%; float:left; margin-top:10px; }

    .staff .flex-container .flex-block{flex-basis:30%;}
    
    .form-group{width:100%;}

    .customer-cta h3{ position: relative; margin-top: 30px;}
    .customer-cta a{float:left; margin-top: 15px;}

    .intro{background: #47828f;}
    .intro .container{ background: #47828f; padding: 40px; padding-top: 10px; }

}/*-------------860-------------*/



@media (max-width: 640px){

    .flex-container{ display:block; }

    .benefit{ width:100%; bottom:0;}
    .benefit img{width:20%;}
    .benefit h4{width:73%;}

    .news-main img{width:100%;}
    .news-sidebar{ padding-top:30px; }


    .footer-logo{width:100%; padding-bottom:20px;}
    .footer-nav{display:none;}




}
/*-------------640-------------*/




@media (max-width: 480px){

     .news-sidebar .news-side{width: 100%; padding: 20px 0;}
     .tel-email p{float:none;}


}
/*-------------640-------------*/