html {
    height: 100%;
}
body {
    position: relative;
    padding: 0;
    background-color: #F6F6F6;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: #555;
    height: 100%;
    width: 100%;
    background: #F6F6F6 url('../../img/main-bg.jpg') no-repeat;
    background-size: cover;
}
.walkthru {captions
    background: rgba(0, 0, 0, 0.2);
    height: 100%;
}
.modal, .modal.fade .modal-dialog {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;    
}

.hideme{display:none}
.showme{display:block}

.demo {
    padding: 10px 0px 0px 0px;
    margin: 0px auto;
    overflow: hidden;
    border-radius: 0px;
    position: relative;
}
.demo .topbar {
    padding: 12px 0px;
    color: #fff;
    border-bottom: solid 1px #202020;
    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top, #7d7e7d 0%, #606060 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #7d7e7d 0%,#606060 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #7d7e7d 0%,#606060 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#606060',GradientType=0 ); /* IE6-9 */
}
.demo .topbar:before, .demo .topbar:after {
    content: '';
    display: table;
}
.demo .topbar:after {
    clear: both;
}
.demo .captions {
    color: #fff;
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    text-align: center;
}
.demo .skip-demo {
    position: relative;
    z-index: 90;
    padding: 10px 0px;
    text-align: center;
    background: #3d3d3d; /* Old browsers */
    background: -moz-linear-gradient(top, #3d3d3d 0%, #5e5e5e 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #3d3d3d 0%,#5e5e5e 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #3d3d3d 0%,#5e5e5e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3d3d', endColorstr='#5e5e5e',GradientType=0 ); /* IE6-9 */
}
.demo .skip-demo a {
    display: inline-block;
    background: #00c73d;
    border: solid 1px #03a416;
    padding: 3px 7px;
    border-radius: 3px;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
}
.demo .overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
}
.demo .hotspot {
    position: absolute;
    z-index: 2;
}
.demo .hotspot img {
    position: absolute; 
    z-index: 0;
}
.demo .tab-content {
    padding: 0px !important;
    margin: 0px !important;
    border-radius: 0px;
    border: 0px !important;
    position: relative;
    z-index: 80;
}
.demo .modal-content {
    box-shadow: none !important;
    background: #404040;
    border-radius: 0px;
}


.demo-nav:before, .demo-nav:after  {
    display: table;
    content: " ";
}
.demo-nav:after {
    clear: both;
}
.demo-nav {
    padding: 5px 0px 0px 0px;
    position: relative;
}
.demo-nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-align: center;
    border: 0px;
}
.demo-nav li {
    display: inline-block;
    font-size: 14px;
    color: #000;
    float: none;
    margin: 0px 0px 0px 0px;
    border-radius: 0px !important;
}
.demo-nav li a {
    display: inline-block;
    font-size: 13px;
    color: #fff !important;
    padding: 5px 10px !important;    
    background: #2494f2 !important;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    text-decoration: none;
    border: 0px !important;
    margin-right: 0px;
    font-weight: 500;
}
.demo-nav li a:hover, .demo-nav li.active a, .demo-nav li.active a:hover, .demo-nav li a:focus, .demo-nav li.active a:focus {
    background: #17365d !important;
    color: #fff !important;
    border: 0px !important;
}
.demo-nav li.active a:after {
    display: none !important;
}

#li_prev {
    position: absolute;
    left: 10px;
}

#li_next {
    position: absolute;
    right: 10px;
}
#li_prev, #li_next {
    font-size: 14px;
    color: #fff;
    display: block;
    width: 20px;
    height: 20px;
    border: solid 1px #fff;
    border-radius: 50%;
    top: 7px;
    line-height: 17px !important;
}
#li_prev i, #li_next i {
    margin-top: 0px;
    margin-left: 3px;
}
#li_prev i {
    margin-left: 5px;
}
#li_next i {
    margin-left: 7px;
}
.demo .tab-content .tab-pane {
    padding-top: 0px;
}

.demo .children {
    background: url(../../img/children.jpg) no-repeat;
    width: 100%;
    height: 475px;
    position: relative;
}
.demo .children #step1 {
    left: 145px;
    top: 45px;
}
.demo .children #step1 img {
    left: -145px;
    top: -16px;
}
.demo .children #step2 {
    left: 145px;
    top: 325px;
}
.demo .children #step2 img{
    left: -145px;
    top: -11px;
}
.demo .children #step3 {
    right: 180px;
    top: 15px;
}
.demo .children #step3 img{
    right: -14px;
    top: -3px;
}
.demo .children #step4 {
    left: 430px;
    top: 88px;
}
.demo .children #step4 img{
    left: -295px;
    top: 12px;
}
.demo .children #step5 {
    right: 200px;
    top: 67px;
}
.demo .children #step6 {
    left: 430px;
    top: 263px;
}
.demo .children #step6 img {
    left: -230px;
    top: -7px;
}
.demo .children #step7 {
    right: 253px;
    top: 245px;
}
 .demo .children #step7 img {
    right: 10px;
    top: -70px;
}
.demo .children #step8 {
    right: 174px;
    top: 245px;
}
.demo .children #step9 {
    right: 65px;
    top: 245px;
}
.demo .children #step9 img {
    right: 4px;
    top: -200px;
}
.demo .children #step10 {
    left: 323px;
    top: 380px;
}
.demo .children #step11 {
    left: 506px;
    top: 340px;
}
.demo .children #step11 img{
    right: -417px;
    top: -6px;
}
.demo .children #step12 {
    right: 64px;
    top: 216px;
}



