@font-face {
  font-family: Alatsi;
  src: url(../fonts/Alatsi-Regular.ttf);
}

@font-face {
  font-family: Roboto-Light;
  src: url(../fonts/Roboto-Light.ttf);
}

@font-face {
  font-family: Roboto-Bold;
  src: url(../fonts/Roboto-Bold.ttf);
}

label {
  display: block;
  margin: 5px 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 5px;
  border-bottom: 1px solid #aaa;
}

body
{
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	width: 100%;
	display: flex;
    justify-content: center;
	background-color: white;
}

.lemon
{
	color: #FFF36D;
}

.taupe
{
	color: #483C32;
}

.olive
{
	color: #A3A04E;
}

.content {
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
}

.main-copy-holder {
	background-image: url('../images/bg.jpg');
	background-size: cover; /* This property makes the image cover the entire element */
	background-repeat: no-repeat; /* This property prevents the image from repeating */
	border-radius: 0 0 4vh 4vh;
}

.red
{
	background-color: #D71F2A;
	color: #FFF;
}

.banner-common
{
	background-repeat: no-repeat;
	background-attachment: cover;
	background-position: 0% 0%;
	background-size: 178%;
	border-radius: 50%;
	width: 26vh;
	height: 26vh;
}

.banner1
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-1.jpg");
}

.banner2
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-2.jpg");
}

.banner3
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-3.jpg");
	background-position: 40% 0%;
}

.banner4
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-4.jpg");
	background-position: 50% 0%;
}

.banner5
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-5.jpg");
	background-position: 65% 0%;
    background-size: 180%;
}

.banner6
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-6.jpg");
	background-position: 37% 50%;
}

.banner7
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-7.jpg");
	background-position: 25% 0%;
}

.banner8
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-8.jpg");
	background-position: 10% 0%;
}

.banner9
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-9.jpg");
	background-position: 40% 0%;
}

.banner10
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-10.jpg");
	background-position: 15% 0%;
}

.banner11
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-11.jpg");
	background-position: 25% 0%;
}
.banner12
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-12.jpg");
	background-position: 58% 10%;
	background-size: 135%;
}

.banner13
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-13.jpg");
	background-position: 6% 0%;
}

.banner14
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-14.jpg");
	background-position: 0% 40%;
    background-size: 100%;
}

.banner15
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-15.jpg");
	background-position: 50% 84%;
}

.banner16
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-16.jpg");
	background-position: 10% 96%;
    background-size: 152%;
}

.banner17
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-17.jpg");
	background-position: 40% 40%;
    background-size: 135%;
}

.banner18
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-18.jpg");
	background-position: 51% 36%;
}

.banner19
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-19.jpg");
	background-position: 10% 25%;
    background-size: 100%;
}

.banner20
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-20.jpg");
	background-position: 10% 25%;
	background-size: 100%;
}

.banner21
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-21.jpg");
	background-position: 0% 0%;
    background-size: 100%;
}

.banner22
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-22.jpg");
	background-position: 40% 40%;
    background-size: 136%;
}

.banner23
{
	background-image: url("../images/BannerImages/Smaller/Smaller-Artboard-23.jpg");
	background-position: 30% 40%;
    background-size: 180%;
}

.header-logo
{
	width: 6%;
	padding: 2%;
	float: left;
	position: absolute;
}

.header-logo img
{
	max-width: 80px;
	width: 10vw;
}

.header-menu
{
	color: white;
	font-size: 9pt;
	padding: 3%;
	height: 70%;
	top: 1%;
	right: 10%;
	float: right;
	display: grid;
	font-family: Alatsi;
	letter-spacing: 0.025em;
	position: absolute;
}

.header-holder
{
	position: relative;
	z-index: 1;
	width: 100%;
}

.header-grey
{
	background-color: #231F20;
	opacity: 0.7;
	max-height: 200px;
	height: 8vw;
	position: absolute;
	width: 100%;
}
  
  .header-photo-holder {
	max-width: 100%;
	height: auto;
	object-fit: contain;
  }

.header-photo-holder .photo
{
	margin: 0;
    position: absolute;
	min-width: 100px;
	min-height: 100px;
	width: 20vw;
	height: 20vw;
	max-width: 250px;
	max-height: 250px;
	position: absolute;
	bottom: -3%;
	right: 4%;
}

