:root {
  --site-lightpurple: #c2a9c3;
  --site-darkpurple: #7d5a80;
  --site-grey: #8d8e8d;
  --site-lightgrey: #f8f9fa;
  --site-darkgrey: #666766;
  --site-black: #353535;
  --site-red: #ac3a2f;
}


/*
###############################
    general styles
###############################
*/
.lightgrey
{
    background-color: var(--site-lightgrey);
}

.darkpurple
{
    background-color: var(--site-darkpurple);
}

.lightpurple
{
    background-color: var(--site-lightpurple);
}

body
{
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    color: var(--site-grey);
    height: 100%;
}

.nav_logo
{
    height: 75px;
    width: auto;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--site-lightpurple);
    /* font-size: 12px; */
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    /* transition: all 0.5s ease; */
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--site-darkpurple);
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link
{
    /* color: var(--site-darkgrey); */
    color: var(--site-darkpurple);
}

.phone_number
{
    font-size: 14px!important;
}

h1
{
    font-weight: bold;
    color: white;
    font-size: 3.5rem;
    word-spacing: 3px;
}

h2
{
    color: var(--site-black);
}

h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
}

a
{
    color: var(--site-lightpurple);
    font-size: 12px;
}

a:hover
{
    color: var(--site-darkpurple);
    text-decoration: none;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle
{
    background-color: var(--site-darkpurple);
    border-color: var(--site-darkgrey);
}

.btn-primary:hover,
.btn-primary.disabled,
.btn-primary:disabled
{
    background-color: var(--site-lightpurple);
    border-color: var(--site-lightpurple);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle
{
    box-shadow: 0 0 0 0.2rem rgba(145, 33, 154, 0.2)!important;
    border-color: var(--site-lightpurple)!important;
}


.form-control:focus,
.btn-primary.focus, .btn-primary:focus
{
    box-shadow: 0 0 0 0.2rem rgba(145, 33, 154, 0.2);
    border-color: var(--site-lightpurple);
}

.btn-secondary {
    background-color: initial;
    border-color: white;
}

.btn-secondary:hover
{
  color: var(--site-darkpurple);
  background-color: var(--site-lightgrey);
  border-color: var(--site-lightgrey);
}

.error-message
{
    color: var(--site-red)!important;
    padding-left: 5px;
    display: none;
}

#contact-msg
{
    /* color: var(--site-red)!important; */
    margin-bottom: 15px;
    /* display: none; */
}

.enhance-paragraph
{
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

section
{
    padding: 100px 0;
    /* border: solid 1px red; */
}

/*
###############################
home page styles
###############################
*/

#home_main-background
{
    background-color: var(--site-darkpurple);
    background-image: url(../images/image1-H-flip.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    padding: 150px 0;
    color: var(--site-lightgrey);
}

.full-height
{
  /* height: 100vh; */
}

@keyframes headerAnimation {
  from {
      /* display: block; */
      height: 0;
      top: -100px;
      opacity: 0;
  }
  to {
      /* display: block; */
      height: 100px;
      top: 0;
      opacity: 1;
  }
}

header
{
  /* display: none; */
  position: relative;
  /* height: 0;
  top: -100px;
  animation-name: headerAnimation;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards; */
}

@keyframes h1Animation {
  from {
    /* left: -100px; */
    opacity: 0;
  }
  to {
    /* left: 0; */
    opacity: 1;
  }
}

#home_main-background h1,
#home_main-background p
{
  position: relative;
  opacity: 0;
  animation-name: h1Animation;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

.team-background
{
    background-image: url("../images/team.jpg")!important;
    /* background-size: contain!important; */
}

.services-background
{
    background-image: url("../images/image4.jpg")!important;
}

.contactus-background
{
    background-image: url("../images/image5.jpg")!important;
}

.page--transparent-background
{
  background-color: rgba(0, 0, 0, 0.5);
  /* background-color: rgba(194, 169, 195, 0.5); */
  /* background-color: rgba(125, 90, 128, 0.85); */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#main-page_services-grid .page--transparent-background
{
  background-color: rgba(0, 0, 0, 0.3);
}


.main-banner-container {
    display: grid;
    grid-template-columns: 4fr 2fr;
}

.mainbanner-item {
    padding: 0px 60px 50px 0;
}

.main-form
{
    background-color: var(--site-lightgrey);
    padding: 50px;
}

.main-form form
{
    margin-top: 15px;
}

.main-form form label,
#contact-page_form form label
{
    display: none;
}

.important-p
{
    font-weight: bold;
    color: var(--site-lightpurple);
    text-transform: uppercase;
    word-spacing: 1.5px;
    letter-spacing: 0.5px;
}

div#main-page_services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 290px;
    /* grid-column-gap: 10px; */
    margin: 30px 0 0;
}

.main-page_services-item {
    background-color: var(--site-lightpurple);
    position: relative;
    background: url("../images/chiro.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    text-decoration: none!important;
}

    .main-page_services-item.acupunture {
        background-image: url("../images/acupunture.jpg");
    }

    .main-page_services-item.massage {
        background-image: url("../images/massage.jpg");
    }

    .main-page_services-item.ortho {
        background-image: url("../images/ortho.jpg");
    }

.main-page_services-item:hover .services-item_bottom
{
    opacity: 0;
}

.main-page_services-item:hover .main-services-floating
{
    opacity: 1;
    top: -30px;
}

    .services-item_bottom {
        position: absolute;
        bottom: 10px;
        left: 15px;
        /* font-size: 12px; */
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: bold;
        color: white;
        transition: all 0.5s ease;
    }

    .main-services-floating {
        position: relative;
        width: 90%;
        margin: auto;
        top: 0;
        padding: 60px 10px 10px;
        background-color: #7d5a80d1;
        opacity: 0;
        color: white;
        font-size: 1rem;
        text-align: center;
        transition: all 0.5s ease;
    }

.injuries-grid {
    display: grid;
    grid-template: auto / 1fr 1fr;
    grid-column-gap: 20px;
}

footer
{
    /* height: 500px; */
    padding: 100px 0 30px 0;
    background-color: var(--site-black)
}

footer .footer_logo
{
    width: 95%;
    margin-bottom: 30px;
    filter: invert(50%) brightness(200%);
}

.copyright
{
    font-size: 14px;
    color: var(--site-grey);
}

ul.footer_nav
{
    margin: 0;
}

.footer_menu-top
{
    color: white;
}

ul.footer_nav li
{
    list-style: none;
    padding: 5px;
}

ul.footer_nav a
{
    color: var(--site-grey);
    font-size: 14px;
    letter-spacing: 1px;
}

ul.footer_nav a:hover
{
    text-decoration: none;
    color: var(--site-lightgrey);
}

nav a i
{
    /* margin-right: 5px; */
    /* border: solid 1px white; */
    width: 20px;
    color: white;
}

ul.footer_nav a i
{
    margin-right: 5px;
    /* border: solid 1px white; */
    width: 20px;
}


.border_left
{
    border-left: solid 1px var(--site-grey);
}

footer #gm_map
{
    height: 300px;
    background-color: grey;
}


/*
###############################
about-us page styles
###############################
*/
.legal-section,
.insurance-section
{
    position: relative;
}

.legal-section i,
.insurance-section i
{
    font-size: 14rem;
    color: var(--site-lightpurple);
    /* border: solid 1px white; */
    /* padding: 15px; */
    /* border-radius: 15px; */
    /* box-shadow: 2px 2px; */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -110px;
}

.insurance-section i
{
    /* font-size: 20rem;
    color: var(--site-lightgrey);
    top: -80px;
    left: 110px; */
}

/*
###############################
services page styles
###############################
*/
#services-tabList
{
    position: relative;
}

#services-tabContent
{
    padding: 50px;
    box-shadow: 0px 3px 10px grey;
    border-radius: 5px;
}

#services-tabContent h3
{
    color: var(--site-darkpurple);
    font-size: 1rem;
}

#services-tabList:before
{
      content: "";
      position: absolute;
      width: 2px;
      height: 90%;
      background-color: var(--site-grey);
      left: -1px;
      top: 17px;
}

#services-tabList > a
{
    border: initial;
    padding: 15px 0 15px 20px;
    background-color: initial;
    position: relative;
    color: var(--site-grey);
}

#services-tabList > a::before,
#services-tabList > a::after
{
    content: "";
    width: 20px;
    height: 20px;
    background-color: white;
    border: solid 1px var(--site-grey);
    position: absolute;
    border-radius: 50%;
    left: -10px;
    top: 50%;
    margin-top: -10px;
    transition: all 0.3s ease;
}

#services-tabList > a::after
{
    background-color: var(--site-lightpurple);
    border-color: white;
    width: 10px;
    height: 10px;
    left: -5px;
    margin-top: -5px;
}

#services-tabList > a.active::before,
#services-tabList > a:hover::before
{
    border: none;
}

#services-tabList > a.active::after,
#services-tabList > a:hover::after
{
    background-color: var(--site-darkpurple);
    border-color: initial;
    width: 20px;
    height: 20px;
    left: -10px;
    margin-top: -10px;
}

/*
###############################
contac page styles
###############################
*/

#contact_info
{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 20px;
}

#contact_info dd
{
    margin: 0;
}

#contact_info a {
    display: block;
    font-size: 1rem;
}

#contact-page_form input
{
    margin-bottom: 30px;
}

/* MAP */
section#our-map {
    padding: 0;
    height: 35vw;
}

section#our-map button
{
    top: 0!important;
    right: 0!important;
}
.maps-info-window {
    color: black;
    padding: 20px;
}

.maps-info-window h1 {
    color: black;
    font-size: 20px;
    margin-bottom: 5px;
}

.maps-info-window p {
    margin-bottom: 5px;
}

.maps-info-window p:last-child
{
    margin-bottom: 0;
}

/*
###############################
Media queries
###############################
*/
@media screen and (max-width:992px) {

  section {
    padding: 50px 0;
  }

  footer {
    padding: 50px 0;
  }

  .nav_logo {
      height: 50px;
  }

  #home_main-background {
    padding: 80px 0;
  }

  .main-banner-container {
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
  }

  .mainbanner-item {
      padding: 0px 20px 0 0;
  }

  .main-form {
      padding: 30px;
  }

  h1 {
    font-size: 2.2rem;
  }

  h2 {
      font-size: 1.5rem;
  }

  .enhance-paragraph {
      font-size: 1.2rem;
  }

  div#main-page_services-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 290px;
    grid-gap: 30px;
  }

  .main-services-floating {
    top: 20px;
    opacity: 1;
    padding: 30px 10px 10px;
  }

  .services-item_bottom {
    display: none;
  }

  ul.footer_nav {
    padding: 0;
  }

  /*
  ###############################
    contact page styles
  ###############################
  */

  #contact_info {
    grid-gap: 15px;
    margin-bottom: 40px;
  }

  #contact-page_form input {
    margin-bottom: 15px;
  }

  section#our-map
  {
    height: 70vw;
  }


}/*end 768px */