.popover {
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.1);
}
.modal-open .popover.right>.arrow:after {
    left: 3px;
}


.demo .childdetail {
    background: url(../../img/child-detail.jpg) no-repeat;
    width: 100%;
    height: 475px;
    position: relative;
}
.demo .childdetail #step1 {
    left: 95px;
    top: 158px;
}
.demo .childdetail #step2 {
    left: 183px;
    top: 158px;
}
.demo .childdetail #step2 img {
    left: -118px;
    top: 4px;
}
.demo .childdetail #step3 {
    left: 274px;
    top: 157px;
}
.demo .childdetail #step3 img {
    left: -210px;
    top: 5px;
}
.demo .childdetail #step4 {
    left: 367px;
    top: 157px;
}
.demo .childdetail #step4 img {
    left: -301px;
    top: 5px;
}
.demo .childdetail #step5 {
    left: 458px;
    top: 157px;
}
.demo .childdetail #step5 img {
    left: -393px;
    top: 5px;
}
.demo .childdetail #step6 {
    right: 45px;
    top: 222px;
}
.demo .childdetail #step7 {
    right: 30px;
    top: 485px;
}


.demo .attendance {
    background: url(../../img/attendance.jpg) no-repeat;
    width: 100%;
    height: 475px;
    position: relative;
}
.demo .attendance #step1 {
    left: 370px;
    top: 295px;
}
.demo .attendance #step2 {
    left: 665px;
    top: 472px;
}
.demo .attendance #step3 {
    right: 325px;
    top: 280px;
}
.demo .attendance #step3 img {
    left: -43px;
    top: 33px;
}
.demo .attendance #step4 {
    right: 237px;
    top: 280px;
}
.demo .attendance #step4 img {
    left: -140px;
    top: 34px;
}
.demo .attendance #step5 {
    right: 155px;
    top: 280px;
}
.demo .attendance #step5 img {
    left: -135px;
    top: 34px;
}
.demo .attendance #step6 {
    right: 71px;
    top: 280px;
}
.demo .attendance #step6 img {
    right: -37px;
    top: 100px;
}

.demo .programsclasses {
    background: url(../../img/programsclasses.jpg) no-repeat;
    width: 100%;
    height: 475px;
    position: relative;
}
.demo .programsclasses #step1 {
    left: 460px;
    top: 192px;
}
.demo .programsclasses #step2 {
    left: 495px;
    top: 275px;
}
.demo .programsclasses #step3 {
    left: 325px;
    top: 325px;
}
.demo .programsclasses #step4 {
    right: 109px;
    top: 135px;
}
.demo .programsclasses #step5 {
    right: 65px;
    top: 280px;
}
.demo .programsclasses #step6 {
    right: 26px;
    top: 349px;
}
.demo .programsclasses #step6 img {
    right: 3px;
    bottom: -73px;
}
.demo .programsclasses #step7 {
    right: 52px;
    top: 453px;
}
.demo .programsclasses #step8 {
    left: 297px;
    top: 418px;
}
.demo .programsclasses #step8 img {
    left: -89px;
    bottom: -10px;
}



.demo .accounting {
    background: url(../../img/accounting.jpg) no-repeat;
    width: 100%;
    height: 475px;
    position: relative;
}
.demo .accounting #step1 {
    left: 230px;
    top: 260px
}
.demo .accounting #step2 {
    right: 331px;
    top: 255px;
}
.demo .accounting #step2 img {
    right: 5px;
    top: -245px;
}
.demo .accounting #step3 {
    right: 276px;
    top: 255px;
}
.demo .accounting #step3 img {
    right: -21px;
    top: 37px;
}
.demo .accounting #step4 {
    right: 220px;
    top: 255px;
}
.demo .accounting #step4 img {
    left: -141px;
    top: 37px;
}
.demo .accounting #step5 {
    right: 75px;
    top: 255px;
}
.demo .accounting #step6 {
    left: 442px;
    top: 375px;
}
.demo .accounting #step6 img {
    left: -361px;
    top: -167px;
}


