/*------------
  Custom Fonts
  ------------ */

/* DejaVu Sans Extra Light: Normal (not bold or italic) */
/* Freely-licensed font */
/* By: Bitstream, 2003 */
/* https://dejavu-fonts.github.io/ */
@font-face {
    font-family: "DejaVuSansExtraLight Web";
    src:
        /* local('DejaVu Sans Extra Light') */
        local('DejaVuSansExtraLight'),
        url("/media/fonts/dejavu-fonts-ttf-2.37/ttf/DejaVuSans-ExtraLight.ttf");
    font-weight: normal;
    font-style: normal;
}

/* DejaVu Sans: Book */
/* Freely-licensed font */
/* By: Bitstream, 2003 */
/* https://dejavu-fonts.github.io/ */
@font-face {
    font-family: "DejaVuSansBook Web";
    src:
        /* local('DejaVu Sans') */
        local('DejaVuSans'),
        url("/media/fonts/dejavu-fonts-ttf-2.37/ttf/DejaVuSans.ttf");
    font-weight: normal;
    font-style: normal;
}

/* GreatVibes (Cursive) */
/* License: SIL Open Font License (OFL) */
/* https://fontlibrary.org/en/font/rebecca */
@font-face {
    font-family: "GreatVibes Web";
    src: url("/media/fonts/GreatVibes-cursive/GreatVibes-Regular.otf");
    font-weight: normal;
    font-style: normal;
}

/* Brandon Text (Regular) */
/* License: HVD Fonts -- Web EULA (Up to 20,000 page views per month.) */
/* License Text: https://www.veradentistry.com/media/fonts/brandon-text-font/HVD-EULA-Web.pdf (Dated: 2019-12-23) */
/* https://www.hvdfonts.com/fonts/brandon-text */
@font-face {
    font-family: "BrandonTextRegular Web";
    src: url("/media/fonts/brandon-text-font/Brandon-Text-Web-Regular.woff2"), url("/media/fonts/brandon-text-font/Brandon-Text-Web-Regular.woff"), url("/media/fonts/brandon-text-font/Brandon-Text-Web-Regular.eot");
    font-weight: normal;
    font-style: normal;
}

/* --------------
   CSS Animations
   -------------- */
@keyframes slideshow_smiling_people {
    /* For 5 pictures (last picture is a repeat of the 1st): Max left is -400%.                         */
    /* For 3 pictures (last picture is a repeat of the 1st): Max left is -200%.                         */
    /* With a 50s timer, the time breakdown is shown below. Note: It is fine to change the total time,  */
    /* as everything was written by time percentages, not total, hard-coded time values.                */
    /* The 1st and 5th picture are the same, so we give only 10% for 1st pic and 10% for last           */
    /* to give a total impression of 20% for the same pic (1st & 5th). The other pics get 20% alone.    */
    /* -----------------------------------------------------------------------------------------------  */
    0%    { left: 0%; }     /* From:   0.0s                                          [1st Picture]      */
    10%   { left: 0%; }     /* To:     5.0s (with a 2.5s transition to next picture) [1st Picture]      */
    15%   { left: -100%; }  /* From:   7.5s                                          [2nd Picture]      */
    35%   { left: -100%; }  /* To:    17.5s (with a 2.5s transition to next picture) [2nd Picture]      */
    40%   { left: -200%; }  /* From:  20.0s                                          [3rd Picture]      */
    60%   { left: -200%; }  /* To:    30.0s (with a 2.5s transition to next picture) [3rd Picture]      */
    65%   { left: -300%; }  /* From:  32.5s                                          [4th Picture]      */
    85%   { left: -300%; }  /* To:    42.5s (with a 2.5s transition to next picture) [4th Picture]      */
    90%   { left: -400%; }  /* From:  45.0s                                          [5th Picture]      */
    100%  { left: -400%; }  /* To:    50.0s                                          [5th Picture]      */
}

