
.bottom_nav li.icon{
	display: none;
}
.rightnav li.icon{
	display: none;
}

.homebox{
	width: 305px; 
	height: 238px;
	border: 0;
}

/************  Menu ************/

#menu .active a {
    text-decoration: none;
    color: #fff;
    border-bottom: 3px solid #fff;
}

ul.topnav .menu {
	padding: 0;
	
}
 /* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #111321;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #FFF !important;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	text-transform: uppercase;
    transition: 0.3s;
    font-size: 17px;
}
ul.topnav li{
    list-style:none;
    background-image:none;
    background-repeat:none;
    background-position:0; 
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none}

@media screen and (min-width:680px) {
	ul.topnav .menu a:hover {
		color: #fff;
		margin: 0;
		border-bottom: 3px solid #fff;
	}
	ul.topnav .menu .active a {
		text-decoration: none;
		color: #fff;
		border-bottom: 3px solid #fff;
	}
	ul.topnav .menu .active a:hover {
		text-decoration: none;
		color: #4685dc;
	}
}

@media screen and (min-width:680px) {
	#myTopnav {
		height: 47px;
		font-size: 1.3em;
		background: transparent;
	}
	#topNavbar{
		height: 47px;
	}  
}
 /* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
	
  #topNavbar { height: 100%;}  
  ul.topnav li {display: none;}
  ul.topnav li.icon {
    float: left;
    display: inline-block;
  }  
  
  #social{ /* position:absolute; top: 90px; right:0px; */}
  #social.dontshow{ display: none;}
  
  #search{ /* position:absolute; top: 90px; right:35px; */}
  #search.dontshow{ display: none;}  
  
  input { width: 110px; }
  #search.showMe { width: 150px; } 
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
	/* Change background color of links on hover */
	ul.topnav li a:hover {background-color: #2e3053;}	
	
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    left: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: center;
  }
}
/************ END Menu ************/


.left-col{
	width: 45%;
	float:left;
}
 .right-col{
	width: 50%;
	float:left;
}
.left-col{
	margin-right: 5%;
}

.contactdetails .phone {
    background: url(../images/grey-ph-icon.png) 0 5px no-repeat;
	padding: 10px 0 10px 40px;
	color: #121321;
	margin-top: 15px;
}
.contactdetails .email {
    background: url(../images/grey-email-icon.png) 0 5px no-repeat;
	padding: 10px 0 10px 40px;
	color: #121321;
}
.contactdetails .address {
    background: url(../images/grey-map-icon.png) 0 5px no-repeat;
	padding: 10px 0 10px 40px;
	color: #121321;
}


/*mobile*/
@media only screen and (max-width: 768px) {
	
}
/**
*
* Widescreen Devices
*
**/
@media only screen and (min-width: 1100px) {
	
	
}


/* 
#Tablet (Landscape)
================================================== 
*/

@media only screen and (min-width: 960px) and (max-width: 1099px) 
{

}

/* 
#Tablet (Portrait)
================================================== 
*/

