@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');

body {
  background: transparent !important;
}

.circle-container {
  position: relative;
  width: 65em;
  height: 65em;
  border-radius: 50%;
  padding: 0;
  list-style: none;
  margin: 0 auto;
  background: url('../images/sti_graphic_image.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.circle-container > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -3em;
  width: 6em;
  height: 6em;
  z-index:1000;
}

/* Normal State*/
.circle-container > *:nth-of-type(1) {
  -ms-transform: rotate(270deg) translate(18em) scale(.85) rotate(-270deg);
  -webkit-transform: rotate(270deg) translate(18em) scale(.85) rotate(-270deg);
          transform: rotate(270deg) translate(18em) scale(.85) rotate(-270deg);
         transition:transform .5s, width .5s, height .5s;
}
.circle-container > *:nth-of-type(2) {
  -ms-transform: rotate(315deg) translate(17em) scale(.85) rotate(-315deg);
  -webkit-transform: rotate(315deg) translate(18em) scale(.85) rotate(-315deg);
          transform: rotate(315deg) translate(18em) scale(.85) rotate(-315deg);
         transition:transform .5s, width .5s, height .5s;
}
.circle-container > *:nth-of-type(3) {
  -ms-transform: rotate(0deg) translate(18em) scale(.85) rotate(0deg);
  -webkit-transform: rotate(0deg) translate(18em) scale(.85) rotate(0deg);
          transform: rotate(0deg) translate(18em) scale(.85) rotate(0deg);
          transition:transform .5s, width .5s, height .5s;
}
.circle-container > *:nth-of-type(4) {
  -ms-transform: rotate(45deg) translate(18em) scale(.85) rotate(-45deg);
  -webkit-transform: rotate(45deg) translate(18em) scale(.85) rotate(-45deg);
          transform: rotate(45deg) translate(18em) scale(.85) rotate(-45deg);
       transition:transform .5s, width .5s, height .5s;
}
.circle-container > *:nth-of-type(5) {
  -ms-transform: rotate(90deg) translate(18em) scale(.85) rotate(-90deg);
  -webkit-transform: rotate(90deg) translate(18em) scale(.85) rotate(-90deg);
          transform: rotate(90deg) translate(18em) scale(.85) rotate(-90deg);
          transition:transform .5s, width .5s, height .5s;
}
.circle-container > *:nth-of-type(6) {
  -ms-transform: rotate(135deg) translate(18em) scale(.85) rotate(-135deg);
  -webkit-transform: rotate(135deg) translate(18em) scale(.85) rotate(-135deg);
          transform: rotate(135deg) translate(18em) scale(.85) rotate(-135deg);
         transition:transform .5s, width .5s, height .5s;
}
.circle-container > *:nth-of-type(7) {
    -ms-transform: rotate(180deg) translate(18em) scale(.85) rotate(-180deg);
  -webkit-transform: rotate(180deg) translate(18em) scale(.85) rotate(-180deg);
          transform: rotate(180deg) translate(18em) scale(.85) rotate(-180deg);
         transition:transform .5s, width .5s, height .5s;
}
.circle-container > *:nth-of-type(8) {
    -ms-transform: rotate(225deg) translate(18em) scale(.85) rotate(-225deg);
  -webkit-transform: rotate(225deg) translate(18em) scale(.85) rotate(-225deg);
          transform: rotate(225deg) translate(18em) scale(.85) rotate(-225deg);
         transition:transform .5s, width .5s, height .5s;
}

/*Hover State*/
.circle-container > *:nth-of-type(1):hover{
  transform: rotate(270deg) translate(23em) scale(.85) rotate(-270deg);
  -ms-transform: rotate(270deg) translate(23em) scale(.85) rotate(-270deg);
  -webkit-transform: rotate(270deg) translate(23em) scale(.85) rotate(-270deg);
}
.circle-container > *:nth-of-type(2):hover {
  -ms-transform: rotate(315deg) translate(23em) scale(.85) rotate(-315deg);
  -webkit-transform: rotate(315deg) translate(23em) scale(.85) rotate(-315deg);
          transform: rotate(315deg) translate(23em) scale(.85) rotate(-315deg);
}
.circle-container > *:nth-of-type(3):hover {
  -ms-transform: rotate(0deg) translate(23em) scale(.85) rotate(0deg);
  -webkit-transform: rotate(0deg) translate(23em) scale(.85) rotate(0deg);
          transform: rotate(0deg) translate(23em) scale(.85) rotate(0deg);
}
.circle-container > *:nth-of-type(4):hover {
  -ms-transform: rotate(45deg) translate(23em) scale(.85) rotate(-45deg);
  -webkit-transform: rotate(45deg) translate(23em) scale(.85) rotate(-45deg);
          transform: rotate(45deg) translate(23em) scale(.85) rotate(-45deg);
}
.circle-container > *:nth-of-type(5):hover {
  -ms-transform: rotate(90deg) translate(23em) scale(.85) rotate(-90deg);
  -webkit-transform: rotate(90deg) translate(23em) scale(.85) rotate(-90deg);
}
.circle-container > *:nth-of-type(6):hover{
  -ms-transform: rotate(135deg) translate(23em) scale(.85) rotate(-135deg);
  -webkit-transform: rotate(135deg) translate(23em) scale(.85) rotate(-135deg);
          transform: rotate(135deg) translate(23em) scale(.85) rotate(-135deg);
}
.circle-container > *:nth-of-type(7):hover {
    -ms-transform: rotate(180deg) translate(23em) scale(.85) rotate(-180deg);
  -webkit-transform: rotate(180deg) translate(23em) scale(.85) rotate(-180deg);
          transform: rotate(180deg) translate(23em) scale(.85) rotate(-180deg);
}
.circle-container > *:nth-of-type(8):hover {
    -ms-transform: rotate(225deg) translate(23em) scale(.85) rotate(-225deg);
  -webkit-transform: rotate(225deg) translate(23em) scale(.85) rotate(-225deg);
          transform: rotate(225deg) translate(23em) scale(.85) rotate(-225deg);
}

.chlamydia
{
     -ms-transform: translate(-140px, -185px) rotate(-90deg) scale(0.85) !important;
   -webkit-transform: translate(-140px, -185px) rotate(-90deg) scale(0.85) !important;
   transform: translate(-140px, -185px) rotate(-90deg) scale(0.85) !important;
}
.hpv {
    -ms-transform: translate(-145px, -197px) rotate(-45deg) scale(0.85) !important;
  -webkit-transform: translate(-145px, -197px) rotate(-45deg) scale(0.85) !important;
  transform: translate(-145px, -197px) rotate(-45deg) scale(0.85) !important;
}
.gonorrhea {
     -ms-transform: translate(-136px, -200px) rotate(0deg) scale(0.85) !important;
  -webkit-transform: translate(-136px, -200px) rotate(0deg) scale(0.85) !important;
          transform: translate(-136px, -200px) rotate(0deg) scale(0.85) !important;
}
.syphilis {
     -ms-transform: translate(-136px, -200px) rotate(45deg) scale(0.85) !important;
  -webkit-transform: translate(-136px, -200px) rotate(45deg) scale(0.85) !important;
          transform: translate(-136px, -200px) rotate(45deg) scale(0.85) !important;
}
.hiv {
    -ms-transform: translate(--145px, -215px) rotate(90deg) scale(0.85)!important;
 -webkit-transform: translate(-145px, -215px) rotate(90deg) scale(0.85)!important;
           transform: translate(-145px, -215px) rotate(90deg) scale(0.85)!important;
}
.hepatitis-b {
    -ms-transform: translate(-125px, -215px) rotate(135deg) scale(0.85)!important;
  -webkit-transform: translate(-125px, -215px) rotate(135deg) scale(0.85)!important;
          transform: translate(-125px, -215px) rotate(135deg) scale(0.85)!important;
}
.trichomoniasis {
    -ms-transform: translate(-110px, -200px) rotate(-180deg) scale(0.85) !important;
  -webkit-transform: translate(-110px, -200px) rotate(-180deg) scale(0.85) !important;
          transform: translate(-110px, -200px) rotate(-180deg) scale(0.85) !important;
}

#trichomoniasis {
    width: 7.5em; /*IE11 fix for max width*/
}