/* TODO: Remove? Currently not in use. Originally used to fade-in one photo after loading the page. */
@keyframes fade_in {
    from {
        opacity: 0;
    }
    
    to {
        opacity: 1;
    }
}

@-webkit-keyframes FadeInOutPhotos {
    0% {
      opacity:1;
    }
    
    17% {
      opacity:1;
    }
    
    25% {
      opacity:0;
    }
    
    92% {
      opacity:0;
    }
    
    100% {
      opacity:1;
    }
}

@-moz-keyframes FadeInOutPhotos {
    0% {
      opacity:1;
    }
    
    17% {
      opacity:1;
    }
    
    25% {
      opacity:0;
    }
    
    92% {
      opacity:0;
    }
    
    100% {
      opacity:1;
    }
}

@-o-keyframes FadeInOutPhotos {
    0% {
      opacity:1;
    }
    
    17% {
      opacity:1;
    }
    
    25% {
      opacity:0;
    }
    
    92% {
      opacity:0;
    }
    
    100% {
      opacity:1;
    }
}

@keyframes FadeInOutPhotos {
    0% {
      opacity:1;
    }
    
    17% {
      opacity:1;
    }
    
    25% {
      opacity:0;
    }
    
    92% {
      opacity:0;
    }
    
    100% {
      opacity:1;
    }
}

/* The timing is not 42s (from 36+6=42), as the slow ease-in-out fade takes longer per image. */
#index_page_office_photos img {
  -webkit-animation-name: FadeInOutPhotos;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 46s;

  -moz-animation-name: FadeInOutPhotos;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 46s;

  -o-animation-name: FadeInOutPhotos;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 46s;

  animation-name: FadeInOutPhotos;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 46s;
}

/* Currently timed for 7 photos with a 6 second delay of cross-fading. */
#index_page_office_photos img:nth-of-type(1) {
  -webkit-animation-delay: 36s;
  -moz-animation-delay: 36s;
  -o-animation-delay: 36s;
  animation-delay: 36s;
}

#index_page_office_photos img:nth-of-type(2) {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  animation-delay: 30s;
}

#index_page_office_photos img:nth-of-type(3) {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  animation-delay: 24s;
}

#index_page_office_photos img:nth-of-type(4) {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  animation-delay: 18s;
}

#index_page_office_photos img:nth-of-type(5) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}

#index_page_office_photos img:nth-of-type(6) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}

/* Note: Don't put a fade in/out animation on the last image, or it'll override the last image, which is the 1st image in HTML.
#index_page_office_photos img:nth-of-type(7) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}
*/

/* ------------------
   CSS Styling Rules
   ------------------ */
html, body {
    /* Allows the background-color and images of different sections to fully stretch to the edge w/no whitespace. */
    padding: 0;
    margin: 0;
    /* font-family: DejaVuSansBook Web; */
    font-family: BrandonTextRegular Web;
    
    /* Because Safari on iOS is dumb and will ignore my font-size settings, so I am telling Safari to not do this. */
    -webkit-text-size-adjust: 100%;
}

/* The <header> contains the Site Logo and the Phone & Make Appt buttons. */
header {
    /*
    display: -webkit-flex;
    display: -ms-flex;
    display: flex; 
    -webkit-align-items: center;
    align-items: center;
    */
    position: fixed;
    width: 100%;
    background-color: white;
    z-index: 5000;
}

/* For the Site Logo and the Phone & Make Appt buttons. */
header>span {
    
}

#blue_band {
    height: 5px;
    background-color: #0067ab; /* TODO: Delete this comment if no longer necessary: Original Color was: #057dbc */
    position: fixed;
    width: 100%;
}

#div_logo_and_buttons {
    display: flex;
    align-items: center;
    width: 95%;
    margin: auto;
    padding-top: 4px;
    font-size: 1.15rem;
}

#site_logo_span {
    /* flex: 2; */
    /* The logo height starts at 85px as defined in the <object> itself. */
    margin-top: 10px;
    margin-bottom: 5px;
    flex: 0 1 131px;
    vertical-align: middle;
}

