.border-box {
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

.content-box {
    -ms-box-sizing: content-box;
    box-sizing: content-box;
    *behavior: none
}

.examplewrapper {
    margin: 0 0 1em;
    background: #fff;
    background: -webkit-linear-gradient(top, #d9d9d9, #fff);
    background: linear-gradient(180deg, #d9d9d9 0, #fff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@startcolor', endColorstr='@endcolor', GradientType=0);
    -ms-box-sizing: border-box;
    box-sizing: border-box
}


.circle8innersmall .segment {
    transform: skewX(30deg);
    -ms-transform: skewX(30deg);
    -moz-tranform: skewX(30deg);
    -webkit-transform: skewX(30deg);
    -o-transform: skewX(30deg);
    cursor: pointer;
}

.circle8innersmall .segment .inner {
    transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    -moz-tranform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    -o-transform: skewX(-30deg)
}

.circle8innersmall .segment .inner:hover {
    transform: skewX(-30deg) scale(1.1);
    -ms-transform: skewX(-30deg) scale(1.1);
    -moz-tranform: skewX(-30deg) scale(1.1);
    -webkit-transform: skewX(-30deg) scale(1.1);
    -o-transform: skewX(-30deg) scale(1.1)
}

.circle8innersmall.nohover .segment .inner {
    cursor: default
}

.circle8innersmall.nohover .segment .inner:hover {
    transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    -moz-tranform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    -o-transform: skewX(-30deg)
}

.circle8innersmall .segment8 {
    transform: rotate(1turn);
    -ms-transform: rotate(1turn);
    -moz-tranform: rotate(1turn);
    -webkit-transform: rotate(1turn);
    -o-transform: rotate(1turn)
}

.circle8innersmall .segment7 {
    transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    -moz-tranform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    -o-transform: rotate(315deg)
}

.circle8innersmall .segment6 {
    transform: rotate(1turn);
    -ms-transform: rotate(1turn);
    -moz-tranform: rotate(1turn);
    -webkit-transform: rotate(1turn);
    -o-transform: rotate(1turn)
}

.circle8innersmall .segment5 {
    transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    -moz-tranform: rotate(300deg);
    -webkit-transform: rotate(300deg);
    -o-transform: rotate(300deg)
}

.circle8innersmall .segment4 {
    transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    -moz-tranform: rotate(240deg);
    -webkit-transform: rotate(240deg);
    -o-transform: rotate(240deg)
}

.circle8innersmall .segment3 {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-tranform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg)
}

.circle8innersmall .segment2 {
    transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -moz-tranform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg)
}

.circle8innersmall .segment1 {
    transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -moz-tranform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -o-transform: rotate(60deg)
}

.circle8innersmall:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: #fff;
    border-radius: 1000px;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

.circle8innersmall .segmentwrapper:nth-child(2n+2) .inner {
    background: gray
}

.circle8innerlarge .segment {
    transform: skewX(30deg);
    -ms-transform: skewX(30deg);
    -moz-tranform: skewX(30deg);
    -webkit-transform: skewX(30deg);
    -o-transform: skewX(30deg)
}

.circle8innerlarge .segment .inner {
    transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    -moz-tranform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    -o-transform: skewX(-30deg)
}

.circle8innerlarge .segment .inner:hover {
    transform: skewX(-30deg) scale(1.1);
    -ms-transform: skewX(-30deg) scale(1.1);
    -moz-tranform: skewX(-30deg) scale(1.1);
    -webkit-transform: skewX(-30deg) scale(1.1);
    -o-transform: skewX(-30deg) scale(1.1)
}

.circle8innerlarge.nohover .segment .inner {
    cursor: default
}

.circle8innerlarge.nohover .segment .inner:hover {
    transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    -moz-tranform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    -o-transform: skewX(-30deg)
}

.circle8innerlarge .segment8 {
    transform: rotate(1turn);
    -ms-transform: rotate(1turn);
    -moz-tranform: rotate(1turn);
    -webkit-transform: rotate(1turn);
    -o-transform: rotate(1turn)
}

.circle8innerlarge .segment7 {
    transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    -moz-tranform: rotate(300deg);
    -webkit-transform: rotate(300deg);
    -o-transform: rotate(300deg)
}

.circle8innerlarge .segment6 {
    transform: rotate(1turn);
    -ms-transform: rotate(1turn);
    -moz-tranform: rotate(1turn);
    -webkit-transform: rotate(1turn);
    -o-transform: rotate(1turn)
}

.circle8innerlarge .segment5 {
    transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    -moz-tranform: rotate(300deg);
    -webkit-transform: rotate(300deg);
    -o-transform: rotate(300deg)
}

.circle8innerlarge .segment4 {
    transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    -moz-tranform: rotate(240deg);
    -webkit-transform: rotate(240deg);
    -o-transform: rotate(240deg)
}

.circle8innerlarge .segment3 {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-tranform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg)
}

