html {border:0;
margin: 0;
padding: 0;

}

body {
background-color: #fff;
border:0;
padding: 0;
max-width: 5000px;
display: block;
margin: 0 auto;

}

.lineGrey {
width: 100%;
background-color: grey;
height: 1px;
margin: 0% 0% 0% 0%;

}



a {text-decoration: none;
outline: 0;

}


* {
margin: 0px;
padding: 0px;
border: 0px;
box-sizing: border-box;

}

h1 {
font-family: Verdana,  sans-serif;
font-weight: 600;
color: #ff0707;
font-size: 200%;
line-height: 150%;
text-decoration: none;
text-align: left;
padding: 0% 0% 1% 0%;
}



h2 {
font-family: Verdana,  sans-serif;
font-weight: 600;
color: #000;
font-size: 110%;
line-height: 125%
text-decoration: none;
text-align: left;
padding: 0% 0% 1% 0%;
display: inline;
}

h3 {
font-family: Verdana,  sans-serif;
font-weight: 600;
color: #000;
font-size: 100%;
line-height: 125%;
text-decoration: none;
text-align: left;
padding: 0% 3% 0% 0%;
}



#row1Col2  h3 a:link {
color: #000;
text-decoration: underline;
}

p.red {
color:#ff0707;
}

p.disclaimer {
font-family: Verdana,  sans-serif;
font-weight: 300;
color: grey;
font-size: 80%;
line-height: 100%;
text-decoration: none;
text-align: left;
padding: 0% 3% 0% 0%;
}



h4 {
font-family: Verdana,  sans-serif;
font-weight: 300;
color: #000;
font-size: 100%;
line-height: 120%;
text-decoration: none;
text-align: left;
padding: 0% 3% 0% 0%;
}

h4 a:link  {
color: #000;
text-decoration: underline;
color: #767874;
}


#row1  h4 a:link {
color: #000;
font-weight: 800;
text-decoration: underline;
}


p a:link {
text-decoration: underline;
color: #000;
}

p a:hover {
color: #ff0707;
}

p {
font-family: Verdana,  sans-serif;
font-weight: 500;
color: #000;
font-size: 98%;
line-height: 125%;
text-decoration: none;
text-align: left;
padding: 0% 3% 0% 0%;
}

#siteMap ul li{
font-family: Verdana,  sans-serif;
font-weight: 800;
color: #000;
font-size: 110%;
line-height: 125%;
text-decoration: none;
text-align: left;
padding: 0% 3% 0% 0%;
list-style: none;
}

#siteMap ul li a:hover {
color: #ff0707;
}


#menu-slider {
width:330px;
height: 100%;
background-color: #fff;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}

#container {
background-color: #fff;
width: 100%;
position: absolute;
z-index: 5;
transition: left 500ms ease-in-out;
-webkit-box-shadow: 6px 6px 29px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 6px 6px 29px 0px rgba(0,0,0,0.75);
box-shadow: 6px 6px 29px 0px rgba(0,0,0,0.75);
overflow: hidden;

}

#menu-button {
display: block;
margin: 2% 2% 0% 2%;
width:40px;
height: 40px;
background-size: contain;
}

.menu-slider-hidden #container {
left: 0px;
}

.menu-slider-hidden #menu-button {
background-image: url(images/menu_icon.png);
display: none;
}


/*side menu is displayed */

.menu-slider-displayed #container {
left: 330px;
}


.menu-slider-displayed #menu-button {
background-image: url(images/close_menu.png);
}


#mobileHeader {
display: none;
}

#wide-screen-header {
display: none;
}


#mainHeader {
width: 100%;
background-color: #fff;
padding: 0% 0% .5% 5%;
margin-top: 1%;
overflow: hidden;
}

#mainHeader img {width: 85%;
display:block;
margin: 0%;
overflow: hidden;

}

#mobileSubHeader {
display: none;
}  

#subHeader {
width: 100%;
background-color: #999;
}

