@media screen and (min-height: 810px) and (max-height: 812px) {

    .page12 .allMembers .role { 
        min-height: 16vh !important; 
    }

}

@media screen and (min-width: 300px) and (max-width: 520px) {
    .item.page12 .theOfficeBox img { 
            width: 38%;
    }
    .page3_1 .imgBgPage3_1 { 
    height: 65%;
    width: 84%;}
    .page9 #modalPopup .modal-dialog { 
    margin: 0rem auto;
}
.page7 .screenData { 
    overflow: hidden;
}
.btn3 { 
    margin-bottom: 0px;
}
.page8 .text2 ul { 
    padding-left: 15px;
} 
.page8.item .bgMobile { 
    width: 100%;
}
.page8 .topTipsAudioData .rowContainer {
    margin-bottom: 0px;
    margin: 0;
    width: 100%;
}
.page10 .text5 { 
    padding: 0 0% 0% 9%;
}

}
@media screen and (min-width: 769px)  {
	button.btn_gredi, .btn2, .btn3 { 
		width: 418px;
		height: 92px;
	}
	.btn2 img, .btn3 img {
    height: 92px;
    position: absolute;
    width: 418px;
    left: 0;
    top: 0;
}
    .page1 .screenData{
        width: 79%;
        /* margin: 0px auto; */
        transform: translate(-50%, 10px);
        left: 50%;
    }
    .page1 .screenData h2 { 
        line-height: 2.5rem;
    }
}    
@media screen and (min-width: 769px) and (max-width: 1360px) {
.page9 .popupData .PopUpContent {
    transform: translateY(-32%);max-height: 46%;

}
.modal .modal-closeBTN { 
    top: -3%;
}
.page8 .audioPlayerBg {
    padding: 5px;
}
}
@media screen and (min-width: 769px) and (max-width: 1000px) {
    
    .page8 .screenData {
    padding: 6px 14% 0 8%;
    top: 14px;
}
    .page3_1Right {
     width: 44%;
}
	
    .page10 .screenData {
     margin-top: -3%;    margin-left: 6%;
}
.page10 .text5 {
        font-size: .9em;
    margin-top: 0%;
}
.page12 .theOfficeBox h2 {
    font-size: 1rem;}
    .page11 .screenData a h2 {
    font-size: 1.2rem;
}
.page11 .screenData h2 {
    font-size: 1.8rem;
}
    .btnTrans {
    font-size: .7em;
}
    .page5 .aniSec2 .screenBg.showForDesktop {
    height: auto;
}
    .page8 .audioPlayerBg { 
    padding: 5px;
}

.page7 #transcriptModal .modal-dialog {
    max-width: 61% !important;
    top: 5%;
}

.page6 #screen6 {
    margin: 4% auto 0;}

    .page5 .theOfficeBox.box1 {
        background-position: 94% center;
        background-size: 25%;
    }
    .page5 .theOfficeBox.box2 {
        background-position: 94% center;
        background-size: 18%;    width: 100%;
    }
    .page5 .theOfficeBox.box3 {
        background-position: 94% center;
        background-size: 19%;
    }
    .page5 .theOfficeBox.box4 {
        background-position: 94% center;
        background-size: 21%;
    }
    .page5 .theOfficeBox.box5 {
        background-position: 94% center;
        background-size: 21%;margin-top: 1.2%;
    } 
    .page5 .theOfficeBox h2 { font-size: 1.4em;transform: translate(0%, 0%);float: left;}
    .page5 .theOfficeBox {
        min-height: 16vh;
    }
    .page5 .theOfficeBox.box5 {
            min-height: 16vh;
    }
    .page5 .screenData .mt60 {
    margin-top: 40px;
}
    .page5.item .screenData .honeYourSkillsBtn h2 {
    transform: translate(0%, -49%);
}
.page1 .videoBox { 
    width: 100%;
}
.transcriptBtnWrapper {
    width: 100%;
    }
.btn3 img {
    height: 62px;
}
.btnText { 
    font-size: 1rem;}
    .page3 {
    padding: 3% 3% 0;
}
.imgBg {
    width: 70%;
    background-size: 72%;
    height: 73%;
}
.page5 .aniSec2 .screenData .col-sm-3 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    margin: 1% 0%;
}
.page5 .theOfficeBox.box1 {
    background-position: 94% center;
    background-size: 30%;
}
.page5 .aniSec2 .screenBg.showForDesktop{width: 100%;}
#transcriptModal .popupData {
     margin: 0 4vh 0 8vh;
    height: 93%;
  }

  #transcriptModal .modal-dialog {
    max-width: 90% !important;}
#transcriptModal .popupData {
    padding: 0 4%;
}
.page1 .screenData, .page1 .screenBg.showForMobile {
    height: 80vh;
}


}    
@media screen and (min-width: 375px) and (max-width: 380px) {

    .page12 .allMembers .role { 
        min-height: 131px;
    }
	.page1.page .screenBg.showForMobile.aniSec2 {
     height: 73vh;
}
.page1 { 
    padding-top: 0% !important;
}
.item.page11 .theOfficeBox img {    height: 38px;}
.page.page5 .theOfficeBox { 
    height: 10.5vh;    
}
.page.page10 .screenData {
    width: 94%;
}
.page.page10 .screenData img {
    width: 14vh;
}

.item.page12 .theOfficeBox h2 {
     line-height: 26px;
	
}
.page.page5 .theOfficeBox.box1 { 
    background-size: 24%;
}
.page.page5 .theOfficeBox.box2 { 
    background-size: 19%;
}
.page.page5 .theOfficeBox.box3 { 
    background-size: 19%;
}
.page.page5 .theOfficeBox.box4 { 
    background-size: 19%;
}
.page.page5 .theOfficeBox.box5 {background-size: 20%;}

.page.page1 .videoBox {
    width: 81%;
    margin-right: 11%;
}
.page1 .transcriptBtnWrapper {
    width: 83%;
}
.page.page1 .instructionText {
    font-size: 1.5em;
    margin: 0% 0% 6%;
}

.page.page5 .screenData {
    padding: 0px 6vh 0 5vh;
}

.page.page5 .theOfficeBox h2 { 
   font-size: 1.1em;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0;
    margin: 0;
    transform: translate(-60%, -50%);
    padding-right: 10%;
    line-height: 20px;
}
.page.page5.item .screenData .honeYourSkillsBtn h2 {
    font-size: 1.1em;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0;
    margin: 0;
    transform: translate(-60%, -50%);
    padding-right: 10%;
    line-height: 20px;
}


}

@media screen and (min-width: 769px) and (max-width: 1050px) {
 .page10 p.text5 {
    font-size: 1em;line-height: 20px;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
   
    .page.page1 .screenBg.showForDesktop {
        width: 100%;
    }
    .page.page1 .videoBox {
        width: 70%;
    }
    .transcriptBtnWrapper {
    width: 70%;}
	
}
@media screen and (min-height: 1080px) {
    .btnTrans, .page2 .passion.disable { 
        padding: 1.8vh 1vh;
        margin: 12px 1.2%;
    }
    .page2 .instructionText {
        padding: 4.5vh 4vh;
    }
    .honeYourSkillsBtn.theOfficeBox.box5 {
        min-height: 15vh;
    }
    .page5.item .screenData h2 {
        margin-top: 0rem;
        font-size: 1.8Rem;
        line-height: 35px;
        transform: translate(0%, -80%);
    }
    .page5.item .screenData .honeYourSkillsBtn h2 {
    transform: translate(0%, -2%);float: left;
}
.page9 .popupHeaderImages { 
    top: -98px;
}


}

@media screen and (min-width: 1440px),
screen and (min-height: 950px) {
    .page1 #transcriptModal .screenBg.showForDesktop {
        width: 100%;
        height: auto;
    }
    .page5 .screenData {
    padding: 0px 5%;
}
    .page7 #transcriptModal .modal-closeBTN {
    top: -5%;
    right: 4%;
}
.page1 .screenBg.showForDesktop {
    width: auto;}
 
}

@media screen and (min-height: 900px) { 

    .page12 .theOfficeBox {
        min-height: 23vh;
    }
    .page12 .aniSec2 .screenBg.showForDesktop {
    height: 66vh;
    margin: 0px auto;
}


}

 