#site_logo_span a {
    display: inline-block;
    position: relative;
    z-index: 1;
}

#site_logo {
    display: inline-block;
}

#site_logo>object {
    position: relative;
    z-index: -1;
}

.phone_and_appt_buttons {
    /*margin-right: 50px;*/
    flex: 1 1;
    text-align: right;
    margin-left: auto;
    vertical-align: middle;
    margin-bottom: 10px; /* Fixes the middle alignment with the logo, as the logo has an off-center. */
}

/* For the phone and make appointment buttons near the site logo. */
.phone_and_appt_buttons a:link, .phone_and_appt_buttons a:visited, .phone_and_appt_buttons a:focus, .phone_and_appt_buttons a:active {
    text-decoration: none;
    padding: 0.5rem;
    color: #ffffff;
    background-color: #535353; /* Dark Gray */
    border-color: black;
    border-width: 1px;
    border-style: solid;
    border-radius: 3%;
    transition: all 0.2s linear 0s;
}

.phone_and_appt_buttons a:hover {
    text-decoration: none;
    padding: 0.5rem;
    color: white;
    background-color: #0891ce; /* Light Blue */
    border-color: black;
    border-width: 1px;
    border-style: solid;
    border-radius: 3%;
    transition: all 0.2s linear 0s;
}

#header_make_appt_btn {
    margin-left: 20px;
}

/* We'll assume at first the device might have a larger browser size. So, we'll hide these mobile phone/appt buttons. */
/* In the responsive design section (at the very bottom), we'll reverse this concept. */
#nav_links_span > a.phone_and_appt_buttons {
    display: none;
}

#header_empty_space_for_alignment {
    flex: 0 1 131px;
    width: 130px;
    vertical-align: middle;
}

#nav_links_span {
    display: block;
    vertical-align: middle;
}

nav {
    /* font-family: DejaVuSansExtraLight Web; */
    font-family: BrandonTextRegular Web;
    text-align: center;
    font-size: 1.15rem;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #f2f2f2; /* Very light gray */
}

#nav_hamburger_icon {
    vertical-align: middle;
    font-size: 2rem;
    padding-left: 10px;
    padding-bottom: 0.7rem;
    padding-top: 0.4rem;
    margin-left: 10px;
}

/* TODO: Fix this later, as the :hover color change fades in nicely on a desktop at first, but if you click on the
         hamburger icon, it will not have the :hover effect as we later modified the hamburger icon color properties
         via jQuery. Though, I'm still confused as why this matters as the jQuery code doesn't describe a new :hover effect.
#nav_hamburger_icon:hover {
    color: #0891ce;
    transition: all 0.2s linear 0s;
}
*/

#header_fixed_extra_whitespace {
    height: 135px; /* Determined by highlighting the <header> element's height in FF's dev tools. */
    width: 100%;
}

/* NOT CURRENTLY USED. DELETE IF NO LONGER NEEDED LATER. WAS USED IN JS CODE. */
/* This extra whitespace is displayed once the <nav> menu is fixed to keep the document flow correct. */
#nav_fixed_extra_whitespace {
    height: 72px;
    width: 100%;
}

/* For general links not in the nav menu. */
a:link, a:visited, a:focus, a:active {
    text-decoration: underline;
    color: #09548b; /* Blue. */
    outline: 0; /* No dashed borders when clicked. */
}

/* Nav menu links at the top of the page. */
nav a:link, nav a:visited, nav a:focus, nav a:active {
    text-decoration: none;
    padding-left: 2rem;
    padding-right: 2rem;
    color: black;
}

#nav_home {
    padding-left: 0.5rem;
}
    
#nav_testimonials {
    padding-right: 0.5rem;
}

div.section_break_thematic_heading {
    display: -webkit-flex; /* Safari on iOS */
    display: -webkit-box;
    display: flex;
    align-items: center;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    margin-bottom: 30px;
}

