/* Before After Image - Added with jQuery */
#dentalHygieneWrapper {min-height:200px;}

.hideContent {display: none !important; }
.commonProblemsContext {text-align: center; }
.common-problems-page .commonProblemsContext .contentWrapper {min-height: 145px !important;}
.commonProblemsContext .contentWrapper {margin: 0; min-width: 100%; padding: 0 10px; }
.common-problems-page #dentalHygieneWrapper {max-width: 700px;}
.before-afters-page #content ul.dentalHygieneButtonCol li { padding-bottom: 10px; }


/*container sizing*/
#dentalHygieneWrapper {display:block; margin:0 auto; max-width:800px;}
#dentalHygieneWrapper * {box-sizing:border-box;}
div.rightCol {background-color:#fff;}
div.footer {background-color:rgba(217,217,217,0.25); padding:3px; text-align:right;}

/*FLEX CONTAINER*/
/*container layout*/
.body {display: flex; flex-wrap: wrap; flex-direction: row;}
.body > ul.dentalHygieneButtonCol {flex: 1 20%;background-color: #687982; font-family: "Open Sans",Arial;}
.body > div.rightCol {flex: 1 80%;}
.body > div.footer {flex: 1 100%;}
/*button column layout*/
ul.dentalHygieneButtonCol {display: flex;flex-direction: column;justify-content: center;align-items: stretch;align-content: stretch;padding: 0 !important;margin: 0 !important;list-style-type: none;}
ul.dentalHygieneButtonCol > li {flex: 1;vertical-align: middle;align-content: center;align-items: center;display: flex;border-bottom: 1px solid #fff;padding: 10px 0;cursor: pointer;}
ul.dentalHygieneButtonCol > li:hover, ul.dentalHygieneButtonCol > li:focus {background-color: rgba(255, 255, 255, 0.2);}
ul.dentalHygieneButtonCol > li > span {flex: 1 100%;color: #fff;margin: 0 0 0 20px;}

 .InformativeAnimation div.footer {
    padding: 0 20px;
}
div.rightCol > div.contentWrapper {margin:0; min-width:100%; padding:0 10px; text-align:center;}
div#image {display:inline-block; margin:0 auto; min-width:100%; padding:0; text-align:center;}
div.rightCol .text {display:inline-block; font-family:"Open Sans",Arial; margin:0 auto; max-width:100%; padding:0 10px;}
div.contentWrapper p {color: #000 !important;font-size:1em;text-align:left;font-family:"Open Sans",Arial; line-height: normal !important;}
div.dentalHygieneAudio, div.dentalHygieneTitle {text-align:left;}
.body {background-color:#fff; min-width:100%; position:relative;}
 

/*title*/
div.featureTitle {background-color:#2d383f;}
#dentalHygieneWrapper h2 {color:#fff !important;font-size:2.6em !important;margin: 0 !important;padding: 15px 20px !important;}
#dentalHygieneWrapper h3 {color:#2d383f;font-size:1.8em !important;font-weight:normal;margin: 0 !important;padding: 10px 20px !important;}
div.titleRow {background-color:rgba(217,217,217,0.25); border-bottom:1px solid #fff;}

/*audio*/
div.dentalHygieneAudio {text-align: center;}

/* Play, Pause, Start, Stop Buttons */
#prev:after, #prev2:after {content: "\f04a"; font-family: FontAwesome;}
#next:after, #next2:after {content: "\f04e"; font-family: FontAwesome;}
#startStop:after, #startStop2:after {content: "\f04b"; font-family: FontAwesome;}
#startStop.active:after, #startStop2.active:after {content: "\f04c"; font-family: FontAwesome;}

/*mobile menu button styling*/
a.dentalHygieneMobileMenu {border:1px solid #7a7a7a; border-radius:3px; color:#7a7a7a; cursor:pointer; font-family:"Open Sans",Arial; padding:3px 10px; text-decoration:none;}
a.dentalHygieneMobileMenu:before {content:"\f0c9"; font-family:FontAwesome; position:relative; right:2px;}
a.dentalHygieneMobileMenu:hover, a.dentalHygieneMobileMenu:focus {background-color:#2d383f; border:1px solid #fff; color:#fff;}

/* image */
#dentalHygieneWrapper img {max-width:100%}

/* FOR CAROUSEL SCRIPT */
#carousel *, #carousel2 * {-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;}
#carousel ul, #carousel2 ul {margin:0 0 10px; padding:0;}
#cycle, #cycle2 {color:#000; margin:30px 0 10px;}
#cycleButtons, #cycle2Buttons {min-width:100%; text-align:center;}
#cycleButtons li, #cycle2Buttons li {background-color:#687982;border:1px solid #dddddd;/* border-radius:5px; */color:#fff;cursor:pointer;display:inline-block;font-family:"Open Sans",Arial;margin: 0 !important;padding: 4px 10px !important;}
#cycle li, #cycle2 li {display:none; text-align:center;}
#cycle li.selected, #cycle2 li.selected {display:block; font-family:"Open Sans",Arial;}
#cycleButtons > li:hover, #cycle2Buttons > li:hover {background-color:#50595f;}

#carousel button, #carousel2 button {background-color:#1f1f1f; border:1px solid #ddd; border-radius:5px; color:#fff; cursor:pointer; font-family:"Open Sans",Arial; margin:10px 0; padding:5px 10px;}
#carousel button:hover, #carousel2 button:hover {background-color:#fff; color:#000;}

.activeTab {background-color:#2d383f !important; -moz-box-shadow:inset 0px 0px 2px 2px rgba(0,0,0,0.55); -webkit-box-shadow:inset 0px 0px 2px 2px rgba(0,0,0,0.55); box-shadow:inset 0px 0px 2px 2px rgba(0,0,0,0.55); font-family:"Open Sans",Arial;}
.dentalHygieneActive {background-color:rgba(255, 255, 255, 0.25);}


.dentalHygieneMobileMenu {bottom:8px; display:none; position:absolute; right:10px;}
div.titleRow {position:relative;}

@media screen and (max-width: 675px){
    ul.dentalHygieneButtonCol {display:none;}
    div.body > div.rightCol {min-width:100%;}
    .dentalHygieneMobileMenu {display:block !important;}
	ul.dentalHygieneButtonCol {max-width:50%; position:absolute; right:0; top:0; width:50%; z-index:9999;}
	ul.dentalHygieneButtonCol > .dentalHygieneButton {padding:15px 20px;}
}
@media screen and (max-width: 575px){
	#cycleButtons li, #cycle2Buttons li {margin:0 1%;}
}

@media screen and (max-width:400px){
	#dentalHygieneWrapper h3 {font-size:1.6em; padding:10px 10px; width:70%;}
}