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


*{padding:0px; margin : 0 }
*{font-family: 'Quicksand', sans-serif;}




#link-wrap{float:left;
width:auto;
height: auto;
margin-top: 28px;
}

.links{
margin-right:17px;
font-size:20px;
float:left;
color:#fff;
width: auto;
display:inline;
}

.logo-wrapper{
width: 80%;
margin-top: 30px !important;
height:auto;
overflow: auto;
overflow: hidden;
overflow: auto;
margin-left: 10%;
float: left;
margin-right: 10%;
padding-bottom:30px;

}




.crosstwo{
width:auto;
height: auto;
float: left;
font-size: 40px;
text-align: right;

margin-top: 15px;
margin-bottom: 10px;
cursor: pointer;
	font-weight: bold;
color:#fff ;
display: none
}



.burgertwo{width:auto;
height: auto;
float: left;
font-size: 30px;
text-align: right;
margin-top: 15px;
margin-bottom: 10px;
cursor: pointer;
color:#fff !important;
}





.mobile-icon{width:auto;
height: auto;
float: left;
font-size: 30px;
text-align: right;
margin-top: 15px;
margin-bottom: 10px;
cursor: pointer;
color:fff;
}

.tel-number{
margin-right:0px;
margin-top: 24px;
font-size:22px;
font-weight: bold;
float:right;
color:#fff;
width: auto;
display:inline;
}


.faa{color:#fff}

.red-bold{font-weight: bold !important;
color:#fff; }



footer{height: 60px;
width: 80%;float: left;
padding-left: 10%;
padding-right: 10%;
border-top: 1px solid #CCCCCC;
}


#footer-left{width:70%;
float:left;
height: 60px;
background: #fff;
color: #848484
}

body #footer-right{width:30%;
float:right;
height: 60px;
background: #fff;
text-align:right !important;
color: #848484
}

.social{margin-left: 10px;
height: auto;
display: inline;
font-size:20px; 
margin-top: 18px;
font-size:25px !important;
float:right
}


h6{margin-top: 20px;
font-weight: normal;
font-size: 12px;}

footer a {color:#999 }


#logo{
height: auto;
float: left;
width: 50%;
overflow: auto;
overflow: hidden
}

#logo img{width: 200px;
height: 28px}

#right-logo img{width: 200px;
	height: 28px}

#right-logo{
height: auto;
float: right;

width: 50%;
	text-align: right;
overflow: auto;
overflow: hidden;
padding-top:20px;
}





@media screen and (max-width: 4000px) and (min-width:769px){
.burger{display: none !important}
.mobile-icon{display: none}
}

@media screen and (max-width: 4000px) and (min-width:820px){
.burgertwo{display: none}
}


@media screen and (max-width: 1200px) and (min-width:1000px){
}


@media screen and (max-width: 400px) and (min-width:0px){
#logo {width:100%;
height:auto}

#logo img {width:100%;
height:auto}
}


@media screen and (max-width: 3000px) and (min-width:801px){
.imwrap{width:80%; height:auto; float:left; overflow:auto; margin-left:10%; margin-right:10%;
overflow:hidden; position:relative}}

@media screen and (max-width: 800px) and (min-width:0px){
	.imwra{width:100%; float:left; text-align:left; margin-top:0px !important;
margin-bottom:10px}

.imwrap{width:86%; height:auto; float:left; overflow:auto; margin-left:7%; margin-right:7%;
overflow:hidden; position:relative}

.new-wrapper-class{width:100%; height:auto; float:left; overflow:auto; margin-left:0%; margin-right:0%;
overflow:hidden;}

.innerboxes{padding-bottom:10px}
	
	
.burgertwo{display: none}

.tel-number{display: none}



body .bottom-link{border-bottom: none !important;
margin-bottom: 10px !important}
#link-wrap{float:left;
width:80%;
height: auto;
margin-top: 20px;

display:none;
}

.links{
width: 100%;
display: block;
position: relative;
padding-top: 0px;
text-transform: uppercase;
padding-bottom: 15px;
border-bottom: 1px dashed #fff;
margin-bottom: 20px;
color:#fff;
}

.top-link{margin-top: 10px}

.burger{width:auto;
height: auto;
float: right;
font-size: 30px;
text-align: right;
margin-top: 15px;
margin-bottom: 10px;
cursor: pointer;
color:#fff;
}


}

@media all and (max-width:4000px) and (min-width:1027px) and (orientation:landscape){.cross{display: none !important}
.mobile-icon{display: none !important}}

@media all and (max-width:1024px) and (min-width:900px) and (orientation:landscape){.tel-number{margin-top:23px !important} .cross{display:none !important;} .mobile-icon{display:none !important}
}
@media all and (min-width:700px)  and (orientation:landscape) {  
.crosstwo{display: none !important}

.burgertwo{display: none !important}
#link-wrap{display: block !important}	
} 

@media screen and (max-width: 801px) and (min-width:0px){
	
	#right-logo{width:100%; float:left; text-align:center;
	margin-bottom:10px; height:auto; overflow:auto; overflow:hidden}
	#logo{width:100%; float:left}
	.tag-line{color:#333 padding:0px; font-size:25px}
	body .logo_im{width:100% !important ; height:auto !important}
	}
	
	@media screen and (max-width: 801px) and (min-width:764px){.tag-line{font-size:35px !important}}

.logo_im{width:60% !important; height:auto !important}



@media screen and (max-width: 3000px) and (min-width:1681px){.tag-line{margin-top:30px; font-size:50px !important; width:70%; float:right}}


@media screen and (max-width: 1680px) and (min-width:1367px){body .tag-line{font-size:40px !important; margin-top:28px; width:70%; float:right}}

@media screen and (max-width: 1366px) and (min-width:1281px){body .tag-line{font-size:35px !important; margin-top:25px; width:70%; float:right}}

@media screen and (max-width: 1280px) and (min-width:1100px){body .tag-line{font-size:35px !important; margin-top:15px; width:70%; float:right}}

@media screen and (max-width: 1099px) and (min-width:900px){body .tag-line{font-size:30px !important; margin-top:10px; width:70%; float:right}}

@media screen and (max-width: 899px) and (min-width:766px){body .tag-line{font-size:40px !important;}}