/* Affects the text that defines the section heading itself. */
div.section_break_thematic_heading > h1,
div.section_break_thematic_heading > h2 {
    -webkit-box-flex: 0 0; /* OLD Safari on iOS */
    -webkit-flex: 0 0; /* NEW Safari on iOS */
    flex: 0 0;
    text-align: center;
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    white-space: nowrap;
    font-size: 2.5rem;
    font-weight: normal;
    font-family: GreatVibes Web; /* Cursive OFL-based font. */
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Affects both the left and right <hr /> tags. */
div.section_break_thematic_heading > hr {
    /* TODO: The <hr /> tags do NOT shrink correctly on the older iOS 9 for some unknown reason. */
    -webkit-box-flex: 1 1 2rem; /* OLD Safari on iOS */
    -webkit-flex: 1 1 2rem; /* NEW Safari 6+ on iOS 7+ */
    flex: 1 1 2rem;
    width: 20%;
    display: inline-block;
    border-top: 1px solid #8c8b8b;
    border-bottom: 1px solid #ffffff;
}

.section_heading {
    color: #09548b; /* Blue */
    /* font-family: DejaVuSansExtraLight Web; */
    font-family: BrandonTextRegular Web;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.section_heading_smaller {
    color: #09548b; /* Blue */
    font-family: BrandonTextRegular Web;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Affects all <section> portions inside the <main> area. */
section {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}

/* 1st <section> inside the <main> area. */
.section_1 {
    /* We don't want a top padding, as it adds unnecessary whitespace with the top nav menu. */
    padding-top: 0rem;
}

#section_1_slideshow_outermost_container {
    display: block;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    overflow: hidden;
}

#section_1_slideshow_middle_container {
    width: 100%;
    overflow: hidden;
}

#section_1_slideshow_innermost_container {
    width: 500%; /* 5 pics = 500%. Last pic is a repeat of the 1st. */
    animation-name: slideshow_smiling_people;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    position: relative;
    white-space: nowrap; /* So the <img>s don't get wrapped into another line by the browser. */
}

#section_1_slideshow_innermost_container > img {
    /* For 5 pics (100/5). Last pic is a repeat of the 1st. */
    width: 20%;
}

.graybkgd_outer_container {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    background-color: #f2f2f2;
}

.graybkgd_outer_container p {
    font-size: 1.15rem;
    text-align: justify;
}

.graybkgd_inner_container {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

.graybkgd_inner_div {
    padding: 80px;
    margin: 0;
}

/* TODO: Remove? This might be unused now. */
/* Left: Biography Text, Right: Image */
.graybkgd_inner_div_left {
    padding: 80px;
    /* padding: 80px 40px 80px 80px; */
    margin: 0;
    /*text-align: justify;
    font-size: 1.1rem;*/
}

/* TODO: Remove? This might be unused now. */
/* Left: Image, Right: Biography Text */
.graybkgd_inner_div_right {
    padding: 80px;
    /*padding: 80px 80px 80px 40px;*/
    margin: 0;
    /*text-align: justify;
    font-size: 1.1rem;*/
}

/* Left: Biography Text, Right: Image */
.graybkgd_inner_img_right {
    padding: 80px 80px 80px 40px;
    margin: 0;
}

/* Left: Image, Right: Biography Text */
.graybkgd_inner_img_left {
    padding: 80px 40px 80px 80px;
    margin: 0;
}

/* The floated image is nice as the text wraps around the picture nicely. */
.graybkgd_floated_left_img {
    float: left;
    padding: 0px 80px 40px 40px
}

/* The floated image is nice as the text wraps around the picture nicely. */
.graybkgd_floated_right_img {
    float: right;
    padding: 0px 40px 40px 80px
}

/* The 1st <p> element in the biography. */
.graybkgd_inner_container > div p:first-of-type {
    margin-top: 0;
}

.graybkgd_inner_container > div p {
    margin-bottom: 35px;
}

.graybkgd_inner_container > div p:last-of-type {
    margin-bottom: 0;
}

section#index_page_dental_services_images {
    text-align: center;
}