.header-button
{
	width: 24vw;
}

.header-above-menu, .header-below-menu
{
	height: 0.5vw;
	float: right;
}

.menu-item
{
	padding: 0;
	text-decoration: none;
	cursor: pointer;
	color: #626D5C;
	font-weight: 1000;
}
.menu-item:link {
  color: #626D5C;
}
.menu-item:visited {
  color: #626D5C;
}
.menu-item:active {
  color: #626D5C;
  font-weight: 1000;
}
.menu-item:hover
{
	background-color: #F5D5AE;
}
.menu-above
{
	text-align: right;
}

.main-copy a:link
{
	color: black;
	text-decoration: underline;
}

.main-copy a:visited {
  color: black;
}
.main-copy a:active {
  color: black;
}
.main-copy a:hover
{
	font-weight: bold;
}

.main-copy
{
	display: block;
	justify-content: center;
	text-align: left;
	padding-right: 10%;
	padding-left: 10%;
}

.menu-area
{
	display: block;
	justify-content: center;
	text-align: center;
	padding-right: 10%;
	padding-left: 10%;
}

.main-copy .heading
{
	color: #936C63;
	font-size: 60px;
	letter-spacing: 3px;
	font-family:"Handwriting";
	padding-top: 10px;
	transform: rotate(-5deg);
}

.main-copy .sub-heading
{
	color: #505050;
	font-size: 28px;
	letter-spacing: 3px;
	font-family: Alatsi;
	letter-spacing: 0.025em;
	padding-top: 10px;
}

.main-copy .heading-secondary
{
	color: #626D5C;
	letter-spacing: 2px;
	font-size: 26px;
	font-family: "CenturyGothic";
	letter-spacing: 0.025em;
}

.smaller-heading
{
	font-size: 20px !important;
}

.main-copy .copy
{
	font-size: 20px;
	/*text-align: justify;*/
	font-family: "CenturyGothic";
	line-height: 24px;	
}

.allow-break
{
	word-wrap: break-word;
}

.main-copy .semi-sub-text
{
	font-size: 16px;
	font-family: "CenturyGothic";
	line-height: 20px;
}

.main-copy .sub-text
{
	font-size: 12px;
	text-align-last: center;
	font-family: "CenturyGothic";
	font-style: italic;
	line-height: 14px;
}

.main-copy .tagwords
{
	color: #D71F2A;
	padding-top: 50px;
	padding-bottom: 50px;
	font-size: 24px;
	font-family: Roboto-Bold;
}

.divider {
	border-top: 1px solid #EEE; /* Adjust thickness and color as needed */
  }

.main-copy .shout
{
	color: #D71F2A;
	padding-top: 25px;
	padding-bottom: 25px;
	font-size: 52px;
	letter-spacing: 2px;
	font-family: Alatsi;
}

.main-copy .rsvp-chosen-option
{
	font-size: 20px;
	font-family: "CenturyGothic";
	color: #936C63;
}

.less-pad
{
	padding-left: 2.5%;
	padding-right: 2.5%;
}

.testimonial-content {
  margin: 0 auto;
  width: 69vw;
  max-width: 1100px;
}

.testimonial-area
{
	margin: 0 auto;
	width: 80%;
	display: block;
	text-align: center;
}

.testimonial-copy
{
	color: black;
	font-size: 23px;
	letter-spacing: 0.05em;
	font-family: "CenturyGothic";
}

.testimonial-name
{
	color: #414042;
	font-size: 24px;
	letter-spacing: 0.025em;
	font-family: Alatsi;
	padding-top: 10px;
	text-align: right;
}

.testimonial-name img
{
	width: 12vw;
	min-width: 200px;
}

.showcase img
{
	max-width: 100%;
}

.footer
{
	min-height: 140px;
	position: relative;
}

.footer-img
{
	width: 100%
}

.footer-content
{
	margin: 0 auto;
	width: 80%;
	text-align: center;
}

.footer-button
{
	padding: 10px;
	width: 2.5vw;
	max-width: 80px;
	min-width: 50px;
}

.footer-section-title
{
	font-family: Alatsi;
	font-size: 16pt;
}

.footer-section-copy
{
	color: #D5D5D5;
	text-align: center;
	line-height: 15pt;
	font-size: 10pt;
}