@media screen and (min-width: 1366px) and (max-width: 1380px) {
.page2 .screenBg {
    height: 73vh;
}
.page2 .instructionText { 
    padding: 1vh 4vh;
}
.page2 .passionContainer {
    margin-bottom: 0vh;
}

}    
@media screen and (min-width: 1024px) and (max-width: 1365px) {
    .page9 .centerImg {
    height: auto;width: 100%;
    opacity: 0.6;
}
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 704px !important;
    }
}

@media screen and (min-width: 768px) {
    .showForMobile {
        display: none
    }
    .showForDesktop {
        display: block
    }
	
}



@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .page1 .screenBg.showForDesktop {
        width: 84%;
    }
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) {


}

@media only screen and (min-height: 1024px) and (max-width: 1366px) {

.page1 .screenBg.showForDesktop {
    width: 100%;
}
.page1 .screenData {
    width: 100%;
}

.page9 .centerImg {
    height: 100%;    width: 100%;
}

.page9 .modal-dialog {
    max-width: 90%;
}



}
@media only screen and (max-width: 1024px) and (min-height: 1366px) {

.page1 .screenData {
     transform: translate(-52%, 10px);
 }
    .instructionText {
     margin: 0% 0% 6%;
}
.page1 #transcriptModal .modal-closeBTN {
    position: absolute;
    right: 12%;
    top: -5%;
}
.page1 .screenData, .page1 .screenBg.showForMobile {
    height: auto;
    width: 89%;
}
    .page9 .popupData img {
    height: auto;
}
.page9 .modal .modal-closeBTN {
    top: 0%;
    right: 7%;
}
.page9 .popupData .PopUpContent { 
    padding: 0px 25px;
}
.page6 #screen6 {
    margin: 0% 30% 0; 
}
.page6 #screen6 a.icon_3 {
    left: 63.5%;
    top: 35%;
}
.page6 #screen6 a.icon_0 {
    left: 0;
    top: 5%;
}
.page6 #screen6 a.icon_4 {
    left: 0%;
    top: 44.8%;
}
.page6 #screen6 a.icon_5 {
    left: 63.5%;
    top: 55.8%;
}
.page6 #screen6 a.icon_6 {
    left: 0%;
    top: 66%;
}
.page6 #screen6 a.icon_7 {
    left: 63.5%;
    top: 75.86%;
}
.page6 #screen6 a.icon_8 {
    left: 0.5%;
    top: 85.6%;
}
.btn2.backToOfficeBtn img {
    width: auto;
    margin: 0px 6px;
}
.page6 #screen6 a.icon_1 {
    left: 64.07%;
    top: 14%;
}
.page6 #screen6 a.icon_2 {
    left: 0%;
    top: 24.49%;
}
.page6 #screen6 a {
    position: absolute;
    width: 36%;
    height: 10%;
}
.page5.item .theOfficeBox.box1 { 
    background-size: 25%;
}
.page5.item .theOfficeBox.box2 { 
    background-size: 16%;
}
.page5.item .theOfficeBox.box4 { 
    background-size: 18%;
}
.page5.item .theOfficeBox.box5 { 
    background-size: 16%;
}
.page5.item .theOfficeBox.box3 { 
    background-size: 16%;
}
.page5 .theOfficeBox {
        width: 100%;margin-bottom: 30px; min-height: 155px;
}
.page5.item .screenData h2 {
    margin-top: 0rem;
    font-size: 1.8Rem;
    /* line-height: 35px; */
    transform: translate(0%, -50%);
    top: 42%;
    position: absolute;
    left: 40px;
    margin-bottom: 0;
}
.page6 #modalPopup .modal-dialog {
    max-width: 85% !important;
}
.page7 video {
    height: auto;
}
.page6.item .modal .modal-closeBTN {
    right: 9%;
    top: 1%;
}
.screenBg.showForMobile {
    height: auto;
}
.page5 .theOfficeBox.box5 {
    min-height: 155px;
}
    .page5 .btn3.showForMobile.whatNextBtn {
    margin: 0px auto;
}
    .page5 .screenBg.showForMobile {
    height: 78vh;
}
    .showForDesktop{display: none;}
.showForMobile{display: block;}

.page3 .btn3 {
    margin: 0px auto;    top: 50px;z-index: 99999;
}
.imgBg {
    width: 45%;
}
.page3 .headingBg {
    margin-top: 0%;
}

.page.page1 .videoBox {
    width: 90%;
}
.page1.item .videoBox {
    height: auto;
}
.page1.item .headingBg {
    width: 26%;
}
.headingBg { 
    padding: 2% 2% 1.5%;
}
.page1.item .videoBox {
    height: auto;
}
.page1.item #modal1 .popupData h2 { 
    padding: 0vh 4vh;
}
.page1.item #modal1 .screenBg.showForDesktop {
    width: 85%;
    height: auto;
}
.page1.item .modal .headingBg h1 {
    font-size: 1.8rem;
}
.page.page1.item .videoBox {
    width: 90%;
    height: auto;
}
.stage .page2 .screenData {
    width: 77%;
    padding: 50px;
    top: 5%;
}
.page2.item .screenData .instructionText {
    font-size: 1.2em;
    margin: 0% 1%;
}
.btnTrans { 
    width: 30%; 
}

.imgBg {
    width: 45%;
    background-size: contain;
}
.page3 .aniSec1 .screenData {
     width: 100%;
    padding: 0 15vh 0 15vh;
}
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) {
    



}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

.screen12Grid{width: 46%;
    margin: 0 2%;
    float: left;}

.page1 .videoBox {
    height: 55.5vh;
    width: 87vh;
}
.MenuSection .menuTab, .MenuSection .exitTab {
    font-size: .8em;
}
.page9 .modal-dialog {
    max-width: 94% !important;
}
.page11 .theOfficeBox h2 { 
    transform: translate(0%, -20%);
}
  .page2 .passion.disable {  padding: 1vh .5vh;}
.page1 #transcriptModal .screenBg.showForDesktop {
    width: 100%;
    height: auto;
}
#transcriptModal .modal-dialog {
    max-width: 74% !important;
}
.page1 .transcriptBtnWrapper {
    width: 87vh;
}
.page1 {
     padding-top: 1vh;
  }
.btn2 img, .btn3 img {
    height: 100px;
} 
  #transcriptModal .popupData{width: auto;}
  .page1 #modal1 .popupData h2 {
     padding: 2vh;
}
.screenData h2, .page11 .screenData h2 { 
    font-size: 2.2rem;}
.btnTrans {
   font-size: .9em;
    padding: 1vh .5vh;}
.page2 .instructionText {

    padding: 0.5vh 4vh;}

.page2 .screenBg {
    height: 67vh;
}
.centerImg {
    width: 100%;
}
    .page5 .logoImgHolder img {
        width: 120px;
    }
    .page11 .screenData a h2{font-size: 1.5rem;}
    .theOfficeBox h2 {
        font-size: 1.2em;
        line-height: 27px;
        transform: translate(0%, -50%);
    }
    .page2 {
        margin-left: 0;
        margin-right: 0;
        background-repeat: no-repeat;
        /*padding-top: 5%;*/
        width: 100%;
        position: relative;
        display: grid;
    }

    .page1 .screenBg.showForDesktop {
        width: 100%;
    }
    .page3 {
        padding: 6% 1% 0;
    }
    .page4 .slice.bgColor1 {
        max-height: 37vh;
    }
    .bbcRadio1 .page5 .headingBg{width: 30%}
    .page5 {
        padding: 7% 4% 0;
    }
    .page5 .aniSec2 .screenBg.showForDesktop {
        height: auto;
        width: 100%;
}
    .page5 .screenData {
        padding: 0px 5%;
    }
    #screen6 { 
        width: 98%;
    margin: 6% auto 0;
    }
    .page6 #modalPopup .modal-dialog {
        max-width: 80% !important;
    }
    .page7 #transcriptModal .modal-dialog {
        max-width: 85% !important;
    }
    h3.titleText {
        font-size: 2.5em;
    }
    .audioPlayerBg {
        padding: 10px;
    }
    .page8 .videoBox,
    .page8 audio {
        width: 90%;
    }
    .page8 .videoBox.audioBox0{    width: 96%;}
    .page10 .screenData{ padding: 0;}
    .page11 {
        padding: 10% 1% 0 1%;
    }
    .page11 .theOfficeBox {
        min-height: 284px;
    }
    .page5 .theOfficeBox {
        min-height: 208px;
    }
    .page3_1Right { 
    width: 45%;
    margin-right: 3%;
    }
    .page5 .showForDesktop .theOfficeBox {
        min-height: 120px;
    }
    .theOfficeBox {
        min-height: 150px;
    }
    .page12 .theOfficeBox {
        min-height: 20vh;
    }
    .page12 .theOfficeBox img {
        width: 33%;
    }
    .page12 .headingBg {
        width: 35%;
    }
    .page12 .theOfficeBox h2 {
        font-size: 1.2em;width: 60%;
    }
    .page12 .aniSec2 .screenBg.showForDesktop {
        height: 84vh;
    }