section#index_page_dental_services_images img {
    margin-left: 10px;
    margin-right: 10px;
    /* border: gray thin solid; */
    /* margin-bottom: 50px; */
}

section#index_page_dental_services_images h2 {
    margin-top: 0;
    margin-bottom: 5px;
}

section#index_page_dental_services_images a:link, 
section#index_page_dental_services_images a:visited, 
section#index_page_dental_services_images a:focus, 
section#index_page_dental_services_images a:active {
    text-decoration: none;
}

div.index_page_wmud_flexbox_container {
    display: flex;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 70px;
}

/* For the "Dedicated to Caring" area. */
section#index_page_what_makes_us_different > div:nth-child(2) {
    margin-top: 0;
}

/* For the quotes that are on the right-side of the page. */
div.index_page_wmud_flexbox_container > img + div {
    margin-left: 15px;
}

/* For the quotes that are on the left-side of the page. */
div.index_page_wmud_flexbox_container > div {
    margin-right: 15px;
}

div.index_page_wmud_quotes {
    flex: 1;
}

div.index_page_wmud_quotes > h2 {
    margin-top: 0;
}

div.index_page_wmud_quotes > p {
    font-size: 1.15rem;
}

.index_page_wmud_quote_author:before {
    content: "̶ ";
}

.index_page_wmud_quote_author {
    margin-left: 40px;
}

p.index_page_wmud_second_quote {
    margin-top: 40px;
}

.index_page_wmud_side_photo {
    /*flex: 1; */ /* LET'S SEE IF THIS CAN STILL WORK WITHOUT A FLEX ON THIS SIDE. */
    max-width: 50%;
    height: auto;
}

div#index_page_philosophy_and_amenities_of_vera_dentistry {
    width: 46%;
    vertical-align: middle;
    margin-left: 20px;
    padding-right: 27px;
}

div#index_page_philosophy_and_amenities_of_vera_dentistry p {
    font-size: 1.15rem;
}

h2#index_page_philosophy_heading {
    margin-top: 0px;
    margin-bottom: 30px;
}

h2#index_page_welcoming_amenities_heading {
    margin-top: 80px;
    margin-bottom: 30px;
}

ul#index_page_welcoming_amenities_list {
    padding-left: 15px;
    font-size: 1.15rem;
}

#index_page_office_photos {
    vertical-align: middle;
    margin-bottom: 50px;
}

/* For the CSS image fade in/out animations */
#index_page_office_photos {
  position: relative;
  width: 618px;
  height: 405px;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}

/* For the CSS image fade in/out animations */
#index_page_office_photos img {
  position: absolute;
  left: 0;
  max-width: 100%;
  /* border: gray thin solid; */
}

#first_section {
    margin-top: 50px;
}

img#about_us_img_dr_vera_and_her_team {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    /* border: thin gray solid; */
}

/* Professional Logos: ADA, IDIA, Invisalign, AGD */
section#index_page_professional_logos {
    
}

p#professional_association_logos {
    display: table;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.pro_logo_span {
    /* width: 45%; */
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
    margin-right: 20px;
}

p#professional_association_logos img {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    margin: auto;
}

/* Meant to be a less important <h2> portion. Note: You can use .section_heading for some important <h2> portions. */
.sub_heading {
    color: black;
    /* font-family: DejaVuSansExtraLight Web; */
    font-family: BrandonTextRegular Web;
    text-align: center;
    font-size: 1.15rem;
    font-weight: normal;
}

