@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;
}

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

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

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

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

.banner3
{
	background-image: url("../images/BannerImages/Artboard 3.jpg");
}

.banner4
{
	background-image: url("../images/BannerImages/Artboard 4.jpg");
}

.banner5
{
	background-image: url("../images/BannerImages/Artboard 5.jpg");
}

.banner6
{
	background-image: url("../images/BannerImages/Artboard 6.jpg");
}

.banner7
{
	background-image: url("../images/BannerImages/Artboard 7.jpg");
}

.header-background
{
	background-repeat: no-repeat;
	background-attachment: cover;
	background-position: 0% 0%;
	background-size: 100%;
}

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

.header-logo img
{
	max-width: 200px;
	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;
}

.header-grey
{
	background-color: #231F20;
	opacity: 0.7;
	max-height: 200px;
	height: 10vw;
	position: absolute;
	width: 100%;
}

.header-slogan
{
	height: calc(1067/1600*100vw);
	max-height:  1067px;
	text-align: right;
	aspect-ratio: 2 / 3;
}
.header-slogan img
{
	margin: 0;
	position: relative;
	right: 0px;
	top: min(28vw,50%);
	min-width: 200px;
	width: 30vw;
	max-width: 377px;
}

.header-button
{
	width: 18vw;
	max-width: 280px;
	min-width: 150px;
}

.header-above-menu
{
	height: 2vw;
	float: right;
}

.menu-item
{
	padding: 0;
	text-decoration: none;
	cursor: pointer;
}
.menu-item:link {
  color: white;
}
.menu-item:visited {
  color: white;
}
.menu-item:active {
  color: white;
  font-weight: 1000;
}
.menu-item:hover
{
	background-color: #D71F2A;
}
.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: center;
	padding-right: 15%;
	padding-left: 15%;
}

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

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

.main-copy .heading-secondary
{
	color: #414042;
	letter-spacing: 2px;
	font-size: 33px;
	font-family: Alatsi;
	letter-spacing: 0.025em;
}

.main-copy .copy
{
	font-size: 20px;
	text-align: justify;
	text-align-last: center;
	font-family: Roboto-Light;
	line-height: 26px;
}

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

.main-copy img
{
	max-width: 100%;
}

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

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

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

.testimonial-copy
{
	color: #414042;
	font-size: 23px;
	letter-spacing: 0.05em;
	font-family: Roboto-Light;
}

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

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

.footer
{
	background-color: #3B3B3B;
	color: white;
	min-height: 140px;
}

.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%;
}

.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;
}

.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%;
}

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

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

.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: 25vw;
	max-width: 100%;
}

.media_scale_smaller
{
	width: 150px;
}

.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;
}

/* 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: 1440px) {
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* 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: 1440px) {
  .topnav.responsive {
	  position: relative;
	  background-color: #231F20;
      opacity: 0.7;
	}
  .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: white;
	font-size: 30px;
}

.menu-items .after
{
	display: inline;
}
@media screen and (max-width: 1440px) {
	.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;
	}
}
.read-more
{
	width: 80px;
	background-color: #D71F2A;
	cursor: pointer;
	color: white;
	padding: 5px;
}
.menu-item:link {
  color: white;
}
.menu-item:visited {
  color: white;
}
.read-more:active {
  color: white;
}
.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;
}