/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
 @font-face {
     font-family: 'brock_script';
     src: url('fonts/brockscript-webfont.eot');
     src: url('fonts/brockscript-webfont.eot?#iefix') format('embedded-opentype'),
          url('fonts/brockscript-webfont.woff2') format('woff2'),
          url('fonts/brockscript-webfont.woff') format('woff'),
          url('fonts/brockscript-webfont.svg#brock_scriptregular') format('svg');
     font-weight: normal;
     font-style: normal;
 }

 @font-face {
     font-family: 'kunstler_scriptregular';
     src: url('fonts/kunstler-script-webfont.woff2') format('woff2'),
          url('fonts/kunstler-script-webfont.woff') format('woff'),
          url('fonts/kunstler-script.ttf');
     font-weight: normal;
     font-style: normal;
 }


html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
  font-family: Helvetica, sans-serif;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
  font-family: Helvetica, sans-serif;;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
  height: 55px;
  text-align: center;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  height: 55px;
  width: 200px;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: #FFFFFF; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
  background-color: #000000;
  border-radius: 3px;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* END CSS RESET */
/* ############################################################ */
/* ############################################################ */

/* START MAIN CSS */
body {
  padding: 0em 1em 0em 1em;
  background-color: #0d2337;
  /* background-image: url('../images/background/backgroundCross.png'); */
}


h1, h2, h3, h4, h5, h6 {
	font-family: Helvetica, sans-serif;
  color: #EEEEEE;
}

body p {
  color: #FFFFFF;
}

div.alert p {
  color: #333333;
}

body a:link {
  color: #FFFFFF;
}

body a:visited {
  color: #db9e65;
}

body a:hover {
  color: #f8ef42;
}

body a:active {
  color: #31c598;
}


footer {
	width: 100%;
	height: 150px;
	/* background-color: rgba(50, 50, 50, .7); */
  border: solid 1px black;
}

p.logoCount {
  font-family: arial;
  font-size: 14px;
  padding: 0px;
  margin: 0px;
  color: #EEEEEE;
  background-color: #000000;
  height: 30px;
}

/* ############## MAIN NAVIGATION & OFF CANVAS ############## */
header#head img.xlogo {
  background-color: #000000;
  border-radius: 7px;
  margin-top: 30px;
}

header#formHeader img.xlogo {
  background-color: #000000;
  border-radius: 7px;
}

img#mainAutoXchangeLogo {
  background-color: #000000;
  border-radius: 5px;
}

header.indexHead {
  padding: 1em;
}

span#sig {

}

section#indexShortcut div.overlayBox h2 {
  height: 50px;
  background-color: blue;
  text-align: center;;
}




/*----- NEW GREY STRIP MENU FOR JC -----*/
@media screen and (min-width: 860px) {
	.menu {
	/* width:95%; */
	margin: 10px;
	padding:10px 20px;
	box-shadow:0px 1px 1px rgba(0,0,0,0.15);
	border-radius:3px;
  background-image: url('../images/background/silverBar.jpg');
	}
}

.menu ul {
	display:block;
}

.menu li {
	margin:0px 50px 0px 0px;
	float:left;
	list-style:none;
	font-size:20px;
}

.menu li:last-child {
	margin-right:0px;
}

.menu ul li:hover {
	background-color: #ffffff;
}

.menu a:link {
	text-shadow:0px 1px 0px rgba(0,0,0,0.5);
	color:#ffd700;
	transition:color linear 0.15s;
	text-decoration: none;
}

.menu a:visited {
  color: #FFFFFF;
}

.menu a:hover, .menu .current-item a {
	text-decoration:none;
	color:#FC7930;
  background-color: #000;
}

.menu a:active {
  color: #ffffff;
}

/*----- Search -----*/
.search-form {
	float:right;
	display:block;
}

.search-form input {
	width:200px;
	height:30px;
	padding:0px 8px;
	float:left;
	border-radius:2px 0px 0px 2px;
	font-size:13px;
}

.search-form button {
	height:35px;
	margin-left: 1em;
	padding:0px 7px;
	float:right;
	border-radius:0px 2px 2px 0px;
	background:#66a992;
	font-size:13px;
	font-weight:600;
	text-shadow:0px 1px 0px rgba(0,0,0,0.3);
	color:#fff;
}

a.searchLink:link {
  color: red;
}

/*----- Responsive -----*/
@media screen and (max-width: 1150px) {
	.wrap {
		width:90%;
	}
}