#subHeader h1{
color: #fff;
font-family: Verdana,  sans-serif;
font-weight: lighter;
font-size: 120%;
letter-spacing: 2px;
text-decoration: none;
text-align: left;
}

#subHeader .col1 {
padding: .5% 0% .5% 5%;
float: left;
}

#subHeader .col2 {
padding: .5% 0% .5% 78%;
}

#phoneNumber {
display: none;
}

#menu a {
font-family: Verdana,  sans-serif;
font-size: 105%;
color:#000;
}

#menu a:link{
color: #000;
}

#menu a:hover{
color: #ff0707;
}

#menu a:active{
color:#999;
}


#menu {
display: block;
margin: 0 auto;
padding: 1% 0% 1% 5%;
border-bottom: 1px solid #000;
}

#menu ul {
list-style-type: none;
margin: 0 auto;
display: block;
margin: 0% 0% 0% 0%;
} 

#menu li {
display: inline-block;
margin: 0% 0% 0% 0%
}


#mortgageTerms {
width: 100%;
background-color: #ff0707;

}

#link {
width: 100%;
background-color: #ff0707;
}


#mortgageTerms h1 {
color: #fff;
font-family: Verdana,  sans-serif;
font-weight: normal;
font-size: 120%;
letter-spacing: 2px;
text-decoration: none;
text-align: left;
padding: 0% 0% 0% 2%;
display: inline;
}

#mortgageTerms h1 a:hover {
color:#999;
}

#mortgageTerms h2 {
color: #fff;
font-family: Verdana,  sans-serif;
font-weight: lighter;
font-size: 120%;
letter-spacing: 2px;
text-decoration: none;
display: inline;
padding: 0% 0% 0% .7%;
}


#row1 {
width: 90%;
margin: 1% 5% 0% 5%;
}

#row1Col1 {
width: 40%;
float: left;
margin: .5% 2% 0% 0%;
}

#row1Col1 img {
width: 100%;
margin-bottom: 2%;
}



#row1Col2 ul li {
list-style-type: none;
font-family: Verdana,  sans-serif;
font-weight: 300;
color: #000;
font-size: 98%;
line-height: 100%;
letter-spacing: 1px;
text-decoration: none;
text-align: left;
padding: 0% 3% 0% 0%;
}


#row1Col2 {
width: 63%;
display: inline;
margin: .5% 2% 2% 0%;
}

#photos {
width: 20%;
float: left;
margin: 2% 3% 3% 0%;
}

#row2 {
width: 90%;
margin: 2% 5% 0% 5%;
}

#row2col1 {
width: 60%;
margin: .5% 2% 2% 0%;

}

h4 a:hover{
color: #ff0707;
}

h4 a:active{
color:#000;
}
#row2Col2 {
width: 40%;
padding: 0% 0% 0% 1%;
float: right;

}

#row2Col2 img {
width: 100%;

}

#abc {
display: inline;
}

#whyUseUsPhotos {
width: 100%;
}

#whyUseUsPhotos img {
width: 30%;
margin-right: 2%;
}

#googleMap {
float: right;
margin: 2% 2% 5% 5%;
}

form {
border: solid black 1px;
width: 550px;
padding: 1% 1% 1% 5%;
font-family: Verdana,  sans-serif;
font-weight: 300;
color: #000;
font-size: 98%;
line-height: 100%;
letter-spacing: 1px;
text-decoration: none;
text-align: left;
background-color: #eee;
border-radius: 5px;
}


textarea {
border: solid black 1px;
}


input {
padding: 1%;
border: solid black 1px;
}


footer {
width: 100%;
height: 195px;
background-color: grey;
color:#000;
margin: 2% 0% 0% 0%;
}

footer a {
font-family: Verdana,  sans-serif;
font-weight: 300;
color: #000;
font-size: 90%;
line-height: 100%;
letter-spacing: 1px;
text-decoration: none;
text-align: left;
}

footer a:hover {
color: #fff;
}