.page.page1 .videoBox {
    width: 100%;height: auto;
}
.item.page2 .screenBg {
    height: 66vh;
}
.page9 .popupData .PopUpContent { 
    top: 50%;
}
.modal .modal-closeBTN {
    top: 0%;
}
.page5.item .aniSec2 .screenBg.showForDesktop {
    height: 61vh;
}
.page11 .theOfficeBox img { 
    margin-bottom: 10px;
}

}


/*iPad Landcape end*/

@media screen and (max-width: 768px) {

    .imgBgPage3_1{    background-repeat: no-repeat;
    background-size: 97%;
    height: 65%;
    width: 100%;
    bottom: 0;
    position: fixed; 
    background-position: bottom left;}
	.centerPage6 {
    width: 100%;
	}
    .page7 .textBox {
    height: 59vh;
}
    .icoHead {
    width: 18%;
    margin: 0px auto 2% auto;
}
    .page8 .screenData {
     top: 5px;
}

    .col-sm-3 {
    flex: 0 0 100%;
    max-width: 100%;
}

    .page7 .videoBox .d-flex { 
    margin-top: 10px;
}
    #transcriptModal p, #transcriptModal h5 {
        font-size: 1.3em;
    }
    .screen12Grid {
    width: 98%; 
}
    .customRow {
    height: 68vh;
    overflow: auto;
}
    .page9 #modalPopup .screenBg.showForMobile{height: 76vh;}
.theOfficeBox {
    border: 2px solid #005181;
}
    .page9 .popupHeaderText .text.tabElm {
    font-size: .9em;
}
.page1 #transcriptModal .modal-closeBTN{

    position: absolute;
    right: 6%;
    top: -7%;
}

.modal .modal-dialog {
    -webkit-transform: translate(0, -50%) !important;
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%) !important;
    top: 50% !important;
    margin: 0 auto;
}