.genitalherpes {
    -ms-transform: translate(-136px, -200px) rotate(-135deg) scale(0.75)!important;
  -webkit-transform: translate(-136px, -200px) rotate(-135deg) scale(0.75)!important;
          transform: translate(-136px, -200px) rotate(-135deg) scale(0.75)!important;
}
.circle-container .sti-img {
  display: block;
  transition: .15s;
  -webkit-transition: .15s;
  transition: .15s;
  height: 100%;
  position: relative;
  z-index: 1000;
   -webkit-transform: scale(1.95);
   -ms-transform: scale(1.95);
  transform: scale(1.95);
}
.circle-container .sti-img-bg {
    -ms-transform: translate(-46px, -130px) scale(1.05);
    -webkit-transform: translate(-46px, -130px) scale(1.05);
    transform: translate(-46px, -130px) scale(1.05);
    position: relative;
    z-index: 900;
    display:none;
    -webkit-transition: .15s;
    transition: .15s;
}
.circle-container .sti-img:hover {
    -ms-transform: scale(1.95);
    -webkit-transform: scale(1.95);
  transform: scale(2.35);
}

#info-container {
  display: none;
}

/*@media (max-width: 991px) {
  #info-container {
    display: block;
  }
}*/

.info-text
{
    visibility:hidden;
}

