/* **Start of site wide** */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

html {
  height: 100%;
	width: 100%;
}

body {
	height: 100%;
	width: 100%;
	color: #000;
	font-family: Arial, sans-serif;
  margin: 0;
}

.homewrapper {
  display: grid;
  grid-template-areas:
    "header nav nav"
    "hero hero hero"
    "content content content"
    "footer footer footer";
  height: 100vh;
  grid-template-columns: auto;
  grid-template-rows: 110px 1fr 16fr 135px;
  grid-gap: 0;
}

.sitewrapper {
  display: grid;
  grid-template-areas:
    "header nav nav"
    "content content content"
    "footer footer footer";
  height: 100vh;
  grid-template-columns: auto;
  grid-template-rows: 135px 16fr 135px;
  grid-gap: 0;
}
/* **End of site wide** */

/* **Start of header** */
header {
  grid-area: header;
  background-color: #F5F1E7;
  color: #000;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  max-height: 135px;
}

.headerlogo img{
  width: 350px;
  height: auto;
}
/* **End of header** */

/* **Start of nav** */
nav {
  grid-area: nav;
  background-color: #F5F1E7;
  display: flex;
  color: #000;
  align-items: flex-end;
}

nav ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  color: #000;
  list-style-type: none;
  align-items: center;
  padding: 0 50px 0 0;
  margin: 0;
}

.hamnav {
  display: none;
}

.hamnav nav {
  display: none;
}