@media screen and (max-width: 3000px) and (min-width:701px){.desk-hid{display:none}}
@media screen and (max-width: 700px) and (min-width:0px){.mob-hid{display:none}}







.video-wrapper{width:100%; 
height:auto; 
overflow:auto;
overflow:hidden;
position:relative;
text-align:right;

float:left;
padding-bottom:0px !important;

  
  

}

.response{width:100%; height:auto}


.wrapper-class
{width:80%; 
padding-left:10%; 
padding-right:10%;
float:left;  
height:auto;
overflow:auto;
margin-bottom:40px;
padding-top:10px;
overflow:hidden
}


.left{width:45%; height:auto;
overflow:auto;
overflow:hidden;
float:left}

.right{width:45%;
height:auto;
overflow:auto;
overflow:hidden;
float:right}


.two{font-size:25px; color:#333;
margin-bottom:10px}
.p-text{font-size:18px; color:#666; line-height:26px;}


.line{border-top:1px solid #999;}
@media screen and (max-width: 801px) and (min-width:0px){
	
	.p-text, .two{text-align:left}
.left{width:100%; 
height:auto;
overflow:auto;
overflow:hidden;
margin-bottom:30px;
float:left}


.right{width:100%;
height:auto;
overflow:auto;
overflow:hidden;
float:left}

	
	
	}
	


/* START - Simple Mortage Payment Calculator */

.smpc-div {
	background-color: #f9f9f9;
	border:1px solid #cccccc;
	border-radius: 7px;
	padding:15px;
}

.smpc-error {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color:#ca0000;
}

.smpc-monthlypayment {
	margin-top:15px;
	font-size:24px;
	color:#ca0000;
}

.smpc-friendlyreminder {
	display:none;
}

/* END - Simple Mortage Payment Calculator */



.mfsc-middlediv {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #eaeaea;
	width:240px;
	height:340px;
	line-height:20px;
	margin:0 5px 5px 0;
	border:1px solid #aaaaaa;
	border-radius:10px;
	padding:15px;
	float:left;
}

.mfsc-lowerdiv {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #dadada;
	width:240px;
	height:340px;
	line-height:20px;
	border:1px solid #888888;
	border-radius:10px;
	margin:0 5px 5px 0;
	padding:15px;
	float:left;
}

.mfsc-lowerdiv p {
	margin:2px 0 0px 0;
}

.mfsc-innerdiv {
	width:50%;
	float:left;
}

.mfsc-innerdiv p {
	margin:2px 0 5px 0;
}

.mfsc-resetdiv {
	clear:both;
}

.mfsc-costs {
	height:23px;
	width:100px;
	background-color: #ffffff;
	border:1px solid #bbbbbb;
	border-radius: 3px;
	padding-left:10px;
}

.mfsc-savings {
	height:23px;
	width:140px;
	background-color: #ffffff;
	border:1px solid #aaaaaa;
	border-radius: 3px;
	padding-left:10px;
}

.mfsc-afteryear {
	height:20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.mfsc-error {
	height:20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color:#ca0000;
	line-height:20px;
}

.mfsc-infoMessage {
	height:20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color:#ca0000;
	line-height:20px;
}

.mfsc-pepTalk {
	display:none;
}

/* END - MPG Fuel Savings Calculator */


/* START - Easy Savings Calculator */

.esc-div {
	width:300px;
	background-color: #f9f9f9;
	border:1px solid #cccccc;
	border-radius: 7px;
	padding:15px;
}

.esc-error {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color:#ca0000;
}

.esc-finalbalance {
	margin-top:15px;
	font-size:24px;
	color:#ca0000;
}

/* END - Easy Savings Calculator */


@media screen and (max-width: 3000px) and (min-width:1600px)
{.big-bot{margin-bottom:280px}}

@media screen and (max-width: 1599px) and (min-width:1200px)
{.big-bot{margin-bottom:200px}}

@media screen and (max-width: 1199px) and (min-width:801px)
{.big-bot{margin-bottom:180px}}

@media screen and (max-width: 800px) and (min-width:766px)
{.big-bot{margin-bottom:110px}}

.cacl{color:#FFF; box-shadow: 2px 2px #888888; background-color:#333; border:none; outline:none; padding:10px; margin-top:10px; cursor:pointer}

.cacl:hover{box-shadow: 1px 1px #888888;}

 
 .carousel,.carousel-inner,.carousel-item{position:relative}.carousel-inner{width:100%;overflow:hidden}.carousel-item{display:none;width:100%}
.carousel-item-next,.carousel-item-prev{position:absolute;top:0}@media (-webkit-transform-3d){.carousel-item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;transition:transform .6s ease-in-out,-webkit-transform .6s ease-in-out,-o-transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.active.carousel-item-right,.carousel-item-next{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.active.carousel-item-left,.carousel-item-prev{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@supports ((-webkit-transform:translate3d(0,0,0)) or (transform:translate3d(0,0,0))){.carousel-item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;transition:transform .6s ease-in-out,-webkit-transform .6s ease-in-out,-o-transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.active.carousel-item-right,.carousel-item-next{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.active.carousel-item-left,.carousel-item-prev{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:15%;color:#fff;text-align:center}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:40px;height:40px;color:#000!important;background:center center no-repeat;-webkit-background-size:100% 100%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")}.carousel-control-next-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")}.carousel-indicators{position:absolute;right:0;bottom:10px;left:0;z-index:15;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none}.carousel-indicators li{position:relative;-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;max-width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:rgba(255,255,255,.5)}.carousel-indicators li::after,.carousel-indicators li::before{left:0;display:inline-block;width:100%;height:10px;content:"";position:absolute}.carousel-indicators li::before{top:-10px}.carousel-indicators li::after{bottom:-10px}.carousel-indicators .active{background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%}body .carousel-item img{width:100%!important;height:auto!important}

/*FIREFOX SLIDER POSITIONING*/
.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:flex}



/*IE 11 AND EDGE SLIDER POSITIONING*/

@charset "<Internet Explorer 11 and Microsoft Edge>"; _:-ms-lang(x), .carousel-item-next,.carousel-item-prev,.carousel-item.active{display:-webkit-box !important;display:-webkit-flex !important;display:-ms-flexbox !important;display:flex !important}



/******************************************************************************/


/*ARROWS DESKTOP*/
.arrow-color{color:#fff !important;font-size:50px!important;opacity:.8; -webkit-text-stroke-width: 1px !important;
   -webkit-text-stroke-color: black}

/*ARROWS MOBILE*/
@media screen and (max-width:750px) and (min-width:0px){.arrow-color{color:#fff!important;font-size:25px!important;opacity:.8} .spacer{width:100%; float:left; height:60px !important; background-color:#fff}


.ify{height:250px; width:100% !important; float:left; border:none !important; outline:none !important}

}
@media screen and (max-width:3000px) and (min-width:749px){
.ify{height:400px; width:100% !important; float:left; border:none !important; outline:none !important}
}
.mt{top:10px !important; position:relative !important
}





.box{height:200px !important; display:none !important; border:#333 !important}

body .inst{color:#cc6600 !important;}
@media screen and (max-width:3000px) and (min-width:1500px){
	
	.welcome{width:60%; margin-left:20%; margin-right:20%; height:auto; overflow:auto; overflow:hidden; 
 float:left; margin-top:60px;
}
.welcomeh{font-size:50px; color:#333;
margin-top:30px;
margin-bottom:35px; line-height:0px}

.welcome-text{font-size:22px; color:#666; line-height:30px}

	
	.buts{display:block; float:left; padding:7px 8px 7px 8px; border-radius:5px; background-color:#fff; color:#000; margin-top:10px;}

	.aws{ font-size:65px !important; color:#fff; margin-bottom:20px;}
.line{padding-top:50px}
.boxes-wrapper{width:60%; height:auto; overflow:auto; overflow:hidden; margin-top:20px; float:left;
padding-left:20%; padding-right:20%;

display : flex;

justify-content : space-between;
}



.cont-wrapper{width:60%; height:auto; overflow:auto; overflow:hidden; margin-top:0px; float:left;
padding-left:20%; padding-right:20%;

}


.tel-email{height:auto; overflow:auto; overflow:hidden; width:100%;
float:left; background-color:#666}


.innerboxestwo{width:90%; padding:2%; float:left; height:auto;
overflow:auto; overflow:hidden
}

.tels{ font-size:30px !important; width:auto; display:inline-block; margin-bottom:10px;  padding:10px; background-color:#333}

.shift{margin-top:20px;}
.orange{color:#333 !important}





.boxy{height:auto; overflow:auto; overflow:hidden; width:30%;
float:left; background-color:#333; text-align:center !important
}

.boxhtwo{font-size:30px; color:#fff !important;
margin-bottom:5px;}
.boxp{font-size:18px; color:#fff; line-height:25px}

.innerboxes{width:90%; padding:5%; float:left; height:auto;
overflow:auto; overflow:hidden
}}

@media screen and (max-width:1499px) and (min-width:1201px){
	
	#right-logo h1{color:#000 !important; margin-top:25px; font-size:30px !important}
	
	.welcome{width:80%; margin-left:10%; margin-right:10%; height:auto; overflow:auto; overflow:hidden; 
 float:left; margin-top:60px;
}
.welcomeh{font-size:40px; color:#333;
margin-top:25px;
margin-bottom:25px; line-height:0px}

.welcome-text{font-size:22px; color:#666; line-height:30px}

	
	.buts{display:block; float:left;  padding:7px 8px 7px 8px;  border-radius:5px; background-color:#fff; color:#000; margin-top:10px;}

	.aws{ font-size:65px !important; color:#fff; margin-bottom:20px;}
.line{padding-top:50px}
.boxes-wrapper{width:80%; height:auto; overflow:auto; overflow:hidden; margin-top:20px; float:left;
padding-left:10%; padding-right:10%;

display : flex;

justify-content : space-between;
}


.cont-wrapper{width:80%; height:auto; overflow:auto; overflow:hidden; margin-top:0px; float:left;
padding-left:10%; padding-right:10%;

}


.tel-email{height:auto; overflow:auto; overflow:hidden; width:100%;
float:left; background-color:#666}


.innerboxestwo{width:94%; padding:3%; float:left; height:auto;
overflow:auto; overflow:hidden
}

.tels{ font-size:27px !important; width:auto; display:inline-block; margin-bottom:10px;  padding:10px; background-color:#333}

.shift{margin-top:20px;}
.orange{color:#333 !important}


.boxy{height:auto; overflow:auto; overflow:hidden; width:30%;
float:left; background-color:#333
}

.boxhtwo{font-size:25px; color:#fff !important;
margin-bottom:5px;}
.boxp{font-size:18px; color:#fff; line-height:25px}

.innerboxes{width:90%; padding:5%; float:left; height:auto;
overflow:auto; overflow:hidden
}}
@media screen and (max-width:699px) and (min-width:0px){.greywrap{background-color:#E8E8E8; width:90%; padding-left:5%; padding-right:5%; height:auto; overflow:auto; overflow:hidden; float:left}
}
@media screen and (max-width:999px) and (min-width:700px){.greywrap{background-color:#E8E8E8; width:92%; padding-left:3%; padding-right:3%; height:auto; overflow:auto; overflow:hidden; float:left}
}

@media screen and (max-width:1199px) and (min-width:1000px){
	
	#right-logo h1{color:#000 !important; margin-top:10px; font-size:28px !important}
	
	
	.greywrap{background-color:#E8E8E8; width:92%; padding-left:3%; padding-right:3%; height:auto; overflow:auto; overflow:hidden; float:left}
	.cont-wrapper{width:90%; height:auto; overflow:auto; overflow:hidden; margin-top:0px; float:left;
padding-left:5%; padding-right:5%;

}


.tel-email{height:auto; overflow:auto; overflow:hidden; width:100%;
float:left; background-color:#666}


.innerboxestwo{width:94%; padding:3%; float:left; height:auto;
overflow:auto; overflow:hidden
}

.tels{ font-size:25px !important; width:auto; display:inline-block; margin-bottom:10px;  padding:10px; background-color:#333}

.shift{margin-top:20px;}
.orange{color:#333 !important}
	
	.welcome{width:90%; margin-left:5%; margin-right:5%; height:auto; overflow:auto; overflow:hidden; 
 float:left; margin-top:40px;
}
.welcomeh{font-size:35px; color:#333;
margin-top:30px;
margin-bottom:30px; line-height:0px}

.welcome-text{font-size:22px; color:#666; line-height:30px}



	
.buts{display:block; float:left;  padding:7px 8px 7px 8px;  border-radius:5px; background-color:#fff; color:#000; margin-top:10px;}

	.aws{ font-size:55px !important; color:#fff; margin-bottom:20px;}
	.line{padding-top:40px}
.boxes-wrapper{width:90%; height:auto; overflow:auto; overflow:hidden; margin-top:20px; float:left;

padding-left:5%; padding-right:5%;

display : flex;
justify-content : space-between;


}

.boxy{height:auto; overflow:auto; overflow:hidden;  width:30%;
float:left; background-color:#333

}

.innerboxes{width:90%; padding:5%; float:left; height:auto;
overflow:auto; overflow:hidden
}

.boxhtwo{font-size:25px; color:#fff !important;
margin-bottom:5px;}
.boxp{font-size:18px; color:#fff; line-height:25px}

}


@media screen and (max-width:999px) and (min-width:0px){
	
	.bp2{line-height:25px !important}
	
	.cont-wrapper{width:90%; height:auto; overflow:auto; overflow:hidden; margin-top:0px; float:left;
padding-left:5%; padding-right:5%;

}


.tel-email{height:auto; overflow:auto; overflow:hidden; width:100%;
float:left; background-color:#666;}


.innerboxestwo{width:92%; padding:4%; float:left; height:auto;
overflow:auto; overflow:hidden
}

body .tels{ font-size:20px !important; width:auto; display:inline-block; margin-bottom:10px;  padding:10px; background-color:#333; word-break:break-all}

.shift{margin-top:20px;}
.orange{color:#333 !important}
	
	.links{

font-size:16px;

}

	
		.welcome{width:90%; margin-left:5%; margin-right:5%; height:auto; overflow:auto; overflow:hidden; 
 float:left; margin-top:10px;
}
.welcomeh{font-size:25px; color:#333;
margin-top:30px;
margin-bottom:20px; line-height:0px}

.welcome-text{font-size:18px; color:#666; line-height:30px}

	
	.buts{display:block; float:left;  padding:7px 8px 7px 8px; border-radius:5px; background-color:#fff; color:#000; margin-top:10px;}

	.aws{ font-size:30px !important; color:#fff; margin-bottom:15px;}
.boxes-wrapper{width:90%; height:auto; overflow:auto; overflow:hidden; margin-top:20px; float:left;

padding-left:5%; padding-right:5%;


}

.boxy{height:auto; width:100%;
margin-bottom:30px;
overflow:auto; overflow:hidden;
float:left; background-color:#333
}

.innerboxes{width:90%; padding:5%; float:left; height:auto;
overflow:auto; overflow:hidden
}

.mob-box-btm{margin-bottom:-5px !important; }

.boxhtwo{font-size:23px; color:#fff !important;
margin-bottom:3px;}
.boxp{font-size:18px; color:#fff}

}





.bot-fix{margin-bottom:20px !important; margin-top:0px !important}



.rmore{font-size:14px; color:#000; margin-bottom:10px;}

.homei{font-size:30px !important; position:relative; top:-8px !important}

.tels{ font-size:30px !important; width:auto; display:inline-block; margin-bottom:10px;  padding:10px; background-color:#333}

.shift{margin-top:20px;}
.orange{color:#333 !important}

.spacer{width:100%; float:left; height:120px; background-color:#fff}



@media screen and (max-width:3000px) and (min-width:1600px){#right-logo h1{color:#000 !important; margin-top:40px; font-size:35px !important}
	}

@media screen and (max-width:3000px) and (min-width:1200px){.tlfix{margin-top:50px !important} .spacer{width:100%; float:left; height:120px; background-color:#fff}
}
@media screen and (max-width:1199px) and (min-width:900px){.tlfix{margin-top:40px !important}
.spacer{width:100%; float:left; height:80px; background-color:#fff}

}

.comp{text-decoration:underline !important}

body .oray{color:#333 !important}

.image-wrap{width:100%; height:auto; overflow:auto; overflow:hidden; float:left; margin-bottom:10px;}

.chap-break{width:100% !important; height:10px !important; float:left !important}

.con{color:#333; text-decoration:underline}

.free{font-weight:bold; color:#999 !important}
body .orq{background-color:#333 !important; color:#fff !important}

.contact-details{margin-bottom:10px}


.contactme{ margin-top:10px !important; float:left !important; height:auto !important; overflow:auto !important; overflow:hidden !important; display:block !important; margin-left:0px !important}

.color-fix{color:#333 !important}

@media screen and (max-width:801px) and (min-width:0px){body .let{text-align:left !important}
.mmm{margin-bottom:30px}
.wrapper-class
{width:90%; 
padding-left:5%; 
padding-right:5%;
float:left;  
height:auto;
overflow:auto;
margin-bottom:40px;
padding-top:30px;
overflow:hidden
}


}


@media screen and (max-width:3000px) and (min-width:701px){.submits {
    width: 30%;
    height: 60px;
    margin-bottom: 10px;
    margin-left: 35%;
    margin-right: 35%;
    float: left;
	background-color:#3399ff;
	border:none;
	outline:none;
    font-size: 18px;
    color: #fff;
	padding-top:19px;
	padding-bottom:17px;
	cursor:pointer !important;
	text-transform:uppercase;
	box-shadow: 2px 2px #888888;
    
}}
@media screen and (max-width:700px) and (min-width:0px){
.submits {
    width: auto !important;
    height: 60px;
    margin-bottom: 10px;
    margin-left: 0% !important;
    margin-right: 0%;
    float: left;
	background-color:#3399ff;
	border:none;
	outline:none;
    font-size: 18px;
	padding-left:25px !important; padding-right:25px !important;
    color: #fff;
	padding-top:19px;
	padding-bottom:17px;
	cursor:pointer !important;
	text-transform:uppercase;
	box-shadow: 2px 2px #888888;
}}

/*FORM**********************************************/

 .form-box {
    height: 45px!important;
    margin-bottom: 10px!important;
    padding-left: 2%!important;
    padding-right: 1%!important;
   
    color:#000 !important;
    font-size: 18px!important;
    border: 1px solid #666;
		font-family:Arial, Helvetica, sans-serif !important;
    float: left!important;
	width:95%;
}


body .fbt{
    height: 45px!important;
    margin-bottom: 10px!important;
		font-family:Arial, Helvetica, sans-serif !important;
   
   
    
    font-size: 18px!important;
    border: 1px solid #666!important;
	
    float: left!important;
	width:98%;
}

 #message {
    height: 100px!important;
    margin-bottom: 10px!important;
	background-image:url(../pics/pen.jpg);
	background-repeat:no-repeat;
    padding-left: 2%!important;
    padding-right: 1%!important;
	padding-top:10px;
	font-family:Arial, Helvetica, sans-serif !important;
  
    color:#000 !important;
    font-size: 16px!important;
    border: 1px solid #666;
    float: left!important;
	width:95%;
}

#message:focus{
background-image:url(../pics/white.jpg);
background-repeat:no-repeat;

}


.small-bot{margin-bottom:80px !important}

.form-bold{font-weight:bold !important}

.imageflex{width:100% !important; height:auto !important}

.hwd{color:#333 !important}



.test-wrap{margin-top:30px !important; padding-top:0px !important}

@media screen and (max-width:3000px) and (min-width:767px){
	
	.gal{margin-top:30px !important}
	
	}

@media screen and (max-width:3000px) and (min-width:1200px){
.greywrap{background-color:#E8E8E8; width:96%; padding-left:2%; padding-right:2%; height:auto; overflow:auto; overflow:hidden; float:left}
}

.flexed,.google-reviews,.review-title{float:left;height:auto}.google-reviews{overflow:auto;overflow:hidden;width:100%;margin-top:0;margin-left:0%;margin-right:0%;}.happy-customers{height:auto;overflow:auto;overflow:hidden;width:100%;margin-top:0;padding-bottom:25px;margin-left:10px;margin-bottom:30px}.review-title{overflow:auto;overflow:hidden;width:95%;margin-top:15px; font-size:25px!important;color:#F90;margin-bottom:20px;padding:30px 5% 30px 0}@media screen and (max-width:375px) and (min-width:0px){.amount{width:100%;display:block;margin-left:0!important;margin-top:10px}}
@media screen and (max-width:700px) and (min-width:0px){.master-review-title{font-size:25px!important;padding:0!important;line-height:30px !important}.customer-opinion,.customers{font-weight:400;line-height:normal}.customers{font-size:18px!important}.customer-opinion{font-size:15px;float:left}}.flexed{overflow:auto;overflow:hidden;width:100%;display:flex;justify-content:space-between}.amount{font-size:18px!important;color:#000!important;margin-left:20px}.google-reviews, p, h{text-align:left!important}
@media screen and (max-width:1025px) and (min-width:780px){.circles{height:50px;width:53px!important;float:left;position:relative;text-align:center;background-color:red;border-radius:50px}} @media screen and (max-width:768px) and (min-width:766px){.circles{height:50px;width:58px!important;float:left;position:relative;text-align:center;background-color:red;border-radius:50px}} @media screen and (max-width:736px) and (min-width:700px){.circles{height:50px;width:58px!important;float:left;position:relative;text-align:center;background-color:red;border-radius:50px}} @media screen and (max-width:670px) and (min-width:667px){.circles{height:50px;width:58px!important;float:left;position:relative;text-align:center;background-color:red;border-radius:50px}} @media screen and (max-width:660px) and (min-width:0px){.circles{height:50px;width:60px!important;float:left;position:relative;text-align:center;background-color:red;border-radius:50px}}

/********************************************************************************/



/*MAIN TITLE*/
.master-review-title
{font-size:23px;
color:#000 !important;
padding:0;
margin-bottom:0px;
line-height:0}

/*COLOURED CIRCLE*/
.circles{height:50px;
width:50px;
float:left;
position:relative;
text-align:center;
background-color:#F00;
border-radius:50px;}

/*LETTER INSIDE CIRCLE*/
.letter{
top:10px;
position:relative;
font-weight:normal;
font-size:25px;
color:#fff;
}

/*CUSTOMER NAME*/
.customers{color:#000;
font-weight:bold;
font-size:22px !important;
line-height:normal}

/*CUSTOMER REVIEW TEXT*/
.customer-opinion{color:#000;
font-size:18px;
font-weight:normal;
float:left;
line-height:30px}


/*STARS*/
.fa-star{color:#F90 !important}





/*CIRCLE COLORS*/
.blue{background-color:#4885ed !important}
.greeny{background-color:#3cba54 !important}
.yellow{background-color:#f4c20d !important}
.oranges{background-color:#F90 !important;}
.grey{background-color:#666 !important}
.purple{background-color:#551A8B !important}

body .btwo{background-color:#333 !important; color:#FFF !important; cursor:pointer}

.hiding{display:none}
.clos{display:none}




@media screen and (max-width:3000px) and (min-width:760px){
	
	.fillq{width:80%; margin-left:10%; margin-right:10%;}
	
	.ip{width:60% !important; margin-left:20% !important; margin-right:20% !important;}
	.linewqtwo{width:30%; height:1px ; margin-top:35px; background-color:#CCC; float:left; margin-left:35%; margin-right:35%}
.disw{width:80%; float:left; margin-bottom:60px;
margin-top:80px; height:auto; overflow:auto; overflow:hidden; margin-left:10%; margin-right:10%}

	
	.whiter{margin-bottom:40px; margin-top:60px !important}

.veryorange{color:#333 !important}

.linewq{width:30%; height:1px ; margin-top:100px; background-color:#CCC; float:left; margin-left:35%; margin-right:35%}

footer{height: 76px !important;
width: 80%;float: left;
padding-left: 10%;
padding-right: 10%;
padding-top:9px !important;
border-top: 1px solid #CCCCCC;
}


#footer-left{width:70%;
float:left;
height: 60px;
background: #fff;
color: #848484
}

#footer-right{width:30%;
float:right;
height: 60px;
font-size:25px;
background: #fff;
color: #666
}

.social{margin-left: 10px;
height: auto;
display: inline;
font-size:20px; 
margin-top: 18px;
font-size:28px !important;
float:right
}


h6{margin-top: 20px;
font-weight: normal;
font-size: 14px;}

footer a {color:#666; !important }

}


@media screen and (max-width:759px) and (min-width:650px){

footer{height: 78px !important;
width: 80%;float: left;
padding-left: 10%;
padding-right: 10%;
padding-top:9px;
border-top: 1px solid #CCCCCC;
}


#footer-left{width:70%;
float:left;
height: 60px;
background: #fff;
color: #848484
}

#footer-right{width:30%;
float:right;
height: 60px;
font-size:25px;
background: #fff;
color: #666
}

.social{margin-left: 10px;
height: auto;
display: inline;
font-size:20px; 
margin-top: 18px;
font-size:28px !important;
float:right
}


h6{margin-top: 20px;
font-weight: normal;
font-size: 12px;}

footer a {color:#666; !important }

}

@media screen and (max-width:759px) and (min-width:650px){

footer{height: 76px !important;
width: 80%;float: left;
padding-left: 10%;
padding-right: 10%;
padding-top:9px;
border-top: 1px solid #CCCCCC;
}
}

@media screen and (max-width:649px) and (min-width:0px){
	
	
	
	#footer-right{display:none !important}

#footer-left{width:100% !important;
float:left;
padding-top:9px;
text-align:center !important;
height: 67px;
background: #fff;
color: #848484
}
}

@media screen and (max-width:801px) and (min-width:0px){.p-text, .two{text-align:left !important}

.slip{margin-top:-15px !important; }

.welcomeh{line-height:25px !important}
}


.contact-details{margin-bottom:10px}

@media screen and (max-width:600px) and (min-width:0px){
.contactme{ margin-top:5px !important; float:left !important; height:auto !important; overflow:auto !important; overflow:hidden !important}

.contact-details{margin-bottom:10px; font-size:20px}

.pin{margin-left:20px !important}

}

.disclaimer{position:fixed; box-shadow: 3px 3px #888888; height:700px; width:70%; background-color:#F36; left:15%; right:15%; top:15%; bottom:15%; z-index:3}

.inner-dis{width:90%; padding:5%; height:auto; overflow:auto; overflow:hidden; float:left}

.opais{background-image:url(../pics/opacity.png); width:100% !important; height:100% !important; left:0px; top:0px; position:fixed; z-index:2}


@media screen and (max-width:759px) and (min-width:0px){
	
	.pushup{margin-top:60px !important; margin-bottom:40px}
	
	.wid{margin-bottom:15px}}

.veryorange{color:#333 !important}

.linewq{width:40%; height:1px ; margin-top:75px; background-color:#CCC; float:left; margin-left:30%; margin-right:30%}

.linewqtwo{width:40%; height:1px ; margin-top:0px; background-color:#CCC; float:left; margin-left:30%; margin-right:30%}
.disw{width:80%; float:left; margin-bottom:60px;
margin-top:70px; height:auto; overflow:auto; overflow:hidden; margin-left:10%; margin-right:10%}

}


.best-wrap{margin-top:60px !important; padding-top:0px !important; width:80% !important; margin-left:10% !important;
margin-right:10% !important;
padding-left:0% !important; padding-right:0% !important}


.fillq{text-align:center !important}

.wid{width:100% !important; display:block; float:left; height:auto;
margin-top:40px !important;
overflow:auto; overflow:hidden}

.days{font-weight:bold; color:#333}

.open{font-weight:bold; color:#666}

.contq{color:#333; font-weight:bold}

.contactme{line-height:30px !important}



@media screen and (max-width:3000px) and (min-width:769px){
	
	.bxdwrp{width:80%; height:auto; overflow:auto; overflow:hidden; margin-bottom:35px; float:left;
padding-left:10%; padding-right:10%;

display : flex;

justify-content : space-between;
}

.bxd{width:30%; float:left;
height:auto;
overflow:auto; overflow:hidden;
}

}
.imwra{width:100%; float:left; text-align:left; margin-top:10px;
margin-bottom:10px}


@media screen and (max-width:768px) and (min-width:0px){

#right-logo{display:none}
.bxdwrp{width:80%; height:auto; overflow:auto; overflow:hidden; margin-bottom:0px; float:left;
padding-left:10%; padding-right:10%;


}

.bxd{width:100%; float:left;
margin-bottom:30px;
height:auto;
overflow:auto; overflow:hidden;
}
}


.responder{width:100%; height:auto}
.tag-line, .two{color:#666 !important}

.bxdwrp a {cursor:pointer}

.witty{color:#fff !important}

.mbt{margin-bottom:30px !important; margin-top:15px}

.inergrey{margin-bottom:10%;
width:100%; float:left; color:#333; font-size:20px; margin-right:0%; margin-top:20px;
margin-left:0%;
margin-bottom:20px}
.grey-right img{text-align:right !important}

.hb{margin-bottom:10px}

.top{margin-top:20px}

.minili{font-size:18px !important; color:#fff !important; margin-bottom:10px !important;}
.miniul{width:86% !important; margin-left:7% !important; margin-right:7% !important; float:left !important}



.minilis{font-size:18px !important; color:#666 !important; margin-bottom:10px !important; line-height:20px !important}
.miniuls{width:92% !important; margin-top:15px !important; margin-left:4% !important; margin-right:4% !important; float:left !important}

.mbq{margin-bottom:25px !important}

.jop

.icq{width:20px !important; display:none; height:20px !important}



.innerboxes{position:relative; padding-bottom:20px}

.imwra{width:100%; float:left; text-align:left; margin-top:5px;
margin-bottom:10px;}

.boxhtwo{margin-bottom:5px}

body .<a href="index.php">{width:100% !important}
@media screen and (max-width:3000px) and (min-width:0px){
.contact-details{font-size:20px !important}
}
@media screen and (max-width:801px) and (min-width:0px){
.pul{margin-bottom:10px !important} .mb{margin-bottom:20px !important}}
@media screen and (max-width:899px) and (min-width:0px){
.cumon{margin-top:-5px !important}

.welcomeh{line-height:30px !important; margin-bottom:10px !important}
}

@media screen and (max-width:3000px) and (min-width:1367px){
.cumon{width:80% !important; margin-left:10% !important; margin-right:10% !important}}
@media screen and (max-width:3000px) and (min-width:900px){.cumon{margin-top:25px !important}

.fsz{font-size:30px !important}
.secr{margin-left:8% !important}}


.qs{font-size:18px; color:#666; line-height:26px; margin-bottom:30px;}
.quest{width:100%; display:block; float:left; color:#333; margin-bottom:5px; font-size:20px; font-weight:bold}

.bab{ padding:3px 8px 3px 8px !important;}

.contact-details{ word-break: break-all !important;}

body .customers{line-height:28px !important; font-size:20px !important}

.new-wrapper-class{width:100%; height:auto; float:left; overflow:auto;
overflow:hidden;}

.lqt{width:100%; font-size:19px; height:auto; float:left; margin-top:10px; color:#999999; float:left}

.caq a{color:#333!important}

.dwq{font-size:14px !important; position:relative; top:13px;}

ul li a {
color : #CCC;
font-size : 25px;
text-decoration : none;
font-family: 'Quicksand', sans-serif;
font-weight : normal !important ;
}
ul li {
float : left;
display : inline;
margin-left : 25px;
}
ul {
margin-top : 25px;
text-align : right;
width : auto;
float : right;
height : auto;
}
nav {
height : 75px;
width : 80%;
padding-left : 10%;
padding-right : 10%;
float : left;
}
.current {
border-bottom : 1px solid #3399ff;
}
.fa-phone {
font-weight : bold;
color : #3399ff !important ;
}
.desktop-telephone {
float : left;
width : auto;
height : auto;
font-size : 25px;
font-family: 'Quicksand', sans-serif;
color : #FFF;
margin-top : 25px;
}



header{width:80%; height:auto; float:left; padding-left:10%; padding-right:10%;
background-color:#000;  overflow:auto; overflow:hidden}

.left-header img{width:100%; height:auto;}


.left-header{width:15%; height:auto; float:left; padding-top:30px; padding-bottom:30px}
.right-header{width:40%; height:auto; float:right;  text-align:right; padding-top:50px;}

.header-details{float:right; color:#ccc; width:100%; margin-bottom:9px; font-size:24px;}

.sm-color{color:#3399ff  !important}

.cursive{ line-height:0px}

@media screen and (max-width:3000px) and (min-width:701px) {
.mobile-bar {
display : none;
}
nav {
background-color : #333;
}
.chev {
display:none
}

.mobile-logo{display:none}
}
@media screen and (max-width:1800px) and (min-width:1201px) {
	.header-details{float:right; color:#ccc; width:100%; margin-bottom:9px; font-size:22px;}
	.left-header{width:25%; height:auto; float:left; padding-top:30px; padding-bottom:30px}
	.right-header{width:40%; height:auto; float:right;  text-align:right; padding-top:40px;}
nav {
height : 75px;
width : 90%;
padding-left : 5%;
padding-right : 5%;
float : left;
}
.desktop-telephone {
float : left;
width : auto;
height : auto;
font-size : 22px;
color : #FFF;
margin-top : 27px;
}
.hull li a {
color : #CCC;
font-size : 22px;
text-decoration : none;
font-weight : normal !important ;
}
.hull li {
float : left;
display : inline;
margin-left : 15px;
}
.hull {
margin-top : 25px;
text-align : right;
width : auto;
float : right;
height : auto;
}
}
@media screen and (max-width:1200px) and (min-width:802px) {
	.header-details{float:right; color:#ccc; width:100%; margin-bottom:9px; font-size:20px;}
	.left-header{width:30%; height:auto; float:left; padding-top:30px; padding-bottom:30px}
	.right-header{width:50%; height:auto; float:right;  text-align:right; padding-top:40px;}
nav {
height : 75px;
width : 90%;
padding-left : 5%;
padding-right : 5%;
float : left;
}
.desktop-telephone {
float : left;
width : auto;
height : auto;
font-size : 18px;
color : #FFF;
margin-top : 27px;
}
.hull li a {
color : #CCC;
font-size : 18px;
text-decoration : none;
font-weight : normal !important ;
}
.hull li {
float : left;
display : inline;
margin-left : 15px;
}
.hull {
margin-top : 25px;
text-align : right;
width : auto;
float : right;
height : auto;
}
}
@media screen and (max-width:801px) and (min-width:702px) {
	
	.header-details{float:right; color:#ccc; width:100%; margin-bottom:9px; font-size:20px;}
	.left-header{width:30%; height:auto; float:left; padding-top:30px; padding-bottom:30px}
	.right-header{width:60%; height:auto; float:right;  text-align:right; padding-top:40px;}
nav {
height : 75px;
width : 90%;
padding-left : 5%;
padding-right : 5%;
float : left;
}
.desktop-telephone {
float : left;
width : auto;
height : auto;
font-size : 16px;
color : #FFF;
margin-top : 29px;
}
.hull li a {
color : #CCC;
font-size : 16px;
text-decoration : none;
font-weight : normal !important ;
}
.hull li {
float : left;
display : inline;
margin-left : 13px;
}
.hull {
margin-top : 25px;
text-align : right;
width : auto;
float : right;
height : auto;
}
}
@media screen and (max-width:700px) and (min-width:0px) {
	.left-header{width:100%; height:auto; float:left; padding-top:0px; padding-bottom:0px}
	.right-header{display:none}
	.desktop-logo{display:none}
	
	header{width:100%; height:auto; float:left; padding-left:0%; padding-right:0%;
background-color:#000;  overflow:auto; overflow:hidden}


.mobile-logo{width:100%; height:auto}
	
	
	
	
.hit {
color : #3399ff !important ;
}
.chev {
float : right;
text-align : right;
}
.mobile-bar {
width : 90%;
padding-left : 5%;
padding-right : 5%;
height : 70px;
background-color : #333;
float : left;
}
.mobile-bar a {
color : #3399ff;
width : 100%;
}
.mobile-icon {
margin-top : 22px;
float : left;
font-size : 27px;
}
.bars {
margin-top : 21px;
float : right;
font-size : 27px;
color : #fff;
cursor : pointer;
}
.cross {
margin-top : 16px;
float : right;
font-size : 31px;
cursor : pointer;
color : #fff;
display : none;
}
.hull li a {
color : #ccc;
font-size : 18px;
text-decoration : none;
font-weight : normal !important ;
}
.hull li {
float : left;
padding-bottom : 15px;
display : block;
margin-bottom : 15px;
width : 100%;
border-bottom : 1px dashed #666;
margin-left : 0px;
}
.hull {
margin-top : 22px;
text-align : left;
width : auto;
float : left;
padding-top : 5px;
width : 100%;
height : auto;
}
.no-dash {
border-bottom : 0px dashed !important;
padding-bottom : 5px !important ;
}
nav {
height : auto;
width : 80%;
padding-left : 10%;
overflow : auto;
overflow : hidden;
padding-right : 10%;
background-image : url(../images/opiac-bg.png);
float : left;
position : absolute;
top : 120px;
z-index:600 !important;
left : -100%;
}
.desktop-telephone {
display : none;
}
}

.welcome{margin-bottom:30px}

.ready{float:left; padding:10px; font-size:18px !important;
background-color:#666; color:#FFF; cursor:pointer; width:auto; margin-top:10px; display:block}

.readyless{float:left; padding:10px;  font-size:18px !important; cursor:pointer;
background-color:#666; color:#FFF; width:auto; margin-top:10px; display:block}


.hide{display:none; width:100% !important; float:left !important; height:auto !important; overflow:auto !important; overflow:hidden !important; margin-top:20px !important}



.contact-detailp{display:block !important; margin-left:0px !important; width:100%; float:left;
line-height:25px !important;
margin-bottom:10px !important}

.secondul{text-align:left !important; margin-top:10px !important}

.fat{text-align:left !important}
body .form-control {
  font-family: "FontAwesome" !important;
  
  
}

body .form-control {
  font-family: append($font-family-sans-serif, "FontAwesome", "comma" !important;)
}

.psuedo-li{margin-bottom:10px; width:100%; float:left}

.fa-circle{color:#999 !important; font-size:12px !important; position:relative; top:-1px; margin-right:5px}

.no-b{border:1px solid #fff !important}

.fa-home{color:#3399ff !important}
.left-stretch img, p {margin-top:5px !important}
@media screen and (max-width:900px) and (min-width:0px) {
.left-stretch img {width:100% !important}}

.google-trans{width:90%; height:45px; float:left; overflow:auto;
overflow:hidden; background-color:#000; padding-left:5% !important; padding-right:5% !important}
#google_translate_element{float:right; margin-top:10px}

.icp{float:left !important; position:relative; top:12px; color:#fff; font-size:16px; color:#999}
.innerboxes{text-align:center !important}
.innerboxes p{text-align:center !important}

.rmore{display:inline-block; margin:0 auto}

.innerboxes img{width:100% !important; height:auto !important}

.boxy{background-color:#3399ff  !important}

.un{text-decoration:underline !important}


/* --- Styling for the News Articles Section --- */

/* Styles for the container holding ALL news articles (if you used the <div class="container"> wrap) */
/* Adjust padding/max-width to match your site's layout */
.container {
    padding-left: 15px;  /* Adds space on the left edge of the screen */
    padding-right: 15px; /* Adds space on the right edge of the screen */
    max-width: 1140px; /* Optional: Set a max width for the content area */
    margin-left: auto;  /* Center the container */
    margin-right: auto; /* Center the container */
}


/* Styles for EACH individual article block */
.article {
    background-color: #ffffff; /* White background to make shadow visible */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* The box shadow effect */
    border: 1px solid #e0e0e0; /* Optional: a subtle border */
    margin-bottom: 30px;       /* Space below each article block */
    display: flex;             /* Enables flexbox for side-by-side layout */
    border-radius: 5px;        /* Optional: slightly rounded corners */
    overflow: hidden;          /* Ensures content stays within rounded corners/borders */
}

/* Styles for the TEXT part of an article */
.article-text {
    flex: 2;        /* Allows text block to take up more space (adjust ratio with image flex if needed) */
    padding: 25px;  /* ADDS PADDING inside the text block - adjust value as needed */
}

.article-text h2 {
    margin-top: 0;      /* Remove default top margin from heading */
    margin-bottom: 15px;/* Space below heading */
    color: #333;        /* Heading color */
    /* Inherit font from body or set specific font */
}

.article-text p {
    margin-bottom: 0; /* Remove default bottom margin from last paragraph if desired */
    color: #555;     /* Text color */
    line-height: 1.6; /* Adjust line spacing */
    /* Inherit font from body or set specific font */
}

/* Styles for the IMAGE part of an article */
.article-image {
    flex: 1;               /* Allows image block to take less space */
    max-width: 280px;      /* Max width for the image container - adjust as needed */
    padding: 20px;         /* Padding around the image container */
    display: flex;         /* Using flex here helps center the image easily */
    align-items: center;   /* Vertically align image within the padding */
    justify-content: center;/* Horizontally align image within the padding */
    background-color: #fdfdfd; /* Optional: slightly off-white background for image area */
}

.article-image img {
    max-width: 100%;       /* Image scales down to fit container */
    height: auto;          /* Maintain aspect ratio */
    display: block;        /* Remove extra space below image */
    border-radius: 4px;    /* Optional: slightly rounded corners for the image itself */
}

/* --- Responsive Adjustments for Tablets and Mobiles --- */
@media (max-width: 768px) { /* Adjust breakpoint as needed (e.g., 992px for tablets) */
    .article {
        flex-direction: column; /* Stack text and image vertically */
    }

    .article-text {
        /* Padding might be okay, or adjust slightly for mobile */
        padding: 20px;
        /* Remove flex property as it's no longer side-by-side */
        flex-basis: auto;
    }

    .article-image {
        max-width: 100%;    /* Allow image container to take full width */
        padding: 20px;      /* Adjust padding if needed */
        padding-top: 0;     /* Reduce top padding when stacked below text */
        /* Remove flex property */
        flex-basis: auto;
         order: -1; /* Optional: uncomment this line to show the image *above* the text on mobile */
    }
}

/* Optional: Further refinement for very small screens */
@media (max-width: 480px) {
     .article-text {
        padding: 15px; /* Slightly less padding on very small screens */
    }
     .article-image {
        padding: 15px;
        padding-top: 0;
    }
}