.page8 .screenData {
    padding: 6px 4% 0 6%;
    top: 27px;
}
    .profilePicPlaceholder {
    width: 110px;
    height: 110px;
}
    .backToOfficeBtn img {
        width: 27px;
        height: 15px;
        margin: 6px 3px;
    }
    .page1 .modal-dialog {
        max-width: 98% !important;
    }
    .page1 .modal .headingBg {
        width: 75%;
        padding: 6% 2% 4%;
        font-size: 1.5rem;
    }
    .page1 .screenBg {
        width: 100%;
        margin: 0px auto;
    }
    .page1 .videoBox {
        width: 64%;
    }

    .page2 .screenData h2 {
        padding: 5px 12px 0 10px;
        margin-bottom: 10px;
        line-height: 28px;
    }

    .page2 .screenData {
        top: 4%;
    }
    .showForMobile {
        display: block
    }
    .showForDesktop {
        display: none
    }
    .screenData h2,
    .popoupData h2 {
        font-size: 1.6em;
        padding: 10px 30px;
        line-height: 37px;
    }
    .page3 .aniSec1 .screenData { 
        padding: 0 2vh 0 3vh; 
    }
    .page1 .instructionText {
        font-size: 1.5em;
        margin: 0% 0% 4%;
    }
    .instructionText {
       font-size: 1.1em;
        margin: 5% 0% 6%;
    }
    .page1 {
        margin-right: 0%;
        padding-top: 4%;
        width: 100%;
        margin-left: 0%;
    }
    .page1 .screenData {
            top: 6%;
        padding: 0 5%;
    }
    .page9 .popupData img.popupHeaderChar {
        height: 12vh;
        width: auto;
        right: -9%;
        top: -40px;
    }
    .page4 p {
        font-size: 1.1em;
    }
    .page1 .screenData,
    .page1 .screenBg.showForMobile {
        transform: translate(0%, 2%);
    }
    .page1 #transcriptModal .screenBg.showForMobile {
        height: 79vh;
    }
    .page9 .tab0.tabs img.tabCarImg {
         top: -40px;
    right: -30px;
}
    .page1 .screenBg {
        height: auto;
    }
    .page1 .modal-body .screenBg {
        padding: 0
    }
    .page1 .modal-body {
        padding: 0
    }
    .page1 .headingBg {
        width: 50%;
    padding: 5% 3% 3%;
    font-size: 1.5rem;
    }
    .page1 .modal .headingBg h1 {
        font-size: 1.1em;
        padding: 0;
    }
    .page1 #modal1 .popupData h2 {
        font-size: 1.2rem;
        padding: 1vh 2vh;
        line-height: inherit;
        margin: 0;
    }
    .btnBlank, .btnBlank:focus {  margin: 0px 0 0px;font-size: .8em;}
    .page1 .headingBg h1 {
        font-size: 1.2em;
    }
    h3.titleText {
    font-size: 2em;
    padding-top: 6vh;
    }
    .headingBg h1 {
        font-size: 1.5em;
        padding: 0;
        margin: 0;
    }
    .page1 #transcriptModal p {
        font-size: 1.3rem;
    }
    .pageContainer {
        background-image: url('../assets/img/mainBg_mobile.png');
    }
    .videoBox {
        width: 82%;
    }
    .page1 .videoBox {
        height: auto;
        /*width: 90vh;*/
    }
    .reniAdebayo .page7 .screenBg.showForMobile {
        height: 64vh;
    }
    .screenBg.showForMobile {
        top: 20%; 
    }
    .page7 .screenBg.showForMobile {
        top: 20%;
        height: 74vh;
    }
    .page1 .screenBg.showForMobile.aniSec2 {
        top: 20%; height: 80vh;
    }
    .page5.item .screenData .honeYourSkillsBtn h2 {
        transform: translate(0%, -7%);
    }
    .headingBg {
        /*  margin-top: 15%;*/
    }
    .screenData h2 {
        margin-top: 5px
    }
    .videoBox iframe {
        height: auto !important;
    }
    .modal .headingBg {
        margin-top: -15%;
    }
    .popupData h2 {
        font-size: 1.5em;
    }
    .btnTrans {
        width: 45%;
        padding: 1.5vh 1vh;
        font-size: .8em;
    }
    .page.page1 .video-wrapper .videoPlay {
        width: 30%;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }
    .aniSec2 .page2 .screenBg.showForMobile {
        top: 6%;
    }
    .page2 .screenData {
        width: 94%;
        padding-left: 4%;
        padding-right: 0%;
        margin-top: 10px;
    }
    .page2 .slice.mt60 {
        margin-top: 20px
    }
    .page2 .screenData .instructionText {
        font-size: 1.2em;
        margin: 5px 0 0 0px;
        padding: 0px 15px;
    }
    .page2 {
        margin: 0;
        width: 100%;
    }
    
    .page2 {
        padding-top: 5%;
    }
    .btn3 {
        padding: 0px;
        width: auto;
        font-size: 1.2em;
        margin-bottom: 20px;
    }
    .page3_1Right {
        float: left;
        width: 95%;
        margin-right: auto;
           margin-top: 12%;
        margin-left: 2%;

    }
    .page3 {
        background-size: 85%
    }
    .page3 .headingBg {
        width: 56%;
        padding: 35px 20px 0px 30px;
        margin-right: -18px;
        margin-top: -65px;
    }
    .page3 .btn3 {
        width: 94%;
        position: absolute;
        bottom: 0%;
        margin-bottom: 10px;
        z-index: 99;
    }
    .page3 .btnText {
        padding: 24px;
    }
    .page3 .screenData .instructionText {
        padding: 0px 8% 0 7%;
    }
    .page3 {
        padding: 10% 3% 0;
    }
    .page3 .headingBg {
        clip-path: polygon(2% 8%, 98% 3%, 100% 100%, 4% 100%);
    }
    .viewMoreBTN {
        padding: 0
    }
    .pageContainer {
        background-image: url(../assets/img/mainBg_mobile.png);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .page5 {
        padding: 38px 0% 0;
        min-height: 736px;
        height: 100%;
        position: relative;
        display: inline-block;
		width: 100%;
    }
    .page5 .theOfficeBox {
        padding: 5px 10px;
        min-height: 60px;
        width: 100%;
        margin-bottom: 10px; height: 11.5vh;
    }
    .page5 .theOfficeBox h2 {
        transform: translate(0%, 0%);
    }
    .page5 .theOfficeBox.box1 {
        background-position: 94% center;
        background-size: 28%;
    }
    .page5 .theOfficeBox.box2 {
        background-position: 94% center;
        background-size: 24%;
    }
    .page5 .theOfficeBox.box3 {
        background-position: 94% center;
        background-size: 24%;
    }
    .page5 .theOfficeBox.box4 {
        background-position: 94% center;
        background-size: 26%;
    }
    .page5 .theOfficeBox.box5 {
        background-position: 94% center;
        background-size: 22%;margin-top: 0;
    }
    .page5 .theOfficeBox.box6 {
        background-position: 94% center;
        background-size: 28%;
    }
    .MenuSection ul li:last-child {
        width: 90%;
    }
    .menuBtn.open {
        right: 1%;
    }
    .page5 .theOfficeBox h2 {
        padding-left: 0;
        text-align: left;
        width: 69%;
        padding-right: 0;
        font-size: 1.2em;
        line-height: 25px;
        float: left;
    }
    .page5 .slice.pull-right.prelative.w100per {
            width: 96%;
    margin: 0 2%;
    }
    .page5 .btn3 {
        margin: 10px auto 0;
    }
    .page5 .screenData {
        padding: 2% 10% 0 8%;
    }
    .bbc3 .page5 .theOfficeLogo {
        margin-bottom: 5px;
        width: 36px;
    }
    .page5 .row.mt60 {
        margin-top: 30px;
    }
    .page6 #modalPopup .modal-body {
        padding: 0
    }
    .page7 .screenData {
        padding: 0 10%;
    }
    .page7 .text1 {
        padding-top: 25px;
        font-size: 1.8em;
    }
    .page7 #transcriptModal p {
        font-size: 1em;
    }
    .page8 .topTipsHeading {
        padding: 10px 20px 0;
    }
    .page8 .bgColor2 p {
        font-size: 1em;
    }
    .page10 .shortText {
        padding: 0 1em;
        height: 70%;
        overflow: auto;
    }
    .page10 .detailText {
            margin: 0px 2%;
    }
    .page10 h3 {
           padding: 1em 0 1em;
        text-align: center;
    }
    .page10 .t60mobile {
        margin-top: 60px;
    }
    .page10 .detailText {
        margin-top: 1em;
    }
    .page10 .screenData {
        width: 99%;
        margin: 0;
        padding: 2%;
        max-width: 100%;
        height: 100%;
    }
    .page10 .text5 { 
    margin-top: 0%;
    font-size: 1.1em;
    padding: 0 2% 0% 6%;
    width: 88%;
    overflow: auto;
}
    .page11 {
        width: 96%;
        margin: 0 2%;
        height: 100%;
    }
    .page11 .screenData {
        top: 10%;padding: 0 5% 0 5%;
    }
    .page11 .screenBg.showForMobile {
        margin-top: 15%; height: 81vh;
    }
    .page11 .theOfficeBox {
        min-height: 210px;
        padding: 3% 2% 2% 2%;
        margin: 2% 4% 2% 2%;
        display: block;
        width: 94%;
    }
    .page11 .theOfficeBox h2 {
        text-transform: none;
        padding: 0;
        font-size: 1.2em;
        line-height: normal;
    }
    .page11 {
        padding: 0%;
    }
    .page11 .row.mt60 {
        margin-top: 0px;
    }
    .page11 .theOfficeBox img {
            height: 46px;
    margin-bottom: 3px;
    }
    .MenuSection {
        padding: 5px 1% 5% 10px;
    }
    .page11 .theOfficeBox.tab4 img {
        height: 9vh;
    }
    .page11 .theOfficeBox {
        min-height: auto;
        float: left;
        height: auto;
    }
    .page11 .tryAnotherRole {
        margin: 0px auto 0;
    }
    .page11 .screenData a.tab4 h2{padding: 0;}
    .page11 .screenData a h2 {
        margin: 0;
        padding: 0 5px 5px; 
        font-size: 1rem;
    }
    .btn3 img {
        height: 70px;
    }
    .page11 .screenData h2 { 
        padding: 10px;
        font-size: 1.4em;
        line-height: 20px;
    }
    .page12 {
        width: 100%;
        padding: 0px 0%;
    }
    .page12 .slice.pull-right {
        float: initial;
        margin-top: -55px;
    }
    .page12 .screenData {
        padding: 0px 4% 0 3%;
    }
    .page12 .theOfficeBox {
        position: relative;
        padding: 15px 10px;
    }
    .page12 .theOfficeBox img {
        transform: translate(0%, 0);
            width: 24%;
    }
    .page12 .theOfficeBox h2 {
        font-size: 1.2em;
        padding: 0;
        width: 65%;
        text-align: left;
    }
    .page12 .headingBg{padding: 3% 2% 0.5%;}
    .page12 .screenData {
        margin-top: 0px;
        padding: 0px 4% 0 3%;
        top: 30px;
    }
    .page12 .customRow {
        padding: 0 20px;
    }
    .page12 .selMemberAboutJob {
        margin: 0px 20px;
    }
    .page6 .text1.pd25_b10 {
        padding: 54px 0 10px;font-size: 1em;
    }
    .page6 .seizeTheDayHeading {
        padding: 0 15px;
    }
    .page6 #screen6 a.icon_0 {
           left: 0.5%;
    top: 5%;
    }
    .page6 #modalPopup .modal-dialog {
        max-width: 95% !important;
    }
    #screen6 {
     width: 85%;
       }
    .page6 #screen6 a {
        width: 35%;
    height: 10%;
        border-radius: 50%;
    }
    .page6 #screen6 a.icon_1 {
        left: 65.07%;
        top: 14%;
    }
    .page6 #screen6 a.icon_2 {
          left: 0.5%;
    top: 24.49%;
    }
    .page6 #screen6 a.icon_3 {
           left: 64.5%;
        top: 35%;
    }
    .page6 #screen6 a.icon_4 {
            left: 0%;
            top: 45%;
    }
    .page6 #screen6 a.icon_5 {
       left: 64.5%;
    top: 55.8%;
    }
    .page6 #screen6 a.icon_6 {
        left: 0%;
    top: 66%;
    }
    .page6 #screen6 a.icon_7 {
        left: 64.5%;
        top: 75.86%;
    }
    .page6 #screen6 a.icon_8 {
        left: 1%;
    top: 85.6%;
    }
    .page6 .popupData img {
        width: 136px;
        margin-top: -25px;
    }
    .page6 p {
        font-size: inherit;
    }
    .page7 .videoBox .video-wrapper video {
        width: 100%
    }

    .page8 .audioPlayerBg {
        padding: 8px;
    }
    .page8 .videoBox {
        width: 91%;
        float: left;
        margin: 2%;
    }
    .page9 .text1 {
        padding: 54px 0 0%;
    }
    .page9 .tabs {
        width: 110px;
        height: 110px;
    }
    .page9 .text.tabElm{font-size: 1.2em;}
    .page9 .tab0.tabs {
        width: 140px;
        height: 140px;
    }
    .page9 .tab0 {
        right: 34%;
        top: 40%;
    }
    .page6 #screen6 .screen6Stage {
        margin-top: -20px;
    }
    .backBtn {
        top: 1%
    }
    .menuBtn {
        padding-top: 10px;
        z-index: 99;
    }
    .videoBox h3 { 
    font-size: 1.2em;
        margin: 5px;
    }
    .page8 .topTipsAudioData img.imgResponsive {
        margin-bottom: 20px;
    }
    .page9 .tab0.tabs img.tabCarImg {
        width: 90px;
    }
    .page9 .tabs p {
            font-size: .8em;
        line-height: normal;
    }
    .modal-dialog-centered {
        min-height: calc(100% - 0rem);
    }
    .page9 .popupData {
        top: 15px;
        height: 88%;
    }
    .page9 .popupData .PopUpContent {
            padding: 0px 8% 0 5%;
    }
    .page9 #modalPopup .popupHeaderText {
        /*transform: translate(0%, 50%); */
        width: 96%;
    }
    .page9 .popupHeaderImages { 
    top: -6px;
}
    .page9 #modalPopup .popupHeaderText p {
        margin: 0;
    }
    .page12 .screenBg.showForMobile {
        margin-top: 25px;height: 84vh;
    }
    .page12 .allMembers .role {
        display: inline-block;
        min-height: 22vh;
        margin-bottom: 5px;
        width: 100%;
    }
    .backToOfficeBtn span {
        font-size: 1em;
    }
    .page3_1 .headingBg .tabElm_1 {
    font-size: 1.5rem;
}
    .page7 .videoBox {
        width: 90%;
        margin: 6% 5% 4% 5%;
    }
    .item.page3_1 .screenData .top18Per {
        margin: 20px;
        padding: 0 20px;
        font-size: 1.4em;
    }
    .page3_1 .btn3 {
        margin: 20px auto;
        bottom: 0px;
    }
    #modal1 .popupData {
        padding: 0px 4%;
    }
    .btn_gredi img,
    .btn2 img,
    .btn3 img {
        height: 70px;
    }
    .page3_1 .btn3 img {
    height: 73px;
    }
    .page4 .profileHeader {
    padding: 10% 1% 1%;}
    .profileHeader h3 {
     font-size: 2em;
    }
    .btn_gredi span {
        padding: 0%;
        display: block;
        font-size: 1rem;
    }
    .page6 .backToOfficeBtn span {
        font-size: 1rem;
    }
    .page7 .videoSlice {
        margin: 20px 5%;
    }
    .page7 .screenData {
            padding: 0% 7% 5% 7%;
        top: 2%;
    }
    .page8 .text1.titleText,
    .page9 .text1.titleText,
    .page10 .text1.titleText {
        font-size: 1.8rem;
    }
    .btnText {
        padding: 23px;
        font-size: 0.9em;
    }
    .page9 .tab2 {
        right: 8%;
        top: 25%;
    }
    .page9 .tab1 {
        left: 4%;
        top: 28%;
    }
    .page9 .tab3 {
        left: 4%;
        top: 70%;
    }
    .page9 .tab4 {
        right: 8%;
        top: 50%;
    }
    .page9 .tab0 {
        right: 34%;
        top: 50%;

    }
    .text5 {
        font-size: 1em;
    }
    .page10 .screenData img {
        width: 16vh;margin-top: -11vh;
    }
    .page9 .screenData { 
        padding: 2%;
    }
    .page9 .modal-dialog {
        max-width: 96% !important;
    }
    .page9 .popupData img {
        height: 21vh;
    }
    .page8 .topTipsAudioData {
        background: #075a68; padding:0;     width: 100%;
    }
    .bgMobile{margin: 0 0%;
    width: 97%;
    padding: 0 3% 0 6%;
    background: #00b4bf;}
    .page8 .screenData {
        top: 8px;       width: 92%;
    }
    .page3,
    .page3_1 {
        /*background-size: 96%;*/
    }
    .headingBg {
        background: rgba(234, 232, 51, 1);width: 69%;
    }
    .page3 .headingBg {
        background: rgba(234, 232, 51, 0.8);
        width: 56%;
        z-index: 99;
        font-size: 1.1rem;
        position: relative;
        height: auto;
        max-height: 54%;
        overflow: auto;
    }
    .page4 .slice.bgColor1 {
        max-height: fit-content; padding: 2% 5% 1%;
    }
    .btn4, .btn4:focus {
     font-size: 1em;
    }
    .selMemJobDetails {
     font-size: 1.1em;
    }
    .MenuSection ul li {
        font-size: 1em;
    }
    .bgColor2 {
        background: url(../assets/img/pageGrBgMobile.png) repeat-x 0 0; padding-bottom: 4px;
    }
    .page3 .screenData {
        overflow: auto;
        height: 75%;
        top: 3%;
        padding: 0 4vh;
    }
    .modal .modal-closeBTN {
        right: 6%;
        top: -3%;
    }
    .page6 .PopUpContent {
        height: 92%;
    }
    .page9 .modal .modal-closeBTN {
        right: 7%;
        top: 4%;
    }
    .page6 #modalPopup .screenBg.showForMobile{height: 70vh;}
    .page9 .popupData .PopUpContent {
        height: 70%;
        overflow: auto;
    }
    .item.page3_1 .screenData .top18Per {
        height: 100%;
        overflow: auto;
    }
    .MenuSection ul {
        margin: 70px 1% 5% 0px;
    }
    .MenuSection .menuBtn.open {
        right: 2%;
    }
    .MenuSection ul li {
        padding: 8px 5px;
        padding-right: 10px;
    }
    .transcriptBtn {
        width: 80%;
    }
    .vlogHeading {
        padding: 0 20px;font-size: 1em;
    }
    .page7 .videoBox .transcriptBtn {
        bottom: -20px;
    }
    .transcriptBtnWrapper {
        width: 64%;
    }
    #transcriptModal .modal-dialog,
    .page7 #transcriptModal .modal-dialog {
        max-width: 96% !important;
        margin-top: 12%;
        margin: 0 1vh;
    }
    #transcriptModal .popupData {
        top: 5%;
        padding: 0px 3vh;
        height: 92%;
        overflow: auto;
        margin: 0px 4vh;
    }
    .modal .modal-closeBTN span {
        color: #fff;
        font-size: 2.3em;
    }
    #transcriptModal .modal-closeBTN {
    position: absolute;
    right: 6%;}
    .page3,
    .page3_1 {
        background-repeat: no-repeat;
        background-size: 70%;
    }
    .page7 #transcriptModal .modal-closeBTN {
        top: -5%;
        right: 10%;
    }
    .page7 .videoBox .transcriptBtn {
        width: 80%;
        text-align: left;
    }
    .page7 #transcriptModal .popupData {
        top: 5%;
        padding: 0 0%;
        height: 90%;
        overflow: auto;
        margin: 0 7%;
        width: 80%;
    }
    .imgBg {
        width: 70%;
        background-size: 100%;
        height: 57%;
    }

    .page5 .headingBg{ width: 63%; padding: 4% 2% 2%;}


    .page5 .screenBg.showForMobile {
        top: 20%;height: 74vh;
    }

