.invisalign-case {
	padding: 0rem 0rem 1rem;
    /* margin-top: -165px; */
}

.labelBefore {
    top: unset!important;
    float: left;
    bottom: -57px;
    color: #FFF;
}
.labelAfter {
    top: 11px;
    float: right;
    color: #FFF;
}

.treatableCasesVid {
    height: calc(100vw * 0.31945)
}

.invisalign-case .box-text-head{
    background-color: #1c3c6b;
    padding: 15px 15px;
    width: 100%;
    border-bottom: 5px solid #ad8637;
}
.invisalign-case .box-text-head h4{
    font-size: 24px;
    margin: 0 0 0px 0;
    color: #fff;
    font-weight: 400;
}


.case-color {
	color: #b29041 !important;
	font-size: 18px;
	font-weight: 400;
}
a.case-color:hover,
a.case-color:focus {
	color: #052755 !important;
}


.case-color-2 {
	color: #fff !important;
	font-size: 20px;
	font-weight: 400;
    background-color: #b29041;
    padding: 15px 30px;
}
a.case-color-2:hover,
a.case-color-2:focus {
	color: #fff !important;
}


.case-content-1 {  }


.case-content-1 .case-detail {
    background-color: #f5f5f5;
    padding: 6px 12px 0px;
    border-radius: 40px;
    font-size: 22px;
    color: #0d2a73;
    font-weight: 500;
    -webkit-box-shadow: 0px 0px 18px rgb(0, 0, 0);
    -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.31);
    box-shadow: 0px 4px 0px rgb(0, 0, 0);
    margin-bottom: 30px;
}

.case-content-1  p.case {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    margin-bottom: 10px;
}




.case-content-2 {}
.case-content-2 .case-detail {
    background-color: #f5f5f5;
    padding: 6px 12px 0px;
    border-radius: 40px;
    font-size: 22px;
    color: #0d2a73;
    font-weight: 500;
    -webkit-box-shadow: 0px 0px 18px rgb(0, 0, 0);
    -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.31);
    box-shadow: 0px 4px 0px rgb(0, 0, 0);
    margin-bottom: 32px;
}

.case-content-2  p.case {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    margin-bottom: 10px;
}



.case-content-3 {}

.case-content-3 .case-detail {
    background-color: #f5f5f5;
    padding: 6px 12px 0px;
    border-radius: 40px;
    font-size: 22px;
    color: #0d2a73;
    font-weight: 500;
    -webkit-box-shadow: 0px 0px 18px rgb(0, 0, 0);
    -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.31);
    box-shadow: 0px 4px 0px rgb(0, 0, 0);
    margin-bottom: 50px;
}

.case-content-3 .case-detail-2 {
    background-color: #f5f5f5;
    padding: 6px 20px 3px;
    border-radius: 40px;
    font-size: 20px;
    color: #0d2a73;
    font-weight: 400;
    -webkit-box-shadow: 0px 0px 18px rgb(0, 0, 0);
    -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.31);
    box-shadow: 0px 4px 0px rgb(0, 0, 0);
    margin-bottom: 32px;
}

.case-content-3  p.case {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    margin: 15px;
}



.case-content-4 {}

.case-content-4 .case-detail {
    background-color: #f5f5f5;
    padding: 6px 20px 0px;
    border-radius: 40px;
    font-size: 22px;
    color: #0d2a73;
    font-weight: 500;
    -webkit-box-shadow: 0px 0px 18px rgb(0, 0, 0);
    -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.31);
    box-shadow: 0px 4px 0px rgb(0, 0, 0);
    margin-bottom: 32px;
}

.case-content-4  p.case {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    margin: 15px;
}

.case-content-5 {}


.view-seventh {margin-bottom: 30px;}

.case-content-3 .view-seventh {margin-bottom: 30px;}








.box-case {
	border-bottom: 1px dashed #888;
	display: inline-flex;
	padding: 25px 0px;
}