@media screen and (max-width:768px) {

  div#main_menu .nav-item
  {
    text-align: center;
    padding: 5px 0;
  }

  .injuries-grid {
    grid-template: auto / 1fr;
    margin-bottom: 30px;
  }

  .list-group-flush:last-child .list-group-item:last-child {
      /* margin-bottom: 0; */
      border-bottom: 1px solid rgba(0,0,0,.125);
  }


  .legal-section i,
  .insurance-section i
  {
      /* font-size: 14rem; */
      color: white;
      top: 0;
      left: 50%;
      /* margin-left: -50%; */
      margin-top: -5%;
  }

  .insurance-section i
  {
      color: var(--site-lightgrey);
      top: 50%;
      left: 70%;
      margin-left: -40%;
      margin-top: -60%;
      z-index: -1;
  }

  #services-tabList
  {
      display: grid;
      grid-template: auto/repeat(4, 1fr);
      margin-bottom: 40px;
      grid-gap: 15px;
      align-items: center;
  }

  #services-tabList::before,
  #services-tabList a::before,
  #services-tabList a::after
  {
      content: initial;
  }

  #services-tabList a
  {
    margin: 0;
    padding: 10px 0;
    text-align: center;
    border: solid 1px var(--site-lightpurple);
    border-radius: 5px;
  }

  #services-tabList a.active
  {
    background-color: var(--site-lightpurple);
    color: white;
  }

  footer {
    text-align: center;
  }

  footer .footer_logo {
    width: 50%;
  }

  .border_left {
      border: none;
  }

  ul.footer_nav {
    margin-bottom: 30px;
  }

}

@media screen and (max-width:576px) {

    *
    {
      /* border: solid 1px red; */
    }

    #home_main-background
    {
        background: var(--site-darkpurple)!important;
    }


    @keyframes headerAnimation {
      from {
          /* display: block; */
          height: 0;
          top: -100px;
          opacity: 0;
      }
      to {
          /* display: block; */
          height: 76px;
          top: 0;
          opacity: 1;
      }
    }

    .page--transparent-background
    {
      /* display: none; */
    }

    div#main-page_services-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    #services-tabList {
        grid-template: auto/repeat(3, 1fr);
        grid-gap: 10px;
    }

    #services-tabContent
    {
        padding: 10px 15px;
        box-shadow: initial;
    }

    section#our-map {
        height: 100vh;
    }


}