.columns_container {
    background-color: inherit;
    width: 95%;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

.column_1_of_2 {
    background-color: inherit;
    width: 45%;
    float: left;
}

.column_2_of_2 {
    background-color: inherit;
    width: 45%;
    float: right;
}

iframe {
    max-width: 100%;
}

h1 {
    /* font-family: DejaVuSansExtraLight Web; */
    font-family: BrandonTextRegular Web;
    text-align: center;
}

form {
    margin-top: 25px;
    font-size: 1.15rem;
}

label {
    display: inline-block;
    min-width: 10rem;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
}

form span {
    margin-top: 0.3rem;
    display: inline-block;
}

.input_textlike_field {
    font-size: 1.15rem;
    margin-bottom: 15px;
    padding: 0.5rem;
}

#patient_name, #patient_phone_num, #patient_email {
    width: 20rem;
}

#patient_appt_reason {
    width: 50rem;
    height: 5rem;
}

input[type="submit"] {
    font-size: 1.15rem;
}

#captcha_code_generated {
    font-weight: bold;
    font-family: monospace;
    font-size: 1.5rem;
    padding: 0;
    margin-bottom: 5px;
}

table {
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
}

th {
    font-weight: normal;
    margin-right: 1rem;
    text-align: left;
}

th, td {
    vertical-align: top;
}

table.tables_contact_and_office_hours {
    width: 24rem;
    font-size: 1.15rem;
}

.tables_contact_and_office_hours th {
    width: 10rem;
}

.tables_contact_and_office_hours td {
    width: 14rem;
}

address {
    font-style: normal;
}

#slogan {
    text-align: center;
    font-style: italic;
}

#section_social_media_links {
    font-size: 4rem;
    text-align: center;
}

#section_social_media_links a:link, 
#section_social_media_links a:visited,
#section_social_media_links a:focus,
#section_social_media_links a:hover,
#section_social_media_links a:active {
    text-decoration: none;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.outer_container_for_social_media_circle {
    display: inline-block;
}

.inner_container_for_social_media_circle {
    display: inline-block;
}

.social_media_circle {
    border-radius: 50%;
    height: 125px;
    width: 125px;
    border: solid;
    display: table;
    vertical-align: middle;
}

#yelp, #zocdoc, #google-plus, #facebook, #twitter, #linkedin {
    vertical-align: middle;
    display: table-cell;
}

#yelp-circle {
    border-color: #d32323;
    color: #d32323;
    transition: all 0.2s linear 0s;
}

#yelp-circle:hover {
    border-color: rgba(220,112,118,0.8);
    background: #d32323;
    color: #ffffff;
    transition: all 0.2s linear 0s;
}

#zocdoc-circle {
    border-color: #00234b;
    transition: all 0.2s linear 0s;
}

#zocdoc-img {
    padding-top: 15px;
}

#zocdoc-circle:hover {
    border-color: #768abc;
    background: #3b5a99;
    transition: all 0.2s linear 0s;
}

#google-plus-circle {
    border-color: #db4437;
    color: #db4437;
    transition: all 0.2s linear 0s;
}

#google-plus-circle:hover {
    border-color: rgba(220,112,118,0.8);
    background: #db4437;
    color: #ffffff;
    transition: all 0.2s linear 0s;
}

#facebook-circle {
    border-color: #3b5a99;
    color: #3b5a99;
    transition: all 0.2s linear 0s;
}

#facebook-circle:hover {
    border-color: rgba(128,148,189,0.6);
    background: #3b5a99;
    color: #ffffff;
    transition: all 0.2s linear 0s;
}

#twitter-circle {
    border-color: #25a8e0;
    color: #25a8e0;
    transition: all 0.2s linear 0s;
}

#twitter-circle:hover {
    border-color: rgba(216,243,255,0.4);
    background: #25a8e0;
    color: #ffffff;
    transition: all 0.2s linear 0s;
}

#linkedin-circle {
    border-color: #0077b5;
    color: #0077b5;
    transition: all 0.2s linear 0s;
}

#linkedin-circle:hover {
    border-color: rgba(216,243,255,0.4);
    background: #0077b5;
    color: #ffffff;
    transition: all 0.2s linear 0s;
}

#business_address {
    width: 600px; /* Matches the size of the Google Map. */
    margin-left: auto;
    margin-right: auto;
    font-size: 1.15rem;
}

