/* Header Variation 2 Start */
.header {
  background:var(--bg-header);
  color: var(--header-color);
  height: 72px;
  position: fixed;
  position: -webkit-fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0px 4px 16px 0px #0000001A;
}
body {
  padding-top: 72px;
}
.without-banner .header,
.header.is-fixed {
  box-shadow: 0px 4px 16px 0px #0000001A;
}
.header__top, .header__bottom {
  width: 100%;
  height: fit-content;
}

.header__container {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
}
.header__left {
  display: flex;
  align-items: center;
  grid-column-gap: 35px;
}
.header__right {
  display: flex;
  align-items: center;
  grid-column-gap: 30px;
}
.header__logo {
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  margin-right: 0;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  color: var(--header-color) !important;
  max-width: var(--logo-width);
}
.navmenu__list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-column-gap: 10px;
}
.navmenu__list-link {
  display: inline-flex;
  padding: 5px 5px;
  text-align: left;
  letter-spacing: 0;
  color: var(--header-color);
  text-transform: var(--header-fonts-text-transform);
  font: var(--header-fonts);
  align-items: center;
  position: relative;
  text-decoration: none;
}
.navmenu__list-link:after{
  position: absolute;
  content: '';
  background: var(--header-color);
  width: 0;
  height: 1px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.3s all ease;
}
.navmenu__list-link:hover, 
.navmenu__list-link:focus, 
.navmenu__list-link.navON{
  color: var(--header-color);
}
.navmenu__list-link:hover:after, 
.navmenu__list-link:focus:after, 
.navmenu__list-link.navON:after{
  width: 100%;
}
.navmenu__dropmenu-link.navON {
  color: var(--highlight-color);
}
.navmenu__dropmenu {
  padding: 10px 0;
  border: 1px solid var(--secondary-color);
  border-radius: 6px;
  min-width: 280px;
  background-color: var(--body-bg);
  width:280px;
  list-style: none;
}
.navmenu__dropmenu-link {
  display: block;
  text-transform: var(--header-fonts-text-transform);
  font: var(--header-fonts);
  color: var(--text-color);
  padding: 0px 20px;
  font-size:14px;
}
.navmenu__dropmenu .navmenu__dropmenu-item + .navmenu__dropmenu-item {
  margin-top: 10px;
  border-top: 1px solid var(--secondary-color);
  padding-top: 10px;
}
.uk-dropdown {
  display: none;
}

