/* Ortho Hygiene Feature */

/*FLEX CONTAINER*/
/*container layout*/
.body {display: flex; flex-wrap: wrap; flex-direction: row;}
.body > ul.buttonCol {flex: 1 20%;background-color: #687982;}
.body > div.rightCol {flex: 1 80%;}
div.footer {min-width: 100%;}
/*button column layout*/
ul.buttonCol {display: flex;flex-direction: column;justify-content: center;align-items: stretch;align-content: stretch;padding: 0;margin: 0;list-style-type: none;}
ul.buttonCol > li {flex: 1;vertical-align: middle;align-content: center;align-items: center;display: flex;border-bottom: 1px solid #fff;padding: 10px 0 !important;cursor: pointer;margin: 0 !important;}
ul.buttonCol > li > span {flex: 1 100%;color: #fff;}

/*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;}
.hideContent {
	display: none !important;
}
.stepnumber {
	display: block;
}
.InformativeAnimation ul li span.stepnumber {
    color: #000;
}
.footer > a {font-size:0.9em; font-family:"Open Sans",Arial;}
 div.rightCol > div.contentWrapper {min-width:100%;padding:0 10px;margin:0;text-align:center;}
 div.contentWrapper p {color: #000 !important;font-family:"Open Sans",Arial;max-width:100%;padding:0;text-align:left; line-height: normal !important}
 div.contentWrapper li {font-family:Sans-Serif;}
.body {background-color:#fff; position:relative;}

/*title*/
 div.featureTitle {background-color:#2d383f;}
#dentalHygieneWrapper h2 {color:#fff; 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; position:relative;}

/*buttons*/
 ul.buttonCol {background-color:#687982;font-family:inherit;font-family:"Open Sans",Arial;list-style-type: none !important;margin: 0 !important;padding: 0 !important;}
 ul.buttonCol > .dentalHygieneButton {border-bottom:1px solid #fff;}
 ul.buttonCol > .dentalHygieneButton:hover,  ul.buttonCol > .dentalHygieneButton:focus {background-color: rgba(255, 255, 255, 0.2); cursor:pointer;}
 ul.buttonCol li span {color:#fff;margin-left: 20px !important;}
 li.dentalHygieneButton:hover,  div.dentalHygieneButton:active,  li.dentalHygieneButton:focus {background-color:rgba(255, 255, 255, 0.25); border-right:rgba(0,0,0,0); cursor:pointer;}
  li.dentalHygieneButton,  li.dentalHygieneButton > span {-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;}

/* 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 */
a.dentalHygieneMobileMenu {color:#7a7a7a; border:1px solid #7a7a7a; border-radius:3px; 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 {}

/* image */
#dentalHygieneWrapper img {max-width:100%;}
#dentalHygieneWrapper div.dentalHygieneImage > img[src="empty"] {display: none !important;}

/* 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:5px 0 0 0; padding:0;display: flex;
    justify-content: center;}
#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; color:#fff;cursor:pointer;display:inline-block;margin: 0 !important;padding: 4px 10px !important;}
#cycle li, #cycle2 li {display:none; text-align:center;}
#cycle li img, #cycle2 li img {background:#c2c2c2;}
#cycle li.selected, #cycle2 li.selected {display:block;}
#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; margin:5px 0; padding:5px 10px;}
#carousel button:hover, #carousel2 button:hover {background-color:#fff; color:#000;}

.activeTab {background-color:#2d383f !important; -webkit-box-shadow:inset 0px 0px 2px 2px rgba(0,0,0,0.55); -moz-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);}
.dentalHygieneActive {background-color:rgba(255, 255, 255, 0.25);}

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

#dentalHygieneWrapper .rightCol .contentWrapper {
	min-width: 100%;
	padding: 0 10px;
	margin: 0;
	text-align: left;
}
.commonProblemsImage {
	text-align: center;
}
.common-problems-page #dentalHygieneWrapper {
	max-width: 700px;
}
#dentalHygieneWrapper div.rightCol div.contentWrapper {
	margin: 0;
	min-height: 145px !important;
	min-width: 100%;
	padding: 0 10px;
}
.before-after-page #dentalHygieneWrapper div.footer {
  background-color: rgba(217,217,217,0.25);
  font-size: 0.7em;
  min-width: 100%;
  padding: 4px 15px;
  text-align: right;
 }
.types-of-braces-page #dentalHygieneWrapper img {
	max-width: 100%;
	display: block;
}

.before-after-page #dentalHygieneWrapper img {
     width: 100%;
}

.brushing-flossing-page .commonProblemsImage {
    text-align: left;
}

@media screen and (min-width:769px){
.dentalHygieneButtonCol {display:flex;}
}
@media screen and (max-width:768px){
     ul.buttonCol {display:none;}
     div.body > div.rightCol {min-width:100%;}
    .dentalHygieneMobileMenu {display:block !important;}
   ul.buttonCol {max-width:50%; position:absolute; right:0; top:0; width:50%; z-index:9999;}
   ul.buttonCol > .dentalHygieneButton {padding:10px 15px;}}

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