footer a:active, a:visited{
color: #000;
}

.footerCol1 {
width: 25%;
margin: 2% 0% 0% 5%;
}

.footerCol1 img {
float: left;
width: 20%;
margin: 5% 5% 0% 0%;

}

.footerCol2 {
width: 50%;
margin: 2% 50% 0% 20%;
padding-top: 1.3%;
}

.footerCol2  a {
font-family: Verdana,  sans-serif;
font-weight: 300;
color: #000;
font-size: 100%;
line-height: 100%;
letter-spacing: 1px;
text-decoration: none;
text-align: left;
}

#back-to-top img {
width: 4%;
margin-left: 100%;
}

.redtext {
color: #ff0000;
}

#mortgageCalculator {
height:2000px;
width: 100%;
margin: 0 auto;
}

#calculator {
height:100%;
width: 100%;
margin: 1% 1% 1% 5%;
}

iframe {
width: 660px;
height: 1000px;
}

#googleMap {

margin: 0% 5% 5% 5%;
}


/*-----------------------------------------------------------------------------------------*/



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


#subHeader {
width: 100%;
background-color: #999;
}

#subHeader h1{
font-size: 200%;
}


h1 {
font-size: 340%;
}


h2 {
font-size: 200%;
}

h3 {
font-size: 180%;
}

p.disclaimer {
font-size: 130%;
}

h4 {
font-size: 150%;
}


p {
font-size: 150%;
}

#menu a {
font-size: 150%;
}

#mortgageTerms h1 {
font-size: 200%;
}

#mortgageTerms h2 {
font-size: 200%;
}


footer {
height: 300px;
}

footer a {
font-size: 100%;

}


.footerCol1 {
width: 25%;
margin: 2% 0% 0% 5%;
}

.footerCol1 img {
float: left;
width: 20%;
margin: 5% 5% 0% 0%;

}

.footerCol2 {
width: 50%;
margin: 2% 50% 0% 20%;
padding-top: 1.3%;
}

.footerCol2  a {
font-family: Verdana,  sans-serif;
font-weight: 300;
color: #000;
font-size: 100%;
line-height: 100%;
letter-spacing: 1px;
text-decoration: none;
text-align: left;
}

#back-to-top img {
width: 4%;
margin-left: 100%;
}


}

@media screen and (max-width: 1999px) {

footer {
height:250px;
}
}


@media screen and (max-width: 1750px) {

footer {
height:230px;
}
}


@media screen and (max-width: 1400px) {

footer {
height:200px;
}
}
/*-------------------------------------------------------------------------------------------------*/

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

#mainHeader img {
width:200%;
}

}
@media screen and (max-width: 1299px) {


#container {
overflow: hidden;
}

h1 {
font-size: 190%;
}

h2 {
font-size: 100%;
}

h3 {
font-size: 90%;
}

p.disclaimer {
font-weight: 300;
color: grey;
font-size: 80%;
line-height: 125%;
padding: 0% 3% 0% 0%;
}

h4 {
font-weight: 300;
font-size: 100%;
line-height: 125%;
padding: 0% 3% 0% 0%;
}

h4 a:link {
color: #000;
text-decoration: underline;
color: #767874;
}


#row1  h4 a:link {
color: #000;
font-weight: 800;
text-decoration: underline;
}


p a:link {
text-decoration: underline;
color: #000;
}

p a:hover {
color: #ff0707;
}

p {
font-weight: 300;
letter-spacing: 1px;
}


#menu-button {
width:1210px;
height: 65px;
background-size: contain;
}

.menu-slider-hidden #menu-button {
display: none;
}


.menu-slider-displayed #menu-button {
background-image: url(images/buckingham-close-ipad.png);
margin: 2% 2% 1% 2%;

}

#mobile-menu   {
display: none;
}

#mainHeader {
display:block;
}

#mainHeader img {
width: 160%;
display:block;
margin: 2% 0% 0% 0%;
}