.navmenu__dropmenu-item.submenulistinner > .navmenu__dropmenu-link {
  position: relative;
}
.navmenu__dropmenu-item.submenulistinner > .navmenu__dropmenu-link:after {
  content: '\e906';
  font-family: var(--icon-fonts);
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  transition: all .4s ease;
  font-size: 13px;
  text-align: center;
}
.third-level-menu {
  left: 100%;
  top: 0;
  /* margin-left: 20px; */
  /* margin-top: -10px; */
  box-shadow: 6px 4px 12px rgba(0, 0, 0, 0.15);
}
.header__phone-action {
  color: var(--primary-color);
  font: var(--header-fonts);
  display: flex;
  align-items: center;
  padding: 5px 0;
}
.header__phone-icon{
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
.header__phone-text{
  margin-left: 5px;
}
/*.header__phone-action:hover,
.header__phone-action:focus{
color: var(--secondary-color);
}*/

.navmenu__list-arrow {
  width: 16px;
  height: 16px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 12px;
  margin-left: 0px;
}

@media(min-width: 1024px) {
  .has-dropdown:hover > .navmenu__dropmenu,
  .has-dropdown:focus-within > .navmenu__dropmenu,
  .has-dropdown:focus-visible > .navmenu__dropmenu{
    display: block;
  }
  .has-dropdown:hover > .navmenu__list-link,
  .has-dropdown:focus-visible > .navmenu__list-link,
  .has-dropdown:hover > .navmenu__dropmenu-link,
  .has-dropdown:focus-visible > .navmenu__dropmenu-link {
    color: var(--header-color);
  }
  .has-dropdown:hover > .navmenu__list-link:after,
  .has-dropdown:focus-within > .navmenu__list-link:after,
  .has-dropdown:focus-visible > .navmenu__list-link:after {
    width: 100%;
  }
  .navmenu__dropmenu-arrow {
    position: absolute;
    top: 50%;
    right: 7px;
    font-size: 12px;
    transform: translateY(-50%);
    font-weight: bold;
  }
}

@media (max-width: 1500px) {
  .header__container{
    padding: 0 20px 0 20px;
  }
  .header__top{
    padding: 10px 20px 10px 20px;
  }
}

@media (max-width: 1280px) {
  .navmenu__list-link {
    font-size: 13px;
    padding: 0;
  }
  .header__button-action{
    padding: 11px 15px;
  }
  .header__logo{
    max-width: var(--mob-logo-width);
  }
  .header__top{
    padding: 10px 20px 10px 20px;
  }
  .header__top-nav-item:last-child{
    padding-right: 0px;
  }
  .header__right {
    grid-column-gap: 10px;
  }
  .navmenu__list{
    grid-column-gap: 10px;
  }
}

@media (max-width: 1023.98px) {
  body {
    padding-top: 64px;
  }
  .is-dropdown-active >  .navmenu__dropmenu {
    display: block;
  }

  .is-dropdown-active > .navmenu__list-link,
  .is-dropdown-active > .navmenu__dropmenu-link {
    color: var(--header-color);
  }
  .is-dropdown-active > .navmenu__list-link:after {
    width: 100%;
  }   

  .has-dropdown > .navmenu__dropmenu-arrow {
    height: 50px;
  }

  .has-dropdown > .navmenu__dropmenu-arrow:before {
    transform: translateY(-50%) rotate(-90deg);
    top: 25px;
  }
  .has-dropdown > .navmenu__list-arrow,
  .has-dropdown > .navmenu__dropmenu-arrow {
    display: block;
    width: 35px;
    height: 60px;
    cursor: pointer;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
  }
  .has-dropdown > .navmenu__list-arrow:before,
  .has-dropdown > .navmenu__dropmenu-arrow:before {
    content: '\e902';
    font-family: var(--icon-fonts);
    position: absolute;
    right: 0px;
    top: 23px;
    transform: translateY(-50%) rotate(180deg);

    width: 24px;
    height: 24px;
    transition: all .4s ease;
    /*font-size: 100%;*/
    font-size: 15px;
    color: var(--text-color);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .has-dropdown.is-dropdown-active > .navmenu__dropmenu-arrow:before {
    transform: translateY(-50%);
    /*top: 25px;*/
  }
  .has-dropdown.is-dropdown-active > .navmenu__list-arrow:before {
    transform: translateY(-50%);
  }
  .navmenu__list-link.navON, 
  .navmenu__more-link.navON {
    color: var(--highlight-color);
  }
  .navmenu__list-link:hover, .navmenu__list-link:focus {
    color: var(--highlight-color);
  }
  .navmenu, .header__collapsible,
  .header__button,
  .header__top{
    display: none;
  }
  .navmenu.mobile-menu-active {
    display: block;
  }
  .header, .header--active {
    height: 64px;
    z-index: 101;
    align-items: center;
  }
  .navmenu {
    position: fixed;
    width: 100%;
    background: var(--body-bg);
    top: 64px;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    margin: 0;
    padding: 15px 20px 80px;
  }
  .navmenu__list {
    display: block;
    position: relative;
    z-index: 10;
  }
  .navmenu__list-item, .navmenu__dropmenu-item{
    margin-right: 0;
    position: relative;
  }
  .navmenu__list-link{
    font: var(--mob-header-fonts);
    color: var(--header-color);
    padding: 12px 0px;
    display: flex;
  }
  .navmenu__dropmenu-link{
    margin-right: 30px;
  }
  .navmenu__dropmenu {
    position: relative !important;
    box-shadow: none !important;
    background: transparent;
    padding: 0 0 15px 8px;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    border: none;
    padding: 0px 20px 12px 0px;
    width: 100%;
  }
  .navmenu__dropmenu-link {
    padding: 5px 0 5px 0px;
    position: relative;
    text-align: left;
  }
  .navmenu__dropmenu .navmenu__dropmenu-item + .navmenu__dropmenu-item {
    margin-top: 8px;
    border-top: 1px solid var(--secondary-color);
    padding-top: 8px;
  }
  .header__toggler-btn {
    background: transparent;
    border: 0;
    display: inline-flex;
    padding: 10px 0;
    margin: 0;
    position: relative;
    flex-direction: column;
    cursor: pointer;
  }
  .header__toggler-icon {
    display: block;
    width: 18px;
    height: 2px;
    margin: 11px auto;
    background: var(--highlight-color);
    position: relative;
  }
  .header__toggler-text {
    display: none;
  }
  .header__toggler-icon:before, .header__toggler-icon:after {
    content: "";
    width: 100%;
    display: block;
    height: 2px;
    left: 0;
    background: var(--highlight-color);
    transition: all .4s ease 0s;
    -webkit-transition: all .4s ease 0s;
    -ms-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    position: absolute;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  .header__toggler-icon:before {
    top: -6px;
  }
  .header__toggler-icon:after {
    bottom: -6px;
  }
  .header__toggler-btn[aria-expanded="true"] .header__toggler-icon {
    background: none;
  }
  .header__toggler-btn[aria-expanded="true"] .header__toggler-icon:after {
    transform: rotate(45deg);
    bottom: 0;
  }
  .header__toggler-btn[aria-expanded="true"] .header__toggler-icon:before {
    transform: rotate(-45deg);
    top: 0;
  }
  .navmenu__list-item.active_menu > .navmenu__dropmenu,
  .navmenu__dropmenu-item.active_menu-sub .third-level-menu{
    display: block;
  }
  .navmenu__dropmenu-item.submenulistinner > .navmenu__dropmenu-link:after{
    display: none;
  }
  .uk-drop.uk-open {
    display: none;
  }
  .navmenu__dropmenu.third-level-menu .navmenu__dropmenu-item + .navmenu__dropmenu-item{
    margin-top: 0px;
    border-top: none;
    padding-top: 0px;
  }
  .third-level-menu{
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .third-level-menu .navmenu__dropmenu-link{
    margin: 0;
    padding-left: 20px;
    position: relative;
  }
  .third-level-menu .navmenu__dropmenu-link:before {
    position: absolute;
    background: var(--text-color);
    width: 5px;
    height: 5px;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    border-radius: 100%;
  }
  .navmenu__list-link:after{
    display: none;
  }
  .header__button > a:nth-child(2) {
    display: none;
  }
  .header__button {
    display: block;
    position: fixed;
    bottom: 0px;
    width: 100%;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
  .header__button-action{
    display: flex;
    background: var(--primary-color);
    border-color: #fff;
    min-height: 50px;
    padding: 0;
    margin: 0 10px 10px;
    font-weight: 600;
  }
  .header__button-action:hover, .header__button-action:focus{
    background: var(--highlight-color);
    border-color: var(--highlight-color);
    color: #fff;
  }
  .navmenu__dropmenu-item{
    margin-top: 8px;
    padding-top: 8px;
  }
  .header__top-nav{
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .header__top-nav-item {
    width: 100%;
  }
  .header__top-nav {
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--secondary-color);
  }
  .header__top-nav .header__top-nav-item + .header__top-nav-item{
    margin-top: 15px;
  }
  .mobile-menu-active #ae_launcher.ae-cta-position-preset-left-lower {
    display: none !important;
  }
  .mobile-menu-active div#klaraWidgetApp {
    display: none !important;
  }
  .patient-portal-link-mob {
    margin: 30px 0 0 0;
    padding: 30px 0 0 0;
    border-top: 1px solid var(--secondary-color);
  }
  .mobile-menu-active .header {
    border-bottom: 1px solid var(--secondary-color);
  }
  .header__toggler {
    order: 3;
  }
  .header__right {
    order: 1;
  }
  .header__left {
    order: 2;
  }
  .header__phone-text {
    display: none;
  }

  .header__phone-action{
    color: var(--highlight-color);
  }
}

@media (max-width: 767.98px) {
  .header__button {
    left: 0;
    transform: inherit;
  }
}

@media (min-width: 1024px) and (max-width: 1140px) {
  .navmenu__list-link {
    font-size: 13px;
  }
  .header__button-action {
    font-size: 13px;
  }
  .header__logo {
    max-width: 130px;
  }
}

@media (min-width: 1024px) {
  .header__toggler, .header-mob-submenu /*, .navmenu__list-arrow*/ {
    display: none;
  }
}
/* Header Variation 2 End */
/* Footer Variation 2 Start */
.footer {
  padding: 64px 0;
  position: relative;
  background-color: var(--bg-footer);
  font: var(--footer-fonts);
  color: var(--footer-color);
}
.footer a {
  color: var(--footer-color);
  text-decoration: none;
  /*border-bottom: 1px solid transparent;*/
  transition: all .4s ease;
}
.footer a:hover, .footer a:focus{
  color: var(--footer-color);
  opacity: 0.6;
}
.footer a.navON{
  color: var(--footer-color);
  text-decoration: underline;
}
.footer__top {
  padding: 48px;
}
.footer__title {
  color: var(--footer-color);
}
.footer__address--title {
  margin: 0;
  color: var(--footer-color);
}
.footer__address + .footer__address {
  margin-top: 20px;
}
.footer__contactdetail-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__contactdetail-item{
  padding: 8px 0px;
  display: flex;
  align-items: center;
}
.footer__contactdetail-link{
  display: flex;
  align-items: center;
}
.footer__contactdetail-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  font-size: 18px;
}
.footer__primarymenu-wrapper{
  list-style: none;
  margin: 0;
  padding: 0
}
.footer__primarymenu-item{
  padding: 8px 0px;
}
.footer__socialmedia-wrapper {
  padding: 0;
  margin: 0;
  list-style: none;
}
.footer__socialmedia-item{
  padding: 8px 0px;
}
.footer__socialmedia-nav{
  display: flex;
  align-items: center;
}
.footer__socialmedia-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  font-size: 18px;
}
.footer__bottom {
  font-size: 12px;
  padding-top: 32px;
  border-top: 1px solid;
}
.footer__bottom-grid{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer__secondarymenu-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.footer__secondarymenu-item + .footer__secondarymenu-item{
  margin-left: 24px;
}
.footer :focus-visible{
  outline: 1px solid var(--footer-color);
  box-shadow: 0 0 2px var(--footer-color) inset;
  -webkit-box-shadow: 0 0 2px var(--footer-color) inset;
  -ms-box-shadow: 0 0 2px var(--footer-color) inset;
  -moz-box-shadow: 0 0 2px var(--footer-color) inset;
}

.footer__copyright  p {
  display: inline;
  margin:0;
}
@media (max-width: 1280px) {
  .footer__top {
    padding: 48px 0px;
  }
}
@media (max-width: 1023px) {
  .footer {
    padding: 64px 0 100px;
  }
}
@media (max-width: 640px) {
  .footer__top {
    padding: 32px 0px;
  }
  .footer {
    padding: 24px 0 80px;
  }
  .footer__title {
    margin-bottom: 12px;
  }
  .footer__top-right-inner > div + div{
    margin-top: 24px !important;
  }
  .footer__container {
    padding: 0 32px;
  }
  .footer__copyright{
    order: 2;
  }
  .footer__secondarymenu{
    order: 1;
  }
  .footer__secondarymenu-item {
    width: 100%;
  }
  .footer__secondarymenu-item + .footer__secondarymenu-item{
    margin-left: 0px;
    margin-top: 16px;
  }
}
/* Footer Variation 2 End */
/* hero-background-sec start */
.hero-background-sec {
  background: var(--primary-color);
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-background-sec__title{
  color: var(--inverse-font-color);
  margin: 0;
}
.hero-background-sec__overlay :focus-visible {
    outline: 1px solid var(--inverse-font-color);
    box-shadow: 0 0 2px var(--inverse-font-color) inset;
    -webkit-box-shadow: 0 0 2px var(--inverse-font-color) inset;
    -ms-box-shadow: 0 0 2px var(--inverse-font-color) inset;
    -moz-box-shadow: 0 0 2px var(--inverse-font-color) inset;
}

@media (max-width: 575px) {
  .hero-background-sec {
    min-height: 110px;
    height: auto;
  }
}

  /* hero-background-sec end */
  .color-planner.inner-padding {
    padding-left: 20px;
    padding-right: 20px;
}
#colorRing, #colorRingText, #toggleModal, div.insideRing  {background-color:#f4f4f4}
#colorRing:hover, #colorRingText:hover, #toggleModal:hover, #colorRing:hover div.insideRing {background-color:#dbdbdb; cursor: pointer;}

button#customColor {display: none;}

/*Wrapper and contents*/
#colorPlannerWrapper {z-index: 1;border:1px solid #dddddd;margin:0 auto;max-width:695px;overflow:hidden;position:relative;display: flex; flex-direction: column;justify-content: center;align-items: stretch;align-content: stretch;}
div.featureFooter {padding:3px 15px 3px 0; text-align:right;}
div.featureFooter > a {font-size:0.9em;  }
#colorPlannerWrapper * {-webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; -o-transition:all .4s  ease-in-out; transition:all .4s ease-in-out;}
div.denturebos.cf.innerShadow2 {cursor:crosshair;}
#controlWrapper {left:0; position:absolute; top:0px;z-index: 50;}
#bracketsImage {max-height: 395px;}
.body {background-color: #fff;}

/* Audio */
div.colorPlannerAudio {min-width: 100%; text-align: center;}
audio {max-width: 100% !important;}

/*---Color Ring---*/
#colorRing {margin:0 auto; padding:3px; text-align:center; z-index:2;}
#colorRingText {border-top:1px solid #dddddd; padding:10px 10px 10px 11px;}/*Adjust position of "Reset" text*/
#colorRingText > span {color:#838383; font-size:18px; text-transform:uppercase;}
div.outsideRing {border:2px solid #838383; border-radius:50%;  -webkit-box-shadow:7px 7px 22px -10px rgba(0,0,0,0.2); -moz-box-shadow:7px 7px 22px -10px rgba(0,0,0,0.2);box-shadow:7px 7px 22px -10px rgba(0,0,0,0.2); height:55px; opacity:0.85; width:55px;}
div.insideRing {background-color:#f4f4f4 !important; border:2px solid #838383; border-radius:50%; height:40px; left:6px; position:relative; top:5px; width:40px;}
#colorRing:hover {}
#colorRing:hover div.outsideRing {cursor:pointer; opacity:1;}
#colorRing:hover div.insideRing {-webkit-box-shadow:inset 0px 0px 4px 0px rgba(0,0,0,0.75); -moz-box-shadow:inset 0px 0px 4px 0px rgba(0,0,0,0.75); box-shadow:inset 0px 0px 4px 0px rgba(0,0,0,0.75);}
.hoverRing {cursor:pointer; display:block !important;}
div.controlWrapper {position:relative;}


/* Modal Toggle Button */
#toggleModal {border-bottom:1px solid #dddddd; padding:10px 20px; z-index:500;}
#toggleModal:hover, #toggleModal:focus {cursor:pointer; opacity:1;}
#toggleModal span {color:#838383; font-size:45px; font-weight:bold; line-height:20px; text-shadow:2px 2px 3px #e5e5e5;}
#colorPlannerWrapper .modal {
    /*display: flex;*/
}
.colorPlannerAudio {
    margin-top: 20px;
}

/* The Modal (background on start) */
.modal {background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4);display:block;left:0;min-width:100%;overflow:auto;position:absolute;top:0;z-index:1000; flex: 1 100%; min-height: 100%;}
 .modal-content {
    background-color: #fefefe;
    border: 1px solid #888;
    margin: auto;
    padding: 20px 35px 20px 20px;
    width: 80%;
    position: relative;
}
.close {
    color: #757575;
     float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 15px;
}
.close:hover, .close:focus {color:#000; text-shadow:none; cursor:pointer; text-decoration:none;}

/*teeth*/
.cf:after {clear:both;}
/*.dentures:before {background-image:url('%%strpath%%resourcefiles/other/face.png');background-position:top center;background-repeat:no-repeat;background-size: 100% auto;content:"";height:100%;width:100%;position:absolute;top:0; left: 0; right: 0; bottom: 0;}
*/

#bracketsImage > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    pointer-events: none;
}
.goldDentures {background-color:#fff; display:block; height:400px; margin:0 auto; position:relative; width:auto; z-index:9;}
.goldDentures:before { /*background-image:url('%%strpath%%resourcefiles/other/face-gold.png');*/ background-position:top center; background-repeat:no-repeat; background-size:100% auto; content:""; height:auto; max-width:100%; position:absolute; top:0;}
.dentures {background-color:#fff;display:block;height: 395px ;margin:0 auto;position:relative;width:100%;z-index:9;}
.teeth, .overlay {background: none;height:245px;left:25%;position:absolute;top:33%;width:49%;z-index: 99999;z-index:-1;}
.teeth span {box-shadow:inset 0 0 1em black;}
.topTeeth{height:57%; left:1.3%; position:absolute; width:98%;}
.topTeeth {border-radius:650%/450px; overflow:hidden; top:0; z-index:1;}
.topTeeth span{display:block; float:left; height:77%; left:0; position:relative; top:18%; width:13%;}

/* Teeth sizes */
.topTeeth .x-small {width:2.5%;}
.topTeeth .special-small {width:3.5%;}
.topTeeth .small {width:5%;}
.topTeeth .semi-small {width:6.5%;}
.topTeeth .semi-large {width:7.5%;}
.topTeeth .special-large {width:13%;}
.topTeeth .large {width:15%;}
.topTeeth .x-large {width:15.5%;}
.topTeeth .xx-large {width:14%;}
.highlight {background:rgba(200,200,200,0.3) !important;}

/* Link Overlay (z-index fix) */
.overlay {position:relative;z-index: 2;}
.overlay span {cursor:crosshair;}

/*Control Positioning*/
/*input[type="radio"] {position:relative; top:2px;}*/

/*Button Styling*/
button.color {min-width:120px;}
button.color span:first-child {margin-right:7.5px;}
button.color span.text {position:relative; top:2px;}
button.color:hover, button.color:focus {background:#d8d8d8 !important;}
button.color:hover span.text, button.color:focus span.text {font-weight:bold;}

/* Color Button Styles */
.controls {clear:both; float:left; margin:1em 0; margin-top:10px !important; text-align:center; width:100%;}
.controls label {margin:0 0 0 0.5em;}
.controls span {font-size:18px; font-weight:bold;}
.colors {padding:0; text-align:center;}
.color-preview {border:1px solid #888; display:inline-block; height:20px; vertical-align:middle; width:20px;}
.color {background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYmRiZGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); border:1px solid #666; border-radius:3px; box-shadow:0 0 1px rgba(0,0,0,.7); cursor:pointer; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3',endColorstr='#dbdbdb',GradientType=0); text-align:left; text-transform:capitalize; margin:0.2em; padding:0.2em 0.3em;  width:84px;}
div.color, div.color *, div.controls {margin:0; padding:0;}
div.colorMenu {display:inline-block; margin:5px auto; min-width:100%; padding:0;}
div.color {border:0;box-shadow:none;display: flex;flex: 1;height:100%;width:100%;}
div.topRow1, div.topRow2, div.bottomRow1, div.bottomRow2 {display:inline-block;}
div.color span.text {bottom:31.5%; color:#000; display:none; font-size:18px; left:48%; text-shadow:0 0 8px #fff; z-index:1001;}
span.color-preview {border:3px solid rgba(0,0,0,0); height:100%; opacity:0.9; overflow:hidden; width:100%;}
span.color-preview:hover, span.color-preview:focus {border:3px solid #000; box-shadow:inset 0px 0px 25px #fff; opacity:1;}
div.colorBox {display:inline-block; height:45px; margin:3px; width:45px;}
div.topRow {margin-bottom:3px;}
div.bottomRow {margin:0;}
div.contentText {background-color:#ececec !important;}

/*Text Styling*/
 
/*Selected Color text*/
#selectedColorText {background-color: rgba(0, 0, 0, 0.4) !important;border-top:3px solid rgba(0,0,0,0.6);bottom:0px;height:75px;min-width:100%;position:absolute;z-index: 999;text-align:center;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s  ease-in-out;transition:all .4s ease-in-out;display: none;}
.showWindow {display:inline-block !important;}
#selectedColorText > button {margin:10px;}
.colorMenu:hover #selectedColorText {display:block;}

/* Buttons */
#selectedColorText button {background-color:rgba(0,0,0,.75); border:2px solid #000; border-radius:3px;  -moz-box-shadow:inset 0 0 2px #fff; -webkit-box-shadow:inset 0 0 2px #fff; box-shadow:inset 0 0 2px #fff; color:#fff; font-size:16px; margin-top:20px; min-width:125px; padding:2px 10px;}
#selectedColorText button:nth-child(2) {margin:0 10%;}
#selectedColorText button:hover {border:2px solid rgba(255, 255, 255, 0.85); -moz-box-shadow:inset 0 0 20px #000000; -webkit-box-shadow:inset 0 0 20px #000000; box-shadow:inset 0 0 20px #000000; cursor:pointer;}

/*Responsive Section*/
@media screen and (max-width:770px) {
  #selectedColorText {width:94%;}
}
@media screen and (max-width:767px) {
  button#colorAll {margin:16px 0 0 10px;}
  button#brackets {margin:16px 10px 0 0;}
  .modal-content {
    overflow: auto;
    height: 400px;
}
}
@media screen and (max-width:715px) {
  div.color span.text {bottom:58.2%; left:46%;}
  .teeth, .overlay {top:28%;}
  div.colorBox {height:35px; width:35px;}
  #colorPlannerWrapper p {font-size: calc(9px + 1vw);}
}
@media screen and (max-width:600px) {/*Responsive Color Buttons*/
  button.color {min-width:45%;}
  button.color span:first-child {margin-right:12.5px;}
}
@media screen and (max-width:575px) {
  div.colorBox {height:30px; width:30px;}
  .dentures {height:330px;}
}
@media screen and (max-width:500px) {
  div.introText, div.introImage, div.contentImage {min-width:100%;} /*Stacks main contents on mobile devices*/
  .dentures::before {background-size:100% auto;}
  .goldDentures::before {background-size:100% auto;}
  div.colorBox {height:25px; margin:7px 5px; width:20%;}
  div.topRow {margin-bottom:0;}
  button#colorAll {margin: 5px 0 0 10px; font-size: 20px; padding: 5px 34px !important;}
}

@media screen and (max-width:440px) {
  .teeth, .overlay {height:140px;}
  .dentures {height:173px;}
  .goldDentures {height:173px;}
  #selectedColorText {width:86.5%;}
  div.color span.text {bottom:71.6%; font-size:14px; left:42%;}
  button#brackets {margin:8px 10px 0 0;}
  #selectedColorText {height:50px;}
  #controlWrapper {zoom:0.8;}
}
@media screen and (max-width:400px) {
  #colorPlannerWrapper div.featureTitle > h2 {font-size:26px; padding-left:8px;}
}

/* Media Queries for images */
@media screen and (max-width: 715px){.dentures {height: 360px;}}
@media screen and (max-width: 670px){.dentures {height: 345px;}}
@media screen and (max-width: 634px){.dentures {height: 330px;}}
@media screen and (max-width: 615px){.dentures {height: 310px;}}
@media screen and (max-width: 593px){.dentures {height: 290px;}}
@media screen and (max-width: 570px){.dentures {height: 270px;}}
@media screen and (max-width: 550px){.dentures {height: 250px;}}
@media screen and (max-width: 526px){.dentures {height: 270px;}}
@media screen and (max-width: 497px){.dentures {height: 255px;}}
@media screen and (max-width: 465px){.dentures {height: 235px;}}
@media screen and (max-width: 447px){.dentures {height: 223px;}}
@media screen and (max-width: 427px){.dentures {height: 215px;}}
@media screen and (max-width: 414px){.dentures {height: 205px;}}
@media screen and (max-width: 406px){.dentures {height: 195px;}}
@media screen and (max-width: 389px){.dentures {height: 185px;}}

/*cache version*/