@media screen and (max-width: 970px) {
	.search-form input {
		width:120px;
	}
}

@media screen and (max-width: 860px) {
	.menu {
		position:relative;
		display:block;
    z-index: 100;
	}

	.menu ul.active {
		display:none;
	}

	.menu ul {
		width:100%;
		position:absolute;
		top:120%;
		left:0px;
		padding:10px 18px;
		box-shadow:0px 1px 1px rgba(0,0,0,0.15);
		border-radius:3px;
		background:#303030;
	}

	.menu ul:after {
		width:0px;
		height:0px;
		position:absolute;
		top:0%;
		left:22px;
		content:'';
		transform:translate(0%, -100%);
		border-left:7px solid transparent;
		border-right:7px solid transparent;
		border-bottom:7px solid #303030;
	}

	.menu li {
		margin:5px 0px 5px 0px;
		float:none;
		display:block;
	}

	.menu a {
		display:block;
		text-decoration: none;
	}

	.toggle-nav {
		padding:20px;
		float:left;
		display:block;
		box-shadow:0px 1px 1px rgba(0,0,0,0.15);
		border-radius:3px;
		background:#303030;
		text-shadow:0px 1px 0px rgba(0,0,0,0.5);
		color:#777;
		font-size:20px;
		transition:color linear 0.15s;
	}

	.toggle-nav:hover, .toggle-nav.active {
		text-decoration:none;
		color:#66a992;
	}

	.search-form {
		margin:12px 0px 0px 20px;
		float:left;
	}

	.search-form input {
		box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
	}
}

/* HOMEPAGE JOHN TITLE WITH DIAMOND*/
h2.johnTitle {
  font-weight: 600;
  line-height: 1.5em;
  font-family: Arial, sans-serif;
}

@media only screen and (max-width: 800px) {
  h2.johnTitle {
  font-weight: 400;
  line-height: 1.0em;
  }
}

/* CAR EMBLEMS */
.wrapper {
  position: absolute;
  top: .5em;
  left: 1em;
  /* width:100%; */
  height: auto;
  display: grid;
  grid-template-columns: 10% 10% 10% 10% 10% 10%;
  grid-gap: 8px;
  color: #444;
}

@media screen and (max-width: 900px) {
  div.wrapper {
    position: relative;
  }
}

/*  END HOMEPAGE JOHN TITLE WITH DIAMOND

/* INSURANCE CARDS - HOME PAGE */
div.insuranceBlocks {
  height: 1000px;
}

div.insurance a {
  text-decoration: none;
}

div.insurance {
  text-align: center;
  width: 200px;
  height: 60px;
  position: absolute;
  background-color: transparent;
  border-radius: 5px;
  z-index: 100;
  border: double 3px white;
}

div.insurance h5 {
  color: #FFFFFF;
  font-weight: bold;
}

div.insurance.zero {
  top: 5px;
  right: 60px;
  color: #FFFFFF;
  border: solid #333333 5px;
  padding: 0;
}

div.insurance.zero h5 {
  display: inline;
  font-size: 1.2em;
  font-family: Helvetica, sans-serif;
}

div.insurance.one {
  top: 75px;
  right: 60px;
  color: #333;
}

div.insurance.two {
  top: 145px;
  right: 60px;
}

div.insurance.three {
  top: 215px;
  right: 60px;
}

div.insurance.four {
  top: 285px;
  right: 60px;
}

div.insurance.five {
  top: 355px;
  right: 60px;
}

div.insurance.six {
  top: 425px;
  right: 60px;
}

div.insurance.seven {
  top: 495px;
  right: 60px;
}

div.insurance.eight {
  top: 565px;
  right: 60px;
}

div.insurance.nine {
  top: 635px;
  right: 60px;
}


div.insurance.ten {
  top: 705px;
  right: 60px;
}

div.insurance.eleven {
  top: 775px;
  right: 60px;
}

div.insurance.twelve {
  top: 845px;
  right: 60px;
}

div.insurance.thirteen {
  top:915px;
  right: 60px;
}

div.insurance {
  background-color: #5663db;
}

@media only screen and (max-width: 900px) {
  div.insuranceBlocks {
    position: relative;
    height: 1050px;
    margin-top: 2em;
  }
}