.linkactive {
  border-bottom: 1px solid #000;
  padding: 20px 0 7px;
  margin-bottom: 13px;
  text-decoration: none;
  color: #000;
  font-size: 20px;
  font-family: 'palatino linotype', serif;
  letter-spacing: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.link {
  transition: 0.3s ease;
  border-bottom: 1px solid #F5F1E7;
  padding: 30px 0;
  text-decoration: none;
  color: #000;
  font-size: 20px;
  font-family: 'palatino linotype', serif;
  letter-spacing: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.link:hover {
  border-bottom: 1px solid #000;
  color: #000;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
/* **End of nav** */

/* **Start of hero** */
.hero {
  grid-area: hero;
  width: 100%;
  height: 100%;
}

.hero img{
  width: 100%;
  height: 100%;
}
/* **End of hero** */

/* **Start of main** */
main {
	grid-area: content;
  width: 100%;
  height: auto;
	display: flex;
	flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: space-around;
  background-image: url(/new/img/content_bg6.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.mainwrapper {
  background-attachment: fixed;
  background-position: center;
  width: 100%;
  height: 100%;
  background-image: url(/new/img/backg_right.svg);
  background-repeat: no-repeat;
  background-size: 40% 40%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
/* **End of main** */

/* **Start of location** */
.googlemaparea {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  justify-content: space-around;
  align-items: center;
}

.googlemaparea2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  justify-content: space-around;
  align-items: center;
}

.googlemaptext {
  padding-top: 5px;
}

.googlemaptext p {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 20px;
  line-height: 30px;
  font-family: 'palatino linotype', serif;
}

.locationrighttext {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
  padding-bottom: 60px;
}

.locationrighttext p {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 30px;
  line-height: 20px;
  font-family: 'palatino linotype', serif;
}

.bignumber p {
  display: flex;
  width: 100%;
  font-size: 40px;
  letter-spacing: 10px;
  font-weight: bold;
  padding-bottom: 30px;
  font-family: 'palatino linotype', serif;
}
/* **End of location** */

/* **Start of Forms** */

.columnrightarea {
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: auto;
  padding-bottom: 50px;
  margin-right: 50px;
}

.columnrightarea p {
  display: flex;
  width: 100%;
  height: auto;
  text-align: left;
  font-size: 25px;
  line-height: 50px;
}

.columnleftarea {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  margin-left: 100px;
}

.columnleftarea p {
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  text-align: left;
  font-size: 25px;
  line-height: 50px;
}

.columnleftarea2 {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  align-items: center;
  margin: 0 50px;
}

.columnleftarea2 p {
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  text-align: left;
  font-size: 16px;
  line-height: 35px;
  max-width: 500px;
  width: 100%;
  padding-top: 10px;
  font-family: 'palatino linotype', serif;
  margin: 0;
}

.header6 {
  display: flex;
  width: 100%;
  text-align: left;
  justify-content: center;
}

.header6 p{
  font-size: 28px;
  padding: 0;
  font-family: 'palatino linotype', serif;
  text-align: left;
  margin: 0;
}

.leftfields {
  display: flex;
  width: 100%;
}

.columnleftarea2 form {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  text-align: left;
}

.columnleftarea2 label {
  font-size: 20px;
  line-height: 35px;
  font-family: 'palatino linotype', serif;
  padding-top: 5px;
  display: flex;
  max-width: 500px;
  width: 100%;
}

.columnleftarea2 input {
  display: flex;
  flex-direction: column;
  height: 35px;
  width: 100%;
  max-width: 500px;
}

.columnleftarea2 textarea {
  display: flex;
  max-width: 500px;
  height: 50px;
  width: 100%;
}

.fieldbuttons {
  display: flex;
  flex-direction: row;
  height: auto;
  cursor: pointer;
  justify-content: center;
}

.fieldbuttons input {
  display: flex;
  flex-direction: row;
  width: 110px;
  height: 35px;
  justify-content: center;
  border: 0;
  background-color: #F5F1E7;
  font-size: 20px;
  -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0,.75);
  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0,.75);
  box-shadow: 0px 1px 1px rgba(0, 0, 0,.75);
  cursor: pointer;
  margin-top: 25px;
  font-family: 'palatino linotype', serif;
}

.leftalign {
  display: flex;
  flex-direction: column;
  height: auto;
}

.leftalign p {
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  text-align: left;
  font-size: 24px;
  line-height: 50px;
  font-family: 'palatino linotype', serif;
  margin: 0;
}

.carecreditbtn {
  display: flex;
  width: 100%;
  height: auto;
  align-items: center;
  padding: 25px 0 0;
}

.carecreditbtn img {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
}

.formsdownload {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: 15px;
}

.formsdownload p {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 30px;
  font-family: 'palatino linotype', serif;
  text-align: center;
}

.columnrightforms2 {
  display: flex;
  flex-direction: column;
}

.columnrightforms2 img {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  max-width: 750px;
  -moz-box-shadow: 0px 1px 1px rgba(0, 0,   0,.75);
  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0,.75);
  box-shadow: 0px 1px 1px rgba(0, 0, 0,.75);
}
/* **End of Forms** */

/* **Start of about** */
.columnleftabout {
  display: flex;
  flex-direction: column;
  margin: 0 50px;
  width: 100%
  height: auto;
}

.abouttext {
  display: flex;
  width: 100%;
  max-width: 700px;
}

.abouttext p {
  display: flex;
  width: 100%;
  max-width: 700px;
  font-size: 28px;
  font-family: 'palatino linotype', serif;
  text-align: center;
  line-height: 55px;
  padding-bottom: 50px;
}

.columnrightabout {
  display: flex;
  flex-direction: column;
  margin: 0 50px;
}

.columnrightabout img {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  max-width: 800px;
  -moz-box-shadow: 0px 1px 1px rgba(0, 0,   0,.75);
  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0,.75);
  box-shadow: 0px 1px 1px rgba(0, 0, 0,.75);
}

/* **End of about** */

/* **Start of home** */
.homecontentwrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 825px;
  color: #000;
  font-size: 35px;
  text-align: center;
  line-height: 60px;
  font-family: 'palatino linotype', serif;
}

.homecontentwrapper p {
  margin-bottom: 0;
}

.backgleft {
  display: flex;
  align-items: center;
  width: 350px;
  height: 100%;
}

.backgleft img {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 500px;
  height: 100%;
}

.backgright {
  display: flex;
  align-items: center;
  width: 350px;
  height: 100%;
}

.backgright img {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 500px;
  height: 100%;
}

.homesinglebtn2 {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
  padding: 0 0 25px;
}

.homesinglebtn2 img {
  display: flex;
  width: 100%;
  max-width: 375px;
  height: auto;
  justify-content: center;
  align-items: center;
}

.homesinglebtn {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
}

.homesinglebtn img {
  display: flex;
  width: 100%;
  max-width: 375px;
  height: auto;
  justify-content: center;
  align-items: center;
}

/* **Start of footer** */
footer {
	grid-area: footer;
	background-color: #F5F1E7;
	width: 100%;
	height: 135px;
	display: flex;
	align-items: center;
}

.footerwrapper {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #000;
  font-family: 'palatino linotype', serif;
  padding: 0 100px;
}

.headlines {
	background-color: #F5F1E7;
	height: auto;
	display: flex;
  flex-direction: column;
	justify-content: flex-start;
	color: #000;
}

.headlines p {
  margin: 0;
}

.footmid {
	display: flex;
  flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #000;
  font-size: 20px;
  margin: 0 auto;
}