.info
{
    z-index: 900;
}

#overlay-innertext
{
display: none;
position: relative;
background-color: #95dbd0;
/*border: 6px solid #ffffff;*/
left: 1px;
border-radius: 50%;
height: 35em;
width: 35em;
padding: 95px 100px 33px;
vertical-align: middle;
text-align: center;
z-index: 1000;
margin: 0 auto;
-webkit-transform: translate(0px, -292px);
-ms-transform: translate(0px, -292px);
transform: translate(-10px, -235px);
}

#overlay-innertext h2{
    /*font-family: 'Sukhumvit Set', Arial, sans-serif;*/
    font-family: 'Roboto', sans-serif;
    font-size: 44px;
    /*font-weight: bold;*/
    /* color: #fff; */
    font-weight: 200;

    margin-bottom: 20px;
}

#overlay-innertext p{
    /* color: #fff; */
    /*font-family: Arial, Helvetica, sans-serif;*/
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 100;
    line-height: 1.8;
}

#overlay
{
display: none;
position: relative;
background-color: #ffffff0;
left: 1px;
border-radius: 50%;
height: 65em;
width: 65em;
padding: 165px 100px 33px;
vertical-align: middle;
text-align: center;
z-index: 1000;
margin: 0 auto;
-webkit-transform: translate(-4px, -943px);
-ms-transform: translate(-4px, -943px);
transform: translate(-4px, -943px);
opacity: 0.75;
filter: alpha(opacity=50);
}

/* Mobile */

#mobile-container
{
      list-style: none;
      margin-top: 10px;
      max-width: 95%;
	  max-width: none;
      margin: 0;
      padding: 0;
}

.accordion-tab
{
    width: 100%;
    height: 55px;
    background-color: #F0F5F2;
    padding: 10px;
    border: 0.25px solid #DCE0DD;
}

.accordian-tab-label
{
    width: 100px;
    color: #6e6e6e;
    font-family: 'Roboto', sans-serif;
}

.accordian-tab-button
{
    float:right;
    color: #6e6e6e;
}

.mobile-info
{
    display:none;
    background-color: #FFF;
    padding: 10px;
    font-family: 'Roboto', sans-serif;
}

.mobile-img
{
    width: 36px;
    height: 36px;
    margin-right: 15px;
    background-color: white;
    padding: 5px;
    border-radius: 50%;
}

.active
{
    /*background-color: #ECDF97;*/
}