@media only screen and (min-width: 768px) and (max-width: 1335px) {
	
	.homebuyerscontent p{
		width:	70%;
	}
	
	.homebox{ width: 100%;  }
	#home3col .col_1_3{ width: 31%; }
	.col_1_3 img{ width: 100%;  }
	
	ul { margin: 0 0 0 0; }
	/* .masthead_logo img{ width: 60%; } */
	
	#main_container, .masthead_logo, #masthead, #mainarea, #home3col, #home2colbottom{
		width: 100%;
	}
	
	.welcomeLeft, .welcomeRight{
		width: 45%;
	}
	
	div.bannergroup { width: 100%;	}
	.bannerDesc { width: 40%; font-size: 2.0em; padding: 20px 10px 10px 10px; padding-left: 30px; }
	
	#topNavbar { width: 100%;	}
	#menu { width: 100%;	}
	#actionboxes { width: 96%; padding-left: 2%; padding-right: 2%; }
	.footer_area, .bottom_nav, .bottom_nav ul { width: 100%;	}
	#home2colbottom .col_1_2 { width: 48%;	}
	#home2colbottom .left-col, .right-col  { width: 46%;}
	
	.bottom_nav li{
		/* display: block;
		margin-left: 12%; */
	}
	.footer_area{
		height: 100%;
	}
	 #footer{
		/* height: 350px;	 */
	 }
	 .bottom_nav{
		 margin: 10px 0 0px 0px;	
		 text-align: center; 
	 }
	 .copyright {
		padding-right: 20px;
		text-align: center;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
	 }
	 
	.bottom_nav li{
		/* border-right: none; */
	}	
	.bottom_nav a{
		/* display: block;
		padding: 10px;
		padding-left: 0px; */
	}
	.bottom_nav a:hover{
		background-color: #2e3053;
		color: #FFF;
		text-decoration: none;
	}
	
	/* WHO WE ARE  ====== */  
	
	#mainarea { width: 100%;	}
	.banner-buttons { width: 100%; height: 100%;	}
	#mainarea-buttons  { width: 100%; height: 100%;	}
	.sectionbox_left, .sectionbox_right { width: 96%; margin: 0;  padding-left: 2%; padding-right: 2%;	}
	.sectionbox_left,  .sectionbox_right  { clear: both; }
	.sectionbox_middle_outer { clear:both; margin-left: 0; margin-right: 0;}
	.sectionbox_middle{ width: 100%;  margin: 0;	}
	
	
	.FF div.custom-staff img{
		/* width: 100% !important;
  	 	height: auto !important;
		margin-left: 5%;
		margin-right: 5%;		*/
		
	}
	.FF div.custom-staff h2{
		display: block;
		display: 100%;
	}
	
	.readmorejs-block  h2{
		text-align: left;
	}
	
	.readmorejs-block{
		height: 100% !important;
	}
	.readmorejs-block p {
		text-align: left;
	}
	a.readmore-js-toggle{
		display: none;
	}
	.sectionbox_left a.readmore-js-toggle, .sectionbox_right a.readmore-js-toggle{
		display: block;
	}
	.readmore-js-toggle{
		padding-right: 32px;
	}	
	.custom-staff img{
		width: 42%;
   		height: auto;	
	}
	.FF div.custom-staff h2{
		text-align: center;
	}
	
	
	/* NEWS  ====== */  	
	.textarea{
		width: 96%; margin: 0;  padding-left: 2%; padding-right: 2%;
	}
	
	#right_column{ width: 96%; margin: 0;  padding-left: 2%; padding-right: 2%;}
	.rightnav, .contact-details { width: 96%}
	
	/* OTHER  ====== */ 
	
	.item-page p img{
		width: 100%;
   		height: auto;	
	}
	.bottom_nav a:hover{
		padding: 10px;
	}
	.textarea h1{
		width: 96%; margin: 0;  padding-left: 2%; padding-right: 2%;
	}

}

/*  
#Mobile (Portrait)
================================================== 
*/

@media only screen and (max-width: 767px) {
	
.banneritem img{   
	 max-width: 100%;
   	 max-height: 100%;
 }

.bannerDesc { font-size: 1.2em; width: 70%; padding-left: 20px; }
	
.banneritem	{
	width: 100% !important;	
}
	
 #home2colbottom{
	 margin-left: 10px;
	 margin-right: 10px;
 }
 
 #home2colbottom .col_1_2 p { width: 95%;	}
	
	
/*	ebook */
.ebook {
	width: 100%;	
}
.ebook img{
		 width: 100% !important;
  	 	height: auto !important;
}
.top-banner img{
		 width: 100% !important;
  	 	height: auto !important;
}
.ebook .image{
	width: 100%;
}
#mc_embed_signup .indicates-required {
	display: none;
}
.ebook .mc-field-group.FNAME{
	width: 90% !important;
}
.ebook .mc-field-group.LNAME{
	width: 90% !important;
}
.ebook .mc-field-group.EMAIL{
	width: 90% !important;
}
#mc_embed_signup .button{
	text-align: center;
}
	
.top-right{ width: 90%; }

#mc_embed_signup{
	width: 100%;
}
#mc_embed_signup form{
	width: 100%;
}

.ebook .form {
	width: 100%;
}
/*	END ebook */

/*	m calc */
.cal-left{ 	width: 100%; }
.mortgagecalc{ 	width: 100%; height: 100%;}
.mortgagecalc .left{ width: 40%;}
.mortgagecalc .right{ width: 50%;}
.mortgagecalc .left p {
    font-size: 80%;
}
.mortgagecalc input.loan { width: 50%;}
.mortgagecalc input.rate { width: 50%;}
.styled-select.slate select  { width: 100%;}
.styled-select.slate { width: 100%;}
.styled-select{ background-image: none;}
.styled-select.slate{ background-image: none;}
.cal-right {width: 100%;}
.mortgagecalc-instructions{ width: 100%;}