#google_map {
    border: thin gray solid;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: inherit;
}

/* TEMP COMMENT: I had her professional logos in the footer before, do I need to change anything now? */
footer {
    clear: both;
    text-align: center;
}

p#copyright_notice {
    margin-top: 3rem;
    font-size: 1.15rem;
}

/* ---------------------------------------- */
/* Miscellaneous, but reusable class rules. */
/* ---------------------------------------- */
.margin_top_0 {
    margin-top: 0;
}

.margin_bottom_0 {
    margin-bottom: 0;
}

.margin_top_5rem {
    margin-top: 5rem;
}

.margin_top_50px {
    margin-top: 50px;
}

.img_center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.img_full_width {
    width: 100%;
    height: auto;
}

/* Completely erases the element from the DOM (no leftover whitespace). */
.display_none {
    display: none;
}

.inline_block {
    display: inline-block;
}

.inline {
    display: inline;
}

.block {
    display: block;
}

.text_align_center {
    text-align: center;
}

.text_align_left {
    text-align: left;
}



/* -----------------
   Responsive Design
   ----------------- */
@media only screen and (max-width: 1290px) {
    nav a:link, nav a:visited, nav a:focus, nav a:active {
        padding-left: 1.8rem;
        padding-right: 1.8rem;
    }
}

/* Tablets in landscape mode. */
@media only screen and (max-width: 1250px) {
    nav a:link, nav a:visited, nav a:focus, nav a:active {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

@media only screen and (max-width: 1090px) {
    /* Scales these images to be smaller to allow more text to flow around it to look more natural. */
    .graybkgd_floated_left_img,
    .graybkgd_floated_right_img {
        width: 50%;
        height: auto;
    }
    
    .columns_container {
        display: flex;
        flex-wrap: wrap;
    }
    
    .column_1_of_2,
    .column_2_of_2 {
        width: 90%;
        display: block;
        float: none;
        position: static;
        margin-left: auto;
        margin-right: auto;
    }
    
    table {
        max-width: 95%;
    }
}

/* Hides the HAMBURGER ICON as the browser is wide enough for larger screens. */
@media only screen and (min-width: 1075px) {
    nav {
        display: block;
    }
    
    #nav_hamburger_icon {
        display: none;
    }
}

/* Shows the HAMBURGER ICON for the mobile <nav> layout. */
/* TABLETS in landscape or portrait mode. */
@media only screen and (max-width: 1074px) {
    header {
        position: static;
    }
    
    #header_fixed_extra_whitespace {
        display: none;
    }
    
    #nav_links_span {
        display: none;
        padding-top: 10px;
    }
    
    nav {
        padding-top: 0rem;
        padding-bottom: 0rem;
        position: fixed;
        width: 250px;
        height: 315px;
        z-index: 5000;
        right: 0px;
        top: 100px;
        border: thin #0891ce solid;
        display: none; /* We only want to show the <nav> menu when the user clicks on the hamburger icon. */
    }
    
    nav a:link, nav a:visited, nav a:focus, nav a:active {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
        display: block;
        font-size: 1.4rem;
        padding-top: 0.15rem;
        padding-bottom: 0.15rem;
    }
    
    #nav_hamburger_icon {
        display: inline-block;
    }
}