#menu a{
font-size: 90%;
}

#mortgageTerms {
width: 100%;
background-color: #ff0707;
}

#link {
width: 100%;
background-color: #ff0707;
}

#mortgageTerms h1 {
font-weight: normal;
font-size: 120%;
letter-spacing: 2px;
padding: 0% 0% 0% 2%;
display: inline;
}

#mortgageTerms h2 {
color: #fff;
font-weight: lighter;
font-size: 120%;
letter-spacing: 2px;
display: inline;
padding: 0% 0% 0% .7%;
}

#row1 {
width: 90%;
margin: 0% 5% 0% 5%;
}

#row1Col1 {
width: 40%;
float: left;
margin: .5% 2% 0% 0%;
}

#row1Col1 img {
width: 100%;
margin-bottom: 2%;
}

#row1Col2 ul li {
list-style-type: none;
font-weight: 300;
font-size: 98%;
line-height: 100%;
letter-spacing: 1px;
text-align: left;
padding: 0% 3% 0% 0%;
}

#row1Col2 {
width: 63%;
display: inline;
margin: .5% 2% 2% 0%;
}

#photos {
width: 20%;
float: left;
margin: 2% 13% 3% 0%;
}

#row2 {
width: 90%;
margin: 2% 5% 0% 5%;
}

#row2col1 {
width: 60%;
margin: .5% 2% 2% 0%;
}

h4 a:hover{
color: #ff0707;
}

h4 a:active{
color:#000;
}
#row2Col2 {
width: 40%;
padding: 0% 0% 0% 1%;
float: right;
}

#row2Col2 img {
width: 100%;
}

#abc {
display: inline;
}

#whyUseUsPhotos {
width: 100%;
}

#whyUseUsPhotos img {
width: 30%;
margin-right: 2%;
}

#googleMap {
float: right;
margin: 2% 2% 5% 5%;
}

.footerCol1 {
width: 15%;
margin: 2% 0% 0% 5%;
}

.footerCol1 img {
float: left;
width: 40%;
margin: 10% 10% 0% 0%;
}

.footerCol2 {
width: 50%;
margin: 2% 50% 0% 25%;
padding-top: 1.3%;
}

.footerCol2  a {
font-family: Verdana,  sans-serif;
font-weight: 300;
color: #000;
font-size: 100%;
line-height: 100%;
letter-spacing: 1px;
text-decoration: none;
text-align: left;
}

.redtext {
color: #ff0000;
}


#mortgageCalculator {
height:500px;
width: 100%;

}

footer {
height: 250px;
}

}



@media screen and (max-width: 1250px) {


#subHeader h1{
font-size: 110%;
}

#subHeader .col2 {
padding: .5% 0% .5% 75%;
}

footer {
height: 240px;
}

}                                      

/*---------------------------------- iPAD STYLES-------------------------------------------*/

@media screen and (max-width: 1164px) {




#mobile-menu   {
display: block;
margin: 1% auto;
font-family: Verdana,  sans-serif;
font-weight: 600;
background-color: #fff;
font-size: 120%;
line-height: 150%;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
padding: 0% 0% 1% 0%;
border-top: solid #bbb 1px;
}

#mobile-menu li {
width: 330px;
height: 85px;
display: block;
margin: 0% 0% 0% 0%;
border: solid #bbb 1px;
border-top: none;
border-right: none;
padding-top: 8%;
}

#mobile-menu  a:link {
color: #000;
}

#mobile-menu  a:visited {
color: #000;
}

#menu-button {
width:1220px;
height: 70px;
background-size: contain;
}

.menu-slider-hidden #menu-button {
background-image: url(images/buckingham-mobile-logo-ipad.png);
background-repeat: no-repeat;
display:block;
}


.menu-slider-displayed #menu-button {
background-image: url(images/buckingham-close-ipad.png);
background-repeat: no-repeat;
}

#mainHeader {
display: none;
}

#mobileSubHeader {
width: 100%;
background-color: #999;
display: block;
}