.page8 .text2.audioText0.tabElm {
    padding: 5% 10%;font-size: 1em;
}

.page8 .topTipsAudioData .rowContainer {
    margin-bottom: 0px; 
}
.page9 .text2.rolesHeading { 
    font-size: 1em;
}
.page9 .text2 {
    font-size: 1em;}

.page12 .mt-M30 {
    margin-top: -50px;
}
.page5 .screenData {
    padding: 0px 11vh 0 8vh;
}
.page10 .screenData { 
    padding: 0 0vh;}

.page11 .screenData a{margin-bottom: 0%; min-height: auto;}
}



@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .page11 .screenData a {
    margin-bottom: 20px;
}
.page1 button.btn_gredi, .btn2, .btn3 {
    width: auto;
}
.btn3.btnBottom.surpriseBtn{margin-bottom: 0;}
.btn3.gotoOfficeBtn {
    margin-bottom: 0;
}
.page8 .text2.audioText0.tabElm {
    padding: 2%;
    font-size: 1em;
}
.page3_1 .btn3 img {
    height: 96px;
}
.screenBg.showForMobile { 
    height: 30vh;
}
.page3_1 .screenData {
    top: 22%;
    height: 59%;
}
.imgBgPage3_1 {
    background-repeat: no-repeat;
    background-size: 100%;
    height: 65%;
    width: 49%;
}
    .screenData h2 {
    margin-top: 5px;
    margin-bottom: 15px;
}
    .page11 .screenData a { 
    min-height: 172px;
}
    .page2 .passionContainer {
    margin-bottom: 0vh;
}
.page10 .detailText {
       margin: 20px 0px 0;
}
.page10 .screenData { 
    height: 28%;
}
.page12 .allMembers .role { 
    min-height: 20vh;
}
.page10 .text5 {
    margin-top: 0%;
    font-size: 1em;
    padding: 0 0% 0% 6%;
    width: 97%;
}
    .page8 .videoBox {
    width: 92%;
}
.page8 .screenData {
    top: 49px;
    width: 80%;
}
.icoHead { 
    margin: 0px auto 5% auto;
}
.page8.item .bgMobile.col-md-6{
  
    padding: 0 10%;
}
    .page8 .text2.audioText0.tabElm {
       padding: 0% 50px;
    font-size: 1em;margin-top: 5%;
}
.page8 .text2 ul { 
    width: 100%;
}
.page10 .t60mobile, .page10 .detailText { 
    flex: 0 0 100%;
    max-width: 100%;
}
.page10 .t60mobile {
padding: 0 50px;
}
.page9Bg img.showForMobile.img-responsive {
    opacity: 0.5;
    height: 100vh;
    /* width: 100vh; */
    width: auto;
}
.page8 .audioPlayerBg {
    padding: 4px;
}
.bgMobile {
    margin: -1px 0% 0;
}
.page8.item .bgMobile.col-md-6, .page8.item .col-md-6.text2{
flex: 0 0 100%;
    max-width: 100%;
}
    .screen12Grid{width: 48%;
    float: left;
    margin: 0 1%;}
    .page12 .screenBg.showForMobile {
        margin-top: 25px;height: 84vh;
    }
    .page12 .theOfficeBox img { 
        width: 46%;
    }
    .page12 .theOfficeBox h2 { 
    width: 58%;
}
    .imgBg {
        width: 65%;
    }
    .page3 .screenBg.showForMobile {
        top: 20%;
        height: 33vh;
    }
    .btnBlank, .btnBlank:focus {
        margin: 12px 0 0px;
        font-size: 1.2em;
    }
    .page2 .passion.disable {
        cursor: default;
        padding: 1.5vh 1vh;
    }
    .page2 .screenBg.showForMobile {
        height: 81vh;
    }
    .transcriptBtnWrapper {
        width: 42%;
    }
    .page2 .screenData .instructionText {
        font-size: 1.2em;
        margin: 3% 1%;
    }
    .stage .page4 .slice.bgColor1 {
        max-height: 584px;
    }
    .page11 .screenBg.showForMobile {
        margin-top: 9%;
        padding:4% 2% 0; height: 76vh;
    }
    .page5 .theOfficeBox.box1 {
        background-position: 94% center;
        background-size: 30%;
    }
    .page5 .theOfficeBox.box2 {
        background-position: 94% center;
        background-size: 22%;
    }
    .page5 .theOfficeBox.box3 {
        background-position: 94% center;
        background-size: 23%;
    }
    .page5 .theOfficeBox.box4 {
        background-position: 94% center;
        background-size: 24%;
    }
    .page5 .theOfficeBox.box5 {
        background-position: 94% center;
        background-size: 21%;
    }
    .headingBg {
        background: rgba(234, 232, 51, 1);
        width: 45%;
    }
    .page5 .theOfficeBox h2 { font-size: 1.4em;}
    .page5 .theOfficeBox {
        min-height: 120px;
    }
    .page5 .theOfficeBox.box5 {
        min-height: 120px;
    }
    .page2 {
        padding: 6% 11% 0;
        display: table-cell;
    }
    .stage .page2 .screenData {
        width: 72%;
        top: 5%;
    }
    .page1 .screenData {
        width: 94%;
        margin: 0 2%;
    }
    .page1 .screenData h2 {
    padding: 1% 9% 2%;
    font-size: 2em;
    line-height: 48px;}
    .page1 .videoBox {
        height: 36vh;
    }
    .page1 .screenData, .page1 .screenBg.showForMobile{ height: 80vh;}
    .page1 #modal1 .popupData h2 {
    font-size: 1.5rem;
    padding: 8vh 4vh;
    }
    .page1 .videoBox {
        width: 90%;
    }
    .transcriptBtnWrapper {
        width: 90%;
    }
    #transcriptModal .popupData {
        padding: 0 4%;
    }
    .page1 #transcriptModal .modal-dialog {
        max-width: 72% !important;
        margin: 0px auto;
    }
    #transcriptModal .modal-closeBTN {
        right: 8%;
        top: -5%;
    }
    .page2 .screenData h2 {
        font-size: 2rem;
        line-height: 35px;margin-bottom: 0;
    }
    .page5 .aniSec2 .screenData .col-sm-3 {
        -ms-flex: 0 0 90%;
        flex: 0 0 90%;
    max-width: 90%;
    margin: 0 5%;
    }
    .stage .page5 {
        padding: 47px 13% 0 13%;
    }
    .page6 .modal-dialog {
        max-width: 76% !important;
    }
    .page6 .modal .modal-closeBTN {
        right: 7%;
        top: -1%;
    }
    .page6 .btn_gredi img {
        height: 100px;
    }
    .page10 .screenData {
        padding: 0 0vh;
        width: 100%;
        flex: 0 0 86%;
        max-width: 86%;
    }
    .backBtn{ width: 241px;}
    .page3 .btnText {
        padding: 37px;
    }
    .btnText {
        padding: 34px;
        font-size: 1.1em;
    }
    .btnText {
        padding: 34px;
        font-size: 1.1em;
    }
    .page7 #transcriptModal .modal-dialog {
        max-width: auto !important;
        margin-top: 0%;
    }
    .page7 #transcriptModal .modal-closeBTN {
        top: -4%;
        right: 10%;
    }
    #screen6 {
       width: auto; margin: 3% 13% 0;
    }
    .stage .page11 {
        width: 98%;
        margin: 0 1%;
    }
    .page10 .screenData img {
    width: 10vh;
}
    .page6 .screenBg.showForMobile {
        top: 20%;
        height: 70vh;
    }
    .stage .page11 .screenData {
        top: 13%;
    }
    .stage .page11 .screenData {
        padding: 0 10% 0 9%;
    }
    .stage .page10 .screenData {
        width: 100%;
    }
    .page1 .popupData h2 {
        font-size: 1.5em;
        padding: 0 4%;
        line-height: inherit;
    }
    .page1 .modal-dialog {
        max-width: 88% !important;
    }
    .btn_gredi img,
    .btn2 img,
    .btn3 img {
        height: 100px;
    }
    .page1 .popupData h2 {
        font-size: 1.5em;
        margin: 10% 0;
        padding: 0 4%;
        line-height: inherit;
    }
    .btn_gredi span {
            padding: 4%;
    font-size: 1.3rem;
    padding: 0% 1%;
    }
    .page1 .modal .headingBg h1 {
        font-size: 1.2em;
    }
    .page1 .modal .headingBg {
        width: 56%;
    }
    .page1 .headingBg h1 {
        font-size: 1.5em;
    }
    .page6 #screen6 a.icon_0 {
            left: 1.5%;
    top: 5%;
    }
    .page6 #screen6 a.icon_1 {
        left: 64.07%;
        top: 14.7%;
    }
    .page6 #screen6 a.icon_2 {
        left: 0.5%;
    top: 24.49%;
    }
    .page6 #screen6 a.icon_3 {
        left: 64.5%;
    top: 35%;
    }