.box-case-title h2{
	font-size: 30px;
	font-weight: 500;
	margin: 0 0 10px 0;
	color: #454545;
	text-align: center;
}
.box-case-title h3{
	font-size: 40px;
	font-weight: 500;
	margin: 0 0 10px 0;
	color: #b29041;
	text-align: center;
}

.box-case-title h4{
	font-size: 18px;
	font-weight: 300;
	margin: 0 0 15px 0;
	color: #454545;
	text-align: center;
}

.box-case-title h5{
	font-size: 22px;
	font-weight: 500;
	margin: 0 0 15px 0;
	color: #454545;
	text-align: center;
}




.box-case p{
	font-size: 16px;
	font-weight: 300;
	color: #555;
	margin-bottom: 10px;
	line-height: 20px;
}


/*------------------------------------------------------------------*/

/*@media only screen and (min-width: 1200px) {
    .col-sm-section-3:nth-child(2) {
        margin-top: 20px !important
    }
    }*/

    .demonstration {
        margin-bottom: -10px;
        max-width: none;
        color: #949695;
        font-size: 12px !important;
        line-height: 1.3;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 9;
        text-align: center;
        margin-left: auto;
        margin-right: auto
    }

    @media only screen and (min-width: 768px) and (max-width: 1199px) {
        h3 {
            font-size: 28px !important
        }
    }

    @media only screen and (max-width: 767px) {
        .doc_button {
            height: 38px !important
        }
        .demonstration {
            bottom: -20px !important
        }
        .row-hero-section .col-sm-12 h3 {
            max-width: 380px
        }
        .row.col-sm-section-4 .col-sm-12.col-sm-overbite-1 {
            margin-bottom: 75px
        }
        .col-sm-section-3 .col-sm-4 h3 {
            margin-bottom: 15px !important
        }
        .col-sm-section-3 .col-sm-8 p {
            margin-bottom: 40px !important
        }
        #video,
        #video-controls,
        #seek-bar {
            display: none
        }
        .col-sm-overbite-1 {
            padding-left: 0px !important;
            padding-right: 0px !important
        }
        #seek-bar-mob {
            position: relative;
            margin-left: auto;
            margin-right: auto;
            width: 350px;
            display: inline-block
        }
        #video-mob-controls .sliderContainer {
            width: 450px;
            margin-left: auto;
            margin-right: auto
        }
    }

    @media only screen and (min-width: 768px) {
        .moveUpContent3_c {
            margin-left: -30px !important;
            margin-right: -30px !important
        }
        .row-hero-section .col-sm-12 h3 {
            max-width: 580px
        }
        .row.col-sm-section-4 .col-sm-12.col-sm-overbite-1 {
            margin-bottom: 70px
        }
        .row-last-section first-child p {
            max-width: 685px !important
        }
        .row-last-section .p2 {
            max-width: 650px !important
        }
        .col-sm-section-3 .col-sm-8 p {
            margin-top: 7px !important
        }
        .treatableCasesVid {
            height: calc(100vw * 0.31945)
        }
        #seek-bar {
            position: relative;
            margin-left: auto;
            margin-right: auto;
            width: 340px;
            display: inline-block
        }
        .slider:hover {
            opacity: 1
        }
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #4CAF50;
            cursor: pointer
        }
        .slider::-moz-range-thumb {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #4CAF50;
            cursor: pointer
        }
        .sliderContainer {
            width: 450px;
            margin-left: auto;
            margin-right: auto
        }
        .sliderContainer label {
            position: relative;
            top: 3px;
            padding-left: 2px;
            padding-right: 2px
        }
        #videoMob,
        #video-mob-controls,
        #seek-bar-mob {
            display: none
        }
    }

    @media only screen and (max-width: 767px) {
        h2 {
            max-width: 75% !important
        }

        .sliderContainer label {
            position: relative;
            top: 5px
        }
    }

    @media only screen and (max-width: 320px) {
        h2 {
            max-width: 100% !important
        }
        p {
            max-width: 100% !important
        }
    }

    .italic {
        font-style: italic
    }

    @media (min-width: 992px) {
        .treatableCasesVidCtrl {
            position: absolute;
            width: 100%;
            bottom: 20px
        }
    }

    
    @media only screen and (min-width: 768px) and (max-width: 991px) {
        .treatableCasesVidCtrl {
            position: absolute;
            width: 100%;
            bottom: 20px
        }
    }

    /* @media only screen and (min-width: 992px) {
        .treatableCasesVidCtrl {
            position: absolute;
            width: 100%;
            bottom: 120px
        }
    } */

    @media only screen and (min-width: 550px) and (max-width: 767px) {
        .treatableCasesVidCtrl {
            position: absolute;
            width: 100%;
            bottom: 20px
        }
    }

    @media only screen and (max-width: 549px) {
        .treatableCasesVidCtrl {
            position: absolute;
            width: 100%;
            bottom: 20px
        }
        #seek-bar-mob {
            position: relative;
            margin-left: auto;
            margin-right: auto;
            width: 230px;
            display: inline-block
        }
        #video-mob-controls .sliderContainer {
            width: 290px;
            margin-left: auto;
            margin-right: auto;
            align-content: center
        }
        .after {
            right: 40px !important
        }
    }

    div.row.col-sm-section-4.moveUpContent3.moveUpContentVisible {
        margin-left: -30px;
        margin-right: -30px
    }

    html,
    body {
        overflow-x: hidden
    }

    .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 3px;
        border-radius: 5px;
        background: #fff;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s
    }

    .slider:hover {
        opacity: 1
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #009bd1;
        cursor: pointer;
        border: 2px solid white
    }

    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #009bd1;
        cursor: pointer;
        border: 2px solid white
    }

    body {
        background: white !important
    }

    .topShift {
        position: relative;
        background-image: url(//dv2c9ihs6hqjp.cloudfront.net/assets/lines-bg-cd6fe5ca4db854345eb6ff5e8e5e376e30233b4e14ad132276dd04feb150f2ed.jpg);
        background-repeat: repeat;
        background-size: 100%;
        transform: translateY(-450px);
        transition: all 0.4s ease-in-out;
        -webkit-animation: fadein 1s linear 1 normal forwards
    }

    .cost-ex-icons a span {
        transform: scale(0);
        transition: transform 1s linear;
        transform-origin: center center;
        transform-style: preserve-3D
    }

    .numberAnimate {
        transform: scale(0);
        transition: transform .6s linear;
        transform-origin: center center;
        transform-style: preserve-3D
    }

    .numberAnimate2 {
        transform: scale(0);
        transition: transform .6s linear;
        transform-origin: center center;
        transform-style: preserve-3D
    }

    .numberAnimate3 {
        transform: scale(0);
        transition: transform .6s linear;
        transform-origin: center center;
        transform-style: preserve-3D
    }

    .numberAnimate4 {
        transform: scale(0);
        transition: transform .6s linear;
        transform-origin: center center;
        transform-style: preserve-3D
    }

    .linkArrowAnimate {
        transform: translate(0px, 5px) scale(0) !important;
        transition: transform 1s linear;
        transform-origin: center center;
        transform-style: preserve-3D
    }

    .linkArrowVisible {
        transform: translate(0px, 5px) scale(1) !important
    }

    .cost-ex-icons-visible {
        transform: scale(1) !important
    }

    .is-showing {
        transform: translateY(0px)
    }

    .leftShift {
        position: relative;
        transform: translateX(-1000px);
        transition: all 0.5s ease-in-out;
        background-color: #EBEBEB;
        z-index: 99
    }

    .leftShift2 {
        position: relative;
        transform: translateX(-1000px);
        transition: all 0.5s ease-in-out;
        background-color: #EBEBEB;
        z-index: 99
    }

    .buttonRaise {
        opacity: 0;
        transform: translateY(100px);
        display: inline-block;
        transition: all .4s ease-in-out;
        -webkit-animation: fadein 1.5s linear 1 normal forwards
    }

    .buttonRaiseVisible {
        padding: 9px 0 !important;
        height: 43px !important
    }

    .is-showingleft {
        transform: translateX(0px)
    }

    .appearCls {
        opacity: 0;
        transform: translateX(-800px);
        transition: all 0.5s ease-in-out
    }

    .appearCls2 {
        opacity: 0;
        transform: translateX(-800px);
        transition: all 0.5s ease-in-out
    }

    .is-appear {
        opacity: 1;
        transform: translateX(0px)
    }

    .cost-ex-icons {
        z-index: 500
    }

    .costMotion4 {
        transform: translateY(3050px);
        transition: all 1.3s ease-in-out
    }

    .costMotion4_2 {
        transform: translateY(3050px);
        transition: all 1.3s ease-in-out
    }

    .costMotion4Appear {
        transform: translateY(0px)
    }

    .cost-section-4 .col-sm-12 .row.smile-system img {
        transform: scale(0);
        transition: transform 1s linear;
        transform-origin: center center;
        transform-style: preserve-3D
    }

    .cost-section-4 .col-sm-12 p {
        opacity: 0;
        transition: all 1.5s ease-in-out
    }

    .opaqeNone {
        opacity: 0;
        transform: translateY(10px);
        transition: all 1s ease-in-out
    }

    .opaqeNone2 {
        opacity: 0;
        transform: translateY(10px);
        transition: all 1s ease-in-out
    }

    .opaqeNone3 {
        opacity: 0;
        transform: translateY(10px);
        transition: all 2s ease-in-out
    }

    .opaqeNone4 {
        opacity: 0;
        transform: translateY(10px);
        transition: all 2s ease-in-out
    }

    .opaqeNone5 {
        opacity: 0;
        transform: translateY(10px);
        transition: all 2s ease-in-out
    }

    .opaqeNone6 {
        opacity: 0;
        transform: translateY(10px);
        transition: all 2s ease-in-out
    }

    .opaqeNone7 {
        opacity: 0;
        transform: translateY(10px);
        transition: all 2s ease-in-out
    }

    .opaqeleftNone {
        display: inline-block;
        opacity: 0;
        transform: translateX(-40px);
        transition: all 1.5s ease-in-out
    }

    .opaqeleftNone2 {
        display: inline-block;
        opacity: 0;
        transform: translateX(-40px);
        transition: all .8s ease-in-out
    }

    .opaqeleftNone3 {
        opacity: 0;
        transform: translateX(-60px);
        transition: all 1s ease-in-out !important
    }

    .opaqeleftNone4 {
        display: inline-block;
        opacity: 0;
        transform: translateX(-60px);
        transition: all 1s ease-in-out !important
    }

    .opaqeleftNone5 {
        display: inline-block;
        opacity: 0;
        transform: translateX(-60px);
        transition: all 1s ease-in-out !important
    }

    .opaqetextCost {
        opacity: 0;
        transform: translateX(-20px);
        transition: all .8s ease-in-out
    }

    .opaqeleftNone4 {
        opacity: 0;
        transform: translateX(-20px);
        transition: all .8s ease-in-out
    }

    .linkAnimate {
        opacity: 0;
        transform: translateX(-300px);
        position: absolute !important;
        transition: all 1.5s ease-in-out
    }

    .opaqeleftNoneVisible {
        transform: translateX(0px);
        opacity: 1
    }

    .opacityVisible {
        opacity: 1
    }

    .leftToRight {
        transform: translateX(0px)
    }

    .leftToRightAbsolute {
        transform: translateX(-220px)
    }

    .opaqeNoneVisible {
        opacity: 1;
        transform: translateY(0px)
    }

    .upFrontMotion {
        opacity: 0;
        transform: translateY(50px);
        transition: all 1.5s ease-in-out
    }

    .moveUpContent {
        opacity: 0;
        transform: translateY(20px);
        transition: all .8s ease-in-out
    }

    .moveUpContent2 {
        opacity: 0;
        transform: translateY(40px);
        transition: all .8s ease-in-out
    }

    .moveUpContent3 {
        opacity: 0;
        transform: translateY(100px);
        transition: all .5s ease-in-out
    }

    .moveUpContent4 {
        opacity: 0;
        transform: translateY(100px);
        transition: all .5s ease-in-out
    }

    .moveUpContent5 {
        opacity: 0;
        transform: translateY(100px);
        transition: all .5s ease-in-out
    }

    .moveUpContentVisible {
        opacity: 1;
        transform: translateY(0px)
    }

    .upFrontMotion2 {
        opacity: 0;
        transition: all 1.5s ease-in-out
    }

    .upFrontMotionVisible {
        opacity: 1 !important;
        transform: translateY(0px)
    }

    .alignerAnimate {
        opacity: 0;
        transform: translateY(50px);
        transition: all 1s ease-in-out
    }

    .showingalignerAnimate {
        opacity: 1;
        transform: translateY(0px);
        padding-top: 60px !important
    }

    .carousalHidden {
        transform: translateX(-900px);
        transition: all 1s ease-in-out
    }

    .carousalShow {
        transform: translateX(0px)
    }

    @-webkit-keyframes fadein {
        from {
            opacity: 0
        }
        to {
            opacity: 1
        }
    }

    @media only screen and (max-width: 330px) {
        #video-mob-controls .sliderContainer {
            width: 305px !important;
            margin-left: 26px !important;
            margin-right: auto
        }
        .treatableCasesVidCtrl {
            bottom: 15px
        }
    }

    .ieSpecific {
        display: none !important
    }

    .ieSpecificMob {
        display: none !important
    }

    @media screen and (min-width: 0 \0) {
        .ieSpecific {
            display: block !important
        }
        .ieSpecificMob {
            display: block !important
        }
        #seek-bar,
        #seek-bar-mob {
            display: none
        }
        input.ieSpecific[type=range] {
            -webkit-appearance: none;
            display: inline-block !important;
            width: 340px;
            height: 80px;
            position: relative;
            top: 13px
        }
        input#seek-bar-mob-ie[type=range] {
            -webkit-appearance: none;
            display: inline-block !important;
            height: 80px;
            position: relative;
            top: 13px
        }
        input.ieSpecific[type=range]::-webkit-slider-runnable-track {
            width: 300px;
            height: 5px;
            border: none;
            border-radius: 3px
        }
        input#seek-bar-mob-ie[type=range]::-webkit-slider-runnable-track {
            height: 5px;
            border: none;
            border-radius: 3px;
            background: #fff
        }
        input.ieSpecific[type=range]::-webkit-slider-thumb {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #4CAF50;
            cursor: pointer
        }
        input.ieSpecific[type=range]:focus {
            outline: none
        }
        input.ieSpecific[type=range]:focus::-webkit-slider-runnable-track {
            background: #fff
        }
        input.ieSpecific[type=range]::-moz-range-track {
            width: 300px;
            height: 5px;
            background: #ddd;
            border: none;
            border-radius: 3px
        }
        input.ieSpecific[type=range]::-moz-range-thumb {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #4CAF50;
            cursor: pointer
        }
        input.ieSpecific[type=range]:-moz-focusring {
            outline: 1px solid white;
            outline-offset: -1px
        }
        input.ieSpecific[type=range]::-ms-track {
            width: 340px;
            height: 5px;
            background: transparent;
            border-color: transparent;
            border-width: 6px 0;
            color: transparent
        }
        input#seek-bar-mob-ie[type=range]::-ms-track {
            height: 5px;
            background: transparent;
            border-color: transparent;
            border-width: 6px 0;
            color: transparent
        }
        input.ieSpecific[type=range]::-ms-fill-lower,
        input#seek-bar-mob-ie[type=range]::-ms-fill-lower {
            background: #fff;
            border-radius: 10px
        }
        input.ieSpecific[type=range]::-ms-fill-upper,
        input#seek-bar-mob-ies[type=range]::-ms-fill-upper {
            background: #ddd;
            border-radius: 10px
        }
        input.ieSpecific[type=range]::-ms-thumb,
        input#seek-bar-mob-ie[type=range]::-ms-thumb {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #009bd1;
            cursor: pointer;
            border: 2px solid white
        }
        input.ieSpecific[type=range]:focus::-ms-fill-lower,
        input#seek-bar-mob-ie[type=range]:focus::-ms-fill-lower {
            background: #fff
        }
        input.ieSpecific[type=range]:focus::-ms-fill-upper,
        input#seek-bar-mob-ie[type=range]:focus::-ms-fill-upper {
            background: #fff
        }
    }

    @media only screen and (min-width: 0 \0) and (max-width: 767px) {
        #seek-bar-mob-ie {
            position: relative;
            margin-left: auto;
            margin-right: auto;
            width: 350px;
            display: inline-block !important
        }
    }

    @media only screen and (min-width: 0 \0) and (max-width: 549px) {
        #seek-bar-mob-ie {
            position: relative;
            margin-left: auto;
            margin-right: auto;
            width: 210px;
            display: inline-block !important
        }
    }

    .doc_button {
        height: 43px;
        color: white !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 9px !important;
        padding-bottom: 9px !important
    }







    /*------------------------------------------------------------------*/
    @media (max-width: 1440px) {
       .case-color-2 {
        color: #FFF !important;
        font-size: 20px;
        padding: 15px 30px;
        font-weight: 400;
        background-color: #b29041;
      }
  }
  @media (max-width: 1366px) {}
  @media (max-width: 1024px) {}
  @media (max-width: 991px) {
   .box-case-title h3 {
      font-size: 28px;
      font-weight: 500;
      margin: 0 0 10px 0;
      color: #b29041;
      text-align: center;
  }
  .box-case-title h5 {
      font-size: 18px;
      font-weight: 500;
      margin: 0 0 15px 0;
      color: #454545;
      text-align: center;
  }
  .box-case-title h4 {
      font-size: 16px;
      font-weight: 300;
      margin: 0 0 15px 0;
      color: #454545;
      text-align: center;
  }
  .box-case-title h2 {
      font-size: 28px;
      font-weight: 500;
      margin: 0 0 10px 0;
      color: #454545;
      text-align: center;
  }

  .case-content-3 .case-detail-2 {
    margin-bottom: 10px;
        margin-top: 15px;
}
.case-content-3 .view-seventh {
    margin-bottom: 0px;
}


.case-content-4 .case-detail {
    margin-bottom: 20px;
}

}
@media (max-width: 768px) {
	.case-color-2 {
		color: #fff !important;
		font-size: 14px;
		font-weight: 400;
	}
}
@media (max-width: 576px) {
	.box-case-title h3 {
		font-size: 24px;
		font-weight: 500;
		margin: 0 0 10px 0;
		color: #b29041;
		text-align: center;
	}
	.box-case-title h5 {
		font-size: 17px;
		font-weight: 500;
		margin: 0 0 15px 0;
		color: #454545;
		text-align: center;
	}

	.box-case-title h2 {
		font-size: 24px;
		font-weight: 500;
		margin: 0 0 10px 0;
		color: #454545;
		text-align: center;
	}


}
@media (max-width: 480px) {
	.box-case-title h2 {
		font-size: 20px;
		font-weight: 500;
		margin: 0 0 10px 0;
		color: #454545;
		text-align: center;
	}

	.box-case-title h3 {
		font-size: 20px;
		font-weight: 500;
		margin: 0 0 10px 0;
		color: #b29041;
		text-align: center;
	}



}
@media (max-width: 425px) {




}
@media (max-width: 414px) {}
@media (max-width: 375px) {}
@media (max-width: 320px) {}