#mobileSubHeader h1{
font-size: 75%;
color: #fff;
font-family: Verdana,  sans-serif;
font-weight: lighter;
letter-spacing: 2px;
text-decoration: none;
text-align: left;
padding: .1% 0% .1% 5%;
}

#subHeader {
display: none;
}

#phoneNumber {
display:block;
margin-left: 5%;
}

#phoneNumber h1 {
font-size: 80%;
color: #000;
}

#phoneNumber h1 a {
color: #000;
}


h1 {
font-size: 200%; 
}


h2 {
font-size: 100%;
}

h3 {
font-size: 95%;
}


#menu {
display: none;
}

iframe {
width: 875px;
height: 400px;
}

#googleMap {
margin: 0% 5% 5% 5%;
}

footer {

height: 250px;
}

#mortgageCalculator {
height:1000px;
width: 100%;
}

#calculator {
height:100%;
width: 100%;
margin: 1% 1% 1% 5%;
}


}

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

#menu-button {
display: block;
margin: 2% 2% 0% 2%;
width:1050px;
height: 52px;
background-size: contain;
}


#mobileSubHeader {
width: 100%;
background-color: #999;
display: block;
margin-top: 1%;
}

#mobileSubHeader h1{
font-size: 60%;
color: #fff;
font-family: Verdana,  sans-serif;
font-weight: lighter;
letter-spacing: 2px;
text-decoration: none;
text-align: left;
padding: .1% 0% 0% 5%;
}

#subHeader {
display: none;
}

#phoneNumber h1 {
font-size: 70%;
padding: .1% 0% 2% 0%;
}



h1 {
font-size: 170%; 
}


h2 {
font-size: 95%;
}

h3 {
font-size: 92%;
}


#mortgageTerms h1 {
font-size: 105%;

}


#mortgageTerms h2 {
font-size: 105%;
}

iframe {
width: 660px;
height: 400px;
}

#googleMap {
margin: 0% 5% 5% 5%;
}

#photos {
width: 20%;
margin: 2% 22% 1% 0%;
}

form {
border: solid black 1px;
width: 340px;
padding: 1% 1% 1% 5%;
font-family: Verdana,  sans-serif;
font-weight: 300;
color: #000;
font-size: 98%;
line-height: 100%;
letter-spacing: 1px;
text-decoration: none;
text-align: left;
background-color: #eee;
border-radius: 5px;
}


textarea {
border: solid black 1px;
}


input {
padding: 1%;
border: solid black 1px;
}



#back-to-top img {
width: 5%;
margin: 2% 0% 0% 0%;
}

#mortgageCalculator {
height:1000px;
width: 100%;
}

#calculator {
height:100%;
width: 80%;
margin: 1% 1% 1% 5%;
}


}

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


#photos {
width: 20%;
margin: 2% 27% 3% 0%;
}


#mortgageCalculator {
height:1000px;
width: 100%;
}

#calculator {
height:1200px;
width: 100%;
margin: 1% 1% 1% 5%;
}

}

/*-------------------------------------------iPHONE STYLES--------------------------------------------*/


@media screen and (max-width: 414px) {




#mortgageCalculator {
height:1000px;
width: 100%;
margin-bottom: 250%;
}

#calculator {
height:1200px;
width: 100%;
margin: 1% 1% 1% 5%;
}


h1 {
font-size: 130%; 
}


h2 {
font-size: 90%;
}

h3 {
font-size: 90%;
}


p.disclaimer {
line-height: 135%;
letter-spacing: 0;
font-size: 80%;
}

h4 {
font-size: 80%;
line-height: 135%;
letter-spacing: 0;
}


p {
font-size: 80%;
line-height: 135%;
letter-spacing: 0;
font-weight: 500;
}

#menu-button {
display: block;
margin: 2% 2% 0% 2%;
width:1000px;
height: 40px;
background-size: contain;
}