.circle8innerlarge .segment2 {
    transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -moz-tranform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg)
}

.circle8innerlarge .segment1 {
    transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -moz-tranform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -o-transform: rotate(60deg)
}

.circle8innerlarge:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: #fff;
    border-radius: 1000px;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

.circle8innerlarge .segmentwrapper:nth-child(2n+2) .inner {
    background: gray
}



@-webkit-keyframes a {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-tranform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn);
        -ms-transform: rotate(1turn);
        -moz-tranform: rotate(1turn);
        -webkit-transform: rotate(1turn);
        -o-transform: rotate(1turn)
    }
}

@keyframes a {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-tranform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn);
        -ms-transform: rotate(1turn);
        -moz-tranform: rotate(1turn);
        -webkit-transform: rotate(1turn);
        -o-transform: rotate(1turn)
    }
}

@-webkit-keyframes b {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-tranform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg)
    }

    to {
        transform: rotate(-1turn);
        -ms-transform: rotate(-1turn);
        -moz-tranform: rotate(-1turn);
        -webkit-transform: rotate(-1turn);
        -o-transform: rotate(-1turn)
    }
}

@keyframes b {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-tranform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg)
    }

    to {
        transform: rotate(-1turn);
        -ms-transform: rotate(-1turn);
        -moz-tranform: rotate(-1turn);
        -webkit-transform: rotate(-1turn);
        -o-transform: rotate(-1turn)
    }
}


.squarewrapper {
    position: relative;
    /*    padding-bottom: 100%;*/
    height: 500px;

    /*    Custom*/
    display: inline-block;
    /*    float: left;*/
    width: 500px;
    /*    transform: scale(0.95);*/
    margin-bottom: 4rem;
}

.squarewrapper.display-none {
  display: none;
}

.squarewrapper .square {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: rotate(-30deg);
}

.csscircle {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border-radius: 100%;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

.segmentwrapper {
    position: absolute;
    top: 49%;
    left: 49%;
    width: 2%;
    height: 2%
}

.segmentwrapper .segment .overflow-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.segment {
    bottom: 50%;
    right: 50%;
    width: 5000%;
    height: 5000%;
    overflow: hidden;
    transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%
}

.segment,
.segment .inner {
    position: absolute;
    transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s
}

.segment .inner {
    right: -50%;
    bottom: -50%;
    width: 100%;
    height: 100%;
    background: #333;
    border-radius: 100%;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    cursor: pointer
}

#module-wrapper {
  padding: 0 2rem;
  text-align: center;
  padding-bottom: 14vh;
}

.segment p {
    color: white;
    transition: all 1s;
}

.segment1 p {
    position: absolute;
    top: 86px;
    left: 70px;
    transform: rotate(-30deg) translateX(-50%);
}

.segment1 #balance p {
    position: absolute;
    top: 90px;
    left: 25px;
    transform: rotate(-30deg);
}