.footer-table
{
	width: 100%;
}

.empty-table
{
	width: 100%;
}

.empty-table tr, .empty-table td
{
	border: 0;
}

.footer-table td
{
	width: 33%;
	vertical-align: top;
	padding-bottom: 20px;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 0;
}

.white-hr
{
	border: 1px solid white;
}

.black-border
{
	border: 1px solid black;
}

.tal
{
	text-align: left !important;
	text-align-last: left !important;
}

.tar
{
	text-align: right !important;
	text-align-last: right !important;
}

.tac
{
	text-align: center !important;
	text-align-last: center !important;
}

.hspacer-40
{
	height: 40px;
}

.hspacer-25
{
	height: 25px;
}

.hspacer-10
{
	height: 10px;
}

.default-table td
{
	border: 0;
	border-collapse: collapse;
}

.fine-padder
{
	padding: 0 25px 0 25px;
}

.fine-heading
{
	color: #D71F2A;
	font-size: 16px;
	font-family: Roboto-Light;
	line-height: 22px;
}

.fine-copy
{
	font-size: 16px;
	text-align: justify;
	font-family: Roboto-Light;
	line-height: 24px;
}

.parenty
{
	margin: 10px;
	display: inline-table;
	position: relative;
	width: 100%;
}

.float-left {
	float: left;
	margin-right: 18px; /* Adjust as needed for spacing between image and text */
  }
  
.float-right {
	float: right;
	margin-left: 18px; /* Adjust as needed for spacing between image and text */
}
  
 .copy-container::after {
	content: "";
	display: table;
	clear: both;
  }

.lefty
{
	float: left;
	display: table;
	padding: 10px;
}

.righty
{
    float: right;
	display: table;
	margin: 10px;
	text-align: right;
}

.v-align
{
	position: relative;
	display: table-cell;
    vertical-align: middle;
}

#fcf-form {
    display:block;
}

.fcf-form-group {
    margin-bottom: 1rem;
}

.fcf-input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.fcf-form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    font-size: 1.2rem;
    padding: 0.375rem 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    background-color: #E5E6E6;
    background-clip: padding-box;
    border: 0;
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.fcf-form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  opacity: 1; /* Firefox */
}

.fcf-form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: black;
}

.fcf-form-control::-ms-input-placeholder { /* Microsoft Edge */
  color: black;
}

.fcf-form-control:focus {
    border: 1px solid #313131;
}

select.fcf-form-control[size], select.fcf-form-control[multiple] {
    height: auto;
}

textarea.fcf-form-control {
    font-family: -apple-system, Arial, sans-serif;
    height: auto;
}

.fcf-btn {
    text-decoration: none;
	outline: 0;
	border: 0;
	background-color: unset;
}

.fcf-btn:focus, .fcf-btn.focus {
    outline: 0;
}

.btn-hand
{
	cursor: pointer;
}

.media_scale
{
	width: 28vw;
	max-width: 420px;
	min-width: 180px;
}

.media_max
{
  width: 100%;
  height: 100%;
  object-fit: contain; /* This ensures the image covers the entire container */
  top: 0;
  left: 0;
}

.media_scale_smaller
{
	width: 150px;
}

.header-container-holder {
	position: relative; /* This is necessary for absolute positioning to work */
	display: inline-block; /* To make the container size fit the background image */
  }

.grid-container {
  display: inline-grid;
  grid-gap: 1px 2px;
  grid-template-columns: repeat(1, 300px);
  grid-template:
    'faceArea1 faceArea2 faceArea3 faceArea4 faceArea5'
    'faceArea1 faceArea2 faceArea3 faceArea4 faceArea5';
}
.grid-col1
{
	grid-area: faceArea1;
}
.grid-col2
{
	grid-area: faceArea2;
}
.grid-col3
{
	grid-area: faceArea3;
}
.grid-col4
{
	grid-area: faceArea4;
}
.grid-col5
{
	grid-area: faceArea5;
}
.grid-img
{
	max-width: 40%;
}

#leftArrow, #rightArrow
{
	cursor: pointer;
}
.footer a:link
{
	color: white;
	text-decoration: underline;
}

.footer a:visited {
  color: white;
}
.footer a:active {
  color: white;
}
.footer a:hover
{
	font-weight: bold;
}