@media only screen and (max-width: 900px) {
div.insurance.zero, div.insurance.one, div.insurance.two, div.insurance.three, div.insurance.four, div.insurance.five, div.insurance.six, div.insurance.seven,
div.insurance.eight, div.insurance.nine, div.insurance.ten, div.insurance.eleven,
div.insurance.twelve, div.insurance.thirteen {
  left: 10px;
  }
}

/* END INSURANCE CARDS - HOME PAGE */

/* ############## END MAIN GREY NAVIGATION ON & OFF CANVAS JC ############## */

section#indexShortcut div.overlayBox h2
 {
    height: 50px;
    background-color: rgb(43, 120, 187);
    text-align: center;
}


/* ######## MAP PAGE ############# */
div#kalakaua {
  float: left;
  margin-right: 1em;
  color: #FFFFFF;
}
div#nimitz {
  float: left;
  margin-right: 1em;
  color: #FFFFFF;
}

div#ward {
  float: left;
  margin-right: 1em;
  color: #FFFFFF;
}

div#carenta {
  float: left;
  margin-right: 1em;
  color: #FFFFFF;
}


div.clearFloat {
  clear: both;
}

ul.homeAddress {
  font-size: 1.1em;
}

ul.homeAddress li {
  list-style: none;
}

div#kalakaua a:link, div#nimitz a:link, div#ward a:link, div#carenta a:link {
  text-decoration: none;
  color: #FFFFFF;
}

div#kalakaua a:visited, div#nimitz a:visited, div#ward a:visited, div#carenta a:visited {
  color: gold;
}

div#kalakaua a:hover, div#nimitz a:hover, div#ward a:hover, div#carenta a:hover {
  color: #81ee88;
}

div#kalakaua a:active, div#nimitz a:active, div#ward a:active, div#carenta a:active {
  color: gold;
}


ul.address li {
	color: #EEEEEE;
	list-style: none;
	font-family: "Goudy Bookletter 1911", sans-serif;
	font-size: 1.5em;
}

/* ######## END MAP PAGE ######### */


/* ##############3 VEHICLE INVENTORY ############## */

option.highlight {
	color: red;
}


table {
        margin: 0em;
        font-size: 12px;
        border: 1px solid black;
        }

        h1 {
            text-align: center;
            color: gold;
            font-size: xx-large;
            font-family: 'Times New Roman', serif';
        }

      td img.vehicleImage {
        width: 300px;
        }


      th, td {
        font-weight: bold;
        border: 1px solid black;
        padding: 5px;
        background-color: #EEEEEE;
        border: 1px solid black;
        height: 25px;
        font-size: 1.2em;
        }

        td {
            font-weight: lighter;
        }

        td p.inventoryTable {
          color: black;
        }

/* section.vehicleInventory {
	padding: 2em;
	border: none;

} */

div.hoursTable table.hoursTable {
  border: none;
  font-size: 12px;
  margin-right: 1em;
}
div.hoursTable table.hoursTable thead th, div.hoursTable table.hoursTable tr td {
  border: none;
  background-color: transparent;
  color: #FFFFFF;
}

header#head {
  /* background-image: url('../images/background/mainHeadImage.jpg'); */
  background-repeat: no-repeat;
  padding: 1em;
  border-radius: 5px;
  position: relative;
  height: 400px;
}

header#formHeader {
  background-image: url('../images/background/jcBackgroundHeader.jpg');
  background-repeat: no-repeat;
  padding: 1em;
  border-radius: 5px;
  position: relative;
  height: 400px;
}

/* ############# BACKGROUND ############# */
div.backgroundCars img {
  width: 100%;
  height: auto;
  opacity: 0.7;
}
div.backgroundCars img:hover{
opacity: 1;
}


/* ############# BACKGROUND ############# */

/* ################### MAIN INVENTORY PAGES ############## */
table.customerInventory tr td {
  text-align: left;

}

tbody tr td.endVehicle a:link {
  color: #222222;
}

tbody tr td.endVehicle a:visited {
  color: #9b1515;
}

tbody tr td.endVehicle a:hover {
  color: #1549c1;
}

tbody tr td.endVehicle a:active {
  color: #9b1515;
}



/* ################ HAWAII BEST LOGO ############## */
img.best {
  width: 100px;
  height: auto;
  position: absolute;
  top: 510px;
  right: 25px;
  border-radius: 5px;
}

@media only screen and (max-width: 475px) {
  img.best  {
    top: 640px;
  }
}

