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

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

#colorRing, #colorRingText, #toggleRetainerModal, div.insideRing {background-color:#f4f4f4;}
#colorRing:hover, #colorRingText:hover, #toggleRetainerModal:hover, #colorRing:hover div.insideRing {background-color:#dbdbdb; cursor:pointer;}
button#customColor {display:none;}

/*Wrapper and contents*/
#retainerWrapper {border:1px solid #dddddd;margin:0 auto;max-width:695px;position: relative;display: flex;flex-wrap: wrap;z-index: 3;}
div.featureFooter {text-align:right; padding:3px 15px 3px 0;}
div.featureFooter > a {color: #000 !important;}
#retainerWrapper * {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;}
#retainerWrapper > div.denturebos.cf.innerShadow2 {cursor:crosshair;}
#controlWrapper {position:absolute; top:0px; left:0;}
#myRetainerModal {flex: 1 100%;display: flex;flex-direction: column;justify-content: center;align-items: stretch;align-content: stretch;min-height: 100%;z-index: 3;}

/* Audio */
div.retainerAudio {text-align: center;}

/*---Color Ring---*/
#colorRing {margin:0 auto; padding:3px; text-align:center;}
#colorRingText {border-top:1px solid #dddddd; padding:10px 10px 10px 11px;}/*Adjust position of "Reset" text*/
#colorRingText > span {color:#000; font-size:18px; text-transform:uppercase;}
div.outsideRing {border:2px solid #838383; border-radius:50%; height:55px; -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); opacity:.85; width:55px;}
div.insideRing {background-color:#f4f4f4; border:2px solid #838383; border-radius:50%; height:40px; left:6px; position:relative; top:5px; width:40px;}
#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 */
#toggleRetainerModal {border-bottom:1px solid #dddddd; border-right:1px solid #dddddd; padding:10px 20px;}
#toggleRetainerModal:hover, #toggleRetainerModal:focus {cursor:pointer; opacity:1;}
#toggleRetainerModal 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) */
.retainerModal {background-color:rgba(0,0,0,0.4);display:block;overflow:auto;position:absolute;left: 0;right: 0;bottom: 0;top: 0;height:  100%;width:  100%;}
.retainer-modal-content {background-color:#fefefe;margin: 0 auto;padding:20px;border:1px solid #888;width:80%;left: 0;top: 0;right: 0;bottom: 0;}
.close {color:#000; float:right; font-size: 28px; font-weight: bold;}
.close:hover, .close:focus {color: #aaa; text-decoration: none; cursor: pointer;}

/*retainer*/
.cf:after {clear:both;}
#retainerImage {position: relative;flex: 1 100%;z-index:  1;}
.retainerImg {/*filter: grayscale(100%) brightness(65%) contrast(200%);*/ min-height: 300px; margin: 0 auto; position:absolute;top:0; left: 0; background-image:url("https://www.aubreybarrettortho.com/resourcefiles/other/retainer.png");background-repeat:no-repeat;background-position:top center;background-size:100% 100%; 
height: auto; min-width: 100%;x: 99;}
.retainerBackground {top:0; left: 0; background-image:url("https://www.aubreybarrettortho.com/resourcefiles/other/retainer-bg.jpg"); background-repeat:no-repeat; background-position:top center; background-size:100% 100%; height:auto; position:relative; min-width:100%;}
div.retainerBackground {min-height:300px;}
.retainer-bg, .retainerOverlay {position:absolute; top:33%; left:25%; width:49%; height:191px;}
.retainer-bg span {box-shadow:inset 0 0 1em black;}

/* Link retainer Overlay (z-index fix) */
.retainerOverlay {position:relative;}
.retainerOverlay 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 ); margin:0.2em; padding:0.2em 0.3em; text-align:left; text-transform:capitalize; 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:inline-block; 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;}
span.color-preview {border:3px solid rgba(0,0,0,0); height:100%; width:100%; opacity:.9; overflow:hidden;}
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;}
#retainerWrapper div.contentText {background-color: #eaeff3;display:block;flex: 1 100%;z-index:  2;}

/*Text Styling*/
#retainerWrapper div.featureTitle {border-bottom:2px solid #000; display:none; text-align:left;}
#retainerWrapper div.featureTitle > h2 {margin:0; padding-left:20px; text-transform:uppercase;}
#retainerWrapper 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); border-top:3px solid rgba(0,0,0,0.6); bottom:0px; display:none; height:75px; min-width:100%; position:absolute; 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;}
.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; color:#fff; font-size:16px; margin-top:20px; min-width:125px; padding:2px 10px; -moz-box-shadow:inset 0 0 2px #fff; -webkit-box-shadow:inset 0 0 2px #fff; box-shadow:inset 0 0 2px #fff;}
#selectedColorText button:nth-child(2) {margin:0 10%;}
#selectedColorText button:hover, #selectedColorText button:focus, #selectedColorText button:active {border:2px solid rgba(255, 255, 255, 0.85); cursor:pointer; -moz-box-shadow:inset 0 0 20px #000000; -webkit-box-shadow:inset 0 0 20px #000000; box-shadow:inset 0 0 20px #000000; }

/*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%;}
  .retainer-bg, .retainerOverlay {top:28%;}
}
@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: 550px){#retainerImage > div {min-height: 250px;} }

@media screen and (max-width:500px) {
  div.introText, div.introImage, div.contentImage {min-width:100%;} /*Stacks main contents on mobile devices*/
  .retainerImg::before {background-size:100% 100%;}
}

@media screen and (max-width: 475px){#retainerImage > div {min-height: 225px;} }

@media screen and (max-width:440px) {
    .retainer-bg, .retainerOverlay {height:88px;}
    .retainerImg {height:173px;}
    #selectedColorText {width:86.5%;}
    div.color span.text {bottom:71.6%; font-size:14px; left:42%;}
    button#colorAll, button#brackets {font-size:14px;}
    button#colorAll {margin:8px 0 0 10px;}
    button#brackets {margin:8px 10px 0 0;}
    #selectedColorText {height:50px;}
    #colorRing {left:5px; top:25px;}
    #colorRingText {left:19.5px; top:86px;}
}

@media screen and (max-width: 425px){#retainerImage > div {min-height: 200px;}div.colorBox {height: 30px; width: 30px}}

@media screen and (max-width:400px) {
  #retainerWrapper div.featureTitle > h2 {font-size:26px; padding-left:8px;}
}
@media screen and (max-width: 375px){.retainerModal{}}
@media screen and (max-width:350px) {
    div.topRow, div.bottomRow {margin-left:34px; margin-right:41px;}
}