.demo .journal {
    background: url(../../img/journal.jpg) no-repeat;
    width: 100%;
    height: 475px;
    position: relative;
}
.demo .journal #step1 {
    left: 220px;
    top: 130px;
}
.demo .journal #step2 {
    left: 440px;
    top: 84px;
}
.demo .journal #step2 img {
    right: -38px;
    top: 20px;
}
.demo .journal #step3 {
    right: 85px;
    top: 68px;
}
.demo .journal #step4 {
    left: 600px;
    top: 122px;
}
.demo .journal #step4 img {
    left: -311px;
    top: 5px;
}
.demo .journal #step5 {
    left: 425px;
    top: 178px;
}
.demo .journal #step5 img {
    left: -135px;
    top: 5px;
}
.demo .journal #step6 {
    right: 90px;
    top: 265px;
}
.demo .journal #step7 {
    left: 510px;
    top: 381px;
}


.demo .photos {
    background: url(../../img/photos.jpg) no-repeat;
    width: 100%;
    height: 475px;
    position: relative;
}
.demo .photos #step1 {
    left: 264px;
    top: 95px;
}
.demo .photos #step2 {
    left: 262px;
    top: 21px;
}
.demo .photos #step3 {
    right: 350px;
    top: 362px;
}
.demo .photos #step4 {
    right: 237px;
    top: 300px;
}
.demo .photos #step5 {
    right: 64px;
    top: 30px;
}

.demo-msg {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    padding: 30px;
    text-align: center;
}


/* =========== Bulle bullets =========== */
.center-dot {
    height: 12px; 
    width: 12px; 
    background: rgba(0, 149, 255, 0.6); 
    position: absolute; 
    z-index: 5; 
    border-radius: 50%; 
    top: 0px; 
    left: 0px;
    cursor: pointer;
    font-size: 12px;
}
.help-bubble {
    display: block;
    position: absolute;
    z-index: 2;
    cursor: pointer
}
.help-bubble:hover:after {
    background-color: #0095ff
}
.help-bubble:after {
    content: "";
    background-color: #3af;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 1px;
    left: 1px
}
.help-bubble .help-bubble-outer-dot {
    margin: 1px;
    display: block;
    text-align: center;
    opacity: 1;
    background-color: rgba(0, 149, 255, 0.6);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    -webkit-animation: help-bubble-pulse 1.5s linear infinite;
    -moz-animation: help-bubble-pulse 1.5s linear infinite;
    -o-animation: help-bubble-pulse 1.5s linear infinite;
    animation: help-bubble-pulse 1.5s linear infinite
}
.help-bubble .help-bubble-inner-dot {
    background-position: absolute;
    display: block;
    text-align: center;
    opacity: 1;
    background-color: rgba(0, 149, 255, 0.6);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    -webkit-animation: help-bubble-pulse 1.5s linear infinite;
    -moz-animation: help-bubble-pulse 1.5s linear infinite;
    -o-animation: help-bubble-pulse 1.5s linear infinite;
    animation: help-bubble-pulse 1.5s linear infinite
}
.help-bubble .help-bubble-inner-dot:after {
    content: "";
    background-position: absolute;
    display: block;
    text-align: center;
    opacity: 1;
    background-color: rgba(0, 149, 255, 0.6);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    -webkit-animation: help-bubble-pulse 1.5s linear infinite;
    -moz-animation: help-bubble-pulse 1.5s linear infinite;
    -o-animation: help-bubble-pulse 1.5s linear infinite;
    animation: help-bubble-pulse 1.5s linear infinite
}


@-webkit-keyframes help-bubble-pulse {
    0% {
        transform: scale(1);
        opacity: .75
    }
    25% {
        transform: scale(1);
        opacity: .75
    }
    100% {
        transform: scale(2.5);
        opacity: 0
    }
}
@keyframes help-bubble-pulse {
    0% {
        transform: scale(1);
        opacity: .75
    }
    25% {
        transform: scale(1);
        opacity: .75
    }
    100% {
        transform: scale(2.5);
        opacity: 0
    }
}
@-moz-keyframes help-bubble-pulse {
    0% {
        transform: scale(1);
        opacity: .75
    }
    25% {
        transform: scale(1);
        opacity: .75
    }
    100% {
        transform: scale(2.5);
        opacity: 0
    }
}
@-o-keyframes help-bubble-pulse {
    0% {
        transform: scale(1);
        opacity: .75
    }
    25% {
        transform: scale(1);
        opacity: .75
    }
    100% {
        transform: scale(2.5);
        opacity: 0
    }
}


@media (min-width: 992px) {
    .modal-lg {
        width: 953px;
    }    
}

@media (max-width: 900px) {
    .walkthru {
       z-index: 9999999;
    }    
}