img.indexBest {
  width: 100px;
  height: auto;
  position: absolute;
  top: 460px;
  right: 25px;
  border-radius: 5px;
}

@media only screen and (max-width: 400px) {
  img.indexBest  {
    width: 70px;
  }
}


/* ############### END HAWAII BEST LOGO ############# */
/* ############ NEON CAR ########### */
.homeMainCarImg {
  margin-top: .5em;
  width: 100%;
  height: auto;
  border-radius: 7px;
}
/* ############# END NEON CAR ####### */

/* ########### START CUSTORMER FORM REQUEST VEHICLE ###*/
div label.custLabel {
  color: #EEEEEE;
}
label.checkLabel.custLabel {
  width: 0em;
}
.submit {
  /* height: 40px; */
}

/* ########### END CUSTORMER FORM REQUEST VEHICLE ###*/

/* ####### START PROCESS FORM ########## */
h3.processThankyou {
  color: #25BD8B;
  font-size: 1.5em;
  font-family: 'Times New Roman', serif;
}

/* ######## END PROCESS FORM ######## */

/* ##### INDIVIDUAL THUMBS OF A VEHICLE #### */
.thumbnailGrid {
  padding: .5em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(8, 10vw);
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.thumbBox {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 3px;
  font-size: 90%;
}
.thumbBox img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.thumbBox img {
  transition: transform .5s ease;
}

.thumbBox img:hover {
  transform: scale(2.7);
}

/* ################ START SOCIAL FOOTER ################ */
.footerSocialWrapper {
		position: relative;
		padding: 1em;
		margin-bottom: 1em;
		background-color: #E6E4DF;
		height: 6em;
		width: 100%;
		border-radius: 5px;
	}

	#footerSocial {
		width: 100%;
		height: 30px;
		background-color: #3C3938;
		border: none;
		border-radius: 2px;
		margin-bottom: 3em;
		text-align: center;

	}

	#footerSocial img.footerSocialIcons {
		position: relative;
		top: 10px;
	}

	#footerSocial p.inlineSocial {
		display: inline-block;
		position: relative;
		top: -15px;
		font-family: arial;
		font-size: .7em;
		color: #EEEEEE;
		margin-right: 1.5em;
	}


  @media only screen and (max-width: 650px) {
    #footerSocial p.inlineSocial {
      display: none;
    }
  }

  img.footerSocialIcons {
    width: 40px;
    max-width: 40px;
    height: auto;
  }

  @media only screen and (max-width: 650px) {
    img.footerSocialIcons {
      margin: 0px 1em 0px auto;
    }
  }


  section.infoFooter {
    width: 100%;
    height: 100px;
    padding: 2em;
  }

  section.infoFooter div.leftColumn {
    float: left;
    width: 33.3%;
    text-align: left;
  }

  section.infoFooter div.rightColumn {
    float: right;
    width: 33.3%;
    text-align: right;
  }

  section.infoFooter div.centerColumn {
    width: 33.3%;
    margin: 0px auto;
  }
section.infoFooter div.leftColumn p, section.infoFooter div.rightColumn p, section.infoFooter div.centerColumn p{
  margin: 0px;
}
/* END FOOTER */

span#sig {
  /* font-family: Pinyon Script; */
  font-family: kunstler_scriptregular;
  word-spacing: -.2em;
  font-size: 60px;
  background-color: #000000;
  border-radius: 10px;
  background-image: url("../images/icons/diamond65px.jpg");
  background-repeat: no-repeat;
  background-position: center;
  padding: .35em;
  display: block;
  width: 300px;
  text-align: center;
}

span.sigOuter {
  font-size: 1.5em;
}

@media only screen and (max-width: 800px) {
  span.sigOuter {
    font-size: 1.0em;
  }
}


/* SECTION & ROTATING SLIDESHOW */
div.flexslider ul li p.caption {
         position: relative;
         bottom: 75px;
         left: 0px;
         padding: 15px;
         background-color: rgba(10, 10, 10, .7);

      }

      .flexslider {
         position: relative;
      }

      ul li {
         position: relative;
         color: #FFFFFF;

      }
      .flexslider img {
         height: 450px;
         width: auto;
      }

      ul.slides {
        width: 80%;
      }


/* END SECTION & ROTATING SLIDESHOW */


/* STYLE FOR CUSTOMER INTERST FORM (JCCUSTOMERFORMREGISTER.PHP) */

form.registerInterest legend {
background-color: #000;
color: #fff;
padding: 3px 6px;
}