.page6 #screen6 a.icon_4 {
   left: 0.5%;
    top: 45.8%;
}

.page6 #screen6 a.icon_5 {
        left: 64.5%;
    top: 55.8%;
}

.page6 #screen6 a.icon_6 {
    left: 0%;
    top: 66%;
}

.page6 #screen6 a.icon_7 {
    left: 64.5%;
    top: 76.86%;
}

.page6 #screen6 a.icon_8 {
    left: 0.5%;
    top: 85.6%;
}

.backToOfficeBtn span {
    margin: 4px;
}

.page9 .modal-dialog {
    max-width: 74% !important;
}

.page9 .popupHeaderImages .popupHeaderChar {
    position: absolute;
    top: -102px;
    right: -41px;
    width: 100px;
}

.page11 .theOfficeBox {
    min-height: 199px;
}

.page11 .screenData a h2 {
    transform: translate(0%, 0%);
    line-height: normal;
    font-size: 1.2rem;
}

.page11 .theOfficeBox img {
    height: 75px;
}

.page12 .allMembers .col-sm-4 {
    flex: 0 0 50%;
    max-width: 50%;
}

.page12 .theOfficeBox h2 {
    line-height: inherit;
}

.page12 .font18 {
    font-size: 2em;
}


}

@media screen and (min-width: 1600px){
    .page10 .screenData img {
     margin-top: -15vh;
}
.page3_1 {
    /* background-size: 86vh;*/
}
.page1 .screenData h2 {
     /*  font-size: 2.5rem;line-height: 3.5rem;*/
}
.page1 .screenData {
    width: 60%;
}
.page1 .screenBg.showForDesktop {
        width: 80%;
    height: 72vh;
}
}    
@media screen and (min-width: 1920px){
.page1 .screenBg.showForDesktop {
    width: auto;
    height: 75vh;
}
#transcriptModal .modal-dialog {
    max-width: 68% !important;
    top: 5%;
}
.page1 #transcriptModal .modal-closeBTN { 
    right: 1%;
    top: -6%;
}
.page1 #modal1 .modal-dialog {
    max-width: 83vh !important;
}
.page2 .instructionText {
     padding: 3.5vh 4vh;
}

