.band,
.infoPopupHeader,
.plantName,
.titleClass,
.uItalic,
p {
    text-align: center
}
.SCoption,
.btns1,
.headerText,
b {
    font-weight: bolder
}
#startBtn,
.Clickables,
.SCfeedbackBtn:hover,
.btns,
.btns1,
.controls,
.footerBtns,
.infoPopupQues,
.progressActive,
.selectionClass {
    cursor: pointer
}
@font-face {
    font-family: "Hind Regular";
    src: local('Hind Regular'), local('Hind-Regular'), url(../fonts/Hind-Regular.ttf) format('truetype')
}
@font-face {
    font-family: "Hind Semibold";
    src: local('Hind Semibold'), local('Hind-Semibold'), url(../fonts/Hind-Semibold.ttf) format('truetype')
}
@font-face {
    font-family: "Ubuntu M";
    src: local('Ubuntu M'), local('Ubuntu-M'), url(../fonts/Ubuntu-M.ttf) format('truetype')
}
@media print {
    body * {
        visibility: hidden;
        font-family: "Hind Regular"
    }
    .Contents * {
        visibility: visible
    }
}
.back,
.front,
body {
    font-family: 'Hind Regular'
}
#wrap {
    position: absolute;
    width: 1024px;
    height: 768px;
    z-index: 0
}
#loaderScreen,
#loaderScreen1,
.contentContainer,
.loadWrapper,
body,
html {
    width: 100%;
    height: 100%
}
.sortingAnimation {
    -webkit-transition: all 1.55s linear;
    -moz-transition: all 1.55s linear;
    -ms-transition: all 1.55s linear;
    -o-transition: all 1.55s linear;
    transition: all 1.55s linear
}
.trans {
    -webkit-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -ms-transition: all .25s linear;
    -o-transition: all .25s linear;
    transition: all .25s linear
}
.slideNav.ng-leave {
    animation: silde_ani 1s linear;
    -webkit-animation: my_fade_animation .5s linear
}
@keyframes my_fade_animation {
    from {
        left: -95.9%
    }
    to {
        left: 6%
    }
}
@-webkit-keyframes my_fade_animation {
    from {
        left: -95.9%
    }
    to {
        left: 6%
    }
}
html {
    position: fixed;
    -webkit-text-size-adjust: none
}
#RMBLlogo,
#loaderScreen,
#loaderScreen1,
#startBtn,
.CCfooter,
.band,
.contentConatiner,
.contentContainer,
.loadWrapper,
.mainContainer,
.timeMachine {
    position: absolute
}
body {
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    font-size: 100%;
    overflow: hidden;
    color: #1D4263
}
.displayClass {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}
.lilist,
.textanim {
    display: none
}
.contentContainer {
    top: 0
}
#loaderScreen {
    z-index: 100;
    background-color: #fff
}
#loaderScreen1 {
    z-index: 10000;
    top: 0;
    background-color: #fff
}
.mainContainer {
    top: 0;
    left: 0;
    width: 1024px;
    height: 768px
}
.headerText {
    height: 7.7%;
    background-color: rgba(255, 255, 255, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #1D4263
}
.mainContent {
    position: absolute;
    height: 100%;
    width: 100%;
    background: url(../media/Bg-without-shadow.png) no-repeat #B3B3B3;
    background-size: cover
}
.contentConatiner {
    width: 95.704%;
    height: 88.542%;
    left: 2.149%;
    top: 5.73%;
    background: url(../media/BGblue.svg) no-repeat
}
.timeMachine {
    background-image: url(../media/timemachine.png);
    background-size: cover;
    width: 9.584%;
    height: 18.07%;
    top: 13%;
    left: 76.4%;
    z-index: 1
}
.blueBG {
    background: url(../media/BGblue.svg) no-repeat
}
.grayBG {
    background: url(../media/BGintro.svg) no-repeat
}
.band {
    font-family: "Ubuntu M";
    padding-top: 1.5%;
    font-size: 34px;
    color: #FFF;
    width: 100%;
    height: 19%;
    background-color: #1D4263;
    top: 14%
}
#startBtn {
    width: 18%;
    height: 9%;
    background-color: #F4CE62;
    top: 45%;
    left: 41%;
    border-radius: 4px;
    color: #1D4263;
    font-family: 'Hind Semibold';
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center
}
#RMBLlogo {
    width: 13%;
    height: 14%;
    top: 70%;
    left: 43.5%;
    border-radius: 6px;
    background: url(../media/RMBL-Logo.svg) no-repeat;
    background-size: contain
}
.interName {
    font-size: 29px;
    font-style: italic;
    padding-top: 1%
}
.CCfooter {
    width: 99%;
    height: 6%;
    bottom: 1.4%;
    left: .5%;
    display: inline-flex;
    justify-content: flex-end
}
.instructionClass,
.videoPlaceholder {
    justify-content: center;
    display: flex
}
.footerBtns {
    height: 31px;
    width: 31px;
    display: block;
    margin-right: 10px;
    float: left;
    background-color: #fff;
    border-radius: 50%
}
.mainpageBtns {
    position: relative;
    width: 20%;
    left: -3%
}
#refreshButton {
    background: url(../media/replay-normal.svg) no-repeat;
    margin-right: 3.965%
}
#refreshButton:hover {
    background: url(../media/replayselect.svg) no-repeat
}
#audioButton {
    background: url(../media/volumenormal.svg) no-repeat;
    margin-right: 3.965%
}
#audioButton:hover {
    background: url(../media/muteselect.svg) no-repeat
}
.progessBar {
    position: absolute;
    width: 61%;
    height: 68%;
    top: 13%;
    left: 10%;
    background: url(../media/progress-bar.png) no-repeat;
    display: inline-flex;
    background-size: contain
}
#pa_2,
#pa_3,
#pa_4,
#pa_5 {
    top: 7.92%
}
.progressActive {
    position: absolute;
    width: 21px;
    height: 21px;
    background: url(../media/active-button.png)
}
#pa_1 {
    left: 19.3%
}
#pa_2 {
    left: 38.5%
}
#pa_3 {
    left: 57.8%
}
#pa_4 {
    left: 77.1%
}
#pa_5 {
    left: 96.5%
}
.active {
    display: block
}
.inactive {
    display: none
}
.screenSize {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 22px
}
.titleClass {
    font-family: "Ubuntu M";
    padding-top: 1.5%;
    font-size: 34px;
    color: #FFF
}
.instructionClass {
    position: absolute;
    height: 80%;
    width: 75%;
    top: 10%;
    left: 12.5%;
    align-items: center
}
#scSubmitBtn,
.btns {
    top: 80%
}
.videoPlaceholder {
    position: relative;
    width: 96%;
    height: 85%;
    align-items: center
}
#simpleChoice,
.btns,
.wrapper {
    position: absolute
}
.btns {
    height: 7.792%;
    width: 28.51%;
    background-color: transparent;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    left: 35.745%;
    border: 3px solid #fff;
    font-family: 'Hind Semibold';
    font-size: 21px
}
.btns:hover {
    background-color: #F4CE62;
    color: #1D4263
}
.data {
    padding-top: 4%;
    padding-left: 20%
}
#simpleChoice {
    width: 100%;
    height: 100%;
    font-size: 21px
}
.wrapper {
    width: 100%;
    height: 88%;
    top: 12%;
    background-color: #fff;
    z-index: 2;
    opacity: .8
}
.locationBackground {
    width: 100%;
    height: 62%
}
.locations {
    display: inline-block;
    height: 57%;
    width: 29.5%;
    background: url(../media/site-1-normal.svg) no-repeat;
    background-size: cover;
    cursor: pointer;
    font-size: 16px;
    margin-left: 2.9%
}
.btns1,
.interText {
    display: flex;
    justify-content: center
}
.btns1,
.locationPopup {
    position: absolute;
    font-size: 20px
}
#loc_1 {
    background: url(../media/site1.svg) no-repeat
}
#loc_2 {
    background: url(../media/site2.svg) no-repeat
}
#loc_3 {
    background: url(../media/site3.svg) no-repeat
}
#loc_1:hover {
    background: url(../media/site1_select.svg) no-repeat
}
#loc_2:hover {
    background: url(../media/site2_select.svg) no-repeat
}
#loc_3:hover {
    background: url(../media/site3_select.svg) no-repeat
}
.locationPopup {
    background-color: rgba(74, 104, 130, .8);
    height: 76%;
    width: 85%;
    top: 20%;
    left: 7.5%;
    border-radius: 8px;
    border: 2px solid #fff;
    color: #fff
}
.siteNum {
    padding-top: 2%;
    padding-left: 10%
}
.siteDetails {
    padding-left: 10%;
    padding-right: 4%
}
.siteImage {
    position: absolute;
    width: 32%;
    height: 56%;
    background-color: #000;
    top: 36%;
    left: 17%
}
#ChooseSite {
    left: 14%
}
.btns1 {
    width: 30.785%;
    align-items: center;
    top: 78%;
    left: 54.6075%;
    height: 13.792%;
    border-radius: 0;
    color: #1D4263;
    background-color: #fff
}
.btns1:hover {
    color: #c26c41
}
.interText {
    height: 7%;
    font-size: 18px;
    background-color: rgba(255, 255, 255, .9);
    padding: 1%;
    flex-direction: column;
    margin-top: 1%
}
#heated,
.SCfeedbackBtn {
    justify-content: center
}
.cardFlip {
    display: block;
    width: 100%;
    height: 176%;
    background-color: #E6E6E6;
    position: relative;
    border-radius: 4px;
    border: 2px solid #F4CE62
}
.SCfeedbackBtn,
.back {
    background-color: #F4CE62
}
.front {
    font-size: 17px
}
.back {
    font-size: 16.3px
}
.SCfeedbackBtn {
    display: flex;
    width: 28%;
    height: 22%;
    align-items: center;
    position: relative;
    border-radius: 6px;
    font-family: 'Hind Semibold';
    font-size: 21px;
}
.locationText,
i {
    font-family: 'Hind Regular'
}
.secondSize {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 22px;
    background-size: cover
}
i {
    font-size: 19px!important;
    color: #F4CE62!important
}
.clickBackground {
    height: 64%;
    position: relative;
    width: 90%;
    left: 5%;
    background: url(../media/Clickablebg.png);
    background-size: cover
}
#click_1,
#click_2,
#click_3,
#click_4,
#click_5,
#click_6,
#click_7 {
    position: absolute
}
.Clickables {
    height: 11%;
    width: 18.6%;
    background-color: transparent;
    transform: rotatez(85deg);
    border: 2px dashed #fff;
    color: #fff
}
#click_10,
#click_9 {
    transform: rotatez(112deg)
}
#click_1 {
    top: 35%;
    left: -4%
}
#click_2 {
    top: 29.8%;
    left: 6.3%;
    transform: rotatez(88deg)
}
#click_3 {
    top: 30%;
    left: 16.2%;
    transform: rotatez(93deg)
}
#click_4 {
    top: 33%;
    left: 26.2%;
    transform: rotatez(98deg)
}
#click_5 {
    top: 35.7%;
    left: 36%;
    transform: rotatez(101deg)
}
#click_6 {
    top: 41%;
    left: 45.2%;
    transform: rotatez(106deg)
}
#click_7 {
    top: 47%;
    left: 54.8%;
    transform: rotatez(111deg)
}
.locationText {
    display: block;
    width: 95%;
    left: 2.5%;
    position: relative;
    color: #fff;
    font-size: 21px;
    line-height: 120%
}
#click_10,
#click_8,
#click_9,
#controls:after {
    position: absolute
}
#click_8 {
    top: 54.9%;
    left: 63.5%;
    transform: rotatez(113deg)
}
#click_9 {
    top: 64%;
    left: 72%
}
#click_10 {
    top: 69.5%;
    left: 81.8%
}
.controls {
    width: 10%;
    height: 12%
}
.controlOption {
    height: 50%;
    color: #fff
}
#heated {
    background-color: #ED1C24;
    display: flex;
    align-items: center
}
#controls {
    background-color: #29ABE2;
    display: flex;
    justify-content: center;
    align-items: center
}
#controls:after {
    content: ' ';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: -3px 9px 0 0 #29abe2;
    left: 41px;
    top: 73px;
    transform: rotateZ(98deg)
}
.circleControl,
.circleHeated {
    position: absolute;
    height: 3%;
    width: 2%;
    border-radius: 50%;
    left: 87%;
    display: flex;
    text-indent: 150%
}
.circleHeated {
    background-color: #ED1C24;
    top: 70%;
    align-items: center
}
.circleControl {
    background-color: #29ABE2;
    top: 76%;
    align-items: center
}
.DNDBackground {
    height: 62%;
    width: 100%;
    background: url(../media/ground_sky_plants.png) no-repeat;
    background-size: cover
}
.LabelBackground,
.ZoneBackground {
    position: relative;
    height: 62%;
    width: 91.8%;
    left: 4.1%
}
.ZoneBackground {
    display: inline-flex;
    background: url(../media/step-4-BG.png) no-repeat
}
.heater,
.tower {
    display: none
}
.LabelBackground {
    background: url(../media/screen-25-graphic-img-ref.png) no-repeat;
    background-size: cover
}
.tower {
    position: absolute;
    background: url(../media/New/post_3-03.png);
    width: 4.4%;
    height: 28%;
    background-size: cover
}
#drop_1,
#drop_2,
#drop_3 {
    background-repeat: no-repeat;
    background-size: cover
}
#heater1,
#heater2 {
    width: 26%;
    height: 18%;
    background: url(../media/New/heater_1.png);
    position: absolute
}
#tower1 {
    top: 18.5%;
    left: 4%
}
#tower2 {
    top: 42%;
    left: 86%
}
#rope {
    position: absolute;
    width: 0;
    height: .5%;
    background-color: grey;
    transform: rotate(11.2deg);
    top: 31%;
    left: 5.9%
}
#heater1 {
    z-index: 4;
    top: 20.5%;
    left: 23%
}
#heater2 {
    top: 30%;
    left: 56%
}
#drop_1 {
    background-image: url(../media/icon_1.png)
}
#drop_2 {
    background-image: url(../media/icon_2.png)
}
#drop_3 {
    background-image: url(../media/icon_3.png)
}
.amy {
    position: absolute;
    background: url(../media/New/Amy_Walk_01.png) no-repeat;
    width: 21.5%;
    height: 58.868%;
    top: 17%;
    left: 5%;
    z-index: 2;
    background-size: cover
}
#infoText {
    top: 14%;
    position: absolute;
    display: block;
    width: 75%;
    color: #fff;
    left: 25%;
    font-family: "Hind Regular";
    font-size: 21px
}
.graphinteractivBackground {
    height: 85%;
    width: 100%
}
.selectionClass {
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}
.graphPopup,
.viewdataPopup {
    background-color: rgba(74, 104, 130, .8);
    height: 76%;
    width: 85%;
    color: #fff;
    font-size: 20px
}
.viewdataPopup {
    position: absolute;
    top: 20%;
    left: 7.5%;
    border-radius: 8px;
    border: 2px solid #fff
}
#viewDataBtn {
    position: relative;
    margin: auto;
    left: 0;
    top: 10%
}
.selectionName {
    padding-top: 2%;
    padding-left: 10%
}
.selectionDetails {
    padding-left: 12%;
    padding-right: 4%;
    padding-top: 2%
}
.graphPopup {
    position: absolute;
    top: 20%;
    left: 7.5%
}
.selection1Background {
    height: 85%;
    width: 100%
}
.selectionImage {
    top: 18%;
    height: 70%;
    width: 43%;
    background-color: #000;
    position: absolute;
    left: 55%
}
.selection1Option,
.selection2Option {
    background-color: grey;
    border: 3px solid #fff;
    position: absolute;
    margin-left: 5%
}
.selection1Option {
    width: 45%;
    top: 25%
}
#selection1opt_2 {
    top: 51%
}
.selection2Option {
    width: 40%;
    top: 20%
}
#selection2opt_2 {
    top: 38%
}
#selection2opt_3 {
    top: 56%
}
#selection2opt_4 {
    top: 74%
}
.infoPopupQues {
    position: relative;
    display: flex;
    width: 95%;
    height: 20%;
    margin-bottom: 5%;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    border: 3px solid #fff;
    font-family: 'Hind Semibold';
    font-size: 21px;
    left: 5%
}
.infoPopupQues:hover {
    background-color: #F4CE62;
    color: #1D4263
}
.informationData {
    color: #fff;
    width: 100%;
    height: 100%
}
.qesContainer {
    position: absolute;
    display: block;
    width: 69%;
    height: 54%;
    top: 38%;
    left: 25%
}
.infoPopupDesc {
    display: block;
    width: 75%;
    left: 25%;
    position: relative;
    font-family: "Hind Regular";
    font-size: 21px;
    top: -2%
}
.closeBtn,
.infoPopup,
.infoPopupUL {
    position: absolute
}
.infoPopup {
    display: flex;
    top: 13%;
    width: 73%;
    left: 25%;
    height: 76%;
    z-index: 2;
    border-radius: 6px;
    background-color: #F4CE62;
    justify-content: center
}
.infoPopupUL {
    width: 38%;
    top: 10%;
    left: 55%;
    height: 86%;
    color: #1D4263;
    font-size: 21px;
    font-family: 'Hind Regular'
}
.infoPopupUL li {
    padding-bottom: 5%
}
.closeBtn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    left: 94.5%;
    top: 2%;
    z-index: 4;
    cursor: pointer;
    background: url(../media/closenormal.svg)
}
.backflipBtn,
.frontflipBtn {
    top: 90%;
    left: 84%;
    width: 16%;
    height: 10%;
    z-index: 5;
    cursor: pointer;
    position: absolute
}
.closeBtn:hover {
    background: url(../media/closehover.svg)
}
.frontflipBtn {
    background: url(../media/flip-normal.svg) no-repeat
}
.backflipBtn {
    background: url(../media/flip-reverse.svg) no-repeat
}
.infoPopupHeader {
    width: 100%;
    display: block;
    color: #1D4263;
    padding-top: 1.5%;
    position: absolute;
    padding-left: 2%;
    font-family: 'Hind Semibold';
    font-size: 21px
}
.uItalic,
.uItalic1 {
    padding-top: 1%;
    padding-bottom: 1%
}
.infoPopupcontainer {
    position: absolute;
    background-color: #fff;
    width: 99.2%;
    display: flex;
    height: 89%;
    border-radius: 0 0 6px 6px;
    justify-content: center;
    top: 10.3%;
    left: .35%
}
.infoPopupImagePlaceholder {
    display: block;
    width: 54%;
    height: 94%;
    position: absolute;
    top: 3%;
    left: 2%;
    background-size: cover
}
.hide {
    display: none!important
}
.progressText {
    position: absolute;
    font-family: 'hind Regular';
    font-size: 12px;
    color: #fff;
    top: -76%;
    left: 19%;
    width: auto
}
#pt1 {
    top: -87%;
    left: -2.5%
}
#pt6 {
    width: 10%;
    left: 93.5%
}
#pt4 {
    left: 57.5%
}
#pt3 {
    left: 38%
}
#pt5 {
    left: 76.5%
}
.show {
    display: block
}
.Labeles,
.endpage {
    display: flex;
    justify-content: center
}
.red {
    background-color: rgba(237, 28, 36, .8)
}
.blue {
    background-color: rgba(41, 171, 226, .8)
}
.Labeles {
    width: 14%;
    height: 30%;
    position: absolute;
    align-items: center;
    cursor: pointer;
    border-radius: 50%
}
.SCoption:hover,
.simplechoiceActive {
    border: 2px dashed #fff;
    cursor: pointer
}
#Label_1 {
    left: 28.6%;
    top: 33%
}
#Label_2 {
    left: 63%;
    top: 56%
}
.Labelespopup {
    width: 38%;
    height: 62%;
    font-size: 18px;
    background-color: #fffaf0
}
#Labelpopup_2 {
    width: 38%;
    height: 29%;
    left: 60%;
    top: 22%;
    position: absolute
}
.endpage {
    padding-left: 5%;
    padding-right: 5%;
    align-items: center;
    font-size: 23px;
    height: 100%
}
#scoption_1,
#scoption_2 {
    display: flex;
    position: absolute;
    justify-content: center
}
#scoption_1 {
    top: 30%;
    left: 9%;
    width: 21%;
    height: 10%;
    align-items: center
}
#inT_1 {
    position: absolute;
    top: 105%;
    left: 11%
}
#scoption_2 {
    width: 4%;
    height: 6%;
    top: 57%;
    left: 25%;
    align-items: center
}
#scoption_3,
#scoption_4 {
    top: 30%;
    justify-content: center;
    display: flex;
    position: absolute
}
#inT_2 {
    position: absolute;
    top: 105%;
    width: 254%;
    height: 10%;
    left: -54%
}
.inactive2 {
    pointer-events: none;
    opacity: .5
}
#scoption_3 {
    width: 8%;
    height: 39%;
    left: 41%;
    align-items: center
}
#inT_3 {
    position: absolute;
    top: 101%;
    width: 112px;
    left: -14px
}
pre {
    margin: .5em
}
#scoption_4 {
    width: 37%;
    height: 48%;
    left: 60%;
    align-items: center
}
.SCoption {
    background-image: url(../media/New/grass_seamless.jpg);
    background-size: cover;
    background-color: #96B566;
    color: #fff;
    font-size: 26px
}
.SCFeedbackpopup {
    display: flex;
    width: 94.5%;
    background-color: #fff;
    height: 41%;
    position: absolute;
    left: 2.9%;
    z-index: 4;
    border: 3px solid #1D4263;
    border-radius: 9px;
    justify-content: center;
    align-items: center;
    top: 29%;
    flex-direction: column;
}
.drop {
    height: 82.58%;
    width: 15%;
    border-radius: 50%;
    margin-left: 3%;
    cursor: pointer
}
.inactive1 {
    pointer-events: none
}
.dropItems {
    width: 48%;
    height: 13%;
    display: inline-flex;
    position: absolute;
    bottom: 21.5%;
    left: 38%
}
.DNDpopup,
.zone {
    display: flex;
    justify-content: center
}
.DNDpopup {
    position: absolute;
    top: 11%;
    width: 85%;
    left: 7.5%;
    height: 72%;
    z-index: 2;
    border-radius: 6px;
    background-color: #F4CE62
}
.zone {
    height: 100%;
    width: 33.33%;
    align-items: flex-end;
    border-right: 5px dashed #fff;
    font-family: 'Hind Semibold';
    font-size: 21px;
    color: #fff;
    cursor: pointer;
    line-height: 328%
}
#Zone_3 {
    border: none
}
.cont {

}
.uItalic{
  font-size: 18px;
  position: relative;
  font-family: 'Hind Regular';
  color: #F4CE62!important;
  font-style: italic;
}
.uItalic1{
  font-size: 18px;
  position: relative;
  font-family: 'Hind Regular';
  color: #F4CE62!important;
  font-style: italic;
  left: 30%;
}
#inText,
.idealClass {
    display: flex;
    position: absolute
}
.points {
    padding-bottom: 2%;
    line-height: 122%
}
.DNDText,
.clickText {
    padding-top: 0!important;
    padding-bottom: .5%!important;
    margin: 0
}
.idealClass {
    height: 90%;
    width: 77%;
    top: 5%;
    left: 22.5%;
    justify-content: center;
    align-items: center
}
.feedbackText {
    font-family: 'hind regular';
    font-size: 21px;
    color: #1D4263
}
.clickText {
    align-items: center!important;
    background: 0 0;
    top: 2%
}
#clickableBtn {
    top: 80%
}
#inText {
    transform: rotatez(270deg);
    text-indent: 70px;
    justify-content: center;
    align-items: initial;
    left: 67%;
    top: 88%
}
.DNDText,
.ZoneText {
    align-items: center!important
}
.DNDText {
    background: 0 0;
    top: 2%
}
.LabelText,
.ZoneText {
    padding-top: 2%!important;
    padding-bottom: 1.5%!important;
    margin: 1%;
    background: 0 0;
    color: #fff;
    position: relative;
    font-family: 'Hind Regular';
    font-size: 21px
}
.ZoneText {
    line-height: 122%;
    top: 1.5%
}
.LabelText {
    align-items: center!important;
    top: 3%;
    line-height: 98%
}
.endPoints,
.scientist {
    top: 15%;
    position: absolute
}
.scientist {
    display: block;
    width: 34%;
    height: 74%;
    left: 2%;
    background: url(../media/John_Harte.jpg) no-repeat;
    background-size: cover
}
.endPoints {
    width: 60%;
    left: 40%;
    font-family: 'Hind Regular';
    font-size: 21px
}
#resetBtn {
    height: 13.792%;
    width: 39.51%;
    top: 53%;
    left: 46.745%
}
#nextBtn {
    background: url(../media/next-normal.svg) no-repeat;
    background-size: cover
}
#nextBtn:hover {
    background: url(../media/nextselect.svg) no-repeat
}
#perviouBtn {
    background: url(../media/back-normal.svg) no-repeat;
    background-size: cover
}
#perviouBtn:hover {
    background: url(../media/backselect.svg) no-repeat
}
.infoPopupLabel {
    position: absolute;
    display: flex;
    top: 0;
    width: 102%;
    left: -2%;
    height: 105%;
    z-index: 2;
    border-radius: 6px;
    background-color: #F4CE62;
    justify-content: center
}
.muteIcon {
    background: url(../media/mutenormal.svg)!important
}
.muteIcon:hover {
    background: url(../media/volumeselect.svg)!important
}
.wrapper1 {
    width: 100%;
    position: absolute;
    height: 84.5%;
    top: 15.5%;
    background-color: #fff;
    z-index: 2;
    opacity: .8
}
.clickablefeedbackBtn,
.dndfeedbackBtn {
  display: flex;
  width: 28%;
  height: 22%;
  background-color: #F4CE62;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Hind Semibold';
  bottom: 3%;
}
.SCFeedbackpopup1,
.wrapper2 {
    background-color: #fff;
    position: absolute
}
.feedbackText1 {
  font-family: 'hind regular';
  font-size: 21px;
  color: #1D4263;
  padding: 3%;
  position: relative;
}
.plantName,
.uItalic4 {
    font-family: 'Hind Regular'
}
.headerss,
.uItalic4 {
    padding-top: 1%
}
.SCFeedbackpopup1 {
    display: flex;
    width: 94.5%;
    height: 57%;
    left: 2.9%;
    z-index: 4;
    border: 3px solid #1D4263;
    border-radius: 9px;
    justify-content: center;
    align-items: center;
    top: 29%;
    flex-direction: column;
}
.wrapper2 {
  width: 100%;
  height: 121.5%;
  top: 0;
  z-index: 2;
  opacity: .8;
  left: 0;
}
.closeBtn1 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    left: 94.5%;
    top: 2%;
    z-index: 4;
    cursor: pointer;
    background: url(../media/closenormal.svg) no-repeat
}
.idealBG {
    position: relative;
    width: 96%;
    height: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain
}
.divStart,
.fliptxtClass,
.plantName {
    position: absolute
}
#back_1,
#back_2,
#back_3 {
    display: block;
    width: 96%;
    position: absolute;
    left: 3%;
    top: 2%
}
.pa_0 {
    background: url(../media/normal.png)
}
.divStart {
    top: 8px;
    left: 46px
}
.plantName {
    top: 95%;
    font-size: 18px;
    width: 100%
}
.fliptxtClass {
    width: 177%;
    height: 59%;
    left: -132%;
    font-size: 12px;
    top: 46%
}
.uItalic3 {
    font-style: italic
}
.hide1 {
    display: none
}
.uItalic4 {
  font-size: 18px;
  position: relative;
  font-style: italic;
  color: #F4CE62!important;
  padding-bottom: 1%;
  text-align: center;
}
.insert-enter {
    -webkit-transform: scale(0);
    -webkit-transition-property: all;
    -webkit-transition-timing-function: ease-out-cubic;
    -webkit-transition-duration: .4s
}
video::-webkit-media-controls {
    overflow: hidden !important;
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}
.insert-enter.insert-enter-active {
    -webkit-transform: scale(1)
}
flip-container {
    perspective: 1000px
}
.fliphover {
    transform: rotateY(180deg)
}
.back,
.flip-container,
.front {
    width: 100%;
    height: 100%;
    cursor: auto
}
.flipper {
    transition: .6s;
    transform-style: preserve-3d;
    position: relative
}
.back,
.front {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0
}
.front {
    z-index: 2;
    transform: rotateY(0)
}
.back {
    transform: rotateY(180deg)
}
@-webkit-keyframes fadeOut {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}
@keyframes fadeOut {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}
.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
.fadeIn {
    -webkit-animation-name: fadeIn
}
.spinner {
    width: 60px;
    height: 60px;
    background-color: #F4CE62;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
    position: absolute;
    top: 46%;
    left: 48%
}
@-webkit-keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}
@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0) rotateY(0);
        -webkit-transform: perspective(120px) rotateX(0) rotateY(0)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
    }
}