.refresh {
	z-index: 1;
	position: absolute;
	color: #a0aa9cfb;
	font-size: 22px;
	right:1%;
	bottom:1%;
	cursor: pointer;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1000px) {
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

  .media_scale
{
	width: 100%;
	max-width: 900px;
	min-width: 120px;
}
}

/* 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 (display the links vertically instead of horizontally) */
@media screen and (max-width: 1000px) {
  .topnav.responsive {
	  position: relative;
	  background-color: #dbdbdb;
      opacity: 0.8;
	}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
	display: none;
	color: #626D5C;
	font-size: 30px;
}

.menu-items .after
{
	display: inline;
	color: #626D5C;
}
@media screen and (max-width: 1000px) {
	.menu-items .after
	{
		display: none !important;
	}
	.menu-above,.header-above-menu
	{
		display: none;
	}
	.menu-items
	{
		
		z-index: 10;
	}
	.menu-item
	{
		font-size: 20px;
		padding: 6px;
		margin: 6px;
		padding: 5px;
	}
}
@media screen and (max-width: 900px) {
	.header-photo-holder .photo
	{
		
	}
}

@media screen and (max-width: 300px) {
	.header-photo-holder .photo
	{
		display: none;
	}
}

.read-more
{
	width: 140px;
	background-color: #F5D5AE;
	cursor: pointer;
	color: #626D5C;
	padding: 5px;
	text-align: center;
}
.menu-item:link {
  color: #626D5C;
}
.menu-item:visited {
  color: #626D5C;
}
.read-more:active {
  color: #626D5C;
}
.read-more:hover
{
	font-weight: 1000;
}

.float-stick-right
{
	position: fixed;
    bottom: 0;
    right: 0;
}

.treatment-wrapper
{
	position: relative;
	text-align: center;
	display: block;
    margin: 0 auto;
	width: 80%;
}

.treatment-container
{
	display: flex;
	flex-flow: row wrap;
	align-content: space-between;
	justify-content: center;
}

.treatment-block
{
	margin: 0.2vw;
	width: 10vw;
	height: 10vw;
	position: relative;
}

.treatment-title
{
	margin: 0;
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: Alatsi;
	font-size: 1vw;
	text-transform: uppercase;
	color: white;
	width: 90%;
}

.treatment-tooth
{
	margin: 0;
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
}

.flex-break {
  flex-basis: 100%;
  height: 0;
}

.center-img
{
	margin: auto auto;
	width: 50%;
	text-align: center;
}

.line-break {
  width: 100%;
}

.privacy-policy
{
	font-size: 8pt;
	cursor: pointer;
}

.proposal-video
{
	border-radius: 1vh;
	height: 90vh;
}

/* Style the checkbox */
input[type="checkbox"].sg-input {
	width: 20px;
	height: 20px;
	border: 1px solid black;
	border-radius: 5px;
  }
  
  
  /* Style the checkbox when it is checked */
  input[type="checkbox"]:checked.sg-input {
	background-color: B4C09E;
  }
  
  /* Style the checkbox when it is hovered over */
  input[type="checkbox"]:hover.sg-input {
	background-color: 626D5C;
  }

.sg-input {
	border: 3px solid #B4C09E; /* Sets the border color and width */
	background-color: transparent; /* Makes the background see-through */
	padding: 10px; /* Adjust padding as needed */
	/* width: 300px;  Set the width of the input box as needed */
	color: #626D5C; /* Set the text color */
	border-radius: 1vh; /* Add rounded corners to the border */
    transition: border-color 0.3s, border-radius 0.3s; /* Add smooth transitions for border color and border radius */
	font-size: 20px;
	width: 100%;
  }

.sg-input:focus {
	border-color: #626D5C; /* Change the border color when the input is in focus */
	outline: none; /* Remove the default browser focus outline (if desired) */
 }

 .sg-submit {
	height: 2vw; /* Set the desired height here */
	/* You can also adjust other CSS properties as needed */
	min-height: 30px;
  }

@font-face{font-family:"CloisterOpenFace"; src: url('Cloister-OpenFace.woff');}

@font-face {
    font-family: 'Oishigo';
    src: url('../fonts/Oishigo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Handwriting';
    src: url('../fonts/HandwritingRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CenturyGothic';
    src: url('../fonts/CenturyGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}