.page5 { 
    padding-top: 6vh;
}
.page11 .screenData h2 {
    font-size: 3rem;
}
.page12 .theOfficeBox h2 {
    font-size: 1.5em;
    }





}

@media screen and (max-width: 995px) , screen and (max-height: 800px) {
	.page5 .aniSec2 .screenBg.showForDesktop {
    height: 67vh;
}
}
@media screen and (max-width: 995px) , screen and (max-height: 700px) {
  .page1 .screenBg.showForDesktop {
    width: auto; 
}

}

@media screen and (max-width: 1340px) , screen and (max-height: 700px) {
  .page2 .screenBg {
    height: 83vh;
}
}

@media screen and (min-height: 800px) and (max-height: 960px) { 

.page1 .screenBg.showForDesktop {
    width: 86%;
    height: 70vh;
}

.page2 .screenBg {
    height: 75vh;
}


}
@media screen and (min-width: 414px) and (max-width: 419px) { 
    .page.page1 { 
    padding-top: 0%;
}
   .page6 .backToOfficeBtn .btnText img {
    height: 16px;
    margin: 5px 7px 6px 0px;
}
.page6 .btnText {
    padding: 26px;
    }
.item.page11 .theOfficeBox img {    height: 38px;}
	.page.page5 .theOfficeBox { 
    height: 10.5vh;
}
.page1.page .screenBg.showForMobile.aniSec2 {
     height: 73vh;
}
.page.page1 .videoBox {
    width: 81%;
    margin-right: 11%;
}
.page1 .transcriptBtnWrapper {
    width: 83%;
}
.page.page1 .instructionText {
    font-size: 1.5em;
    margin: 4% 0% 6%;
}
.page1 { 
    padding-top: 0%;
}

}
@media screen and (min-width: 360px) and (max-width: 767px) { 
    .page1 .screenData h2 {
    font-size: 1.2em;
    line-height: 27px;
}
.page1 .btn_gredi img {
    height: 64px;
}

.page1 .btn_gredi.readyBTN {
    margin-top: 5px;
}

a.proScrollBtn{display: block;}

    .imgBgPage3_1 { 
    background-size: 97%;
    height: 65%;
    width: 80%;
}
.page3, .page3_1 { 
    width: 100%;
}
.page3_1 .screenBg.showForMobile{    height: 22vh;}
    .item.page12 .theOfficeBox img {
    width: 34%;
}
    .page11 .theOfficeBox {
    padding: 1% 2% 1% 2%;
}
.page11 .screenData {
    top: 16%;
    }
 .page5 .theOfficeBox.box2 { 
    background-size: 12%;
}
.page5 .theOfficeBox.box3 { 
    background-size: 12%;
}
.page5 .theOfficeBox.box4 { 
    background-size: 13%;
}
.page5 .theOfficeBox.box5 { 
    background-size: 13%;
}
.page5 .theOfficeBox.box1 { 
    background-size: 15%;
}
.page1 .videoBox, .page1 .transcriptBtnWrapper {
    width: 56%;
}
.page3 .slice.aniSec1 { 
    width: 86%;
    margin: 0px auto;
    float: none;
}
.imgBg {
     height: 80%;    background-size: 100%;
}

}


@media screen and (min-height: 320px) and (max-height: 415px) {
     .page.page1 {  
        padding-top: 0% !important;
    }
    .page1 .headingBg {
        width: 35%;
        padding: 2% 3% 1%;
        font-size: 1.2rem;
    }
    .page1 .screenData h2 {
        font-size: 1.2em;
        line-height: 26px;
        padding-bottom: 0;
    }
    .page1 .instructionText {
        font-size: 1.2em;
    }
    .page1 .instructionText { 
        margin: 0% 0% 1%;
    }
    .mt30{margin-top: 15px;}
    .page1 .screenData{
        height: 90%;
        overflow: auto;
    }
    .page1 .screenBg.showForMobile.aniSec2 { 
    height: 86vh;
}
.videoBox h3 {
    font-size: .8rem;
    }
    .page1 .headingBg h1, .page1 .modal .headingBg h1 {
    font-size: 1.1em;
}
.page .video-wrapper .videoPlayBtn .videoPlay img {
    width: 70%;
}
.modal .modal-closeBTN span { 
    font-size: 1.5em;
}
#transcriptModal p, #transcriptModal h5 {
    font-size: 1.2em;
}
.page1 #transcriptModal p {
    font-size: 1rem;
}
#transcriptModal .popupData {
    top: 5%;
    padding: 0px 10vh 0 7vh;
}
#transcriptModal .transcriptBtn {
    margin-top: 10px;
    margin-bottom: 10px;
}
.page1 #transcriptModal .modal-closeBTN { 
    top: -14%;
}
.page1 #modal1 .popupData h2 {
    font-size: 1rem;padding: 0 20px;
}
.page1 .modal .headingBg {
    width: 50%;
    padding: 5% 2% 3%;
    font-size: 1.1rem;
}

button.btn_gredi, .btn2, .btn3 { 
    width: 80%;
}
.btn_gredi img, .btn2 img, .btn3 img {
    height: 54px;
}
.btnText {
    padding: 18px;font-size: 1rem;
}
.screenData h2, .popoupData h2 {
    font-size: 1.2em;
}
.page2 .screenData .instructionText {
    font-size: 0.8em;margin: 2px 0 0 0px;
}
.page2 .screenData { 
    margin-top: 5px;
}
.page2 .passionContainer {
    margin-bottom: 0vh;
    height: 56% !important;
}
.page2 .screenData h2 { 
    margin-bottom: 0px;padding: 0px 12px 0 10px;
}
.page2 .screenBg {
    height: 74vh;
}
.page2 {
    padding-top: 2%;
}
.btnTrans, .passion:focus  { 
    border: 2px solid #005181;
}
.btn3 { 
    margin-bottom: 0px;
}
.btnBlank, .btnBlank:focus {
    margin-top: 6px;
}
.page2 .btnText {
    padding: 15px;
}
.imgBg { 
    width: 30%;
}
.page3 {
    padding: 5% 3% 0;
}
.page3 .slice.aniSec1 {
    width: 86%;
}
.page3 .headingBg {
     padding: 10px 20px 0px 30px;font-size: 1rem; width: 48%;
}
.page3 .btnText {
    padding: 22px;
    font-size: 1rem;
}
.page3 .instructionText {
    font-size: 1rem;
    }
.page4 p {
    font-size: 1rem;
}
.page4 .btn4 { 
    padding: 0;
}
.page4 .profileHeader {
    padding: 4% 1% 1%;
}
.page5 .headingBg {
    width: 28%;
    padding: 2% 2% 1%;
}
.page5 .screenData {
    padding: 0px 20% 0 20%;    height: 72%;overflow: auto;
}
.page5 .theOfficeBox.box2, .page5 .theOfficeBox.box3, .page5 .theOfficeBox.box4, .page5 .theOfficeBox.box5, .page5 .theOfficeBox.box1 {
    background-size: 9%;
}
#screen6 .showForDesktop{display: block;}
#screen6 .showForMobile{display: none;}
h3.titleText {
    font-size: 1.5em; margin-bottom: 0;
}
#screen6 {
    width: 98%;
}
#screen6 .btn2 img{
    height: 64px;
}
.page6 .backToOfficeBtn span{
    padding: 0px;
}
.page6 .PopUpContent {
    font-size: 1rem;
}
.showForDesktop {
    display: block
}
.showForMobile  {
    display: none
}
.page1 .screenBg.showForDesktop {
     height: 90vh;
}
#transcriptModal .modal-dialog, .page7 #transcriptModal .modal-dialog {
     margin: 0 12%;
}
.page1 #transcriptModal .modal-closeBTN {
     right: 2%;
}
.page6 #screen6 a {
    width: 11%;
    height: 37%;
 }
 .page6 #screen6 a.icon_1 {
    left: 10.07%;
    top: 64%;
}
.page6 #screen6 a.icon_2 {
    left: 21.5%;
    top: 4.49%;
}
.page6 #screen6 a.icon_3 {
    left: 33.5%;
    top: 64%;
}
.page6 #screen6 a.icon_4 {
    left: 44%;
    top: 5%;
}
.page6 #screen6 a.icon_5 {
    left: 55.5%;
    top: 63.8%;
}
.page6 #screen6 a.icon_6 {
    left: 67%;
    top: 5%;
}
.page6 #screen6 a.icon_7 {
    left: 78.5%;
    top: 64.86%;
}
.page6 #screen6 a.icon_8 {
    left: 89%;
    top: 4.6%;
}
.page7 .text1 {
    padding-top: 0px;
    font-size: 1.2em;
}
.page7 .videoSlice {
    margin: 15px 16%;
}
.page7 .textBox p {
    font-size: 1rem;
}
.page7 .screenBg.showForDesktop {
    height: auto;
}
.page7 .screenData {
     top: 0%;padding: 0% 3% 5% 3%;
}
.page7 .videoBox {
     margin: 0% 5% 0% 5%;
}