/*	END m calc  */
	
	
	.homebuyersguide-container{
		width: 100%;
		height: 100%;
	}
	
	.leftimage, .homebuyersguide{
		width: 100%;		
	}
	.leftimage img{
		display: block;
    	margin: auto;
		padding-left: 0;
	}
	
	.homebuyerscontent{
		width: 90%;
		float: none;
		text-align: center;
	}
	.homebuyerscontent .button{
		display: block;
		text-align: center;
		font-size: 14px;
	}
	
	ul { margin: 0 0 0 0; }
	.masthead_logo img{ width: 60%; }
	.homebuyerscontent .button { width: 80%; }
	
	#main_container, .masthead_logo, #masthead, #mainarea, .welcomeLeft, .welcomeRight, #home3col, #home2colbottom{
		width: 100%;
	}
	
	div.bannergroup { width: 100%;	}
	
	#topNavbar { width: 100%;	}
	#menu { width: 100%;	}
	#actionboxes { width: 96%; padding-left: 2%; padding-right: 2%; }
	.welcomeLeft, .welcomeRight { width: 96%; }
	#home2colbottom .col_1_2, #home2colbottom .col_1_2, .footer_area, .bottom_nav, .bottom_nav ul { width: 100%;	}
	.left-col, .right-col  { width: 95%;	}
	
	.bottom_nav li{
		display: block;
		margin-left: 12%;
	}
	.footer_area{
		height: 100%;
	}
	 #footer{
		 height: 380px;		 
	 }
	 .bottom_nav{
		 margin: 10px 0 0px 0px;	 
	 }
	 .copyright {
		float: none;
		padding-top: 350px;
		margin-left: 12%;
		text-align: left;
		width: 88%;
	 }
	 
	.bottom_nav li{
		border-right: none;
	}	
	.bottom_nav a{
		display: block;
		padding: 10px;
		padding-left: 0px;
	}
	.bottom_nav a:hover{
		background-color: #2e3053;
		color: #FFF;
		text-decoration: none;
	}
	
	/* WHO WE ARE  ====== */  
	
	#mainarea { width: 100%;	}
	.banner-buttons { width: 100%; height: 100%;	}
	#mainarea-buttons  { width: 100%; height: 100%;	}
	.sectionbox_left, .sectionbox_right { width: 96%; margin: 0;  padding-left: 2%; padding-right: 2%;	}
	.sectionbox_left,  .sectionbox_right  { clear: both; }
	.sectionbox_middle_outer { clear:both; margin-left: 0; margin-right: 0;}
	.sectionbox_middle{ width: 100%;  margin: 0;	}
	
	
	.FF div.custom-staff img{
		/* width: 100% !important;
  	 	height: auto !important;
		margin-left: 5%;
		margin-right: 5%;		*/
		
	}
	.FF div.custom-staff h2{
		display: block;
		display: 100%;
	}
	
	.readmorejs-block  h2{
		text-align: center;
	}
	
	.readmorejs-block{
		height: 100% !important;
	}
	.readmorejs-block p {
		text-align: center;
	}
	a.readmore-js-toggle{
		display: none;
	}
	.sectionbox_left a.readmore-js-toggle, .sectionbox_right a.readmore-js-toggle{
		display: block;
	}	
	.readmore-js-toggle{
		padding-right: 25px;
	}
	.custom-staff img{
		width: 100%;
   		height: auto;	
	}
	.FF div.custom-staff h2{
		text-align: center;
	}
	
	
	/* NEWS  ====== */  	
	.textarea{
		width: 96%; margin: 0;  padding-left: 2%; padding-right: 2%;
	}
	
	#right_column{ width: 96%; margin: 0;  padding-left: 2%; padding-right: 2%;}
	.rightnav, .contact-details { width: 96%}
	
	/* OTHER  ====== */ 
	
	.item-page p img{
		width: 100%;
   		height: auto;	
	}
	.bottom_nav a:hover{
		padding: 10px;
	}
	.textarea h1{
		width: 96%; margin: 0;  padding-left: 2%; padding-right: 2%;
	}
	
}
/* 
#Mobile (Landscape)
================================================== 
*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
}

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