@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

#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 {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; color: #333 !important;}
#colorPlannerWrapper * {font-family:'Roboto Condensed',sans-serif; -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;}
#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-family:"Arial Black",Gadget,sans-serif; font-size:45px; font-weight:bold; line-height:20px; text-shadow:2px 2px 3px #e5e5e5;}

/* 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; width:80%;}
.close {color:#aaaaaa; float:right; font-size:28px; font-weight:bold;}
.close:hover, .close:focus {color:#000; cursor:pointer; text-decoration:none;}

/*teeth*/
.cf:after {clear:both;}
.dentures:before {background-image:url('https://www.orthocentersofmo.com/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;}
.goldDentures {background-color:#fff; display:block; height:400px; margin:0 auto; position:relative; width:auto; z-index:9;}
.goldDentures:before {background-image:url('https://www.orthocentersofmo.com/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*/
div.featureTitle {border-bottom:2px solid #000; display:none; text-align:left;}
div.featureTitle > h2 {margin:0; padding-left:20px; text-transform:uppercase;}
#colorPlannerWrapper p {color:#000;font-size: 18px;text-align:left; line-height: normal !important}

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