.footmid a {
	display: flex;
  flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #000;
  font-size: 20px;
  list-style-type: none;
  text-decoration: none;
}

.bold20px{
  font-size: 20px;
  color: #000;
  font-weight: bold;
  letter-spacing: 5px;
  list-style-type: none;
  text-decoration: none;
}

.footermidbold {
  font-size: 20px;
  color: #000;
  font-weight: bold;
  letter-spacing: 5px;
  list-style-type: none;
  text-decoration: none;
}

a[href*="tel:"] {
  pointer-events: none;
}

.footermap {
  width: 225px;
  height: auto;
  max-width: 100%;
}
/* **End of footer** */

.googlemap {
  max-width: 550px;
  max-height: 400px;
  width: 100%
  height: 100%
  border: 0;
}

/*
 * ***************START OF MEDIA Qs ********************************************************************************************************************************************************************
 */

 /* **Start of media Q 1735px** */
@media screen and (max-width: 1735px) {

  .googlemaparea {
    margin: 0 50px;
  }

  .googlemaparea2 {
    margin: 0 50px;
  }

  .googlemap{
    max-width: 500px;
    max-height: 350px;
  }

  .googlemaptext {
    padding-top: 5px;
  }

  .googlemaptext p {
    line-height: 25px;
    font-size: 20px;
  }

  .locationrighttext p {
    line-height: 5px;
    font-size: 20px;
  }

  .bignumber p {
    font-size: 30px;
    padding-bottom: 20px;
  }

  .backgright {
    max-width: 300px;
  }

  .backgleft {
    max-width: 300px;
  }

  .homecontentwrapper {
    max-width: 625px;
    font-size: 26px;
  }

  .headerlogo img {
    width: 400px;
  }
}
 /* **End of media Q 1735px** */

 /* **Start of media Q 1375px** */
@media screen and (max-width: 1375px) {
  .link {
    font-size: 18px;
    letter-spacing: 3px;
  }

  .linkactive {
    font-size: 18px;
    letter-spacing: 3px;
  }

  nav ul {
    padding: 0 30px 0 0;
  }

  .columnrightarea {
    margin-left: 50px;
  }
}

 /* **End of media Q 1375px** */

 /* **Start of media Q 1180px** */
@media screen and (max-width: 1180px) {
  .homesinglebtn img {
    max-width: 250px;
  }

   .headerlogo img {
    width: 375px;
  }

  .link {
    padding: 25px 0;
  }

  .homecontentwrapper {
    font-size: 24px;
  }

  .footmid a {
    font-size: 16px;
  }

  .headlines p {
    font-size: 14px;
  }

  .footermap {
    width: 200px;
  }

  footer {
    height: 110px;
  }

  .homewrapper {
    grid-template-rows: 120px 1fr 16fr 110px;
  }

  .sitewrapper{
    grid-template-rows: 120px 16fr 110px;
  }
}

 /* **End of media Q 1180px** */

 /* **Start of media Q 1100px** */
@media screen and (max-width: 1100px) {
  .headerlogo img {
    width: 325px;
  }

  .link {
    font-size: 16px;
    padding: 15px 0;
  }

  .linkactive {
    font-size: 16px;
  }

  .homewrapper {
    grid-template-rows: 100px 1fr 16fr 110px;
  }

  .sitewrapper{
    grid-template-rows: 100px 16fr 110px;
  }
}
 /* **End of media Q 1100px** */

 /* **Start of media Q 1068px** */
@media screen and (max-width: 1068px) {

  .googlemap {
    max-width: 450px;
    max-height: 300px;
  }

  .backgright img {
    max-width: 400px;
    width: auto;
    height: auto;
  }

  .backgleft img {
    max-width: 400px;
    width: auto;
    height: auto;
  }

  .backgright {
    justify-content: center;
  }

  .backgleft {
    justify-content: center;
  }

  .footerwrapper {
    padding: 0 35px;
  }

  .homecontentwrapper {
    max-width: 575px;
    font-size: 22px;
  }
}
 /* **End of media Q 1068px** */

 /* **Start of media Q 1000px . hamburger** */