.reniAdebayo .screenData .col-sm-12.col-md-8 {
    width: 96%;
    flex: 0 0 100%;
    max-width: 100%;
}


.page1 #modal1 .modal-dialog {
    max-width: 73% !important;
}
.page2 .passion.disable {
     border: 2px solid #005181;
}
.page3 .headingBg .showForDesktop{display: none}
.page3 .showForMobile.viewMoreBTN {display: block}
.page3 .headingBg { 
    margin-top: 10px;
}
.page3 .instructionText {
    font-size: 1rem;
    margin: 2% 0% 2%;
}
.page3 .btn3 img {
    height: 66px;
}
.selMemJobDetails {
    font-size: 1rem;
}
.headingBg h1 {
    font-size: 1.2rem;
}
.page4 .profileHeader h3 {
    font-size: 1.5em;
}
.page5 .theOfficeBox h2{font-size: 1rem;}
.page5 .screenData h2 {
    margin-top: 0px;padding: 6px 0;
}
.page5 .theOfficeBox {
     min-height: 45px;
}
.page4 .profilePicPlaceholder {
    width: 90px;
    height: 90px;
}
.page4 .btnText {
    padding: 16px;
    font-size: 1rem;
}
.page5 .aniSec2 .screenBg.showForDesktop {
    height: 65vh;
}
.page5 .screenData h2, .page5 .popoupData h2 {
     padding: 5px 5px;
}
.page5 .theOfficeBox.box1  {
    background-size: 11%;
}
.honeYourSkillsBtn.theOfficeBox.box5 {
    min-height: 45px;
}
.page5 .btn3 {
    margin: 0px auto 0;
}
.page5 .slice.textCenter.showForDesktop.mt10{
margin-top: 0;
}
.page5 .slice hr { 
    margin-top: .8rem;
}
.page11 {
    padding: 6% 0 0;
}
.page11 .screenData h2 {
    padding: 10px; 
}
.page11 .screenData {
    top: 0%;
}
.page11 .screenData {
     height: 78%;
}
.page11 .slice.textCenter.showForDesktop.mt10{
    margin: 4px;
}
.page6 #modalPopup .modal-dialog {
    max-width: 72% !important;
}
.page6 .popupData img {
    width: 100px;
    margin-top: -18px;
}
.page6 .popupData {
    width: 100%;
}

.page6 .modal .modal-closeBTN {
    right: 4%;
    top: -7%;
}
.backBtn {
     width: 223px;
}
.page7 .videoSlice {
    margin: 10px 13%;
}
.page7 .videoBox .transcriptBtn {
     font-size: .8rem;
}
.page7 .text1 {
    margin-top: 40px;
}
.page7 .text1 {
    padding-top: 0px;
 }
.backToOfficeBtn span {
    font-size: 1rem;
}
.page7 #transcriptModal .popupData { 
    padding: 15px 0%;  
    margin: 0 4%;
    width: 85%;
}
.page7 #transcriptModal h5 {
    font-size: 1.2em;
    margin-bottom: 0;
}
.page7 #transcriptModal .modal-closeBTN {
    top: -9%;
    right: 6%;
}
.page7 #transcriptModal p {
    font-size: 1rem;
}
.page8 .text1 {
    margin-top: 25px;
}
.page8 .text1.titleText, .page9 .text1.titleText, .page10 .text1.titleText {
    font-size: 1.5rem;
}
.page8 .bgColor2 p {
    font-size: 1rem;
}
.page11 .screenData {
    height: 78%;
    overflow: auto;
}
.page11 .theOfficeBox.tab4 img {
    height: 12vh;
}

.page12 .aniSec1.mt60 {
    margin-top: 25px;
}
.page12 .font18 {
    font-size: 1.2rem;
}
.page12 .text3 {
    font-size: 1.1em;
}
.page12 .mt-M30 {
    margin-top: -28px;
}
.page12 .headingBg {
    padding: 2% 2% 0.5%;
}
.screen12Grid {
    width: 48%;
}
.page12 .theOfficeBox h2 {
    font-size: 1rem;  
    line-height: 20px;
}
.page12 .allMembers .role { 
    min-height: 30vh;
}
.page12 .customRow {
    height: 56vh;
}
.page12 {
     padding: 10px 0 0%;
}
.MenuSection ul li {
    padding: 4px 5px;
}
.MenuSection ul li:last-child {
    width: 100%;
    position: initial;
}
.MenuSection ul {
    margin: 52px 1% 5% 0px;
}
.menuBtn.open span {
    height: 4px;    width: 32px;
}
.menuBtn.open span:first-child {
    -webkit-transform: translateY(9px) rotateZ(45deg);
    -moz-transform: translateY(9px) rotateZ(45deg);
    -ms-transform: translateY(9px) rotateZ(45deg);
    -o-transform: translateY(9px) rotateZ(45deg);
    transform: translateY(9px) rotateZ(45deg);
}
.menuArrow img {
    width: 24px;
}
.MenuSection .menuBtn.open {
    right: 1%;
}
.page3_1Right {
     margin-top: 4%;
}
.page3_1 .headingBg .tabElm_1 {
    font-size: 1.2rem;
}
.page3_1 .headingBg {
    width: 34%;
}
.page3 .pd-10_10_5 {
    padding: 6px 10px 0px;
}
.imgBgPage3_1 {
     width: 30%;
}
.page3_1 .aniSec4.mt-M30{width: 58%; margin: -22px 21% 0;}
.page3_1 .screenData {
    padding: 5% 7% 2%;
    width: 59%;
} 
.page3_1 .btn3 {
    margin: 14px auto 0; 
}
.page3_1 .btnText {
    padding: 25px;
    font-size: 1rem;
}
.item.page3_1 .screenData .top18Per {
     font-size: 1.2em;
}
.bgMobile {
    margin: 0 0%;
    width: 70%;
    padding: 0 15% 0 15%;
}
.page8 .topTipsAudioData {
     width: 98%;
}
.page8 .screenData {
    top: 8px;
    width: 72%;
}
.page9 .text1 {
    padding: 18px 0 1%;
}
.icoHead {
    width: 18%;
    margin: 20px auto 5% auto;
}
.page9 #modalPopup .modal-dialog { 
    width: 92%;
}
.page9 .text.tabElm {
    font-size: 1rem;
}
.page9 .popupData img {
    height: 26vh;
}
.page9 .popupHeaderImages {
    top: -30px;
}
.page9 .popupHeaderImages {
    width: 26vh;
}
.page9 .modal .modal-closeBTN {
    right: 5%;
    top: 0%;
}
.page9 .popupData img {
    height: 30vh;
}
.page9 .popupHeaderImages {
    width: 34vh;
}
.page9 #modalPopup .popupHeaderText {
    /* transform: translate(0%, 50%); */
    width: 100%;
}
.page9 .popupHeaderText .text.tabElm { 
    width: 76%;font-size: 0.8rem;
}
.page9 .popupData img.popupHeaderChar {
    height: 18vh;
    width: auto;
    right:-11%;
    top: -28px;
}
.page9 .popupData .PopUpContent { 
   /* top: 60%;*/
}
.page9 .popupData p {
    font-size: 1rem;
}
.page9 #modalPopup .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
}
.page9 a.tab0 p {
    font-size: 1rem;
}
.screenData h2, .page11 .screenData h2 {
    font-size: 1.2rem;
}
.page11 .mt60 {
    margin-top: 10px;
}
.page10 .mt30.t60mobile{
    flex: 0 0 80%;
    max-width: 80%;
    margin: 30px auto 0;
}
.page10 .screenData img {
    width: 21vh;
    margin-top: -16vh;
}
.page10 .text5 { 
    font-size: 1rem;
    padding: 10px 2% 0% 6%;
    width: 91%; 
}


}