.menu-slider-hidden #menu-button {
background-image: url(images/buckingham-mobile-logo.png);
background-repeat: no-repeat;
display: block;
margin: 2% 0% 1% 2%;
}

.menu-slider-displayed #menu-button {
background-image: url(images/buckingham-logo-close.png);
margin: 2% 0% 1% 2%;
width:1000px;
height: 40px;
}


#mobileSubHeader {
width: 100%;
background-color: #999;
display: block;
}

#mobileSubHeader h1{
font-size: 60%;
color: #fff;
font-family: Verdana,  sans-serif;
font-weight: lighter;
letter-spacing: 2px;
text-decoration: none;
text-align: center;
padding: .1% 0% 0% 0%;
}

#subHeader {
display: none;
}

#phoneNumber h1 {
font-size: 70%;
color: #000;
font-family: Verdana,  sans-serif;
font-weight: lighter;
letter-spacing: 2px;
text-decoration: none;
text-align: left;
padding-left: 5%;
}



#menu {
display: none;
}

#menu a:active {
color:#000;
}

#menu ul {
list-style-type: none;
margin: 0 auto;
display: block;
margin: 0% 0% 0% 0%;
} 

#menu li {
display: inline-block;
margin: 0% 0% 0% 0%;
}


#mortgageTerms {
width: 100%;
background-color: #ff0707;
padding-bottom: 1%;
}

#link {
width: 100%;
background-color: #ff0707;
}


#mortgageTerms h1 {
font-size: 65%;
letter-spacing: 0px;
text-align: center;
margin: 5% 0% 5% 0%;
}

#mortgageTerms h1 a:hover {
color:#999;
}

#mortgageTerms h2 {
letter-spacing: 0px;
font-size: 65%;
text-align: center;
margin: 5% 0% 5% 0%;
}


#row1 {
width: 90%;
margin: 0% 5% 0% 5%;
}

#row1Col1 {
width: 100%;
}

#row1Col1 img {
width: 100%;
margin-bottom: 2%;
}

#row1Col2 {
width: 100%;
margin: .5% 2% 2% 0%;
}

#photos {
width: 100%;
display: block;
margin: 0 auto;
}

#row2 {
width: 90%;
margin: 0% 5% 0% 5%;
}

#row2col1 {
width: 105%;
margin: .5% 2% 2% 0%;
}

h4 a:hover{
color: #ff0707;
}

h4 a:active{
color:#000;
}

#row2Col2 {
width: 90%;
margin: 5% 10% 2.5% 0%;
padding: 0;
}

#row2Col2 img {
width: 110%;
}

#abc {
display: inline;
}

#whyUseUsPhotos {
width: 100%;
}

#whyUseUsPhotos img {
width: 47.41%;
margin-right: 2%;
}

iframe {
width: 335px;
height: 300px;
margin: 10% 1% 5% 5%;
}


form {
border: solid black 1px;
width: 340px;
padding: 1% 1% 1% 5%;
font-family: Verdana,  sans-serif;
font-weight: 300;
color: #000;
font-size: 98%;
line-height: 100%;
letter-spacing: 1px;
text-decoration: none;
text-align: left;
background-color: #eee;
border-radius: 5px;
}


textarea {
border: solid black 1px;
}


input {
padding: 1%;
border: solid black 1px;
}

#row1Col2 ul li {
font-size: 90%;
}


footer a {
font-size: 90%;
}

footer a:active, a:visited{
color: #000;
}

.footerCol1 {
width: 15%;
}

.footerCol1 img {
width: 100%;
margin: 10% 10% 0% 0%;
}

.footerCol2 {
width: 100%;
margin: 2% 0% 0% 3%;
}

.footerCol2  a {
font-family: Verdana,  sans-serif;
font-weight: 300;
color: #000;
font-size: 100%;
line-height: 100%;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
}

#mortgageCalculator {
height:500px;
width: 100%;
}

#back-to-top img {
width: 10%;
margin: 2% 0% 0% 0%;
}



}