#panelSection{width: 100%; max-width: 100%; margin: 0 auto; position: relative; overflow: hidden; }
#interactiveSelection{ 
height: 1058px;
background-image: url(//www.lucentderm.com/wp-content/themes/socialdoctor/inc/interactive-face/images/interactive-main-bg.jpg);
background-position:center top;
background-repeat:no-repeat;
background-size: cover;
padding: 125px 40px 0;
position: relative;
margin: 0 auto 0 50%;
left: -720px;
width: 1440px;
}
#interactiveSelection h3 { color: #4b4b4b; }
#interactiveSelection h1 { color: #FFF; font-size: 6em; }
#interactiveSelection ul{ list-style: none inside none; background-color:rgba(25, 97, 141,0.9); padding: 30px 0; overflow: scroll; }
#interactiveSelection ul li{ line-height:2.3; }
#interactiveSelection ul li a{ display: inline-block; color: rgba(255, 255, 255, 0.6); padding: 0 30px; width: 100%;}
#interactiveSelection ul li a:hover{ background-color:rgba(255, 255, 255, 0.09) }
#interactiveSelection .woman{ height: 100%;bottom:0; left:0; right:0; margin: 0 auto; position: absolute; }
#interactiveSelection.male{ background: url(//www.lucentderm.com/wp-content/themes/socialdoctor/inc/interactive-face/images/interactive-body.jpg) no-repeat center top transparent; height:1038px; } .col-one{ width:25%; max-width: 25% !important; }
.col-two{ width:50%; max-width: 50% !important; }
.col-three{ width:25%; max-width: 25% !important; }
.selectArea ul{ max-height: 740px; z-index: 999999 !important; }
.rightSidebarWrapper ul{ max-height: 615px; } .selectArea{ max-height: 716px; }
.selectedArea{ background-color:rgba(255, 255, 255, 0.09) }
.selectedArea ul li a{ color: #FFF; }
.selectedArea ul li a:hover{ background-color:rgba(255, 255, 255, 0.09); }
.selectAreaHeading{ margin-bottom:30px; letter-spacing:1px; }
.selectAreaHeading ul li.title{ color:#FFF; margin-top:20px; }
.selectAreaHeading span{ color:#FFF; font-size:1.6em !important; text-transform: uppercase; font-weight: lighter; }
#interactiveContent{ position: relative; z-index: 9; }
#interactiveContent ul{ background-color: #186c9f; position: absolute; top: 0; }
#interactiveContent ul li a:before{ content: url(//www.lucentderm.com/wp-content/themes/socialdoctor/inc/interactive-face/images/circle-arrow.png); vertical-align: middle; padding-right: 10px; }
.rightSidebarWrapper{ box-shadow: 0 0 4px rgba(0,0,0,0.2); z-index: 999999; }
.treatmentsSidebar{ background-color:rgba(24,108,159,0.8); padding: 30px; }
.treatmentsSidebar .column-title{ font-size: 2rem; line-height: 1; color: RGB(255, 255, 255) !important;}
.treatmentsSidebar h3{ font-size: 2rem; line-height: 1; color: RGB(255, 255, 255); }
.treatmentsSidebar p{ color:#FFF !important; margin-bottom: 0;}
#face > div{ margin: 0 auto; height:100%; width: 100%; position: relative; }
.female > div, 
.male > div { position: relative; } .intCircle{ border: 3px solid rgb(255, 241, 232); background-color:rgba(127, 172, 199, 0.8); width:20px; height: 20px; border-radius: 15px; box-shadow: 0 0 1px rgba(0, 0, 0, 0,0.9); display: inline-block; position: absolute;  -webkit-transform: translateZ(0);transform: translateZ(0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: box-shadow;transition-property: box-shadow; text-align: center; line-height: 1.6; font-weight: bold; z-index: 999999999;}
.intCircle:hover,
.intCircleHover{ cursor: pointer; background-color:  rgba(43, 109, 149,0.8); } .treatmentLinks{ background-color: rgba(0, 0, 0, 0.03); display: none; } .currentTab{ background-color:rgba(25, 97, 141,0.9)!important; }
#maleFemaleTabs a.female,
#maleFemaleTabs a.male{ color:#FFF; padding: 15px 0; font-size: 2rem;line-height: 1; position: relative; overflow: hidden; background-color: #b1adab;}
#maleFemaleTabs a:hover,
#maleFemaleTabs a:active,
#maleFemaleTabs a:focus,
#maleFemaleTabs a:visited{ text-decoration: none; }
#maleFemaleTabs a.female span{ height: 284px; position: absolute; display: block; top: auto; left: 0; right: 0; bottom: -80px; width: 306px; margin: 0 auto;}
#maleFemaleTabs a.male:active,
#maleFemaleTabs a.male:focus{ outline: none; text-decoration: none; }
#maleFemaleTabs a.male span{ height: 199px; position: absolute; display: block; top: -60px; left: 0; right: 0; bottom: auto; width: 295px; margin: 0 auto;} #showInteractivePanel{ padding: 10px; width:  625px; display: block; color: #62acbd; font-size: 2em; background-color: #FFF; border: 1px solid #6FB9C9; text-align: center; position: relative; text-align: right; padding-right: 30px; margin-bottom:80px; }
#showInteractivePanel span{ background-color: #A6DBE5; position: absolute; left: 0px; height: 66px; width: 275px; bottom: 0px; }
#showInteractivePanel span img{ position: absolute; bottom: 0; left: 20px; }
#showInteractivePanel .btnProcedure {padding-right: 10px; margin-top: -4px;}
@media (min-width: 1200px) and (max-width: 1375px){
#interactiveSelection > div{ max-width: 90%; margin: 0 auto; }
}
@media (min-width: 991px) and (max-width: 1199px){
#interactiveSelection > div{ max-width: 80%; margin: 0 auto; }
}