/* Very small phones in portrait or landscape mode. */
/* Has the images in the sections to be above the textual content (not on left/right). */
@media only screen and (max-width: 990px) {
    div.section_break_thematic_heading > h1,
    div.section_break_thematic_heading > h2 {
        font-size: 1.7rem;
    }
    
    .graybkgd_inner_container {
        flex-wrap: wrap;
    }
    
    .graybkgd_inner_img_right {
        padding: 40px;
        order: 1; /* Using the power of Flexbox, we're now making our "right" image (defined 2nd in the HTML5) to be displayed 1st.  */
        max-width: 80%;
        height: auto;
    }
    
    .graybkgd_inner_div_left {
        padding: 0px 40px 40px 40px;
        order: 2;
    }
    
    .graybkgd_inner_img_left {
        padding: 40px;
        order: 1;
        max-width: 80%;
        height: auto;
    }
    
    .graybkgd_inner_div_right {
        padding: 0px 40px 40px 40px;
        order: 2;
    }
    
    .graybkgd_floated_left_img,
    .graybkgd_floated_right_img {
        padding: 0px 0px 40px 0px;
        order: 1; /* Using the power of Flexbox, we're now making our "right" image (defined 2nd in the HTML5) to be displayed 1st.  */
        max-width: 100%;
        width: auto;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        float: none;
        position: static;
    }
    
    .graybkgd_inner_div {
        padding: 40px 40px 40px 40px;
        order: 2;
    }
    
    .graybkgd_outer_container p {
        font-size: 1.1rem;
    }
    
    .pro_logo_span {
        margin-bottom: 40px;
    }
    
    .pro_logo_span:last-of-type {
        margin-bottom: 0px;
    }

    p#professional_association_logos img {
        max-width: 100%;
    }
    
    img#about_us_img_dr_vera_and_her_team {
        max-width: 90%;
    }
    
    .section_heading {
        font-size: 1.2rem;
    }
    
    #patient_appt_reason {
        width: 100%;
    }
}

@media only screen and (max-width: 764px) {
    /* Adjusts the Appointment form fields to not over-expand weirdly. */
    .input_textlike_field {
        display: block;
        font-size: 1.2rem;
        max-width: 100%;
        margin-bottom: 0px;
    }
    
    #patient_name, #patient_appt_reason {
        width: 100%;
    }
    
    #patient_appt_reason {
        height: 90px;
    }
    
    p, form span {
        max-width: 100%;
    }
}

/* Keeps showing the HAMBURGER ICON for the mobile <nav> layout. */
/* Small PHONES in landscape or portrait mode. */
@media only screen and (max-width: 660px) {
    /* Shows the Phone # and the "Make an Appointment" buttons in the <nav> menu itself, rather than in the <header>. */
    #nav_links_span > a.phone_and_appt_buttons {
        display: block;
        text-align: center;
        margin-bottom: 0rem;
    }
    
    /* Hides the Phone # and the "Make an Appointment" buttons that were normally part of the <header>. */
    header span.phone_and_appt_buttons {
        display: none;
    }
    
    /* Since we gotten rid of the <header> version of the phone/appt buttons, we need to align the hamburger icon to the right. */
    #nav_hamburger_icon {
        text-align: right;
        flex: 1 1;
    }
    
    /* Reduce the font size so the "Make an Appointment" link can fit inside the <nav> menu. */
    nav a:link, nav a:visited, nav a:focus, nav a:active {
        font-size: 1.3rem;
    }
    
    nav {
        height: 365px;
    }
    
    table.tables_contact_and_office_hours {
        font-size: 1.0rem;
    }
    
    .tables_contact_and_office_hours th {
        width: 4rem;
        display: inline-block;
        margin-right: 1.5rem;
    }
}

@media only screen and (max-width: 420px) {
    h2.section_heading {
        margin-left: 10px;
    }
    
    #patient_appt_reason {
        height: 90px;
    }
    
    .graybkgd_inner_div {
        max-width: 100%;
        padding: 0;
    }
    
    .input_textlike_field {
        padding: 5px;
        max-width: 85%;
        margin: 0px 10px 10px 10px;
    }
    
    #patient_name, #patient_appt_reason {
        width: 85%;
    }
    
    input[type="radio"], input[type="checkbox"] {
        margin-left: 10px;
    }
    
    .label_for_no_radio_or_checkbox {
        margin-left: 10px;
    }
    
    p, form span {
        max-height: 90%;
        padding: 10px;
    }
    
    input[type="submit"] {
        margin: 0px 10px 20px 10px;
        display: block;
        font-size: 1.4rem;
        margin-left: auto;
        margin-right: auto;
    }

    #logo_agd {
        height: auto;
    }
}