form.registerInterest div {
  margin-bottom: 1em;
}

label.custLabel {
  display: block;
  height: 20px;
  width: 200px;
  float: left;
}

input.custInput {
  display: block;
  width: 230px;
  height: 40px;
  border-radius: 5px;
}

input.txt {
   display: block;
   width: 230px;
   height: 30px;
 }

@media only screen and (max-width: 480px) {
  input.custInput {
    width: 175px;
  }
}

@media only screen and (max-width: 380px) {
  label.custLabel {
    width: 120px;
  }

  input.custInput {
    width: 150px;
  }
}

input.custSubmit {
  display: block;
  margin-top: 1.2em;
  width: 150px;
  /* height: 40px; */
}

/* END CUSTOMER INTERST FORM (JCCUSTOMERFORMREGISTER.PHP) */
/* GOOGLE APPOINTMENT CALENDAR (RENTALS / SALES) */

iframe#calendarFrame body > {
	color: #FFFFFF;
}

iframe#calendarFrame {
	width: 100%;
	max-width: 800px;
}
div.appointmentCalendar {
	max-width: 600px;
	float: left;
	width: 100%;
	margin-top: 3.9em;
	margin-left: .5em;
}

div#salesAnchor.appointmentCalendar {
  margin-top: 1em;
}

@media only screen and (max-width: 1165px) {
  div#salesAnchor.appointmentCalendar {
    margin-top: 2em;
  }
}


section.formSection {
	float: left;
}

@media only screen and (min-width: 1150px) {
  section.formSection {
  	width: 510px;
  }
}

/* SHOW / HIDE "GO TO CALENDAR LINK" */

p#viewCalendarBtn {
	display: none;
}

@media only screen and (max-width: 1160px) {
	p#viewCalendarBtn {
		display: block;
    font-size: 1.7em;
	}
}
/* END SHOW / HIDE "GO TO CALENDAR LINK" */


/* FINANCE FORM */
form#financeForm {


}


input:focus,
textarea:focus {
  outline: none;
}

/*
 p {
  max-height: 60px;
} FOR ACKNOLEGEMENT CHECK

*/

h1 {
  color: #ccc;
  font-size: 1.5em;
  font-weight: 700;
  margin: 0;
  text-align:center;
}

.calc {
  background: #fff;
  border-radius: 6px;
  box-shadow: 15px 15px 0px rgba(0,0,0,.1);
  margin: 50px auto 10px 20px;
  padding: 20px;
  padding-top: 30px;
  width: 300px;
}


  .header {
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95581/rx7-Spectrum-Photography.jpg');
    background-position: 106% 89%;
    background-size: 101%;
    border-bottom: 2px solid #f26964;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    bottom: 30px;
    height: 102px;
    position: relative;
    right: 20px;
    width: 300px;
  }


  input {
    background: #f5f5f5;
    border: 0;
    border: 1px solid #eee;
    border-radius: 3px;
    max-width: 215px;
    padding: 0px;
    /* padding-left: 65px; */
    margin-bottom: 10px;
    width: 100%;
  }

  /* PLACE HOLDER STYLING */


  /* END PLACE HOLDER STYLING */

  .btn {
    background: #f26964;
    border: 0;
    border-radius: 6px;
    box-shadow: 0px 3px 0px #c1524e;
    color: #fff;
    font-size: 1.2em;
    padding: 20px;
    position: relative;
    text-shadow: 1px 1px 0px rgba(0,0,0,.1);
    width: 100%;
  }


/* :active {
    box-shadow:none;
    top:3px;
  } */


  #output {
    border-radius: 6px;
    color: #919191;
    font-size: 28px;
    font-weight: bold;
    height: 34px;
    margin: 0 auto;
    padding: 11px;
    text-align: center;
    vertical-align: middle;
    visibility: visible;
  }


.fa {
  /* background-color: #f26964; */
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  height: 18px;
  bottom: 68px;
  color: white;
  padding: 20px;
  position: relative;
  width: 12px;
}
.fa-usd {
  &:before {
    bottom: 1px;
    font-size: 18px;
    left: 2px;
    position: relative;
  }
}

.interest {
  &:before {
  content: "%";
  font-weight: bold;
  }
}

p#output {
  color: #666666;
}

p#calculatorLink {
	display: block;
	width: 200px;
	background-color: #fff;
	border-radius: 3px;
	/* vertical-align: middle; */
	padding: 15px;
	text-align: center;
}