.segment2 p {
    position: absolute;
    top: 100px;
    /* left: 50px; */
    left: 42px;
    transform: rotate(-90deg);
}

.segment2 p.medium-length {
  top: 100px;
  left: 24px;
}

.segment3 p {
    position: absolute;
    top: 94px;
    left: 28px;
    transform: rotate(-150deg);
}

.segment3 #play p {
    top: 98px;
    left: 58px;
}

.segment3 #routine-behavior p {
    top: 96px;
    left: 36px;
}

.segment3 #grooming p {
  top: 78px;
  left: 64px;
}

.segment4 p {
    position: absolute;
    top: 100px;
    left: 50px;
    transform: rotate(-210deg);
}

.segment5 p {
    position: absolute;
    top: 96px;
    left: 38px;
    transform: rotate(-270deg);
}

.segment5 p.medium-length {
  top: 90px;
  left: 35px;
}

.segment6 p {
    position: absolute;
    top: 102px;
    left: 32px;
    transform: rotate(-330deg);
}

.segment6 #sensory p {
  top: 106px;
  left: 36px;
}

.segment6 #motor-planning p {
  top: 94px;
  left: 38px;
}

.segment6 #late-language p {
  left: 34px;
}

.two .segment2 p {
    /* position: absolute;
    top: 100px; */
    left: 24px;
    transform: rotate(-90deg);
}


.two .segment3 p {
    position: absolute;
    top: 90px;
    left: 26px;
}

.three .segment1 p {
    position: absolute;
    top: 72px;
    left: 66px;
}

.three .segment2 p {
    position: absolute;
    top: 90px;
    left: 35px;
    transform: rotate(-90deg);
}

.three .segment3 p {
    position: absolute;
    top: 90px;
    left: 30px;
}

.segment1 .inner {
    background: #039e82 !important;
}

.segment2 .inner {
    background: #F56940 !important;
    /*
    $blue: #3131af;
$green: #039e82;
$red: #f43d59;
$yellow: #eba703;
$purple: #ac69e2;
*/
}

.segment3 .inner {
    background: #ac69e2 !important;
}

.segment4 .inner {
    background: #eba703 !important;
}

.segment5 .inner {
    background: #f43d59 !important;
}

.segment6 .inner {
    background: #3131af !important;
}

.inactive .circle8innersmall .segmentwrapper:nth-child(2n+2) .inner {
    background: grey !important;
}

.inactive .circle8innersmall .segment {
    cursor: default;
    pointer-events: none;
}

.squarewrapper {
    text-align: center;
}

.squarewrapper h1 {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0px;
    font-size: 22px;
    z-index: 30;
    width: 100%;
}

.squarewrapper img {
    height: 26px;
}

.squarewrapper img.obj {
    height: auto;
}

/* .squarewrapper.one {
    position: absolute;
    top: 0;
    left: 5%;
}

.squarewrapper.two {
    position: absolute;
    top: 0;
    left: 35.88%;
}

.squarewrapper.three {
    position: absolute;
    top: 0;
    left: 69.1%;
} */

.coming-soon {
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
}

#hand-skills .info {
    cursor: pointer;
}

.obj{
    cursor: pointer;
}

@media (max-width:1200px) {
    /* hi-res laptops and desktops */
    .squarewrapper {
        display: block;
        position: relative !important;
        left: 50% !important;
        top: 0 !important;
        transform: translateX(-50%) scale(1);
        margin-bottom: 80px;
    }
}

@media (min-width: 1200px) and (max-width:1637px) {
    /* hi-res laptops and desktops */
    .squarewrapper {
        display: inline-block;
        transform: scale(0.8);
        margin: 0 -3.5rem;
    }

    #module-wrapper {
      padding-bottom: 22vh;
    }
}

.disabled-segment {
  pointer-events: none;
}

.disabled-segment .segment4 .inner {
  background: grey !important;
}

#background-top-fade {
  position: fixed;
  top: 0
  left: 0;
  z-index: 40;
}