@media screen and (max-width: 1000px) {

  .columnrightabout {
    display: none;
  }

  .locationrighttext {
    display: none;
  }

  .googlemaparea {
    margin: 0 50px;
  }

  .googlemaparea2 {
    display: none;
  }

  .header6 p {
    text-align: center;
  }

  .columnleftarea2 p {
    text-align: center;
  }

  .backgright img {
    display: none;
    width: 0;
  }

  .backgright {
    display: none;
    width: 0;
  }

  .backgleft img {
    display: none;
    width: 0;
  }

  .backgleft {
    display: none;
    width: 0;
  }

  .columnrightarea {
    display: none;
  }

  .homecontentwrapper {
    max-width: 600px;
    font-size: 22px;
    padding: 0 25px;
  }

  .columnleftarea {
    align-items: center;
    margin-left: 0;
  }

  .columnleftarea p {
    text-align: center;
  }

  .carecreditbtn {
    justify-content: center;
  }

  .hamnav {
    display: block;
  }

  .hamnav nav {
    display: block;
  }

  nav {
    display: none;
  }

  body {
    overflow: hidden;
  }

  .hamnav nav ul {
    flex-direction: column;
    padding: 0 0px 0 0;
  }

  .hamnav a {
    text-decoration: none;
    color: #232323;
    transition: color 0.3s ease;
    width: 100%;
    text-align: right;
    border: solid .5px #DED9CE;
  }

  .hamnav a:hover {
    background-color: #DED9CE;
    color: black;
    background-size: 100% auto;
  }

  #menuToggle {
    display: block;
    position: absolute;
    top: 50px;
    right: 25px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }

  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }

  #menuToggle span {
    display: block;
    width: 30px;
    height: 3px;
    margin-bottom: 5px;
    position: relative;
    background: #A15025;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 0.55s ease;
  }

  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }

  #menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
  }

  #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  #menuToggle input:checked ~ span:nth-last-child(2) {
    opacity: 1;
    transform: rotate(-45deg) translate(0, -1px);
  }

  #menu {
    position: absolute;
    width: 300px;
    height: 353px;
    margin: 23px 0 0 0;
    right: -30px;
    background: rgba(245, 241, 231, 1);
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    font-family: 'palatino linotype', serif;
  }

  #menu li {
    padding: 20px 50px;
    font-size: 22px;
  }

  #menuToggle input:checked ~ ul {
    transform: scale(1.0, 1.0);
    opacity: 1;
  }

  .homewrapper {
    display: grid;
    grid-template-areas: "header header header"
    "hero hero hero"
    "content content content"
    "footer footer footer";
    grid-template-rows: 100px 1fr 16fr 110px;
    grid-template-columns: 0 auto 0;
  }

  .sitewrapper {
    display: grid;
    grid-template-areas: "header header header"
    "content content content"
    "footer footer footer";
    grid-template-rows: 100px 16fr 110px;
  }
}
 /* **End of media Q 1000px** */

 /* **Start of media Q 922px** */
 @media screen and (max-width: 922px) {
   .headlines {
     display: none;
   }

   .footmid {
     align-items: flex-start;
     margin: 0;
     line-height: 20px;
   }

   .footmid a {
     flex-direction: row;
   }

   .footerwrapper {
     justify-content: space-between;
   }

   .footermap{
     width: 190px;
   }

   .homecontentwrapper {
    max-width: 550px;
  }
}
 }
 /* **End of media Q 922px** */

/* **Start of media Q 768px** */
@media screen and (max-width: 768px) {

  /* **Start footer phone number active** */
  a[href*="tel:"] {
    pointer-events: auto;
  }
  /* **End footer phone number active** */
}
/* **End of media Q 768px** */

/* **Start of media Q 708px** */
@media screen and (max-width: 708px) {
  .pwidth {
    max-width: 400px;
    font-size: 12px;
  }

  .homecontentwrapper {
    font-size: 18px;
  }

  .footmid a {
    font-size: 10px;
  }

  .footermidbold {
    letter-spacing: 3px;
  }

  .footermap {
    width: 165px;
  }

  .abouttext p {
    font-size: 20px;
  }
}
/* **End of media Q 708px** */

/* **Start of media Q 700px** */

@media screen and (max-width: 550px) {
  .googlemap {
    max-width: 300px;
    max-height: 300px;
  }

  .footermap {
    display: none;
  }

  .footmid {
    align-items: center;
  }

  .footmid a {
    font-size: 14px;
  }

  .footerwrapper {
    justify-content: center;
  }
}

@media screen and (max-width: 480px) {
.headerlogo img {
  width: 265px;
  }
}

/* **Start of media Q 600px** */
@media screen and (max-width: 375px) {
  .headerlogo img{
    width: 250px;
  }
}
/*
 * ***************END OF MEDIA Qs ********************************************************************************************************************************************************************
 */