p#calculatorLink a {
  color: #6c1010;
}

/* END FINANCE FORM */

h1.luxury {
  font-family: "brock_script", serif;
  font-size: 60px;
  background-color: #17628a;
  border-radius: 5px;
  height: 80px;
  padding-top: .2em;
}

@media only screen and (max-width: 700px) {
  h1.luxury {
    font-size: 40px;
    padding-top: .5em;
  }
}

@media only screen and (max-width: 500px) {
  h1.luxury {
    font-size: 30px;
  }
}

/* STAFF IMAGES */
.gridStaff {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  }
.gridStaff div.staffBlock {
  padding: .5em;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  width: 15em;

}
/* END STAFF IMAGES */

/* NEW MAIN MENU */

* {
    box-sizing: border-box;
  }

  body {
    margin: 0px;
    font-family: 'segoe ui';
  }

  .nav {
    height: 80px;
    width: 100%;
    background-color: #57c0f9;
    /* position: relative; */
    position: fixed;
    top: 0;
    border-bottom: 10px #444 solid;
    z-index: 1000;
  }

  img.menuLogo {
    width: 60px;
    height: auto;
    border-radius: 3px;
  }

  .nav > .nav-header {
    display: inline;
  }

  .nav > .nav-header > .nav-title {
    display: inline-block;
    font-size: 22px;
    color: #fff;
    font-weight: 550;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px 10px 10px 10px;
  }

  .nav > .nav-btn {
    display: none;
  }

  .nav > .nav-links {
    display: inline;
    float: right;
    font-size: 18px;
  }
  .nav > .nav-links > ul li a{
    display: block;
    padding: 0 8px;
    color: #fff;
    line-height: 40px;
    font-size: 18px;
    text-decoration: none;

  }
  .nav > .nav-links > ul{
    padding: 0;
    margin-top: 5px;
    list-style: none;
    position: relative;
    margin-right: 2em;

  }
  .nav > .nav-links > ul li{
    display: inline-block;
    background-color: transparent;


  }
  .nav > .nav-links > ul li:hover{
      background-color: #B87333;
      border-radius: 5px;
  }

  .nav > #nav-check {
    display: none;
  }

 .nav .nav-links ul a.icon{
 margin-left: 80px;
 margin-right: 10px;
 }

 .nav .nav-links ul a i{
    background-color: #fff;
    border-radius: 50px;
    padding: 7px;
    margin-left: 5px;
 }

.nav .nav-links ul a i#fb {
  border-radius: 50px;
  padding: 0.4em 0.6em;
  box-shadow: 0px 0px 2px #888;
}

.nav .nav-links ul a i#inst {
  margin-right: 1.5em;
}

.fa-instagram::before {
	color: #57c0f9;
}


.fa-facebook-f::before, .fa-facebook::before {
	color: #57c0f9;
}


.fa-twitter::before {
	color: #57c0f9;
}

  @media (max-width: 1200px) {
    .nav > .nav-btn {
      display: block;
      position: absolute;
      right: 0px;
      top: 0px;
    }
    .nav > .nav-btn > label {
      display: block;
      width: 50px;
      height: 50px;
      padding: 13px;
      margin-right: 15px;
    }
    .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
      background-color: rgba(0, 0, 0, 0.3);
    }
    .nav > .nav-btn > label > span {
      display: block;
      width: 25px;
      height: 10px;
      border-top: 2px solid #eee;
    }
    .nav > .nav-links {
      position: absolute;
      display: block;
      width: 100%;
      background-color: #333;
      height: 0px;
      transition: all 0.3s ease-in;
      overflow-y: hidden;
      top: 50px;
      left: 0px;
    }
    .nav > .nav-links > ul li a {
      display: block;
      width: 100%;
    }

    /*   */

      .nav > .nav-links > ul li{
        display: block;
        margin-bottom: 20px;
        padding: 0;
        background-color: #333;

      }
      .nav > .nav-links > ul li a{
          margin-left: 40%;
      }
      .nav .nav-links ul a.icon{
        margin-left: 39%;
      }

    /*   */
    .nav > #nav-check:not(:checked) ~ .nav-links {
      height: 0px;
    }
    .nav > #nav-check:checked ~ .nav-links {
      height: calc(100vh - 50px);
      overflow-y: auto;
      margin-top: 20px;
    }
  }

/* END NEW MAIN MENU */